/* Svara — premium table UI. The game protocol and mechanics remain untouched. */
:root {
  --bg: #050b0a;
  --bg-elevated: #0b1513;
  --surface: rgba(15, 27, 24, .92);
  --surface-solid: #101b19;
  --surface-soft: rgba(22, 37, 33, .72);
  --line: rgba(207, 226, 218, .12);
  --line-strong: rgba(228, 203, 139, .34);
  --text: #f4f6f1;
  --muted: #91a39d;
  --muted-dim: #65756f;
  --gold: #e9bf69;
  --gold-bright: #f5d990;
  --gold-deep: #a8742d;
  --ruble: #9fe3c0;
  --ruble-glow: rgba(85, 201, 144, .48);
  --red: #d33e47;
  --joker: #7a1f24;
  --ok: #55c990;
  --danger: #ef666b;
  --svara: #f0784f;
  --felt: #103c2f;
  --felt-deep: #09271f;
  --card-bg: #fffdf7;
  --card-ink: #121a19;
  --card-back-border: rgba(247, 221, 151, .68);
  --card-back-frame: rgba(251, 226, 157, .5);
  --card-back-ink: #f5d990;
  --card-back-surface:
    radial-gradient(ellipse at 50% 48%, rgba(232,190,105,.22) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(247,221,151,.09) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(247,221,151,.07) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 22% 15%, rgba(155,70,67,.78), transparent 42%),
    linear-gradient(145deg, #6f2e32, #35151f 62%, #210d15);
  --shadow-xl: 0 34px 80px rgba(0, 0, 0, .55);
  --shadow-ui: 0 14px 32px rgba(0, 0, 0, .3);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --svara-viewport-top: 0px;
  --svara-viewport-height: var(--tg-viewport-stable-height, 100dvh);
  --svara-hand-viewport-width: 100dvw;
  --svara-hand-viewport-height: 100dvh;
  --svara-hand-viewport-left: 0px;
  --svara-hand-viewport-top: 0px;
  --svara-topbar-bottom: 74px;
  --svara-notice-top: calc(var(--svara-topbar-bottom) + 8px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background-color: #030706; }
body {
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(38, 97, 76, .24), transparent 46%),
    linear-gradient(155deg, #08110f 0%, var(--bg) 58%, #030706 100%);
  background-color: #030706;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
  user-select: none;
  -webkit-user-select: none;
}
button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.screen {
  position: fixed; top: var(--svara-viewport-top); right: 0; bottom: auto; left: 0;
  width: 100%; height: var(--svara-viewport-height); display: flex; flex-direction: column;
}
.hidden { display: none !important; }

.connection-status {
  position: fixed; z-index: 500; top: max(10px, env(safe-area-inset-top)); left: 50%;
  max-width: min(92vw, 440px); padding: 9px 15px; border: 1px solid rgba(240, 120, 79, .38);
  border-radius: 999px; transform: translateX(-50%); color: #fff5eb;
  background: rgba(85, 35, 23, .94); box-shadow: 0 12px 30px rgba(0,0,0,.34);
  font-size: 12px; font-weight: 700; letter-spacing: .01em; text-align: center;
  backdrop-filter: blur(14px); animation: connection-in .22s var(--ease-out) both;
}
.connection-status.over-game { top: var(--svara-notice-top); }
.connection-status.is-connecting { border-color: rgba(233, 191, 105, .4); background: rgba(54, 44, 20, .94); }
.connection-status.is-restored { border-color: rgba(85, 201, 144, .42); background: rgba(20, 66, 47, .95); }
@keyframes connection-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── Authentication ───────────────────────────────────────────────────── */
#auth {
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(rgba(4, 10, 9, .76), rgba(4, 10, 9, .92)),
    repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,.012) 24px 25px);
}
.auth-aurora { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.aurora-one {
  width: min(76vw, 880px); aspect-ratio: 1; left: -24%; top: -48%;
  background: radial-gradient(circle, rgba(32, 128, 91, .22), transparent 67%);
}
.aurora-two {
  width: min(58vw, 680px); aspect-ratio: 1; right: -20%; bottom: -45%;
  background: radial-gradient(circle, rgba(196, 145, 66, .13), transparent 68%);
}
.auth-box {
  width: min(100%, 430px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(18, 31, 28, .88), rgba(8, 16, 14, .92));
  box-shadow: var(--shadow-xl), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
  animation: auth-in .7s var(--ease-out) both;
}
@keyframes auth-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.logo { margin-bottom: 28px; text-align: center; }
.logo-mark {
  position: relative; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 24px;
  display: grid; place-items: center; color: #151105; font-size: 34px;
  background: linear-gradient(145deg, var(--gold-bright), #bf8532);
  box-shadow: 0 16px 32px rgba(190, 132, 47, .18), inset 0 1px rgba(255,255,255,.55);
  transform: rotate(-4deg);
}
.logo-mark::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(51, 35, 7, .22); border-radius: 19px;
}
.logo-mark span { transform: rotate(4deg); }
.logo h1 { font-family: Georgia, "Times New Roman", serif; font-size: 31px; letter-spacing: .28em; font-weight: 600; text-indent: .28em; }
.logo-sub { margin-top: 7px; color: var(--muted); font-size: 13px; letter-spacing: .03em; }
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 4px; margin-bottom: 20px; padding: 4px;
  border: 1px solid rgba(255,255,255,.05); border-radius: 13px; background: rgba(0,0,0,.2);
}
.tab {
  min-height: 42px; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--muted); background: transparent; font-size: 14px; font-weight: 650;
  transition: color .2s, background .2s, box-shadow .2s;
}
.tab.active { color: var(--text); background: rgba(255,255,255,.07); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
#auth-form { display: flex; flex-direction: column; gap: 11px; }
.field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#auth-form input {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 13px;
  color: var(--text); background: rgba(2, 8, 7, .45); font-size: 15px; outline: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
#auth-form input::placeholder { color: var(--muted-dim); }
#auth-form input:focus { border-color: rgba(233, 191, 105, .58); background: rgba(10,20,18,.82); box-shadow: 0 0 0 4px rgba(233,191,105,.07); }
.auth-error { min-height: 18px; color: var(--danger); font-size: 13px; text-align: center; }
.auth-footnote { margin-top: 18px; color: var(--muted-dim); font-size: 11px; letter-spacing: .02em; text-align: center; }
.auth-footnote span { padding: 0 6px; color: rgba(233,191,105,.6); }

/* ── Shared controls ──────────────────────────────────────────────────── */
.btn {
  position: relative; min-height: 48px; padding: 12px 20px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 13px; cursor: pointer;
  color: var(--text); background: linear-gradient(180deg, rgba(32,48,44,.95), rgba(20,33,30,.95));
  font-size: 15px; font-weight: 720; letter-spacing: .01em;
  box-shadow: 0 7px 18px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
  transition: transform .14s, border-color .18s, filter .18s, box-shadow .18s;
}
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.1), transparent 70%); transform: translateX(-120%); transition: transform .45s; }
.btn:hover:not(:disabled) { border-color: rgba(255,255,255,.2); filter: brightness(1.08); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.btn:hover:not(:disabled)::after { transform: translateX(120%); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn.primary {
  border-color: #efcb7d; color: #211807;
  background: linear-gradient(180deg, #f1cf82, #d7a447);
  box-shadow: 0 10px 24px rgba(202, 145, 53, .18), inset 0 1px rgba(255,255,255,.52);
}
.btn.dark {
  border-color: rgba(193,149,255,.58); color: #f3eaff;
  background: linear-gradient(180deg, rgba(91,48,138,.98), rgba(46,22,78,.98));
  box-shadow: 0 10px 24px rgba(80,39,132,.3), inset 0 1px rgba(255,255,255,.16);
}
.btn.ghost { background: rgba(8,15,14,.5); }
.btn.danger { border-color: rgba(239,102,107,.4); color: #ff9a9e; background: rgba(93,25,29,.2); }
.btn.big { flex: 1; min-height: 54px; font-size: 16px; }
.btn.small-btn { min-height: 34px; padding: 7px 13px; border-radius: 10px; font-size: 12px; }
.btn:disabled { cursor: not-allowed; opacity: .42; filter: saturate(.5); }
.icon-btn {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer;
  color: var(--muted); background: rgba(13,24,21,.82); font-size: 16px;
  box-shadow: inset 0 1px rgba(255,255,255,.035); transition: color .18s, border-color .18s, background .18s, transform .14s;
}
.icon-btn:hover { color: var(--text); border-color: rgba(255,255,255,.2); background: rgba(24,40,36,.92); }
.icon-btn:active { transform: scale(.96); }
.ui-icon { width: 19px; height: 19px; display: block; margin: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

/* ── Game shell ───────────────────────────────────────────────────────── */
#game { isolation: isolate; background: radial-gradient(ellipse at 50% 38%, rgba(19,72,54,.12), transparent 48%); }
#game::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}
.topbar {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  width: min(calc(100% - 32px), 1180px); min-height: 62px; margin: max(10px, env(safe-area-inset-top)) auto 0; padding: 9px 11px 9px 16px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(100deg, rgba(11,21,19,.9), rgba(13,25,22,.72));
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
}
.me {
  position: relative; display: grid; grid-template: "kicker balance" auto "name balance" auto / minmax(0,auto) auto;
  align-items: center; column-gap: 13px; padding-left: 13px;
}
.me::before { content: ""; position: absolute; left: 0; width: 4px; height: 28px; border-radius: 4px; background: linear-gradient(var(--gold-bright), var(--gold-deep)); box-shadow: 0 0 12px rgba(233,191,105,.3); }
.me-kicker { grid-area: kicker; color: var(--muted-dim); font-size: 8px; font-weight: 700; letter-spacing: .16em; line-height: 1; }
#me-name { grid-area: name; max-width: 220px; overflow: hidden; color: var(--text); font-size: 15px; font-weight: 750; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.coins { grid-area: balance; align-self: center; color: var(--gold-bright); font-size: 15px; font-weight: 800; line-height: 1; }
.coins::after {
  content: "₽"; display: inline-block; margin-left: 5px; color: var(--ruble);
  font-size: .9em; font-weight: 950; line-height: 1; vertical-align: 0;
  text-shadow: 0 2px 8px var(--ruble-glow);
}
.coins.is-unlimited::after { content: none; }
.balance-delta {
  position: absolute; left: calc(100% + 12px); top: 50%; min-width: 54px; padding: 5px 8px;
  border: 1px solid rgba(233,191,105,.34); border-radius: 999px; color: var(--gold-bright);
  background: rgba(10,20,17,.92); font-size: 12px; font-weight: 900; text-align: center;
  transform: translateY(-50%); box-shadow: 0 8px 20px rgba(0,0,0,.32), 0 0 18px rgba(233,191,105,.16);
}
.balance-delta.incoming { color: #92e2b8; border-color: rgba(85,201,144,.42); }
.balance-delta.outgoing { color: #f0c978; }
.top-right { display: flex; align-items: center; gap: 8px; }
.observers { margin-right: 5px; color: var(--muted); font-size: 12px; }
.voice-controls { display: flex; align-items: center; gap: 5px; }
.voice-toggle { position: relative; flex: 0 0 auto; }
.voice-toggle:disabled { cursor: wait; opacity: .68; }
.voice-glyph { position: relative; width: 22px; height: 22px; display: inline-grid; place-items: center; line-height: 1; }
.voice-glyph .ui-icon { width: 18px; height: 18px; }
.voice-toggle.is-off .voice-glyph::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 25px; height: 2px; border-radius: 2px;
  background: #f4f6f1; box-shadow: 0 0 0 1px rgba(5,11,10,.72); transform: translate(-50%,-50%) rotate(-45deg);
}
.voice-count {
  position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center;
  border-radius: 999px; color: #082016; background: var(--ok); font-size: 10px; font-weight: 900;
}
.voice-icon { width: 38px; height: 38px; font-size: 14px; }
.voice-leave { font-size: 21px; }
.voice-audio { display: none; }

/* ── Последние решения ───────────────────────────────────────────────── */
.action-history {
  position: absolute; top: var(--svara-notice-top); left: max(16px, calc((100vw - 1180px) / 2)); z-index: 33;
  width: 224px; pointer-events: none; transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
#game.top-notice-active .action-history { opacity: 0; visibility: hidden; }
.action-history-title {
  margin: 0 0 7px 10px; color: rgba(233,191,105,.62); font-size: 8px;
  font-weight: 850; letter-spacing: .17em; text-transform: uppercase;
}
#action-history-list { display: grid; gap: 6px; list-style: none; }
.action-history-item {
  --history-rgb: 151,211,181; display: grid; grid-template-columns: 32px minmax(0,1fr);
  align-items: center; gap: 9px; min-height: 48px; padding: 7px 11px 7px 8px;
  border: 1px solid rgba(var(--history-rgb),.22); border-radius: 14px;
  background: linear-gradient(110deg, rgba(9,19,16,.94), rgba(7,14,12,.82));
  box-shadow: 0 10px 24px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(12px); animation: history-in .46s var(--ease-out) both;
}
.action-history-item.tone-danger { --history-rgb: 239,102,107; }
.action-history-item.tone-bet { --history-rgb: 245,185,83; }
.action-history-item.tone-close { --history-rgb: 255,226,151; }
.action-history-item.tone-more { --history-rgb: 148,118,224; }
.action-history-avatar {
  width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(var(--history-rgb),.4);
  border-radius: 50%; color: rgb(var(--history-rgb)); background: rgba(var(--history-rgb),.09);
  font-family: Georgia,serif; font-size: 13px; font-weight: 750;
}
.action-history-copy { min-width: 0; display: grid; gap: 2px; }
.action-history-player { overflow: hidden; color: rgba(241,245,241,.66); font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.action-history-action { overflow: hidden; color: #f4f6f1; font-size: 12px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
@keyframes history-in { from { opacity: 0; transform: translateX(-12px) scale(.97); } }
.first-visit-hint {
  position: absolute; right: max(18px, calc((100vw - 1180px) / 2)); top: var(--svara-notice-top); z-index: 42;
  width: min(310px, calc(100vw - 24px)); padding: 11px 14px; display: grid; gap: 3px;
  border: 1px solid rgba(233,191,105,.3); border-radius: 14px; color: var(--text);
  background: rgba(7,16,14,.95); box-shadow: 0 16px 34px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.04);
  pointer-events: none; backdrop-filter: blur(16px); animation: first-hint 8s var(--ease-out) both;
}
.first-visit-hint::before { content: ""; position: absolute; right: 50px; top: -6px; width: 10px; height: 10px; border: solid rgba(233,191,105,.3); border-width: 1px 0 0 1px; background: #0a1714; transform: rotate(45deg); }
.first-visit-hint strong { color: var(--gold-bright); font-size: 12px; }
.first-visit-hint span { color: var(--muted); font-size: 10px; line-height: 1.4; }
@keyframes first-hint { 0% { opacity: 0; transform: translateY(8px); } 5%,86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(5px); } }
.first-visit-hint.ui-closing { animation: notice-out .18s ease-in both; }
@keyframes notice-out {
  from { opacity: var(--notice-exit-opacity,1); transform: var(--notice-exit-transform,none); }
  to { opacity: 0; transform: translateY(-4px) scale(.985); }
}

/* ── Table ────────────────────────────────────────────────────────────── */
#table-wrap { position: relative; flex: 1; min-height: 0; width: min(100%, 1260px); margin: 0 auto; }
#table { position: absolute; inset: 0 18px; }
.table-shadow {
  position: absolute; inset: 10% 7% 12%; z-index: 0; border-radius: 50%;
  background: rgba(0,0,0,.72); filter: blur(28px); transform: translateY(24px) scale(.97);
}
#oval {
  position: absolute; inset: 5% 4% 13%; z-index: 1; overflow: hidden;
  border: clamp(9px, 1.35vw, 18px) solid #14221f; border-radius: 50% / 55%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(42,112,84,.34), transparent 42%),
    repeating-radial-gradient(ellipse at center, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #164b3b, var(--felt) 48%, var(--felt-deep));
  box-shadow:
    0 0 0 2px #273933,
    0 0 0 4px rgba(233,191,105,.13),
    inset 0 0 0 2px rgba(233,191,105,.12),
    inset 0 0 70px rgba(0,0,0,.55),
    var(--shadow-xl);
}
#oval::before {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(224,197,128,.1); border-radius: inherit; pointer-events: none;
}
#oval::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.035) 38%, transparent 54%);
}
.felt-mark {
  position: absolute; left: 50%; top: 52%; display: grid; justify-items: center; gap: 3px;
  color: rgba(229,215,179,.08); transform: translate(-50%,-50%); letter-spacing: .25em;
}
.felt-mark span { font-size: clamp(32px, 5vw, 64px); line-height: .8; }
.felt-mark b { font-family: Georgia, serif; font-size: clamp(14px, 2vw, 23px); font-weight: 500; }
.felt-mark small { font-size: clamp(5px, .65vw, 8px); letter-spacing: .18em; white-space: nowrap; }
.status-banner {
  position: absolute; top: 9%; left: 50%; z-index: 20; max-width: min(80%, 520px); padding: 9px 17px;
  border: 1px solid rgba(229,204,141,.22); border-radius: 999px;
  color: #e8ece8; background: rgba(4,12,10,.76); font-size: 12px; font-weight: 650; letter-spacing: .01em;
  box-shadow: 0 10px 22px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px); transform: translateX(-50%); white-space: nowrap;
  animation: status-in .35s var(--ease-out) both;
}
@keyframes status-in { from { opacity: 0; transform: translate(-50%,-6px); } }
.game-timer {
  --timer-size: 118px;
  --timer-angle: 360deg;
  --timer-offset: 0;
  --timer-aura-opacity: .19;
  --timer-aura-scale: 1;
  --timer-color: #f7dfa1;
  --timer-glow: rgba(236,196,98,.36);
  --timer-value-color: #fff2c6;
  --timer-label-color: rgba(241,208,121,.9);
  --timer-head-color: #fff0b5;
  --timer-tick-scale: 1.055;
  display: grid; justify-items: center; pointer-events: none;
}
.game-timer::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(var(--timer-size) * 2.25);
  aspect-ratio: 1; border-radius: 50%; opacity: var(--timer-aura-opacity);
  background:
    repeating-radial-gradient(circle, transparent 0 8px, rgba(233,205,126,.16) 9px, transparent 10px 16px),
    radial-gradient(circle, rgba(226,190,95,.27), rgba(14,102,76,.08) 42%, transparent 70%);
  filter: blur(.2px); transform: translate(-50%,-50%) scale(var(--timer-aura-scale));
  transition: opacity .35s ease, transform .35s ease;
}
.game-timer-dial {
  position: relative; width: var(--timer-size); height: var(--timer-size); display: grid; place-items: center;
  isolation: isolate; border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 38%),
    radial-gradient(circle at 38% 29%, rgba(27,55,47,.99), rgba(5,22,18,.99) 58%, rgba(2,12,10,1));
  box-shadow:
    0 18px 38px rgba(0,0,0,.45),
    0 0 30px var(--timer-glow),
    inset 0 1px rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(235,211,143,.13);
  transition: box-shadow .35s ease, transform .35s var(--ease-out);
}
.game-timer-dial::after {
  content: ""; position: absolute; inset: 10%; z-index: 1; border: 1px solid rgba(245,219,150,.12);
  border-radius: inherit; pointer-events: none;
}
.game-timer-ring {
  position: absolute; inset: -5%; z-index: 3; width: 110%; height: 110%; overflow: visible;
  transform: rotate(-90deg);
}
.game-timer-ring circle { fill: none; }
.game-timer-outer { stroke: rgba(244,219,149,.25); stroke-width: .55; }
.game-timer-track { stroke: rgba(255,255,255,.1); stroke-width: 3.35; }
.game-timer-progress {
  stroke: var(--timer-color); stroke-dasharray: 100; stroke-dashoffset: var(--timer-offset);
  stroke-linecap: round; transition: stroke-dashoffset .22s linear, stroke .35s ease, opacity .35s ease;
}
.game-timer-progress-glow { stroke-width: 6.7; opacity: .24; filter: drop-shadow(0 0 3px var(--timer-color)); }
.game-timer-progress-line { stroke-width: 3.15; filter: drop-shadow(0 0 1.6px var(--timer-color)); }
.game-timer-segments {
  stroke: rgba(255,235,174,.7); stroke-width: .9; stroke-dasharray: .72 32.613; stroke-linecap: round;
}
.game-timer-head {
  position: absolute; inset: 3.2%; z-index: 5; border-radius: 50%; transform: rotate(var(--timer-angle));
  transition: transform .22s linear;
}
.game-timer-head::after {
  content: ""; position: absolute; left: 50%; top: -1px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--timer-head-color); box-shadow: 0 0 5px 2px var(--timer-color), 0 0 13px 4px var(--timer-glow);
  transform: translate(-50%,-50%); transition: box-shadow .35s ease, background .35s ease;
}
.game-timer-copy {
  position: relative; z-index: 6; display: grid; justify-items: center; gap: 12px; padding-top: 3px;
  color: var(--timer-value-color); text-shadow: 0 3px 15px rgba(0,0,0,.5);
}
.game-timer-value {
  min-width: 3.9ch; color: inherit; font-family: Georgia,serif; font-size: 29px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: .86; text-align: center;
  transform: scale(1); transition: color .35s ease, text-shadow .35s ease;
}
.game-timer-label {
  display: flex; align-items: center; gap: 6px; color: var(--timer-label-color); font-size: 7px; font-weight: 900;
  letter-spacing: .17em; line-height: 1; text-indent: .17em; white-space: nowrap;
  transition: color .35s ease;
}
.game-timer-label::before, .game-timer-label::after {
  content: ""; width: 10px; height: 1px; background: linear-gradient(90deg, transparent, currentColor);
}
.game-timer-label::after { transform: scaleX(-1); }
.game-timer.urgent {
  --timer-color: #e8b45d;
  --timer-glow: rgba(225,145,45,.46);
}
.game-timer.critical {
  --timer-color: #ee9257;
  --timer-glow: rgba(238,103,52,.56);
  --timer-value-color: #ffe1c2;
  --timer-label-color: rgba(255,195,148,.92);
  --timer-head-color: #ffd5a5;
}
.game-timer.final {
  --timer-color: #ef666b;
  --timer-glow: rgba(239,70,76,.66);
  --timer-value-color: #ffd4d4;
  --timer-label-color: rgba(255,174,170,.94);
  --timer-head-color: #ffd0d0;
  --timer-tick-scale: 1.08;
}
.game-timer.urgent .game-timer-dial { box-shadow: 0 18px 38px rgba(0,0,0,.47), 0 0 34px var(--timer-glow), inset 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(247,218,132,.18); }
.game-timer.final .game-timer-dial { box-shadow: 0 18px 38px rgba(0,0,0,.49), 0 0 38px var(--timer-glow), inset 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(239,102,107,.22); }
.game-timer.critical .game-timer-value { text-shadow: 0 0 15px var(--timer-glow), 0 3px 15px rgba(0,0,0,.55); }
.game-timer.is-ticking .game-timer-value { animation: game-timer-tick .46s var(--ease-out) both; }
.game-timer.is-ticking .game-timer-progress-glow { animation: game-timer-glow-tick .46s var(--ease-out) both; }
.game-timer.is-ticking .game-timer-head::after { animation: game-timer-head-tick .46s var(--ease-out) both; }
@keyframes game-timer-tick {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(var(--timer-tick-scale)); }
}
@keyframes game-timer-glow-tick { 0%, 100% { opacity: .24; } 42% { opacity: .5; } }
@keyframes game-timer-head-tick {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  42% { transform: translate(-50%,-50%) scale(1.18); }
}
.game-timer-transition {
  position: fixed !important; z-index: 44; margin: 0 !important; pointer-events: none !important;
  opacity: 1; transform: scale(1); transform-origin: center; will-change: transform, opacity, filter;
  transition:
    transform .38s cubic-bezier(.16,1,.3,1),
    opacity .16s ease .22s,
    filter .38s ease !important;
}
.game-timer-transition.is-leaving {
  opacity: 0; filter: blur(2px) drop-shadow(0 0 12px var(--timer-color)); transform: scale(.14);
}
.phase-timer {
  position: absolute; left: 50%; top: 52%; z-index: 24;
  transform: translate(-50%,-50%); animation: phase-timer-in .38s var(--ease-out) both;
}
@keyframes phase-timer-in { from { opacity: 0; transform: translate(-50%,-43%) scale(.82); } }
.bank {
  position: absolute; left: 50%; top: 39%; z-index: 14; display: flex; align-items: center; gap: 11px; padding: 8px 15px 8px 10px;
  border: 1px solid rgba(233,191,105,.23); border-radius: 16px;
  background: rgba(4,12,10,.62); box-shadow: 0 10px 24px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(10px); transform: translate(-50%,-50%); animation: bank-in .35s var(--ease-out) both;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s;
}
@keyframes bank-in { from { opacity: 0; transform: translate(-50%,-42%) scale(.9); } }
.bank.collecting { z-index: 32; animation: bank-collect 1s ease-in-out infinite alternate; }
.bank.bank-updated { animation: bank-updated .5s var(--ease-out) both; }
.bank.bank-drained { opacity: 0; filter: blur(5px); transform: translate(-50%,-50%) scale(.68); }
@keyframes bank-collect {
  to { border-color: rgba(245,217,144,.58); box-shadow: 0 0 28px rgba(233,191,105,.28), 0 10px 24px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.08); }
}
@keyframes bank-updated {
  0% { transform: translate(-50%,-50%) scale(.97); }
  55% { border-color: rgba(245,217,144,.64); box-shadow: 0 0 28px rgba(233,191,105,.3), 0 10px 24px rgba(0,0,0,.3); transform: translate(-50%,-50%) scale(1.045); }
  78% { transform: translate(-50%,-50%) scale(.995); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
.bank-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.bank-copy small { margin-bottom: 3px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
#bank-amount { color: var(--gold-bright); font-size: 18px; font-weight: 850; }
.chip-stack {
  width: 27px; height: 26px; display: grid; place-items: center; color: var(--ruble);
  font-size: 28px; font-weight: 950; line-height: 1;
  text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 12px var(--ruble-glow);
}
.chip-fly {
  position: absolute; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; color: var(--ruble); background: transparent;
  font-size: 23px; font-weight: 950; line-height: 1;
  text-shadow: 0 4px 10px rgba(0,0,0,.6), 0 0 10px var(--ruble-glow);
}
.chip-fly::before { content: "₽"; }

/* Общий центральный таймер собственного хода — виден независимо от позиции аватара. */
.my-turn-timer {
  --timer-size: 110px;
  position: absolute; left: 50%; top: 57%; z-index: 28; gap: 7px;
  transform: translate(-50%,-50%); pointer-events: none; animation: own-timer-in .35s var(--ease-out) both;
}
@keyframes own-timer-in { from { opacity: 0; transform: translate(-50%,-44%) scale(.88); } }
.my-turn-bet {
  display: grid; justify-items: center; gap: 1px; min-width: 132px; padding: 5px 11px 6px;
  border: 1px solid rgba(245,185,83,.52); border-radius: 11px; background: rgba(20,25,15,.94);
  box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 18px rgba(245,185,83,.16);
  animation: my-turn-bet-in .42s var(--ease-out) both;
}
.my-turn-bet small { max-width: 175px; overflow: hidden; color: #efd49b; font-size: 8px; font-weight: 850; letter-spacing: .09em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.my-turn-bet strong { color: #fff3d1; font-family: Georgia, serif; font-size: 21px; line-height: 1; text-shadow: 0 0 12px rgba(245,185,83,.36); }
@keyframes my-turn-bet-in { from { opacity: 0; transform: translateY(-6px) scale(.9); } }

/* ── Player seats ─────────────────────────────────────────────────────── */
.seat {
  position: absolute; z-index: 10; width: 108px; color: var(--text); text-align: center;
  transform: translate(-50%, -50%);
  transition: left .42s var(--ease-out), top .42s var(--ease-out), opacity .35s, filter .35s, transform .35s var(--ease-out);
}
.seat .avatar-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.seat .avatar {
  position: relative; width: 64px; height: 64px; padding: 0; display: grid; place-items: center; overflow: hidden;
  border: 2px solid rgba(195,218,207,.22); border-radius: 50%;
  color: #edf5ef; background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.17), transparent 25%),
    linear-gradient(145deg, hsl(var(--avatar-hue, 155) 34% 35%), hsl(var(--avatar-hue, 155) 42% 18%));
  font-family: Georgia, serif; font-size: 23px; font-weight: 700;
  box-shadow: 0 8px 17px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.12);
}
.seat .avatar::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: inherit; pointer-events: none; }
.seat .player-avatar { appearance: none; cursor: pointer; }
.seat .player-avatar:hover { filter: brightness(1.08); }
.seat .player-avatar:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.seat .avatar img, .action-history-avatar img, .profile-avatar-large img { width: 100%; height: 100%; display: block; object-fit: cover; }
.seat-info {
  position: relative; min-width: 84px; max-width: 106px; margin: -4px auto 0; padding: 5px 8px 6px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  background: linear-gradient(180deg, rgba(17,29,26,.96), rgba(7,14,12,.96));
  box-shadow: 0 7px 17px rgba(0,0,0,.3); backdrop-filter: blur(8px);
}
.seat .name { overflow: hidden; color: #eff3ef; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.seat .stack { margin-top: 2px; color: var(--gold-bright); font-size: 10px; font-weight: 780; }
.seat .stack::before { content: "₽"; display: inline-block; margin-right: 4px; color: var(--ruble); font-size: .88em; font-weight: 950; vertical-align: 0; text-shadow: 0 2px 7px var(--ruble-glow); }
.seat .stack.is-unlimited::before { content: none; }
.seat.empty { opacity: .28; filter: saturate(.35); }
.seat.empty .avatar { border-style: dashed; color: rgba(255,255,255,.42); background: rgba(4,12,10,.38); box-shadow: none; }
.seat.empty .seat-info { min-width: 70px; border-style: dashed; background: rgba(4,12,10,.25); box-shadow: none; }
.seat.empty .name { color: var(--muted); font-size: 8px; font-weight: 600; }
.seat.folded { opacity: .38; filter: grayscale(.8); transform: translate(-50%,-50%) scale(.96); }
.seat.svara-member .avatar { border-color: var(--svara); box-shadow: 0 0 0 3px rgba(240,120,79,.15), 0 0 22px rgba(240,120,79,.4); }
.seat.is-turn { z-index: 17; }
.seat.is-turn .avatar { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(233,191,105,.12), 0 0 24px rgba(233,191,105,.38), 0 8px 17px rgba(0,0,0,.4); }
.seat.is-turn .avatar-wrap { animation: turn-arrival .62s var(--ease-out) both; }
@keyframes turn-arrival {
  0% { opacity: .72; transform: scale(.94); filter: brightness(.86); }
  56% { transform: scale(1.045); filter: brightness(1.12); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.readiness-badge {
  position: absolute; left: 50%; top: -12px; z-index: 9; min-width: 62px; height: 20px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid; border-radius: 999px;
  font-size: 7px; font-weight: 950; letter-spacing: .1em; line-height: 1; text-indent: .1em; white-space: nowrap;
  transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(8px);
}
.readiness-badge b { font-size: 11px; line-height: 1; text-indent: 0; }
.readiness-ready {
  border-color: rgba(127,235,183,.82); color: #d9ffeb; background: linear-gradient(145deg,rgba(18,112,75,.98),rgba(5,54,39,.98));
  box-shadow: 0 5px 14px rgba(0,0,0,.42), 0 0 17px rgba(70,216,143,.34);
}
.readiness-dark {
  border-color: rgba(205,166,255,.88); color: #f7edff; background: linear-gradient(145deg,rgba(95,49,145,.98),rgba(42,19,73,.98));
  box-shadow: 0 5px 14px rgba(0,0,0,.44), 0 0 20px rgba(166,102,238,.42);
}
.readiness-waiting {
  border-color: rgba(240,181,92,.82); color: #ffe7b0; background: linear-gradient(145deg,rgba(112,25,48,.98),rgba(49,8,21,.98));
  box-shadow: 0 5px 14px rgba(0,0,0,.44), 0 0 16px rgba(224,143,70,.28);
}
.readiness-skipped {
  border-color: rgba(181,193,188,.5); color: #d2dbd7; background: linear-gradient(145deg,rgba(55,65,62,.97),rgba(24,30,28,.97));
  box-shadow: 0 5px 13px rgba(0,0,0,.4);
}
.readiness-active {
  border-color: rgba(255,168,116,.9); color: #fff0df; background: linear-gradient(145deg,rgba(151,54,35,.98),rgba(74,20,20,.98));
  box-shadow: 0 5px 14px rgba(0,0,0,.44), 0 0 20px rgba(240,120,79,.4);
}
.readiness-joined {
  border-color: rgba(127,235,183,.82); color: #d9ffeb; background: linear-gradient(145deg,rgba(18,112,75,.98),rgba(5,54,39,.98));
  box-shadow: 0 5px 14px rgba(0,0,0,.42), 0 0 17px rgba(70,216,143,.34);
}
.readiness-declined {
  border-color: rgba(181,193,188,.5); color: #d2dbd7; background: linear-gradient(145deg,rgba(55,65,62,.97),rgba(24,30,28,.97));
  box-shadow: 0 5px 13px rgba(0,0,0,.4);
}
.seat.svara-active, .seat.svara-joined, .seat.svara-waiting { z-index: 16; }
.seat.svara-active .avatar { border-color: #f69b71; box-shadow: 0 0 0 4px rgba(240,120,79,.18), 0 0 28px rgba(240,120,79,.48), 0 8px 17px rgba(0,0,0,.4); }
.seat.svara-joined .avatar { border-color: #77e3af; box-shadow: 0 0 0 4px rgba(73,210,141,.18), 0 0 27px rgba(73,210,141,.44), 0 8px 17px rgba(0,0,0,.4); }
.seat.svara-waiting .avatar { border-color: rgba(239,178,83,.78); animation: recruit-waiting-pulse 1.55s ease-in-out infinite alternate; }
.seat.svara-declined .avatar, .seat.svara-declined .seat-info { opacity: .58; filter: grayscale(.72); }
.seat.recruit-ready { z-index: 16; }
.seat.recruit-dark { z-index: 17; }
.seat.recruit-dark .avatar {
  border-color: #cda6ff;
  box-shadow: 0 0 0 4px rgba(161,100,230,.2), 0 0 30px rgba(161,100,230,.55), 0 8px 17px rgba(0,0,0,.4);
}
.seat.recruit-dark .seat-info { border-color: rgba(193,149,255,.42); }
.seat.recruit-ready .avatar {
  border-color: #77e3af;
  box-shadow: 0 0 0 4px rgba(73,210,141,.18), 0 0 27px rgba(73,210,141,.48), 0 8px 17px rgba(0,0,0,.4);
}
.seat.recruit-ready .seat-info { border-color: rgba(91,218,155,.36); }
.seat.recruit-waiting { z-index: 15; }
.seat.recruit-waiting .avatar {
  border-color: rgba(239,178,83,.78);
  animation: recruit-waiting-pulse 1.55s ease-in-out infinite alternate;
}
.seat.recruit-waiting .seat-info { border-color: rgba(203,119,76,.38); }
.seat.recruit-skipped .avatar, .seat.recruit-skipped .seat-info { opacity: .58; filter: grayscale(.72); }
.seat.recruit-waiting.ready-reminder .avatar {
  border-color: #ffd17c;
  animation: recruit-last-player-pulse .72s ease-in-out infinite alternate;
}
.seat.recruit-waiting.ready-reminder .readiness-badge { animation: recruit-badge-pulse .72s ease-in-out infinite alternate; }
#btn-ready.ready-reminder:not(:disabled) {
  border-color: rgba(255,208,117,.92);
  box-shadow: 0 0 0 4px rgba(129,25,48,.28), 0 0 25px rgba(235,166,75,.42), 0 10px 22px rgba(0,0,0,.32);
  animation: recruit-ready-button 1s ease-in-out infinite alternate;
}
@keyframes recruit-waiting-pulse {
  from { box-shadow: 0 0 0 2px rgba(196,84,69,.12), 0 0 12px rgba(212,126,64,.18), 0 8px 17px rgba(0,0,0,.4); }
  to { box-shadow: 0 0 0 5px rgba(196,84,69,.19), 0 0 25px rgba(235,168,76,.4), 0 8px 17px rgba(0,0,0,.4); }
}
@keyframes recruit-last-player-pulse {
  from { box-shadow: 0 0 0 3px rgba(120,22,45,.22), 0 0 16px rgba(229,145,64,.3), 0 8px 17px rgba(0,0,0,.4); }
  to { box-shadow: 0 0 0 6px rgba(139,27,52,.27), 0 0 29px rgba(255,190,83,.54), 0 8px 17px rgba(0,0,0,.4); }
}
@keyframes recruit-badge-pulse { to { filter: brightness(1.14); transform: translateX(-50%) scale(1.025); } }
/* Подсветка не двигает саму кнопку: область нажатия остаётся стабильной даже
   при бесконечном напоминании последнему неготовому игроку. */
@keyframes recruit-ready-button { to { filter: brightness(1.13); } }
.seat.voice-speaking .avatar-wrap::before {
  content: ""; position: absolute; inset: -7px; z-index: -1; border: 2px solid rgba(85,201,144,.8); border-radius: 50%;
  box-shadow: 0 0 18px rgba(85,201,144,.55); animation: voice-speaking-pulse .9s ease-in-out infinite alternate;
}
@keyframes voice-speaking-pulse { to { opacity: .42; transform: scale(1.06); } }
.seat.seat-arriving .avatar {
  animation: seat-arriving-avatar 2.6s var(--ease-out) both;
}
.seat.seat-arriving .seat-info {
  animation: seat-arriving-info 2.6s var(--ease-out) both;
}
@keyframes seat-arriving-avatar {
  0% { opacity: 0; transform: translateY(-14px) scale(.72); filter: brightness(1.45); }
  14% { opacity: 1; transform: translateY(0) scale(1.065); filter: brightness(1.24); box-shadow: 0 0 0 6px rgba(85,201,144,.16), 0 0 30px rgba(85,201,144,.6), 0 9px 20px rgba(0,0,0,.48); }
  28%, 82% { transform: scale(1); filter: brightness(1.08); box-shadow: 0 0 0 4px rgba(85,201,144,.12), 0 0 24px rgba(85,201,144,.42), 0 8px 17px rgba(0,0,0,.4); }
  100% { filter: none; }
}
@keyframes seat-arriving-info {
  0% { opacity: 0; transform: translateY(9px) scale(.9); }
  18%, 84% { opacity: 1; transform: translateY(0) scale(1); border-color: rgba(85,201,144,.34); }
  100% { border-color: rgba(255,255,255,.09); }
}
.seat.is-turn .seat-info { border-color: rgba(233,191,105,.34); }
.seat.just-acted { z-index: 31; opacity: 1; filter: none; }
.seat.just-acted .avatar { animation: acted-avatar var(--cue-duration, 3.2s) var(--ease-out) both; }
.seat.just-acted .seat-info { animation: acted-info var(--cue-duration, 3.2s) var(--ease-out) both; }
.seat.just-acted.action-danger .avatar { --action-color: 239,102,107; }
.seat.just-acted.action-bet .avatar { --action-color: 245,185,83; }
.seat.just-acted.action-close .avatar { --action-color: 255,226,151; }
.seat.just-acted.action-more .avatar { --action-color: 148,118,224; }
.seat.just-acted.action-neutral .avatar { --action-color: 151,211,181; }
@keyframes acted-avatar {
  0% { transform: scale(.97); }
  13%, 68% { border-color: rgb(var(--action-color)); box-shadow: 0 0 0 5px rgba(var(--action-color),.14), 0 0 29px rgba(var(--action-color),.56), 0 10px 22px rgba(0,0,0,.5); transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes acted-info {
  12%, 70% { border-color: rgba(233,191,105,.44); box-shadow: 0 9px 22px rgba(0,0,0,.44), 0 0 16px rgba(233,191,105,.15); transform: translateY(1px) scale(1.02); }
}
.online-dot { position: absolute; right: 1px; bottom: 5px; z-index: 3; width: 9px; height: 9px; border: 2px solid #13201d; border-radius: 50%; background: var(--ok); }
.voice-muted-badge {
  position: absolute; left: -3px; top: 1px; z-index: 5; width: 23px; height: 23px; display: grid; place-items: center;
  border: 1px solid rgba(255,154,158,.62); border-radius: 50%; color: #ffb0b3; background: rgba(67,20,23,.96);
  box-shadow: 0 5px 13px rgba(0,0,0,.45); pointer-events: none;
}
.voice-muted-badge .ui-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.online-dot.offline { background: #596762; }
.seat .dealer-chip {
  position: absolute; left: -7px; bottom: 0; z-index: 4; width: 25px; height: 21px; display: grid; place-items: center;
  border: 1px solid rgba(225,234,229,.52); border-radius: 7px; color: #e3ebe7; background: linear-gradient(145deg,#34423e,#17221f);
  box-shadow: 0 4px 10px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.1);
}
.seat .dealer-chip .ui-icon { width: 14px; height: 14px; stroke-width: 1.8; }
.dark-hand-badge {
  position: absolute; left: 50%; top: -14px; z-index: 10; min-width: 72px; height: 21px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(205,166,255,.85); border-radius: 999px;
  color: #f7edff; background: linear-gradient(145deg,rgba(95,49,145,.98),rgba(42,19,73,.98));
  box-shadow: 0 5px 15px rgba(0,0,0,.45), 0 0 20px rgba(166,102,238,.38);
  font-size: 7px; font-weight: 950; letter-spacing: .1em; text-indent: .1em; white-space: nowrap;
  transform: translateX(-50%); pointer-events: none;
}
.seat.dealer-dealing { z-index: 42; }
.seat.dealer-dealing .avatar {
  border-color: rgba(245,217,144,.78);
  animation: dealer-dealing-pulse 1.35s ease-in-out infinite alternate;
}
.seat.dealer-dealing .dealer-chip {
  color: #fff1bf; border-color: rgba(245,217,144,.88); background: linear-gradient(145deg,#70501f,#2d2111);
  box-shadow: 0 0 0 4px rgba(233,191,105,.12), 0 0 24px rgba(233,191,105,.48), 0 5px 12px rgba(0,0,0,.5);
}
.seat.dealer-dealing::after {
  content: "СДАЁТ"; position: absolute; left: 50%; top: -21px; z-index: 6; padding: 4px 9px;
  border: 1px solid rgba(245,217,144,.72); border-radius: 999px; color: #fff0bc; background: rgba(38,25,10,.94);
  box-shadow: 0 6px 16px rgba(0,0,0,.44), 0 0 16px rgba(233,191,105,.24); font-size: 8px; font-weight: 950; letter-spacing: .14em;
  text-indent: .14em; transform: translateX(-50%); backdrop-filter: blur(8px); animation: dealer-label-pulse 1.35s ease-in-out infinite alternate;
}
@keyframes dealer-label-pulse { to { border-color: rgba(255,234,176,.96); box-shadow: 0 6px 16px rgba(0,0,0,.44), 0 0 24px rgba(233,191,105,.42); } }
@keyframes dealer-dealing-pulse {
  to { box-shadow: 0 0 0 6px rgba(233,191,105,.11), 0 0 27px rgba(233,191,105,.48), 0 8px 17px rgba(0,0,0,.42); }
}
.seat .ring { position: absolute; inset: -6px; width: 76px; height: 76px; pointer-events: none; filter: drop-shadow(0 0 5px rgba(233,191,105,.45)); }
.seat .ring circle { fill: none; stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.seat .mini-cards { --folded-cards-scale: .88; position: absolute; left: 50%; bottom: -28px; display: flex; justify-content: center; height: 29px; transform: translateX(-50%); }
.mini-card {
  position: relative; width: 20px; height: 29px; margin-left: -4px; border: 1px solid var(--card-back-border); border-radius: 4px;
  background: var(--card-back-surface);
  box-shadow: 0 3px 6px rgba(0,0,0,.35); transform: rotate(-4deg);
}
.mini-card:nth-child(2) { z-index: 2; transform: translateY(-2px); }
.mini-card:nth-child(3) { z-index: 3; transform: rotate(4deg); }
.mini-card.open { width: 23px; display: grid; place-items: center; border-color: rgba(0,0,0,.18); color: var(--card-ink); background: var(--card-bg); font-size: 8px; font-weight: 900; }
.mini-card.open.red { color: var(--red); }
.mini-card.open.joker { color: var(--joker); }
.seat.result-revealed { z-index: 30; opacity: 1; filter: none; }
.seat.result-revealed .mini-cards {
  bottom: -88px; width: 150px; height: 86px; align-items: flex-start; overflow: visible; transform: translateX(-50%);
  filter: none; animation: result-hand-in .42s var(--ease-out) both;
}
.seat.result-revealed.result-left .mini-cards { left: 76%; }
.seat.result-revealed.result-right .mini-cards { left: 24%; }
.seat.result-revealed .result-seat-card {
  flex: 0 0 auto; width: 56px; margin: 0 -8px; border-radius: 8px; transform-origin: 50% 110%; pointer-events: none;
}
.seat.result-revealed .result-seat-card:nth-child(1) { transform: translateY(6px) rotate(-9deg); }
.seat.result-revealed .result-seat-card:nth-child(2) { transform: translateY(0); }
.seat.result-revealed .result-seat-card:nth-child(3) { transform: translateY(6px) rotate(9deg); }
.seat.result-revealed .result-seat-card .corner { left: 6px; top: 5px; }
.seat.result-revealed .result-seat-card .corner.bottom { right: 6px; bottom: 5px; }
.seat.result-revealed .result-seat-card .rank { font-size: 15px; }
.seat.result-revealed .result-seat-card .corner .suit { margin-top: 1px; font-size: 11px; }
.seat.result-revealed .result-seat-card .suit-main { font-size: 25px; }
@keyframes result-hand-in {
  from { opacity: 0; transform: translate(-50%,9px) scale(.82); }
  to { opacity: 1; transform: translateX(-50%); }
}
.seat .bubble, .my-cards .bubble {
  position: absolute; left: 50%; top: -27px; z-index: 30; padding: 6px 10px;
  border: 1px solid rgba(233,191,105,.27); border-radius: 10px; color: #fff;
  background: rgba(7,15,13,.94); box-shadow: 0 8px 18px rgba(0,0,0,.35);
  font-size: 10px; font-weight: 750; white-space: nowrap; pointer-events: none;
  animation: bubble 2.6s var(--ease-out) forwards;
}
@keyframes bubble {
  0% { opacity: 0; transform: translate(-50%,7px) scale(.9); }
  10%, 78% { opacity: 1; transform: translate(-50%,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-9px) scale(.97); }
}

/* Общее объявление действия — видно всему столу, а не только рядом с аватаром. */
.action-spotlight {
  --action-rgb: 233,191,105; position: absolute; left: 50%; top: 29%; z-index: 34;
  min-width: min(72vw, 310px); display: grid; justify-items: center; gap: 4px; padding: 10px 24px 11px;
  border: 1px solid rgba(var(--action-rgb),.42); border-radius: 16px; color: #fff;
  background: linear-gradient(180deg, rgba(11,24,20,.96), rgba(4,12,10,.94));
  box-shadow: 0 14px 34px rgba(0,0,0,.46), 0 0 34px rgba(var(--action-rgb),.2), inset 0 1px rgba(255,255,255,.08);
  text-align: center; transform: translate(-50%,-50%); pointer-events: none; backdrop-filter: blur(14px);
  animation: action-spotlight var(--cue-duration, 3.2s) var(--ease-out) both;
}
.action-spotlight::before, .action-spotlight::after {
  content: ""; position: absolute; top: 50%; width: clamp(34px,7vw,90px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--action-rgb),.72));
}
.action-spotlight::before { right: calc(100% + 8px); }
.action-spotlight::after { left: calc(100% + 8px); transform: rotate(180deg); }
.action-spotlight.tone-danger { --action-rgb: 239,102,107; }
.action-spotlight.tone-bet { --action-rgb: 245,185,83; }
.action-spotlight.tone-close { --action-rgb: 255,226,151; }
.action-spotlight.tone-more { --action-rgb: 148,118,224; }
.action-spotlight.tone-neutral { --action-rgb: 151,211,181; }
.action-player { max-width: 260px; overflow: hidden; color: rgba(241,245,241,.72); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.action-label { color: rgb(var(--action-rgb)); font-family: Georgia,serif; font-size: clamp(18px,2vw,24px); font-weight: 700; text-shadow: 0 3px 14px rgba(var(--action-rgb),.28); }
.action-symbol {
  position: absolute; left: 13px; top: 50%; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid rgba(var(--action-rgb),.36); border-radius: 50%; color: rgb(var(--action-rgb));
  background: rgba(var(--action-rgb),.08); font-family: Georgia,serif; font-size: 17px; font-weight: 800;
  transform: translateY(-50%); box-shadow: 0 0 18px rgba(var(--action-rgb),.12);
}
.action-spotlight.decision-bet, .action-spotlight.decision-hold { background: linear-gradient(180deg, rgba(28,26,14,.97), rgba(10,15,10,.95)); }
.action-spotlight.decision-fold { background: linear-gradient(180deg, rgba(42,17,19,.97), rgba(17,8,10,.95)); }
.action-spotlight.decision-showdown, .action-spotlight.decision-close { box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 42px rgba(var(--action-rgb),.28), inset 0 1px rgba(255,255,255,.13); }
.seat.just-acted.decision-fold .mini-cards { animation: folded-cards .52s .18s var(--ease-out) both; }
.seat.just-acted.decision-pass .seat-info { animation-name: acted-info, action-pass-settle; }
.seat.just-acted.decision-showdown .avatar, .seat.just-acted.decision-close .avatar { filter: brightness(1.06); }
@keyframes action-pass-settle { 35% { translate: 4px 0; } 70%,100% { translate: 0 0; } }
@keyframes folded-cards {
  to {
    opacity: .18;
    transform: translate(calc(-50% + var(--fold-x,0px)),var(--fold-y,9px)) scale(var(--folded-cards-scale)) rotate(-5deg);
    filter: grayscale(1);
  }
}
@keyframes action-spotlight {
  0% { opacity: 0; transform: translate(-50%,-44%) scale(.94); filter: blur(3px); }
  8%, 68% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
  82%,100% { opacity: 0; transform: translate(-50%,-55%) scale(.985); filter: blur(1px); }
}

/* ── Playing cards ────────────────────────────────────────────────────── */
.my-cards {
  position: absolute; left: 50%; bottom: 3.2%; z-index: 18; display: flex; align-items: flex-end; justify-content: center;
  min-width: 260px; height: 132px; transform: translateX(-50%); perspective: 900px; pointer-events: none;
  touch-action: none;
}
.my-cards.is-folding .hand-card { animation: own-hand-fold .54s .12s var(--ease-out) both; pointer-events: none; }
.my-cards.is-folding .hand-card:nth-child(2) { animation-delay: .16s; }
.my-cards.is-folding .hand-card:nth-child(3) { animation-delay: .2s; }
.my-cards.is-folded { opacity: 0; pointer-events: none; }
@keyframes own-hand-fold {
  to { opacity: .12; transform: translate3d(0,-68px,0) rotateZ(0deg) scale(.7); filter: grayscale(1); }
}
.my-hand-score {
  position: absolute; z-index: 26; min-width: 70px; padding: 6px 10px; display: flex; align-items: baseline; justify-content: center; gap: 5px;
  border: 1px solid rgba(233,191,105,.32); border-radius: 999px; color: #fff3cc;
  background: linear-gradient(180deg, rgba(15,31,26,.96), rgba(5,15,12,.94));
  box-shadow: 0 9px 22px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.055);
  font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; pointer-events: none; backdrop-filter: blur(10px);
  animation: hand-score-in .24s var(--ease-out) both;
}
.my-hand-score.is-positioning { visibility: hidden; }
.my-hand-score strong { color: var(--gold-bright); font-family: Georgia,serif; font-size: 19px; font-weight: 750; }
.my-hand-score small { color: rgba(231,237,230,.66); font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.my-hand-score.is-absolute { min-width: 102px; flex-direction: column; align-items: center; gap: 2px; padding-block: 7px; }
.my-hand-score.is-absolute strong { font-family: inherit; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.my-hand-score.is-absolute small { font-size: 6px; letter-spacing: .14em; }
@keyframes hand-score-in { from { opacity: 0; filter: blur(3px); transform: scale(.9); } }
.hand-card {
  flex: 0 0 auto; cursor: grab; outline: 0; pointer-events: auto; touch-action: none; will-change: transform, filter;
  transition: filter .2s ease, box-shadow .2s ease;
}
.hand-card:focus-visible { filter: drop-shadow(0 0 8px rgba(245,217,144,.72)); }
.my-cards.is-gesturing .hand-card { cursor: grabbing; }
.hand-card:hover { box-shadow: none; }
.hand-focus-toggle {
  position: absolute; left: calc(50% + 152px); bottom: 5.5%; z-index: 24; width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center; border: 1px solid rgba(233,191,105,.3); border-radius: 50%;
  color: var(--gold-bright); background: rgba(5,15,12,.9); box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06);
  font-size: 22px; line-height: 1; cursor: zoom-in; backdrop-filter: blur(10px);
}
.hand-focus-toggle:hover { border-color: rgba(245,217,144,.62); background: rgba(13,29,23,.96); transform: translateY(-2px); }
.hand-focus-backdrop {
  position: fixed; left: var(--svara-hand-viewport-left); top: var(--svara-hand-viewport-top); z-index: 80;
  width: var(--svara-hand-viewport-width); height: var(--svara-hand-viewport-height); border: 0; border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(26,57,46,.18), transparent 38%),
    rgba(1,5,4,.9);
  cursor: zoom-out; backdrop-filter: blur(13px) saturate(.6); animation: hand-focus-dim .34s ease-out both;
}
@keyframes hand-focus-dim { from { opacity: 0; backdrop-filter: blur(0) saturate(1); } }

#game.hand-focus-active .my-cards {
  position: fixed; left: var(--svara-hand-viewport-left); top: var(--svara-hand-viewport-top); right: auto; bottom: auto;
  z-index: 101; width: var(--svara-hand-viewport-width); min-width: 0; height: var(--svara-hand-viewport-height);
  align-items: center; padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); overflow: hidden;
  transform: none; perspective: 1400px; pointer-events: none;
  animation: hand-focus-cards-in .42s var(--ease-out) both;
}
@keyframes hand-focus-cards-in { from { opacity: .35; } }
#game.hand-focus-active .my-cards .hand-card {
  /* Учитываем не только три ширины, но и веер, поворот и выход крайних карт. */
  width: min(176px, calc((var(--svara-hand-viewport-width) + 20px) / 4.2)); margin: 0 -6px; pointer-events: auto;
  border-radius: clamp(14px,2vw,22px);
}
#game.hand-focus-active .hand-focus-toggle { display: none !important; }
#game.hand-focus-active .topbar,
#game.hand-focus-active .panel,
#game.hand-focus-active .status-banner,
#game.hand-focus-active #fly-layer,
#game.hand-focus-active #svara-banner,
#game.hand-focus-active #table > :not(.my-cards):not(.my-turn-timer) {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}
#game.hand-focus-active .my-turn-timer {
  --timer-size: 88px;
  position: fixed; left: 50%; top: max(66px, calc(env(safe-area-inset-top) + 55px)); z-index: 108;
  pointer-events: auto; cursor: zoom-out;
}
#game.hand-focus-active .my-turn-timer .turn-label,
#game.hand-focus-active .my-turn-timer .my-turn-bet { display: none !important; }
#game.hand-focus-active .action-history {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); z-index: 112;
  width: min(210px, 46vw);
}
#game.hand-focus-active .action-history-title { display: none; }
#game.hand-focus-active .action-history-item { min-height: 40px; padding: 5px 8px 5px 5px; opacity: .88; }
#game.hand-focus-active .action-history-item:nth-child(n+3) { display: none; }
.card {
  --card-rotate: 0deg; position: relative; width: clamp(72px, 7.6vw, 92px); aspect-ratio: .704; margin: 0 -4px;
  overflow: hidden; border: 1px solid rgba(25,31,29,.24); border-radius: clamp(10px, 1vw, 14px);
  color: var(--card-ink); background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(145deg, #fffefa, #ece8dc);
  box-shadow: 0 14px 24px rgba(0,0,0,.46), 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.62);
  transform: rotate(var(--card-rotate)); transform-origin: 50% 115%;
  transition: transform .35s var(--ease-out), filter .25s, box-shadow .25s;
}
/* Direct manipulation and GSAP already provide their own easing. Keep the
   generic card transform transition from adding a delayed tail to hand cards. */
.hand-card { transition: filter .2s ease, box-shadow .2s ease; }
.my-cards.is-gesturing .hand-card { transition: none; }
.card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(20,28,26,.08); border-radius: calc(clamp(10px, 1vw, 14px) - 4px); pointer-events: none; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.5) 39%, transparent 53%); transform: translateX(-110%); }
.card:nth-child(1) { --card-rotate: -8deg; z-index: 1; transform: translateY(7px) rotate(var(--card-rotate)); }
.card:nth-child(2) { z-index: 2; transform: translateY(-1px); }
.card:nth-child(3) { --card-rotate: 8deg; z-index: 3; transform: translateY(7px) rotate(var(--card-rotate)); }
.card:hover { z-index: 8; transform: translateY(-10px) rotate(0); box-shadow: 0 22px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.5); }
.card .corner { position: absolute; left: 10px; top: 8px; display: grid; justify-items: center; line-height: .88; }
.card .corner.bottom { left: auto; right: 10px; top: auto; bottom: 8px; transform: rotate(180deg); }
.card .rank { font-family: Georgia, serif; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.05em; }
.card .corner .suit { margin-top: 3px; font-size: clamp(14px, 1.7vw, 20px); }
.card .suit-main { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(32px, 4vw, 48px); text-shadow: 0 1px rgba(255,255,255,.5); }
.card.red { color: var(--red); }
.card.joker { color: var(--joker); background: linear-gradient(145deg, #fffefa, #ece8dc); }
.card.joker .joker-art, .card-front.joker .joker-art {
  position: absolute; inset: 0; z-index: 0;
  background: #fffefa url("joker-v3.jpg?v=20260804-2") center / contain no-repeat;
  filter: grayscale(1) contrast(1.03);
}
.card.joker .corner, .card-front.joker .corner {
  z-index: 3; color: #64191d;
  text-shadow: 0 1px 0 rgba(255,248,224,.9), 0 0 5px rgba(255,248,224,.95);
}
.card.joker .rank, .card-front.joker .rank { font-size: clamp(17px,2vw,23px); }
.card.joker .corner .suit, .card-front.joker .corner .suit {
  margin-top: 2px; color: #a97924; font-size: clamp(8px,1vw,11px);
}
.card.joker .joker-name, .card-front.joker .joker-name {
  position: absolute; left: 3px; top: 50%; z-index: 3;
  color: rgba(91,25,27,.76); font-family: Georgia,serif; font-size: clamp(5px,.62vw,7px); font-weight: 900;
  letter-spacing: .2em; text-indent: .2em; text-shadow: 0 1px rgba(255,248,224,.9);
  transform: translateY(-50%) rotate(-90deg);
}
.deal-own-card {
  overflow: visible; border: 0; color: inherit; background: transparent; box-shadow: none;
  transform-style: preserve-3d;
}
.deal-own-card::before, .deal-own-card::after { display: none; }
.card-flipper {
  position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg);
  overflow: hidden; border-radius: inherit; will-change: transform;
}
.card-face {
  position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(25,31,29,.24);
  border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-clip: padding-box;
  box-shadow: 0 14px 24px rgba(0,0,0,.46), 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.62);
}
.card-front {
  color: var(--card-ink); background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(145deg, #fffefa, #ece8dc);
  transform: rotateY(180deg);
}
.card-front::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(20,28,26,.08); border-radius: calc(clamp(10px, 1vw, 14px) - 4px); pointer-events: none; }
.card-front.red { color: var(--red); }
.card-front.joker { color: var(--joker); background: linear-gradient(145deg, #fffefa, #ece8dc); }
.card-peek-layer {
  z-index: 4; opacity: 0; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible;
  clip-path: inset(0 100% 0 0); pointer-events: none; will-change: clip-path, opacity;
}
.hand-card.is-peeking .card-peek-layer, .hand-card.is-revealed .card-peek-layer { opacity: 1; }
.mini-card:not(.open), .card-back, .deal-fly-card, .deal-deck i {
  border-color: var(--card-back-border); color: var(--card-back-ink); background: var(--card-back-surface);
}
.mini-card:not(.open)::before, .card-back::before, .deal-fly-card::before, .deal-deck i::before {
  content: ""; position: absolute; inset: 5px; z-index: 1; border: 1px solid var(--card-back-frame);
  border-radius: max(4px, calc(clamp(10px, 1vw, 14px) - 5px));
  background: linear-gradient(135deg, rgba(255,240,193,.08), transparent 35% 65%, rgba(255,240,193,.06));
  box-shadow: inset 0 0 0 2px rgba(45,18,22,.46), inset 0 0 14px rgba(10,3,7,.32);
}
.mini-card:not(.open)::after, .card-back::after, .deal-fly-card::after, .deal-deck i::after {
  content: "SVARA"; position: absolute; inset: 31% 9%; z-index: 2; display: grid; place-items: center;
  border: 1px solid rgba(247,221,151,.46); border-radius: 999px; color: var(--card-back-ink);
  background: radial-gradient(ellipse, rgba(111,46,50,.97), rgba(41,14,23,.9));
  box-shadow: 0 0 0 2px rgba(40,12,20,.48), 0 2px 7px rgba(0,0,0,.4), inset 0 1px rgba(255,244,204,.13);
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(10px,1.45vw,16px); font-weight: 800;
  letter-spacing: .14em; line-height: 1; text-indent: .14em; text-shadow: 0 1px 1px rgba(0,0,0,.8), 0 0 8px rgba(245,217,144,.28);
}
.card-back { display: grid; place-items: center; }
.mini-card:not(.open)::before { inset: 2px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(45,18,22,.45); }
.mini-card:not(.open)::after {
  inset: 35% 4%; border-color: rgba(247,221,151,.4); font-size: 4.2px; letter-spacing: .05em; text-indent: .05em;
  box-shadow: 0 0 0 1px rgba(40,12,20,.42), 0 1px 3px rgba(0,0,0,.38);
}
.deal-fly-card::after, .deal-deck i::after { font-size: clamp(6px,.8vw,9px); }
.deal-arrived { animation: deal-arrived .34s var(--ease-out) both; }
@keyframes deal-arrived {
  0% { opacity: .28; filter: brightness(1.75) drop-shadow(0 0 10px rgba(245,217,144,.7)); }
  55% { opacity: 1; filter: brightness(1.16) drop-shadow(0 0 7px rgba(245,217,144,.36)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(245,217,144,0)); }
}
.deal-own-card.is-revealing { filter: drop-shadow(0 0 13px rgba(233,191,105,.34)); }
.deal-own-card.is-revealed .card-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.58) 39%, transparent 53%);
  animation: card-shine .72s .14s ease-out both;
}
.deal-own-card.joker-arrival { z-index: 12 !important; }
.deal-own-card.joker-arrival.is-revealing { filter: drop-shadow(0 0 14px rgba(226,232,230,.42)); }
.deal-own-card.joker-arrival .card-flipper { z-index: 2; }
.deal-own-card.joker-arrival::before,
.deal-own-card.joker-arrival::after {
  content: ""; position: absolute; display: block; pointer-events: none;
}
.deal-own-card.joker-arrival::after {
  inset: -18px; z-index: 0; border-radius: 24px;
  background: radial-gradient(ellipse, rgba(238,242,241,.42), rgba(116,129,126,.16) 43%, transparent 70%);
  filter: blur(4px);
  animation: joker-aura .62s ease-out both;
}
.deal-own-card.joker-arrival::before {
  inset: -26px; z-index: 3;
  background:
    radial-gradient(circle at 12% 30%, #f5f7f6 0 2px, transparent 2.8px),
    radial-gradient(circle at 25% 4%, #8f9b98 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 78% 10%, #d7dddb 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 93% 38%, #9ba6a3 0 2px, transparent 2.8px),
    radial-gradient(circle at 86% 82%, #f5f7f6 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 18% 88%, #aeb7b4 0 1.8px, transparent 2.6px);
  filter: drop-shadow(0 0 4px rgba(232,238,236,.78));
  animation: joker-sparks .62s ease-out both;
}
@keyframes joker-aura {
  0% { opacity: 0; transform: scale(.7); }
  38% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.22); }
}
@keyframes joker-sparks {
  0% { opacity: 0; transform: scale(.62) rotate(-4deg); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) rotate(5deg); }
}
.card.dealt { animation: deal .66s var(--deal-delay,0ms) cubic-bezier(.2,.72,.24,1) backwards; }
.card.dealt::after { animation: card-shine .75s .32s ease-out both; }
@keyframes deal {
  0% { opacity: 0; transform: translate3d(0,-38vh,140px) rotate(15deg) scale(.58); }
  45% { opacity: 1; }
  76% { transform: translate3d(0,calc(var(--deal-y, 0px) - 5px),10px) rotate(var(--card-rotate)) scale(1.02); }
  90% { transform: translate3d(0,calc(var(--deal-y, 0px) + 1px),0) rotate(var(--card-rotate)) scale(.995); }
  100% { opacity: 1; transform: translate3d(0,var(--deal-y, 0px),0) rotate(var(--card-rotate)) scale(1); }
}
@keyframes card-shine { to { transform: translateX(115%); } }
.card.win-glow, .mini-card.win-glow { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(233,191,105,.2), 0 0 32px 8px rgba(233,191,105,.6), 0 16px 28px rgba(0,0,0,.5); animation: winner-pulse 1.3s ease-in-out infinite alternate; }
@keyframes winner-pulse { to { filter: brightness(1.08); } }

/* Крупная сцена победителя в центре стола. */
.winner-reveal {
  position: absolute; left: 50%; top: 51%; z-index: 36; min-width: 330px; display: grid; justify-items: center;
  color: var(--text); text-align: center; transform: translate(-50%,-50%); pointer-events: none;
  animation: winner-scene-in .58s var(--ease-out) both;
}
#table.winner-mode::after {
  content: ""; position: absolute; inset: 0; z-index: 29; border-radius: 40px;
  background: radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(1,6,5,.38) 58%, rgba(1,5,4,.68));
  pointer-events: none; animation: winner-dim .65s ease both;
}
#table.winner-mode .seat:not(.winner-seat), #table.winner-mode .my-cards { opacity: .2; filter: saturate(.45) brightness(.7); }
#table.winner-mode .seat.winner-seat { z-index: 33; opacity: 1; filter: none; transform: translate(-50%,-50%) scale(1.08); }
#table.winner-mode .seat.winner-seat .avatar { border-color: var(--gold-bright); box-shadow: 0 0 0 6px rgba(233,191,105,.14), 0 0 42px rgba(233,191,105,.72), 0 12px 28px rgba(0,0,0,.55); animation: winner-seat-pulse 1.3s ease-in-out infinite alternate; }
@keyframes winner-dim { from { opacity: 0; } }
@keyframes winner-seat-pulse { to { box-shadow: 0 0 0 8px rgba(233,191,105,.05), 0 0 50px rgba(233,191,105,.78), 0 13px 28px rgba(0,0,0,.58); } }
.winner-reveal::before {
  content: ""; position: absolute; z-index: -1; width: 430px; height: 270px; left: 50%; top: 50%;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(233,191,105,.18), rgba(6,19,15,.64) 48%, transparent 72%);
  filter: blur(8px); transform: translate(-50%,-50%); animation: reveal-glow 1.8s ease-in-out infinite alternate;
}
@keyframes winner-scene-in {
  from { opacity: 0; transform: translate(-50%,-44%) scale(.78); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes reveal-glow { to { opacity: .7; transform: translate(-50%,-50%) scale(1.08); } }
.winner-title {
  margin-bottom: 6px; color: var(--gold-bright); font-family: Georgia, serif; font-size: clamp(16px,1.7vw,21px);
  font-weight: 800; letter-spacing: .18em; line-height: 1; text-indent: .18em;
  text-shadow: 0 3px 12px rgba(0,0,0,.8), 0 0 16px rgba(233,191,105,.28);
}
.winner-name { max-width: 280px; overflow: hidden; color: #fff9e8; font-family: Georgia, serif; font-size: 23px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 3px 12px rgba(0,0,0,.8); }
.winner-avatar {
  position: relative; width: 92px; height: 92px; margin: 13px 0 12px; display: grid; place-items: center; overflow: hidden;
  border: 2px solid var(--gold-bright); border-radius: 50%; color: #fff9e8;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.17), transparent 25%), linear-gradient(145deg,#356752,#153127);
  box-shadow: 0 0 0 7px rgba(233,191,105,.12), 0 0 42px rgba(233,191,105,.62), 0 15px 30px rgba(0,0,0,.55);
  font-family: Georgia,serif; font-size: 34px; font-weight: 800; animation: winner-avatar-in .75s .1s var(--ease-out) both;
}
.winner-avatar::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; pointer-events: none; }
.winner-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
@keyframes winner-avatar-in { from { opacity: 0; transform: translateY(18px) scale(.72); } }
.winner-cards { display: flex; align-items: center; justify-content: center; min-height: 142px; margin: 5px 0 2px; perspective: 900px; }
.winner-cards .card {
  width: clamp(82px, 8vw, 102px); margin: 0 -5px; box-shadow: 0 19px 34px rgba(0,0,0,.58), 0 0 0 1px rgba(245,217,144,.55), inset 0 0 0 3px rgba(255,255,255,.62);
  animation: reveal-card .95s var(--ease-out) both;
}
.winner-cards .card:nth-child(1) { z-index: 1; transform: translateY(7px) rotate(-9deg); animation-delay: .1s; }
.winner-cards .card:nth-child(2) { z-index: 3; transform: translateY(-4px); animation-delay: .19s; }
.winner-cards .card:nth-child(3) { z-index: 2; transform: translateY(7px) rotate(9deg); animation-delay: .28s; }
.winner-cards .card:hover { transform: inherit; }
.winner-cards.cards-arriving .card { opacity: 0 !important; animation: none !important; }
.winner-cards.cards-landed .card { opacity: 1 !important; animation: none !important; }
.winner-card-flight {
  position: absolute !important; left: 0; top: 0; z-index: 46; margin: 0 !important;
  pointer-events: none; transform-origin: center; will-change: transform, width, height, opacity;
  transition: none !important; animation: none !important;
}
@keyframes reveal-card {
  from { opacity: 0; transform: translateY(28px) rotate(0) scale(.72); }
}
.winner-prize {
  padding: 7px 13px; border: 1px solid rgba(233,191,105,.3); border-radius: 999px;
  color: var(--gold-bright); background: rgba(5,14,11,.82); font-size: 10px; font-weight: 850; letter-spacing: .12em;
  box-shadow: 0 9px 20px rgba(0,0,0,.36); animation: prize-in .45s .65s var(--ease-out) both;
}
@keyframes prize-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Moment effects ───────────────────────────────────────────────────── */
.look-scene {
  position: absolute; left: 50%; top: 46%; z-index: 64; width: min(92vw, 780px); padding: clamp(18px,2.6vw,30px);
  border: 1px solid rgba(205,166,255,.58); border-radius: 25px; color: #f8f1ff;
  background: radial-gradient(ellipse at top, rgba(143,85,205,.26), rgba(28,25,57,.97) 58%, rgba(10,12,29,.98));
  box-shadow: 0 0 0 9999px rgba(3,8,7,.42), 0 24px 70px rgba(0,0,0,.58), 0 0 66px rgba(143,85,205,.38), inset 0 1px rgba(255,255,255,.18);
  max-height: calc(100% - 18px); overflow: hidden; text-align: center; transform: translate(-50%,-50%);
  pointer-events: none; backdrop-filter: blur(13px); animation: look-scene-in .42s var(--ease-out) both;
}
.look-scene.private { width: min(96vw, 940px); }
.look-scene-kicker { color: #d8bbff; font-size: clamp(8px,1vw,11px); font-weight: 900; letter-spacing: .2em; }
.look-scene h2 { margin: 5px 0 3px; color: #fff9ff; font-family: Georgia,serif; font-size: clamp(28px,4.6vw,48px); line-height: 1.05; text-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 22px rgba(173,117,237,.32); }
.look-scene p { margin: 5px 0 10px; color: rgba(240,231,250,.72); font-size: clamp(10px,1.2vw,13px); font-weight: 650; }
.look-scene-cost {
  display: inline-flex; min-height: 30px; margin-bottom: 13px; padding: 6px 13px; align-items: center; justify-content: center;
  border: 1px solid rgba(205,166,255,.34); border-radius: 999px; color: #e7d5ff; background: rgba(13,9,28,.42);
  font-size: 8px; font-weight: 900; letter-spacing: .14em;
}
.look-players { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(8px,1.4vw,14px); }
.look-player {
  min-width: 0; padding: clamp(10px,1.5vw,15px); display: grid; align-content: center; gap: 11px;
  border: 1px solid rgba(223,201,250,.16); border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.look-player-head { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.look-player-avatar {
  flex: 0 0 auto; width: clamp(44px,5vw,62px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border: 2px solid rgba(205,166,255,.48); border-radius: 50%; color: #f8efff; background: rgba(14,13,34,.85);
  box-shadow: 0 8px 20px rgba(0,0,0,.38), 0 0 18px rgba(166,102,238,.16); font-family: Georgia,serif; font-size: clamp(18px,2vw,25px);
}
.look-player-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.look-player-copy { min-width: 0; display: grid; gap: 4px; text-align: left; }
.look-player-copy strong { overflow: hidden; color: #fff8ff; font-size: clamp(12px,1.5vw,17px); text-overflow: ellipsis; white-space: nowrap; }
.look-player-copy small { color: rgba(216,187,255,.68); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.look-cards { min-height: 112px; display: flex; align-items: center; justify-content: center; }
.look-cards .look-card { width: clamp(60px,6.3vw,80px); margin: 0 -5px; pointer-events: none; }
.look-cards .look-card:nth-child(1) { transform: translateY(5px) rotate(-7deg); }
.look-cards .look-card:nth-child(2) { transform: translateY(-2px); }
.look-cards .look-card:nth-child(3) { transform: translateY(5px) rotate(7deg); }
@keyframes look-scene-in { from { opacity: 0; transform: translate(-50%,-44%) scale(.84); filter: blur(8px); } }
.svara-scene {
  position: absolute; left: 50%; top: 46%; z-index: 62; width: min(94vw, 980px); padding: clamp(22px,3.2vw,38px);
  border: 1px solid rgba(255,230,190,.56); border-radius: 25px; color: #fff8ed;
  background: radial-gradient(ellipse at top, rgba(255,177,111,.3), rgba(102,25,21,.96) 58%, rgba(44,12,12,.97));
  box-shadow: 0 0 0 9999px rgba(3,8,7,.42), 0 24px 70px rgba(0,0,0,.55), 0 0 70px rgba(240,120,79,.55), inset 0 1px rgba(255,255,255,.27);
  max-height: calc(100% - 18px); overflow: hidden; text-align: center; transform: translate(-50%,-50%); pointer-events: none; backdrop-filter: blur(12px); animation: svara-scene-in 6s var(--ease-out) both;
}
.svara-scene-kicker { color: #ffd5a2; font-size: clamp(9px,1.1vw,12px); font-weight: 850; letter-spacing: .22em; }
.svara-scene h2 { margin: 5px 0 3px; color: #fff9e9; font-family: Georgia,serif; font-size: clamp(42px,7vw,72px); letter-spacing: .16em; line-height: 1; text-indent: .16em; text-shadow: 0 4px 20px rgba(0,0,0,.45), 0 0 24px rgba(255,181,97,.55); }
.svara-scene p { margin: 6px 0 13px; color: rgba(255,239,219,.76); font-size: clamp(11px,1.4vw,15px); font-weight: 650; }
.svara-scene-score {
  display: inline-flex; min-height: 42px; margin-bottom: clamp(16px,2.5vw,25px); padding: 9px 18px; align-items: center; justify-content: center;
  border: 1px solid rgba(255,226,175,.5); border-radius: 999px; color: #fff2c9; background: rgba(31,10,10,.48);
  box-shadow: 0 9px 22px rgba(0,0,0,.28), 0 0 22px rgba(255,181,97,.16); font-family: Georgia,serif;
  font-size: clamp(14px,2vw,22px); letter-spacing: .08em;
}
.svara-scene.artificial {
  width: min(94vw, 900px);
  border-color: rgba(233,191,105,.55);
  background: radial-gradient(ellipse at top, rgba(233,191,105,.22), rgba(20,62,47,.97) 58%, rgba(7,25,20,.98));
  box-shadow: 0 0 0 9999px rgba(3,8,7,.42), 0 24px 70px rgba(0,0,0,.55), 0 0 68px rgba(85,201,144,.3), inset 0 1px rgba(255,255,255,.2);
}
.svara-scene.artificial h2 { font-size: clamp(34px,5vw,56px); letter-spacing: .08em; text-indent: .08em; text-transform: uppercase; }
.svara-hands { width: 100%; display: grid; grid-template-columns: repeat(var(--svara-columns,2),minmax(0,1fr)); align-items: stretch; justify-content: center; gap: clamp(8px,1.5vw,16px); }
.svara-hand {
  min-width: 0; min-height: 84px; padding: clamp(9px,1.4vw,14px); display: grid; grid-template-columns: clamp(48px,5.2vw,68px) minmax(0,1fr);
  align-items: center; gap: clamp(9px,1.2vw,14px); border: 1px solid rgba(255,232,201,.18); border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.06);
  text-align: left;
}
.svara-hand-avatar {
  width: clamp(48px,5.2vw,68px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(255,219,170,.52);
  border-radius: 50%; color: #fff4df; background: rgba(7,20,16,.78); font-family: Georgia,serif; font-size: clamp(19px,2.2vw,27px);
  box-shadow: 0 9px 20px rgba(0,0,0,.35), 0 0 18px rgba(255,181,97,.17);
}
.svara-hand-avatar img { width: 100%; height: 100%; object-fit: cover; }
.svara-hand-copy { min-width: 0; display: grid; gap: 5px; }
.svara-hand-name { overflow: hidden; color: #fff2d3; font-size: clamp(12px,1.5vw,17px); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.svara-hand-handle { overflow: hidden; color: rgba(255,232,201,.58); font-size: clamp(8px,.9vw,11px); font-weight: 760; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
@keyframes svara-scene-in {
  0% { opacity: 0; transform: translate(-50%,-43%) scale(.72); filter: blur(10px); }
  8%, 88% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%,-53%) scale(.96); }
}
.split-scene {
  position: absolute; left: 50%; top: 46%; z-index: 62; width: min(84vw, 560px); padding: 23px 25px 25px;
  border: 1px solid rgba(233,191,105,.58); border-radius: 25px; color: #fff8ed;
  background: radial-gradient(ellipse at top, rgba(233,191,105,.2), rgba(19,63,46,.97) 58%, rgba(6,25,19,.98));
  box-shadow: 0 0 0 9999px rgba(3,8,7,.42), 0 24px 70px rgba(0,0,0,.55), 0 0 68px rgba(85,201,144,.32), inset 0 1px rgba(255,255,255,.2);
  text-align: center; transform: translate(-50%,-50%); pointer-events: none; backdrop-filter: blur(12px);
  animation: split-scene-in 5.4s var(--ease-out) both;
}
.split-scene-kicker { color: var(--gold-bright); font-size: 9px; font-weight: 850; letter-spacing: .2em; }
.split-scene h2 { margin: 5px 0 7px; color: #fff9e9; font-family: Georgia,serif; font-size: clamp(27px,5vw,46px); line-height: 1.04; text-shadow: 0 4px 20px rgba(0,0,0,.45), 0 0 24px rgba(85,201,144,.35); }
.split-scene p { margin: 0; color: rgba(234,247,239,.78); font-size: 11px; font-weight: 650; }
@keyframes split-scene-in {
  0% { opacity: 0; transform: translate(-50%,-43%) scale(.76); filter: blur(8px); }
  9%, 88% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%,-53%) scale(.97); }
}
.svara-banner {
  position: fixed; left: 50%; top: 43%; z-index: 60; display: grid; place-items: center; min-width: 320px; padding: 22px 44px;
  border: 1px solid rgba(255,232,201,.45); border-radius: 20px; color: #fff8ed;
  background: radial-gradient(circle at top, #f79b66, var(--svara) 55%, #a83d28);
  box-shadow: 0 0 0 9999px rgba(3,8,7,.26), 0 0 70px rgba(240,120,79,.65), inset 0 1px rgba(255,255,255,.4);
  font-family: Georgia, serif; font-size: 38px; font-weight: 800; letter-spacing: .18em; text-indent: .18em;
  animation: svara-flash 1.8s var(--ease-out) forwards;
}
@keyframes svara-flash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-5deg); filter: blur(7px); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(1deg); filter: blur(0); }
  28%, 76% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-58%) scale(.94); }
}
.win-amount {
  position: absolute; z-index: 45; color: var(--gold-bright); font-family: Georgia, serif; font-size: 29px; font-weight: 900;
  text-shadow: 0 3px 12px rgba(0,0,0,.8), 0 0 16px rgba(233,191,105,.5); pointer-events: none;
  animation: win-float 2.7s var(--ease-out) forwards;
}
@keyframes win-float { 0% { opacity: 0; transform: translate(-50%,-35%) scale(.7); } 14%,72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-165%) scale(1.18); } }
.chip-fly { z-index: 40; width: 20px; height: 20px; font-size: 22px; transition: transform .56s var(--ease-out), opacity .5s; pointer-events: none; }
#fly-layer { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.deal-scene { position: absolute; inset: 0; z-index: 41; }
.deal-deck-anchor { position: absolute; left: var(--deal-source-x,50%); top: var(--deal-source-y,43%); transform: translate(-50%,-50%); }
.deal-deck { position: relative; width: clamp(38px,4.7vw,54px); aspect-ratio: .704; transform-origin: center; }
.deal-deck i {
  position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--card-back-border); border-radius: 7px;
  box-shadow: 0 10px 20px rgba(0,0,0,.42), inset 0 0 0 2px rgba(255,255,255,.04);
}
.deal-deck i:nth-child(1) { transform: translate(-5px,4px) rotate(-4deg); opacity: .75; }
.deal-deck i:nth-child(2) { transform: translate(4px,2px) rotate(3deg); opacity: .88; }
.deal-deck i:nth-child(3) { display: grid; place-items: center; }
.deal-scene[data-stage="shuffle"] .deal-deck, .deal-scene[data-stage="deal"] .deal-deck {
  filter: drop-shadow(0 0 12px rgba(245,217,144,.3));
}
.deal-fly-card {
  position: absolute; left: 0; top: 0; z-index: 43; width: clamp(36px,4.2vw,48px); aspect-ratio: .704;
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--card-back-border); border-radius: 7px;
  box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 12px rgba(233,191,105,.12);
  will-change: transform, opacity;
}
/* ── Action panel ─────────────────────────────────────────────────────── */
.panel {
  position: relative; z-index: 35; width: min(calc(100% - 24px), 820px); min-height: 68px; margin: 0 auto max(10px, env(safe-area-inset-bottom)); padding: 8px;
  border: 1px solid var(--line); border-radius: 19px;
  background: linear-gradient(180deg, rgba(17,30,27,.94), rgba(8,16,14,.96));
  box-shadow: 0 -8px 32px rgba(0,0,0,.18), 0 18px 38px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.panel:has(.panel-row:not(.hidden)), .panel:has(.panel-wait:not(.hidden)), .panel:has(.panel-duel:not(.hidden)), .panel:has(.svara-dark-panel:not(.hidden)) { animation: panel-up .35s var(--ease-out) both; }
/* Нижняя панель всегда остаётся внутри visual viewport, в том числе во время появления. */
@keyframes panel-up { from { opacity: 0; } }
.panel-row { display: flex; gap: 8px; justify-content: center; }
.recruit-panel { flex-wrap: wrap; }
.recruit-panel > .btn { min-width: 138px; }
.recruit-dark-status {
  flex: 0 0 100%; margin: 0; padding: 0 8px 2px; color: rgba(222,205,242,.72);
  font-size: 9px; font-weight: 650; line-height: 1.35; text-align: center;
}
.panel-wait { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.wait-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(233,191,105,.35); animation: wait-pulse 1.6s ease-out infinite; }
@keyframes wait-pulse { 65%,100% { box-shadow: 0 0 0 8px rgba(233,191,105,0); } }
#panel-actions { flex-wrap: wrap; }
#panel-actions .btn { flex: 1 1 96px; min-width: 96px; min-height: 52px; padding: 11px 10px; }
#panel-actions .btn[data-action="fold"] { order: -2; }
#panel-actions .btn[data-action="bet"], #panel-actions .btn[data-action="more_bet"] { color: #fff3d4; border-color: rgba(233,191,105,.35); }
#panel-actions .btn[data-action="look"] {
  color: #f3eaff; border-color: rgba(193,149,255,.54);
  background: linear-gradient(180deg, rgba(91,48,138,.98), rgba(46,22,78,.98));
}
.svara-dark-panel {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,1.1fr); align-items: center; gap: 9px;
  padding: 7px; border: 1px solid rgba(193,149,255,.28); border-radius: 14px;
  background: linear-gradient(135deg, rgba(116,67,174,.12), rgba(20,18,42,.2));
}
.svara-dark-copy { min-width: 0; display: grid; gap: 3px; padding: 0 7px; text-align: left; }
.svara-dark-copy strong { color: #f5ebff; font-size: 12px; }
.svara-dark-copy span { color: rgba(222,205,242,.7); font-size: 9px; line-height: 1.35; }
.svara-dark-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.svara-dark-actions .btn { min-width: 0; min-height: 48px; padding: 9px 10px; font-size: 12px; }
.panel-duel {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 44px;
  margin: 0 0 7px; padding: 5px; border: 1px solid rgba(233,191,105,.18); border-radius: 13px;
  background: linear-gradient(135deg, rgba(233,191,105,.055), rgba(85,201,144,.045));
}
.panel-duel[data-mode="choices"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.panel-duel[data-mode="status"] { grid-template-columns: minmax(0,1fr); }
.duel-panel-copy { min-width: 0; display: grid; gap: 2px; padding: 0 7px; text-align: left; }
.duel-panel-copy small { overflow: hidden; color: rgba(233,191,105,.76); font-size: 7px; font-weight: 850; letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; }
.duel-panel-copy strong { overflow: hidden; color: #e8f2ec; font-size: 11px; font-weight: 720; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.duel-panel-actions { display: flex; gap: 6px; }
.panel-duel .duel-button { min-width: 92px; min-height: 42px; padding: 8px 12px; font-size: 12px; }
.panel-duel .duel-svara { color: #ffe8d2; border-color: rgba(240,120,79,.3); background: rgba(240,120,79,.085); }
.panel-duel .duel-svara:hover { border-color: rgba(240,120,79,.55); background: rgba(240,120,79,.15); }
.panel-duel .duel-split { color: #e8f6ee; border-color: rgba(85,201,144,.28); background: rgba(85,201,144,.075); }
.panel-duel .duel-split:hover { border-color: rgba(85,201,144,.5); background: rgba(85,201,144,.13); }

/* ── Table menu, rules, history and toast ────────────────────────────── */
.menu-panel {
  position: fixed; right: 12px; top: 12px; bottom: 12px; z-index: 80; width: min(94vw, 430px); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); border: 1px solid var(--line); border-radius: 22px;
  background: rgba(9,18,16,.96); box-shadow: -18px 0 60px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(24px); animation: menu-in .3s var(--ease-out) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateX(22px); } }
.menu-panel.ui-closing { pointer-events: none; animation: menu-out .18s ease-in both; }
@keyframes menu-out { to { opacity: 0; transform: translateX(18px) scale(.99); } }
.menu-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.menu-head > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.menu-head small { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.menu-head span { overflow: hidden; font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.menu-head .icon-btn { width: 38px; height: 38px; }
.menu-head .menu-back.hidden + div { grid-column: 1 / 3; }
.menu-content { flex: 1; min-height: 0; overflow: hidden; }
.menu-view { height: 100%; overflow-y: auto; padding: 17px; scrollbar-width: thin; scrollbar-color: #31443e transparent; animation: menu-view-in .24s var(--ease-out) both; }
@keyframes menu-view-in { from { opacity: 0; transform: translateX(8px); } }
.menu-home { display: block; }
.menu-intro { margin: 1px 2px 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.menu-list { display: grid; gap: 9px; }
.menu-section-label { margin: 7px 3px -2px; color: var(--muted-dim); font-size: 8px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.menu-section-label:first-child { margin-top: 0; }
.menu-item { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 11px; width: 100%; min-height: 72px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: transform .2s var(--ease-out), border-color .2s, background .2s; }
.menu-item:hover, .menu-item:focus-visible { border-color: rgba(233,191,105,.32); background: rgba(233,191,105,.06); transform: translateX(-2px); outline: none; }
.menu-item-exit { margin-top: 7px; border-color: rgba(221,105,97,.18); color: #e7aaa5; background: rgba(151,52,46,.045); }
.menu-item-exit .menu-item-icon { border-color: rgba(221,105,97,.2); color: #e7aaa5; background: rgba(151,52,46,.07); }
.menu-item-exit .menu-item-copy b, .menu-item-exit .menu-chevron { color: #e7aaa5; }
.menu-item-exit:hover, .menu-item-exit:focus-visible { border-color: rgba(221,105,97,.4); background: rgba(151,52,46,.1); }
.menu-item-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(233,191,105,.18); border-radius: 12px; color: var(--gold-bright); background: rgba(233,191,105,.055); }
.menu-item-icon .ui-icon { width: 21px; height: 21px; }
.menu-item-copy { display: grid; gap: 4px; min-width: 0; white-space: normal; }
.menu-item-copy b { color: #f7e8bd; font-size: 13px; }
.menu-item-copy small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.menu-chevron { color: rgba(233,191,105,.68); font-family: Georgia,serif; font-size: 25px; font-weight: 400; }
.install-pane { display: grid; align-content: start; gap: 13px; padding-bottom: 32px; }
.install-browser-note { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px; border: 1px solid rgba(240,120,79,.27); border-radius: 16px; background: linear-gradient(145deg,rgba(240,120,79,.11),rgba(255,255,255,.02)); }
.install-browser-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(240,120,79,.25); border-radius: 12px; color: #ffb08f; background: rgba(240,120,79,.07); }
.install-browser-icon .ui-icon { width: 21px; height: 21px; }
.install-browser-note div { display: grid; align-content: center; gap: 5px; }
.install-browser-note strong { color: #ffd4bd; font-size: 12px; }
.install-browser-note p { color: var(--muted); font-size: 10px; line-height: 1.48; }
.install-browser-note p b { color: #f6e4c3; }
.install-benefit { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(233,191,105,.16); border-radius: 13px; background: rgba(233,191,105,.045); }
.install-benefit > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--gold-bright); background: rgba(233,191,105,.1); }
.install-benefit p { color: var(--muted); font-size: 9px; line-height: 1.45; }
.install-benefit b { color: #f6e4c3; }
.install-guide { padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); }
.install-platform-title { display: flex; align-items: center; gap: 10px; }
.install-platform-badge { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(100,198,143,.28); border-radius: 12px; color: #b7f2d2; background: rgba(60,151,104,.1); font-size: 15px; font-weight: 900; }
.install-iphone .install-platform-badge { border-color: rgba(142,174,226,.27); color: #dce9ff; background: rgba(89,124,181,.11); font-family: Arial,sans-serif; }
.install-platform-title div { display: grid; gap: 2px; }
.install-platform-title small { color: var(--muted-dim); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.install-platform-title h3 { color: #f7e8bd; font-size: 13px; }
.install-steps { margin-top: 12px; display: grid; gap: 7px; list-style: none; }
.install-steps li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; }
.install-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(233,191,105,.18); border-radius: 8px; color: var(--gold-bright); background: rgba(233,191,105,.055); font-size: 9px; font-weight: 900; }
.install-steps p { color: var(--muted); font-size: 9px; line-height: 1.42; }
.install-steps b { color: #f5e3bc; }
.install-shot { margin-top: 13px; }
.install-phone { position: relative; width: 100%; height: 190px; overflow: hidden; border: 5px solid #26332f; border-radius: 22px; background: #eef2ef; box-shadow: 0 14px 26px rgba(0,0,0,.35); }
.mock-status { position: relative; z-index: 3; height: 22px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #19201e; font-size: 7px; font-weight: 800; }
.mock-browser-bar { height: 34px; margin: 0 6px; padding: 0 9px; display: grid; grid-template-columns: 10px 1fr 14px; align-items: center; gap: 6px; border-radius: 14px; color: #35403c; background: #fff; font-size: 7px; }
.mock-browser-bar > i { width: 8px; height: 8px; border: 2px solid #5b9d7c; border-radius: 50%; }
.mock-browser-bar > b { color: #16201d; font-size: 15px; line-height: 1; text-align: right; }
.mock-svara-page { position: absolute; inset: 56px 0 0; display: grid; align-content: center; justify-items: center; color: #f5dfa8; background: radial-gradient(circle at 50% 40%,#275648,#0b1916 68%); }
.mock-svara-page > span { font-size: 31px; line-height: 1; }
.mock-svara-page > strong { margin-top: 2px; font-family: Georgia,serif; font-size: 16px; letter-spacing: .08em; }
.mock-svara-page > small { margin-top: 3px; color: rgba(245,223,168,.6); font-size: 5px; letter-spacing: .13em; }
.mock-browser-menu { position: absolute; right: 7px; top: 48px; z-index: 4; width: 205px; padding: 7px; display: grid; gap: 3px; border: 1px solid #dce2df; border-radius: 12px; color: #35403c; background: rgba(255,255,255,.98); box-shadow: 0 10px 25px rgba(16,29,24,.28); font-size: 8px; }
.mock-browser-menu span, .mock-browser-menu strong { min-height: 28px; padding: 0 9px; display: flex; align-items: center; border-radius: 8px; }
.mock-browser-menu strong { gap: 7px; color: #1d5e42; background: #e5f5ec; font-weight: 850; }
.mock-browser-menu strong i { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #5c9f7e; border-radius: 5px; font-style: normal; }
.iphone-phone { border-color: #303237; background: #f0f2f5; }
.iphone-phone .mock-status > i { position: absolute; left: 50%; top: 4px; width: 48px; height: 13px; border-radius: 9px; background: #131416; transform: translateX(-50%); }
.iphone-phone .mock-svara-page { inset: 22px 0 0; }
.mock-safari-bar { position: absolute; right: 7px; bottom: 7px; left: 7px; z-index: 3; height: 32px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 13px; color: #176dcc; background: rgba(250,251,253,.92); font-size: 17px; }
.mock-safari-bar strong { position: relative; display: grid; place-items: center; width: 28px; height: 24px; border-radius: 8px; background: #dcecff; font-size: 13px; }
.mock-safari-bar strong i { position: absolute; top: -3px; font-size: 10px; font-style: normal; }
.mock-share-sheet { position: absolute; right: 7px; bottom: 7px; left: 7px; z-index: 5; padding: 7px; display: grid; gap: 3px; border: 1px solid #d8dbe1; border-radius: 15px; color: #333943; background: rgba(249,249,251,.98); box-shadow: 0 12px 28px rgba(13,20,30,.32); font-size: 8px; }
.mock-share-sheet > i { width: 32px; height: 3px; justify-self: center; border-radius: 3px; background: #c3c6cc; }
.mock-share-sheet span, .mock-share-sheet strong { min-height: 27px; padding: 0 9px; display: flex; align-items: center; border-radius: 8px; }
.mock-share-sheet strong { gap: 7px; color: #135fae; background: #e3effc; }
.mock-share-sheet strong b { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #63a1dc; border-radius: 5px; }
.install-shot figcaption { margin-top: 8px; color: var(--muted-dim); font-size: 8px; line-height: 1.4; text-align: center; }
.install-shot figcaption b { color: var(--muted); }
.profile-pane { display: grid; align-content: start; gap: 13px; }
.own-profile-card { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 15px; padding: 15px; border: 1px solid rgba(233,191,105,.2); border-radius: 17px; background: linear-gradient(145deg, rgba(233,191,105,.075), rgba(255,255,255,.02)); }
.profile-avatar-large { width: 92px; height: 92px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(245,217,144,.48); border-radius: 50%; color: #fff1c9; background: linear-gradient(145deg,#426f60,#18332b); font-family: Georgia,serif; font-size: 34px; font-weight: 750; box-shadow: 0 12px 27px rgba(0,0,0,.36), 0 0 0 5px rgba(233,191,105,.055); }
.profile-avatar-control { width: 104px; display: grid; justify-items: stretch; gap: 6px; }
.profile-avatar-control .profile-avatar-large { justify-self: center; margin-bottom: 2px; }
.profile-avatar-control .btn { width: 100%; min-height: 32px; padding: 6px 7px; border-radius: 9px; font-size: 9px; }
.profile-avatar-control .avatar-delete { min-height: 26px; padding: 3px 6px; border-color: transparent; color: var(--muted); background: transparent; }
.profile-avatar-control .avatar-delete:not(:disabled):hover { border-color: rgba(221,105,97,.25); color: #e7aaa5; background: rgba(151,52,46,.07); }
.own-profile-copy { min-width: 0; display: grid; gap: 4px; }
.own-profile-copy strong { overflow: hidden; color: #fff2cc; font-family: Georgia,serif; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.own-profile-copy span { color: var(--gold); font-size: 11px; }
.own-profile-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.42; }
.profile-stats { width: 100%; padding: 13px; border: 1px solid rgba(233,191,105,.16); border-radius: 15px; background: rgba(2,9,7,.22); }
.profile-stats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.profile-stats-head b { color: #f7e8bd; font-size: 11px; }
.profile-stats-head small { color: var(--muted-dim); font-size: 8px; text-align: right; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.profile-stats-grid > div { min-width: 0; padding: 9px 5px 8px; display: grid; gap: 4px; justify-items: center; border: 1px solid rgba(255,255,255,.045); border-radius: 10px; background: rgba(255,255,255,.025); text-align: center; }
.profile-stats-grid strong { max-width: 100%; overflow: hidden; color: var(--gold-bright); font-size: 14px; font-weight: 850; text-overflow: ellipsis; }
.profile-stats-grid span { color: var(--muted); font-size: 7px; font-weight: 700; line-height: 1.25; }
.profile-name-form { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.profile-name-form > label { color: var(--text); font-size: 11px; font-weight: 750; }
.profile-name-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.profile-name-form input { min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: #101d1a; outline: none; }
.profile-name-form input:focus { border-color: rgba(233,191,105,.52); box-shadow: 0 0 0 3px rgba(233,191,105,.07); }
.profile-name-form .btn { min-height: 44px; padding: 8px 13px; font-size: 11px; }
.profile-name-form > small { color: var(--muted-dim); font-size: 8px; }
.profile-crop-actions .btn { min-height: 44px; padding: 9px 12px; font-size: 11px; }
.profile-cropper { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(233,191,105,.2); border-radius: 16px; background: rgba(0,0,0,.18); }
.profile-cropper > p { display: grid; gap: 3px; }
.profile-cropper > p b { color: #fff2cc; font-size: 12px; }
.profile-cropper > p small { color: var(--muted); font-size: 9px; }
#profile-crop-canvas { width: min(100%, 288px); aspect-ratio: 1; justify-self: center; border: 2px solid var(--gold); border-radius: 50%; background: #07110f; box-shadow: 0 12px 28px rgba(0,0,0,.42), 0 0 0 6px rgba(233,191,105,.055); cursor: grab; touch-action: none; }
#profile-crop-canvas:active { cursor: grabbing; }
.profile-cropper > label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; color: var(--muted); font-size: 9px; }
.profile-cropper input[type="range"] { width: 100%; accent-color: var(--gold); }
.profile-crop-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.profile-status { min-height: 18px; color: var(--ok); font-size: 10px; text-align: center; }
.profile-status.is-error { color: var(--danger); }
.profile-dialog {
  position: fixed; top: var(--svara-viewport-top); right: 0; bottom: auto; left: 0; z-index: 96;
  height: var(--svara-viewport-height); display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: max(18px, env(safe-area-inset-top)) 18px max(28px, calc(env(safe-area-inset-bottom) + 18px));
}
.profile-dialog-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,6,5,.72); backdrop-filter: blur(10px); cursor: default; }
.public-profile-card { position: relative; z-index: 1; width: min(100%, 380px); margin: auto 0; padding: 30px 25px 24px; display: grid; flex: 0 0 auto; justify-items: center; border: 1px solid rgba(233,191,105,.27); border-radius: 26px; background: radial-gradient(circle at 50% 0, rgba(74,130,105,.22), transparent 43%), linear-gradient(155deg,#13231f,#08110f); box-shadow: 0 34px 80px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.05); animation: public-profile-in .36s var(--ease-out) both; }
@keyframes public-profile-in { from { opacity: 0; transform: translateY(15px) scale(.96); } }
.profile-dialog.ui-closing { pointer-events: none; }
.profile-dialog.ui-closing .profile-dialog-backdrop { animation: overlay-backdrop-out .18s ease-in both; }
.profile-dialog.ui-closing .public-profile-card { animation: profile-card-out .18s ease-in both; }
@keyframes overlay-backdrop-out { to { opacity: 0; backdrop-filter: blur(0); } }
@keyframes profile-card-out { to { opacity: 0; transform: translateY(10px) scale(.985); } }
.public-profile-close { position: absolute; right: 13px; top: 13px; }
.public-profile-avatar { width: 124px; height: 124px; margin-bottom: 19px; font-size: 46px; box-shadow: 0 17px 34px rgba(0,0,0,.45), 0 0 0 7px rgba(233,191,105,.065), 0 0 34px rgba(233,191,105,.16); }
.public-profile-kicker { color: rgba(233,191,105,.65); font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.public-profile-card h2 { max-width: 100%; margin-top: 7px; overflow: hidden; color: #fff2cc; font-family: Georgia,serif; font-size: 26px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.public-profile-card > p { margin-top: 5px; color: var(--gold); font-size: 12px; }
.public-profile-meta { width: 100%; margin-top: 21px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.public-profile-meta span { color: var(--muted); font-size: 10px; }
.public-profile-meta strong { color: var(--text); font-size: 11px; font-weight: 750; }
.public-profile-stats { margin-top: 12px; }
.public-profile-actions { width: 100%; margin-top: 14px; display: grid; gap: 8px; }
.public-profile-actions .btn { width: 100%; }
.public-profile-actions .voice-mute-active { border-color: rgba(239,102,107,.4); color: #ffadb0; background: rgba(93,25,29,.2); }
.coin-compose {
  width: 100%; margin-top: 16px; padding-top: 16px; display: grid; gap: 12px;
  border-top: 1px solid var(--line);
}
.coin-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.04); }
.coin-mode-tabs button {
  min-height: 37px; border: 1px solid transparent; border-radius: 10px; color: var(--muted);
  background: transparent; font-size: 11px; font-weight: 800; cursor: pointer;
}
.coin-mode-tabs button.active { border-color: rgba(233,191,105,.3); color: #fff1ca; background: rgba(233,191,105,.1); }
.coin-compose-lead { color: var(--muted); font-size: 11px; line-height: 1.45; text-align: left; }
.coin-amount-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.coin-amount-field span { color: var(--muted); font-size: 10px; font-weight: 750; }
.coin-amount-field input {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(233,191,105,.25); border-radius: 12px;
  color: #fff1c9; background: rgba(2,9,7,.64); font-size: 20px; font-weight: 850; text-align: right;
}
.coin-presets { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.coin-presets button {
  min-height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--gold-bright);
  background: rgba(255,255,255,.025); font-size: 10px; font-weight: 800; cursor: pointer;
}
.coin-presets button:hover { border-color: rgba(233,191,105,.34); background: rgba(233,191,105,.08); }
.coin-compose-balance { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.025); }
.coin-compose-balance span { color: var(--muted); font-size: 10px; }
.coin-compose-balance strong { color: var(--gold-bright); font-size: 12px; }
.coin-compose-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.coin-compose-status { min-height: 15px; color: #ff9b9f; font-size: 10px; line-height: 1.4; }

/* ── Full-screen coin transfers and requests ────────────────────────── */
.coin-scene, .coin-request-overlay {
  position: fixed; top: var(--svara-viewport-top); right: 0; bottom: auto; left: 0;
  height: var(--svara-viewport-height); overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.coin-scene { z-index: 1000; display: grid; justify-items: center; align-items: start; padding: clamp(72px,11vh,112px) 16px max(48px, calc(env(safe-area-inset-bottom) + 28px)); overflow-y: auto; pointer-events: auto; }
.coin-scene-backdrop, .coin-request-backdrop { position: absolute; inset: 0; background: rgba(1,7,5,.76); backdrop-filter: blur(8px); }
.coin-scene-backdrop { animation: coin-backdrop-in .26s ease-out both; }
.coin-scene-card {
  position: relative; z-index: 2; width: min(92vw, 510px); display: grid; justify-items: center;
  padding: 23px 28px 25px; border: 1px solid rgba(233,191,105,.3); border-radius: 30px;
  background: radial-gradient(circle at 50% 0, rgba(82,140,108,.28), transparent 48%), linear-gradient(160deg,rgba(18,37,31,.97),rgba(5,13,11,.98));
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 70px rgba(233,191,105,.13), inset 0 1px rgba(255,255,255,.07);
  animation: coin-scene-in .42s var(--ease-out) both;
}
.coin-scene-avatar { width: 112px; height: 112px; margin-bottom: 15px; font-size: 42px; box-shadow: 0 18px 42px rgba(0,0,0,.46), 0 0 0 7px rgba(233,191,105,.07), 0 0 38px rgba(233,191,105,.2); }
.coin-scene-kicker, .coin-request-kicker { color: rgba(233,191,105,.7); font-size: 8px; font-weight: 900; letter-spacing: .22em; }
.coin-scene-card h2 { margin-top: 7px; color: #f7f2e3; font-family: Georgia,serif; font-size: clamp(19px,3.4vw,28px); font-weight: 650; text-align: center; }
.coin-scene-amount { margin-top: 5px; color: var(--gold-bright); font-family: Georgia,serif; font-size: clamp(34px,7vw,58px); line-height: 1; text-shadow: 0 5px 24px rgba(233,191,105,.27); }
.coin-scene-balance { margin-top: 16px; display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 12px; }
.coin-scene-balance b { color: var(--gold-deep); }
.coin-scene-balance strong { color: #fff1c9; font-size: 15px; }
.coin-flight-layer { position: fixed; inset: 0; z-index: 4; overflow: hidden; }
.transfer-coin {
  position: fixed; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--ruble); font-size: 24px; font-weight: 950; line-height: 1;
  text-shadow: 0 4px 10px rgba(0,0,0,.65), 0 0 13px var(--ruble-glow);
}
.transfer-coin::after { content: "₽"; }

.coin-request-overlay {
  z-index: 1010; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(58px,8vh,88px) 14px max(64px, calc(env(safe-area-inset-bottom) + 40px)); overflow-y: auto;
}
.coin-request-backdrop { pointer-events: auto; }
.coin-request-card {
  position: relative; z-index: 2; width: min(94vw, 520px); display: grid; justify-items: center;
  padding: 22px 28px 24px; border: 1px solid rgba(233,191,105,.34); border-radius: 30px;
  background: radial-gradient(circle at 50% 0, rgba(87,145,111,.26), transparent 44%), linear-gradient(160deg,#142720,#07100e);
  box-shadow: 0 42px 100px rgba(0,0,0,.72), 0 0 80px rgba(233,191,105,.12), inset 0 1px rgba(255,255,255,.07);
  animation: coin-request-in .42s var(--ease-out) both;
}
.coin-request-avatar { width: 104px; height: 104px; margin-bottom: 14px; font-size: 39px; box-shadow: 0 18px 40px rgba(0,0,0,.48), 0 0 0 7px rgba(233,191,105,.065); }
.coin-request-card h2 { margin-top: 7px; color: #fff2d0; font-family: Georgia,serif; font-size: clamp(20px,4vw,29px); font-weight: 650; text-align: center; }
.coin-request-card > p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.coin-request-amount { margin-top: 8px; color: var(--gold-bright); font-family: Georgia,serif; font-size: clamp(38px,8vw,62px); line-height: 1; text-shadow: 0 6px 26px rgba(233,191,105,.28); }
.coin-request-balance { width: 100%; margin-top: 15px; padding: 11px 13px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.coin-request-balance span { color: var(--muted); font-size: 10px; }
.coin-request-balance strong { color: var(--gold-bright); font-size: 12px; }
.coin-request-balance small { grid-column: 1 / 3; color: var(--muted-dim); font-size: 9px; text-align: right; }
.coin-request-actions { width: 100%; margin-top: 14px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.coin-request-actions .btn { min-height: 50px; }
.coin-request-status { min-height: 16px; color: #ff9b9f !important; font-size: 10px !important; }

@keyframes coin-backdrop-in { from { opacity: 0; } }
@keyframes coin-scene-in { from { opacity: 0; transform: translateY(20px) scale(.94); } }
@keyframes coin-request-in { from { opacity: 0; transform: translateY(18px) scale(.95); } }
.rules-pane h3 { margin: 18px 0 9px; color: rgba(233,191,105,.86); font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.rule-lead, .svara-rule { padding: 13px; border: 1px solid rgba(233,191,105,.18); border-radius: 14px; background: rgba(233,191,105,.055); }
.rule-lead strong, .svara-rule strong { display: block; margin-bottom: 4px; color: #fff2cc; font-family: Georgia,serif; font-size: 16px; }
.rule-lead p, .svara-rule p { color: var(--muted); font-size: 11px; line-height: 1.52; }
.rules-quick { display: grid; gap: 7px; margin-top: 12px; }
.rules-quick article { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.025); }
.rules-quick article > span { color: rgba(233,191,105,.58); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.rules-quick article div { display: grid; gap: 3px; }
.rules-quick b { color: var(--text); font-size: 11px; }
.rules-quick p { color: var(--muted); font-size: 10px; line-height: 1.42; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.score-grid span, .score-grid b { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.score-grid span { color: var(--text); background: rgba(255,255,255,.025); }
.score-grid b { color: var(--gold-bright); font-weight: 780; text-align: right; }
.score-grid :nth-last-child(-n+2) { border-bottom: 0; }
.rule-list { display: grid; gap: 8px; padding-left: 17px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.rule-list b { color: var(--text); }
.action-glossary { display: grid; gap: 5px; }
.action-glossary div { display: grid; grid-template-columns: 108px 1fr; gap: 9px; padding: 8px 9px; border-radius: 9px; background: rgba(255,255,255,.025); }
.action-glossary dt { color: #f1d795; font-size: 11px; font-weight: 800; }
.action-glossary dd { color: var(--muted); font-size: 10px; line-height: 1.35; }
.action-glossary.compact div { grid-template-columns: 92px 1fr; }
.rules-details { width: 100%; min-height: 48px; margin-top: 16px; font-size: 12px; }
.detailed-rules { padding-bottom: 36px; }
.detailed-rules > h3:first-of-type { margin-top: 22px; }
.rule-note { padding: 11px 12px; border-left: 2px solid rgba(233,191,105,.52); color: var(--muted); background: rgba(255,255,255,.02); font-size: 10px; line-height: 1.55; }
.svara-rule { margin-top: 18px; border-color: rgba(240,120,79,.25); background: rgba(240,120,79,.06); }
.svara-rule strong { color: #ffb08f; }
.settings-pane { display: grid; align-content: start; gap: 10px; }
.push-notification-setting { display: grid; gap: 10px; }
.push-notification-row > span { min-width: 0; }
.push-notification-status { min-height: 12px; margin-top: 2px; color: var(--muted-dim) !important; }
.push-notification-status[data-tone="success"] { color: #9edbb9 !important; }
.push-notification-status[data-tone="warning"] { color: #e7c987 !important; }
.push-notification-status[data-tone="error"] { color: #e9aaa4 !important; }
.push-install-card {
  display: grid; gap: 9px; padding: 15px; border: 1px solid rgba(233,191,105,.26); border-radius: 15px;
  background: linear-gradient(145deg,rgba(233,191,105,.095),rgba(168,116,45,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.push-install-badge {
  width: max-content; padding: 4px 8px; border: 1px solid rgba(233,191,105,.28); border-radius: 999px;
  color: var(--gold-bright); background: rgba(233,191,105,.075); font-size: 7px; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase;
}
.push-install-card > strong { color: #f7e8bd; font-size: 13px; }
.push-install-card > p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.push-install-card .btn { width: 100%; min-height: 42px; margin-top: 2px; font-size: 11px; }
.setting-row, .setting-stack { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.setting-row > span, .setting-stack > span { display: grid; gap: 3px; }
.setting-row b, .setting-stack b { color: var(--text); font-size: 12px; }
.setting-row small, .setting-stack small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.setting-row input[type="checkbox"] { width: 42px; height: 24px; flex: 0 0 auto; appearance: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: #26332f; transition: background .2s; }
.setting-row input[type="checkbox"]::before { content: ""; display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%; background: #a5b0ac; transition: transform .2s, background .2s; }
.setting-row input[type="checkbox"]:checked { border-color: rgba(233,191,105,.48); background: #8f6728; }
.setting-row input[type="checkbox"]:checked::before { background: #ffe5a4; transform: translateX(18px); }
.setting-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
.setting-stack { display: grid; gap: 11px; }
.setting-stack > span { grid-template-columns: 1fr auto; }
.setting-stack output { color: var(--gold-bright); font-size: 11px; }
.setting-stack input[type="range"] { width: 100%; accent-color: var(--gold); }
.effects-setting > span { grid-template-columns: 1fr; }
.effects-mode-options {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; width: 100%; padding: 4px;
  border: 1px solid rgba(207,226,218,.12); border-radius: 12px;
  background: linear-gradient(180deg,rgba(5,13,11,.82),rgba(17,30,26,.72));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.38), 0 1px rgba(255,255,255,.025);
}
.effects-mode-option { position: relative; min-width: 0; cursor: pointer; }
.effects-mode-option input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.effects-mode-option > span {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 9px; color: var(--muted);
  background: transparent; font-size: 11px; font-weight: 720; letter-spacing: .01em;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s, transform .18s var(--ease-out);
}
.effects-mode-option > span::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid rgba(145,163,157,.58); border-radius: 50%;
  background: rgba(145,163,157,.12); transition: border-color .18s, background .18s, box-shadow .18s;
}
.effects-mode-option:hover > span { color: #d9e2dd; background: rgba(255,255,255,.025); }
.effects-mode-option input:checked + span {
  border-color: rgba(233,191,105,.38); color: #ffe8ad;
  background: linear-gradient(145deg,rgba(233,191,105,.15),rgba(168,116,45,.075));
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 5px 15px rgba(0,0,0,.16);
}
.effects-mode-option input:checked + span::before {
  border-color: #f5d990; background: var(--gold); box-shadow: 0 0 0 3px rgba(233,191,105,.11), 0 0 9px rgba(233,191,105,.28);
}
.effects-mode-option input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.effects-mode-option:active > span { transform: scale(.98); }
.history-pane { position: relative; padding: 0; }
.history-empty { padding: 24px 18px 5px; color: var(--muted-dim); font-size: 11px; line-height: 1.45; text-align: center; }
#log-list { overflow-y: auto; padding: 8px 15px 18px; list-style: none; scrollbar-width: thin; scrollbar-color: #31443e transparent; }
#log-list li { padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.055); color: var(--muted); font-size: 12px; line-height: 1.42; }
#log-list li b { color: var(--text); font-weight: 700; }
.toast {
  position: fixed; left: 50%; bottom: 104px; z-index: 90; max-width: min(88vw, 460px); padding: 11px 17px;
  border: 1px solid rgba(233,191,105,.22); border-radius: 12px; color: var(--text); background: rgba(8,17,15,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.42); font-size: 13px; line-height: 1.42; text-align: center; white-space: pre-line; backdrop-filter: blur(14px);
  transform: translateX(-50%); animation: toast-in .28s var(--ease-out) both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px) scale(.96); } }
.toast.ui-closing { pointer-events: none; animation: toast-out .18s ease-in both; }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%,6px) scale(.985); } }

/* Новая посадка — общее, не блокирующее игру объявление для всего стола. */
.seat-arrival {
  --arrival-duration: 2800ms;
  position: fixed; left: 50%; top: var(--svara-notice-top); z-index: 1100;
  width: min(calc(100vw - 32px), 440px); min-height: 88px; padding: 12px 18px 12px 13px;
  display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 14px; overflow: hidden;
  border: 1px solid rgba(119,220,169,.44); border-radius: 22px; color: var(--text);
  background: radial-gradient(circle at 12% 30%, rgba(85,201,144,.2), transparent 35%), linear-gradient(145deg, rgba(18,48,38,.98), rgba(6,18,15,.98));
  box-shadow: 0 22px 52px rgba(0,0,0,.52), 0 0 42px rgba(85,201,144,.17), inset 0 1px rgba(255,255,255,.09);
  transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(18px);
  animation: seat-arrival-card var(--arrival-duration) var(--ease-out) both;
}
.seat-arrival::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -28%; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: rotate(12deg); animation: seat-arrival-sweep var(--arrival-duration) ease-in-out both;
}
.seat-arrival-glow { position: absolute; inset: auto 8% -38px; height: 52px; border-radius: 50%; background: rgba(85,201,144,.28); filter: blur(24px); }
.seat-arrival-avatar {
  position: relative; z-index: 1; width: 64px; height: 64px; font-size: 25px;
  border-color: rgba(151,235,191,.7); box-shadow: 0 9px 24px rgba(0,0,0,.4), 0 0 0 5px rgba(85,201,144,.08), 0 0 26px rgba(85,201,144,.24);
  animation: seat-arrival-avatar-in var(--arrival-duration) var(--ease-out) both;
}
.seat-arrival-flight {
  position: fixed !important; z-index: 1200; margin: 0 !important; pointer-events: none !important;
  transform-origin: center; will-change: left, top, width, height, opacity, transform;
}
.seat-arrival-copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 3px; }
.seat-arrival-kicker { color: #91dfb8; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.seat-arrival-name { overflow: hidden; color: #fff2cc; font-family: Georgia,serif; font-size: clamp(20px,3vw,27px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.seat-arrival-place { color: rgba(228,240,233,.68); font-size: 10px; font-weight: 700; }
.seat-arrival.effects-reduced, .seat-arrival.effects-reduced .seat-arrival-avatar { animation: none !important; }
@keyframes seat-arrival-card {
  0% { opacity: 0; transform: translate(-50%,14px) scale(.78); filter: blur(7px); }
  12% { opacity: 1; transform: translate(-50%,3px) scale(1.025); filter: blur(0); }
  20%, 82% { opacity: 1; transform: translate(-50%,0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%,8px) scale(.96); filter: blur(2px); }
}
@keyframes seat-arrival-avatar-in {
  0% { opacity: 0; transform: rotate(-16deg) scale(.52); }
  16% { opacity: 1; transform: rotate(4deg) scale(1.1); }
  25%, 86% { opacity: 1; transform: rotate(0) scale(1); }
  100% { opacity: .6; transform: scale(.92); }
}
@keyframes seat-arrival-sweep {
  0%, 9% { opacity: 0; transform: translateX(0) rotate(12deg); }
  20% { opacity: .9; }
  42%, 100% { opacity: 0; transform: translateX(650px) rotate(12deg); }
}

/* ── Desktop landscape table ──────────────────────────────────────────── */
@media (min-width: 700px) and (min-height: 620px) {
  #table { left: 0; right: 0; }
  .seat { width: 122px; }
  .seat .avatar-wrap, .seat .avatar { width: 72px; height: 72px; }
  .seat .ring { width: 84px; height: 84px; }
  .seat-info { min-width: 104px; }
  .seat .name, .seat .stack { font-size: 11px; }
  .my-cards { bottom: 2%; height: 148px; }
}

/* ── Compact/mobile layout ────────────────────────────────────────────── */
@media (max-width: 699px), (max-height: 619px) {
  .profile-dialog {
    padding: max(10px, env(safe-area-inset-top)) 8px max(72px, calc(env(safe-area-inset-bottom) + 48px));
  }
  .public-profile-card { width: min(100%, 380px); padding: 24px 18px 20px; border-radius: 22px; }
  .coin-scene, .coin-request-overlay {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: 8px; padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 48px)); padding-left: 8px;
  }
  .coin-scene-card, .coin-request-card { border-radius: 22px; }
  .coin-scene-card { padding: 18px 20px 20px; }
  .coin-request-card { padding: 17px 18px 18px; }
  .coin-scene-avatar { width: 86px; height: 86px; margin-bottom: 11px; font-size: 34px; }
  .coin-request-avatar { width: 78px; height: 78px; margin-bottom: 10px; font-size: 31px; }
  .coin-request-balance { margin-top: 11px; padding: 9px 11px; }
  .coin-request-actions { margin-top: 11px; }
  .topbar { width: calc(100% - 16px); min-height: 52px; margin-top: max(6px, env(safe-area-inset-top)); padding: 5px 6px 5px 11px; border-radius: 15px; }
  #me-name { max-width: 120px; font-size: 13px; }
  .me-kicker { font-size: 7px; }
  .coins { font-size: 13px; }
  .icon-btn { width: 37px; height: 37px; border-radius: 11px; }
  .top-right, .voice-controls { gap: 4px; }
  .voice-count { right: -4px; top: -4px; min-width: 15px; height: 15px; padding: 0 4px; font-size: 8px; }
  .voice-icon { width: 34px; height: 34px; }
  .action-history { left: 8px; width: min(46vw, 174px); }
  .action-history-title { display: none; }
  #action-history-list { gap: 4px; }
  .action-history-item { min-height: 42px; grid-template-columns: 27px minmax(0,1fr); gap: 7px; padding: 6px 8px 6px 6px; border-radius: 12px; }
  .action-history-item:nth-child(n+2) { display: none; }
  .action-history-avatar { width: 27px; height: 27px; font-size: 11px; }
  .action-history-player { font-size: 8px; }
  .action-history-action { font-size: 10px; }
  .observers { max-width: 95px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  #table { inset: 0 6px; }
  #oval { inset: 6% 1% 15%; border-width: 8px; }
  .table-shadow { inset: 12% 4% 14%; }
  .status-banner { top: 8%; max-width: 92%; padding: 7px 12px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
  .phase-timer { --timer-size: 104px; top: 51%; }
  .bank { top: 38%; gap: 7px; padding: 6px 10px 6px 7px; border-radius: 13px; }
  .chip-stack { transform: scale(.76); }
  #bank-amount { font-size: 15px; }
  .my-turn-timer { --timer-size: 100px; top: 54%; gap: 5px; }
  .action-spotlight { top: 28%; min-width: min(76vw, 270px); padding: 8px 16px 9px; }
  .action-player { font-size: 8px; }
  .action-label { font-size: clamp(16px,5vw,20px); }
  .look-scene { top: 45%; width: min(94vw, 700px); padding: 15px 10px 17px; }
  .look-scene.private { width: min(97vw, 760px); }
  .look-scene h2 { font-size: clamp(24px,7vw,34px); }
  .look-scene p { margin: 4px 0 8px; font-size: 9px; }
  .look-scene-cost { min-height: 27px; margin-bottom: 9px; padding: 5px 10px; font-size: 7px; }
  .look-player { padding: 8px 6px; gap: 7px; border-radius: 13px; }
  .look-player-head { gap: 6px; }
  .look-player-avatar { width: 40px; font-size: 16px; }
  .look-player-copy strong { font-size: 10px; }
  .look-player-copy small { font-size: 6px; }
  .look-cards { min-height: 86px; }
  .look-cards .look-card { width: clamp(50px,14vw,64px); margin: 0 -6px; border-radius: 8px; }
  .svara-scene { top: 45%; width: min(94vw, 620px); max-height: calc(100% - 12px); padding: 16px 11px 18px; }
  .svara-scene h2 { font-size: clamp(32px,10vw,44px); }
  .svara-scene p { margin: 4px 0 9px; font-size: 10px; }
  .svara-scene-score { min-height: 34px; margin-bottom: 11px; padding: 7px 12px; font-size: clamp(11px,3.4vw,15px); }
  .svara-scene.artificial h2 { font-size: clamp(26px,7vw,38px); }
  .split-scene { top: 45%; width: min(92vw, 520px); padding: 17px 12px 19px; }
  .split-scene h2 { font-size: clamp(25px,7vw,34px); }
  .split-scene p { font-size: 10px; }
  .svara-hands { gap: 6px; }
  .svara-hand { min-height: 63px; padding: 7px; grid-template-columns: 42px minmax(0,1fr); gap: 7px; border-radius: 13px; }
  .svara-hand-avatar { width: 42px; font-size: 17px; }
  .svara-hand-copy { gap: 3px; }
  .svara-hand-name { font-size: 10px; }
  .svara-hand-handle { font-size: 7px; }
  .winner-reveal { top: 49%; min-width: 260px; }
  .winner-reveal::before { width: 320px; height: 230px; }
  .winner-name { font-size: 19px; }
  .winner-title { font-size: 14px; }
  .winner-avatar { width: 76px; height: 76px; margin: 10px 0 9px; font-size: 28px; }
  .winner-cards { min-height: 112px; margin-top: 3px; }
  .winner-cards .card { width: clamp(65px, 20vw, 78px); margin: 0 -6px; }
  .winner-prize { padding: 6px 10px; font-size: 8px; }
  .seat { width: 82px; }
  .seat .avatar-wrap, .seat .avatar { width: 54px; height: 54px; }
  .seat .avatar { font-size: 20px; }
  .readiness-badge { top: -11px; min-width: 58px; height: 18px; padding: 0 6px; font-size: 6px; }
  .readiness-badge b { font-size: 10px; }
  .dark-hand-badge { top: -12px; min-width: 65px; height: 18px; padding: 0 6px; font-size: 6px; }
  .seat-info { min-width: 68px; max-width: 82px; margin-top: -3px; padding: 4px 5px; border-radius: 8px; }
  .seat .name, .seat .stack { font-size: 8px; }
  .seat.empty .seat-info { display: none; }
  .seat.empty .avatar { opacity: .52; }
  .seat .dealer-chip { left: -6px; width: 21px; height: 18px; border-radius: 6px; }
  .seat .dealer-chip .ui-icon { width: 12px; height: 12px; }
  .online-dot { width: 8px; height: 8px; }
  .seat .ring { inset: -5px; width: 64px; height: 64px; }
  .seat .mini-cards { --folded-cards-scale: .76; bottom: -25px; transform: translateX(-50%) scale(.86); }
  .seat.result-revealed .mini-cards { bottom: -70px; width: 126px; height: 70px; transform: translateX(-50%); }
  .seat.result-revealed.result-left .mini-cards { left: 74%; }
  .seat.result-revealed.result-right .mini-cards { left: 26%; }
  .seat.result-revealed .result-seat-card { width: 45px; margin: 0 -7px; border-radius: 7px; }
  .seat.result-revealed .result-seat-card .corner { left: 5px; top: 4px; }
  .seat.result-revealed .result-seat-card .corner.bottom { right: 5px; bottom: 4px; }
  .seat.result-revealed .result-seat-card .rank { font-size: 12px; }
  .seat.result-revealed .result-seat-card .corner .suit { font-size: 9px; }
  .seat.result-revealed .result-seat-card .suit-main { font-size: 21px; }
  .my-cards { bottom: 1.5%; min-width: 210px; height: 106px; }
  .hand-focus-toggle { left: calc(50% + 126px); bottom: 3.2%; width: 38px; height: 38px; font-size: 20px; }
  .card { width: clamp(57px, 16.5vw, 72px); margin: 0 -5px; border-radius: 9px; }
  .card .corner { left: 7px; top: 6px; }
  .card .corner.bottom { left: auto; right: 7px; top: auto; bottom: 6px; }
  .panel { width: calc(100% - 12px); min-height: 58px; margin-bottom: max(2px, env(safe-area-inset-bottom)); padding: 6px; border-radius: 16px; }
  .panel-wait { min-height: 44px; font-size: 11px; }
  .panel-duel { min-height: 42px; margin-bottom: 6px; padding: 4px; }
  .panel-duel .duel-button { min-width: 0; min-height: 42px; padding: 7px 9px; font-size: 11px; }
  .recruit-panel > .btn { min-width: 30%; }
  .recruit-dark-status { padding-inline: 5px; font-size: 8px; }
  .svara-dark-panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
  .svara-dark-copy { text-align: center; }
  .svara-dark-actions .btn { min-height: 44px; padding: 8px 7px; font-size: 11px; }
  .duel-panel-copy { padding: 0 5px; }
  .duel-panel-copy strong { font-size: 10px; }
  #panel-actions { flex-wrap: wrap; }
  #panel-actions .btn { min-width: 29%; min-height: 44px; padding: 8px 6px; font-size: 12px; }
  .btn.big { min-height: 46px; font-size: 14px; }
  .felt-mark { top: 49%; }
}

@media (max-width: 430px) and (orientation: portrait) {
  .observers { display: none; }
  .auth-box { padding: 26px 20px; border-radius: 23px; }
  .logo-mark { width: 62px; height: 62px; border-radius: 20px; }
  .logo h1 { font-size: 27px; }
  #oval { inset: 5% -2% 14%; border-radius: 48% / 52%; }
  .seat { transform: translate(-50%,-50%) scale(.92); }
  .seat.folded { transform: translate(-50%,-50%) scale(.86); }
  .my-cards { bottom: 0; }
  #game.hand-focus-active .my-cards { bottom: auto; }
  #game.hand-focus-active .action-history { top: max(8px, env(safe-area-inset-top)); width: min(140px,32vw); }
  #game.hand-focus-active .action-history-item:nth-child(n+2) { display: none; }
  #game.hand-focus-active .my-turn-timer { top: max(58px, calc(env(safe-area-inset-top) + 51px)); }
  .first-visit-hint { right: 8px; width: min(270px, calc(100vw - 16px)); }
  .menu-panel { right: 6px; top: 6px; bottom: 6px; width: calc(100vw - 12px); }
  .panel-duel[data-mode="offer"] { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .panel-duel[data-mode="offer"] .duel-panel-copy { text-align: center; }
  .duel-panel-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .seat-arrival {
    width: calc(100vw - 20px); min-height: 76px;
    grid-template-columns: 54px minmax(0,1fr); gap: 11px; padding: 10px 13px 10px 10px; border-radius: 18px;
  }
  .svara-scene { --svara-columns: 2 !important; }
  .svara-scene[data-count="1"] { --svara-columns: 1 !important; }
  .seat-arrival-avatar { width: 54px; height: 54px; font-size: 22px; }
  .seat-arrival-name { font-size: 20px; }
}

@media (max-height: 619px) and (min-width: 700px) {
  .action-spotlight { top: 18%; }
}

@media (max-height: 430px) and (min-width: 700px) {
  .phase-timer { --timer-size: 82px; }
  .my-turn-timer { --timer-size: 78px; }
  .game-timer-value { font-size: 23px; }
  .game-timer-copy { gap: 8px; }
  .look-scene { top: 50%; max-height: calc(100% - 8px); padding: 7px 9px 8px; border-radius: 17px; }
  .look-scene h2 { margin: 2px 0 1px; font-size: 24px; }
  .look-scene p { margin: 2px 0 4px; font-size: 8px; }
  .look-scene-cost { min-height: 22px; margin-bottom: 5px; padding: 3px 9px; }
  .look-player { padding: 5px 7px; grid-template-columns: 115px minmax(0,1fr); align-items: center; gap: 4px; }
  .look-player-avatar { width: 32px; }
  .look-cards { min-height: 72px; }
  .look-cards .look-card { width: 49px; }
  .svara-scene {
    top: 50%; max-height: calc(100% - 8px); padding: 8px 10px 9px; border-radius: 18px;
  }
  .svara-scene-kicker { font-size: 7px; letter-spacing: .17em; }
  .svara-scene h2 { margin: 2px 0 1px; font-size: 28px; }
  .svara-scene.artificial h2 { font-size: 25px; }
  .svara-scene p { margin: 2px 0 4px; font-size: 8px; }
  .svara-scene-score { min-height: 25px; margin-bottom: 5px; padding: 4px 10px; font-size: 11px; }
  .svara-hands { gap: 4px; }
  .svara-hand {
    min-height: 43px; padding: 4px 6px; grid-template-columns: 32px minmax(0,1fr); gap: 6px; border-radius: 10px;
  }
  .svara-hand-avatar { width: 32px; border-width: 1px; font-size: 13px; }
  .svara-hand-copy { gap: 1px; }
  .svara-hand-name { font-size: 9px; }
  .svara-hand-handle { font-size: 6px; }
  .seat.result-revealed.result-bottom .mini-cards { bottom: -45px; height: 58px; }
  .seat.result-revealed.result-bottom .result-seat-card { width: 40px; margin: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .action-spotlight { opacity: 1 !important; transform: translate(-50%,-50%) !important; filter: none !important; animation: none !important; }
  .first-visit-hint, .seat .bubble, .my-cards .bubble, .look-scene, .svara-scene, .split-scene, .svara-banner, .win-amount {
    opacity: 1 !important; filter: none !important; animation: none !important;
  }
  .seat .bubble, .my-cards .bubble { transform: translateX(-50%) !important; }
  .look-scene, .svara-scene, .split-scene, .svara-banner, .win-amount { transform: translate(-50%,-50%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hand-focus-backdrop, #game.hand-focus-active .my-cards { animation: none !important; }
}

html[data-effects="reduced"] *, html[data-effects="reduced"] *::before, html[data-effects="reduced"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html[data-effects="reduced"] .action-spotlight { opacity: 1 !important; transform: translate(-50%,-50%) !important; filter: none !important; animation: none !important; }
html[data-effects="reduced"] .seat-arrival, html[data-effects="reduced"] .seat-arrival-avatar { animation: none !important; }
html[data-effects="reduced"] .first-visit-hint,
html[data-effects="reduced"] .seat .bubble,
html[data-effects="reduced"] .my-cards .bubble,
html[data-effects="reduced"] .look-scene,
html[data-effects="reduced"] .svara-scene,
html[data-effects="reduced"] .split-scene,
html[data-effects="reduced"] .svara-banner,
html[data-effects="reduced"] .win-amount {
  opacity: 1 !important; filter: none !important; animation: none !important;
}
html[data-effects="reduced"] .seat .bubble,
html[data-effects="reduced"] .my-cards .bubble { transform: translateX(-50%) !important; }
html[data-effects="reduced"] .look-scene,
html[data-effects="reduced"] .svara-scene,
html[data-effects="reduced"] .split-scene,
html[data-effects="reduced"] .svara-banner,
html[data-effects="reduced"] .win-amount { transform: translate(-50%,-50%) !important; }