:root{
  --cw-yellow:#ffd84d;
  --deep:#0b2140;
  --deep2:#081523;
  --ink:#0f172a;
  --bg:#f7fafc;
  --muted:#94a3b8;
  --good:#22c55e;
  --bad:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column;
}

.screen{ display:none; min-height:100vh; align-items:center; justify-content:center; padding:20px }
.screen.show{ display:flex }

.panel{
  background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:28px 24px;
  width:min(92vw,640px); text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.panel h1{ margin:0 0 8px; font-size:clamp(28px,3.5vw,40px) }
.tagline{ color:var(--muted); margin:0 0 18px }

.btn{
  background:var(--cw-yellow); border:0; padding:10px 18px; border-radius:12px;
  font-weight:800; cursor:pointer;
}
.btn-outline{ background:transparent; border:2px solid var(--cw-yellow) }
.btn:disabled{ opacity:.6; cursor:not-allowed }

.hud{
  position:sticky; top:0; z-index:2; background:#fff; border-bottom:1px solid #e2e8f0;
  padding:10px 14px; display:flex; gap:18px; align-items:center; justify-content:space-between;
}

.stage-wrap{
  margin:18px auto; width:min(95vw,540px); aspect-ratio:2/3; border-radius:18px; overflow:hidden;
  position:relative; box-shadow:0 10px 30px rgba(0,0,0,.2); outline:2px solid #000;
}
#stage{ width:100%; height:100%; display:block; background:#1f6f2c }

/* Faint lane lines */
.stage-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(to right,
      transparent 0 32%, rgba(255,255,255,.06) 32% 34%, transparent 34% 66%, rgba(255,255,255,.06) 66% 68%, transparent 68% 100%);
  mix-blend-mode:screen;
}

.toast{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  color:#fff; font-weight:800; text-shadow:0 2px 4px rgba(0,0,0,.6);
  opacity:0; transition:opacity .18s;
}

.footer{ text-align:center; color:var(--muted); padding:10px 12px }

/* Confetti */
.confetti{
  position:absolute; width:6px; height:10px; opacity:.9; top:-10px; animation:fall linear forwards;
}
@keyframes fall{ to{ transform: translateY(120vh) rotate(720deg); opacity:1; } }