:root{
  --oranje:#ff6a00;
  --oranje-licht:#fff4ea;
  --ink:#15233b;
  --grijs:#6b7689;
  --lijn:#e6e9f0;
  --kop:#1d3a6b;
  --kop2:#2b4f86;
  --bg:#f4f6fa;
  --kaart:#ffffff;
  --goud:#e8b500;
  --groen:#1f9d57;
  --groen-licht:#e8f6ee;

  /* Type-schaal */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:24px;
  --fs-3xl:30px;

  /* Radius-schaal */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:14px;
  --r-xl:20px;

  /* Minimale raakvlakgrootte (Apple HIG) */
  --tap:44px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-text-size-adjust:100%;
}
.app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;}

/* Status bar-laag (alleen zichtbaar in PWA-standalone met een safe-area inset).
   Dekt de systeembalk af met dezelfde achtergrond als de tabs, zodat content er
   niet doorheen scrollt. In Safari is de inset 0 -> hoogte 0 -> onzichtbaar. */
.statusbar-scrim{
  position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);
  background:var(--bg);z-index:30;pointer-events:none;
}

/* Topbar */
.topbar{
  position:relative;overflow:hidden;z-index:20;
  background:linear-gradient(135deg,var(--kop),var(--kop2));
  color:#fff;padding:calc(env(safe-area-inset-top) + 14px) 18px 12px;
}
.topbar > *{position:relative;z-index:1;}
/* WK-beker-watermerk rechts */
.topbar::after{
  content:"";position:absolute;right:6px;z-index:0;pointer-events:none;
  /* Centreer op de inhoud, niet op de balk incl. safe-area-inset (PWA-notch) */
  top:calc(50% + env(safe-area-inset-top) / 2);
  width:140px;height:140px;
  background:url("header-image.png") center/contain no-repeat;
  transform:translateY(-50%);opacity:.22;
}
.topbar .title{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.3px;}
.topbar .title span{color:var(--oranje);}
.topbar .subtitle{font-size:var(--fs-2xs);opacity:.82;margin-top:2px;}

/* Nu-banner: live / countdown naar volgende wedstrijd */
.nu-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;width:auto;text-align:left;appearance:none;font:inherit;color:inherit;
  margin:10px 14px 0;padding:12px 14px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--lijn);
  box-shadow:0 1px 2px rgba(21,35,59,.04);transition:transform .1s;
}
.nu-banner:active{transform:scale(.99);}
.nu-banner[hidden]{display:none;}
.nu-banner.live{background:var(--oranje-licht);border-color:#ffd8b8;}

.nu-banner .nb-tekst{display:flex;flex-direction:column;min-width:0;gap:3px;}

/* Klein bijschrift-label (eyebrow) — lichter en compact */
.nu-banner .nb-eyebrow{
  display:flex;align-items:center;gap:6px;
  font-size:10px;color:var(--grijs);font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nu-banner.live .nb-eyebrow{color:var(--oranje);}

/* Primaire regel: de wedstrijd zelf */
.nu-banner .nb-wedstrijd{
  font-size:var(--fs-base);color:var(--ink);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Countdown-pill rechts — zachte variant (lichte vulling, oranje tekst, subtiele rand) */
.nu-banner .nb-pill{
  flex-shrink:0;background:var(--oranje-licht);color:var(--oranje);font-weight:700;
  border:1px solid #ffd8b8;
  font-size:var(--fs-2xs);padding:5px 11px;border-radius:999px;line-height:1;white-space:nowrap;
}
/* LIVE-pill juist vol oranje voor de aandacht */
.nu-banner.live .nb-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--oranje);color:#fff;border-color:var(--oranje);
}

/* Pulserende dot (eyebrow + pill in live-state) */
.nu-banner .nb-dot{
  width:9px;height:9px;border-radius:50%;background:var(--oranje);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,106,0,.5);animation:pulse 1.6s infinite;
}
.nu-banner .nb-pill .nb-dot{
  background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulseWit 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,106,0,.5);}
  70%{box-shadow:0 0 0 8px rgba(255,106,0,0);}
  100%{box-shadow:0 0 0 0 rgba(255,106,0,0);}
}
@keyframes pulseWit{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);}
  70%{box-shadow:0 0 0 7px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}

/* Tabs */
.tabs{
  position:sticky;top:env(safe-area-inset-top);z-index:19;
  background:var(--bg);padding:10px 14px 8px;border-bottom:1px solid var(--lijn);
}
.switch{display:flex;background:#e3e8f0;border-radius:var(--r-md);padding:4px;}
.tab{
  flex:1;appearance:none;border:none;background:transparent;color:var(--grijs);
  font:inherit;font-size:var(--fs-base);font-weight:700;min-height:38px;padding:8px 0;
  border-radius:var(--r-sm);cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s;
}
.tab.is-active{background:#fff;color:var(--kop);box-shadow:0 1px 3px rgba(21,35,59,.2);}

main{flex:1;padding:12px 14px 8px;}
.view{display:none;}
.view.is-active{display:block;}

/* Dagblok */
.dag{margin-bottom:14px;}
.dag-kop{display:flex;align-items:center;gap:8px;margin:0 2px 6px;}
.dag-pill{
  background:var(--kop);color:#fff;font-size:var(--fs-2xs);font-weight:800;
  padding:3px 9px;border-radius:var(--r-xl);letter-spacing:.3px;text-transform:uppercase;
}
.dag.weekend .dag-pill{background:var(--kop2);}
.dag.vandaag .dag-pill{background:var(--oranje);}
.dag-lijn{flex:1;height:1px;background:var(--lijn);}

.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(21,35,59,.04);}

/* Wedstrijdrij */
.wed{
  display:grid;grid-template-columns:40px 1fr auto 1fr;align-items:center;gap:8px;
  padding:10px 12px;border-top:1px solid #f1f3f7;cursor:pointer;
  transition:background .12s;
}
.wed:first-child{border-top:none;}
.wed:active{background:#f7f9fc;}
.wed .tijd{font-size:var(--fs-2xs);font-weight:600;color:var(--grijs);text-align:left;font-variant-numeric:tabular-nums;}
.wed .team{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sm);font-weight:600;}
.wed .team .flag{font-size:16px;line-height:1;}
.wed .team .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wed .thuis{justify-content:flex-end;text-align:right;}
.wed .thuis .nm{order:1;}.wed .thuis .flag{order:2;}
.wed .score{
  font-size:var(--fs-base);font-weight:800;color:var(--ink);background:#f1f4f9;border-radius:var(--r-sm);
  padding:3px 9px;min-width:46px;text-align:center;white-space:nowrap;
}
.wed .score.leeg{color:#aab3c2;font-weight:700;background:transparent;}
.wed.nl{background:var(--oranje-licht);}
.wed.nl .tijd{color:var(--oranje);}
.wed.nl .team{color:var(--oranje);font-weight:800;}
.wed.flash{animation:flash 2s ease;}
@keyframes flash{0%,100%{background:transparent;}15%,55%{background:#ffe7cc;}}

/* Stand */
.stand-rij{
  display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--lijn);
  border-radius:var(--r-lg);padding:13px 14px;margin-bottom:9px;cursor:pointer;
  box-shadow:0 1px 2px rgba(21,35,59,.04);transition:transform .1s;
}
.stand-rij:active{transform:scale(.99);}
.stand-rij.is-leider{border-color:#ffe2a8;background:linear-gradient(180deg,#fffaf0,#fff);}
.sr-top{display:flex;align-items:center;gap:12px;}
.stand-rij .pos{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  font-size:var(--fs-sm);font-weight:800;color:#fff;background:var(--kop);
}
.stand-rij .naam{flex:1;min-width:0;font-size:var(--fs-md);font-weight:700;}
.sr-balk{display:block;height:6px;border-radius:3px;background:#eef1f6;overflow:hidden;}
.sr-balk > span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--kop2),var(--kop));transition:width .4s ease;}
.stand-rij.is-leider .sr-balk > span{background:linear-gradient(90deg,#f3c33d,var(--goud));}
.stand-rij .pts{text-align:right;}
.stand-rij .pts .tot{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--kop);line-height:1.1;}
.stand-rij .pts .dag{display:block;font-size:var(--fs-2xs);color:var(--grijs);margin-top:1px;}
.stand-rij .pts .dag b{color:var(--groen);}

/* Positie-badges: alleen de leider valt op (goud), rest donkerblauw */
.pos.rank-1{background:var(--goud);}

/* Modal */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(21,35,59,.55);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;backdrop-filter:blur(2px);}
.overlay[hidden]{display:none;}
.modal{
  background:#fff;width:100%;max-width:520px;border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:88vh;overflow:auto;position:relative;
  padding:24px 18px calc(env(safe-area-inset-bottom) + 20px);
  animation:slideup .22s ease;
}
/* iOS-grabber bovenaan de sheet */
.modal::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:38px;height:5px;border-radius:3px;background:#d7dce5;
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-close{
  position:absolute;top:12px;right:12px;border:none;cursor:pointer;
  background:#f1f4f9;color:var(--grijs);
  width:40px;height:40px;border-radius:50%;font-size:22px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s,transform .1s;
}
.modal-close:active{background:#e6eaf1;transform:scale(.94);}

.m-kop{font-size:var(--fs-xs);color:var(--grijs);font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding-right:44px;}
/* Compacte wedstrijdregel: CODE · vlag · score-badge · vlag · CODE (alles op één rij) */
.m-status,.m-sub{text-align:center;font-size:var(--fs-2xs);color:var(--grijs);font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.m-status{margin-top:30px;}
.m-sub{margin:30px 0 12px;}
.m-wed{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:8px;}
.m-team{display:flex;align-items:center;gap:9px;min-width:0;}
.m-team.thuis{justify-content:flex-end;}
.m-team.uit{justify-content:flex-start;}
.m-team .code{font-size:var(--fs-lg);font-weight:800;color:var(--ink);letter-spacing:.5px;}
.m-team .flag{font-size:28px;line-height:1;}
.m-badge{font-size:var(--fs-xl);font-weight:800;color:#fff;background:var(--kop);letter-spacing:1px;
  border-radius:999px;padding:7px 18px;min-width:64px;text-align:center;white-space:nowrap;}
.m-badge.leeg{background:#eef1f6;color:var(--grijs);}

.voorsp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  border:1px solid var(--lijn);border-radius:var(--r-md);padding:11px 13px;margin-bottom:8px;}
.voorsp .who{font-size:var(--fs-base);font-weight:700;}
.voorsp .pred{font-size:var(--fs-md);font-weight:800;color:var(--ink);text-align:center;}
.voorsp .pred.leeg{color:#aab3c2;font-weight:600;font-size:var(--fs-sm);}
.voorsp .pt{justify-self:end;}
.voorsp .pt{font-size:var(--fs-sm);font-weight:800;border-radius:var(--r-xl);padding:3px 10px;background:#f1f4f9;color:var(--grijs);}
.voorsp .pt.has{background:var(--groen-licht);color:var(--groen);}
.voorsp .pt.perfect{background:var(--oranje);color:#fff;}

/* Stat-modal */
.stat-head{display:flex;align-items:center;gap:12px;margin:6px 0 16px;padding-right:44px;}
.stat-head .pos{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  font-size:var(--fs-lg);font-weight:800;color:#fff;background:var(--kop);
}
.stat-head .nm{flex:1;min-width:0;font-size:var(--fs-xl);font-weight:800;line-height:1.15;}
.stat-head .tot{margin-left:auto;text-align:right;flex-shrink:0;}
.stat-head .tot b{font-size:var(--fs-2xl);color:var(--kop);}
.stat-head .tot span{display:block;font-size:var(--fs-2xs);color:var(--grijs);}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;}
.stat{background:#f7f9fc;border:1px solid var(--lijn);border-radius:var(--r-md);padding:11px 12px;}
.stat .v{font-size:var(--fs-xl);font-weight:800;color:var(--kop);}
.stat .l{font-size:var(--fs-2xs);color:var(--grijs);margin-top:2px;line-height:1.25;}
.stat .l .sub{font-size:.85em;opacity:.8;}
.podium-titel{font-size:var(--fs-xs);color:var(--grijs);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
.podium-rij{display:flex;align-items:center;gap:12px;border:1px solid var(--lijn);border-radius:var(--r-md);padding:12px 13px;margin-bottom:7px;}
.podium-rij .rank{font-size:24px;line-height:1;}
.podium-rij .pick{flex:1;font-size:var(--fs-lg);font-weight:700;}
.podium-rij .pick i{color:var(--grijs);font-weight:600;font-size:var(--fs-base);}
.podium-rij .st{font-size:var(--fs-xs);font-weight:800;border-radius:var(--r-xl);padding:3px 9px;background:#f1f4f9;color:var(--grijs);}
.podium-rij .st.exact{background:var(--oranje);color:#fff;}
.podium-rij .st.top3{background:var(--groen-licht);color:var(--groen);}
.podium-rij .st.open{background:#eef1f6;color:var(--grijs);}

/* Primaire actieknop (uitleg openen) */
.uitleg-link{
  display:block;width:100%;margin-top:8px;
  appearance:none;border:none;cursor:pointer;font:inherit;
  background:linear-gradient(135deg,var(--kop),var(--kop2));color:#fff;
  font-size:var(--fs-sm);font-weight:800;min-height:var(--tap);padding:0 16px;
  border-radius:var(--r-md);box-shadow:0 1px 3px rgba(21,35,59,.18);
  transition:box-shadow .18s,transform .1s;
}
.uitleg-link:active{transform:scale(.98);box-shadow:0 1px 2px rgba(21,35,59,.12);}
.uitleg-titel{font-size:var(--fs-sm);font-weight:800;color:var(--ink);margin:14px 0 6px;}
.uitleg-titel span{color:var(--grijs);font-weight:600;}
.ptab{width:100%;border-collapse:collapse;}
.ptab td{padding:9px 12px;border:1px solid var(--lijn);font-size:var(--fs-sm);}
.ptab td:first-child{border-radius:0;}
.ptab td:last-child{text-align:right;font-weight:800;color:var(--oranje);width:54px;}
.ptab tr:first-child td:first-child{border-top-left-radius:10px;}
.ptab tr:first-child td:last-child{border-top-right-radius:10px;}
.ptab tr:last-child td:first-child{border-bottom-left-radius:10px;}
.ptab tr:last-child td:last-child{border-bottom-right-radius:10px;}
.uitleg-noot{font-size:var(--fs-xs);color:var(--grijs);margin-top:12px;text-align:center;}

.appfoot{font-size:var(--fs-2xs);color:var(--grijs);text-align:center;line-height:1.6;padding:8px 14px calc(env(safe-area-inset-bottom) + 14px);}
.appfoot .next{display:block;font-size:var(--fs-2xs);}
.leeg-msg{text-align:center;color:var(--grijs);font-size:var(--fs-sm);padding:30px 10px;}

/* Zichtbare focus-indicator voor toetsenbord-/VoiceOver-gebruik */
.wed:focus-visible,.stand-rij:focus-visible,.nu-banner:focus-visible,
.tab:focus-visible,.uitleg-link:focus-visible,.modal-close:focus-visible{
  outline:3px solid var(--kop2);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .nu-banner .nb-dot,
  .nu-banner .nb-pill .nb-dot{animation:none;}
  .modal{animation:none;}
  .wed.flash{animation:none;background:#ffe7cc;}
  .sr-balk > span{transition:none;}
}