:root {
  --bg: #070c08;
  --green: #7bff69;
  --green-deep: #2bb34a;
  --ink: #0c1a10;
  --white: #f4fff2;
  --muted: #8fa392;
  --glass-bg: rgba(12, 22, 14, 0.72);
  --glass-border: rgba(123, 255, 105, 0.22);
  --display: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --gap: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--white); font-family: var(--body); overflow: hidden; }
button, a { font: inherit; color: inherit; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }

.brandbar { position: fixed; z-index: 60; top: var(--gap); left: var(--gap); display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 18px 0 16px; border-radius: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 26px/1 var(--display); letter-spacing: -.6px; text-decoration: none; }
.mark-pill { width: 16px; height: 28px; }
.token { padding-left: 16px; border-left: 1px solid var(--glass-border); }
.token-text { display: flex; flex-direction: column; gap: 3px; }
.token-text strong { font: 600 15px/1 var(--display); }
.token-stats { font: 600 12px/1 var(--body); color: var(--muted); }

.topright { position: fixed; z-index: 60; top: calc(var(--gap) + 12px); right: var(--gap); display: flex; align-items: center; gap: 10px; }
.status-pill, .hbtn, .you-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font: 700 12px/1 var(--display); letter-spacing: .8px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--white); cursor: pointer; }
.status-pill { cursor: default; letter-spacing: 1.2px; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status-pill[data-kind="lobby"] .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.status-pill[data-kind="race"] .dot { background: #fff; box-shadow: 0 0 10px var(--green); animation: pulse 1s infinite; }
.status-pill[data-kind="results"] { color: var(--green); }
.hbtn:hover, .hbtn:active { background: rgba(123,255,105,.16); }
#login-btn, .cta { background: var(--green); color: var(--ink); border: 0; }
#login-btn:active, .cta:active { transform: scale(.98); }
.you-chip { padding-left: 6px; }
.you-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #163; }
#logout-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; }

.prize-chip { position: fixed; z-index: 20; top: 92px; left: var(--gap); display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.pc-k { font: 700 11px/1 var(--body); letter-spacing: 1.4px; color: var(--muted); }
.pc-v { font: 700 22px/1 var(--display); color: var(--green); }

.rail { position: fixed; z-index: 10; top: 96px; right: var(--gap); bottom: var(--gap); width: 250px; padding: 14px 10px; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.rail-head { display: flex; justify-content: space-between; padding: 0 8px 10px; border-bottom: 1px solid var(--glass-border); }
.kicker { font: 700 11px/1 var(--body); letter-spacing: 1.6px; color: var(--green); }
.rail-list { list-style: none; margin: 8px 0 0; padding: 0; overflow: auto; }
.rail-list li { display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 8px; align-items: center; padding: 7px 6px; border-radius: 10px; }
.rail-list li.lead { background: rgba(123,255,105,.1); }
.rail-list canvas { width: 32px; height: 32px; }
.rail-list .rk { color: var(--muted); font: 700 12px var(--display); text-align: center; }
.rail-list strong { font: 700 13px/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-list small { color: var(--muted); font: 600 11px var(--body); }

.ticker { position: fixed; z-index: 20; left: var(--gap); bottom: var(--gap); max-width: min(520px, calc(100vw - 300px)); }
.ticker .bubble { display: flex; gap: 12px; padding: 12px 16px; border-radius: 16px; align-items: center; }
#ticker-pill { width: 52px; height: 52px; }
.lead-tag { font: 700 10px/1 var(--body); letter-spacing: 1.2px; color: var(--ink); background: var(--green); padding: 4px 8px; border-radius: 999px; }
.ticker-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ticker-text { margin: 0; color: #d5e6d4; font: 500 14px/1.35 var(--body); }

.bigcount { position: fixed; inset: 0; display: grid; place-items: center; font: 700 160px/1 var(--display); pointer-events: none; z-index: 15; text-shadow: 0 0 40px rgba(123,255,105,.45); }
.banner { position: fixed; left: 50%; top: 28%; transform: translateX(-50%); z-index: 25; text-align: center; background: var(--glass-bg); border: 1px solid var(--green); padding: 18px 28px; border-radius: 16px; }
.banner-kicker { display: block; color: var(--green); letter-spacing: 2px; font: 700 12px var(--body); }
.banner strong { display: block; font: 700 36px/1.1 var(--display); margin: 6px 0; }
.banner-sub { color: var(--muted); }

.overlay { position: fixed; inset: 0; z-index: 40; overflow: auto; isolation: isolate; }
.overlay[hidden] { display: none !important; }
#entry {
  background:
    radial-gradient(1100px 640px at 8% -8%, rgba(123,255,105,.08), transparent 52%),
    #070c08;
}
#results { background: #070c08; }
.boot { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #16351a, var(--bg) 70%); z-index: 80; }
.boot.open { display: grid; }
.boot.gone, .boot[hidden] { display: none !important; }

body[data-phase="ENTRY"] #stage,
body[data-phase="ENTRY"] .prize-chip,
body[data-phase="ENTRY"] .ticker,
body[data-phase="ENTRY"] .rail,
body[data-phase="ENTRY"] .banner,
body[data-phase="ENTRY"] .bigcount,
body[data-phase="ENTRY"] #phase-pill,
body[data-phase="ENTRY"] #results,
body[data-phase="ENTRY"] #norace { display: none !important; }
body[data-phase="RESULTS"] #stage,
body[data-phase="RESULTS"] .prize-chip,
body[data-phase="RESULTS"] .ticker,
body[data-phase="RESULTS"] .rail,
body[data-phase="RESULTS"] .bigcount,
body[data-phase="RESULTS"] #norace { display: none !important; }
body[data-empty="1"] #stage,
body[data-empty="1"] .prize-chip,
body[data-empty="1"] .ticker,
body[data-empty="1"] .rail,
body[data-empty="1"] .bigcount { display: none !important; }
.boot-inner { text-align: center; }
.boot-pill { width: 72px; height: 120px; filter: drop-shadow(0 0 24px rgba(123,255,105,.55)); animation: bob 2.4s ease-in-out infinite; }
.boot-word { font: 700 48px/1 var(--display); margin-top: 14px; }
.boot p { color: var(--muted); }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes pulse { 50% { opacity: .4; } }

.entry-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; max-width: 1180px; margin: 100px auto 48px; padding: 0 24px; position: relative; z-index: 1; }
.entry-eyebrow { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.eyebrow { letter-spacing: 2px; font: 700 12px var(--body); color: var(--muted); }
.entry-status { display: inline-flex; gap: 8px; align-items: center; color: var(--green); font: 700 12px var(--display); letter-spacing: 1px; }
.entry-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.prize-hero { margin: 10px 0 22px; }
.prize-kicker { color: var(--muted); letter-spacing: 1.4px; font: 700 12px var(--body); }
.prize-amount { display: flex; align-items: baseline; gap: 10px; }
.prize-num { font: 700 72px/1 var(--display); color: var(--green); }
.prize-unit { font: 700 22px var(--display); }
.prize-sub { color: var(--muted); margin-top: 8px; max-width: 34ch; font: 600 15px/1.4 var(--body); }
.cd-label { display: block; color: var(--muted); letter-spacing: 1.4px; font: 700 12px var(--body); }
.cd-num { font: 700 48px/1 var(--display); font-variant-numeric: tabular-nums; }
.host-bubble { margin-top: 24px; max-width: 36ch; font: 600 18px/1.4 var(--display); }
.howto, .grid-wrap { padding: 18px; border-radius: 16px; margin-bottom: 16px; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.howto-steps li { display: flex; gap: 12px; align-items: flex-start; color: #cfe0ce; }
.step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--ink); font: 700 13px var(--display); flex: none; }
.howto-actions { margin-top: 16px; display: grid; gap: 10px; }
.cta { display: inline-flex; justify-content: center; padding: 14px 18px; border-radius: 12px; font: 700 15px var(--display); cursor: pointer; }
#enter-form { display: grid; gap: 8px; }
#enter-form[hidden] { display: none !important; }
textarea { width: 100%; min-height: 72px; border-radius: 12px; border: 1px solid var(--glass-border); background: #0e1610; color: var(--white); padding: 12px; resize: vertical; }
.howto-note { color: var(--muted); font-size: 13px; margin: 0; }
.grid-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
#grid-count { color: var(--muted); font: 700 12px var(--body); }
.grid { display: flex; flex-wrap: wrap; gap: 10px; min-height: 80px; }
.grid-empty { margin: 8px 0 0; color: var(--muted); font: 500 14px/1.45 var(--body); max-width: 36ch; }
.starter { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.starter canvas { width: 48px; height: 48px; }
.starter-h { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px/1.2 var(--body); color: #cfe0ce; text-align: center; }
.starter.me { filter: drop-shadow(0 0 8px rgba(123,255,105,.45)); }
.starter.me .starter-h { color: var(--green); }

.norace-inner { max-width: 560px; margin: 18vh auto; padding: 0 24px; text-align: center; }
.norace-inner h1 { font: 700 40px/1.1 var(--display); margin: 10px 0 16px; }
.norace-inner p { color: #cfe0ce; font: 500 16px/1.5 var(--body); }
.results-inner { max-width: 720px; margin: 100px auto; padding: 0 24px; text-align: center; }
.res-title { font: 700 40px/1.1 var(--display); }
.res-wins { color: var(--muted); font-size: .6em; }
.payout { margin: 20px 0 28px; }
.payout-k { display: block; color: var(--muted); letter-spacing: 1.4px; font: 700 12px var(--body); }
#payout-val { display: block; font: 700 42px var(--display); color: var(--green); }
.podium { display: flex; justify-content: center; gap: 18px; align-items: end; }
.pod { display: grid; justify-items: center; gap: 6px; }
.pod canvas { width: 64px; height: 64px; }
.pod .blk { background: #14351c; padding: 10px 18px; border-radius: 10px 10px 0 0; font: 700 18px var(--display); }
.pod.p1 .blk { background: var(--green); color: var(--ink); padding: 22px 22px 10px; }
.next-race { display: inline-block; margin-top: 28px; color: var(--green); font-weight: 700; }

.sheet { width: min(480px, 92vw); border: 1px solid var(--glass-border); background: #0e1610; color: var(--white); border-radius: 16px; padding: 0; }
dialog.sheet { z-index: 80; }
dialog.sheet::backdrop { background: rgba(4, 8, 5, .72); }
.auth-lead { color: #cfe0ce; margin: 0 0 16px; font: 500 14px/1.45 var(--body); }
.auth-wallets { display: grid; gap: 8px; }
.wallet-btn { width: 100%; }
.auth-mobile { display: block; text-align: center; margin-top: 14px; color: var(--green); font-weight: 700; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--glass-border); }
.sheet-head h2 { margin: 0; font: 700 20px var(--display); }
.sheet-head button { background: transparent; border: 1px solid var(--glass-border); color: var(--muted); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.sheet-body { padding: 16px 18px 24px; }
#lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#lb-list li { display: flex; justify-content: space-between; padding: 8px 10px; background: rgba(255,255,255,.04); border-radius: 10px; }
.empty { color: var(--muted); }

@media (max-width: 900px) {
  .rail, .ticker { display: none; }
  .entry-inner { grid-template-columns: 1fr; margin-top: 72px; }
  .prize-num { font-size: 48px; }
  .topright .hbtn#lb-btn { display: none; }
}