/* MUTANT / BLACK LAB G02 — one-room first-person visual block */
:root{color-scheme:dark;--purple:#190d24;--black:#080810;--acid:#dfff61;--pink:#ff59bc;--violet:#ad6ddd;--cream:#fff3ed;--quiet:#c3afc9;--mono:ui-monospace,'SFMono-Regular',Consolas,monospace;--ui:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--heavy:Impact,'Arial Black',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a0710;color:var(--cream);font-family:var(--ui)}
button{font:inherit}
[hidden]{display:none!important}
.play{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at center,#2a1430,#080811 75%)}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 30%,#07061155 72%,#05030aaf 100%);mix-blend-mode:multiply}
.play::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:10;opacity:.19;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#00000047 4px);mix-blend-mode:multiply}
.hud-top{position:absolute;z-index:12;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px 25px 11px;gap:12px;pointer-events:none;background:linear-gradient(#10081fba,transparent)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:46px;display:flex;align-items:center;justify-content:center;transform:skew(-6deg) rotate(-6deg);background:var(--acid);color:#170d20;font:900 18px var(--heavy);box-shadow:4px 5px 0 var(--pink)}
.brand b{display:block;font:900 26px/1 var(--heavy);letter-spacing:.015em}
.brand em{font-style:normal;color:var(--pink)}
.brand small{display:block;margin-top:6px;color:#d6c0e1;font:750 9px/1.2 var(--mono);letter-spacing:.12em}
.top-right{display:flex;align-items:center;gap:9px}
.experiment,.private-pill{border:1px solid #c9a4e56a;background:#130d20db;padding:8px 11px;font:800 10px/1.1 var(--mono);letter-spacing:.035em}
.experiment{color:var(--acid)}
.experiment i{display:inline-block;border-radius:50%;width:7px;height:7px;margin-right:7px;background:#9aff8f;box-shadow:0 0 9px #94fa68}
.private-pill{color:#e1a6dd;border-color:#a64e9a7c}
.top-line{position:absolute;z-index:11;top:87px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #d8ff6970;border-bottom:1px solid #c0a0d930;background:#0a0a11a1;padding:9px 12px;gap:10px;color:#e2ff9a;font:850 9px/1.4 var(--mono);letter-spacing:.07em;pointer-events:none}
.top-line span:nth-child(2){color:#d0accf}
.reticle{position:absolute;z-index:8;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none;opacity:.8}
.reticle::before{content:"";position:absolute;left:9px;top:9px;width:4px;height:4px;background:#e4ffa6;border-radius:50%;box-shadow:0 0 9px #dfff87c4}
.reticle i:first-child{position:absolute;width:1px;height:22px;left:11px;background:linear-gradient(transparent,#ffffffa8 33%,transparent 33%,transparent 67%,#ffffffa8 67%,transparent)}
.reticle i:last-child{position:absolute;height:1px;width:22px;top:11px;background:linear-gradient(90deg,transparent,#ffffffa8 33%,transparent 33%,transparent 67%,#ffffffa8 67%,transparent)}
.play[data-target] .reticle{filter:drop-shadow(0 0 6px #cfff70)}
.point-label{position:absolute;z-index:13;left:50%;top:calc(50% + 32px);transform:translateX(-50%);min-width:200px;max-width:min(400px,88vw);padding:8px 14px;text-align:center;border:1px solid var(--acid);background:#150b23df;box-shadow:4px 4px 0 #e746a8b0;pointer-events:none}
.point-label b{display:block;color:#fff;font:900 14px var(--heavy);letter-spacing:.07em}
.point-label span{display:block;margin-top:4px;color:var(--acid);font:800 10px var(--mono)}
.hud-bottom{position:absolute;left:20px;right:20px;bottom:18px;z-index:12;display:flex;align-items:end;justify-content:space-between;gap:20px;pointer-events:none}
.nex-line{width:min(580px,52vw);display:flex;align-items:center;gap:12px;border:1px solid #dfff6e;background:linear-gradient(100deg,#ffe89eeb,#f5bca2df);box-shadow:5px 6px 0 #c856c9;padding:11px 14px;color:#25102c;min-height:80px}
.nex-icon{min-width:48px;height:48px;border-radius:8px;border:2px solid #5c2743;display:grid;place-items:center;font:950 13px var(--heavy);color:#fff;background:radial-gradient(circle at 30% 25%,#ad599a,#421d5c)}
.nex-line span{font:850 9px var(--mono);color:#7b3660;letter-spacing:.06em}
.nex-line p{margin:5px 0 0;font:850 13px/1.35 var(--ui);max-width:475px}
.right-bottom{text-align:right;max-width:48vw}
.readouts{display:flex;justify-content:flex-end;gap:9px;margin-bottom:10px}
.readouts div{min-width:140px;border:1px solid #a365d69c;background:#140d25e6;padding:8px 10px}
.readouts small{display:block;color:#d9a6d0;font:750 9px var(--mono)}
.readouts b{color:#dbff7c;font:950 12px var(--mono)}
.controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.controls span{border:1px solid #b499cb6a;background:#110a1ccf;padding:5px 8px;font:700 9px/1 var(--mono);color:#edd9ee}
.toast{position:absolute;z-index:31;top:145px;left:50%;transform:translateX(-50%);max-width:min(560px,90vw);background:#161023;border:1px solid #e27ac5;padding:13px 16px;color:#fbe7f5;font:750 12px/1.6 var(--mono);box-shadow:5px 5px 0 #c7368caa}
.start-screen{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at center,#100923dc,#080711f3 75%);backdrop-filter:blur(6px)}
.start-frame{position:relative;width:min(800px,100%);padding:35px 42px 28px;border:2px solid var(--acid);background:linear-gradient(140deg,#2d173ddf 0%,#130b1be5 73%);box-shadow:8px 9px 0 #fa48b9,0 30px 80px #0009;max-height:94vh;overflow:auto}
.top-note{color:#ebade3;font:850 10px var(--mono);letter-spacing:.10em}
.start-frame h1{margin:17px 0 12px;font:950 clamp(48px,7vw,103px)/.9 var(--heavy);letter-spacing:-.01em;text-transform:uppercase}
.start-frame h1 span{color:var(--acid)}
.start-frame p{color:#e6d1ed;font:550 15px/1.6 var(--ui);max-width:630px}
.start-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0}
.start-legend span{padding:14px 12px;border:1px solid #9f6cab9e;background:#1a1226;font:850 11px var(--mono)}
.start-legend strong{margin-right:7px;color:var(--pink)}
.enter{display:block;width:100%;padding:17px 15px;background:var(--acid);color:#1b1121;font:950 17px var(--mono);letter-spacing:.04em;box-shadow:5px 5px 0 #e643aa;border:0;cursor:pointer}
.enter:disabled{opacity:.47;cursor:progress;box-shadow:none}
.enter:not(:disabled):hover{filter:brightness(1.09)}
.load-state{margin-top:12px;color:#cbb4cf;font:800 11px/1.5 var(--mono);min-height:18px}
.start-keys,.start-footer{display:block;margin-top:16px;color:#dcbeda;font:700 10px/1.7 var(--mono)}
.start-footer{padding-top:12px;border-top:1px solid #b5a2c658;color:#ec91d7}
.modal-backdrop{position:absolute;z-index:26;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#05040dcc;backdrop-filter:blur(5px)}
.station-panel{position:relative;width:min(590px,100%);padding:32px 33px;border:2px solid #dfff7a;background:linear-gradient(135deg,#2e173f,#110b1e);box-shadow:8px 8px 0 #f04fb5;max-height:95vh;overflow:auto}
.panel-kicker{color:#f7acd7;font:850 11px/1.2 var(--mono)}
.station-panel h2{font:950 clamp(33px,5.3vw,60px)/.95 var(--heavy);margin:17px 0;color:var(--acid)}
.station-panel p{line-height:1.7;color:#e6d7eb}
.panel-ledger{border-top:1px solid #ab6fb6;border-bottom:1px solid #ab6fb6;padding:17px 10px;color:#ffb9dc;font:800 11px/1.5 var(--mono);margin:23px 0}
.panel-confirm{padding:14px 17px;background:var(--acid);border:0;color:#150a1e;font:950 12px var(--mono);cursor:pointer;width:100%}
.panel-close{position:absolute;right:16px;top:12px;background:transparent;border:1px solid #ab87b9;color:white;width:32px;height:32px;cursor:pointer;font-size:22px}
.fatal{position:absolute;z-index:50;left:50%;bottom:8%;transform:translateX(-50%);width:min(550px,90vw);border:2px solid #fa628f;background:#2a0e24ed;padding:20px;color:#fff;box-shadow:5px 5px 0 #c34480}
.fatal strong{font:950 16px var(--mono);color:#ffc9db}
.fatal p{font-size:13px;line-height:1.5}
.touch{display:none}
@media(max-width:920px){.top-line span:nth-child(2){display:none}.hud-bottom{bottom:12px}.readouts div{min-width:100px}.nex-line{width:min(450px,53vw)}}
@media(max-width:670px){
 .hud-top{padding:11px 12px;align-items:flex-start}
 .brand-mark{width:33px;height:36px;font-size:13px}
 .brand b{font-size:19px}.brand small{font-size:8px;max-width:180px}
 .top-right{flex-direction:column;align-items:flex-end;gap:3px}
 .experiment,.private-pill{font-size:7px;padding:5px 6px}
 .top-line{top:68px;left:10px;right:10px;font-size:7px;padding:6px}
 .top-line span:nth-child(3){display:none}
 .hud-bottom{left:9px;right:9px;bottom:calc(11px + env(safe-area-inset-bottom));display:block}
 .nex-line{width:min(100%,440px);min-height:62px;padding:7px 9px;margin:0 0 8px;font-size:11px}
 .nex-icon{height:37px;min-width:37px;font-size:10px}
 .nex-line p{font-size:11px}.nex-line span{font-size:8px}
 .right-bottom{max-width:none;text-align:left}
 .readouts{display:none}
 .controls{display:none}
 .start-frame{padding:25px 19px 19px}
 .start-frame p{font-size:12px}
 .start-legend{grid-template-columns:1fr 1fr 1fr;gap:5px}
 .start-legend span{font-size:8px;padding:10px 6px}
 .enter{font-size:13px;padding:15px}
 .start-keys{font-size:8px}
 .point-label{top:calc(50% + 23px);min-width:175px}
 .touch{display:block;position:absolute;z-index:15;inset:0;pointer-events:none}
 .move-pad{position:absolute;left:14px;bottom:calc(160px + env(safe-area-inset-bottom));width:116px;height:116px;pointer-events:auto;touch-action:none}
 .pad-circle{width:100%;height:100%;border-radius:50%;border:2px solid #dcff85aa;background:#161021a1;box-shadow:inset 0 0 20px #bd63d82e;display:grid;place-items:center}
 .pad-circle::before{content:"✣";font-size:28px;color:#ffffff24}
 .pad-nub{position:absolute;width:46px;height:46px;border-radius:50%;background:#dfff7966;border:1px solid #e9ffa1a9;left:35px;top:35px;box-shadow:0 0 18px #dfff5729;pointer-events:none}
 .look-area{position:absolute;right:0;top:95px;width:48%;height:calc(100% - 260px);pointer-events:auto;touch-action:none}
 .touch-action{position:absolute;right:20px;bottom:calc(171px + env(safe-area-inset-bottom));pointer-events:auto;touch-action:manipulation;background:#ddff67;color:#291331;border:1px solid #fff;padding:12px 10px;font:950 10px var(--mono);box-shadow:4px 4px 0 #ef49a2}
 .touch-action b{display:block}
 .touch-hint{position:absolute;bottom:calc(148px + env(safe-area-inset-bottom));left:17px;font:700 8px var(--mono);color:#e7dbef}
}
@media(hover:none) and (pointer:coarse){.touch{display:block}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* G02 comfort adjustment — compact, accessible and never changes the reactor. */
.view-settings{position:absolute;z-index:17;right:22px;top:134px;display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid #b49ccb80;background:#130b22e5;box-shadow:3px 3px 0 #ee4a9a5b;pointer-events:auto}
.view-settings label{white-space:nowrap;color:#e9dfed;font:850 10px var(--mono)}
.view-settings output{color:var(--acid);font-variant-numeric:tabular-nums}
.view-settings input[type="range"]{width:106px;accent-color:var(--acid);cursor:pointer}
.view-settings button{border:1px solid #c4ff7d7a;background:#23172a;color:#dcff7c;padding:6px 8px;white-space:nowrap;font:850 9px var(--mono);cursor:pointer}
.view-settings button:hover,.view-settings button:focus-visible{background:#46552e;color:#fff}
@media(max-width:670px){.view-settings{top:100px;right:10px;gap:6px;padding:7px}.view-settings label{font-size:8px}.view-settings input[type="range"]{width:76px}.view-settings button{font-size:8px;padding:5px}}

/* G03-A — compact, truthful first-person vial practice overlay. */
.vial-hud{position:absolute;z-index:16;left:22px;top:135px;width:min(370px,calc(100% - 44px));display:flex;align-items:center;gap:10px;padding:11px 12px;background:#1a1028ee;border:1px solid #f47fb0a8;box-shadow:4px 4px 0 #e845a558;pointer-events:auto}
.vial-hud-icon{display:grid;place-items:center;flex:0 0 38px;height:44px;color:#fa8bbc;background:linear-gradient(135deg,#69294d,#28182f);border:1px solid #eb80bd;font-size:24px}
.vial-hud-copy{min-width:0;flex:1;display:grid;gap:3px}
.vial-hud-copy small{font:850 8px/1.25 var(--mono);color:#c89fbf;letter-spacing:.05em}
.vial-hud-copy strong{font:950 12px/1.25 var(--mono);color:#ebff9b}
.vial-hud-copy span{font:750 10px/1.3 var(--mono);color:#dcc9e8}
.vial-hud button{flex:0 0 auto;border:1px solid #dfff7c69;background:#2a1c31;color:#dfff89;padding:7px 9px;font:900 9px var(--mono);cursor:pointer}
.vial-hud button:focus-visible,.vial-hud button:hover{background:#4a3255}
.play[data-target="vial"] .reticle,.play[data-target="cradle"] .reticle{filter:drop-shadow(0 0 7px #e5ff74)}
@media(max-width:670px){
 .vial-hud{top:150px;left:10px;width:min(340px,calc(100% - 20px));padding:7px 8px;gap:7px}
 .vial-hud-icon{flex-basis:27px;height:32px;font-size:16px}
 .vial-hud-copy strong{font-size:10px}.vial-hud-copy small{font-size:7px}.vial-hud-copy span{font-size:8px}
 .vial-hud button{padding:6px;font-size:8px}
}