/* Two themes. Raceday (default): Kahoot-energy — purple stage on the
   host/projector, bright warm ground on phones. Plain: calm, light,
   low-stimulation. Structural CSS lives in the templates and consumes
   these variables; body classes switch the skin (.host / .player mark
   the surface). All essential pairs are projector-contrast safe. */

body, body.theme-raceday {
  /* one purple stage everywhere: phones match the lecture wall */
  --ink:#2b1168; --panel:#ffffff14; --paper:#ffffff;
  --brass:#ff3d7f; --brass-hi:#ffd23f; --muted:#c4b5e8;
  --optA:#e21b3c; --optB:#1368ce; --optC:#996d00; --optD:#26890c;
  --well:#ffffff1c; --line:#ffffff30;
  --good:#4ade80; --bad:#ff7070;
  --font:-apple-system,'Segoe UI',Verdana,sans-serif;
  --mono:'Courier New',monospace;
  --glow:0 0 18px rgba(255,61,127,.45);
  --bgfx:radial-gradient(2200px 1100px at 50% -20%, #46178f 0%, #25105e 62%);
  --gold:#ffd23f;
}

body.theme-plain {
  --ink:#f7f8fa; --panel:#ffffff; --paper:#1b2430;
  --brass:#24589e; --brass-hi:#1d4488; --muted:#5c6470;
  --optA:#b03030; --optB:#2264ae; --optC:#9a6206; --optD:#2e7d46;
  --well:#e8eaee; --line:#c9ced6;
  --good:#1e7a4e; --bad:#b23b3b;
  --font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --glow:none; --bgfx:none; --gold:#9a6206;
}
body.theme-plain h1 em, body.theme-plain .word { font-style:normal; }

/* ---------- Raceday motion (theme-scoped; Plain stays still) ---------- */
body.theme-raceday .screen.active { animation:fade .3s ease; }
body.theme-raceday.host h1 { text-shadow:0 4px 0 rgba(0,0,0,.3); }
body.theme-raceday .opt { border-radius:14px; font-weight:800;
  box-shadow:0 4px 0 rgba(0,0,0,.28); }
body.theme-raceday.player button.opt:active { transform:translateY(3px);
  box-shadow:0 1px 0 rgba(0,0,0,.28); }
body.theme-raceday .opt.win { outline:5px solid var(--gold);
  box-shadow:0 0 30px rgba(255,210,63,.75), 0 4px 0 rgba(0,0,0,.28);
  animation:winp .5s ease 3; }
@keyframes winp { 50% { transform:scale(1.02); } }
body.theme-raceday .opt.dim { opacity:.32; filter:saturate(.45); }
body.theme-raceday .movers div,
body.theme-raceday .leadchange { animation:zoomin .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes zoomin { from { opacity:0; transform:scale(.6) translateX(-30px); } }
body.theme-raceday .names span { animation:chippop .4s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes chippop { from { transform:scale(.3) translateY(12px); opacity:0; } }
body.theme-raceday .btn { border-radius:12px; text-transform:uppercase;
  letter-spacing:.05em; box-shadow:0 5px 0 rgba(0,0,0,.3); }
body.theme-raceday .timer { background:linear-gradient(90deg,#ff3d7f,#ffd23f); }
body.theme-raceday .toast { box-shadow:var(--glow); }
body.theme-raceday .chartcol { transition:height .7s cubic-bezier(.2,1.2,.3,1); }
body.theme-raceday .block { border:none; }

/* drifting background geometry (host stage only) */
body.theme-raceday.host .geo { position:fixed; opacity:.09; z-index:0;
  animation:drift 30s linear infinite; pointer-events:none; }
@keyframes drift { from { transform:translateY(105vh) rotate(0); }
  to { transform:translateY(-30vh) rotate(170deg); } }
body.theme-plain .geo { display:none; }

/* mascot trundle (Raceday lobby/resume only) */
body.theme-raceday .mascot { position:fixed; bottom:10px; left:24px; z-index:2;
  animation:trundle 11s ease-in-out infinite alternate; pointer-events:none; }
@keyframes trundle { to { transform:translateX(min(46vw, 640px)); } }
body.theme-plain .mascot { display:none; }

/* confetti (Raceday podium) */
.confetti { position:fixed; width:14px; height:24px; top:-40px; z-index:1;
  animation:fall 4.2s linear infinite; pointer-events:none; }
@keyframes fall { to { transform:translateY(115vh) rotate(420deg); } }
body.theme-plain .confetti { display:none; }

/* race lane skins */
.race .car { transition:width 1.1s cubic-bezier(.2,.9,.3,1); }
.race.skin-boats .car { border-radius:13px 26px 26px 13px;
  box-shadow:inset -10px 0 12px -7px rgba(255,255,255,.55); }
.race.skin-karts .car { border-radius:8px 14px 14px 8px; box-shadow:var(--glow); }
.race .car.bump { animation:surge .8s ease 2; }
@keyframes surge { 40% { transform:translateX(6px) scaleX(1.02); } }
body.theme-plain .race .car { transition:none; box-shadow:none; border-radius:13px; }

/* shared: filled vs ghost buttons on any ground */
.btn:not(.ghost) { color:#fff !important; }
body.theme-raceday .btn:not(.ghost) { background:#e0176b; }
.btn.ghost { color:var(--muted) !important; border-color:var(--line) !important; }
body .opt .ct { background:rgba(0,0,0,.35); }
@keyframes fade { from { opacity:0; transform:translateY(6px); } }