/* ============================================================
   NEON://SNAKE — cyberpunk styles (SPEC §6)
   Palette: bg #04050c, panels rgba(10,14,30,.85),
   cyan #00f0ff, magenta #ff2bd6, yellow #ffe600,
   danger #ff2d55, orange #ff7a00, green #00ff9d
   ============================================================ */

:root {
  --bg: #04050c;
  --panel: rgba(10, 14, 30, .85);
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --yellow: #ffe600;
  --danger: #ff2d55;
  --orange: #ff7a00;
  --green: #00ff9d;
  --grid-line: rgba(0, 240, 255, .07);
  --text: #d7f7ff;
  --dim: rgba(125, 227, 255, .55);
  --pink: var(--magenta);
  --fg: var(--text);
  --font: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;   /* iOS: никакой «резинки» и перехвата свайпов */
  touch-action: manipulation;  /* iOS: без двойного тапа-зума по интерфейсу */
  -webkit-tap-highlight-color: transparent;
}

/* Ambient neon glow behind the stage */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(0, 240, 255, .06), transparent 70%),
    radial-gradient(40% 40% at 82% 88%, rgba(255, 43, 214, .05), transparent 70%);
  pointer-events: none;
}

/* ---------- Layout: HUD bar above the arena ----------
   Feature T13: --field-ratio / --field-aspect are set by game.js
   from the live grid; the fallbacks are the classic 30x20 (1.5). */

.layout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(900px, 96vw, calc((100vh - 72px) * var(--field-aspect, 1.5)));
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--field-ratio, 3 / 2);
  background: var(--bg);
  border: 1px solid rgba(0, 240, 255, .25);
  box-shadow:
    0 0 40px rgba(0, 240, 255, .12),
    0 0 120px rgba(255, 43, 214, .06);
  overflow: hidden;
  user-select: none;
}

#game-canvas {
  display: block;
  touch-action: none;          /* iOS: свайпы по полю — только игре */
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.hidden {
  display: none !important;
}

/* ---------- HUD ---------- */

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10, 14, 30, .92);
  border: 1px solid rgba(0, 240, 255, .25);
  box-shadow: 0 0 14px rgba(0, 240, 255, .08);
}

.hud-stats {
  display: flex;
  gap: 20px;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hud-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0, 240, 255, .65);
}

.hud-value {
  font-size: 18px;
  font-weight: 700;
}

#score {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, .5);
}

#best {
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 157, .5);
}

#level {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 43, 214, .5);
}

.hud-buttons {
  display: flex;
  gap: 8px;
}

/* ---------- Buttons: единая система — одна геометрия, акцент цветом.
   База 48px; .btn-xl 58px — ровно одна главная кнопка на экран;
   .btn-small — только инлайн-утилиты внутри строк (например, копирование) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--cyan);
  background: rgba(0, 240, 255, .04);
  border: 1px solid rgba(0, 240, 255, .7);
  min-height: 48px;
  padding: 10px 18px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0, 240, 255, .6);
  box-shadow:
    0 0 10px rgba(0, 240, 255, .18),
    inset 0 0 10px rgba(0, 240, 255, .06);
  transition: background .18s, color .18s, box-shadow .18s, transform .06s;
}

.btn:hover,
.btn:focus-visible {
  background: rgba(0, 240, 255, .14);
  box-shadow:
    0 0 22px rgba(0, 240, 255, .55),
    inset 0 0 14px rgba(0, 240, 255, .18);
  outline: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  color: var(--magenta);
  border-color: rgba(255, 43, 214, .8);
  background: rgba(255, 43, 214, .06);
  text-shadow: 0 0 8px rgba(255, 43, 214, .6);
  box-shadow:
    0 0 10px rgba(255, 43, 214, .2),
    inset 0 0 10px rgba(255, 43, 214, .06);
}

.btn:disabled {
  opacity: .45;
  cursor: default;
}

.btn:disabled:hover,
.btn:disabled:focus-visible {
  background: rgba(0, 240, 255, .04);
  box-shadow:
    0 0 10px rgba(0, 240, 255, .18),
    inset 0 0 10px rgba(0, 240, 255, .06);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: rgba(255, 43, 214, .16);
  box-shadow:
    0 0 22px rgba(255, 43, 214, .55),
    inset 0 0 14px rgba(255, 43, 214, .18);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1;
  color: var(--cyan);
  background: rgba(0, 240, 255, .04);
  border: 1px solid rgba(0, 240, 255, .7);
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0, 240, 255, .6);
  box-shadow:
    0 0 10px rgba(0, 240, 255, .18),
    inset 0 0 10px rgba(0, 240, 255, .06);
  transition: background .18s, color .18s, box-shadow .18s, transform .06s;
}

.btn-icon:hover,
.btn-icon:focus-visible {
  background: rgba(0, 240, 255, .14);
  box-shadow:
    0 0 22px rgba(0, 240, 255, .55),
    inset 0 0 14px rgba(0, 240, 255, .18);
  outline: none;
}

.btn-icon:active {
  transform: translateY(1px);
}

.btn-icon.muted {
  color: var(--danger);
  border-color: rgba(255, 45, 85, .7);
  text-shadow: 0 0 8px rgba(255, 45, 85, .5);
  box-shadow: 0 0 10px rgba(255, 45, 85, .18);
}

/* ---------- Screens over the canvas ---------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 12, .88);
  animation: screen-in .25s ease-out;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.panel {
  background: var(--panel);
  border: 1px solid rgba(0, 240, 255, .35);
  box-shadow:
    0 0 24px rgba(0, 240, 255, .12),
    inset 0 0 24px rgba(0, 240, 255, .04);
  padding: 36px 48px;
  text-align: center;
  max-width: 88%;
}

.panel-danger {
  border-color: rgba(255, 45, 85, .45);
  box-shadow:
    0 0 24px rgba(255, 45, 85, .14),
    inset 0 0 24px rgba(255, 45, 85, .05);
}

/* ---------- Title with glitch (doubling in magenta/cyan) ---------- */

.title {
  position: relative;
  z-index: 0; /* own stacking context for the negative-z pseudo layers */
  display: inline-block;
  margin: 0 0 6px;
  font-size: clamp(26px, 6.4vw, 58px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eafcff;
  text-shadow:
    0 0 6px var(--cyan),
    0 0 24px rgba(0, 240, 255, .55),
    0 0 60px rgba(0, 240, 255, .3);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  text-shadow: none;
}

.glitch::before {
  color: var(--magenta);
  z-index: -1;
  animation: glitch-magenta 3.2s infinite;
}

.glitch::after {
  color: var(--cyan);
  z-index: -2;
  animation: glitch-cyan 2.7s infinite;
}

/* Persistent slight doubling, with occasional hard slice-jumps */
@keyframes glitch-magenta {
  0%, 86%, 100% {
    transform: translate(-2px, 0);
    opacity: .55;
    clip-path: inset(0 0 0 0);
  }
  88% {
    transform: translate(-6px, 2px);
    opacity: .9;
    clip-path: inset(12% 0 58% 0);
  }
  90% {
    transform: translate(4px, -2px);
    opacity: .9;
    clip-path: inset(58% 0 8% 0);
  }
  92% {
    transform: translate(-3px, 1px);
    opacity: .8;
    clip-path: inset(36% 0 42% 0);
  }
  94% {
    transform: translate(-2px, 0);
    opacity: .55;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-cyan {
  0%, 90%, 100% {
    transform: translate(2px, 0);
    opacity: .55;
    clip-path: inset(0 0 0 0);
  }
  91% {
    transform: translate(5px, -2px);
    opacity: .9;
    clip-path: inset(48% 0 22% 0);
  }
  93% {
    transform: translate(-4px, 2px);
    opacity: .9;
    clip-path: inset(8% 0 66% 0);
  }
  95% {
    transform: translate(3px, 0);
    opacity: .8;
    clip-path: inset(62% 0 6% 0);
  }
  97% {
    transform: translate(2px, 0);
    opacity: .55;
    clip-path: inset(0 0 0 0);
  }
}

.subtitle {
  margin: 0 0 18px;
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 43, 214, .5);
}

.menu-best {
  margin: 0 0 22px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 157, .4);
}

.menu-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* вторичные пункты меню — сетка одинаковых кнопок 2 в ряд */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 380px);
  margin: 0 auto;
}

.menu-grid .btn {
  width: 100%;
  padding: 10px 8px;
  font-size: 12px;
  letter-spacing: 1px;
}

.hint {
  margin: 0;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(215, 247, 255, .45);
}

.screen-title {
  margin: 0 0 18px;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 240, 255, .6);
}

.screen-title.danger {
  color: var(--danger);
  text-shadow: 0 0 12px rgba(255, 45, 85, .6);
  animation: danger-pulse 1.6s infinite;
}

@keyframes danger-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .72;
  }
}

/* ---------- Controls table (SPEC §2) ---------- */

.controls-table {
  border-collapse: collapse;
  margin: 0 auto 22px;
  font-size: 13px;
  text-align: left;
}

.controls-table th {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid rgba(0, 240, 255, .4);
}

.controls-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--grid-line);
}

.controls-table tr:last-child td {
  border-bottom: none;
}

.controls-table td:first-child {
  color: #eafcff;
  font-weight: 700;
}

.controls-table td:nth-child(2) {
  color: var(--yellow);
}

.controls-table td:nth-child(3) {
  color: var(--green);
}

/* ---------- Game over stats ---------- */

.final-stats {
  display: flex;
  gap: 44px;
  justify-content: center;
  margin-bottom: 24px;
}

.final-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.final-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 14px rgba(255, 230, 0, .5);
}

.final-best {
  color: var(--green);
  text-shadow: 0 0 14px rgba(0, 255, 157, .5);
}

/* ---------- Boss bar ---------- */

.bossbar {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 56%;
  z-index: 6;
  text-align: center;
  pointer-events: none;
}

.bossname {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 43, 214, .6);
}

.bosstrack {
  height: 12px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid rgba(255, 45, 85, .7);
  box-shadow:
    0 0 12px rgba(255, 45, 85, .25),
    inset 0 0 6px rgba(255, 45, 85, .15);
}

.bossfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--danger), var(--orange));
  box-shadow: 0 0 10px rgba(255, 45, 85, .8);
  transition: width .25s ease;
}

/* ---------- Toast ---------- */

.toast {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 7;
  transform: translate(-50%, -50%) scale(.75);
  font-size: clamp(22px, 4.2vw, 40px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--yellow);
  text-shadow:
    0 0 10px rgba(255, 230, 0, .7),
    0 0 40px rgba(255, 230, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, 1.6, .4, 1);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Boss warning banner ---------- */

.boss-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 8;
  transform: translate(-50%, -50%);
  padding: 14px 34px;
  font-size: clamp(18px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--danger);
  background: var(--panel);
  border: 1px solid var(--danger);
  text-shadow: 0 0 12px rgba(255, 45, 85, .8);
  box-shadow:
    0 0 24px rgba(255, 45, 85, .45),
    inset 0 0 18px rgba(255, 45, 85, .12);
  pointer-events: none;
  animation:
    banner-in .45s cubic-bezier(.2, 1.4, .4, 1) both,
    banner-pulse 1.1s .45s infinite;
}

@keyframes banner-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes banner-pulse {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(255, 45, 85, .45),
      inset 0 0 18px rgba(255, 45, 85, .12);
  }
  50% {
    box-shadow:
      0 0 44px rgba(255, 45, 85, .85),
      inset 0 0 26px rgba(255, 45, 85, .25);
  }
}

/* ---------- CRT overlays: scanlines, vignette, noise ---------- */

.scanlines,
.vignette,
.noise {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .16) 0 1px,
    transparent 1px 3px
  );
}

/* Soft refresh band travelling down the screen */
.scanlines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 240, 255, .05),
    transparent
  );
  animation: scan-move 7s linear infinite;
}

@keyframes scan-move {
  from {
    top: -25%;
  }
  to {
    top: 105%;
  }
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
}

.noise {
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: noise-shift .35s steps(3) infinite;
}

@keyframes noise-shift {
  0% {
    background-position: 0 0;
  }
  33% {
    background-position: -30px 18px;
  }
  66% {
    background-position: 24px -26px;
  }
  100% {
    background-position: 0 0;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .panel {
    padding: 22px 18px;
  }

  .hud {
    padding: 6px 8px;
  }

  .hud-stats {
    gap: 10px;
  }

  .hud-value {
    font-size: 14px;
  }

  .hud-label {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .btn {
    padding: 9px 16px;
    font-size: 13px;
  }

  .controls-table {
    font-size: 11px;
  }

  .controls-table th,
  .controls-table td {
    padding: 6px 8px;
  }

  .final-stats {
    gap: 22px;
  }

  .final-value {
    font-size: 26px;
  }

  .bossbar {
    width: 72%;
  }
}

/* ============================================================
   Feature T8: lives counter + active effect chips in the HUD
   ============================================================ */

#lives {
  color: var(--danger);
  text-shadow: 0 0 8px rgba(255, 45, 85, .55);
}

/* effect chips sit in the HUD to the left of the buttons */
.hud-effects {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-right: 10px;
  min-height: 30px;
}

.fx-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  background: rgba(0, 240, 255, .05);
  border: 1px solid rgba(0, 240, 255, .35);
  overflow: hidden;
}

/* the timer strip at the bottom of a chip (width % set inline) */
.fx-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, .8);
}

.fx-surge {
  border-color: rgba(255, 230, 0, .55);
}

.fx-surge .fx-bar {
  background: var(--yellow);
  box-shadow: 0 0 6px rgba(255, 230, 0, .8);
}

.fx-slow {
  border-color: rgba(125, 227, 255, .55);
}

.fx-slow .fx-bar {
  background: #7de3ff;
  box-shadow: 0 0 6px rgba(125, 227, 255, .8);
}

.fx-magnet .fx-bar {
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, .8);
}

/* feature T9: cryogen freeze (icy white, distinct from the slow pickup) */
.fx-freeze {
  border-color: rgba(234, 250, 255, .7);
}

.fx-freeze .fx-bar {
  background: #eafaff;
  box-shadow: 0 0 6px rgba(234, 250, 255, .9);
}

/* ============================================================
   Feature T11: chips for the mystery effects (double / turbo / reverse)
   ============================================================ */

/* x2 score — green like the bank money */
.fx-double {
  border-color: rgba(0, 255, 157, .55);
}

.fx-double .fx-bar {
  background: var(--green);
  box-shadow: 0 0 6px rgba(0, 255, 157, .8);
}

/* x2 speed — hot orange */
.fx-turbo {
  border-color: rgba(255, 122, 0, .6);
}

.fx-turbo .fx-bar {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(255, 122, 0, .85);
}

/* reversed controls — warning red */
.fx-reverse {
  border-color: rgba(255, 45, 85, .65);
}

.fx-reverse .fx-bar {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(255, 45, 85, .85);
}

@media (max-width: 640px) {
  .hud-effects {
    gap: 4px;
    margin-right: 6px;
  }

  .fx-chip {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* ============================================================
   Feature T7: language screen + menu globe button (i18n)
   ============================================================ */

.lang-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
}

/* large neon tile buttons on the language screen */
.btn-lang-tile {
  min-width: 230px;
  padding: 18px 26px;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1.4;
}

/* compact 🌐 button under the menu grid: та же высота 48px, компактная */
#btn-lang {
  min-width: 64px;
  padding: 10px 0;
  font-size: 17px;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .lang-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn-lang-tile {
    width: 100%;
    max-width: 280px;
  }
}

/* ============================================================
   Feature T10: leaderboard screen + gameover name save
   ============================================================ */

.board-table {
  border-collapse: collapse;
  margin: 0 auto 22px;
  font-size: 13px;
  text-align: left;
}

.board-table th {
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid rgba(0, 240, 255, .4);
}

.board-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--grid-line);
  white-space: nowrap;
}

.board-table tbody tr:last-child td {
  border-bottom: none;
}

.board-table th:first-child,
.board-table td:first-child {
  text-align: center;
}

.board-table .bd-place {
  color: rgba(215, 247, 255, .55);
}

.board-table .bd-name {
  color: #eafcff;
  font-weight: 700;
}

.board-table .bd-score {
  color: var(--yellow);
}

.board-table .bd-lvl {
  color: var(--magenta);
}

.board-table .bd-date {
  color: rgba(215, 247, 255, .55);
}

/* top-3 rows shine a bit brighter */
.board-table tr.bd-top td {
  text-shadow: 0 0 8px rgba(0, 240, 255, .3);
}

.board-table tr.bd-top .bd-place {
  color: var(--cyan);
  font-weight: 700;
}

.board-table .board-empty {
  padding: 18px 30px;
  text-align: center;
  letter-spacing: 3px;
  color: rgba(215, 247, 255, .45);
}

.board-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

/* feature T14: global/local mode badge (+"loading…" strip) under the
   board title — muted cyan, only present in global mode */
.board-mode {
  display: block;
  margin: -8px 0 14px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(0, 240, 255, .5);
}

.board-mode + .board-mode {
  margin: -12px 0 14px;
}

/* small danger-tinted "Clear" (double-click confirm) */
.btn-small {
  min-height: 40px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 1px;
}

.btn-danger {
  color: var(--danger);
  border-color: rgba(255, 45, 85, .7);
  background: rgba(255, 45, 85, .06);
  text-shadow: 0 0 8px rgba(255, 45, 85, .55);
  box-shadow:
    0 0 10px rgba(255, 45, 85, .18),
    inset 0 0 10px rgba(255, 45, 85, .06);
}

.btn-danger:hover,
.btn-danger:focus-visible {
  background: rgba(255, 45, 85, .16);
  box-shadow:
    0 0 22px rgba(255, 45, 85, .5),
    inset 0 0 14px rgba(255, 45, 85, .18);
  outline: none;
}

/* armed "Sure?" state of the confirm double-click */
.btn-danger.sure {
  background: rgba(255, 45, 85, .25);
  animation: danger-pulse 1s infinite;
}

/* gameover: top-10 name save block */
.score-save {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: rgba(0, 240, 255, .04);
  border: 1px solid rgba(0, 240, 255, .4);
  box-shadow:
    0 0 14px rgba(0, 240, 255, .1),
    inset 0 0 12px rgba(0, 240, 255, .05);
}

.save-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 157, .5);
}

.save-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.player-name {
  width: 190px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 1px;
  color: #eafcff;
  background: rgba(4, 5, 12, .9);
  border: 1px solid rgba(0, 240, 255, .7);
  box-shadow:
    0 0 10px rgba(0, 240, 255, .18),
    inset 0 0 8px rgba(0, 240, 255, .08);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.player-name:focus {
  border-color: var(--cyan);
  box-shadow:
    0 0 18px rgba(0, 240, 255, .45),
    inset 0 0 10px rgba(0, 240, 255, .12);
}

@media (max-width: 640px) {
  .board-table {
    font-size: 11px;
  }

  .board-table th,
  .board-table td {
    padding: 5px 8px;
  }

  .player-name {
    width: 150px;
    padding: 9px 10px;
    font-size: 14px;
  }
}

/* ============================================================
   Feature T12: portrait D-pad (SPEC §2 touch controls)
   ============================================================ */

/* hidden by default: desktop and landscape steer with the keyboard */
.dpad {
  display: none;
}

/* neon tile in the .btn idiom: cyan frame, glow, fill on press */
.dpad-btn {
  min-height: 64px;
  font-family: var(--font);
  font-size: 22px;
  line-height: 1;
  color: var(--cyan);
  background: rgba(0, 240, 255, .04);
  border: 1px solid rgba(0, 240, 255, .7);
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0, 240, 255, .6);
  box-shadow:
    0 0 10px rgba(0, 240, 255, .18),
    inset 0 0 10px rgba(0, 240, 255, .06);
  transition: background .18s, color .18s, box-shadow .18s, transform .06s;
  user-select: none;
  -webkit-user-select: none;
  /* без лупилки/меню длинного нажатия iOS на быстрых сериях тычков */
  -webkit-touch-callout: none;
  /* none, не manipulation: прокрутка запрещена, и iOS не может
     отменить нажатие (pointercancel), сдвинув палец на 2-3px */
  touch-action: none;
}

.dpad-btn:active {
  background: rgba(0, 240, 255, .25);
  box-shadow:
    0 0 26px rgba(0, 240, 255, .65),
    inset 0 0 16px rgba(0, 240, 255, .25);
  transform: translateY(1px);
}

.dpad-up {
  grid-area: up;
}

.dpad-left {
  grid-area: left;
}

.dpad-down {
  grid-area: down;
}

.dpad-right {
  grid-area: right;
}

@media (orientation: portrait) and (max-width: 1100px) {
  /* мобильная вёрстка: шапка вверху, поле в середине, D-pad прижат к низу */
  body {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 6px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* поле тянется на всё свободное место между шапкой и D-pad
     (резерв: hud ~52 + D-pad ~230 + отступы); T13: пропорции арены — от живой сетки */
  .layout {
    width: min(96vw, calc((100vh - 330px) * var(--field-aspect, 0.7)));
  }

  .dpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      ". up ."
      "left down right";
    gap: 12px;
    width: min(440px, 94vw);
    margin: 0;
    margin-top: auto; /* прижат к низу экрана любого размера */
    /* 12px + safe-area: кнопка «вниз» обязана быть ВЫШЕ зоны жеста
       «домой» iPhone и нижней панели Telegram, иначе iOS съедает касания */
    margin-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px));
  }

  /* внутри Telegram на iOS снизу висит панель приложения — ещё запас */
  body.in-telegram .dpad {
    margin-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  }

  .dpad-btn {
    min-height: 74px;
    font-size: 26px;
  }

  /* пальце-ориентированные кнопки HUD */
  .hud .btn-icon {
    width: 42px;
    height: 36px;
    font-size: 17px;
  }

  /* экраны меню/паузы/гейм-овера — на весь телефон:
     полоса канваса слишком низка для панелей, они не должны толпиться */
  .screen {
    position: fixed;
    z-index: 50;
    padding: 16px;
  }

  .panel {
    padding: 20px 16px;
    max-width: min(92vw, 420px);
    max-height: 86vh;
    overflow-y: auto;
  }

  .menu-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .menu-buttons .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* сетка и «🌐» тянутся на всю колонку меню */
  .menu-grid {
    width: 100%;
  }

  .menu-grid .btn {
    font-size: 12px;
    padding: 10px 8px;
  }

  #btn-lang {
    width: 72px;
    margin: 0 auto;
  }

  /* одинаковые полноширинные кнопки по всем экранам */
  .panel > .btn {
    width: 100%;
  }

  .board-buttons {
    flex-direction: column;
  }

  .lang-buttons {
    gap: 10px;
  }

  .controls-table {
    font-size: 11px;
  }

  #player-name {
    width: 100%;
    margin: 8px 0;
  }
}

/* ============================================================
   Feature T15: Telegram Mini App integration (CS.TG, SPEC §15)
   ============================================================ */

/* Telegram-only elements (the gameover 📤 share button) stay hidden
   everywhere else; CS.TG.init() tags <body> with 'in-telegram'
   when window.Telegram is present */
.tg-only {
  display: none;
}

body.in-telegram .tg-only {
  display: inline-block;
}

/* ============================================================
   Feature T16: achievements — unlock toast + screen grid
   ============================================================ */

/* the unlock toast is created by CS.Ach itself and floats above
   everything (screens included): fixed, top-center, yellow frame */
#ach-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 80;
  transform: translateX(-50%) translateY(-12px);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--yellow);
  background: var(--panel);
  border: 1px solid var(--yellow);
  text-shadow: 0 0 10px rgba(255, 230, 0, .7);
  box-shadow:
    0 0 24px rgba(255, 230, 0, .35),
    inset 0 0 14px rgba(255, 230, 0, .08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
}

#ach-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* "N of 13" header under the screen title */
.ach-count {
  margin: -8px 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 230, 0, .7);
  text-shadow: 0 0 8px rgba(255, 230, 0, .3);
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 560px;
  text-align: left;
}

/* locked card: dim dashed outline, the condition stays readable */
.ach-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "star name"
    "star desc";
  column-gap: 9px;
  row-gap: 2px;
  align-items: start;
  padding: 11px 13px;
  background: rgba(4, 5, 12, .55);
  border: 1px dashed rgba(215, 247, 255, .22);
}

.ach-card.unlocked {
  background: rgba(255, 230, 0, .05);
  border: 1px solid rgba(255, 230, 0, .55);
  box-shadow:
    0 0 14px rgba(255, 230, 0, .12),
    inset 0 0 10px rgba(255, 230, 0, .05);
}

.ach-star {
  grid-area: star;
  font-size: 17px;
  line-height: 1.2;
  color: rgba(215, 247, 255, .3);
}

.ach-card.unlocked .ach-star {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 230, 0, .8);
}

.ach-name {
  grid-area: name;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(215, 247, 255, .5);
}

.ach-card.unlocked .ach-name {
  color: #eafcff;
  text-shadow: 0 0 8px rgba(255, 230, 0, .25);
}

.ach-desc {
  grid-area: desc;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(215, 247, 255, .45);
}

.ach-card.unlocked .ach-desc {
  color: rgba(215, 247, 255, .7);
}

@media (max-width: 640px) {
  .ach-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* ============================================================
   Feature T17: skins screen — swatch grid (SPEC §17)
   ============================================================ */

/* 7 swatches flow into a 4×2 grid (the last cell stays empty) */
.skins-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 640px;
}

/* the swatch is a button in the neon-frame idiom; the active skin
   gets the bright yellow frame, locked ones go dashed and dim */
.skin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px 10px;
  font-family: var(--font);
  color: var(--text);
  background: rgba(4, 5, 12, .55);
  border: 1px solid rgba(0, 240, 255, .3);
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .06s;
}

.skin-card:hover:not(.locked),
.skin-card:focus-visible:not(.locked) {
  border-color: rgba(0, 240, 255, .7);
  box-shadow:
    0 0 16px rgba(0, 240, 255, .3),
    inset 0 0 10px rgba(0, 240, 255, .06);
  outline: none;
}

.skin-card:active:not(.locked) {
  transform: translateY(1px);
}

.skin-card.active {
  border-color: rgba(255, 230, 0, .75);
  box-shadow:
    0 0 18px rgba(255, 230, 0, .3),
    inset 0 0 12px rgba(255, 230, 0, .07);
}

.skin-card.locked {
  cursor: default;
  border-style: dashed;
  border-color: rgba(215, 247, 255, .22);
}

.skin-card.locked .skin-preview {
  opacity: .25;
  filter: grayscale(.8);
}

/* the mini snake: 5 squares, the head is slightly larger and glows
   (colors + the head box-shadow are set inline by ui.js) */
.skin-preview {
  display: flex;
  gap: 3px;
  align-items: center;
}

.skin-seg {
  width: 13px;
  height: 13px;
  border-radius: 3px;
}

.skin-seg.head {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}

.skin-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d7f7ff;
}

.skin-card.locked .skin-name {
  color: rgba(215, 247, 255, .45);
}

/* ✓ of the active skin / 🔒 of a locked one */
.skin-mark {
  font-size: 12px;
  line-height: 1;
}

.skin-card.active .skin-mark {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, .7);
}

.skin-card.locked .skin-mark {
  color: rgba(215, 247, 255, .4);
}

/* the unlock condition under a locked swatch */
.skin-cond {
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .5px;
  color: rgba(215, 247, 255, .4);
}

@media (max-width: 640px) {
  .skins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 320px;
  }
}

/* ============================================================
   Feature T19: meta-progression — upgrades screen + chips toast
   ============================================================ */

/* the "+N CHIPS" toast fires together with the gameover screen and
   must stay readable above the overlays (screens: z-index 10,
   portrait screens: z-index 50) */
.toast {
  z-index: 55;
}

/* "◈ N" chip balance under the upgrades screen title */
.upg-chips {
  margin: -8px 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 230, 0, .5);
}

/* 2x2 upgrade cards: name / description / pips + price / buy */
.upg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 620px;
  text-align: left;
}

.upg-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(4, 5, 12, .55);
  border: 1px solid rgba(0, 240, 255, .3);
}

/* a fully bought upgrade gets the green "done" frame */
.upg-card.maxed {
  border-color: rgba(0, 255, 157, .45);
}

.upg-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #eafcff;
}

.upg-desc {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(215, 247, 255, .5);
}

/* the level pips (◾◾◽) and the next-level price share one row */
.upg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.upg-level {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyan);
}

.upg-cost {
  font-size: 12px;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, .4);
}

.upg-cost.max {
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 157, .4);
}

.upg-buy {
  margin-top: 4px;
}

/* the buy button: dimmed while the next level cannot be paid for
   (it then shows the chip balance) or the upgrade is maxed */
.btn.upg-buy.dim {
  color: rgba(215, 247, 255, .4);
  border-color: rgba(0, 240, 255, .25);
  background: rgba(0, 240, 255, .02);
  text-shadow: none;
  box-shadow: none;
  cursor: default;
}

.btn.upg-buy.dim:hover,
.btn.upg-buy.dim:focus-visible {
  background: rgba(0, 240, 255, .02);
  box-shadow: none;
  outline: none;
}

@media (max-width: 640px) {
  .upg-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

/* ============================================================
   Feature T20: daily challenge — menu line under the buttons
   ============================================================ */

/* "ЧЕЛЛЕНДЖ ДНЯ: <название> · Сегодня: N" — yellow like the score,
   uppercase like the surrounding menu typography */
.daily-line {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, .35);
}

/* ============================================================
   Feature T21: separate music / sfx volume sliders (SPEC §21)
   ============================================================ */

/* compact two-row block right under the menu buttons; lives inside
   #screen-menu, so the language / pause screens never show it */
.volume-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, 82%);
  margin: -6px auto 14px;
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.volume-label {
  width: 76px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  color: rgba(0, 240, 255, .65);
}

/* thin neon slider: cyan accent, hairline track, glowing dot */
.volume-slider {
  flex: 1;
  height: 14px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
  background: transparent;
}

.volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(0, 240, 255, .25);
  box-shadow: inset 0 0 4px rgba(0, 240, 255, .15);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  background: var(--cyan);
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 240, 255, .8);
}

.volume-slider::-moz-range-track {
  height: 3px;
  background: rgba(0, 240, 255, .25);
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--cyan);
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 240, 255, .8);
}

.volume-slider:focus-visible {
  outline: 1px solid rgba(0, 240, 255, .6);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .volume-box {
    gap: 6px;
    margin: -4px auto 12px;
  }

  .volume-label {
    width: 64px;
    font-size: 9px;
    letter-spacing: 1px;
  }
}

/* ============================================================
   Feature T24: online duel lobby + result screen (SPEC §22)
   ============================================================ */

/* the two lobby blocks (create / join) stack in one column */
.duel-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.duel-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: left;
  color: rgba(0, 240, 255, .65);
}

.duel-join-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

/* the 4-char code input: wide mono letters, always uppercase */
.duel-code-input {
  width: 158px;
  padding: 10px 6px 10px 14px;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  text-transform: uppercase;
  color: #eafcff;
  background: rgba(4, 5, 12, .9);
  border: 1px solid rgba(0, 240, 255, .7);
  box-shadow:
    0 0 10px rgba(0, 240, 255, .18),
    inset 0 0 8px rgba(0, 240, 255, .08);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.duel-code-input:focus {
  border-color: var(--cyan);
  box-shadow:
    0 0 18px rgba(0, 240, 255, .45),
    inset 0 0 10px rgba(0, 240, 255, .12);
}

/* the created room block */
.duel-room {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 16px;
}

/* the deep-link line under the code */
.duel-link {
  margin: 0;
  max-width: 100%;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(215, 247, 255, .6);
  word-break: break-all;
  user-select: all;
}

.duel-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.duel-actions .btn {
  width: 100%;
}

/* the «СКОПИРОВАНО» flash next to the copy button */
.duel-copied {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 157, .5);
}

/* clipboard fallback: the link, revealed pre-selected */
.duel-link-copy {
  width: min(340px, 80vw);
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 11px;
  color: #eafcff;
  background: rgba(4, 5, 12, .9);
  border: 1px solid rgba(0, 240, 255, .7);
  outline: none;
}

/* the waiting status: ХОСТ/ГОСТЬ · ждём соперника… + live dots */
.duel-wait {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, .5);
}

.duel-role {
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 43, 214, .5);
}

.duel-role::after {
  content: '·';
  margin-left: 8px;
  color: rgba(215, 247, 255, .4);
  text-shadow: none;
}

.duel-dots i {
  font-style: normal;
  animation: duel-dot 1.2s infinite;
}

.duel-dots i:nth-child(2) {
  animation-delay: .2s;
}

.duel-dots i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes duel-dot {
  0%, 60%, 100% {
    opacity: .15;
  }
  30% {
    opacity: 1;
  }
}

/* the inline network error strip (duelErr*) */
.duel-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--danger);
  background: rgba(255, 45, 85, .06);
  border: 1px solid rgba(255, 45, 85, .6);
  text-shadow: 0 0 8px rgba(255, 45, 85, .4);
}

/* ---------- the result screen ---------- */

/* the big «2:1» score */
.duel-score {
  margin: 0 0 22px;
  font-size: clamp(40px, 9vw, 72px);
  font-weight: 700;
  letter-spacing: 10px;
  color: var(--yellow);
  text-shadow: 0 0 24px rgba(255, 230, 0, .5);
}

/* result title colors: win = green, loss/left = red, draw = yellow */
.duel-res-win {
  color: var(--green);
  text-shadow: 0 0 12px rgba(0, 255, 157, .6);
}

.duel-res-loss,
.duel-res-left {
  color: var(--danger);
  text-shadow: 0 0 12px rgba(255, 45, 85, .6);
}

.duel-res-left {
  animation: danger-pulse 1.6s infinite;
}

/* the pressed «РЕВАНШ» waits dimmed («ждём соперника…») */
.btn.dim {
  color: rgba(215, 247, 255, .4);
  border-color: rgba(0, 240, 255, .25);
  background: rgba(0, 240, 255, .02);
  text-shadow: none;
  box-shadow: none;
  cursor: default;
}

.btn.dim:hover,
.btn.dim:focus-visible {
  background: rgba(0, 240, 255, .02);
  box-shadow: none;
  outline: none;
}

@media (max-width: 640px) {
  .duel-code {
    gap: 8px;
  }

  .duel-code-input {
    width: 138px;
    font-size: 18px;
    letter-spacing: 6px;
  }

  .duel-join-row {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   Feature T25: local duel history (SPEC §22 sociology pack 2)
   the lobby streak badge, the battles screen rows, the brag button
   ============================================================ */

/* the «МОИ БОИ» peek under the join-by-code block */
.duel-battles-btn {
  width: 100%;
}

/* the «🔥 N ПОДРЯД» badge under the lobby role line */
.duel-streak {
  margin: 0 0 14px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(255, 230, 0, .06);
  border: 1px solid rgba(255, 230, 0, .7);
  text-shadow: 0 0 10px rgba(255, 230, 0, .6);
  box-shadow:
    0 0 14px rgba(255, 230, 0, .25),
    inset 0 0 10px rgba(255, 230, 0, .06);
  animation: streak-glow 2.2s ease-in-out infinite;
}

@keyframes streak-glow {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(255, 230, 0, .18),
      inset 0 0 8px rgba(255, 230, 0, .05);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 230, 0, .45),
      inset 0 0 12px rgba(255, 230, 0, .1);
  }
}

/* ---------- the battles screen ---------- */

/* the «ПОБЕДЫ: n · ПОРАЖЕНИЯ: n · 🔥 СЕРИЯ: n» line */
.battles-stats {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, .4);
}

/* the history rows: one mono line per battle */
.battles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(46vh, 430px);
  margin: 0 auto 18px;
  padding-right: 6px;
  overflow-y: auto;
  text-align: left;
}

.battle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 13px;
  background: rgba(4, 5, 12, .6);
  border: 1px solid rgba(0, 240, 255, .2);
}

/* the colored W/L/D square */
.battle-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid currentColor;
}

.battle-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eafcff;
}

/* the score sits to the right, the date after it, dimmer */
.battle-score {
  flex: none;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, .4);
}

.battle-date {
  flex: none;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(215, 247, 255, .5);
}

/* W = green, L = red, D = gray */
.battle-win .battle-mark {
  color: var(--green);
  background: rgba(0, 255, 157, .08);
  text-shadow: 0 0 8px rgba(0, 255, 157, .5);
}

.battle-loss .battle-mark {
  color: var(--danger);
  background: rgba(255, 45, 85, .08);
  text-shadow: 0 0 8px rgba(255, 45, 85, .5);
}

.battle-draw .battle-mark {
  color: rgba(215, 247, 255, .6);
  background: rgba(215, 247, 255, .05);
}

/* the whole row follows its marker mood */
.battle-win {
  border-color: rgba(0, 255, 157, .35);
}

.battle-loss {
  border-color: rgba(255, 45, 85, .35);
}

/* an empty history */
.battles-empty {
  margin: 0;
  padding: 18px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(215, 247, 255, .45);
  text-align: center;
}

@media (max-width: 640px) {
  .battle-row {
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .battle-mark {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .battle-date {
    font-size: 10px;
  }

  .battles-list {
    max-height: 42vh;
    gap: 5px;
  }

  .battles-stats {
    font-size: 11px;
    letter-spacing: 1px;
  }
}

/* T27b: identity line in the duel lobby */
.duel-youare {
  display: block;
  width: 100%;
  margin-top: 6px;
  color: #7de3ff;
  letter-spacing: 1px;
  font-size: 11px;
  text-shadow: 0 0 8px rgba(0, 240, 255, .4);
}


/* SPEC §28: VS-комната — одна колонка: состав → код → готовность */
.vs-room {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   SPEC §28 v2: лобби и VS-комната — карточный дизайн
   ============================================================ */

/* главная кнопка экрана: та же система, чуть выше и громче */
.btn-xl {
  min-height: 58px;
  width: 100%;
  font-size: 16px;
  letter-spacing: 2px;
}

.btn-ready-on {
  color: #00ff9d;
  border-color: rgba(0, 255, 157, .7);
  background: rgba(0, 255, 157, .07);
  box-shadow: 0 0 22px rgba(0, 255, 157, .25);
}

.btn-ghost {
  color: var(--dim);
  border-color: rgba(125, 227, 255, .25);
  background: transparent;
  text-shadow: none;
  box-shadow: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--text);
  border-color: rgba(125, 227, 255, .5);
  background: rgba(125, 227, 255, .05);
  box-shadow: none;
}

/* карточки ждущих: аватар · ник+★рейтинг·W:L · статусы */
.lobby-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.lobby-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-family: var(--font);
  background: linear-gradient(160deg, rgba(0, 240, 255, .06), rgba(0, 240, 255, .015));
  border: 1px solid rgba(0, 240, 255, .45);
  box-shadow: 0 0 14px rgba(0, 240, 255, .08);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}

.lobby-card:active {
  transform: scale(.985);
}

.lobby-card-pick {
  border-color: var(--pink);
  box-shadow: 0 0 22px rgba(255, 43, 214, .35);
  background: linear-gradient(160deg, rgba(255, 43, 214, .1), rgba(255, 43, 214, .02));
}

.lc-ava {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  color: #04121a;
  background: linear-gradient(140deg, #00f0ff, #00ff9d);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(0, 240, 255, .5);
}

.lc-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lc-name {
  font-size: 15px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-meta {
  font-size: 12px;
  color: var(--pink);
  letter-spacing: .5px;
}

.lc-st {
  flex: none;
  max-width: 34%;
  font-size: 10px;
  letter-spacing: .5px;
  color: rgba(125, 227, 255, .6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.lobby-empty {
  margin: 2px 0 10px;
  color: var(--dim);
  font-size: 12px;
}

.lobby-accept {
  width: 100%;
}

/* вход по коду: поле и кнопка одной высоты — единый композит-контрол */
.duel-join-inline {
  display: flex;
  gap: 8px;
  width: 100%;
}

.duel-join-inline .duel-code-input {
  flex: 1;
  min-height: 48px;
}

.duel-join-inline .btn {
  min-width: 96px;
}

/* ── VS-комната ── */
.vs-grid {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 10px 0;
}

.pcard {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid rgba(0, 240, 255, .45);
  background: linear-gradient(170deg, rgba(0, 240, 255, .07), transparent);
  box-shadow: 0 0 16px rgba(0, 240, 255, .1);
}

.pcard-foe {
  border-color: rgba(255, 138, 0, .55);
  background: linear-gradient(170deg, rgba(255, 138, 0, .08), transparent);
  box-shadow: 0 0 16px rgba(255, 138, 0, .12);
}

/* слот соперника: его место в сетке состава, пока он не пришёл */
.pcard-slot {
  border-style: dashed;
  border-color: rgba(125, 227, 255, .25);
  background: transparent;
  box-shadow: none;
}

.pcard-slot .pcard-ava {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.pcard-ava {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #04121a;
  background: linear-gradient(140deg, #00f0ff, #00ff9d);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(0, 240, 255, .55);
}

.pcard-ava-foe {
  background: linear-gradient(140deg, #ff8a00, #ff2d55);
  box-shadow: 0 0 18px rgba(255, 138, 0, .5);
}

.pcard-ava-slot {
  background: transparent;
  border: 1px dashed rgba(125, 227, 255, .35);
  color: rgba(125, 227, 255, .5);
  box-shadow: none;
}

.pcard-name {
  font-size: 13px;
  color: var(--fg);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-mid {
  flex: none;
  align-self: center;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--pink);
  text-shadow: 0 0 14px rgba(255, 43, 214, .6);
}

.ready-badge {
  flex: none;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 9px;
  border: 1px solid rgba(125, 227, 255, .3);
  color: var(--dim);
}

.ready-badge.ready-on {
  border-color: rgba(0, 255, 157, .8);
  color: #00ff9d;
  text-shadow: 0 0 8px rgba(0, 255, 157, .5);
  box-shadow: 0 0 12px rgba(0, 255, 157, .2);
  animation: readyPulse 1.2s ease-in-out infinite;
}

@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 157, .15); }
  50% { box-shadow: 0 0 16px rgba(0, 255, 157, .4); }
}

.duel-ready-hint {
  margin: 8px 0;
  font-size: 13px;
  color: #00ff9d;
  text-shadow: 0 0 8px rgba(0, 255, 157, .4);
}

/* код комнаты — компактная строка внутри VS: пластины слева, копия справа */
.duel-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(0, 240, 255, .3);
  background: rgba(0, 240, 255, .04);
}

.duel-code-inline {
  display: flex;
  gap: 4px;
  flex: 1;
}

.duel-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 32px;
  font-size: 17px;
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, .7);
  background: rgba(0, 240, 255, .07);
  text-shadow: 0 0 10px rgba(0, 240, 255, .7);
}

/* кнопка копирования в строке кода: компактная, в одну строку */
.duel-code-row .btn-small {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .5px;
}

/* номер сборки — строка в меню, под субтитлом */
.menu-build {
  margin: 2px 0 6px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 43, 214, .8);
  text-shadow: 0 0 8px rgba(255, 43, 214, .4);
}

/* ============================================================
   SPEC §28: дом-экран лобби — вертикальный ритм
   ============================================================ */

#duel-home {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* панель лобби: вертикальный ритм между дом-экраном / статусами / «Назад» */
#screen-duel .panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#duel-home .screen-title {
  margin-bottom: 2px;
}

/* «сейчас в лобби: N» — живой счётчик под заголовком */
.lobby-online {
  margin: -4px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
}

/* ============================================================
   SPEC §28: ПВП-хаб («МОИ БОИ») — рейтинг, задания, топ, статусы
   ============================================================ */

/* карточка моего рейтинга: бейдж лучшего статуса + ★рейтинг + W:L */
.pvp-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: rgba(255, 230, 0, .04);
  border: 1px solid rgba(255, 230, 0, .45);
  box-shadow:
    0 0 14px rgba(255, 230, 0, .1),
    inset 0 0 12px rgba(255, 230, 0, .04);
}

.pvp-rating-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  flex-wrap: wrap;
}

.pvp-badge {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px dashed rgba(125, 227, 255, .35);
}

.pvp-badge-on {
  color: var(--yellow);
  border-style: solid;
  border-color: rgba(255, 230, 0, .7);
  text-shadow: 0 0 8px rgba(255, 230, 0, .45);
  box-shadow: 0 0 12px rgba(255, 230, 0, .18);
}

.pvp-rating {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255, 230, 0, .45);
}

.pvp-record {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}

/* задания: дейлик + недельный */
.quests-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}

.quest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(4, 5, 12, .55);
  border: 1px solid rgba(0, 240, 255, .25);
}

.quest-label {
  font-size: 12px;
  color: var(--cyan);
  text-align: left;
}

.quest-prog {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim);
}

.quest-done {
  border-color: rgba(0, 255, 157, .5);
  background: rgba(0, 255, 157, .05);
}

.quest-done .quest-label {
  color: #eafcff;
}

.quest-done .quest-prog {
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 157, .4);
}

/* глобальный топ ПВП */
.pvp-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}

.pvp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  background: rgba(4, 5, 12, .6);
  border: 1px solid rgba(0, 240, 255, .2);
}

.pvp-row-me {
  border-color: rgba(255, 230, 0, .6);
  box-shadow: 0 0 12px rgba(255, 230, 0, .12);
}

.pvp-pos {
  flex: none;
  width: 26px;
  color: var(--dim);
}

.pvp-row-me .pvp-pos {
  color: var(--yellow);
}

.pvp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eafcff;
  text-align: left;
}

.pvp-rate {
  flex: none;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, .4);
}

.pvp-wl {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--magenta);
}

/* 20 ПВП-статусов: полученные светятся, остальные — пунктир-заглушки */
.pvp-statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
}

.pvp-chip {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(125, 227, 255, .4);
  border: 1px dashed rgba(125, 227, 255, .25);
}

.pvp-chip-on {
  color: var(--yellow);
  border-style: solid;
  border-color: rgba(255, 230, 0, .6);
  text-shadow: 0 0 8px rgba(255, 230, 0, .4);
  box-shadow: 0 0 10px rgba(255, 230, 0, .12);
}



/* ---- SPEC §13: входной диалог ника (Telegram id-only игрок) ---- */
.nick-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 12, .8);
}

.nick-panel {
  width: min(420px, 86vw);
  padding: 22px 24px 20px;
  text-align: center;
  background: rgba(10, 14, 30, .94);
  border: 1px solid rgba(0, 240, 255, .4);
  box-shadow:
    0 0 24px rgba(0, 240, 255, .18),
    inset 0 0 14px rgba(0, 240, 255, .05);
}

.nick-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0, 240, 255, .55);
}

.nick-hint {
  margin: 8px 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(234, 252, 255, .72);
}


/* ---- SPEC §13: топ-100 — прокрутка, липкая шапка, метки строк ---- */
.board-scroll {
  max-height: 52vh;
  overflow-y: auto;
  border-top: 1px solid rgba(0, 240, 255, .25);
  border-bottom: 1px solid rgba(0, 240, 255, .25);
}

.board-scroll .board-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0a0e1e;
}

.board-table tr.bd-lead td {
  color: #ffe600;
  text-shadow: 0 0 8px rgba(255, 230, 0, .55);
}

.board-table tr.bd-lead td.bd-place::after {
  content: ' °5';
  color: #ffe600;
}

.board-table tr.bd-me td {
  background: rgba(0, 240, 255, .07);
  box-shadow: inset 2px 0 0 #00f0ff;
}

/* чип «ЛИДЕР РЕЙТИНГА» в карточке лобби (SPEC §13) */
.lc-lead {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffe600;
  border: 1px solid rgba(255, 230, 0, .55);
  border-radius: 3px;
  text-shadow: 0 0 6px rgba(255, 230, 0, .5);
}


/* ---- кнопка тап-обновления в меню (рядом со сборкой) ---- */
.btn-refresh {
  margin: 2px 0 4px;
  padding: 3px 14px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(234, 252, 255, .55);
  background: transparent;
  border: 1px solid rgba(0, 240, 255, .25);
  border-radius: 4px;
  cursor: pointer;
}

.btn-refresh:hover {
  color: #00f0ff;
  border-color: rgba(0, 240, 255, .6);
  text-shadow: 0 0 8px rgba(0, 240, 255, .5);
}