:root{
  --bg:#f6efe1; --surface:#fffaf1; --surface-2:#efe4cd;
  --ink:#2b2118; --ink-soft:#6b5d4d; --ink-faint:#96876f;
  --accent:#ef6c14; --accent-ink:#fff8ef; --accent-soft:#fbdcc4;
  --good:#3f6b4a; --bad:#9c3b2e;
  --border:#e3d5bd; --shadow:0 10px 28px rgba(43,33,24,0.10), 0 2px 6px rgba(43,33,24,0.06);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c1712; --surface:#252019; --surface-2:#2f2820;
    --ink:#f3e9d8; --ink-soft:#c2b299; --ink-faint:#8a7c66;
    --accent:#ff8c3a; --accent-ink:#241304; --accent-soft:#4a2c14;
    --good:#7fbb8a; --bad:#e08170;
    --border:#3c3325; --shadow:0 10px 28px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
  display:flex; flex-direction:column;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; margin:0; }

#app{ flex:1; display:flex; flex-direction:column; max-width:520px; margin:0 auto; width:100%; }

/* Voortgang bovenin */
.progress-bar{ padding:14px 20px 0; }
.progress-bar .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:6px; }
.progress-bar .track{ height:5px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.progress-bar .fill{ height:100%; background:var(--accent); border-radius:99px; transition:width .25s ease; }

/* Elk scherm */
.screen{ flex:1; display:flex; flex-direction:column; padding:20px; gap:16px; justify-content:center; overflow-y:auto; }
.screen-head{ text-align:center; padding:8px 0 4px; }
.screen-head .eyebrow{ font-size:12px; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.screen-head h1{ font-size:clamp(24px,6vw,32px); }
.screen-head .sub{ font-size:14px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}

/* Hole/minigame hero */
.hero{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:22px; text-align:center; }
.hero .kind-badge{ display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:8px; }
.hero h2{ font-size:24px; }
.hero .drink{ font-size:15px; color:var(--ink-soft); margin-top:6px; }
.hero .note, .hero .extra-rule{
  margin-top:14px; font-size:13.5px; text-align:left; border-radius:10px; padding:11px 13px;
}
.hero .note{ background:var(--bg); border:1px dashed var(--border); color:var(--ink); }
.hero .extra-rule{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink); font-weight:600; }

.quiz-q{ text-align:left; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:13px 14px; margin-top:12px; }
.quiz-q .qtext{ font-size:13.5px; line-height:1.5; margin-bottom:8px; }
.quiz-q details summary{ cursor:pointer; color:var(--accent); font-weight:700; font-size:13px; }
.quiz-q .answer{ margin-top:6px; font-weight:700; color:var(--good); }

/* Spelers */
.row{ display:flex; gap:8px; }
input[type=text]{
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--ink); font-size:15px; font-family:inherit;
}
input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{
  display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  padding:8px 8px 8px 14px; border-radius:999px; font-size:14px; font-weight:600;
}
.chip button{ background:none; border:none; color:var(--ink-faint); font-size:15px; cursor:pointer; padding:4px; }
.chip button:hover{ color:var(--bad); }

/* Score invoer: generieke +/- per speler, vrij (ook negatief) */
.score-list{ display:flex; flex-direction:column; }
.score-row{ display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--border); }
.score-row:last-child{ border-bottom:none; }
.score-row .name{ flex:1; font-weight:600; font-size:15px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.stepper button{ width:36px; height:36px; border:none; background:var(--surface-2); color:var(--ink); font-size:18px; cursor:pointer; }
.stepper button:hover{ background:var(--accent-soft); }
.stepper .val{ width:38px; text-align:center; font-weight:700; font-size:15.5px; }
.stepper .val.neg{ color:var(--good); }
.stepper .val.pos{ color:var(--bad); }

/* Live stand */
.standings{ display:flex; flex-direction:column; }
.standings .srow{ display:flex; align-items:baseline; gap:8px; padding:6px 0; font-size:13.5px; border-bottom:1px solid var(--border); }
.standings .srow:last-child{ border-bottom:none; }
.standings .pos{ width:16px; color:var(--ink-faint); font-weight:700; }
.standings .nm{ flex:1; font-weight:600; }
.standings .tot{ font-weight:700; }

/* Regels */
ol.rules-list, ul.rules-list{ margin:0; padding-left:20px; font-size:14px; line-height:1.6; }
ol.rules-list li, ul.rules-list li{ margin-bottom:8px; }

/* Podium eindscherm */
.podium{ display:flex; align-items:flex-end; gap:8px; justify-content:center; margin:10px 0 6px; }
.podium .pod{ flex:1; max-width:120px; text-align:center; }
.podium .pod .bar{
  background:var(--accent-soft); border:1px solid var(--border); border-radius:10px 10px 0 0;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; font-family:'Fraunces',serif; font-weight:700; color:var(--ink);
}
.podium .pod.first .bar{ height:110px; background:var(--accent); color:var(--accent-ink); }
.podium .pod.second .bar{ height:84px; }
.podium .pod.third .bar{ height:64px; }
.podium .pod .nm{ font-size:13px; font-weight:700; margin-top:8px; }
.podium .pod .tot{ font-size:11.5px; color:var(--ink-soft); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:10px; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--border); }
th{ color:var(--ink-soft); font-weight:600; font-size:11px; text-transform:uppercase; }
td.num{ text-align:right; }

/* Navigatie onderin, blijft altijd zichtbaar */
.nav-bar{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--border); background:var(--surface); }
.btn{
  padding:13px 18px; border-radius:11px; border:none; background:var(--accent); color:var(--accent-ink);
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; flex:1;
}
.btn:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.empty{ color:var(--ink-soft); font-size:14px; text-align:center; padding:20px 0; }