/* =============================================================================
   Padel Online — UI «Неон-аркада» (docs/design/ui-neon.md, эталон dev/ui-mock-neon.html)
   Без внешних шрифтов, картинок и CDN: только градиенты, тени, conic/clip-path и эмодзи.
   ES2017-совместимого JS не требует — весь UI на CSS.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. Токены */
:root {
  --bg0: #06040d;
  --ink: #f4f0ff;
  /* контраст: --ink2 и --ink3 подняты до >= 4.5:1 на стекле карточек (проверено скриптом) */
  --ink2: #bcb0e0;
  --ink3: #9a8dc2;

  --cy: #2ef2ff;      /* действие, прогресс */
  --mg: #ff3ea5;      /* карьера, боссы, «горячее» */
  --li: #c9ff3d;      /* мячи, награды */
  --go: #ffcf3d;      /* звёзды, легендарка, Яны */
  --vi: #a06bff;      /* онлайн */
  --ok: #4ade80;
  --danger: #ff5c6a;
  --warn: #ffcf3d;

  --glass: rgba(30, 17, 60, 0.62);
  --glass2: rgba(38, 22, 74, 0.78);
  --line: rgba(255, 255, 255, 0.10);
  --line2: rgba(255, 255, 255, 0.18);

  --r: 18px; --r2: 14px; --r3: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* место под стики-баннер платформы; ui.js setBanner() вешает body.ad-visible,
     main.js applyFlags() выставляет --ad-inset-bottom / --ad-inset-right (L§17.10) */
  --banner: 0px;
  --bannerR: 0px;

  --pad: 14px;
  --gap: clamp(8px, 1.5vh, 14px);

  /* совместимость со старыми именами (render.js / другие модули могут читать) */
  --bg: #06040d;
  --panel: var(--glass);
  --panel-solid: #150b2c;
  --text: var(--ink);
  --muted: var(--ink2);
  --accent: var(--cy);
  --accent-2: var(--mg);
  --btn: var(--glass2);
  --btn-hover: rgba(52, 30, 100, 0.85);
}

body.ad-visible { --banner: var(--ad-inset-bottom, 0px); }
body.has-banner { --banner: var(--ad-inset-bottom, 100px); }
@media (min-width: 900px) {
  body.ad-visible { --banner: 0px; --bannerR: var(--ad-inset-right, 0px); }
  body.has-banner { --banner: 0px; --bannerR: var(--ad-inset-right, 260px); }
}

/* ---------------------------------------------------------------- 2. База */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.25;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: 0.45; cursor: default; }
input, select { font: inherit; color: inherit; }
button:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible,
.lobby-slot:focus-visible, .style-item:focus-visible, .career-node:focus-visible {
  outline: 2px solid var(--cy); outline-offset: 2px;
}
.visually-hidden, .vh {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; opacity: 0 !important; overflow: hidden; clip-path: inset(50%);
  -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;
}
.visually-hidden::after, .vh::after { display: none !important; }

#canvas {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  display: block; touch-action: none; background: var(--bg0);
}
#safe-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  visibility: hidden; pointer-events: none;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
}

/* ------------------------------------------- 3. Каркас экранов + фон-корт */
/* Фон-подложка на весь экран, а не на .screen: на десктопе .screen ограничен max-width и
   центрирован, поэтому скрим не доставал до краёв и по бокам снова проступал canvas-корт.
   :has(.screen.active) гасит подложку в матче — там корт как раз должен быть видно. */
#screens { pointer-events: none; }
#screens:has(.screen.active) {
  position: fixed; inset: 0; overflow: clip; isolation: isolate;
  background:
    radial-gradient(118% 72% at 50% -12%, rgba(64, 18, 142, 0.66) 0%, rgba(64, 18, 142, 0) 62%),
    radial-gradient(82% 56% at 4% 104%, rgba(6, 78, 106, 0.52) 0%, rgba(6, 78, 106, 0) 60%),
    radial-gradient(82% 56% at 98% 100%, rgba(102, 7, 73, 0.52) 0%, rgba(102, 7, 73, 0) 60%),
    linear-gradient(to bottom, rgba(6, 4, 13, 0.45), rgba(6, 4, 13, 0) 20%, rgba(6, 4, 13, 0) 74%, rgba(6, 4, 13, 0.55)),
    radial-gradient(88% 66% at 50% 42%, rgba(6, 4, 13, 0.995) 0%, rgba(6, 4, 13, 0.985) 48%, rgba(6, 4, 13, 0.96) 100%);
}
/* перспективная неоновая сетка и «трос» — во всю ширину окна, над подложкой, под контентом */
#screens:has(.screen.active)::before {
  content: ''; position: absolute; z-index: -1;
  left: -60%; right: -60%; bottom: 0; height: 84%;
  background-image:
    repeating-linear-gradient(to right, rgba(46, 242, 255, 0.26) 0 1px, rgba(0, 0, 0, 0) 1px 96px),
    repeating-linear-gradient(to bottom, rgba(255, 62, 165, 0.17) 0 1px, rgba(0, 0, 0, 0) 1px 74px);
  transform: perspective(560px) rotateX(73deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 76%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 76%);
  pointer-events: none;
}
#screens:has(.screen.active)::after {
  content: ''; position: absolute; z-index: -1;
  /* «трос сетки» держим у пола корта: на 26% в ландшафте он перечёркивал карточки настроек */
  left: 50%; bottom: 15%; width: min(74vw, 760px); height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(46, 242, 255, 0.38), transparent);
  box-shadow: 0 0 22px rgba(46, 242, 255, 0.3);
  pointer-events: none;
}
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  gap: var(--gap);
  /* clip, а не hidden: перспективная сетка (::before) не должна попадать в scrollHeight экрана */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  touch-action: pan-y;
  text-align: left;
  padding:
    calc(var(--pad) + var(--sat))
    calc(var(--pad) + var(--sar) + var(--bannerR))
    calc(var(--pad) + var(--sab) + var(--banner))
    calc(var(--pad) + var(--sal));
  /* скрим и свечения переехали на #screens (см. выше): на десктопе .screen центрирован
     и ограничен max-width, поэтому его собственный фон не доставал до краёв окна.
     Порядок слоёв там важен: свечения ПЕРВЫМИ (рисуются сверху), плотный скрим — ПОСЛЕДНИМ. */
  background: none;
}
.screen.active { display: flex; pointer-events: auto; }
.screen > * { flex-shrink: 0; min-width: 0; }
/* сетка и «трос» — на #screens (см. раздел выше), чтобы не обрезаться max-width экрана */


/* шапка вложенного экрана */
.hd { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.hd h2 { margin: 0; font-size: clamp(19px, 2.4vh, 24px); letter-spacing: 0.01em; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .wallet { flex: 0 1 auto; min-width: 0; max-width: 48%; font-size: 12.5px; min-height: 34px; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 32px; }
.hd .hdtx { flex: 1; min-width: 0; }
.hd .hdtx h2 { flex: none; }
.hd .sub { font-size: 13.5px; color: var(--ink2); font-weight: 600; margin-top: 1px; }
.hd .sub:empty { display: none; }
.back {
  width: 44px; height: 44px; min-width: 44px; border-radius: var(--r2);
  background: var(--glass); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink2);
  font-size: 0;  /* текст «Назад» остаётся доступным имением кнопки, визуально — шеврон */
}
.back::before { content: '‹'; font-size: 24px; font-weight: 700; line-height: 1; margin-top: -3px; }
.back:hover { border-color: var(--line2); color: var(--ink); }
.back:active { transform: scale(0.96); }

/* прокручиваемая область — с маской по краям (ui-neon.md §2.8) */
.body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y; -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 18px), transparent 100%);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.body.mid { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; gap: 9px; }
.body::-webkit-scrollbar { width: 6px; }
.body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.body > :first-child { margin-top: 0; }

/* нижний док — главное действие всегда на месте */
.dock {
  display: flex; gap: 10px; align-items: center;
  position: sticky; bottom: 0; z-index: 2;
}
.dock .fill, .dock .btn.fill { flex: 1; }
.dock:empty { display: none; }
.dock.foot-note { justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); }
.dock.foot-note p { margin: 0; }
.dock.foot-note p:empty { display: none; }

/* ---------------------------------------------------------- 4. Типографика */
h1, h2, h3 { margin: 0; letter-spacing: 0.01em; }
h1 { font-size: clamp(22px, 3vh, 30px); font-weight: 900; }
h2 { font-size: clamp(19px, 2.4vh, 24px); font-weight: 800; }
h3 { font-size: 17px; font-weight: 800; }
p { margin: 4px 0; }
small { font-size: 13.5px; color: var(--ink2); display: block; line-height: 1.3; }
.ttl { font-size: 17px; font-weight: 800; display: block; }
.mut, .muted { color: var(--ink2); font-size: 13.5px; line-height: 1.3; }
.mut2 { color: var(--ink3); font-size: 12.5px; }
.eyebrow, .ms-title {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink3); display: block;
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row.split > * { flex: 1; }

/* ------------------------------------------------------- 5. Карточки/кнопки */
.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.card.tap { cursor: pointer; transition: transform 0.14s ease, border-color 0.14s ease; }
.card.tap:hover { transform: translateY(-2px); border-color: var(--line2); }
.glowline {
  position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--acc, var(--cy)), transparent);
  opacity: 0.85; pointer-events: none;
}

.btn {
  min-height: 48px; padding: 0 18px; border-radius: var(--r2);
  background: var(--glass2); border: 1px solid var(--line);
  font-size: 16px; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.1s, border-color 0.14s, background 0.14s;
}
.btn:hover { border-color: var(--line2); background: var(--btn-hover); }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: rgba(255, 255, 255, 0.05); }
.btn.sm { min-height: 42px; font-size: 14px; padding: 0 14px; border-radius: 12px; }
.btn.wide { width: 100%; }
.btn.danger { color: var(--danger); border-color: rgba(255, 92, 106, 0.32); background: rgba(255, 92, 106, 0.08); }
.btn.danger:hover { background: rgba(255, 92, 106, 0.16); }
.btn-small {
  min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px;
  background: var(--glass2); border: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.btn-small:hover { border-color: var(--line2); background: var(--btn-hover); }
.btn-small:active { transform: scale(0.97); }
.btn-icon {
  width: 44px; height: 44px; min-width: 44px; border-radius: 13px;
  display: grid; place-items: center; font-size: 19px;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink2);
}
.btn-icon:hover { border-color: var(--line2); color: var(--ink); }

/* единственная неоновая кнопка действия на экране */
.neon, .btn-primary {
  border: 0;
  background: linear-gradient(135deg, #00d9ff 0%, #3aa2ff 46%, #a05bff 100%);
  color: #03121c; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset, 0 10px 30px rgba(0, 190, 255, 0.35), 0 0 46px rgba(46, 242, 255, 0.28);
  transition: transform 0.12s, box-shadow 0.2s;
}
.neon:hover, .btn-primary:hover {
  background: linear-gradient(135deg, #12e2ff 0%, #4aabff 46%, #ac6dff 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 12px 36px rgba(0, 190, 255, 0.5), 0 0 62px rgba(46, 242, 255, 0.42);
}
.neon:active, .btn-primary:active { transform: scale(0.985); }
.neon.mg, .btn-primary.mg {
  background: linear-gradient(135deg, #ff5fb4 0%, #ff3ea5 50%, #8b3bff 100%); color: #1b0413;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26) inset, 0 10px 30px rgba(255, 62, 165, 0.38), 0 0 46px rgba(255, 62, 165, 0.26);
}
.neon.go, .btn-primary.go {
  background: linear-gradient(135deg, #ffe07a, #ffcf3d 55%, #ff9a3d); color: #2a1a00;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 10px 30px rgba(255, 190, 60, 0.36), 0 0 46px rgba(255, 207, 61, 0.26);
}
.dock .neon, .dock .btn-primary { min-height: 56px; font-size: 18px; border-radius: 16px; }

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset, 0 10px 30px rgba(0, 190, 255, 0.32), 0 0 40px rgba(46, 242, 255, 0.22); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34) inset, 0 14px 40px rgba(0, 190, 255, 0.5), 0 0 74px rgba(46, 242, 255, 0.46); }
}

/* чипы и сегменты */
.chip, .mod-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.055); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--ink2); white-space: nowrap;
}
.chip.on {
  background: linear-gradient(135deg, rgba(46, 242, 255, 0.24), rgba(160, 107, 255, 0.24));
  border-color: rgba(46, 242, 255, 0.55); color: #eafcff;
}
.chip.go { color: var(--go); border-color: rgba(255, 207, 61, 0.35); background: rgba(255, 207, 61, 0.10); }
.chip.li { color: var(--li); border-color: rgba(201, 255, 61, 0.3); background: rgba(201, 255, 61, 0.09); }

.seg { display: inline-flex; gap: 5px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.seg .btn-small {
  min-height: 36px; min-width: 0; padding: 0 12px; border: 0; background: none;
  color: var(--ink2); font-size: 13.5px; border-radius: 10px;
}
.seg .btn-small.on, .seg .btn-small[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(46, 242, 255, 0.26), rgba(160, 107, 255, 0.28));
  color: #eafcff; box-shadow: 0 0 16px rgba(46, 242, 255, 0.18) inset;
}
.tabs {
  display: flex; gap: 7px; padding: 4px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  max-width: 420px; width: 100%; align-self: center; flex-wrap: nowrap;
}
.tabs:empty { display: none; }
.tabs button, .tabs .btn-small {
  flex: 1; min-width: 0; min-height: 42px; border: 0; background: none;
  border-radius: 11px; font-size: 13.5px; font-weight: 800; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: 0.15s;
}
.tabs button.on, .tabs .btn-small.on {
  background: linear-gradient(135deg, rgba(46, 242, 255, 0.24), rgba(160, 107, 255, 0.26));
  color: #fff; box-shadow: 0 0 18px rgba(46, 242, 255, 0.2) inset;
}

/* свои тумблеры вместо системных чекбоксов (ui-neon.md §5.4) */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 52px; height: 31px; min-width: 52px; min-height: 31px;
  flex: 0 0 auto; margin: 0; padding: 0; position: relative; cursor: pointer;
  border-radius: 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 23px; height: 23px;
  border-radius: 50%; background: #cfc6e8; transition: transform 0.18s, background 0.18s;
}
input[type="checkbox"]:checked {
  background: linear-gradient(120deg, rgba(46, 242, 255, 0.6), rgba(160, 107, 255, 0.6));
  border-color: rgba(46, 242, 255, 0.6); box-shadow: 0 0 16px rgba(46, 242, 255, 0.32);
}
input[type="checkbox"]:checked::after { transform: translateX(21px); background: #fff; }
input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
/* тумблер как отдельный <span class="sw"> (если ui.js когда-нибудь начнёт его рисовать) */
.sw {
  width: 52px; height: 31px; min-width: 52px; border-radius: 16px; position: relative; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line); transition: background 0.18s, border-color 0.18s;
}
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: #cfc6e8; transition: transform 0.18s; }
input.vh:checked ~ .sw, .sw.on {
  background: linear-gradient(120deg, rgba(46, 242, 255, 0.6), rgba(160, 107, 255, 0.6));
  border-color: rgba(46, 242, 255, 0.6); box-shadow: 0 0 16px rgba(46, 242, 255, 0.32);
}
input.vh:checked ~ .sw::after, .sw.on::after { transform: translateX(21px); background: #fff; }
input.vh:focus-visible ~ .sw { outline: 2px solid var(--cy); outline-offset: 2px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 24px; min-height: 24px; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer; flex: 0 0 auto;
}
/* дорожка залита неоном слева до --v (ставит ui.js на input и при renderSettings) — ui-neon.md §4.10 */
input[type="range"]::-webkit-slider-runnable-track {
  height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cy) 0%, var(--vi) var(--v, 80%), rgba(255, 255, 255, 0.12) var(--v, 80%), rgba(255, 255, 255, 0.12) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px rgba(46, 242, 255, 0.55);
}
input[type="range"]::-moz-range-track {
  height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cy) 0%, var(--vi) var(--v, 80%), rgba(255, 255, 255, 0.12) var(--v, 80%), rgba(255, 255, 255, 0.12) 100%);
}
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }

input[type="text"], input:not([type]), input[type="search"] {
  background: rgba(6, 4, 16, 0.55); border: 1.5px solid var(--line2); border-radius: 12px;
  min-height: 46px; padding: 0 12px; color: var(--ink);
  -webkit-user-select: text; user-select: text;
}
select {
  -webkit-appearance: none; appearance: none;
  background-color: rgba(6, 4, 16, 0.5);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink2) 50%),
    linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line); border-radius: 12px;
  /* 16 px обязательны: меньший кегль заставляет iOS зумить страницу при фокусе */
  min-height: 44px; padding: 0 28px 0 10px; font-size: 16px; font-weight: 700; color: var(--ink);
  cursor: pointer; width: 100%; min-width: 0; text-overflow: ellipsis;
}
select option { background: var(--panel-solid); color: var(--ink); }

/* ------------------------------------------------------ 6. Прогресс/звёзды */
.bar, .m-bar, #menu-xpbar, #result-xpbar, #boot-bar {
  display: block; height: 7px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.10); overflow: hidden;
}
.bar > i, .m-fill, #menu-xpfill, #result-xpfill, #boot-fill {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--cy), var(--vi));
  box-shadow: 0 0 12px rgba(46, 242, 255, 0.55);
  transition: width 0.4s;
}
.bar.mg > i { background: linear-gradient(90deg, var(--mg), #ff9a3d); box-shadow: 0 0 12px rgba(255, 62, 165, 0.5); }
.bar.li > i, .mission-row.done .m-fill { background: linear-gradient(90deg, var(--li), var(--cy)); box-shadow: 0 0 12px rgba(201, 255, 61, 0.45); }

.ring {
  --p: 0; --c: var(--cy); --sz: 44px;
  width: var(--sz); height: var(--sz); border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.10) 0);
  display: grid; place-items: center; position: relative;
}
.ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #150b2c; border: 1px solid rgba(255, 255, 255, 0.07); }
.ring > b { position: relative; font-size: 14px; font-weight: 900; line-height: 1; }
.ring > b small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink3); margin-top: 1px; }
.ring.mg { --c: var(--mg); }
.ring.go { --c: var(--go); }

.star::before { content: '★'; }
.star { color: rgba(255, 255, 255, 0.16); font-size: inherit; }
.star.on { color: var(--go); text-shadow: 0 0 10px rgba(255, 207, 61, 0.65); }
.stars, .node-stars { display: inline-flex; gap: 3px; font-size: 13px; letter-spacing: 1px; }
@keyframes pop { 0% { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------- 7. Boot */
.boot { align-items: center; text-align: center; gap: 12px; }
#boot-title {
  font-size: clamp(26px, 4.4vh, 38px); font-weight: 900; letter-spacing: 0.01em;
  background: linear-gradient(120deg, #c9ff3d, #2ef2ff 55%, #a06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#boot-bar { width: min(70vw, 260px); height: 8px; }
#boot-text { color: var(--ink2); min-height: 20px; font-size: 13.5px; }

/* --------------------------------------------------------- 8. Главное меню */
#screen-menu.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  align-content: stretch;
}

#menu-top { display: flex; align-items: center; gap: 10px; min-height: 52px; }
/* название игры остаётся в DOM (h1, data-i18n) — визуально его заменяет блок игрока */
#menu-top .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#menu-player, #menu-top .who { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
#menu-player:empty { display: none; }
#menu-player .portrait {
  border-radius: 13px; position: relative;
  box-shadow: 0 0 0 1.5px rgba(160, 107, 255, 0.5), 0 0 18px rgba(160, 107, 255, 0.3);
}
#menu-player .wh { display: flex; flex-direction: column; min-width: 0; }
#menu-player .nm { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu-player .tt { font-size: 12px; font-weight: 700; color: var(--go); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu-progress { display: flex; align-items: center; gap: 9px; min-width: 0; }
#menu-progress .lvlwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#menu-level { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink2); white-space: nowrap; }
#menu-level.lvl { display: flex; align-items: center; font-size: 0; }
/* когда ui.js рисует кольцо уровня — полоса XP под ним не нужна */
#menu-level.lvl ~ #menu-xpbar { display: none; }
#menu-xpbar { width: 74px; height: 5px; }
#menu-balls, .wallet {
  display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 11px;
  border-radius: 12px; background: rgba(201, 255, 61, 0.10); border: 1px solid rgba(201, 255, 61, 0.28);
  font-weight: 900; font-size: 14.5px; color: #eaffc0; white-space: nowrap;
}
#menu-balls:empty, .wallet:empty { display: none; }
#btn-settings { font-size: 0; }
#btn-settings::before { content: '⚙'; font-size: 19px; line-height: 1; }

#menu-main {
  display: flex; flex-direction: column; gap: var(--gap);
  flex: 1 1 auto; min-height: 0; justify-content: center; justify-content: safe center;
}
/* Строка грида ограничена minmax(0,1fr), поэтому при развёрнутом «Сегодня» на низком экране
   (360×640) или с баннером содержимое вылезало ПОВЕРХ рельса: экран overflow:clip, скролла нет,
   просто наложение. В этих случаях колонка прокручивается внутри себя и гаснет маской по низу.
   ВАЖНО: overflow включается только там, где он нужен — контейнер с overflow обрезает свечение
   кнопки «Быстрая игра» (box-shadow), и на просторных экранах это давало жёсткий шов сверху.
   Отрицательные margin возвращают выравнивание, оставляя тени 16 px запаса. */
.menu-scroll {
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 16px 16px 0; margin: -16px -16px 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}
@media (max-height: 700px) and (max-width: 760px) { #menu-main { overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; padding: 16px 16px 0; margin: -16px -16px 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%); } }
@media (max-width: 899px) {
  body.has-banner #menu-main, body.ad-visible #menu-main { overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; padding: 16px 16px 0; margin: -16px -16px 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%); }
}
#col-a, #col-b { display: contents; }

/* герой «Быстрая игра» — единственная постоянно пульсирующая кнопка */
#hero-wrap { position: relative; }
#btn-quick {
  position: relative; width: 100%; display: flex; align-items: center; gap: 14px;
  min-height: clamp(88px, 13.5vh, 118px); padding: 0 clamp(14px, 4vw, 24px);
  border: 0; border-radius: 20px; text-align: left;
  background: linear-gradient(135deg, #00d9ff 0%, #3aa2ff 46%, #a05bff 100%);
  color: #03121c; font-weight: 900;
  animation: breathe 2.8s ease-in-out infinite;
}
#btn-quick .hero-ico { font-size: clamp(30px, 5vh, 42px); line-height: 1; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4)); }
#btn-quick .hero-tx { flex: 1; min-width: 0; }
#btn-quick .t1 { display: block; font-size: clamp(22px, 3.4vh, 30px); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
#btn-quick #hint-quick { display: block; font-size: clamp(12px, 1.6vh, 14px); font-weight: 700; color: inherit; opacity: 0.72; margin-top: 3px; }
#btn-quick .hero-go { font-size: 26px; opacity: 0.55; font-weight: 900; }

/* карточки режимов */
#modes { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.card-btn {
  position: relative; background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink); text-align: left;
  transition: transform 0.14s, border-color 0.14s, background 0.14s;
}
.card-btn:hover { transform: translateY(-2px); border-color: var(--line2); }
.card-btn:active { transform: translateY(0) scale(0.99); }

#btn-career {
  --acc: var(--mg);
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 62px; width: 100%;
}
#btn-career .em { font-size: 24px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(255, 62, 165, 0.45)); }
#btn-career .meta { flex: 1; min-width: 0; }
#btn-career .mode-eyebrow { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; }
#btn-career #hint-career { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-career #hint-career:empty { display: none; }
#btn-career .mode-go { font-size: 22px; color: var(--ink3); font-weight: 900; }
#btn-career .ring { --sz: 42px; margin-left: 2px; }
#btn-career:has(.ring) .mode-go { display: none; }
/* Свечение на экране получает ровно один элемент — герой «Быстрая игра». «Карьера» остаётся
   обычной стеклянной карточкой; её маджентовая идентичность живёт в .glowline сверху. */
#btn-career.btn-primary {
  background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: none;
}
/* «богатая» карточка карьеры (ui-neon.md §3, §4.1): портрет босса · КАРЬЕРА · Путь к легенде ·
   чип «26 / 90 ★» · «Ступень 12 · Очередь в деканат» · кольцо со ступенью. Класс rich ставит ui.js,
   когда main.js прислал careerHint.stage. Без него карточка выглядит как раньше (эмодзи + подпись). */
#btn-career.rich { padding: 10px 12px; min-height: 88px; gap: 11px; }
#btn-career.rich .portrait { flex: 0 0 auto; }
#btn-career.rich .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#btn-career.rich .mode-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink3); line-height: 1.1;
}
#btn-career.rich .ct {
  display: block; font-size: 18px; font-weight: 900; line-height: 1.12;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
#btn-career.rich .chip {
  min-height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 900; line-height: 24px;
  margin: 2px 0 1px;
}
/* подпись «Ступень 12 · Очередь в деканат» — тихая строка, а не второй заголовок */
#btn-career.rich #hint-career { margin-top: 0; font-size: 12px; font-weight: 600; color: var(--ink2); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); min-width: 0; }
.duo > * { min-width: 0; }
.mode { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; min-height: 84px; }
.mode .top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mode .em { font-size: 21px; line-height: 1; flex: 0 0 auto; }
.mode .lbl, .mode .lnk { font-size: 15px; font-weight: 800; color: var(--ink); }
.mode small { font-size: 11.5px; color: var(--ink2); }
#online-card { --acc: var(--vi); }
#btn-local { --acc: var(--cy); width: 100%; }
#btn-online {
  min-height: 0; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 15px; font-weight: 800; color: var(--ink); text-align: left; justify-content: flex-start;
}
#btn-online:hover { background: none; }
#btn-online::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
#online-card:focus-within { border-color: rgba(160, 107, 255, 0.6); box-shadow: 0 0 0 2px rgba(160, 107, 255, 0.25); }
#online-badge {
  position: relative; z-index: 1; margin-top: auto;
  font-size: 11px; font-weight: 800; color: var(--go); line-height: 1.2;
}
#online-badge.lan { color: var(--ok); }

/* блок «Сегодня» */
#menu-today { --acc: var(--go); padding: 9px 11px; }
#btn-today-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  min-height: 34px; background: none; border: 0; padding: 2px 2px; border-radius: 10px;
}
#btn-today-toggle:hover { background: rgba(255, 255, 255, 0.05); }
#btn-today-toggle .lbl { font-size: 14px; font-weight: 900; letter-spacing: 0.02em; flex: 0 0 auto; }
#btn-today-toggle .lbl::before { content: '📅 '; }
#today-summary, #btn-today-toggle .sum {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
#btn-today-toggle .cv { color: var(--ink3); font-size: 13px; transition: transform 0.2s; flex: 0 0 auto; }
#menu-today.collapsed #today-body { display: none; }
#menu-today.collapsed #btn-today-toggle .cv { transform: rotate(-90deg); }
#today-body { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
#menu-rv:empty, #menu-missions:empty { display: none; }
#menu-rv { display: flex; flex-direction: column; gap: 6px; }
#menu-rv .btn, #menu-rv .btn-small {
  width: 100%; min-height: 50px; border-radius: 14px; font-size: 14px; font-weight: 900;
  background: linear-gradient(135deg, #ffe07a, #ffcf3d 55%, #ff9a3d); color: #2a1a00; border: 0;
  box-shadow: 0 8px 24px rgba(255, 190, 60, 0.3), 0 0 34px rgba(255, 207, 61, 0.2);
  padding: 0 12px; text-align: center; white-space: normal; line-height: 1.15;
}
#menu-missions { display: flex; flex-direction: column; gap: 6px; }
/* два представления миссий: компактные чипы (портрет) и полные строки (ландшафт/десктоп) */
.mchips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.mchip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 50px; padding: 6px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
}
.mchip .hd2 { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--ink2); white-space: nowrap; }
.mchip .bar { width: 100%; }
.mchip.done { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.mchip.done .hd2 { color: var(--ok); }
.mrows { display: none; flex-direction: column; gap: 6px; }
#menu-missions .mchips { display: grid; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  #menu-missions .mchips { display: none; }
  #menu-missions .mrows { display: flex; }
}

#btn-challenge {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 8px 11px; border-radius: 13px; text-align: left; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(255, 62, 165, 0.16), rgba(160, 107, 255, 0.12));
  border: 1px solid rgba(255, 62, 165, 0.32);
}
#btn-challenge .em { font-size: 19px; flex: 0 0 auto; }
#btn-challenge .cc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#btn-challenge .n1 { font-size: 13.5px; font-weight: 900; }
#btn-challenge .n2 { flex-basis: 100%; order: 9; font-size: 11.5px; color: var(--ink2); font-weight: 600; line-height: 1.25; }
#btn-challenge .n2:empty { display: none; }
/* .sub2 — вторая строка «Вызова дня» (название шаблона + лучший результат), ui-neon.md §4.1 */
#btn-challenge .n2.sub2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-challenge .go { font-size: 18px; color: var(--mg); font-weight: 900; }
#challenge-badge { font-size: 11px; font-weight: 900; color: var(--go); }
#challenge-badge.chip { min-height: 22px; padding: 0 7px; font-size: 10.5px; flex: 0 0 auto; }
#challenge-badge:empty { display: none; }
/* «Ваша форма» (§3): только там, где во второй колонке реально есть место.
   В портрете и низком ландшафте прячем — иначе меню начнёт прокручиваться. */
#menu-side { display: none; flex-direction: column; gap: var(--gap); }
#menu-side .rewards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#menu-side.side { padding: 11px 12px; --acc: var(--cy); }
#menu-side .eyebrow { margin: 0 0 8px; }
@media (min-width: 900px) {
  #menu-side:not([hidden]) { display: flex; }
}

/* нижний рельс */
#rail { display: flex; gap: 8px; align-items: stretch; justify-content: space-between; flex-wrap: nowrap; }
.rail-b {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 3px; border-radius: var(--r2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 800; color: var(--ink2); text-align: center;
  line-height: 1.1; overflow: hidden; position: relative;
}
.rail-b:hover { border-color: var(--line2); background: rgba(48, 28, 92, 0.6); }
.rail-b:active { transform: scale(0.97); }
.rail-b::before { font-size: 18px; line-height: 1; }
#btn-shop::before { content: '🛍'; }
#btn-style::before { content: '🎨'; }
#btn-stats::before { content: '📊'; }
#btn-lb::before { content: '🏆'; }
.rail-b .badge {
  position: absolute; top: 5px; right: 8px; width: 8px; height: 8px; padding: 0; font-size: 0;
  border-radius: 50%; background: var(--mg); box-shadow: 0 0 9px var(--mg);
}
/* у «Звука» текст уже содержит эмодзи (ui.js renderMenu) — рисуем одной строкой */
#btn-mute { font-size: 11px; width: auto; height: auto; }
.rail-b .e { font-size: 18px; line-height: 1; }
.rail-b .l { font-size: 10.5px; font-weight: 800; color: var(--ink2); }

#menu-news, #lan-badge, #boss-hint {
  font-size: 11.5px; color: var(--ink2); text-align: center;
  max-height: 2.6em; overflow: hidden; word-break: break-word;
}
#menu-news { color: var(--go); }
#menu-version { font-size: 11px; color: var(--ink3); text-align: center; letter-spacing: 0.02em; }
#menu-version:empty { display: none; }
.ftue { animation: breathe 2.2s ease-in-out infinite; }

/* --------------------------------------------------- 9. Настройки матча .ms */
.ms { position: relative; display: flex; flex-direction: column; gap: 5px; }
.ms .ms-title { margin: 8px 0 3px 2px; }
.ms .ms-title:first-child { margin-top: 0; }
.ms-group { display: flex; flex-wrap: wrap; gap: 7px; }
.ms-group .chip {
  min-height: 42px; padding: 0 14px; font-size: 14px; cursor: pointer;
  position: relative; transition: border-color 0.14s, background 0.14s;
}
.ms-group .chip:hover { border-color: var(--line2); }
.ms-group .chip input { position: absolute; opacity: 0; width: 0; height: 0; min-width: 0; min-height: 0; margin: 0; padding: 0; pointer-events: none; }
.ms-group .chip:focus-within { outline: 2px solid var(--cy); outline-offset: 2px; }
.ms.disabled .chip { cursor: default; opacity: 0.75; }
.ms label.chk {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 6px 12px; margin-top: 4px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.ms label.chk input { order: 2; margin-left: auto; }
.ms label.chk > .tx, .ms label.chk > span:not(.sw):not(.tx) { flex: 1; min-width: 0; }
.ms label.chk > .sw, .sw-row > .sw { flex: 0 0 auto; margin-left: auto; }
.ms > small { font-size: 12px; color: var(--ink3); margin: 2px 0 4px 12px; }

/* --------------------------------------------------------- 10. Локально */
#local-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot-card {
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); border-left: 3px solid var(--tm, var(--cy));
  border-radius: var(--r2); padding: 9px 10px; display: flex; flex-direction: column; gap: 7px;
  transition: box-shadow 0.2s;
}
.slot-card[data-slot="2"], .slot-card[data-slot="3"] { --tm: var(--mg); }
.slot-card .slot-name { font-weight: 800; font-size: 13.5px; color: var(--ink2); }
/* side-finding: явные правила для селекта устройства — ширину задаёт карточка, а не браузер по
   самой длинной опции (тест «device selects are not clipped at 360×640»). 16 px — против зума iOS. */
.slot-card .slot-device {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-card.flash { box-shadow: 0 0 0 2px var(--cy), 0 0 20px rgba(46, 242, 255, 0.5); }
#local-hint { color: var(--ink2); min-height: 18px; font-size: 12.5px; }
#local-hint.err { color: var(--danger); }
#local-settings { margin-top: 10px; }

/* -------------------------------------------------- 11. Онлайн / лобби */
#online-actions { display: flex; flex-direction: column; gap: 10px; }
#btn-online-quick {
  width: 100%; min-height: 76px; border-radius: 18px; font-size: 19px;
  white-space: normal; line-height: 1.15; padding: 0 16px;
}
.card.friend { --acc: var(--vi); display: flex; flex-direction: column; gap: 9px; }
.card.friend > .eyebrow { margin-bottom: -3px; }
.card.note { --acc: var(--go); display: flex; flex-direction: column; gap: 6px; }
.card.note h3 { font-size: 15px; }
.card.note p { margin: 0; font-size: 13px; color: var(--ink2); word-break: break-word; }
#set-cloud { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: var(--ink2); }
#set-cloud #cloud-state { flex: 1; min-width: 0; }
.codebox { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card.friend #input-code { flex: 1 1 150px; }
.card.friend #btn-online-paste { flex: 0 0 auto; }
.card.friend #btn-online-join { flex: 1 1 100%; }
#input-code {
  flex: 1; min-width: 0; height: 48px; border-radius: 12px; text-align: center;
  background: rgba(6, 4, 16, 0.55); border: 1.5px solid rgba(160, 107, 255, 0.42);
  font-size: 20px; font-weight: 900; letter-spacing: 0.26em; text-transform: uppercase;
  color: #efe6ff; outline: none; -webkit-user-select: text; user-select: text; padding: 0 0 0 0.26em;
}
#input-code:focus { border-color: var(--vi); box-shadow: 0 0 0 3px rgba(160, 107, 255, 0.22), 0 0 22px rgba(160, 107, 255, 0.3); }
.btn.join {
  min-width: 48px; padding: 0 14px; height: 48px; border: 0; border-radius: 12px;
  background: linear-gradient(140deg, #a06bff, #6b3bff); color: #fff; font-weight: 900;
  box-shadow: 0 6px 18px rgba(120, 60, 255, 0.4);
}
#online-lan, #lobby-lan { color: var(--ink2); font-size: 12.5px; word-break: break-word; }
#online-signin-hint {
  margin: 0; padding: 10px 13px; border-radius: var(--r2); font-size: 12.5px; color: #ffe9a8;
  background: rgba(255, 207, 61, 0.09); border: 1px solid rgba(255, 207, 61, 0.28); word-break: break-word;
}
#online-signin-hint::before { content: '☁️ '; }

.codecard { --acc: var(--vi); text-align: center; display: flex; flex-direction: column; gap: 9px; align-items: center; }
#lobby-code {
  font-size: 30px; font-weight: 900; letter-spacing: 0.26em; padding: 8px 10px 8px calc(10px + 0.26em);
  border-radius: var(--r2); color: #efe6ff;
  background: rgba(10, 6, 26, 0.6); border: 1.5px solid rgba(160, 107, 255, 0.45);
  box-shadow: 0 0 24px rgba(160, 107, 255, 0.22) inset;
}
#lobby-code:empty { display: none; }
.big-code { display: flex; gap: 8px; justify-content: center; }
.big-code b {
  width: 52px; height: 62px; border-radius: var(--r2); display: grid; place-items: center;
  font-size: 30px; font-weight: 900; color: #efe6ff;
  background: rgba(10, 6, 26, 0.6); border: 1.5px solid rgba(160, 107, 255, 0.45);
  box-shadow: 0 0 24px rgba(160, 107, 255, 0.22) inset;
}
/* §4.4: слоты — широкие строки в одну колонку (портрет · имя · бейдж справа).
   Двухколоночная сетка на 360–390 px ломала карточку на две строки с переносом бейджей.
   Ландшафт/десктоп возвращают многоколоночную сетку своими медиазапросами ниже. */
#lobby-slots { display: grid; grid-template-columns: 1fr; gap: 7px; }
.lobby-slot {
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); border-left: 3px solid var(--tm, var(--cy));
  border-radius: var(--r2); padding: 9px 10px; min-height: 64px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer;
}
.lobby-slot[data-slot="2"], .lobby-slot[data-slot="3"] { --tm: var(--mg); }
.lobby-slot.you { box-shadow: inset 0 0 0 1px rgba(46, 242, 255, 0.5); }
.lobby-slot.taken { cursor: default; }
.ls-name { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ls-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-badges { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--ink2); }
.ls-badges .badge { padding: 2px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-weight: 800; }
.badge.ready { color: var(--ok); background: rgba(74, 222, 128, 0.14); }
.badge.lost { color: var(--danger); background: rgba(255, 92, 106, 0.14); }
.badge.idle { color: var(--warn); background: rgba(255, 207, 61, 0.12); }
.badge.bot { color: var(--ink3); }
.ls-kick { align-self: flex-start; min-height: 32px; min-width: 0; padding: 0 10px; font-size: 12px; background: rgba(255, 92, 106, 0.14); border-color: rgba(255, 92, 106, 0.3); color: #ffc9cf; border-radius: 9px; }
#lobby-status { color: var(--ink2); min-height: 18px; font-size: 12.5px; text-align: center; }
#lobby-settings { margin-top: 10px; }
#btn-lobby-ready.on { background: linear-gradient(120deg, rgba(74, 222, 128, 0.24), rgba(46, 242, 255, 0.18)); border-color: rgba(74, 222, 128, 0.5); color: #d6ffe6; }
/* §4.4: пока лидер не может начать из-за этого игрока — обводка, но без заливки,
   чтобы кнопка не спорила по весу с «Стартом» (единственная primary в доке лобби). */
#btn-lobby-ready.need {
  border-color: rgba(46, 242, 255, 0.62); color: #d8fbff;
  box-shadow: 0 0 0 1px rgba(46, 242, 255, 0.22), 0 0 18px rgba(46, 242, 255, 0.28);
  animation: ready-pulse 1.8s ease-in-out infinite;
}
@keyframes ready-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(46, 242, 255, 0.22), 0 0 14px rgba(46, 242, 255, 0.2); }
  50% { box-shadow: 0 0 0 1px rgba(46, 242, 255, 0.42), 0 0 26px rgba(46, 242, 255, 0.42); }
}
@media (prefers-reduced-motion: reduce) { #btn-lobby-ready.need { animation: none; } }

.queue { align-items: center; text-align: center; }
.queue h2 { text-align: center; }
#queue-hint { color: var(--ink2); font-size: 13px; }
.spinner {
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--cy) 100%);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- 12. Настройки */
/* §4.10: группы разделяет только надзаголовок и воздух — линейки в эталоне нет,
   а вместе с ней до сгиба помещалось на строку настроек меньше */
.setgroup {
  display: flex; flex-direction: column; gap: 6px;
  margin: 11px 0 0; padding-bottom: 0; border-bottom: 0;
}
.setgroup:first-of-type { margin-top: 4px; }
.sw-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
}
label.sw-row { cursor: pointer; }
.sw-row .tx { flex: 1; min-width: 0; }
.sw-row .t1 { display: block; font-size: 14.5px; font-weight: 700; }
.sw-row .t2 { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; line-height: 1.25; }
.sw-row .t2:empty { display: none; }
.setgroup > .eyebrow { margin: 2px 0 -1px 2px; }
/* «Как играть» карточкой в начале настроек (ui-neon.md §4.10) */
.howto-card {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 10px 13px; border-radius: var(--r2); text-align: left;
  --acc: var(--vi);
  background: linear-gradient(120deg, rgba(160, 107, 255, 0.16), rgba(20, 10, 44, 0.5));
  border: 1px solid rgba(160, 107, 255, 0.34); color: var(--ink);
  margin-bottom: 10px;
}
.howto-card .em { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.howto-card .tx { flex: 1; min-width: 0; }
.howto-card .t1 { display: block; font-size: 15px; font-weight: 800; }
.howto-card .t2 { display: block; font-size: 12px; color: var(--ink2); margin-top: 2px; line-height: 1.25; }
.howto-card .go { font-size: 20px; color: var(--ink3); font-weight: 900; }
.howto-card:hover { border-color: rgba(160, 107, 255, 0.6); }

/* ------------------------------- 13. Как играть / статистика / рейтинг */
#howto-body { font-size: 14px; color: var(--ink); }
#howto-body p { margin: 0 0 8px; color: var(--ink2); font-size: 13.5px; line-height: 1.4; }
#howto-body ul { margin: 4px 0 10px; padding-left: 20px; color: var(--ink2); font-size: 13.5px; }
#howto-body li { margin-bottom: 4px; }
#stats-body, #lb-list { font-size: 14px; }
#stats-body .ms-title { margin: 12px 0 5px; }
.stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.stat-row:last-child { border-bottom: 0; }
.stat-row .v { font-weight: 800; color: var(--ink); }
.recent-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px; color: var(--ink2); font-size: 13px; }
.recent-row .win { color: var(--ok); font-weight: 800; }
.recent-row .lose { color: var(--mg); font-weight: 800; }
/* четыре таба рейтинга не влезают в 390 px: раньше первый («Рейтинг онлайн») обрезался
   левым краем. Теперь ряд прокручивается по горизонтали, а подписи ужимаются. */
#lb-tabs {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
}
#lb-tabs::-webkit-scrollbar { display: none; }
#lb-tabs .btn-small, #lb-tabs button {
  flex: 0 0 auto; padding: 0 11px; font-size: 12.5px; scroll-snap-align: center;
}
@media (max-width: 400px) { #lb-tabs .btn-small, #lb-tabs button { font-size: 12px; padding: 0 9px; } }
.lb-row { display: flex; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; }
.lb-row:last-child { border-bottom: 0; }
.lb-row .rank { width: 34px; color: var(--ink3); font-weight: 800; }
.lb-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .score { font-weight: 800; color: var(--ink2); }
.lb-row.you, .lb-row.you .score { color: var(--cy); font-weight: 800; }
#lb-note { color: var(--ink2); font-size: 12.5px; }

/* --------------------------------------------------- 14. Внешний вид */
.style-group { margin-bottom: 14px; }
.style-group .ms-title { margin-bottom: 7px; }
.style-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.style-item {
  position: relative; overflow: hidden; border-radius: var(--r2); padding: 9px 7px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  cursor: pointer; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink2);
  transition: border-color 0.14s, background 0.14s, transform 0.12s;
}
.style-item:hover { border-color: var(--line2); }
.style-item:active { transform: scale(0.98); }
.style-item.on {
  border-color: rgba(46, 242, 255, 0.7); color: #eafcff;
  background: linear-gradient(160deg, rgba(46, 242, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 22px rgba(46, 242, 255, 0.22);
}
.style-item.on::after { content: '✓'; position: absolute; top: 5px; right: 7px; font-size: 12px; color: var(--cy); }
.style-item.locked { opacity: 0.62; }
.style-item .cond { font-size: 10px; color: var(--ink3); line-height: 1.15; }
/* тёмные превью («Ночь», «Неон») без рамки читались как пустые плашки */
.style-item .icon { width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 18px rgba(46, 242, 255, 0.22); }
.style-item .buy {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%;
  min-height: 30px; padding: 0 6px; font-size: 11px; font-weight: 900; border-radius: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(201, 255, 61, 0.12); border: 1px solid rgba(201, 255, 61, 0.3); color: #e9ffc2;
}
.style-item .pair { display: flex; width: 40px; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); }
.style-item .pair span { flex: 1; }
.style-item .frame-preview { padding: 0 6px; display: inline-block; }
.swatch { width: 44px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.22); }
.swatch.ball { width: 26px; height: 26px; border-radius: 50%; border: 0; box-shadow: 0 0 14px currentColor; }
#style-ads { flex-wrap: wrap; justify-content: center; }
#style-ads:empty { display: none; }
#style-ads .btn, #result-ads .btn, #brief-ads .btn, #bonus-ads .btn {
  min-height: 46px; padding: 0 14px; font-size: 13.5px; white-space: normal; line-height: 1.15;
}

/* --------------------------------------------------------- 15. Результат */
.reshero { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
#result-title {
  font-size: clamp(26px, 5vh, 42px); font-weight: 900; line-height: 1.15; padding: 2px 0;
  background: linear-gradient(120deg, #c9ff3d, #2ef2ff 55%, #a06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(46, 242, 255, 0.32));
}
/* background-image, а не сокращение background: шорткат сбрасывал background-clip:text,
   и заголовок «Поражение» рисовался сплошным градиентным прямоугольником вместо букв */
#result-title.lose {
  background-image: linear-gradient(120deg, #ff9a3d, #ff3ea5 60%, #a06bff);
  filter: drop-shadow(0 0 22px rgba(255, 62, 165, 0.3));
}
#result-sub { color: var(--ink2); font-size: 13.5px; }
#result-score { font-size: clamp(30px, 6vh, 52px); font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
#result-score:empty { display: none; }
#result-sets { color: var(--ink2); font-size: 12.5px; }
#result-sets:empty { display: none; }
#result-stars { display: flex; gap: 10px; justify-content: center; font-size: 30px; line-height: 1; margin-top: 2px; }
#result-stars .star.on { animation: pop 0.35s ease-out both; }
#result-stars .star.on:nth-child(2) { animation-delay: 0.2s; }
#result-stars .star.on:nth-child(3) { animation-delay: 0.4s; }
#result-stars.instant .star.on { animation: none; }

#result-xp {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r2);
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
}
#result-xpbar { flex: 1; min-width: 90px; height: 7px; }
#result-xptext { font-size: 12px; font-weight: 800; color: var(--cy); white-space: nowrap; }
#result-xptext:empty { display: none; }
#result-xplevel { font-size: 12px; font-weight: 800; color: var(--ink2); white-space: nowrap; }
#result-xp.levelup #result-xpfill { background: linear-gradient(90deg, var(--cy), var(--vi)); box-shadow: 0 0 14px rgba(255, 207, 61, 0.45); }
/* «Новый уровень!» встаёт в тот же ряд, если ширины хватает, и уходит на свою строку только на телефоне */
#result-xp .lvl-up { width: auto; color: var(--go); font-weight: 800; font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 560px) { #result-xp .lvl-up { width: 100%; } }
/* «+85 🎾» и «1250 Рейтинг» стоят в ряд плитками (ui-neon.md §4.9).
   Обёртка схлопывается, когда обе плитки скрыты, — иначе на экране остаётся пустой gap. */
.res-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: stretch; }
.res-tiles:not(:has(> :not([hidden]))) { display: none; }
.res-tiles > * { margin: 0; }
.res-tiles:has(> #result-balls[hidden]), .res-tiles:has(> #result-rating[hidden]) { grid-template-columns: 1fr; }
#result-balls {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
  padding: 10px; border-radius: var(--r2); background: rgba(201, 255, 61, 0.08); border: 1px solid rgba(201, 255, 61, 0.24);
}
#result-balls-num { font-size: 22px; font-weight: 900; color: var(--li); }
#result-balls-note { color: var(--ink3); font-size: 11.5px; line-height: 1.25; }
#result-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
#result-stats .card { padding: 9px 6px; text-align: center; font-size: 12px; color: var(--ink2); border-radius: var(--r2); box-shadow: none; }
#result-star-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink2); }
#result-star-list .star-line, #brief-stars .star-line {
  display: flex; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
}
#result-star-list .star-line.ok, #brief-stars .star-line.got { color: var(--ink); border-color: rgba(255, 207, 61, 0.35); background: rgba(255, 207, 61, 0.08); }
#result-star-list .star-line .chk { width: 16px; display: inline-block; font-weight: 900; }
#result-star-list .boss-line { color: var(--go); font-weight: 800; font-size: 12.5px; }
#result-missions { display: flex; flex-direction: column; gap: 6px; }
#result-missions .m-almost { color: var(--go); font-size: 12px; }
#result-unlock {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px; border-radius: var(--r2);
  background: linear-gradient(120deg, rgba(255, 207, 61, 0.16), rgba(20, 10, 44, 0.5));
  border: 1px solid rgba(255, 207, 61, 0.36);
}
#result-unlock-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; color: var(--go); }
#result-rating, #result-newtitle, #result-streak, #result-votes, #result-daily { color: var(--ink2); font-size: 12.5px; text-align: center; }
#result-rating:empty, #result-streak:empty, #result-daily:empty { display: none; }
#result-newtitle { color: var(--go); font-weight: 800; }
#result-votes { font-weight: 800; color: var(--ink); }
#result-daily .best { color: var(--ok); font-weight: 800; }
#result-card { padding: 10px 12px; border-radius: var(--r2); background: var(--glass); border: 1px solid var(--line); }
#result-card p { font-size: 13.5px; margin: 0 0 8px; }
#result-card .row { justify-content: center; }
#result-card .row .btn { min-height: 46px; }
#result-ads { display: flex; justify-content: center; }
.price { white-space: nowrap; }
.p-cur { height: 15px; vertical-align: middle; margin-left: 4px; }

/* раскрытие результата J7 */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; }
.reveal.in { opacity: 1; transform: none; }
#result-title.reveal.in { animation: title-pop 0.35s ease-out both; }
@keyframes title-pop { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* миссии (меню и результат) */
.mission-row {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center;
  padding: 7px 9px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
  font-size: 13px;
}
.mission-row .m-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mission-row .m-count { color: var(--ink2); white-space: nowrap; font-weight: 800; font-size: 12px; }
.mission-row .m-bar { grid-column: 1 / 3; height: 6px; }
.mission-row .m-reward { grid-column: 1 / 3; color: var(--li); font-size: 11.5px; font-weight: 800; }
.mission-row.done { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
/* newbie-desktop-9: невыполненная миссия в «Сегодня» — кнопка «пойти играть» */
.mission-row.go, .mchip.go { cursor: pointer; }
.mission-row.go:hover, .mchip.go:hover { border-color: var(--cy); background: rgba(46, 242, 255, 0.08); }
.mission-row.go:focus-visible, .mchip.go:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.mission-row.done .m-name::after { content: ' ✓'; color: var(--ok); }
.mission-row.done .m-reward { color: var(--ok); }

/* ----------------------------------------------------------- 16. Карьера */
/* карточка «Следующая награда» (ui-neon.md §4.5): 🏓 · надзаголовок · название · чип «ещё 4 ★» · полоса */
#career-progress {
  --acc: var(--go); padding: 10px 13px; font-size: 12.5px; color: var(--ink2);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 11px;
}
#career-progress > .em { grid-row: 1; font-size: 26px; line-height: 1; filter: drop-shadow(0 0 12px rgba(255, 207, 61, 0.4)); }
#career-progress > .nextrw { grid-row: 1; min-width: 0; }
#career-progress > .chip { grid-row: 1; min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 900; line-height: 30px; }
#career-progress > .bar { grid-row: 2; grid-column: 1 / -1; margin-top: 4px; }
.nextrw .eyebrow { margin: 0; font-size: 10.5px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nextrw .n { display: block; font-size: 14.5px; font-weight: 900; color: var(--ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#career-stars { color: var(--go); font-weight: 900; font-size: 13.5px; }
#career-ring .ring { --sz: 44px; }
#career-ring:empty { display: none; }
.career-tier { margin-bottom: 16px; }
.career-tier[data-tier="1"] { --tc: var(--cy); }
.career-tier[data-tier="2"] { --tc: var(--vi); }
.career-tier[data-tier="3"] { --tc: var(--mg); }
.career-tier[data-tier="4"] { --tc: var(--li); }
.career-tier[data-tier="5"] { --tc: var(--go); }
.career-tier[data-tier="6"] { --tc: var(--mg); }
h3.tier-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 900; letter-spacing: 0.01em; margin: 0 0 9px; color: var(--ink);
}
h3.tier-title .e { font-size: 17px; line-height: 1; flex: 0 0 auto; }
h3.tier-title .n { flex: 0 0 auto; }
h3.tier-title .ln { flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, var(--tc, var(--cy)), transparent); opacity: 0.6; }
h3.tier-title .st { font-size: 12px; color: var(--ink2); font-weight: 700; flex: 0 0 auto; }
/* запасной вариант, если заголовок корпуса — просто текст */
h3.tier-title:not(:has(.ln)) { padding-left: 11px; position: relative; }
h3.tier-title:not(:has(.ln))::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--tc, var(--cy)); box-shadow: 0 0 10px var(--tc, var(--cy)); }
.career-nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.career-node {
  position: relative; min-width: 0; min-height: 92px; padding: 8px 5px 7px; border-radius: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
  color: var(--ink); text-align: center; cursor: pointer;
  transition: transform 0.12s, border-color 0.14s;
}
.career-node:hover { transform: translateY(-2px); border-color: var(--line2); }
.career-node .node-num { font-size: 15px; font-weight: 900; line-height: 1; color: var(--ink); }
.career-node .node-name {
  font-size: 10.5px; font-weight: 600; color: var(--ink3); line-height: 1.15; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.career-node .node-stars { font-size: 10px; }
.career-node.done { background: linear-gradient(160deg, rgba(46, 242, 255, 0.14), rgba(255, 255, 255, 0.04)); border-color: rgba(46, 242, 255, 0.32); }
.career-node.open {
  background: linear-gradient(160deg, rgba(255, 62, 165, 0.22), rgba(160, 107, 255, 0.14));
  border-color: rgba(255, 62, 165, 0.65);
  box-shadow: 0 0 24px rgba(255, 62, 165, 0.32), inset 0 0 22px rgba(255, 62, 165, 0.1);
}
.career-node.locked { opacity: 0.5; }
.career-node.locked .node-num { color: var(--ink3); }
.career-node.boss {
  grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 4px 12px; min-height: 76px; padding: 11px 13px; text-align: left; border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 62, 165, 0.16), rgba(20, 10, 44, 0.55));
  border-color: rgba(255, 62, 165, 0.34);
}
.career-node.boss .node-num { font-size: 10.5px; font-weight: 900; color: var(--mg); text-transform: none; }
.career-node.boss .node-num .up { letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.career-node.boss .node-num .nmx { letter-spacing: 0.01em; text-transform: none; }
.career-node.boss .node-name { font-size: 15px; font-weight: 900; color: var(--ink); -webkit-line-clamp: 2; text-align: left; }
.career-node.boss .node-stars { flex: 0 0 auto; font-size: 12px; }
.career-node.boss .portrait { flex: 0 0 auto; }
.career-node.boss.done { background: linear-gradient(120deg, rgba(74, 222, 128, 0.12), rgba(20, 10, 44, 0.5)); border-color: rgba(74, 222, 128, 0.4); }
.career-node.boss.locked { background: linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(20, 10, 44, 0.5)); border-color: var(--line); }
.career-node .node-reward { display: block; font-size: 11px; color: var(--go); opacity: 0.9; }
.career-node.boss > .node-num, .career-node.boss > .node-name { flex-basis: 100%; text-align: left; }
.career-node.boss .node-name { -webkit-line-clamp: 2; }

/* ------------------------------------------------------ 17. Бриф / вызов */
#brief-bots, #challenge-bots { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
#brief-bots.group, #challenge-bots.group { display: block; }
.bots-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bot-card {
  width: min(30vw, 128px); text-align: center; border-radius: var(--r2); padding: 9px 6px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12.5px;
}
.bot-card .bot-role { font-size: 10px; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; }
.bot-card .bot-name { font-weight: 800; font-size: 13.5px; }
.bot-card .bot-level { color: var(--ink3); font-size: 11px; }
.bot-card .bot-intro { font-size: 11.5px; color: #ffd7ec; font-style: italic; line-height: 1.2; }
.bot-card.boss { background: linear-gradient(160deg, rgba(255, 62, 165, 0.16), rgba(20, 10, 44, 0.5)); border-color: rgba(255, 62, 165, 0.34); }
.bot-card.boss .bot-name { color: #ffb8dd; }
#brief-mods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#brief-mods .ms-title { width: 100%; margin-bottom: 2px; }
.mod-chip { font-size: 12.5px; min-height: 32px; }
#brief-stars { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#brief-stars .ms-title { margin-bottom: 2px; }
#brief-stars .star-line .stars { white-space: nowrap; }
#brief-stars .brief-rec { color: var(--ink3); font-size: 12px; }
#brief-tip {
  --acc: var(--cy); position: relative; padding: 10px 13px; border-radius: var(--r2); font-size: 13px;
  background: rgba(46, 242, 255, 0.08); border: 1px solid rgba(46, 242, 255, 0.3); color: var(--ink2);
}
#brief-tier { color: var(--ink2); font-size: 13px; }
#challenge-hint { color: var(--ink2); font-size: 13px; }
#challenge-tpl { --acc: var(--mg); }
#challenge-tpl .tpl-name { font-weight: 900; font-size: 16px; }
#challenge-tpl .tpl-hint { color: var(--ink2); font-size: 12.5px; margin-top: 3px; }
#challenge-best, #challenge-streak, #challenge-reward { color: var(--ink2); font-size: 13px; text-align: center; }
#challenge-best:empty, #challenge-streak:empty, #challenge-reward:empty { display: none; }
#challenge-best.has { color: var(--ink); font-weight: 800; }

/* ----------------------------------------------------------- 18. Магазин */
#shop-list { display: flex; flex-direction: column; gap: 12px; }
.shop-group { display: flex; flex-direction: column; gap: 9px; }
.shop-group .ms-title { margin-bottom: 0; }
.product-card {
  position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-auto-rows: min-content;
  gap: 3px 11px; align-items: center; padding: 11px; border-radius: 16px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--rc, var(--line));
  transition: transform 0.13s, box-shadow 0.18s;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 26px var(--rg, transparent); }
.product-card .p-icon { width: 64px; height: 64px; border-radius: 12px; background: rgba(6, 4, 16, 0.5); grid-row: span 4; align-self: center; }
.product-card .p-title { font-weight: 800; font-size: 14.5px; }
.product-card .p-rarity { font-size: 9.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc, var(--ink3)); }
.product-card .p-desc { font-size: 12px; color: var(--ink2); }
.product-card .p-hint { font-size: 11.5px; color: var(--ink3); }
.product-card .p-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.product-card .p-buy {
  min-height: 40px; min-width: 0; padding: 0 14px; font-size: 13.5px; font-weight: 900; border-radius: 11px;
  background: rgba(201, 255, 61, 0.12); border: 1px solid rgba(201, 255, 61, 0.3); color: #e9ffc2;
}
.product-card .p-buy:hover { background: rgba(201, 255, 61, 0.2); }
.product-card .p-owned { color: var(--ok); font-size: 13px; font-weight: 800; }
.product-card.owned, .product-card.included { border-color: rgba(74, 222, 128, 0.3); }
.product-card.owned .p-buy, .product-card.included .p-buy { opacity: 0.5; pointer-events: none; }
.product-card.featured { --rc: rgba(255, 207, 61, 0.72); --rg: rgba(255, 207, 61, 0.26); }
.product-card.common { --rc: rgba(255, 255, 255, 0.18); --rg: rgba(255, 255, 255, 0.06); }
.product-card.rare { --rc: rgba(46, 242, 255, 0.55); --rg: rgba(46, 242, 255, 0.2); }
.product-card.epic { --rc: rgba(255, 62, 165, 0.6); --rg: rgba(255, 62, 165, 0.22); }
.product-card.legendary, .product-card.legend { --rc: rgba(255, 207, 61, 0.72); --rg: rgba(255, 207, 61, 0.26); }
#shop-supporter { color: var(--ok); font-size: 12.5px; }
#shop-list .muted { padding: 8px 2px; }

/* витрина плитками (если ui.js начнёт отдавать .shelf/.item — ui-neon.md §4.7) */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.item {
  position: relative; border-radius: 16px; padding: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--rc, var(--line));
}
.item .em { font-size: 34px; line-height: 1; }
.item .nm { font-size: 13.5px; font-weight: 800; line-height: 1.15; }
.item .rar { font-size: 9.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc); }
.item .price {
  margin-top: 2px; width: 100%; min-height: 38px; border-radius: 11px; font-size: 13.5px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: rgba(201, 255, 61, 0.12); border: 1px solid rgba(201, 255, 61, 0.3); color: #e9ffc2;
}
.item .price.yan { background: rgba(255, 207, 61, 0.12); border-color: rgba(255, 207, 61, 0.32); color: #ffe9a8; }
.item .price.own { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); color: #b9f5cf; }
.item .price.no { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--ink3); }
.r-com { --rc: rgba(255, 255, 255, 0.18); --rg: rgba(255, 255, 255, 0.06); }
.r-rare { --rc: rgba(46, 242, 255, 0.55); --rg: rgba(46, 242, 255, 0.2); }
.r-epic { --rc: rgba(255, 62, 165, 0.6); --rg: rgba(255, 62, 165, 0.22); }
.r-leg { --rc: rgba(255, 207, 61, 0.72); --rg: rgba(255, 207, 61, 0.26); }

/* -------------------------------------------------------- 19. Портреты */
.portrait { position: relative; display: inline-block; width: var(--size, 48px); height: var(--size, 48px); flex-shrink: 0; }
.portrait .p-head {
  position: absolute; inset: 0; border-radius: var(--shape, 50%); background: var(--tone, #888);
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.2), 0 0 16px rgba(255, 62, 165, 0.22);
}
.portrait .p-eye { position: absolute; top: 40%; width: 14%; height: 14%; border-radius: 50%; background: #1a1a2a; }
.portrait .p-eye.l { left: 26%; } .portrait .p-eye.r { right: 26%; }
.portrait.eyes-dash .p-eye { height: 6%; border-radius: 2px; width: 18%; top: 44%; }
.portrait.eyes-dash .p-eye.l { left: 22%; } .portrait.eyes-dash .p-eye.r { right: 22%; }
.portrait.eyes-glasses .p-eye { width: 24%; height: 24%; top: 34%; background: rgba(255, 255, 255, 0.5); border: 2px solid #1a1a2a; box-sizing: border-box; }
.portrait.eyes-glasses .p-eye.l { left: 18%; } .portrait.eyes-glasses .p-eye.r { right: 18%; }
.portrait .p-acc { position: absolute; }
.portrait .acc-cap { left: 10%; right: 10%; top: -4%; height: 28%; background: #23324f; border-radius: 50% 50% 8% 8%; }
.portrait .acc-cap::after { content: ''; position: absolute; left: -10%; right: 40%; bottom: -12%; height: 24%; background: #23324f; border-radius: 4px; }
.portrait .acc-drop { right: 6%; top: 18%; width: 12%; height: 18%; background: #6fd3ff; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; }
.portrait .acc-band { left: 4%; right: 4%; top: 14%; height: 12%; background: #ff5c5c; border-radius: 3px; }
.portrait .acc-glasses { display: none; }
.portrait .acc-whistle { right: 4%; bottom: 8%; width: 24%; height: 16%; background: #d0d0d0; border-radius: 40%; box-shadow: -4px -4px 0 -2px #d0d0d0; }
.portrait .acc-list { right: 2%; bottom: 4%; width: 22%; height: 32%; background: #f5f5f5; border-radius: 2px; background-image: repeating-linear-gradient(#f5f5f5 0 25%, #999 25% 35%); }
.portrait .acc-tie { left: 44%; bottom: -2%; width: 12%; height: 30%; background: #c9102a; transform: rotate(45deg) skew(10deg, 10deg); border-radius: 2px; }
.portrait .acc-crown { left: 20%; right: 20%; top: -10%; height: 26%; background: #FFD84D; clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); }
.portrait .acc-cup { right: 0; bottom: 0; width: 28%; height: 32%; background: #FFD84D; clip-path: polygon(0 0, 100% 0, 80% 60%, 65% 75%, 65% 90%, 100% 100%, 0 100%, 35% 90%, 35% 75%, 20% 60%); }

/* рамки имени */
.frame-dorm { outline: 2px dashed #7aa0ff; outline-offset: 2px; }
.frame-lab { outline: 2px dotted #5fe3c0; outline-offset: 2px; background: radial-gradient(circle at 10% 50%, rgba(95, 227, 192, 0.25) 0 3px, transparent 4px); }
.frame-champion { background: linear-gradient(90deg, #c9a227, #fff2a8, #c9a227); background-size: 200% 100%; animation: shine 2s linear infinite; color: #150b2c; border-radius: 6px; padding: 0 6px; }
.frame-gold { outline: 2px solid var(--go); box-shadow: 0 0 8px rgba(255, 207, 61, 0.5); }
@keyframes shine { to { background-position: 200% 0; } }
#menu-player.frame-dorm, #menu-player.frame-lab, #menu-player.frame-gold { padding: 0 6px; border-radius: 6px; }

/* -------------------------------------- 20. Пауза, пинг, оверлеи, тост */
#btn-pause {
  position: fixed; z-index: 20;
  top: calc(8px + var(--sat)); right: calc(8px + var(--sar));
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(12, 7, 28, 0.7); border: 1px solid var(--line); color: var(--ink2); font-size: 18px;
}
#ping {
  position: fixed; z-index: 20; left: calc(10px + var(--sal)); top: calc(12px + var(--sat));
  font-size: 12px; font-weight: 800; color: var(--ok); pointer-events: none; text-shadow: 0 1px 3px #000;
  max-width: 22vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ping.warn { color: var(--warn); }
#ping.bad { color: var(--danger); }

.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  background: rgba(4, 2, 10, 0.74); pointer-events: auto;
}
.overlay .sheet {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: min(92vw, 420px); max-height: 100%; overflow-y: auto; text-align: center;
  padding: 16px; border-radius: 20px;
  background: var(--glass2); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.overlay .sheet h2 { text-align: center; }
.overlay .sheet p { font-size: 14.5px; color: var(--ink2); margin: 0; }
.overlay .sheet .row { justify-content: center; }
.overlay .sheet .row .btn { flex: 1; min-width: 0; }
#overlay-ad { background: rgba(4, 2, 10, 0.94); z-index: 40; }
#overlay-ad p { font-size: 40px; color: var(--ink3); }
#overlay-modal { z-index: 35; }
#overlay-bonus { z-index: 33; }
#overlay-pay { z-index: 36; }
#keys-table {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left;
  background: rgba(255, 255, 255, 0.04); border-radius: var(--r2); padding: 12px; font-size: 13.5px;
}
#keys-table .k { font-weight: 800; color: var(--cy); white-space: nowrap; }
#keys-table .full { grid-column: 1 / -1; color: var(--ink2); }
#pause-note, #bonus-hint, #pay-hint, #bonus-streak { color: var(--ink2); font-size: 13px; text-align: center; text-wrap: balance; }
/* семь дней ровной сеткой 4×2, а не «шесть в ряд + один по центру» после переноса */
#bonus-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#bonus-days .bonus-day:nth-child(5) { grid-column: 1 / 2; }
@media (min-width: 420px) { #bonus-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.bonus-day {
  min-width: 44px; padding: 7px 4px; border-radius: 11px; text-align: center; font-size: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.bonus-day .b-day { color: var(--ink3); font-size: 10px; white-space: nowrap; }
.bonus-day .b-amt { font-weight: 900; white-space: nowrap; color: var(--li); }
.bonus-day.done { opacity: 0.55; }
.bonus-day.cur { border-color: rgba(255, 207, 61, 0.6); background: rgba(255, 207, 61, 0.12); box-shadow: 0 0 18px rgba(255, 207, 61, 0.22); }
#btn-bonus-claim.claimed { background: rgba(255, 255, 255, 0.06); color: var(--ok); box-shadow: none; border: 1px solid var(--line); }

#toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(24px + var(--sab) + var(--banner));
  transform: translateX(-50%);
  max-width: 90vw; padding: 11px 18px; border-radius: 13px;
  background: rgba(24, 13, 48, 0.96); border: 1px solid var(--line2); color: var(--ink);
  font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
  pointer-events: none; animation: toast-in 0.18s ease-out;
}
/* в матче тост встаёт над канвасной подсказкой клавиш (render.js drawHint), иначе он вырезает
   её середину — а это единственное место, где вообще названа клавиша подачи (первые 3 розыгрыша) */
body.in-match #toast { bottom: calc(96px + var(--sab) + var(--banner)); }
/* §4.4: «Подключение…» приходит сразу после входа в комнату и ложился ровно на кнопку готовности
   в доке лобби. На низком ландшафте не поднимаем — там док и сам сжат, а места над ним нет. */
@media (min-height: 520px) { body.in-lobby #toast { bottom: calc(84px + var(--sab) + var(--banner)); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =====================================================================
   20b. Разметка, которую отдаёт ui.js по ui-neon.md (классы из прототипа)
   ===================================================================== */

/* группы и подзаголовки */
.group { margin-bottom: 13px; }
.group:last-child { margin-bottom: 0; }
.group > .eyebrow, .group > .ms-title { margin: 0 0 7px 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips .chip { min-height: 42px; font-size: 14px; padding: 0 14px; }

/* строки миссий (меню и результат) — mrow поверх .mission-row */
.mrow, .mission-row.mrow {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); text-align: left;
}
.mrow .em { font-size: 16px; width: 22px; text-align: center; flex: 0 0 auto; }
.mrow .mm { flex: 1; min-width: 0; display: block; }
.mrow .nm, .mrow .m-name {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mrow .m-count { color: var(--ink3); font-weight: 600; }
.mrow .bar, .mrow .m-bar { display: block; margin-top: 5px; width: 100%; }
.mrow .rw { font-size: 12px; font-weight: 900; color: var(--li); white-space: nowrap; }
.mrow.done, .mission-row.mrow.done { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.mrow.done .rw { color: var(--ok); }
.mission-row.mrow.done .m-name::after { content: none; }

/* «ежедневная награда» и любые крупные RV-кнопки */
.claim {
  width: 100%; min-height: 54px; border-radius: 15px; padding: 0 14px;
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.claim .em { font-size: 22px; }
.claim .tx { flex: 1; min-width: 0; }
.claim .t1 { display: block; font-size: 15px; font-weight: 900; }
.claim .t2 { display: block; font-size: 12px; font-weight: 700; opacity: 0.72; }
.claim .amt { font-size: 17px; font-weight: 900; white-space: nowrap; }

/* «VS» и мини-портреты */
.vs { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 2px 0; }
.vs .side { display: flex; gap: 8px; align-items: center; }
.vs .v { font-size: 13px; font-weight: 900; color: var(--mg); letter-spacing: 0.08em; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; }
.mini .nm { font-size: 11px; font-weight: 700; color: var(--ink2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.mini .lv { font-size: 10px; color: var(--ink3); }
.bots-row { justify-content: center; }

/* лобби / локально: подписи команд и цветные грани */
.teamlbl {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink3); margin: 4px 0 -2px 2px;
}
.teamlbl.red { color: #ffa8d0; }
.teamlbl.blue { color: #9fe6ff; }
.slot-card.red, .lobby-slot.red { --tm: var(--mg); }
.slot-card.blue, .lobby-slot.blue { --tm: var(--cy); }
.slot-card .slot-name { display: flex; align-items: center; gap: 7px; }
.slot-card .sn-num {
  width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 900; color: var(--ink2);
}
.slot-card .slot-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.lobby-slot { flex-direction: row; align-items: center; gap: 10px; flex-wrap: nowrap; min-height: 56px; }
.lobby-slot .portrait { flex: 0 0 auto; }
.lobby-slot .ls-name { flex: 1 1 auto; }
.lobby-slot .ls-badges { flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; }
.lobby-slot .ls-kick { align-self: center; flex: 0 0 auto; }
.badge.leader { color: var(--vi); background: rgba(160, 107, 255, 0.14); }
.badge.notready { color: var(--ink3); }
.badge.ok { color: var(--ok); }
.badge.me { color: var(--cy); background: rgba(46, 242, 255, 0.12); }
#lobby-code.big-code {
  background: none; border: 0; box-shadow: none; padding: 0; letter-spacing: 0; font-size: 0;
  display: flex; gap: 8px; justify-content: center;
}

/* карьера: узлы «ИГРАТЬ», замки, широкий узел босса */
.career-node .node-tag {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 7px; white-space: nowrap;
  background: var(--mg); color: #1b0413; box-shadow: 0 0 14px rgba(255, 62, 165, 0.6);
}
.career-node.now { z-index: 1; }
.career-node .node-lock { position: absolute; top: 6px; right: 7px; font-size: 11px; opacity: 0.8; }
.career-node .node-body { flex: 1; min-width: 0; display: block; text-align: left; }
.career-node .node-body > span { display: block; }
.career-node .node-quote { display: block; font-size: 11.5px; color: var(--ink2); margin-top: 2px; line-height: 1.25; }
.career-node.boss .node-body .node-name { margin-top: 1px; }
.career-node.boss .node-reward { flex-basis: 100%; font-size: 10.5px; margin-top: 5px; }
.portrait .p-lock {
  position: absolute; inset: 0; border-radius: var(--shape, 50%); display: grid; place-items: center;
  background: rgba(8, 5, 18, 0.62); font-size: calc(var(--size, 48px) * 0.4);
}

/* бриф: звёздные условия */
.starlist { display: flex; flex-direction: column; gap: 7px; }
.starline, #brief-stars .star-line {
  display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 8px 10px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
}
.starline .txt, #brief-stars .star-line .txt { flex: 1; min-width: 0; }
.starline.got { border-color: rgba(255, 207, 61, 0.35); background: rgba(255, 207, 61, 0.08); }
.quote, .bot-intro { font-size: 12.5px; font-style: italic; color: #ffd7ec; line-height: 1.3; }
.brief-tier-line { font-size: 13px; color: var(--ink2); }

/* «Внешний вид»: сетка плиток */
.sw-grid, .style-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.style-item .tick { position: absolute; top: 5px; right: 7px; font-size: 12px; color: var(--cy); opacity: 0; }
.style-item.on .tick { opacity: 1; }
.style-item.on::after { content: none; }
.swatch.court { width: 100%; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.22); }
.style-item .nm { font-size: 12px; font-weight: 700; line-height: 1.15; }
.style-item.on .nm { color: #eafcff; }

/* магазин: витрина плитками */
.shop-hint { margin: 0 0 9px 2px; }
.shelf .product-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; text-align: center; padding: 11px;
}
.shelf .product-card .p-icon { grid-row: auto; width: 56px; height: 56px; }
.shelf .product-card .p-title { font-size: 13px; font-weight: 800; line-height: 1.15; }
.shelf .product-card .p-desc { font-size: 11.5px; }
.shelf .product-card .p-actions { width: 100%; margin-top: auto; justify-content: center; }
.shelf .product-card .p-buy { width: 100%; }
.product-card.locked { opacity: 0.92; }
.p-buy.price.no, .style-item .buy.price.no {
  background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--ink3);
}
.p-buy.price.yan { background: rgba(255, 207, 61, 0.12); border-color: rgba(255, 207, 61, 0.32); color: #ffe9a8; }
.p-buy.price.own { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); color: #b9f5cf; }
.product-card .best {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 900; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 8px;
  background: var(--go); color: #241800; white-space: nowrap; box-shadow: 0 0 16px rgba(255, 207, 61, 0.6);
}

/* статистика / результат: плитки чисел */
.rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rewards.stat-board { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.rw-card {
  border-radius: var(--r2); padding: 10px 6px; text-align: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.rw-card .v { font-size: 20px; font-weight: 900; line-height: 1.1; }
.rw-card .k { font-size: 10.5px; color: var(--ink3); font-weight: 700; margin-top: 3px; line-height: 1.15; }
.rw-card.li .v { color: var(--li); }
.rw-card.cy .v { color: var(--cy); }
.rw-card.go .v { color: var(--go); }
.rw-card.mg .v { color: var(--mg); }
.stat-row .k { color: var(--ink2); }
.xpline {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r2);
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
}
.xpline .lv { font-size: 12px; font-weight: 800; color: var(--ink2); white-space: nowrap; }
.xpline .bar { flex: 1; }
.unlock {
  display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: var(--r2);
  background: linear-gradient(120deg, rgba(255, 207, 61, 0.16), rgba(20, 10, 44, 0.5));
  border: 1px solid rgba(255, 207, 61, 0.36);
}
.unlock .em { font-size: 24px; }
.unlock .u { flex: 1; min-width: 0; }
.unlock .k { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; color: var(--go); display: block; }
.unlock .n { font-size: 14px; font-weight: 800; margin-top: 1px; }
.bigstars { display: flex; gap: 10px; justify-content: center; }
.bigstars .star, .bigstars i { font-size: 30px; font-style: normal; }
.win-title, .res-win {
  background: linear-gradient(120deg, #c9ff3d, #2ef2ff 55%, #a06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lbrow { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; }
.lbrow:last-child { border-bottom: 0; }
.lbrow .r { width: 22px; color: var(--ink3); font-weight: 800; }
.lbrow .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbrow .v { font-weight: 800; color: var(--ink2); }
.lbrow.you, .lbrow.you .v { color: var(--cy); }

/* ------------------------------------------------------- 21. Появление */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.screen.active > * { animation: fadeUp 0.26s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.screen.active > .body { animation-name: fadeIn; }   /* без transform: scrollCareerTo() считает offsetTop */
.screen.active > *:nth-child(1) { animation-delay: 0s; }
.screen.active > *:nth-child(2) { animation-delay: 0.035s; }
.screen.active > *:nth-child(3) { animation-delay: 0.07s; }
.screen.active > *:nth-child(4) { animation-delay: 0.105s; }
.screen.active > *:nth-child(5) { animation-delay: 0.14s; }
.screen.active > *:nth-child(n+6) { animation-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
  .screen.active > * { animation: none; }
  #btn-quick, .ftue, .neon.pulse, .frame-champion, .spinner { animation: none; }
  #result-stars .star.on { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------- 22. Адаптив */

/* узкий портрет 360–400 */
@media (max-width: 400px) {
  :root { --pad: 12px; }
  #btn-quick .t1 { font-size: clamp(21px, 3.2vh, 26px); }
  .rail-b { font-size: 9.5px; }
  #btn-mute { font-size: 10px; }
  .career-nodes { gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .career-node { min-height: 84px; }
  .career-node .node-name { font-size: 9.5px; }
  #local-slots, #lobby-slots { gap: 6px; }
  .slot-card { padding: 8px; }
  .style-items { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }
  #ping { font-size: 11px; }
}

@media (max-width: 520px) {
  #local-slots { grid-template-columns: minmax(0, 1fr); }
  .slot-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .slot-card .slot-name { flex: 0 0 auto; }
  .slot-card select { flex: 1 1 auto; width: auto; }
}

/* низкий портрет (360×640 и подобные) */
@media (max-height: 760px) and (orientation: portrait) {
  :root { --gap: 8px; }
  #menu-top { min-height: 46px; }
  #menu-top .avatar { width: 38px; height: 38px; min-width: 38px; font-size: 19px; }
  #btn-quick { min-height: 78px; }
  #btn-quick .t1 { font-size: 21px; }
  #btn-quick .hero-ico { font-size: 27px; }
  #btn-quick #hint-quick { font-size: 12px; }
  #btn-career { padding: 8px 12px; min-height: 54px; }
  #btn-career .mode-eyebrow { font-size: 15.5px; }
  .mode { padding: 9px 10px; min-height: 74px; }
  #btn-today-toggle { min-height: 44px; }   /* тач-мишень 44 px обязательна и в ландшафте */
  #btn-challenge { min-height: 42px; }
  #menu-rv .btn, #menu-rv .btn-small { min-height: 46px; }
  .rail-b { min-height: 48px; }
  #menu-version, #boss-hint { display: none; }
}

/* совсем мало места — «Вызов дня» и подсказки режимов уходят в раскрытие */
@media (max-height: 660px) and (orientation: portrait) {
  #menu-today.collapsed #btn-challenge { display: none; }
  .mode small { display: none; }
}
/* Баннер съедает 100 px снизу. Подсказки режимов и подпись карьеры уходят только на низком портрете:
   на 390×844 лишнюю высоту отдаёт «Сегодня» (см. хвост файла), и карточки остаются наполненными. */
@media (max-height: 760px) and (orientation: portrait) {
  body.ad-visible .mode small, body.has-banner .mode small { display: none; }
  body.ad-visible #btn-career #hint-career, body.has-banner #btn-career #hint-career { display: none; }
}


/* мобильный ландшафт 844×390 — две колонки, без прокрутки */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --pad: 10px; --gap: 8px; }
  #menu-top { min-height: 44px; }
  #menu-top .avatar { width: 36px; height: 36px; min-width: 36px; font-size: 18px; }
  /* Сетка вместо двух flex-колонок: «Онлайн»/«Локально» (.duo) переезжают во вторую колонку
     наверх, а «Сегодня» — под них. Колонки больше не делят строки, поэтому левая (герой +
     карьера) и правая (duo + «Сегодня») меряются независимо — иначе высокая правая карточка
     съедала место под карьеру, и нижний ряд уходил под рельс. */
  #menu-main {
    display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto minmax(0, 1fr);
    column-gap: 12px; row-gap: 8px; align-items: stretch; align-content: start; justify-content: stretch;
  }
  #col-a { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; justify-content: center; grid-area: 1 / 1 / span 2 / 2; }
  .duo { grid-area: 1 / 2; align-self: start; }
  #col-b {
    grid-area: 2 / 2;
    display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  }
  #btn-quick { min-height: 64px; padding: 0 14px; gap: 10px; }
  #btn-quick .hero-ico { font-size: 26px; }
  #btn-quick .t1 { font-size: 20px; }
  #btn-quick #hint-quick { font-size: 11px; }
  #btn-quick .hero-go { display: none; }
  #btn-career { padding: 8px 11px; gap: 9px; min-height: 50px; }
  #btn-career .mode-eyebrow { font-size: 14.5px; }
  #btn-career #hint-career { font-size: 11.5px; }
  .mode { padding: 8px 9px; min-height: 62px; gap: 4px; }
  .mode small { display: none; }
  .rail-b { min-height: 44px; font-size: 9.5px; }
  .rail-b::before { font-size: 16px; }
  #menu-version, #boss-hint { display: none; }
  .career-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .career-node { min-height: 76px; }
  .body { -webkit-mask-image: none; mask-image: none; }
  .bot-card { width: min(22vw, 118px); }
  .bot-card .bot-intro { display: none; }
  .reshero { flex-direction: row; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
  #result-stars { font-size: 22px; gap: 6px; }
  .hd { min-height: 42px; }
  .dock .neon, .dock .btn-primary { min-height: 48px; font-size: 16px; }
  #lobby-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lobby-slot { flex-wrap: wrap; }
  .lobby-slot .ls-badges { flex-basis: 100%; margin-left: 0; flex-wrap: wrap; justify-content: flex-start; }
  #local-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #btn-online-quick { min-height: 60px; font-size: 17px; }
}

/* планшет / десктоп */
/* ландшафтные телефоны: четыре селекта в ряд обрезают «Бот: Обычный» — две колонки */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  #local-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .slot-card .slot-name { flex: 0 0 auto; }
  .slot-card select { flex: 1 1 auto; width: auto; }
}

@media (min-width: 760px) {
  :root { --pad: 20px; }
  .screen { max-width: 1180px; margin: 0 auto; }
  #screen-quick, #screen-online, #screen-lobby, #screen-settings, #screen-brief,
  #screen-result, #screen-queue, #screen-challenge, #screen-howto, #screen-stats, #screen-lb { max-width: 760px; }
  #screen-career { max-width: 960px; }
  .career-node { min-height: 128px; }
  .career-node .node-num { font-size: 20px; }
  .career-node .node-name { font-size: 11px; }
  .career-nodes { gap: 10px; }
  .style-items { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
}
@media (min-width: 900px) {
  /* .duo — прямой ребёнок #menu-main (см. index.html), поэтому широкую раскладку собираем сеткой,
     а не flex-строкой: слева герой + карьера + «Онлайн/Локально» (крайние 1fr-строки держат
     стопку по центру, как прежний justify-content: center), справа «Сегодня» во всю высоту. */
  #menu-main {
    display: grid; grid-template-columns: 1.25fr 0.95fr; grid-template-rows: 1fr auto auto 1fr;
    column-gap: 18px; row-gap: 0; align-items: stretch; justify-content: stretch;
  }
  #col-a { display: flex; flex-direction: column; gap: 14px; min-width: 0; grid-area: 2 / 1; }
  .duo { grid-area: 3 / 1; margin-top: 14px; }
  #col-b { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; justify-content: flex-start; overflow-y: auto; grid-area: 1 / 2 / -1 / 3; }
  #btn-quick { min-height: 124px; }
  #btn-quick .t1 { font-size: 34px; }
  #btn-quick #hint-quick { font-size: 15px; }
  #btn-career { min-height: 76px; }
  .rail-b { min-height: 60px; font-size: 12px; }
  .rail-b::before { font-size: 21px; }
  #btn-mute { font-size: 12px; }
  .mode { min-height: 104px; }
  #result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------- 22. Интеграция: доводка до эталона ui-neon.md
   Блок дописан на этапе сведения контрактов (U3). Здесь только то, чего не было
   в раскладке U1/U2 и что появилось по итогам сверки скриншотов с эталоном. */

/* §4.2 карточка «Вы + напарник VS двое соперников» над настройками быстрой игры */
#quick-vs { padding: 11px 12px; gap: 12px; }
#quick-vs:empty { display: none; }
#quick-vs .side { gap: 10px; }
/* свечение командой: filter, а не box-shadow — у .portrait скругление живёт на .p-head,
   поэтому box-shadow нарисовал бы вокруг круглого лица квадратную рамку */
#quick-vs .mini .portrait { filter: drop-shadow(0 0 7px var(--sd, rgba(255, 255, 255, 0.2))); }
#quick-vs .side.blue { --sd: rgba(46, 242, 255, 0.55); }
#quick-vs .side.red { --sd: rgba(255, 62, 165, 0.55); }
#quick-vs .v { font-size: 15px; }
#quick-vs .mini { width: 74px; }
#quick-vs .mini .nm { white-space: normal; line-height: 1.15; min-height: 1.15em; }
#quick-vs .mini .nm:empty, #quick-vs .mini .lv:empty { display: none; }

/* §4.4 лобби: слоты в одну колонку на телефоне, крупный код с надзаголовком */
#screen-lobby .codecard .eyebrow { text-align: center; margin-bottom: 6px; }
#lobby-status.sub { margin-top: 1px; }
#lobby-status:empty { display: none; }

/* §4.8 карточки «Внешнего вида» одинаковой высоты: условие открытия — максимум две строки */
.style-item .cond {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 1.2;
}

/* §4.6 карточка-герой босса на брифе: портрет 74 px, надзаголовок «БОСС», имя, реплика */
.boss-hero { --acc: var(--mg); display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.boss-hero[hidden] { display: none; }
.boss-hero .portrait { flex: 0 0 auto; }
.boss-hero .bh { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.boss-hero .bh .eyebrow { margin: 0; color: var(--mg); }
.boss-hero .bh .n { font-size: 21px; font-weight: 900; line-height: 1.1; }
.boss-hero .bh .q { font-size: 13px; font-style: italic; color: #ffa8d4; line-height: 1.3; margin-top: 2px; }

/* §4.6/§4.9: бриф, вызов дня и результат — контент от верха, а не по центру.
   .mid оставлен онлайну и очереди, где на экране одна короткая карточка. */
#screen-brief .body.mid, #screen-challenge .body.mid, #screen-result .body.mid { justify-content: flex-start; }
/* подпись в шапке лобби («Ждём, когда лидер начнёт») выравнивается по заголовку, а не по центру */
#lobby-status.sub { text-align: left; }

/* §4.7 карточка-перелинковка «Про-пакет» в конце вкладки «За мячи» */
.crosslink {
  --acc: var(--go); display: flex; align-items: center; gap: 12px; margin-top: 11px; padding: 11px 13px;
  background: linear-gradient(120deg, rgba(255, 207, 61, 0.16), rgba(20, 10, 44, 0.55));
  border: 1px solid rgba(255, 207, 61, 0.36);
}
.crosslink .em { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.crosslink .cl-tx { flex: 1; min-width: 0; }
.crosslink .cl-tx .eyebrow { margin: 0; color: var(--go); }
.crosslink .cl-d { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; line-height: 1.25; }
.crosslink .cl-go {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-weight: 900; color: var(--go);
  background: rgba(255, 207, 61, 0.12); border-color: rgba(255, 207, 61, 0.42);
}

/* §4.7 витрина: длинные подписи состояний («Уже есть — входит в «Про-пакет»», подсказка
   про частичную покупку) выходили за карточку — в плиточной раскладке действия идут колонкой
   во всю ширину. Верхний отступ полки нужен бейджу «ВЫГОДНЕЕ НА 49 ЯН»: он висит над карточкой
   (top:-8px) и попадал под верхнюю маску прокрутки .body. */
.shelf { padding-top: 12px; }
.shelf .product-card .p-actions { flex-direction: column; align-items: stretch; gap: 6px; }
.shelf .product-card .p-owned,
.shelf .product-card .p-hint {
  width: 100%; min-width: 0; line-height: 1.25;
  /* .price ставит white-space:nowrap — для многословных состояний его надо снять */
  white-space: normal; overflow-wrap: anywhere; text-align: center;
}

/* §4.2 карточка VS должна помещаться в одну строку на 360–390 px */
#quick-vs { flex-wrap: nowrap; gap: 8px; }
#quick-vs .side { gap: 6px; }
#quick-vs .mini { width: 66px; }
#quick-vs .mini .portrait { --size: 42px !important; }
@media (max-width: 380px) {
  #quick-vs .mini { width: 60px; }
  #quick-vs .mini .portrait { --size: 38px !important; }
  #quick-vs .v { font-size: 13px; }
}

/* §4.3 Онлайн: контент от верха, герой с подписью, «Войти по коду» — компактный › рядом с полем.
   Подпись кнопки остаётся текстом (доступное имя), визуально это шеврон — тот же приём, что у .back. */
#screen-online .body.mid { justify-content: flex-start; }
#btn-online-quick.hero2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#btn-online-quick.hero2 .t1 { font-size: 19px; font-weight: 900; }
#btn-online-quick.hero2 .t2 { font-size: 13px; font-weight: 700; opacity: 0.72; }
.card.friend .codebox { flex-wrap: nowrap; }
.card.friend #btn-online-join.go-btn {
  flex: 0 0 auto; width: 56px; min-width: 56px; padding: 0; font-size: 0;
}
.card.friend #btn-online-join.go-btn::before { content: '›'; font-size: 26px; font-weight: 900; line-height: 1; }
.friend-hint { margin: 0; font-size: 12px; line-height: 1.3; }

/* ------------------------------------------------- 23. Тач-мишени ≥ 44 px
   Требование ui-neon.md §2.9 и брифа: любой кликабельный элемент на телефоне — не меньше 44×44.
   Замеряется getBoundingClientRect самого контрола, поэтому мало «увеличить область ::after» —
   нужен реальный размер. Ниже добраны все элементы, которые аудит нашёл меньше 44 px. */
.chips .chip, .ms-group .chip { min-height: 44px; }
.btn.sm { min-height: 44px; }
#btn-today-toggle { min-height: 44px; }
#btn-online { min-height: 44px; display: flex; align-items: center; }
.mode .top { min-height: 44px; }
.ls-kick { min-height: 44px; }
.product-card .p-buy, .crosslink .cl-go { min-height: 44px; }
.seg { padding: 4px; }
.seg .btn-small { min-height: 44px; }
/* ползунок громкости: сама дорожка остаётся 7 px, но мишень — 44 px по высоте */
input[type="range"] { height: 44px; min-height: 44px; }
input[type="range"]::-webkit-slider-thumb { margin-top: -6px; }
/* табы магазина и рейтинга — тоже чипы, но вне .chips/.ms-group */
.chip.tap { min-height: 44px; }

/* ---------------------------------------------------- 24. Контраст текста
   Полупрозрачный тёмный текст на ярком неоне блендится К ФОНУ и теряет контраст
   (opacity .72 на градиенте героя давало 1.7–4.2:1). Поэтому вторичные подписи
   на неоновых кнопках — сплошной тёмный цвет, а не opacity. Проверено скриптом. */
#btn-quick #hint-quick { opacity: 1; color: #0d2534; }
#btn-quick .hero-go { opacity: 1; color: #123444; }
#btn-online-quick.hero2 .t2 { opacity: 1; color: #0d2534; }
#menu-version { color: var(--ink2); }
/* метка редкости «ОБЫЧНЫЙ» шла цветом рамки rgba(255,255,255,.18) — читалась как пустое место */
.product-card.common .p-rarity, .style-item.common .rar { color: var(--ink3); }
.product-card.epic .p-rarity { color: #ff86c6; }

/* §4.6: карточки соперников в ряду одной высоты — роль подписана не у всех,
   без выравнивания «Соперники» делали свою карточку выше соседней */
#brief-bots, #challenge-bots { align-items: stretch; }
#brief-bots .bot-card, #challenge-bots .bot-card { justify-content: flex-end; }
#brief-bots .bot-card .bot-role, #challenge-bots .bot-card .bot-role { order: -1; margin-bottom: auto; }

/* ================================================== 25. Доводка по замечаниям приёмки (neon-final)
   Только то, что нашёл контролёр на скриншотах: переполнение экрана результата, прокрутка меню
   на 360×640, обрезанные подписи, потерянные крючки монетизации и возвращаемости. */

/* --- §4.9 Результат: всё, что перечислено в разделе, помещается до сгиба --- */
/* реплика босса — свой блок перед жёлтой RV-кнопкой */
#result-boss { display: flex; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); }
#result-boss[hidden] { display: none; }
#result-boss .portrait { flex: 0 0 auto; }
#result-boss .quote { font-style: italic; color: #ffa8d4; font-size: 12.5px; line-height: 1.25; }
/* список условий ступени живёт на брифе (§4.6); здесь он справочный — не больше трёх строк и с фейдом */
#result-star-list { max-height: 108px; overflow: auto; gap: 5px;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent); }
#result-star-list .star-line { min-height: 30px; padding: 5px 9px; font-size: 12.5px; }
#result-star-list .boss-line { font-size: 12px; }
/* вертикальный ритм на результате плотнее: у экрана нет прокрутки-по-смыслу, всё должно быть видно */
#screen-result .body.mid { gap: 7px; }
#screen-result .reshero { gap: 2px; }
#result-xp { padding: 8px 11px; }
#result-card { padding: 9px 11px; gap: 7px; }
#result-card p { margin: 0; font-size: 12.5px; line-height: 1.25; }
#result-card .row .btn { min-height: 40px; font-size: 13.5px; }
#result-streak:empty { display: none; }
#result-streak { font-size: 12px; color: var(--ink3); }
@media (orientation: portrait) and (max-height: 900px) {
  #result-score { font-size: clamp(28px, 5.2vh, 44px); }
  #screen-result #result-stars { font-size: 26px; }
}

/* --- §4.1 Главное меню: 360×640 без прокрутки --- */
/* десктопная подсказка про клавишу `(Ё)` не нужна на тач-устройствах и в узких раскладках */
@media (pointer: coarse) { #boss-hint { display: none; } }

/* точка-бейдж «новое» у «Магазина» (§4.1) */
#btn-shop { position: relative; }
#btn-shop.has-new::after {
  content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--mg); box-shadow: 0 0 8px var(--mg);
}

/* золотой чип серии дней в шапке «Сегодня» (§4.1) */
#btn-today-toggle .streak {
  margin-left: auto; min-height: 28px; padding: 0 8px; font-size: 12px; font-weight: 900; white-space: nowrap;
  color: var(--go); border-color: rgba(255, 207, 61, 0.4); background: rgba(255, 207, 61, 0.1);
}
#btn-today-toggle { gap: 7px; }
#btn-today-toggle .cv { margin-left: 4px; }
#btn-today-toggle #today-summary { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 12px; }

/* награда миссии «+40 🎾» лаймом справа у полосы (§4.1, §4.9) */
.mission-row .m-reward { flex: 0 0 auto; margin-left: 8px; color: var(--li); font-weight: 900; font-size: 12.5px; white-space: nowrap; }

/* --- §4.1 карточки «Онлайн» и «Локально»: поле кода и чипы устройств --- */
/* z-index — тот же приём, что у #online-badge: растянутый оверлей #btn-online::after (inset:0)
   иначе перехватывает мышь, и клик по полю/«›» уходит общему предку #online-card (обработчика там нет). */
#online-card .codebox.mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; width: 100%; margin-top: auto; position: relative; z-index: 1; }
#input-code-menu {
  min-width: 0; width: 100%; height: 44px; border-radius: 11px; text-align: center;
  background: rgba(6, 4, 16, 0.55); border: 1.5px solid rgba(160, 107, 255, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase;
  color: #efe6ff; outline: none; -webkit-user-select: text; user-select: text; padding: 0 0 0 0.22em;
}
#input-code-menu::placeholder { color: rgba(210, 195, 255, 0.42); letter-spacing: 0.22em; }
#input-code-menu:focus { border-color: var(--vi); box-shadow: 0 0 0 3px rgba(160, 107, 255, 0.22), 0 0 18px rgba(160, 107, 255, 0.3); }
#btn-online-join-menu {
  min-width: 46px; height: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 11px;
  background: linear-gradient(140deg, #a06bff, #6b3bff); color: #fff; font-size: 22px; font-weight: 900; line-height: 1;
}
.devchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.devchips .chip.dev { min-height: 30px; padding: 0 9px; font-size: 12px; font-weight: 800; line-height: 28px; }

/* --- §4.3 Онлайн: поле кода снова главный элемент карточки --- */
/* §4.3: в ряду кода ровно два элемента — крупное моноширинное поле и «›». «Вставить»
   уходит второй строкой (и показывается только там, где есть доступ к буферу обмена). */
#screen-online .card.friend .codebox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.card.friend #input-code { flex: none; grid-area: 1 / 1; }
.card.friend #btn-online-join { flex: none; grid-area: 1 / 2; }
.card.friend #btn-online-paste { grid-area: 2 / 1 / 3 / 3; min-height: 44px; }
#online-signin-hint { flex-direction: row; align-items: center; gap: 10px; }
#online-signin-hint .si-tx { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; }
#online-signin-hint #btn-online-signin { flex: 0 0 auto; min-height: 40px; }

/* --- §4.4 Лобби: пинг отдельным чипом в шапке, строка слота с одним бейджем --- */
#lobby-ping { margin-left: auto; flex: 0 0 auto; min-height: 30px; padding: 0 9px; font-size: 12px; line-height: 28px; }
#lobby-ping[hidden] { display: none; }
@media (max-width: 420px) { .lobby-slot .badge.ping { display: none; } }

/* --- §4.7 Магазин: карточка «Про-пакет» не под доком, витрина плотнее --- */
#screen-shop #shop-list { padding-bottom: 64px; }
.crosslink { scroll-margin-bottom: 64px; }
.crosslink .cl-t { display: block; font-size: 15px; font-weight: 900; line-height: 1.15; }
.product-card .p-icon { width: 56px; height: 56px; background: none; }

/* --- §4.8 Внешний вид: ровная сетка --- */
.style-items { grid-auto-rows: 1fr; }
/* ряды одной высоты (grid-auto-rows), содержимое плитки — компактной группой по центру, как в эталоне */
.style-item { min-height: 112px; justify-content: center; gap: 7px; }

/* --- меню без прокрутки на низком портрете и с баннером (ui-neon.md §3) ---
   Правила стоят в конце файла намеренно: они гасят то, что включает раздел 25 выше. */
@media (max-height: 700px) and (orientation: portrait) {
  /* поле кода остаётся на карточке (иначе «Онлайн» — пустой прямоугольник), но компактнее;
     лишнюю высоту отдаёт «Сегодня», который здесь по умолчанию свёрнут (main.js todayCollapsedDefault) */
  #input-code-menu { height: 40px; font-size: 15px; }
  #btn-online-join-menu { height: 44px; min-height: 44px; font-size: 20px; }
  #btn-challenge { min-height: 44px; }
  #btn-challenge #challenge-badge.sub2 { display: none; }
}
@media (orientation: portrait) {
  /* поле кода — единственное, что уходит с карточки при баннере: ряд «поле + ›» стоит 50 px,
     а чипы устройств и подсказки помещаются за счёт сжатия «Сегодня» */
  body.has-banner #online-card .codebox.mini, body.ad-visible #online-card .codebox.mini { display: none; }
}

/* --- «Сегодня» сжимается под доступное место (ui-neon.md §3, принцип 8) ---
   Развёрнутый блок на низком портрете и с баннером больше не выталкивает меню в прокрутку:
   он сам отдаёт лишнюю высоту, прокручивается внутри себя и гаснет маской по нижнему краю —
   ничего не обрезается молча, а рельс и герой остаются на местах. */
@media (orientation: portrait) {
  #menu-today { display: flex; flex-direction: column; min-height: 0; }
  #menu-today > #btn-today-toggle { flex: 0 0 auto; }
  #today-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #today-body.scrolls {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
  }
}

/* --- §4.9 вторичная группа результата отдаёт высоту первой ---
   Условия ступени, серия, вызов дня и карточка-просьба живут в общей обёртке, которая сжимается
   и прокручивается внутри себя с фейдом по низу. Нижний padding равен зоне фейда, поэтому на
   просторном экране, где всё помещается, никакого затемнения не видно. */
.res-extra {
  display: flex; flex-direction: column; gap: 7px;
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.res-extra.scrolls {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
}
#result-star-list { flex: 0 0 auto; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* «Новый рекорд ступени» и «Босс повержен!» — золотые чипы в одну строку, а не две «голые» строки */
#result-star-list .boss-line {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: 26px; padding: 0 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 900;
  background: rgba(255, 207, 61, 0.1); border: 1px solid rgba(255, 207, 61, 0.32);
}
#result-star-list .boss-line.mg { background: rgba(255, 62, 165, 0.1); border-color: rgba(255, 62, 165, 0.36); }

/* --- мобильный ландшафт 800×360 / 844×390: все четыре режима над сгибом ---
   Раскладку колонок задаёт сетка выше (герой + карьера слева, «Онлайн/Локально» + «Сегодня»
   справа). Здесь — только высоты. Бюджет жёсткий: 360 px экрана минус шапка, рельс и 100 px
   баннерного отступа (--ad-inset-bottom) оставляют колонке ≈116 px, поэтому поле кода и чипы
   устройств с карточек уходят: они и так целиком лежали за сгибом, а полноразмерное поле кода
   есть на экране «Онлайн» в одном тапе. */
@media (orientation: landscape) and (max-height: 520px) {
  #btn-quick { min-height: 46px; }
  #col-a, #modes { gap: 6px; }
  #btn-career, #btn-career.rich { min-height: 44px; padding: 5px 10px; gap: 9px; }
  /* «Путь к легенде» — статичный подзаголовок; на 360 px он стоит дороже, чем «Ступень 1 · …» */
  #btn-career.rich .ct { display: none; }
  #btn-career .portrait { --size: 42px !important; }
  /* в ландшафте карточка шире 380 px — чип «26 / 90 ★» и подпись «Ступень 12 · …» встают в один ряд */
  #btn-career.rich .meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 1px; }
  #btn-career.rich .mode-eyebrow, #btn-career.rich .ct { grid-column: 1 / -1; }
  #btn-career.rich .chip { grid-column: 1; margin: 1px 0 0; }
  #btn-career.rich #hint-career { grid-column: 2; margin: 0; }
  #btn-career.rich .ring { --sz: 38px; }
  #col-a { justify-content: flex-start; }
  .mode { min-height: 44px; padding: 4px 9px; gap: 3px; }
  .mode .top { min-height: 40px; }
  #online-card .codebox.mini, #btn-local #local-chips { display: none; }
  #online-card #online-badge { min-height: 20px; padding: 0 7px; font-size: 10.5px; }
  #col-a {
    min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 22px 20px 0; margin: -22px -20px 0;
  }
  #col-a.scrolls {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
  }
}

/* --- §4.4 лобби: настройки матча у не-лидера — компактный блок «только для чтения» ---
   Показываем выбранное значение, а не весь ряд вариантов: полноразмерные группы чипов
   уводили нижний ряд («СЛОЖНОСТЬ БОТОВ») под док. */
#lobby-settings.ms.disabled .ms-group .chip:not(.on) { display: none; }
#lobby-settings.ms.disabled .chip { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
#lobby-settings.ms.disabled .group.ms-part:has(> .ms-group) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; }
#lobby-settings.ms.disabled .group.ms-part:has(> .ms-group) > .eyebrow { margin: 0; }
#lobby-settings.ms.disabled .ms-note { grid-column: 1 / -1; color: var(--ink3); }
#lobby-settings.ms.disabled .sw-row { min-height: 36px; padding: 4px 10px; }
/* §4.8: тёмные превью кортов («Ночь», «Неон») читаются как товар, а не как пустая плашка */
.style-item .swatch.court { border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 18px rgba(46, 242, 255, 0.2); }
/* §4.9: в карточке «ОТКРЫТО» золотом набран только надзаголовок, название — белым */
#result-unlock .u > .n { color: var(--ink); }

/* --- низкие экраны (360×640, ландшафт телефона): результат плотнее, но порядок §4.9 тот же --- */
@media (max-height: 700px) {
  #screen-result .body.mid { gap: 6px; }
  #result-xp { padding: 6px 10px; }
  #result-balls { padding: 7px; gap: 1px; }
  #result-balls-num { font-size: 20px; }
  #result-balls-note { font-size: 10.5px; }
  #result-unlock { padding: 6px 9px; }
  #result-boss { padding: 5px 9px; }
  #result-boss .quote { font-size: 12px; }
  #result-stats .card { padding: 5px 4px; font-size: 11px; }
  #screen-result .reshero { gap: 2px; }
  #screen-result #result-score { font-size: clamp(26px, 5.4vh, 40px); }
  #screen-result #result-stars { font-size: 24px; gap: 7px; }
  #screen-result #result-ads .btn { min-height: 44px; }
  #screen-result .mission-row { padding: 5px 9px; }
}

/* --- §4.9 ландшафт телефона (800×360, 844×390): RV-кнопка обязана быть над сгибом ---
   На 360 px высоты уплотнения выше не хватает: #result-ads уезжал под нижний край, и главный
   rewarded-плейсмент игры был виден на 4 px. Меняем только порядок: «что дали» (XP, награда)
   остаётся выше предложения удвоить, миссии и статистика уходят под сгиб — их можно прокрутить.
   Селекторы намеренно через `.body.mid > #id` / `> .res-tiles`: правило `> *` ниже по
   специфичности не должно перебивать плитку награды (иначе «+45 🎾» встаёт ПОД RV-кнопкой). */
@media (orientation: landscape) and (max-height: 480px) {
  /* высоты: без этого сумма «XP + награда + RV» = 140 px при 122 px видимой части .body,
     и кнопка всё равно наполовину уезжала под обрез (замерено на 800×360) */
  #screen-result .body.mid { gap: 3px; }
  #screen-result #result-xp { padding: 4px 10px; }
  #screen-result #result-balls { padding: 4px 7px; }
  #screen-result #result-balls-num { font-size: 17px; }
  #screen-result #result-balls-note { font-size: 10px; }
  #screen-result .dock .btn, #screen-result .dock .neon, #screen-result .dock .btn-primary { min-height: 44px; }
  #screen-result .body.mid > * { order: 5; }
  #screen-result .body.mid > #result-xp { order: 1; }
  #screen-result .body.mid > .res-tiles { order: 2; }
  #screen-result .body.mid > #result-ads { order: 3; }
  #screen-result .body.mid > #result-unlock { order: 4; }
  #screen-result .body.mid > #result-extra { order: 6; }
  /* нижний фейд возвращаем: без него обрезка читается как баг вёрстки, а не как «есть ещё» */
  #screen-result .body {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
  }
}