/* Новые игры: «Стеклянный мост», «Сапёр», «Кто знает лучше», «Правда или действие» (sr/games.js);
   карточные игры (sr/cards.js — стили в sr/cards.css) и «Города на вылет» (sr/cities.js — стили в sr/danger.css).
   Цвета — переменные темы старого сайта (--ui-*); иконки — sr/ico/. */

sr-bridge, sr-mines, sr-whoknows, sr-truth, sr-redflags, sr-never, sr-truefake, sr-cringe, sr-cities { display: block; }

/* ---------- Иконки ---------- */
.sr-ico-bridge { background-image: url(ico/bridge.svg); }
.sr-ico-mine { background-image: url(ico/mine.svg); }
.sr-ico-skull { background-image: url(ico/skull.svg); }
.sr-ico-cities { background-image: url(ico/cities.svg); }
.sr-ico-whoknows-c { background-image: url(ico/whoknows-color.svg); }
.sr-ico-truth-c { background-image: url(ico/truth-color.svg); }
.sr-ico-redflags-c { background-image: url(ico/redflags-color.svg); }
.sr-ico-greenflag { background-image: url(ico/greenflag.svg); }
.sr-ico-never-c { background-image: url(ico/never-color.svg); }
.sr-ico-truefake-c { background-image: url(ico/truefake-color.svg); }
.sr-ico-cringe-c { background-image: url(ico/cringe-color.svg); }
/* значки меню — одноцветные, цвет берут у карточки */
.sr-ico-whoknows, .sr-ico-truth, .sr-ico-redflags, .sr-ico-never, .sr-ico-truefake, .sr-ico-cringe {
  width: 25px; height: 25px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.sr-ico-whoknows { --m: url(ico/whoknows.svg); }
.sr-ico-truth { --m: url(ico/truth.svg); }
.sr-ico-redflags { --m: url(ico/redflags.svg); }
.sr-ico-never { --m: url(ico/never.svg); }
.sr-ico-truefake { --m: url(ico/truefake.svg); }
.sr-ico-cringe { --m: url(ico/cringe.svg); }

/* Главная студии: 12 карточек — четыре ряда по три */
.mode-cards > .mode-card:nth-child(7) { --mode: #9cdd85; }
.mode-cards > .mode-card:nth-child(8) { --mode: #ffd84d; }
.mode-cards > .mode-card:nth-child(9) { --mode: #ff5a6e; }
.mode-cards > .mode-card:nth-child(10) { --mode: #ff8a3d; }
.mode-cards > .mode-card:nth-child(11) { --mode: #4fe08e; }
.mode-cards > .mode-card:nth-child(12) { --mode: #ffc94d; }

/* Выбор опасной игры: 6 кнопок */
.danger-picker button:hover .sr-ico-bridge,
.danger-picker button.picked .sr-ico-bridge { animation: sr-float 2.2s ease-in-out infinite; }
.danger-picker button:hover .sr-ico-mine,
.danger-picker button.picked .sr-ico-mine { animation: sr-wobble 1.3s ease-in-out infinite; }
.danger-picker button:hover .sr-ico-cities,
.danger-picker button.picked .sr-ico-cities { animation: sr-float 2s ease-in-out infinite; }
.potato-big.idle.sr-big-mine .sr-ico { animation: sr-wobble 2.4s ease-in-out infinite; }
.potato-big.idle.sr-big-whoknows { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(249, 80, 170, .35)); }

/* ---------- Общие элементы студии ---------- */
.sr-slider > div:first-child { margin-bottom: 8px; }
.sr-range { width: 100%; accent-color: var(--ui-accent); cursor: pointer; height: 20px; margin: 0; }
.sr-range:disabled { opacity: .5; cursor: default; }
.sr-toggle { gap: 12px; }
.sr-toggle > span { line-height: 1.35; }
.sr-switch {
  position: relative; flex: none; width: 40px; height: 22px; padding: 0; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--ui-line); background: var(--ui-track); transition: background-color .15s;
}
.sr-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sr-switch.on { background: var(--ui-accent); border-color: var(--ui-accent); }
.sr-switch.on i { transform: translateX(18px); }
.sr-switch:disabled { opacity: .5; cursor: default; }
.danger-settings input:disabled, .danger-settings select:disabled { opacity: .6; }
.sr-estimate { margin-top: -6px; }
.danger-actions.left { justify-content: flex-start; }

.sr-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-soft) 80%, transparent);
}
.sr-chip .viewer-nick { color: var(--nick, var(--ui-ink)); font-size: 13px; font-weight: 700; }
.sr-chip.big { padding: 4px 14px; border-color: color-mix(in srgb, var(--nick, var(--ui-accent)) 60%, var(--ui-line)); }
.sr-chip.big .viewer-nick { font-size: 18px; }
.sr-chip.dead .viewer-nick { color: #ff6b5e; }
.sr-chip.out { opacity: .45; text-decoration: line-through; }
.sr-chip .sr-ans { font-size: 13px; color: var(--ui-accent); }
.sr-x {
  border: 0; background: none; color: var(--ui-muted); font-size: 16px; line-height: 1; padding: 0 0 1px; cursor: pointer;
}
.sr-x:hover { color: #ff6b5e; }
.potato-players > .sr-chip { padding: 3px 10px; }

.sr-play { display: flex; flex-direction: column; gap: 14px; }
.sr-play-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sr-line { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ui-ink); }
.sr-line b { color: var(--ui-accent); }
.sr-queue { margin: 0; color: var(--ui-muted); font-size: 13px; }
.sr-list { display: flex; flex-direction: column; gap: 6px; }
.sr-list > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-muted); }
.sr-list.win > span { color: #ffc94d; }
.sr-list .potato-players { justify-content: flex-start; }

.sr-timer { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.sr-timer b { font: 800 26px/1 Unbounded, system-ui, sans-serif; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.sr-timer span { flex: 1; height: 8px; border-radius: 99px; background: var(--ui-track); overflow: hidden; }
.sr-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent2)); transition: width .25s linear; }
.sr-timer.hot b { color: #ff6b5e; animation: sr-beat .5s ease-in-out infinite alternate; }
.sr-timer.hot i { background: #ff6b5e; }

/* ---------- Стеклянный мост ---------- */
.sr-br { position: relative; width: 100%; font-size: 12px; user-select: none; }
.sr-br-track { position: relative; height: 3.4em; }
.sr-br-tok {
  position: absolute; bottom: .6em; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  transition: left .75s cubic-bezier(.3, 1.25, .5, 1);
}
.sr-br-tok span {
  display: inline-block; padding: .3em .75em; border-radius: 999px; font-weight: 800; font-size: 1.05em;
  background: var(--ui-surface); color: var(--nick, var(--ui-ink));
  border: 2px solid color-mix(in srgb, var(--nick, var(--ui-accent)) 75%, white); box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.sr-br-tok::after {
  content: ""; position: absolute; left: 50%; bottom: -.55em; transform: translateX(-50%);
  border: .38em solid transparent; border-top-color: color-mix(in srgb, var(--nick, var(--ui-accent)) 75%, white);
}
.sr-br-tok.walk { animation: sr-br-enter 1s cubic-bezier(.3, 1.1, .5, 1) both; }
.sr-br-tok.crowd span { background: linear-gradient(110deg, color-mix(in srgb, var(--ui-accent) 30%, var(--ui-surface)), color-mix(in srgb, var(--ui-accent2) 30%, var(--ui-surface))); color: var(--ui-ink); border-color: var(--ui-accent); }
.sr-br-tok.crowd span b { color: #fff; }
.sr-br-tok.done span { border-color: #ffc94d; color: #ffc94d; }
.sr-br-tok.done::after { border-top-color: #ffc94d; }
.sr-br-tok.falling { animation: sr-br-fall 1.5s cubic-bezier(.55, 0, .85, .35) .3s both; z-index: 3; }
.sr-br-tok.falling span { border-color: #ff5a4d; color: #ff6b5e; }
.sr-br-tok.falling.crowd span { background: #3a1420; }

.sr-br-grid {
  display: grid; grid-template-columns: 8% repeat(var(--steps), minmax(0, 1fr)) 8%;
  min-height: calc(var(--panes) * 4.4em + 2em);
}
.sr-br-plat {
  display: flex; flex-direction: column; justify-content: space-around; align-items: center; gap: .4em;
  margin: 0 .35em 1.7em; border-radius: .7em; border: 1px solid var(--ui-line);
  background: linear-gradient(180deg, #3b2b55, #21152f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sr-br-plat.start b { color: var(--ui-accent); font: 800 1.1em/1 Unbounded, system-ui, sans-serif; }
.sr-br-plat.finish { justify-content: center; border-color: #ffc94d66; background: linear-gradient(180deg, #4a3a22, #241a10); }
.sr-br-plat.finish .sr-ico { font-size: 2.3em; filter: drop-shadow(0 0 10px #ffc94d88); }
.sr-br-plat.finish b { color: #ffc94d; font: 800 1.3em/1 Unbounded, system-ui, sans-serif; }
.sr-br-col { position: relative; display: flex; flex-direction: column; gap: .5em; padding: 0 .22em; }
.sr-br-col small { text-align: center; color: var(--ui-muted); font-weight: 800; font-size: .95em; line-height: 1.2em; }
.sr-br-col.front small { color: #ffc94d; }
.sr-pane {
  position: relative; flex: 1; min-height: 3.6em; border-radius: .45em;
  border: 1px solid rgba(190, 240, 255, .55);
  background: linear-gradient(135deg, rgba(225, 250, 255, .4), rgba(120, 200, 235, .14) 55%, rgba(225, 250, 255, .28));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .16), 0 4px 10px rgba(0, 0, 0, .25);
}
.sr-pane::before {
  content: ""; position: absolute; top: 14%; left: 14%; width: 40%; height: 9%; border-radius: 99px;
  background: rgba(255, 255, 255, .75); transform: rotate(-18deg); opacity: .8; pointer-events: none;
}
.sr-pane em {
  position: absolute; inset: 0; display: grid; place-items: center; font-style: normal;
  font: 900 1.45em/1 Unbounded, system-ui, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.sr-br-col.front .sr-pane { border-color: #ffc94d; animation: sr-pane-pulse 1.1s ease-in-out infinite alternate; }
.sr-pane.safe {
  border-color: #59d98e;
  background: linear-gradient(135deg, rgba(170, 255, 205, .5), rgba(60, 190, 120, .2));
  box-shadow: 0 0 14px #59d98e55, inset 0 0 10px rgba(255, 255, 255, .25);
}
.sr-pane.fragile { border-style: dashed; border-color: #ff9a7a; background: linear-gradient(135deg, rgba(255, 170, 150, .32), rgba(255, 90, 77, .1)); }
.sr-pane.broken {
  border: 1px dashed rgba(255, 110, 95, .6); box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='rgba(210,245,255,.55)' stroke='rgba(255,255,255,.75)' stroke-width='1'%3E%3Cpath d='M0 0h34l-8 18-14 6-12-4z'/%3E%3Cpath d='M100 0H62l9 15 17 4 12-6z'/%3E%3Cpath d='M0 100h28l-6-14-14-5-8 3z'/%3E%3Cpath d='M100 100H70l5-16 15-3 10 5z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(ellipse at center, rgba(0, 0, 0, .75), rgba(20, 0, 10, .35) 75%);
  animation: sr-shatter .6s ease-out both;
}
.sr-pane.broken::before {
  top: 30%; left: 30%; width: 40%; height: 40%; border-radius: 0; transform: none; opacity: 0; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='rgba(220,250,255,.9)'%3E%3Cpath d='M2 4l7 2-3 6z'/%3E%3Cpath d='M30 2l8 5-7 3z'/%3E%3Cpath d='M18 14l6 1-4 6z'/%3E%3Cpath d='M4 28l7-1-2 7z'/%3E%3Cpath d='M32 26l6 6-8 1z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: sr-shards 1.1s ease-in both;
}
.sr-br.in-studio .sr-pane { min-height: 2.9em; }

/* ---------- Сапёр ---------- */
.sr-mf-wrap { display: flex; justify-content: center; }
.sr-mf {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .32em;
  width: min(100%, calc(var(--n) * 4.6em)); font-size: 13px; user-select: none;
}
.sr-cell {
  position: relative; aspect-ratio: 1; border-radius: .5em; display: grid; place-items: center;
  font-weight: 900; line-height: 1;
}
.sr-cell.closed {
  background: linear-gradient(145deg, #3d2c58, #251937); border: 1px solid #5c457c;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 #140c1e;
}
.sr-cell.closed small { color: var(--ui-muted); font-size: 1em; font-weight: 800; }
.sr-cell.picked { border-color: #ffc94d; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 0 12px #ffc94d55; }
.sr-cell em {
  position: absolute; top: -.5em; right: -.45em; z-index: 1; min-width: 1.7em; height: 1.7em; padding: 0 .35em;
  display: grid; place-items: center; border-radius: 99px; font-style: normal; font-size: .82em;
  background: #ffc94d; color: #1b1128; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); animation: sr-pop .3s cubic-bezier(.3, 1.6, .5, 1) both;
}
.sr-cell.open { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07); animation: sr-cell-open .35s ease-out both; }
.sr-cell.open b { font-size: 1.45em; }
.sr-cell.n1 b { color: #6aa8ff; } .sr-cell.n2 b { color: #59d98e; } .sr-cell.n3 b { color: #ff6b6b; } .sr-cell.n4 b { color: #b28cff; }
.sr-cell.n5 b { color: #ffb466; } .sr-cell.n6 b { color: #46d0cb; } .sr-cell.n7 b { color: #fff; } .sr-cell.n8 b { color: #c6b2d5; }
.sr-cell .sr-ico { font-size: 1.9em; }
.sr-cell.boom {
  background: radial-gradient(circle, #ffb14a, #d2321f 62%, #6e1610); border: 1px solid #ff5a4d;
  box-shadow: 0 0 18px #ff5a4d88; animation: sr-cell-boom .7s cubic-bezier(.2, 1.5, .4, 1) both;
}
.sr-cell.boom em { background: #ff5a4d; color: #fff; }
.sr-cell.closed.mine .sr-ico { position: absolute; inset: 0; margin: auto; opacity: .6; }
.sr-cell.closed.mine small { position: relative; z-index: 1; text-shadow: 0 1px 3px #000; }
.sr-cell.hit { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 1px; }

/* ---------- Кто знает лучше: студия ---------- */
.sr-game { display: flex; flex-direction: column; gap: 18px; }
.sr-game-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.sr-panel { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px; padding: 20px; }
.sr-game-settings { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sr-game-settings > label { margin-top: 4px; font-size: 13px; font-weight: 700; }
.mode-list.one-col { grid-template-columns: 1fr; }
.sr-game-settings .sr-prefix { margin: 4px 0; }
.sr-game-settings .sr-prefix-list button { min-width: 40px; height: 40px; padding: 0 10px; font-size: 17px; }
.sr-game-settings .sr-prefix-list button.sr-prefix-none { font-size: 13px; }
.sr-game-settings .sr-prefix-list button:disabled { opacity: .55; cursor: default; }
.sr-game-stage { display: flex; flex-direction: column; gap: 14px; min-height: 460px; }
.sr-game-stage .danger-intro { margin: auto 0; }
.sr-field { display: flex; flex-direction: column; gap: 6px; }
.sr-field > span { font-size: 12px; font-weight: 800; color: var(--ui-muted); }
.sr-field input, .sr-field textarea, .sr-guess input, .sr-bank-tools input, .sr-bank-list input {
  border: 1px solid var(--ui-line); background: var(--ui-soft); color: var(--ui-ink); border-radius: 10px;
  padding: 10px 12px; font: 500 15px/1.4 Inter, Arial, sans-serif; min-width: 0;
}
.sr-field textarea { resize: vertical; font-size: 18px; font-weight: 700; }
.sr-field input:focus, .sr-field textarea:focus, .sr-guess input:focus, .sr-bank-tools input:focus, .sr-bank-list input:focus { outline: none; border-color: var(--ui-accent); }
.sr-wk-q { margin: 0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.2; }
.sr-wk-q.small { font-size: clamp(18px, 1.8vw, 22px); }
.sr-wk-count { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.sr-wk-count b { font: 800 26px/1 Unbounded, system-ui, sans-serif; color: var(--ui-accent); }
.sr-wk-count .quiet { margin: 0; min-height: 32px; }
.sr-answered { justify-content: flex-start; max-height: 220px; overflow: auto; }
.sr-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sr-board li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ui-line); background: var(--ui-soft);
}
.sr-board.groups li { grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1.2fr); }
.sr-board .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--ui-tint); color: var(--ui-accent); }
.sr-board .t { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.sr-board .t small { display: block; font-size: 12px; font-weight: 500; color: var(--ui-muted); }
.sr-board .c { font: 800 20px/1 Unbounded, system-ui, sans-serif; color: var(--ui-ink); }
.sr-board .who { font-size: 12px; color: var(--ui-muted); overflow-wrap: anywhere; }
.sr-board li.closed .t { color: var(--ui-muted); letter-spacing: .2em; }
.sr-board li.open { animation: sr-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-board li.guessed { border-color: #59d98e; background: color-mix(in srgb, #59d98e 12%, var(--ui-soft)); }
.sr-board li .quiet { margin: 0; min-height: 30px; padding: 0 10px; font-size: 12px; }
.sr-mark {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ui-line); background: var(--ui-surface);
  color: var(--ui-muted); font-weight: 900; cursor: pointer;
}
.sr-mark.on { background: #59d98e; border-color: #59d98e; color: #0d2216; }
.sr-guess { display: flex; gap: 10px; }
.sr-guess input { flex: 1; font-size: 18px; font-weight: 700; }
.sr-guess .main-action { margin: 0; min-width: 0; }
.sr-wk-msg { margin: 0; font-weight: 700; }
.sr-guesses { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-guesses span { padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; border: 1px solid; }
.sr-guesses .hit { color: #59d98e; border-color: #59d98e66; }
.sr-guesses .miss { color: #ff6b5e; border-color: #ff6b5e66; text-decoration: line-through; }
.sr-secret { color: var(--ui-accent); font-size: 1.15em; }
.sr-wk-final { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sr-wk-final > strong { font: 900 clamp(56px, 7vw, 90px)/1 Unbounded, system-ui, sans-serif; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-wk-final h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.sr-wk-final p { margin: 0; color: var(--ui-muted); }
.sr-wk-final .sr-list { width: 100%; max-width: 520px; text-align: left; }
.sr-top, .sr-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 640px; text-align: left; }
.sr-top li, .sr-history li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--ui-soft); border: 1px solid var(--ui-line); }
.sr-top li .viewer-nick { flex: 1; color: var(--nick, var(--ui-ink)); font-weight: 800; }
.sr-top li b, .sr-history li b { font-family: Unbounded, system-ui, sans-serif; }
.sr-history li span { flex: 1; font-size: 13px; }
.sr-history li em { font-style: normal; color: var(--ui-accent); font-weight: 800; font-size: 13px; }
.sr-bank { margin: 0; }
.sr-bank-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.sr-bank-tools input { flex: 1 1 280px; }
.sr-bank-tools .main-action, .sr-bank-tools .quiet { margin: 0; min-width: 0; }
.sr-bank-list { list-style: none; margin: 10px 0 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow: auto; }
.sr-bank-list li { display: flex; gap: 6px; align-items: center; }
.sr-bank-list li input { flex: 1; padding: 7px 10px; font-size: 14px; }
.sr-bank-list li.played input { color: var(--ui-muted); }
.sr-bank-list li .quiet { margin: 0; width: 34px; min-height: 34px; padding: 0; font-size: 16px; }
.sr-bank-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.sr-bank-tabs button {
  min-height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--ui-line); background: var(--ui-soft);
  color: var(--ui-ink); font: 700 13px/1 Inter, Arial, sans-serif; cursor: pointer;
}
.sr-bank-tabs button small { color: var(--ui-muted); font-weight: 600; }
.sr-bank-tabs button.picked { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-soft)); }
.sr-bank-tools select {
  border: 1px solid var(--ui-line); background: var(--ui-soft); color: var(--ui-ink); border-radius: 10px; padding: 0 10px; min-height: 40px; font: 600 14px Inter, Arial, sans-serif;
}
.sr-bank-pack { flex: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--ui-muted); }
/* свои паки: создать / переименовать / удалить */
.sr-bank-packbar { align-items: center; margin-top: 8px; }
.sr-bank-packbar input { flex: 1 1 220px; }
.sr-bank-packname { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-bank-del { color: #ff8a7e !important; border-color: #ff6b5e66 !important; }
.sr-bank-del:disabled { opacity: .45; cursor: default; }
.sr-bank-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid #ff6b5e88; background: color-mix(in srgb, #ff5a4d 10%, transparent); font-size: 13px; line-height: 1.4;
}
.sr-bank-confirm span { flex: 1 1 260px; }
.sr-bank-confirm button { margin: 0; min-height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid; background: transparent; cursor: pointer; font: 700 13px Inter, Arial, sans-serif; }
.sr-bank-confirm .sr-bank-del { background: #ff5a4d; color: #2a0805 !important; border-color: #ff5a4d !important; }
/* паки из текстовых файлов: кнопка, подсказка, проверка перед загрузкой */
.sr-bank-filebar { align-items: center; margin-top: 8px; }
.sr-bank-filebar input[type=file] { display: none !important; }
.sr-bank-hint { flex: 1 1 100%; font-size: 12px; line-height: 1.45; color: var(--ui-muted); }
.sr-imp { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 14px; border: 1px dashed var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 7%, transparent); }
.sr-imp > .sr-bank-tools { margin: 0; }
.sr-imp-file { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ui-soft); border: 1px solid var(--ui-line); }
.sr-imp-file.bad { border-color: #ff6b5e88; }
.sr-imp-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sr-imp-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-imp-head span { flex: 1; font-size: 13px; color: var(--ui-muted); white-space: nowrap; }
.sr-imp-file.bad .sr-imp-head span { color: #ff8a7e; white-space: normal; }
.sr-imp-head .sr-imp-x { margin: 0 0 0 auto; width: 30px; min-height: 30px; padding: 0; font-size: 16px; flex: none; }
.sr-imp-target { margin: 0; }
.sr-imp-target input { flex: 1 1 200px; }
.sr-imp-sample { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.sr-imp-sample li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-imp-sample li::before { content: "• "; color: var(--ui-muted); }
.sr-imp-sample li.more { color: var(--ui-muted); }
.sr-imp-sample li.more::before { content: none; }
.sr-imp-sample small { color: var(--ui-muted); }
.sr-imp-tag { font-style: normal; font-weight: 800; color: var(--o, var(--ui-accent)); }
.sr-imp-note { font-size: 12px; color: var(--ui-muted); }
.sr-imp-bad { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #ffb0a8; }
.sr-imp-bad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) { .sr-game-grid { grid-template-columns: 1fr; } }

/* ---------- Рулетка по зрителям (студия и экран) ---------- */
.sr-reel {
  position: relative; height: 12em; border-radius: 1.2em; border: 1px solid var(--ui-line); overflow: hidden; font-size: 13px; user-select: none;
  background: radial-gradient(60% 120% at 50% 50%, color-mix(in srgb, var(--ui-accent) 10%, var(--ui-bg, #0b0814)), var(--ui-bg, #0b0814));
}
.sr-reel::before, .sr-reel::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 18%; pointer-events: none; }
.sr-reel::before { left: 0; background: linear-gradient(90deg, var(--ui-bg, #0b0814), transparent); }
.sr-reel::after { right: 0; background: linear-gradient(270deg, var(--ui-bg, #0b0814), transparent); }
.sr-reel-line { position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--ui-accent); box-shadow: 0 0 14px var(--ui-accent), 0 0 34px var(--ui-accent); }
.sr-reel-line::before, .sr-reel-line::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: .55em solid transparent; }
.sr-reel-line::before { top: 0; border-top-color: var(--ui-accent); }
.sr-reel-line::after { bottom: 0; border-bottom-color: var(--ui-accent); }
.sr-reel-strip {
  position: absolute; top: 1em; left: 50%; display: flex; gap: .8em; will-change: transform;
  animation: sr-reel var(--dur) cubic-bezier(.12, .62, .12, 1) calc(var(--lag) * -1) both;
}
.sr-reel-card {
  flex: none; width: 9em; height: 10em; padding: .7em; border-radius: .9em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
  border: 1px solid color-mix(in srgb, var(--nick) 40%, var(--ui-line));
  background: linear-gradient(180deg, var(--ui-surface) 30%, color-mix(in srgb, var(--nick) 16%, var(--ui-surface)));
  box-shadow: inset 0 -3px 0 var(--nick), 0 8px 24px color-mix(in srgb, var(--nick) 16%, transparent);
}
.sr-reel-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nick); font-weight: 900; font-size: 1.05em; }
.sr-reel.landed .sr-reel-card.win { border-color: var(--nick); box-shadow: 0 0 0 2px var(--nick), 0 0 36px var(--nick); animation: sr-reel-win .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-ava {
  flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; display: inline-grid; place-items: center;
  font: 900 1.7em/1 Unbounded, system-ui, sans-serif; color: #14101d;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nick) 70%, #fff), var(--nick) 70%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nick) 40%, transparent), 0 0 22px color-mix(in srgb, var(--nick) 40%, transparent);
}
.sr-ava.big { font-size: 34px; }
.sr-ava.huge { font-size: clamp(42px, 4.4vw, 80px); }
/* настоящая аватарка Twitch */
.sr-ava.img { overflow: hidden; background: var(--nick); }
.sr-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.sr-ava.mini { font-size: 8px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--nick) 55%, transparent); }
.sr-nick > .sr-ava.mini { font-size: .5em; margin: -.1em .45em -.1em -.45em; }
.sr-scr .sr-reel { font-size: clamp(15px, 1.75vw, 32px); width: 100%; max-width: 1700px; margin: 0 auto; }

/* ---------- Правда или действие: студия ---------- */
.sr-td-intro .sr-td-rules { margin: 4px 0 6px; }
.sr-td-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; text-align: left; }
.sr-td-rules > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid; }
.sr-td-rules b { font: 800 15px/1.1 Unbounded, system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.sr-td-rules span { font-size: 14px; line-height: 1.4; color: var(--ui-ink); }
.sr-td-rules .truth { border-color: #6aa8ff66; background: color-mix(in srgb, #6aa8ff 10%, transparent); }
.sr-td-rules .truth b { color: #6aa8ff; }
.sr-td-rules .dare { border-color: #ff5ba866; background: color-mix(in srgb, #ff5ba8 10%, transparent); }
.sr-td-rules .dare b { color: #ff5ba8; }
.sr-td-open { margin: 0; min-height: 32px; }
.sr-td-open.on { border-color: #59d98e88; color: #59d98e; }
.sr-td-pool { justify-content: flex-start; max-height: 240px; overflow: auto; }
.sr-td-spinline { min-height: 40px; }
.sr-inline { margin: 0 0 0 6px; min-height: 28px; padding: 0 10px; font-size: 12px; }
.sr-td-turn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
.sr-td-who {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 18px; text-align: center; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--nick) 45%, var(--ui-line));
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--nick) 16%, transparent), transparent 70%), var(--ui-soft);
}
.sr-td-who .sr-ava { animation: sr-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-td-name { font: 800 clamp(22px, 2.2vw, 30px)/1.1 Unbounded, system-ui, sans-serif; color: var(--nick); overflow-wrap: anywhere; }
.sr-td-meta { font-size: 13px; color: var(--ui-muted); }
.sr-td-who .sr-td-ask { margin: 4px 0 0; font: 800 17px/1.2 Unbounded, system-ui, sans-serif; }
.sr-td-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.sr-td-choice button {
  min-height: 58px; border-radius: 14px; border: 2px solid; background: transparent; cursor: pointer;
  font: 800 17px/1 Unbounded, system-ui, sans-serif; transition: background-color .15s, box-shadow .15s;
}
.sr-td-choice .truth { color: #6aa8ff; border-color: #6aa8ff77; }
.sr-td-choice .truth.on { background: #6aa8ff; color: #0b1430; border-color: #6aa8ff; box-shadow: 0 0 26px #6aa8ff66; }
.sr-td-choice .dare { color: #ff5ba8; border-color: #ff5ba877; }
.sr-td-choice .dare.on { background: #ff5ba8; color: #2a0a1a; border-color: #ff5ba8; box-shadow: 0 0 26px #ff5ba866; }
.sr-td-rule { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ui-muted); }
.sr-td-rule.truth { color: #a9cbff; }
.sr-td-rule.dare { color: #ffb0d6; }
.sr-td-who .danger-actions { margin-top: auto; justify-content: center; }
.sr-td-skip { border-color: #ff6b5e88 !important; color: #ff8a7e !important; }
.sr-td-chat { display: flex; flex-direction: column; min-height: 360px; max-height: 540px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--nick) 35%, var(--ui-line)); background: var(--ui-soft); overflow: hidden; }
.sr-td-chat > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.sr-td-chat > header b { color: var(--nick); }
.sr-td-chat > header small { color: var(--ui-muted); }
.sr-td-log { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sr-td-msg {
  align-self: flex-start; max-width: 94%; padding: 8px 12px; border-radius: 4px 14px 14px 14px; overflow-wrap: anywhere;
  background: var(--ui-surface); border: 1px solid color-mix(in srgb, var(--nick, var(--ui-accent)) 35%, var(--ui-line));
  font-size: 15px; line-height: 1.45; animation: sr-msg-in .3s ease-out both;
}
.sr-td-msg time { display: block; margin-bottom: 2px; font-size: 11px; color: var(--ui-muted); }
.sr-td-msg .chat-emote { height: 1.7em; vertical-align: middle; margin: -.2em .05em; }
.sr-td-msg.hl { border-color: #ffd84d; box-shadow: 0 0 16px #ffd84d33; }
.sr-td-empty { margin: auto; padding: 20px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ui-muted); animation: sr-breathe 1.8s ease-in-out infinite; }
.sr-td-tag { padding: 2px 9px; border-radius: 99px; border: 1px solid; font-size: 12px !important; }
.sr-td-tag.truth { color: #6aa8ff !important; border-color: #6aa8ff66; }
.sr-td-tag.dare { color: #ff5ba8 !important; border-color: #ff5ba866; }
.sr-td-tag.skip { color: #ff8a7e !important; border-color: #ff6b5e66; }
.sr-td-tag.none { color: var(--ui-muted) !important; border-color: var(--ui-line); }
.sr-td-hist { margin: 0; }
.sr-td-hist .sr-history { margin-top: 10px; max-width: none; max-height: 280px; overflow: auto; }
.sr-td-hist .sr-history li span { font-weight: 800; font-size: 14px; }
@media (max-width: 1180px) { .sr-td-turn { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sr-td-rules { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .sr-board li, .sr-board.groups li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .sr-board .who, .sr-board li .quiet { grid-column: 2 / -1; }
  .sr-guess { flex-direction: column; }
}

/* ---------- Экран трансляции ---------- */
sr-screen-game.sr-scr { display: flex; flex-direction: column; gap: 22px; flex: 1; min-height: 0; }
.sr-scr-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 40px); padding-bottom: 3vh; }
.sr-scr .sr-scr-intro .scr-icon .sr-ico { width: 1.15em; height: 1.15em; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); animation: sr-float 3.2s ease-in-out infinite; }
.sr-scr .sr-scr-intro p { max-width: 1000px; }
.sr-cmd { color: var(--ui-accent); font-family: Unbounded, system-ui, sans-serif; }
.sr-scr-title { display: flex; align-items: center; justify-content: center; gap: 3vw; text-align: center; animation: sr-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-scr-title h1 { margin: 0; font: 800 clamp(28px, 3.4vw, 58px)/1.1 Unbounded, system-ui, sans-serif; letter-spacing: -.02em; }
.sr-scr-title p { margin: .35em 0 0; font-size: clamp(16px, 1.7vw, 28px); color: var(--ui-muted); }
.sr-scr-title p b { color: var(--ui-ink); }
.sr-scr-title.bad h1 { color: #ff6b5e; text-shadow: 0 0 30px rgba(255, 90, 77, .5); }
.sr-scr-title h1 .sr-nick, .sr-scr-title p .sr-nick { font-size: inherit; padding: 0 .3em; background: none; border: 0; }
.sr-nick {
  display: inline-flex; align-items: center; padding: .25em .75em; border-radius: 999px; font-weight: 800;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: var(--nick, var(--ui-ink));
}
.sr-nick.out { opacity: .45; text-decoration: line-through; }
.sr-nick.dead { color: #ff6b5e; }
.sr-nick.more { color: var(--ui-muted); background: none; border: 0; }
.sr-nick.pop { animation: sr-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-scr-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 1500px; margin: 0 auto; font-size: clamp(15px, 1.4vw, 22px); }
.sr-scr-names.small { font-size: clamp(13px, 1.1vw, 18px); gap: 8px; }
.sr-scr-names.win .sr-nick { border-color: #59d98e88; background: #59d98e1c; }
.sr-scr-queue { margin: 0; text-align: center; color: var(--ui-muted); font-size: clamp(15px, 1.4vw, 22px); }
.sr-scr-row { display: flex; align-items: flex-start; gap: 14px; font-size: clamp(14px, 1.2vw, 20px); }
.sr-scr-row > .sr-ico { font-size: 2em; flex: none; }
.sr-scr-row > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-scr-row.win .sr-nick { border-color: #ffc94d88; background: #ffc94d1a; }

.sr-scr-timer { position: relative; width: clamp(90px, 9vw, 150px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.sr-scr-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sr-scr-timer circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 8; }
.sr-scr-timer circle.bar { stroke: var(--ui-accent); stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: calc(276.5 * (1 - var(--p))); transition: stroke-dashoffset .25s linear; }
.sr-scr-timer b { position: relative; font: 800 clamp(32px, 3.4vw, 58px)/1 Unbounded, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sr-scr-timer.hot circle.bar { stroke: #ff5a4d; }
.sr-scr-timer.hot b { color: #ff6b5e; animation: sr-beat .5s ease-in-out infinite alternate; }

.sr-scr .sr-br { font-size: clamp(13px, 1.4vw, 28px); }
.sr-scr .sr-pane { min-height: 4.3em; }

.sr-mf-layout { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: clamp(20px, 3vw, 56px); align-items: start; justify-content: center; }
.sr-scr .sr-mf { width: min(64vh, 56vw); font-size: clamp(10px, calc(64vh / var(--n) / 3.3), 28px); }
.sr-mf-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sr-mf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sr-mf-stats div { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 16px; padding: 14px; text-align: center; }
.sr-mf-stats b { display: block; font: 800 clamp(26px, 2.6vw, 44px)/1 Unbounded, system-ui, sans-serif; color: var(--ui-accent); }
.sr-mf-stats span { font-size: clamp(12px, 1vw, 16px); color: var(--ui-muted); }
.sr-mf-side .sr-scr-queue { text-align: left; }

/* «Кто знает лучше» на экране */
.sr-wk-scr-q { text-align: center; animation: sr-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sr-wk-scr-q h1 { margin: 0; max-width: 1500px; font: 800 clamp(30px, 4vw, 66px)/1.15 Unbounded, system-ui, sans-serif; letter-spacing: -.02em; }
.sr-wk-scr-q.small h1 { font-size: clamp(22px, 2.4vw, 40px); }
.sr-wk-wait { margin: 0; font-size: clamp(18px, 1.8vw, 30px); color: var(--ui-muted); animation: sr-breathe 1.6s ease-in-out infinite; }
.sr-wk-collect { display: flex; align-items: center; justify-content: center; gap: 4vw; }
.sr-wk-counter { display: flex; flex-direction: column; align-items: center; }
.sr-wk-counter b { font: 900 clamp(60px, 8vw, 130px)/1 Unbounded, system-ui, sans-serif; color: var(--ui-accent); }
.sr-wk-counter span { font-size: clamp(16px, 1.6vw, 26px); color: var(--ui-muted); }
.sr-wk-tablo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: clamp(10px, 1.4vw, 22px); width: 100%; max-width: 1500px; margin: 0 auto; perspective: 900px; }
.sr-wk-tablo .slot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: clamp(60px, 8.5vh, 104px);
  padding: 0 22px; border-radius: 16px; border: 2px solid #5c457c;
  background: linear-gradient(180deg, #3a2955, #241836); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .35);
}
.sr-wk-tablo .slot .n { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .3); font: 800 clamp(16px, 1.5vw, 26px)/1 Unbounded, system-ui, sans-serif; color: var(--ui-muted); }
.sr-wk-tablo .slot .t { font: 800 clamp(20px, 2vw, 36px)/1.1 Unbounded, system-ui, sans-serif; overflow-wrap: anywhere; }
.sr-wk-tablo .slot b { font: 900 clamp(20px, 2vw, 36px)/1 Unbounded, system-ui, sans-serif; color: #ffc94d; }
.sr-wk-tablo .slot.open { animation: sr-flip .6s cubic-bezier(.3, 1.3, .5, 1) both; }
.sr-wk-tablo .slot.guessed { border-color: #59d98e; background: linear-gradient(180deg, #1f5a3c, #163a29); box-shadow: 0 0 26px #59d98e44; }
.sr-wk-tablo .slot.guessed .n { background: #59d98e; color: #0d2216; }
.sr-wk-tablo .slot.missed { border-color: #6b5584; background: linear-gradient(180deg, #2c2140, #1d142b); }
.sr-wk-tablo .slot.missed .t { color: var(--ui-muted); }
.sr-wk-lives { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(16px, 1.5vw, 24px); color: var(--ui-muted); }
.sr-wk-lives i { font: 900 clamp(30px, 3vw, 52px)/1 Unbounded, system-ui, sans-serif; font-style: normal; color: rgba(255, 255, 255, .15); }
.sr-wk-lives i.used { color: #ff5a4d; text-shadow: 0 0 20px rgba(255, 90, 77, .6); animation: sr-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-wk-miss {
  position: fixed; inset: 0; z-index: 25; display: grid; place-content: center; justify-items: center; gap: 10px; pointer-events: none;
  animation: sr-miss 1.8s ease-out both;
}
.sr-wk-miss b { font: 900 clamp(140px, 22vw, 320px)/1 Unbounded, system-ui, sans-serif; color: #ff5a4d; text-shadow: 0 0 60px rgba(255, 90, 77, .8); }
.sr-wk-miss span { font: 800 clamp(22px, 2.4vw, 40px)/1 Unbounded, system-ui, sans-serif; color: #fff; text-decoration: line-through; text-shadow: 0 4px 20px rgba(0, 0, 0, .8); }
.sr-wk-secret {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 46px; border-radius: 24px;
  border: 2px solid var(--ui-accent); background: linear-gradient(140deg, color-mix(in srgb, var(--ui-accent) 24%, var(--ui-surface)), color-mix(in srgb, var(--ui-accent2) 20%, var(--ui-surface)));
  box-shadow: 0 0 50px color-mix(in srgb, var(--ui-accent) 35%, transparent); animation: sr-flip .8s cubic-bezier(.3, 1.3, .5, 1) both;
}
.sr-wk-secret span { font-size: clamp(14px, 1.2vw, 20px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); }
.sr-wk-secret strong { font: 900 clamp(36px, 5vw, 84px)/1.05 Unbounded, system-ui, sans-serif; }
.sr-wk-result { margin: 0; text-align: center; font-size: clamp(18px, 2vw, 32px); color: var(--ui-muted); }
.sr-wk-result b { color: #59d98e; font-family: Unbounded, system-ui, sans-serif; }
.sr-wk-dist { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1100px; margin: 0 auto; }
.sr-wk-dist > span { font-size: clamp(13px, 1.1vw, 18px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); }
.sr-wk-dist div { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .05); font-size: clamp(16px, 1.5vw, 26px); font-weight: 800; }
.sr-wk-dist div i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, color-mix(in srgb, var(--ui-accent2) 45%, transparent), color-mix(in srgb, var(--ui-accent) 35%, transparent)); animation: sr-grow .9s ease-out both; }
.sr-wk-dist div.ok i { background: linear-gradient(90deg, #2c9a5f, #59d98e); }
.sr-wk-dist div span, .sr-wk-dist div b { position: relative; }
.sr-wk-scr-final > strong { font: 900 clamp(90px, 13vw, 220px)/1 Unbounded, system-ui, sans-serif; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: sr-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-wk-scr-final > .kicker { font-size: clamp(14px, 1.3vw, 22px); }
.sr-wk-scr-final .sr-wk-top-label { margin: 6px 0 0; font-size: clamp(14px, 1.2vw, 20px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); }
.sr-wk-scr-final .scr-podium b.sr-nick { background: none; border: 0; padding: 0; font-size: inherit; }

/* «Правда или действие» на экране */
.sr-scr .sr-td-rules { max-width: 1500px; margin: 0 auto; gap: clamp(12px, 1.6vw, 28px); }
.sr-scr .sr-td-rules > div { padding: clamp(12px, 1.4vw, 24px) clamp(16px, 1.8vw, 30px); border-radius: 20px; }
.sr-scr .sr-td-rules b { font-size: clamp(18px, 1.8vw, 32px); }
.sr-scr .sr-td-rules span { font-size: clamp(15px, 1.35vw, 24px); }
.sr-td-scr-pool h1 b.sr-cmd { white-space: nowrap; }
.sr-td-scr-turn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 60px); align-items: center; width: 100%; max-width: 1700px; margin: 0 auto; }
.sr-td-scr-turn.solo { grid-template-columns: minmax(0, 1fr); }
.sr-td-scr-who { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 26px); text-align: center; }
.sr-td-scr-who .sr-ava { animation: sr-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-td-scr-who h1 { margin: 0; max-width: 100%; overflow-wrap: anywhere; font: 900 clamp(38px, 4.6vw, 88px)/1.05 Unbounded, system-ui, sans-serif; color: var(--nick); text-shadow: 0 0 40px color-mix(in srgb, var(--nick) 45%, transparent); animation: sr-pop .5s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
.sr-td-scr-who .sr-td-ask { margin: 0; font: 800 clamp(26px, 2.8vw, 50px)/1.15 Unbounded, system-ui, sans-serif; animation: sr-breathe 1.6s ease-in-out infinite; }
.sr-td-badge {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: .4em; max-width: 100%; padding: clamp(14px, 1.6vw, 28px) clamp(20px, 2.4vw, 46px);
  border-radius: 26px; border: 3px solid; animation: sr-flip .7s cubic-bezier(.3, 1.3, .5, 1) both;
}
.sr-td-badge strong { font: 900 clamp(38px, 4.2vw, 80px)/1 Unbounded, system-ui, sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.sr-td-scr-turn.solo .sr-td-badge strong { font-size: clamp(48px, 6vw, 112px); }
.sr-td-badge p { margin: 0; font-size: clamp(17px, 1.6vw, 28px); line-height: 1.35; }
.sr-td-badge.truth { border-color: #6aa8ff; background: linear-gradient(160deg, #1d3566, #121d38); box-shadow: 0 0 60px #6aa8ff55; }
.sr-td-badge.truth strong { color: #8cbcff; }
.sr-td-badge.dare { border-color: #ff5ba8; background: linear-gradient(160deg, #5c1838, #2c0d1d); box-shadow: 0 0 60px #ff5ba855; }
.sr-td-badge.dare strong { color: #ff7eb6; }
.sr-td-scr-chat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(8px, 1.2vh, 16px); min-height: 40vh; max-height: 64vh; overflow: hidden;
  padding: clamp(14px, 1.6vw, 28px); border-radius: 24px; border: 2px solid color-mix(in srgb, var(--nick) 45%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07));
}
.sr-td-scr-chat > .kicker { margin-bottom: auto; color: var(--nick); font-size: clamp(13px, 1.1vw, 20px); }
.sr-td-scr-chat .sr-td-msg { font-size: clamp(18px, 1.7vw, 32px); padding: .45em .8em; border-radius: .25em .9em .9em .9em; background: rgba(20, 14, 34, .85); border-width: 2px; }
.sr-td-scr-chat .sr-td-empty { font-size: clamp(18px, 1.6vw, 28px); }


/* Конфетти */
.sr-confetti { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.sr-confetti i { position: absolute; top: -4vh; width: 12px; height: 18px; border-radius: 2px; opacity: .95; animation: sr-confetti var(--s) linear var(--d) 2 both; }

/* ---------- Анимации ---------- */
@keyframes sr-br-enter { from { left: 4%; opacity: .2; } 30% { opacity: 1; } }
@keyframes sr-br-fall { 0% { transform: translateX(-50%); opacity: 1; } 20% { transform: translate(-50%, -10px) rotate(-6deg); } 100% { transform: translate(-50%, 340%) rotate(24deg) scale(.7); opacity: 0; } }
@keyframes sr-pane-pulse { from { box-shadow: 0 0 0 1px #ffc94d44, 0 0 10px #ffc94d33; } to { box-shadow: 0 0 0 2px #ffc94d88, 0 0 26px #ffc94d66; } }
@keyframes sr-shatter { 0% { transform: scale(1.06); filter: brightness(2.4); } 40% { transform: scale(.94) rotate(-1deg); } 100% { transform: none; filter: none; } }
@keyframes sr-shards { 0% { opacity: 1; transform: translateY(0) rotate(0) scale(1.4); } 100% { opacity: 0; transform: translateY(260%) rotate(140deg) scale(.6); } }
@keyframes sr-cell-open { from { transform: scale(.6); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes sr-cell-boom { 0% { transform: scale(.3); filter: brightness(3); } 55% { transform: scale(1.35); } 100% { transform: none; filter: none; } }
@keyframes sr-beat { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes sr-flip { from { transform: rotateX(90deg); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes sr-miss { 0% { opacity: 0; transform: scale(2.2); } 18% { opacity: 1; transform: scale(.95); } 26% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes sr-grow { from { width: 0; } }
@keyframes sr-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sr-confetti { 0% { transform: translateY(0) rotate(var(--r)); } 100% { transform: translateY(112vh) rotate(calc(var(--r) + 720deg)); } }
@keyframes sr-reel { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
@keyframes sr-reel-win { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1.07); } }
@keyframes sr-msg-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sr-stamp { 0% { transform: rotate(10deg) scale(3); opacity: 0; } 60% { transform: rotate(10deg) scale(.9); opacity: 1; } 100% { transform: rotate(10deg) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sr-reel-card, .sr-td-msg, .sr-td-badge,
  .sr-br-tok, .sr-pane, .sr-pane::before, .sr-cell, .sr-wk-tablo .slot, .sr-wk-secret, .sr-wk-miss, .sr-confetti i, .sr-scr-title, .sr-wk-scr-q {
    animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important;
  }
}