/* Стили «Повелителя Галактики».
   Вынесены из index.html без единого изменения: разметка отдельно, оформление
   отдельно. Файл на тысячу строк внутри HTML мешал искать и править и то, и другое. */
:root{
  /* Единый вид плавающих окон: окно звезды, карточка события, миникарта.
     Раньше у каждого были свои скругления (14 / 16 / 14) и свои тени. */
  /* Окна полупрозрачные: сквозь них просвечивает карта и звёздный фон.
     Прозрачность подобрана так, чтобы мелкий текст не терял контраст. */
  /* Заливка выдвижного окна. Была вписана прямо в #panel мимо переменных, и при
     смене облика расы карточки внутри перекрашивались, а само окно оставалось
     синим — нестыковка бросалась в глаза. */
  --sheet-bg:linear-gradient(180deg, rgba(24,36,68,.90), rgba(16,26,51,.92));
  --win-bg:rgba(19,28,51,.86);
  --win-bg2:rgba(27,38,68,.80);
  --win-radius:14px;
  --win-border:1px solid var(--line);
  --win-shadow:0 0 0 1px rgba(79,208,255,.10) inset, 0 12px 34px rgba(0,0,0,.6), 0 0 20px rgba(79,208,255,.10);
  --bg-deep:#05070d;
  --bg-panel:#131c33;
  --bg-panel2:#212e52;
  --bg-raised:#2b3a63;
  --line:#44578f;
  --line-soft:#37456f;
  --blue:#4fd0ff;
  --blue-dim:#2c7a99;
  --gold:#ffc94d;
  --gold-dim:#8a6a2a;
  --green:#6fe08a;
  --red:#ff5f6b;
  --purple:#c792ff;
  --text:#f4f7fe;
  --text-dim:#aab6da;
  /* Осветлён с #7986ac. Проверка контраста показала 3,69 на фоне карточки при
     пороге 4,5 для мелкого текста: подписи вроде «РАЗВЕДКА · в строю 2» читались
     с трудом. Новое значение даёт 4,70, оттенок при этом тот же — вид не поплыл. */
  --text-faint:#8e99b9;
  --font-head:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* реальные высоты верхней/нижней панелей игры — обновляются из JS (syncShellMetrics).
     Всплывающие окна ограничиваются этими отступами, чтобы панели всегда оставались видны. */
  --topbar-h:0px;
  --nav-h:0px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; overscroll-behavior:none;}
body{
  background:radial-gradient(ellipse at 30% 0%, #0c1530 0%, var(--bg-deep) 55%);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
  position:fixed; inset:0;
  user-select:none;
}
#app{position:absolute; inset:0; display:flex; flex-direction:column;}

/* ---------- generic ---------- */
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}
/* ЗАТЕМНЕНИЕ. Не просто гаснет, а ещё и уводит фон из фокуса: так окно
   выходит на первый план, а не ложится поверх мешанины. Размытие берём малое —
   на слабом телефоне большое стоит дорого. */
.scrim{position:absolute; inset:0; background:rgba(4,6,14,.82);
  display:flex; align-items:center; justify-content:center; z-index:50;
  animation:затемнениеВходит .22s ease both;}
@keyframes затемнениеВходит{
  from{ opacity:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); }
  to  { opacity:1; backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); }
}
/* затемнение только в пределах игрового поля — верхняя и нижняя панели остаются открытыми */
.scrim.stage-scrim{top:var(--topbar-h); bottom:var(--nav-h);}

.btn{
  background:linear-gradient(180deg,var(--bg-raised),var(--bg-panel2));
  border:1px solid var(--line); color:var(--text);
  padding:11px 16px; border-radius:8px; font-size:14px; font-weight:600;
  letter-spacing:.02em;
  min-height:44px; /* палец надёжно попадает только по цели от ~44px */
  transition:transform .08s, border-color .15s, background .15s;
}
.btn:active{transform:scale(.96);}
.btn.primary{background:linear-gradient(180deg,#1c8fb8,#146b8f); border-color:#2fa8d1; color:#03151d; font-weight:700;}
.btn.gold{background:linear-gradient(180deg,#e8b93f,#b8901f); border-color:#ffd970; color:#241a02; font-weight:700;}
.btn.danger{background:linear-gradient(180deg,#a53c46,#7a2830); border-color:#c4525d; color:#fff;}
.btn.ghost{background:transparent; border-color:var(--line);}
.btn:disabled{opacity:.35; pointer-events:none;}
.btn.small{padding:7px 10px; font-size:12px; border-radius:6px; min-height:38px;}
.btn.menu-item{text-align:left; padding:14px 18px; font-size:15px; display:flex; align-items:center; gap:10px;}
.mi-icon{width:26px; height:26px; object-fit:contain; flex-shrink:0; display:block;}
.btn.block{width:100%; display:block;}
.btn.block.menu-item{display:flex;}

.tag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:20px; background:var(--bg-raised); border:1px solid var(--line); color:var(--text-dim);}

h1,h2,h3{font-family:var(--font-head); margin:0; letter-spacing:.03em;}
.eyebrow{font-size:11px; letter-spacing:.14em; color:var(--blue); font-weight:700; text-transform:uppercase;}

.hairline{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:12px 0;}

.stat-row{display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--text-dim);}
.stat-row b{color:var(--text); font-weight:600; font-family:var(--font-mono);}

::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}

/* ---------- starfield bg ---------- */
#starfield{position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.6;}

/* ---------- MENU ---------- */
#screen-menu{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; padding:20px;
  background:#05050f;
  overflow:hidden;
}
/* ФОН ОТДЕЛЬНЫМ СЛОЕМ — чтобы его можно было двигать превращением, а не
   пересчётом заливки: сдвиг заливки заставляет браузер перерисовывать снимок
   каждый кадр, а превращение отдаётся видеокарте и не стоит ничего. */
.menu-bg{
  position:absolute; inset:-2.5%; z-index:0; pointer-events:none;
  background:url('menu-bg.jpg') center 38% / cover no-repeat;
  /* ХОД ВКЛЮЧАЕТСЯ ОТДЕЛЬНЫМ КЛАССОМ, И НЕ СРАЗУ.
     Как только у слоя появляется бесконечное превращение, браузер выносит его на
     отдельный холст и раскладывает снимок заново — это один кадр в четверть
     секунды. Отсрочка через animation-delay не спасает: холст готовится сразу,
     ждёт только само движение. Поэтому класс навешивается из main.js через пару
     секунд — к тому времени заставка меню отыграла, и единственная склейка
     приходится на покой, где её не видно. */
}
.menu-bg.дрейфует{
  animation:менюДрейф 46s ease-in-out infinite alternate;
}
/* ТОЛЬКО СДВИГ, БЕЗ НАЕЗДА. Замысел прежний: снимок должен дышать, чтобы не
   читаться как обои. Но менять размер нельзя — при каждом новом размере браузер
   заново раскладывает снимок в точки, и это стоит кадров. Сдвиг же он умеет
   отдавать видеокарте даром.
   «Наезд» получаем даром иначе: слой и так больше окна на шесть процентов с
   каждой стороны (inset:-6%), то есть снимок уже увеличен — остаётся возить его
   в этих пределах. */
@keyframes менюДрейф{
  0%   { transform:translate3d(0, 0, 0); }
  100% { transform:translate3d(-1.1%, -0.8%, 0); }
}
#screen-menu::before{content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(5,5,15,.35) 0%, rgba(5,5,15,.55) 55%, rgba(5,5,15,.85) 100%);}

/* ТУМАННЫЕ ПОДСВЕТКИ. Две мягкие кляксы позади карточки: они медленно плывут и
   дышат, добавляя кадру глубины. Ни одной чёткой границы — как только у пятна
   появляется край, оно превращается в пузырь поверх фотографии. */
/* БЕЗ filter:blur — И ЭТО ГЛАВНОЕ. Сперва я размывал пятна фильтром, и меню
   просело с 60 кадров до 47: размытие в 46 точек по полуэкранному пятну
   пересчитывается ЗАНОВО каждый кадр, пока пятно плывёт. Замер по частям показал,
   что все прочие добавки вместе стоят меньше двух кадров, а одни эти пятна —
   одиннадцать.
   Мягкий край берём у самого радиального пятна: у него переход и так плавный,
   а превращение без фильтра считает видеокарта, и оно даром. */
.menu-decor{
  position:absolute; z-index:1; pointer-events:none; opacity:0;
  border-radius:50%;
  animation:decorFadeFloat 2.4s ease-out .5s forwards;
}
.menu-decor.d1{
  width:58vmin; height:58vmin; left:2%; top:16%;
  background:radial-gradient(circle,
    rgba(79,208,255,.26) 0%, rgba(79,208,255,.15) 32%,
    rgba(79,208,255,.05) 58%, rgba(79,208,255,0) 76%);
  animation:decorFadeFloat 2.4s ease-out .5s forwards, floatSlow1 19s ease-in-out infinite;
}
.menu-decor.d2{
  width:66vmin; height:66vmin; right:-2%; bottom:2%;
  background:radial-gradient(circle,
    rgba(255,138,92,.20) 0%, rgba(255,138,92,.12) 32%,
    rgba(255,138,92,.04) 58%, rgba(255,138,92,0) 76%);
  animation:decorFadeFloat 2.8s ease-out .8s forwards, floatSlow2 24s ease-in-out infinite;
}
@keyframes decorFadeFloat{ to{ opacity:.85; } }
body.reduce-motion *{ animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.1s !important; }
@keyframes floatSlow1{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }
@keyframes floatSlow2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(14px);} }

.menu-card{width:100%; max-width:420px; text-align:center; position:relative; z-index:2;}
/* пиратские корпуса — блёклые, без цветов державы */
.battle-ship.pirate-hull .bship-rot{filter:grayscale(1) brightness(1.3) contrast(.9);}
/* корпуса держав окрашены в их цвет тем же сдвигом оттенка, что и на карте */
.battle-ship .bship-rot{filter:var(--hull-tint, none);}

/* всплеск гамма-волн от столицы в финале вступления */
@keyframes gammaFlash{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.2);}
  18%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(2.2);}
}
.gamma-flash{position:fixed; width:180px; height:180px; border-radius:50%; z-index:11; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(150,230,255,.55) 32%, rgba(79,208,255,0) 70%);
  animation:gammaFlash .85s cubic-bezier(.2,.8,.3,1) forwards;}

@keyframes gammaWave{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.18);}
  12%{opacity:.85;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(3.4);}
}
.gamma-wave{position:fixed; width:200px; height:200px; border-radius:50%; z-index:11; pointer-events:none;
  border:2px solid rgba(150,230,255,.75);
  box-shadow:0 0 26px rgba(79,208,255,.5), inset 0 0 26px rgba(79,208,255,.28);
  animation:gammaWave 1.45s cubic-bezier(.15,.7,.25,1) forwards;}

/* кольцо-прицел в момент фокусировки на звезде */
@keyframes focusPulse{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.35);}
  25%{opacity:.9;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.6);}
}
.focus-pulse{position:fixed; width:120px; height:120px; border-radius:50%; z-index:12; pointer-events:none;
  border:2px solid rgba(120,215,255,.85); box-shadow:0 0 22px rgba(79,208,255,.45), inset 0 0 22px rgba(79,208,255,.25);
  animation:focusPulse .85s cubic-bezier(.2,.75,.3,1) forwards;}

/* подпись столицы во время вступительного пролёта */
@keyframes introCapIn{ from{opacity:0; transform:translate(-50%,14px) scale(.96);} to{opacity:1; transform:translate(-50%,0) scale(1);} }
.intro-caption{position:absolute; left:50%; top:calc(var(--topbar-h) + 22px); transform:translateX(-50%);
  z-index:40; pointer-events:none; text-align:center; animation:introCapIn .6s cubic-bezier(.2,.8,.3,1) both;
  transition:opacity .7s ease, transform .7s ease;
  padding:10px 22px; border-radius:16px; white-space:nowrap;
  background:radial-gradient(ellipse at center, rgba(4,6,13,.82) 0%, rgba(4,6,13,.45) 70%, rgba(4,6,13,0) 100%);}
.intro-caption.out{opacity:0; transform:translate(-50%,-10px);}
.intro-caption .ic-sub{font-size:10px; letter-spacing:.22em; color:var(--text-dim);}
.intro-caption .ic-name{font-size:clamp(24px,7vw,34px); font-weight:800; letter-spacing:.06em; line-height:1.1;
  text-shadow:0 0 22px rgba(79,208,255,.5), 0 2px 12px rgba(0,0,0,.8);}
.intro-caption .ic-lore{font-size:11.5px; color:var(--text-dim); margin-top:3px;}

/* Экран загрузки: пока идёт настоящая предзагрузка картинок и создание галактики.
   Никакой имитации — полоса движется по числу реально загруженных файлов. */

.load-tip b{color:var(--text);}

/* поиск по справке */
.help-search{margin-bottom:12px;}
.help-search input{width:100%; box-sizing:border-box; padding:11px 13px; border-radius:12px; text-overflow:ellipsis;
  background:rgba(8,12,24,.6); border:1px solid var(--line); color:var(--text); font-size:13px;}
.help-search input::placeholder{color:var(--text-faint); text-overflow:ellipsis;}   /* на телефоне подсказка длиннее поля — обрезаем многоточием, а не буквой */
.help-found{font-size:11px; color:var(--text-dim); margin-top:6px; min-height:14px;}

/* Значки галактических явлений живут там же, где радар — у правого края. Свёрнуты до
   иконки со сроком, разворачиваются по нажатию и прячутся, когда открыт радар. */
#galactic-bar{position:absolute; right:10px; top:10px; z-index:9;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  transition:opacity .2s ease, transform .2s ease;}
#galactic-bar.hidden-by-map{opacity:0; transform:translateX(12px); pointer-events:none;}

.gal-chip{display:flex; align-items:center; gap:0; cursor:pointer; overflow:hidden;
  height:34px; border-radius:17px; padding:0 4px 0 0;
  background:rgba(8,12,24,.86); border:1px solid var(--line); backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:gap .18s ease;}
.gal-chip .gal-ico{width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;}
.gal-chip .gal-num{font-family:var(--font-mono); font-size:11px; font-weight:700; padding-right:9px;}
/* развёрнутый вид: появляется название и полный срок */
.gal-chip .gal-full{display:none; padding-right:11px; font-size:11px; line-height:1.25; white-space:nowrap;}
.gal-chip.open .gal-num{display:none;}
.gal-chip.open .gal-full{display:block;}
.gal-chip b{font-family:var(--font-mono);}
.gal-chip .gal-left{color:var(--text-dim);}
.gal-chip .gal-ico svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
/* карточка звезды: строка о туманности или ионном поясе */
.st-zone{margin-top:6px; font-size:11px;}

/* выбор слота сохранения в главном меню */
.slot-row{display:flex; gap:6px; justify-content:center; margin:-2px 0 10px;}
.slot-btn{flex:1; max-width:110px; padding:6px 4px; border-radius:10px; font-size:10px; line-height:1.3;
  background:rgba(12,18,34,.6); border:1px solid var(--line-soft); color:var(--text-dim); text-align:center;}
.slot-btn.sel{border-color:var(--blue); color:var(--text); background:rgba(79,208,255,.12);}
.slot-btn b{display:block; font-size:11px; color:var(--text); font-family:var(--font-mono);}
.slot-btn .empty{color:var(--text-faint);}

/* строка о сохранении под кнопкой «Продолжить» */
/* Подложка под кнопками меню: сама по себе кнопочная стопка «висела» на картинке,
   и на светлых участках фона подписи теряли контраст. Полупрозрачная плита с размытием
   собирает их в один блок, не пряча картинку. */
/* БЕЗ backdrop-filter — И ЭТО ВАЖНО. Размытие «того, что позади» приходится
   пересчитывать ЗАНОВО каждый кадр, если позади хоть что-то движется. А позади
   у нас теперь наезд фона, плывущие подсветки и метеоры — и меню просело с 60
   кадров до 48. Замер по частям показал виновника прямо: снимаешь размытие —
   58, возвращаешь — 48.
   Читаемость держим плотностью самой карточки, а не размытием фона: разница на
   глаз невелика, а десять кадров стоят дороже. */
.menu-btns{position:relative; padding:16px 14px; border-radius:18px;
  background:linear-gradient(180deg, rgba(10,15,29,.74), rgba(6,10,20,.88));
  border:1px solid rgba(120,150,220,.18);
  box-shadow:0 0 0 1px rgba(79,208,255,.07) inset, 0 18px 44px rgba(0,0,0,.5);}
/* Ободок карточки дышит тем же способом: не тенью блока (её пересчитывают
   каждый кадр), а прозрачностью готового слоя поверх. */
.menu-btns::after{
  content:''; position:absolute; inset:-1px; border-radius:19px;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(79,208,255,.20) inset, 0 0 46px rgba(79,208,255,.14);
  opacity:.25;
  animation:карточкаДышит 9s ease-in-out infinite;
}
@keyframes карточкаДышит{
  0%,100% { opacity:.20; }
  50%     { opacity:.95; }
}
.menu-btns .btn{margin-bottom:10px;}
.menu-btns .btn:last-child{margin-bottom:0;}
.mfall{opacity:0; transform:translateY(-46px); animation:mfallIn .68s cubic-bezier(.2,.9,.25,1.1) forwards;}
@keyframes mfallIn{ to{ opacity:1; transform:translateY(0);} }
.logo{font-size:15px; letter-spacing:.3em; color:var(--blue); font-weight:700; margin-bottom:6px;}
.logo-main{font-size:clamp(28px,8vw,42px); font-weight:800; letter-spacing:.04em; line-height:1.05;
  background:linear-gradient(180deg,#fff,#a9c8ff 60%,#4fd0ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(79,208,255,.25);
  margin-bottom:4px;}
/* ДВЕ АНИМАЦИИ НА ОДНОМ УЗЛЕ ЗАДАЮТСЯ ОДНИМ СПИСКОМ.
   Я сперва дописал свечение отдельным правилом — и название исчезло совсем:
   свойство animation не складывается, второе объявление ОТМЕНЯЕТ первое. А
   первым было mfallIn, которое и проявляет заголовок из прозрачности; отменив
   его, я оставил букву opacity:0 навсегда.
   Поэтому оба хода перечислены здесь через запятую. */
/* СВЕЧЕНИЕ НАЗВАНИЯ — ОТДЕЛЬНЫМ СЛОЕМ.
   Сперва я мигал тенью самого текста, и это оказалось самой дорогой добавкой из
   всех: тень с размытием до ста двадцати точек пересчитывается вокруг каждой
   буквы каждый кадр. Замер: без неё 59 кадров, с ней 45.
   Теперь под названием лежит мягкое пятно, у которого мигает только
   прозрачность, — а прозрачность браузер меняет даром. На глаз то же самое. */
.logo-glow{
  position:absolute; left:50%; top:52px; width:78%; height:120px;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center,
    rgba(79,208,255,.34) 0%, rgba(79,208,255,.14) 42%, rgba(79,208,255,0) 72%);
  opacity:.35;
  animation:названиеДышит 7s ease-in-out infinite;
}
/* Медленно, на грани заметности. Быстрее семи секунд это уже мигает, а мигающее
   название читается как ошибка, а не как замысел. */
@keyframes названиеДышит{
  0%,100% { opacity:.30; }
  50%     { opacity:.85; }
}
/* Подзаголовок лежал ВПЛОТНУЮ под «ГАЛАКТИКИ» и почти касался букв: у названия
   свечение, и оно доходило до этой строки. Даём воздуха сверху. */
.logo-sub{font-size:13px; color:var(--text-dim); letter-spacing:.08em;
  margin-top:14px; margin-bottom:34px;}
.menu-btns{display:flex; flex-direction:column; gap:10px;}
.menu-btns .mfall{animation-duration:.55s;}
.menu-foot{margin-top:28px; font-size:11px; color:var(--text-faint); line-height:1.6;}
/* Версия — мелко, моноширинно, под подписью. Та же ВЕРСИЯ_ИГРЫ, что в «Об игре»:
   один источник на всю игру, чтобы не расходились. */
.menu-version{margin-top:10px; font-size:10.5px; letter-spacing:.06em;
  font-family:var(--font-mono); color:var(--text-faint); opacity:.75;}
/* Прошлый запуск застрял — где именно. Показывается только когда есть что
   сказать; нажатие прячет до следующего раза. */
.menu-stuck{margin:10px auto 0; max-width:420px; padding:8px 12px; border-radius:10px;
  font-family:var(--font-mono); font-size:11px; line-height:1.5; text-align:left;
  color:#ffb4b4; background:rgba(120,20,30,.45); border:1px solid rgba(255,95,107,.4);
  cursor:pointer;}
.menu-stuck.hidden{display:none;}

/* ---------- SETUP ---------- */
/* Экран новой игры получил собственный фон — звёздная система с орбитами.
   Тёмная вуаль поверх, иначе текст на светлых участках не читается. */
#screen-page{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background:#04060d center 22% / cover no-repeat fixed;}
#screen-page::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,6,13,.14) 0%, rgba(4,6,13,.42) 26%, rgba(4,6,13,.74) 55%, rgba(4,6,13,.94) 100%);}
#screen-page > *{position:relative; z-index:1;}
#screen-page:not(.hidden){animation:screenIn .34s cubic-bezier(.22,.75,.3,1) both;}
/* карточки внутри страницы — как на экране новой игры */
#screen-page .card, #screen-page .opt-card{background-color:rgba(23,33,60,.55); backdrop-filter:none;}

#screen-setup{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background:#04060d url('setup-bg.jpg') center 18% / cover no-repeat fixed;}
#screen-setup::before{content:''; position:absolute; inset:0; pointer-events:none;
  /* вверху вуаль лёгкая — там сама звёздная система, ниже плотнее, чтобы текст читался */
  background:linear-gradient(180deg, rgba(4,6,13,.12) 0%, rgba(4,6,13,.38) 26%, rgba(4,6,13,.72) 55%, rgba(4,6,13,.93) 100%);}
/* карточки на этом экране слегка прозрачные — сквозь них видно фон, но текст не страдает */
#screen-setup .card, #screen-setup .opt-card, #screen-setup .race-cell, #screen-setup .race-detail,
#screen-setup .diff-card, #screen-setup .setup-summary, #screen-setup .galaxy-preview{
  background-color:rgba(17,25,45,.82); backdrop-filter:blur(2px);}
#screen-setup .race-cell.sel{backdrop-filter:blur(2px);}
#screen-setup > *{position:relative; z-index:1;}

/* Переходы между экранами: без них смена меню выглядела как рывок. */
@keyframes screenIn{ from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;} }
@keyframes screenInBack{ from{opacity:0; transform:translateY(-10px) scale(1.01);} to{opacity:1; transform:none;} }
#screen-menu:not(.hidden), #screen-setup:not(.hidden), #screen-game:not(.hidden){
  animation:screenIn .34s cubic-bezier(.22,.75,.3,1) both;}
#screen-menu.back-in{animation:screenInBack .32s cubic-bezier(.22,.75,.3,1) both;}
.setup-scroll{flex:1; overflow-y:auto; max-width:520px; width:100%; margin:0 auto;}

/* Шапка экрана новой игры — такая же картинка-баннер, как у зала славы. */
.setup-banner{position:relative; height:132px; margin:0 0 14px; border-radius:18px; overflow:hidden;
  background:url('setup-bg.jpg') center 22% / cover no-repeat;
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px 16px;
  border:1px solid rgba(120,150,220,.18); box-shadow:0 12px 34px rgba(0,0,0,.5);}
.setup-banner::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,13,.10) 0%, rgba(4,6,13,.5) 55%, rgba(4,6,13,.9) 100%);}
.setup-banner .sb-title{position:relative; z-index:1; font-size:24px; font-weight:800; letter-spacing:.06em;}
.setup-banner .sb-sub{position:relative; z-index:1; font-size:11px; letter-spacing:.12em; color:var(--text-dim);
  text-transform:uppercase; margin-top:2px;}

/* Всё содержимое настройки лежит на одной полупрозрачной плите — как кнопки в меню. */
.setup-plate{position:relative; padding:18px 16px 6px; border-radius:18px;
  background:linear-gradient(180deg, rgba(12,18,34,.55), rgba(8,12,24,.72));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(120,150,220,.18);
  box-shadow:0 0 0 1px rgba(79,208,255,.07) inset, 0 18px 44px rgba(0,0,0,.5);}
/* карточки внутри плиты не должны выглядеть плитой на плите */
.setup-plate .opt-card, .setup-plate .race-cell, .setup-plate .race-detail,
.setup-plate .diff-card, .setup-plate .setup-summary, .setup-plate .galaxy-preview{
  background-color:rgba(23,33,60,.55); backdrop-filter:none;}
.field{margin-bottom:22px;}
.field label{display:block; font-size:11px; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase; margin-bottom:8px; font-weight:700;}
.field input[type=text]{
  width:100%; background:var(--bg-panel2); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; border-radius:8px; font-size:15px; font-family:var(--font-mono);
}
.field input[type=text]:focus{outline:none; border-color:var(--blue);}
.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.opt-card{
  background:var(--bg-panel2); border:1px solid var(--line); border-radius:10px; padding:12px;
  text-align:left; cursor:pointer; transition:all .12s;
}
.opt-card .oc-name{font-weight:700; font-size:13px; letter-spacing:.03em;}
.opt-card .oc-desc{font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.4;}
.opt-card.sel{border-color:var(--blue); background:linear-gradient(180deg,rgba(79,208,255,.14),rgba(79,208,255,.04)); box-shadow:0 0 0 1px var(--blue) inset;}
.stepper{display:flex; align-items:center; gap:14px;}
.stepper button{width:40px; height:40px; border-radius:8px; font-size:18px; background:var(--bg-panel2); border:1px solid var(--line); color:var(--text);}
.stepper .val{font-family:var(--font-mono); font-size:20px; font-weight:700; min-width:30px; text-align:center;}
.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
/* Полоса с прокруткой: при шести державах партнёры не влезают в ширину экрана.
   Затемнение у правого края подсказывает, что список продолжается. */
.seg.scrollable{overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative;
  scrollbar-width:none; mask-image:linear-gradient(to right, #000 88%, transparent 100%);}
.seg.scrollable::-webkit-scrollbar{display:none;}
.seg.scrollable button{flex:0 0 auto; padding:9px 12px; white-space:nowrap;}
.seg.scrollable.no-fade{mask-image:none;}
.seg button{flex:1; padding:9px 4px; min-height:44px; background:var(--bg-panel2); border:none; color:var(--text-dim); font-size:11px; font-weight:700; border-right:1px solid var(--line); white-space:normal; line-height:1.25;}
.seg button:last-child{border-right:none;}
.seg button.sel{background:var(--blue-dim); color:#eafcff;}

/* ---------- GAME SHELL ---------- */
#screen-game{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;}
#topbar{
  display:flex; align-items:center; gap:6px; padding:calc(6px + var(--safe-top)) 10px 6px;
  background:linear-gradient(180deg, #131c31 0%, #0f1627 100%);
  border-bottom:1px solid rgba(120,170,255,.16);
  box-shadow:0 1px 0 rgba(79,208,255,.08), 0 6px 18px rgba(0,0,0,.35);
  z-index:10; flex-shrink:0;
  overflow-x:auto; white-space:nowrap;
}
/* Показатель — кнопка. Значок линией, число моноширинным, под пальцем — таблетка. */
.tb-item{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:13px; font-weight:600;
  flex-shrink:0; padding:5px 8px; border-radius:10px; background:none; border:1px solid transparent; color:var(--text);
  line-height:1;}
/* Спрятанная кнопка шапки (счёт показываем не во всех режимах) обязана исчезать
   совсем: у .tb-item стоит display:flex, и он перебивает обычное действие
   атрибута hidden — в шапке оставалась пустая звёздочка. Поймано на снимке для
   магазина, а вставленное сгоряча правило угодило ВНУТРЬ .tb-item и сломало
   обе записи разом: место в файле здесь важно не меньше самого правила. */
.tb-item[hidden]{ display:none !important; }
.tb-item:hover{background:rgba(79,208,255,.08); border-color:rgba(79,208,255,.18);}
.tb-item:active{background:rgba(79,208,255,.16);}
.tb-ico{width:17px; height:17px; display:flex; align-items:center; justify-content:center; opacity:.9; color:var(--blue);}
.tb-ico svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
/* Число года живёт в старом классе значка — ему рамка 17 точек не нужна. */
#tb-turnnum.tb-ico{width:auto; height:auto; display:block; opacity:1;}
#tb-money .tb-ico{color:var(--gold);}
#tb-morale .tb-ico{color:var(--green);}
#tb-morale.так-себе .tb-ico{color:var(--gold);}
#tb-morale.плохо .tb-ico{color:var(--red);}
#tb-morale.так-себе .tb-rot{d:path("M8.6 14.6h6.8");}
#tb-morale.плохо .tb-rot{d:path("M8.5 15.6q3.5-3 7 0");}
#tb-research .tb-ico{color:#b48cff;}
#tb-colonies .tb-ico{color:#7fd8ff;}
#tb-fleet .tb-ico{color:#ffab5e;}
/* Прибыль за год рядом с казной: маленькая, зелёная или красная. */
.tb-delta{font-size:10px; font-weight:700; margin-left:2px; opacity:.9;}
.tb-delta.плюс{color:var(--green);}
.tb-delta.минус{color:var(--red);}
/* ГОД И КНОПКА МЕНЮ ПРИБИТЫ К ПРАВОМУ КРАЮ. Шапка прокручивается вбок, и на
   телефоне 360 точек эта группа уезжала за край экрана: открыть игровое меню —
   а с ним сохранение, журнал и справку — было нельзя, пока не догадаешься
   протащить шапку пальцем. Теперь показатели едут ПОД группой, а сама она
   стоит. Затенение слева показывает, что там ещё что-то есть. */
/* Год и меню всегда на виду: они «прилипают» к правому краю, а шапка под ними
   прокручивается. Растушёвка широкая — иначе цифра флота выглядит обрезанной
   пополам, а не уехавшей под накладку. */
.tb-turn{margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:10px;
  position:sticky; right:0; padding-left:26px;
  background:linear-gradient(90deg, rgba(15,22,39,0) 0, rgba(16,23,40,.75) 14px, #101728 26px, #101728 100%);}
.tb-turn .lbl{font-size:10px; color:var(--text-dim); letter-spacing:.08em;}

#stage{position:relative; flex:1; overflow:hidden; background:#05070d;}
/* ---------- МНОГОСЛОЙНЫЙ КОСМОС ----------
   Пять слоёв едут с разной скоростью при прокрутке карты — дальние почти стоят,
   ближние заметно смещаются. Слои НЕ бесшовные (замер: края расходятся до 98
   единиц), поэтому не повторяются, а растянуты с запасом: сдвиг всегда остаётся
   внутри картинки и край не выползает. */
#cosmic-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:#05050d;
}
/* Запас увеличен: при 122% и размахе в 90 пикселей край слоя всё равно выползал
   тёмной дугой внизу экрана. Теперь слой шире экрана в полтора раза, а сдвиг
   остаётся прежним — край гарантированно за пределами видимости. */
/* Слой ровно по размеру экрана. Раньше он растягивался в полтора раза шире, чтобы
   при сдвиге не показался край, — но картинка 4K при этом размазывалась по площади
   вдвое большей нужной, и качество терялось. Теперь слой равен экрану, а край при
   сдвиге не выползает потому, что сдвигается САМ РИСУНОК внутри слоя
   (background-position), а не слой целиком. */
#cosmic-bg .bgl{
  position:absolute; inset:0;
  background-position:center center; background-size:cover; background-repeat:no-repeat;
  will-change:background-position;
}
/* Фон из ДВУХ слоёв: туманность и звёзды поверх неё.
   Третьего больше нет — прежний набор был из трёх, новый обходится двумя. */
#bgl1{ background-image:url('bg/bg1.png'); }                /* туманность */
#bgl2{ background-image:url('bg/bg2.png'); opacity:.9; }    /* звёзды, прозрачный слой */

/* Параллакс выключен — слои стоят на месте, но остаются видимыми */
body.no-parallax #cosmic-bg .bgl{ background-position:center center !important; }
#stage-dust{position:absolute; inset:0; z-index:0; pointer-events:none;}
/* flex + margin:auto центрируют карту, когда её масштаб меньше экрана (вступительный
   пролёт). При обычном масштабе карта больше контейнера и прокручивается как раньше. */
/* Карта тянется РОДНОЙ прокруткой окна — оттого и overflow:auto. Но сами полосы
   прокрутки не нужны: за них никто не тянет, а по двум краям экрана они лежат
   серыми рейками поверх космоса. Прячем их, не трогая саму прокрутку: убери её —
   и карта перестанет двигаться вовсе. */
#map-wrap{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; z-index:1;
  scrollbar-width:none; -ms-overflow-style:none;}
#map-wrap::-webkit-scrollbar{width:0; height:0; display:none;}
/* распорка не видна: она только задаёт размер прокручиваемой области */
#map-spacer{position:relative; pointer-events:none;}
/* Обёртка холста размером ровно с окно: сдвигается трансформацией вслед за
   прокруткой, поэтому визуально стоит на месте, а её края никогда не выходят за
   распорку — область прокрутки не растёт от неё самой. Холст внутри шире окна на
   запас (MAP_OVERSCAN) с каждой стороны и обрезается обёрткой. */
#map-anchor{position:sticky; left:0; top:0; width:0; height:0; z-index:1;}
#map-view{position:absolute; left:0; top:0; overflow:hidden;}   /* размер ставит sizeMapCanvas */
#map-canvas{display:block; touch-action:pan-x pan-y; position:absolute; left:0; top:0;}

/* Размеры радара подобраны так, чтобы поле карты сохраняло пропорции галактики
   (её мир примерно 1.25:1) с учётом рамки 16px и полоски сводки внизу — иначе
   по бокам появляются пустые поля. На планшете он крупнее, см. медиазапросы ниже. */
#minimap-overlay{
  position:absolute; top:10px; right:10px; width:210px; height:188px; z-index:8;
  max-width:calc(100% - 20px); max-height:calc(100% - 20px);
  padding:0; box-sizing:border-box;
  /* Рамки-картинки заменены чистым CSS: тонкий контур, мягкое свечение и скруглённые углы.
     Так интерфейс легче, а вес архива меньше на полмегабайта. */
  background:linear-gradient(180deg, rgba(11,16,30,.82), rgba(6,10,20,.86));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:var(--win-border);
  border-radius:var(--win-radius);
  box-shadow:var(--win-shadow);
  padding:10px;
  transform:translateX(calc(100% + 20px)); opacity:0; visibility:hidden;
  transition:transform .3s ease-out, opacity .3s ease-out, visibility 0s linear .3s;
  pointer-events:none;
}
#minimap-overlay.open{transform:translateX(0); opacity:1; visibility:visible; transition:transform .3s ease-out, opacity .3s ease-out; pointer-events:auto;}
#minimap-overlay.big{width:320px; height:284px;}
#minimap-overlay canvas{width:100%; height:100%; display:block; border-radius:6px; background:#05070f; touch-action:none;}
#minimap-expand{
  position:absolute; left:3px; top:3px; width:24px; height:24px; z-index:3;
  border-radius:6px; border:1px solid rgba(79,208,255,.35); background:rgba(8,14,28,.75);
  color:var(--blue); font-size:12px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center;
}
/* планшет */
@media (min-width:760px){
  #minimap-overlay{width:300px; height:267px; top:14px; right:14px;}
  #minimap-overlay.big{width:460px; height:398px;}
  #minimap-expand{width:30px; height:30px; left:5px; top:5px; font-size:14px;}
}
/* большой планшет / десктоп */
@media (min-width:1180px){
  #minimap-overlay{width:380px; height:334px;}
  #minimap-overlay.big{width:580px; height:494px;}
}
.minimap-legend{display:flex; gap:14px; color:var(--text-dim); flex-wrap:wrap;}
.minimap-legend span{display:flex; align-items:center; gap:4px;}
.minimap-legend i{width:8px; height:8px; border-radius:50%; display:inline-block;}

/* КАРТОЧКА СИСТЕМЫ.
   Прежде она росла вниз без предела: на своей колонии доходила до самого низа
   экрана и наезжала на кнопки приближения — те лежат в той же левой колонке и
   выше по слою, поэтому перекрывали и строку «Зданий», и кнопку УПРАВЛЯТЬ.
   Теперь у карточки есть потолок высоты, содержимое внутри прокручивается, а
   полоса действий закреплена внизу и никуда не уезжает. */
.star-tooltip{
  position:absolute; left:10px; top:10px; z-index:7; width:min(360px,88vw);
  max-height:calc(100% - 96px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(16,23,42,.88), rgba(12,18,34,.93));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-radius:var(--win-radius); padding:12px 14px 0;
  border:var(--win-border);
  box-shadow:var(--win-shadow);
}
/* Прокручивается только содержимое: шапка и кнопки остаются на месте. */
.star-tooltip .st-body{overflow-y:auto; overscroll-behavior:contain; padding-right:2px;}
.star-tooltip .st-body::-webkit-scrollbar{width:6px;}
.star-tooltip .st-body::-webkit-scrollbar-thumb{background:rgba(127,216,255,.22); border-radius:3px;}
.star-tooltip .st-head{margin-bottom:8px; padding-right:34px;}
.star-tooltip .st-name{font-size:17px; font-weight:800; letter-spacing:.03em; line-height:1.15;}
/* Подпись под названием: чья система и далеко ли она — одной строкой. */
.star-tooltip .st-sub{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-top:3px; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--text-dim);
}
.star-tooltip .st-dot{
  width:3px; height:3px; border-radius:50%; background:var(--text-faint);
  display:inline-block; flex-shrink:0;
}
.star-tooltip .st-close{position:absolute; top:6px; right:4px; width:34px; height:34px; z-index:2; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:20px; line-height:1;}
.st-owner{font-size:11px; font-weight:700; letter-spacing:.05em; margin-bottom:8px;}
.st-class{font-size:11.5px; font-family:var(--font-mono); color:var(--gold); letter-spacing:.02em; margin-bottom:8px;}
.st-desc{
  font-size:11.5px; line-height:1.45; color:var(--text-dim); margin:6px 0 2px;
  /* Описание системы — приятная деталь, но шесть строк оттесняли показатели вниз.
     Показываем три строки, остальное раскрывается нажатием. */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  cursor:pointer;
}
.st-desc.open{-webkit-line-clamp:unset; overflow:visible;}
/* Полоса действий закреплена у нижнего края карточки. Раньше она уезжала вместе
   с содержимым: у обжитой системы главная кнопка оказывалась за пределами
   экрана, и до неё нельзя было добраться. */
.st-actions{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:10px 0 12px; margin-top:2px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(12,18,34,0), rgba(12,18,34,.92) 22%);
}
.st-actions:empty{display:none;}
/* Кнопки делят строку поровну — ряд получается ровным, без обрубков в конце. */
.st-actions .btn{flex:1 1 130px;}

/* bottom nav */
#bottomnav{
  display:flex; flex-shrink:0; background:linear-gradient(180deg, #0f1728 0%, #0b1220 100%);
  border-top:1px solid rgba(120,170,255,.16);
  box-shadow:0 -1px 0 rgba(79,208,255,.06), 0 -8px 20px rgba(0,0,0,.35);
  padding-bottom:var(--safe-bottom); z-index:10;
}
/* Открытая вкладка подчёркнута сверху полоской света, а не только цветом подписи. */
.nav-btn{position:relative;}
.nav-btn::before{content:''; position:absolute; left:22%; right:22%; top:0; height:2px; border-radius:0 0 2px 2px;
  background:var(--blue); opacity:0; transform:scaleX(.4); transition:opacity .18s ease, transform .22s ease;}
.nav-btn.active::before{opacity:1; transform:scaleX(1);}
.nav-btn .ni img{transition:transform .18s ease;}
.nav-btn.active .ni img{transform:translateY(-1px) scale(1.08);}
/* Метка «есть дело» — золотая, с числом: колонии без стройки, побитые корабли,
   устаревшие чертежи, наука без выбора. Красная — флот в беде. */
.nav-badge.дело{background:var(--gold,#ffc94d); box-shadow:0 0 7px rgba(255,201,77,.8);}
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 2px 8px; background:none; border:none; color:var(--text-faint);
}
.nav-btn .ni{font-size:19px; display:flex; align-items:center; justify-content:center; position:relative;}

/* МЕТКА НА ВКЛАДКЕ. Зелёная — зовут мириться, красная с числом — требуют дань,
   красная точка — война уже идёт. Висит на значке, а не рядом с подписью:
   подпись на узком телефоне и так впритык. */
.nav-badge{position:absolute; top:-5px; right:-9px; min-width:14px; height:14px;
  padding:0 3px; border-radius:8px; box-sizing:border-box;
  font-size:9px; line-height:14px; font-weight:800; text-align:center;
  color:#08111f; border:1.5px solid #0e1526; pointer-events:none;}
.nav-badge.пусто{display:none;}
.nav-badge.мир{background:var(--green,#6fe08a); box-shadow:0 0 7px rgba(111,224,138,.85);}
.nav-badge.угроза{background:var(--red,#ff5f6b); box-shadow:0 0 7px rgba(255,95,107,.85);}
/* Пока ждут ответа — метка тихо дышит, иначе её не замечают. */
.nav-badge.зовёт{animation:меткаДышит 1.9s ease-in-out infinite;}
@keyframes меткаДышит{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.18); }
}
.nav-btn .ni img{width:22px; height:22px; object-fit:contain; display:block; filter:grayscale(.55) brightness(.85);}
.nav-btn.active .ni img{filter:none;}
.nav-btn .nt{font-size:9.5px; font-weight:700; letter-spacing:.03em;}
.nav-btn.active{color:var(--blue);}
.nav-btn.active .ni{filter:drop-shadow(0 0 6px rgba(79,208,255,.7));}

/* panel (slide-up sheet) */
#panel-wrap{position:absolute; left:0; right:0; top:var(--topbar-h); bottom:var(--nav-h); z-index:20; pointer-events:none;}
/* затемнение должно ловить тап (контейнер выше отключает события — детям надо вернуть),
   иначе нажатие мимо окна не закрывает его и вдобавок проходит насквозь по карте */
#panel-wrap > .scrim{pointer-events:auto;}
#panel{
  position:absolute; left:0; right:0; bottom:0; max-height:88%; 
  background:var(--sheet-bg);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-radius:18px 18px 0 0;
  transform:translateY(100%); opacity:0; visibility:hidden;
  /* Уход — быстрый и ровный: закрывающееся окно не должно задерживать. */
  transition:transform .20s cubic-bezier(.4,0,.9,.4), opacity .16s ease, visibility 0s linear .20s;
  pointer-events:auto; display:flex; flex-direction:column;
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
  z-index:51;
  padding:8px 4px;
}
#panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(79,208,255,.08) inset, 0 -14px 40px rgba(0,0,0,.55);
}
#panel > *{position:relative; z-index:1;}
#panel > .panel-close{position:absolute; z-index:2;}
/* ВЫХОД ОКНА. Ход подобран так, чтобы панель выскакивала бодро, а
   останавливалась мягко — чуть перебрав и осев на место. Ровный ход (ease)
   читается как «дёрнулось и встало»: у него нет ни разгона, ни осадки. */
#panel.open{transform:translateY(0); opacity:1; visibility:visible;
  transition:transform .40s cubic-bezier(.16,1.02,.28,1), opacity .18s ease;}

/* Содержимое всплывает следом за самим окном, с малой задержкой: сперва окно,
   потом то, что в нём. Так взгляд успевает за движением. */
#panel.open .panel-head, #panel.open #panel-body{
  animation:нутроОкна .34s cubic-bezier(.22,.9,.3,1) both;
}
#panel.open .panel-head{ animation-delay:.06s; }
#panel.open #panel-body{ animation-delay:.11s; }
@keyframes нутроОкна{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}
.panel-handle{width:44px; height:5px; background:var(--line); border-radius:3px; margin:10px auto 4px; transition:background .15s ease;}
#panel.dragging .panel-handle{background:var(--blue);}
.panel-head{position:relative; display:flex; align-items:center; padding:6px 14px 10px; border-bottom:1px solid var(--line-soft);}
.panel-title{font-size:16px; font-weight:800; letter-spacing:.03em;}
.panel-close{position:absolute; top:2px; right:0px; width:34px; height:34px; z-index:2; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:22px; background:none; border:none;}
/* сам крестик нарисован на рамке и двигать его нельзя, но зона нажатия расширена
   до пальцевого размера (~50px) невидимым слоем — попасть становится заметно легче */
.panel-close::after, .star-tooltip .st-close::after{content:''; position:absolute; top:-8px; right:-8px; bottom:-8px; left:-8px;}
/* Нижний отступ с запасом: панель кончается там же, где начинается нижняя навигация,
   и последняя кнопка содержимого оказывалась ПОД ней — до неё нельзя было дотянуться
   пальцем. Замер показал кнопку «ЗАНЯТЬ» на 889-й строке при высоте экрана 900. */
.panel-body{overflow-y:auto; padding:12px 14px calc(22px + var(--safe-bottom, 0px));}

/* full screen panel variant (for wide content like ship designer) */
#panel.full{max-height:100%; height:100%; border-radius:0;}

.section-title{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); font-weight:800; margin:16px 0 8px;}
.section-title:first-child{margin-top:2px;}

/* справка «Как играть» — раскрывающиеся разделы */
.help-item{background:var(--bg-panel2); border:1px solid var(--line-soft); border-radius:12px; margin-bottom:8px; overflow:hidden;}
.help-q{display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; background:none; border:none; color:var(--text); text-align:left; font-size:13px; font-weight:700; letter-spacing:.02em;}
.help-q .chev{margin-left:auto; color:var(--text-faint); font-size:12px; transition:transform .2s ease; flex-shrink:0;}
.help-item.open .help-q{color:var(--blue);}
.help-item.open .help-q .chev{transform:rotate(90deg);}
.help-a{display:none; padding:0 14px 13px; font-size:12.5px; color:var(--text-dim); line-height:1.65;}
.help-item.open .help-a{display:block;}
.help-a b{color:var(--text);}
.help-a u{text-decoration-color:var(--blue-dim);}

/* раздел «Об игре» — сплошной текст, а не раскрывашки: его читают подряд */
.about-block{background:var(--bg-panel2); border:1px solid var(--line-soft); border-radius:12px;
  padding:13px 15px; margin-bottom:10px; font-size:12.5px; color:var(--text-dim); line-height:1.7;}
.about-block p{margin:0 0 9px;}
.about-block p:last-child{margin-bottom:0;}
.about-block b{color:var(--text);}
.about-block i{color:var(--text-faint); font-style:italic;}
.about-list{margin:0; padding-left:18px;}
.about-list li{margin-bottom:6px;}
.about-list li:last-child{margin-bottom:0;}
/* строка вида «что — кто»: слева пояснение, справа имя, между ними точки */
.about-credit{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.about-credit span{color:var(--text-faint);}
.about-credit b{margin-left:auto; text-align:right; color:var(--blue);}
.about-note{border-left:2px solid var(--line); padding-left:11px; color:var(--text-faint);
  font-size:12px; line-height:1.6;}

/* colony sliders */
.alloc-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.alloc-icon{width:30px; text-align:center; font-size:16px;}
.alloc-bar{flex:1; height:10px; background:var(--bg-panel2); border-radius:6px; overflow:hidden; border:1px solid var(--line-soft);}
.alloc-fill{height:100%; border-radius:6px;}
.alloc-num{width:34px; text-align:right; font-family:var(--font-mono); font-size:13px; font-weight:700;}
input[type=range]{-webkit-appearance:none; width:100%; height:22px; background:transparent;}
input[type=range]::-webkit-slider-runnable-track{height:6px; background:var(--bg-panel2); border-radius:4px; border:1px solid var(--line-soft);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:var(--blue); border:2px solid #0b1224; box-shadow:0 0 8px rgba(79,208,255,.6);}

.card{background:var(--win-bg2); border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.card.clickable:active{transform:scale(.98);}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:6px; flex-wrap:wrap;}
.card-name{font-weight:700; font-size:13.5px;}
.card-sub{font-size:11px; color:var(--text-dim); margin-top:3px; line-height:1.4;}
.card-meta{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;}
.mchip{font-size:10.5px; font-family:var(--font-mono); color:var(--text-dim); background:var(--bg-raised); padding:2px 7px; border-radius:5px; border:1px solid var(--line-soft);}
.progress{height:6px; background:var(--bg-raised); border-radius:4px; overflow:hidden; margin-top:8px;}
.progress > div{height:100%; background:var(--gold);}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}

.empty-hint{text-align:center; padding:30px 10px; color:var(--text-faint); font-size:13px; line-height:1.6;}

.msg-line{padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; line-height:1.5;}
.msg-turn{color:var(--gold); font-family:var(--font-mono); font-weight:700; margin-right:6px;}

/* toast */
/* Сообщения переехали вниз: вверху они накрывали ту самую звезду, о которой говорили.
   Вид — как у карточек событий, чтобы объявления читались единообразно. */
#toast{position:absolute; left:50%; bottom:calc(var(--nav-h) + 92px + var(--safe-bottom));
  transform:translateX(-50%) translateY(10px); z-index:60;
  background:linear-gradient(180deg, rgba(23,33,58,.88), rgba(16,24,44,.92));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:var(--win-border); border-radius:var(--win-radius); box-shadow:var(--win-shadow);
  padding:12px 20px; font-size:13px; line-height:1.4;
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.22,.75,.3,1);
  max-width:min(90vw, 460px); text-align:center;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast-line{margin-top:5px; padding-top:5px; border-top:1px solid rgba(255,255,255,.1);}

/* Выноска-подсказка, привязанная к конкретному элементу: объяснение показывается
   вплотную к тому, что объясняет, а не отдельным сообщением где-то вверху экрана. */
.hint-bubble{
  position:absolute; z-index:30; max-width:210px;
  background:linear-gradient(180deg,rgba(24,36,68,.98),rgba(14,22,42,.98));
  border:1px solid rgba(79,208,255,.45); border-radius:12px;
  padding:10px 12px; font-size:12px; line-height:1.45; color:var(--text);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
}
.hint-bubble.show{opacity:1; transform:translateY(0);}
.hint-bubble .hint-tail{
  position:absolute; width:12px; height:12px; transform:rotate(45deg);
  background:rgba(18,28,54,.98); border:1px solid rgba(79,208,255,.45);
}
.hint-bubble.tail-right .hint-tail{right:-7px; border-left:none; border-bottom:none;}
.hint-bubble.tail-bottom .hint-tail{bottom:-7px; left:50%; margin-left:-6px; border-left:none; border-top:none;}
.hint-bubble .hint-ok{margin-top:8px; font-size:11px; color:var(--blue); font-weight:700; letter-spacing:.04em;}

/* Полоска режима: игра ждёт от игрока действия на карте. Это состояние, а не сообщение,
   поэтому висит, пока режим активен, и имеет явную отмену. */
#mode-bar{
  position:absolute; left:10px; right:10px; bottom:14px; z-index:9;
  display:none; align-items:center; gap:10px;
  background:linear-gradient(180deg,rgba(24,36,68,.96),rgba(14,22,42,.96));
  border:1px solid rgba(255,201,77,.45); border-radius:12px;
  padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.45);
}
#mode-bar.show{display:flex;}
#mode-bar .mb-text{flex:1; font-size:12px; line-height:1.35; color:var(--text);}
#mode-bar .mb-text b{color:var(--gold);}
#mode-bar .mb-cancel{
  flex-shrink:0; min-height:36px; padding:8px 14px; border-radius:9px;
  background:var(--bg-panel2); border:1px solid var(--line); color:var(--text); font-size:12px; font-weight:700;
}
/* когда полоска режима видна, круглый индикатор хода уступает ей место */
#endturn-fab.shifted{bottom:76px;}

/* Индикатор хода: круглая кнопка, вокруг которой кольцо-таймер до следующего года.
   Без текста — оставшееся время показывает само кольцо, а значок говорит, что сделает нажатие. */
#endturn-fab{
  position:absolute; right:14px; bottom:14px; z-index:8;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
/* переключатель скорости — маленькой таблеткой над индикатором хода */
#btn-speed{
  min-height:0; padding:5px 11px; border-radius:11px;
  background:rgba(14,21,40,.92); border:1px solid rgba(120,150,210,.32);
  color:var(--text-dim); font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 3px 12px rgba(0,0,0,.4);
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .12s ease;
}
#btn-speed:active{transform:scale(.92);}
#btn-speed.boost{color:var(--gold); border-color:rgba(255,201,77,.5); background:rgba(42,32,10,.9);}
#btn-autoplay{
  position:relative; width:58px; height:58px; padding:0; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(30,44,78,.96), rgba(12,18,34,.96));
  border:1px solid rgba(79,208,255,.30);
  box-shadow:0 6px 20px rgba(0,0,0,.45), inset 0 0 14px rgba(79,208,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
#btn-autoplay:active{transform:scale(.93);}
#btn-autoplay .et-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none;}
#btn-autoplay .et-bg{fill:none; stroke:rgba(120,150,210,.18); stroke-width:2.6;}
#btn-autoplay .et-fg{
  fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(255,201,77,.55));
  transition:stroke .25s ease;
}
#btn-autoplay .et-icon{width:22px; height:22px; fill:var(--gold); transition:fill .2s ease;}
#btn-autoplay .et-play{display:none;}
#btn-autoplay .et-pause{display:block;}
/* пауза: кольцо и значок гаснут до спокойного синего, чтобы не тянуть на себя внимание */
#btn-autoplay.paused{border-color:rgba(120,150,210,.28);}
#btn-autoplay.paused .et-fg{stroke:rgba(140,170,225,.55); filter:none;}
#btn-autoplay.paused .et-icon{fill:#9fb0d8;}
#btn-autoplay.paused .et-play{display:block;}
#btn-autoplay.paused .et-pause{display:none;}
/* короткая вспышка в момент смены года */
#btn-autoplay.tick{animation:etTick .5s ease-out;}
@keyframes etTick{
  0%{box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 0 rgba(255,201,77,.5);}
  100%{box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 16px rgba(255,201,77,0);}
}
@media (min-width:760px){
  #endturn-fab{right:18px; bottom:18px;}
  #btn-autoplay{width:68px; height:68px;}
  #btn-speed{font-size:13px; padding:6px 13px;}
  #btn-autoplay .et-icon{width:26px; height:26px;}
}

/* design/hull picker */
/* переключатель приоритета научной области */
.prio-btn{
  flex-shrink:0; min-width:52px; min-height:32px; padding:5px 10px; border-radius:9px;
  background:var(--bg-panel2); border:1px solid var(--line); color:var(--blue);
  font-family:var(--font-mono); font-size:12px; font-weight:800;
}
.prio-btn.boost{border-color:var(--gold); color:var(--gold); background:rgba(255,201,77,.12);}
.prio-btn.off{border-color:var(--line-soft); color:var(--text-faint); background:transparent;}

/* отложенные пункты очереди строительства */
.queue-next{margin-top:8px; border-top:1px solid var(--line-soft); padding-top:6px;}
.queue-next-item{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--text-dim); padding:3px 0;}
.queue-del{background:none; border:none; color:var(--text-faint); font-size:13px; min-height:26px; padding:0 6px;}

/* карточка колонии в списке: миниатюра планеты и значки-предупреждения */
.col-list-planet{width:34px; height:34px; border-radius:50%; flex-shrink:0; margin-top:2px; position:relative;}
.col-list-planet canvas{display:block; width:100% !important; height:100% !important; border-radius:50%;}
/* Планета с кольцами ужимается внутри значка: кольца вдвое шире шара, и в
   прежнюю рамку они бы не влезли (см. кольцаВЗначке в ui.js). */
.col-list-planet.с-кольцами canvas, .colony-hero-planet.с-кольцами .colony-planet-cv{
  width:56% !important; height:56% !important; margin:22%; position:relative; z-index:1;}
/* Планеты и светила в панелях — холсты с кадром сферы, подложка (градиент или
   плоская картинка) стоит только пока кадры не собраны. */
.planet-cv{display:inline-block; vertical-align:middle; border-radius:50%; flex-shrink:0;}
.colony-star-cv{display:inline-block; vertical-align:middle; border-radius:50%; flex-shrink:0;
  filter:drop-shadow(0 0 3px currentColor);}
/* Редактор чертежа: превью корпуса и значки в выборе */
.bp-preview{display:flex; justify-content:center; align-items:center; margin:2px 0 10px; cursor:pointer;}
.bp-preview img{filter:drop-shadow(0 0 12px rgba(120,180,255,.25));}
.pick-chip .pc-ico{display:flex; justify-content:center; margin-bottom:3px;}
/* Дипломатия и счёт: станция расы рядом с именем державы */
.diplo-name{display:flex; align-items:center; gap:7px;}
.station-slot{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.diplo-name .diplo-emblem{font-size:.85em; opacity:.75;}
.score-race{width:24px; height:24px; border-radius:50%; border:1.5px solid; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:rgba(0,0,0,.3);}
.col-warns{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;}
.col-warn{font-size:10px; padding:2px 7px; border-radius:7px; border:1px solid; background:rgba(0,0,0,.25);}

/* Шаблоны распределения: сетка 2×2, а не горизонтальный список — четыре подписи
   в сумме шире панели и обрезались рамкой при прокрутке вбок. */
.tpl-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px;}
.tpl-chip{min-height:38px; padding:8px 6px; border-radius:10px; font-size:11px; font-weight:700;
  letter-spacing:.02em; background:var(--bg-panel2); border:1px solid var(--line); color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tpl-chip:active{border-color:var(--blue); color:var(--text);}
.tpl-chip.gold{color:var(--gold); border-color:rgba(255,201,77,.4);}
/* выбранный пресет виден: раньше после нажатия ничто не показывало, что именно выбрано */
.tpl-chip.sel{border-color:var(--blue); color:var(--text); background:rgba(79,208,255,.14);
  box-shadow:0 0 0 1px rgba(79,208,255,.25) inset;}
.tpl-chip.gold.sel{border-color:var(--gold); background:rgba(255,201,77,.14); color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,201,77,.3) inset;}

/* строка мелких показателей в карточке постройки */
.build-meta{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;}
.build-meta .mchip{font-size:10px;}

/* Значки в карточках кораблей: на узком экране они разъезжались по строкам,
   поэтому у них своя, более плотная посадка. */
.card-meta .mchip{font-size:10px; padding:2px 6px;}
/* Узкий телефон: показателей шесть, и им тесно. Ужимаем кегль и промежутки —
   прятать их нельзя, это всё, что игрок видит про свою державу. */
@media (max-width:440px){
  #topbar{gap:2px; padding-left:6px;}
  #topbar .tb-item{font-size:12px; gap:4px; padding:5px 5px;}
  #topbar .tb-ico{font-size:13px;}
  .tb-turn{padding-left:20px;}
}

@media (max-width:420px){
  .card-meta .mchip{font-size:9.5px; padding:2px 5px;}
}

/* счётчик соперников живёт под предпросмотром — там же, где видны их столицы */
.opp-row{display:flex; align-items:center; gap:8px; margin-top:9px;}
.opp-label{font-size:11px; color:var(--text-dim); letter-spacing:.04em;}
.opp-row b{font-family:var(--font-mono); font-size:15px; min-width:18px; text-align:center; color:var(--gold);}
.opp-hint{flex:1; text-align:right; font-size:10.5px; color:var(--text-faint);}

/* строка с названием державы прямо у заголовка «Раса» */
.race-head{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
.race-head-name{flex:1; min-width:0; font-size:14px; font-weight:800; letter-spacing:.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rename-row{display:flex; gap:8px; margin-bottom:9px;}
.rename-row input{flex:1; min-width:0;}
.rename-row.hidden{display:none;}

/* недоступное расе направление: видно, но выбрать нельзя */
.opt-card.locked{opacity:.42; filter:grayscale(.6);}
.opt-card.locked .oc-name{font-weight:700;}

/* строки плюсов и минусов в карточке школы */
.oc-line{font-size:11px; line-height:1.4; margin-top:3px;}
.oc-line.up{color:var(--green);}
.oc-line.down{color:var(--red);}

/* выбор расы: сетка эмблем и раскрытая карточка выбранной */
.race-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px;}
@media (min-width:760px){ .race-grid{grid-template-columns:repeat(4,1fr);} }
@media (min-width:900px){ .race-grid{grid-template-columns:repeat(8,1fr);} }
.race-cell{aspect-ratio:1; border:1px solid var(--line); border-radius:12px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--bg-panel2);
  transition:border-color .18s, background .18s, transform .12s;}
.race-cell .rc-emblem{font-size:19px; line-height:1;}
.race-cell .rc-name{font-size:8.5px; font-weight:700; letter-spacing:.03em; color:var(--text-dim); text-align:center;}
.race-cell.sel{transform:translateY(-2px);}
.race-detail{margin-top:9px; border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:10px 12px;}
.race-detail .rd-name{font-size:13px; font-weight:800; letter-spacing:.04em;}
.race-detail .rd-lore{font-size:11px; color:var(--text-dim); line-height:1.45; margin:4px 0 6px;}
.race-detail .rd-line{font-size:11.5px; line-height:1.5;}
.race-detail .rd-play{font-size:11px; color:var(--blue); line-height:1.45; margin-bottom:4px;}
.race-detail .rd-start{font-size:11px; color:var(--gold); line-height:1.45; margin-bottom:7px;}
.color-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; justify-content:center;}
.color-dot{width:30px; height:30px; border-radius:50%; border:2px solid transparent; position:relative;}
.color-dot.sel{border-color:#fff; box-shadow:0 0 12px currentColor;}

/* Ползунок размера галактики с живым предпросмотром: пять делений, поэтому ползунок
   уместнее кнопок — и сразу видно, во что превращается выбор. */
.size-slider-row{display:flex; align-items:center; gap:12px;}
.size-slider-row input[type=range]{flex:1;}
.size-value{min-width:104px; text-align:right; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--blue);}
.galaxy-preview{width:100%; height:132px; margin-top:9px; border-radius:12px;
  border:1px solid var(--line-soft); background:radial-gradient(ellipse at 50% 50%, #10182c 0%, #070b16 70%, #04060d 100%);}

/* карточка сложности — меняет цвет вместе с выбором */
.diff-card{margin-top:8px; border:1px solid var(--line); border-left-width:3px; border-radius:10px;
  padding:9px 12px; transition:border-color .25s, background .25s;}
.diff-title{font-size:12px; font-weight:800; letter-spacing:.05em; margin-bottom:3px; transition:color .25s;}
.diff-card.easy{border-left-color:var(--green); background:rgba(111,224,138,.07);}
.diff-card.easy .diff-title{color:var(--green);}
.diff-card.normal{border-left-color:var(--blue); background:rgba(79,208,255,.07);}
.diff-card.normal .diff-title{color:var(--blue);}
.diff-card.hard{border-left-color:var(--red); background:rgba(255,95,107,.08);}
.diff-card.hard .diff-title{color:var(--red);}

/* экран новой игры: пояснения к выбору и сводка будущей партии */
.opt-note{font-size:11px; color:var(--text-dim); line-height:1.45; margin-top:6px;}
/* Сводка перед стартом: не таблица настроек (они и так расписаны выше), а короткая
   «путёвка» — что именно за партия начнётся и сколько у вас форы. */
.setup-summary{margin-top:14px; border:1px solid rgba(120,150,220,.22); border-radius:14px; padding:12px 14px;
  background:linear-gradient(120deg, rgba(20,30,54,.62), rgba(12,18,34,.5));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.ss-head{font-size:10px; letter-spacing:.14em; color:var(--text-faint); font-weight:700; margin-bottom:8px;}
.ss-line{font-size:13px; line-height:1.5;}
.ss-line b{color:var(--text);}
.ss-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
.ss-chip{font-size:10.5px; padding:4px 9px; border-radius:9px; border:1px solid var(--line-soft);
  background:rgba(0,0,0,.22); color:var(--text-dim);}
.ss-chip b{font-family:var(--font-mono); color:var(--text);}

/* частичный выбор кораблей из отряда */
.stack-take{display:flex; align-items:center; gap:7px; margin-top:7px; font-size:11px; color:var(--text-dim);}
.take-btn{min-width:30px; min-height:30px; border-radius:8px; background:var(--bg-raised);
  border:1px solid var(--line); color:var(--text); font-size:15px; line-height:1;}
.take-btn:active{border-color:var(--gold);}
.stack-take b{font-family:var(--font-mono); min-width:16px; text-align:center; color:var(--gold);}
.take-max{color:var(--blue); text-decoration:underline; padding:4px 2px;}
.grp-title{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.grp-all{font-size:10.5px; font-weight:600; letter-spacing:0; color:var(--blue); text-decoration:underline; padding:4px;}
.pick-chip.sel{border-color:var(--gold); color:var(--gold);}

/* полоска прочности в карточке отряда */
.hpbar{height:4px; border-radius:3px; background:rgba(255,255,255,.09); margin:5px 0 6px; overflow:hidden;}
.hpbar i{display:block; height:100%; border-radius:3px; transition:width .3s;}

/* на планшете и шире карточки идут в две колонки — иначе половина экрана пустует */
@media (min-width:760px){
  .grid2-wide{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .grid2-wide > .card{margin:0;}
}

/* сводка зданий колонии вместо ленты карточек */
.bsum{display:grid; grid-template-columns:1fr 1fr; gap:5px 10px;}
.bsum-line{display:flex; gap:6px; align-items:flex-start; font-size:11.5px; color:var(--text-dim); line-height:1.35;}
.bsum-line span:first-child{flex-shrink:0;}
.bld-list{display:none; margin-top:8px;}
.bld-list.open{display:block;}
.bld-group{margin-bottom:7px;}
.bld-group-name{font-size:10px; font-weight:700; letter-spacing:.07em; margin-bottom:4px;}
.bld-chips{display:flex; flex-wrap:wrap; gap:5px;}
.bld-chip{font-size:10.5px; padding:3px 8px; border-radius:8px; background:var(--bg-panel2);
  border:1px solid var(--line-soft); color:var(--text-dim);}

/* окно звезды: планета, светило и подсказка о перелёте */
.st-hero{display:flex; gap:11px; align-items:center; margin:6px 0 8px;}
.st-hero-planet{width:48px; height:48px; border-radius:50%; flex-shrink:0; position:relative;
  box-shadow:inset -6px -4px 13px rgba(0,0,0,.6);}
/* Светило в шапке карточки: та же вращающаяся сфера, что на карте, только крупнее. */
.st-hero-star3d{position:relative; width:62px; height:62px; flex-shrink:0;}
.st-hero-star3d canvas{position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
  display:block; filter:drop-shadow(0 0 10px rgba(255,200,120,.35));}
.sths-glow{position:absolute; inset:-38%; border-radius:50%; pointer-events:none;}
/* Планета ушла на второй план — маленьким кружком рядом с подписью */
.st-hero-world{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-dim); margin-top:4px;}
/* Главный мир: живая вращающаяся сфера вместо крашеного кружка. Крупнее прежнего,
   иначе поверхности не разглядеть. */
.sthw-dot{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:block;}
.st-hero-ring{position:absolute; left:-16%; top:44%; width:132%; height:26%; border:2px solid; border-radius:50%; transform:rotate(-12deg);}
.st-hero-info{flex:1; min-width:0;}
.st-hero-label{font-size:9px; letter-spacing:.12em; color:var(--text-faint); font-weight:700;}
.st-hero-type{font-size:13px; font-weight:700;}
.st-hero-star{font-size:10.5px; color:var(--text-dim); margin-top:2px; display:flex; align-items:center; gap:5px;}
.st-hero-res{font-size:10px; font-weight:700; letter-spacing:.06em; margin-top:2px;}
/* Сведения о светиле — короткими чипами вместо трёх строк подряд: спектр,
   радиус и богатство недр читаются одним взглядом и не растягивают шапку. */
.st-chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.st-chip{
  font-size:10px; font-weight:700; letter-spacing:.04em;
  font-family:var(--font-mono);
  padding:2px 7px; border-radius:999px;
  border:1px solid var(--line-soft); color:var(--text-dim);
  background:rgba(127,216,255,.05);
  white-space:nowrap;
}
.st-travel{font-size:11px; color:var(--blue); margin-top:7px;}
.st-travel.bad{color:var(--gold);}

/* переход между своими колониями из окна управления */
.colony-switch{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.colony-switch-btn{flex:1; min-width:0; min-height:36px; display:flex; align-items:center; gap:6px;
  background:var(--bg-panel2); border:1px solid var(--line); border-radius:10px; color:var(--text-dim);
  font-size:11.5px; font-weight:700; padding:6px 10px;}
.colony-switch-btn.right{justify-content:flex-end;}
.colony-switch-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.colony-switch-btn:active{border-color:var(--blue); color:var(--text);}
.colony-switch-pos{flex-shrink:0; font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}

/* шапка колонии: планета, светило и класс системы */
.colony-hero{display:flex; gap:14px; align-items:center; background:linear-gradient(120deg,rgba(20,30,54,.9),rgba(12,18,34,.75));
  border:1px solid var(--line-soft); border-radius:14px; padding:12px 14px; margin-bottom:10px; position:relative; overflow:hidden;}
/* Внутренняя тень убрана: у сферы уже есть своя освещённая сторона, вторая тень
   поверх делала планету грязной. Осталось лишь мягкое свечение вокруг. */
.colony-hero-planet{width:64px; height:64px; border-radius:50%; flex-shrink:0; position:relative;
  box-shadow:0 0 22px rgba(120,180,255,.12);}
.colony-planet-cv{width:100%; height:100%; display:block; border-radius:50%;}
.colony-hero-planet.с-кольцами{overflow:visible;}
.colony-hero-info{flex:1; min-width:0;}
.colony-hero-rank{font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--blue);}
.colony-hero-type{font-size:14px; font-weight:700; margin-top:1px;}
.colony-hero-star{font-size:11px; color:var(--text-dim); margin-top:3px; display:flex; align-items:center; gap:5px;}
.colony-hero-res{font-size:10.5px; font-weight:700; letter-spacing:.06em; margin-top:3px;}

/* Ряд выбора деталей прокручивается вбок — по краю добавлен градиент, иначе неочевидно,
   что там есть ещё варианты. На планшете места хватает, и ряд просто переносится. */
.pick-list{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);}
.pick-list.no-fade{-webkit-mask-image:none; mask-image:none;}
@media (min-width:760px){
  .pick-list{flex-wrap:wrap; overflow-x:visible; -webkit-mask-image:none; mask-image:none;}
}
.pick-chip{flex-shrink:0; padding:11px 13px; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:9px; background:var(--bg-panel2); border:1px solid var(--line-soft); font-size:12px; font-weight:700; text-align:center; min-width:82px;}
.pick-chip .pc-sub{font-size:9.5px; color:var(--text-dim); font-weight:500; margin-top:2px;}
.pick-chip.sel{border-color:var(--gold); background:linear-gradient(180deg,rgba(255,201,77,.16),rgba(255,201,77,.04));}
.pick-chip.locked{opacity:.35; pointer-events:none;}
.count-ctl{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:8px;}
.count-ctl button{width:34px; height:34px; border-radius:8px; background:var(--bg-panel2); border:1px solid var(--line); color:var(--text); font-size:16px;}

.space-bar{height:8px; background:var(--bg-panel2); border-radius:5px; overflow:hidden; border:1px solid var(--line-soft); margin:6px 0 2px;}
.space-bar > div{height:100%;}

/* victory / defeat */
.overlay-card{width:calc(100% - 16px); max-width:520px; text-align:center; background:var(--win-bg);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border-radius:var(--win-radius); padding:26px 14px;
  position:relative;
}
.overlay-card::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  border:var(--win-border);
  box-shadow:var(--win-shadow);
}
.overlay-card > *{position:relative; z-index:1;}
.popup-close{position:absolute; top:6px; right:4px; width:34px; height:34px; z-index:2;}

/* battle report overlay */
/* --- эффекты экрана боя --- */
/* держатель огня у живой модели: крутится за курсом, огонь внутри — у его правого
   края (после поворота на курс+180° это корма) */
.bship-tail{position:absolute; inset:0; pointer-events:none; transform-origin:50% 50%;}
/* след двигателя: светится с той стороны, куда смотрит корабль */
.bship-thrust{position:absolute; top:50%; width:14px; height:6px; margin-top:-3px;
  border-radius:50%; opacity:.75; animation:bThrust 1.1s ease-in-out infinite;}
/* сторона сопла зависит от того, куда смотрит нос на исходной картинке корпуса */
.bship-thrust.tail-right{right:-9px; background:radial-gradient(ellipse at left, #8fe9ff, rgba(143,233,255,0) 70%);}
.bship-thrust.tail-left{left:-9px; background:radial-gradient(ellipse at right, #8fe9ff, rgba(143,233,255,0) 70%);}
@keyframes bThrust{0%,100%{opacity:.45; transform:scaleX(.8);} 50%{opacity:.9; transform:scaleX(1.25);}}
/* форсаж победителей, уходящих из системы */
.battle-ship.boost{filter:drop-shadow(0 0 10px rgba(120,215,255,.9));}
.battle-ship.boost .bship-thrust{opacity:1; animation:none; transform:scaleX(2.6); width:22px;}

/* подбитый корабль дымит и горит */
.battle-ship.burning{filter:drop-shadow(0 0 7px rgba(255,120,40,.85));}
@keyframes bSmoke{0%{opacity:.55; transform:translate(0,0) scale(.6);} 100%{opacity:0; transform:translate(var(--sx),var(--sy)) scale(1.9);}}
.battle-smoke{position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:radial-gradient(circle, rgba(90,90,100,.85), rgba(60,60,70,0) 70%); animation:bSmoke 1.3s ease-out forwards; z-index:2;}
/* дымный след ракеты */
@keyframes bTrail{0%{opacity:.6; transform:scale(1);} 100%{opacity:0; transform:scale(2.2);}}
.battle-trail{position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,180,120,.7), rgba(255,150,90,0) 70%); animation:bTrail .7s ease-out forwards; z-index:2;}
/* добивающий удар — крупнее и ярче обычного взрыва */
.battle-explosion.final{width:70px; height:70px; margin:-18px 0 0 -18px;}
/* всплывающая карточка корабля по тапу */
.bship-info{position:absolute; z-index:6; background:rgba(14,21,40,.96); border:1px solid var(--line);
  border-radius:9px; padding:7px 10px; font-size:11px; line-height:1.45; color:var(--text); max-width:170px; pointer-events:none;}
.bship-info b{color:var(--blue);}
/* чем вооружена сторона */
.bs-weapon{font-size:9.5px; letter-spacing:.08em; color:var(--text-faint); font-weight:700;
  /* Подписи сторон набраны прописными («ЛАЗЕРЫ», «РАКЕТЫ»). Сюда же попадают
     названия обороны и «без оружия», взятые из общих строк, — приводим все к
     одному виду, чтобы одна подпись не выбивалась строчными буквами. */
  text-transform:uppercase;}
/* сводка после боя: исход крупно, флагманы по бокам, состав значками, полосы сил */
.battle-summary{display:flex; flex-direction:column; gap:8px; margin:0 auto 8px; max-width:720px; text-align:center;}
.bsum-outcome{font-size:26px; font-weight:900; letter-spacing:.14em; line-height:1.1;}
.battle-summary.bsum-win .bsum-outcome{color:var(--gold); text-shadow:0 0 18px rgba(255,201,77,.45);}
.battle-summary.bsum-lose .bsum-outcome{color:var(--red); text-shadow:0 0 18px rgba(255,95,107,.4);}
.battle-summary.bsum-draw .bsum-outcome{color:var(--text-dim);}
.battle-summary.bsum-other .bsum-outcome{font-size:16px; letter-spacing:.06em; color:var(--text);}
.bsum-sides{display:flex; gap:10px; align-items:stretch;}
.bsum-side{flex:1 1 0; min-width:0; background:rgba(14,21,40,.7); border:1px solid var(--line-soft); border-radius:10px; padding:8px 9px 7px;
  display:flex; flex-direction:column; align-items:center; gap:2px;}
/* флагман: модель своей расы, корпус в цвет державы тем же сдвигом, что на поле */
.bsum-flag{width:76px; height:76px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  filter:var(--hull-tint, none) drop-shadow(0 0 8px rgba(120,215,255,.35));}
.bsum-flag.pirate-hull{filter:grayscale(1) brightness(1.3) contrast(.9);}
.bsum-flag.bsum-flag-def{opacity:.85; filter:none;}
.bsum-rot{display:inline-flex; line-height:0;}
.bsum-flag img{max-width:100%; max-height:100%;}
.bsum-name{font-size:12px; font-weight:800; letter-spacing:.04em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bsum-flagname{font-size:9.5px; letter-spacing:.06em; color:var(--text-dim);}
/* состав: уцелевшие яркие, погибшие приглушены и перечёркнуты крестом */
.bsum-fleet{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:3px; margin-top:4px; max-width:100%;}
.bsum-ship{position:relative; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; filter:var(--hull-tint, none);}
.bsum-ship.pirate-hull{filter:grayscale(1) brightness(1.3) contrast(.9);}
.bsum-ship.dead img{opacity:.42;}
.bsum-ship.dead::after{content:''; position:absolute; inset:2px; pointer-events:none;
  background:linear-gradient(45deg, transparent 43%, var(--red) 46%, var(--red) 54%, transparent 57%),
             linear-gradient(-45deg, transparent 43%, var(--red) 46%, var(--red) 54%, transparent 57%);}
.bsum-more{font-size:11px; font-weight:800; color:var(--text-dim); font-family:var(--font-mono); padding:0 3px;}
.bsum-counts{font-size:10.5px; color:var(--text-dim); margin-top:2px;}
.bsum-counts b{color:var(--text); font-family:var(--font-mono);}
/* полосы сил: до боя и после, доли сторон от прежнего целого */
.bsum-bars{display:flex; flex-direction:column; gap:4px;}
.bsum-bar-row{display:flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.08em; color:var(--text-faint); font-weight:700;}
.bsum-bar-row span{width:96px; text-align:right; flex-shrink:0; white-space:nowrap;}
.bsum-bar{flex:1; height:10px; border-radius:5px; background:rgba(14,21,40,.7); border:1px solid var(--line-soft);
  display:flex; justify-content:space-between; overflow:hidden;}
.bsum-bar i{display:block; height:100%; border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 60%), var(--c, #888);}
.bsum-notes{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;}
.bsum-note{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--gold); font-weight:700; letter-spacing:.06em;}
.bsum-planet{width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:0 0 6px rgba(255,255,255,.25);}
/* телефон: флагманы меньше, столбцы плотнее, значки переносятся */
@media (max-width:480px){
  .bsum-flag{width:56px; height:56px;}
  .bsum-outcome{font-size:22px; letter-spacing:.1em;}
  .battle-summary.bsum-other .bsum-outcome{font-size:14px;}
  .bsum-sides{gap:6px;}
  .bsum-side{padding:6px 5px 5px;}
  .bsum-bar-row span{width:72px;}
}
body.dev-phone .bsum-flag{width:56px; height:56px;}
body.dev-phone .bsum-sides{gap:6px;}
body.dev-phone .bsum-side{padding:6px 5px 5px;}
#battle-pause{position:absolute; right:12px; top:calc(8px + var(--safe-top)); z-index:5;
  padding:7px 11px; min-height:34px; border-radius:9px; font-size:11px; font-weight:700;
  background:rgba(12,18,34,.85); border:1px solid var(--line); color:var(--text-dim);}
#battle-pause.on{color:var(--gold); border-color:rgba(255,201,77,.5);}

/* полоска прочности над кораблём: видно, кто держится, а кто вот-вот погибнет */
.bship-hp{position:absolute; left:50%; transform:translateX(-50%); top:-7px; width:80%; height:3px;
  background:rgba(0,0,0,.55); border-radius:2px; overflow:hidden;}
.bship-hp i{display:block; height:100%; width:100%; background:var(--green); transition:width .25s ease, background .25s ease;}
/* лёгкий дрейф — строй не выглядит нарисованным */
@keyframes bDrift{0%,100%{transform:translate(0,0);} 50%{transform:translate(2px,-3px);}}
.battle-ship.drift{animation:bDrift 3.2s ease-in-out infinite;}
/* рикошет: броня погасила выстрел */
@keyframes bRico{0%{transform:scale(.4); opacity:1;} 100%{transform:scale(1.6) translate(var(--rx),var(--ry)); opacity:0;}}
.battle-rico{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffd97a 40%,var(--огонь,#ffd97a) 58%,transparent 72%);
  animation:bRico .35s ease-out forwards; z-index:3;}
/* ОТДАЧА при выстреле: короткий толчок против курса и возврат. */
@keyframes bОтдача{
  0%{transform:translate(0,0);}
  22%{transform:translate(var(--отдX,0), var(--отдY,0));}
  100%{transform:translate(0,0);}}
.отдача{animation:bОтдача .28s cubic-bezier(.2,.8,.3,1);}

/* ФОРСАЖ: пламя ярче и длиннее, пока корабль доворачивает. */
.bship-thrust.форсаж{filter:brightness(1.7) saturate(1.25); transform:scaleX(1.45);
  transition:transform .18s ease-out, filter .18s ease-out;}

/* Живой трёхмерный корабль в бою: холст во всю ячейку. Размер холста вдвое
   больше ячейки — так корабль не мылится на крупных корпусах. */
.bship-3d{width:100%; height:100%; display:block; pointer-events:none;
  transform-origin:50% 50%; transition:transform .12s linear;}

/* ВСПЫШКА ОТ ВЗРЫВА — свет, а не пятно. Лежит поверх сцены, но ниже кораблей,
   чтобы не забеливать их; гаснет за четверть секунды. */
.battle-flash{position:absolute; z-index:3; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(255,246,214,.85) 0%, rgba(255,190,110,.42) 22%,
             rgba(255,140,70,.16) 46%, rgba(255,120,60,0) 72%);
  animation:bFlash .26s ease-out forwards;}
@keyframes bFlash{
  0%{transform:scale(.24); opacity:0;}
  18%{transform:scale(.7); opacity:1;}
  100%{transform:scale(1.15); opacity:0;}}

/* ОСТОВ погибшего корабля: обгорелый корпус, который сносит и крутит. */
.battle-wreck{position:absolute; z-index:2; pointer-events:none;
  filter:brightness(.34) saturate(.35) contrast(1.15);
  animation:bWreck 8.2s ease-out forwards;}
.battle-wreck img{width:100%; height:100%; object-fit:contain;}
@keyframes bWreck{
  0%{transform:translate(0,0) rotate(0deg); opacity:.85;}
  12%{opacity:.8;}
  100%{transform:translate(var(--wdx), var(--wdy)) rotate(var(--wrot)); opacity:0;}}

/* обломки после взрыва */
@keyframes bDebris{0%{opacity:1; transform:translate(0,0) rotate(0deg);} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot));}}
.battle-debris{position:absolute; width:5px; height:3px; background:#8fa4c8; border-radius:1px;
  animation:bDebris 1.5s ease-out forwards; z-index:3;}
/* тряска поля при гибели крупного корабля */
@keyframes bShake{0%,100%{transform:translate(0,0);} 20%{transform:translate(-4px,2px);} 40%{transform:translate(3px,-3px);} 60%{transform:translate(-2px,-1px);} 80%{transform:translate(2px,2px);}}
.battle-field.shake{animation:bShake .35s ease-in-out;}
/* резерв: тусклые силуэты ждущих своей очереди */
.battle-reserve{position:absolute; opacity:.28; filter:grayscale(.6); z-index:1;}
/* КРАЙ КАРТЫ: мягкая кромка у стороны, в которую упёрлись (только opacity). */
.map-edge{position:absolute; pointer-events:none; z-index:6; opacity:0; transition:opacity .22s ease;}
.map-edge.on{opacity:1;}
.map-edge-l{left:0; top:0; bottom:0; width:38px; background:linear-gradient(90deg, rgba(79,208,255,.28), rgba(79,208,255,0));}
.map-edge-r{right:0; top:0; bottom:0; width:38px; background:linear-gradient(270deg, rgba(79,208,255,.28), rgba(79,208,255,0));}
.map-edge-t{left:0; right:0; top:0; height:38px; background:linear-gradient(180deg, rgba(79,208,255,.28), rgba(79,208,255,0));}
.map-edge-b{left:0; right:0; bottom:0; height:38px; background:linear-gradient(0deg, rgba(79,208,255,.28), rgba(79,208,255,0));}
#map-wrap{overscroll-behavior:contain;}
/* На сенсоре полосы прокрутки страниц и панелей спрятаны: они торчали сбоку и
   делали экран «обрезанным не по размеру»; прокрутка пальцем и так очевидна. */
/* На сенсоре большая рамка-подложка страниц (новая игра, настройки, справка,
   зал славы, об игре) убрана: внутри и так карточки в ободках, а вторая рамка
   вокруг них съедала по 33 точки с каждого края узкого экрана — автор: «очень
   сильно режется». Карточки идут на всю ширину, поля экрана ужаты до 10 точек. */
body.dev-touch .setup-plate{padding:4px 0 0; border:0; background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0;}
body.dev-touch #screen-page, body.dev-touch #screen-setup{padding-left:10px; padding-right:10px;}
body.dev-touch .setup-banner{border-radius:14px;}
body.dev-touch .setup-scroll, body.dev-touch #panel-body, body.dev-touch .panel-body{scrollbar-width:none;}
body.dev-touch .setup-scroll::-webkit-scrollbar, body.dev-touch #panel-body::-webkit-scrollbar, body.dev-touch .panel-body::-webkit-scrollbar{display:none; width:0; height:0;}
/* ХРОНИКА ПАРТИИ: год моноширинным, значок вести, текст. */
.chron{display:flex; flex-direction:column; gap:6px;}
.chron-line{display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.35; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.chron-line:last-child{border-bottom:none;}
.chron-year{font-family:var(--font-mono); font-weight:700; color:var(--blue); min-width:40px;}
.chron-ico{width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; opacity:.85;}
.chron-text{flex:1; min-width:0;}
.chron-war .chron-year, .chron-capture_loss .chron-year, .chron-elimination .chron-year{color:var(--red);}
.chron-peace .chron-year, .chron-capture_win .chron-year, .chron-colony .chron-year{color:var(--green);}
.chron-artifact .chron-year, .chron-contact .chron-year{color:var(--gold);}
.end-chron{text-align:left; margin:0 0 14px; max-height:42vh; overflow-y:auto;}
.end-chron .section-title{margin-top:0;}
.hall-chron{margin:-4px 0 10px 40px;}
.hall-chron summary{cursor:pointer; font-size:11px; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; padding:2px 0 6px;}
.hall-chron .chron-line{font-size:11.5px;}
/* Пузырь поля вокруг защитника, пока держит купол колонии: тихий ободок,
   вспышка цветом оружия на погашенном попадании, растворяется с куполом. */
.bship-bubble{position:absolute; inset:-24%; border-radius:50%; pointer-events:none; z-index:3;
  border:1.5px solid rgba(120,215,255,.55); box-shadow:0 0 10px rgba(120,215,255,.35) inset, 0 0 6px rgba(120,215,255,.25);
  opacity:.28; transition:opacity .45s ease;}
.bship-bubble.gone{opacity:0;}
@keyframes bubbleHit{ 0%{opacity:1; transform:scale(1.18); border-color:var(--огонь, #bfefff);} 100%{opacity:.28; transform:scale(1); border-color:rgba(120,215,255,.55);} }
.bship-bubble.hit{animation:bubbleHit .45s ease-out;}
/* жёлтая полоска поля — над полоской прочности */
.bship-sh{position:absolute; left:50%; transform:translateX(-50%); top:-12px; width:80%; height:3px;
  background:rgba(0,0,0,.35); border-radius:2px; overflow:hidden; pointer-events:none;}
.bship-sh i{display:block; height:100%; width:100%; background:var(--gold,#ffc94d); box-shadow:0 0 6px rgba(255,201,77,.7);
  transition:width .25s ease;}
/* щит колонии над планетой */
@keyframes bShieldHit{0%{opacity:.75;} 100%{opacity:.18;}}
.battle-shield{position:absolute; border:2px solid rgba(120,215,255,.5); border-radius:50%;
  box-shadow:0 0 22px rgba(120,215,255,.35) inset; opacity:.18; z-index:1; pointer-events:none;}
.battle-shield.hit{animation:bShieldHit .5s ease-out;}
/* фаза боя и кнопка пропуска */
.battle-phase{font-size:10.5px; letter-spacing:.14em; color:var(--blue); margin-top:4px; min-height:14px;}
#battle-skip{position:absolute; left:12px; top:calc(8px + var(--safe-top)); z-index:5;
  padding:7px 12px; min-height:34px; border-radius:9px; font-size:11px; font-weight:700;
  background:rgba(12,18,34,.85); border:1px solid var(--line); color:var(--text-dim);}

/* шапка-картинка у справки и зала славы */
#panel.bannered .panel-head{min-height:0; padding-bottom:0; border-bottom:none;}
#panel.bannered .panel-banner{margin-top:0;}
.panel-banner{position:relative; height:118px; margin:-4px -2px 12px; border-radius:14px; overflow:hidden;
  background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px 14px; border:1px solid var(--line-soft);}
.panel-banner::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,13,.25) 0%, rgba(4,6,13,.55) 55%, rgba(4,6,13,.88) 100%);}
.panel-banner .pb-title{position:relative; z-index:1; font-size:19px; font-weight:800; letter-spacing:.05em;}
.panel-banner .pb-sub{position:relative; z-index:1; font-size:11px; color:var(--text-dim); margin-top:2px;}

/* выход из прыжка: полоса разгона и вспышка при появлении */
@keyframes warpStreak{ 0%{opacity:0; transform:translate(-50%,-50%) scaleX(.2);} 35%{opacity:.95;} 100%{opacity:0; transform:translate(-50%,-50%) scaleX(1);} }
.warp-streak{position:absolute; width:150px; height:3px; border-radius:2px; z-index:4; pointer-events:none;
  animation:warpStreak .42s ease-out forwards;}
.warp-streak.from-left{background:linear-gradient(90deg, rgba(120,215,255,0), #9fe6ff 70%, #fff 100%); transform-origin:left center;}
.warp-streak.from-right{background:linear-gradient(270deg, rgba(120,215,255,0), #9fe6ff 70%, #fff 100%); transform-origin:right center;}
@keyframes warpFlash{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.2);} 30%{opacity:1; transform:translate(-50%,-50%) scale(1.1);} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.5);} }
.warp-flash{position:absolute; width:54px; height:54px; border-radius:50%; z-index:4; pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#a8e8ff 40%,rgba(120,215,255,0) 72%); animation:warpFlash .45s ease-out forwards;}

/* минное поле: заряды мигают и подрываются на входе флота */
@keyframes mineBlink{ 0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.25);} }
.sea-mine{position:absolute; width:18px; height:18px; z-index:3; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg stroke=%22%238d9bb5%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1%22/%3E%3C/g%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226.2%22 fill=%22%232a3346%22 stroke=%22%239aa9c4%22 stroke-width=%221.4%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.6%22 fill=%22%23ff8a4a%22/%3E%3Ccircle cx=%2210.4%22 cy=%2210%22 r=%221.2%22 fill=%22%23fff%22 opacity=%22.55%22/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,120,60,.9));
  animation:mineBlink .38s ease-in-out infinite;}

/* силовой купол над колонией */
.planet-dome{position:absolute; border-radius:50%; z-index:1; pointer-events:none; overflow:hidden;
  border:1px solid rgba(130,220,255,.6); box-shadow:0 0 26px rgba(120,200,255,.35) inset, 0 0 18px rgba(120,200,255,.3);
  /* Ячеистая сетка силового поля: три семейства тонких линий под 60° читаются
     сотами, а не сплошной заливкой. Плюс прежняя мягкая заливка изнутри. */
  background:
    repeating-linear-gradient(0deg,   rgba(160,225,255,.13) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(60deg,  rgba(160,225,255,.13) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(120deg, rgba(160,225,255,.13) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 50% 60%, rgba(120,200,255,.16) 0%, rgba(120,200,255,.06) 60%, rgba(120,200,255,0) 75%);
  transition:opacity .5s;}
/* Бегущий блик по куполу — поворот одного слоя, видеокарта считает даром. */
.planet-dome::after{content:''; position:absolute; inset:-12%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 68%, rgba(190,235,255,.30) 76%, transparent 84%);
  animation:domeSweep 3.4s linear infinite;}
@keyframes domeSweep{ to{ transform:rotate(360deg); } }
.reduce-motion .planet-dome::after{animation:none;}
@keyframes domeBreak{ 0%{opacity:1; transform:scale(1);} 40%{opacity:.9; transform:scale(1.08); filter:brightness(2);} 100%{opacity:0; transform:scale(1.2);} }
.planet-dome.broken{animation:domeBreak .65s ease-out forwards;}
.dome-bar{position:absolute; transform:translateX(-50%); z-index:6; pointer-events:none; display:flex; align-items:center; gap:6px;
  font-size:9px; letter-spacing:.12em; color:rgba(160,220,255,.9);}
.dome-bar i{display:block; width:88px; height:4px; border-radius:3px; background:linear-gradient(90deg,#6fd6ff,#b9ecff);
  box-shadow:0 0 8px rgba(120,200,255,.7);}

/* захваченный колонизатор в кольце победителей */
@keyframes prizeIn{ 0%{opacity:0; transform:scale(.5);} 100%{opacity:1; transform:scale(1);} }
.battle-ship.prize{position:absolute; animation:prizeIn .5s ease-out forwards;
  filter:drop-shadow(0 0 10px rgba(255,215,120,.9));}
@keyframes prizeRing{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.5);} 60%{opacity:.8;} 100%{opacity:.45; transform:translate(-50%,-50%) scale(1);} }
.prize-ring{position:absolute; width:210px; height:150px; border-radius:50%; border:1px dashed rgba(255,215,120,.65);
  z-index:3; pointer-events:none; animation:prizeRing 1s ease-out forwards;}

/* высадка колонизатора: след входа в атмосферу, вспышка, ударное кольцо и огонёк колонии */
@keyframes landTrail{ 0%{opacity:.9; transform:translate(-50%,-50%) scale(1);} 100%{opacity:0; transform:translate(-50%,-50%) scale(.3);} }
.landing-trail{position:absolute; width:var(--tsz); height:var(--tsz); border-radius:50%; z-index:4; pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#ffcf8a 40%,rgba(255,150,60,0) 72%);
  animation:landTrail .85s ease-out forwards;}

@keyframes landFlash{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.2);} 25%{opacity:1; transform:translate(-50%,-50%) scale(1);} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6);} }
.landing-flash{position:absolute; width:76px; height:76px; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#ffe3b0 35%,rgba(255,180,90,0) 70%);
  animation:landFlash .85s ease-out forwards;}

@keyframes landRing{ 0%{opacity:.85; transform:translate(-50%,-50%) scale(.15);} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.4);} }
.landing-ring{position:absolute; width:90px; height:90px; border-radius:50%; border:2px solid; z-index:5; pointer-events:none;
  animation:landRing 1.15s cubic-bezier(.2,.7,.3,1) forwards;}

@keyframes colonyLight{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.2);} 40%{opacity:1; transform:translate(-50%,-50%) scale(1.15);} 100%{opacity:.9; transform:translate(-50%,-50%) scale(1);} }
.colony-light{position:absolute; width:16px; height:16px; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(circle,#fff 0%,var(--clr) 45%,rgba(255,255,255,0) 75%);
  box-shadow:0 0 18px var(--clr); animation:colonyLight .9s ease-out forwards;}

@keyframes landCap{ 0%{opacity:0; transform:translate(-50%,6px);} 30%{opacity:1; transform:translate(-50%,0);} 100%{opacity:1; transform:translate(-50%,0);} }
.landing-caption{position:absolute; z-index:6; pointer-events:none; font-size:11px; font-weight:800; letter-spacing:.14em;
  color:#ffe9c4; text-shadow:0 0 12px rgba(255,190,110,.8); white-space:nowrap; animation:landCap .6s ease-out forwards;}

/* астероиды в поле боя — медленно дрейфуют позади кораблей */
@keyframes bRockDrift{from{transform:translate(0,0) rotate(0deg);} to{transform:translate(var(--rdx),var(--rdy)) rotate(var(--rrot));}}
.battle-rock{position:absolute; z-index:1; pointer-events:none;
  background:linear-gradient(140deg,#6c7590,#3a4157 60%,#262c3d);
  box-shadow:inset -2px -2px 5px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.4);
  animation:bRockDrift linear infinite;}

/* фон экрана боя: планета, за которую идёт война, и местное светило */
.battle-world{position:absolute; inset:0; transform-origin:0 0; will-change:transform;}
.battle-ship.в-фокусе{z-index:5; filter:drop-shadow(0 0 12px rgba(120,215,255,.75));}
.bship-info.focus{left:12px; bottom:12px; top:auto; right:auto; max-width:min(60vw, 260px); padding-right:34px;}
.bship-info.focus small{color:var(--text-dim); font-size:10.5px; line-height:1.3; display:block; margin-top:4px;}
.bship-info.focus .bi-close{position:absolute; right:6px; top:6px; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:rgba(20,29,52,.85); color:#fff; font-size:12px; padding:0;}
.battle-planet{position:absolute; border-radius:50%; z-index:0; pointer-events:none; opacity:.92;}
.battle-planet-ring{position:absolute; border:2px solid; border-radius:50%; transform:rotate(-8deg); z-index:0; pointer-events:none; opacity:.5;}
.battle-sun{position:absolute; width:110px; height:110px; border-radius:50%; z-index:0; pointer-events:none; opacity:.8;}
.battle-ship{z-index:2;}
.battle-shot-wrap, .battle-explosion, .battle-hit-flash{z-index:3;}

#battle-screen{position:fixed; inset:0; z-index:92; background:#05050f url('space-bg.jpg') center center / cover no-repeat; display:flex; flex-direction:column; animation:battleScreenIn .35s ease-out;}
@keyframes battleScreenIn{ from{opacity:0;} to{opacity:1;} }
.battle-header{padding:calc(14px + var(--safe-top)) 64px 10px 100px; text-align:center; flex-shrink:0;}
.battle-star{font-size:22px; font-weight:800; margin-top:2px; overflow-wrap:anywhere;}
/* На телефоне между кнопками «Пропустить» и «Пауза» остаётся полоска в 130px:
   название системы не влезало и уезжало под кнопку (на снимке «ПРОВЕРКА» без
   первой буквы). Заголовок уходит под кнопки, на всю ширину. */
body.dev-touch .battle-header{padding:calc(50px + var(--safe-top)) 12px 4px;}
body.dev-touch .battle-star{font-size:19px;}
.battle-sides{display:flex; justify-content:space-between; padding:0 20px; font-size:13px; flex-shrink:0;}
/* Поле боя: настоящий снимок космоса вместо однотонного пятна — тот же, что
   за картой и в осмотре флота. Прежде поле было пустой тёмной коробкой. */
/* Поле боя во весь экран, без рамки и полей: автор — «окно боя должно быть на
   весь экран, а там какая-то рамка». */
.battle-field{position:relative; flex:1; margin:0; overflow:hidden;
  border-radius:0; border:0;
  background:
    radial-gradient(ellipse at center, rgba(79,208,255,.10), rgba(5,6,15,.55) 75%),
    url('bg/bg1.png') center/cover no-repeat;}
.battle-footer{position:absolute; left:0; right:0; bottom:0; z-index:5; padding:14px 18px calc(16px + var(--safe-bottom));}
/* Подвал лежит поверх поля, а не под ним: пока идёт бой, в нём лишь скрытая
   кнопка «Закрыть», и он оставлял внизу пустую чёрную полосу в 66px. */
/* базовая прозрачность 1: иначе любой класс, заменяющий анимацию появления (дрейф),
   возвращал бы корабль в невидимое состояние */
.battle-ship{position:absolute; width:38px; height:38px; opacity:1; animation:battleShipIn .4s ease-out;}
@keyframes battleShipIn{ from{opacity:0; transform:scale(.5);} to{opacity:1; transform:scale(1);} }
.battle-ship.dead{ animation:battleShipDie .3s ease-in forwards; pointer-events:none; }
@keyframes battleShipDie{ 0%{opacity:1; transform:scale(1);} 30%{opacity:.75; transform:scale(1.15);} 100%{opacity:0; transform:scale(.15) rotate(30deg);} }
.battle-shot-wrap{ position:absolute; pointer-events:none; }
.battle-shot{ position:absolute; left:0; border-radius:3px; }
/* Лазер: длинный след с раскалённым остриём впереди. Прежде это была ровная
   полоска в двадцать два пиксела — она читалась как чёрточка, а не как выстрел. */
.shot-laser{ top:-1.5px; height:3px; width:34px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--огонь,#8fe9ff) 55%,#fff 92%);
  box-shadow:0 0 10px var(--огонь,#8fe9ff), 0 0 22px rgba(143,233,255,.45);
  animation:shotFlyLinear .7s linear forwards; }   /* было .4s: автор просил выстрелы медленнее */
/* Ракета: горячее ядро в ореоле пламени, и ореол дышит на лету. */
.shot-missile{ top:-4px; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#fff 25%,var(--огонь,#ff9a4d) 70%);
  box-shadow:0 0 12px var(--огонь,#ff9a4d), 0 0 26px rgba(255,154,77,.4);
  animation:shotFlyLinear 1.1s linear forwards, ракетаДышит .16s ease-in-out infinite; }
@keyframes ракетаДышит{ 0%,100%{ box-shadow:0 0 12px var(--огонь,#ff9a4d), 0 0 26px rgba(255,154,77,.35);} 50%{ box-shadow:0 0 18px var(--огонь,#ff9a4d), 0 0 34px rgba(255,154,77,.55);} }
/* Плазма: сгусток, который вращается и слегка колеблется — не шарик, а комок. */
.shot-plasma{ top:-6px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#fff 12%,var(--огонь,#c792ff) 62%,rgba(199,146,255,.25) 100%);
  box-shadow:0 0 16px var(--огонь,#c792ff), 0 0 32px rgba(199,146,255,.45);
  animation:shotFlyLinear .9s linear forwards, плазмаКрутится .5s linear infinite; }
@keyframes плазмаКрутится{ from{ border-radius:52% 48% 47% 53%; } 50%{ border-radius:46% 54% 55% 45%; } to{ border-radius:52% 48% 47% 53%; } }
/* Луч не летит снарядом, а тянется от корабля к цели и держится: сплошная линия
   мгновенно достаёт до противника, разгорается и гаснет. */
.shot-beam{ top:-1.5px; height:3px; width:var(--dist); transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,255,255,.95), #6ff0c8 35%, #6ff0c8 75%, rgba(111,240,200,.2));
  box-shadow:0 0 12px #6ff0c8, 0 0 26px rgba(111,240,200,.5);
  animation:beamHold .45s ease-out forwards; }
@keyframes beamHold{
  0%   { opacity:0; transform:scaleY(.2); }
  18%  { opacity:1; transform:scaleY(1.25); }
  70%  { opacity:.95; transform:scaleY(1); }
  100% { opacity:0; transform:scaleY(.35); }
}
.shot-ultimate{ top:-3px; height:6px; width:48px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--огонь,#ff5f6b) 50%,#fff 95%);
  box-shadow:0 0 20px var(--огонь,#ff5f6b), 0 0 40px rgba(255,95,107,.5);
  animation:shotFlyLinear .34s linear forwards; }

/* ДУЛЬНАЯ ВСПЫШКА. Короткий выхлоп у борта стреляющего: снаряд больше не
   возникает из пустоты, и по цвету видно, чем именно бьют. Растёт вдоль ствола,
   оттого и вытянута — --угол задаёт направление выстрела. */
.battle-muzzle{ position:absolute; width:26px; height:10px; margin:-5px 0 0 -4px;
  border-radius:50%; pointer-events:none; z-index:3;
  transform-origin:4px center;
  background:radial-gradient(ellipse at 12% 50%, #fff 8%, var(--огонь,#8fe9ff) 42%, transparent 72%);
  animation:дуло .18s ease-out forwards; }
@keyframes дуло{
  0%   { opacity:0;  transform:rotate(var(--угол,0deg)) scaleX(.25) scaleY(.5); }
  35%  { opacity:1;  transform:rotate(var(--угол,0deg)) scaleX(1)   scaleY(1.15); }
  100% { opacity:0;  transform:rotate(var(--угол,0deg)) scaleX(1.3) scaleY(.4); }
}

/* ОЖОГ ОТ ЛУЧА. Луч режет корпус всё время, пока держится, — и в точке,
   куда он упирается, металл кипит. Без этого струя просто упиралась в корабль,
   ничего с ним не делая на вид. */
.battle-beam-burn{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; pointer-events:none; z-index:4;
  background:radial-gradient(circle,#fff 20%, var(--огонь,#6ff0c8) 50%, transparent 74%);
  box-shadow:0 0 16px var(--огонь,#6ff0c8);
  animation:ожог .55s ease-in-out infinite; }
@keyframes ожог{ 0%,100%{ transform:scale(.8); opacity:.85; } 50%{ transform:scale(1.25); opacity:1; } }
@keyframes shotFlyLinear{ from{ transform:translateX(0); opacity:1;} 80%{opacity:1;} to{ transform:translateX(var(--dist)); opacity:0;} }
.battle-hit-flash{ position:absolute; width:20px; height:20px; margin-left:-10px; margin-top:-10px; border-radius:50%;
  background:radial-gradient(circle,#fff 18%, var(--огонь,#fff) 42%, rgba(255,255,255,0) 72%);
  box-shadow:0 0 14px var(--огонь,#fff); animation:hitFlash .3s ease-out forwards; pointer-events:none; }
@keyframes hitFlash{ 0%{ transform:scale(.3); opacity:1;} 100%{ transform:scale(2); opacity:0;} }
.battle-explosion{ position:absolute; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle,#fff,#ffb257,transparent 70%); animation:battleBoom .5s ease-out forwards; pointer-events:none; }
@keyframes battleBoom{ 0%{transform:scale(.2); opacity:1;} 100%{transform:scale(2.2); opacity:0;} }

/* ---------- иконки зданий/кораблей (SVG, анимированные) ---------- */
.card-icon{flex-shrink:0; width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; overflow:visible;}
.card-icon.small{width:30px; height:30px; border-radius:8px;}
@keyframes iconSpin{ to{ transform:rotate(360deg); } }
@keyframes iconPulse{ 0%,100%{ opacity:.75; transform:scale(1);} 50%{ opacity:1; transform:scale(1.14);} }
@keyframes iconFlicker{ 0%,100%{ opacity:.6;} 45%{opacity:1;} 55%{opacity:.85;} }
@keyframes starTwinkle{ 0%,100%{ filter:brightness(1) drop-shadow(0 0 3px currentColor); transform:scale(1);} 50%{ filter:brightness(1.25) drop-shadow(0 0 6px currentColor); transform:scale(1.06);} }
.colony-star-icon{ animation:starTwinkle 2.6s ease-in-out infinite; }
@keyframes iconGlow{ 0%,100%{ opacity:.55;} 50%{ opacity:1;} }
@keyframes iconSway{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(4deg);} }
@keyframes thrusterPulse{ 0%,100%{ opacity:.45; transform:scaleX(1);} 50%{ opacity:1; transform:scaleX(1.3);} }
.bicon-gearteeth{ transform-origin:12px 12px; animation:iconSpin 7s linear infinite; }
.bicon-sprout{ transform-origin:12px 20px; animation:iconSway 2.4s ease-in-out infinite; }
.bicon-orbit{ transform-origin:12px 12px; animation:iconSpin 2.6s linear infinite; }
.bicon-star{ transform-origin:12px 12px; animation:iconPulse 1.7s ease-in-out infinite; }
.bicon-coin{ animation:iconGlow 2s ease-in-out infinite; }
.bicon-shield{ animation:iconGlow 2.2s ease-in-out infinite; }
.sicon-thruster{ transform-origin:center; animation:thrusterPulse 1s ease-in-out infinite; }
.sicon-twinkle{ animation:iconPulse 1.6s ease-in-out infinite; }
.sicon-ring{ transform-origin:12px 13px; animation:iconSpin 5s linear infinite; }
.eicon-flame{ transform-origin:12px 8px; animation:flameFlicker 1s ease-in-out infinite; }
.aicon-shine{ animation:iconGlow 2.4s ease-in-out infinite; }
.wicon-bolt{ animation:iconPulse 1.3s ease-in-out infinite; }
@keyframes flameFlicker{ 0%,100%{ transform:scaleY(1) scaleX(1);} 50%{ transform:scaleY(1.18) scaleX(.88);} }

@media (min-width:760px){
  .setup-scroll{max-width:640px;}
  .opt-grid{grid-template-columns:1fr 1fr 1fr 1fr;}
  /* На широком экране окно стоит посреди экрана, а не выезжает шторкой снизу.
     Там уместен другой выход: короткий наезд с чуть уменьшенного размера — так
     ведут себя настольные окна. Полёт снизу через полэкрана здесь выглядел бы
     нелепо. */
  #panel{width:min(600px, 82vw); max-width:600px; right:auto; border-radius:18px; left:50%;
    transform:translate(-50%, 26px) scale(.965); top:6%; bottom:auto; max-height:88%;
    transform-origin:50% 30%;}
  #panel.open{transform:translate(-50%, 0) scale(1);}
  #panel.full{max-width:900px;}
  .star-tooltip{width:520px; max-width:520px;}
}


/* ---------- ОКНО СОХРАНЕНИЙ ---------- */
/* Карточка целиком — кнопка «продолжить»: две широкие кнопки на каждой смотрелись
   тяжело и спорили друг с другом по весу. Стирание спрятано в крестик сбоку. */
.save-grid{display:flex; flex-direction:column; gap:10px; padding:2px 0 18px;}

.save-card{
  position:relative; display:flex; align-items:stretch; gap:0; overflow:hidden;
  background:linear-gradient(120deg, rgba(24,34,58,.92), rgba(13,18,32,.92));
  border:1px solid var(--line); border-radius:13px; cursor:pointer;
  transition:border-color .16s ease, transform .12s ease, background .16s ease;
}
.save-card:active{transform:scale(.985);}
.save-card.sel{border-color:rgba(79,208,255,.5);}
.save-card.confirm{border-color:var(--red); background:linear-gradient(120deg, rgba(58,24,28,.92), rgba(32,14,18,.92));}
.save-card.empty{opacity:.5; border-style:dashed; cursor:default; padding:16px; justify-content:center; text-align:center;}
.save-card.empty:active{transform:none;}

.sc-side{width:4px; flex:0 0 4px;}
.sc-body{flex:1; min-width:0; padding:11px 13px;}

.sc-top{display:flex; align-items:center; gap:8px;}
.sc-num{font-size:9.5px; letter-spacing:.16em; color:var(--text-faint); font-weight:800;}
.sc-tag{font-size:9px; color:var(--blue); border:1px solid rgba(79,208,255,.35); border-radius:20px; padding:1px 7px; letter-spacing:.05em;}

.sc-year{font-size:23px; font-weight:800; color:var(--gold); line-height:1.15; margin-top:1px;
  font-variant-numeric:tabular-nums;}
.sc-year span{font-size:11px; font-weight:600; color:var(--text-faint); letter-spacing:.06em; margin-left:4px;}
.sc-race{font-size:12.5px; font-weight:700; color:var(--text); margin-top:1px;}
.sc-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); margin-top:5px;}

/* Крестик: маленький и тихий, пока на него не нажали */
.sc-del{
  position:absolute; top:8px; right:8px; min-width:30px; height:26px; padding:0 8px;
  border-radius:8px; border:1px solid var(--line); background:rgba(8,12,24,.6);
  color:var(--text-faint); font-size:12px; font-weight:800; line-height:1;
}
.save-card.confirm .sc-del{border-color:var(--red); color:#ff9b9b; background:rgba(60,16,22,.8); font-size:10px;}

/* Стрелка «войти» у правого края — подсказывает, что карточка нажимается */
.sc-go{display:flex; align-items:center; padding:0 14px 0 6px; color:var(--text-faint); font-size:13px;}
.save-card.sel .sc-go{color:var(--blue);}

.sc-empty{font-size:15px; font-weight:700; color:var(--text-faint);}
.sc-hint{font-size:10.5px; color:var(--text-faint); margin-top:3px;}


/* Экран запуска уходит сам: ядро эмблемы вспыхивает, всё растворяется. */
#screen-loading.done{ animation:bootOut .62s ease-in forwards; }
#screen-loading.done .ldo-core{ animation:coreFlare .62s ease-out forwards; }
@keyframes bootOut{
  0%{opacity:1; transform:scale(1);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.06);}
}
@keyframes coreFlare{
  0%{filter:drop-shadow(0 0 10px rgba(255,190,90,.7));}
  45%{filter:drop-shadow(0 0 40px rgba(255,225,150,1));}
  100%{filter:drop-shadow(0 0 70px rgba(255,235,190,0));}
}

/* ---------- ЭМБЛЕМА ЗАПУСКА ---------- */
.ldo-halo{ animation:haloBreath 3.4s ease-in-out infinite; transform-origin:70px 70px; }
@keyframes haloBreath{ 0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.06);} }

.ldo-ring{
  fill:none; stroke:rgba(127,216,255,.32); stroke-width:1.1;
  stroke-dasharray:3 7; transform-origin:70px 70px;
  animation:ringSpin 26s linear infinite;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

.ldo-orb{ fill:none; stroke:rgba(150,200,255,.30); stroke-width:1.15; transform-origin:70px 70px; }
.ldo-orb.o1{ transform:rotate(0deg); }
.ldo-orb.o2{ transform:rotate(60deg); stroke:rgba(255,196,120,.26); }
.ldo-orb.o3{ transform:rotate(-58deg); stroke:rgba(180,150,255,.24); }
.ldo-sys{ transform-origin:70px 70px; animation:sysTilt 18s ease-in-out infinite; }
@keyframes sysTilt{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }

/* Светила бегут по орбитам — каждое со своей скоростью и по своему кругу */
.ldo-p{ transform-origin:70px 70px; }
.ldo-p.p1{ fill:#9fe0ff; cx:128px; cy:70px; animation:orbA 7s linear infinite; filter:drop-shadow(0 0 5px rgba(159,224,255,.9)); }
.ldo-p.p2{ fill:#ffd08a; cx:128px; cy:70px; animation:orbB 11s linear infinite; filter:drop-shadow(0 0 5px rgba(255,208,138,.9)); }
.ldo-p.p3{ fill:#d3b0ff; cx:128px; cy:70px; animation:orbC 15s linear infinite; filter:drop-shadow(0 0 4px rgba(211,176,255,.85)); }
@keyframes orbA{ from{ transform:rotate(0deg)   scaleY(.345) rotate(0deg);}   to{ transform:rotate(360deg) scaleY(.345) rotate(-360deg);} }
@keyframes orbB{ from{ transform:rotate(60deg)  scaleY(.345) rotate(0deg);}   to{ transform:rotate(420deg) scaleY(.345) rotate(-360deg);} }
@keyframes orbC{ from{ transform:rotate(-58deg) scaleY(.345) rotate(0deg);}   to{ transform:rotate(302deg) scaleY(.345) rotate(-360deg);} }

.ldo-core{ filter:drop-shadow(0 0 14px rgba(255,190,90,.75)); animation:coreBreath 2.6s ease-in-out infinite; }
@keyframes coreBreath{ 0%,100%{ filter:drop-shadow(0 0 12px rgba(255,190,90,.6)); } 50%{ filter:drop-shadow(0 0 22px rgba(255,215,140,.95)); } }


/* ---------- ТОРГОВЛЯ ---------- */
/* Склады крупными плитками: видно не только число, но и насколько запас полон. */
.trade-hero{
  background:linear-gradient(150deg, rgba(28,40,68,.95), rgba(14,20,36,.95));
  border:1px solid var(--line); border-radius:16px; padding:14px 14px 16px; margin-bottom:16px;
}
.th-title{font-size:12px; letter-spacing:.14em; color:var(--blue); font-weight:800;}
.th-sub{font-size:11px; color:var(--text-faint); margin-top:2px;}
.th-grid{display:flex; gap:10px; margin-top:12px;}
.th-cell{flex:1; background:rgba(8,12,24,.55); border:1px solid var(--line); border-radius:12px; padding:10px 8px; text-align:center;}
.thc-ico{font-size:18px; line-height:1;}
.thc-val{font-size:22px; font-weight:800; color:var(--text); line-height:1.1; margin-top:2px;}
.thc-name{font-size:9px; letter-spacing:.08em; color:var(--text-faint); font-weight:700;}
.thc-bar{height:3px; background:rgba(255,255,255,.08); border-radius:3px; margin-top:7px; overflow:hidden;}
.thc-bar i{display:block; height:100%; border-radius:3px;}

/* Карточка торговца */
.trade-broker{
  background:linear-gradient(140deg, rgba(34,30,20,.9), rgba(16,18,30,.9));
  border:1px solid var(--gold-dim, #6b5a2a); border-radius:14px; padding:13px 14px; margin-bottom:14px;
}
.tb-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.tb-name{font-size:15px; font-weight:800; color:var(--gold); letter-spacing:.04em;}
.tb-rates{display:flex; gap:8px;}
.tb-rate{font-size:11px; color:var(--text-dim); background:rgba(8,12,24,.5); border:1px solid var(--line); border-radius:20px; padding:3px 9px;}
.tb-rate.buy b{color:#7fd8ff;} .tb-rate.sell b{color:var(--gold);}
.tb-note{font-size:11px; color:var(--text-dim); margin-top:6px;}
.tb-infl{margin-top:9px;}
.tbi-bar{height:5px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden;}
.tbi-bar i{display:block; height:100%; background:linear-gradient(90deg,#c9a227,#ffe08a); border-radius:4px;}
.tbi-txt{font-size:10px; color:var(--text-faint); margin-top:4px;}
.tb-lot{display:flex; align-items:center; gap:6px; margin-top:11px; font-size:10px; color:var(--text-faint); letter-spacing:.08em;}
.tb-lot .lot{min-width:38px; min-height:32px; border-radius:8px; border:1px solid var(--line);
  background:rgba(8,12,24,.5); color:var(--text-dim); font-weight:700; font-size:12px;}
.tb-lot .lot.sel{border-color:var(--gold); color:var(--gold); background:rgba(201,162,39,.12);}

/* Строка сырья */
.trade-row{
  background:rgba(16,22,38,.85); border:1px solid var(--line); border-left:3px solid var(--res, var(--line));
  border-radius:12px; padding:11px 12px; margin-bottom:10px;
}
.tr-head{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.tr-name{font-size:14px; font-weight:800; color:var(--res, var(--text)); letter-spacing:.03em;}
.tr-ico{font-size:15px;}
.tr-stock{display:flex; gap:10px; font-size:11px; color:var(--text-dim);}
.tr-stock b{color:var(--text);}
.tr-stock .low b{color:var(--gold);}
.tr-warn{font-size:10.5px; color:var(--gold); margin-top:5px;}
.tr-actions{display:flex; gap:8px; margin-top:10px;}
.tr-actions .btn{flex:1; font-size:11px;}
.trade-foot{font-size:11px; color:var(--text-faint); line-height:1.5; margin-top:6px; padding-bottom:6px;}

.tr-trend{font-size:10px; font-weight:700; letter-spacing:.04em; margin-left:6px;}
.tr-price{display:flex; gap:14px; font-size:11px; color:var(--text-dim); margin-top:5px;}


/* ---------- ЭКРАН ЗАПУСКА ---------- */
/* Три слоя фона: дальние звёзды, цветная туманность и плывущая пыль — вместо
   плоского тёмного прямоугольника с полосой посередине. */
#screen-loading{
  position:absolute; inset:0; z-index:60; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 42%, #16203c 0%, #0a0e1c 55%, #05060d 100%);
}
/* ---------- ФОН ЭКРАНОВ ЗАГРУЗКИ ----------
   Два разных снимка: один при запуске игры, другой перед началом партии.
   Нарисованные слои (звёзды, туманность, пыль) остаются поверх снимка — они
   дают движение, которого у неподвижной картинки нет. */
#screen-loading{
  background:#04060e url('load-boot.jpg') center center / cover no-repeat;
}
#screen-loading.ingame{
  background-image:url('load-game.jpg');
}
/* Снимок сам по себе яркий, поэтому нарисованные слои приглушаем — иначе они
   спорят с ним и получается каша. */
#screen-loading .ld-sky{opacity:.45;}
#screen-loading .ld-neb{opacity:.30;}
#screen-loading .ld-dust{opacity:.55;}
/* Затемнение под текстом: на светлых участках снимка подписи терялись. */
#screen-loading::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 58%, rgba(3,6,14,.78) 0%, rgba(3,6,14,.55) 45%, rgba(3,6,14,.75) 100%);
}
#screen-loading .load-box{position:relative; z-index:2;}

.ld-sky, .ld-neb, .ld-dust{position:absolute; inset:-10%; pointer-events:none;}
/* Небо экрана загрузки — ПЛИТКА ld-stars.png (tools/sdelat-zvezdy-zagruzki.js),
   а не 97 радиальных градиентов: телефон растеризовал их три секунды, и первый
   кадр запуска не появлялся — игрок видел чёрный экран до самого меню. */
.ld-sky{
  background:url('ld-stars.png') 0 0 / 600px 600px repeat;
  opacity:.9; animation:ldTwinkle 5.5s ease-in-out infinite;
}
/* второй слой мелких звёзд идёт своим ритмом — небо перестаёт мигать разом */
.ld-sky::after{
  content:''; position:absolute; inset:0;
  background:url('ld-stars.png') 270px 140px / 430px 430px repeat;
  opacity:.6; animation:ldTwinkle 7.5s ease-in-out infinite reverse;
}
.ld-neb{
  background:
    radial-gradient(ellipse 55% 38% at 22% 26%, rgba(79,208,255,.32), transparent 68%),
    radial-gradient(ellipse 48% 42% at 78% 64%, rgba(199,146,255,.28), transparent 70%),
    radial-gradient(ellipse 65% 28% at 52% 90%, rgba(201,162,39,.20), transparent 74%),
    radial-gradient(ellipse 35% 30% at 62% 18%, rgba(255,120,90,.16), transparent 72%);
  opacity:.85; animation:ldDrift 26s ease-in-out infinite alternate;   /* без blur: размытие слоя в 120% экрана дорого телефону, а на глаз не видно */
}
.ld-dust{
  background-image:radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,.5) 40%, transparent 41%);
  background-size:120px 120px; opacity:.18; animation:ldDust 40s linear infinite;
}
@keyframes ldTwinkle{ 0%,100%{opacity:.55;} 50%{opacity:.9;} }
@keyframes ldDrift{ from{transform:translate3d(-1.5%,-1%,0) scale(1.02);} to{transform:translate3d(1.5%,1%,0) scale(1.06);} }
@keyframes ldDust{ from{background-position:0 0;} to{background-position:240px 360px;} }

.load-box{position:relative; z-index:1; width:100%; max-width:430px; padding:0 26px; text-align:center;}

/* Эмблема: ядро в кольце и две наклонные орбиты — знак державы, а не просто текст */
/* Старые правила эмблемы убраны: они шли НИЖЕ новых и перебивали их — ядро
   заливалось плоским голубым вместо золотого свечения, а орбиты крутились
   по-старому. Осталось только то, что не относится к самому знаку. */
.ld-mark{display:flex; justify-content:center; margin-bottom:18px;}
.ld-orbit{width:148px; height:148px; overflow:visible;}

.load-title{
  font-size:clamp(21px,6.4vw,30px); font-weight:800; letter-spacing:.1em; line-height:1.15;
  color:#eaf6ff; text-shadow:0 0 26px rgba(79,208,255,.35);
}
.load-title span{color:var(--blue); letter-spacing:.16em;}
.load-sub{font-size:11.5px; letter-spacing:.16em; color:var(--text-faint); margin-top:8px; text-transform:uppercase;}

.load-bar{height:6px; border-radius:5px; background:rgba(255,255,255,.07);
  margin:22px 0 8px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}
/* Плавность полосы держит САМ БРАУЗЕР. Пока грузятся тридцать мегабайт текстур,
   разметка почти не обновляется — таймер в коде успевал сработать раз за две
   секунды. Длинный переход по ширине сглаживает даже одиночный скачок. */
.load-bar i{display:block; height:100%; width:0%; border-radius:5px;
  background:linear-gradient(90deg, #2b7fd4, #7fd8ff 60%, #eaf6ff);
  box-shadow:0 0 14px rgba(127,216,255,.6);
  transition:width 1.1s cubic-bezier(.25,.8,.35,1);}

.ld-row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.load-step{font-size:11px; color:var(--text-dim); text-align:left; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ld-pct{font-size:12px; font-weight:800; color:var(--blue); font-variant-numeric:tabular-nums;}

.ld-tipbox{
  margin-top:26px; padding:12px 14px; text-align:left;
  background:rgba(10,16,30,.55); border:1px solid rgba(127,216,255,.12); border-radius:12px;
  backdrop-filter:blur(2px);
}
.ld-tiphead{font-size:9.5px; letter-spacing:.18em; color:var(--blue); font-weight:800; margin-bottom:5px;}
.load-tip{font-size:12.5px; line-height:1.55; color:var(--text-dim);}

/* Готово: весь экран становится кнопкой, подпись подмигивает */
#screen-loading.ready{cursor:pointer;}
#screen-loading.ready .load-sub{
  color:var(--gold); font-weight:800; letter-spacing:.1em;
  animation:tapPulse 1.5s ease-in-out infinite;
}
#screen-loading.ready .ld-row{opacity:.45;}
#screen-loading.ready .ldo-core{fill:var(--gold); filter:drop-shadow(0 0 18px rgba(255,214,102,.8));}
@keyframes tapPulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }


/* ---------- КАРТОЧКА ВЕСТЕЙ ---------- */
/* События — главное на карточке. Управление ушло в тихую строку внизу: широкая
   кнопка «свернуть и больше не показывать» перевешивала сами вести. */
.ev-card{text-align:left; max-height:80vh; display:flex; flex-direction:column; padding:0; overflow:hidden;}

.ev-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:14px 16px 11px; border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(79,208,255,.10), transparent);
}
.ev-title{font-size:12px; letter-spacing:.14em; font-weight:800; color:var(--blue);}
.ev-year{font-size:11px; color:var(--text-faint); display:flex; align-items:center; gap:7px; white-space:nowrap;}
.ev-year span{
  background:var(--blue-dim); color:#eafcff; font-weight:800; font-size:10px;
  border-radius:20px; padding:1px 7px; min-width:18px; text-align:center;
}

.ev-list{overflow-y:auto; padding:10px 12px 4px; -webkit-overflow-scrolling:touch;}
.ev-item{
  display:flex; gap:11px; align-items:center; padding:9px 11px; margin-bottom:7px;
  background:rgba(16,22,38,.72); border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:10px;
}
.ev-item.bad{border-left-color:#c9484f;}
.ev-item.good{border-left-color:#6fe08a;}
.ev-item.plain{border-left-color:rgba(127,216,255,.45);}
.ev-ico{flex:0 0 auto; display:flex; align-items:center;}
.ev-text{flex:1; min-width:0; font-size:12.5px; line-height:1.45; color:var(--text);}

.ev-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 14px 12px; border-top:1px solid rgba(255,255,255,.06);
}
.ev-hint{font-size:10.5px; color:var(--text-faint);}
/* Скромная ссылка вместо кнопки во всю ширину */
.ev-link{
  background:none; border:none; padding:4px 2px; font-size:11px; font-weight:700;
  color:var(--text-dim); border-bottom:1px dashed rgba(255,255,255,.25); line-height:1.2;
}
.ev-link.on{color:var(--gold); border-bottom-color:rgba(201,162,39,.5);}


/* Вкладки панели колонии: обзор, жители, стройка */
.col-tabs{margin:2px 0 14px;}
.col-tabs button{position:relative; letter-spacing:.08em;}
/* Флагман расы на экране новой партии: живая модель над описанием. */
.rd-ship{display:flex; justify-content:center; margin:-2px 0 6px;}
.rd-ship canvas{width:min(288px, 100%); height:auto; filter:drop-shadow(0 0 14px rgba(120,180,255,.25));}
/* ПЛИТКИ. Разделы панели колонии («МИР / СТРОЙКА») и разделы стройки —
   крупные плитки со значком, названием и числом: одна форма для обоих рядов,
   чтобы читалось как одно целое. Сами постройки остаются карточками в столбик. */
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:8px;}
.seg.tiles, .ctabs.tiles{border:none; border-radius:0; overflow:visible;}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:72px; padding:8px 6px; border-radius:12px; background:var(--bg-panel2);
  border:1px solid var(--line); color:var(--text-dim); font-size:11px; font-weight:800; letter-spacing:.03em;
  line-height:1.2; text-align:center; position:relative; transition:border-color .15s ease, background .15s ease;}
.tile .tile-ico{height:28px; display:flex; align-items:center; justify-content:center; opacity:.8;}
.tile .tile-ico img, .tile .tile-ico canvas, .tile .tile-ico svg{max-height:28px;}
.tile .tile-name{display:flex; align-items:center; gap:4px;}
.tile .tile-count{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); min-height:12px;}
.tile.sel{background:linear-gradient(180deg, rgba(43,127,212,.42), rgba(43,127,212,.22)); border-color:rgba(127,216,255,.6);
  color:#eafcff; box-shadow:0 0 0 1px rgba(127,216,255,.18), 0 6px 16px rgba(0,0,0,.25);}
.tile.sel .tile-ico{opacity:1; filter:drop-shadow(0 0 6px rgba(79,208,255,.55));}
.tile.sel .tile-count{color:var(--blue);}
.seg:has(> .tile){display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:8px;
  border:none; border-radius:0; overflow:visible; background:none;}
.seg > .tile{border-right:1px solid var(--line);}
.seg > .tile.sel{border-color:rgba(127,216,255,.6);}
.ct-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-left:5px; vertical-align:middle;
  box-shadow:0 0 6px rgba(201,162,39,.8);
}


/* ---------- КАРТОЧКА ЗВЕЗДЫ ---------- */
/* Показатели колонии плитками: раньше это был столбец одинаковых строк, где
   население, мораль и оборона выглядели одинаково важными и читались подряд. */
/* Плитки показателей: сетка вместо ряда. Четыре плитки в ряд на узкой карточке
   сжимались так, что «6/12» переносилось на две строки; теперь их столько,
   сколько влезает без давки, и все одной ширины. */
.st-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr)); gap:6px; margin:8px 0 4px;}   /* четыре плитки в ряд и на телефоне: с 78px «Оборона» падала одна во второй ряд */
.stt{
  flex:1; min-width:0; text-align:center; padding:7px 4px 8px;
  background:rgba(10,16,30,.55); border:1px solid var(--line); border-radius:9px;
}
.stt-k{font-size:8.5px; letter-spacing:.1em; color:var(--text-faint); font-weight:800;}
.stt-v{font-size:17px; font-weight:800; color:var(--text); line-height:1.15; margin-top:1px;
  font-variant-numeric:tabular-nums;}
.stt-v span{font-size:10px; font-weight:600; color:var(--text-faint);}

.st-warn{font-size:11px; color:var(--red); margin-top:5px;}
.st-est{font-size:10.5px; color:var(--text-faint); margin-top:4px;}
/* Строки сведений: недра, особенность, стройка, здания, флот. Прежде часть из
   них шла классом .stat-row, часть .st-line — отступы и размер шрифта у них
   разные, и список выглядел собранным из кусков. Теперь строка одна на всех, с
   тонкими разделителями: глазу есть за что зацепиться при беглом чтении. */
.st-line{display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:12px; color:var(--text-dim); padding:6px 2px;
  border-bottom:1px solid rgba(127,216,255,.07);}
.st-line:last-child{border-bottom:none;}
.st-line b{color:var(--text); font-weight:700; font-family:var(--font-mono); font-size:12px;}


/* Кнопок приближения на карте больше нет: их дело делают колесо, щипок двумя
   пальцами и двойное нажатие — все три проверены. Клавиши приближения остались
   и зовут приблизитьОтСередины() напрямую. */


/* ============================================================================
   НАСТОЛЬНЫЙ ВИД. Игра рисовалась под палец на телефоне: кнопки в 44 пикселя,
   мелкие значки, узкие панели. На мониторе в 2560 всё это терялось — верхняя
   строка в полтора сантиметра, карточка вестей размером с почтовую марку.
   Здесь интерфейс подрастает под большой экран, а карта остаётся во весь размах.
   ============================================================================ */
@media (min-width:1100px){
  /* Верхняя строка: крупнее шрифт и отступы */
  #topbar{padding:10px 22px; font-size:15px; min-height:62px;}
  #topbar .tb-item{font-size:15px; gap:7px;}
  #topbar img, #topbar .tb-icon{width:22px; height:22px;}
  #tb-turnnum{font-size:17px;}
  #btn-menu{width:46px; height:46px; font-size:22px;}

  /* Нижняя навигация лежит в потоке страницы, а не позиционируется — сдвигать её
     через left/transform нельзя, панель уезжала за край экрана. Вместо этого
     собираем содержимое к центру, а сама полоса остаётся во всю ширину. */
  #bottomnav{
    justify-content:center; gap:14px;
    padding:6px 0 calc(6px + var(--safe-bottom, 0px));
  }
  #bottomnav .nav-btn{flex:0 0 auto; min-width:130px; font-size:12.5px;}
  #bottomnav .nav-btn img{width:30px; height:30px;}
  /* Кегль подписи задаём ЕЙ САМОЙ. Правило .nav-btn .nt перебивает наследование
     от кнопки, и без этой строки подписи оставались 9,5 точки под значками в
     тридцать — замер показал это на всех экранах шире 1100. */
  #bottomnav .nav-btn .nt{font-size:12px;}

  /* Окна и карточки — просторнее */
  #panel{max-width:760px; margin:0 auto; border-radius:18px 18px 0 0;}
  .panel-body{padding:16px 22px calc(26px + var(--safe-bottom, 0px)); font-size:14px;}
  .panel-head h2, #panel-title{font-size:20px;}
  .star-tooltip{max-width:520px; font-size:14px;}
  .overlay-card{max-width:640px; font-size:14.5px;}
  .ev-card{max-width:680px;}
  .ev-text{font-size:14px;}

  /* Кнопки приближения и хода — под мышь, но заметные */
  /* Размер задаём САМОЙ КНОПКЕ, а не контейнеру: #endturn-fab — это столбик из
     переключателя скорости и круглой кнопки, и заданная ему высота сплющивала
     кнопку с 67 до 54 пикселей. Круг превращался в овал, а тень вокруг читалась
     как чёрное кольцо. */
  #btn-autoplay{width:76px; height:76px;}
  #btn-autoplay .et-icon{width:26px; height:26px;}
  #galactic-bar{right:18px; top:74px;}
  .gal-chip{font-size:13px; padding:7px 12px;}

  /* Подсказки и всплывающие окна */
  .hint-bubble{max-width:280px; font-size:13.5px;}
  #toast{font-size:14px; padding:12px 20px;}
}

/* Очень широкие мониторы: ещё на ступень крупнее, иначе интерфейс тонет */
@media (min-width:1800px){
  #topbar{font-size:17px; min-height:70px; padding:12px 30px;}
  #topbar .tb-item{font-size:17px;}
  #topbar img, #topbar .tb-icon{width:26px; height:26px;}
  #bottomnav{gap:22px;}
  #bottomnav .nav-btn{min-width:160px; font-size:14px;}
  #bottomnav .nav-btn img{width:36px; height:36px;}
  #bottomnav .nav-btn .nt{font-size:13.5px;}
  #panel{max-width:900px;}
  .panel-body{font-size:15px;}
  .star-tooltip{max-width:600px; font-size:15px;}
  .overlay-card, .ev-card{max-width:760px;}
  #btn-autoplay{width:88px; height:88px;}
  #btn-autoplay .et-icon{width:30px; height:30px;}
}


/* Игрок решил не отступать от выреза камеры: безопасная зона сверху — ноль.
   Переопределяем на body, чтобы перебить :root для всего, что внутри. */
body.no-safe-top{ --safe-top:0px; }

/* ---------- ВИД УСТРОЙСТВА ----------
   Класс на теле страницы ставит applySettings по настройке «устройство».
   Разница между телефоном и компьютером не в красоте, а в том, ЧЕМ по игре
   попадают: пальцем или остриём указателя. Палец промахивается по цели мельче
   сорока четырёх точек, а мышь бьёт и в двадцать. */
body.dev-touch #btn-menu{min-width:44px; min-height:44px;}
body.dev-touch #bottomnav .nav-btn{padding:10px 2px 9px; min-height:52px;}
body.dev-touch .nav-btn .nt{font-size:10.5px;}
/* Тумблер под палец: 56×32, ползунок 26 и сдвиг под новую ширину — иначе он
   висит не по центру. */
body.dev-touch .set-switch{width:56px; height:32px;}
body.dev-touch .set-switch i{width:26px; height:26px; top:2px; left:3px;}
body.dev-touch .set-switch.on i{transform:translateX(23px);}
body.dev-touch .btn.small{min-height:38px;}
/* Переключатель скорости стоит вплотную над кнопкой хода и был высотой в 26
   точек. Промах по нему — это нажатие на «ход года», то есть лишний прожитый
   год. Такой промах дороже прочих, поэтому таблетку растим до нормы. */
body.dev-touch #btn-speed{min-height:44px; padding:6px 16px; font-size:13px; border-radius:14px;}
body.dev-touch .key-btn{min-height:38px;}
/* Остальные мелкие цели, найденные обходом экранов в телефонном окне
   (tools/obhod-ekranov-telefon.js): всё, что было 30–38 точек, растёт до 40–44.
   Крестики окон и осмотра, кнопки боя, музыка в меню, отступ «все разделы»,
   таблетки настроек, партия в торговле, счётчик состава, «взять» у флота. */
body.dev-touch .panel-close{width:44px; height:44px; top:0; right:0;}
body.dev-touch .set-seg button{min-height:40px; min-width:44px; padding:8px 12px;}
body.dev-touch .set-back{min-height:44px; padding:10px 16px 10px 12px;}
body.dev-touch .take-btn{min-width:40px; min-height:40px;}
body.dev-touch .sv-close{width:44px; height:44px;}
body.dev-touch #sv-spin{min-width:44px; min-height:44px;}
body.dev-touch .bf-toggle{width:40px; height:40px;}
body.dev-touch .ev-link{min-height:40px; padding:8px 6px;}
body.dev-touch #battle-skip, body.dev-touch #battle-pause{min-height:44px; padding:9px 14px; font-size:12px;}
body.dev-touch #btn-music-toggle{width:44px !important; height:44px !important;}
body.dev-touch .tb-lot .lot{min-width:44px; min-height:40px;}
body.dev-touch .count-ctl button{width:40px; height:40px;}
body.dev-touch .tpl-chip{min-height:44px;}
body.dev-touch .btn.small{min-height:40px;}
body.dev-touch .prio-btn{min-height:40px;}
/* На сенсорном устройстве кнопки «Назад» на страницах (настройки, справка,
   зал славы, новая партия) не нужны: назад ведёт жест от края или системная
   кнопка (закрытьПоНазад). Сами кнопки остаются в разметке — по ним же
   программно «нажимает» закрытие по жесту. */
body.dev-touch #btn-page-back, body.dev-touch #btn-setup-back{display:none;}
/* Показатели шапки — кнопки, под палец не ниже сорока точек. */
body.dev-touch .tb-item{min-height:40px; min-width:40px; padding:6px 6px; justify-content:center;}
/* Четыре фильтра флота в строку на телефоне не влезают и уезжали вбок вместе
   с полоской прокрутки; сеткой два на два они все на виду. */
body.dev-phone #fleet-filters{flex-wrap:wrap; overflow-x:visible; -webkit-mask-image:none; mask-image:none;}
body.dev-phone #fleet-filters .pick-chip{flex:1 1 40%; min-width:0;}

/* Планшет — тот же палец, но экрана вдоволь: подписи и окна крупнее телефонных. */
body.dev-tablet .nav-btn .nt{font-size:11.5px;}
body.dev-tablet #panel{max-width:720px; margin:0 auto;}
body.dev-tablet .star-tooltip{max-width:520px;}

/* Компьютер: указатель точный, можно плотнее, зато подсказки под мышью нужны. */

/* ---------- НАСТРОЙКИ: то, чем управляет оформление ---------- */
:root{ --ui-scale:1; --text-scale:1; }

/* Масштаб интерфейса: панели, кнопки и текст растут вместе */
#topbar, #bottomnav, #panel, .star-tooltip, .overlay-card, #galactic-bar{
  font-size:calc(1em * var(--text-scale));
}
body{ zoom:var(--ui-scale); }        /* самый надёжный способ для браузерной игры */

/* Свечение выключено — гасим ореолы и подсветку, кадр считается быстрее */
body.no-glow .sths-glow,
body.no-glow .load-bar i{ box-shadow:none; }

/* Движение фона выключено — туманности стоят на месте */
body.no-bg-anim #cosmic-bg,
body.no-bg-anim .ld-neb,
body.no-bg-anim .ld-dust{ animation:none !important; }

/* Подсказки скрыты */
body.no-hints .hint-bubble{ display:none !important; }

/* Счётчик кадров */
#fps-meter{
  position:absolute; left:10px; top:calc(10px + var(--safe-top, 0px));
  font-family:var(--font-mono); font-size:11px; color:#8fe0a0;
  background:rgba(6,10,20,.6); border:1px solid rgba(143,224,160,.25);
  border-radius:8px; padding:3px 8px; z-index:12; pointer-events:none;
  display:none;
}
body.show-fps #fps-meter{ display:block; }

/* Ползунки в настройках */




.set-seg{display:flex; gap:5px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end;}
.set-seg button{padding:6px 11px; font-size:11.5px; border-radius:8px;
  border:1px solid var(--line); background:rgba(10,16,30,.6); color:var(--text-dim);}
.set-seg button.sel{background:var(--blue-dim); color:#eafcff; border-color:transparent;}
/* Три набора в ряд: «СБАЛАНСИРОВАННЫЙ» — длинное слово, поэтому разрешаем перенос
   и делаем шрифт мельче, иначе третья кнопка вылезала за край экрана. */
.preset-row{display:flex; gap:7px; margin-bottom:12px;}
.preset-row button{flex:1 1 0; min-width:0; padding:10px 4px; border-radius:12px;
  font-size:10.5px; font-weight:700; line-height:1.25; white-space:normal; word-break:break-word;
  border:1px solid var(--line); background:rgba(12,18,34,.7); color:var(--text-dim);}
.preset-row button.sel{background:var(--blue-dim); color:#eafcff; border-color:transparent;}


/* Кнопка назначения клавиши */
.key-btn{
  min-width:88px; padding:7px 12px; border-radius:9px;
  border:1px solid var(--line); background:rgba(10,16,30,.65);
  color:var(--text); font-family:var(--font-mono); font-size:12px; font-weight:700;
}
.key-btn.wait{border-color:var(--gold); color:var(--gold); background:rgba(60,46,10,.5);}


/* ============================================================================
   НАСТРОЙКИ: вкладки вместо одного длинного свитка
   Раньше восемь разделов шли подряд, и до звука надо было прокрутить всю
   графику. Теперь шесть вкладок, внутри каждой — сгруппированные карточки.
   ============================================================================ */
.set-tabs{
  display:flex; gap:6px; overflow-x:auto; padding:2px 0 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.set-tabs::-webkit-scrollbar{display:none;}
.set-tabs button{
  flex:0 0 auto; padding:9px 16px; border-radius:11px; font-size:12.5px; font-weight:700;
  border:1px solid var(--line); background:rgba(12,18,34,.65); color:var(--text-dim);
  white-space:nowrap;
}
.set-tabs button.sel{
  background:linear-gradient(180deg, rgba(43,127,212,.9), rgba(28,86,148,.9));
  color:#eafcff; border-color:transparent;
  box-shadow:0 3px 12px rgba(43,127,212,.28);
}

.set-group{
  background:rgba(12,18,32,.6); border:1px solid var(--line);
  border-radius:14px; padding:12px 13px 6px; margin-bottom:11px;
}
.set-group-title{
  font-size:10.5px; letter-spacing:.14em; font-weight:800;
  color:var(--blue); margin-bottom:9px;
}
.set-note{font-size:11.5px; color:var(--text-dim); margin-bottom:9px; line-height:1.4;}

/* На узком экране кнопки выбора наезжали на подписи — их четыре, и в одну строку
   с текстом они не помещались. Теперь строка переносится: название сверху,
   переключатели под ним. На широком всё остаётся в одну линию. */
.set-row{
  display:flex; align-items:center; gap:10px; padding:10px 2px;
  border-bottom:1px solid rgba(255,255,255,.045);
  flex-wrap:wrap;
}
.set-row .set-name{flex:1 1 100%;}
.set-row .set-seg, .set-row .set-slide{margin-left:auto;}
@media (min-width:520px){
  .set-row{flex-wrap:nowrap;}
  .set-row .set-name{flex:1 1 auto;}
}
/* Тумблеры и одиночные кнопки всегда рядом с названием — они узкие и помещаются */
.set-row.toggle{flex-wrap:nowrap;}
.set-row.toggle .set-name{flex:1 1 auto;}
.set-group .set-row:last-of-type{border-bottom:none;}
.set-name{flex:1; min-width:0; font-size:13px; color:var(--text); line-height:1.3;}
.set-hint{display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; line-height:1.35;}

.set-slide{display:flex; align-items:center; gap:9px; flex:0 0 auto;}
.set-slide input[type=range]{flex:0 0 118px;}
.set-val{font-family:var(--font-mono); font-size:12px; color:var(--blue); min-width:46px; text-align:right;}

/* Переключатель-тумблер вместо кнопки ВКЛ/ВЫКЛ */
.set-switch{
  flex:0 0 auto; width:46px; height:26px; border-radius:20px; position:relative;
  border:1px solid var(--line); background:rgba(8,12,24,.75); padding:0;
  transition:background .18s ease, border-color .18s ease;
}
.set-switch i{
  position:absolute; left:3px; top:2px; width:20px; height:20px; border-radius:50%;
  background:#7d8ba5; transition:transform .18s cubic-bezier(.3,.9,.4,1.2), background .18s ease;
}
.set-switch.on{background:rgba(43,127,212,.55); border-color:rgba(127,216,255,.5);}
.set-switch.on i{transform:translateX(20px); background:#eafcff;}

/* Быстрые наборы: подпись под названием */
.preset-row{display:flex; gap:7px; margin-bottom:10px;}
.preset-row button{
  flex:1 1 0; min-width:0; padding:11px 6px; border-radius:12px;
  border:1px solid var(--line); background:rgba(12,18,34,.7); color:var(--text-dim);
  display:flex; flex-direction:column; gap:3px; line-height:1.2;
}
.preset-row button b{font-size:10.5px; font-weight:800; letter-spacing:.02em; hyphens:auto;}
.preset-row button span{font-size:9.5px; color:var(--text-faint);}
.preset-row button.sel{
  background:linear-gradient(180deg, rgba(43,127,212,.85), rgba(28,86,148,.85));
  color:#eafcff; border-color:transparent;
}
.preset-row button.sel span{color:rgba(234,252,255,.75);}

/* ---------- ПЛЁНОЧНЫЕ ЭФФЕКТЫ ---------- */
#stage-fx{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  opacity:0; transition:opacity .2s ease;
}
#stage-fx.on{opacity:1;}
#stage-fx .fx-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.85) 100%);
}
#stage-fx .fx-grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainMove .5s steps(3) infinite;
}
@keyframes grainMove{
  0%{transform:translate(0,0);} 33%{transform:translate(-3%,2%);} 66%{transform:translate(2%,-3%);} 100%{transform:translate(0,0);}
}


/* ---------- НАСТРОЙКИ: список разделов ---------- */
.set-menu{display:flex; flex-direction:column; gap:9px;}
.set-menu-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:15px 15px; border-radius:14px;
  border:1px solid var(--line); background:rgba(14,20,36,.72);
  transition:border-color .16s ease, background .16s ease, transform .1s ease;
}
.set-menu-item:active{transform:scale(.99); background:rgba(24,36,62,.85);}
.smi-text{flex:1; min-width:0;}
.smi-name{font-size:15px; font-weight:700; color:var(--text); line-height:1.2;}
.smi-hint{font-size:11px; color:var(--text-faint); margin-top:3px; line-height:1.35;}
.smi-go{font-size:22px; color:var(--text-faint); line-height:1;}

/* Кнопка возврата к списку */
.set-back{
  display:inline-flex; align-items:center; gap:5px; margin-bottom:10px;
  padding:8px 14px 8px 10px; border-radius:11px; font-size:12.5px; font-weight:700;
  border:1px solid var(--line); background:rgba(12,18,34,.7); color:var(--blue);
}
.set-section-name{
  font-size:19px; font-weight:800; color:var(--text);
  margin:0 0 12px 2px; letter-spacing:.02em;
}

/* Сноска о скрытых разделах: почему их не видно на этом устройстве */
.set-devnote{
  margin-top:12px; padding:10px 13px; border-radius:11px;
  background:rgba(10,16,30,.55); border:1px solid var(--line);
  font-size:11px; color:var(--text-faint); line-height:1.45;
}


/* ---- ОКНО ОСМОТРА КОРАБЛЯ -------------------------------------------------
   Поверх всего, с затемнением: корабль занимает всю доступную высоту, а
   характеристики лежат снизу и не отнимают у него места. */
#ship-viewer{position:fixed; inset:0; z-index:120; display:flex;
  align-items:center; justify-content:center; padding:14px;
  background:rgba(4,8,16,.82); backdrop-filter:blur(3px);}
#ship-viewer.hidden{display:none;}
.sv-box{width:min(560px, 100%); max-height:100%; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0e1728,#0a1120);
  border:1px solid #22375c; border-radius:16px; overflow:hidden;}
.sv-head{display:flex; align-items:flex-start; gap:10px; padding:12px 14px 8px;}
.sv-title{font-size:16px; font-weight:800; letter-spacing:.06em; color:#cfe4ff;}
.sv-parts{font-size:11px; color:#7f8ca8; margin-top:3px; line-height:1.45;}
.sv-close{margin-left:auto; background:none; border:1px solid #2a3f66; color:#8fa3c4;
  border-radius:8px; width:32px; height:32px; font-size:15px; cursor:pointer; flex:none;}
.sv-close:hover{border-color:#3d5c8f; color:#cfe4ff;}
.sv-stage{flex:1; min-height:220px; display:flex; align-items:center; justify-content:center;
  padding:4px 10px;}
#sv-canvas{touch-action:none; cursor:grab;}
#sv-canvas:active{cursor:grabbing;}
.sv-stats{display:flex; flex-wrap:wrap; gap:6px; padding:6px 14px 2px;}
.sv-stats span{font-size:11px; color:#9fb4d4; background:rgba(40,60,95,.5);
  border-radius:6px; padding:3px 8px;}
.sv-foot{display:flex; align-items:center; gap:10px; padding:8px 14px 12px;}
.sv-hint{font-size:11px; color:#6b7a96;}


/* ---- ОСМОТР КОРАБЛЯ В БОЮ -------------------------------------------------
   Поле не трогаем вовсе: остальные корабли видны как обычно, а осмотренный
   просто рисуется поверх. Слой не ловит нажатия — можно сразу ткнуть в другой
   корабль, и откроется он. */
.battle-inspect{position:absolute; inset:0; z-index:40; display:flex;
  align-items:center; justify-content:center; pointer-events:none;}
.bi-canvas, .bi-close, .bi-card{pointer-events:auto;}
.bi-canvas{touch-action:none; cursor:grab;}
.bi-canvas:active{cursor:grabbing;}
.bi-card{position:absolute; left:10px; bottom:10px; display:flex; flex-direction:column; gap:2px;
  background:rgba(8,14,26,.86); border:1px solid #263c62; border-radius:10px;
  padding:8px 11px; font-size:11px; color:#9fb4d4; letter-spacing:.04em;}
.bi-card b{color:#cfe4ff; font-size:12px; letter-spacing:.08em;}
.bi-close{position:absolute; right:10px; top:10px; width:30px; height:30px;
  background:rgba(8,14,26,.86); border:1px solid #2a3f66; color:#8fa3c4;
  border-radius:8px; font-size:14px; cursor:pointer;}
.bi-close:hover{border-color:#3d5c8f; color:#cfe4ff;}


/* Запертый чертёж: виден, но не нажимается — по нему нельзя строить, пока
   корпус не изучен. */
.card.bp-locked{opacity:.72; cursor:default; border-style:dashed;}


/* ---- ОТБОР В ВЕРФИ --------------------------------------------------------
   Одна строка вместо двух рядов крупных кнопок: раньше одиннадцать квадратов
   занимали 13% высоты окна и выглядели стеной. */
.yard-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.ytool{display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.06em;
  color:var(--text-faint); text-transform:uppercase;}
.ytool select{
  background:var(--bg-panel2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:6px 26px 6px 9px; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; min-height:34px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  /* своя стрелка: родная у каждого браузера разная и часто не в тон */
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),
                   linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.ytool select:focus{outline:none; border-color:var(--blue);}
.ytool-count{margin-left:auto; font-size:10px; color:var(--text-faint); letter-spacing:.06em;}


/* Живая база у кнопки стройки: крутится сама, нажимается для осмотра. */
.build-station{
  width:48px; height:48px; flex:none; cursor:pointer; border-radius:10px;
  background:rgba(20,30,52,.5); border:1px solid var(--line-soft);
  transition:border-color .15s ease, transform .15s ease;
}
.build-station:hover{ border-color:var(--blue); transform:scale(1.06); }


/* Живая база над меню построек: крупный квадрат, вращается сам, нажатие
   открывает осмотр вблизи. Стоит поверх вкладок — она не здание и не корабль. */
.station-hero{position:relative; margin-bottom:14px; border-radius:14px;
  border:1px solid var(--line); overflow:hidden; cursor:pointer;
  background:radial-gradient(ellipse at 50% 40%, rgba(60,90,150,.22), rgba(6,10,20,.55) 70%);
  /* Ширина во всю панель, высота — постоянная. Сперва я задал соотношение
     сторон 1:1, и квадрат сжался по высоте, прижавшись к левому краю: при
     aspect-ratio ширина считается от высоты, а не наоборот. */
  width:100%; height:220px; display:flex; align-items:center; justify-content:center;}
.station-hero:hover{border-color:var(--blue);}
.station-hero-canvas{width:100%; height:100%; object-fit:contain; display:block;}
.station-hero-cap{position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background:linear-gradient(180deg, transparent, rgba(4,8,16,.85));}
.station-hero-name{font-size:13px; font-weight:800; letter-spacing:.08em; color:#cfe4ff;}
.station-hero-sub{font-size:11px; color:var(--text-faint); margin-top:2px;}




/* Орбитальная база в шапке колонии: живой значок справа от сведений о мире.
   Размер подобран под высоту шапки — станция не должна её распирать. */
.colony-hero-station{width:64px; height:64px; flex-shrink:0; position:relative;
  border-radius:12px; border:1px solid var(--line); background:rgba(8,13,22,.6);
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.colony-hero-station:hover{border-color:rgba(120,170,255,.45);}
.colony-station-cv{width:100%; height:100%; display:block;}


/* Описание орбитальной базы под классом системы: помельче и приглушённее
   остальных строк шапки — это пояснение, а не показатель. */
.colony-hero-base{font-size:11px; line-height:1.35; color:var(--text-faint);
  margin-top:5px; max-width:46ch;}


/* ---------------------------------------------------------------------------
   ОСМОТР ФЛОТА — во весь экран, как бой. Ни коробки, ни рамок, ни списка:
   строй кораблей на чёрном, вид сверху. Нажатие по кораблю показывает карточку
   с его данными рядом с ним. */
#fleet-viewer{position:fixed; inset:0; z-index:60; background:#04060d;
  display:flex; flex-direction:column;}
#fleet-viewer.hidden{display:none;}
#fleet-viewer .fv-head{display:flex; justify-content:space-between;
  align-items:flex-start; padding:calc(10px + var(--safe-top)) 16px 6px;
  pointer-events:none;}
#fleet-viewer .fv-title{font-size:20px; font-weight:800; letter-spacing:.03em;}
#fleet-viewer .fv-sub{font-size:11.5px; color:var(--text-dim); margin-top:2px;
  letter-spacing:.06em; text-transform:uppercase;}
#fleet-viewer .fv-close{pointer-events:auto; width:38px; height:38px;
  border-radius:10px; background:rgba(12,18,34,.85); border:1px solid var(--line);
  color:var(--text-dim); font-size:16px;}
#fv-canvas{flex:1; width:100%; min-height:0; display:block; touch-action:none;}
.fv-card{position:absolute; padding:9px 12px; border-radius:10px;
  background:rgba(8,13,24,.92); border:1px solid var(--line);
  font-size:12px; line-height:1.5; pointer-events:none; min-width:150px;}
.fv-card.hidden{display:none;}
.fv-card b{display:block; font-size:13px; margin-bottom:3px;}
.fv-card span{color:var(--text-dim); font-family:var(--font-mono); font-size:11px;}
.fv-hint{position:absolute; left:16px; bottom:calc(12px + var(--safe-bottom));
  font-size:11px; color:var(--text-faint); pointer-events:none;}


/* Список кораблей поверх сцены слева: не отдельная колонка, а полупрозрачная
   полоса — сцена должна занимать весь экран, список лишь лежит на ней. */
#fleet-viewer .fv-list{position:absolute; left:12px; top:calc(64px + var(--safe-top));
  bottom:calc(40px + var(--safe-bottom)); width:190px; overflow-y:auto;
  display:flex; flex-direction:column; gap:5px; z-index:2;}
#fleet-viewer .fv-item{display:flex; gap:8px; align-items:center; padding:6px 9px;
  border:1px solid rgba(255,255,255,.08); border-radius:8px; cursor:pointer;
  background:rgba(8,13,24,.72); font-size:11.5px;}
#fleet-viewer .fv-item.sel{border-color:var(--accent); background:rgba(30,60,110,.6);}
#fleet-viewer .fv-item .fv-nm{flex:1; min-width:0; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#fleet-viewer .fv-item .fv-hp{font-family:var(--font-mono); font-size:10px;}
@media (max-width: 620px){
  #fleet-viewer .fv-list{width:140px;}
}


/* Сворачиваемый список. На телефоне он занимал треть экрана и мешал смотреть
   строй, поэтому по умолчанию там свёрнут — открывается кнопкой. */
#fleet-viewer .fv-toggle{position:absolute; left:12px;
  top:calc(64px + var(--safe-top)); z-index:3;
  width:38px; height:38px; border-radius:10px; font-size:15px;
  background:rgba(12,18,34,.85); border:1px solid var(--line); color:var(--text-dim);}
#fleet-viewer .fv-toggle.on{color:var(--accent); border-color:rgba(120,170,255,.5);}
#fleet-viewer .fv-list{top:calc(110px + var(--safe-top)); transition:opacity .18s ease;}
#fleet-viewer .fv-list.hidden{display:none;}


/* ---------------------------------------------------------------------------
   СПИСКИ ФЛОТОВ в бою: слева нападающий, справа обороняющийся. Лежат поверх
   поля, полупрозрачные, сворачиваются кнопкой — на телефоне свёрнуты сразу. */
/* Список начинается НИЖЕ кнопки: прежде кнопка ☰ ложилась поверх первой
   строки и закрывала имя корабля. */
.bf-list{position:absolute; top:48px; bottom:10px; width:150px; z-index:4;
  overflow-y:auto; display:flex; flex-direction:column; gap:4px;
  pointer-events:auto;}
.bf-list.left{left:10px;}
.bf-list.right{right:10px;}
.bf-list.hidden{display:none;}
.bf-item{display:flex; gap:6px; align-items:center; padding:4px 7px;
  border:1px solid rgba(255,255,255,.08); border-radius:7px;
  background:rgba(8,13,24,.74); font-size:10.5px; line-height:1.2;}
.bf-item.dead{opacity:.35;}
.bf-item .bf-nm{flex:1; min-width:0; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bf-item .bf-hp{font-family:var(--font-mono); font-size:9.5px;}
.bf-toggle{position:absolute; top:10px; z-index:5; width:32px; height:32px;
  border-radius:8px; font-size:13px; background:rgba(12,18,34,.85);
  border:1px solid var(--line); color:var(--text-dim);}
.bf-toggle.left{left:10px;}
.bf-toggle.right{right:10px;}
.bf-toggle.on{color:var(--accent); border-color:rgba(120,170,255,.5);}
@media (max-width: 620px){ .bf-list{width:112px;} }


/* НЕПРЕРЫВНЫЙ ЛУЧ. В отличие от вспышки на 0,45 с, этот держится всё время,
   пока цель жива, и лишь слегка пульсирует — чтобы читался как живая струя,
   а не как приклеенная полоска. */
.shot-beam.beam-live{
  animation:beamAlive 1.1s ease-in-out infinite;
}
@keyframes beamAlive{
  0%,100% { opacity:.92; transform:scaleY(1); }
  50%     { opacity:1;   transform:scaleY(1.35); }
}
/* Гаснет, когда цель рассыпалась. */
.shot-beam.beam-off{ animation:beamDie .22s ease-out forwards; }
@keyframes beamDie{
  0%   { opacity:1; transform:scaleY(1); }
  100% { opacity:0; transform:scaleY(.15); }
}

/* Перенос сохранений файлом: две кнопки под списком ячеек. */
.save-transfer{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.save-transfer .save-hint{flex-basis:100%; font-size:11.5px; color:var(--text-faint); line-height:1.45;}

/* Подзаголовок внутри раздела: «Здания колонии (3)» под общим заголовком
   «ДЕЛА КОЛОНИИ». Тише главного заголовка — это часть того же раздела, а не
   новый раздел. */
.col-sub-title{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); font-weight:800; margin:10px 0 6px;
}

/* Ставки налога на телефоне: семь плашек шли рядом 5+2 — теперь ровной сеткой 4+3. */
body.dev-touch .tax-presets{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; overflow:visible; mask-image:none; -webkit-mask-image:none;}
body.dev-touch .tax-presets .pick-chip{min-width:0; text-align:center;}

/* Телефон лёжа (высота до 520px): меню целиком не влезало, заголовок уходил за
   верх экрана, а прокрутки не было. Кнопки идут в два столбца, подпись внизу
   спрятана, и на всякий случай экран прокручивается. */
@media (max-height:520px){
  #screen-menu{align-items:flex-start; overflow-y:auto;}
  .menu-card{margin:auto;}
  .logo{font-size:12px; margin-bottom:2px;}
  .logo-main{font-size:26px;}
  .logo-sub{font-size:11px;}
  .menu-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 12px; margin-top:8px;}
  .menu-btns .btn{margin:0;}
  .menu-foot{display:none;}
  .menu-version{margin-top:8px;}
}
/* Самый узкий телефон (320px): шесть вкладок «Летописи державы» в один ряд не
   входят — слово «НАСЕЛЕНИЕ» не переносится. Пусть ряд переносится. */
@media (max-width:340px){
  .seg:not(.scrollable){flex-wrap:wrap;}
  .seg:not(.scrollable) button{flex:1 1 30%; border-bottom:1px solid var(--line);}
}
/* На самом узком телефоне «ДОЛГАЯ КАМПАНИЯ» в плашке быстрого выбора резалась
   многоточием — пусть переносится на две строки. */
@media (max-width:340px){
  .tpl-chip{white-space:normal; line-height:1.2; font-size:11px;}
}

/* Окошко «Партия начнётся так» перед стартом: сводка и две кнопки. */
.brief-card{max-width:460px; text-align:left; border-color:color-mix(in srgb, var(--раса) 40%, var(--line));
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--раса) 14%, transparent), transparent 70%),
    var(--bg-panel);}
.brief-btns{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.bf-head{display:flex; align-items:center; gap:12px;}
.bf-emblem{width:52px; height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--раса); border-radius:14px; border:1px solid color-mix(in srgb, var(--раса) 50%, transparent);
  background:color-mix(in srgb, var(--раса) 12%, transparent); text-shadow:0 0 16px var(--раса);}
.bf-who{min-width:0;}
.bf-name{font-size:20px; font-weight:800; letter-spacing:.04em; color:var(--раса); line-height:1.1;}
.bf-spec{font-size:10.5px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase; margin-top:3px;}
.bf-title{font-size:10px; letter-spacing:.2em; color:var(--blue); font-weight:800; margin:14px 0 6px;}
.bf-line{font-size:13.5px; line-height:1.55; color:var(--text-dim);}
.bf-line b{color:var(--text);}
.bf-rivals{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.bf-rival{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--ц);
  padding:5px 9px; border-radius:9px; border:1px solid color-mix(in srgb, var(--ц) 40%, transparent);
  background:color-mix(in srgb, var(--ц) 10%, transparent);}
.bf-rival i{font-style:normal; font-size:12.5px;}
.bf-goal{margin-top:12px; padding:10px 12px; border-radius:11px;
  border-left:3px solid var(--gold); background:rgba(255,201,77,.07); font-size:13px; line-height:1.5; color:var(--text);}
.bf-goal-ic{font-size:15px; line-height:1.3;}
.brief-card .ss-chips{margin-top:12px;}
.bf-diff{margin-top:10px; padding:9px 12px; border-radius:11px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03);}
.bf-diff-t{font-size:12.5px; font-weight:800; letter-spacing:.03em;}
.bf-diff.easy .bf-diff-t{color:var(--green);}
.bf-diff.normal .bf-diff-t{color:var(--blue);}
.bf-diff.hard .bf-diff-t{color:var(--red);}
.bf-diff-n{font-size:11.5px; line-height:1.45; color:var(--text-dim); margin-top:3px;}
.bf-facts{margin-top:10px; display:grid; gap:5px;}
.bf-fact{display:flex; gap:8px; align-items:baseline; font-size:12px; line-height:1.4;}
.bf-fact span{flex:0 0 auto; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; font-size:9.5px; min-width:74px;}
.bf-fact b{color:var(--text); font-weight:600;}
.bf-fact b.плохо{color:var(--red);}

/* Предыстория расы — последняя страница загрузки новой партии. */
.prologue-card{max-width:520px; text-align:center; border-color:color-mix(in srgb, var(--раса) 45%, var(--line));}
.pr-emblem{font-size:40px; line-height:1; color:var(--раса); text-shadow:0 0 22px var(--раса);}
.pr-name{font-size:24px; font-weight:800; letter-spacing:.05em; margin-top:8px; color:var(--раса);}
.pr-sub{font-size:10.5px; letter-spacing:.16em; color:var(--text-faint); margin-top:4px; text-transform:uppercase;}
.pr-text{font-size:14px; line-height:1.62; color:var(--text-dim); text-align:left; margin:16px 0 18px;
  max-height:52vh; overflow-y:auto;}
body.dev-touch .pr-text{font-size:13.5px;}

/* История галактики: страница между запуском и меню. Текст на тёмном небе,
   абзацы проявляются по очереди, кнопка ждёт до конца или до касания. */
/* Тот же снимок и те же живые слои, что на экране запуска игры. */
/* Страница «Галактика к 2500 году». Текст раньше расплывался во всю ширину
   экрана — на ноутбуке строка тянулась на полтора метра. Теперь он в такой же
   рамке, как окна главного меню: карточка по центру снимка. */
.galaxy-intro{background:#04060e url('load-boot.jpg') center center / cover no-repeat;
  align-items:center; justify-content:center; overflow:hidden;}
.galaxy-intro .ld-sky{opacity:.45;}
.galaxy-intro .ld-neb{opacity:.30;}
.galaxy-intro .ld-dust{opacity:.55;}
/* Затемнение поверх снимка: иначе текст тонет в ярких пятнах туманности. */
.gi-veil{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, rgba(3,6,14,.72) 0%, rgba(3,6,14,.58) 45%, rgba(3,6,14,.86) 100%);}
.gi-mark{align-self:center; margin-bottom:2px; opacity:0; animation:giIn .9s ease-out .05s forwards;}
.gi-mark svg{display:block; width:76px; height:76px;}
.gi-wrap{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; gap:14px;
  width:calc(100% - 32px); max-width:520px; margin:auto;
  max-height:calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));
  padding:24px 20px 20px; border-radius:var(--win-radius);
  background:var(--win-bg); border:var(--win-border);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 0 0 1px rgba(79,208,255,.06) inset, 0 22px 60px rgba(0,0,0,.62);}
.gi-title{font-size:13px; letter-spacing:.22em; color:var(--blue); font-weight:800; text-align:center;
  opacity:0; animation:giIn .8s ease-out .1s forwards;}
/* Длинная предыстория внутри рамки прокручивается, а не растягивает окно. */
.gi-body{overflow-y:auto; min-height:0; padding-right:2px;}
.gi-body::-webkit-scrollbar{width:6px;}
.gi-body::-webkit-scrollbar-thumb{background:rgba(120,150,220,.28); border-radius:3px;}
.gi-p{font-size:14.5px; line-height:1.68; color:var(--text); margin:0 0 14px; opacity:0; text-shadow:0 1px 12px rgba(0,0,0,.75);
  animation:giIn 1.1s ease-out forwards;}
.gi-p:last-child{color:var(--text); margin-bottom:0;}
@keyframes giIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.gi-go{align-self:center; min-width:220px; opacity:0; pointer-events:none; transition:opacity .5s;}
.gi-go.видна{opacity:1; pointer-events:auto;}
body.dev-touch .gi-p{font-size:13.5px; line-height:1.6;}

/* Цель расы в предыстории — выделенной строкой под текстом. */
.pr-goal{font-size:13px; line-height:1.55; color:var(--text); text-align:left; margin:0 0 16px;
  padding:10px 12px; border-radius:10px; border-left:3px solid var(--раса); background:rgba(255,255,255,.04);}
.pr-goal b{color:var(--раса);}

/* ---- СЕТЕВАЯ ИГРА ------------------------------------------------------- */
.lobby-card{max-width:460px; text-align:left;}
.lb-title{font-size:19px; font-weight:800; letter-spacing:.04em;}
.lb-code{color:var(--gold); font-family:var(--font-mono); letter-spacing:.18em;}
.lb-sub{font-size:11px; letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase; margin-top:3px;}
.lb-field{margin-top:12px;}
.lb-field label{display:block; font-size:9.5px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase; margin-bottom:5px;}
.lb-field input{width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-panel2); color:var(--text); font-size:14px;}
.lb-field input:focus{outline:none; border-color:var(--blue);}
.lb-btns{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.lb-note{font-size:11px; line-height:1.5; color:var(--text-faint); margin-top:10px;}
.lb-note.беда{color:var(--red);}
.lb-races{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px;}
.lb-race{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:10px;
  border:1px solid var(--line-soft); background:var(--bg-panel2); color:var(--text-dim); font-size:9.5px; font-weight:700;}
.lb-race i{font-style:normal; font-size:16px; color:var(--ц);}
.lb-race.sel{border-color:var(--ц); color:var(--text); background:color-mix(in srgb, var(--ц) 14%, transparent);}

/* Полоса сети поверх игры: кто в партии, чья пауза, сколько ей осталось. */
/* Сеть в правом столбике значков (как аномалии), а не полосой поверх карты. */
.net-chip.open{height:auto; align-items:flex-start; border-radius:15px; padding:5px 4px 7px 0;}
.net-chip.open .gal-ico{height:22px; padding-top:1px;}
.net-chip .gal-full{white-space:normal; max-width:min(58vw, 260px);}
.net-chip .gal-full > span{display:block;}
.net-chip .nb-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.nb-p{color:var(--ц); font-weight:700;}
.nb-p.тихо{opacity:.45;}
.net-chip .nb-low{display:flex; align-items:center; gap:6px; margin-top:3px;}
.nb-pause{color:var(--gold); font-weight:700;}
.nb-go{color:var(--green); font-weight:800;}
.nb-btn{font-size:10px; font-weight:800; padding:3px 8px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-panel2); color:var(--text);}

/* Экран «Игра по сети»: два больших действия и список чужих игр. */
.lb-two{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px;}
.lb-big{display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 10px; border-radius:14px;
  border:1px solid var(--line); background:var(--bg-panel2); color:var(--text); text-align:center;}
.lb-big i{font-style:normal; font-size:22px; color:var(--blue); line-height:1;}
.lb-big b{font-size:13px; font-weight:800; letter-spacing:.04em;}
.lb-big span{font-size:10px; line-height:1.35; color:var(--text-faint);}
.lb-big:active{border-color:var(--blue);}
.lb-rooms-head{display:flex; align-items:center; justify-content:space-between; margin:14px 0 6px;
  font-size:9.5px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase;}
.lb-gear{border:none; background:none; color:var(--text-faint); font-size:15px; padding:2px 4px;}
.lb-rooms{display:grid; gap:6px; max-height:34vh; overflow-y:auto;}
.lb-empty{font-size:11.5px; color:var(--text-faint); padding:16px 12px; text-align:center;
  border:1px dashed var(--line-soft); border-radius:11px;}
.lb-empty.беда{color:var(--red);}
/* Белым — те, что ждут игроков; серым и без нажатия — те, что уже идут. */
.lb-room{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; text-align:left;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.05); color:var(--text);}
.lb-room.идёт{opacity:.45; background:rgba(255,255,255,.02); color:var(--text-faint);}
.lr-code{font-family:var(--font-mono); font-size:14px; font-weight:800; letter-spacing:.14em; color:var(--gold);}
.lb-room.идёт .lr-code{color:var(--text-faint);}
.lr-mid{flex:1; min-width:0; display:flex; flex-direction:column;}
.lr-mid b{font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lr-mid span{font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em;}
.lr-right{text-align:right; font-size:12.5px; font-weight:700; display:flex; flex-direction:column;}
.lr-right em{font-style:normal; font-size:9.5px; font-weight:600; color:var(--text-faint);}

/* Карточка «во что играем» — её видит гость вместо настроек. */
.lb-about{margin-top:12px; padding:10px 12px; border-radius:12px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(79,208,255,.07), rgba(255,255,255,.02));}
.la-row{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:3px 0;}
.la-row span{color:var(--text-faint); text-transform:uppercase; font-size:9.5px; letter-spacing:.1em; align-self:center;}
.la-row b{color:var(--text); font-weight:700; text-transform:uppercase; text-align:right;}
.la-goal{font-size:11.5px; line-height:1.45; color:var(--text-dim); margin:4px 0 2px;}

/* Настройки лобби у хозяина — теми же плашками, что и на экране новой игры. */
.lb-pick{display:flex; flex-wrap:wrap; gap:5px;}
.lb-chip{text-transform:uppercase; letter-spacing:.04em; padding:7px 10px; border-radius:9px; border:1px solid var(--line-soft); background:var(--bg-panel2);
  color:var(--text-dim); font-size:11px; font-weight:700;}
.lb-chip.sel{border-color:var(--blue); color:var(--text); background:rgba(79,208,255,.14);}
.lb-race.занята{opacity:.3;}
.lb-chip:disabled{opacity:.3;}

/* Экраны сети сделаны по образцу одиночной партии: баннер, плита, прокрутка. */
/* Фон у сетевых экранов такой же, как на экране новой партии: та же картинка,
   та же вуаль, те же полупрозрачные плиты. Автор: «сделай в кооперативе такой
   же фон, как в одиночном». */
/* Картинка и вуаль — двумя слоями ОДНОГО фона. Отдельным слоем поверх (::before)
   вуаль не годится: сетевые экраны прокручиваются и размывают то, что под ними,
   а такой предок отменяет position:fixed — вуаль уезжала с содержимым и низ
   экрана оставался на голой картинке. У фона прокручиваемого слоя такой беды
   нет: он держится за окно. Адрес картинки — через переменную, чтобы игра могла
   подставить докачанную, не потеряв вуаль. */
.scrim.net-lobby, .scrim.net-room{align-items:flex-start; justify-content:center; overflow-y:auto; padding:0;
  --сетевойФон:url('net-bg.jpg');
  background-color:#04060d;
  background-image:linear-gradient(180deg, rgba(4,6,13,.12) 0%, rgba(4,6,13,.38) 26%, rgba(4,6,13,.72) 55%, rgba(4,6,13,.93) 100%),
                   var(--сетевойФон);
  background-size:auto, cover;
  background-position:center, center 18%;
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, scroll;}
/* В КОМНАТЕ ЗАТЕМНЕНИЕ ПЛОТНЕЕ. На списке игр всего три плиты, и картину видно;
   в комнате же — расы, направления, цели, мелкие подписи, и на светлой картинке
   их тяжело читать (автор: «очень светло, тяжело прочитать»). */
.scrim.net-room{
  background-image:linear-gradient(180deg, rgba(4,6,13,.55) 0%, rgba(4,6,13,.72) 26%, rgba(4,6,13,.86) 55%, rgba(4,6,13,.95) 100%),
                   var(--сетевойФон);
  background-size:auto, cover;
  background-position:center, center 18%;
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, scroll;}
.scrim.net-lobby > *, .scrim.net-room > *{position:relative; z-index:1;}
/* Карточки на этом фоне слегка прозрачные — сквозь них видно звёзды, но текст не страдает. */
.net-lobby .lb-p, .net-lobby .lb-me .lm-row, .net-lobby .lb-room, .net-lobby .lb-empty,
.net-room .lb-p, .net-room .lb-me .lm-row, .net-room .opt-card, .net-room .race-cell,
.net-room .race-detail, .net-room .diff-card, .net-room .galaxy-preview{
  background-color:rgba(23,33,60,.55); backdrop-filter:blur(2px);}
.lb-pick-hint{margin-top:9px;}
.lobby-scroll{width:100%; max-width:560px; box-sizing:border-box; padding:calc(var(--safe-top) + 14px) 14px 14px;}
.net-banner{height:112px; background-image:url('net-bg.jpg'); background-position:center 32%;}
.lb-kick:active{border-color:var(--red); color:var(--red);}
.lr-races{display:flex; gap:3px; font-style:normal; font-size:13px;}
.lr-races i{font-style:normal;}

/* Строка в шапке боя: в сетевой партии время идёт, пока игрок смотрит бой. */
.battle-clock{font-size:10px; letter-spacing:.12em; color:var(--gold); opacity:.85; margin-top:2px;}
#battle-skip-all{position:absolute; top:calc(10px + var(--safe-top)); left:130px; z-index:6;
  font-size:11px; font-weight:800; letter-spacing:.06em; padding:7px 12px; border-radius:10px;
  border:1px solid var(--line); background:rgba(10,16,30,.85); color:var(--text-dim);}

/* Запертая строка настроек: выбирать нечего (например, сложность без ботов). */
/* Комната кооператива собрана из тех же частей, что экран новой партии.
   Запертое поле (гость смотрит настройки хозяина, сложность без ботов) гаснет
   и не ловит нажатия — но остаётся читаемым: гость должен видеть, во что идёт. */
/* Окошки лобби («ваше имя», «войти по коду») стоят посередине экрана и на
   размытом фоне: раньше они наследовали кладку сетевых экранов и прыгали к
   верхнему краю, будто кусок списка. */
.scrim.lobby-dialog{align-items:center; justify-content:center; padding:16px;
  background:rgba(4,6,13,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.scrim.lobby-dialog .lobby-card{max-width:340px; width:100%;}

/* Ввод кода: четыре крупные буквы, как на карточке у хозяина комнаты. */
.code-card{text-align:center;}
.code-card .cc-ico{font-size:20px; color:var(--gold); margin-bottom:4px;}
.code-card .lb-sub{margin-bottom:14px;}
.code-card input{width:100%; box-sizing:border-box; text-align:center; text-transform:uppercase;
  font-family:var(--font-mono); font-size:22px; font-weight:800; letter-spacing:.22em; text-indent:.22em;
  padding:9px 8px; border-radius:11px; color:#fff2cc;
  border:1px solid rgba(255,209,102,.45); background:rgba(255,209,102,.08);}
.code-card input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,209,102,.15);}
.code-card input::placeholder{color:rgba(255,242,204,.25); letter-spacing:.34em;}
.code-card .lb-note{margin-top:8px; text-align:center;}

/* Заголовок списка игр: справа — сколько игр и людей. */
.lb-rooms-head b{margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--text-faint);}
/* Пусто — не пугающая строчка, а приглашение. */
.lb-empty.пусто-красиво{padding:22px 16px; text-align:center;}
.lb-empty .lp-ico{font-size:22px; color:var(--blue); margin-bottom:6px;}
.lb-empty .lp-title{font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--text);}
.lb-empty .lp-sub{font-size:11px; color:var(--text-faint); margin-top:4px; line-height:1.45;}

/* «Вы и связь» — строка вместо неприметной шестерёнки: имя, сервер, состояние. */
.lb-me{display:flex; flex-direction:column; gap:7px;}
.lb-me .lm-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg-panel2);}
.lb-me .lm-ava{width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:800; color:var(--blue);
  border:1px solid rgba(79,208,255,.45); background:rgba(79,208,255,.10);}
.lb-me .lm-ava.тихо{color:var(--text-dim); border-color:var(--line); background:transparent; font-weight:600;}
.lb-me .lm-mid{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.lb-me .lm-name{font-size:13px; font-weight:800; letter-spacing:.03em; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-me .lm-sub{font-size:10.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-me .lm-sub i{font-style:normal;}
.lb-two-btns{display:flex; gap:8px; margin:2px 0 6px;}
.lb-two-btns .btn{flex:1;}

/* Число мест — рядом с надписью «игроки»: места, люди и боты теперь одно и то
   же хозяйство, и крутить их логично там же, где на них смотришь. */
.lb-crew-head{display:flex !important; align-items:center; justify-content:space-between; gap:10px;}
.lb-seats{display:flex; align-items:center; gap:6px;}
.net-room .lb-seats .take-btn{width:30px; height:30px; min-height:30px; min-width:30px;
  border-radius:9px; font-size:15px; padding:0; line-height:1;}
.lb-seats b{font-family:var(--font-mono); font-size:14px; color:var(--gold); min-width:16px; text-align:center;}

/* Бот на месте: эмблема-кнопка открывает выбор расы, ниже — его нрав. */
.lb-p.бот{flex-direction:column; align-items:stretch; gap:8px;}
.lb-p.бот .lp-top{display:flex; align-items:center; gap:10px;}
.lb-p .lp-name em.бот{color:var(--gold); border-color:rgba(255,209,102,.45);}
.lb-p.бот .lp-emblem{cursor:pointer;}
.lb-p.бот .lp-emblem:active{transform:scale(.94);}
.seg.mini{margin:0;}
.seg.mini button{padding:6px 4px; min-height:32px; font-size:10px; letter-spacing:.06em;}
.lb-p .lp-add{margin-left:auto; white-space:nowrap; flex:0 0 auto;}
.scrim.net-room.выбор-расы{z-index:98; background:rgba(4,6,14,.92);}

/* КТО В КОМНАТЕ. Строчки с точкой и многоточием смотрелись бедно; теперь это
   карточки: эмблема расы в круге своего цвета, имя, раса с направлением и
   состояние «готов». Своя карточка подсвечена, свободные места — пунктиром. */
.lb-players{display:flex; flex-direction:column; gap:7px;}
.lb-p{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg-panel2); position:relative; overflow:hidden;}
.lb-p::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ц, transparent);}
.lb-p.я{border-color:var(--ц, var(--blue)); background:linear-gradient(90deg, color-mix(in srgb, var(--ц, #4fd0ff) 14%, transparent), var(--bg-panel2) 62%);}
.lb-p.готов{box-shadow:0 0 0 1px rgba(111,224,138,.28) inset;}
.lb-p .lp-emblem{width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:17px; color:var(--ц, var(--text-dim));
  border:1px solid color-mix(in srgb, var(--ц, #8fa4c8) 55%, transparent);
  background:color-mix(in srgb, var(--ц, #8fa4c8) 16%, transparent);}
.lb-p .lp-mid{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.lb-p .lp-name{font-size:13px; font-weight:800; letter-spacing:.03em; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-p .lp-name .lp-star{color:var(--gold); font-style:normal; margin-right:4px;}
.lb-p .lp-name em{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--blue);
  border:1px solid rgba(79,208,255,.4); border-radius:6px; padding:1px 5px; margin-left:7px; vertical-align:middle;}
.lb-p .lp-race{font-size:10.5px; letter-spacing:.06em; color:var(--text-dim); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-p .lp-state{font-size:9.5px; font-weight:800; letter-spacing:.1em; color:var(--text-faint);
  border:1px solid var(--line); border-radius:20px; padding:3px 9px; white-space:nowrap;}
.lb-p.готов .lp-state{color:var(--green); border-color:rgba(111,224,138,.5); background:rgba(111,224,138,.10);}
.lb-p.пусто{border-style:dashed; background:transparent; opacity:.62;}
.lb-p.пусто .lp-emblem{border-style:dashed; color:var(--text-faint); background:transparent; font-size:19px;}
.lb-p.пусто .lp-name{color:var(--text-dim); font-weight:700;}
.lb-kick{position:relative; z-index:1; width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  border:1px solid var(--line); background:transparent; color:var(--text-faint); font-size:13px; line-height:1;}
.lb-kick:hover{color:var(--red); border-color:rgba(255,107,107,.5);}

/* Код входа: крупные буквы вразрядку, подпись сверху и внизу — что это и что
   с ним делать. Автор: «много кто не понимает, что это за четыре буквы». */
.lb-code-card{margin:10px 0 14px; padding:12px 14px 13px; border-radius:14px; text-align:center;
  border:1px solid rgba(255,209,102,.38); background:linear-gradient(180deg,rgba(255,209,102,.10),rgba(255,209,102,.03));}
.lb-code-card .lc-label{font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--gold); text-transform:uppercase;}
.lb-code-card .lc-code{font-family:var(--font-mono); font-size:34px; font-weight:800; letter-spacing:.16em;
  color:#fff2cc; margin:4px 0 6px; text-shadow:0 0 18px rgba(255,209,102,.45);}
.lb-code-card .lc-how{font-size:11px; color:var(--text-dim); line-height:1.45; margin-bottom:9px;}
.net-room .field.заперто{opacity:.55;}
.net-room .field.заперто label{color:var(--text-faint);}
.net-room .field.заперто .opt-card, .net-room .field.заперто .take-btn,
.net-room .field.заперто input, .net-room .field.заперто .seg button{pointer-events:none;}
.net-room .lb-why{color:var(--text-faint); font-weight:600; letter-spacing:0;}
.net-room .race-cell.занята{opacity:.32; filter:grayscale(.7);}
.net-room .race-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.net-room .race-head-name{font-weight:800; letter-spacing:.04em; font-size:13px; margin-left:auto;}
.net-room .rd-ship{display:flex; justify-content:center;}
.lb-field.заперто{opacity:.45;}
.lb-field.заперто label{color:var(--text-faint);}
.lb-field.заперто .lb-chip{pointer-events:none;}

/* Выход из комнаты: на телефоне работает жест «назад», и кнопка внизу лишняя —
   за ней приходилось прокручивать всю комнату. На мыши жеста нет, там кнопка
   остаётся. */
.только-палец{display:none;}
body.dev-touch .только-палец{display:block;}
body.dev-touch .только-мышь{display:none;}

/* ================= КАРТИНКА ПОД ЭКРАН ТЕЛЕФОНА =================
   Широкий кадр (16:9) на узком экране можно показать двумя способами, и оба
   автор забраковал: «cover» с непродуманной точкой опоры срезает самое
   интересное, а показ целиком по ширине оставляет картинку узкой полосой
   сверху — «очень маленькая на заднем фоне».

   Значит, кадр закрывает ВЕСЬ экран (пустых мест нет), но точка опоры выбрана:
   у наших снимков главное — по центру и чуть выше середины. «fixed» на телефоне
   меняем на обычную прокрутку: с ним фон дёргается при пролистывании. */
@media (max-aspect-ratio: 10/13){
  #screen-setup, #screen-page,
  .scrim.net-lobby, .scrim.net-room{
    background-size:auto, cover;
    background-position:center, center 38%;
    background-attachment:scroll, scroll;
  }
}