/* iGraSpore styles — extracted from inline */

/* UI-RESTORE-2026-09-22 + UI-POLISH-CORNERS-2026-09-22: zone framework vars */
:root{
  --actbar-bottom: 12px;
  --actbar-h: 64px;          /* kept in sync by JS (ResizeObserver on #actBar) */
  --ui-gap: 8px;
  /* true lower-corner band (beside centered actBar on desktop) */
  --corner-bottom: max(var(--actbar-bottom), env(safe-area-inset-bottom, 0px));
  --mm-h: 80px;
  --pc-h: 55px;
  --z-actbar: 20;
  --z-keyhint: 25;           /* above actBar, but layout-split anyway */
  --z-corner: 10;
  --z-topstack: 30;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000814;font-family:system-ui,Arial,sans-serif;user-select:none}
canvas{display:block;touch-action:none} #c{position:absolute;top:0;left:0;}
.p{background:rgba(0,12,28,.92);border:1px solid #1a3a55;border-radius:8px;color:#ffffff;font-size:11px;backdrop-filter:blur(4px)}
#hud{position:relative;z-index:10;pointer-events:none;padding:8px 12px;min-width:160px;max-width:200px;font-size:13px}
#hud .nm{color:#ffffff;font-size:12px;font-weight:bold}
#hud .la{color:#dddddd;font-size:12px;font-style:italic;margin-bottom:2px}
#ebar{width:100%;height:6px;background:#200;border-radius:3px;overflow:hidden;margin:1px 0}
#efill{height:100%;background:linear-gradient(90deg,#e33,#ee3,#3e3);transition:width .3s}
#hud .st{font-size:12px;color:#ffffff;margin-top:1px;line-height:1.4}
#topR{pointer-events:none;padding:4px 8px;width:100%;text-align:right}
/* topRightStack: single right-top column (topR → star → renderMode → APK) */
#topRightStack{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:stretch;gap:8px;z-index:var(--z-topstack);width:148px;pointer-events:auto}
#topRightStack #topR{pointer-events:none}
#starSelectGame{width:100%;background:#0a1a2a;color:#8cf;border:1px solid #4c8;padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer}
#apkBtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;background:#0a4a52;color:#5ed4a0;padding:8px 14px;border-radius:20px;font-family:Arial;font-size:12px;font-weight:bold;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.5);outline-offset:2px}
#topR .rw{font-size:12px;color:#ffffff;line-height:1.5}
#weatherP{display:none!important};z-index:10;padding:3px 7px;pointer-events:none;font-size:12px;color:#ffffff;text-align:right;min-width:100px}
#spdBar{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:2px;padding:5px 8px;background:rgba(0,12,28,.92);border:1px solid #1a3a55;border-radius:6px}
.sb{padding:3px 7px;font-size:12px;color:#ffffff;background:#012;border:1px solid #234;border-radius:3px;cursor:pointer;min-width:30px;text-align:center;font-family:inherit;transition:all .1s}
.sb:hover{background:#123;color:#ffffff}
.sb.act{background:#1a4;color:#ffffff;border-color:#3c6}
#todWrap{position:absolute;top:40px;left:50%;transform:translateX(-50%);z-index:13;display:flex;align-items:center;gap:5px;padding:3px 7px}
#todR{-webkit-appearance:none;appearance:none;width:130px;height:5px;background:#123;border-radius:3px;outline:none}
#todR::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fc4;border-radius:50%;cursor:pointer}
#todR::-moz-range-thumb{width:12px;height:12px;background:#fc4;border-radius:50%;cursor:pointer;border:none}
#todL{font-size:12px;color:#ffffff;min-width:34px;text-align:center;font-family:monospace}
#seasL{font-size:8px;color:#ffffff;min-width:38px;text-align:center}
#langB{position:absolute;top:50px;left:6px;z-index:10;display:flex;gap:4px;flex-wrap:wrap;max-width:180px}
.lb{padding:1px 6px;font-size:8px;color:#ffffff;background:#011;border:1px solid #234;border-radius:2px;cursor:pointer;font-family:inherit}
.lb:hover{background:#123;color:#ffffff}
.lb.act{background:#246;color:#ffffff;border-color:#4af}
#ecoP{display:none!important;position:relative;z-index:10;width:175px;padding:5px 7px;pointer-events:none}
.ecT{font-size:8px;color:#ffffff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.ecR{display:flex;align-items:center;gap:3px;margin:1px 0}
.ecD{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ecB{flex:1;height:4px;background:#112;border-radius:2px;overflow:hidden}
.ecF{height:100%;transition:width .5s}
.ecC{width:28px;text-align:right;font-weight:bold;color:#ffffff;font-size:12px}
.ecSub{font-size:7px;color:#ffffff;margin-top:2px;border-top:1px solid #234;padding-top:2px;line-height:1.3}
#camM{position:absolute;z-index:12;padding:2px 8px;font-size:12px;color:#ffffff;display:none}
#camM.free{color:#ffffff}
#actBar{position:absolute;bottom:max(var(--actbar-bottom),env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:var(--z-actbar);display:none;gap:8px;flex-wrap:wrap;justify-content:center;max-width:min(96vw,920px)}
.ab{padding:12px 16px;font-size:15px;color:#ffffff;background:#012;border:2px solid #456;border-radius:8px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .1s;min-width:72px;min-height:48px;text-align:center;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;user-select:none;-webkit-user-select:none}.ab .hk{font-size:11px;opacity:.75;font-weight:600}
.ab:hover{background:#123;color:#ffffff;border-color:#4af;transform:translateY(-1px)}
#renderModeBtn{padding:8px 14px;font-size:14px;font-weight:bold;border-radius:10px;cursor:pointer;transition:all .2s;display:none;width:100%}
#renderModeBtn.cartoon{background:linear-gradient(135deg,#1a3a6a,#2a5a8a);color:#fff;border:2px solid #4af}
#renderModeBtn.realistic{background:linear-gradient(135deg,#2a1a0a,#4a3a1a);color:#fa4;border:2px solid #fa4}
#renderModeBtn:hover{transform:scale(1.02)}
.ab:active{transform:translateY(0)}
.ab.act{background:#246;color:#ffffff;border-color:#4af}
.ab .hk{font-size:11px;color:#dddddd;display:block}
/* keyHint drawer: strictly ABOVE actBar; chip-only when collapsed */
#keyHint{position:absolute;bottom:calc(var(--actbar-bottom) + var(--actbar-h) + var(--ui-gap));left:50%;transform:translateX(-50%);z-index:var(--z-keyhint);padding:6px 10px;display:none;flex-direction:column;gap:6px;align-items:center;max-width:min(96vw,920px);max-height:30vh;overflow-y:auto;pointer-events:auto;transition:opacity .15s;background:rgba(0,12,28,0.88);border:1px solid #345;border-radius:8px}
#keyHint kbd{background:#123;border:1px solid #456;border-radius:4px;padding:2px 7px;font-size:14px;font-weight:800;color:#ffffff;font-family:inherit;min-width:22px;text-align:center}
#keyHint span{font-size:13px;color:#ffffff;display:inline-flex;align-items:center;gap:4px}
.kh-keys{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
#keyHint.collapsed .kh-keys{display:none}
#keyHint.collapsed{padding:2px 4px;background:transparent;border-color:transparent;overflow:visible}
.kh-sum{font-size:11px;opacity:.75;color:#cde}
#khToggle{pointer-events:auto;cursor:pointer;border:1px solid #3a6a95;background:#012;color:#def;border-radius:6px;padding:10px 16px;min-height:44px;min-width:64px;font:700 13px/1 system-ui,sans-serif}
#khToggle:focus-visible{outline:2px solid #5ed4a0;outline-offset:2px}
@media (prefers-reduced-motion: reduce){#keyHint,.kh-keys,#khToggle{transition:none;animation:none}}
#legP{position:relative;z-index:10;padding:4px 7px;max-height:40vh;overflow-y:auto}
#legToggle{pointer-events:auto;cursor:pointer;border:1px solid #3a6a95;background:#012;color:#def;border-radius:6px;padding:6px 10px;min-height:32px;font:700 12px/1 system-ui,sans-serif;width:100%;text-align:left}
#legBody{display:flex;flex-direction:column;gap:2px;margin-top:4px}
#legP.collapsed #legBody{display:none}
.lgR{display:flex;align-items:center;gap:8px;font-size:12px;color:#dde;margin:1px 0}
.lgD{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#scaleW{position:absolute;right:calc(130px + env(safe-area-inset-right));bottom:var(--corner-bottom);z-index:var(--z-corner);pointer-events:none;color:#ffffff;font-size:10px;text-align:right}
/* UI-POLISH-CORNERS: desktop side stacks sit in true lower corners (beside centered actBar), grow upward */
#mmWrap{position:absolute;right:max(6px,env(safe-area-inset-right));bottom:var(--corner-bottom);z-index:var(--z-corner);width:110px}
#pcWrap{position:absolute;right:max(6px,env(safe-area-inset-right));bottom:calc(var(--corner-bottom) + var(--mm-h) + var(--ui-gap));z-index:var(--z-corner);width:110px}
#hDivReady{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:var(--corner-bottom);z-index:18;color:#8ef;font:12px/1.3 sans-serif;text-shadow:0 1px 2px #000;max-width:240px;pointer-events:none}
body.demo-on #hDivReady{bottom:calc(var(--corner-bottom) + var(--ui-gap) + var(--demohud-h,54px))}
#demoTip{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:var(--corner-bottom);z-index:18;max-width:min(280px,36vw)}
/* single scale canon: #scaleW; the old centered #scaleBar is retired in playing/demo */
#scaleBar{display:none!important}
#scaleL{height:2px;background:#567;border-radius:1px;margin-bottom:1px}
#tip{position:absolute;z-index:14;padding:5px 8px;font-size:12px;display:none;pointer-events:none;max-width:280px}
.ov{position:fixed;top:0;left:0;width:100%;height:100%;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center}
.ov.show{display:flex}
#menuO{background:rgba(0,5,15,.97);overflow-y:auto;padding:40px 0;justify-content:flex-start;}
#pauseO{background:rgba(0,5,15,.75)}
#helpO{background:rgba(0,5,15,.95);overflow:auto;padding:25px}
#deadO{background:rgba(0,5,15,.96)}
#setO{background:rgba(0,5,15,.95);overflow:auto;padding:25px}
#wikiO{background:rgba(0,5,15,.97);overflow:hidden}
.tt{font-size:32px;color:#4ef;margin-bottom:3px;text-shadow:0 0 15px #2af}
.sb2{font-size:12px;color:#678;margin-bottom:10px}
.btn{padding:9px 26px;font-size:14px;background:#123;color:#bef;border:2px solid #345;border-radius:7px;cursor:pointer;font-family:inherit;margin:3px;transition:all .15s}
.btn:hover{background:#234;border-color:#4af}
.btn.sm{font-size:11px;padding:5px 14px}
#catSel{display:flex;gap:3px;margin:6px 0;flex-wrap:wrap;justify-content:center}
.cb{padding:4px 12px;font-size:12px;background:#012;color:#89c;border:1px solid #234;border-radius:3px;cursor:pointer;font-family:inherit;transition:all .1s}
.cb:hover{background:#123;color:#cef}
.cb.act{background:#246;color:#cef;border-color:#4af}
.scrollbox{max-height:60vh;overflow-y:auto;max-width:900px;width:100%;padding:10px;}
#spGrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px}
.scPrev{border:1px solid #1a3a55;border-radius:6px;margin-bottom:3px}
.sc{width:165px;background:#012;border:2px solid #234;border-radius:8px;padding:8px;cursor:pointer;text-align:center;transition:all .12s;position:relative}
.sc:hover{transform:scale(1.05);border-color:#4af;box-shadow:0 0 10px rgba(68,170,255,.3)}
.sc.sel{border-color:#4af;box-shadow:0 0 12px rgba(68,170,255,.4)}
.scN{color:#fff !important;text-shadow:1px 1px 3px #000 !important;font-size:12px;font-weight:bold;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;line-height:1.2;min-height:24px}
.scL{color:#fff !important;text-shadow:1px 1px 3px #000 !important;font-size:8px;font-style:italic;word-wrap:break-word}
.scC{font-size:7px;color:#fff !important;text-shadow:1px 1px 2px #000 !important;margin-top:1px}
.scP{font-size:8px;font-weight:bold;color:#aef !important;text-shadow:1px 1px 2px #000 !important;margin-top:1px}
.diff{padding:5px 14px;font-size:11px;background:#012;color:#89c;border:1px solid #234;border-radius:3px;cursor:pointer;font-family:inherit;margin:2px}
.diff:hover{background:#123;color:#cef}
.diff.act{background:#2a6;color:#fff;border-color:#4c8}
.stbl{color:#bcd;font-size:12px;border-collapse:collapse;margin:0 auto}
.stbl td{padding:3px 12px}
.stbl .lbl{text-align:right;color:#678}
.stbl .val{color:#4df;font-weight:bold}
.sr{display:flex;justify-content:space-between;width:340px;margin:4px auto;color:#bcd;font-size:12px;align-items:center}
.tg{width:34px;height:16px;background:#234;border-radius:8px;cursor:pointer;position:relative;flex-shrink:0}
.tg.on{background:#2a6}
.tg::after{content:'';width:12px;height:12px;background:#bcd;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .2s}
.tg.on::after{left:20px}
.slider-row{display:flex;justify-content:space-between;width:340px;margin:6px auto;align-items:center;font-size:12px;color:#bcd}
.slider-row input[type=range]{-webkit-appearance:none;width:140px;height:4px;background:#234;border-radius:2px;outline:none}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#4af;border-radius:50%;cursor:pointer}
.slider-row input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#4af;border-radius:50%;cursor:pointer;border:none}
.slider-val{color:#4df;font-weight:bold;min-width:40px;text-align:right}
/* CUSTOM SCROLLBARS */
.scrollbox::-webkit-scrollbar{width:8px}
.scrollbox::-webkit-scrollbar-track{background:rgba(0,10,25,.8);border-radius:4px}
.scrollbox::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1a4a6a,#0e3050);border-radius:4px;border:1px solid #2a5070}
.scrollbox::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2a6a8a,#1e4060)}
.scrollbox{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#1a4a6a rgba(0,10,25,.8)}
#wikiContent{overflow-y:auto;max-height:80vh;max-width:700px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#1a4a6a rgba(0,10,25,.8)}
#wikiContent::-webkit-scrollbar{width:8px}
#wikiContent::-webkit-scrollbar-track{background:rgba(0,10,25,.8);border-radius:4px}
#wikiContent::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1a4a6a,#0e3050);border-radius:4px}
.wiki-cat{color:#4df;font-size:16px;font-weight:bold;margin:14px 0 6px;border-bottom:1px solid #234;padding-bottom:3px}
.wiki-entry{background:rgba(0,15,35,.6);border:1px solid #234;border-radius:6px;padding:8px 12px;margin:5px 0;font-size:11px;color:#bcd;line-height:1.5}
.wiki-entry b{color:#4df}
.wiki-entry .wl{color:#789;font-style:italic;font-size:12px}
.wiki-entry .wf{color:#abc;margin-top:3px;font-size:12px}
.wiki-entry .wa{color:#d8ecff;font-size:13px;line-height:1.45;margin:6px 0 4px;white-space:normal}
.wiki-entry .wo{color:#678;font-size:10px;margin-top:3px}
.wiki-role{color:#9bb;font-size:12px;margin:0 0 8px;line-height:1.4;max-width:700px}
#wikiContent{padding:0 8px 16px}
.wiki-search{width:300px;padding:6px 10px;background:#012;border:1px solid #345;border-radius:5px;color:#cef;font-size:12px;font-family:inherit;margin-bottom:8px}
.wiki-search:focus{outline:none;border-color:#4af}

#langSelWrap {
  position: absolute; top: 18px; left: 12px; z-index: 15;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  outline: none; user-select: none;
}
.lang-curr {
  background: rgba(10, 20, 35, 0.85); border: 1px solid #2a4055;
  color: #fff; border-radius: 6px; padding: 8px 14px; cursor: pointer;
  display: flex; align-items: center; font-size: 13px; font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4); backdrop-filter: blur(5px);
  transition: background 0.2s, border-color 0.2s;
}
.lang-curr:hover { background: rgba(15, 30, 50, 0.95); border-color: #4af; }
.lang-drop {
  position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: rgba(10, 20, 35, 0.95); border: 1px solid #2a4055;
  border-radius: 6px; overflow: hidden; width: max-content; min-width: 130px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  max-height: 400px; overflow-y: auto;
}
.lang-drop::-webkit-scrollbar { width: 6px; }
.lang-drop::-webkit-scrollbar-thumb { background: #2a4055; border-radius: 3px; }
#langSelWrap:focus-within .lang-drop, #langSelWrap:hover .lang-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-item {
  padding: 10px 16px; color: #bcd; font-size: 13px; cursor: pointer;
  transition: background 0.15s, color 0.15s; border-bottom: 1px solid rgba(40, 60, 80, 0.3);
}
.lang-item:last-child { border-bottom: none; }
.lang-item:hover { background: rgba(30, 60, 90, 0.8); color: #fff; }
.lang-item.act { background: #1a4a6a; color: #4df; font-weight: bold; border-left: 3px solid #4df; padding-left: 13px; }

.dna-btn {
   background: rgba(20, 50, 100, 0.5);
   border: 1px solid rgba(100, 200, 255, 0.2);
   color: #eef;
   padding: 10px 15px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   font-family: inherit;
   font-size: 13px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.2);
   backdrop-filter: blur(4px);
}
.dna-btn:hover {
   background: rgba(40, 100, 200, 0.6);
   border-color: rgba(100, 200, 255, 0.6);
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0,0,0,0.4), 0 0 10px rgba(100,200,255,0.2);
   color: #fff;
}
.dna-btn:active {
   transform: translateY(1px);
   box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* === UI SIMPLIFICATION === */
#hud { min-width: 200px; }
#hud .stat-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; }
#abar button { font-size: 14px; padding: 10px 16px; min-width: 50px; }
#abar button:hover { transform: scale(1.1); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 3px 0; }
.stat-label { color: #8af; font-weight: bold; }
.stat-value { color: #fff; font-weight: bold; }
.section-title { color: #4af; font-size: 14px; font-weight: bold; text-transform: uppercase; margin: 8px 0 4px; border-bottom: 1px solid #234; }
/* Hide confusing ecosystem breakdown */
#ecoDetail { display: none !important; }
/* Make speed bar bigger */
#spdBar button { font-size: 14px; padding: 6px 12px; }


#tutorialLayer{display:none;position:fixed;inset:0;z-index:80;align-items:flex-end;justify-content:center;padding:0 12px 90px;background:rgba(0,8,20,.35);pointer-events:none}
#tutorialCard{max-width:520px;width:100%;background:rgba(6,18,36,.96);border:2px solid #3af;border-radius:14px;padding:18px 20px;color:#eef;box-shadow:0 12px 40px rgba(0,0,0,.55);pointer-events:auto}
#tutorialTitle{font-size:20px;font-weight:800;margin:0 0 8px;color:#7df}
#tutorialBody{font-size:15px;line-height:1.5;margin:0 0 14px;color:#dde}
#tutorialCounter{font-size:12px;color:#8ab;margin-bottom:10px}
#tutorialActions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
#tutNext,#tutSkip{pointer-events:auto;cursor:pointer;border-radius:10px;font-weight:800;font-size:15px;padding:12px 18px;border:2px solid #456;min-height:48px}
#tutNext{background:#1a6;color:#fff;border-color:#2d8}
#tutNext:hover{background:#1c7}
#tutSkip{background:#123;color:#bcd}

/* CAT FILTER FIX */
#catSel{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;z-index:20;position:relative;}
#catSel .cb{cursor:pointer!important;pointer-events:auto!important;padding:6px 10px;border-radius:6px;background:rgba(0,30,50,0.7);border:1px solid #345;font-size:12px;user-select:none;}
#catSel .cb:hover{background:rgba(30,80,60,0.85);border-color:#5a8;}
#catSel .cb.act{background:rgba(20,90,50,0.95)!important;border-color:#6d6!important;box-shadow:0 0 10px rgba(80,200,100,0.4);font-weight:700;}
#spGrid{display:flex;flex-wrap:wrap;gap:8px;max-height:48vh;overflow:auto;align-content:flex-start;}
#spGrid .sc{min-width:140px;max-width:160px;cursor:pointer;}
#bFree{background:#163!important;border-color:#4c8!important;font-weight:800;}
#camM.free{display:block!important;background:rgba(0,120,60,0.85);padding:4px 10px;border-radius:6px;font-weight:800;color:#efc;}


@media (max-width: 900px), (pointer: coarse) {
  :root { --mm-h: 50px; --pc-h: 35px; }
  #renderModeBtn { font-size: 11px !important; padding: 5px 8px !important; }
  #topRightStack { width: 120px; }
  #mm { width: 70px !important; height: 50px !important; opacity: 0.7; }
  #pc { width: 70px !important; height: 35px !important; opacity: 0.7; }
  /* narrow: lift corner stacks above actBar so they never cover .ab hit targets */
  #mmWrap, #demoTip, #scaleW, #hDivReady {
    bottom: calc(var(--actbar-bottom) + var(--actbar-h) + var(--ui-gap)) !important;
  }
  #pcWrap {
    bottom: calc(var(--actbar-bottom) + var(--actbar-h) + var(--ui-gap) + var(--mm-h) + var(--ui-gap)) !important;
  }
  body.demo-on #hDivReady {
    bottom: calc(var(--actbar-bottom) + var(--actbar-h) + var(--ui-gap) * 2 + var(--demohud-h, 54px)) !important;
  }
  #demoTip { max-width: min(240px, 70vw) !important; }
  #mmWrap, #pcWrap { width: 70px; }
  #leftContainer { width: 130px !important; gap: 4px !important; }
  #langSelWrap { width: 90px !important; font-size: 11px !important; }
  .lang-curr { padding: 4px 6px !important; font-size: 11px !important; }
  #hud { font-size: 11px !important; }
  #hud .p, #ecoP, #legP, #topR, #weatherP { font-size: 10px !important; padding: 3px 5px !important; }
  #todWrap { font-size: 10px !important; }
  /* mobile keeps actBar visible (inline display:flex from JS wins): wraps into N rows inside ONE panel (UI-RESTORE) */
  #actBar { gap: 4px !important; max-width: 96vw !important; padding: 0 4px; }
  .ab { min-width: 56px !important; min-height: 44px !important; padding: 8px 6px !important; font-size: 12px !important; }
  .ab .hk { font-size: 9px !important; }
  #tip { font-size: 11px !important; max-width: 90vw !important; }
  #camM { font-size: 10px !important; }
  /* Menu overlay */
  .ov { width: 95vw !important; max-width: 95vw !important; padding: 10px !important; }
  .tt { font-size: 18px !important; }
  .scrollbox { max-height: 40vh !important; }
  #spGrid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; gap: 4px !important; }
  #spGrid > div { font-size: 9px !important; padding: 4px !important; }
  .btn { font-size: 13px !important; padding: 8px 14px !important; }
  #diffWrap { font-size: 12px !important; }
  #catSel { font-size: 11px !important; gap: 4px !important; }
  #foodChainBar { font-size: 8px !important; padding: 4px !important; }
  .sb2 { flex-direction: column !important; gap: 6px !important; }
  #sandboxTools { font-size: 10px !important; right: 4px !important; }
}

/* Virtual joystick */
/* removed #joyZone */ {
  position: fixed; bottom: 0; left: 0;
  width: 45%; height: 55%; z-index: 100;
  touch-action: none; pointer-events: auto;
  display: none;
}
/* removed #joyBase */ {
  position: fixed; width: 110px; height: 110px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,20,40,0.3);
  z-index: 101; display: none; pointer-events: none;
  transform: translate(-50%, -50%);
}
/* removed #joyKnob */ {
  position: fixed; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(100,200,255,0.4);
  border: 2px solid rgba(150,220,255,0.6);
  z-index: 102; display: none; pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Mobile action bar */
/* removed #mActBar */ {
  position: fixed; bottom: 8px; right: 8px;
  display: none; z-index: 100;
  flex-direction: column; gap: 6px;
  touch-action: none;
}
/* removed #mActBar */ .mBtn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,30,60,0.75); border: 2px solid rgba(100,180,255,0.4);
  color: #8cf; font-size: 22px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
/* removed #mActBar */ .mBtn:active { background: rgba(60,120,200,0.7); transform: scale(0.92); }
/* removed #mActBar */ .mBtn.mWide { width: 56px; height: 40px; border-radius: 20px; font-size: 16px; }

/* Mobile top bar */
/* removed #mTopBar */ {
  position: fixed; top: 4px; right: 84px;
  display: none; z-index: 100; gap: 4px;
  flex-direction: row; touch-action: manipulation;
}
/* removed #mTopBar */ .mBtn { width: 40px; height: 40px; border-radius: 8px; font-size: 18px; }

/* start menu: one picker + always-visible Demo/Aquarium */
.menu-actions{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:100%;max-width:920px;padding:8px 6px 10px;margin:0 auto 4px;background:rgba(0,8,18,.96);border-bottom:1px solid rgba(80,140,160,.25)}
#foodChainBar,#foodChainDiagram{display:none!important}
#spGrid{max-height:42vh}
.wiki-entry .ww{margin-top:5px;font-size:12px}
.wiki-entry .ww a{color:#7cf;text-decoration:underline}

/* === UI-RESTORE-2026-09-22 zone framework === */
#leftContainer{position:absolute;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left))}
/* narrow screens: camM pill must never cross the right stack column */
@media (max-width: 560px){
  #camM{max-width:calc(50vw - var(--stack-w,120px)/2 - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.ab:focus-visible,#legToggle:focus-visible,#starSelectGame:focus-visible{outline:2px solid #5ed4a0;outline-offset:2px}

/* UI-IMPROVE-2026-09-28 F4: game-only widgets hidden over the start menu */
body.in-menu #starSelectGame, body.in-menu #apkBtn{display:none!important}

/* UI-IMPROVE-2026-09-28 F6: mobile compact bottom bar (2-3 rows, icon+hk; text only on ЕСТЬ/ДЕЛИТЬ/АВТО), hit area >=44x44 */
@media (max-width: 900px), (pointer: coarse) {
  /* left:50% makes an abs box shrink-to-fit into half the viewport (3 per row); size to content, capped at 96vw */
  #actBar { gap: 4px !important; row-gap: 4px !important; width: max-content !important; max-width: 96vw !important; }
  .ab { min-width: 44px !important; min-height: 44px !important; padding: 4px 4px !important; font-size: 11px !important; line-height: 1.1; }
  .ab:not(.ab-keep) .abt { display: none !important; }
  .ab[data-ico]:not(.ab-keep)::before { content: attr(data-ico); font-size: 18px; line-height: 1; }
  .ab .hk { font-size: 9px !important; }
}
/* UI-IMPROVE-2026-09-28 F7: first-run pulse of the «Клавиши» chip (one run, <=2s) */
@keyframes khPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(68,170,255,0); } 50% { box-shadow: 0 0 0 6px rgba(68,170,255,.55); } }
#khToggle.kh-pulse { animation: khPulse 1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { #khToggle.kh-pulse { animation: none; } }