:root{
  --color-background:#f5f1e8;
  --color-surface:#ffffff;
  --color-text:#1d1d1d;
  --color-muted:#6b675f;
  --color-primary:#9a4f24;
  --color-secondary:#d4a72c;
  --color-accent:#2f6b4f;
  --color-correct:#2d7d46;
  --color-incorrect:#a5362c;
  --color-warning:#c77a14;
  --color-border:#d8d1c4;
  --shadow-card:0 8px 24px rgba(0,0,0,0.08);
  --radius:14px;
  --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
body.dark{
  --color-background:#211d17;
  --color-surface:#2c2721;
  --color-text:#f0ebe2;
  --color-muted:#a89f92;
  --color-border:#443d33;
  --color-secondary:#e0b53f;
  --shadow-card:0 8px 24px rgba(0,0,0,0.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.5;
  min-height:100vh;
}
/* Signature: bogolan-inspired geometric band */
.band{
  height:10px;
  background:
    repeating-linear-gradient(45deg,var(--color-primary) 0 8px,transparent 8px 16px),
    repeating-linear-gradient(-45deg,var(--color-accent) 0 8px,transparent 8px 16px),
    var(--color-secondary);
  opacity:.9;
}
header.app{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem;gap:1rem;flex-wrap:wrap;
}
header.app h1{
  font-family:var(--font-display);font-size:1.15rem;margin:0;letter-spacing:.02em;
}
header.app .hdr-actions{display:flex;gap:.5rem}
main{max-width:1180px;margin:0 auto;padding:1rem;}
section[data-screen]{display:none}
section[data-screen].active{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
h2{font-family:var(--font-display);font-size:1.7rem;margin:.2rem 0 1rem}
h3{font-family:var(--font-display);margin:.2rem 0 .6rem}
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:1.1rem 1.2rem;
  margin-bottom:1rem;
}
button{
  font-family:inherit;font-size:1rem;
  border-radius:10px;border:1px solid var(--color-border);
  background:var(--color-surface);color:var(--color-text);
  padding:.55rem 1rem;cursor:pointer;
  min-height:44px;
}
button:hover{border-color:var(--color-primary)}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--color-secondary);outline-offset:2px;
}
button.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.good{background:var(--color-correct);color:#fff;border-color:var(--color-correct)}
button.bad{background:var(--color-incorrect);color:#fff;border-color:var(--color-incorrect)}
button.ghost{background:transparent}
button:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
label{font-weight:600;font-size:.92rem}
input[type=text],input[type=number],select{
  font-family:inherit;font-size:1rem;padding:.5rem .6rem;
  border:1px solid var(--color-border);border-radius:8px;width:100%;
  background:var(--color-surface);color:var(--color-text);
}
.field{margin-bottom:.8rem}
.muted{color:var(--color-muted)}
.small{font-size:.85rem}
.tag{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.15rem .55rem;border-radius:999px;
  border:1px solid var(--color-border);color:var(--color-muted);margin-right:.35rem;margin-bottom:.25rem;
}
.tag.pts{background:var(--color-secondary);color:#3a2c05;border-color:transparent}
.alert{
  border-left:5px solid var(--color-incorrect);
  background:color-mix(in srgb,var(--color-incorrect) 8%,var(--color-surface));
  padding:.7rem .9rem;border-radius:8px;margin:.6rem 0;display:none;
}
.alert.show{display:block}

/* HOME */
.hero{
  text-align:center;padding:2.2rem 1rem 1.4rem;
}
.hero h2{font-size:clamp(2rem,5.5vw,3.2rem);margin:.4rem 0 .3rem;line-height:1.1}
.hero .sub{max-width:44rem;margin:0 auto 1.4rem;color:var(--color-muted);font-size:1.05rem}
.hero .kicker{letter-spacing:.28em;text-transform:uppercase;font-size:.75rem;color:var(--color-primary);font-weight:700}
.home-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin-top:1.6rem}
.home-grid .card{margin:0}

/* SETUP */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.mode-card{
  border:2px solid var(--color-border);border-radius:var(--radius);
  padding:.8rem .9rem;cursor:pointer;background:var(--color-surface);text-align:left;min-height:auto;
}
.mode-card.selected{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 25%,transparent)}
.mode-card strong{display:block;font-family:var(--font-display);font-size:1.05rem}
.optrow{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--color-border);border-radius:10px;overflow:hidden}
.seg button{border:none;border-radius:0;min-height:40px}
.seg button.on{background:var(--color-primary);color:#fff}
.names-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.25rem .8rem;margin-top:.4rem}
.checks label{font-weight:400;display:flex;gap:.45rem;align-items:center;font-size:.95rem}
.toggles label{display:flex;gap:.5rem;align-items:center;font-weight:500;margin:.3rem 0}

/* GAME LAYOUT */
.game-wrap{display:grid;grid-template-columns:280px 1fr;gap:1rem}
@media (max-width:900px){.game-wrap{grid-template-columns:1fr}}
.topbar{
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:.6rem 1rem;margin-bottom:1rem;
}
.topbar .who{font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.topbar .spacer{flex:1}
.timerbox{display:flex;align-items:center;gap:.5rem;min-width:160px}
.timernum{font-family:var(--font-num);font-size:1.3rem;font-weight:700;min-width:2.2ch;text-align:right}
.timerbar{flex:1;height:10px;border-radius:999px;background:var(--color-border);overflow:hidden}
.timerbar>div{height:100%;background:var(--color-accent);width:100%;transition:width .2s linear}
.timerbox.urgent .timernum{color:var(--color-incorrect)}
.timerbox.urgent .timerbar>div{background:var(--color-incorrect)}
.scoreboard .row{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.45rem .55rem;border-radius:8px;margin-bottom:.25rem;border:1px solid transparent;
}
.scoreboard .row.current{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,var(--color-surface))}
.scoreboard .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scoreboard .mem{font-weight:400;color:var(--color-muted);font-size:.8rem;display:block}
.scoreboard .sc{font-family:var(--font-num);font-weight:700}
.scoreboard .pend{color:var(--color-accent);font-size:.8rem;font-family:var(--font-num)}
.scoreboard .meta{font-size:.75rem;color:var(--color-muted)}
.lvlsteps{display:flex;gap:.3rem;margin:.4rem 0 .8rem}
.lvlsteps span{
  flex:1;height:8px;border-radius:999px;background:var(--color-border);
}
.lvlsteps span.done{background:var(--color-correct)}
.lvlsteps span.cur{background:var(--color-secondary)}
.qtext{font-family:var(--font-display);font-size:1.35rem;line-height:1.35;margin:.5rem 0 1rem}
.choices{display:grid;gap:.55rem}
.choices button{text-align:left;padding:.7rem .9rem;font-size:1.02rem}
.choices button.picked{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}
.tf{display:flex;gap:.7rem}
.tf button{flex:1;font-size:1.1rem;font-weight:600}
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.tl-item{
  display:flex;align-items:center;gap:.6rem;background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:10px;padding:.55rem .7rem;cursor:grab;
}
.tl-item.dragging{opacity:.5}
.tl-item .lbl{flex:1;font-weight:600}
.tl-item .ord{
  font-family:var(--font-num);font-weight:700;background:var(--color-secondary);
  color:#3a2c05;border-radius:8px;width:1.9rem;height:1.9rem;display:grid;place-items:center;flex-shrink:0;
}
.tl-item .mv{display:flex;gap:.25rem}
.tl-item .mv button{min-height:36px;padding:.2rem .55rem}
.hintline{margin-top:.7rem;padding:.5rem .7rem;border-left:4px solid var(--color-secondary);background:color-mix(in srgb,var(--color-secondary) 12%,var(--color-surface));border-radius:6px;display:none}
.hintline.show{display:block}
.actionbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;align-items:center}
.actionbar .spacer{flex:1}

/* FEEDBACK */
.verdict{font-family:var(--font-display);font-size:1.6rem;font-weight:700;margin:.2rem 0 .6rem}
.verdict.ok{color:var(--color-correct)}
.verdict.no{color:var(--color-incorrect)}
.verdict.part{color:var(--color-warning)}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.4rem .9rem;margin:.6rem 0}
.fb-grid div b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted)}
.explain{border-left:4px solid var(--color-accent);padding:.6rem .8rem;background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface));border-radius:6px;margin:.7rem 0}
.stealnote{border-left:4px solid var(--color-warning);padding:.5rem .8rem;background:color-mix(in srgb,var(--color-warning) 10%,var(--color-surface));border-radius:6px;margin:.7rem 0}

/* TABLES */
table{width:100%;border-collapse:collapse;margin:.5rem 0}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--color-border);font-size:.95rem}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted)}
td.num,th.num{text-align:right;font-family:var(--font-num)}
.trophy{font-family:var(--font-display);font-size:1.9rem;text-align:center;margin:.5rem 0}
.awards{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.8rem 0}
.award{
  border:1.5px solid var(--color-secondary);border-radius:999px;padding:.35rem .8rem;
  font-weight:600;font-size:.9rem;background:color-mix(in srgb,var(--color-secondary) 14%,var(--color-surface));
}
/* REVIEW */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.filters select{width:auto}
.rev-card{border-left:5px solid var(--color-border)}
.rev-card.ok{border-left-color:var(--color-correct)}
.rev-card.no{border-left-color:var(--color-incorrect)}
/* LIGHTNING ROUND */
.lt-bar{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.lt-score{font-family:var(--font-num);font-size:1.6rem;font-weight:700}
.lt-flash{font-weight:700;min-width:5ch}
.lt-flash.ok{color:var(--color-correct)}
.lt-flash.no{color:var(--color-incorrect)}
.lt-bar .spacer{flex:1}
/* GOOGLE CONFIRM */
.google-link{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.9rem;font-weight:600;color:var(--color-accent);
}
.google-link:hover{text-decoration:underline}
/* MODAL */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;
  align-items:center;justify-content:center;padding:1rem;z-index:50;
}
.modal.open{display:flex}
.modal .card{max-width:560px;width:100%;max-height:85vh;overflow:auto;margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){
  .btnrow button,.home-actions button{width:100%}
  .qtext{font-size:1.15rem}
}