/* ============================================================
   Snord Arcade — стили
   Тема: Retro-Futurism / Synthwave. Глубокий индиго-фон, неоновое
   свечение, стекло, сетка и мягкие сканлайны. Семантические токены.
   Шрифты: Orbitron (дисплей) + JetBrains Mono (HUD/код) + system sans.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* — поверхности — */
  --bg:        #08080f;
  --bg-2:      #0e0e1d;
  --surface:   rgba(146, 160, 255, 0.05);
  --surface-2: rgba(146, 160, 255, 0.09);
  --surface-3: rgba(146, 160, 255, 0.14);
  --border:    rgba(150, 140, 255, 0.14);
  --border-2:  rgba(160, 150, 255, 0.28);

  /* — текст — */
  --text:      #eef1ff;
  --muted:     #a3a7c9;
  --muted-2:   #6d7099;

  /* — неон / семантика — */
  --accent:    #8b5cff;   /* primary  */
  --accent-2:  #29e7ff;   /* cyan     */
  --accent-3:  #ff4d8d;   /* rose/CTA */
  --good:      #2ff3a8;
  --bad:       #ff5d73;
  --warn:      #ffd24d;

  --grad:      linear-gradient(135deg, #8b5cff 0%, #29e7ff 100%);
  --grad-2:    linear-gradient(135deg, #ff4d8d 0%, #8b5cff 100%);
  --grad-soft: linear-gradient(135deg, rgba(139,92,255,.20), rgba(41,231,255,.12));

  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 22px 60px rgba(0, 0, 0, .55);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .40);
  --glow:      0 0 24px rgba(139, 92, 255, .45);

  --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;
  --font-sans:    "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font: var(--font-sans);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
/* html — ЕДИНСТВЕННЫЙ скролл-контейнер: вертикальная полоса всегда видна
   (overflow-y: scroll), горизонтальной нет (overflow-x: hidden). Иначе при
   переходе с длинной страницы (главная) на короткую (меню игры) полоса
   исчезает, ширина области растёт и центрированный контент «съезжает» вправо.
   overflow-x здесь же не даёт сменить распространение overflow и не плодит
   вторую полосу. */
html { overflow-x: hidden; overflow-y: scroll; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 82% -12%, rgba(139,92,255,.20), transparent 60%),
    radial-gradient(900px 620px at -12% 112%, rgba(41,231,255,.16), transparent 60%),
    radial-gradient(700px 520px at 50% 120%, rgba(255,77,141,.12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Перспективная неоновая сетка + мягкие сканлайны (статично, без нагрузки). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(139,92,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,231,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  opacity: .5;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  opacity: .35; mix-blend-mode: overlay;
}
#view, .toasts { position: relative; z-index: 1; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.12; margin: 0 0 .4em; font-family: var(--font-display); letter-spacing: .5px; }

::selection { background: rgba(139,92,255,.4); color: #fff; }

/* Доступная видимая фокус-рамка для клавиатуры. */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

/* ---------- Иконки (единый SVG-набор) ---------- */
.ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: inherit; flex: 0 0 auto; }
.ico svg { width: 1em; height: 1em; display: block; }

/* ---------- Анимированные «орбы» на фоне ---------- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .42; }
.orb-1 { width: 420px; height: 420px; background: #8b5cff; top: -120px; left: -80px; animation: float1 16s ease-in-out infinite; }
.orb-2 { width: 360px; height: 360px; background: #29e7ff; bottom: -140px; right: -60px; animation: float2 20s ease-in-out infinite; }
.orb-3 { width: 300px; height: 300px; background: #ff4d8d; top: 40%; left: 58%; opacity: .22; animation: float1 24s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,-30px); } }

/* ---------- Раскладка / утилиты ---------- */
/* ширину считаем в % от области контента (без полосы прокрутки), а не в vw
   (vw включает полосу) — так центрирование margin:auto не «прыгает». */
.container { width: min(1100px, 92%); margin: 0 auto; }
.center { display: grid; place-items: center; min-height: 100vh; padding: 32px 0; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.muted { color: var(--muted); }
.tiny { font-size: 13px; }
.spacer { flex: 1; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Кнопки ---------- */
.btn {
  --bg-btn: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--bg-btn); color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s, color .2s;
}
.btn .ico { font-size: 1.15em; }
.btn:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 1px rgba(139,92,255,.25), 0 8px 24px rgba(139,92,255,.18); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { border: none; background: var(--grad); color: #0a0a14; font-weight: 700; box-shadow: 0 10px 30px rgba(139,92,255,.40), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-primary:hover { box-shadow: 0 16px 42px rgba(139,92,255,.6), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-ghost { background: transparent; }
.btn-danger { border-color: rgba(255,93,115,.5); color: #ffd0d7; background: rgba(255,93,115,.06); }
.btn-danger:hover { border-color: var(--bad); background: rgba(255,93,115,.14); box-shadow: 0 8px 24px rgba(255,93,115,.2); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 17px; border-radius: 14px; }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }

/* ---------- Карточки / стекло ---------- */
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.card-pad { padding: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: var(--grad-soft); border: 1px solid var(--border-2); color: var(--text);
  font-family: var(--font-mono);
}
.badge .ico { font-size: 1.2em; }
.badge-soft { background: var(--surface-2); }
.badge-good { color: var(--good); border-color: rgba(47,243,168,.45); background: rgba(47,243,168,.12); box-shadow: 0 0 18px rgba(47,243,168,.18); }
.badge-bad { color: var(--bad); border-color: rgba(255,93,115,.45); background: rgba(255,93,115,.12); }

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.label { font-size: 13px; color: var(--muted); font-weight: 600; }
.input {
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border-2);
  background: rgba(0,0,0,.32); color: var(--text); font: inherit; outline: none;
  transition: border-color .2s, box-shadow .2s; min-height: 44px;
}
.input::placeholder { color: var(--muted-2); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,255,.25); }
.input.code { letter-spacing: .35em; text-transform: uppercase; text-align: center; font-weight: 700; font-size: 20px; font-family: var(--font-mono); }
.form-error { color: var(--bad); font-size: 13px; min-height: 18px; margin-top: -6px; }

/* ---------- Навбар ---------- */
.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; margin-bottom: 8px;
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; }
.brand .logo { font-size: 26px; color: var(--accent-2); filter: drop-shadow(0 0 8px rgba(41,231,255,.55)); display: inline-flex; }
.brand .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.avatar {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; color: #0a0a14; background: var(--grad); cursor: pointer;
  border: 2px solid transparent; transition: border-color .2s, transform .12s, box-shadow .2s;
  flex: 0 0 auto; font-family: var(--font-mono);
}
.avatar:hover { border-color: #fff; transform: scale(1.05); box-shadow: var(--glow); }
.avatar-lg { width: 88px; height: 88px; font-size: 32px; border-radius: 22px; }

/* ---------- Hero / Welcome ---------- */
.hero { text-align: center; max-width: 660px; }
.hero .eyebrow { letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--accent-2); font-weight: 700; font-family: var(--font-mono); }
.hero h1 { font-size: clamp(38px, 6.4vw, 66px); margin-top: 12px; font-weight: 900; }
.hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 30px rgba(139,92,255,.4)); }
.hero p { color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero .actions { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Сетка игр ---------- */
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 22px 0 18px; }
.section-head h2 { font-size: 22px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; padding-bottom: 60px; }

.game-card {
  position: relative; overflow: hidden; cursor: pointer; padding: 22px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: transform .16s ease, border-color .2s, box-shadow .25s;
  display: flex; flex-direction: column; gap: 12px; min-height: 196px;
}
.game-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(420px 220px at 50% -20%, var(--card-glow, rgba(139,92,255,.4)), transparent 70%);
  pointer-events: none;
}
.game-card:hover { transform: translateY(-5px); border-color: var(--card-accent, var(--border-2)); box-shadow: var(--shadow); }
.game-card:hover::after { opacity: 1; }
.game-card:hover .game-ico { box-shadow: 0 0 26px var(--card-glow, rgba(139,92,255,.4)); transform: translateY(-1px); }

.game-ico {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  font-size: 30px; color: var(--card-accent, var(--accent));
  background: var(--card-tint, var(--surface-2)); border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: box-shadow .25s, transform .16s;
}
.game-card h3 { margin: 0; font-size: 18px; font-family: var(--font-display); font-weight: 700; letter-spacing: .3px; }
.game-card .tagline { color: var(--muted); font-size: 14px; flex: 1; line-height: 1.5; }
.game-card .card-type { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11px; font-family: var(--font-mono); color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; }
.game-card.soon { cursor: default; opacity: .55; }
.game-card.soon:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
.game-card.soon .game-ico { color: var(--muted-2); }

/* ---------- Подвал карточки: тип игры + онлайн ---------- */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-count { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--good); }
.live-count .live-lbl { color: var(--muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.live-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.72); } }

/* ---------- Панель «Сейчас в топе» ---------- */
.trending { position: relative; overflow: hidden; margin: 18px 0 4px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.trending::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 200px at 50% -60%, rgba(255,77,141,.16), transparent 70%); }
.trending-head { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.trending-head > .ico { color: var(--accent-3); font-size: 1.3em; filter: drop-shadow(0 0 8px rgba(255,77,141,.5)); }
.trending-head h2 { margin: 0; font-size: 18px; }
.trending-head .total { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.trending-head .total .ico { color: var(--accent-2); font-size: 1.1em; }
.trending-head .total .live-n { color: var(--text); font-weight: 700; }
.trending-list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trend-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: transform .14s ease, border-color .2s, box-shadow .25s, background .2s; }
.trend-item:hover { transform: translateY(-2px); border-color: var(--tc, var(--border-2)); background: var(--surface-2); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.trend-rank { flex: 0 0 auto; width: 28px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--tc, var(--accent)); }
.trend-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; color: var(--tc, var(--accent)); background: var(--card-tint, var(--surface-2)); border: 1px solid var(--border-2); }
.trend-meta { min-width: 0; }
.trend-meta .t { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-meta .live-count { margin-top: 3px; }

/* ---------- Тулбар библиотеки (фильтр / сортировка) ---------- */
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 18px; }
.toolbar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: color .15s, background .15s, box-shadow .15s, transform .12s; }
.seg button .ico { font-size: 1.1em; }
.seg button:hover { color: var(--text); }
.seg button:active { transform: scale(.96); }
.seg button.active { color: #0a0a14; background: var(--grad); box-shadow: 0 6px 18px rgba(139,92,255,.32); }
.lib-count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ---------- Поиск по библиотеке ---------- */
.lib-search { position: relative; display: flex; align-items: center; margin: 18px 0 0; }
.lib-search-ico { position: absolute; left: 15px; font-size: 18px; color: var(--muted-2); pointer-events: none; }
.lib-search-input { flex: 1 1 auto; width: 100%; padding-left: 46px; padding-right: 46px; }
.lib-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.lib-search-clear {
  position: absolute; right: 8px; display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
.lib-search-clear .ico { font-size: 16px; }
.lib-search-clear:hover { color: var(--text); background: var(--surface); }
.lib-search.has-text .lib-search-clear { display: inline-flex; }

.lib-empty {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 30px 22px;
  border: 1px dashed var(--border-2); border-radius: 16px; background: rgba(0,0,0,.18);
}
.lib-empty .ico { font-size: 26px; color: var(--muted-2); flex: none; }
.lib-empty-title { font-weight: 700; color: var(--text); margin-bottom: 2px; }

@media (max-width: 680px) {
  .trending-list { grid-template-columns: 1fr; }
  .lib-count { margin-left: 0; width: 100%; }
}

/* ---------- Экран игры (отдельный «под-сайт») ---------- */
.game-shell { min-height: 100vh; display: flex; flex-direction: column; }
.game-topbar {
  display: flex; align-items: center; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.game-stage { flex: 1; display: grid; place-items: center; padding: 28px 0; }
.game-menu { text-align: center; max-width: 540px; }
.game-menu .game-ico {
  width: 92px; height: 92px; border-radius: 26px; font-size: 46px; margin: 0 auto 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08), 0 0 40px var(--card-glow, rgba(139,92,255,.35));
}
.game-menu h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
.game-menu p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.menu-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.mode-block { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); text-align: left; }
.mode-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .3px; }
.mode-head .ico { color: var(--accent-2); font-size: 1.25em; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 13px; margin: 4px 0; font-family: var(--font-mono); }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }

/* ---------- Комната мультиплеера ---------- */
.room-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.code-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-2); font-weight: 700;
  letter-spacing: .25em; font-size: 18px; font-family: var(--font-mono); color: var(--accent-2);
}
.code-chip-lg { font-size: 30px; letter-spacing: .34em; padding: 14px 24px 14px 28px; border-style: solid; }
.lobby-head { display: flex; align-items: center; gap: 10px; }
.lobby-head .ico { color: var(--accent-2); font-size: 22px; }
.players { display: flex; gap: 10px; flex-wrap: wrap; }
.player-pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.player-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.player-pill .mark { font-weight: 800; color: var(--accent-2); font-family: var(--font-mono); }

/* ---------- Крестики-нолики ---------- */
.ttt-board { display: grid; grid-template-columns: repeat(3, 96px); grid-template-rows: repeat(3, 96px); gap: 10px; margin: 22px auto; }
.ttt-cell {
  display: grid; place-items: center; font-size: 52px; font-weight: 800; cursor: pointer;
  border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border-2);
  transition: background .15s, transform .1s, box-shadow .2s; line-height: 1; font-family: var(--font-display);
}
.ttt-cell:hover:not(.filled) { background: rgba(139,92,255,.18); box-shadow: inset 0 0 20px rgba(139,92,255,.18); }
.ttt-cell.filled { cursor: default; }
.ttt-cell.x { color: #8ba6ff; text-shadow: 0 0 16px rgba(139,166,255,.6); }
.ttt-cell.o { color: #ff7eb6; text-shadow: 0 0 16px rgba(255,126,182,.6); }
.ttt-cell.win { background: rgba(47,243,168,.22); border-color: var(--good); box-shadow: 0 0 22px rgba(47,243,168,.35); }
.turn-banner { font-size: 18px; font-weight: 700; min-height: 26px; font-family: var(--font-display); letter-spacing: .3px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.turn-banner .ico { font-size: 1.15em; }

/* ---------- Aim trainer ---------- */
.arena {
  position: relative; width: min(560px, 90vw); height: 380px; border-radius: var(--radius);
  background: rgba(0,0,0,.34); border: 1px solid var(--border-2); overflow: hidden; cursor: crosshair;
  box-shadow: inset 0 0 60px rgba(139,92,255,.07);
}
.target {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 26px rgba(139,92,255,.7); cursor: pointer;
  transform: translate(-50%, -50%) scale(1); transition: transform .06s;
  display: grid; place-items: center; color: #0a0a14; font-weight: 800;
}
.target:active { transform: translate(-50%, -50%) scale(.85); }

/* ---------- HUD (общий для одиночных) ---------- */
.hud { display: flex; gap: 26px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.hud .stat { text-align: center; }
.hud .stat b { font-size: 26px; display: block; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud .stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); }

/* ---------- Профиль ---------- */
.profile-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 22px; }
.stat-card { padding: 18px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.stat-card b { font-size: 28px; display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stat-card span { color: var(--muted); font-size: 13px; }

/* ---------- Тосты ---------- */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  padding: 12px 18px; border-radius: 12px; background: #15152a; border: 1px solid var(--border-2);
  box-shadow: var(--shadow); font-weight: 600; animation: toastIn .25s ease both; max-width: 90vw;
}
.toast.good { border-color: rgba(47,243,168,.5); }
.toast.bad { border-color: rgba(255,93,115,.5); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Выбор сложности ---------- */
.diff { display: flex; flex-direction: column; gap: 9px; margin: 2px 0; }
.diff-label { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.diff-label .ico { color: var(--accent-2); }
.diff-seg { display: flex; gap: 8px; justify-content: center; }
.diff-chip {
  flex: 1 1 0; min-width: 0; padding: 11px 10px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer;
  font-family: var(--font-display); letter-spacing: .3px; font-size: 14px;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.diff-chip:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.diff-chip.active { color: #0a0a14; background: var(--grad); border-color: transparent; box-shadow: 0 8px 22px rgba(139,92,255,.35); }
.diff-hint { min-height: 17px; text-align: center; }
.diff-badge { font-family: var(--font-mono); }
.diff-badge .ico { color: var(--accent-2); }

/* ============================================================
   Анимации (единый слой — оживляет все экраны и игры)
   ============================================================ */
@keyframes cardIn   { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes menuIn   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes badgePop { 0% { opacity: 0; transform: scale(.5); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes targetIn { 0% { transform: translate(-50%,-50%) scale(0); } 70% { transform: translate(-50%,-50%) scale(1.18); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes winPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,243,168,0); } 50% { box-shadow: 0 0 22px 2px rgba(47,243,168,.6); } }
@keyframes glowPulse{ 0%,100% { box-shadow: 0 0 16px rgba(47,243,168,.18); } 50% { box-shadow: 0 0 30px rgba(47,243,168,.45); } }
@keyframes tilePop  { 0% { transform: scale(.4); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes fxPop    { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes fxShake  { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes fxFlash  { 0% { filter: brightness(2.4); } 100% { filter: none; } }
@keyframes fxBump   { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* entrance / idle on shared components */
.game-card   { animation: cardIn .42s cubic-bezier(.2,.8,.3,1.1) backwards; }
.game-menu   { animation: menuIn .4s ease both; }
.game-menu .game-ico { animation: floaty 3.4s ease-in-out infinite; }
.game-stage > .card { animation: menuIn .34s ease both; }
.badge-good  { animation: badgePop .5s cubic-bezier(.2,1.5,.4,1) both, glowPulse 2.2s ease-in-out .55s infinite; }
.turn-banner { animation: bannerIn .26s ease both; }
.target      { animation: targetIn .14s ease backwards; }
.ttt-cell.win, .c4-cell.win { animation: winPulse 1.1s ease-in-out infinite; }
.hud .stat b { transition: transform .15s ease, color .2s ease; }
.code-chip   { animation: glowPulse 2.6s ease-in-out infinite; }

/* пресс-фидбэк и наведение */
.btn:active  { transform: translateY(0) scale(.95); }
.game-card:active { transform: translateY(-2px) scale(.985); }
.ico svg     { transition: transform .15s ease; }
.btn:hover .ico svg { transform: scale(1.12); }

/* разовые эффекты из App.fx */
.fx-pop   { animation: fxPop .4s ease; }
.fx-shake { animation: fxShake .45s ease; }
.fx-flash { animation: fxFlash .5s ease; }
.fx-bump  { animation: fxBump .3s ease; display: inline-block; }
.g48-pop  { animation: tilePop .18s ease; }

/* ---------- Адаптив ---------- */
@media (max-width: 560px) {
  .ttt-board { grid-template-columns: repeat(3, 80px); grid-template-rows: repeat(3, 80px); }
  .ttt-cell { font-size: 42px; }
  .card-pad { padding: 20px; }
  .hud { gap: 18px; }
}

/* ---------- Уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .orb { animation: none; }
}

/* ============================================================
   Топы, таблицы лидеров, публичный профиль
   ============================================================ */
/* — навигация в шапке — */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link .ico { color: var(--accent-2); }
.nav-link.active { color: var(--text); background: var(--surface-2); border-color: var(--border-2); }
.nav-link.active .ico { color: var(--accent); }

.avatar-sm { width: 34px; height: 34px; font-size: 13px; border-radius: 11px; flex: 0 0 auto; }

/* — таблица лидеров (переиспользуемый компонент) — */
.lb { display: flex; flex-direction: column; gap: 8px; }
.lb-empty { padding: 18px 4px; text-align: center; }
.lb-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); transition: background .16s, border-color .16s, transform .12s;
}
.lb-link { cursor: pointer; }
.lb-link:hover { background: var(--surface-2); border-color: var(--accent); transform: translateX(2px); }
.lb-rank { width: 26px; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; }
.lb-num { font-family: var(--font-mono); color: var(--muted-2); font-weight: 700; font-size: 14px; }
.lb-medal { font-size: 20px; }
.lb-medal-1 { color: #ffd24d; filter: drop-shadow(0 0 6px rgba(255,210,77,.6)); }
.lb-medal-2 { color: #cfd6f3; }
.lb-medal-3 { color: #e09a5b; }
.lb-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-name b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { color: var(--muted); font-size: 12px; }
.lb-val { flex: 0 0 auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.lb-me { border-color: var(--border-2); box-shadow: inset 0 0 0 1px rgba(139,92,255,.25); }
.lb-top-1 { background: linear-gradient(90deg, rgba(255,210,77,.12), transparent); }

.lb-tabs { flex-wrap: wrap; margin-bottom: 12px; }
.lb-hint { text-align: center; min-height: 16px; margin-bottom: 14px; }

/* — карточка «Топ игроков» в меню игры (правая колонка) — */
/* Меню остаётся ровно по центру страницы, а топ прижат справа и НЕ тянет
   меню к себе: равные боковые колонки (1fr) удерживают центр. */
.game-cols { display: grid; grid-template-columns: 1fr minmax(auto, 540px) 1fr; align-items: start; gap: 26px; width: 100%; }
.game-cols .game-menu { grid-column: 2; }
.game-side { grid-column: 3; justify-self: end; width: min(330px, 100%); text-align: left; }
@media (max-width: 900px) {
  .game-cols { grid-template-columns: 1fr; justify-items: center; }
  .game-cols .game-menu, .game-side { grid-column: 1; }
  .game-side { justify-self: center; width: min(540px, 100%); }
}
.side-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; letter-spacing: .5px; margin-bottom: 14px; }
.side-head .ico { color: #ffd24d; }

/* — достижения, любимые игры, рекорды (профиль) — */
.ach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ach .ico { font-size: 1.1em; }
.ach-gold { color: #ffd24d; border-color: rgba(255,210,77,.5); background: rgba(255,210,77,.12); box-shadow: 0 0 16px rgba(255,210,77,.18); }

.fav-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 11px;
  border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s;
}
.fav-chip:hover { border-color: var(--accent); background: var(--surface-3); transform: translateY(-1px); }
.fav-chip .ico { color: var(--accent-2); }
.fav-count { color: var(--muted); font-size: 12px; font-family: var(--font-mono); }

.rec-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.rec-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.rec-row:hover { background: var(--surface-2); border-color: var(--accent); transform: translateX(2px); }
.rec-place { width: 40px; flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; color: var(--muted-2); }
.rec-place-1 { color: #ffd24d; }
.rec-place-2 { color: #cfd6f3; }
.rec-place-3 { color: #e09a5b; }
.rec-ico { color: var(--accent-2); flex: 0 0 auto; }
.rec-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rec-val { flex: 0 0 auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent-2); white-space: nowrap; }

@media (max-width: 560px) {
  .navbar { gap: 8px; }
  .navbar .brand span { display: none; }
  .nav-links { gap: 2px; }
  .nav-link { padding: 8px 10px; }
  .game-cols { gap: 16px; }
}

/* ============================================================
   Скроллбар в стиле сайта (синтвейв). Применяется ко всем
   прокручиваемым областям: страница, списки, поля игр.
   ============================================================ */
* {
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: var(--accent) var(--surface);  /* ползунок, дорожка — Firefox */
}
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track {
  background: var(--surface);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: 3px solid transparent;     /* прозрачный отступ — ползунок «парит» над дорожкой */
  background-clip: padding-box;
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent));
}
*::-webkit-scrollbar-thumb:active {
  background-image: none;
  background-color: var(--accent-3);
}
*::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 560px) {
  *::-webkit-scrollbar { width: 9px; height: 9px; }
  *::-webkit-scrollbar-thumb { border-width: 2px; }
}