/* ===================== Экран игрока (телефон, вертикально) ===================== */
html, body { height: 100%; }
body { overscroll-behavior: none; touch-action: manipulation; }

.p-wrap { min-height: 100dvh; max-width: 520px; margin: 0 auto; padding: calc(14px + var(--safe-t)) 16px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; }

/* ---------- Вход ---------- */
#join { justify-content: center; }
.join-hero { text-align: center; padding: 6px 0 4px; }
.join-hero h1 { margin: 14px 0 6px; font-size: clamp(30px, 9vw, 40px); line-height: 1.1; font-weight: 900; }
.join-hero p { margin: 0; font-size: 15px; }
.join-card { padding: 20px; gap: 14px; }

/* Огранённый бриллиант из CSS */
.gem { width: 76px; height: 76px; margin: 0 auto; position: relative; transform: rotate(45deg); border-radius: 18px;
  background: conic-gradient(from 210deg, #e9fdff, #9fe7f0, #ffffff, #b9d4ff, #e6dcff, #a5f0e6, #e9fdff);
  box-shadow: 0 18px 40px -12px rgba(6,107,134,.45), inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -10px 22px rgba(15,181,198,.25);
  animation: gemFloat 5s ease-in-out infinite; }
.gem::after { content: ''; position: absolute; inset: 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,0) 60%); }
@keyframes gemFloat { 50% { transform: rotate(45deg) translate(-4px, -4px); } }

/* ---------- Шапка ---------- */
.p-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; }
.avatar { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--diamond); border: 1px solid rgba(15,181,198,.25); flex: none; }
.p-name { font-weight: 800; font-size: 17px; }
.p-rank { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.p-score { text-align: right; }
.p-score-val { font-size: 26px; font-weight: 900; line-height: 1; color: var(--deep); transition: color .3s; }
.p-score-val.neg { color: var(--bad); }
.p-score-val.bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform: scale(1.25); } }
.p-score-cap { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }

/* ---------- Сцена с кнопкой ---------- */
.p-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 0; min-height: 380px; }
.p-q { min-height: 30px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.p-status { margin-top: 10px; font: 800 22px/1.2 var(--display); max-width: 92%; }
.p-sub { margin-top: 6px; font-size: 14.5px; font-weight: 600; min-height: 20px; max-width: 92%; }

.buzz-zone { position: relative; width: min(68vw, 290px); aspect-ratio: 1; margin: 22px auto 10px; }
.ring { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: rgba(10,42,56,.07); }
.ring-fg { stroke: var(--sea); stroke-linecap: round; stroke-dasharray: 351.86; stroke-dashoffset: 351.86; transition: stroke .3s; }

.buzz { position: absolute; inset: 0; border-radius: 50%; border: 0; padding: 0; cursor: pointer; outline: none;
  background: conic-gradient(from 200deg, #c8f3f7, #8adbe8, #e8fbff, #a9c9ff, #dccfff, #9eeadf, #c8f3f7);
  box-shadow: 0 30px 60px -20px rgba(6,107,134,.55), 0 0 0 10px rgba(255,255,255,.65), inset 0 2px 0 rgba(255,255,255,.9);
  transition: transform .12s ease, filter .3s, box-shadow .3s; user-select: none; -webkit-user-select: none; }
.buzz-face { position: absolute; inset: 9%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 60%), var(--aqua);
  box-shadow: inset 0 -12px 28px rgba(4,60,79,.35), inset 0 6px 14px rgba(255,255,255,.4);
  color: #fff; font: 900 clamp(22px, 7vw, 30px)/1 var(--display); letter-spacing: .04em; text-shadow: 0 2px 10px rgba(4,60,79,.35); }
.buzz:active:not([disabled]) { transform: scale(.95); }
.buzz[disabled] { cursor: default; filter: grayscale(.85) brightness(1.05); box-shadow: 0 16px 40px -20px rgba(6,107,134,.35), 0 0 0 10px rgba(255,255,255,.55); }
.buzz[disabled] .buzz-face { opacity: .55; font-size: clamp(16px, 5vw, 22px); }

body.st-open .buzz { animation: pulse 1.1s ease-in-out infinite; }
body.st-open .buzz-face { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 60%), linear-gradient(135deg, #1ee0c7, #0fb5c6 50%, #0a78a8); }
@keyframes pulse { 0%, 100% { box-shadow: 0 30px 60px -20px rgba(6,107,134,.55), 0 0 0 10px rgba(255,255,255,.65), 0 0 0 10px rgba(15,181,198,.0); } 50% { box-shadow: 0 30px 60px -20px rgba(6,107,134,.55), 0 0 0 10px rgba(255,255,255,.65), 0 0 0 26px rgba(15,181,198,.22); } }
body.st-penalty .ring-fg { stroke: var(--bad); }
body.st-me .buzz { filter: none; }
body.st-me .buzz-face { opacity: 1; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.3) 38%, rgba(255,255,255,0) 60%), linear-gradient(135deg, #ffd34d, #f2b200 55%, #d48a00); }
body.st-me .ring-fg { stroke: var(--gold); }
body.st-ok .buzz-face { opacity: 1; background: linear-gradient(135deg, #34e3a6, #0ea878); }
body.st-bad .buzz-face { opacity: 1; background: linear-gradient(135deg, #ff7d95, #e2385a); }

.p-penalty { min-height: 22px; font-size: 13px; font-weight: 700; color: var(--bad); }

/* ---------- Таблица ---------- */
.p-board { padding: 12px 14px 8px; border-radius: 18px; }
.p-board-head { margin-bottom: 4px; font-size: 14px; }
.leaders { list-style: none; margin: 0; padding: 0; }
.leaders li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; }
.leaders li:first-child { border-top: 0; }
.leaders li.me { color: var(--deep); font-weight: 800; }
.leaders .pos { width: 22px; text-align: center; font-weight: 800; color: var(--muted); }
.leaders .sc { font-weight: 800; font-variant-numeric: tabular-nums; }
.leaders .sc.neg { color: var(--bad); }

/* ---------- Финал ---------- */
.final-place { font: 900 64px/1 var(--display); margin: 10px 0; }

/* Конфетти */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 800; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); } }