/* Beat the Bot — shared styles for index.html, board.html, staff.html */
:root{
  --bg:#EEF1F8; --surface:#FFFFFF; --sunk:#E3E8F3; --ink:#14213D; --muted:#5A6479; --line:#CBD3E3;
  --accent:#2346D9; --accent-ink:#FFFFFF; --amber:#B97806; --amber-soft:#FCEFD3;
  --good:#1D7F53; --good-soft:#DDF2E7; --bad:#B53A33; --bad-soft:#F8E1DF;
  --p1:#B53A33; --p2:#C46A0E; --p3:#2346D9; --p4:#5A6479;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0D1322; --surface:#161F35; --sunk:#1D2843; --ink:#E7EBF5; --muted:#97A1B8; --line:#2C3956;
  --accent:#7D93FF; --accent-ink:#0D1322; --amber:#F2B53A; --amber-soft:#3A2D10;
  --good:#4FCB8E; --good-soft:#123323; --bad:#F07C72; --bad-soft:#3A1715;
  --p1:#F07C72; --p2:#F2A04A; --p3:#7D93FF; --p4:#97A1B8; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(40px,env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
.wrap{max-width:980px;margin:0 auto;display:grid;gap:18px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.6rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.4rem,3.5vw,2.1rem);font-weight:800}
h3{font-size:1.15rem;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{border:0;border-radius:12px;padding:14px 22px;font-weight:600;font-size:1.05rem;min-height:52px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.topbar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.logos{display:flex;align-items:center;gap:14px;background:#fff;border-radius:12px;padding:8px 14px;width:100%;justify-content:space-between}
.logos img{display:block;height:auto}
.logo-eo{width:min(240px,62%)}
.logo-optit{width:min(96px,28%)}
.clock.over{color:var(--bad)}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand b{font-family:var(--f-display);font-weight:800;font-size:1.2rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,32px)}
.notice{background:var(--amber-soft);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:.92rem}
.error{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 14px;font-size:.92rem}

/* intro */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.intro>*{min-width:0}
.rules{display:grid;gap:10px;margin-top:18px}
.rule{display:flex;gap:12px;align-items:baseline}
.rule span{font-family:var(--f-mono);font-size:.85rem;color:var(--accent);min-width:2.2em}
.target{margin-top:20px;display:flex;align-items:center;gap:14px;background:var(--sunk);border-radius:14px;padding:14px 16px}
.target strong{font-family:var(--f-display);font-size:2.2rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.track{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:14px;text-align:left;display:grid;gap:4px;align-content:start;min-height:112px}
.track b{font-family:var(--f-display);font-size:1.15rem;line-height:1.1}
.track small{color:var(--muted);font-size:.82rem}
.track .for{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.track[aria-pressed="true"]{border-color:var(--accent);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--accent)}
form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label.f{display:grid;gap:6px;font-size:.88rem;font-weight:600}
input[type=text],input[type=email],input[type=tel],input[type=password],select{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%;min-height:50px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 14px;font-size:.92rem;min-height:44px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.consent input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--accent)}

/* play */
.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps i{width:28px;height:8px;border-radius:4px;background:var(--line)}
.steps i.done{background:var(--accent)}
.steps i.now{background:var(--amber)}
.clock{font-family:var(--f-mono);font-size:1.4rem;font-variant-numeric:tabular-nums;color:var(--amber)}
.card{display:grid;gap:12px;margin-top:16px}
.thead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.82rem;color:var(--muted)}
.subject{font-family:var(--f-display);font-size:clamp(1.3rem,3.2vw,2rem);font-weight:600;line-height:1.15;text-wrap:balance}
.body{color:var(--muted);max-width:62ch}
.aibox{border-left:4px solid var(--accent);background:var(--sunk);border-radius:0 12px 12px 0;padding:12px 16px;display:grid;gap:6px}
.choose{display:grid;gap:10px;margin-top:4px}
.prio{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pbtn{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:12px 8px;text-align:left;display:grid;gap:2px;min-height:72px}
.pbtn b{font-family:var(--f-display);font-size:1.5rem;line-height:1}
.pbtn small{font-size:.78rem;color:var(--muted)}
.pbtn[data-p="P1"] b{color:var(--p1)}.pbtn[data-p="P2"] b{color:var(--p2)}.pbtn[data-p="P3"] b{color:var(--p3)}.pbtn[data-p="P4"] b{color:var(--p4)}
.pbtn[aria-pressed="true"],.cbtn[aria-pressed="true"]{border-color:var(--accent);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--accent)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cbtn{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:12px;min-height:52px;font-weight:600}
.decide{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dbtn{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:16px;min-height:76px;font-family:var(--f-display);font-size:1.4rem;font-weight:600}
.dbtn.yes{color:var(--good)}.dbtn.no{color:var(--bad)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tbtn{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:14px 12px;min-height:84px;text-align:left;display:grid;gap:2px}
.tbtn b{font-family:var(--f-display);font-size:1.15rem}
.tbtn small{color:var(--muted);font-size:.8rem}
.actions{display:flex;justify-content:flex-end;gap:10px}

/* survey */
.survey{display:grid;gap:22px}
.q{display:grid;gap:10px}
.q > span{font-family:var(--f-display);font-size:1.15rem;font-weight:600}
.q small{color:var(--muted);font-size:.85rem}
.scorepeek{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.scorepeek b{font-family:var(--f-display);font-size:2.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}

/* result */
.score-head{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.big{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,12vw,7rem);line-height:.9;font-variant-numeric:tabular-nums}
.verdict{font-family:var(--f-display);font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800}
.verdict.win{color:var(--good)}.verdict.lose{color:var(--amber)}
.breakdown{font-family:var(--f-mono);font-size:.82rem;color:var(--muted);margin-top:6px}
.claim{display:grid;gap:10px;justify-items:start;background:var(--accent);color:var(--accent-ink);border-radius:16px;padding:18px 20px}
.claim .code{font-family:var(--f-mono);font-size:clamp(1.9rem,8vw,2.8rem);font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;user-select:all}
.claim .lbl{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.claim.done{background:var(--sunk);color:var(--ink)}
.claimrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;width:100%}
.claimrow > div{display:grid;gap:8px;justify-items:start;min-width:0;flex:1 1 200px}
.claimqr{background:#FFFFFF;padding:10px;border-radius:12px;line-height:0;flex:none}
.claimqr svg{display:block;width:150px;height:150px}
.tierpill{display:inline-block;font-weight:600;font-size:.9rem;padding:4px 10px;border-radius:999px;background:var(--accent-ink);color:var(--accent)}
.claim.done .tierpill{background:var(--surface);color:var(--ink)}
.review{display:grid;gap:10px}
.rv{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.rv>*{min-width:0}
.rv .why{grid-column:1/-1;font-size:.88rem;color:var(--muted)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.76rem;padding:3px 8px;border-radius:6px;margin:0 4px 4px 0}
.tag.ok{background:var(--good-soft);color:var(--good)}
.tag.no{background:var(--bad-soft);color:var(--bad)}
.tag.half{background:var(--amber-soft);color:var(--amber)}
.mark{font-family:var(--f-mono);font-weight:500}
.cta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--sunk);border-radius:14px;padding:16px 18px}

/* leaderboard */
.lb{display:grid;gap:6px}
.lbrow{display:grid;grid-template-columns:2.2em 1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--bg)}
.lbrow>*{min-width:0}
.lbrow .rk{font-family:var(--f-display);font-weight:800;font-size:1.2rem;color:var(--muted)}
.lbrow:nth-child(1) .rk{color:var(--amber)}
.lbrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .nm small{color:var(--muted);margin-left:6px}
.lbrow .tk{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lbrow .sc{font-family:var(--f-mono);font-weight:500;font-size:1.1rem;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);padding:18px;text-align:center;border:1.5px dashed var(--line);border-radius:12px}

/* staff */
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--f-display);font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:980px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
td.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono)}
.heat{display:flex;gap:4px}
.heat button{border:1.5px solid var(--line);background:var(--bg);color:var(--muted);border-radius:8px;padding:5px 8px;font-size:.78rem}
.heat button[aria-pressed="true"][data-h="hot"]{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.heat button[aria-pressed="true"][data-h="warm"]{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
.heat button[aria-pressed="true"][data-h="cold"]{background:var(--sunk);color:var(--ink);border-color:var(--muted)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.92rem;z-index:5}

@media (max-width:760px){
  .intro,.score-head{grid-template-columns:1fr}
  .row2,.tracks{grid-template-columns:1fr}
  .track{min-height:0}
  .prio{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .tri{grid-template-columns:1fr}
  .tbtn{min-height:64px}
  .score-head{gap:8px}
}
@media (prefers-reduced-motion:no-preference){
  .card{animation:in .25s ease-out}
  @keyframes in{from{transform:translateY(6px);opacity:.6}to{transform:none;opacity:1}}
}