/* ── Desktop: hide mobile panel ─────────────────────────────────────────── */
#mob-panel{display:none}

#hud{
  position:absolute;top:10px;left:10px;
  font-size:clamp(11px,2.8vw,14px);
  color:#ffffff;line-height:1.9;pointer-events:none;
  text-shadow:0 0 10px rgba(0,0,60,1);
}
#hud .lbl{color:rgba(255,255,255,0.6)}
#hud .val{color:#ffffff;font-weight:700}
#hud .warn{color:rgba(255,120,50,0.95);font-weight:700}

#stats-panel{
  position:absolute;bottom:8px;left:8px;
  font-size:clamp(11px,2.8vw,13px);
  color:#ffffff;line-height:1.9;pointer-events:none;
  background:rgba(3,5,15,0.85);
  border:1px solid rgba(74,158,255,0.25);
  border-radius:6px;padding:8px 12px;
  display:none;
  text-shadow:0 0 6px rgba(0,0,40,0.8);
  max-width:calc(100vw - 16px);
}
#stats-panel.visible{display:block}
#stats-panel .pct-bar{
  display:inline-block;height:6px;background:rgba(74,158,255,0.2);
  border-radius:3px;vertical-align:middle;margin-left:6px;width:70px;
  position:relative;overflow:hidden;
}
#stats-panel .pct-fill{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,#4a9eff,#ff7043);
  border-radius:3px;transition:width 0.3s;
}

#bar{
  flex-shrink:0;
  display:flex;flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  background:#090d1a;
  border-top:1px solid #1a2236;
}
#grpSpd{margin-left:auto}
@media(max-width:500px){
  #grpSpd{margin-left:0;width:100%;border-top:1px solid #1a2236;padding-top:6px;}
  #grpSpd input[type=range]{flex:1;width:auto;max-width:none;}
}
#bar-row2{
  flex-shrink:0;display:flex;align-items:center;flex-wrap:wrap;
  gap:6px 10px;padding:6px 10px 8px;
  background:#090d1a;border-top:1px solid #111825;
}

button{
  font-size:clamp(12px,3.2vw,14px);padding:7px 10px;
  cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,0.04);border:1px solid #2a3a55;color:#ffffff;
  border-radius:6px;min-height:36px;-webkit-tap-highlight-color:transparent;
}
button:active{background:#1a2a40}
#bMine{border-color:#8b2020;color:#f06060;font-weight:600}
#bMine:disabled{opacity:0.3;cursor:default}
#bSkipStop,#mob-bSkipStop{border-color:#8b2020;color:#f06060;font-weight:700;padding:7px 10px}
#bSkipStop:disabled,#mob-bSkipStop:disabled{opacity:0.25;cursor:default}

.ctl{display:flex;align-items:center;gap:5px;white-space:nowrap}
.ctl label{font-size:clamp(11px,2.8vw,13px);color:#ffffff}
.ctl .v{font-size:clamp(11px,2.8vw,13px);font-weight:600;color:#ffffff;min-width:36px}
.ctl input[type=range]{
  width:clamp(80px,22vw,160px);
  -webkit-appearance:none;appearance:none;
  height:4px;background:rgba(255,255,255,0.2);
  border-radius:2px;outline:none;cursor:pointer;margin:0;padding:0;vertical-align:middle;
}
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:#00cc44;
  cursor:pointer;box-shadow:0 0 4px rgba(0,204,68,0.6);margin-top:-5px;
}
.ctl input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#00cc44;
  cursor:pointer;border:none;box-shadow:0 0 4px rgba(0,204,68,0.6);
}
.ctl input[type=range]::-webkit-slider-runnable-track{height:4px;background:rgba(255,255,255,0.2);border-radius:2px;}
.ctl input[type=range]::-moz-range-track{height:4px;background:rgba(255,255,255,0.2);border-radius:2px;}
.ctl input[type=number],.ctl input[type=text]{
  width:clamp(52px,12vw,68px);font-size:clamp(12px,3vw,14px);
  background:#080d1a;border:1px solid #2a3a55;color:#ffffff;
  border-radius:5px;padding:4px 6px;outline:none;-webkit-appearance:none;
}
.ctl input[type=number]:focus,.ctl input[type=text]:focus{border-color:#ffd232}
.ctl input[type=number]:disabled,.ctl input[type=text]:disabled,
.ctl input[type=range]:disabled{opacity:0.35;pointer-events:none}
.param-group.locked label{color:rgba(80,100,140,0.5)}
.param-group.locked .v{color:rgba(100,120,160,0.5)}
#cbWrap,#cbWrap2,#cbWrap3{display:flex;align-items:center;gap:5px}
#cbWrap label,#cbWrap2 label,#cbWrap3 label{font-size:clamp(12px,3vw,14px);color:#ffffff;cursor:pointer}
#cbAtmo,#cbRetro,#cbAutodet{accent-color:#ffd232;width:15px;height:15px;cursor:pointer}

/* ── Group indicators ─────────────────────────────────────────────────── */
#group-indicators{
  position:absolute;bottom:10px;left:10px;
  display:flex;flex-direction:row;gap:6px;pointer-events:none;
  transition:bottom 0.25s;
}
.grp-ind{
  width:42px;height:42px;border-radius:6px;border:2px solid rgba(255,255,255,0.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;font-weight:bold;color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,0.8);
  transition:background 0.4s;
}
.grp-ind .grp-count{font-size:15px;line-height:1;}
.grp-ind .grp-inc{font-size:9px;opacity:0.7;line-height:1;margin-top:2px;}

/* ── Mine nav panel ───────────────────────────────────────────────────── */
#mine-nav{
  position:absolute;top:10px;right:10px;
  display:none;flex-direction:column;align-items:flex-end;gap:4px;
  pointer-events:auto;
}
#mine-nav.visible{display:flex;}
#mine-nav-row{
  display:flex;align-items:center;gap:4px;
}
.mine-nav-arrow{
  background:rgba(3,5,15,0.88);border:1px solid rgba(255,210,50,0.25);
  color:#ffd232;border-radius:4px;width:24px;height:28px;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mine-nav-arrow:disabled{opacity:0.3;cursor:default;}
.mine-nav-btn{
  font-family:'Courier New',monospace;font-size:11px;
  padding:4px 8px;min-height:28px;min-width:44px;
  border-radius:4px;white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,0.04);border:1px solid #2a3a55;color:#fff;
  text-align:center;
}
.mine-nav-btn.active{border-color:#ffd232;background:rgba(255,210,50,0.15);color:#ffd232;}
.mine-nav-btn.dead{border-color:#8b2020;color:#f06060;}
.mine-nav-btn.dead.active{background:rgba(139,32,32,0.25);}
#mine-nav-menu{
  background:rgba(3,5,15,0.92);border:1px solid rgba(74,158,255,0.25);
  border-radius:6px;padding:4px;display:none;flex-direction:column;gap:3px;
  min-width:140px;
}
#mine-nav.mine-selected #mine-nav-menu{display:flex;}
#mine-nav-menu button{
  width:100%;font-size:clamp(10px,2.4vw,11px);padding:5px 8px;
  min-height:28px;text-align:left;border-radius:4px;
  background:rgba(255,255,255,0.04);border:1px solid #2a3a55;color:#fff;
  cursor:pointer;font-family:'Courier New',monospace;
}
#mine-nav-menu button:disabled{color:rgba(255,255,255,0.25);cursor:default;}

/* ── Start screen ─────────────────────────────────────────────────────── */
#startScreen{
  position:fixed;inset:0;z-index:100;
  background:rgba(3,5,15,0.97);
  overflow-y:scroll;
  scrollbar-gutter:stable;
  padding:20px;
}
#startScreen.hidden{display:none}
#startBox{
  width:100%;max-width:520px;
  margin:0 auto;
  color:#fff;font-family:'Courier New',monospace;
}
#startBox-header{
  padding-bottom:8px;
}
#startBox-body{
  padding-bottom:20px;
}
#startBox h1{
  font-size:clamp(20px,5vw,28px);font-weight:700;
  color:#f06060;text-align:center;letter-spacing:2px;
  margin-bottom:4px;
}
#startBox .subtitle{
  text-align:center;font-size:clamp(11px,2.5vw,13px);
  color:rgba(255,255,255,0.4);margin-bottom:20px;letter-spacing:1px;
}
.ss-section{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(74,158,255,0.2);
  border-radius:8px;padding:14px 16px;margin-bottom:12px;
}
.ss-section h2{
  font-size:clamp(11px,2.8vw,13px);color:rgba(74,158,255,0.9);
  font-weight:700;letter-spacing:1px;margin-bottom:12px;
  text-transform:uppercase;
}
.ss-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:10px;flex-wrap:wrap;
}
.ss-row:last-child{margin-bottom:0}
.ss-row label{
  font-size:clamp(11px,2.8vw,13px);color:rgba(255,255,255,0.8);
  flex:1;min-width:130px;
}
.ss-row .ss-hint{
  font-size:clamp(10px,2.4vw,11px);color:rgba(255,255,255,0.35);
  margin-left:4px;
}
.ss-input{
  width:80px;font-size:clamp(12px,3vw,14px);
  background:#080d1a;border:1px solid #2a3a55;color:#ffffff;
  border-radius:5px;padding:5px 8px;outline:none;text-align:right;
  -webkit-appearance:none;
}
.ss-input:focus{border-color:#ffd232}
.ss-select{
  font-size:clamp(12px,3vw,13px);background:#080d1a;
  border:1px solid #2a3a55;color:#ffffff;
  border-radius:5px;padding:5px 8px;outline:none;cursor:pointer;
}
.ss-calc{
  font-size:clamp(10px,2.4vw,11px);color:rgba(0,230,118,0.8);
  text-align:right;margin-top:2px;
}
.ss-cb-row{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.ss-cb-row:last-child{margin-bottom:0}
.ss-cb-row input[type=checkbox]{accent-color:#ffd232;width:15px;height:15px;cursor:pointer}
.ss-cb-row label{font-size:clamp(11px,2.8vw,13px);color:rgba(255,255,255,0.8);cursor:pointer}
.ss-slider{
  width:100%;accent-color:#ffd232;cursor:pointer;margin-top:4px;
}
.ss-row label span{color:#ffd232;font-weight:600;}
#bStart{
  width:100%;padding:14px;margin-top:8px;
  font-size:clamp(14px,3.5vw,16px);font-weight:700;letter-spacing:2px;
  background:linear-gradient(135deg,#8b1a1a,#c0392b);
  border:1px solid #f06060;color:#fff;border-radius:8px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#bStart:active{background:#8b1a1a}
.ss-diff-row{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.ss-diff-label{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 10px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  transition:background 0.15s;
}
.ss-diff-label:has(input:checked){
  background:rgba(255,210,50,0.12);
  border-color:rgba(255,210,50,0.6);
}
.ss-diff-label input[type=radio]{
  margin-top:3px;accent-color:#ffd232;cursor:pointer;flex-shrink:0;
}
.ss-diff-title{
  font-size:clamp(12px,3vw,14px);font-weight:700;color:#e0e8ff;
  display:block;
}
.ss-diff-label:has(input:checked) .ss-diff-title{
  color:#ffd232;
}
.ss-diff-desc{
  font-size:clamp(10px,2.4vw,11px);color:rgba(255,255,255,0.5);
  display:block;margin-top:2px;
}
.ss-diff-disabled{opacity:0.45;cursor:not-allowed}
.ss-diff-disabled input{cursor:not-allowed}

/* ── Event feed ── */
#event-feed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  pointer-events: none;
}
.ef-line {
  background: rgba(0,0,20,0.72);
  border: 1px solid rgba(100,160,255,0.3);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: clamp(10px, 2.4vw, 12px);
  color: #ffdd00;
  text-shadow: 0 0 8px rgba(0,0,60,1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: ef-fade-in 0.2s ease;
}
.ef-line.ef-kill { color: #ff6060; }
.ef-line.ef-warn { color: #ffaa00; }
.ef-line.ef-info { color: #aaddff; }
@keyframes ef-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Пресеты ────────────────────────────────────────────────────────────── */
#ss-presets-section { padding-bottom: 8px; }
#ss-presets-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.ss-preset-btn {
  width: 36px; height: 36px; border-radius: 6px; border: 2px solid #334;
  background: #1a1f2e; color: #556; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.ss-preset-btn.filled {
  border-color: #2a7a3a; color: #4af07a; background: #0d2015;
}
.ss-preset-btn.active {
  border-color: #ffd232; box-shadow: 0 0 6px #ffd23288;
}
.ss-preset-btn:hover { filter: brightness(1.3); }
#ss-preset-help {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #446;
  background: #1a1f2e; color: #88a; font-size: 13px; font-weight: 700;
  cursor: pointer; margin-left: 4px;
}
#ss-preset-hint {
  font-size: 12px; color: #99b; background: #111820;
  border: 1px solid #334; border-radius: 5px;
  padding: 8px 10px; margin-bottom: 8px; line-height: 1.6;
}
#ss-presets-io { display: flex; gap: 8px; }
#ss-presets-io button {
  flex: 1; padding: 6px 4px; border-radius: 5px; border: 1px solid #334;
  background: #1a1f2e; color: #aac; font-size: 12px; cursor: pointer;
}
#ss-presets-io button:hover { border-color: #ffd232; color: #ffd232; }

/* ── Этап 14 FIX_PLAN.md: вынос инлайн-стилей в классы ─────────────────── */

/* Kill Log modal */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); z-index: 9999; overflow: auto;
  padding: 20px; box-sizing: border-box;
}
.modal-box {
  background: #111; border: 1px solid #444; padding: 16px;
  max-width: 900px; margin: auto; border-radius: 6px;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.modal-title { color: #0f0; font-family: monospace; font-size: 13px; }
.modal-btn {
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
}
.modal-btn-copy {
  margin-right: 8px; background: #224; color: #adf; border: 1px solid #448;
}
.modal-btn-close { background: #422; color: #faa; border: 1px solid #844; }
.modal-textarea {
  width: 100%; height: 70vh; background: #000; color: #0f0;
  font-family: monospace; font-size: 11px; border: none;
  resize: none; outline: none;
}

/* Bottom bars: ΔV slider + size sliders */
.bar-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  background: #080d1a; border-top: 1px solid #1a2a40;
}
.bar-row--sizes { gap: 10px; padding: 6px 10px 8px; }
.bar-label {
  font-size: clamp(10px,2.5vw,12px); color: #8899bb; white-space: nowrap;
}
.bar-range { flex: 1; min-width: 80px; }
.bar-value {
  min-width: 60px; font-weight: 700; font-size: clamp(10px,2.5vw,13px);
}
.bar-value--dv { color: #7ecfff; }
.size-range { width: 80px; }
.size-range--sat   { accent-color: #00e676; }
.size-range--frag  { accent-color: #ffee88; }
.size-range--cloud { accent-color: #80c0ff; }
.size-value--sat   { color: #00e676; min-width: 28px; white-space: nowrap; font-size: clamp(10px,2.5vw,12px); font-weight: normal; }
.size-value--frag  { color: #ffee88; min-width: 28px; white-space: nowrap; font-size: clamp(10px,2.5vw,12px); font-weight: normal; }
.size-value--cloud { color: #80c0ff; min-width: 28px; white-space: nowrap; font-size: clamp(10px,2.5vw,12px); font-weight: normal; }

/* Styled selects (selMode, nInc, selSkip) */
.styled-select {
  font-size: clamp(11px,2.8vw,13px); background: #080d1a;
  border: 1px solid #2a3a55; color: #ffffff; border-radius: 5px;
  padding: 4px 6px; outline: none; cursor: pointer;
}
.styled-select--compact {
  background: #0a1628; color: #e0e8ff; border: 1px solid #2a4a8a;
  border-radius: 4px; padding: 2px 6px; font-size: 13px;
}
.styled-select--skip { padding: 4px 5px; }

/* Skip controls */
.ctl--skip { margin-left: auto; }
#nSkip.skip-input { width: clamp(44px,10vw,60px); }

.unit-label { font-size: 12px; color: #8899bb; }