/* prose-skip: служебные подписи интерфейса */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--color-ink); overflow: hidden; }
body { font-family: var(--font-text); color: var(--color-cream); }

/* Сцена рисуется в 1920×1080 и масштабируется целиком: размер огромной доски заранее неизвестен */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  background:
    radial-gradient(1200px 700px at 30% 110%, var(--color-soil), transparent 70%),
    var(--color-ink);
  overflow: hidden;
}
.spot { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(10px); }
.spot--wheel { left: 80px; top: 40px; width: 1100px; height: 1000px;
  background: radial-gradient(closest-side, var(--glow-wheat), transparent); }
.spot--host { left: 1240px; top: 380px; width: 620px; height: 700px;
  background: radial-gradient(closest-side, var(--glow-cream), transparent); }

.brand { position: absolute; left: 48px; top: 30px; display: flex; flex-direction: column; gap: 4px; }
.brand__mark { font-family: var(--font-display); font-size: 34px; color: var(--color-wheat); letter-spacing: .01em; }
.brand__sub { font-size: 20px; color: var(--color-cream-dim); }
.round-tag { position: absolute; right: 48px; top: 40px; font-size: 22px; font-weight: 600; color: var(--color-cream-dim); }
.conn { position: absolute; right: 48px; top: 76px; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--color-poppy-deep); font-size: 18px; display: none; }
.conn.on { display: block; }

/* ── арена: колесо, виселица, карточка вопроса ── */
.arena { position: absolute; left: 0; top: 0; width: 1180px; height: 1080px; }
.wheel-wrap { position: absolute; left: 190px; top: 120px; width: 860px; height: 860px; }
.wheel { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(var(--shadow-wheel)); }
.pointer { position: absolute; left: 50%; top: -46px; width: 74px; margin-left: -37px; z-index: 3;
  transform-origin: 50% 16%; filter: drop-shadow(var(--shadow-s)); }
.hub {
  position: absolute; left: 50%; top: 50%; width: 236px; height: 236px; margin: -118px 0 0 -118px;
  border-radius: 50%; border: 10px solid var(--color-wheat-deep);
  background: radial-gradient(circle at 38% 32%, var(--color-loam), var(--color-ink) 72%);
  color: var(--color-wheat); font-family: var(--font-display); font-size: 36px;
  box-shadow: var(--shadow-hub);
  cursor: pointer; z-index: 2; touch-action: manipulation;
}
.hub:disabled { cursor: default; color: var(--color-line); }
.hub:focus-visible { outline: 4px solid var(--color-frost); outline-offset: 8px; }
.hub__label { display: block; }

.gallows { position: absolute; left: 270px; top: 150px; width: 640px; height: 720px; opacity: 0; visibility: hidden; overflow: visible; }
.gallows .d { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-wood .d { stroke: var(--color-wheat-deep); stroke-width: 26; }
.gallows #gRope { stroke: var(--color-cream-dim); stroke-width: 10; }
.fig { stroke: var(--color-cream); stroke-width: 20; }
#figure { transform-origin: 430px 190px; }

.qcard {
  position: absolute; left: 90px; top: 250px; width: 1040px; min-height: 460px;
  padding: 56px 64px; border-radius: var(--radius-l);
  background: linear-gradient(160deg, var(--color-loam), var(--color-soil));
  border: 2px solid var(--color-line);
  box-shadow: var(--shadow-l);
  visibility: hidden; z-index: 4;
}
.qcard__label { font-size: 22px; font-weight: 700; color: var(--color-wheat); margin-bottom: 28px; }
.qcard__text { font-family: var(--font-display); font-size: 58px; line-height: 1.18; color: var(--color-cream); }
.qcard__text .w { display: inline-block; }
.qcard__stamp {
  position: absolute; right: 48px; bottom: -40px; padding: 18px 30px; border-radius: var(--radius-m);
  background: var(--color-poppy); color: var(--color-cream); font-family: var(--font-display); font-size: 34px; line-height: 1.1;
  transform: rotate(-4deg); visibility: hidden; box-shadow: var(--shadow-m);
}
.qcard__stamp small { font-family: var(--font-text); font-size: 20px; font-weight: 600; }

.burst { position: absolute; left: 190px; top: 120px; width: 860px; height: 860px; display: grid; place-content: center;
  text-align: center; visibility: hidden; z-index: 5; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-ink) 40%, transparent); }
.burst__kicker { font-size: 30px; font-weight: 700; color: var(--color-cream); }
.burst__value { font-family: var(--font-display); font-size: 250px; line-height: 1; color: var(--color-wheat);
  text-shadow: var(--shadow-text); }
.burst__note { font-size: 30px; font-weight: 600; color: var(--color-cream); margin-top: 18px; }
.burst.bad .burst__value { color: var(--color-poppy); }
.burst.cold .burst__value { color: var(--color-frost); font-size: 130px; }

/* ── правая колонка: табло и ведущий ── */
.side { position: absolute; left: 1180px; top: 0; width: 740px; height: 1080px; }
.board { position: absolute; left: 0; top: 150px; width: 700px; visibility: hidden; }
.stake { font-size: 24px; color: var(--color-cream-dim); margin-bottom: 18px; }
.stake b { font-family: var(--font-display); font-weight: 400; font-size: 40px; color: var(--color-wheat); margin-left: 10px; }
.hint { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; }
.hint__label { font-size: 20px; font-weight: 600; color: var(--color-cream-dim); }
.hint__text { font-family: var(--font-display); font-size: 48px; color: var(--color-cream); line-height: 1.05; }
.cells { display: flex; gap: var(--gap, 8px); perspective: 900px; }
.cell { position: relative; width: var(--cw, 72px); height: calc(var(--cw, 72px) * 1.24); transform-style: preserve-3d; }
.cell__f, .cell__b {
  position: absolute; inset: 0; border-radius: var(--radius-s); backface-visibility: hidden;
  display: grid; place-items: center; font-family: var(--font-display); font-size: calc(var(--cw, 72px) * .62);
}
.cell__b { background: linear-gradient(180deg, var(--color-sky), var(--color-sky-deep));
  border: 3px solid var(--color-wheat-deep); box-shadow: var(--shadow-cell); }
.cell__f { background: var(--color-cream); color: var(--color-ink); transform: rotateX(180deg);
  border: 3px solid var(--color-wheat); }
.cell.open { transform: rotateX(180deg); }
.cell.burned .cell__f { background: var(--color-poppy); color: var(--color-cream); border-color: var(--color-poppy-deep); }
.verdict { margin-top: 30px; font-family: var(--font-display); font-size: 46px; min-height: 60px; }
.verdict.win { color: var(--color-wheat); }
.verdict.lose { color: var(--color-poppy); }

.host { position: absolute; left: 80px; top: 480px; width: 427px; height: 600px; overflow: visible; }
.host .joint { transform-box: view-box; }
.sleeve { fill: none; stroke: var(--char-suit); stroke-width: 74; stroke-linecap: round; }
.cuff { fill: none; stroke: var(--char-shirt); stroke-width: 44; stroke-linecap: round; }
.skin { fill: var(--char-skin); }
.skin-line { fill: none; stroke: var(--char-skin-line); stroke-width: 8; stroke-linecap: round; }
.cheek { fill: none; stroke: var(--char-cheek); stroke-width: 10; stroke-linecap: round; opacity: .7; }
.jacket { fill: var(--char-suit); }
.lapel { fill: var(--char-satin); }
.shirt { fill: var(--char-shirt); }
.stud { fill: var(--char-stud); }
.bow { fill: var(--char-suit); }
.hair { fill: var(--char-hair); }
.brow { fill: none; stroke: var(--char-brow); stroke-width: 11; stroke-linecap: round; }
.eye { fill: none; stroke: var(--char-eye); stroke-width: 8; stroke-linecap: round; }
.nose { fill: var(--char-skin-shade); }
.mouth { fill: none; stroke: var(--char-mouth); stroke-width: 7; stroke-linecap: round; }
.stache { fill: var(--char-stache); }
.stache-line { fill: none; stroke: var(--char-stache-line); stroke-width: 4; stroke-linecap: round; }
.podium-top { fill: var(--color-wheat); }
.podium-front { fill: var(--color-loam); }
.podium-stripe { fill: var(--color-wheat-deep); }
.podium-text { font-family: var(--font-display); font-size: 40px; fill: var(--color-wheat); letter-spacing: .08em; }

/* ── алфавит ── */
.abc { position: absolute; left: 46px; top: 900px; width: 1100px; display: grid; grid-template-columns: repeat(17, 1fr);
  gap: 6px; visibility: hidden; }
.abc span { height: 64px; border-radius: var(--radius-s); display: grid; place-items: center;
  background: var(--color-soil); border: 2px solid var(--color-line);
  font-family: var(--font-display); font-size: 30px; color: var(--color-cream-dim); }
.abc span.hit { background: var(--color-field); border-color: var(--color-field-deep); color: var(--color-cream); }
.abc span.miss { background: var(--color-poppy-deep); border-color: var(--color-poppy); color: var(--color-cream-dim);
  text-decoration: line-through 4px var(--color-poppy); }

.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.confetti i { position: absolute; width: 14px; height: 26px; border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: reduce) {
  .cell { transition: none; }
}

/* ── лобби, ход, итоги ── */
.lobby { position: absolute; left: 90px; top: 170px; width: 1040px; display: flex; gap: 56px; align-items: center; visibility: hidden; }
.lobby__qr { flex: none; width: 500px; height: 500px; padding: 26px; border-radius: var(--radius-l); background: var(--color-cream);
  box-shadow: var(--shadow-l); }
.lobby__qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.lobby__kicker { font-size: 26px; font-weight: 700; color: var(--color-wheat); margin-bottom: 16px; }
.lobby__title { font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 1.1; color: var(--color-cream); }
.lobby__url { margin-top: 24px; font-size: 26px; font-weight: 600; color: var(--color-cream-dim); word-break: break-all; }
.lobby__count { margin-top: 40px; font-size: 30px; color: var(--color-cream-dim); }
.lobby__count b { font-family: var(--font-display); font-weight: 400; font-size: 96px; color: var(--color-wheat); margin-right: 12px; }

.roster { position: absolute; left: 0; top: 120px; width: 700px; height: 360px; display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 10px; overflow: hidden; visibility: hidden; }
.roster span { padding: 10px 18px; border-radius: var(--radius-pill); background: var(--color-loam); border: 2px solid var(--color-line);
  font-size: 24px; font-weight: 600; color: var(--color-cream); white-space: nowrap; }
.roster span.more { background: transparent; color: var(--color-cream-dim); }

.turn { position: absolute; left: 0; top: 36px; width: 700px; display: flex; align-items: baseline; gap: 14px; visibility: hidden; }
.turn__label { font-size: 22px; font-weight: 600; color: var(--color-cream-dim); }
.turn__name { font-family: var(--font-display); font-size: 44px; color: var(--color-wheat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 470px; }
.turn__group { font-size: 22px; font-weight: 600; color: var(--color-cream-dim); white-space: nowrap; }

.intro { position: absolute; left: 90px; top: 300px; width: 1040px; text-align: center; visibility: hidden; z-index: 6; }
.intro__kicker { display: block; font-size: 34px; font-weight: 700; color: var(--color-cream-dim); }
.intro__name { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 400; font-size: 130px; line-height: 1.05;
  color: var(--color-wheat); text-shadow: var(--shadow-text); overflow-wrap: anywhere; }
.intro__group { display: block; margin-top: 18px; font-size: 36px; font-weight: 600; color: var(--color-cream); }

.final { position: absolute; left: 60px; top: 120px; width: 1100px; height: 940px; visibility: hidden; }
.final__kicker { font-family: var(--font-display); font-size: 56px; color: var(--color-wheat); text-align: center; }
.podium { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; align-items: flex-end; gap: 22px; }
.podium__beam { position: absolute; left: 50%; bottom: 0; width: 560px; height: 900px; margin-left: -280px; pointer-events: none; opacity: 0;
  background: conic-gradient(from 165deg at 50% 0%, transparent, var(--glow-wheat) 12deg, var(--glow-wheat) 18deg, transparent 30deg);
  transform-origin: 50% 0%; }
.pod { position: relative; width: 320px; display: flex; flex-direction: column; align-items: center; }
.pod__who { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 18px; width: 100%; }
.pod__name { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--color-cream);
  overflow-wrap: anywhere; }
.pod--1 .pod__name { font-size: 52px; color: var(--color-wheat); }
.pod__group { margin-top: 6px; font-size: 22px; font-weight: 600; color: var(--color-cream-dim); min-height: 26px; }
.pod__score { margin-top: 8px; font-family: var(--font-display); font-size: 44px; color: var(--color-cream); }
.pod__block { width: 100%; border-radius: var(--radius-m) var(--radius-m) 0 0; display: grid; place-items: start center; padding-top: 22px;
  transform-origin: 50% 100%; box-shadow: var(--shadow-l), var(--shadow-cell); }
.pod__num { font-family: var(--font-display); font-size: 120px; line-height: 1; color: var(--color-ink); opacity: .85; }
.pod--1 .pod__block { height: 380px; background: linear-gradient(180deg, var(--color-wheat), var(--color-wheat-deep)); }
.pod--2 .pod__block { height: 270px; background: linear-gradient(180deg, var(--color-frost), var(--color-sky)); }
.pod--3 .pod__block { height: 190px; background: linear-gradient(180deg, var(--color-poppy), var(--color-poppy-deep)); }
.pod--3 .pod__num { font-size: 96px; }

.rest { position: absolute; left: 0; top: 120px; width: 700px; list-style: none; padding: 0; display: grid; gap: 8px; visibility: hidden;
  counter-reset: place 3; }
.rest li { counter-increment: place; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px;
  padding: 8px 20px; border-radius: var(--radius-s); background: var(--color-soil); }
.rest li::before { content: counter(place); font-family: var(--font-display); font-size: 26px; color: var(--color-cream-dim); }
.rest .r-name { font-size: 24px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest .r-score { font-family: var(--font-display); font-size: 26px; color: var(--color-wheat); }

.mode-lobby :is(.wheel-wrap, .gallows, .qcard, .burst, .board, .abc, .turn, .intro, .final, .rest),
.mode-final :is(.wheel-wrap, .gallows, .qcard, .burst, .board, .abc, .turn, .intro, .lobby, .roster) {
  visibility: hidden !important; }

.lobby__code { margin-top: 28px; font-size: 26px; color: var(--color-cream-dim); }
.lobby__code b { margin-left: 10px; font-family: var(--font-display); font-weight: 400; font-size: 56px; letter-spacing: .12em; color: var(--color-cream); }
.lobby__qr { perspective: 800px; }
.locked { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; gap: 18px; text-align: center; background: var(--color-ink); }
.locked[hidden] { display: none; }
.locked__title { font-family: var(--font-display); font-size: 72px; color: var(--color-wheat); }
.locked__text { font-size: 30px; color: var(--color-cream-dim); }