:root {
  --bg: #16131f;
  --panel: rgba(38, 31, 58, .78); /* полупрозрачные панели поверх фона */
  --panel-solid: #221d30;
  --text: #f3eefc;
  --muted: #a79fbd;
  --accent: #ff7a59;
  --accent-text: #1a0f0b;
  --left: #3fb8c9;
  --right: #f0a04b;
  --ok: #67d391;
  --warn: #ffcf5c;
  --z2: rgba(255, 230, 120, .55);
  --z3: rgba(255, 170, 70, .8);
  --z4: #ff5a4e;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3 { margin: .4em 0; line-height: 1.15; }
.center { text-align: center; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }

button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius);
  padding: .7em 1.4em;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
}
button:disabled { opacity: .4; cursor: default; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid #ffffff22; }
button.link { background: none; padding: 0; color: var(--muted); text-decoration: underline; font-weight: 400; }
button.big { display: block; width: 100%; padding: .9em; font-size: 1.15em; margin: 16px 0; }

input, select {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid #ffffff22;
  border-radius: var(--radius);
  padding: .6em .8em;
}
input { width: 100%; margin-top: 6px; }
label { display: block; margin: 12px 0; }

.round { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .8em; }
.clue { font-size: 2em; font-weight: 700; text-align: center; margin: 12px 0 0; overflow-wrap: anywhere; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chips.center { justify-content: center; }
.chip { background: var(--panel); padding: .35em .8em; border-radius: 999px; }
.chip.off { opacity: .45; }
.chip.ready { background: color-mix(in srgb, var(--ok) 25%, var(--panel)); color: var(--ok); }
.chip .x { background: none; color: var(--muted); padding: 0 .2em; }

.soft { text-align: center; color: var(--warn); }

/* ---------- шкала ---------- */

.scale { margin: 28px 0 20px; }
.scale.has-markers { margin-bottom: 104px; }
.ends { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 8px; }
.ends span:first-child { color: var(--left); }
.ends span:last-child { color: var(--right); text-align: right; }

.track {
  position: relative;
  height: 56px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--left), #6b5f86 50%, var(--right));
}
.clip { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); }
.zone { position: absolute; top: 0; bottom: 0; }
.zone.z2 { background: var(--z2); }
.zone.z3 { background: var(--z3); }
.zone.z4 { background: var(--z4); }
.target-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }

.marker { position: absolute; top: -6px; height: 68px; width: 4px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--bg); }
.marker span {
  position: absolute; left: 50%; top: 74px; transform: translateX(-50%);
  white-space: nowrap; font-size: .8em; background: var(--panel); padding: 1px 8px; border-radius: 8px;
}
.marker.row1 span { top: 100px; }
.marker.row2 span { top: 126px; }

/* Ползунок шире трека на половину бегунка с каждой стороны,
   чтобы центр бегунка при value=v совпадал с v% трека */
.dial {
  position: absolute; top: 0; height: 100%;
  left: -14px; width: calc(100% + 28px);
  margin: 0; padding: 0; border: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  touch-action: none;
}
.dial::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.dial::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 76px; margin-top: -10px;
  border-radius: 10px; background: #fff; border: 4px solid var(--accent);
  box-shadow: 0 4px 12px #0008;
}
.dial::-moz-range-track { height: 100%; background: transparent; }
.dial::-moz-range-thumb {
  width: 20px; height: 68px;
  border-radius: 10px; background: #fff; border: 4px solid var(--accent);
  box-shadow: 0 4px 12px #0008;
}

/* ---------- счёт и результаты ---------- */

.scores { list-style: none; padding: 0; margin: 0; }
.scores li { display: flex; justify-content: space-between; padding: .45em .2em; border-bottom: 1px solid #ffffff12; }
.scores li.off { opacity: .5; }

.results { margin: 16px auto; border-collapse: collapse; width: auto; min-width: min(340px, 100%); }
.results td.name { white-space: nowrap; }
.results td.pts { text-align: right; font-weight: 700; padding-left: 40px; }
.results td { padding: .4em .8em; border-bottom: 1px solid #ffffff12; }
/* самый точный — цветом, без значков */
.results tr.best td:first-child { color: var(--warn); font-weight: 700; }

.bet { background: var(--panel); border-radius: var(--radius); padding: 12px 16px; margin-top: 20px; }
.bet h3 { margin-top: 0; font-size: 1em; }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { background: var(--bg); color: var(--text); border: 1px solid #ffffff22; padding: .5em 1em; }
.opt.on { background: var(--accent); color: var(--accent-text); }
.summary { font-size: 1.3em; }

.offline-banner {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--warn); color: #000; text-align: center; padding: 8px;
}
body.offline .offline-banner { display: block; }
.offline-banner button { margin-left: 8px; padding: .3em .9em; background: #000; color: var(--warn); }

/* Кнопка «переподключиться» на телефоне — на случай, если что-то зависло */
.reconnect-fab {
  position: fixed; right: 12px; bottom: 12px; z-index: 30;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--panel); color: var(--muted); border: 1px solid #ffffff22;
  font-size: 1.2em; opacity: .6;
}
.reconnect-fab:active { opacity: 1; }
body.offline .reconnect-fab { display: none; } /* на плашке своя кнопка */
.phone #app { padding-bottom: 72px; }

.small { font-size: .85em; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
button.wide { display: block; width: 100%; }

/* ---------- меню игр ---------- */

.game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.game-card { background: var(--panel); border-radius: var(--radius); padding: 16px 20px; }
.game-card h3 { margin-top: 0; }
.game-card p { margin: .3em 0; }
.choices { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.choices .opt { text-align: left; }
.game-opt { display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
.game-opt span { opacity: .8; }

/* ---------- каракули ---------- */

.prompt { font-size: 1.2em; margin-bottom: 0; }
.pad canvas {
  display: block; width: 100%; aspect-ratio: 1;
  background: #fff; border-radius: var(--radius);
  touch-action: none;
}
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.tools .ghost { padding: .4em .8em; font-size: .85em; }
.swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid #ffffff33; }
.swatch.on { outline: 3px solid var(--accent); outline-offset: 2px; }
.size { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: var(--panel); border: 2px solid transparent; }
.size.on { border-color: var(--accent); }
.size i { display: block; border-radius: 50%; background: var(--text); max-width: 26px; max-height: 26px; }

.mini-game { background: var(--panel); border-radius: var(--radius); padding: 12px 16px; margin-top: 20px; }
.mini-game h3 { margin-top: 0; font-size: 1em; }
.mini-game canvas { display: block; width: 100%; max-width: 320px; margin: 8px auto 0; aspect-ratio: 1; border-radius: var(--radius); touch-action: none; }
.mini-result { margin: 8px 0 0; }
.mini-pad {
  display: block; width: 100%; height: 160px; margin-top: 8px; font-size: 1.4em;
  background: var(--bg); color: var(--text); border: 2px solid #ffffff22;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.mini-pad.wait { background: #7a1f1f; }
.mini-pad.go { background: var(--ok); color: #062b13; }
.mini-field { position: relative; height: 90px; margin-top: 8px; background: var(--bg); border-radius: var(--radius); touch-action: manipulation; }
.mini-bar { position: absolute; top: 35px; height: 20px; background: var(--accent); border-radius: 4px; }
.mini-mark { position: absolute; top: 18px; width: 3px; height: 54px; margin-left: -1.5px; }
.mini-mark.you { background: #fff; }
.mini-mark.mid { background: var(--ok); top: 10px; height: 70px; opacity: .8; }
.mini-again { margin-top: 8px; }

.drawing { display: block; width: 100%; max-width: 420px; margin: 12px auto; aspect-ratio: 1; background: #fff; border-radius: var(--radius); }
.drawing.big { max-width: min(62vh, 640px); margin: 0; }
.show { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; margin-top: 12px; }
.show h2 { margin-top: 0; }

.answers { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.answers li { background: var(--panel); border-radius: var(--radius); padding: 10px 14px; }
.answers li.truth { background: color-mix(in srgb, var(--ok) 22%, var(--panel)); outline: 2px solid var(--ok); }
.a-text { font-weight: 700; font-size: 1.1em; }

.big-timer { font-size: clamp(64px, 14vw, 200px); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; margin: 24px 0; }

.my-lie { display: flex; gap: 12px; align-items: center; }
.thumb { width: 72px; height: 72px; flex: none; border-radius: 10px; background: #fff; }

/* ---------- злобные карты ---------- */

.black-card {
  position: relative; background: #050507; color: #fff; border: 1px solid #ffffff22;
  border-radius: 16px; padding: 20px 22px 28px; font-weight: 700; font-size: 1.2em; line-height: 1.35; margin: 12px 0;
}
.black-card.big { font-size: 2em; max-width: 900px; margin: 24px auto; padding: 32px 36px 44px; }
.black-card .pick { position: absolute; right: 16px; bottom: 8px; font-size: .55em; color: var(--muted); font-weight: 400; }
.ans { color: var(--accent); }
.ans.gap { color: var(--muted); }

.white-card, .white-opt {
  background: #f4f1ea; color: #15121c; border-radius: 14px; padding: 14px 16px; line-height: 1.35; font-weight: 600;
}
.white-card .ans, .white-opt .ans { color: #c2410c; }
/* ответы по центру, сколько бы их ни было; карточки одной ширины */
.white-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 16px 0; }
.white-grid > .white-card { flex: 0 1 300px; }
.white-card.winner { outline: 4px solid var(--warn); }
.white-card .author { margin-top: 8px; font-size: .8em; color: #5b5368; font-weight: 400; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.badge { font-size: .7em; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.badge.win { background: var(--warn); color: #000; }
.badge.fav { background: #ffd5df; color: #9b1239; }

.hand { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.white-opt { position: relative; text-align: left; font: inherit; font-weight: 600; border: 3px solid transparent; }
.white-opt.on { border-color: var(--accent); background: #fff; }
.white-opt i { position: absolute; right: 10px; top: 8px; font-style: normal; background: var(--accent); color: var(--accent-text); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: .8em; }
.custom-pick { background: var(--panel); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; }
.custom-form { display: flex; gap: 8px; margin: 8px 0; }
.custom-form input { margin: 0; }

/* ---------- злые рифмы ---------- */

.pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0; }
.pair { background: var(--panel); border-radius: var(--radius); padding: 10px 18px; }
.vs { color: var(--accent); font-weight: 800; font-style: italic; margin: 0 .3em; }
.vs.big { font-size: 2.4em; align-self: center; }
.verses { display: flex; gap: 24px; justify-content: center; align-items: stretch; margin: 20px 0; flex-wrap: wrap; }
.verse {
  flex: 1 1 300px; max-width: 560px; background: var(--panel); border-radius: var(--radius); padding: 18px 22px;
  font-size: 1.15em; font-weight: 600; transition: box-shadow .3s, transform .3s;
}
.verse p { margin: .3em 0; }
.verse .mc { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: .75em; }
.verse .mc-voice { color: var(--muted); text-transform: none; letter-spacing: 0; }
.verse.reading { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.03); }
.verse.won { box-shadow: 0 0 0 3px var(--warn); }
.verse .votes { margin-top: 10px; font-size: .8em; font-weight: 400; }
.verse-opt { font-weight: 400; line-height: 1.45; }
.host .verse { font-size: 1.4em; }

/* ---------- собеседование ---------- */

.ice-form { background: var(--panel); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
.ice-form label { margin: 0 0 8px; }
.ice-form textarea { width: 100%; margin-top: 6px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid #ffffff22; border-radius: var(--radius); padding: .6em .8em; resize: vertical; }
.ice-done { background: var(--panel); border-radius: var(--radius); padding: 10px 16px; margin: 10px 0; }
.ice-done p { margin: .3em 0; }
.job-q { font-size: 1.3em; }
.built { min-height: 64px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 10px; margin: 12px 0; border: 2px dashed #ffffff33; border-radius: var(--radius); }
.tiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.tile { padding: .35em .7em; font-weight: 600; background: #f4f1ea; color: #15121c; border-radius: 8px; touch-action: manipulation; }
.tile.glue { background: #c9c3d6; color: #2b2638; font-weight: 400; }
.tile.on { background: var(--accent); color: var(--accent-text); }
.verses.many { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.verses.many .verse { max-width: none; padding: 14px 16px; }
.host .verses.many .verse { font-size: 1.05em; }

/* Сцена раскрытия: рисунок в центре, карточки по эллипсу */
.stage { position: relative; height: min(56vh, 700px); margin-top: 8px; }
.stage .drawing {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(34vh, 28vw); max-width: none; margin: 0;
}
.opt-card {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(150px, 17vw, 280px);
  background: var(--panel); border-radius: var(--radius); padding: 12px 16px; text-align: center;
  transition: transform .4s, opacity .4s, background .4s, box-shadow .4s;
}
.opt-card .voters {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: max-content; max-width: 320px; margin-bottom: 6px;
}
.voter { background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 2px 10px; font-size: .75em; font-weight: 600; animation: pop .3s ease-out; }
.opt-card .byline { margin-top: 6px; font-size: .75em; color: var(--muted); min-height: 1.3em; opacity: 0; transition: opacity .3s; }
.opt-card .byline.show { opacity: 1; }
.stage.focusing .opt-card:not(.focus):not(.fake):not(.truth) { opacity: .5; }
.opt-card.focus { transform: translate(-50%, -50%) scale(1.18); z-index: 2; box-shadow: 0 0 0 3px var(--accent), 0 10px 30px #000a; }
.opt-card.fake { opacity: .4; }
.opt-card.fake .a-text { text-decoration: line-through; }
.opt-card.truth { background: color-mix(in srgb, var(--ok) 25%, var(--panel)); box-shadow: 0 0 0 3px var(--ok), 0 10px 30px #000a; opacity: 1; }
.opt-card.truth.focus { transform: translate(-50%, -50%) scale(1.25); }
.after { min-height: 60px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; }
.gains { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gains .chip b { color: var(--ok); }

@media (max-width: 800px) {
  .show { grid-template-columns: 1fr; }
  .stage { height: auto; display: flex; flex-direction: column; gap: 36px; padding-top: 30px; }
  .stage .drawing, .opt-card { position: relative; left: auto !important; top: auto !important; transform: none; width: 100%; }
  .opt-card.focus, .opt-card.truth.focus { transform: scale(1.03); }
}

/* ---------- общий экран ---------- */

.host { font-size: clamp(18px, 1.6vw, 28px); }
.host .layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; padding: 40px; min-height: 100vh; }
.host #side:empty { display: none; }
.host .layout:has(#side:empty) { grid-template-columns: 1fr; }
.host #side { background: var(--panel); border-radius: var(--radius); padding: 16px 20px; align-self: start; font-size: .85em; }
.host #side h3 { margin-top: 0; }
.host .clue { font-size: 3em; }
.host .track { height: 80px; }
.host .marker { height: 92px; }
.host .marker span { top: 98px; }
.host .marker.row1 span { top: 132px; }
.host .marker.row2 span { top: 166px; }
.host .scale.has-markers { margin-bottom: 130px; }
.host .final { max-width: 520px; margin: 24px auto; font-size: 1.3em; }

/* лобби: заголовок во всю ширину, слева карточка входа, справа игры и игроки */
.lobby-head { max-width: 1300px; margin: 0 auto 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.lobby-head p { margin: 0; }

/* логотип SibJam: надпись на цветной «блямбе», блямба чуть дышит */
.logo { position: relative; display: inline-grid; place-items: center; width: 270px; height: 108px; }
.logo-blob { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: blobBreath 6s ease-in-out infinite; }
.logo-text {
  position: relative; font-size: 50px; font-weight: 900; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 5px 0 rgba(70, 20, 100, .45); transform: rotate(-3deg) translateY(-2px);
}
.logo-text b { color: #fff1b8; font-weight: 900; }
.logo.small { width: 210px; height: 86px; margin: 0 auto 4px; display: grid; }
.logo.small .logo-text { font-size: 38px; text-shadow: 0 3px 0 rgba(70, 20, 100, .45); }
@keyframes blobBreath { 50% { transform: scale(1.04, .97) rotate(-1deg); } }
.lobby { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: stretch; max-width: 1300px; margin: 0 auto; }
.lobby .game-list { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.lobby .game-card { padding: 12px 16px; }
.lobby .game-card p.muted { font-size: .8em; }

/* карточка входа: QR в белой рамке на подсвеченной подложке, код комнаты плитками */
/* растягивается на высоту правой колонки (игры + игроки), содержимое по центру */
.join-card {
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 20px 20px 16px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 122, 89, .22), rgba(108, 59, 214, .22));
  border: 1px solid #ffffff22; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px #0006;
}
.qr-frame { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 6px 18px #0005; }
.qr-frame img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.join-label { margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .75em; }
.room-code { display: flex; justify-content: center; gap: 8px; }
.room-code span {
  width: 1.5em; padding: .12em 0; font-size: 2em; font-weight: 800; font-family: ui-monospace, Consolas, monospace;
  background: #fff; color: #1a1426; border-radius: 10px; box-shadow: 0 4px 0 #c9c3d6;
}
.join-card .url { display: block; margin-top: 2px; font-size: .78em; font-family: ui-monospace, Consolas, monospace; color: var(--text); overflow-wrap: anywhere; }
.room-input { text-transform: uppercase; letter-spacing: .3em; font-size: 1.4em; font-family: ui-monospace, Consolas, monospace; }
.players-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 22px 0 4px; }
.players-head h3 { margin: 0; }
.rules { padding-left: 1.2em; }
.rules li { margin: .3em 0; }

@media (max-width: 800px) {
  .host .layout { grid-template-columns: 1fr; padding: 16px; }
  .lobby { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- телефон ---------- */

.phone #app { max-width: 520px; margin: 0 auto; padding: 16px 16px 48px; }
.phone .clue { font-size: 1.6em; }


/* ---------- фон: глубокий градиент, мягкие пятна и парящие кубики ---------- */

body { background: radial-gradient(120% 90% at 20% 0%, #2c1d4a 0%, #16131f 55%, #0f1a26 100%) fixed; }
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: blobDrift 28s ease-in-out infinite alternate; }
.bg .b1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: #6d3bd6; }
.bg .b2 { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -16vmax; background: #0f8a9c; animation-delay: -9s; }
.bg .b3 { width: 28vmax; height: 28vmax; left: 45%; top: 40%; background: #d94f7a; opacity: .28; animation-delay: -17s; }
.bg .cube { position: absolute; bottom: -80px; height: auto; animation: cubeFloat linear infinite; }
@keyframes blobDrift { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
@keyframes cubeFloat {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-120vh) rotate(160deg); }
}

/* стекло: панели слегка размывают то, что под ними */
.panel-glass, .game-card, #side, .bet, .mini-game, .ice-form, .ice-done, .verse, .opt-card, .answers li, .pair, .chip {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- персонажи ---------- */

/* ведущий / судья — иконка в золотой рамке вместо звёздочки */
.ava.lead { outline: 2px solid var(--warn); outline-offset: 1px; border-radius: 6px; background: rgba(255, 207, 92, .18); box-shadow: 0 0 10px rgba(255, 207, 92, .45); }

.ava { height: 1.5em; width: auto; vertical-align: middle; margin-right: .35em; image-rendering: auto; }
.chip { display: inline-flex; align-items: center; }
.chip .off { opacity: .45; }
/* игрок отключился посреди игры: серый, рядом крутилка */
.chip.reconnecting { opacity: .55; }
.chip.reconnecting .ava { filter: grayscale(1); }
.spinner {
  display: inline-block; width: .85em; height: .85em; margin-left: .45em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.who { display: inline-flex; align-items: center; }
.scores .ava { height: 1.7em; }
.podium .ava { height: 2.2em; }

/* лобби общего экрана: персонажи в полный рост */
.crew { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 12px; }
.crew-member { width: 64px; text-align: center; font-size: .8em; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
/* одинаковая высота картинки: персонаж в цилиндре не сдвигает подпись */
.crew-member img { display: block; height: 76px; width: auto; max-width: 64px; object-fit: contain; object-position: bottom; animation: idle 2.6s ease-in-out infinite; }
.crew-member:nth-child(2n) img { animation-delay: -1.3s; }
.crew-member:nth-child(3n) img { animation-delay: -.7s; }
.crew-member { position: relative; }
.crew-member.off { opacity: .45; }
/* отвалившийся — серый; при наведении поверх появляется крестик, клик убирает игрока */
.crew-member .kick {
  position: absolute; top: 4px; right: 0; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: #e5484d; color: #fff; font-size: 15px; line-height: 1; display: grid; place-items: center;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.crew-member.off:hover { opacity: .85; }
.crew-member.off:hover .kick { opacity: 1; transform: scale(1); }
.crew-member.off img { animation: none; filter: grayscale(1); }
@keyframes idle { 50% { transform: translateY(-4px); } }

/* выбор персонажа на телефоне */
.pick-title { margin: 14px 0 6px; }
.ava-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.ava-opt { padding: 4px; background: var(--panel); border: 2px solid transparent; border-radius: var(--radius); }
.ava-opt img { display: block; width: 100%; height: auto; }
.ava-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--panel-solid)); }
.ava-opt.taken:not(.on) { opacity: .35; }

/* своя карточка в лобби телефона */
.me-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font-weight: 400; background: var(--panel); color: var(--text); padding: 8px 12px; margin: 8px 0 12px; }
.me-card img { width: 64px; height: auto; flex: none; }
.me-card .link { text-decoration: underline; color: var(--muted); font-size: .9em; }

@media (prefers-reduced-motion: reduce) {
  .bg .cube { display: none; }
}

/* ---------- анимации ---------- */

/* Новый экран выезжает; списки раздаются по очереди (--i ставит animateScreen).
   Заполнение backwards: после анимации элемент возвращается к обычным стилям
   и не мешает своим transform (фокус карточки, подсветка куплета). */
.enter { animation: fadeUp .45s ease-out backwards; }
.enter .stagger > * { animation: dealIn .5s cubic-bezier(.2, .8, .3, 1.2) backwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }

/* Появление чего-то нового без перерисовки всего экрана (см. popAttr) */
[data-pop] { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.scores b[data-pop] { display: inline-block; animation-name: bump; }

.urgent { color: #ff5a4e; display: inline-block; animation: pulse 1s ease-in-out infinite; }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* Мягко переливающийся фон общего экрана */
.winner-title { animation: titleIn .8s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.podium li:first-child { color: var(--warn); font-size: 1.15em; font-weight: 700; }

/* Шкала: зоны раскрываются от центра, затем по очереди падают отметки */
.enter .scale.revealed .zone { animation: zoneIn .6s ease-out backwards; }
.enter .scale.revealed .zone.z3 { animation-delay: .15s; }
.enter .scale.revealed .zone.z4 { animation-delay: .3s; }
.enter .scale.revealed .target-line { animation: fadeIn .4s .45s backwards; }
.enter .scale.revealed .marker { animation: dropIn .5s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(.7s + var(--i, 0) * .15s); }

/* Каракули: рисунок выезжает в центр, варианты раскладываются вокруг */
.enter .stage .drawing { animation: popCenter .6s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.enter .stage .opt-card { animation: cardIn .5s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(.35s + var(--i, 0) * .1s); }
.answers li.truth { animation: glow 1.6s ease-in-out infinite alternate; }

/* Карты: чёрная переворачивается, победная светится */
.enter .black-card.flip { animation: flipIn .7s cubic-bezier(.2, .8, .3, 1) backwards; }
.white-card.winner { animation: glowWarn 1.6s ease-in-out infinite alternate; }

/* Злые рифмы: куплеты въезжают с двух сторон, VS влетает с ударом, у победителя корона */
.enter .verses .verse:first-child { animation: slideL .6s cubic-bezier(.2, .8, .3, 1) backwards; }
.enter .verses .verse:last-child { animation: slideR .6s cubic-bezier(.2, .8, .3, 1) backwards; }
.enter .verses .verse:not(:first-child):not(:last-child) { animation: fadeUp .6s .2s backwards; }
.enter .vs.big { animation: slam .5s .4s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.verse.won { position: relative; }
.win-name { color: var(--warn); }


@media (max-width: 800px) {
  .enter .stage .drawing, .enter .stage .opt-card { animation-name: fadeUp; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes dealIn { from { opacity: 0; transform: translateY(24px) scale(.92) rotate(-2deg); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.15); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); color: var(--accent); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes drift { to { transform: translate(6%, -4%) rotate(8deg); } }
@keyframes titleIn { from { opacity: 0; transform: scale(.5); } }
@keyframes zoneIn { from { transform: scaleX(0); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-40px); } }
@keyframes popCenter { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
@keyframes flipIn { from { opacity: 0; transform: perspective(900px) rotateY(80deg); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-120px) rotate(-3deg); } }
@keyframes slideR { from { opacity: 0; transform: translateX(120px) rotate(3deg); } }
@keyframes slam { from { opacity: 0; transform: scale(3) rotate(-12deg); } }
@keyframes crownDrop { from { opacity: 0; transform: translate(-50%, -60px) rotate(-30deg); } }
@keyframes glow { from { box-shadow: 0 0 0 2px var(--ok); } to { box-shadow: 0 0 0 4px var(--ok), 0 0 24px color-mix(in srgb, var(--ok) 60%, transparent); } }
@keyframes glowWarn { from { box-shadow: 0 0 0 4px var(--warn); } to { box-shadow: 0 0 0 4px var(--warn), 0 0 30px color-mix(in srgb, var(--warn) 70%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Звук на общем экране: две кнопки в углу; пока браузер не разрешил звук — подсказка */
.sound-ui { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; gap: 8px; align-items: center; }
.sound-ui button {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 99px;
  background: var(--panel); color: var(--text); border: 1px solid #ffffff22; box-shadow: none;
}
.sound-ui svg { width: 22px; height: 22px; flex: none; }
.sound-btn { position: relative; width: 42px; height: 42px; justify-content: center; opacity: .55; }
.sound-btn:hover { opacity: 1; }
.sound-btn.off { color: var(--muted); }
.sound-btn.off svg { opacity: .5; }
.sound-btn.off::after { content: ''; position: absolute; width: 26px; height: 2px; background: currentColor; transform: rotate(-45deg); }
.sound-hint { display: none !important; height: 42px; padding: 0 10px !important; gap: 0 !important; font-size: .9em; color: var(--warn) !important; border-color: #ffcf5c55 !important; animation: hintPulse 2s ease-in-out infinite; }
/* пока звук не включён — только иконка; текст выезжает при наведении */
.sound-hint span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, margin .3s ease; }
.sound-hint:hover span { max-width: 400px; margin: 0 6px 0 8px; }
.sound-ui.locked .sound-btn { display: none; } /* пока звук не включён, одной иконки хватит */
.sound-ui.locked .sound-hint { display: inline-flex !important; }
@keyframes hintPulse { 50% { box-shadow: 0 0 0 6px #ffcf5c22; } }

/* «Злобные карты»: свои белые карты перед игрой */
.own-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }