/* Backrooms · Nivel 0 */
:root{
  color-scheme: dark;
  --bg:#050504;
  --ink:#ece4c4;
  --dim:#a39a7c;
  --amber:#e6c34a;
  --rec:#e2372c;
  --panel:rgba(10,9,6,.78);
  --line:rgba(236,228,196,.22);
  --osd:"VT323", "Courier New", monospace;
  --type:"Special Elite", "Courier New", monospace;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);overflow:hidden;font-family:var(--mono);-webkit-user-select:none;user-select:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;background:#000}

/* ---------- On-screen display (camcorder) ---------- */
#osd{position:fixed;inset:0;pointer-events:none;font-family:var(--osd);color:#f4f1e6;text-shadow:0 0 4px rgba(255,255,255,.35),2px 0 0 rgba(255,0,60,.25),-2px 0 0 rgba(0,200,255,.2);letter-spacing:.04em}
#osd .c{position:absolute;display:flex;flex-direction:column;gap:2px;font-size:clamp(20px,2.6vw,34px);line-height:1}
#osd .tl{top:calc(18px + env(safe-area-inset-top,0px));left:24px}
#osd .tr{top:calc(18px + env(safe-area-inset-top,0px));right:24px;align-items:flex-end}
#osd .bl{bottom:calc(18px + env(safe-area-inset-bottom,0px));left:24px}
#osd .br{bottom:calc(18px + env(safe-area-inset-bottom,0px));right:24px;align-items:flex-end}
#rec b{color:var(--rec);font-weight:400}
#rec.blink b{visibility:hidden}
#timer{font-size:clamp(26px,3.4vw,46px)}
#compass{width:clamp(92px,9vw,120px);height:clamp(92px,9vw,120px);margin-top:10px}
#cLegend{font-size:.6em}
.small{font-size:.7em;opacity:.85}
#stam{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));width:140px;height:4px;margin-left:-70px;background:rgba(255,255,255,.12);opacity:0;transition:opacity .4s}
#stam i{display:block;height:100%;background:#f4f1e6;width:100%}
#cross{position:fixed;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
#prompt{position:fixed;left:50%;top:58%;transform:translateX(-50%);font-family:var(--osd);font-size:clamp(20px,2.2vw,30px);color:#fff;text-shadow:0 0 6px #000;pointer-events:none;white-space:nowrap}
#prompt kbd{font-family:inherit;border:1px solid rgba(255,255,255,.7);padding:0 6px;margin-right:6px}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);font-family:var(--osd);font-size:clamp(22px,2.6vw,36px);color:#fff;text-align:center;text-shadow:0 0 8px #000;pointer-events:none;opacity:0;transition:opacity .6s;max-width:calc(100% - 32px)}
#toast.on{opacity:1}
#hint{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--type);font-size:15px;color:rgba(40,36,30,.85);pointer-events:none;text-align:center;max-width:calc(100% - 32px);transition:opacity 1s}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;padding:24px max(16px,6vw);box-sizing:border-box;overflow:auto;background:linear-gradient(90deg,rgba(3,3,2,.82),rgba(3,3,2,.5) 50%,rgba(3,3,2,.1))}
.screen.center{background:rgba(0,0,0,.55)}
.screen.center{justify-content:center}
.deck{max-width:560px;width:100%;display:flex;flex-direction:column;gap:22px}
.brand{font-family:var(--osd);line-height:.82;letter-spacing:.02em}
.brand h1{margin:0;font-weight:400;white-space:nowrap;font-size:clamp(64px,10vw,128px);color:var(--ink);text-shadow:3px 0 0 rgba(226,55,44,.55),-3px 0 0 rgba(60,170,255,.35),0 0 18px rgba(255,240,190,.25)}
.brand p{margin:10px 0 0;font-family:var(--type);font-size:16px;color:var(--dim);line-height:1.45;max-width:46ch}
.menu{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.btn{appearance:none;background:none;border:0;color:var(--ink);font-family:var(--osd);font-size:clamp(28px,3.4vw,38px);padding:2px 10px 2px 0;cursor:pointer;letter-spacing:.04em;text-align:left;display:flex;gap:14px;align-items:baseline}
.btn span.g{display:inline-block;width:1.1em;color:var(--dim)}
.btn:hover,.btn:focus-visible{color:#fff;outline:none;text-shadow:0 0 10px rgba(255,236,170,.6)}
.btn:hover span.g,.btn:focus-visible span.g{color:var(--amber)}
.btn.danger:hover{color:#ffb0a8}
.btn.small{font-size:24px}
.btn:disabled{color:rgba(236,228,196,.26);cursor:not-allowed;text-shadow:none}
.btn:disabled span.g{color:rgba(236,228,196,.2)}
.field .row input[type=text]{flex:1;min-width:0}
.warn{color:#ffb0a8}
.dialog{max-width:440px;width:100%;box-sizing:border-box}
.dz{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}
.menu.tight{gap:0;margin-top:14px}
.codein{text-transform:uppercase;letter-spacing:.35em;font-size:28px!important}
.publist{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto;font-size:13px;color:var(--dim)}
.publist .row{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:6px 10px}
.publist .row b{font-family:var(--osd);font-weight:400;font-size:22px;color:var(--ink)}
.lhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.badge{font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:3px 8px;color:var(--dim)}
.codebox{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.codebox .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.codebox b{font-family:var(--osd);font-weight:400;font-size:52px;letter-spacing:.18em;color:#fff;line-height:1}
.slots{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.slot{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:8px 12px;min-height:26px}
.slot i{width:14px;height:14px;flex:none;border-radius:2px}
.slot .nm{font-family:var(--osd);font-size:24px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .tg{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.slot .tg.ok{color:#9be15d}
.slot.empty{color:rgba(236,228,196,.3);font-size:13px}
#team{position:fixed;right:24px;top:calc(18px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--osd);font-size:clamp(16px,1.6vw,22px);color:#f4f1e6;text-shadow:0 0 4px rgba(0,0,0,.8);pointer-events:none}
#team.low{top:calc(250px + env(safe-area-inset-top,0px))}
#team span.d{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px}
#death .sub{font-family:var(--osd);font-size:30px;color:#ffb0a8;letter-spacing:.06em;margin:0}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--dim)}
.stats div{display:flex;flex-direction:column;gap:2px}
.stats b{font-family:var(--osd);font-weight:400;font-size:28px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.keys{font-size:12px;color:var(--dim);line-height:1.8}
.keys kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--ink)}
.panel{background:var(--panel);border:1px solid var(--line);padding:22px;backdrop-filter:blur(3px)}
.panel h2{font-family:var(--osd);font-weight:400;font-size:40px;margin:0 0 6px;letter-spacing:.03em}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.field .row{display:flex;gap:12px;align-items:center}
.field output{font-family:var(--osd);font-size:22px;min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums}
input[type=text],select{background:#0d0c09;color:var(--ink);border:1px solid var(--line);font-family:var(--osd);font-size:24px;padding:4px 10px;width:100%;box-sizing:border-box}
input[type=text]:focus,select:focus{outline:1px solid var(--amber)}
input[type=range]{flex:1;accent-color:var(--amber)}
.note{font-size:12px;color:var(--dim);line-height:1.5;margin:6px 0 0}
.bar{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
#death h2{font-family:var(--osd);font-weight:400;font-size:clamp(64px,12vw,130px);margin:0;color:#fff;text-shadow:4px 0 0 rgba(226,55,44,.7),-4px 0 0 rgba(60,170,255,.4)}
#death p{font-family:var(--type);color:var(--dim);margin:8px 0}
.notebook{background:#e8ddbd;color:#2b2518;font-family:var(--type);padding:28px 30px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:rotate(-.6deg);background-image:repeating-linear-gradient(transparent 0 27px,rgba(70,90,150,.22) 27px 28px);line-height:28px}
.notebook h3{margin:0 0 6px;font-weight:400;font-size:26px}
.notebook .line{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.notebook .btn{color:#2b2518;font-size:28px}
.notebook .btn:hover{color:#000;text-shadow:none}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--osd);font-size:34px;color:var(--ink);background:#000}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s}
@media (max-width:640px){ .stats{grid-template-columns:1fr 1fr} #osd .c{font-size:20px} .keys{display:none} }
@media (prefers-reduced-motion:reduce){ #toast{transition:none} }

/* phase 5: expedition summary */
.notebook .sep{height:14px;border-bottom:1px dashed rgba(43,37,24,.45);margin-bottom:14px}
.notebook .line.total{font-size:1.35em;font-weight:700;margin-top:10px;border-top:2px solid #2b2518;padding-top:6px}
.notebook .line.sub{font-size:.85em;opacity:.8}
.notebook.summary{transform:rotate(.5deg)}
.notebook .hd{margin-top:10px;font-size:.9em;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
#inv{color:#ffd9a0}
.notebook{max-height:calc(100vh - 24px);overflow-y:auto}
@media (max-height:760px){
  .notebook{line-height:22px;padding:16px 26px;background-image:repeating-linear-gradient(transparent 0 21px,rgba(70,90,150,.22) 21px 22px);font-size:14px}
  .notebook h3{font-size:22px;margin-bottom:2px}
  .notebook .btn{font-size:22px}
  .notebook .sep{height:8px;margin-bottom:8px}
}
/* 1.06: game options, archive, stability */
.deck.wide{max-width:880px}
.gopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px}
.gopt{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:3px 0;min-height:34px}
.gopt label{font-size:12px;letter-spacing:.06em;color:var(--ink);cursor:help;flex:1;min-width:0}
.gopt select{width:auto;max-width:64%;font-size:19px;padding:2px 6px}
.gopt b{font-family:var(--osd);font-weight:400;font-size:20px;color:var(--dim);text-align:right}
.gopt b.chg{color:var(--amber)}
.notebook .gopts{gap:0 22px}
.notebook .gopt{border-bottom:0;min-height:0;padding:0}
.notebook .gopt label{color:#2b2518;font-size:13px;letter-spacing:0}
.notebook .gopt b{font-family:var(--type);color:#2b2518;font-size:13px}
.notebook .gopt b.chg{color:#8a2a18}
@media (max-width:640px){ .gopts{grid-template-columns:1fr} }
.stats b.bad{color:#ffb0a8}
.warnosd{color:#ffb0a8}
.notebook.archive{max-width:760px;width:100%}
.ahead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ahead small{opacity:.7}
.tabs{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 10px;border-bottom:1px dashed rgba(43,37,24,.45)}
.tabs .tab{appearance:none;background:none;border:0;font-family:var(--type);font-size:15px;color:#6a5e44;cursor:pointer;padding:0 0 2px}
.tabs .tab.on{color:#2b2518;text-decoration:underline;text-underline-offset:4px}
.tabs .tab i{font-style:normal;opacity:.7;font-size:.85em}
#arBody{max-height:calc(100vh - 230px);overflow-y:auto;padding-right:6px}
.aitem{display:grid;grid-template-columns:auto 1fr;gap:0 14px;padding:4px 0;border-bottom:1px dotted rgba(43,37,24,.3)}
.aitem .no{grid-row:span 2;font-size:.8em;opacity:.7;min-width:92px}
.aitem b{font-weight:700}
.aitem small{opacity:.75;font-size:.8em;line-height:1.4}
.aitem .st{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.78em}
.aitem .st b.y{color:#2c6a1e}.aitem .st b.n{color:#8a2a18}
.aitem q{grid-column:2;font-size:.85em;font-style:italic;opacity:.85;line-height:1.35}
.notebook .oks{display:flex;flex-wrap:wrap;gap:0 14px;font-size:.72em;color:#2c6a1e;letter-spacing:.04em;margin-bottom:4px}
/* 1.07 */
.keybtn{appearance:none;background:#0d0c09;color:var(--ink);border:1px solid var(--line);font-family:var(--osd);font-size:19px;min-width:92px;padding:2px 10px;cursor:pointer}
.keybtn:hover,.keybtn:focus-visible{border-color:var(--amber);outline:none}
.keybtn.cap{color:var(--amber);border-color:var(--amber)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);flex:1;cursor:pointer;text-transform:none;letter-spacing:0}
.chk input{accent-color:var(--amber);width:16px;height:16px}
#downBox{position:fixed;left:50%;top:34%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--osd);color:#ffb0a8;text-shadow:0 0 8px rgba(0,0,0,.9);pointer-events:none;text-align:center}
#downBox b{font-weight:400;font-size:clamp(40px,6vw,72px);letter-spacing:.06em;animation:blinkD 1.1s steps(2) infinite}
#downBox span{font-size:clamp(18px,2vw,26px);color:#f4f1e6}
@keyframes blinkD{50%{opacity:.35}}
button:focus-visible,select:focus-visible,input:focus-visible{outline:1px solid var(--amber)}
/* 1.08 */
.btn span.g{flex:none;text-align:center;white-space:nowrap}
.btn span.g.g2{letter-spacing:-.12em;font-size:.62em;text-indent:-.12em;width:1.77em}
#death .btn{white-space:nowrap}
#stimOsd{min-height:1em}
#stimOsd .stims{color:#ff9a4a;letter-spacing:.12em}
#stimOsd .stims i{font-style:normal;color:rgba(244,241,230,.25)}
#stimOsd b{font-weight:400;color:#f4f1e6}
#stimOsd b.on{color:#ff9a4a}
#bigMsg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);text-align:center;font-family:var(--osd);color:#ffd9a0;text-shadow:0 0 10px rgba(0,0,0,.9),0 0 22px rgba(255,150,60,.35);font-size:clamp(34px,5vw,64px);letter-spacing:.06em;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;line-height:1.05}
#bigMsg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#bigMsg small{display:block;font-size:.42em;color:#f4f1e6;letter-spacing:.03em;margin-top:8px}
/* 1.09: title */
.brand .dev{font-family:var(--osd);font-size:clamp(22px,2.6vw,34px);letter-spacing:.42em;color:var(--dim);margin:0 0 6px .12em;text-shadow:1px 0 0 rgba(226,55,44,.45),-1px 0 0 rgba(60,170,255,.3)}
.ver{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:18px;font-family:var(--osd);font-size:20px;letter-spacing:.08em;color:rgba(236,228,196,.72);text-shadow:0 0 6px rgba(0,0,0,.8);pointer-events:none}