*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;color:#ddd;overflow:hidden;
  font-family:"Courier New",ui-monospace,monospace;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}

/* 16:9 stage, sized from JS; font-size = 1% of width so em scales */
#stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;background:#000}
#office,#camview{position:absolute;inset:0;width:100%;height:100%;display:block}

/* office dynamic parts */
.shutter{transition:transform .22s cubic-bezier(.5,0,.7,1)}
.fan{transform-box:fill-box;transform-origin:center;animation:spin .25s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#office.lowpower .fan{animation:none}
.ventEye{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;padding:1.4em 2em;display:flex;justify-content:space-between;z-index:6;
  text-shadow:0 0 .4em #000}
#clock{font-size:3.4em;font-weight:bold;color:#fff;letter-spacing:.05em}
#nightLbl{font-size:1.5em;color:#aaa}
.hud-right{text-align:right}
#powerLbl{font-size:1.8em}
#usage{display:flex;gap:.3em;justify-content:flex-end;margin-top:.4em}
#usage i{width:1.2em;height:1.6em;background:#222;border:1px solid #444}
#usage i.on{background:#3c3}#usage i.on.mid{background:#dc3}#usage i.on.hi{background:#d33}
#fuseWarn{display:none;margin-top:.6em;font-size:1.5em;color:#f44;font-weight:bold;animation:blink .6s steps(1) infinite}
#fuseWarn.show{display:block}
@keyframes blink{50%{opacity:0}}

/* controls */
#controls{position:absolute;inset:0;z-index:5;pointer-events:none}
.ctl{position:absolute;pointer-events:auto;width:7.2em;height:7.2em;border-radius:50%;border:.35em solid #333;
  background:radial-gradient(circle at 40% 35%,#c33,#600);color:#fff;font-size:1.3em;font-weight:bold;
  box-shadow:0 .3em .8em #000a;letter-spacing:.05em}
.ctl.light{background:radial-gradient(circle at 40% 35%,#ddd,#666);color:#111}
.ctl.on{background:radial-gradient(circle at 40% 35%,#6f6,#060);color:#fff;border-color:#9f9}
.ctl.light.on{background:radial-gradient(circle at 40% 35%,#ffe9a0,#c90);border-color:#ffd}
.ctl:disabled{opacity:.3;filter:grayscale(1)}
#btnDoorL{left:1.5%;top:34%}#btnLightL{left:1.5%;top:58%}
#btnDoorR{right:1.5%;top:34%}#btnLightR{right:1.5%;top:58%}
#btnVent{left:38.5%;top:2.5%;width:6.4em;height:6.4em;font-size:1.15em;background:radial-gradient(circle at 40% 35%,#36c,#123)}
#btnVent.on{background:radial-gradient(circle at 40% 35%,#6f6,#060)}

#camToggle{position:absolute;z-index:9;left:30%;right:30%;bottom:1.2%;height:7%;border:.15em solid #aaa;border-radius:.4em;
  background:#ffffff18;color:#eee;font-size:1.6em;letter-spacing:.2em;backdrop-filter:blur(2px)}
#camToggle:active{background:#ffffff35}
#camToggle:disabled{opacity:.2}

/* TABLET */
#tablet{position:absolute;inset:0;z-index:8;background:#000;transform:translateY(105%);transition:transform .22s ease-in;
  border:.4em solid #111}
#tablet.show{transform:none}
#camview{filter:sepia(.35) hue-rotate(55deg) saturate(.65) contrast(1.15) brightness(.9)}
#static{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.15;pointer-events:none;mix-blend-mode:screen}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,#000c 100%),repeating-linear-gradient(0deg,#0000 0 3px,#0003 3px 4px)}
#camLabel{position:absolute;left:2.5%;top:4%;font-size:2.2em;color:#fff;text-shadow:0 0 .3em #000;font-weight:bold}
#rec{position:absolute;right:3%;top:4%;font-size:1.8em;color:#fff;display:flex;align-items:center;gap:.4em}
#rec b{width:.8em;height:.8em;border-radius:50%;background:#e22;animation:blink 1s steps(1) infinite}
#noSignal{display:none;position:absolute;left:0;right:0;top:40%;text-align:center;font-size:3.5em;font-weight:bold;color:#fff;letter-spacing:.2em;text-shadow:0 0 .3em #000}
#noSignal.show{display:block}
#fuseBtn{display:none;position:absolute;left:12%;top:68%;width:26%;height:12%;border:.2em solid #f44;border-radius:.5em;
  background:#300;color:#fff;font-size:1.6em;font-weight:bold;overflow:hidden}
#fuseBtn.show{display:block}
#fuseBtn span{position:relative;z-index:1}
#fuseBar{position:absolute;left:0;top:0;bottom:0;width:0;background:#c33}

#map{position:absolute;right:1.5%;bottom:10%;width:27%;aspect-ratio:4/3.1;border:.15em solid #ccc;background:#000a;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:.35em;padding:.5em}
#map button,#map .you{border:.12em solid #bbb;background:#333c;color:#fff;font-size:1.1em;font-weight:bold;border-radius:.2em}
#map button.sel{background:#3a3;border-color:#bfb}
#map .you{display:flex;align-items:center;justify-content:center;background:#555;color:#ff6;border-style:dashed}

#dark{position:absolute;inset:0;z-index:7;background:#000;opacity:0;pointer-events:none;transition:opacity .4s}

/* JUMPSCARE */
#jumpscare{position:absolute;inset:0;z-index:20;display:none;background:#000}
#jumpscare.show{display:block;animation:shake .07s linear infinite}
#jumpscare svg{width:100%;height:100%;overflow:visible;animation:zoom .35s ease-out forwards}
#jumpscare::after{content:"";position:absolute;inset:0;background:#f00;mix-blend-mode:multiply;opacity:.35;animation:flash .1s steps(1) infinite}
@keyframes shake{0%{transform:translate(1%,-1%)}25%{transform:translate(-1.2%,.8%)}50%{transform:translate(.8%,1.2%)}75%{transform:translate(-.6%,-1%)}}
@keyframes zoom{from{transform:scale(.3)}to{transform:scale(1.15)}}
@keyframes flash{50%{opacity:0}}

/* SCREENS */
.screen{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:#000;text-align:center}
.screen.show{display:flex}
.mbtn{display:block;margin:.55em auto 0;min-width:22em;padding:.5em 1.4em;font-size:1.6em;background:transparent;border:.12em solid #ddd;color:#eee;letter-spacing:.1em}
.mbtn:hover,.mbtn:active{background:#fff;color:#000}
.mbtn.ghost{border-color:#555;color:#888;font-size:1.4em}
.mbtn:disabled{display:none}

.menu-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 60%,#1a2a1a 0,#000 65%);overflow:hidden}
.menu-bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#0004 3px 4px);animation:flick 4s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}95%{opacity:1}96%{opacity:.2}}
.menu-inner{position:relative;z-index:1}
h1{font-size:5.4em;line-height:.9;color:#eee;letter-spacing:.08em;text-shadow:.04em .04em 0 #600,0 0 .3em #f002}
.sub{font-size:1.5em;color:#8a8;margin:.3em 0 .6em}
.langs{display:flex;gap:1.2em;justify-content:center;margin-top:1.1em}
.langs button{width:4em;height:2.6em;border:.15em solid #444;background:none;padding:0;opacity:.55}
.langs button.sel{opacity:1;border-color:#ddd}
.langs svg{width:100%;height:100%;display:block}
.hint{margin-top:1.2em;color:#666;font-size:1.2em}
.rotate{display:none;margin-top:.6em;color:#da3;font-size:1.3em}
@media (orientation:portrait){.rotate{display:block}}

.intro-inner,.win-inner,.over-inner{max-width:70em;padding:0 3em}
h2{font-size:5em;letter-spacing:.15em;color:#eee}
.note{margin:1.6em auto 0;max-width:55em;background:#e9e2c8;color:#222;padding:1.6em 2em;transform:rotate(-1deg);
  box-shadow:0 .5em 1.5em #000;text-align:left;font-size:1.6em;line-height:1.45}
.six{font-size:12em;font-weight:bold;color:#fff;animation:fadein 2s ease-out}
@keyframes fadein{from{opacity:0;letter-spacing:.5em}to{opacity:1}}
#winText,#overText{font-size:1.9em;margin-top:.6em;color:#aaa;line-height:1.4}
#scrOver h2{color:#c22}

/* PA announcement */
#paBtn{display:none;position:absolute;left:2.5%;bottom:12%;padding:.8em 1.4em;font-size:1.5em;font-weight:bold;letter-spacing:.1em;
  border:.15em solid #fc6;border-radius:.4em;background:#3a2a00cc;color:#fd8}
#paBtn.show{display:block}
#paBtn:disabled{opacity:.45;border-color:#776;color:#aa9}
#paLive{display:none;position:absolute;left:0;right:0;top:14%;text-align:center;font-size:2em;color:#fd8;font-weight:bold;letter-spacing:.15em;
  text-shadow:0 0 .4em #000;animation:blink .5s steps(1) infinite}
#paLive.show{display:block}

/* pause */
#pauseBtn{position:absolute;z-index:9;left:50%;top:2%;transform:translateX(-50%);width:4.4em;height:4.4em;border-radius:50%;
  border:.15em solid #888;background:#0008;display:flex;gap:.6em;align-items:center;justify-content:center}
#pauseBtn i{width:.55em;height:1.6em;background:#ddd}
#scrPause{background:#000d;z-index:40}
.setting{display:flex;align-items:center;justify-content:center;gap:1em;margin-top:1.2em;font-size:1.6em;color:#bbb}
.setting input{width:16em;accent-color:#c33}

/* elevator call */
#btnElev{left:56.5%;top:14%;width:auto;height:auto;padding:.6em 1.2em;border-radius:.5em;font-size:1.25em;
  background:linear-gradient(#f2b233,#a46a0a);color:#221;border-color:#553}
#btnElev:disabled{opacity:.35}

/* atmosphere */
#camview{animation:camPan 16s ease-in-out infinite alternate}
@keyframes camPan{from{transform:scale(1.1) translateX(-3.5%)}to{transform:scale(1.1) translateX(3.5%)}}
#hallu{position:absolute;inset:0;z-index:10;pointer-events:none;display:none;opacity:.32;mix-blend-mode:screen;filter:grayscale(1) contrast(1.6)}
#hallu.show{display:block}
#hallu svg{width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion:reduce){#camview{animation:none}}

/* subtitles */
#subs{position:absolute;left:2%;bottom:22%;z-index:12;pointer-events:none;display:flex;flex-direction:column;gap:.3em;max-width:40%}
#subs div{background:#000c;color:#ffd;padding:.25em .6em;font-size:1.4em;border-left:.2em solid #fc6;animation:subIn 3.5s forwards}
@keyframes subIn{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}

/* tutorial */
#tut{display:none;position:absolute;z-index:11;left:50%;top:13%;transform:translateX(-50%);width:52%;background:#0b0f0be8;border:.15em solid #8c8;
  border-radius:.5em;padding:1em 1.4em;color:#dfd;box-shadow:0 .5em 2em #000}
#tut.show{display:block}
#tutStep{position:absolute;right:1em;top:.7em;color:#8c8;font-size:1.2em}
#tutText{font-size:1.6em;line-height:1.4;padding-right:3em}
#tutSkip{margin-top:.7em;background:none;border:none;color:#8a8;text-decoration:underline;font-size:1.2em}
.tutPulse{animation:tutPulse 1s ease-in-out infinite!important;z-index:12}
@keyframes tutPulse{50%{box-shadow:0 0 0 .5em #8f8a,0 0 2em #8f8}}

/* lore / archive */
.loreNote{animation:notePulse 1.6s ease-in-out infinite}
@keyframes notePulse{50%{opacity:.6}}
#toast{position:absolute;z-index:45;left:50%;top:5%;transform:translateX(-50%);background:#e9e2c8;color:#222;padding:.8em 1.6em;
  box-shadow:0 .4em 1.4em #000;text-align:center;opacity:0;pointer-events:none}
#toast.show{animation:toastIn 3s forwards}
#toast b{display:block;font-size:1.3em;color:#a11;letter-spacing:.1em}#toast span{font-size:1.7em}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,1em)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.arch-inner{width:90%;max-height:96%;display:flex;flex-direction:column}
.arch-inner h2{font-size:3.5em}
#archHint{color:#888;font-size:1.3em;margin:.4em 0 1em}
.arch-cols{display:grid;grid-template-columns:2fr 3fr;gap:2em;min-height:0;flex:1;text-align:left}
#archList{display:flex;flex-direction:column;gap:.4em;overflow:auto}
#archList button{text-align:left;background:#111;border:.1em solid #444;color:#ddd;padding:.5em .8em;font-size:1.35em}
#archList button:disabled{color:#555;border-style:dashed}
#archList button:not(:disabled):hover{background:#222;border-color:#aaa}
#archText{background:#e9e2c8;color:#222;padding:1.4em 1.8em;font-size:1.5em;line-height:1.5;overflow:auto;min-height:12em}
#archText:empty{background:#0000;border:.1em dashed #333}
#archText h3{font-size:1.2em;margin-bottom:.6em;color:#611}

/* stars + custom shift */
#stars{font-size:2.6em;letter-spacing:.3em;margin-top:.2em}
#stars span{color:#333}#stars span.on{color:#fc3;text-shadow:0 0 .3em #f90}
.cust-inner h2{font-size:3.5em}
#custCards{display:grid;grid-template-columns:repeat(4,15em);gap:1.4em;justify-content:center;margin:1.2em 0}
.card{background:#111;border:.12em solid #444;padding:.8em;display:flex;flex-direction:column;align-items:center;gap:.4em}
.card svg{width:100%;height:9em;background:radial-gradient(#222,#000)}
.card b{font-size:1.5em;letter-spacing:.15em}
.lvl{display:flex;align-items:center;gap:.8em}
.lvl button{width:2.2em;height:2.2em;font-size:1.6em;background:#222;border:.1em solid #666;color:#fff}
.lvl span{font-size:2.4em;min-width:1.6em;color:#fc6;font-weight:bold}
.cust-row{display:flex;gap:.8em;justify-content:center;align-items:center;flex-wrap:wrap}
.chip{background:#181818;border:.1em solid #666;color:#ddd;padding:.5em 1em;font-size:1.3em}
#custBest{color:#fc6;font-size:1.4em;margin-left:1em}

/* achievements */
.mrow{display:flex;gap:1em;justify-content:center}
.mrow .mbtn{min-width:10.5em;margin-left:0;margin-right:0}
#toast.gold{background:#2a2108;color:#fe9;border:.12em solid #fc3}
#toast.gold b{color:#fc3}
.ach-inner{width:90%}
.ach-inner h2{font-size:3.5em}
#achList{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin:1.2em 0;text-align:left}
.ach{display:flex;gap:.8em;align-items:center;background:#0e0e0e;border:.1em solid #333;padding:.6em .8em;opacity:.55}
.ach.on{opacity:1;border-color:#a83;background:#1a1508}
.ach i{font-style:normal;font-size:2.2em;color:#444}.ach.on i{color:#fc3;text-shadow:0 0 .3em #f90}
.ach b{display:block;font-size:1.35em;color:#eee}.ach span{font-size:1.1em;color:#999}

/* mobile polish */
#safe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#rotateBox{position:fixed;inset:0;z-index:100;background:#000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;color:#ddd;text-align:center;padding:2em}
#rotateBox.show{display:flex}
#rotateBox svg{width:28vw;max-width:160px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rotateBox p{font-size:1.4rem;letter-spacing:.1em}
#rotateBox button{background:none;border:1px solid #666;color:#999;padding:.6em 1.2em;font-size:1rem}
#stage.small #map{width:33%;bottom:11%}
#stage.small #map button,#stage.small #map .you{font-size:1.45em}
#stage.small #paBtn,#stage.small #fuseBtn{font-size:1.8em}
#statRow{display:grid;grid-template-columns:repeat(8,1fr);gap:.4em;margin-top:1em}
#statRow div{background:#111;border:.1em solid #333;padding:.4em;text-align:center}
#statRow b{display:block;font-size:1.8em;color:#fc6}#statRow span{font-size:.95em;color:#999}
#achList{margin-top:.8em}

/* ================= SPUKWACHE theme ================= */
html,body{background:#0b0614}
.screen{background:#0b0614}
.mbtn{border-color:#ff8a1a;color:#ffd9b0}
.mbtn:hover,.mbtn:active{background:#ff8a1a;color:#1a0a00}
.mbtn.ghost{border-color:#5a3a6a;color:#b9a0c8}
.mbtn.shop{border-color:#9b5cff;color:#e0ccff}
.mbtn.shop:hover{background:#9b5cff;color:#120020}

/* menu: two columns + moon */
.menu-bg{background:radial-gradient(ellipse at 78% 18%,#3a1e5a 0,#14081f 45%,#07030c 80%)}
#menuMoon{position:absolute;right:6%;top:6%;width:13%;z-index:1;cursor:pointer;filter:drop-shadow(0 0 2em #f3efd255)}
.menu-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:3em;align-items:center;width:88%}
.menu-left{text-align:center}
.menu-right{display:flex;flex-direction:column;gap:.1em}
.menu-right .mbtn{min-width:0;width:100%}
.menu-right .ghost{font-size:1.25em}
h1{font-size:6.6em;color:#ff8a1a;text-shadow:.04em .05em 0 #4a0a0a,0 0 .4em #ff6a0055;letter-spacing:.1em}
.sub{color:#c9a0e0}
.menuCandy{display:inline-flex;align-items:center;gap:.4em;font-size:2em;color:#ffb35a}
.menuCandy svg{width:1.6em}
#scrMenu .hint{position:absolute;bottom:2%;left:0;right:0;z-index:1}
#scrMenu .rotate{position:absolute;bottom:6%;left:0;right:0;z-index:1}

/* HUD: candy + tasks */
#candyHud{display:flex;align-items:center;gap:.3em;margin-top:.4em;font-size:1.5em;color:#ffb35a}
#candyHud svg{width:1.8em}
#taskList{list-style:none;margin-top:.5em;font-size:1.15em;color:#d8c8e8;max-width:24em}
#taskList li{background:#0008;padding:.15em .5em;margin-bottom:.2em;border-left:.2em solid #9b5cff}
#taskList li.done{color:#8f8;border-color:#5c5;text-decoration:line-through}

/* pumpkin flash */
#btnBlitz{left:26%;top:74%;width:auto;height:auto;padding:.7em 1.1em;border-radius:1em;font-size:1.3em;
  background:radial-gradient(circle at 40% 35%,#ffb04a,#b4500c);color:#2a0d00;border-color:#6a2a00}
#btnBlitz.nope{animation:nope .3s}
@keyframes nope{25%{transform:translateX(-.4em)}75%{transform:translateX(.4em)}}
.ctl{background:radial-gradient(circle at 40% 35%,#c33,#4a0610)}
#btnVent{background:radial-gradient(circle at 40% 35%,#7a4aa8,#24103a)}
#btnElev{background:linear-gradient(#e8c068,#8a6420)}

/* camera feed */
#camview{filter:sepia(.45) hue-rotate(230deg) saturate(.7) contrast(1.15) brightness(.85)}
#camview.nv{filter:sepia(.3) hue-rotate(60deg) saturate(.8) contrast(1.1) brightness(1.25)}
#camFlash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#map button.motion{animation:motion .5s steps(1) infinite}
@keyframes motion{50%{background:#a11;border-color:#f66}}
.flame{animation:flame .18s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center bottom}
@keyframes flame{to{transform:scale(.85,1.12)}}
.zzz{animation:zzz 3s ease-in-out infinite}
@keyframes zzz{50%{transform:translateY(-20px);opacity:.4}}
.lumiG{animation:float 2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.pick{animation:notePulse 1.2s ease-in-out infinite}
#stage.retro svg{filter:contrast(1.5) saturate(.4) sepia(.5);image-rendering:pixelated}
#stage.retro::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,#0000 0 2px,#0005 2px 4px)}

/* intro tasks + notes */
.note{background:#e8dcc0;border:.15em solid #7a5a2a}
#introTasks{list-style:none;margin-top:.8em;border-top:.1em dashed #7a5a2a;padding-top:.6em;font-size:.95em}
#introTasks b{color:#6a2a8a;letter-spacing:.1em}
#introTasks li::before{content:"☐ "}
#introTasks i{color:#b4500c;font-style:normal;font-weight:bold}

/* win payout */
.six{font-size:8em;color:#ffd9b0}
#winPay table{margin:.8em auto;font-size:1.5em;border-collapse:collapse;min-width:30em}
#winPay td{padding:.2em .8em;text-align:left;color:#ccc;border-bottom:.05em solid #2a1a3a}
#winPay td:last-child{text-align:right;color:#ffb35a}
#winPay tr.no td{color:#666}
#winPay tr.sum td{color:#fff;font-weight:bold;border-top:.12em solid #ff8a1a}
#scrOver h2{color:#ff5a1a}

/* workshop */
.shop-inner{width:92%}
.shop-inner h2{font-size:3.4em;color:#c9a0ff}
.shopSub{color:#a89ab8;font-size:1.3em;margin:.3em 0 .9em;display:flex;justify-content:center;align-items:center;gap:1em}
#shopList{display:grid;grid-template-columns:1fr 1fr;gap:.7em;text-align:left}
.upg{display:flex;align-items:center;gap:.9em;background:#140a1e;border:.1em solid #3a2450;padding:.5em .8em}
.upgIcon{width:3.6em;flex:none}.upgIcon svg{width:100%;display:block}
.upgTxt{flex:1}.upgTxt b{font-size:1.4em;color:#eee}.upgTxt p{font-size:1.1em;color:#a99;margin-top:.2em}
.pips{margin-left:.6em}.pips i{display:inline-block;width:.9em;height:.9em;border:.1em solid #9b5cff;margin-right:.2em}.pips i.on{background:#9b5cff}
.upg button{background:#2a1040;border:.12em solid #9b5cff;color:#e0ccff;padding:.6em .9em;font-size:1.2em;white-space:nowrap}
.upg button:disabled{opacity:.4}