: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);
  --km-danger:#8b4f59;
}

*{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}
button{-webkit-tap-highlight-color:transparent}

.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-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);
}

/* FILTERPANEEL */
.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);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%233f455f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:calc(100% - 24px) center;
  background-size:12px 8px;
  background-repeat:no-repeat;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}

.km-field select:focus{
  border-color:rgba(75,82,111,.48);
  background-color:rgba(255,255,255,.52);
}

/* 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-family:'Jura',sans-serif;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease,opacity .16s ease,background .16s ease;
}

.km-round-btn:hover:not(:disabled){
  transform:translateY(-1px);
  background:var(--km-dark);
}

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

/* 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(0,0,0,.12);
}

.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 tr:last-child td,
.km-standings tr:last-child td{
  border-bottom:0;
}

.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-standings tbody tr:nth-child(-n+3) td{
  font-weight:700;
}

.km-badge{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(75,82,111,.15);
  background:rgba(255,255,255,.28);
  font-size:10px;
  line-height:1.25;
  font-weight:700;
  color:var(--km-main);
  vertical-align:middle;
  white-space:nowrap;
}

.km-badge-forfeit{
  color:var(--km-danger);
  border-color:rgba(139,79,89,.22);
}

.km-note{
  margin:17px 2px 0;
  font-size:12px;
  line-height:1.5;
  opacity:.72;
}

.km-message{
  padding:30px 18px;
  text-align:center;
  font-weight:700;
  opacity:.75;
}




/* LOGO */
.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;
  opacity:.94;
  transition:transform .15s ease,opacity .15s ease;
}

.km-history-brand:hover .km-history-logo{
  transform:translateY(-1px);
  opacity:1;
}

/* PARTIJLINK */
.km-games .km-play-head,
.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);
}



/* TERUGKNOP */
.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);
  transition:transform .18s ease,box-shadow .18s ease;
}

.km-history-back:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    0 9px 18px rgba(63,69,95,.11);
}
/* MOBIEL */
@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-history-logo{
    width:64px;
    height:64px;
  }

  .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-table-wrap{
    overflow-x:hidden;
  }

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

  /* UITSLAGEN */

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

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

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

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

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

  .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;
  }

  /* historische badges iets compacter */

  .km-badge{
    margin-left:4px;
    padding:2px 5px;
    font-size:9px;
  }

  /* 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%;
  }

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

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

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

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

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

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