:root{--ink:#3a2410;--cream:rgba(255,248,230,.92);--orange:#f7931a;--orange2:#ffb347;--teal:#1f7f9f;--good:#3f9a47;--bad:#d9533a;--r:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1f7f9f;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
canvas#game.dragging{cursor:grabbing}
canvas#game.placing{cursor:crosshair}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
#boot{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#2b9fb8,#14566e);display:grid;place-items:center;z-index:99;color:#fff;font-size:28px;font-weight:800;text-align:center;letter-spacing:.5px}
#boot small{display:block;font-size:13px;font-weight:500;opacity:.8;margin-top:6px}
#boot.out{opacity:0;pointer-events:none;transition:opacity .6s}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5;padding-top:env(safe-area-inset-top)}
#hud>*{pointer-events:auto}
#top{position:absolute;left:8px;right:8px;top:8px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
#top>*{pointer-events:auto}
.chip{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:5px;align-items:center;background:var(--cream);border:1.5px solid rgba(90,55,15,.35);border-radius:12px;padding:3px 9px 3px 7px;box-shadow:0 2px 8px rgba(40,25,5,.25);backdrop-filter:blur(6px);text-align:left;min-width:0}
.chip i{grid-row:1/3;font-style:normal;font-size:18px;line-height:1}
.chip b{font-size:14px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip small{font-size:10.5px;opacity:.7;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.warn{border-color:var(--bad);background:#ffe9e0}.chip.warn b{color:#b02f18}
.chip.good b{color:#2b7a34}
.chip.static{cursor:default}
#age{position:absolute;left:8px;top:calc(8px + 44px);display:flex;align-items:center;gap:8px;background:var(--cream);border:1.5px solid rgba(90,55,15,.35);border-radius:10px;padding:4px 10px;font-size:11.5px;font-weight:700;box-shadow:0 2px 8px rgba(40,25,5,.2);max-width:calc(100vw - 80px)}
#age .bar{width:90px;height:7px;border-radius:5px;background:rgba(90,55,15,.2);overflow:hidden;display:block}
#age-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffd23f);border-radius:5px;transition:width .5s}
#age.ready{animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(247,147,26,.45)}}
#side{position:absolute;right:8px;top:62px;display:flex;flex-direction:column;gap:6px}
.tool{width:46px;height:46px;border-radius:13px;background:var(--cream);border:1.5px solid rgba(90,55,15,.35);box-shadow:0 2px 8px rgba(40,25,5,.25);font-size:19px;display:grid;place-items:center;line-height:1;padding-top:3px}
.tool small{font-size:9px;font-weight:700;opacity:.65;margin-top:-1px}
.tool.on{background:var(--orange);color:#fff;border-color:#b86400}
#quest{position:absolute;left:8px;top:calc(8px + 44px + 34px);display:flex;gap:8px;align-items:flex-start;max-width:min(300px,calc(100vw - 80px));background:rgba(20,50,70,.82);color:#e8fbff;border:1.5px solid rgba(127,227,255,.6);border-radius:12px;padding:7px 8px;box-shadow:0 0 18px rgba(127,227,255,.25);backdrop-filter:blur(6px)}
#quest canvas{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 4px #7fe3ff) hue-rotate(0deg);border-radius:8px;background:rgba(127,227,255,.12);animation:holo 3s infinite}
@keyframes holo{50%{opacity:.78}}
.qtxt{font-size:12.5px;line-height:1.3;min-width:0;flex:1}
.qtxt small{display:block;font-size:9.5px;letter-spacing:1.5px;color:#7fe3ff;font-weight:800}
#q-prog{font-size:11px;color:#ffd27a;margin-top:2px}
#q-x{color:#7fe3ff;font-size:18px;line-height:1;padding:0 3px}
#quest.min .qtxt>div{display:none}#quest.min{padding:4px 8px}#quest.min canvas{width:26px;height:26px}
#toasts{position:absolute;left:50%;transform:translateX(-50%);top:calc(8px + 44px + 78px);display:flex;flex-direction:column;gap:5px;align-items:center;pointer-events:none;width:min(420px,92vw)}
.toast{background:rgba(40,25,8,.88);color:#fff;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600;box-shadow:0 3px 10px rgba(0,0,0,.3);animation:tin .25s,tout .4s 3.6s forwards;border-left:4px solid var(--orange)}
.toast.good{border-left-color:#7bd88f}.toast.bad{border-left-color:#ff6a50;background:rgba(80,20,10,.9)}
@keyframes tin{from{transform:translateY(-8px);opacity:0}}@keyframes tout{to{opacity:0;transform:translateY(-6px)}}
#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(112px + env(safe-area-inset-bottom));background:rgba(40,25,8,.9);color:#fff;border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:600;white-space:normal;text-align:center;line-height:1.3;max-width:min(94vw,520px)}#hint small{font-weight:500;opacity:.85;font-size:11px}
#hint.bad{background:rgba(120,25,10,.92)}
#confirm{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom));display:flex;gap:8px}
#confirm button{background:var(--orange);color:#fff;font-weight:800;border-radius:12px;padding:10px 16px;box-shadow:0 3px 10px rgba(0,0,0,.35);font-size:15px}
#confirm #cf-no{background:#7a4a32;padding:10px 14px}
#confirm button:disabled{background:#a89a88;opacity:.8}
#cf-cost{font-weight:600;opacity:.9;font-size:12px}
#buildbar{position:absolute;left:0;right:0;bottom:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(0deg,rgba(20,45,60,.55),rgba(20,45,60,0))}
#buildbar::-webkit-scrollbar{display:none}
.bcard{flex:none;width:84px;background:var(--cream);border:1.5px solid rgba(90,55,15,.35);border-radius:13px;padding:3px 3px 5px;text-align:center;box-shadow:0 2px 8px rgba(40,25,5,.25);position:relative}
.bcard img{width:60px;height:60px;display:block;margin:0 auto -2px;pointer-events:none}
.bcard b{display:block;font-size:11.5px;line-height:1.15}
.bcard small{display:block;font-size:10.5px;color:#7a4a10;font-weight:700;font-variant-numeric:tabular-nums}
.bcard.sel{background:#fff1cf;border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,147,26,.55),0 2px 8px rgba(40,25,5,.25)}
.bcard.poor{opacity:.55}.bcard.poor small{color:#b02f18}
.bcard .tag{position:absolute;top:2px;right:3px;font-size:9px;font-weight:800;background:#4b5563;color:#fff;border-radius:6px;padding:1px 4px}
.bcard .tag.zone{background:#2b7a34}.bcard .tag.bad{background:#b02f18}

#sheet{position:fixed;z-index:20;right:10px;top:62px;width:350px;max-height:calc(100vh - 196px);overflow:auto;background:var(--cream);border:1.5px solid rgba(90,55,15,.45);border-radius:16px;box-shadow:0 8px 30px rgba(20,10,0,.45);backdrop-filter:blur(8px);padding:0 0 10px;touch-action:pan-y;user-select:text}
.sh-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 12px 8px;background:var(--cream);font-size:15px;border-bottom:1px solid rgba(90,55,15,.15);z-index:2}
#sh-x{font-size:16px;opacity:.7;padding:2px 8px}
#sh-body{padding:8px 12px;font-size:13px;line-height:1.4}
#sh-body h4{margin:10px 0 4px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;opacity:.65}
.row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(90,55,15,.15)}
.row:last-child{border:0}
.row .grow{flex:1;min-width:0}
.row small{display:block;opacity:.65;font-size:11.5px}
.pm{display:flex;align-items:center;gap:6px}
.pm button{width:30px;height:30px;border-radius:9px;background:var(--orange);color:#fff;font-weight:900;font-size:18px;line-height:1}
.pm button:disabled{background:#c9bba6}
.pm b{min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.btn{display:block;width:100%;background:var(--orange);color:#fff;font-weight:800;padding:10px;border-radius:11px;margin-top:8px;text-align:center;font-size:14px}
.btn.sec{background:#7a4a32}.btn.ghost{background:rgba(90,55,15,.12);color:var(--ink)}.btn.red{background:#b02f18}
.btn:disabled{background:#c9bba6;color:#fff}
.meter{height:9px;border-radius:6px;background:rgba(90,55,15,.18);overflow:hidden;margin-top:3px}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#ffd23f);border-radius:6px}
.meter.g>i{background:linear-gradient(90deg,#3f9a47,#9be07a)}
.pill{display:inline-block;border-radius:8px;padding:1px 7px;font-size:11px;font-weight:800;background:rgba(90,55,15,.14)}
.pill.g{background:#d6f1d0;color:#256b2c}.pill.r{background:#ffd9cf;color:#a22a14}.pill.o{background:#ffe3b8;color:#8a4a00}
.pos{color:#2b7a34;font-weight:700}.neg{color:#b02f18;font-weight:700}
.kv{display:flex;justify-content:space-between;padding:3px 0}
.chain-block{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px;margin:2px 0;background:rgba(90,55,15,.07);font-size:12.5px}
.chain-block.mine{background:linear-gradient(90deg,#ffe3b8,#fff1cf);font-weight:700}

#banner{position:fixed;left:0;right:0;top:26%;z-index:30;text-align:center;pointer-events:none;animation:ban 3.6s forwards}
#banner .b1{display:inline-block;font-size:clamp(26px,6vw,54px);font-weight:900;color:#fff;letter-spacing:1px;text-shadow:0 3px 0 #b86400,0 0 24px rgba(247,147,26,.9),0 6px 20px rgba(0,0,0,.4);background:linear-gradient(90deg,transparent,rgba(247,147,26,.55),transparent);padding:6px 60px}
#banner .b2{margin-top:6px;font-size:clamp(14px,3.2vw,22px);font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
@keyframes ban{0%{opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1.05)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
#modal{position:fixed;inset:0;z-index:40;background:rgba(15,30,40,.55);display:grid;place-items:center;backdrop-filter:blur(3px);padding:14px}
#modal .card{background:var(--cream);border-radius:18px;padding:18px;max-width:420px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.5);max-height:88vh;overflow:auto;user-select:text}
#modal h3{margin:0 0 8px;font-size:19px}
#modal p{margin:6px 0;font-size:14px;line-height:1.45}

#intro{position:fixed;inset:0;z-index:50;background:#0b1620}
#introCv{position:absolute;inset:0;width:100%;height:100%;display:block}
#dlg{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));width:min(720px,94vw);background:rgba(18,28,38,.9);color:#fff;border:1.5px solid rgba(247,147,26,.8);border-radius:16px;padding:12px 16px 12px;box-shadow:0 10px 40px rgba(0,0,0,.5);min-height:96px;cursor:pointer}
#dlg-name{font-weight:900;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange2);margin-bottom:4px}
#dlg-text{font-size:clamp(14px,2.4vw,18px);line-height:1.45;min-height:3em}
#dlg-next{position:absolute;right:14px;bottom:8px;font-size:12px;opacity:.7;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
#skip{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:7px 12px;font-weight:700;font-size:13px;z-index:3}

#landcap{position:fixed;left:0;right:0;bottom:16%;text-align:center;z-index:12;pointer-events:none;color:#fff;font-weight:800;font-size:clamp(18px,4vw,30px);text-shadow:0 2px 12px rgba(0,0,0,.65);animation:ban 4s forwards}
body.landing #hud{opacity:0;pointer-events:none}
#hud{transition:opacity .8s}

@media (max-width:640px){
  #top{gap:4px;left:6px;right:6px}
  .chip{padding:2px 6px 2px 5px;column-gap:3px;border-radius:10px}.chip i{font-size:15px}.chip b{font-size:12.5px}.chip small{font-size:9.5px}
  #c-time{display:none}
  #age{top:calc(6px + 82px);left:6px;font-size:10.5px}#age .bar{width:70px}
  #quest{top:calc(6px + 82px + 30px);left:6px;max-width:calc(100vw - 66px)}
  #toasts{top:calc(6px + 82px + 96px)}
  #side{right:6px;top:calc(6px + 82px)}
  .tool{width:42px;height:42px;font-size:17px}
  #sheet{left:6px;right:6px;top:auto;bottom:6px;width:auto;max-height:60vh;border-radius:16px 16px 12px 12px}
  .bcard{width:76px}.bcard img{width:52px;height:52px}
  #hint{bottom:calc(104px + env(safe-area-inset-bottom));font-size:11.5px}
  #confirm{bottom:calc(140px + env(safe-area-inset-bottom))}
}
@media (max-height:560px) and (min-width:641px){ #sheet{max-height:calc(100vh - 80px)} .bcard img{width:46px;height:46px} .bcard{width:76px} #quest{display:none} }
.clim{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:2px}
.clim small{color:#5b6470;font-size:12px;line-height:1.35}

/* ===== Phase 1: Mining & Energie ===== */
.bcard.locked{opacity:.8;filter:saturate(.35)}.bcard.locked img{opacity:.55}.bcard.locked small{color:#5b6470;font-size:9.5px}
.bcard .lock{display:none;position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.bcard.locked .lock{display:block}
.bcard .tag.mine{background:#c26a00}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0}
.stat{background:rgba(90,55,15,.07);border-radius:10px;padding:5px 8px}.stat small{display:block;font-size:10.5px;opacity:.65}.stat b{font-size:13.5px;font-variant-numeric:tabular-nums}
.crew{display:flex;align-items:center;justify-content:space-between;gap:8px}
.slots{display:flex;gap:6px;flex-wrap:wrap}
.slot{width:34px;height:34px;border-radius:10px;border:2px dashed rgba(90,55,15,.35);display:grid;place-items:center;font-size:18px;background:rgba(90,55,15,.05)}
.slot.on{border-style:solid;border-color:var(--orange);background:#fff1cf}
.pips{display:flex;gap:5px;margin:2px 0 6px}.pips i{width:26px;height:8px;border-radius:5px;background:rgba(90,55,15,.2)}.pips i.on{background:linear-gradient(90deg,var(--orange),#ffd23f)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0}.modes.two{grid-template-columns:1fr 1fr}
.mode{background:rgba(90,55,15,.08);border:2px solid transparent;border-radius:11px;padding:6px 4px;text-align:center;font-size:18px;line-height:1.1}
.mode b{display:block;font-size:12px}.mode small{display:block;font-size:10px;opacity:.7}
.mode.on{background:#fff1cf;border-color:var(--orange)}.mode:disabled{opacity:.45}
.note{display:block;font-size:11.5px;opacity:.78;margin:3px 0;line-height:1.35}
.dock{display:flex;gap:8px;align-items:flex-start;background:linear-gradient(90deg,rgba(63,154,71,.12),rgba(63,154,71,.03));border-left:3px solid #3f9a47;border-radius:8px;padding:6px 8px;margin:5px 0}
.dock>i{font-style:normal;font-size:20px}.dock small{display:block;font-size:11.5px;opacity:.85;line-height:1.35;margin-top:2px}

/* Boss-Hologramm-Menü */
#boss{position:absolute;right:8px;bottom:calc(128px + env(safe-area-inset-bottom));width:60px;height:68px;border-radius:16px;background:radial-gradient(circle at 50% 70%,rgba(255,214,120,.35),rgba(20,28,40,.88));border:1.5px solid rgba(255,214,120,.7);box-shadow:0 0 16px rgba(255,200,90,.45);display:grid;place-items:center;color:#ffe2a0;overflow:hidden}
#boss canvas{width:46px;height:46px;margin-top:2px}#boss small{font-size:8.5px;font-weight:800;letter-spacing:1.5px;margin-top:-6px;display:block}
#boss.on{box-shadow:0 0 0 3px rgba(255,214,120,.5),0 0 24px rgba(255,200,90,.7)}
#bossmenu{position:absolute;right:8px;bottom:calc(204px + env(safe-area-inset-bottom));width:min(300px,calc(100vw - 16px));background:linear-gradient(180deg,rgba(14,30,46,.94),rgba(10,20,34,.96));border:1.5px solid rgba(255,214,120,.7);border-radius:16px;padding:10px;color:#e8fbff;box-shadow:0 0 30px rgba(255,200,90,.3),0 10px 30px rgba(0,0,0,.5);animation:bm .25s}
@keyframes bm{from{opacity:0;transform:translateY(12px) scale(.96)}}
.bm-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;color:#ffd78a;margin-bottom:8px}.bm-head button{color:#ffd78a;font-size:15px}
#boss-items{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.bi{background:rgba(127,227,255,.1);border:1px solid rgba(127,227,255,.5);border-radius:12px;padding:8px 2px;color:#e8fbff;text-align:center;position:relative}
.bi i{display:block;font-style:normal;font-size:22px}.bi b{font-size:11px;display:block}.bi small{position:absolute;top:2px;right:3px;font-size:8px;background:#6b7a8a;border-radius:5px;padding:0 4px}
.bi.soon{opacity:.62;border-style:dashed}

/* Nina-Hologramm-Karte */
#nina{position:absolute;left:8px;bottom:calc(132px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-end;max-width:min(470px,calc(100vw - 84px));animation:nin .35s;pointer-events:auto}
@keyframes nin{from{opacity:0;transform:translateY(16px)}}
#nina-cv{width:96px;height:96px;flex:none;filter:drop-shadow(0 0 8px #4cc9f0);animation:holo 2.4s infinite;margin-bottom:-6px}
#nina .nn{background:linear-gradient(180deg,rgba(10,32,50,.93),rgba(8,20,36,.95));border:1.5px solid rgba(127,227,255,.8);border-radius:14px 14px 14px 4px;padding:8px 11px 9px;color:#e8fbff;box-shadow:0 0 22px rgba(76,201,240,.45),0 6px 20px rgba(0,0,0,.45);min-width:0;position:relative;overflow:hidden}
#nina .nn::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(127,227,255,.05) 0 1px,transparent 1px 4px);pointer-events:none}
.nn-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px}.nn-h b{font-size:12.5px;color:#7fe3ff;letter-spacing:.5px}.nn-h i{font-style:normal;font-size:8.5px;letter-spacing:2px;color:#4a8aa6}
#nina-txt{font-size:13px;line-height:1.42}#nina-txt b{color:#ffd27a}
.nn-b{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.nn-b button{font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:9px;background:rgba(127,227,255,.18);color:#e8fbff;border:1px solid rgba(127,227,255,.5)}#nina-ok{background:#1f9fc0!important;border-color:#7fe3ff!important}
body.nina-on #quest{display:none}
body.nina-on #hint{bottom:calc(244px + env(safe-area-inset-bottom))}

/* Forschungslabor */
#lab{position:fixed;inset:0;z-index:25;background:rgba(6,16,26,.62);backdrop-filter:blur(4px);display:grid;place-items:center;padding:10px}
.lab-card{width:min(1120px,100%);height:min(88vh,780px);background:linear-gradient(180deg,#0d2236,#09172a);color:#dff6ff;border:1.5px solid rgba(127,227,255,.7);border-radius:18px;box-shadow:0 0 40px rgba(76,201,240,.3),0 14px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;user-select:text}
.lab-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(127,227,255,.25);font-size:16px}
.lab-head .rp{margin-left:auto;font-size:12.5px;color:#7fe3ff;font-variant-numeric:tabular-nums}.lab-head button{font-size:18px;color:#7fe3ff;padding:0 6px}
.lcur{padding:7px 14px;font-size:12.5px;background:rgba(127,227,255,.07);border-bottom:1px solid rgba(127,227,255,.15)}.lcur.idle{opacity:.7}
.lcur .meter{background:rgba(127,227,255,.18);height:8px}.lcur .meter>i{background:linear-gradient(90deg,#1f9fc0,#7fe3ff)}.lcur small{opacity:.7}
.lcrew{padding:5px 14px;font-size:12.5px;border-bottom:1px solid rgba(127,227,255,.15);color:#cfeaf5}.lcrew summary{cursor:pointer}.lcrew small{opacity:.6}.lcrew.warn{color:#ffd27a}
.lcrew .stats,.lcrew .slot,.lcrew .mode,.lcrew .stat{color:#dff6ff}.lcrew .slot{background:rgba(127,227,255,.08);border-color:rgba(127,227,255,.4)}.lcrew .slot.on{background:rgba(76,201,240,.3);border-color:#7fe3ff}.lcrew h4{margin:8px 0 3px;font-size:11px;letter-spacing:1px;opacity:.7;text-transform:uppercase}.lcrew .pips i{background:rgba(127,227,255,.2)}.lcrew .btn{background:#1f9fc0}.lcrew .btn.sec,.lcrew .btn.ghost{background:rgba(127,227,255,.14);color:#dff6ff}.lcrew .note{color:#cfeaf5}
.ltabs{display:flex;gap:6px;padding:8px 14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(127,227,255,.15)}.ltabs::-webkit-scrollbar{display:none}
.ltab{flex:none;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:11px;background:rgba(127,227,255,.07);border:1.5px solid rgba(127,227,255,.2);color:#cfeaf5;font-size:12.5px}.ltab i{font-style:normal;font-size:16px}.ltab small{opacity:.6;font-size:10.5px}
.ltab.on{background:rgba(76,201,240,.22);border-color:var(--c,#7fe3ff);box-shadow:0 0 10px rgba(76,201,240,.35)}
.lab-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,2fr) 3fr}
.lab-tree{overflow:auto;padding:10px 12px;border-right:1px solid rgba(127,227,255,.2)}
.blurb{margin:0 0 8px;font-size:12px;line-height:1.4;opacity:.75}
.trow{display:flex;gap:8px;align-items:flex-start;margin:6px 0}.trow>em{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(127,227,255,.14);font-style:normal;font-size:11px;display:grid;place-items:center;margin-top:12px;color:#7fe3ff}
.trow>div{display:flex;flex-wrap:wrap;gap:7px;flex:1}
.node{position:relative;overflow:hidden;width:calc(50% - 4px);min-width:128px;text-align:left;padding:7px 9px;border-radius:12px;background:rgba(127,227,255,.07);border:1.5px solid rgba(127,227,255,.28);color:#dff6ff;display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center}
.node i{grid-row:1/3;font-style:normal;font-size:20px}.node b{font-size:12.5px;line-height:1.15}.node small{font-size:10.5px;opacity:.65}
.node.done{background:rgba(63,154,71,.2);border-color:#5bd070}.node.active{border-color:#ffd27a;background:rgba(255,200,90,.14)}.node.locked,.node.soon{opacity:.55}.node.open{border-color:var(--c,#7fe3ff)}
.node.sel{box-shadow:0 0 0 2px #fff,0 0 14px rgba(127,227,255,.8)}.node .np{position:absolute;left:0;bottom:0;height:3px;background:#ffd27a}.node .lk{position:absolute;top:3px;right:5px;font-size:10px}
.lab-det{overflow:auto;padding:12px 16px 18px;font-size:13.5px;line-height:1.5}
.dhead{display:flex;gap:12px;align-items:center;margin-bottom:6px}.dic{font-size:34px;width:54px;height:54px;border-radius:14px;background:rgba(127,227,255,.12);border:1.5px solid var(--c,#7fe3ff);display:grid;place-items:center}
.dhead h3{margin:0;font-size:20px}.dhead small{opacity:.75}
.lab-det .short{font-size:14.5px;color:#fff;margin:6px 0 10px}
.lab-det h4{margin:14px 0 4px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#7fe3ff}
.lab-det p{margin:4px 0}
.kvs{display:grid;grid-template-columns:auto auto 1fr;gap:6px 18px;background:rgba(127,227,255,.07);border-radius:11px;padding:8px 12px}.kvs small{display:block;opacity:.6;font-size:10.5px}.kvs b{font-size:15px}
ul.brings,ul.facts{margin:4px 0;padding:0;list-style:none}
ul.brings li{padding:4px 0 4px 22px;position:relative}ul.brings li::before{content:"▸";position:absolute;left:5px;color:#ffd27a}ul.brings li.unl{color:#9be07a}ul.brings li.unl::before{content:""}
ul.facts li{padding:6px 10px 6px 12px;margin:5px 0;border-left:3px solid #f7931a;background:rgba(247,147,26,.09);border-radius:0 9px 9px 0}
.ninaq{display:flex;gap:10px;align-items:center;margin:14px 0 10px;padding:8px 10px;background:rgba(76,201,240,.1);border:1px dashed rgba(127,227,255,.5);border-radius:12px;font-size:12.5px;font-style:italic}.ninaq canvas{width:44px;height:44px;flex:none;filter:drop-shadow(0 0 4px #7fe3ff)}.ninaq small{display:block;font-style:normal;font-weight:800;letter-spacing:1.5px;color:#7fe3ff;font-size:9.5px}
.lab-det .btn{background:#1f9fc0;max-width:420px}.lab-det .btn:disabled{background:#3a5568;color:#9fb7c8}.lab-det .btn.red{background:#b02f18}
.lab-det .pill{background:rgba(127,227,255,.15)}.lab-det .pill.g{background:#1d5a2a;color:#9be07a}.lab-det .pill.r{background:#5a2218;color:#ffb3a0}.lab-det .pill.o{background:#5a4210;color:#ffd27a}
.lab-det .neg{color:#ff9a85}
@media (max-width:760px){
  #lab{padding:0}.lab-card{height:100vh;border-radius:0;border:0}
  .lab-main{grid-template-columns:1fr;grid-template-rows:minmax(130px,38%) 1fr}
  .lab-tree{border-right:0;border-bottom:1px solid rgba(127,227,255,.2);padding:6px 10px}.node{min-width:0;width:calc(50% - 4px);padding:5px 7px}.node i{font-size:17px}
  .kvs{grid-template-columns:auto auto;}.kvs>div:last-child{grid-column:1/-1}
  .lab-det{padding:10px 12px 20px}
  #nina{left:6px;max-width:calc(100vw - 76px)}#nina-cv{width:64px;height:64px}#nina-txt{font-size:12.5px}
  #boss{right:6px;width:54px;height:62px}#boss canvas{width:40px;height:40px}
  #bossmenu{right:6px;bottom:calc(196px + env(safe-area-inset-bottom))}
  #side{gap:4px}.tool{width:40px;height:40px}.tool small{display:none}
  #side .tool:nth-child(1) small{display:block}
}

/* Intro (Story + Video) */
#intro{background:#02060f}
#introVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
#intro.vid #introVid{opacity:1}#intro.vid #dlg,#intro.vid #intro-prog{display:none}
#intro-cap{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));text-align:center;color:#eaffff;font:700 13px "Courier New",monospace;letter-spacing:3px;text-shadow:0 0 10px #4cc9f0;opacity:0;pointer-events:none}
#intro.vid #intro-cap{opacity:1;animation:capin 1.2s}
@keyframes capin{from{opacity:0;transform:translateY(8px)}}
#intro-prog{position:absolute;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top));display:flex;gap:6px}
#intro-prog i{width:34px;height:3px;border-radius:2px;background:rgba(127,227,255,.25)}#intro-prog i.d{background:rgba(127,227,255,.7)}#intro-prog i.on{background:#fff;box-shadow:0 0 8px #7fe3ff}
#intro #dlg{background:linear-gradient(180deg,rgba(6,22,38,.9),rgba(4,12,24,.94));border:1.5px solid rgba(127,227,255,.75);box-shadow:0 0 24px rgba(76,201,240,.35);backdrop-filter:blur(4px)}
#intro #dlg-name{color:#7fe3ff;font-family:"Courier New",monospace;letter-spacing:3px;font-size:11.5px}
#intro #skip{background:rgba(127,227,255,.12);border-color:rgba(127,227,255,.55);font-family:"Courier New",monospace;font-size:12px;z-index:3}
