/* ============================================================
   WK POULE · Branding showcase
   Reuses theme.css + hub.css (pill header, hero, uline).
   Own identity: pitch green + warm orange, same type system.
   ============================================================ */

:root {
  --accent:      #12914c;   /* pitch green */
  --accent-deep: #0c6e39;
  --accent-soft: rgba(18, 145, 76, 0.12);
  --wk-orange:   #ec6a1e;   /* energy accent */
  --wk-orange-soft: rgba(236, 106, 30, 0.12);
  --paper:       #eef1ed;
}

.wk { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }

/* Hero */
.wk-hero { padding: clamp(130px, 18vh, 190px) var(--gutter) clamp(40px, 6vh, 70px); text-align: center; }
.wk-hero-inner { max-width: 1080px; margin: 0 auto; }
.wk-hero h1 {
  font-family: var(--f-serif); font-weight: 400; font-size: clamp(46px, 8vw, 110px);
  line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; margin-top: 6px;
}
.wk-hero .sub { margin: 28px auto 0; max-width: 560px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.wk-hero .cta { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Section */
.wk-section { padding: clamp(30px, 5vh, 56px) 0; }
.wk-section-head { margin-bottom: 28px; max-width: 640px; }
.wk-section-head h2 {
  font-family: var(--f-serif); font-weight: 500; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin-top: 14px;
}
.wk-section-head p { margin-top: 14px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }

/* ---- Brand kit ---- */
.brandkit { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; }
.kit-card { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.kit-card .kit-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }

/* Logo lockup */
.wk-logo { display: inline-flex; align-items: center; gap: 14px; }
.wk-emblem {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent); color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 8px 20px -8px var(--accent);
}
.wk-emblem svg { width: 34px; height: 34px; }
.wk-wordmark { display: flex; flex-direction: column; line-height: 1; }
.wk-wordmark .wm-1 { font-family: var(--f-serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); }
.wk-wordmark .wm-2 { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }

.logo-variants { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.logo-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--pill); font-weight: 600; font-size: 14px; }
.logo-chip.solid { background: var(--accent); color: #fff; }
.logo-chip.line { border: 1.5px solid var(--ink); color: var(--ink); }
.logo-chip.orange { background: var(--wk-orange); color: #fff; }
.logo-chip .b { width: 16px; height: 16px; border-radius: 5px; background: currentColor; opacity: 0.9; }

/* Swatches */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.swatch { border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); }
.swatch .chip { height: 64px; }
.swatch .meta { padding: 9px 11px; background: var(--ivory); }
.swatch .nm { font-size: 12px; font-weight: 600; color: var(--ink); }
.swatch .hex { font-size: 11px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* Type sample */
.type-sample > div { padding: 8px 0; border-bottom: 1px dashed var(--hair); }
.type-sample > div:last-child { border-bottom: none; }
.type-sample .ts-d { font-family: var(--f-serif); font-weight: 400; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.type-sample .ts-h { font-family: var(--f-serif); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.type-sample .ts-b { font-size: 16px; color: var(--ink-soft); letter-spacing: 0.01em; }
.type-sample .ts-l { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
.type-sample .ts-cap { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }

/* ---- Sample UI: prediction + standings + bracket ---- */
.wk-samples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
.sample { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sample-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.sample-head .st { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.sample-head .badge { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--pill); white-space: nowrap; }
.sample-body { padding: 22px 20px; }

/* Prediction card */
.match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.team { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flag { width: 46px; height: 32px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); display: flex; }
.flag.h { flex-direction: column; }
.flag .s { flex: 1; }
.team .tn { font-weight: 600; font-size: 14px; color: var(--ink); }
.score { display: flex; align-items: center; gap: 10px; }
.stepper { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stepper .val { font-family: var(--f-serif); font-weight: 500; font-size: 38px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; width: 46px; text-align: center; }
.stepper .pm { display: flex; gap: 6px; }
.stepper .pm button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ink-soft); font-size: 15px; display: grid; place-items: center; transition: all 0.15s; }
.stepper .pm button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.score .x { color: var(--ink-mute); font-size: 14px; }
.match-cta { margin-top: 22px; display: flex; gap: 10px; align-items: center; }
.match-cta .when { font-size: 12px; color: var(--ink-mute); margin-left: auto; }

/* Standings */
.stand { width: 100%; border-collapse: collapse; }
.stand th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); padding: 0 8px 10px; }
.stand th.n, .stand td.n { text-align: center; width: 30px; }
.stand td { padding: 9px 8px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stand td.team-c { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.stand td.team-c .flag { width: 26px; height: 18px; border-radius: 4px; }
.stand .pts { font-weight: 700; color: var(--accent); }
.stand tr.qual td.n { color: var(--accent); font-weight: 700; }

/* Bracket teaser */
.bracket { display: flex; gap: 18px; align-items: center; }
.bracket .col { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.bk { background: var(--paper-soft); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bk .flag { width: 22px; height: 15px; border-radius: 3px; }
.bk.win { border-color: color-mix(in oklab, var(--accent) 40%, var(--hair)); background: var(--accent-soft); }
.bk .sc { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bracket .final .bk { background: var(--wk-orange-soft); border-color: color-mix(in oklab, var(--wk-orange) 40%, var(--hair)); }

/* points pills */
.points-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.point-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--hair); font-size: 13px; color: var(--ink); }
.point-pill b { color: var(--accent); font-variant-numeric: tabular-nums; }

.wk-foot { text-align: center; padding: 40px var(--gutter); margin-top: auto; border-top: 1px solid var(--hair); background: var(--paper-2); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .brandkit, .wk-samples { grid-template-columns: 1fr; }
}

/* ============================================================
   WK POULE · Functional standings (ranglijst) — added for live page
   ============================================================ */

/* Header switcher (pool pills in the floating header) */
.pool-switch { display: inline-flex; gap: 4px; background: rgba(24,27,32,0.05); border-radius: var(--pill); padding: 4px; }
.pool-switch a { padding: 7px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1; transition: background 0.2s, color 0.2s; }
.pool-switch a.active { background: var(--accent); color: #fff; }
.pool-switch a:not(.active):hover { color: var(--ink); }

/* Countdown / live chip in hero kicker */
.wk-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--pill); font-size: 13px; color: var(--ink-soft); margin-bottom: 26px; }
.wk-kicker .yr { font-family: var(--f-serif); font-weight: 500; color: var(--ink); }
.wk-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wk-orange); box-shadow: 0 0 0 4px var(--wk-orange-soft); }

/* Round selector pills */
.round-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.round-pill { padding: 9px 16px; border-radius: var(--pill); border: 1px solid var(--hair); background: var(--ivory); font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: all 0.18s var(--ease); white-space: nowrap; }
.round-pill:hover { border-color: var(--accent); color: var(--accent); }
.round-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Speelronde-dropdown: alleen op mobiel (zie media query) */
.round-select { display: none; }

/* Standings board */
.board-card { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.board-head .bt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.board-head .meta { font-size: 12px; color: var(--ink-mute); }
.board-scroll { overflow-x: auto; }

.wk-board { width: 100%; border-collapse: collapse; min-width: 520px; }
.wk-board thead th { position: sticky; top: 0; background: var(--ivory-2); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); padding: 12px 14px; border-bottom: 1px solid var(--hair); cursor: pointer; user-select: none; white-space: nowrap; }
.wk-board thead th.n { text-align: right; }
.wk-board thead th.sortable:hover { color: var(--accent); }
.wk-board thead th.active-sort { color: var(--accent); }
.wk-board tbody td { padding: 11px 14px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; vertical-align: middle; }
.wk-board tbody tr:hover { background: var(--accent-soft); }
.wk-board td.n, .wk-board th.n { text-align: right; }

.wk-rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--ink-soft); background: var(--paper-soft); }
.wk-rank.medal-1 { background: linear-gradient(160deg,#f3d27a,#d2a233); color:#5a4410; }
.wk-rank.medal-2 { background: linear-gradient(160deg,#dfe2e6,#a9adb5); color:#3c4046; }
.wk-rank.medal-3 { background: linear-gradient(160deg,#e6b78a,#c07d44); color:#52301a; }

.wk-diff { font-weight: 600; font-size: 13px; }
.wk-diff.up { color: var(--up); }
.wk-diff.down { color: var(--down); }
.wk-diff.flat { color: var(--ink-mute); }

.wk-part { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wk-ava-wrap { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.wk-avatar { position: absolute; inset: 0; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--paper-soft); box-shadow: inset 0 0 0 1px var(--hair); }
.wk-avatar-mono { position: absolute; inset: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.wk-part-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wk-team { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-person { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-points { font-weight: 700; color: var(--accent); }
.wk-penalty { color: var(--ink-soft); }

.wk-notice { margin: 0 0 18px; padding: 16px 18px; border-radius: var(--r); background: linear-gradient(rgba(236,106,30,0.16), rgba(236,106,30,0.16)), rgba(255,255,255,0.66); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); border: 1px solid color-mix(in oklab, var(--wk-orange) 38%, var(--hair)); color: var(--ink); font-size: 14px; display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.wk-notice:hover { background: linear-gradient(rgba(236,106,30,0.26), rgba(236,106,30,0.26)), rgba(255,255,255,0.78); border-color: color-mix(in oklab, var(--wk-orange) 55%, var(--hair)); }
.wk-notice b { color: var(--wk-orange); }
.wk-notice-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--wk-orange); }
.wk-notice-arr { margin-left: auto; color: var(--wk-orange); font-weight: 700; transition: transform 0.2s var(--ease); }
.wk-notice:hover .wk-notice-arr { transform: translateX(3px); }

/* "Binnenkort" placeholder cards for Fase D content */
.wk-soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.soon-card { background: var(--ivory); border: 1px dashed var(--hair-2); border-radius: var(--r-lg); padding: 26px; text-align: center; color: var(--ink-mute); }
.soon-card .ic { display: inline-grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.soon-card .ic svg { width: 24px; height: 24px; }
.soon-card h3 { font-family: var(--f-serif); font-weight: 600; font-size: 20px; color: var(--ink); margin: 10px 0 6px; letter-spacing: -0.01em; }
.soon-card p { font-size: 13px; line-height: 1.5; }

@media (max-width: 640px) {
  .pool-switch a { padding: 7px 11px; font-size: 12px; }
  /* status-tekst weg op mobiel; CTA + taal passen zo netjes in de balk */
  .wk-updated { display: none; }
  .wk-edit-btn { padding: 8px 13px; font-size: 12px; }
  /* tabs wrappen naar 2×2 i.p.v. horizontaal scrollen */
  .wk-tabs { flex-wrap: wrap; overflow-x: visible; gap: 7px; padding: 9px 0; }
  .wk-tab { padding: 8px 14px; font-size: 13px; }
  /* ranglijst past exact: +/- kolom weg, vaste layout zodat de naam ellipst */
  .wk-board { min-width: 0; width: 100%; table-layout: fixed; }
  .wk-board thead th, .wk-board tbody td { padding-left: 9px; padding-right: 9px; }
  .wk-board thead th[data-sort="diff"], .wk-board tbody td:nth-child(2) { display: none; }
  .wk-board th.n:first-child, .wk-board td.n:first-child { width: 40px; }   /* # */
  .wk-board th.n:last-child,  .wk-board td.n:last-child  { width: 64px; }   /* punten */
  .wk-ava-wrap, .wk-avatar, .wk-avatar-mono { width: 28px; height: 28px; }
  .wk-rank { min-width: 22px; height: 22px; }
  .wk-part { gap: 9px; min-width: 0; }
  .board-head { padding: 13px 16px; }

  /* Speelrondes als nette dropdown i.p.v. losse knoppen; geen auto-carrousel */
  .rank-controls { margin-bottom: 6px; }
  .round-pills { margin-bottom: 0; }
  .round-pills .round-pill { display: none; }
  .round-select {
    display: block; width: 100%; appearance: none; -webkit-appearance: none;
    padding: 11px 40px 11px 15px; border: 1px solid var(--hair); border-radius: var(--pill);
    background-color: var(--ivory); color: var(--ink);
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23586460' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
  }
  .round-select:focus { outline: none; border-color: var(--accent); }
  .rank-controls .carousel-btn { display: none; }
}
@media (max-width: 600px) {
  .wk-person { display: none; }
}

/* ============================================================
   WK · Wedstrijdschema + uitslagen
   ============================================================ */
.match-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

.match-day { margin-top: 26px; }
.match-day:first-of-type { margin-top: 10px; }
.match-day-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.match-day-head .cnt { color: var(--accent); }
.match-day-head::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }

.match-card {
  position: relative; background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 13px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.match-card:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--hair)); box-shadow: var(--shadow); transform: translateY(-1px); }
.match-card.is-finished { background: linear-gradient(180deg, var(--ivory), var(--ivory-2)); }
.match-card.is-live { border-color: color-mix(in oklab, var(--wk-orange) 45%, var(--hair)); }

.m-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-team.home { flex-direction: row-reverse; text-align: right; }
.m-flag { width: 28px; height: 20px; border-radius: 3px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--hair); background: var(--paper-soft); flex-shrink: 0; }
.m-flag-tbd { width: 28px; height: 20px; border-radius: 3px; display: grid; place-items: center; background: var(--paper-soft); color: var(--ink-mute); font-size: 11px; font-weight: 700; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--hair); }
.m-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-name.tbd { color: var(--ink-mute); font-weight: 500; font-size: 12.5px; }
.m-team.win .m-name { color: var(--accent); }
.match-card.is-finished .m-team:not(.win) .m-name { color: var(--ink-soft); }

.m-center { text-align: center; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.m-time { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-score { font-family: var(--f-serif); font-size: 23px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; line-height: 1; }
.m-tag { font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); }
.m-live { color: var(--wk-orange); font-weight: 700; font-size: 10px; letter-spacing: 0.09em; display: inline-flex; align-items: center; gap: 5px; }
.m-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-orange); animation: hb-pulse 1.3s ease-in-out infinite; }

.match-empty { padding: 30px; text-align: center; color: var(--ink-mute); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .match-card { animation: none; }
}
@media (max-width: 560px) {
  .match-grid { grid-template-columns: 1fr; }
  .m-name { font-size: 13px; }
}

/* ============================================================
   WK · Compacte topbalk + paginakop (ranglijst direct zichtbaar)
   ============================================================ */
.wk-bar .hub-brand { color: var(--ink); }
.wk-bar .hub-mark { color: var(--accent); }
.wk-bar-yr { font-family: var(--f-serif); font-weight: 600; color: var(--ink); }
.wk-bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.wk-edit-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--pill); white-space: nowrap; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.wk-edit-btn:hover { background: var(--accent-deep); }
.wk-edit-btn .arr { transition: transform 0.2s var(--ease); }
.wk-edit-btn:hover .arr { transform: translateX(3px); }

.wk-first { padding-top: clamp(20px, 3.5vh, 36px); }
.wk-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.wk-h1 { font-family: var(--f-serif); font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.0; letter-spacing: -0.025em; color: var(--ink); margin-top: 8px; }
.wk-updated { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }

@media (max-width: 620px) {
  .wk-edit-btn { padding: 8px 13px; }
  .wk-first { padding-top: 14px; }
}

/* ============================================================
   WK · Twee kolommen — links uitslagen, rechts komende duels
   ============================================================ */
.wk-matches-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mcol { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mcol-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--hair); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.mcol-head .cnt { color: var(--accent); font-variant-numeric: tabular-nums; }
.mcol-list { display: flex; flex-direction: column; gap: 10px; padding: 16px; max-height: min(70vh, 680px); overflow: auto; }
.mcol-empty { padding: 36px 18px; text-align: center; color: var(--ink-mute); font-size: 14px; line-height: 1.5; }
.mcol-day { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); margin: 6px 2px 2px; }
.mcol-day:first-child { margin-top: 0; }

/* ranglijst volledig uitgeklapt — geen interne scroll */
.board-scroll { max-height: none; overflow-x: auto; overflow-y: visible; }
.wk-board thead th { position: static; }
#standingsSection { padding-bottom: clamp(28px, 4.5vh, 48px); }
#matchesSection .wk-section-head, #tournamentSection .wk-section-head { margin-bottom: 24px; }

@media (max-width: 760px) {
  .wk-matches-2col { grid-template-columns: 1fr; }
  .mcol-list { max-height: 460px; }
}

/* ============================================================
   WK · Kiosk-bord (24/7 scherm) — drie panelen, geen pagina-scroll
   ============================================================ */
.wk-kiosk { height: 100dvh; min-height: 0; overflow: hidden; }
.kiosk {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px;
  padding: 6px var(--gutter) 16px;
}
.kpanel { min-height: 0; display: flex; flex-direction: column; background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.kpanel-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.kp-title { font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.kp-sub { font-family: var(--f-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.kp-meta { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-meta .cnt { color: var(--accent); font-weight: 700; }

.kp-rounds { flex-shrink: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--hair); }
.kp-rounds::-webkit-scrollbar { height: 0; }
.kp-rounds .round-pill { padding: 6px 11px; font-size: 12px; }

.kpanel-body { flex: 1; min-height: 0; overflow: auto; }
/* matches-panelen: verticale lijst */
#upcomingList.kpanel-body, #playedList.kpanel-body { display: flex; flex-direction: column; gap: 9px; padding: 14px; }

/* Ranglijst-tabel compact in het paneel */
.kpanel-rank .kpanel-body { padding: 0; }
.wk-kiosk .wk-board { min-width: 0; }
.wk-kiosk .wk-board thead th { padding: 10px 12px; background: var(--ivory); }
.wk-kiosk .wk-board tbody td { padding: 7px 12px; font-size: 13.5px; }
.wk-kiosk .wk-board th:nth-child(2), .wk-kiosk .wk-board td:nth-child(2),
.wk-kiosk .wk-board th:nth-child(5), .wk-kiosk .wk-board td:nth-child(5) { display: none; }
.wk-kiosk .wk-ava-wrap, .wk-kiosk .wk-avatar, .wk-kiosk .wk-avatar-mono { width: 26px; height: 26px; }
.wk-kiosk .wk-person { font-size: 11px; }

/* Compacte wedstrijdkaart in panelen */
.kpanel .match-card { padding: 9px 12px; gap: 8px; box-shadow: none; }
.kpanel .match-card:hover { transform: none; }
.kpanel .m-name { font-size: 13px; }
.kpanel .mcol-day:first-child { margin-top: 0; }
.kpanel .mcol-empty { padding: 30px 16px; }

/* Stillere scrollbars op het bord */
.kpanel-body::-webkit-scrollbar { width: 6px; }

/* Mobiel / smal: terug naar stapelen met normale scroll */
@media (max-width: 1000px) {
  .wk-kiosk { height: auto; min-height: 100dvh; overflow: visible; }
  .kiosk { grid-template-columns: 1fr; }
  .kpanel { max-height: 78vh; }
}

/* ============================================================
   WK · Focus boven: afgelopen speeldag + komende speeldag
   ============================================================ */
.wk-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.focus-card { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.focus-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--hair); }
.focus-head .ft { font-family: var(--f-serif); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.focus-head .fd { font-size: 13px; font-weight: 600; color: var(--accent); text-transform: capitalize; white-space: nowrap; }
.focus-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.focus-body .match-card { box-shadow: none; }

@media (max-width: 760px) { .wk-focus { grid-template-columns: 1fr; } }

/* ============================================================
   WK · Tabs + groepsstanden + knock-out bracket
   ============================================================ */
.wk-tabsbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); margin-top: 6px; }
.wk-tabs { display: flex; justify-content: center; gap: 6px; overflow-x: auto; padding: 10px 0; }
.wk-tabs::-webkit-scrollbar { height: 0; }
.wk-tab { white-space: nowrap; padding: 9px 18px; border-radius: var(--pill); border: 1px solid var(--hair); background: var(--ivory); font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: all 0.18s var(--ease); }
.wk-tab:hover { color: var(--ink); border-color: var(--accent); }
.wk-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.wk-tabpanel.wk-first { padding-top: clamp(20px, 3vh, 32px); }

/* Groepsstanden */
.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(295px, 1fr)); gap: 12px; align-content: start; }
.group-card { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.group-card-head { padding: 8px 14px; border-bottom: 1px solid var(--hair); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.group-table { width: 100%; border-collapse: collapse; }
.group-table th { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-mute); padding: 6px 5px; border-bottom: 1px solid var(--hair); }
.group-table th.tm { text-align: left; padding-left: 14px; }
.group-table td { text-align: center; padding: 6px 5px; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; border-top: 1px solid var(--hair); }
.group-table td.tm { text-align: left; padding-left: 12px; }
.group-table tr:first-child td { border-top: none; }
.gt-pos { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.group-table tr.qual .gt-pos { background: var(--accent-soft); color: var(--accent); }
.gt-team { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.gt-flag { width: 19px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--hair); flex-shrink: 0; }
.gt-pts { font-weight: 800; color: var(--accent); }

/* Knock-out bracket — kolommen per ronde */
.ko-rounds { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.ko-col { flex: 0 0 clamp(230px, 24vw, 280px); display: flex; flex-direction: column; gap: 12px; }
.ko-col-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding: 2px 2px 4px; }
.ko-match { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 10px 12px; }
.ko-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.ko-row + .ko-row { border-top: 1px dashed var(--hair); }
.ko-row .gt-flag { width: 19px; height: 14px; }
.ko-row .nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ko-row .nm.tbd { color: var(--ink-mute); font-weight: 500; font-style: italic; }
.ko-row .sc { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.ko-row.win .nm { color: var(--accent); }
.ko-match-meta { font-size: 10.5px; color: var(--ink-mute); margin-top: 6px; letter-spacing: 0.03em; }

@media (max-width: 560px) { .group-grid { grid-template-columns: 1fr; } }

/* Topscorers-tabel */
.player-table td.tm { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.player-table .pl-team { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.player-table .pl-goals { font-weight: 800; color: var(--accent); }
.player-table .gt-team { min-width: 0; }
.player-table .gt-team { overflow: hidden; }

/* ============================================================
   WK · 24/7 kiosk — alles op één scherm, geen pagina-scroll
   ============================================================ */
.wk { height: 100dvh; min-height: 0; overflow: hidden; }
.wk-foot { display: none; }

/* actief tabblad vult de resterende hoogte */
.wk-tabpanel:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.wk-tabpanel:not([hidden]) > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 12px; padding-bottom: 14px; }
[data-panel="standings"]:not([hidden]) > .wrap,
[data-panel="matches"]:not([hidden]) > .wrap,
[data-panel="knockouts"]:not([hidden]) > .wrap { max-width: none; }
.wk-tabpanel .wk-section-head { margin-bottom: 0; flex-shrink: 0; }
.wk-tabpanel .wk-section-head h2 { margin-top: 4px; font-size: clamp(20px, 2.4vw, 28px); }
.wk-tabpanel .wk-section-head p { margin-top: 5px; font-size: 13.5px; }
.wk-tabpanel #wkNotice:empty { display: none; }

/* Overzicht: focus vaste hoogte, ranglijst-board vult de rest (carousel) */
[data-panel="overview"] #wkNotice, [data-panel="overview"] .wk-focus, [data-panel="overview"] .rank-controls { flex-shrink: 0; }
[data-panel="overview"] .focus-body { max-height: 24vh; overflow: auto; }
[data-panel="overview"] .board-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
[data-panel="overview"] .board-scroll { flex: 1; min-height: 0; max-height: none; overflow-x: auto; overflow-y: auto; scroll-behavior: auto; }
/* sticky kop blijft boven de scrollende rijen staan (carousel) */
.wk-board thead th { position: sticky; top: 0; z-index: 5; background: var(--ivory); box-shadow: 0 1px 0 var(--hair), 0 6px 8px -6px rgba(0,40,40,0.12); }
.wk-board tbody td { background: var(--ivory); }

/* volledige scroll-regio per tab */
[data-panel="matches"] #matchSchedule,
[data-panel="knockouts"] #koBracket { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
/* Standen scrollt als geheel (groepen + topscorers) */
[data-panel="standings"]:not([hidden]) > .wrap { overflow-y: auto; padding-right: 2px; }
[data-panel="standings"] #groupStandings { flex: 0 0 auto; }

/* Topscorers onder de groepsstanden */
.standings-sub { font-family: var(--f-serif); font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.015em; color: var(--ink); margin: 6px 0 2px; flex-shrink: 0; }
#playersPanel { flex: 0 0 auto; }
#playersPanel .player-table { max-width: 720px; }
#playersPanel .board-card { max-width: 720px; }

/* ronde-pills + carrousel-knop op één rij */
.rank-controls { display: flex; align-items: center; gap: 10px; }
.rank-controls .round-pills { margin: 0; flex: 1; min-width: 0; }
.carousel-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--hair); background: var(--ivory); color: var(--ink-soft); font-size: 13px; font-weight: 600; transition: all 0.18s var(--ease); }
.carousel-btn:hover { border-color: var(--accent); color: var(--accent); }
.carousel-btn.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
.carousel-btn .cb-icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.carousel-btn.playing .cb-icon { width: 9px; height: 11px; border: none; position: relative; }
.carousel-btn.playing .cb-icon::before, .carousel-btn.playing .cb-icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 11px; background: currentColor; border-radius: 1px; }
.carousel-btn.playing .cb-icon::before { left: 0; } .carousel-btn.playing .cb-icon::after { right: 0; }

/* Smallere schermen: gewoon scrollen */
@media (max-width: 900px) {
  .wk { height: auto; min-height: 100dvh; overflow: visible; }
  .wk-tabpanel:not([hidden]) { display: block; }
  .wk-tabpanel:not([hidden]) > .wrap { display: block; }
  [data-panel="overview"] .focus-body { max-height: none; }
  [data-panel="overview"] .board-scroll { max-height: 70vh; }
  .wk-foot { display: block; }
}

/* Ranglijst: smalle cijferkolommen, Deelnemer rekt — netjes in de container */
.wk-board th.n, .wk-board td.n { width: 1%; white-space: nowrap; }
.wk-board th.n { padding-left: 10px; padding-right: 14px; }
.wk-board td.n { padding-left: 10px; padding-right: 14px; }

/* ============================================================
   WK · Subtiele volledig-scherm achtergrond + liquid-glass kaarten
   ============================================================ */
.wk-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/wk-bg.jpg") center center / cover no-repeat;
  opacity: 0.25;
}
/* tekst iets donkerder voor beter contrast over de foto */
.wk { --ink-soft: #33403c; --ink-mute: #586460; }
/* koppen leesbaar over de foto */
.wk .wk-section-head h2, .wk .wk-section-head .eyebrow, .wk .wk-section-head p,
.wk .standings-sub { text-shadow: 0 1px 10px rgba(238,241,237,0.7); }

/* Frosted-glass kaarten: de achtergrond schemert er heel licht doorheen */
.wk .board-card,
.wk .focus-card,
.wk .group-card,
.wk .mcol,
.wk .soon-card,
.wk .ko-match {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
/* sticky kop dekkend (carousel-rijen schuiven er netjes achter); rijen glasachtig */
.wk-board thead th { background: var(--ivory); }
.wk-board tbody td { background: transparent; }
.wk-board tbody tr:hover td { background: var(--accent-soft); }