:root{
  --km-dark:#3f455f;
  --km-main:#4b526f;
  --km-soft:#949bb7;
  --km-bg1:#d8dceb;
  --km-bg2:#c7ccdf;
  --km-white:rgba(255,255,255,.32);
  --km-border:rgba(75,82,111,.16);
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
}

body{
  min-height:100vh;
  margin:0;
  padding:34px 18px 60px;

  font-family:'Jura',sans-serif;
  color:var(--km-main);

  background:
    linear-gradient(
      rgba(62,65,71,.47),
      rgba(62,65,71,.47)
    ),
    url("https://api.krakkemat.be/media/algemeen/krakkemat-achtergrond.jpg")
    center center / cover fixed no-repeat;

  background-color:#3e4147;
}

button,
select{
  font:inherit;
}

.km-history{
  width:100%;
  max-width:1080px;
  margin:0 auto;
}

/* HEADER */

.km-history-head{
  position:relative;
  margin-bottom:28px;
  padding:28px 28px 30px;
  text-align:center;
  border:1px solid rgba(75,82,111,.10);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.55),transparent 48%),
    linear-gradient(135deg,rgba(216,220,235,.78),rgba(199,204,223,.72));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 10px 24px rgba(63,69,95,.08);
}

.km-history-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 11px;
  text-decoration:none;
}

.km-history-logo{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
}

.km-history-head h1{
  margin:0;
  font-size:34px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--km-dark);
}

.km-history-head p{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  color:var(--km-main);
}

.km-history-divider{
  width:130px;
  height:1px;
  margin:20px auto 0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(75,82,111,.30),
    transparent
  );
}

/* TERUG */

.km-history-back-wrap{
  display:flex;
  justify-content:center;
  margin:-10px 0 24px;
}

.km-history-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 24px;
  border-radius:16px;
  border:1px solid rgba(75,82,111,.18);
  color:var(--km-dark);
  background:var(--km-bg1);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    0 6px 14px rgba(63,69,95,.08);
}

/* KEUZEBALK */

.km-panel{
  margin-bottom:26px;
  padding:26px;
  border-radius:24px;
  background:
    linear-gradient(135deg,var(--km-bg1),var(--km-bg2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 16px 36px rgba(63,69,95,.10);
}

.km-filter-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(320px,1.25fr);
  gap:14px;
  align-items:end;
}

.km-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.km-field label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--km-dark);
}

.km-field select{
  width:100%;
  min-height:47px;
  padding:11px 42px 11px 14px;
  border:1px solid rgba(75,82,111,.20);
  border-radius:14px;
  outline:none;
  color:var(--km-dark);
  background-color:rgba(255,255,255,.38);
  appearance:none;
  cursor:pointer;
}

/* RONDE NAVIGATIE */

.km-round-nav{
  display:grid;
  grid-template-columns:47px minmax(0,1fr) 47px;
  gap:8px;
  align-items:center;
}

.km-round-btn{
  width:47px;
  height:47px;
  padding:0;
  border:1px solid rgba(75,82,111,.18);
  border-radius:14px;
  color:var(--km-bg1);
  background:var(--km-main);
  font-size:22px;
  font-weight:700;
  cursor:pointer;
}

.km-round-btn:disabled{
  opacity:.32;
  cursor:not-allowed;
}

/* HOOFDINHOUD */

.km-content-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:24px;
  align-items:start;
}

.km-card{
  padding:24px;
  border-radius:20px;
  color:var(--km-dark);
  background:
  linear-gradient(
    145deg,
    rgba(238,240,247,.97),
    rgba(216,220,235,.95)
  );
  border:1px solid var(--km-border);
  box-shadow:0 10px 24px rgba(63,69,95,.05);
}

.km-card-head{
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(75,82,111,.14);
}

.km-card h2{
  margin:0;
  font-size:21px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.045em;
  color:var(--km-dark);
}

.km-meta{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.45;
  color:var(--km-main);
  opacity:.82;
}

/* TABELLEN */

.km-table-wrap{
  width:100%;
  overflow-x:auto;
}

.km-games,
.km-standings{
  width:100%;
  border-collapse:collapse;
}

.km-games th,
.km-games td,
.km-standings th,
.km-standings td{
  padding:11px 8px;
  border-bottom:1px solid rgba(75,82,111,.12);
}

.km-games th,
.km-standings th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.035em;
  color:var(--km-main);
  opacity:.78;
}

.km-games th{
  text-align:left;
}

.km-games .board{
  width:48px;
  text-align:center;
  opacity:.66;
}

.km-games .result{
  width:82px;
  text-align:center;
  font-weight:800;
  white-space:nowrap;
}

.km-standings th,
.km-standings td{
  text-align:right;
}

.km-standings th:nth-child(2),
.km-standings td:nth-child(2){
  text-align:left;
}

.km-standings .pos{
  width:36px;
  text-align:center;
  opacity:.72;
}

.km-play-cell{
  width:44px;
  text-align:center;
}

/* PARTIJLINK — gelijk aan Historiek */

.km-games .km-play-cell{
  width:44px;
  text-align:center;
}

.km-play-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  border-radius:50%;
  color:var(--km-bg1);
  background:var(--km-main);
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  line-height:1;
  transition:transform .15s ease,background .15s ease;
}

.km-play-link:hover{
  transform:translateY(-1px);
  background:var(--km-dark);
}

/* RESPONSIVE */

@media(max-width:820px){

  @media(max-width:820px){

  body{
    padding:16px 8px 40px;
    background-attachment:scroll;
  }

  .km-history-head{
    padding:24px 18px 25px;
    border-radius:20px;
  }

  .km-history-head h1{
    font-size:30px;
  }

  .km-panel{
    padding:17px;
    border-radius:20px;
  }

  .km-filter-grid{
    grid-template-columns:1fr;
  }

  .km-content-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .km-card{
    padding:16px 12px;
  }

  .km-card-head{
    margin-bottom:14px;
    padding-bottom:13px;
  }

  .km-games th:first-child,
  .km-games td.board{
    display:none;
  }

  .km-history-logo{
    width:64px;
    height:64px;
  }


  /* -------------------------
     UITSLAGEN
     ------------------------- */

  .km-table-wrap{
    overflow-x:hidden;
  }

  .km-games{
    width:100%;
    table-layout:fixed;
  }

  .km-games th,
  .km-games td{
    padding:10px 5px;
    font-size:13px;
    overflow-wrap:anywhere;
  }

  /* Wit */
  .km-games th:nth-child(2),
  .km-games td:nth-child(2){
    width:35%;
  }

  /* Zwart */
  .km-games th:nth-child(3),
  .km-games td:nth-child(3){
    width:35%;
  }

  /* Uitslag */
  .km-games th:nth-child(4),
  .km-games td:nth-child(4){
    width:18%;
    text-align:center;
    white-space:nowrap;
  }

  /* Partijlink */
  .km-games th:nth-child(5),
  .km-games td:nth-child(5){
    width:12%;
    text-align:center;
  }

  .km-play-link{
    width:29px;
    height:29px;
    font-size:13px;
  }


  /* -------------------------
     RANGSCHIKKING
     ------------------------- */

  .km-standings{
    width:100%;
    table-layout:fixed;
  }

  .km-standings th,
  .km-standings td{
    padding:10px 3px;
    font-size:13px;
  }

  /* # */
  .km-standings th:nth-child(1),
  .km-standings td:nth-child(1){
    width:7%;
  }

  /* Speler */
  .km-standings th:nth-child(2),
  .km-standings td:nth-child(2){
    width:43%;
    overflow-wrap:anywhere;
  }

  /* Prt */
  .km-standings th:nth-child(3),
  .km-standings td:nth-child(3){
    width:10%;
  }

  /* W */
  .km-standings th:nth-child(4),
  .km-standings td:nth-child(4){
    width:9%;
  }

  /* R */
  .km-standings th:nth-child(5),
  .km-standings td:nth-child(5){
    width:9%;
  }

  /* V */
  .km-standings th:nth-child(6),
  .km-standings td:nth-child(6){
    width:9%;
  }

  /* Pt */
  .km-standings th:nth-child(7),
  .km-standings td:nth-child(7){
    width:13%;
  }

}