/* ═══════════════════════════════════════════════════════════════
   Meme Party Online — Modern Neon Redesign v2.0
   Glassmorphism · Inter typography · Smooth animations · Mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
/* Google Fonts грузятся неблокирующе из HTML (см. index.html) — @import блокировал
   рендер и DOMContentLoaded, если fonts.googleapis.com недоступен. */

:root {
  /* Backgrounds */
  --bg: #0a0912;
  --bg2: #100e1c;
  --panel: rgba(18, 15, 36, 0.85);
  --panel2: rgba(26, 22, 64, 0.7);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.12);

  /* Neon palette */
  --neon-cyan: #22d3ee;
  --neon-magenta: #ec4899;
  --neon-lime: #a3e635;
  --neon-pink: #ec4899;
  --neon-gold: #fbbf24;
  --neon-purple: #8b5cf6;
  --lavender: #c4b5fd;
  --accent: var(--neon-pink);
  --accent2: var(--neon-purple);
  --gold: var(--neon-gold);

  /* Text */
  --text: #f4f2fb;
  --text-secondary: rgba(244, 242, 251, 0.72);
  --muted: #a29dbd;
  --ok: #34d399;
  --err: #ff4466;

  /* Geometry */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.3);

  /* Glows */
  --glow-cyan: 0 0 12px rgba(34, 211, 238, 0.4), 0 0 30px rgba(34, 211, 238, 0.15);
  --glow-magenta: 0 0 12px rgba(236, 72, 153, 0.45), 0 0 30px rgba(236, 72, 153, 0.18);
  --glow-gold: 0 0 12px rgba(251, 191, 36, 0.4), 0 0 30px rgba(251, 191, 36, 0.15);
  --glow-lime: 0 0 10px rgba(163, 230, 53, 0.5), 0 0 25px rgba(163, 230, 53, 0.2);

  /* Typography */
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-arcade: 'Unbounded', 'Manrope', sans-serif;
  --font-hand: 'Gochi Hand', 'Comic Sans MS', cursive;
}

/* ── Иврит: Rubik фолбэком ПЕРЕД системными шрифтами ──────────────────────
   Латиница/кириллица остаются на Unbounded/Manrope (они идут первыми),
   ивритские глифы подхватывает Rubik — до того как браузер уйдёт в Arial. */
:root[lang="he"], :root[dir="rtl"] {
  --font-body: 'Manrope', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', 'Manrope', 'Rubik', sans-serif;
  --font-arcade: 'Unbounded', 'Manrope', 'Rubik', sans-serif;
  --font-hand: 'Gochi Hand', 'Rubik', 'Comic Sans MS', cursive;
}

/* ── Reset ── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }

/* ── Ambient Animated Background ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 5%, rgba(139, 92, 246, 0.30) 0%, transparent 70%),
    radial-gradient(50% 40% at 90% 10%, rgba(236, 72, 153, 0.26) 0%, transparent 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(34, 211, 238, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 30% 60%, rgba(255, 45, 120, 0.03) 0%, transparent 50%);
  animation: ambientShift 12s ease-in-out infinite alternate;
}

@keyframes ambientShift {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.7; transform: scale(0.95); }
}

/* ═══ SCREEN TRANSITIONS ═══ */
.screen {
  display: none;
  animation: screenIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}
.screen.active { display: block; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Screen backdrop (home screen) ── */
.screen-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(0, 240, 255, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 400px 400px at 80% 50%, rgba(255, 0, 255, 0.03) 0%, transparent 50%);
}

/* ── App container ── */
#app {
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 16px 60px;
  min-height: 100%;
  position: relative;
  z-index: 1;
}

/* ── CRT Scanline (subtle) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 240, 255, 0.015) 2px,
    rgba(0, 240, 255, 0.015) 4px
  );
}
@media (max-width: 480px) {
  body::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

/* ── Top nav bar ── */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  background: rgba(8, 6, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.nav-logo {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 45, 120, 0.3));
}

.nav-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Desktop nav links ── */
.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none !important; }
}

.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  position: relative;
}

.nav-link:hover {
  color: var(--text);
  background: var(--glass);
}

.nav-link.active {
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
}

/* ── Hamburger toggle ── */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
}

.nav-toggle:hover { background: var(--glass); }

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

/* Animated hamburger → X */
.nav-toggle.active .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.active .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Mobile drawer ── */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s;
}

.nav-drawer-overlay:not(.hidden) { display: block; }

.nav-drawer {
  position: fixed;
  top: 0;
  inset-inline-end: -300px;
  width: 280px;
  max-width: 80vw;
  height: 100%;
  z-index: 1001;
  background: rgba(13, 11, 26, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  transition: inset-inline-end 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer.open { inset-inline-end: 0; }

.nav-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-drawer-logo { font-size: 28px; }

.nav-drawer-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  flex: 1;
}

.nav-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.nav-drawer-close:hover {
  background: var(--glass);
  color: var(--text);
}

.nav-drawer-body {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-drawer-link {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s;
  gap: 10px;
}

.nav-drawer-link:hover {
  color: var(--text);
  background: var(--glass);
}

.nav-drawer-link.active {
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
}

.nav-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-drawer-version {
  font-size: 12px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  text-align: center;
  padding: 44px 0 20px;
  position: relative;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.35);
  font-size: 12px;
  font-weight: 700;
  color: var(--lavender);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.hero-badge::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon-lime); display: inline-block;
  animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 54px);
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #8b5cf6, #ec4899, #22d3ee, #8b5cf6);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.02;
  animation: gradShift 6s ease infinite;
  text-wrap: balance;
}
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-sticker {
  position: absolute;
  top: 20px; inset-inline-end: max(8px, calc(50% - 300px));
  transform: rotate(9deg);
  background: var(--neon-lime); color: #0a0912;
  font-family: var(--font-hand);
  font-size: 19px; padding: 3px 13px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(163, 230, 53, 0.4);
  z-index: 2; pointer-events: none;
}

.tagline {
  color: var(--text-secondary);
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
}

.hero-cta {
  margin-top: 20px;
  margin-bottom: 8px;
}

.hero-stats {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  width: 100%;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
  animation: glowPulse 3.5s infinite;
}

.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.6);
  filter: brightness(1.08);
  transform: translateY(-2px);
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4); }
  50% { box-shadow: 0 6px 30px rgba(139, 92, 246, 0.55); }
}

.btn-secondary {
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.15);
}

.btn-secondary:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.1);
  box-shadow: var(--glow-cyan);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: auto;
}

.btn-ghost:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.04);
}

.btn-small {
  padding: 7px 14px;
  font-size: 13px;
  width: auto;
  flex: 0 0 auto;
}

.btn-large {
  padding: 14px 24px;
  font-size: 16px;
}

.btn-back {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Ready pulse (lobby) ── */
@keyframes lobbyPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255, 45, 120, 0.35); }
  50%      { box-shadow: 0 4px 40px rgba(255, 45, 120, 0.7), 0 0 60px rgba(180, 77, 255, 0.4); }
}
.btn-ready { animation: lobbyPulse 1.8s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════ */
.inp {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  outline: none;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.inp::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.inp:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
  background: rgba(0, 240, 255, 0.02);
}

.code-inp {
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
  font-weight: 800;
  font-size: 24px;
  margin: 0;
  font-family: var(--font-display);
  text-indent: 10px;
  color: var(--neon-gold);
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  transition: all 0.2s;
  caret-color: var(--neon-pink);
}

.code-inp::placeholder {
  color: var(--muted);
  opacity: 0.45;
  letter-spacing: 6px;
  font-weight: 700;
}

.code-inp:focus {
  border-color: var(--neon-gold);
  border-style: solid;
  background: rgba(255, 215, 0, 0.03);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.08), inset 0 0 18px rgba(255, 215, 0, 0.03);
}

.join-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}

.join-row .code-inp {
  flex: 1;
  min-width: 0;
}

.join-row .btn {
  width: auto;
  flex: 0 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS & PANELS (glassmorphism)
   ═══════════════════════════════════════════════════════════════ */
.card-panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ═══════════════════════════════════════════════════════════════
   GAME SELECTION GRID
   ═══════════════════════════════════════════════════════════════ */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 0;
  margin-top: 8px;
}

.game-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px 16px 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  perspective: 600px;
  transform-style: preserve-3d;
}

.game-card::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.5; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(80% 70% at 100% 0%, rgba(139, 92, 246, 0.22), transparent 65%);
}
.game-card:nth-child(3n+2)::before { background: radial-gradient(80% 70% at 100% 0%, rgba(236, 72, 153, 0.20), transparent 65%); }
.game-card:nth-child(3n)::before { background: radial-gradient(80% 70% at 100% 0%, rgba(34, 211, 238, 0.18), transparent 65%); }

.game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.game-card:active {
  transform: translateY(-2px) scale(0.98);
}

.game-card-emoji {
  font-size: 42px;
  line-height: 1.2;
  transition: transform 0.3s;
}

.game-card:hover .game-card-emoji {
  transform: scale(1.15) rotate(-5deg);
}

.game-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.game-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 500;
}

.new-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  box-shadow: 0 2px 12px rgba(255, 45, 120, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════ */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  margin: 16px 0;
  font-size: 13px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   STATUS & HINTS
   ═══════════════════════════════════════════════════════════════ */
.err {
  color: var(--err);
  font-size: 14px;
  min-height: 18px;
  margin: 10px 0 0;
  text-align: center;
  font-weight: 500;
}
.muted { color: var(--muted); font-size: 14px; }
.hint {
  margin: 8px 0 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   LOBBY
   ═══════════════════════════════════════════════════════════════ */
.lobby-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
  margin-top: 16px;
}

.room-head {
  /* alias for lobby-top */
}

.room-code {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--neon-gold);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
  margin: 0;
}

.invite-box {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.invite-box .btn {
  width: auto;
}

.invite-text {
  flex: 1;
  min-width: 0;
}

.invite-text p {
  margin: 0 0 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

#qr-container { flex-shrink: 0; }

#qr-container img {
  width: 120px;
  height: 120px;
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glass);
  image-rendering: pixelated;
}

/* ── Player list ── */
.player-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-list li {
  background: var(--panel);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--glass-border);
  transition: all 0.25s;
}

.player-list li:first-child {
  border-color: rgba(255, 215, 0, 0.15);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), transparent);
}

.player-list li:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-name {
  font-weight: 600;
  font-size: 15px;
}

.player-status {
  font-size: 12px;
  color: var(--muted);
}

/* ── Badges ── */
.badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--neon-purple);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge.host {
  background: var(--neon-gold);
  color: #000;
}

/* ── Kick button in player list ── */
.btn-kick {
  background: none;
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ff5050;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 8px;
  opacity: 0.6;
}
.btn-kick:hover {
  background: rgba(255, 80, 80, 0.15);
  border-color: #ff5050;
  opacity: 1;
}

/* ── Status dot ── */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
  margin-inline-end: 8px;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
}
.dot.off {
  background: #555;
  box-shadow: none;
}

/* ── Lobby controls ── */
.lobby-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.lobby-controls select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  outline: none;
  cursor: pointer;
}

.lobby-controls select:focus {
  border-color: var(--neon-cyan);
}

.lobby-buttons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.lobby-buttons .btn {
  flex: 0 0 auto;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════
   ROUND / MATCH
   ═══════════════════════════════════════════════════════════════ */
.round-status-bar {
  margin: 4px 0 8px;
}

.round-header {
  margin-bottom: 16px;
}

.round-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.round-badges .btn {
  margin-inline-start: auto;
  width: auto;
}

.pill {
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pill-accent {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
}

#prompt-text {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--text);
  padding: 0 4px;
}

/* ── Prompt card ── */
.prompt-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(19, 16, 42, 0.6));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  min-height: 100px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}

.role-banner {
  text-align: center;
  margin: 16px 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.role-banner.judge {
  color: var(--neon-gold);
  font-weight: 700;
}

/* ── Live scores ── */
.live-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 12px;
}
.ls-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  line-height: 1;
}
.ls-chip .ls-name {
  color: var(--text-secondary);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-chip .ls-pts {
  font-weight: 700;
  color: var(--neon-gold);
}

/* ── Hand (CAH cards) ── */
.hand {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.answer-card {
  background: rgba(255, 255, 255, 0.9);
  color: #13102a;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 80px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.answer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.answer-card:active {
  transform: scale(0.96);
}

.answer-card.selected {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.15), var(--glow-cyan);
}

/* Image cards */
.answer-card.is-image {
  position: relative;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: rgba(12, 10, 23, 0.8);
  overflow: hidden;
  border: 2px solid var(--glass-border);
}

.hand .answer-card.is-image {
  padding: 4px;
}

.hand .answer-card.is-image .card-img {
  max-height: 200px;
  object-fit: contain;
  background: rgba(5, 4, 13, 0.5);
}

.hand .answer-card.is-image .card-cap {
  font-size: 11px;
}

.card-img {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--bg2);
}

.card-cap {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
}

.card-plus {
  display: block;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  margin: 4px 0;
}

/* Magnifier */
.card-magnifier {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.answer-card.is-image:hover .card-magnifier,
.answer-card.is-image:active .card-magnifier {
  opacity: 1;
  pointer-events: auto;
}

/* ── Reveal board ── */
.reveal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.reveal .answer-card {
  flex: none;
  width: 100%;
  min-height: 60px;
}

.reveal .answer-card.is-image {
  min-height: 0;
  padding: 4px;
}

.reveal .answer-card.is-image .card-img {
  max-height: 200px;
  object-fit: contain;
  background: rgba(5, 4, 13, 0.5);
}

.reveal .answer-card.is-image .card-cap {
  font-size: 11px;
}

.reveal .answer-card.win {
  border-color: var(--neon-gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15), var(--glow-gold);
  transform: scale(1.03);
}

.reveal .answer-card.is-readonly {
  cursor: default;
}

.reveal .answer-card.is-readonly:active {
  transform: none;
}

.author {
  font-size: 11px;
  color: var(--neon-purple);
  font-weight: 700;
  margin-top: 6px;
  text-align: center;
}

/* ── Wait zone ── */
.wait-zone {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SCOREBOARD
   ═══════════════════════════════════════════════════════════════ */
.scoreboard {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scoreboard li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  transition: all 0.2s;
}

.scoreboard li.leader {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent);
  border-color: rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.06);
}

.score-val {
  font-weight: 800;
  color: var(--neon-gold);
  font-size: 18px;
}

/* Result screen */
#screen-result h2 {
  text-align: center;
  font-size: 26px;
  font-family: var(--font-display);
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--neon-gold), var(--neon-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#result-body {
  text-align: center;
  margin: 14px 0;
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN
   ═══════════════════════════════════════════════════════════════ */
.home-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4px;
}

.home-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
}

.home-links-guest .guest-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.home-links-guest .hint {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  max-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
  max-width: 90%;
  box-shadow: var(--shadow-glass);
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  animation: fadeIn 0.2s ease;
}

.modal-box {
  background: rgba(18, 15, 36, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px;
  border-radius: var(--radius);
  width: 88%;
  max-width: 360px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.05), var(--shadow-lg);
}

.modal-box h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 16px;
  text-align: center;
}

.hidden { display: none !important; }

/* ── Rules modal ── */
.rules-box { max-width: 400px; }
.rules-box h3 { font-size: 22px; }

.rules-list {
  margin: 0 0 18px;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.rules-list li { padding-inline-start: 4px; }
.rules-list b { color: var(--neon-gold); }

.rules-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.rules-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--neon-pink);
}

/* ── Tutorial modal ── */
.tutorial-box { max-width: 380px; }

.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.tutorial-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.2s;
}

.tutorial-step.active {
  background: rgba(0, 240, 255, 0.04);
  border-color: rgba(0, 240, 255, 0.1);
}

.tutorial-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--neon-cyan);
  min-width: 28px;
  line-height: 1.3;
}

.tutorial-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.tutorial-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.tutorial-dots {
  display: flex;
  gap: 6px;
}

.tdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}

.tdot.active {
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius);
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.2), 0 0 80px rgba(255, 0, 255, 0.1);
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 20px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   SHARE PANEL
   ═══════════════════════════════════════════════════════════════ */
.share-panel {
  background: var(--panel2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0 18px;
  text-align: center;
}
.share-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 10px 0;
}
.share-link {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  margin: 0;
  color: var(--muted);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.qr-box {
  display: flex;
  justify-content: center;
  margin: 12px 0 6px;
}
.qr-hint { font-size: 12px; margin: 4px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   EMOJI PANEL & STREAM
   ═══════════════════════════════════════════════════════════════ */
.emoji-panel {
  position: fixed;
  bottom: 80px;
  inset-inline-end: 12px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; /* hidden panel must never swallow taps (blocked the Join button!) */
}

.emoji-panel.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }

.emoji-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(18, 15, 36, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-btn:hover {
  transform: scale(1.2);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.emoji-btn:active { transform: scale(0.9); }

.emoji-rain {
  position: fixed;
  pointer-events: none;
  font-size: 26px;
  animation: emojiFall 2.5s ease-in forwards;
  z-index: 160;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3));
}

@keyframes emojiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  60%  { opacity: 0.8; transform: translateY(60vh) rotate(180deg) scale(1.1); }
  100% { opacity: 0; transform: translateY(100vh) rotate(360deg) scale(0.6); }
}

/* ═══════════════════════════════════════════════════════════════
   MATCH BAR
   ═══════════════════════════════════════════════════════════════ */
.match-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.match-bar .btn { margin-inline-start: auto; }

/* ═══════════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════════ */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — in nav bar
   ═══════════════════════════════════════════════════════════════ */
.nav-langs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 12px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(255,255,255,0.08);
}

.nav-drawer-langs {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.nav-drawer-langs .lang-btn {
  flex: 1;
  text-align: center;
  font-size: 13px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  font-weight: 500;
}

.nav-drawer-langs .lang-btn:hover {
  border-color: var(--neon-cyan);
  color: var(--text);
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
}

.lang-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.lang-btn.active {
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   SOUND TOGGLE
   ═══════════════════════════════════════════════════════════════ */
.sfx-toggle {
  position: fixed;
  top: 62px;
  inset-inline-start: 12px;
  z-index: 1001;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 15, 36, 0.85);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.sfx-toggle:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER STATS PROFILE
   ═══════════════════════════════════════════════════════════════ */
.stats-box { max-width: 400px; }
.stats-box h3 { text-align: center; margin: 0 0 20px; font-family: var(--font-display); font-size: 20px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.stat-item {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  border: 1px solid var(--glass-border);
}
.stat-val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}
.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stats-fav {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.06), rgba(180, 77, 255, 0.06));
  border: 1px solid rgba(255, 0, 255, 0.15);
}
.stats-fav .stat-val { color: var(--neon-magenta); }

/* ═══════════════════════════════════════════════════════════════
   COUNTDOWN OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 15, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  animation: fadeIn 0.2s;
}

.countdown-num {
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 900;
  color: var(--neon-cyan);
  text-shadow: 0 0 50px rgba(0, 240, 255, 0.5), 0 0 100px rgba(0, 240, 255, 0.2);
  animation: countPop 0.6s ease-out;
}

@keyframes countPop {
  0%   { transform: scale(2); opacity: 0; }
  50%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CONFETTI
   ═══════════════════════════════════════════════════════════════ */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: ≤640px (mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #app {
    padding: 56px 12px 40px;
  }

  .hero {
    padding: 32px 0 16px;
  }

  .hero h1 {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .hero-badge {
    font-size: 10px;
    padding: 4px 10px;
  }

  .tagline {
    font-size: 14px;
  }

  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .game-card {
    padding: 20px 10px 16px;
    gap: 8px;
  }

  .game-card-emoji {
    font-size: 30px;
  }

  .game-card-name {
    font-size: 12px;
    letter-spacing: 0;
  }

  .game-card-desc {
    font-size: 11px;
  }

  .hand {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .reveal {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .room-code {
    font-size: 28px;
    letter-spacing: 6px;
  }

  #qr-container img {
    width: 90px;
    height: 90px;
  }

  .invite-box {
    flex-direction: column;
    text-align: center;
  }

  .invite-box .btn {
    width: 100%;
  }

  .lobby-top {
    margin-top: 0;
  }

  .hero h1 {
    padding: 0 24px;
    word-break: break-word;
  }

  #lang-switcher {
    top: 64px;
    inset-inline-end: 8px;
  }

  .lang-btn {
    font-size: 10px;
    padding: 3px 6px;
  }

  .sfx-toggle {
    top: 58px;
    inset-inline-start: 8px;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .player-chips { top: 58px; inset-inline-start: 42px; height: 28px; }
  .player-chips .chip { height: 28px; padding: 0 10px; }

  .code-inp {
    font-size: 20px;
    letter-spacing: 8px;
    padding: 12px 10px;
  }

  #prompt-text {
    font-size: 18px;
  }

  .answer-card {
    font-size: 13px;
    padding: 12px;
  }

  .round-status-bar {
    margin-top: 4px;
  }

  .home-links {
    font-size: 13px;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: ≤380px (small phones)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .game-card {
    padding: 14px 8px 12px;
    gap: 4px;
  }

  .game-card-name {
    font-size: 11px;
  }

  .hero h1 {
    font-size: 20px;
  }

  .inp, .code-inp {
    font-size: 16px;
    padding: 11px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: ≥768px (tablet / desktop)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero h1 {
    font-size: 44px;
  }

  .game-card-emoji {
    font-size: 50px;
  }

  .game-card {
    padding: 32px 20px 24px;
  }

  #qr-container img {
    width: 140px;
    height: 140px;
  }

  #lang-switcher {
    top: 8px;
    inset-inline-end: 16px;
  }

  .sfx-toggle {
    top: 62px;
    inset-inline-start: 16px;
  }

  .lobby-top {
    margin-top: 0;
  }

  .round-status-bar {
    margin-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════
      PLATFORM LAYER — announcement, live bar, chips,
   leaderboard, podium, XP/level-up, achievements, premium
   ═══════════════════════════════════════════════════ */

/* ── Announcement banner ── */
.announce-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 44px 10px 16px;
  background: linear-gradient(90deg, rgba(180, 77, 255, 0.25), rgba(0, 240, 255, 0.2));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  animation: announceIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes announceIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.announce-bar button {
  position: absolute;
  inset-inline-end: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}
.announce-bar.hidden { display: none; }

/* ── Player chips (level + streak) ── */
.player-chips {
  position: fixed;
  top: 62px; /* один ряд с кнопкой звука, под навбаром */
  inset-inline-start: 50px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-arcade);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(18, 15, 36, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  backdrop-filter: blur(8px);
}
.chip-streak {
  border-color: rgba(255, 140, 0, 0.5);
  color: #ffb347;
  animation: flamePulse 1.6s ease-in-out infinite;
}
@keyframes flamePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 140, 0, 0.25); }
  50% { box-shadow: 0 0 16px rgba(255, 140, 0, 0.55); }
}
.chip.hidden { display: none; }

/* ── Hero + live social proof ── */
.hero-title {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-gold), var(--neon-cyan));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroShift 7s linear infinite;
}
@keyframes heroShift { to { background-position: 300% 0; } }
.live-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(18, 15, 36, 0.7);
  border: 1px solid rgba(57, 255, 20, 0.25);
  font-size: 0.85rem;
  color: var(--muted);
}
.live-bar.hidden { display: none; }
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon-lime);
  box-shadow: var(--glow-lime);
  animation: liveBlink 2s ease-in-out infinite;
}
@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-sep { opacity: 0.4; }
.landing-actions {
  text-align: center;
  margin-top: 18px;
}

/* ── Виральность: «Пригласи друга» на каталоге + шер-карточка результата ── */
.btn-invite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;
  white-space: normal;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(219, 39, 119, 0.35));
  border: 1px solid rgba(255, 209, 102, 0.45);
  box-shadow: 0 6px 22px rgba(219, 39, 119, 0.22);
}
.btn-invite:hover {
  border-color: #ffd166;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(219, 39, 119, 0.5));
}
.invite-note {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}
.btn-share-card {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18), rgba(219, 39, 119, 0.22));
  border: 1px solid rgba(255, 209, 102, 0.5);
  white-space: normal;
}
.btn-share-card:hover {
  border-color: #ffd166;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.3);
}

/* ── Leaderboard ── */
.lb-box { max-width: 420px; width: 92vw; }
.lb-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.lb-tabs .btn { opacity: 0.55; }
.lb-tabs .btn.active {
  opacity: 1;
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
}
.lb-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.lb-row.lb-top { background: rgba(255, 215, 0, 0.07); border: 1px solid rgba(255, 215, 0, 0.18); }
.lb-rank { width: 2em; text-align: center; font-size: 1.05rem; }
.lb-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stats { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.lb-empty, .lb-loading { text-align: center; color: var(--muted); padding: 22px 0; list-style: none; }
.btn-full { width: 100%; }

/* ── Podium ── */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 10px;
}
.podium.hidden { display: none; }
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: podiumRise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
}
.podium-1 { animation-delay: 0.35s; }
.podium-2 { animation-delay: 0.15s; }
.podium-3 { animation-delay: 0.55s; }
@keyframes podiumRise { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.podium-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.podium-1 .podium-avatar {
  width: 62px; height: 62px;
  border-color: var(--neon-gold);
  box-shadow: var(--glow-gold);
}
.podium-name {
  font-size: 0.8rem;
  font-weight: 700;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* многоточие ест только ник — 👑 владельца Founder Pack режется последним */
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.podium-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.podium-name .founder-crown { flex: 0 0 auto; }
.podium-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 74px;
  border-radius: 10px 10px 0 0;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.25), rgba(0, 240, 255, 0.05));
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-bottom: none;
}
.podium-1 .podium-bar { height: 92px; background: linear-gradient(180deg, rgba(255, 215, 0, 0.35), rgba(255, 215, 0, 0.06)); border-color: rgba(255, 215, 0, 0.4); }
.podium-2 .podium-bar { height: 64px; }
.podium-3 .podium-bar { height: 46px; background: linear-gradient(180deg, rgba(255, 45, 120, 0.25), rgba(255, 45, 120, 0.05)); border-color: rgba(255, 45, 120, 0.3); }
.podium-medal { font-size: 1.25rem; }
.podium-score { font-family: var(--font-arcade); font-weight: 800; }
.podium-me .podium-name { color: var(--neon-cyan); }

/* ── Level-up overlay ── */
.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 15, 0.82);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}
.levelup-overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.levelup-box { text-align: center; }
.levelup-num {
  font-family: var(--font-arcade);
  font-size: 6rem;
  font-weight: 900;
  color: var(--neon-gold);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 80px rgba(255, 215, 0, 0.35);
  animation: levelPop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
@keyframes levelPop { from { transform: scale(0.2) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.levelup-title {
  font-family: var(--font-arcade);
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}
.levelup-sub { color: var(--muted); margin-top: 8px; }

/* прогресс-бар XP в оверлее level-up */
.xp-progress {
  width: min(280px, 70vw);
  height: 12px;
  margin: 18px auto 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.xp-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-violet, #8b5cf6), var(--neon-pink, #ec4899));
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.5);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.xp-progress-label { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.02em; }

/* ── «Мем вечера» на экране результата ── */
.meme-night {
  margin: 14px auto 18px;
  max-width: 460px;
  padding: 14px 16px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(160deg, rgba(163, 230, 53, 0.14), rgba(139, 92, 246, 0.16));
  border: 1px solid rgba(196, 181, 253, 0.24);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.meme-night.hidden { display: none; }
.meme-night-label {
  font-family: var(--font-display, 'Unbounded');
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-lime, #a3e635);
  margin-bottom: 8px;
}
.meme-night-card {
  font-family: var(--font-hand, 'Gochi Hand');
  font-size: 1.4rem;
  line-height: 1.25;
  color: #fff;
}
.meme-night-meta { margin-top: 8px; color: var(--muted); font-size: 0.85rem; }

/* ── Achievement toasts ── */
.ach-stream {
  position: fixed;
  top: 60px; inset-inline-end: 12px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.ach-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(26, 22, 64, 0.95), rgba(18, 15, 36, 0.95));
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: var(--glow-gold);
  animation: achIn 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}
@keyframes achIn { from { transform: translateX(120%); } to { transform: translateX(0); } }
.ach-toast.out { transition: all 0.5s ease; transform: translateX(130%); opacity: 0; }
.ach-icon { font-size: 1.7rem; }
.ach-body { display: flex; flex-direction: column; }
.ach-body b {
  font-family: var(--font-arcade);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--neon-gold);
  text-transform: uppercase;
}
.ach-body i { font-style: normal; font-weight: 600; font-size: 0.9rem; }

/* ── Premium upsell ── */
.premium-box { max-width: 360px; text-align: center; }
.premium-star {
  font-size: 3.2rem;
  animation: starFloat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.6));
}
@keyframes starFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.premium-box .btn-primary { margin-top: 10px; text-decoration: none; display: inline-block; }

/* ── 🛒 Магазин премиума ────────────────────────────────────────────────── */
.shop-box {
  max-width: 420px; width: 100%; text-align: center;
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.shop-box .premium-star { font-size: 2.4rem; }
.shop-head h3 { margin: 2px 0 4px; }
.shop-forever {
  display: inline-block; margin: 0 0 6px;
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 240, 255, 0.12); border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00f0ff;
}
.shop-sub { font-size: 0.82rem; margin: 0 0 10px; }
.shop-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 12px; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 45, 120, 0.22), rgba(251, 191, 36, 0.2));
  border: 1px solid rgba(255, 45, 120, 0.45);
  animation: shopPulse 2.2s ease-in-out infinite;
}
@keyframes shopPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 45, 120, 0); } 50% { box-shadow: 0 0 16px rgba(255, 45, 120, 0.45); } }
.shop-offer-txt { font-size: 0.78rem; font-weight: 700; text-align: start; }
.shop-offer-timer { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: #fbbf24; white-space: nowrap; }
.shop-soon {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--muted);
}
.shop-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.shop-empty { color: var(--muted); font-size: 0.82rem; padding: 12px; }
.shop-card {
  display: flex; align-items: center; gap: 10px; text-align: start;
  padding: 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s, transform 0.15s;
}
.shop-card:active { transform: scale(0.99); }
.shop-card-icon { font-size: 1.7rem; flex: 0 0 auto; line-height: 1; }
.shop-card-main { flex: 1 1 auto; min-width: 0; }
.shop-card-name { font-size: 0.85rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.shop-card-desc { font-size: 0.72rem; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.shop-card-buy { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.shop-price { font-size: 0.82rem; white-space: nowrap; }
.shop-price s { color: var(--muted); font-size: 0.72rem; margin-inline-end: 2px; }
.shop-price-off b { color: #fbbf24; }
.shop-card .btn-small { padding: 5px 12px; font-size: 0.74rem; }
.shop-have { font-size: 0.74rem; color: #a3e635; font-weight: 700; white-space: nowrap; }
.shop-best {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(139, 92, 246, 0.14));
}
.shop-tag {
  font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; font-weight: 800;
  background: #fbbf24; color: #1a1030; white-space: nowrap;
}
.shop-owned { opacity: 0.72; border-color: rgba(163, 230, 53, 0.4); }
.shop-legal { font-size: 0.68rem; margin: 0 0 8px; }
.shop-legal a { color: var(--muted); text-decoration: underline; }

/* ── подписочная витрина (3.25) ─────────────────────────────────────────── */
.shop-unit { font-size: 0.66rem; color: var(--muted); margin-inline-start: 1px; }
.shop-permonth { font-size: 0.64rem; color: #fbbf24; white-space: nowrap; }
.shop-card-note { font-size: 0.64rem; color: var(--muted); margin-top: 3px; }
.shop-card-forever { color: #a3e635; }
.shop-tag-save { background: #ff2d78; color: #fff; }
/* «Подписка активна до …» + вход в Billing Portal */
.shop-substatus {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(163, 230, 53, 0.1); border: 1px solid rgba(163, 230, 53, 0.35);
}
.shop-substatus-txt { font-size: 0.74rem; font-weight: 700; text-align: start; color: #a3e635; }
.shop-manage { font-size: 0.7rem; padding: 5px 10px; white-space: nowrap; }
.shop-substatus.hidden, .shop-manage.hidden { display: none; }
/* мягкий экран «подписка требует аккаунт» */
.sub-login-box { max-width: 360px; text-align: center; }
.sub-login-box .premium-star { font-size: 2.4rem; }
.sub-login-box .btn { margin-top: 8px; }
.sub-login-hint { font-size: 0.7rem; margin: 10px 0 0; }

/* значок владельца Founder Pack — в лобби и лидерборде */
.founder-crown { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.85)); font-size: 0.86em; }

/* поп-ап «спасибо за покупку» */
.thanks-box { max-width: 340px; text-align: center; }
.thanks-icon { font-size: 3.4rem; animation: starFloat 2.4s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.7)); }
.thanks-badge {
  display: inline-block; margin: 8px 0 4px; padding: 6px 16px; border-radius: 999px;
  font-weight: 800; font-size: 0.85rem; color: #1a1030;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.55);
}

@media (max-width: 400px) {
  .shop-card { gap: 8px; padding: 9px 8px; }
  .shop-card-icon { font-size: 1.45rem; }
  .shop-card-name { font-size: 0.8rem; }
  .shop-card-desc { font-size: 0.68rem; }
}

/* пост-покупочный шеринг в поп-апе «спасибо» */
.thanks-share-note { font-size: 0.72rem; margin: 10px 0 8px; line-height: 1.35; }

/* ══ M3: витрина магазина — вход из навигации ══ */
/* Пункт «Магазин» в навбаре и бургер-меню. Точка-бейдж горит,
   пока жив оффер −30% (Shop.offerLive()). */
.nav-shop-link { position: relative; display: inline-flex; align-items: center; }
.nav-drawer-link.nav-shop-link { display: flex; }
.nav-shop-dot {
  width: 7px; height: 7px; margin-inline-start: 6px;
  border-radius: 50%; flex: 0 0 auto;
  background: var(--neon-magenta);
  box-shadow: 0 0 7px var(--neon-magenta);
  animation: wheelDotPulse 1.4s ease-in-out infinite;
}
.nav-shop-dot.hidden { display: none; }

/* Компактный 🛒-FAB. Показываем только вне игрового поля — в матче
   плавающие кнопки наезжают на карты/доску. */
.shop-fab {
  position: fixed;
  inset-inline-end: 12px; bottom: 84px;
  z-index: 949;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(251, 191, 36, 0.55);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), transparent 58%),
    linear-gradient(160deg, #2a1f5e, #140f2e);
  font-size: 1.32rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.32), var(--shadow);
  transition: transform 0.2s;
}
body[data-screen="games"] .shop-fab,
body[data-screen="home"] .shop-fab,
body[data-screen="result"] .shop-fab { display: flex; }
.shop-fab:active { transform: scale(0.93); }
/* поверх открытой модалки FAB не нужен (у .modal z-index ниже, чем у фабов).
   В браузерах без :has() правило просто отбрасывается — поведение как было. */
body:has(.modal:not(.hidden)) .shop-fab { display: none; }
/* колесо видно — уступаем ему нижнюю позицию (соседний селектор: #shop-fab
   стоит в разметке сразу за #wheel-fab) */
#wheel-fab:not(.hidden) + .shop-fab { bottom: 150px; }
.shop-fab-dot {
  position: absolute;
  top: 1px; inset-inline-end: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 8px var(--neon-magenta);
  animation: wheelDotPulse 1.4s ease-in-out infinite;
}
.shop-fab-dot.hidden { display: none; }

/* Неигровая карточка-баннер «⭐ Премиум» в каталоге игр.
   Занимает всю ширину строки грида — сетка карточек не разъезжается. */
.promo-card {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  cursor: pointer;
  padding: 16px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(251, 191, 36, 0.34);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(251, 191, 36, 0.20), transparent 62%),
    linear-gradient(155deg, #241a52, #120d28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s;
}
.promo-card:hover { transform: translateY(-3px); border-color: rgba(251, 191, 36, 0.6); }
.promo-card:active { transform: translateY(-1px) scale(0.99); }
.promo-card-icon { font-size: 34px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6)); }
.promo-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.promo-card-name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text); text-transform: uppercase;
}
.promo-card-desc { font-size: 12px; color: var(--muted); line-height: 1.35; }
.promo-card-price {
  flex: 0 0 auto;
  font-weight: 800; font-size: 0.82rem;
  padding: 6px 12px; border-radius: 999px;
  color: #1a1030;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
  white-space: nowrap;
}
@media (max-width: 400px) {
  .promo-card { gap: 9px; padding: 13px 11px; }
  .promo-card-icon { font-size: 27px; }
  .promo-card-name { font-size: 12px; letter-spacing: 0; }
  .promo-card-desc { font-size: 11px; }
  .promo-card-price { font-size: 0.74rem; padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-shop-dot, .shop-fab-dot { animation: none !important; }
}

/* ── Game cards: extra wow on hover ── */
.game-card {
  position: relative;
  overflow: hidden;
}
.game-card::before {
  content: '';
  position: absolute;
  top: -60%; left: -70%;
  width: 55%; height: 220%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.game-card:hover::before { left: 130%; }
.game-card:hover { transform: translateY(-6px) scale(1.02); }

@media (max-width: 480px) {
  .player-chips { top: 62px; inset-inline-start: 44px; } /* right of the sound toggle */
  .podium-bar { width: 58px; }
  .podium-1 .podium-bar { height: 74px; }
  .podium-2 .podium-bar { height: 52px; }
  .podium-3 .podium-bar { height: 38px; }
}

/* ═══════════════════════════════════════════════════
   WAVE 3 — solo, daily wheel, profile, quick chat, juice
   ═══════════════════════════════════════════════════ */

/* ── Quick chat ── */
.emoji-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.12); margin: 0 4px; }
.qc-btn {
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(18, 15, 36, 0.9);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.qc-btn:active { transform: scale(0.92); }
.qc-btn:hover { box-shadow: var(--glow-cyan); }
.chat-stream {
  position: fixed;
  inset-inline-start: 12px; bottom: 84px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 78vw;
}
.chat-bubble {
  align-self: flex-start;
  background: rgba(26, 22, 64, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 14px;
  font-size: 0.9rem;
  box-shadow: var(--glow-cyan);
  animation: bubbleIn 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}
.chat-bubble b { color: var(--neon-cyan); margin-inline-end: 6px; }
@keyframes bubbleIn { from { transform: translateX(-60%) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-bubble.out { transition: all 0.5s ease; opacity: 0; transform: translateY(-16px); }

/* ── Daily wheel 2.0 — вегас-механика ── */
.wheel-fab {
  position: fixed;
  inset-inline-end: 12px; bottom: 84px;
  z-index: 950;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(251, 191, 36, 0.75);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28), transparent 58%),
    linear-gradient(160deg, #2a1f5e, #140f2e);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.55), 0 0 34px rgba(236, 72, 153, 0.28), var(--shadow);
  animation: wheelWiggle 3.2s ease-in-out infinite;
}
@keyframes wheelWiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-14deg); } 96% { transform: rotate(12deg); } }
.wheel-fab.hidden { display: none; }
.wheel-fab-dot {
  position: absolute;
  top: 2px; inset-inline-end: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 8px var(--neon-magenta);
  animation: wheelDotPulse 1.4s ease-in-out infinite;
}
@keyframes wheelDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: 0.55; } }

.wheel-box { max-width: 344px; text-align: center; padding: 20px 16px 16px; }
.wheel-box h3 { margin-bottom: 4px; }
.wheel-sub { margin: 0 0 6px; font-size: 12px; color: var(--muted); }

.wheel-wrap {
  position: relative;
  width: 268px; height: 268px;
  margin: 6px auto 14px;
  max-width: 100%;
  transition: opacity 0.35s ease;
}
.wheel-wrap.wheel-fade { opacity: 0.25; }

/* Дышащее сияние под колесом */
.wheel-halo {
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.3), rgba(124, 58, 237, 0.16) 55%, transparent 72%);
  filter: blur(8px);
  animation: wheelHalo 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wheelHalo { 0%, 100% { opacity: 0.55; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.03); } }

/* Металлический обод с лампочками */
.wheel-rim {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(#fde68a, #b45309, #fff3c4, #92400e, #fbbf24, #7c4a0a, #fde68a);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.6), var(--shadow-lg);
}
.wheel-lamp {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 6px rgba(255, 247, 214, 0.9);
  opacity: 0.55;
}
.wheel-wrap.spinning .wheel-lamp { animation: lampBlink 0.42s steps(1, end) infinite alternate; }
@keyframes lampBlink {
  from { opacity: 0.25; box-shadow: 0 0 3px rgba(255, 247, 214, 0.5); }
  to   { opacity: 1; box-shadow: 0 0 12px #fff7d6, 0 0 22px rgba(251, 191, 36, 0.8); }
}

/* Само колесо */
.wheel {
  position: absolute; inset: 15px;
  border-radius: 50%;
  border: 3px solid rgba(10, 8, 20, 0.85);
  overflow: hidden;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.65);
  will-change: transform;
}
.wheel-face { position: absolute; inset: 0; border-radius: 50%; }
/* Глянцевый блик поверх секторов */
.wheel-gloss {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06) 34%, transparent 56%),
    radial-gradient(circle at 68% 88%, rgba(0, 0, 0, 0.34), transparent 52%);
}
.wheel-labels { position: absolute; inset: 0; }
.ws {
  position: absolute;
  left: 50%; top: 0;
  width: 62px; margin-left: -31px;
  height: 50%;
  transform-origin: 50% 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding-top: 12px;
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}
.ws-icon { font-size: 15px; line-height: 1; }
.ws-val {
  font-family: var(--font-arcade);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}
.ws-jackpot .ws-val { color: #fff8dc; text-shadow: 0 0 8px #fbbf24, 0 0 16px rgba(251, 191, 36, 0.8); }
.ws-jackpot .ws-icon { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9)); }
/* подсветку выигравшей метки делаем только фильтром — transform занят поворотом */
.ws.ws-hit { animation: wsHit 0.55s ease-in-out 4; }
@keyframes wsHit { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9) drop-shadow(0 0 8px #fff); } }
.ws.ws-hit .ws-val { color: #fff; text-shadow: 0 0 10px #fff, 0 0 22px var(--neon-gold); }
.ws.ws-hit .ws-icon { animation: wsIconPop 0.55s ease-in-out 4; }
@keyframes wsIconPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }

/* Подсветка выигравшего сектора */
.wheel-hit {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from -22.5deg, rgba(255, 255, 255, 0.42) 0deg 45deg, transparent 45deg);
  animation: hitFlash 0.5s ease-in-out 5;
}
@keyframes hitFlash { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.6; } }

/* Центральная втулка */
.wheel-hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.35), transparent 58%),
    linear-gradient(160deg, #3b2a7a, #17102f);
  border: 3px solid rgba(251, 191, 36, 0.85);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6), inset 0 0 12px rgba(0, 0, 0, 0.7);
  z-index: 3;
}
.wheel-hub-icon { font-size: 26px; line-height: 1; }

/* Объёмный указатель со свечением */
.wheel-pointer {
  position: absolute;
  top: -12px; left: 50%;
  margin-left: -15px;
  width: 30px; height: 44px;
  z-index: 4;
  transform-origin: 50% 12%;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.95));
}
.wheel-pointer::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff3c4, #b45309);
  border: 2px solid rgba(10, 8, 20, 0.6);
}
.wheel-pointer-tip {
  position: absolute;
  left: 50%; top: 12px;
  margin-left: -11px;
  width: 22px; height: 30px;
  background: linear-gradient(180deg, #fde68a, #f59e0b 55%, #b45309);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.wheel-pointer.knock { animation: pointerKnock 0.11s ease-out; }
@keyframes pointerKnock { 0% { transform: rotate(0); } 45% { transform: rotate(13deg); } 100% { transform: rotate(0); } }

/* Поп-ап выигрыша */
.wheel-pop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  min-width: 150px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: rgba(10, 8, 22, 0.92);
  border: 2px solid var(--neon-gold);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.55), var(--shadow-lg);
  animation: popIn 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.wheel-pop.jackpot {
  border-color: #fff3c4;
  background: linear-gradient(160deg, rgba(120, 70, 6, 0.95), rgba(10, 8, 22, 0.95));
  box-shadow: 0 0 34px rgba(251, 191, 36, 0.9), var(--shadow-lg);
  animation: popIn 0.45s cubic-bezier(0.2, 1.5, 0.4, 1), jackpotThrob 0.7s ease-in-out 0.45s infinite;
}
@keyframes popIn { from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes jackpotThrob {
  0%, 100% { box-shadow: 0 0 24px rgba(251, 191, 36, 0.7), var(--shadow-lg); }
  50% { box-shadow: 0 0 46px rgba(251, 191, 36, 1), var(--shadow-lg); }
}
.wheel-pop-val {
  display: block;
  font-family: var(--font-arcade);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  color: var(--neon-gold);
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.8);
}
.wheel-pop-val::after { content: ' ⭐'; font-size: 22px; }
.wheel-pop-note { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Прогресс серии дней */
.wheel-streak { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; flex-wrap: wrap; }
.wsd {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
}
.wsd.wsd-done {
  color: #0a0812;
  background: linear-gradient(160deg, #fde68a, #f59e0b);
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.wsd.wsd-next {
  color: var(--neon-magenta);
  border-color: var(--neon-magenta);
  animation: wsdPulse 1.3s ease-in-out infinite;
}
@keyframes wsdPulse { 0%, 100% { box-shadow: 0 0 0 rgba(236, 72, 153, 0); } 50% { box-shadow: 0 0 12px rgba(236, 72, 153, 0.8); } }
.wheel-streak-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; min-height: 16px; }

.wheel-spin-btn { font-size: 17px; letter-spacing: 0.4px; }
.wheel-timer {
  font-size: 13px;
  color: var(--neon-cyan);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .wheel-fab, .wheel-halo, .wheel-lamp, .wsd.wsd-next, .wheel-hit, .ws.ws-hit, .ws.ws-hit .ws-icon,
  .wheel-pop, .wheel-pop.jackpot, .wheel-fab-dot { animation: none !important; }
  .wheel { transition: none !important; }
}

/* ── Profile ── */
.profile-box { max-width: 380px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.profile-ring {
  width: 74px; height: 74px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-arcade);
  font-size: 1.7rem; font-weight: 900;
  color: var(--neon-cyan);
  border: 3px solid var(--neon-cyan);
  box-shadow: var(--glow-cyan), inset 0 0 18px rgba(0, 240, 255, 0.15);
}
.profile-title { font-size: 1.15rem; font-weight: 800; color: var(--neon-gold); }
.profile-xp { font-size: 0.82rem; }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 10px 0 16px;
}
.ach-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.25);
}
.ach-cell-icon { font-size: 1.5rem; }
.ach-cell-name { font-size: 0.66rem; text-align: center; font-weight: 600; }
.ach-locked { opacity: 0.4; border-color: rgba(255, 255, 255, 0.08); filter: grayscale(1); }

/* ── Round pop ── */
.round-pop {
  position: fixed;
  top: 26%; left: 50%;
  z-index: 1800;
  transform: translateX(-50%);
  font-family: var(--font-arcade);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--neon-gold);
  text-shadow: var(--glow-gold);
  pointer-events: none;
  animation: roundPop 2.2s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
@keyframes roundPop {
  0% { transform: translateX(-50%) scale(0.3); opacity: 0; }
  14% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  22% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px) scale(0.9); opacity: 0; }
}

/* ── Floating emoji backdrop ── */
.float-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.float-bg.hidden { display: none; }
.float-emoji {
  position: absolute;
  bottom: -60px;
  font-size: 1.6rem;
  opacity: 0.13;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-115vh) rotate(10deg); }
}
@media (max-width: 480px) { .float-emoji { font-size: 1.2rem; } }

/* ── AI roast bubble ── */
.roast-bubble {
  position: fixed;
  bottom: 148px; left: 50%;
  transform: translateX(-50%);
  z-index: 1350;
  max-width: min(560px, 88vw);
  background: linear-gradient(135deg, rgba(58, 45, 21, 0.97), rgba(26, 22, 64, 0.97));
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 0.95rem;
  box-shadow: var(--glow-gold);
  animation: bubbleIn 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}
.roast-bubble b { color: var(--neon-gold); }
/* страховка от «простыни»: максимум 3 строки, лишнее обрезается */
.roast-bubble {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; max-height: 4.5em;
}
.roast-bubble.out { transition: all 0.6s ease; opacity: 0; transform: translateX(-50%) translateY(20px); }

/* ── Winners ticker on landing ── */
.winners-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1.4em;
}
.winners-ticker b { color: var(--neon-gold); }
.winners-ticker .wt-item { animation: fadeIn 0.6s ease; }

/* ── Profile stats row ── */
.profile-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.pstat {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.pstat b { font-family: var(--font-arcade); font-size: 1.05rem; color: var(--neon-cyan); }
.pstat span { font-size: 0.64rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════
   WAVE 4 — Ассоциации, Морской бой, профили, реклама
   ═══════════════════════════════════════════════════ */

/* ── Ассоциации ── */
.as-top { display: flex; gap: 8px; justify-content: center; padding-top: 10px; }
.as-clue {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 12px auto;
  max-width: 640px;
  color: var(--neon-gold);
  text-shadow: var(--glow-gold);
}
.as-clue.hidden { display: none; }
.as-status { text-align: center; color: var(--muted); margin: 8px 0 14px; min-height: 1.3em; }
.as-clue-form { display: flex; gap: 8px; justify-content: center; margin: 12px auto; max-width: 520px; }
.as-clue-form.hidden { display: none; }
.as-clue-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(18, 15, 36, 0.9);
  color: var(--text);
  font-size: 1rem;
}
.as-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 10px;
}
.as-card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--panel);
}
/* карты-ассоциации портретные 3:4, как в Имаджинариуме */
.as-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.as-card:hover { transform: translateY(-4px); border-color: rgba(0, 240, 255, 0.5); }
.as-card.selected { border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); transform: scale(1.03); }
.as-card.readonly { cursor: default; }
.as-card.readonly:hover { transform: none; border-color: rgba(255, 255, 255, 0.1); }
.as-card.as-teller-card { border-color: var(--neon-gold); box-shadow: var(--glow-gold); }
.as-card-meta { padding: 6px 8px; font-size: 0.72rem; display: flex; flex-direction: column; gap: 2px; }
.as-votes { color: var(--neon-cyan); }
.as-card-text { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 8px; text-align: center; font-size: 0.8rem; }
.as-scores { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 16px 0 80px; }

/* ── Морской бой ── */
.bs-top { display: flex; gap: 8px; justify-content: center; padding-top: 10px; }
.bs-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin: 14px auto;
}
.bs-board-wrap h4 { text-align: center; margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.bs-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: min(88vw, 340px);
  aspect-ratio: 1;
  background: rgba(0, 240, 255, 0.06);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(0, 240, 255, 0.2);
}
.bs-cell {
  position: relative;
  border-radius: 3px;
  background: rgba(190, 235, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  user-select: none;
}
.bs-enemy .bs-cell.fireable { cursor: crosshair; }
.bs-enemy .bs-cell.fireable:hover { background: rgba(0, 240, 255, 0.28); box-shadow: 0 0 8px rgba(0, 240, 255, 0.35), inset 0 0 0 1px rgba(0, 240, 255, 0.5); }
.bs-cell.miss { color: rgba(190, 230, 255, 0.75); }
.bs-cell.miss::after {
  content: ''; position: absolute; inset: 32%;
  border-radius: 50%;
  border: 1.5px solid rgba(160, 220, 255, 0.35);
  animation: bsRippleIdle 3.2s ease-in-out infinite;
}
@keyframes bsRippleIdle { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.9; } }

/* силуэт корабля: стальная палуба, нос/корма скруглены по классам формы */
.bs-cell.ship {
  background: linear-gradient(180deg, #2a5a72 0%, #163f54 55%, #0d3143 100%);
  box-shadow: inset 0 1px 0 rgba(170, 235, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.45), 0 0 6px rgba(0, 240, 255, 0.18);
}
.bs-cell.sh-single { border-radius: 999px; }
.bs-cell.sh-h.sh-a { border-radius: 999px 3px 3px 999px; }
.bs-cell.sh-h.sh-b { border-radius: 3px 999px 999px 3px; }
.bs-cell.sh-v.sh-a { border-radius: 999px 999px 3px 3px; }
.bs-cell.sh-v.sh-b { border-radius: 3px 3px 999px 999px; }
.bs-cell.ship.sh-m::after {
  content: ''; position: absolute; inset: 36%;
  border-radius: 50%;
  background: rgba(190, 240, 255, 0.5);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.55);
}

/* попадание: пожар на палубе */
.bs-cell.hit { background: linear-gradient(180deg, #6e1f37, #471226); color: #fff; }
.bs-cell.hit::after {
  content: ''; position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 68%, rgba(255, 225, 130, 0.95), rgba(255, 110, 45, 0.55) 45%, transparent 72%);
  animation: bsFlame 0.8s ease-in-out infinite alternate;
}
@keyframes bsFlame { from { transform: scale(0.8) translateY(4%); opacity: 0.65; } to { transform: scale(1.18) translateY(-6%); opacity: 1; } }
.bs-cell.sunk { background: linear-gradient(180deg, #3a1522, #1e0a13); color: rgba(255, 190, 210, 0.9); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); }
.bs-cell.sunk::before {
  content: ''; position: absolute; inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 125, 140, 0.4), transparent 70%);
  animation: bsSmoke 2.4s ease-in-out infinite;
}
@keyframes bsSmoke { 0%, 100% { transform: scale(0.9) translateY(6%); opacity: 0.4; } 50% { transform: scale(1.25) translateY(-14%); opacity: 0.75; } }
.bs-cell.ship.hit { background: linear-gradient(180deg, #7c2440, #4c1428); }
.bs-log { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 0.8rem; margin-bottom: 80px; }

/* ── Player level badge in lobby ── */
.plv {
  font-family: var(--font-arcade);
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--neon-cyan);
  vertical-align: middle;
}

/* ── Ad slots ── */
.ad-slot {
  position: relative;
  margin: 18px auto;
  max-width: 640px;
  min-height: 70px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-slot.hidden { display: none; }
.ad-label {
  position: absolute;
  top: 4px; inset-inline-end: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}
.ad-inner { width: 100%; text-align: center; }

/* ═══ Крестики-нолики — доска-планшет с вырезанными ячейками ═══ */
/* Статус — своей строкой постоянной высоты, служебные пилюли ниже: длинный
   ник соперника переносится внутри пилюли, а не сдвигает доску (см. .ttt-status). */
.ttt-top { display: flex; gap: 8px; justify-content: center; padding-top: 10px; flex-wrap: nowrap; }
.ttt-sub { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 30px; margin-top: 6px; }
.ttt-sub .pill:empty { visibility: hidden; }
.ttt-sub #ttt-timer { min-width: 56px; text-align: center; }
.ttt-score { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 12px 0; }
.ttt-vs { color: var(--muted); font-size: 0.8rem; }

/* Планшет доски: тёмный лак с фаской и мягкой подсветкой изнутри */
.ttt-board {
  width: min(88vw, 340px); margin: 12px auto 80px; padding: 10px;
  border-radius: 22px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
    linear-gradient(165deg, #241f3d, #17142a 55%, #100e1e);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -6px 18px rgba(0, 0, 0, 0.55),
    0 14px 34px rgba(0, 0, 0, 0.55);
}
.ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
/* Ячейка — «вырезана» в планшете: тёмное дно + внутренняя тень сверху */
.ttt-cell {
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(6, 5, 14, 0.85), rgba(24, 20, 44, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; align-items: center; justify-content: center;
  user-select: none; position: relative; overflow: hidden;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.ttt-cell.playable { cursor: pointer; }
.ttt-cell.playable::after { /* призрак-подсказка «сюда можно» */
  content: ''; position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.5), transparent 70%);
  opacity: 0; transition: opacity 0.18s ease;
}
.ttt-cell.playable:hover { border-color: rgba(0, 240, 255, 0.45); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 240, 255, 0.35); }
.ttt-cell.playable:hover::after { opacity: 1; }
.ttt-cell.playable:active { transform: scale(0.94); }

/* ── Знаки: X — розовый крест с фаской, O — бирюзовое кольцо ── */
.ttt-mark { position: relative; width: 58%; aspect-ratio: 1; display: block; }
.ttt-mark-x::before, .ttt-mark-x::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 104%;
  border-radius: 6px; margin: -52% 0 0 -11%;
  background: linear-gradient(100deg, #ff8fc4, #ff2d78 45%, #c2185b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 3px rgba(120, 10, 50, 0.6),
    0 3px 7px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 45, 120, 0.45);
}
.ttt-mark-x::before { transform: rotate(45deg); }
.ttt-mark-x::after { transform: rotate(-45deg); }
.ttt-mark-o {
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
    conic-gradient(from 210deg, #22d3ee, #67e8f9 30%, #0891b2 62%, #22d3ee);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.55), 0 0 16px rgba(34, 211, 238, 0.45);
}
.ttt-mark-o::after { /* «дырка» кольца — цветом дна ячейки */
  content: ''; position: absolute; inset: 26%; border-radius: 50%;
  background: linear-gradient(160deg, #0a0813, #171430);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}
/* появление знака: короткий «штамп» */
@keyframes tttPop { from { transform: scale(0.2) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.14) rotate(2deg); } to { transform: scale(1); opacity: 1; } }
.ttt-mark.ttt-pop { animation: tttPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3); }

/* Победная линия — золотое свечение ячейки */
.ttt-cell.win {
  border-color: var(--neon-gold, #fbbf24);
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.20), rgba(251, 191, 36, 0.06));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5), 0 0 18px rgba(251, 191, 36, 0.55);
  animation: tttWin 1.1s ease-in-out infinite;
}
@keyframes tttWin { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5), 0 0 12px rgba(251, 191, 36, 0.4); } 50% { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.8), 0 0 26px rgba(251, 191, 36, 0.8); } }
/* в победной клетке «дырка» кольца тонирована под золотой фон */
.ttt-cell.win .ttt-mark-o::after { background: linear-gradient(160deg, #2b2109, #3d2f10); }
@media (prefers-reduced-motion: reduce) {
  .ttt-mark.ttt-pop, .ttt-cell.win { animation: none; }
}

/* ═══ Шашки — деревянная доска и точёные шашки (уровень нард/шахмат) ═══ */
.ck-top { display: flex; gap: 8px; justify-content: center; padding-top: 10px; flex-wrap: nowrap; }
.ck-players { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
/* Рама доски: тёмный орех с фаской и глубокой тенью */
.ck-board {
  display: grid;
  /* ОБЕ оси фиксированы 1fr: ряды без шашек не сжимаются, доска всегда
     из одинаковых квадратов (тот же фикс, что в шахматах) */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(92vw, 420px);
  aspect-ratio: 1;
  margin: 8px auto 80px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(40, 20, 5, 0.35);
}
/* Светлое поле — клён с продольной текстурой, тёмное — морёный орех */
.ck-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; overflow: hidden;
  background:
    repeating-linear-gradient(84deg, rgba(150, 110, 60, 0.05) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #f0dfba, #ddc79c);
}
.ck-cell.dark {
  background:
    repeating-linear-gradient(84deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #7d5130, #5b381d);
}
.ck-cell.movable { cursor: pointer; }
.ck-cell.movable::before { /* мягкая лаймовая подсветка «этой шашкой можно» */
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px rgba(163, 230, 53, 0.55), inset 0 0 14px rgba(163, 230, 53, 0.28);
  pointer-events: none;
}
.ck-cell.sel::before {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 3px var(--neon-cyan, #22d3ee), inset 0 0 16px rgba(34, 211, 238, 0.45);
  pointer-events: none;
}
.ck-cell.target { cursor: pointer; }
.ck-cell.target::after {
  content: '';
  width: 30%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.95), rgba(74, 222, 128, 0.5));
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.75);
}
/* Шашка — точёный диск: фаска по краю, кольцевая проточка, блик сверху-слева */
.ck-piece {
  width: 76%;
  aspect-ratio: 1;      /* всегда круг: знак дамки не распирает фигуру */
  height: auto;
  min-height: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.ck-piece::after { /* проточка-кольцо, как на настоящей точёной шашке */
  content: ''; position: absolute; inset: 17%; border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.ck-w {
  background: radial-gradient(circle at 33% 27%, #ffffff, #f5f0e4 42%, #ddd4c2 72%, #b3a894);
  color: #8a6d00;
  box-shadow:
    0 3px 6px rgba(40, 20, 5, 0.55),
    inset 0 0 0 1px rgba(120, 105, 80, 0.35),
    inset 0 -4px 6px rgba(140, 125, 100, 0.45),
    inset 0 3px 4px rgba(255, 255, 255, 0.95);
}
.ck-b {
  background: radial-gradient(circle at 33% 27%, #8b8fa0, #3a3d47 40%, #16171d 74%, #050508);
  color: var(--neon-gold, #fbbf24);
  box-shadow:
    0 3px 6px rgba(20, 10, 2, 0.65),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 -4px 6px rgba(0, 0, 0, 0.6),
    inset 0 3px 4px rgba(255, 255, 255, 0.32);
}
/* Микроанимации: наведение приподнимает, выбранная шашка «вынута» из доски */
.ck-cell.movable:hover .ck-piece { transform: translateY(-2px) scale(1.05); }
.ck-cell.sel .ck-piece { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)); }
.ck-cell.movable:active .ck-piece { transform: scale(0.95); }

/* ═══ Турнир ═══ */
.tour-wrap { display: flex; flex-direction: column; gap: 14px; }
.tour-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tour-badge { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  background: linear-gradient(135deg, var(--neon-violet, #8b5cf6), var(--neon-pink, #ec4899));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tour-game { min-height: 20px; }
.tour-match-head { text-align: center; color: var(--muted); margin-bottom: 8px; font-size: 0.95rem; }
.tour-wait { text-align: center; color: var(--muted); padding: 24px 0; font-style: italic; }

/* сетка */
.tour-bracket { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; -webkit-overflow-scrolling: touch; }
.tour-col { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 150px; }
.tour-col-title { text-align: center; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tour-match { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.tour-match.active { border-color: var(--neon-cyan, #22d3ee); box-shadow: 0 0 0 1px var(--neon-cyan, #22d3ee), 0 0 14px rgba(34,211,238,0.25); }
.tour-match.done { opacity: 0.9; }
.tour-seat { padding: 4px 8px; border-radius: 7px; font-size: 0.85rem; background: rgba(0,0,0,0.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-seat.me { color: var(--neon-cyan, #22d3ee); font-weight: 700; }
.tour-seat.win { background: linear-gradient(135deg, rgba(163,230,53,0.25), rgba(34,211,238,0.18)); border: 1px solid rgba(163,230,53,0.5); }
.tour-seat.bye { opacity: 0.4; font-style: italic; }
.tour-seat.cur { outline: 1px dashed rgba(255,255,255,0.25); }

/* выбор игры турнира в лобби */
.tour-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tour-picker-label { color: var(--muted); font-size: 0.9rem; }
.tour-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-pick { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05); color: var(--fg, #fff); font-size: 0.88rem; cursor: pointer; transition: all 0.15s; }
.tour-pick:hover:not(:disabled) { border-color: var(--neon-violet, #8b5cf6); }
.tour-pick.active { background: linear-gradient(135deg, var(--neon-violet, #8b5cf6), var(--neon-pink, #ec4899)); border-color: transparent; font-weight: 700; }
.tour-pick:disabled { cursor: default; opacity: 0.85; }

/* финальная таблица */
.tour-final { text-align: center; padding: 12px 0; }
.tour-final-title { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.tour-champ { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin: 6px 0 16px;
  background: linear-gradient(135deg, var(--neon-gold, #fbbf24), var(--neon-pink, #ec4899));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tour-standings { list-style: none; padding: 0; margin: 0 auto; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.tour-standings li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.tour-standings li.me { border-color: var(--neon-cyan, #22d3ee); }
.tour-rank { width: 32px; text-align: center; font-weight: 700; }
.tour-pname { flex: 1; text-align: start; }
.tour-pts { font-weight: 700; color: var(--neon-lime, #a3e635); }
.tour-final-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
/* Дамка — золотая корона-звезда с гравировкой поверх диска */
.ck-king { font-weight: 900; }
.ck-piece.ck-king {
  font-size: clamp(0.8rem, 4vw, 1.15rem);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.ck-piece.ck-king::after { /* у дамки проточка двойная — заметно даже мельком */
  inset: 12%;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 2px rgba(251, 191, 36, 0.55);
}
.ck-w.ck-king { color: #a97900; }

/* ── Дурак ─────────────────────────────────────────────────────────────── */
/* Ряд статуса — строго одна строка постоянной высоты: раньше длинный статус
   («Всё отбито — ждём, подкинут ли ещё») переносил таймер на вторую строку и
   стол с рукой уезжали вниз на 24px (аудит ловил это как прыжок). */
.dk-top {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  padding: 10px 6px 0; flex-wrap: nowrap;
}
.dk-meta { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 6px; min-height: 28px; }
.dk-trump { font-size: 1rem; }
.dk-trump b { font-size: 1.2rem; }
.dk-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.dk-out { opacity: 0.45; }
.dk-table {
  display: flex; gap: 10px; justify-content: center; align-items: flex-start;
  /* высота ровно под ряд пар (118 + 2×12 паддинга): пустой стол и стол
     с картами одинаковы — вёрстка не прыгает между отбоями */
  flex-wrap: wrap; min-height: 142px; margin: 10px auto; padding: 12px;
  max-width: 640px; border-radius: 16px;
  /* Настоящее зелёное сукно: тканое переплетение + виньетка по краям */
  background:
    radial-gradient(115% 130% at 50% -10%, rgba(52, 168, 92, 0.42), rgba(6, 42, 22, 0.85) 78%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.028) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 4px, transparent 4px 8px);
  border: 1px solid rgba(150, 235, 175, 0.25);
  box-shadow:
    inset 0 2px 20px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.45);
}
.dk-empty { align-self: center; opacity: 0.6; font-size: 0.95rem; padding: 30px 10px; }
.dk-pair { position: relative; width: 74px; height: 118px; }
.dk-pair .dk-att { position: absolute; top: 0; left: 0; }
.dk-pair .dk-def { position: absolute; top: 24px; left: 16px; transform: rotate(8deg); }
.dk-pair.dk-open { cursor: pointer; }
/* Пустой слот защиты — прозрачная пунктирная рамка, а не серый «кирпич»
   (раньше это была карта с opacity .35 и читалась как артефакт вёрстки) */
.dk-pair.dk-open .dk-slot {
  position: absolute; top: 24px; left: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(0, 240, 255, 0.75); font-size: 1.3rem;
  border: 2px dashed rgba(0, 240, 255, 0.4);
  box-shadow: none; opacity: 1;
}
.dk-pair.dk-open:hover .dk-slot { border-color: rgba(0, 240, 255, 0.85); background: rgba(0, 240, 255, 0.10); }
/* Карта — глянцевый картон: тёплый блик сверху, тень по нижней кромке, индекс в углу */
.dk-card {
  width: 58px; height: 84px; border-radius: 7px; color: #16161c;
  background: linear-gradient(158deg, #fffdf6 0%, #f7f3e7 55%, #e8e1cd 100%);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 5px rgba(150, 135, 100, 0.28),
    0 3px 7px rgba(0, 0, 0, 0.5);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; user-select: none; position: relative; overflow: hidden;
}
.dk-card::before { /* косой блик по лицу карты */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.55) 0 22%, rgba(255, 255, 255, 0) 46%);
}
.dk-card .dk-rank { font-size: 1.35rem; line-height: 1.1; position: relative; }
.dk-card .dk-suit { font-size: 1.25rem; line-height: 1; position: relative; }
.dk-card.dk-red { color: #c0392b; }
.dk-card.dk-trumpcard {
  box-shadow:
    0 0 0 2px rgba(255, 200, 60, 0.8), 0 0 12px rgba(255, 200, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(150, 135, 100, 0.28),
    0 3px 7px rgba(0, 0, 0, 0.5);
}
.dk-hand {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 10px 6px calc(14px + env(safe-area-inset-bottom));
  /* всегда резервируем ряд карт — рука не схлопывается */
  min-height: calc(108px + env(safe-area-inset-bottom));
}
.dk-hand .dk-card { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.dk-hand .dk-card.dk-playable:hover { transform: translateY(-6px); }
.dk-hand .dk-card.dk-dim { opacity: 0.55; }
.dk-hand .dk-card.dk-sel { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--neon-cyan, #4dd7ff), 0 4px 10px rgba(0,0,0,0.5); }
/* место под кнопки «Беру/Бито» зарезервировано всегда — появление/исчезание
   кнопок не сдвигает стол и руку */
.dk-actions { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 4px 0; min-height: 52px; }
@media (max-width: 480px) {
  .dk-card { width: 48px; height: 72px; }
  .dk-card .dk-rank { font-size: 1.1rem; }
  /* пары компактнее + меньше зазор: все 6 пар боя помещаются в один ряд
     даже на 320px — стол не растёт скачком посреди боя (защита чуть
     нахлёстывает соседнюю пару — выглядит как веер, это ок) */
  .dk-pair { width: 48px; height: 94px; }
  .dk-pair .dk-def, .dk-pair.dk-open .dk-slot { top: 20px; left: 6px; }
  .dk-table { gap: 4px; padding: 10px 8px; min-height: 116px; }
  .dk-hand { min-height: calc(96px + env(safe-area-inset-bottom)); }
}

/* ── Шахматы ───────────────────────────────────────────────────────────── */
/* ═══ Шахматы — турнирная доска ═══ */
.cs-top { display: flex; gap: 8px; justify-content: center; align-items: center; padding-top: 10px; flex-wrap: wrap; }
.cs-title {
  font-family: var(--font-display, 'Unbounded'); font-weight: 800; font-size: 0.95rem;
  background: linear-gradient(135deg, #f4c877, #ec4899);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cs-san { color: var(--neon-cyan, #22d3ee); font-weight: 700; font-variant-ligatures: none; }
.cs-san:empty { display: none; }
.cs-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
/* съеденные фигуры + перевес в чипе игрока */
.cs-caps { font-size: 0.95rem; letter-spacing: -2px; line-height: 1; }
.cs-caps.caps-of-w { color: #f5efdd; text-shadow: 0 0 1px #000, 0 1px 1px rgba(0,0,0,0.8); }
.cs-caps.caps-of-b { color: #262033; text-shadow: 0 0 1px rgba(255,255,255,0.6); }
.cs-adv { font-size: 0.78rem; font-weight: 800; color: var(--neon-lime, #a3e635); }

/* контекстная подсказка — как в нардах */
.cs-hint {
  margin: 2px auto 6px; padding: 7px 16px; max-width: fit-content;
  border-radius: 999px; font-size: 0.92rem; font-weight: 700; text-align: center;
  background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.45);
  color: var(--neon-cyan, #22d3ee);
}
.cs-hint.go { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.55); color: #4ade80; }
.cs-hint.warn {
  background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.65); color: #f87171;
  animation: bgDropPulse 1.1s ease-in-out infinite;
}
/* скрытая подсказка сохраняет место — вёрстка не прыгает */
.cs-hint.hidden { visibility: hidden; }

/* деревянная рама в стиле нардовой доски */
.cs-board-wrap {
  position: relative; /* якорь для fx-canvas */
  width: min(96vw, 520px); margin: 8px auto; padding: clamp(8px, 2.4vw, 14px);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 200, 120, 0.10), transparent 55%),
    linear-gradient(160deg, #6b4527, #452914 55%, #351f0e);
  border: 3px solid #7a5230;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(255, 214, 150, 0.25), 0 10px 32px rgba(0, 0, 0, 0.55);
}
.cs-board {
  display: grid;
  /* ОБЕ оси фиксированы 1fr — иначе пустые ряды сжимаются, а ряды с фигурами растут */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%; aspect-ratio: 1;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.45);
}
.cs-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f2e3c3, #e4d0a8); cursor: default;
  min-width: 0; min-height: 0; overflow: hidden;
}
.cs-cell.dark { background: linear-gradient(135deg, #9d6a41, #85552f); }
.cs-cell.last { box-shadow: inset 0 0 0 100px rgba(255, 213, 74, 0.28); }
.cs-cell.movable { cursor: pointer; }
.cs-cell.sel {
  box-shadow: inset 0 0 0 3px var(--neon-cyan, #22d3ee), inset 0 0 14px rgba(34, 211, 238, 0.4);
}
.cs-cell.check {
  box-shadow: inset 0 0 0 100px rgba(248, 113, 113, 0.38);
  animation: csCheckPulse 0.9s ease-in-out infinite;
}
@keyframes csCheckPulse { 0%, 100% { box-shadow: inset 0 0 0 100px rgba(248, 113, 113, 0.28); } 50% { box-shadow: inset 0 0 0 100px rgba(248, 113, 113, 0.5); } }
.cs-cell.target { cursor: pointer; }
.cs-cell.target::after {
  content: ''; width: 30%; height: 30%; border-radius: 50%; position: absolute;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.95), rgba(74, 222, 128, 0.55));
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}
.cs-cell.target-cap { cursor: pointer; }
.cs-cell.target-cap::after {
  content: ''; position: absolute; inset: 6%;
  border: 3px solid rgba(248, 113, 113, 0.95); border-radius: 50%;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.7);
}
/* координаты в углах крайних клеток — контрастны цвету клетки */
.cs-coord { position: absolute; font-size: clamp(7px, 1.9vw, 10px); font-weight: 800; opacity: 0.85; pointer-events: none; }
.cs-coord.file { right: 3px; bottom: 1px; }
.cs-coord.rank { left: 3px; top: 1px; }
.cs-cell .cs-coord { color: #7a4f2c; }
.cs-cell.dark .cs-coord { color: #f0dfBc; }

/* Фигуры: заполненные глифы, цвет через CSS — читаются на любой клетке */
.cs-piece {
  font-size: clamp(1.7rem, 8.6vw, 3rem); line-height: 1; user-select: none; z-index: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.cs-piece.cs-w {
  color: #faf6ea;
  -webkit-text-stroke: 1.3px #3d2a17;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}
.cs-piece.cs-b {
  color: #2b2135;
  -webkit-text-stroke: 1.3px #0c0812;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 3px rgba(0, 0, 0, 0.5);
}
.cs-piece.pickable { cursor: grab; }
.cs-cell.movable:hover .cs-piece { transform: translateY(-2px) scale(1.06); transition: transform 0.12s; }
.cs-cell.sel .cs-piece { transform: translateY(-3px) scale(1.1); filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55)); }

.cs-actions { display: flex; justify-content: center; margin: 6px 0 14px; }
/* превращение пешки — заметная карточка */
.cs-promo {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  margin: 10px auto; padding: 10px 16px; max-width: fit-content;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.cs-promo-label { font-weight: 700; color: #c4b5fd; }
.cs-promo-btn {
  font-size: 2rem; line-height: 1; padding: 6px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); cursor: pointer;
  transition: 0.15s;
}
.cs-promo-btn:hover { background: rgba(139, 92, 246, 0.35); transform: translateY(-2px); }
.cs-promo-btn .cs-piece { font-size: 2rem; }

/* ── Нарды ─────────────────────────────────────────────────────────────── */
/* ═══ Длинные нарды — классическая деревянная доска ═══ */
.bg-top { display: flex; gap: 8px; justify-content: center; align-items: center; padding-top: 10px; flex-wrap: wrap; }
.bg-title {
  font-family: var(--font-display, 'Unbounded'); font-weight: 800; font-size: 0.95rem;
  background: linear-gradient(135deg, #f4c877, #ec4899);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bg-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }

/* Крупная контекстная подсказка над доской */
.bg-hint {
  margin: 2px auto 6px; padding: 7px 16px; max-width: fit-content;
  border-radius: 999px; font-size: 0.92rem; font-weight: 700; text-align: center;
  background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.45);
  color: var(--neon-cyan, #22d3ee);
}
.bg-hint.go { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.55); color: #4ade80; }
.bg-hint.warn {
  background: rgba(251, 146, 60, 0.14); border-color: rgba(251, 146, 60, 0.65); color: #fb923c;
  animation: bgDropPulse 1.1s ease-in-out infinite;
}
/* скрытая подсказка сохраняет место — вёрстка не прыгает */
.bg-hint.hidden { visibility: hidden; }

/* Доска: 6 пунктов + бар + 6 пунктов; средняя полоса — зона кубиков */
/* Классическая светлая деревянная доска (берёза/клён) со сгибом по центру */
.bg-board {
  width: min(96vw, 620px); margin: 8px auto; padding: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr) clamp(18px, 5vw, 30px) repeat(6, 1fr);
  grid-template-rows: clamp(96px, 27vw, 148px) clamp(38px, 11vw, 50px) clamp(96px, 27vw, 148px);
  column-gap: 2px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    repeating-linear-gradient(93deg, rgba(120, 80, 40, 0.06) 0 3px, transparent 3px 16px),
    linear-gradient(160deg, #ddbc8c, #d0a873 52%, #c2955e);
  border-radius: 20px;
  border: clamp(6px, 1.6vw, 10px) solid #c49a63;
  outline: 1px solid rgba(90, 55, 20, 0.55);
  box-shadow:
    inset 0 0 26px rgba(90, 55, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 34px rgba(0, 0, 0, 0.5);
  position: relative;
}
/* Сгиб доски — светлая ложбинка с металлическими петлями, как у настоящей */
.bg-bar {
  grid-column: 7; grid-row: 1 / span 3;
  margin: -10px 0;
  background: linear-gradient(90deg, rgba(90, 55, 20, 0.4), #d6b384 22%, #e7cda1 50%, #d6b384 78%, rgba(90, 55, 20, 0.4));
  border-left: 1px solid rgba(90, 55, 20, 0.35); border-right: 1px solid rgba(90, 55, 20, 0.35);
  box-shadow: inset 0 0 10px rgba(90, 55, 20, 0.3);
  position: relative;
}
.bg-bar::before, .bg-bar::after { /* стальные петли на сгибе */
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: clamp(7px, 1.8vw, 11px); height: clamp(26px, 6vw, 40px); border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, #f7f8fa, #c7cbd4 55%, #9ba1ad);
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.5), inset 0 0 1px rgba(255, 255, 255, 0.8);
}
.bg-bar::before { top: 9%; }
.bg-bar::after { bottom: 9%; }
/* Выбитые шашки на баре: соперник сверху, свои снизу */
.bg-bar { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 22% 0; }
.bg-bar-stack { display: flex; flex-direction: column; align-items: center; z-index: 1; }
.bg-bar-stack.bottom { flex-direction: column-reverse; }
.bg-chip.bg-bar-chip { width: clamp(14px, 3.8vw, 24px); height: clamp(14px, 3.8vw, 24px); margin: -4px 0 0; }
.bg-bar.movable { cursor: pointer; }
.bg-bar.movable, .bg-bar.sel {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 0 14px rgba(251, 146, 60, 0.7);
  border-left-color: rgba(251, 146, 60, 0.7); border-right-color: rgba(251, 146, 60, 0.7);
}

/* Треугольные пункты */
.bg-point {
  position: relative; display: flex; align-items: center; cursor: default;
  flex-direction: column-reverse; padding: 3px 1px; min-width: 0;
}
.bg-point.top { flex-direction: column; }
/* Вырезанные в дереве пункты: узкие вытянутые язычки со скруглённым кончиком
   (кончик дорисовывает ::after-кружок того же тона, clip-path скруглять не умеет) */
.bg-point::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(8% 100%, 92% 100%, 54% 9%, 46% 9%);
  background: linear-gradient(to top, #cfa671, #b98950 85%);
  filter: drop-shadow(0 -1px 1px rgba(90, 55, 20, 0.3));
}
.bg-point.top::before {
  clip-path: polygon(8% 0%, 92% 0%, 54% 91%, 46% 91%);
  background: linear-gradient(to bottom, #cfa671, #b98950 85%);
}
.bg-point::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 12%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: #b98950; top: 5%;
}
.bg-point.top::after { top: auto; bottom: 5%; background: #b98950; }
.bg-point.alt::before { background: linear-gradient(to top, #a87040, #8d5327 85%); }
.bg-point.top.alt::before { background: linear-gradient(to bottom, #a87040, #8d5327 85%); }
.bg-point.alt::after, .bg-point.top.alt::after { background: #8d5327; }
.bg-point.movable { cursor: pointer; }
.bg-point.movable::before { filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.55)) brightness(1.12); }
.bg-point.sel::before { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9)) brightness(1.2); }
.bg-point.target { cursor: pointer; }
.bg-point.target::before { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.8)) brightness(1.15); }

/* Номер пункта — мелко у внешнего края */
.bg-num {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;
  font-size: 8px; font-weight: 700; color: rgba(90, 55, 20, 0.6); pointer-events: none;
}
.bg-point .bg-num { bottom: -1px; }
.bg-point.top .bg-num { top: -1px; }

/* Шашки — столбиком от края к центру, с лёгким нахлёстом */
.bg-chip {
  width: clamp(16px, 4.4vw, 30px); height: clamp(16px, 4.4vw, 30px);
  border-radius: 50%; flex-shrink: 0; z-index: 1; position: relative;
  margin-top: -3px;
}
.bg-point.top .bg-chip { margin-top: 0; margin-bottom: -3px; }
/* Глянцевые пластиковые шашки, как на классической доске: яркий белый
   с мягким серым ободом и глубокий чёрный с сильным бликом сверху-слева */
.bg-chip.bg-w {
  background: radial-gradient(circle at 32% 28%, #ffffff, #f4f1ea 45%, #ddd6c8 74%, #b9b0a0);
  box-shadow:
    0 3px 5px rgba(60, 35, 10, 0.45),
    inset 0 0 0 1px rgba(120, 105, 80, 0.3),
    inset 0 -3px 5px rgba(140, 125, 100, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.95);
}
.bg-chip.bg-b {
  background: radial-gradient(circle at 32% 28%, #878a93, #33353c 42%, #131418 76%, #030304);
  box-shadow:
    0 3px 5px rgba(40, 20, 5, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 -3px 5px rgba(0, 0, 0, 0.55),
    inset 0 2px 3px rgba(255, 255, 255, 0.3);
}
.bg-chip.pickable {
  box-shadow: 0 0 0 3px var(--neon-lime, #a3e635), 0 0 16px rgba(163, 230, 53, 0.95), 0 2px 4px rgba(0,0,0,0.6);
  animation: bgPickPulse 1.1s ease-in-out infinite;
}
@keyframes bgPickPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.bg-count {
  font-size: 0.68rem; font-weight: 800; color: #4a2c10; z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 240, 210, 0.7);
}
/* Маркер «сюда можно» — пульсирующее кольцо на месте посадки */
.bg-drop {
  width: clamp(14px, 3.8vw, 24px); height: clamp(14px, 3.8vw, 24px);
  border-radius: 50%; z-index: 1; flex-shrink: 0;
  border: 3px dashed rgba(74, 222, 128, 1);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.8);
  animation: bgDropPulse 1s ease-in-out infinite;
}
/* Красный маркер — здесь съедим блот соперника */
.bg-drop.hit {
  border-color: #f87171; border-style: solid;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.95);
  background: radial-gradient(circle, rgba(248, 113, 113, 0.35), transparent 70%);
}
@keyframes bgDropPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.18); opacity: 0.55; } }

/* Средняя полоса: лоток кубиков в правой половине (как на настоящей доске) */
.bg-tray {
  grid-column: 8 / 14; grid-row: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.bg-dice { display: inline-flex; gap: clamp(4px, 1.4vw, 8px); }
.bg-die3 {
  width: clamp(26px, 7.6vw, 38px); aspect-ratio: 1; position: relative;
  background: linear-gradient(145deg, #fffdf2, #ddd5bd);
  border-radius: 20%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 -3px 5px rgba(140, 120, 80, 0.35), inset 0 2px 3px #fff;
}
.bg-die3 i {
  position: absolute; width: 17%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #3c3550, #14101f 75%);
}
.bg-die3.used { opacity: 0.35; filter: grayscale(0.7); }
.bg-die3.rolling { animation: bgDieTumble 0.4s linear infinite; }
@keyframes bgDieTumble {
  0% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(90deg) translateY(-4px); }
  50% { transform: rotate(180deg) translateY(0); }
  75% { transform: rotate(270deg) translateY(-4px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* Лотки выброса — деревянные */
.bg-offs { display: flex; gap: 10px; justify-content: center; margin: 8px 0 14px; flex-wrap: wrap; }
.bg-off {
  padding: 7px 16px; border-radius: 10px; font-size: 0.9rem;
  background: linear-gradient(160deg, #5d3b20, #3a2211);
  border: 1px solid #7a5230; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  color: #f2dcb8;
}
.bg-off.target { cursor: pointer; border-color: rgba(74, 222, 128, 0.9); box-shadow: 0 0 14px rgba(74, 222, 128, 0.5), inset 0 0 8px rgba(0,0,0,0.5); animation: bgDropPulse 1s ease-in-out infinite; }

/* ── Карточка игры на экране входа: превью + условия ── */
.game-info {
  max-width: 440px; margin: 4px auto 14px; overflow: hidden;
  border-radius: 16px; text-align: start;
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.game-info.hidden { display: none; }
/* обложка «магазинного» портретного формата 390×470 (39:47) — контейнер
   держит ровно это соотношение, поэтому cover ничего не срезает: арт целиком */
.gi-img {
  display: block; width: 100%;
  aspect-ratio: 39 / 47; height: auto;
  object-fit: cover; object-position: center center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #12101f;
}
.gi-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.gi-chip {
  font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.4);
  color: #d8ccff; white-space: nowrap;
}
.gi-desc { padding: 9px 14px 0; margin: 0; color: #e4defc; font-weight: 700; font-size: 0.92rem; line-height: 1.4; }
.gi-essence { padding: 6px 14px 13px; margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* ── 🎙️ AI-комментатор (премиум-оверлей): тумблер в лобби ── */
.comm-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.comm-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 0.9rem;
  color: var(--text, #fff);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: 0.15s;
}
.comm-toggle.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.3));
  border-color: var(--neon-violet, #8b5cf6);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.45);
}
.comm-toggle:disabled { cursor: default; opacity: 0.75; }
.comm-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px; color: #1a1030;
  background: linear-gradient(135deg, #f4c877, #fbbf24);
}
.comm-note { font-size: 0.74rem; color: var(--muted); text-align: center; max-width: 340px; }

/* ── Навбар: авторизация ───────────────────────────────────────────────── */
.nav-auth { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (min-width: 768px) { .nav-auth { margin-inline-start: 8px; } }
@media (max-width: 480px) {
  .nav-auth-btn { padding: 6px 10px; font-size: 0.78rem; }
  .nav-account-name { display: none; }
  .nav-account { padding: 4px; }
}
.nav-auth-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 0.84rem; font-weight: 700; color: var(--text, #f2f2f8);
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05);
  transition: 0.15s; white-space: nowrap;
}
.nav-auth-btn:hover { border-color: rgba(0, 240, 255, 0.55); }
.nav-auth-btn.primary { background: linear-gradient(120deg, #7b3ff2, #b23ff2); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(150, 70, 255, 0.35); }
.nav-account {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px 4px 4px; border-radius: 999px; text-decoration: none;
  color: var(--text, #f2f2f8); font-size: 0.86rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05);
  transition: 0.15s; white-space: nowrap;
}
.nav-account:hover { border-color: rgba(0, 240, 255, 0.55); }
.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7b3ff2, #00c8ff);
}
.nav-account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.nav-auth-drawer { flex-direction: column; align-items: stretch; margin-top: 10px; }
.nav-auth-drawer .nav-auth-btn, .nav-auth-drawer .nav-account { justify-content: center; }

/* ── Морской бой: баннер хода, таблица флота, координаты ─────────────── */
.bs-turn-banner {
  text-align: center; margin: 12px auto 0; padding: 10px 18px; max-width: 480px;
  border-radius: 14px; font-weight: 800; font-size: 1.05rem;
}
.bs-turn-banner.bs-yours { background: rgba(57, 255, 20, 0.1); border: 1px solid rgba(57, 255, 20, 0.45); color: #7dffa0; box-shadow: 0 0 18px rgba(57, 255, 20, 0.15); animation: bsPulse 1.6s infinite; }
.bs-turn-banner.bs-theirs { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--muted); }
.bs-turn-banner.bs-done { background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.4); color: #ffd75e; }
@keyframes bsPulse { 0%, 100% { box-shadow: 0 0 12px rgba(57,255,20,0.12); } 50% { box-shadow: 0 0 26px rgba(57,255,20,0.3); } }

.bs-scoreboard { max-width: 560px; margin: 10px auto; padding: 0 8px; overflow-x: auto; }
@media (max-width: 480px) {
  .bs-table { font-size: 0.76rem; }
  .bs-table td, .bs-table th { padding: 4px 5px; }
  .bs-fleet-ship { font-size: 0.6rem; letter-spacing: -1.5px; margin-right: 2px; }
}
.bs-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.bs-table th { text-align: left; padding: 4px 8px; color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.bs-table td { padding: 6px 8px; border-top: 1px solid rgba(255,255,255,0.07); }
.bs-table tr.bs-me td { background: rgba(0, 240, 255, 0.05); }
.bs-table tr.bs-turn-row td:first-child { color: #7dffa0; }
.bs-fleet { white-space: nowrap; }
.bs-fleet-ship { color: var(--neon-cyan, #4dd7ff); letter-spacing: -1px; font-size: 0.72rem; margin-right: 3px; }

.bs-grid-labeled {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 18px repeat(10, 1fr);
  grid-auto-rows: auto;
  gap: 2px;
  width: min(92vw, 370px);
  background: linear-gradient(160deg, #05283d 0%, #032033 55%, #063049 100%);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(0, 240, 255, 0.25);
}
/* живая вода: два дрейфующих слоя бликов (GPU-трансформы, дёшево) */
.bs-grid-labeled::before {
  content: ''; position: absolute; inset: -45%; z-index: -1;
  background:
    radial-gradient(ellipse 55% 38% at 28% 30%, rgba(0, 240, 255, 0.11), transparent 62%),
    radial-gradient(ellipse 48% 34% at 72% 62%, rgba(70, 165, 255, 0.09), transparent 62%),
    radial-gradient(ellipse 40% 30% at 50% 85%, rgba(0, 200, 255, 0.06), transparent 60%),
    repeating-linear-gradient(112deg, transparent 0 15px, rgba(130, 220, 255, 0.05) 15px 17px, transparent 17px 36px);
  animation: bsWater 13s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bsWater {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  50% { transform: translate3d(1%, 2%, 0) scale(1.04); }
  to { transform: translate3d(4%, 3%, 0) scale(1); }
}
.bs-grid-labeled .bs-cell { aspect-ratio: 1; }
.bs-lab {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: rgba(160, 215, 240, 0.75); font-weight: 700; user-select: none;
}
#bs-enemy-wrap.bs-active .bs-grid-labeled { border-color: rgba(57, 255, 20, 0.55); box-shadow: 0 0 16px rgba(57, 255, 20, 0.18); }
#bs-enemy-wrap.bs-active h4 { color: #7dffa0; }
/* радарная развёртка по вражескому морю, когда мой ход */
#bs-enemy-wrap.bs-active .bs-grid-labeled::after {
  content: ''; position: absolute; inset: -45%; z-index: 2;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(57, 255, 20, 0.13), rgba(57, 255, 20, 0.03) 18%, transparent 30%);
  animation: bsRadar 3.6s linear infinite;
  will-change: transform;
}
@keyframes bsRadar { to { transform: rotate(360deg); } }

/* канвас-слой эффектов поверх доски */
.bs-sea { position: relative; width: fit-content; margin: 0 auto; }
.bs-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }

/* тряска при попадании/потоплении */
@keyframes bsShake {
  0%, 100% { transform: none; }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 2px); }
}
.bs-boards.bs-shake { animation: bsShake 0.3s; }
.bs-boards.bs-shake-big { animation: bsShake 0.28s 2; }

@media (prefers-reduced-motion: reduce) {
  .bs-grid-labeled::before,
  #bs-enemy-wrap.bs-active .bs-grid-labeled::after,
  .bs-cell.hit::after,
  .bs-cell.sunk::before,
  .bs-cell.miss::after,
  .bs-boards.bs-shake, .bs-boards.bs-shake-big { animation: none; }
}

/* ── Режим приглашения (?room=CODE): только имя + «Войти» ─────────────── */
body.invite-mode #screen-home .home-buttons:has(#btn-create),
body.invite-mode #solo-block,
body.invite-mode #screen-home .divider { display: none !important; }
body.invite-mode #code-input { opacity: 0.85; pointer-events: none; border-style: dashed; }

/* ── Плавающие эмодзи-фон (из макета) ─────────────────────────────────── */
#bg-emojis { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#bg-emojis span { position: fixed; opacity: 0.09; animation: floaty 8s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-18px) rotate(8deg); } }
@media (max-width: 640px) { #bg-emojis span { font-size: 40px !important; opacity: 0.07; } }

/* ── Ряд [звук][LVL][🔥] на мобильных — финальное правило ─────────────── */
@media (max-width: 640px) {
  .sfx-toggle { top: 58px; inset-inline-start: 8px; width: 28px; height: 28px; }
  .player-chips { top: 58px; inset-inline-start: 42px; height: 28px; }
  .player-chips .chip { height: 28px; padding: 0 10px; }
}

/* ── Чипы LVL/🔥 только на лендинге и выборе игры ─────────────────────── */
body:not([data-screen='games']):not([data-screen='home']) .player-chips { display: none; }

/* ── Универсальный баннер хода (судья в мемах и т.п.) ─────────────────── */
.turn-banner {
  text-align: center; margin: 10px auto 4px; padding: 10px 18px; max-width: 520px;
  border-radius: 14px; font-weight: 800; font-size: 1rem;
}
.turn-banner.tb-yours { background: rgba(163, 230, 53, 0.1); border: 1px solid rgba(163, 230, 53, 0.45); color: #d4f77e; animation: bsPulse 1.6s infinite; }
.turn-banner.tb-theirs { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--muted); font-weight: 600; }

/* судья: карта-ответ целиком кликабельна */
.answer-card:not(.is-readonly) { cursor: pointer; }
.answer-card:not(.is-readonly):hover { border-color: rgba(163, 230, 53, 0.6); transform: translateY(-3px); }
.answer-card:not(.is-readonly) .card-img { cursor: pointer; }

/* ── Pictioner: канвас не шире экрана (координаты масштабируются в JS) ── */
#pc-canvas { max-width: 100%; height: auto; display: block; margin: 0 auto; touch-action: none; }

/* ── Полировка: аватар-кнопка и секции игр ─────────────────────────────── */
.avatar-upload { position: relative; display: inline-flex; cursor: pointer; }
.avatar-upload input[type="file"] { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.avatar-upload::after { content: '📷'; position: absolute; inset-inline-end: -4px; bottom: -4px; font-size: 12px; background: rgba(18,15,36,0.95); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 2px 3px; line-height: 1; }
.games-section {
  grid-column: 1 / -1;
  margin: 14px 0 2px; font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
  text-align: start; color: var(--text);
}
.games-section:first-child { margin-top: 0; }

/* ── Лиги и Эло ────────────────────────────────────────────────────────── */
.lb-league-tabs { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 8px 0 10px; }
.lb-league-tabs .lgt { font-size: 0.72rem; padding: 5px 10px; }
.lb-league-tabs .lgt.active { background: linear-gradient(120deg, #7b3ff2, #b23ff2); border-color: transparent; color: #fff; }
.elo-line { margin-top: 12px; font-size: 1.05rem; font-weight: 700; }
.elo-up { color: #a3e635; }
.elo-down { color: #ff8ba0; }

/* ── Футер: реквизиты и юридические ссылки (только на главной и home) ── */
.site-footer { display: none; margin: 40px auto 84px; padding: 18px; max-width: 720px; text-align: center; border-top: 1px solid rgba(255,255,255,0.09); }
body[data-screen="games"] .site-footer, body[data-screen="home"] .site-footer { display: block; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-bottom: 12px; font-size: 0.8rem; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--neon-cyan, #00f0ff); }
.footer-link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.footer-link-btn:hover { color: var(--neon-cyan, #00f0ff); }
.footer-company { color: rgba(160,158,180,0.7); font-size: 0.72rem; line-height: 1.55; }
.footer-company a { color: rgba(160,158,180,0.85); }

/* ── Cookie-баннер (GDPR): нижний лист, кнопки равнозначные ── */
.consent-banner {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 1200; /* выше wheel-fab (950) */
  max-width: 560px; margin: 0 auto; padding: 14px 16px;
  background: rgba(16, 14, 28, 0.97); border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}
.consent-text { margin: 0 0 10px; font-size: 0.83rem; color: #cfcde0; line-height: 1.5; }
.consent-text a { color: var(--neon-cyan, #00f0ff); }
.consent-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.consent-btns .btn { flex: 1; min-width: 140px; font-size: 0.85rem; padding: 10px 12px; }

/* ── Общий слой эффектов настольных игр (fx-layer.js) ── */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
/* Обойма доски — деревянная рама в стиле нард/шахмат */
.ck-board-wrap {
  position: relative; width: min(96vw, 440px); margin: 8px auto 80px;
  padding: clamp(8px, 2.4vw, 14px); border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 140, 0.12), transparent 55%),
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.06) 0 3px, transparent 3px 15px),
    linear-gradient(160deg, #6b4527, #452914 55%, #33200f);
  border: 3px solid #7a5230;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(255, 214, 150, 0.25),
    0 10px 32px rgba(0, 0, 0, 0.55);
}
.ck-board-wrap .ck-board { width: 100%; margin: 0; }
@keyframes fxShakeKf {
  0%, 100% { transform: none; }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 2px); }
}
.fx-shake { animation: fxShakeKf 0.3s; }
.fx-shake-big { animation: fxShakeKf 0.28s 2; }
@media (prefers-reduced-motion: reduce) {
  .fx-shake, .fx-shake-big { animation: none; }
}

/* ── Волна 2: карточные эффекты ── */
/* Дурак: штамп проигравшему */
.dk-stamp {
  position: fixed; left: 50%; top: 42%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(2.4rem, 12vw, 4.5rem); font-weight: 900; letter-spacing: 0.06em;
  color: #ff2d4e; text-transform: uppercase;
  border: 6px solid #ff2d4e; border-radius: 14px; padding: 6px 22px;
  background: rgba(20, 4, 10, 0.55);
  text-shadow: 0 0 22px rgba(255, 45, 78, 0.6);
  box-shadow: 0 0 30px rgba(255, 45, 78, 0.4), inset 0 0 22px rgba(255, 45, 78, 0.25);
  animation: dkStampIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes dkStampIn {
  0% { transform: translate(-50%, -50%) rotate(-14deg) scale(3); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(-14deg) scale(0.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
}

/* Мемы: карты раздаются веером при вскрытии */
#reveal-board .answer-card { animation: mpDealIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards; }
#reveal-board .answer-card:nth-child(2) { animation-delay: 0.08s; }
#reveal-board .answer-card:nth-child(3) { animation-delay: 0.16s; }
#reveal-board .answer-card:nth-child(4) { animation-delay: 0.24s; }
#reveal-board .answer-card:nth-child(5) { animation-delay: 0.32s; }
#reveal-board .answer-card:nth-child(6) { animation-delay: 0.40s; }
#reveal-board .answer-card:nth-child(7) { animation-delay: 0.48s; }
#reveal-board .answer-card:nth-child(n+8) { animation-delay: 0.56s; }
@keyframes mpDealIn {
  from { opacity: 0; transform: translateY(42px) rotate(5deg) scale(0.88); }
}

/* Ассоциации: 3D-переворот карт на столе */
.as-board.as-flip .as-card { animation: asFlipIn 0.5s ease-out backwards; }
.as-board.as-flip .as-card:nth-child(2) { animation-delay: 0.09s; }
.as-board.as-flip .as-card:nth-child(3) { animation-delay: 0.18s; }
.as-board.as-flip .as-card:nth-child(4) { animation-delay: 0.27s; }
.as-board.as-flip .as-card:nth-child(5) { animation-delay: 0.36s; }
.as-board.as-flip .as-card:nth-child(6) { animation-delay: 0.45s; }
.as-board.as-flip .as-card:nth-child(n+7) { animation-delay: 0.54s; }
@keyframes asFlipIn {
  from { opacity: 0; transform: perspective(700px) rotateY(88deg); }
}
/* карта ведущего на вскрытии — золотое пульсирующее свечение */
.as-card.as-teller-card { animation: asTellerGlow 1.6s ease-in-out infinite; }
@keyframes asTellerGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 94, 0.4); }
  50% { box-shadow: 0 0 22px rgba(255, 215, 94, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .dk-stamp, #reveal-board .answer-card, .as-board.as-flip .as-card, .as-card.as-teller-card { animation: none; }
}

/* ── Анти-прыжки: верхние панели игр держат высоту, пустые пилюли не схлопываются ── */
.dk-top, .cs-top, .ck-top, .bs-top, .bg-top, .as-top {
  min-height: 46px; align-items: center; align-content: center;
}
.dk-top .pill:empty, .cs-top .pill:empty, .ck-top .pill:empty,
.bs-top .pill:empty, .bg-top .pill:empty, .as-top .pill:empty {
  visibility: hidden; min-width: 64px; /* место остаётся, глаз не дёргается */
}

/* Подсказки шахмат и нард — всегда ровно одна строка фиксированной высоты:
   смена текста (1↔2 строки) больше не двигает доску по вертикали */
.cs-hint, .bg-hint {
  height: 36px; line-height: 22px; box-sizing: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: fit-content; max-width: 94vw;
}

/* ═══ Судоку — классическая доска ═══ */
.sd-top { display: flex; gap: 8px; justify-content: center; align-items: center; padding-top: 10px; flex-wrap: wrap; min-height: 46px; }
.sd-errors-pill { color: #ff8ba0; }
.sd-timer-low { color: #ff2d4e; animation: sdPulse 1s infinite; }
@keyframes sdPulse { 50% { opacity: 0.5; } }
.sd-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; min-height: 34px; }
.sd-mini-bar { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; vertical-align: middle; }
.sd-mini-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #00f0ff, #39ff14); transition: width 0.4s; }

.sd-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 90px; }
/* Светлая «бумажная» сетка — классика судоку: тёмные цифры на светлом поле */
.sd-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: min(94vw, 420px);
  aspect-ratio: 1;
  background: #f3f0e7;
  border: 2px solid #7b3ff2;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.sd-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 4.4vw, 1.45rem); font-weight: 700;
  border-right: 1px solid rgba(40, 35, 80, 0.16);
  border-bottom: 1px solid rgba(40, 35, 80, 0.16);
  min-width: 0; min-height: 0; overflow: hidden;
  cursor: pointer; user-select: none; position: relative;
  color: #241c46;
}
/* жирные границы квадратов 3×3 */
.sd-cell.sd-br { border-right: 2px solid rgba(60, 40, 140, 0.55); }
.sd-cell.sd-bb { border-bottom: 2px solid rgba(60, 40, 140, 0.55); }
.sd-cell.sd-given { color: #171230; background: rgba(40, 35, 80, 0.06); font-weight: 800; }
.sd-cell.sd-mine { color: #6d28d9; }
.sd-cell.sd-wrong { color: #d5163b; background: rgba(213, 22, 59, 0.14); }
.sd-cell.sd-peer { background: rgba(123, 63, 242, 0.08); }
.sd-cell.sd-given.sd-peer { background: rgba(123, 63, 242, 0.11); }
.sd-cell.sd-same { background: rgba(123, 63, 242, 0.24); }
.sd-cell.sd-sel { background: rgba(123, 63, 242, 0.2); box-shadow: inset 0 0 0 2px #7b3ff2; }
.sd-cell.sd-shake { animation: sdShake 0.3s; }
@keyframes sdShake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
/* заметки карандашом: мини-сетка 3×3 */
.sd-notes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%; padding: 1px;
}
.sd-notes-grid i {
  font-style: normal; font-size: clamp(6px, 2vw, 9px); font-weight: 600;
  color: rgba(80, 70, 150, 0.8); display: flex; align-items: center; justify-content: center;
}

.sd-numpad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(94vw, 420px); }
.sd-num {
  aspect-ratio: 0.82; border-radius: 10px; border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(0, 240, 255, 0.08); color: #fff;
  font-size: clamp(1rem, 4.4vw, 1.3rem); font-weight: 800; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background 0.12s, transform 0.08s;
}
.sd-num:active { transform: scale(0.93); }
.sd-num:hover { background: rgba(0, 240, 255, 0.18); }
.sd-num i { font-style: normal; font-size: 0.6rem; font-weight: 700; color: var(--muted); }
.sd-num.sd-num-done { opacity: 0.35; }
.sd-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 40px; }
.sd-tool-on { background: rgba(0, 240, 255, 0.2) !important; box-shadow: 0 0 0 2px var(--neon-cyan, #22d3ee); }
@media (prefers-reduced-motion: reduce) {
  .sd-cell.sd-shake, .sd-timer-low { animation: none; }
}

/* ═══ Pictioner — рисуй и угадывай ═══ */
.pc-top { display: flex; gap: 8px; justify-content: center; align-items: center; padding-top: 10px; flex-wrap: wrap; min-height: 46px; }
.pc-timer-low { color: #ff2d4e; animation: sdPulse 1s infinite; }
.pc-word { text-align: center; min-height: 34px; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.pc-word-draw b { color: var(--neon-gold, #ffd75e); }
.pc-mask { letter-spacing: 0.12em; color: var(--neon-cyan, #22d3ee); font-size: 1.25rem; }
.pc-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0; min-height: 32px; }
.pc-stage { display: flex; justify-content: center; padding: 0 6px; }
#pc-canvas {
  width: min(96vw, 560px); height: auto; display: block;
  aspect-ratio: 4 / 3; touch-action: none;
  background: #10132a; border: 2px solid rgba(0, 240, 255, 0.4); border-radius: 12px;
}
#pc-canvas.pc-can-draw { cursor: crosshair; }
.pc-tools { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 8px 0; }
.pc-palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pc-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer; padding: 0; font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
}
.pc-swatch.on { border-color: var(--neon-cyan, #22d3ee); box-shadow: 0 0 8px rgba(0, 240, 255, 0.6); transform: scale(1.12); }
.pc-eraser-btn { background: rgba(255,255,255,0.1); }
.pc-tool-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
.pc-sizes { display: flex; gap: 6px; }
.pc-size {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pc-size i { display: block; border-radius: 50%; background: #fff; }
.pc-size.on { border-color: var(--neon-cyan, #22d3ee); box-shadow: 0 0 6px rgba(0,240,255,0.5); }
.pc-guess-row { display: flex; gap: 8px; justify-content: center; margin: 10px 8px; }
.pc-guess-row input {
  flex: 1; max-width: 380px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, 0.35); background: rgba(255,255,255,0.06);
  color: #fff; font: inherit;
}
.pc-guess-row input:disabled { border-color: rgba(57, 255, 20, 0.6); background: rgba(57, 255, 20, 0.08); }
.pc-feed { display: flex; flex-direction: column; gap: 4px; align-items: center; margin: 4px 8px 90px; min-height: 60px; }
.pc-feed-item { font-size: 0.85rem; color: var(--muted); }
.pc-feed-item.pc-feed-hl { color: #7dffa0; font-weight: 700; }

/* ═══ OCHO! — карточная игра сброса ═══ */
#screen-ocho { padding-bottom: 8px; }
.oc-top {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 46px; margin: 6px 0 2px; flex-wrap: wrap;
  padding: 0 46px; /* не заезжать под плавающие кнопки по краям */
}
.oc-top .pill:empty { visibility: hidden; }
.oc-players {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 4px 8px; min-height: 34px;
}
.oc-players .ls-chip.oc-turn {
  border-color: var(--neon-lime, #a3e635);
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.5);
}

/* Стол: колода добора + сброс + индикаторы */
.oc-table {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 30px);
  margin: 10px auto 6px; min-height: 118px;
}
.oc-draw-wrap { position: relative; }
.oc-deck-n {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 800; color: var(--muted);
}
.oc-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oc-dir { font-size: 1.5rem; color: var(--muted); line-height: 1; }
.oc-color-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.65); box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* Карта: скруглённый прямоугольник, крупный знак, диагональный блик.
   Свой дизайн — без овала, чтобы не совпадать с фирменным стилем Mattel. */
.oc-card {
  width: clamp(46px, 12vw, 62px); height: clamp(66px, 17vw, 88px);
  border-radius: 10px; position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  font-family: 'Unbounded', sans-serif; cursor: pointer; user-select: none;
}
.oc-card::before { /* диагональный блик */
  content: ''; position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.3) 0 26%, transparent 27% 72%, rgba(0,0,0,0.14) 73%);
}
.oc-bg0 { background: linear-gradient(160deg, #f87171, #dc2626); }
.oc-bg1 { background: linear-gradient(160deg, #fbbf24, #d97706); }
.oc-bg2 { background: linear-gradient(160deg, #4ade80, #16a34a); }
.oc-bg3 { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.oc-bg4 { background: conic-gradient(#dc2626 0 25%, #d97706 0 50%, #16a34a 0 75%, #2563eb 0); }
.oc-val {
  font-size: clamp(1.3rem, 6vw, 1.9rem); font-weight: 800; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 8px rgba(0, 0, 0, 0.25); z-index: 1;
}
.oc-corner {
  position: absolute; top: 3px; left: 5px; font-size: 0.62rem; font-weight: 800;
  color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 0 rgba(0,0,0,0.4); z-index: 1;
}
.oc-corner-b { top: auto; left: auto; bottom: 3px; right: 5px; transform: rotate(180deg); }

/* Рубашка колоды */
.oc-back {
  background: linear-gradient(160deg, #2d1b4e, #171031);
  border-color: rgba(240, 171, 252, 0.75); cursor: pointer;
}
.oc-back-logo {
  font-family: 'Unbounded', sans-serif; font-size: 1.9rem; font-weight: 900;
  color: #f0abfc; text-shadow: 0 0 14px rgba(240, 171, 252, 0.8); transform: rotate(-12deg);
}
.oc-deck-hot { animation: ocDeckPulse 1.4s ease-in-out infinite; }
@keyframes ocDeckPulse {
  0%, 100% { box-shadow: 0 3px 7px rgba(0,0,0,0.55); }
  50% { box-shadow: 0 0 16px rgba(240, 171, 252, 0.8), 0 3px 7px rgba(0,0,0,0.55); }
}
.oc-discard .oc-top-card { cursor: default; transform: rotate(4deg); }

/* Кнопки действий — фиксируем высоту, чтобы стол не прыгал */
.oc-actions {
  display: flex; justify-content: center; gap: 8px; margin: 10px 0 6px; min-height: 52px;
  align-items: center; flex-wrap: wrap;
}
.oc-say { font-weight: 800; letter-spacing: 0.04em; }

/* Рука: веер с горизонтальной прокруткой на мобилке */
.oc-hand {
  display: flex; gap: 5px; justify-content: safe center; align-items: flex-end;
  padding: 8px 10px 14px; min-height: 104px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.oc-hand .oc-card.oc-playable {
  border-color: var(--neon-lime, #a3e635);
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.65), 0 3px 7px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px);
}
.oc-hand .oc-card.oc-dim { filter: saturate(0.55) brightness(0.75); cursor: default; }

/* Выбор цвета для wild */
.oc-picker {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(10, 9, 18, 0.82); backdrop-filter: blur(4px);
}
.oc-picker.hidden { display: none; }
.oc-picker-title { font-weight: 800; font-size: 1.05rem; }
.oc-picker-row { display: flex; gap: 14px; }
.oc-pick {
  width: 58px; height: 58px; border-radius: 16px; border: 3px solid rgba(255,255,255,0.85);
  cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s;
}
.oc-pick:active { transform: scale(0.92); }

/* Штамп «OCHO!» */
.oc-stamp {
  position: fixed; top: 38%; left: 50%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Unbounded', sans-serif; font-size: clamp(2.4rem, 12vw, 4rem); font-weight: 900;
  color: #fbbf24; -webkit-text-stroke: 2px #7c2d12;
  text-shadow: 0 0 24px rgba(251, 191, 36, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
  animation: ocStampIn 1.4s ease-out forwards;
}
@keyframes ocStampIn {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0; }
  18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.06); opacity: 0; }
}

/* ── OCHO! волна графики: раздача, веер сброса, спин, пульс хода ── */
#screen-ocho { position: relative; /* якорь для fx-canvas */ }
.oc-hand .oc-card.oc-deal { animation: ocDealIn 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }
@keyframes ocDealIn {
  from { transform: translateY(70px) rotate(10deg) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.oc-hand .oc-card.oc-deal.oc-playable { animation-name: ocDealInUp; }
@keyframes ocDealInUp {
  from { transform: translateY(70px) rotate(10deg) scale(0.6); opacity: 0; }
  to { transform: translateY(-6px); opacity: 1; }
}
.oc-discard { position: relative; }
.oc-discard .oc-fan { position: absolute; inset: 0; cursor: default; }
.oc-discard .oc-fan0 { transform: rotate(-9deg) translate(-3px, 1px); filter: brightness(0.82); }
.oc-discard .oc-fan1 { transform: rotate(-3deg) translate(2px, -1px); filter: brightness(0.9); }
.oc-discard .oc-top-card { position: relative; }
.oc-dir.oc-spin { animation: ocDirSpin 0.6s cubic-bezier(0.3, 0.7, 0.3, 1.2); }
@keyframes ocDirSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.oc-players .ls-chip.oc-turn { animation: ocTurnPulse 1.6s ease-in-out infinite; }
@keyframes ocTurnPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(163, 230, 53, 0.5); }
  50% { box-shadow: 0 0 18px rgba(163, 230, 53, 0.9); }
}
.oc-hand .oc-card.oc-playable:active { transform: translateY(-6px) scale(0.94); }
.oc-stamp.oc-stamp-win { color: #4ade80; -webkit-text-stroke: 2px #14532d; text-shadow: 0 0 24px rgba(74, 222, 128, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .oc-hand .oc-card.oc-deal, .oc-dir.oc-spin, .oc-players .ls-chip.oc-turn { animation: none; }
}
/* ── Домино ── */
.dm-players {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 4px 8px; min-height: 34px;
}
.dm-players .ls-chip.dm-turn {
  border-color: var(--neon-lime, #a3e635);
  animation: dmTurnPulse 1.5s ease-in-out infinite;
}
@keyframes dmTurnPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(163, 230, 53, 0.35); }
  50% { box-shadow: 0 0 15px rgba(163, 230, 53, 0.8); }
}

/* Стол: зелёное сукно, position:relative под fx-canvas */
.dm-board {
  position: relative; margin: 8px 6px; padding: 8px 2px; border-radius: 14px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(22, 101, 52, 0.4), rgba(6, 30, 16, 0.65)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.45);
}
.dm-line-wrap { overflow-x: auto; max-width: 100%; }
/* линия — горизонтальная змейка через flex-wrap */
.dm-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px; row-gap: 12px; padding: 8px 4px; min-height: 86px;
}
.dm-empty { color: var(--text-secondary, #9aa3b5); font-size: 0.85rem; padding: 10px 6px; }

/* Камень: слоновая кость с фаской, разделительная линия, пипсы кружками */
.dm-tile {
  position: relative; display: flex; flex-shrink: 0; cursor: pointer; user-select: none;
  background: linear-gradient(150deg, #fdf9ec 0%, #f4ecd6 45%, #e5d8b6 100%);
  border: 1px solid #b7a476; border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(122, 96, 48, 0.35),
    0 3px 6px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dm-half {
  flex: 1; display: grid; padding: 10%;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  place-items: center;
}
.dm-half i { display: block; width: 68%; aspect-ratio: 1; border-radius: 50%; }
.dm-half i.dm-on {
  background: radial-gradient(circle at 35% 30%, #474752, #101016 72%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dm-mid {
  flex: 0 0 2px; align-self: stretch; margin: 4px;
  background: rgba(122, 98, 56, 0.5); border-radius: 2px;
}

/* линия: кость горизонтально 56×28 */
.dm-line .dm-tile { flex-direction: row; width: 56px; height: 28px; cursor: default; }
/* дубль — поперёк линии (вертикально), пипсы довёрнуты */
.dm-line .dm-tile.dm-double { flex-direction: column; width: 28px; height: 56px; }
.dm-line .dm-tile.dm-double .dm-half { transform: rotate(90deg); }

/* открытые концы линии: клик-мишени */
.dm-endcap {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; margin: 0 4px; padding: 0;
  border: 2px dashed rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #9aa3b5);
  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 0.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.dm-endcap:empty { visibility: hidden; }
.dm-endcap.dm-hot {
  border-color: var(--neon-cyan, #00f0ff); border-style: solid; color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.55); cursor: pointer;
  animation: dmHotPulse 0.9s ease-in-out infinite;
}
@keyframes dmHotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* Кнопки — фиксированная высота, чтобы стол не прыгал */
.dm-actions {
  display: flex; justify-content: center; gap: 8px; margin: 8px 0 4px;
  min-height: 48px; align-items: center;
}

/* Рука: вертикальные кости 44×88 с горизонтальной прокруткой на мобилке */
.dm-hand {
  display: flex; gap: 6px; justify-content: safe center; align-items: flex-end;
  padding: 8px 10px 14px; min-height: 104px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dm-hand .dm-tile { flex-direction: column; width: 44px; height: 88px; }
.dm-hand .dm-tile.dm-playable {
  border-color: var(--neon-lime, #a3e635);
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.65), 0 3px 6px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px);
}
.dm-hand .dm-tile.dm-dim { filter: saturate(0.55) brightness(0.72); cursor: default; }
.dm-hand .dm-tile.dm-sel {
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.75), 0 3px 6px rgba(0, 0, 0, 0.55);
  transform: translateY(-10px) scale(1.04);
}

/* Раздача: кости влетают в руку каскадом */
@keyframes dmDealIn {
  from { opacity: 0; transform: translateY(46px) rotate(8deg) scale(0.6); }
  to { opacity: 1; }
}
.dm-hand .dm-tile.dm-deal { animation: dmDealIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards; }

/* Штамп «ДОМИНО!» победителю раунда */
.dm-stamp {
  position: fixed; top: 38%; left: 50%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Unbounded', sans-serif; font-size: clamp(2.2rem, 11vw, 3.8rem); font-weight: 900;
  color: #fdf6e3; -webkit-text-stroke: 2px #7a5b1e; letter-spacing: 0.04em;
  text-shadow: 0 0 24px rgba(255, 215, 94, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
  animation: dmStampIn 1.4s ease-out forwards;
}
@keyframes dmStampIn {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0; }
  18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.06); opacity: 0; }
}

/* Экраны пошире: кости крупнее */
@media (min-width: 480px) {
  .dm-line .dm-tile { width: 64px; height: 32px; }
  .dm-line .dm-tile.dm-double { width: 32px; height: 64px; }
  .dm-hand .dm-tile { width: 50px; height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-players .ls-chip.dm-turn, .dm-endcap.dm-hot,
  .dm-hand .dm-tile.dm-deal, .dm-stamp { animation: none; }
}
/* ═══ Лудо (Ludo/Parchís) ═══ */
.ld-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 8px;
}
.ld-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1rem; }
.ld-players {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px;
}
.ld-players .ld-turn { outline: 2px solid rgba(94, 234, 212, 0.7); outline-offset: 1px; }
.ld-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, 0.6); flex: none;
}

/* доска: мобильный 390px первичен, всё в долях сетки */
.ld-board-wrap {
  position: relative; width: min(94vw, 480px); margin: 0 auto;
}
/* Доска — светлый лакированный планшет (как настоящая лудо-доска):
   трек читается издалека, цветные дворы держат композицию. */
.ld-board {
  position: relative;
  display: grid; width: 100%; aspect-ratio: 1;
  grid-template-rows: repeat(15, 1fr); grid-template-columns: repeat(15, 1fr);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 58%),
    repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.04) 0 3px, transparent 3px 16px),
    linear-gradient(160deg, #f7efd9, #ecdfc0 55%, #ddcba6);
  border: clamp(5px, 1.5vw, 9px) solid #c49a63;
  outline: 1px solid rgba(90, 55, 20, 0.6);
  border-radius: 14px;
  box-shadow:
    inset 0 0 22px rgba(90, 55, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 34px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.ld-deal .ld-board { animation: ldDeal 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
@keyframes ldDeal {
  from { transform: scale(0.82) rotate(-3deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* клетки трека и дорожек — кремовые плитки с тонкой фаской */
.ld-cell {
  border: 1px solid rgba(122, 84, 40, 0.35);
  background: linear-gradient(165deg, #fffaee, #f0e6cd);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(8px, 2.2vw, 12px); color: rgba(122, 84, 40, 0.75);
  border-radius: 3px; margin: 4%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(90, 55, 20, 0.18);
}
.ld-cell.ld-safe {
  background: linear-gradient(165deg, #d8f7f1, #b6ece2);
  border-color: rgba(13, 148, 136, 0.5); color: #0f766e;
}
/* стартовые и финишные клетки — цвет владельца с глянцем */
.ld-cell.ld-c0 { background: linear-gradient(165deg, #ff8f8f, #e03535 70%, #b91c1c); border-color: #9f1239; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ld-cell.ld-c1 { background: linear-gradient(165deg, #ffd98a, #f0a012 70%, #b45309); border-color: #92400e; color: #4a2400; text-shadow: 0 1px 1px rgba(255,255,255,0.4); }
.ld-cell.ld-c2 { background: linear-gradient(165deg, #97efb2, #22b757 70%, #15803d); border-color: #14532d; color: #05230f; text-shadow: 0 1px 1px rgba(255,255,255,0.35); }
.ld-cell.ld-c3 { background: linear-gradient(165deg, #a9cfff, #3b82f6 70%, #1d4ed8); border-color: #1e3a8a; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ld-cell.ld-home.ld-c0 { background: linear-gradient(165deg, #ffcdcd, #f79a9a 75%, #e97070); }
.ld-cell.ld-home.ld-c1 { background: linear-gradient(165deg, #ffeec4, #ffd689 75%, #f5bf5c); }
.ld-cell.ld-home.ld-c2 { background: linear-gradient(165deg, #d3f8de, #a5ecb9 75%, #79dc95); }
.ld-cell.ld-home.ld-c3 { background: linear-gradient(165deg, #d6e7ff, #a9c9fb 75%, #7fabf3); }
.ld-cell.ld-home { z-index: 1; }

/* дворы 6×6 со стоянками — цветной лак с фаской */
.ld-yard {
  border-radius: 12px; margin: 3%; padding: 12%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(90, 55, 20, 0.25);
}
.ld-yard.ld-c0 { background: linear-gradient(150deg, #f87171, #dc2626 60%, #991b1b); }
.ld-yard.ld-c1 { background: linear-gradient(150deg, #fbbf24, #ea9309 60%, #92400e); }
.ld-yard.ld-c2 { background: linear-gradient(150deg, #4ade80, #16a34a 60%, #14532d); }
.ld-yard.ld-c3 { background: linear-gradient(150deg, #60a5fa, #2563eb 60%, #1e3a8a); }
.ld-yard-in {
  width: 100%; height: 100%; display: grid;
  grid-template: 1fr 1fr / 1fr 1fr; place-items: center;
  background: linear-gradient(165deg, rgba(255, 250, 238, 0.94), rgba(238, 228, 205, 0.9));
  border-radius: 9px;
  box-shadow: inset 0 2px 6px rgba(90, 55, 20, 0.35);
}
.ld-stall {
  width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(122, 84, 40, 0.14), rgba(122, 84, 40, 0.04));
  border: 1.5px dashed rgba(122, 84, 40, 0.45);
  box-shadow: inset 0 2px 4px rgba(90, 55, 20, 0.22);
}

/* центр — четыре «лепестка» к финишу под лаком */
.ld-center { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; }
.ld-diamond {
  width: 78%; aspect-ratio: 1; transform: rotate(45deg); border-radius: 10%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.5), transparent 45%),
    conic-gradient(from 0deg, #f0a012 0 90deg, #16a34a 90deg 180deg, #2563eb 180deg 270deg, #dc2626 270deg 360deg);
  border: 2px solid rgba(255, 250, 238, 0.85);
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 12px rgba(90, 55, 20, 0.45);
}

/* фишки — глянцевые кружки, ~70% клетки */
.ld-token {
  position: absolute; z-index: 5;
  width: 4.7%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.45s cubic-bezier(0.3, 0.8, 0.4, 1), left 0.45s cubic-bezier(0.3, 0.8, 0.4, 1);
  /* белый ободок + тёмный контур: фишка читается и на светлой доске, и на цветном дворе */
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(60, 35, 10, 0.55),
    0 3px 6px rgba(60, 35, 10, 0.5),
    inset 0 -3px 5px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}
.ld-token.ld-c0 { background: radial-gradient(circle at 32% 28%, #ff8a8a, #ef4444 55%, #991b1b); }
.ld-token.ld-c1 { background: radial-gradient(circle at 32% 28%, #fcd34d, #f59e0b 55%, #92400e); }
.ld-token.ld-c2 { background: radial-gradient(circle at 32% 28%, #86efac, #22c55e 55%, #14532d); }
.ld-token.ld-c3 { background: radial-gradient(circle at 32% 28%, #93c5fd, #3b82f6 55%, #1e3a8a); }
.ld-shine {
  position: absolute; left: 18%; top: 12%; width: 34%; height: 26%;
  border-radius: 50%; background: rgba(255, 255, 255, 0.55); filter: blur(1px);
  pointer-events: none;
}
.ld-crown {
  display: none; position: absolute; left: 50%; top: -68%;
  transform: translateX(-50%); font-size: clamp(8px, 2.6vw, 13px);
  color: #ffd75e; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); pointer-events: none;
}
.ld-token.ld-done { width: 3.4%; opacity: 0.95; z-index: 4; }
.ld-token.ld-done .ld-crown { display: block; }
.ld-token.ld-can { cursor: pointer; z-index: 6; animation: ldPulse 0.9s ease-in-out infinite; }
@keyframes ldPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(60, 35, 10, 0.55), 0 3px 6px rgba(60, 35, 10, 0.5), 0 0 0 0 rgba(13, 148, 136, 0.85); }
  50% { box-shadow: 0 0 0 1px rgba(60, 35, 10, 0.55), 0 3px 6px rgba(60, 35, 10, 0.5), 0 0 0 7px rgba(13, 148, 136, 0); }
}

/* кубик с пипсами и 3D-тумблингом */
.ld-controls {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; min-height: 64px; perspective: 300px;
}
.ld-die { width: 58px; height: 58px; flex: none; }
.ld-die-face {
  position: relative; display: block; width: 100%; height: 100%;
  background: linear-gradient(145deg, #fdfdfd, #cfd4de);
  border-radius: 13px; border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.14);
  transform-style: preserve-3d;
}
.ld-die-face i {
  position: absolute; width: 17%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4f5c, #16181f);
  transform: translate(-50%, -50%);
}
.ld-die-face.ld-idle { opacity: 0.45; }
.ld-die.ld-hot { cursor: pointer; animation: ldDieHot 1s ease-in-out infinite; }
@keyframes ldDieHot {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.5)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(94, 234, 212, 0.9)); }
}
.ld-die.ld-tumbling .ld-die-face { animation: ldTumble 0.65s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes ldTumble {
  0% { transform: rotateX(0) rotateY(0) scale(1); }
  35% { transform: rotateX(200deg) rotateY(130deg) scale(1.18); }
  70% { transform: rotateX(330deg) rotateY(300deg) scale(1.05); }
  100% { transform: rotateX(360deg) rotateY(360deg) scale(1); }
}
.ld-hint { font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); max-width: 200px; }

/* штамп «LUDO!» */
.ld-stamp {
  position: fixed; top: 38%; left: 50%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Unbounded', sans-serif; font-size: clamp(2.4rem, 12vw, 4rem); font-weight: 900;
  color: #22c55e; -webkit-text-stroke: 2px #14532d;
  text-shadow: 0 0 24px rgba(34, 197, 94, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
  animation: ldStampIn 1.5s ease-out forwards;
}
@keyframes ldStampIn {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0; }
  18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.06); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-deal .ld-board, .ld-token.ld-can, .ld-die.ld-hot,
  .ld-die.ld-tumbling .ld-die-face, .ld-stamp { animation: none; }
  .ld-token { transition: none; }
}
/* ── Lotería — мексиканское лото с картинками ─────────────────────────────
   Тёплые цвета фиесты (маджента/оранж/бирюза) на тёмном фоне портала.
   Мобильный 390px первичен. Префикс lt-. */

.lt-stage {
  position: relative; /* для fx-canvas */
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: 8px 0 14px;
}

.lt-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ── певец: крупная объявленная карта ── */
.lt-singer { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.lt-call-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.lt-card.lt-call {
  position: relative;
  width: min(38vw, 150px); aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 215, 94, 0.16), transparent 55%),
    linear-gradient(160deg, #2b1338 0%, #3d1030 55%, #241040 100%);
  border: 3px solid transparent;
  /* яркая рамка-градиент в духе лотерейной карты */
  background-clip: padding-box;
  box-shadow:
    0 0 0 3px #ff2d78,
    0 0 0 6px #ff9d3c,
    0 0 22px rgba(255, 45, 120, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.5);
  perspective: 600px;
}
/* орнамент рамки: CSS-«зубчики» по периметру */
.lt-card.lt-call::before {
  content: ''; position: absolute; inset: 4px; border-radius: 8px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #00d9c0 0 6px, transparent 6px 12px) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #00d9c0 0 6px, transparent 6px 12px) bottom / 100% 3px no-repeat,
    repeating-linear-gradient(0deg, #ffd75e 0 6px, transparent 6px 12px) left / 3px 100% no-repeat,
    repeating-linear-gradient(0deg, #ffd75e 0 6px, transparent 6px 12px) right / 3px 100% no-repeat;
  opacity: 0.75;
}
.lt-call-empty { filter: saturate(0.55); }

.lt-card-num {
  position: absolute; top: 5px; left: 8px;
  font-size: 0.72rem; font-weight: 800; color: #ffd75e;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.lt-card-emoji { font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.lt-card-name {
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; text-align: center;
  color: #ffe9b8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); text-transform: uppercase;
}

/* переворот при новой «песне» */
@keyframes lt-flip {
  0% { transform: rotateY(88deg) scale(0.7); opacity: 0.2; }
  60% { transform: rotateY(-12deg) scale(1.06); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); }
}
.lt-flip { animation: lt-flip 0.45s cubic-bezier(0.25, 0.9, 0.4, 1.1); }

/* прогресс до следующей песни */
.lt-callbar {
  width: min(38vw, 150px); height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.lt-callbar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #00d9c0, #ffd75e, #ff2d78);
  transition: width 0.12s linear;
}
.lt-calls { font-size: 0.72rem; opacity: 0.75; }

/* лента последних объявленных */
.lt-history { display: flex; gap: 6px; min-height: 34px; align-items: center; }
.lt-mini {
  width: 30px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; border-radius: 6px;
  background: linear-gradient(160deg, #331545, #24102e);
  border: 1.5px solid rgba(255, 157, 60, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  animation: lt-mini-in 0.3s ease;
}
.lt-mini-unknown { opacity: 0.4; }
@keyframes lt-mini-in { from { transform: translateY(-8px) scale(0.6); opacity: 0; } }

/* лента игроков */
.lt-players { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
.lt-off { opacity: 0.45; }

/* ── табла 4×4 ── */
.lt-tabla {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  width: min(94vw, 420px);
  padding: 8px; border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 45, 120, 0.07) 0 10px, rgba(0, 217, 192, 0.06) 10px 20px),
    linear-gradient(170deg, #221030, #1a0c26);
  border: 2px solid rgba(255, 157, 60, 0.4);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.4);
}
.lt-cell {
  position: relative; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 8px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(165deg, #fdf3dd, #f4dfb8);
  border: 2px solid #c9903c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
}
.lt-cell:active { transform: scale(0.94); }
.lt-cell-num { position: absolute; top: 2px; left: 4px; font-size: 0.55rem; font-weight: 800; color: #a05a18; }
.lt-cell-emoji { font-size: clamp(1.5rem, 7.2vw, 2.1rem); line-height: 1.1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.lt-cell-name {
  max-width: 94%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.55rem; font-weight: 700; color: #6b3d10; text-transform: uppercase; letter-spacing: 0.01em;
}
/* объявленная, ещё не отмеченная клетка — зовёт */
.lt-hot { border-color: #ff2d78; box-shadow: 0 0 10px rgba(255, 45, 120, 0.8), 0 2px 5px rgba(0, 0, 0, 0.35); animation: lt-hot-pulse 1s ease infinite; }
@keyframes lt-hot-pulse { 50% { box-shadow: 0 0 18px rgba(255, 45, 120, 1), 0 2px 5px rgba(0, 0, 0, 0.35); } }
.lt-marked { filter: saturate(0.8) brightness(0.92); }

/* фасолина: боб с бликом, падает со штампом-подскоком */
.lt-bean {
  position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1;
  margin: -20% 0 0 -20%; border-radius: 46% 54% 52% 48%;
  background: radial-gradient(circle at 32% 28%, #d98a5f 0 12%, #8a4324 45%, #55220e 100%);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: lt-bean-drop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.lt-bean::after {
  content: ''; position: absolute; left: 24%; top: 18%; width: 26%; height: 18%;
  border-radius: 50%; background: rgba(255, 235, 205, 0.75); transform: rotate(-25deg);
}
@keyframes lt-bean-drop {
  0% { transform: translateY(-46px) scale(1.6); opacity: 0; }
  55% { transform: translateY(0) scale(0.92); opacity: 1; }
  75% { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* ── кнопка ¡LOTERÍA! ── */
.lt-win-btn {
  width: min(94vw, 420px); padding: 13px 0; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 1.25rem; font-weight: 900; letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(120deg, #ff2d78, #ff9d3c 55%, #ff2d78);
  background-size: 220% 100%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  box-shadow: 0 5px 16px rgba(255, 45, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.12s ease, background-position 0.4s ease;
}
.lt-win-btn:active { transform: scale(0.96); }
.lt-win-ready { animation: lt-win-glow 0.9s ease infinite alternate; background-position: 100% 0; }
@keyframes lt-win-glow {
  from { box-shadow: 0 5px 16px rgba(255, 45, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  to { box-shadow: 0 5px 28px rgba(255, 215, 94, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

/* штамп «¡LOTERÍA!» на победе раунда/матча */
.lt-stamp {
  position: fixed; left: 50%; top: 42%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 10px 26px; border: 4px solid #ffd75e; border-radius: 12px;
  font-size: clamp(1.8rem, 9vw, 3rem); font-weight: 900; letter-spacing: 0.05em;
  color: #ffd75e; background: rgba(40, 10, 35, 0.85);
  text-shadow: 0 0 18px rgba(255, 215, 94, 0.8);
  box-shadow: 0 0 34px rgba(255, 45, 120, 0.55);
  animation: lt-stamp-in 1.6s ease forwards;
}
@keyframes lt-stamp-in {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.6); opacity: 0; }
  18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-flip, .lt-bean, .lt-mini, .lt-hot, .lt-win-ready, .lt-stamp { animation: none; }
}
/* ── Червы (Hearts) ─────────────────────────────────────────────────────── */
.ht-top {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; min-height: 34px; margin-bottom: 6px;
  padding: 0 46px; /* не заезжать под плавающие кнопки по краям (как в .oc-top):
                      кнопка звука висит fixed поверх и съедала первую букву */
}
.ht-top .pill:empty { visibility: hidden; }
.ht-players {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-bottom: 8px;
}
.ht-players .ls-chip.ht-turn {
  box-shadow: 0 0 0 2px var(--neon-cyan, #4dd7ff), 0 0 14px rgba(77, 215, 255, 0.55);
  animation: ht-pulse 1.1s ease-in-out infinite;
}
.ht-players .ls-chip.ht-off { opacity: 0.5; }
.ht-delta { color: #f87171; }
@keyframes ht-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--neon-cyan, #4dd7ff), 0 0 8px rgba(77, 215, 255, 0.35); }
  50% { box-shadow: 0 0 0 3px var(--neon-cyan, #4dd7ff), 0 0 18px rgba(77, 215, 255, 0.75); }
}

/* стол текущей взятки: карты игроков веером по кругу */
.ht-table {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 168px; margin: 4px auto 8px;
  max-width: 340px; border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(30, 90, 55, 0.55), rgba(10, 30, 20, 0.35));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.3);
}
.ht-trick { position: relative; width: 100%; height: 160px; }
.ht-tk {
  position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -23px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform 0.25s ease;
}
.ht-tk .ht-card.ht-lead { box-shadow: 0 0 0 2px rgba(255, 214, 90, 0.75), 0 2px 6px rgba(0, 0, 0, 0.45); }
.ht-tk-name {
  font-size: 0.62rem; opacity: 0.85; max-width: 62px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.ht-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; opacity: 0.65; text-align: center; padding: 0 14px;
}
.ht-pass-note {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font-size: 0.85rem;
}
.ht-pass-arrow { font-size: 1.9rem; line-height: 1; animation: ht-drift 1.4s ease-in-out infinite; }
.ht-pass-wait { font-size: 0.72rem; opacity: 0.7; }
@keyframes ht-drift {
  0%, 100% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
}

.ht-actions { display: flex; justify-content: center; min-height: 8px; margin-bottom: 6px; }

/* карта — стиль дурака: белая, крупный ранг + масть, черви/бубны красные */
.ht-card {
  width: 46px; height: 66px; border-radius: 7px; flex: 0 0 auto;
  background: linear-gradient(160deg, #fdfdf6, #e8e6da);
  color: #1c2430; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  user-select: none; -webkit-user-select: none;
}
.ht-card .ht-rank { font-size: 1.25rem; font-weight: 800; line-height: 1.05; }
.ht-card .ht-suit { font-size: 1.15rem; line-height: 1; }
.ht-card.ht-red { color: #c0392b; }

/* рука веером с нахлёстом: 13+ карт умещаются в 390px */
.ht-hand {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 14px 8px calc(8px + env(safe-area-inset-bottom));
  min-height: calc(92px + env(safe-area-inset-bottom));
}
.ht-hand .ht-card {
  margin-inline-start: -22px; cursor: pointer; position: relative;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  transform-origin: 50% 100%;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  /* В веере от карты видна только узкая полоска у переднего края. Ранг и масть
     по центру (как во взятке) уезжают под соседнюю карту — в руке прижимаем их
     к открытому краю, иначе рука не читается. */
  align-items: flex-start; padding: 0 3px;
}
.ht-hand .ht-card:first-child { margin-inline-start: 0; }
/* 14+ карт (режим 3 игроков, до 17) — нахлёст плотнее, чтобы влезть в 390px;
   полоска сужается до 20px, поэтому ранг и масть здесь мельче */
.ht-hand.ht-many .ht-card { margin-inline-start: -26px; padding: 0 2px; }
.ht-hand.ht-many .ht-card:first-child { margin-inline-start: 0; }
.ht-hand.ht-many .ht-card .ht-rank { font-size: 0.92rem; }
.ht-hand.ht-many .ht-card .ht-suit { font-size: 0.88rem; }
/* ВАЖНО: поднятой карте НЕЛЬЗЯ давать z-index. Соседняя карта перекрыта ею
   почти целиком, и её открытая полоска — единственное место, куда можно
   попасть пальцем; всплывшая карта накрыла бы эту полоску и тап уходил бы
   в неё, снимая уже сделанный выбор (в фазе передачи набрать 3 карты
   становилось невозможно). Порядок в DOM и так кладёт следующую карту сверху,
   а подъём на 10–16px оставляет ободок выделения хорошо видимым. */
.ht-hand .ht-card.ht-playable:hover,
.ht-hand .ht-card.ht-playable:active { transform: rotate(var(--r, 0deg)) translateY(calc(var(--y, 0px) - 10px)); }
.ht-hand .ht-card.ht-playable {
  box-shadow: 0 0 0 2px rgba(77, 215, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.ht-hand .ht-card.ht-dim { opacity: 0.55; }
.ht-hand .ht-card.ht-sel {
  transform: rotate(var(--r, 0deg)) translateY(calc(var(--y, 0px) - 16px));
  box-shadow: 0 0 0 3px var(--neon-pink, #ff2d78), 0 6px 14px rgba(0, 0, 0, 0.55);
}
.ht-hand .ht-card.ht-deal { animation: ht-deal-in 0.45s cubic-bezier(0.25, 0.9, 0.35, 1.1) both; }
@keyframes ht-deal-in {
  from { opacity: 0; transform: translate(60px, -90px) rotate(30deg); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); }
}

/* штампы поверх экрана */
.ht-stamp {
  position: fixed; left: 50%; top: 38%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: inherit; font-weight: 900; font-size: clamp(2rem, 9vw, 3.4rem);
  color: #fff; -webkit-text-stroke: 2px #7f1d1d;
  text-shadow: 0 0 26px rgba(248, 113, 113, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
  animation: ht-stamp-in 2s ease-out both; white-space: nowrap;
}
.ht-stamp.ht-stamp-heart { font-size: clamp(3rem, 14vw, 5rem); -webkit-text-stroke: 0; }
.ht-stamp.ht-stamp-moon {
  color: #ffd6e8; -webkit-text-stroke: 2px #831843;
  text-shadow: 0 0 30px rgba(255, 45, 120, 0.95), 0 6px 18px rgba(0, 0, 0, 0.6);
}
.ht-stamp.ht-stamp-win {
  color: #4ade80; -webkit-text-stroke: 2px #14532d;
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
}
@keyframes ht-stamp-in {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); }
  14% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(0.94); }
}

/* мобильный 390px первичен; на десктопе чуть крупнее */
@media (min-width: 560px) {
  .ht-table { max-width: 420px; }
  .ht-trick { height: 180px; }
  .ht-card { width: 52px; height: 74px; }
  .ht-card .ht-rank { font-size: 1.4rem; }
  .ht-hand .ht-card { margin-inline-start: -16px; }
}
@media (max-width: 359px) {
  .ht-card { width: 42px; height: 60px; }
  .ht-hand .ht-card { margin-inline-start: -24px; }
  .ht-hand.ht-many .ht-card { margin-inline-start: -25px; }
}
/* ═══════════ ¡Basta! (bt-) — буква + 5 категорий на скорость ═══════════ */
.bt-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 480px; margin: 0 auto; padding: 8px 0 20px;
}
.bt-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ── герой: неоновая буква + таймер ── */
.bt-hero { display: flex; align-items: center; gap: 14px; width: min(94vw, 420px); }
.bt-letter-ring {
  flex: 0 0 auto;
  width: clamp(96px, 28vw, 130px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(139, 92, 246, 0.35), rgba(10, 9, 18, 0.9) 72%);
  border: 3px solid var(--neon-cyan, #22d3ee);
  box-shadow: var(--glow-cyan, 0 0 12px rgba(34, 211, 238, 0.4)), inset 0 0 26px rgba(34, 211, 238, 0.25);
  animation: bt-ring-breathe 2.6s ease-in-out infinite;
}
@keyframes bt-ring-breathe {
  50% { box-shadow: 0 0 22px rgba(34, 211, 238, 0.65), 0 0 44px rgba(236, 72, 153, 0.25), inset 0 0 32px rgba(34, 211, 238, 0.35); }
}
.bt-letter {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(3.1rem, 15vw, 4.4rem); font-weight: 900; line-height: 1;
  background: linear-gradient(160deg, #22d3ee 15%, #ec4899 60%, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.55));
  user-select: none;
}
/* влёт буквы: scale + glow-вспышка */
@keyframes bt-letter-in {
  0% { transform: scale(2.6) rotate(-14deg); opacity: 0; filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0)); }
  55% { transform: scale(0.92) rotate(3deg); opacity: 1; filter: drop-shadow(0 0 34px rgba(236, 72, 153, 0.95)); }
  75% { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.55)); }
}
.bt-letter-in { animation: bt-letter-in 0.7s cubic-bezier(0.3, 1.2, 0.4, 1); }

.bt-hero-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.bt-task { font-size: 0.92rem; font-weight: 700; color: var(--text-secondary, #cfcbe4); }
.bt-timebar {
  width: 100%; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.bt-timebar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--neon-cyan, #22d3ee), var(--neon-purple, #8b5cf6));
  transition: width 0.2s linear, background 0.3s ease;
}
.bt-timebar-fill.bt-low { background: linear-gradient(90deg, #fbbf24, #ff4466); animation: bt-low-blink 0.6s steps(2) infinite; }
@keyframes bt-low-blink { 50% { filter: brightness(1.5); } }
.bt-timer { font-size: 0.82rem; font-weight: 800; color: var(--muted, #a29dbd); }

/* ── баннер ¡BASTA! (countdown) ── */
.bt-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: min(94vw, 420px); padding: 10px 14px; border-radius: var(--radius-sm, 12px);
  background: linear-gradient(110deg, rgba(255, 68, 102, 0.28), rgba(236, 72, 153, 0.22));
  border: 2px solid var(--err, #ff4466);
  box-shadow: 0 0 20px rgba(255, 68, 102, 0.45);
  font-weight: 800; color: #ffd7de; text-align: center;
  animation: bt-banner-in 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes bt-banner-in { from { transform: translateY(-14px) scale(0.9); opacity: 0; } }
.bt-count {
  min-width: 1.6em; font-family: var(--font-display, sans-serif);
  font-size: 1.9rem; font-weight: 900; line-height: 1; color: #ff4466;
  text-shadow: 0 0 16px rgba(255, 68, 102, 0.9);
  animation: bt-count-tick 1s ease infinite;
}
@keyframes bt-count-tick { 0% { transform: scale(1.35); } 30% { transform: scale(1); } }

/* ── лента игроков ── */
.bt-players { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
.bt-off { opacity: 0.45; }
.bt-basta-chip { border-color: var(--err, #ff4466); box-shadow: 0 0 10px rgba(255, 68, 102, 0.55); }

/* ── форма: 5 категорий ── */
.bt-form { display: flex; flex-direction: column; gap: 9px; width: min(94vw, 420px); }
.bt-field { display: flex; flex-direction: column; gap: 3px; }
.bt-cat {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lavender, #c4b5fd);
}
.bt-input-wrap { position: relative; display: block; }
.bt-input {
  width: 100%; padding: 11px 40px 11px 13px;
  font-size: 16px; /* не даём iOS зумить поле */
  font-weight: 700; color: var(--text, #f4f2fb);
  background: var(--glass, rgba(255, 255, 255, 0.04));
  border: 2px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 12px); outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bt-input:focus { border-color: var(--neon-cyan, #22d3ee); box-shadow: 0 0 12px rgba(34, 211, 238, 0.35); }
.bt-done .bt-input { border-color: var(--neon-lime, #a3e635); box-shadow: 0 0 10px rgba(163, 230, 53, 0.3); }
.bt-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(0);
  font-weight: 900; color: var(--neon-lime, #a3e635);
  text-shadow: 0 0 8px rgba(163, 230, 53, 0.8);
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
.bt-done .bt-check { transform: translateY(-50%) scale(1.15); }

/* ── кнопка ¡BASTA!: серая → пылающая ── */
.bt-basta-btn {
  width: min(94vw, 420px); padding: 14px 0; border: 0; border-radius: 14px; cursor: pointer;
  font-family: var(--font-display, sans-serif);
  font-size: 1.3rem; font-weight: 900; letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(120deg, #3a3650, #4a4560);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, filter 0.25s ease;
}
.bt-basta-btn:disabled { cursor: not-allowed; filter: grayscale(0.7); opacity: 0.6; }
.bt-basta-btn:not(:disabled):active { transform: scale(0.96); }
.bt-ready {
  background: linear-gradient(120deg, #ff4466, #fbbf24 50%, #ec4899);
  background-size: 220% 100%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  animation: bt-flame 1s ease infinite alternate, bt-flame-slide 2.2s linear infinite;
}
@keyframes bt-flame {
  from { box-shadow: 0 5px 18px rgba(255, 68, 102, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: scale(1); }
  to { box-shadow: 0 5px 32px rgba(251, 191, 36, 0.95), 0 0 46px rgba(255, 68, 102, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: scale(1.025); }
}
@keyframes bt-flame-slide { from { background-position: 0 0; } to { background-position: 220% 0; } }

/* ── таблица результатов раунда ── */
.bt-results { width: min(94vw, 440px); }
.bt-results-title {
  margin-bottom: 8px; text-align: center;
  font-weight: 900; letter-spacing: 0.04em; color: var(--neon-gold, #fbbf24);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.bt-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm, 12px);
  background: var(--panel, rgba(18, 15, 36, 0.85));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--shadow-glass, 0 4px 24px rgba(0, 0, 0, 0.3));
}
.bt-table { border-collapse: collapse; width: 100%; min-width: 430px; font-size: 0.72rem; }
.bt-table th {
  padding: 7px 6px; text-align: start; white-space: nowrap;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #a29dbd); border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}
.bt-table td { padding: 7px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: top; }
.bt-table tr:last-child td { border-bottom: 0; }
.bt-td-name { font-weight: 800; white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.bt-me-row { background: rgba(139, 92, 246, 0.12); }
.bt-word { display: block; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-table td b { font-size: 0.68rem; }
.bt-pts10 { color: var(--neon-lime, #a3e635); }
.bt-pts10 b { text-shadow: 0 0 8px rgba(163, 230, 53, 0.7); }
.bt-pts5 { color: var(--neon-gold, #fbbf24); }
.bt-pts0 { color: var(--muted, #a29dbd); opacity: 0.65; }
.bt-td-sum { font-weight: 900; color: var(--neon-cyan, #22d3ee); text-align: end; }

/* ── штамп ¡BASTA! / победа ── */
.bt-stamp {
  position: fixed; left: 50%; top: 40%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-7deg);
  padding: 10px 26px; border: 4px solid var(--neon-cyan, #22d3ee); border-radius: 12px;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.7rem, 9vw, 2.8rem); font-weight: 900; letter-spacing: 0.05em;
  color: var(--neon-cyan, #22d3ee); background: rgba(12, 8, 30, 0.88);
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.85);
  box-shadow: 0 0 34px rgba(236, 72, 153, 0.5);
  animation: bt-stamp-in 1.6s ease forwards;
}
.bt-stamp-win { border-color: var(--neon-gold, #fbbf24); color: var(--neon-gold, #fbbf24); text-shadow: 0 0 18px rgba(251, 191, 36, 0.85); }
@keyframes bt-stamp-in {
  0% { transform: translate(-50%, -50%) rotate(-7deg) scale(2.6); opacity: 0; }
  18% { transform: translate(-50%, -50%) rotate(-7deg) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-letter-ring, .bt-letter-in, .bt-banner, .bt-count, .bt-check,
  .bt-ready, .bt-low, .bt-stamp { animation: none; }
}
/* ── Truco — аргентинская дуэль ── */
#screen-truco { position: relative; /* якорь для fx-canvas */ }

.tc-top { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 0; }
.tc-scorebar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(30, 22, 48, 0.9), rgba(14, 10, 26, 0.9));
  border: 1px solid rgba(255, 215, 94, 0.25);
  box-shadow: 0 0 18px rgba(255, 45, 120, 0.12) inset;
}
.tc-sb-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tc-sb-side-op { align-items: flex-end; text-align: end; }
.tc-sb-name {
  font-weight: 800; font-size: 0.82rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 30vw;
}
.tc-sb-score { display: flex; align-items: baseline; gap: 6px; flex: none; }
.tc-sb-num {
  font-family: 'Unbounded', sans-serif; font-weight: 900;
  font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1;
  color: #ffd75e; text-shadow: 0 0 14px rgba(255, 215, 94, 0.55);
}
.tc-sb-num-op { color: #00f0ff; text-shadow: 0 0 14px rgba(0, 240, 255, 0.55); }
.tc-sb-colon { font-weight: 900; font-size: 1.4rem; opacity: 0.6; }

/* прогресс-точки до 15 */
.tc-dots { display: flex; flex-wrap: wrap; gap: 2px; max-width: 30vw; }
.tc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); flex: none;
}
.tc-dots .tc-dot-on { background: #ffd75e; box-shadow: 0 0 5px rgba(255, 215, 94, 0.9); }
.tc-sb-side-op .tc-dot-on { background: #00f0ff; box-shadow: 0 0 5px rgba(0, 240, 255, 0.9); }

.tc-status-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 26px; }

/* энвидо-бейдж у имени */
.tc-env-badge {
  font-size: 0.66rem; font-weight: 800; padding: 1px 6px; border-radius: 8px;
  background: rgba(0, 240, 255, 0.14); color: #9fe8ff; border: 1px solid rgba(0, 240, 255, 0.4);
  vertical-align: middle; white-space: nowrap;
}
.tc-env-badge-win { background: rgba(255, 215, 94, 0.18); color: #ffd75e; border-color: rgba(255, 215, 94, 0.55); }

/* ── ставка: неоновые чипы ── */
.tc-stakes {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; padding: 2px 8px; flex-wrap: wrap;
}
.tc-stake-label { font-size: 0.72rem; opacity: 0.65; font-weight: 700; }
.tc-chip {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900; color: #1a0f2e;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffd75e 55%, #d99a1f);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px rgba(255, 215, 94, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tc-chip-pending {
  background: radial-gradient(circle at 35% 30%, #b7f8ff, #00f0ff 55%, #0993a5);
  color: #06222a;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: tcChipPulse 0.9s ease-in-out infinite;
}
@keyframes tcChipPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.tc-stake-name {
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.72rem;
  color: #ffd75e; text-shadow: 0 0 8px rgba(255, 215, 94, 0.7); letter-spacing: 0.06em;
}
.tc-stake-pending { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.7); }

/* ── стол: три колонки-бazas ── */
.tc-table {
  display: flex; justify-content: center; gap: 10px;
  padding: 8px 6px; min-height: 190px; align-items: center;
}
.tc-baza {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 5px; border-radius: 12px; transition: transform 0.4s, opacity 0.4s, filter 0.4s;
}
.tc-baza-cur {
  background: rgba(255, 215, 94, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 215, 94, 0.28), 0 0 16px rgba(255, 215, 94, 0.12);
}
.tc-baza-past { transform: rotate(-7deg) scale(0.82); opacity: 0.5; filter: saturate(0.55); }
.tc-baza-past:nth-child(2) { transform: rotate(5deg) scale(0.82); }
.tc-slot { min-height: 74px; display: flex; align-items: center; }
.tc-ghost {
  width: 52px; height: 74px; border-radius: 8px;
  border: 1.5px dashed rgba(255, 255, 255, 0.16); display: block;
}
.tc-baza-mid { min-height: 18px; display: flex; align-items: center; }
.tc-mark { font-size: 0.78rem; font-weight: 900; }
.tc-mark-me { color: #ffd75e; text-shadow: 0 0 8px rgba(255, 215, 94, 0.8); }
.tc-mark-op { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }
.tc-mark-parda {
  font-size: 0.6rem; letter-spacing: 0.08em; color: #f0abfc;
  border: 1px solid rgba(240, 171, 252, 0.5); border-radius: 6px; padding: 0 5px;
}

/* ── карта испанской колоды: кремовый фон, рамка-орнамент ── */
.tc-card {
  position: relative; width: 52px; height: 74px; border-radius: 8px;
  background: linear-gradient(150deg, #fdf6e3 0%, #f3e7c9 55%, #ecdcb4 100%);
  border: 2px solid #b9862f;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 252, 240, 0.9);
  color: #3d2408; user-select: none; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.tc-card::before {
  content: ''; position: absolute; inset: 4px; border-radius: 5px;
  border: 1px dashed rgba(146, 84, 20, 0.55); pointer-events: none;
}
.tc-rank {
  position: absolute; top: 12px; left: 0; right: 0; text-align: center;
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 1.35rem; line-height: 1;
}
.tc-suit { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font-size: 1.05rem; line-height: 1; }
.tc-cc {
  position: absolute; top: 3px; left: 5px; font-size: 0.52rem; font-weight: 800; line-height: 1.1;
  display: flex; flex-direction: column; align-items: center;
}
.tc-cc i { font-style: normal; font-size: 0.5rem; }
.tc-cc-b { top: auto; left: auto; bottom: 3px; right: 5px; transform: rotate(180deg); }

/* ── рука веером ── */
.tc-hand {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 4px 8px 14px; min-height: 104px;
}
.tc-hand .tc-card { width: 64px; height: 92px; margin: 0 -7px; transition: transform 0.15s; }
.tc-hand .tc-card .tc-rank { font-size: 1.7rem; top: 16px; }
.tc-hand .tc-card .tc-suit { font-size: 1.3rem; bottom: 12px; }
.tc-hand .tc-card:nth-child(1) { transform: rotate(-8deg) translateY(6px); }
.tc-hand .tc-card:nth-child(3) { transform: rotate(8deg) translateY(6px); }
.tc-hand .tc-card.tc-playable { cursor: pointer; box-shadow: 0 0 14px rgba(255, 215, 94, 0.55), 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 252, 240, 0.9); }
.tc-hand .tc-card.tc-playable:nth-child(1):active,
.tc-hand .tc-card.tc-playable:nth-child(2):active,
.tc-hand .tc-card.tc-playable:nth-child(3):active { transform: translateY(-8px) scale(0.95); }
.tc-hand .tc-card.tc-dim { filter: brightness(0.72) saturate(0.7); }
.tc-hand .tc-card.tc-deal { animation: tcDealIn 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }
@keyframes tcDealIn {
  from { transform: translateY(80px) rotate(14deg) scale(0.5); opacity: 0; }
}

/* ── панель торговли ── */
.tc-bets {
  display: flex; justify-content: center; gap: 7px; flex-wrap: wrap;
  padding: 2px 8px; min-height: 40px;
}
.tc-bet {
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.72rem;
  letter-spacing: 0.05em; padding: 9px 13px; border-radius: 12px; cursor: pointer;
  border: 2px solid; background: rgba(12, 8, 24, 0.85); transition: transform 0.12s;
}
.tc-bet:active { transform: scale(0.93); }
.tc-bet-truco { color: #ff2d78; border-color: #ff2d78; box-shadow: 0 0 12px rgba(255, 45, 120, 0.45); }
.tc-bet-envido { color: #00f0ff; border-color: #00f0ff; box-shadow: 0 0 12px rgba(0, 240, 255, 0.45); }
.tc-bet-yes { color: #39ff14; border-color: #39ff14; box-shadow: 0 0 12px rgba(57, 255, 20, 0.4); }
.tc-bet-no { color: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
.tc-bet-fold { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.28); box-shadow: none; font-size: 0.62rem; }

/* ── FX: вспышка взятки, сметание, энвидо, штамп ── */
.tc-card.tc-flash { animation: tcFlash 0.75s ease-out; }
@keyframes tcFlash {
  0% { box-shadow: 0 0 0 rgba(255, 215, 94, 0); filter: brightness(1); }
  30% { box-shadow: 0 0 26px rgba(255, 215, 94, 1), 0 0 50px rgba(255, 215, 94, 0.7); filter: brightness(1.7); }
  100% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); filter: brightness(1); }
}
.tc-baza.tc-sweep { animation: tcSweep 0.5s ease-in forwards; }
@keyframes tcSweep {
  to { transform: translateX(-70px) rotate(-16deg) scale(0.75); opacity: 0.45; filter: saturate(0.5); }
}
.tc-card.tc-env-glow { box-shadow: 0 0 18px rgba(0, 240, 255, 0.85), inset 0 0 0 2px rgba(0, 240, 255, 0.6); }
.tc-env-float {
  position: fixed; z-index: 330; pointer-events: none; transform: translateX(-50%);
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 1.7rem;
  color: #00f0ff; -webkit-text-stroke: 1px #063a42;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.9);
  animation: tcEnvUp 1.6s ease-out forwards;
}
.tc-env-float-win { color: #ffd75e; -webkit-text-stroke: 1px #6b4a06; text-shadow: 0 0 16px rgba(255, 215, 94, 0.95); }
@keyframes tcEnvUp {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.25); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* штамп поперёк экрана (свой класс, как .oc-stamp) */
.tc-stamp {
  position: fixed; top: 38%; left: 50%; z-index: 320; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-9deg);
  font-family: 'Unbounded', sans-serif; font-size: clamp(2.2rem, 13vw, 4.2rem); font-weight: 900;
  color: #ff2d78; -webkit-text-stroke: 2px #5c0824;
  text-shadow: 0 0 26px rgba(255, 45, 120, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  animation: tcStampIn 1.5s ease-out forwards;
}
.tc-stamp-env { color: #00f0ff; -webkit-text-stroke: 2px #063a42; text-shadow: 0 0 26px rgba(0, 240, 255, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6); }
.tc-stamp-win { color: #ffd75e; -webkit-text-stroke: 2px #6b4a06; text-shadow: 0 0 26px rgba(255, 215, 94, 0.95), 0 6px 18px rgba(0, 0, 0, 0.6); }
.tc-stamp-parda { color: #f0abfc; -webkit-text-stroke: 2px #4a1258; font-size: clamp(1.6rem, 9vw, 3rem); text-shadow: 0 0 22px rgba(240, 171, 252, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6); }
@keyframes tcStampIn {
  0% { transform: translate(-50%, -50%) rotate(-9deg) scale(2.6); opacity: 0; }
  16% { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.07); opacity: 0; }
}

/* планшеты и шире */
@media (min-width: 640px) {
  .tc-table { gap: 22px; }
  .tc-card { width: 60px; height: 86px; }
  .tc-ghost { width: 60px; height: 86px; }
  .tc-hand .tc-card { width: 74px; height: 106px; margin: 0 -4px; }
  .tc-sb-name, .tc-dots { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-hand .tc-card.tc-deal, .tc-chip-pending, .tc-card.tc-flash,
  .tc-baza.tc-sweep, .tc-env-float, .tc-stamp { animation: none; }
  .tc-env-float { opacity: 1; }
  .tc-stamp { opacity: 1; }
}

/* ── Полиш v3.18.1: анти-прыжки и рубашка OCHO ── */
/* статус в 2 строки на мобилке не должен двигать стол (ocho и domino делят oc-top) */
.oc-top { min-height: 68px; }
/* зона линии домино: резерв на 2 ряда змейки — доска не дёргается при выкладке */
.dm-board { min-height: 152px; display: flex; align-items: center; }
.dm-board .dm-line-wrap { width: 100%; }
/* подсказка лудо не меняет высоту блока кубика */
.ld-hint { min-height: 38px; display: flex; align-items: center; }

/* Рубашка OCHO: логотип + четырёхцветное кольцо */
.oc-back { overflow: hidden; }
.oc-back .oc-back-ring {
  position: absolute; width: 132%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#dc2626 0 25%, #d97706 0 50%, #16a34a 0 75%, #2563eb 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 58%, #000 60% 70%, transparent 72%);
  opacity: 0.9; transform: rotate(-12deg);
}
.oc-back .oc-back-logo {
  font-family: 'Unbounded', sans-serif; font-size: clamp(0.62rem, 2.6vw, 0.82rem);
  font-weight: 900; letter-spacing: 0.02em; transform: rotate(-12deg);
  background: linear-gradient(100deg, #f87171, #fbbf24 35%, #4ade80 65%, #60a5fa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(240, 171, 252, 0.55)); z-index: 1;
}
.oc-back .oc-back-logo i { font-style: normal; color: #f0abfc; -webkit-text-fill-color: #f0abfc; }

/* ═══ Мобильный полиш v3.18.2: ничего не прыгает, всё в экране ═══ */
/* верхние панели — фиксированная высота: статус в 1-2 строки больше не двигает стол */
.oc-top { height: 88px; min-height: 0; flex-wrap: wrap; align-content: center; overflow: hidden; margin: 2px 0; }
.ld-top { height: 76px; align-content: center; overflow: hidden; margin-bottom: 4px; }
.lt-top { height: 56px; align-content: center; overflow: hidden; }
.bg-top { height: 72px; align-content: center; overflow: hidden; padding-top: 0; }
.tc-status-row { min-height: 0; height: 100px; align-content: center; overflow: hidden; }

/* домино: доска фиксированной высоты, длинная змейка скроллится внутри неё */
.dm-board { min-height: 0; height: 196px; }
.dm-board .dm-line-wrap { max-height: 180px; overflow: auto; }

/* лудо: кубик и подсказка в зарезервированной зоне (грань кубика «дышит» при броске) */
.ld-controls { min-height: 104px; }

/* труко: пустеющая рука не схлопывает низ */
#tc-hand { min-height: 118px; }

/* баста: полоса «N крикнул BASTA» всегда занимает место (visibility в клиенте) */
.bt-banner { min-height: 52px; }

/* морской бой: лог 1 строка фикс, баннер хода фикс, своё море — компактная мини-карта */
.bs-log { height: 22px; overflow: hidden; margin-bottom: 20px; }
.bs-turn-banner {
  height: 62px; display: flex; align-items: center; justify-content: center;
  padding: 4px 18px; margin: 8px auto 0;
}
#bs-mine { width: min(62vw, 240px); margin: 0 auto; }

/* лотерия: компактнее по вертикали — всё влезает без скролла */
.lt-card.lt-call { width: min(32vw, 126px); }
.lt-cell { aspect-ratio: 1 / 1.08; }

/* крестики-нолики: статус 1-2 строки не двигает сетку */
.ttt-top { height: 68px; align-content: center; overflow: hidden; padding-top: 0; }
/* ассоциации: карты в 3 колонки на мобилке — рука влезает в экран без скролла */
@media (max-width: 480px) {
  .as-board { grid-template-columns: repeat(3, 1fr); gap: 7px; }
}
/* морской бой: компактнее по вертикали и без вылезающего флота */
#bs-enemy { width: min(88vw, 352px); margin: 0 auto; }
.bs-scoreboard { max-width: min(94vw, 380px); margin: 6px auto; }
.bs-table td, .bs-table th { padding: 3px 6px; }
.bs-table .bs-fleet { max-width: 120px; overflow: hidden; white-space: nowrap; }
.bs-board-wrap h4 { margin: 0 0 4px; }

/* добивка вместимости: морской бой и лотерия — всё в один экран */
#bs-mine { width: min(52vw, 204px); }
.bs-log { margin-bottom: 8px; }
.bs-turn-banner { height: 54px; margin-top: 4px; }
.bs-board-wrap { margin-bottom: 4px; }
.lt-card.lt-call { width: min(29vw, 112px); }
.lt-history { min-height: 26px; }
.lt-history .lt-mini { width: 30px; height: 40px; }
.lt-singer { gap: 3px; }
.lt-tabla { max-width: min(92vw, 372px); }
/* ассоциации: доска не схлопывается при смене фаз */
.as-board { min-height: 352px; align-content: start; }

/* финальная добивка: морской бой в экран, лотерия и ассоциации без микросдвигов */
@media (max-width: 520px) {
  .bs-board-wrap h4 { display: none; }
  #bs-enemy { width: min(84vw, 336px); }
  .bs-turn-banner { height: 48px; font-size: 0.95rem; }
}
.lt-top { height: 48px; }
.lt-players { height: 34px; overflow: hidden; }
.lt-tabla { max-width: min(90vw, 360px); }
/* форма подсказки рассказчика резервирует место всегда — доска не сдвигается */
.as-clue-form.hidden { display: flex !important; visibility: hidden; }

/* точечная добивка последних сдвигов */
#bs-mine { width: min(48vw, 190px); }
.bs-table { font-size: 0.78rem; }
.bs-table th { font-size: 0.64rem; }
.lt-history { height: 44px; min-height: 0; overflow: hidden; }
/* баннер подсказки ассоциаций резервирует строку всегда */
#as-clue-banner.hidden { display: block !important; visibility: hidden; }
.as-clue { min-height: 34px; }
/* статус ассоциаций: 1-2 строки в фиксированной зоне */
.as-status { height: 46px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* ряд действий OCHO: три кнопки в одну фиксированную строку */
.oc-actions { height: 52px; min-height: 0; flex-wrap: nowrap; overflow: hidden; }
.oc-actions .btn { padding: 9px 12px; font-size: 0.84rem; white-space: nowrap; }
/* лотерия: две строки пилюль в топе, чипы игроков — одна прокручиваемая строка */
.lt-top { height: 58px; }
.lt-players { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: safe center; }

/* ассоциации: брендовая рубашка как подложка, замок на платных колодах */
.as-card img { background: url('/img/assoc/back.svg') center / cover no-repeat, #241640; }
.tour-pick.as-deck-locked { opacity: 0.55; filter: grayscale(0.35); }

/* Чип колоды с миниатюрой первой карты — стиль виден до выбора */
.as-deck-pick { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 10px 7px; border-radius: 14px; width: 92px; }
.as-deck-thumb { width: 72px; height: 100px; object-fit: cover; border-radius: 8px;
  background: #241640; box-shadow: 0 2px 8px rgba(0,0,0,0.35); pointer-events: none; }
.as-deck-pick.active .as-deck-thumb { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 2px 10px rgba(0,0,0,0.4); }
.as-deck-name { font-size: 0.72rem; line-height: 1.15; text-align: center; max-width: 84px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Basta: компактнее и честные галочки ── */
.bt-stage { gap: 8px; padding: 6px 0 12px; }
.bt-form { gap: 6px; }
.bt-field { gap: 2px; }
.bt-cat { font-size: 0.66rem; }
.bt-input { padding: 8px 36px 8px 12px; }
.bt-letter-ring { width: clamp(74px, 21vw, 100px); }
.bt-letter { font-size: clamp(2.4rem, 11vw, 3.3rem); }
.bt-banner { min-height: 44px; padding: 6px 12px; }
.bt-results-title { margin-bottom: 4px; }
.bt-table { font-size: 0.78rem; }
.bt-table th, .bt-table td { padding: 4px 5px; }
.bt-table .bt-word { display: inline-block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* слово не на букву раунда — красная рамка вместо ложной галочки */
.bt-bad .bt-input { border-color: rgba(248, 113, 113, 0.75); box-shadow: 0 0 10px rgba(248, 113, 113, 0.3); }
.bt-bad .bt-check { display: none; }

/* ═══════════════════════════════════════════════════
   Ассоциации v2 — анти-мигание, плавность, разбор очков
   ═══════════════════════════════════════════════════ */

/* карта — контейнер для бейджей ✓ / 🗳 */
.as-card { position: relative; }

/* появление борда при настоящей пересборке (fade + подъём, stagger) */
.as-board.as-enter .as-card { animation: asRiseIn 0.35s ease-out backwards; }
.as-board.as-enter .as-card:nth-child(2) { animation-delay: 0.04s; }
.as-board.as-enter .as-card:nth-child(3) { animation-delay: 0.08s; }
.as-board.as-enter .as-card:nth-child(4) { animation-delay: 0.12s; }
.as-board.as-enter .as-card:nth-child(5) { animation-delay: 0.16s; }
.as-board.as-enter .as-card:nth-child(6) { animation-delay: 0.20s; }
.as-board.as-enter .as-card:nth-child(n+7) { animation-delay: 0.24s; }
@keyframes asRiseIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
}

/* приглушённые карты: видно, но не кликается */
.as-card.as-dim {
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(0.75);
}
.as-card.as-dim:hover { transform: none; }

/* моя сданная карта / мой голос — яркая рамка + бейдж */
.as-card.as-sent { border-color: var(--neon-lime); box-shadow: 0 0 14px rgba(163, 230, 53, 0.45); }
.as-card.as-voted { border-color: var(--neon-cyan); box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); }
.as-card.as-sent::after,
.as-card.as-voted::after {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  background: rgba(10, 8, 22, 0.88);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.as-card.as-sent::after { content: '✓'; color: var(--neon-lime); }
.as-card.as-voted::after { content: '🗳'; }

/* вскрытие: подписи владельцев и фишки проголосовавших */
.as-reveal-card .as-card-meta { background: rgba(10, 8, 22, 0.6); }
.as-owner { font-weight: 700; }
.as-teller-tag { font-weight: 800; color: var(--neon-gold); line-height: 1.15; }
.as-votes { display: flex; flex-wrap: wrap; gap: 3px; }
.as-vote-chip {
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 0.64rem;
  color: var(--neon-cyan);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* панель «Итоги раунда» */
.as-result {
  max-width: 640px;
  margin: 14px auto 0;
  padding: 10px 14px 12px;
  border-radius: 16px;
  background: rgba(18, 15, 36, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.28);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  animation: asRiseIn 0.35s ease-out;
}
.as-result.hidden { display: none; }
.as-result-head {
  text-align: center;
  font-family: var(--font-arcade);
  font-size: 0.9rem;
  color: var(--neon-gold);
  margin-bottom: 4px;
}
.as-verdict {
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}
.as-gain-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.as-gain-name { grid-column: 1; font-weight: 700; font-size: 0.86rem; }
.as-gain-pts {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-arcade);
  font-size: 0.95rem;
  white-space: nowrap;
}
.as-gain-pts.as-plus { color: var(--neon-lime); }
.as-gain-pts.as-zero { color: var(--muted); }
.as-gain-why { grid-column: 1; font-size: 0.72rem; color: var(--muted); line-height: 1.3; }

@media (max-width: 480px) {
  .as-result { margin: 12px 8px 0; padding: 9px 11px 11px; }
  .as-vote-chip { font-size: 0.58rem; padding: 1px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-board.as-enter .as-card, .as-result { animation: none; }
}

/* вскрытие: борд ужимается по контенту — итоги раунда сразу под картами */
.as-board:has(.as-reveal-card) { min-height: 0; }

/* ═══ Японский кроссворд (нонограммы) ═══ */
.ng-top { display: flex; gap: 8px; justify-content: center; align-items: center; padding-top: 10px; flex-wrap: wrap; min-height: 46px; }
.ng-lives { color: #ff6b81; letter-spacing: 2px; font-size: 1rem; }
.ng-life-lost { opacity: 0.25; }
.ng-timer-low { color: #ff2d4e; animation: ngPulse 1s infinite; }
@keyframes ngPulse { 50% { opacity: 0.5; } }
.ng-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.ng-mini-bar { display: inline-block; width: 48px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; vertical-align: middle; }
.ng-mini-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #00f0ff, #39ff14); transition: width 0.4s; }

.ng-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 90px; }

/* «Бумажное» поле: тёмные клетки на светлом, жирные линии каждые 5 */
.ng-board {
  --ng-cell: 22px; --ng-clue: 16px; --ng-font: 10px;
  display: grid;
  background: #f4f1e8;
  border: 2px solid #7b3ff2;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  max-width: 100%;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.ng-corner { background: transparent; }
.ng-col-clue {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 0; min-width: 0; cursor: pointer;
  height: calc(var(--ng-cols) * var(--ng-clue));
}
.ng-row-clue {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; cursor: pointer;
}
.ng-num {
  font-style: normal; font-size: var(--ng-font); font-weight: 800; line-height: 1.15;
  color: #2f2757; display: block;
  /* светлые цвета палитры не должны теряться на кремовом поле */
  text-shadow: 0 0 1px rgba(35, 28, 70, 0.55);
}
.ng-num-done { opacity: 0.32; text-decoration: line-through; }
/* светлые цвета палитры (белый, кремовый) на кремовом поле без обводки не
   читаются — подсказке нужен тёмный контур, иначе цветной пазл нечитаем */
.ng-num-pale { text-shadow: 0 0 1px rgba(24, 19, 56, 0.9), 0 1px 1px rgba(24, 19, 56, 0.65); }
.ng-cell {
  width: var(--ng-cell); height: var(--ng-cell);
  border-right: 1px solid rgba(40, 35, 80, 0.18);
  border-bottom: 1px solid rgba(40, 35, 80, 0.18);
  position: relative; cursor: pointer; background: transparent;
}
.ng-cell.ng-br { border-right: 2px solid rgba(60, 40, 140, 0.6); }
.ng-cell.ng-bb { border-bottom: 2px solid rgba(60, 40, 140, 0.6); }
.ng-cell.ng-on { box-shadow: inset 0 0 0 1px rgba(30, 24, 60, 0.3); }
.ng-cell.ng-x::before, .ng-cell.ng-x::after {
  content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px;
  background: rgba(90, 80, 150, 0.75); border-radius: 2px;
}
.ng-cell.ng-x::before { transform: rotate(45deg); }
.ng-cell.ng-x::after { transform: rotate(-45deg); }
.ng-cell.ng-bad { background: rgba(213, 22, 59, 0.28) !important; }
.ng-cell.ng-shake { animation: ngShake 0.3s; }
.ng-cell.ng-pop { animation: ngPop 0.35s; }
@keyframes ngShake { 0%,100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes ngPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

.ng-swatches { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ng-swatch {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.35); padding: 0;
}
.ng-swatch.active { border-color: #fff; box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.55); transform: scale(1.06); }
/* кисть «залить» в цветном режиме показывает выбранный цвет: эмодзи ⬛ своим
   цветом не управляется, поэтому рисуем квадрат сами */
.ng-brush-chip {
  display: inline-block; width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.55); vertical-align: middle;
}

/* Витрина картинок в лобби: точки палитры + замок премиум-набора */
.ng-puzzle-picks { max-height: 168px; overflow-y: auto; }
.ng-pz-dots { display: inline-flex; gap: 2px; margin: 0 3px; vertical-align: middle; }
.ng-pz-dots i {
  display: block; width: 8px; height: 8px; border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.ng-pz-locked { opacity: 0.62; }
.ng-puzzle-hint { margin: 4px 0 0; font-size: 0.74rem; }

.ng-brushes { display: flex; gap: 8px; justify-content: center; }
.ng-brush {
  min-width: 56px; height: 44px; border-radius: 11px;
  border: 1px solid rgba(0, 240, 255, 0.3); background: rgba(0, 240, 255, 0.08);
  color: #fff; font-size: 1.15rem; cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.ng-brush:active { transform: scale(0.94); }
.ng-brush.active { background: rgba(0, 240, 255, 0.24); box-shadow: 0 0 0 2px var(--neon-cyan, #22d3ee); }

.ng-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 40px; }
.ng-premium-locked { opacity: 0.85; }
.ng-note { text-align: center; color: var(--muted); font-size: 0.76rem; margin: 0 12px; min-height: 16px; }

/* Финал: картинка «оживает» */
.ng-win {
  /* поверх платформенного оверлея «новый уровень» (z 2000): раскрытие
     картинки — кульминация партии, его нельзя перекрывать на полпути */
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 22, 0.9); padding: 16px;
}
.ng-win.hidden { display: none; }
.ng-win-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 100%;
  animation: ngRise 0.45s ease-out;
}
@keyframes ngRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ng-art {
  display: grid; gap: 0;
  background: #f4f1e8; padding: 8px; border-radius: 12px;
  border: 2px solid #7b3ff2; box-shadow: 0 10px 40px rgba(123, 63, 242, 0.45);
  max-width: 100%;
}
.ng-art i { display: block; }
.ng-art i.ng-art-on { animation: ngInk 0.45s backwards; }
@keyframes ngInk { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
.ng-art-name { font-family: var(--font-display, inherit); font-size: 1.4rem; font-weight: 800; text-align: center; color: #fff; }
.ng-art-sub { font-size: 0.85rem; color: var(--muted); text-align: center; }
.ng-no-anim .ng-art i.ng-art-on, .ng-no-anim { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ng-cell.ng-shake, .ng-cell.ng-pop, .ng-timer-low,
  .ng-win-card, .ng-art i.ng-art-on { animation: none !important; }
}
.ng-art-author { font-size: 0.82rem; color: var(--neon-cyan, #22d3ee); text-align: center; margin-top: -6px; }

/* ═══ 🎨 Редактор кроссвордов (screen-ng-editor) ═══ */
#screen-ng-editor { display: none; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 40px; }
#screen-ng-editor.active { display: flex; }
.nge-top { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.nge-title { font-size: 1.1rem; margin: 0; }
.nge-upsell {
  width: 100%; margin: 0; padding: 8px 10px; border-radius: 12px; font-size: 0.82rem;
  background: rgba(255, 215, 90, 0.12); border: 1px solid rgba(255, 215, 90, 0.35);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center;
}
.nge-row { display: flex; gap: 8px; width: 100%; align-items: center; flex-wrap: wrap; justify-content: center; }
.nge-name {
  flex: 1; min-width: 150px; padding: 9px 12px; border-radius: 11px; font-size: 0.95rem;
  border: 1px solid rgba(0, 240, 255, 0.3); background: rgba(10, 8, 30, 0.6); color: #fff;
}
.nge-sizes { display: flex; gap: 6px; }
.nge-size {
  min-width: 62px; height: 38px; border-radius: 10px; cursor: pointer; color: #fff; font-size: 0.85rem;
  border: 1px solid rgba(0, 240, 255, 0.3); background: rgba(0, 240, 255, 0.08);
}
.nge-size.active { background: rgba(0, 240, 255, 0.26); box-shadow: 0 0 0 2px var(--neon-cyan, #22d3ee); }
.nge-grid {
  display: grid; gap: 0; background: #f4f1e8; padding: 4px; border-radius: 10px;
  border: 2px solid #7b3ff2; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); max-width: 100%;
  user-select: none; -webkit-user-select: none; touch-action: none; direction: ltr;
}
.nge-cell {
  display: block; background: transparent; cursor: pointer;
  border-right: 1px solid rgba(40, 35, 80, 0.18); border-bottom: 1px solid rgba(40, 35, 80, 0.18);
}
.nge-cell.nge-br { border-right: 2px solid rgba(60, 40, 140, 0.6); }
.nge-cell.nge-bb { border-bottom: 2px solid rgba(60, 40, 140, 0.6); }
.nge-cell.on { background: #241c46; }
.nge-cell.bad { box-shadow: inset 0 0 0 2px rgba(213, 22, 59, 0.7); }
.nge-tools, .nge-actions, .nge-panel-actions { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.nge-tool {
  min-width: 50px; height: 40px; border-radius: 10px; color: #fff; font-size: 1.05rem; cursor: pointer;
  border: 1px solid rgba(0, 240, 255, 0.3); background: rgba(0, 240, 255, 0.08);
}
.nge-tool.active { background: rgba(0, 240, 255, 0.24); box-shadow: 0 0 0 2px var(--neon-cyan, #22d3ee); }
.nge-count { font-size: 0.75rem; color: var(--muted); }
.nge-panel {
  width: 100%; padding: 10px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(10, 8, 30, 0.55); border: 1px solid rgba(0, 240, 255, 0.22);
}
.nge-panel.hidden { display: none; }
.nge-slider-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.nge-slider-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--neon-cyan, #22d3ee); }
.nge-status { min-height: 20px; text-align: center; font-size: 0.85rem; color: var(--muted); margin: 0; padding: 0 8px; }
.nge-status.nge-good { color: #4ade80; }
.nge-status.nge-warn { color: #fbbf24; }
.nge-status.nge-bad { color: #f87171; }
.nge-mine { width: 100%; }
.nge-mine h3 { font-size: 0.95rem; margin: 6px 0; }
.nge-mine-list { display: flex; flex-direction: column; gap: 6px; }
.nge-item {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 10px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.nge-item-name { font-weight: 700; font-size: 0.86rem; flex: 1; min-width: 100px; }
.nge-item-meta { font-size: 0.72rem; color: var(--muted); }
.nge-item-btns { display: flex; gap: 4px; }
.nge-empty { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 6px 0; }

/* ═══════════════════════════════════════════════════════════════
   RTL — ИВРИТ (dir="rtl" ставит i18n.js по локали he)
   Интерфейс (навбар, лобби, чат, тосты, кабинет, магазин) браузер
   зеркалит сам: flex/grid, логические margin/padding, text-align:start.
   Ниже — только то, что зеркалить НЕЛЬЗЯ.
   ═══════════════════════════════════════════════════════════════ */

/* ── Игровые доски и сетки: геометрия игры не зависит от языка ──────────
   Шахматы/шашки/нарды/морской бой/судоку/нонограммы/лудо/крестики/лотерия/
   домино. Зеркальная доска — это другая игра: координаты, ходы, разбор
   партии и подсказки нонограмм перестали бы сходиться. Статусные строки
   над доской (.*-top, .*-status) остаются RTL — они вне этих контейнеров. */
[dir="rtl"] .cs-board-wrap, [dir="rtl"] .cs-board,
[dir="rtl"] .ck-board-wrap, [dir="rtl"] .ck-board,
[dir="rtl"] .bg-board,
[dir="rtl"] .bs-boards, [dir="rtl"] .bs-board-wrap, [dir="rtl"] .bs-grid,
[dir="rtl"] .bs-grid-labeled, [dir="rtl"] .bs-scoreboard, [dir="rtl"] .bs-table,
[dir="rtl"] .sd-grid,
[dir="rtl"] .ng-wrap, [dir="rtl"] .ng-board, [dir="rtl"] .ng-art,
[dir="rtl"] .ld-board-wrap, [dir="rtl"] .ld-board,
[dir="rtl"] .ttt-grid,
[dir="rtl"] .lt-tabla,
[dir="rtl"] .dm-board, [dir="rtl"] .dm-line-wrap,
[dir="rtl"] .dk-table, [dir="rtl"] .dk-pair,
/* Веер червей: сами карты уже принудительно LTR, поэтому их
   margin-inline-start считается от ЛЕВОГО края. Если оставить контейнер RTL,
   нахлёст и обнуление у :first-child смотрят в разные стороны — веер
   разъезжается и крайняя карта уходит за экран. */
[dir="rtl"] .ht-hand {
  direction: ltr;
}

/* Карты: ранг и масть читаются слева направо в любой локали */
[dir="rtl"] .dk-card, [dir="rtl"] .oc-card, [dir="rtl"] .ht-card,
[dir="rtl"] .tc-card, [dir="rtl"] .dm-tile, [dir="rtl"] .lt-cell {
  direction: ltr;
}

/* ── Числа, коды и ссылки: bidi иначе переставляет их местами ──────────
   «3:2» в ивритском абзаце превратилось бы в «2:3», код комнаты ABCD —
   в DCBA, а URL разъехался бы по слэшам. */
[dir="rtl"] #room-code, [dir="rtl"] .room-code,
[dir="rtl"] .code-inp, [dir="rtl"] #code-input,
[dir="rtl"] .share-link, [dir="rtl"] .qr-box, [dir="rtl"] #qr-container,
[dir="rtl"] [id$="-timer"], [dir="rtl"] .wheel-timer, [dir="rtl"] .shop-offer-timer,
[dir="rtl"] .bt-timer,
[dir="rtl"] .ttt-score, [dir="rtl"] .tc-scorebar, [dir="rtl"] .podium-score,
[dir="rtl"] .live-scores, [dir="rtl"] .as-scores, [dir="rtl"] #scoreboard,
[dir="rtl"] .ng-num, [dir="rtl"] .ng-row-clue, [dir="rtl"] .ng-col-clue,
[dir="rtl"] .cs-coord, [dir="rtl"] .lt-cell-num {
  direction: ltr;
}
/* коды/таймеры/счёт остаются по центру своих блоков */
[dir="rtl"] #room-code, [dir="rtl"] .room-code,
[dir="rtl"] .code-inp, [dir="rtl"] #code-input,
[dir="rtl"] [id$="-timer"], [dir="rtl"] .ttt-score, [dir="rtl"] .podium-score {
  text-align: center;
}
/* ссылка-приглашение прижата к своему краю строки, но читается LTR */
[dir="rtl"] .share-link { text-align: right; }

/* Поля с латиницей: почта, пароль, ссылка — ввод слева направо */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] {
  direction: ltr; text-align: left;
}

/* ── Имена и названия: направление по первой букве строки ──────────────
   «¡Basta!», «OCHO!», ники латиницей внутри ивритского интерфейса иначе
   получают ивритский базовый уровень bidi и восклицательный знак уезжает
   в начало. plaintext = поведение dir="auto" без правки разметки. */
[dir="rtl"] .game-card-name, [dir="rtl"] .game-card-desc,
[dir="rtl"] .player-name, [dir="rtl"] .lb-name, [dir="rtl"] .ls-name,
[dir="rtl"] .tour-pname, [dir="rtl"] .podium-name, [dir="rtl"] .nav-account-name,
[dir="rtl"] .chat-bubble, [dir="rtl"] .as-deck-name, [dir="rtl"] .shop-card-name {
  unicode-bidi: plaintext;
}

/* ── Мелкие развороты, которые браузер сам не делает ─────────────────── */
/* стрелка «назад» указывает в сторону возврата */
[dir="rtl"] .hero-sticker { transform: rotate(-9deg); }
[dir="rtl"] .back-btn, [dir="rtl"] .btn-back { transform: scaleX(-1); }
[dir="rtl"] .back-btn > *, [dir="rtl"] .btn-back > * { display: inline-block; transform: scaleX(-1); }
/* всплывающая реплика чата вылетает со своей стороны экрана */
[dir="rtl"] .chat-bubble { animation-name: bubbleInRtl; }
@keyframes bubbleInRtl { from { transform: translateX(60%) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ПОЛИШ 3.29: стабильные игровые панели + графика
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Статус-пилюля игры: постоянная высота ──────────────────────────────
   Раньше длинный статус («Всё отбито — ждём, подкинут ли ещё», «ХОДИТ 🤖 …»)
   переносил соседние пилюли на вторую строку — и доска/рука уезжали вниз на
   24px и больше. Теперь пилюля статуса имеет фиксированную высоту и центрует
   текст в 1–3 строки, а ряд не переносится. */
.ttt-top > .pill-accent, .ck-top > .pill-accent, .dk-top > .pill-accent,
.ld-top > .pill-accent, .oc-top > .pill-accent, .ht-top > .pill-accent,
.dm-top > .pill-accent, .lt-top > .pill-accent, .bt-top > .pill-accent,
.tc-status-row > .pill-accent {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  height: 44px; padding: 4px 16px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.18; overflow: hidden;
  text-transform: none; letter-spacing: 0.2px; font-size: 12.5px;
}
/* плавающая кнопка звука висит fixed в левом верхнем углу — не заезжать под неё */
.ttt-top, .ck-top, .dk-top, .ld-top { padding-inline: 46px; }
/* служебные пилюли (таймер, счёт, козырь) не сжимаются и не переносятся */
.ttt-top > .pill:not(.pill-accent), .ck-top > .pill:not(.pill-accent),
.dk-top > .pill:not(.pill-accent), .ld-top > .pill:not(.pill-accent),
.oc-top > .pill:not(.pill-accent), .ht-top > .pill:not(.pill-accent),
.dm-top > .pill:not(.pill-accent), .lt-top > .pill:not(.pill-accent) {
  flex: 0 0 auto; white-space: nowrap;
}
.ck-top, .ld-top, .dk-top { min-height: 46px; }
/* лудо: заголовок игры не должен выжимать статус в ноль */
.ld-top .ld-title { flex: 0 0 auto; white-space: nowrap; }

/* ── 2. Кнопки игровых действий — по содержимому, а не на всю ширину ───────
   .btn задан width:100%, поэтому «Беру», «Бито», «Пас» растягивались во всю
   строку и выглядели как баннер, а не как кнопка. */
.dk-actions .btn, .dm-actions .btn, .oc-actions .btn, .tc-bets .btn {
  width: auto; min-width: 116px; max-width: 46%;
}

/* ── 3. Ленты игроков: высота не зависит от длины подписи ──────────────────
   Чипы игроков переносятся на вторую строку, когда к нику добавляется метка
   («·пас», счёт взяток) — и доска уезжала вниз. Резервируем два ряда сразу:
   высота ленты постоянна при любом числе игроков и любой длине ника. */
/* Лотерия: три-четыре чипа со счётом не влезали в ряд, флексбокс сжимал их и
   ник срезало до «Пол…», а счёт переносился на вторую строку внутри чипа.
   Компактный чип (мельче шрифт, меньше паддинги) укладывается целиком. */
.lt-players { align-items: center; min-height: 34px; }
.lt-players .ls-chip {
  white-space: nowrap; font-size: 11px; padding: 4px 8px; gap: 4px;
}
.lt-players .ls-chip .ls-name { max-width: 9ch; }

/* ── 4. Домино: камни глянцевее, пипсы глубже ──────────────────────────── */
.dm-tile::before { /* косой блик по кости, как на полированной слоновой кости */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.62) 0 20%, rgba(255, 255, 255, 0) 44%);
}
.dm-tile { background: linear-gradient(150deg, #fffdf4 0%, #f6efdb 45%, #e4d7b4 100%); }
.dm-half, .dm-mid { position: relative; z-index: 1; }
.dm-half i.dm-on {
  background: radial-gradient(circle at 34% 28%, #5a5a66, #16161d 62%, #08080c 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(0, 0, 0, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.62);
}
.dm-mid { background: linear-gradient(180deg, rgba(122, 98, 56, 0.22), rgba(122, 98, 56, 0.62), rgba(122, 98, 56, 0.22)); }
.dm-hand .dm-tile { transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
.dm-hand .dm-tile.dm-playable:hover { transform: translateY(-11px) scale(1.03); }
.dm-hand .dm-tile:not(.dm-dim):active { transform: translateY(-4px) scale(0.97); }

/* ── 5. Lotería: рамка карты аккуратнее, «песня» объёмнее ─────────────────── */
.lt-card.lt-call::before { /* papel picado: ровные зубчики без разрывов в углах */
  inset: 5px; border-radius: 7px; opacity: 0.85;
  background:
    repeating-linear-gradient(90deg, #00d9c0 0 5px, transparent 5px 11px) top / calc(100% - 10px) 3px no-repeat,
    repeating-linear-gradient(90deg, #00d9c0 0 5px, transparent 5px 11px) bottom / calc(100% - 10px) 3px no-repeat,
    repeating-linear-gradient(0deg, #ffd75e 0 5px, transparent 5px 11px) left / 3px calc(100% - 10px) no-repeat,
    repeating-linear-gradient(0deg, #ffd75e 0 5px, transparent 5px 11px) right / 3px calc(100% - 10px) no-repeat;
  background-position: 5px 0, 5px 100%, 0 5px, 100% 5px;
}
.lt-card.lt-call::after { /* золотые уголки, как на печатной лотерейной карте */
  content: ''; position: absolute; inset: 5px; border-radius: 7px; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(255, 215, 94, 0.85) 0 5px, transparent 5px) top left / 16px 16px no-repeat,
    radial-gradient(circle at 100% 0, rgba(255, 215, 94, 0.85) 0 5px, transparent 5px) top right / 16px 16px no-repeat,
    radial-gradient(circle at 0 100%, rgba(255, 215, 94, 0.85) 0 5px, transparent 5px) bottom left / 16px 16px no-repeat,
    radial-gradient(circle at 100% 100%, rgba(255, 215, 94, 0.85) 0 5px, transparent 5px) bottom right / 16px 16px no-repeat;
}
/* клетки таблы — тиснёный картон с фаской, а не плоская плашка */
.lt-cell {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(165deg, #fdf3dd, #f2dcb2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 5px rgba(160, 110, 40, 0.22),
    0 3px 6px rgba(0, 0, 0, 0.4);
}
.lt-cell:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 12px rgba(0, 0, 0, 0.5); }

/* ── 6. Ассоциации: подпись карты — накладка, доска не растёт ─────────────
   Раньше блок автора/голосов добавлялся В ПОТОК карты: на фазе раскрытия
   доска вырастала на 137px и весь экран дёргался (аудит: прыжок 113px). */
.as-card-meta {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 5px 7px 6px; gap: 1px;
  background: linear-gradient(to top, rgba(6, 5, 16, 0.94), rgba(6, 5, 16, 0.78) 62%, rgba(6, 5, 16, 0));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.as-reveal-card .as-card-meta { background: linear-gradient(to top, rgba(6, 5, 16, 0.94), rgba(6, 5, 16, 0.78) 62%, rgba(6, 5, 16, 0)); }
.as-card-meta .as-votes { display: flex; flex-wrap: wrap; gap: 2px; }
/* текстовые карты (без картинки) — место под накладку снизу */
.as-reveal-card .as-card-text { padding-bottom: 34px; }
/* строка «за что дали очки» — две строки зарезервированы, панель не дышит */
.as-gain-why { min-height: 1.9em; }
/* Резерв под нижние кнопки — один раз на экране, а не двойной отбивкой у
   счёта и у панели итогов (лишние 80px давали вертикальный скролл). */
#screen-association { padding-bottom: 84px; }
.as-scores { margin: 16px 0 0; }
.as-result { margin: 14px auto 0; }
/* Подпись на карте не должна вылезать за её край: две строки максимум. */
.as-card-meta > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 1.15;
}
.as-card-meta .as-teller-tag { font-size: 0.64rem; }
.as-card-meta .as-owner { font-weight: 700; }
.as-card-meta .as-votes { -webkit-line-clamp: 2; }
.as-vote-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7. Труко: шапка со счётом не дышит, стол получил сукно ────────────────
   15 точек прогресса упирались в max-width: 30vw (117px при 390px) и на
   14-й точке сваливались во вторую строку — панель росла, стол уезжал. */
.tc-scorebar {
  max-width: 100%; overflow: hidden;
  /* левый край панели уходил под плавающую кнопку звука — ник «Ты 👑» срезало */
  padding-inline-start: 36px;
}
.tc-dots {
  flex-wrap: nowrap; max-width: none; width: 100%;
  min-height: 8px; overflow: hidden;
}
.tc-sb-name { max-width: 34vw; }
/* Стол — зелёное сукно с виньеткой: карты больше не висят в пустоте */
.tc-table {
  margin: 6px 8px; border-radius: 18px;
  background:
    radial-gradient(115% 130% at 50% -10%, rgba(52, 168, 92, 0.4), rgba(6, 40, 22, 0.85) 78%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 4px, transparent 4px 8px);
  border: 1px solid rgba(150, 235, 175, 0.22);
  box-shadow:
    inset 0 2px 20px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.45);
}
/* Карты труко: к золотой рамке добавлен косой блик — картон «полированный».
   Рамку и пунктир не трогаем, они уже в стиле испанской колоды. */
.tc-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.5) 0 18%, rgba(255, 255, 255, 0) 42%);
}
.tc-rank, .tc-suit, .tc-cc { z-index: 1; }

/* ── 8. RTL: доски всегда LTR, но панели зеркалятся корректно ─────────────── */
[dir="rtl"] .ttt-board, [dir="rtl"] .ttt-grid, [dir="rtl"] .ck-board-wrap { direction: ltr; }
[dir="rtl"] .ttt-mark-x::before { transform: rotate(45deg); }
[dir="rtl"] .ttt-mark-x::after { transform: rotate(-45deg); }

/* ── 9. Мем-пати: задание, баннер и карты держат высоту ───────────────────
   Три источника «дёрганья» за раунд: текст задания в 1–3 строки, баннер
   судьи с пустым текстом (высота 0 → 25px) и картинки мемов, у которых до
   загрузки не было зарезервировано место. */
#prompt-text {
  min-height: 3.9em; display: flex; align-items: center; justify-content: center; text-align: center;
}
/* баннер судьи занимает своё место всегда — пустой просто невидим,
   длинный ник переносится внутри зарезервированных двух строк */
.turn-banner {
  min-height: 60px; line-height: 1.2;
  display: flex; align-items: center; justify-content: center;
}
.turn-banner > * { display: block; }
.turn-banner:empty { visibility: hidden; }
.wait-zone { min-height: 64px; }
/* Рука видна только в фазе выбора и всегда держит 3 ряда по 2 карты:
   между раздачами она на мгновение пуста, и без резерва кнопка «Сдать» и
   весь низ экрана подпрыгивали на пол-экрана. */
.hand { align-content: start; min-height: 470px; }
/* Все карты руки одной высоты: смесь «текст + картинка» больше не меняет
   высоту рядов сетки от раздачи к раздаче. */
.hand .answer-card { min-height: 150px; }
.hand .answer-card.is-image .card-img {
  aspect-ratio: auto; height: 104px; max-height: 104px; object-fit: contain;
}
/* КАРТИНКИ: место под мем известно до загрузки (иначе карта «выпрыгивает»,
   когда картинка догрузилась) */
.card-img { aspect-ratio: 4 / 3; height: auto; }
.card-cap {
  min-height: 2.5em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}