/* Dartmiddag: gedeelde stijl voor index.html en spel.html. Eén donkere kroeglook. */
:root{
  --bg:#0F2B22; --deep:#0B211A; --panel:#153A2E; --line:#3F6B58; --cream:#F4EAD0; --muted:#B7C9BE; --soft:#D9E5DC;
  --amber:#F5B02E; --ink:#14110F; --red:#C8233B; --yes:#8FE0AE; --no:#FF8A98;
  --display:'Bowlby One','Arial Black',sans-serif; --body:'Figtree',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--body);font-size:18px;line-height:1.5}
.wrap{max-width:1240px;margin:0 auto;padding-inline:max(16px,4vw)}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.eyebrow{margin:0;font-weight:800;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
h1,h2,h3{text-wrap:balance}
h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,7.2vw,96px);line-height:1;margin:18px 0 26px}
h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.05;margin:12px 0}
a{color:var(--amber);font-weight:800}
.note{margin:0;color:var(--muted);font-size:16px}

/* knoppen en velden */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid var(--ink);background:var(--amber);color:var(--ink);font:800 17px var(--body);text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:none}
.btn-ghost:hover{background:rgba(244,234,208,.12);box-shadow:none}
.btn-big{min-height:68px;font-size:24px;width:100%}
.btn:focus-visible,a:focus-visible,.in:focus-visible,button:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.in{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:600 17px var(--body)}

/* navigatie */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font-family:var(--display);font-size:24px;font-weight:400}
.nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.nav a{color:var(--cream);text-decoration:none;font-weight:700;font-size:16px;padding:10px 4px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--amber)}

/* ticker */
.ticker-wrap{overflow:hidden;background:var(--amber);color:var(--ink);border-bottom:3px solid var(--ink)}
.ticker{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker span{padding:9px 22px;font-weight:800;font-size:14px;letter-spacing:.12em;white-space:nowrap}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* bord */
.board{width:100%;height:auto;display:block}
.dart-in{animation:dartin .28s ease-out;transform-origin:0 0}
@keyframes dartin{from{transform:scale(2.6);opacity:0}to{transform:scale(1);opacity:1}}
.pop{animation:pop .4s ease-out}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.lbl{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.last{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;background:var(--bg);border:2px solid var(--amber);border-radius:20px;padding:16px 22px}
.last .big{font-family:var(--display);font-size:56px;line-height:1;color:var(--amber)}
.last .what{font-size:22px;font-weight:800}
.card{background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}
.paper{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:24px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:12px}
.paper a.btn{align-self:flex-start}

@media (prefers-reduced-motion:reduce){.ticker,.dart-in,.pop{animation:none}html{scroll-behavior:auto}}