* { box-sizing: border-box; }
:root {
  --sb-w: 264px;
  --steel-1: #4a525c; --steel-2: #2b3138; --steel-3: #1a1e23; --steel-hi: #7c8794; --steel-lo: #0c0e11;
  --amber: #ffb52e; --amber-d: #b9741a; --led: #7dffb0; --led-d: #0b2a18; --red: #ff4b3a;
}
html, body { margin: 0; height: 100%; background: #0b0d10; color: #d8dde3; font: 13px/1.35 "Segoe UI", Arial, sans-serif; overflow: hidden; user-select: none; }
#game { position: fixed; inset: 0; }
#view { position: absolute; left: 0; top: 0; width: calc(100% - var(--sb-w)); height: 100%; display: block; background: #000; cursor: default; }

/* ---------- правая панель: металлическая консоль ---------- */
#sidebar {
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--sb-w);
  display: flex; flex-direction: column; gap: 7px; padding: 8px 9px 9px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #3a414a 0%, #262b31 18%, #1d2126 60%, #16191d 100%);
  border-left: 3px solid #0a0c0e;
  box-shadow: inset 2px 0 0 #5a6470, inset -1px 0 0 #000, -6px 0 18px rgba(0,0,0,.55);
  overflow: hidden;
}
#sidebar::before { /* тиснёная кромка */
  content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(#0000, #ffb52e33 30%, #ffb52e33 70%, #0000);
}

.sb-head { display: flex; flex-direction: column; gap: 5px; }
.sb-emblem { display: flex; align-items: center; justify-content: center; gap: 7px; height: 22px;
  font: 700 12px/1 "Segoe UI", Arial; letter-spacing: 3px; color: #c7cfd8;
  text-shadow: 0 1px 0 #000, 0 0 8px #ffb52e44; }
.sb-emblem svg { width: 18px; height: 18px; fill: var(--amber); }
.sb-emblem svg .in { stroke: #3a2508; stroke-width: 2; fill: none; }

.led {
  position: relative; height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 12px;
  background: linear-gradient(#061209, #0b1e12); border-radius: 4px;
  border: 2px solid; border-color: #07090b #4b5560 #5d6874 #07090b;
  box-shadow: inset 0 0 12px #000, inset 0 0 0 1px #0f3a22;
  font: 700 22px/1 Consolas, "Courier New", monospace; color: var(--led); letter-spacing: 2px;
  text-shadow: 0 0 6px #33ff8a, 0 0 1px #c8ffe0;
}
.led::after { content: ''; position: absolute; inset: 0; border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.led .cur { color: #3fbf75; font-size: 16px; margin-right: auto; }
.led.flash { color: #ff8a6a; text-shadow: 0 0 6px #ff4b3a; }

/* радар */
.radar {
  position: relative; padding: 9px; border-radius: 6px;
  background: linear-gradient(145deg, #5a6470, #2a3037 45%, #1b1f24);
  box-shadow: inset 0 1px 0 #8b96a3, inset 0 -2px 0 #0b0d10, 0 2px 4px #000;
}
#minimap { display: block; width: 228px; height: 228px; margin: 0 auto; background: #000; border-radius: 3px;
  border: 2px solid; border-color: #07090b #3c4550 #4a5560 #07090b; cursor: crosshair; image-rendering: auto; }
.radar-glass { position: absolute; inset: 11px; border-radius: 3px; pointer-events: none; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(120,255,170,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 55%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.8); }
.radar-glass::after { content: ''; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, rgba(90,255,150,.0) 0deg, rgba(90,255,150,.14) 40deg, transparent 41deg);
  animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.rv { position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c3ccd6, #59626d 55%, #1a1e22); box-shadow: 0 1px 1px #000; }
.rv.tl { left: 2px; top: 2px; } .rv.tr { right: 2px; top: 2px; } .rv.bl { left: 2px; bottom: 2px; } .rv.br { right: 2px; bottom: 2px; }

/* вкладки */
#tabs { display: flex; gap: 4px; }
#tabs button {
  flex: 1; height: 42px; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 600 10px/1 "Segoe UI", Arial; color: #aeb8c3; letter-spacing: .3px;
  background: linear-gradient(#4b545e, #2c323a 55%, #23282e);
  border: 2px solid; border-color: #7f8a97 #15181c #0c0e10 #66717d; border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
#tabs button svg { width: 28px; height: 28px; fill: #8f9aa6; }
#tabs button svg .in { fill: none; stroke: #2a3038; stroke-width: 2; }
#tabs button:hover { color: #fff; }
#tabs button:hover svg { fill: #d6dde4; }
#tabs button.active {
  color: #1a1206; background: linear-gradient(#ffd27a, #f0a12a 50%, #b86f12);
  border-color: #ffe7b0 #6a3d06 #4a2a04 #ffd27a; box-shadow: 0 0 10px #ffb52e66, inset 0 1px 0 #fff6;
}
#tabs button.active svg { fill: #3a2304; }
#tabs button.active svg .in { stroke: #ffd27a; }
#tabs button.alert:not(.active) { animation: tabBlink .8s steps(2) infinite; }
@keyframes tabBlink { 50% { border-color: var(--amber); color: var(--amber); } }

/* основная часть: шкала энергии + камео */
.sb-main { flex: 1; min-height: 0; display: flex; gap: 6px; }
#powerCol { width: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#powerCol .bolt { width: 16px; height: 16px; fill: var(--amber); filter: drop-shadow(0 0 3px #ffb52e88); }
#powerBar {
  position: relative; flex: 1; width: 14px; border-radius: 3px; overflow: hidden;
  background: #07090b; border: 2px solid; border-color: #07090b #3c4550 #4a5560 #07090b;
}
#powerFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: repeating-linear-gradient(0deg, #0b0d10 0 2px, transparent 2px 6px), linear-gradient(#9dff7a, #2fbf4f);
  box-shadow: 0 0 8px #3dff6a88; transition: height .4s; }
#powerFill.low { background: repeating-linear-gradient(0deg, #0b0d10 0 2px, transparent 2px 6px), linear-gradient(#ffb36a, #e0352a); box-shadow: 0 0 8px #ff4b3a99; }
#powerUse { position: absolute; left: -2px; right: -2px; height: 2px; bottom: 0; background: #fff; box-shadow: 0 0 4px #fff; transition: bottom .4s; }
#powerText { font: 700 9px/1 Consolas, monospace; color: #8fd9a6; writing-mode: vertical-rl; transform: rotate(180deg); }

#buildList { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; overflow-y: auto; padding: 1px 2px 2px 0; }
#buildList::-webkit-scrollbar { width: 6px; } #buildList::-webkit-scrollbar-thumb { background: #4a525c; border-radius: 3px; }

/* камео — кнопка постройки */
.item {
  position: relative; height: 92px; cursor: pointer; overflow: hidden; border-radius: 4px;
  background: #11151a;
  border: 2px solid; border-color: #8893a0 #121518 #0a0c0e #6f7a87;
  box-shadow: 0 3px 4px rgba(0,0,0,.7), inset 0 0 0 1px #000;
  transition: transform .06s, box-shadow .15s;
}
.item canvas { position: absolute; left: 0; top: 0; width: 100%; height: 70px; }
.item::after { /* стеклянный блик */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 36px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0)); }
.item .plate {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 5px;
  background: linear-gradient(#2e353d, #171b20); border-top: 1px solid #000; box-shadow: inset 0 1px 0 #4f5a66;
}
.item .name { font: 600 10.5px/1 "Segoe UI", Arial; color: #e6ebf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }

.item .count { position: absolute; right: 5px; top: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: none;
  font: 700 11px/18px Consolas, monospace; text-align: center; color: #1a1206; background: var(--amber); box-shadow: 0 0 6px #ffb52e; }
.item .count.on { display: block; }
/* прогресс — затемнение, которое уходит по кругу */
.item .prog { position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none; display: none;
  background: conic-gradient(transparent calc(var(--p, 0) * 1turn), rgba(5,8,12,.72) 0); }
.item .prog.on { display: block; }
.item .state { position: absolute; left: 0; right: 0; top: 26px; text-align: center; pointer-events: none;
  font: 800 13px/1 "Segoe UI", Arial; letter-spacing: 1px; text-transform: uppercase; color: #8dffb0; text-shadow: 0 0 6px #000, 0 0 3px #000; }
.item .state.ready { animation: readyBlink .9s steps(2) infinite; }
.item .state.warn { color: #ff9a7a; font-size: 11px; }
@keyframes readyBlink { 50% { color: #fff; text-shadow: 0 0 8px #7dffb0; } }
.item:hover { box-shadow: 0 0 0 1px var(--amber), 0 0 12px #ffb52e88, 0 3px 4px rgba(0,0,0,.7); }
.item:active { transform: translateY(1px); }
.item.ready { box-shadow: 0 0 0 1px #7dffb0, 0 0 12px #3dff8a88; }
.item.busy { cursor: not-allowed; }
.item.busy canvas { filter: grayscale(1) brightness(.45); }
.item.busy .name { color: #6b737c; }
.item.busy::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 6px, transparent 6px 12px); }
/* второе супероружие: видно, но серое — строится только одно */
.item.locked { cursor: not-allowed; }
.item.locked canvas { filter: grayscale(1) brightness(.5); }
.item.locked .name { color: #6b737c; }
.item.locked .state { top: 30px; font-size: 10.5px; color: #c9ced4; }

/* панель супероружия в левом верхнем углу поля боя */
#swPanel { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 3; pointer-events: none; }
.sw-item { pointer-events: auto; display: flex; align-items: stretch; width: 214px; height: 46px; overflow: hidden; border-radius: 4px;
  background: linear-gradient(90deg, rgba(14,18,23,.92), rgba(14,18,23,.72)); border: 1px solid #39424c; border-left: 4px solid var(--tc);
  box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.sw-item canvas { width: 72px; height: 45px; flex: none; }
.sw-item .sw-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 8px 0 6px; min-width: 0; }
.sw-item b { font: 700 12px/1 "Segoe UI", Arial; color: #e6ebf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-item .sw-time { font: 700 13px/1 Consolas, monospace; color: var(--led); letter-spacing: 1px; }
.sw-item .sw-bar { height: 4px; background: #0a0c0e; border-radius: 2px; overflow: hidden; }
.sw-item .sw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2e8f58, var(--led)); }
.sw-item.own { cursor: pointer; }
.sw-item.own:hover { border-color: var(--amber); border-left-color: var(--tc); }
.sw-item.enemy { width: 190px; height: 38px; opacity: .92; }
.sw-item.enemy canvas { width: 60px; height: 37px; }
.sw-item.enemy b { font-size: 11px; color: #c4ccd4; }
.sw-item.enemy .sw-time { color: #ffb37a; font-size: 12px; }
.sw-item.enemy .sw-bar i { background: linear-gradient(90deg, #8f3a2e, #ff7a5a); }
.sw-item.ready .sw-time { animation: swReady .8s steps(2) infinite; }
.sw-item.own.ready { box-shadow: 0 0 0 1px #ffd040, 0 0 14px #ffb52e99; }
.sw-item.enemy.ready { box-shadow: 0 0 0 1px var(--red), 0 0 12px #ff4b3a88; }
.sw-item.aiming { box-shadow: 0 0 0 2px #ff3a30, 0 0 16px #ff3a30aa; }
@keyframes swReady { 50% { color: #fff; } }

/* меню: длинная кнопка с техногенным значком (открывает меню и ставит игру на паузу) */
#btnMenu {
  flex: none; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px;
  background: linear-gradient(#3e464f, #22272d 55%, #1a1e23);
  border: 2px solid; border-color: #7f8a97 #15181c #0c0e10 #66717d; border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 0 10px rgba(0,0,0,.5);
}
#btnMenu svg { width: 28px; height: 28px; flex: none; fill: #6f7a86; filter: drop-shadow(0 1px 0 #000); animation: menuSpin 14s linear infinite; }
#btnMenu svg .in { fill: none; stroke: #1a1e23; stroke-width: 1.4; stroke-linecap: round; }
#btnMenu svg .core { fill: var(--led); filter: drop-shadow(0 0 3px #33ff8a); animation: corePulse 2.2s ease-in-out infinite; }
#btnMenu .grill { flex: 1; height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #0c0e10 0 2px, #3a424b 2px 4px); box-shadow: inset 0 1px 2px #000; }
#btnMenu:hover { border-color: var(--amber) #6a3d06 #4a2a04 var(--amber); }
#btnMenu:hover svg { fill: var(--amber); animation-duration: 3s; }
#btnMenu:active { transform: translateY(1px); }
@keyframes menuSpin { to { transform: rotate(360deg); } }
@keyframes corePulse { 50% { opacity: .45; } }

#tooltip { position: absolute; right: calc(var(--sb-w) + 4px); width: 270px; padding: 10px 12px; display: none; pointer-events: none; z-index: 5; font-size: 12px; border-radius: 4px;
  background: linear-gradient(#1f252c, #14181d); border: 1px solid #5a6470; box-shadow: 0 6px 18px rgba(0,0,0,.7), inset 0 1px 0 #3c4550; }
#tooltip .tt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #3a4250; }
#tooltip .tt-head b { color: #f1f4f7; font-size: 17px; line-height: 1.15; }
#tooltip .tt-cost { flex: none; font: 700 20px/1 Consolas, monospace; color: var(--amber); text-shadow: 0 0 8px #ffb52e66; }
#tooltip .req { color: #ff8a7a; }
#tooltip .stat { color: #9fb0c0; }

#messages { position: fixed; left: 12px; bottom: 12px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
#messages div { background: linear-gradient(90deg, rgba(10,14,18,.85), rgba(10,14,18,.4)); border-left: 3px solid #7dffb0; padding: 3px 10px; border-radius: 2px; color: #e8edf2; font-size: 13px; transition: opacity 1s; }
#messages div.warn { color: #ffb37a; border-left-color: var(--red); }

/* ---------- меню и экран конца ---------- */
.overlay { position: fixed; inset: 0; background: rgba(5,7,10,.82); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay.hidden { display: none; }
.panel { width: min(540px, calc(100% - 32px)); padding: 22px 26px; border-radius: 8px;
  background: linear-gradient(#2a3037, #171b20); border: 2px solid; border-color: #7f8a97 #15181c #0c0e10 #66717d; box-shadow: 0 12px 40px #000; }
.panel h1 { margin: 0 0 4px; font-size: 30px; color: var(--amber); letter-spacing: 2px; text-shadow: 0 2px 0 #000, 0 0 14px #ffb52e55; }
.panel .sub { margin: 0 0 16px; color: #9aa6b4; }
.panel label { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.panel select, .panel input { width: 170px; padding: 6px; background: #0f1318; color: #e6ebf0; border: 1px solid #4a5560; border-radius: 3px; }
.panel button.big { width: 100%; margin-top: 14px; padding: 11px; font-size: 16px; font-weight: 800; letter-spacing: 1px; cursor: pointer; border-radius: 4px; color: #1a1206;
  background: linear-gradient(#ffd27a, #f0a12a 50%, #b86f12); border: 2px solid; border-color: #ffe7b0 #6a3d06 #4a2a04 #ffd27a; }
.panel button.big:hover { filter: brightness(1.1); }
.sound-opts { display: flex; gap: 18px; margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid #3a4250; }
.panel label.chk { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.panel label.chk input { width: auto; accent-color: var(--amber); }
.note { min-height: 14px; font-size: 11px; color: #8d99a8; }

/* ---------- ремонт и продажа ---------- */
#modeButtons { display: flex; gap: 5px; }
#modeButtons button {
  flex: 1; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 11px/1 "Segoe UI", Arial; letter-spacing: .6px; text-transform: uppercase; color: #c3ccd6;
  background: linear-gradient(#4b545e, #2c323a 55%, #23282e);
  border: 2px solid; border-color: #7f8a97 #15181c #0c0e10 #66717d; border-radius: 4px; box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
#modeButtons button svg { width: 26px; height: 26px; fill: #9fb0c0; }
#modeButtons button svg .w, #modeButtons button svg .x { fill: none; stroke: #9fb0c0; stroke-width: 2; stroke-linecap: round; }
#modeButtons button svg .x { display: none; stroke: var(--red); }
#modeButtons button.off svg .w { display: none; }
#modeButtons button.off svg .x { display: inline; }
#modeButtons button:hover svg { fill: #fff; }
#modeButtons button svg .in { fill: none; stroke: #23282e; stroke-width: 2; stroke-linecap: round; }
#modeButtons button:hover { color: #fff; }
#modeButtons button.active { color: #102006; background: linear-gradient(#b8ff8a, #5fcf3a 50%, #2f8a18);
  border-color: #e0ffc8 #1f4a0a #143006 #b8ff8a; box-shadow: 0 0 10px #7dff5a66; }
#modeButtons button#btnSell.active { color: #1a1206; background: linear-gradient(#ffd27a, #f0a12a 50%, #b86f12);
  border-color: #ffe7b0 #6a3d06 #4a2a04 #ffd27a; box-shadow: 0 0 10px #ffb52e66; }
#modeButtons button.active svg { fill: #1a1206; }
#modeButtons button.active svg .in { stroke: #ffd27a; }

/* ---------- меню: фракции и карты ---------- */
.panel.wide { width: min(880px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.menu-cols { display: flex; gap: 22px; flex-wrap: wrap; }
.menu-left { flex: 1 1 300px; min-width: 0; }
.menu-right { flex: 1.3 1 380px; min-width: 0; }
.sec-title { font: 700 12px/1 "Segoe UI", Arial; letter-spacing: 1.5px; text-transform: uppercase; color: #9aa6b4; margin: 4px 0 8px; }
.color-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.swatch { width: 34px; height: 26px; padding: 0; cursor: pointer; border-radius: 4px;
  background: linear-gradient(var(--l) 0 18%, var(--c) 18% 70%, var(--d) 70%); border: 2px solid #343c46; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.swatch:hover { border-color: #8a96a3; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 12px var(--c); }
.map-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.map-card { cursor: pointer; border-radius: 5px; overflow: hidden; background: #0b0e12; border: 2px solid #343c46; }
.map-card canvas { display: block; width: 100%; aspect-ratio: 2 / 1.25; }
.map-card div { padding: 4px 6px 5px; font: 600 11.5px/1.2 "Segoe UI", Arial; color: #c3ccd6; }
.map-card:hover { border-color: #66717d; }
.map-card.sel { border-color: var(--amber); box-shadow: 0 0 12px #ffb52e44; }
.map-card.sel div { color: var(--amber); }
.map-info { margin-top: 8px; min-height: 34px; font-size: 12px; color: #9aa6b4; }
.panel label.seed-row { margin: 6px 0 0; }
.panel label.seed-row.hidden { display: none; }
@media (max-width: 640px) { .map-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- главное меню: военный пульт управления ---------- */
body.no-game #sidebar, body.no-game #view, body.no-game #messages { display: none; }
.overlay.title-screen { align-items: flex-start; overflow-y: auto; padding: 16px 0;
  background: radial-gradient(ellipse at 50% 30%, #2a3138 0%, #14181c 60%, #0a0c0e 100%); }
.console { position: relative; width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 14px; border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(#3f474f, #2a3036 40%, #22272c);
  border: 2px solid; border-color: #7c8794 #15181c #0c0e10 #66717d; box-shadow: 0 20px 60px rgba(0,0,0,.8), inset 0 0 0 4px #1b1f24, inset 0 0 0 5px #4f5862; }
.rivet { width: 10px; height: 10px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9d1da, #59626c 55%, #20252a); box-shadow: 0 1px 1px #000; }
/* шапка: табличка с названием, лампы и табло */
.con-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: 6px;
  background: linear-gradient(#22272d, #15191d); border: 2px solid; border-color: #0b0d10 #59636e #6b7682 #0b0d10; box-shadow: inset 0 2px 8px #000; }
.game-title { flex: 1; text-align: center; font: 900 clamp(28px, 4.6vw, 52px)/1 Impact, "Arial Black", "Segoe UI", sans-serif; letter-spacing: .12em;
  background: linear-gradient(#ffffff, #b8c2cc 45%, #6b7682 55%, #c9d1da); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 1px #000); }
.con-lamps { display: flex; gap: 7px; }
.lamp { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5a4e, #18201a); box-shadow: inset 0 1px 2px #000, 0 0 0 2px #0c0e10, 0 0 0 3px #59636e; }
.lamp.on { background: radial-gradient(circle at 35% 35%, #d8ffe6, #3dff7a 45%, #0c7a32); box-shadow: 0 0 10px #3dff7a, 0 0 0 2px #0c0e10, 0 0 0 3px #59636e; }
.lamp.amber { background: radial-gradient(circle at 35% 35%, #fff2c8, #ffb52e 45%, #8a5208); box-shadow: 0 0 10px #ffb52e, 0 0 0 2px #0c0e10, 0 0 0 3px #59636e; }
.lamp.blink { animation: lampBlink 1.1s steps(1) infinite; }
@keyframes lampBlink { 50% { background: radial-gradient(circle at 35% 35%, #ffd0c8, #ff4b3a 45%, #7a1208); box-shadow: 0 0 10px #ff4b3a, 0 0 0 2px #0c0e10, 0 0 0 3px #59636e; } }
.con-status { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.con-note { font: 700 9.5px/1 Consolas, monospace; letter-spacing: 1.5px; color: #7d8894; }
.led-text { display: inline-block; padding: 4px 9px; border-radius: 3px; font: 700 15px/1 Consolas, "Courier New", monospace; letter-spacing: 2px; color: var(--led);
  text-shadow: 0 0 6px #33ff8a; background: #031208; box-shadow: inset 0 1px 4px #000, 0 0 0 1px #0a2a14; white-space: nowrap; }
.led-text.small { font-size: 12px; padding: 3px 7px; }
.con-body { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; }
/* радар */
.radar-bezel { position: relative; width: 100%; aspect-ratio: 1; padding: 14px; box-sizing: border-box; border-radius: 50%;
  background: radial-gradient(circle, #1a1e22 62%, #59636e 63%, #2a3036 66%, #7c8794 69%, #1d2126 72%, #3a424a 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.7), inset 0 0 0 2px #0c0e10; }
#menuRadar { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: inset 0 0 20px #000, 0 0 0 3px #0c0e10; }
.radar-ring { position: absolute; inset: 14px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 30px rgba(0,0,0,.8), inset 0 8px 20px rgba(255,255,255,.06); }
.radar-tag { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); padding: 2px 8px; border-radius: 2px; font: 700 9.5px/1.2 Consolas, monospace; letter-spacing: 1.5px;
  color: #1a1206; background: var(--amber); box-shadow: 0 1px 2px #000; white-space: nowrap; }
.led-strip { margin: 12px 0 8px; padding: 7px 10px; min-height: 30px; border-radius: 3px; font: 600 11.5px/1.35 Consolas, monospace; color: var(--led);
  text-shadow: 0 0 5px #33ff8a88; background: #031208; box-shadow: inset 0 1px 4px #000, 0 0 0 1px #0a2a14; }
.con-left .map-list { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.con-left .map-card { border-radius: 4px; background: linear-gradient(#3e464f, #262b31); border: 2px solid; border-color: #7c8794 #15181c #0c0e10 #66717d; }
.con-left .map-card canvas { display: none; }
.con-left .map-card div { padding: 8px 4px; text-align: center; font: 700 10.5px/1.15 "Segoe UI", Arial; letter-spacing: .5px; text-transform: uppercase; color: #c3ccd6; }
.con-left .map-card:hover { border-color: var(--amber) #6a3d06 #4a2a04 var(--amber); box-shadow: none; }
.con-left .map-card.sel { background: linear-gradient(#2a3a2e, #16241a); border-color: #0c0e10 #59636e #6b7682 #0c0e10; box-shadow: inset 0 2px 6px #000; }
.con-left .map-card.sel div { color: var(--led); text-shadow: 0 0 6px #33ff8a; }
.seed-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font: 700 11px/1 Consolas, monospace; letter-spacing: 1px; color: #9aa6b4; }
.seed-row.hidden { display: none; }
.seed-row input { width: 110px; padding: 5px 8px; font: 700 14px/1 Consolas, monospace; color: var(--led); background: #031208; border: none; border-radius: 3px; box-shadow: inset 0 1px 4px #000, 0 0 0 1px #0a2a14; }
/* правая часть: таблички, клавиши фракций, панель параметров */
.plate-title { display: inline-block; margin: 2px 0 8px; padding: 4px 12px; border-radius: 2px; font: 800 11px/1 "Segoe UI", Arial; letter-spacing: 2.5px; color: #1d2126;
  background: linear-gradient(#c9d1da, #8d97a2); box-shadow: 0 1px 0 #000, inset 0 1px 0 #fff; }
.faction-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.faction-card { --fc: #4a90ff; position: relative; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 14px 12px 12px; border-radius: 6px;
  background: linear-gradient(#4a525c, #2b3138 50%, #22272d); border: 2px solid; border-color: #7c8794 #15181c #0c0e10 #66717d; box-shadow: 0 4px 0 #0c0e10, 0 6px 10px rgba(0,0,0,.6);
  transition: transform .08s, box-shadow .08s; }
.faction-card.legion { --fc: #ff4a2e; }
.faction-card:hover { border-color: var(--amber) #6a3d06 #4a2a04 var(--amber); }
.faction-card.sel { transform: translateY(3px); background: linear-gradient(#2c333a, #1d2227); border-color: #0c0e10 #59636e #6b7682 #0c0e10; box-shadow: 0 1px 0 #0c0e10, inset 0 3px 10px #000; }
.faction-card .lamp { position: absolute; top: 8px; right: 8px; }
.faction-card.sel .lamp { background: radial-gradient(circle at 35% 35%, #fff, var(--fc) 45%, #111); box-shadow: 0 0 12px var(--fc), 0 0 0 2px #0c0e10, 0 0 0 3px #59636e; }
.faction-card .emblem { position: relative; flex: none; width: 84px; height: 84px; padding: 4px; }
/* подсветка прямо из-под эмблемы цветом фракции */
.faction-card .emblem::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--fc), transparent); opacity: .18; transition: opacity .2s; }
.faction-card.sel .emblem::before { opacity: .7; }
.faction-card .emblem svg { position: relative; width: 100%; height: 100%; display: block; filter: grayscale(.8) brightness(.65); transition: filter .2s; }
.faction-card.sel .emblem svg { filter: drop-shadow(0 0 6px var(--fc)); }
.fc-text b { display: block; font: 800 16px/1.15 "Segoe UI", Arial; color: #e6ebf0; text-transform: uppercase; letter-spacing: .5px; }
.fc-text i { display: block; margin: 3px 0 5px; font: italic 600 11.5px/1.2 "Segoe UI", Arial; color: var(--fc); }
.fc-text span { display: block; font-size: 11px; line-height: 1.35; color: #9aa6b4; }
.con-panel { padding: 12px 14px; border-radius: 6px; background: linear-gradient(#22272d, #181c20); border: 2px solid; border-color: #0b0d10 #59636e #6b7682 #0b0d10; box-shadow: inset 0 2px 8px #000; }
.ctl-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #2c333a; }
.ctl-row.toggles { border-bottom: none; gap: 22px; }
.ctl-label { width: 96px; flex: none; font: 700 11px/1 Consolas, monospace; letter-spacing: 1.5px; color: #9aa6b4; }
.con-panel .color-list { margin: 0; gap: 5px; flex: 1; }
.con-panel .swatch { width: 26px; height: 22px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .led-text { width: 150px; text-align: center; }
.st-b { width: 30px; height: 26px; cursor: pointer; font-size: 11px; color: #c3ccd6; border-radius: 3px;
  background: linear-gradient(#4b545e, #2c323a 55%, #23282e); border: 2px solid; border-color: #7f8a97 #15181c #0c0e10 #66717d; }
.st-b:hover { color: var(--amber); }
.st-b:active { transform: translateY(1px); border-color: #0c0e10 #66717d #7f8a97 #15181c; }
/* тумблеры */
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 700 11px/1 Consolas, monospace; letter-spacing: 1.5px; color: #9aa6b4; }
.toggle input { display: none; }
.toggle i { position: relative; width: 20px; height: 34px; border-radius: 10px; background: linear-gradient(90deg, #0c0e10, #2a3036 50%, #0c0e10); box-shadow: inset 0 2px 4px #000, 0 0 0 2px #59636e; }
.toggle i::after { content: ""; position: absolute; left: 3px; width: 14px; height: 16px; bottom: 2px; border-radius: 4px; transition: bottom .12s;
  background: linear-gradient(#e2e7ec, #8d97a2); box-shadow: 0 2px 2px #000; }
.toggle input:checked + i::after { bottom: 16px; }
.toggle input:checked + i { box-shadow: inset 0 2px 4px #000, 0 0 0 2px #59636e, 0 0 8px #3dff7a66; }
.toggle:has(input:checked) { color: var(--led); }
/* кнопка запуска в рамке с предупреждающими полосами */
.launch { margin-top: 14px; padding: 8px; border-radius: 6px; background: repeating-linear-gradient(-45deg, #e0a81c 0 14px, #17191c 14px 28px); box-shadow: inset 0 0 0 2px #0c0e10, 0 4px 10px rgba(0,0,0,.6); }
.launch-btn { display: block; width: 100%; padding: 16px; cursor: pointer; border-radius: 4px; font: 900 26px/1 Impact, "Arial Black", sans-serif; letter-spacing: 6px; color: #fff;
  text-shadow: 0 2px 0 #4a0602; background: linear-gradient(#ff5a46, #c4261a 50%, #8e140c); border: 2px solid; border-color: #ff9a8f #5a0a06 #3a0503 #ff8a7a;
  box-shadow: 0 4px 0 #3a0503, inset 0 1px 0 #ffb0a6; }
.launch-btn:hover { filter: brightness(1.1); }
.launch-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a0503, inset 0 2px 6px #4a0602; }
.console .note { margin-top: 4px; }
/* невысокие окна: пульт плотнее, чтобы кнопка «В БОЙ» была видна без прокрутки */
@media (max-height: 940px) {
  .overlay.title-screen { padding: 6px 0; }
  .console { padding-top: 8px; padding-bottom: 8px; }
  .ctl-row { padding: 2px 0; }
  .con-body { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .launch { margin-top: 8px; padding: 5px; }
  .launch-btn { padding: 9px; font-size: 22px; }
  .faction-card .emblem { width: 64px; height: 64px; }
}
@media (max-width: 860px) { .con-body { grid-template-columns: 1fr; } .radar-bezel { max-width: 400px; margin: 0 auto; } .faction-pick { grid-template-columns: 1fr; } }

/* ---------- меню паузы ---------- */
.pause-panel { width: min(420px, calc(100% - 32px)); text-align: center; }
.pause-panel .sound-opts { justify-content: center; }
.pause-panel button.danger { width: 100%; margin-top: 18px; padding: 9px; cursor: pointer; border-radius: 4px; font: 700 13px/1 "Segoe UI", Arial;
  color: #ff9a8f; background: #1a0e0d; border: 1px solid #6a2a24; }
.pause-panel button.danger:hover { background: #2a1210; }
.pause-panel button.danger.armed { color: #fff; background: #a3241a; border-color: #ff6a5a; }

/* ---------- раскрывающаяся подсказка по управлению ---------- */
.help { margin-top: 12px; border-radius: 6px; text-align: left; background: #15191d; box-shadow: inset 0 1px 4px #000, 0 0 0 1px #2c333a; }
.help summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-radius: 6px;
  font: 800 12px/1 "Segoe UI", Arial; letter-spacing: 2.5px; color: #c3ccd6;
  background: linear-gradient(#3e464f, #262b31); border: 2px solid; border-color: #7c8794 #15181c #0c0e10 #66717d; }
.help summary::-webkit-details-marker { display: none; }
.help summary:hover { color: var(--amber); }
.help summary svg { width: 22px; height: 22px; fill: #59636e; }
.help summary svg .in { fill: none; stroke: #c3ccd6; stroke-width: 1.6; stroke-linecap: round; }
.help summary span { flex: 1; }
.help .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.help[open] summary { border-radius: 6px 6px 0 0; color: var(--led); border-color: #0c0e10 #59636e #6b7682 #0c0e10; background: linear-gradient(#22272d, #181c20); }
.help[open] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 12px; animation: keysIn .25s ease-out; }
@keyframes keysIn { from { opacity: 0; transform: translateY(-6px); } }
.kgroup { padding: 8px 10px; border-radius: 4px; background: #1d2126; box-shadow: inset 0 1px 0 #2c333a, 0 1px 2px #000; }
.ktitle { margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #2c333a; font: 700 10.5px/1 Consolas, monospace; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }
.krow { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12px; color: #aab5c1; }
.kcaps { flex: none; min-width: 92px; display: flex; align-items: center; gap: 3px; }
.kcaps b { font-weight: 400; font-size: 10px; color: #6b7682; }
.krow kbd { display: inline-block; min-width: 14px; padding: 3px 6px; text-align: center; border-radius: 4px; font: 700 11px/1 Consolas, monospace; color: #e6ebf0;
  background: linear-gradient(#5a636d, #353c44); border: 1px solid #0c0e10; box-shadow: inset 0 1px 0 #8d97a2, 0 2px 0 #0c0e10; white-space: nowrap; }
.krow kbd.m { color: #1a1206; background: linear-gradient(#ffd27a, #e09a1e); box-shadow: inset 0 1px 0 #fff0c8, 0 2px 0 #5a3a06; }
.pause-panel .keys { grid-template-columns: 1fr; max-height: 46vh; overflow-y: auto; }