:root { --bg: #070a1a; --ink: #eef3ff; --dim: #8c96bd; --team: #38e1ff; --hot: #ff4d6d; --gold: #ffb02e; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
body.phone { overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; overscroll-behavior: none;
  background: radial-gradient(120% 70% at 50% 0%, #17204a 0%, var(--bg) 60%); }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

#top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; font-size: 15px; z-index: 5; }
#top b { letter-spacing: .04em; color: var(--dim); font-weight: 600; }
#chip { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--team) 22%, transparent); color: var(--team); font-weight: 700; }
#chip:empty { display: none; }

.v { position: fixed; inset: 0; display: none; padding: calc(env(safe-area-inset-top) + 56px) 16px calc(env(safe-area-inset-bottom) + 16px); }
.v.on { display: flex; flex-direction: column; }
.mid { margin: auto 0; text-align: center; width: 100%; }
h1 { font-size: 30px; margin: 0 0 8px; }
.sub { color: var(--dim); margin: 0 0 22px; font-size: 16px; line-height: 1.35; }
.small { font-size: 14px; margin-top: 26px; }
.spin { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid #26305e; border-top-color: var(--team); animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

#teamBtns { display: flex; flex-direction: column; gap: 12px; }
.team { text-align: left; padding: 18px 18px; border-radius: 18px; background: #11173a; border-left: 6px solid var(--c); display: flex; flex-direction: column; gap: 4px; }
.team b { font-size: 22px; color: var(--c); }
.team small { color: var(--dim); font-size: 14px; line-height: 1.3; }
.team:active { transform: scale(.98); background: #19214f; }

#status { text-align: center; font-size: 17px; color: var(--dim); min-height: 24px; }
#status.go { color: var(--gold); font-weight: 700; }
#hint { text-align: center; color: var(--dim); font-size: 14px; margin: 6px 8px 14px; line-height: 1.35; }
#pad { flex: 1; display: flex; gap: 12px; min-height: 0; }
#pad.gas, #pad.shield { align-items: center; justify-content: center; }
.hold { flex: 1; border-radius: 26px; background: #121a44; color: var(--team); font-size: 64px; font-weight: 800; touch-action: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--team) 45%, transparent); transition: transform .06s, background .06s; }
.hold.round { flex: none; width: min(78vw, 46vh); height: min(78vw, 46vh); border-radius: 50%; font-size: 40px; letter-spacing: .06em; }
.hold.on { background: var(--team); color: #070a1a; transform: scale(.97); box-shadow: 0 0 40px color-mix(in srgb, var(--team) 60%, transparent); }
.hold span { pointer-events: none; }
body.alert .hold.round { animation: al .5s ease-in-out infinite alternate; box-shadow: inset 0 0 0 5px var(--hot), 0 0 50px var(--hot); color: var(--hot); }
body.alert .hold.round.on { background: var(--hot); color: #fff; }
@keyframes al { to { transform: scale(1.04); } }
#rally { margin-top: 14px; height: 72px; border-radius: 20px; background: linear-gradient(90deg, #ff7a1a, #ffb02e); color: #1a0f00; font-size: 26px; font-weight: 900; letter-spacing: .12em; touch-action: none; }
#rally.on { transform: scale(.96); filter: brightness(1.3); }
.link { background: none; color: var(--dim); text-decoration: underline; font-size: 14px; margin-top: 10px; padding: 6px; }

.big { font-size: 84px; font-weight: 900; color: var(--gold); line-height: 1; }
#eBest { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
#eTeams .row { display: flex; justify-content: space-between; padding: 10px 14px; background: #11173a; border-radius: 12px; margin: 6px 0; font-size: 17px; }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
#flash.hit { background: radial-gradient(circle, transparent 30%, rgba(255, 77, 109, .55)); opacity: 1; transition: none; }
#flash.turbo { background: radial-gradient(circle, transparent 30%, rgba(255, 176, 46, .5)); opacity: 1; transition: none; }