:root { --bg: #070a1a; --ink: #eef3ff; --dim: #8c96bd; --team: #38e1ff; --hot: #ff4d6d; --gold: #ffb02e; --go: #2fd97a; }
* { 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%; }
#vPick { overflow-y: auto; touch-action: pan-y; }
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: 16px 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; }
#status.alarm { color: var(--hot); font-weight: 900; font-size: 22px; animation: al .4s ease-in-out infinite alternate; }
#hint { text-align: center; color: var(--dim); font-size: 14px; margin: 6px 8px 14px; line-height: 1.35; }
#pad { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; align-items: center; justify-content: center; }
.btn { width: 100%; flex: 1; max-height: 62vh; border-radius: 30px; background: #121a44; color: var(--team); font-size: 46px; font-weight: 900; letter-spacing: .04em; touch-action: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--team) 45%, transparent); transition: transform .06s, background .06s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.btn small { font-size: 16px; font-weight: 600; letter-spacing: 0; opacity: .8; }
.btn.on { background: var(--team); color: #070a1a; transform: scale(.97); box-shadow: 0 0 40px color-mix(in srgb, var(--team) 60%, transparent); }
.btn span, .btn small { pointer-events: none; }
body.alert .btn { animation: al .45s ease-in-out infinite alternate; box-shadow: inset 0 0 0 5px var(--hot), 0 0 50px var(--hot); color: var(--hot); }
body.alert .btn.on { background: var(--hot); color: #fff; }
@keyframes al { to { transform: scale(1.04); } }
#meter { width: 100%; height: 22px; border-radius: 11px; background: #121a44; overflow: hidden; }
#meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--team), var(--hot)); transition: width .1s; }
.link { background: none; color: var(--dim); text-decoration: underline; font-size: 14px; margin-top: 10px; padding: 6px; }
.mic { background: var(--team); color: #070a1a; border-radius: 18px; padding: 16px 22px; font-size: 20px; font-weight: 800; width: 100%; }

/* общая кнопка */
#vAll { align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 55%, #2a1440, var(--bg) 70%); }
#allWhat { font-size: 20px; font-weight: 800; color: var(--gold); text-align: center; margin: 0; min-height: 26px; }
#allBtn { width: min(86vw, 58vh); height: min(86vw, 58vh); border-radius: 50%; background: var(--hot); color: #fff; font-size: 54px; font-weight: 900; touch-action: none;
  box-shadow: 0 0 60px rgba(255, 77, 109, .6), inset 0 -10px 0 rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#allBtn small { font-size: 18px; font-weight: 700; opacity: .9; }
#allBtn span, #allBtn small { pointer-events: none; }
#allBtn.on { transform: scale(.94); filter: brightness(1.25); }
#allBtn.wait { background: #2a3164; box-shadow: none; color: var(--dim); }
#allBtn.jump { background: var(--go); color: #04210f; box-shadow: 0 0 70px rgba(47, 217, 122, .7); animation: al .25s infinite alternate; }
#allBtn.done { background: #1d6b45; color: #d8ffe9; box-shadow: none; animation: none; }
#allBar { width: min(86vw, 420px); height: 18px; border-radius: 9px; background: #1a1f45; overflow: hidden; }
#allBar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--hot)); transition: width .3s; }

.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; z-index: 9; }
#flash.hit { background: radial-gradient(circle, transparent 30%, rgba(255, 77, 109, .55)); opacity: 1; transition: none; }
#flash.good { background: radial-gradient(circle, transparent 30%, rgba(47, 217, 122, .45)); opacity: 1; transition: none; }