/* Same dark console look as Defuse Crew (tokens, fonts and the character animations are copied from its style.css),
   with Mammoth rock blue as the accent. One dark look on purpose. */
:root{
  --bg:#0e1317; --panel:#151c22; --panel-2:#1b242b; --line:#28333c; --fg:#e7ecef; --muted:#8d9ba6;
  --accent:#6cace4; --accent-ink:#06121c; --ok:#4cc38a; --part:#f2c230; --bad:#e2584e; --yellow:#f2c230;
  --f-display:"Saira Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);margin:0}
body{font:15px/1.45 var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 48px;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:8px 14px;font-weight:600}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary,a.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
a{color:var(--accent)}
a.primary{display:inline-block;text-decoration:none;font-weight:700;border-radius:8px;padding:9px 16px}
select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;max-width:100%}
h1,h2,h3{font-family:var(--f-display);letter-spacing:.02em;margin:0;text-wrap:balance}
h2{font-size:22px;font-weight:700}
h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand h1{font-size:34px;font-weight:800;text-transform:uppercase;line-height:1}
.brand h1 span{color:var(--accent)}
.eyebrow{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px;min-width:0;align-content:start}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.live{color:var(--accent);border-color:var(--accent)}
.pill.warn{color:var(--yellow);border-color:var(--yellow)}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.stack{display:grid;gap:16px;min-width:0}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr)}}

/* me */
.me{display:flex;align-items:center;gap:10px}
.me .name{font-weight:600}
.plain{flex:none;width:36px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);font:700 15px var(--f-display);color:var(--muted);aspect-ratio:1;height:36px}
.plain.big{width:52px;height:52px;font-size:20px}

/* game card */
.game-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.matchup{display:flex;align-items:center;gap:10px}
.matchup img{width:40px;height:40px}
.matchup h2{font-size:24px}
.when{font-size:13px;color:var(--muted)}
.group{display:grid;gap:10px;padding-top:4px}
.q{display:grid;gap:6px;padding:10px;border-radius:10px;background:var(--panel-2);min-width:0}
.q-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.q-label{font-weight:600}
.q-pts{font:600 12px var(--f-mono);color:var(--muted);white-space:nowrap}
.q-sub{font-size:13px;color:var(--muted)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 0;min-width:64px;padding:8px 10px;background:var(--bg)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.q select{width:100%}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px}

/* who's picked / everyone's picks */
.who{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.who .chip{display:flex;align-items:center;gap:4px;font-size:13px;padding:2px 8px 2px 2px;border-radius:99px;background:var(--panel-2)}
.table-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
td.hit{color:var(--ok)} td.part{color:var(--part)} td.miss{color:var(--bad)} td.none{color:var(--muted)}
td.hit::after{content:" ✓"} td.part::after{content:" ½"} td.miss::after{content:" ✗"}
tr.answer td{font-weight:700;color:var(--fg);background:rgba(108,172,228,.08)}
.sticky{position:sticky;left:0;background:var(--panel);z-index:1}
tr.answer .sticky{background:#18242e}
.person{display:flex;align-items:center;gap:6px}

/* leaderboard */
.board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.board li{display:grid;grid-template-columns:22px auto 1fr auto;gap:10px;align-items:center;padding:6px 10px;background:var(--panel-2);border-radius:10px}
.board .rank{font:700 16px var(--f-display);color:var(--muted);text-align:center}
.board .pts{font:700 22px var(--f-display);color:var(--accent)}
.board .meta{font-size:12px;color:var(--muted)}
.board li.mine{outline:1px solid var(--accent)}

/* rules */
.rules{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}
.rules li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding:3px 0}
.rules li span:last-child{font-family:var(--f-mono);font-size:12px;color:var(--muted);text-align:right}
.note{font-size:13px;color:var(--muted);margin:0}

.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--accent);border-radius:10px;padding:8px 16px;font-weight:600;z-index:10;max-width:calc(100vw - 32px)}
.toast.err{border-color:var(--bad)}

/* ---------- characters (from Defuse Crew) ---------- */
.av{flex:none;width:36px;height:40px;display:block}
.av svg{width:100%;height:100%;overflow:visible;display:block}
.av.big{width:52px;height:60px}
.av .body{transform-box:fill-box;transform-origin:50% 100%}
.av .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.av .arm{transform-box:view-box}
.mood-idle .body{animation:bob 3.2s ease-in-out infinite}
.mood-happy .body{animation:hop .7s ease-out 2}
.mood-cheer .body{animation:hop .6s ease-out infinite}
.mood-cheer .arm-l{transform-origin:40px 82px;animation:waveL .45s ease-in-out infinite alternate}
.mood-cheer .arm-r{transform-origin:80px 82px;animation:waveR .45s ease-in-out infinite alternate}
.mood-idle .arm-r{transform-origin:80px 82px;animation:fidget 3.2s ease-in-out infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-12px) scale(1.04,.97)}70%{transform:translateY(0) scale(1.05,.94)}}
@keyframes waveL{from{transform:rotate(8deg)}to{transform:rotate(-10deg)}}
@keyframes waveR{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes fidget{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.av *{animation:none!important}}
@media (max-width:520px){.brand h1{font-size:28px}.matchup h2{font-size:20px}}