:root {
      --bg: #0f1116;
      --panel: #161a22;
      --card: #161a22;
      --ink: #e5e7eb;
      --muted: #a3a7b3;
      --board: #10141c;
      --grid: #1e2531;
      --snake: #34d399;
      --snake-head: #059669;
      --apple: #f87171;
      --bonus: #fde047;
      --border-on: #000000;  /* стены включены */
      --border-off: #8af0b7; /* сквозные стены */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
      --accent: #2563eb;
    }
    html[data-theme="light"] {
      --bg: #e7e9ef;
      --panel: #ffffff;
      --card: #ffffff;
      --ink: #0f172a;
      --muted: #6b7280;
      --board: #e7e9ef;
      --grid: #d7d9e0;
      --snake: #22c55e;
      --snake-head: #15803d;
      --apple: #ef4444;
      --bonus: #facc15;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
    }
    html[data-theme="light"] body { background: var(--board); }
    html[data-theme="light"] #stage { background: var(--board); }

    html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      /* Глобальная блокировка выделения и контекстного меню */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Разрешаем выделение только в полях ввода */
    input, textarea, [contenteditable="true"] {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
      -webkit-touch-callout: default !important;
    }
    #langSelect {
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important;
      touch-action: manipulation;
      caret-color: transparent;
      outline: none;
      box-shadow: none;
    }
    #langSelect option {
      -webkit-user-select: none;
      user-select: none;
    }
    #langSelect:focus,
    #langSelect:focus-visible {
      outline: none;
      box-shadow: none;
      border-color: #2f3542;
    }
    
    .wrap { min-height: 100%; padding: 12px; box-sizing: border-box; }

    /* Основной контейнер: HUD — поле — d-pad */
    #stage {
      height: calc(var(--vh, 1vh) * 100 - 24px);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
      background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative;
    }
    @supports (height: 100svh) { #stage { height: calc(100svh - 24px); } }
    @supports (height: 100dvh) { #stage { height: calc(100dvh - 24px); } }

    /* HUD */
    .hudbar { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.45); color: #fff; padding: 8px 12px; border-radius: 12px; font-weight: 800; letter-spacing: .3px; align-self: center; }
    .hud-ctrl { display: flex; gap: 6px; margin-left: 10px; }

    /* Поле */
    .board-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
    canvas {
      display: block;
      background: var(--board);
      border-radius: 12px;
      touch-action: none; /* важно для iOS/Android: убираем системные жесты над канвасом */
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      pointer-events: auto; /* разрешаем события мыши/тача, но блокируем выделение */
    }

    .btn { 
      appearance: none; 
      border: 0; 
      cursor: pointer; 
      padding: 10px 14px; 
      border-radius: 12px; 
      font-weight: 700; 
      background: #3b82f6; 
      color: white; 
      box-shadow: var(--shadow);
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .btn.secondary { background: #4b5563; color: #e5e7eb; }
    .btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid #2f3542; }
    .btn.small { padding: 6px 10px; font-size: 13px; border-radius: 10px; }

    .overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(16,17,19,.62); color: white; backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 80; }
    .overlay.show { opacity: 1; pointer-events: auto; }
    .card { background: var(--panel); color: var(--ink); padding: 20px; border-radius: 18px; box-shadow: var(--shadow); width: min(720px, 96vw); max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .card h1 { margin: 0 0 10px; font-size: 28px; }
    #start .card h1 { text-align: center; }
    .card p { margin: 6px 0 14px; color: var(--muted); }
    #start .subtitle { text-align:center; max-width:760px; margin:8px auto 16px; color:var(--muted); line-height:1.6; }
    .kbd { display:inline-block; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid #2f3542; font-weight:700; letter-spacing:.02em; }
    #start .subtitle strong { color:var(--ink); font-weight:800; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .row.controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: minmax(48px, auto); align-items: stretch; gap: 12px; width: 100%; }

    /* Лидеры */
    .leaders { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(16,17,19,.62); color: white; backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 120; }
    .leaders.show { opacity: 1; pointer-events: auto; }
    .leaders .list { background: var(--panel); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); width: min(560px, 95vw); max-height: 80vh; overflow: auto; }
    .leaders .list header { position: sticky; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border-bottom: 1px solid rgba(255,255,255,.06); border-top-left-radius: 16px; border-top-right-radius: 16px; }
    .leaders .list header strong { font-size: 18px; grid-column: 2; justify-self: center; }
    .leaders .list header .btn { grid-column: 3; justify-self: end; padding: 8px 12px; border-radius: 10px; font-size: 13px; }
    .leaders .list ul { list-style: none; margin: 0; padding: 8px 6px 12px; }
    .leaders .list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .leaders .list li:last-child { border-bottom: 0; }
    .leaders .list li:hover { background: rgba(255,255,255,.03); }
    .leaders .place { text-align: right; color: var(--muted); font-weight: 800; }
    .leaders .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .leaders .score { font-weight: 800; opacity: .95; }
    .leaders .medal { display: inline-block; width: 1.3em; text-align: center; margin-right: 8px; font-size: 18px; line-height: 1; vertical-align: -1px; }

    /* Прелоадер */
    #preloader { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 200; }
    #preloader.hidden { display: none; }

    /* Сложность */
    .tri { display: grid; gap: 8px; width: 100%; }
    .tri .labels { display: grid; grid-template-columns: 1fr 1fr 1fr; font-weight: 700; opacity: .95; }
    .tri input[type=range] { 
      -webkit-appearance: none; 
      appearance: none; 
      height: 10px; 
      border-radius: 999px; 
      background: #2a3140; 
      outline: none; 
      margin-bottom: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .tri input[type=range]::-webkit-slider-thumb { 
      -webkit-appearance: none; 
      width: 28px; 
      height: 28px; 
      border-radius: 50%; 
      border: 3px solid rgba(255,255,255,.35); 
      background: var(--accent); 
      box-shadow: var(--shadow);
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .tri input[type=range]::-moz-range-thumb { 
      width: 28px; 
      height: 28px; 
      border-radius: 50%; 
      border: 3px solid rgba(255,255,255,.35); 
      background: var(--accent);
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    /* Тумблеры */
    .toggle { 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      gap: 10px; 
      background: rgba(125,125,125,.12); 
      padding: 10px 12px; 
      border-radius: 12px; 
      width: 100%; 
      min-height: 48px; 
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .toggle .tlabel { 
      display: flex; 
      align-items: center; 
      gap: 8px; 
      font-weight: 700; 
      flex: 0;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .toggle input { 
      appearance: none; 
      width: 50px; 
      height: 28px; 
      border-radius: 999px; 
      background: #374151; 
      position: relative; 
      outline: none; 
      cursor: pointer; 
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
    .toggle input:checked { background: #22c55e; }
    .toggle input:checked::after { transform: translateX(22px); }

      /* --- Desktop: label + icon рядом со свитчами --- */
  @media (min-width: 821px) {
    .row.controls .toggle {
      justify-content: flex-start;   /* не разводим по краям */
      gap: 12px;                      /* равномерный зазор */
    }
    .board-wrap, #boardWrap {
      /* поле крупнее на десктопе, но с разумными пределами */
      width: clamp(640px, min(86vmin, 92vh), 1120px);
      margin-left: auto;
      margin-right: auto;
    }
    /* отступ текста от самого свитча, только если он идёт после input */
    .row.controls .toggle input + .tlabel {
      margin-left: 8px;
    }
    /* "Язык" + селект тоже держим слева рядом */
    #tglLang { justify-content: flex-start; }
    #tglLang .tlabel { margin-right: 8px; }
  }

    .dot { width: 14px; height: 14px; border-radius: 50%; background: #8af0b7; box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset; }
    .dot.black { background: #000; }

    .sw-group { display: inline-flex; gap: 6px; align-items: center; }
    .swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); opacity: .6; }
    .swatch.on { outline: 2px solid var(--accent); opacity: 1; }
    .swatch.dark { background: #000; }
    .swatch.light { background: #9aa0a6; }

    /* Стрелки (D-pad) */
    .touch { 
      display: none; 
      align-self: center; 
      margin: 10px auto 14px; 
      opacity: .98; 
      user-select: none; 
      touch-action: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }
    .touch .tbtn { 
      display: grid; 
      place-items: center; 
      background: var(--panel); 
      border: 1px solid #2f3542; 
      border-radius: 16px; 
      font-size: 22px; 
      box-shadow: var(--shadow); 
      box-sizing: border-box;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: none;
    }
    .touch .empty { background: none; border: 0; box-shadow: none; }

    .lang-select { appearance:none; background:var(--panel); color:var(--ink); border:1px solid #2f3542; border-radius:10px; padding:6px 8px; font-weight:700; margin-left: 8px; }
    #tglLang{ justify-content: flex-start; }
    #tglLang .lang-select{ margin-left: 8px; }

    /* --- Anti-selection / Anti-callout / Anti-highlight --- */
    #stage,
    #stage *:not(input):not(select):not(textarea),
    .leaders,
    .leaders *:not(input):not(select):not(textarea) {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none; /* iOS long-press menu */
    }
    * { -webkit-tap-highlight-color: transparent; } /* Android highlight */

    /* --- Mobile polish --- */
    @media (max-width: 820px) {
        #stage {
          height: calc(var(--vh, 1vh) * 100 - 24px);
          min-height: auto;
          justify-content: flex-start;
          align-items: center;
          overflow: hidden;
        }
      .board-wrap { flex: 0 0 auto; width: min(95vw, 720px); }
      .wrap { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
      .hudbar { font-size: 18px; padding: 10px 14px; }
      .hud-ctrl .btn.small { padding: 10px 12px; font-size: 15px; border-radius: 12px; }
      .card { width: min(94vw, 640px); border-radius: 14px; padding: 14px; }
      .card h1 { font-size: 22px; }
      .card p { font-size: 14px; }
      .btn { padding: 10px 14px; border-radius: 12px; font-size: 15px; }
      .tri input[type=range] { height: 14px; margin-bottom: 18px; }
      .tri input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
      .toggle input { width: 52px; height: 30px; }
      .toggle input::after { width: 24px; height: 24px; }

      /* Touch arrows layout (centered grid), visibility is JS-controlled */
      .touch {
        display: grid;
        width: min(96vw, 720px);
        gap: 12px;
        grid-template-columns: repeat(3, 1fr);
        justify-items: stretch;
        align-items: stretch;
        margin-left: auto;
        margin-right: auto;
      }
      .touch .tbtn, .touch .empty { width: 100%; aspect-ratio: 1 / 1; }
      .touch .tbtn { font-size: clamp(22px, 8vw, 34px); }
    }

    /* extra compact for short screens */
    @media (max-height: 700px) {
      .card { padding: 12px; border-radius: 12px; }
      .card h1 { font-size: 20px; margin-bottom: 6px; }
      .card p { font-size: 13px; margin: 4px 0 10px; }
      .row { gap: 10px; }
      .btn { padding: 9px 12px; font-size: 14px; }
    }
    /* very small phones */
    @media (max-width: 380px) {
      .touch { gap: 10px; }
      .touch .tbtn { font-size: 20px; }
    }

/* === Compact mode for very small screens (iPhone SE / 13 mini) === */
@media (max-height: 640px) {
  #stage { gap: 6px; }
  .hudbar { font-size: 14px; padding: 6px 10px; }
  .btn.small { font-size: 12px; padding: 6px 8px; }
  .touch { gap: 8px; width: min(92vw, 560px); }
  .touch .tbtn { font-size: clamp(18px, 6.5vw, 28px); }
  .card { width: min(94vw, 620px); padding: 12px; }
}
@media (max-width: 360px) {
  .board-wrap { width: 92vw; }
  .touch { width: 94vw; }
}

/* безопасные отступы под вырез/панель Safari */
.wrap {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.touch {
  margin-bottom: max(10px, env(safe-area-inset-bottom));
}

/* iPhone 12/13/14 (и мини) в портрете: компактнее HUD и d-pad */
@media (max-height: 740px) and (max-width: 420px) {
  #stage { gap: 8px; }
  .hudbar { font-size: 14px; padding: 6px 10px; }
  .btn.small { padding: 6px 8px; font-size: 12px; }
  .touch { gap: 8px; width: 92vw; }
  .touch .tbtn { font-size: clamp(18px, 6.5vw, 28px); }
}

/* --- Preloader pretty text --- */
#preloader .card.pre { background: transparent; box-shadow: none; padding: 0; }
.pre-logo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: clamp(22px, 6vw, 44px);
  letter-spacing: .02em;
  text-align: center;
  color: var(--ink);
  padding: 8px 12px;
}
.pre-sub {
  text-align: center;
  color: var(--muted);
  margin-top: 6px;
  font-size: 14px;
}

/* --- Leaders: my row highlight + dots separator --- */
.leaders .list li.me { background: rgba(255,255,255,.05); }
.leaders .list li.sep {
  grid-template-columns: 1fr;
  text-align: center;
  border-bottom: 0;
  padding: 6px 12px;
}
.leaders .list li.sep .dots {
  display: inline-block;
  opacity: .7;
  letter-spacing: .35em;
  user-select: none;
}

/* Thinner control badges in the start subtitle */
#start #i_subtitle .kbd,
#start #i_subtitle .chip {
  /* рамка тоньше и меньше радиус */
  border-width: 1px;           /* было 2px */
  border-radius: 6px;          /* было 8px/10px */
  /* компактнее внутренние отступы */
  padding: 1px 6px;            /* было ~3px 8px */
  /* чуть компактнее шрифт, но адаптивно */
  font-size: clamp(11px, 1.4vw, 13px);
  line-height: 1.15;
  /* убираем «толстость» за счёт тени/фона */
  box-shadow: none;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}

/* Чуть меньше расстояние между бейджами */
#start #i_subtitle .kbd + .kbd,
#start #i_subtitle .kbd + .chip,
#start #i_subtitle .chip + .kbd,
#start #i_subtitle .chip + .chip {
  margin-left: 6px;            /* было 8–10px */
}

/* Safe-area переменная (iOS) */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* D-pad не прижимается к краю: есть запас под Home-Indicator/бар Safari */
#touchCtl{
  margin-bottom: max(8px, var(--safe-bottom));
  transform-origin: center bottom; /* понадобится для масштабирования из JS */
}

/* Чуть компактнее карточки HUD на очень узких экранах (iPhone 6/7/8, 12 mini) */
@media (max-width: 380px) {
  #hud .pill { padding: 6px 10px; font-size: 14px; }
}

/* iOS safe-area для нижнего бара / Home-indicator */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

/* d-pad не упираем в край снизу; будем масштабировать из центра-низа */
#touchCtl{
  margin-bottom: max(8px, var(--safe-bottom));
  transform-origin: center bottom;
}

/* Чуть компактнее HUD на узких экранах (12 mini / 6/7/8) */
@media (max-width: 380px) {
  #hud .pill { padding: 6px 10px; font-size: 14px; }
}

/* Ультра-компактный режим для очень маленьких экранов (iPhone 4/4S) */
@media (max-width: 340px), (max-height: 520px) {
  #hud .pill { padding: 5px 8px; font-size: 13px; }

  #start .card { padding: 14px; }
  #start .row.controls .toggle { gap: 8px; }
  #start .row.controls .toggle .label { font-size: 14px; }
  #start .slider .labels { font-size: 12px; }

  #start #i_subtitle { font-size: 12px; line-height: 1.25; }
  #start #i_subtitle .kbd,
  #start #i_subtitle .chip { padding: 1px 5px; font-size: 11px; }

  #start .btn { padding: 10px 12px; font-size: 14px; }
}

/* ==== iPhone 5/5s/SE (320×568) — компактное старт-меню ==== */
@media (max-width: 350px) and (max-height: 620px) {
  /* Карточка */
  #start .card{
    width: 94vw;
    padding: 12px 12px 14px;
    border-radius: 12px;
  }

  /* Заголовок и подпись */
  #start .title{ font-size: 20px; line-height: 1.15; }
  #start #i_subtitle{ font-size: 12px; line-height: 1.30; }

  /* «бейджи» управления внутри подписи */
  #start #i_subtitle .kbd,
  #start #i_subtitle .chip{
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 6px;
    border-width: 1px;
    margin-left: 6px;
  }

  /* Слайдер сложности */
  #start .slider{ margin: 10px 0 12px; }
  #start .slider .track{ height: 6px; }
  #start .slider .thumb{ width: 20px; height: 20px; }
  #start .slider .labels{ font-size: 12px; }

  /* Сетка контролов — две компактные колонки */
  #start .row.controls{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Ячейки с тумблерами */
  #start .row.controls .cell{ min-height: 48px; }
  #start .row.controls .toggle{ gap: 8px; }
  #start .row.controls .toggle .label{
    font-size: 14px;
    white-space: nowrap;           /* подпись не ломается на 2 строки */
  }

  /* Сами переключатели немного уменьшаем, не ломая вёрстку */
  #start .row.controls .toggle .pill{ transform: scale(0.92); transform-origin: left center; }

  /* Кнопки */
  #start .btn{ padding: 10px 12px; font-size: 15px; }
  #start .row.actions{ grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ==== iPhone 5/5s/SE (320×568) — узкий экран: фикс ширины меню ==== */
@media (max-width: 350px) and (max-height: 620px) {
  /* Карточка гарантированно влезает по ширине */
  #start .card{
    width: 100vw;              /* занимай всю ширину вьюпорта */
    max-width: 100vw;          /* не расширяйся из-за внутренних элементов */
    margin: 0;                 /* убираем внешние поля */
    padding: 12px 12px 14px;   /* компактные отступы */
    border-radius: 12px;
    box-sizing: border-box;    /* паддинги не увеличивают ширину */
  }

  /* Заголовок/подзаголовок уже у тебя компактные — оставим */

  /* Сетка контролов: одна колонка, чтобы ничего не «распирало» */
  #start .row.controls{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Разрешаем детям сетки сжиматься */
  #start .row.controls > *{ min-width: 0; }

  /* Тумблеры — ещё чуть компактнее */
  #start .row.controls .toggle{ gap: 8px; }
  #start .row.controls .toggle .label{ font-size: 14px; white-space: nowrap; }
  #start .row.controls .toggle .pill{ transform: scale(0.88); transform-origin: left center; }

  /* Кнопки — на всю ширину, можно перенос строки (для длинных подписей) */
  #start .row.actions{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #start .btn{
    width: 100%;
    white-space: normal;    /* "Таблица лидеров" при необходимости переносится */
    line-height: 1.15;
    padding: 10px 12px;
    font-size: 15px;
  }

  /* Селект языка не выходит за границы */
  #start select{ max-width: 100%; }
}


/* ==== Mobile (≤ 820px): выравнивание тумблеров и подписей ==== */
@media (max-width: 820px) {
  /* каждая "ячейка" с контролом — одна строка, всё по центру */
  #start .row.controls .cell{
    display: flex;
    align-items: center;        /* вертикальный центр */
    justify-content: flex-start;
    gap: 10px;                  /* небольшой зазор между элементами */
    min-height: 56px;           /* чтобы палец попадал уверенно */
  }

  /* сам блок тумблера: сдвигаем к подписи, ничего не растягиваем */
  #start .row.controls .toggle{
    display: flex;
    align-items: center;
    justify-content: flex-start;/* убираем "space-between" */
    gap: 10px;
    width: auto;
    margin: 0;
  }

  /* сам переключатель */
  #start .row.controls .toggle .pill{
    flex: 0 0 auto;
    margin: 0;
    transform-origin: left center;
  }

  /* подпись — рядом с тумблером */
  #start .row.controls .toggle .label{
    flex: 0 0 auto;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;        /* чтобы "Стены", "Звук", "Тема", "Язык" не ломались */
  }

  /* маленькая чёрная точка-индикатор — по центру строки */
  #start .row.controls .toggle .dot{
    align-self: center;
    margin-left: 6px;
  }

  /* специальный кейс "Язык": подпись + select рядом, по центру */
  #start .row.controls .cell.lang{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #start .row.controls .cell.lang .label{
    white-space: nowrap;
    margin: 0;
  }
  #start .row.controls .cell.lang select{
    flex: 0 0 auto;             /* не растягивать на всю ширину */
    max-width: 60%;
    min-width: 110px;
  }
}

/* Fullscreen preloader */
.pre{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9999;
}
.pre.show{ display:flex; }

.pre-inner{
  text-align:center;
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.pre-title{ font: 700 20px/1.2 var(--font, ui-sans-serif); letter-spacing:.02em; }
.pre-sub  { margin-top:8px; color:var(--muted); font-size:14px; }