:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#100b12;color:#f8eadd;--red:#e54954;--gold:#f4bd76;--plum:#3a183a;--ink:#160f18;--panel:rgba(20,12,20,.93)}
*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;width:100%}body{background:radial-gradient(circle at 20% 5%,#3b1837 0,transparent 40%),#100b12}button{font:inherit;color:inherit;border:1px solid #ffffff33;background:#291c2b;border-radius:8px;padding:.65rem .9rem;cursor:pointer}button:hover,button:focus-visible{border-color:var(--gold);background:#3a263d;outline:none}button:disabled{opacity:.4;cursor:not-allowed}.hidden{display:none!important}
.title-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(#130d18aa,#130d18ee),url('assets/concepts/room404-neon-noir-v01.png') center/cover}.title-card{max-width:620px;text-align:center;padding:42px;border:1px solid #ffccb552;border-radius:18px;background:#140d16e8;box-shadow:0 30px 100px #000}.eyebrow,.episode{color:var(--gold);letter-spacing:.13em;text-transform:uppercase}.title-card h1{font-family:Georgia,serif;font-size:clamp(2.6rem,8vw,5.5rem);line-height:.82;margin:.25em 0;color:#fff0df;text-shadow:0 2px 0 #7f2631}.subtitle{font:italic 1.6rem Georgia;color:#ff6773}.title-actions{display:flex;justify-content:center;gap:12px;margin:28px}.small{opacity:.65;font-size:.86rem}
.game-shell{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#0c090d}.game-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:#170f18;border-bottom:1px solid #ffffff20}.game-header>div{display:grid}.game-header strong{color:var(--gold);letter-spacing:.08em}.game-header span{opacity:.65;font-size:.82rem}.game-header nav{display:flex;gap:7px}.game-header button{padding:.45rem .65rem;font-size:.85rem}
.blackout-transition{position:fixed;inset:0;z-index:100;background:transparent}
.blackout-transition[hidden]{display:none}
.blackout-mask{position:absolute;inset:0;background:#000;pointer-events:none}
.blackout-skip{position:absolute;right:24px;bottom:24px;background:#171018e8;min-height:44px}
.blackout-departure #hotspots,.blackout-departure #objective,.blackout-departure #caption{visibility:hidden}
.memory-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.memory-copy{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);width:min(560px,70%);padding:16px 22px;border:1px solid #efc9a42b;border-radius:14px;background:#100b14d9;text-align:center;box-shadow:0 10px 40px #0008}
.memory-copy h2{font:clamp(1.4rem,2.7vw,2.6rem) Georgia,serif;color:#ffd0b5;margin:0 0 10px}
.memory-copy p{font-size:clamp(.95rem,1.5vw,1.25rem);min-height:2.8em;margin:8px 0;line-height:1.4}
.memory-copy .memory-count{display:block;color:#d4b99e;font-size:.72rem;margin:8px}
.memory-actions{display:flex;justify-content:center;gap:10px}
.memory-actions button{min-height:44px}
.stage{position:relative;min-height:0;overflow:hidden;background:#221722}.scene-art,#roomCanvas{position:absolute;inset:0;width:100%;height:100%}#roomCanvas{display:none;background:#211921}.scene-art{display:grid;place-items:center;background-position:center;background-size:cover}.scene-card{max-width:min(76%,850px);padding:28px 34px;border:1px solid #ffffff35;border-radius:18px;background:#170e18d9;box-shadow:0 20px 70px #0008}.scene-card h2{font:2.2rem Georgia;color:#ffd0b5;margin:0 0 10px}.scene-card p{line-height:1.6}.scene-office .scene-art{background:linear-gradient(90deg,#171219e8,#17121990),radial-gradient(circle at 80% 20%,#d6965844,transparent 35%),linear-gradient(145deg,#27323a,#160f19)}.scene-lounge .scene-art{background:linear-gradient(#13081599,#130815cc),radial-gradient(circle at 20% 10%,#f25a8644,transparent 35%),linear-gradient(120deg,#46224d,#0d3034)}.scene-blackout .scene-art{background:radial-gradient(circle,#a2284c55,#050407 60%)}.scene-corridor .scene-art{background:linear-gradient(90deg,#44372f,#171419 55%,#4c2731)}.scene-end .scene-art{background:#0a070b}.cast-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}.cast-chip{padding:9px 12px;border:1px solid #ffffff30;border-radius:999px;background:#ffffff0d}.cast-chip.red{border-color:#e64955;color:#ffb5b5}
.hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border:1px dashed transparent;background:#ffffff00;padding:0;min-width:44px;min-height:44px}.hotspot:hover,.hotspots.reveal .hotspot{border-color:#ffd18b;background:#ffd18b1f}.hotspot span{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;background:#160f18e8;border-radius:5px;padding:3px 6px;font-size:.72rem;opacity:0}.hotspot:hover span,.hotspots.reveal .hotspot span{opacity:1}.objective{position:absolute;top:12px;left:12px;max-width:55%;padding:7px 10px;border-radius:7px;background:#130d17c9;color:#ffe0bb;font-size:.82rem}.caption{position:absolute;top:58px;left:50%;transform:translateX(-50%);background:#000d;padding:7px 12px;border-radius:8px;font-weight:700}.mosaic{position:absolute;left:39%;top:42%;font:700 clamp(2rem,5vw,5rem) monospace;color:#cbb7b3;background:#7d6867;border:5px solid #9d8988;filter:contrast(1.2);animation:jitter .16s infinite alternate}@keyframes jitter{to{transform:translate(2px,-1px)}}.room-actor{position:absolute;width:auto;height:66%;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 10px 8px #0007)}
.control-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,38%);min-height:92px;border-top:1px solid #ffffff20;background:#130d16}.inventory{display:flex;align-items:center;gap:8px;padding:10px;overflow-x:auto}.inventory:empty:before{content:'Inventory — empty';opacity:.45}.inventory button.selected{border-color:#ffcb80;background:#634024}.action-panel{padding:10px;border-left:1px solid #ffffff20}.action-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}.action-buttons button.primary{background:#7f2631;border-color:#df6570}
.dialogue-panel{position:absolute;z-index:10;left:4%;right:4%;bottom:108px;display:grid;grid-template-columns:92px 1fr;gap:16px;padding:14px;background:var(--panel);border:1px solid #ffc99b55;border-radius:13px;box-shadow:0 12px 50px #000}.portrait{display:grid;place-items:center;min-height:92px;border-radius:9px;background:linear-gradient(145deg,#62314b,#241727);font:700 2.1rem Georgia;color:#ffd2b5}.dialogue-copy strong{color:#ffbd85;text-transform:uppercase;letter-spacing:.09em}.dialogue-copy p{min-height:2.8em;margin:.4em 0;line-height:1.45}.choices{display:grid;gap:6px}.choices button{text-align:left}.dialogue-next{float:right}
.modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#000a}.modal-card{position:relative;width:min(680px,100%);max-height:85vh;overflow:auto;border:1px solid #ffffff33;border-radius:15px;background:#1b121c;padding:25px}.modal-close{position:absolute;right:12px;top:12px;padding:.2rem .55rem;font-size:1.4rem}.journal-entry{padding:10px 0;border-bottom:1px solid #ffffff16}.settings-row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;margin:12px 0}.code-pad{display:grid;grid-template-columns:repeat(3,60px);gap:7px;justify-content:center}.code-display{text-align:center;font:2rem monospace;letter-spacing:.3em;margin:15px}.ending h2{font-size:clamp(2rem,7vw,5rem)}
@media(max-width:700px){.game-shell{height:auto;min-height:100vh;grid-template-rows:auto minmax(420px,58vh) auto}.game-header{align-items:flex-start}.game-header nav{display:grid;grid-template-columns:1fr 1fr}.control-deck{grid-template-columns:1fr}.action-panel{border-left:0;border-top:1px solid #ffffff20}.dialogue-panel{position:fixed;left:6px;right:6px;bottom:6px;grid-template-columns:58px 1fr}.portrait{min-height:58px}.scene-card{max-width:90%;padding:18px}.objective{max-width:80%}.room-actor{height:59%}}

/* Illustrated prologue: art and hit areas share one undistorted scene plane. */
.game-shell{height:100dvh;grid-template-rows:auto minmax(230px,1fr) auto auto}
.scene-viewport{grid-row:2;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#08070a}
.stage{flex:none;aspect-ratio:1672/941}
.scene-art{background-size:100% 100%;background-repeat:no-repeat}
#prologueActor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pixel-actor{position:absolute;left:42%;top:88%;height:66%;aspect-ratio:2/3;transform:translate(-50%,-98.6%);pointer-events:none}
#pixelIvan{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 4px #0005)}
.room-clothes{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 1px #0007)}
.room-props{display:none;position:absolute;inset:0;pointer-events:none}
.scene-room .room-props{display:block}
.room-prop{position:absolute;object-fit:fill;pointer-events:none}
.ring-glint::before{content:'';position:absolute;left:37%;top:50%;width:26%;height:12%;border:1px solid #d9aa66;border-radius:50%;transform:rotate(-18deg);box-shadow:0 1px 2px #000}
.ring-glint::after{content:'✦';position:absolute;left:38%;top:18%;color:#ffe3a5;font-size:clamp(8px,1vw,16px);text-shadow:0 0 5px #efc890;animation:ring-glint 3s ease-in-out infinite}
@keyframes ring-glint{0%,70%,100%{opacity:.3}85%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ring-glint::after{animation:none;opacity:.8}}
#reviewRoom{margin-top:10px}
#reviewEnd{margin-top:10px}
.ambient-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ambient-scene[hidden]{display:none}
.end-copy{position:absolute;z-index:1;left:6%;top:13%;width:46%}
.end-copy h2{font:700 clamp(28px,4.4vw,68px)/1 Georgia,serif;color:#ffe0af;margin:16px 0}
.end-copy .eyebrow{font-size:clamp(10px,1vw,15px)}
.end-subtitle{font:italic clamp(14px,1.9vw,26px) Georgia,serif;color:#fca4a9}
.end-soon{font-size:clamp(17px,2.2vw,30px);margin:24px 0 8px}
.end-tagline{color:#cdbacb;font-size:clamp(12px,1.3vw,19px)}
.scene-end .objective{display:none}
.room-actor.idle-breath{transform-origin:50% 98%;animation:ivan-breathe 4.8s ease-in-out infinite}
@keyframes ivan-breathe{0%,100%{scale:1 1}50%{scale:1.001 1.002}}
@media(prefers-reduced-motion:reduce){.room-actor.idle-breath{animation:none}}
@media(max-width:700px){.end-copy{top:8%}.end-copy h2{margin:10px 0}.end-soon{margin-top:14px}.end-copy button{font-size:12px;padding:9px}.end-copy .review-actions{margin-top:12px}}
.walk-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-width:92%;margin:0;padding:5px 10px;border-radius:6px;background:#120b16c9;color:#ebd5bf;font-size:clamp(10px,1vw,13px);pointer-events:none;text-align:center}
.scene-office .scene-art,.scene-lounge .scene-art{cursor:crosshair}
.scene-office .scene-art,.scene-lounge .scene-art{background-color:#181016;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.hotspot{min-width:0;min-height:0;border-radius:5px;cursor:pointer}
.hotspot:focus-visible{border:2px solid #ffe7ae;background:#ffdc8a22;outline:2px solid #1a1119;outline-offset:2px}
.hotspot:focus-visible span{opacity:1}
.hotspot span{font-size:clamp(10px,1.1vw,14px);z-index:2;pointer-events:none}
.hotspot:hover,.hotspots.reveal .hotspot{background:#ffd18b12;border-color:#ffcf86;box-shadow:0 0 12px #ffd18b20}
.objective{top:auto;bottom:10px;left:50%;transform:translateX(-50%);max-width:94%;width:max-content;text-align:center;font-size:clamp(11px,1.15vw,15px);pointer-events:none;border:1px solid #d4ab6540;backdrop-filter:blur(6px)}
.caption{pointer-events:none}
.control-deck{grid-row:4;min-height:82px}
.dialogue-panel{grid-row:3;position:relative;left:auto;right:auto;bottom:auto;width:min(100%,1200px);margin:0 auto;border-radius:0;border-left:0;border-right:0;grid-template-columns:96px 1fr;gap:16px;padding:12px 20px;min-height:126px;max-height:42vh;overflow:auto;box-shadow:none}
.portrait{align-self:start;width:96px;height:96px;min-height:0;background-color:#251c28;background-repeat:no-repeat;border:1px solid #d4ab654a;border-radius:8px}
.dialogue-copy p{min-height:1.6em;margin:.45em 0;font-size:1.08rem}
.dialogue-copy strong{font-size:.85rem}
.choices{grid-template-columns:1fr;gap:5px}
.choices button{padding:.5rem .8rem;font-size:.95rem}
.dialogue-next{padding:.4rem 1rem;font-size:.9rem}
.review-button{border-color:#d2a362;background:#4d2739}
.review-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.title-screen{min-height:100dvh;justify-items:start;padding:24px clamp(20px,4vw,70px);background:linear-gradient(90deg,#100b1280,transparent 60%),url('assets/scenes/title-v01/title-screen-v01.png') center/cover no-repeat}
.title-card{padding:26px;width:min(43vw,520px);max-width:100%;background:#140d16d9;box-shadow:0 20px 70px #0008}
.title-card h1{font-size:clamp(2.6rem,4.7vw,4.6rem);line-height:.95}
.title-card .review-button{margin:4px 2px;font-size:.78rem;padding:.5rem .65rem}
.title-card .small{opacity:.82}
.title-actions{margin:20px}
@media(max-width:700px){
  .title-screen{display:block;padding:58vw 16px 20px;background-color:#100b12;background-image:linear-gradient(transparent 35vw,#100b12 58vw),url('assets/scenes/title-v01/title-screen-v01.png');background-position:top center;background-size:100% 60vw,100% auto;background-repeat:no-repeat}
  .title-card{width:100%;padding:22px;margin:0 auto;max-width:520px}
  .title-card h1{font-size:clamp(2.6rem,10vw,4rem)}
}
@media(max-width:700px){
  .game-shell{height:auto;min-height:100dvh;grid-template-rows:auto auto auto auto;align-content:start}
  .game-header{gap:8px}.game-header strong{font-size:.85rem}.game-header span{font-size:.74rem}
  .scene-viewport{display:block;overflow-x:auto;overflow-y:hidden;height:406px;touch-action:pan-x;scrollbar-color:#a46575 #201321}
  .scene-viewport::after{content:'Swipe the scene sideways to look around';position:sticky;left:0;bottom:0;display:block;width:100%;padding:4px;background:#100b12dd;color:#e2c6ad;font-size:11px;text-align:center;pointer-events:none}
  .stage{margin:0}.control-deck{grid-template-columns:minmax(0,1fr)}
  .dialogue-panel{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px;max-height:none}
  .portrait{width:64px;height:64px;min-height:0}.dialogue-copy p{font-size:1rem}
  .choices button{min-height:44px}.objective{max-width:94%}.room-actor{height:66%}
}
@media(prefers-reduced-motion:reduce){.mosaic{animation:none}}

/* Close-ups keep the object/person in view throughout an interaction. */
.closeup-dialog{color:#f8eadd;background:#160f18;border:1px solid #cfad7166;border-radius:15px;padding:0;width:min(1040px,96vw);max-height:94dvh;box-shadow:0 30px 120px #000c;overflow:auto}
.closeup-dialog::backdrop{background:#08040be0;backdrop-filter:blur(5px)}
.closeup-header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid #ffffff20}
.closeup-header h2{font:1.65rem Georgia,serif;margin:3px 0;color:#ffe0ba}
.closeup-eyebrow{color:#cfab74;font-size:.65rem;text-transform:uppercase;letter-spacing:.2em}
.closeup-tools{display:flex;align-items:center;gap:10px}.closeup-tools button{font-size:.78rem;padding:.5rem .7rem;min-height:40px}
#closeupClose{font-size:1.4rem;min-width:42px}
.closeup-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);align-items:center}
.closeup-media{position:relative;min-width:0;background:#0d080f}
#closeupCanvas{display:block;width:100%;height:auto;max-height:calc(92dvh - 85px);object-fit:contain}
.closeup-native-image{display:block;width:100%;height:auto;max-height:calc(92dvh - 85px);object-fit:contain}
#closeupWakeup{display:block;width:100%;height:auto;max-height:calc(92dvh - 85px);object-fit:contain}
#closeupWakeup[hidden]{display:none}
.censored-closeup #closeupCanvas,.censored-closeup .closeup-native-image{display:none!important}
.closeup-conversation{padding:26px;min-width:0;align-self:center}
.tray-closeup .closeup-layout{grid-template-columns:minmax(290px,.8fr) minmax(0,1.2fr)}
.tray-closeup .closeup-conversation{grid-column:1;grid-row:1}
.tray-closeup .closeup-media{grid-column:2;grid-row:1}
.tray-target[aria-pressed="true"]{border-color:#ffda92;background:#f4d19316}
#closeupDescription{color:#cdbacb;line-height:1.6;margin:0 0 22px;font-size:1rem}
.closeup-actions{display:flex;gap:10px;flex-wrap:wrap}
.closeup-actions button{min-height:44px}.closeup-actions .primary{background:#762937;border-color:#c5636b}
.closeup-actions select{max-width:100%;min-height:44px;padding:8px;border:1px solid #cfad7166;border-radius:7px;background:#251b29;color:#f8eadd;font:inherit}
.closeup-dialog .dialogue-panel{display:grid;width:100%;margin:0;padding:0;border:0;grid-template-columns:54px minmax(0,1fr);gap:10px;background:transparent;max-height:none;min-height:0;overflow:visible}
.closeup-dialog .portrait{width:54px;height:54px;border-radius:50%}
.closeup-dialog .dialogue-copy p{font-size:1.1rem;line-height:1.55;min-height:3em}
.closeup-dialog .dialogue-next{margin-top:12px;min-height:44px;float:none}
.closeup-dialog .choices{margin-top:18px}.closeup-dialog .choices button{min-height:44px;line-height:1.4}
.closeup-dialog.in-dialogue #closeupDescription,.closeup-dialog.in-dialogue #closeupActions{display:none}
.closeup-targets{position:absolute;inset:0;pointer-events:none}
.tray-target{position:absolute;pointer-events:auto;background:transparent;border:1px solid transparent;border-radius:14px;padding:0}
.tray-target:hover,.tray-target:focus-visible{background:#f4d19316;border-color:#ffda92;box-shadow:0 0 16px #ffd48944}
.tray-target span{position:absolute;bottom:0;left:50%;transform:translate(-50%,110%);background:#100916e8;padding:5px 9px;border-radius:6px;font-size:.75rem;white-space:nowrap;opacity:0}
.tray-target:hover span,.tray-target:focus-visible span{opacity:1}
#reviewDates{margin-top:10px}
@media(max-width:700px){
  .closeup-dialog{width:96vw;max-height:96dvh;border-radius:10px}
  .closeup-header{padding:10px 12px}.closeup-header h2{font-size:1.4rem}
  .closeup-tools{gap:5px}.closeup-tools button{font-size:.68rem}
  .closeup-layout{grid-template-columns:minmax(0,1fr)}
  .tray-closeup .closeup-layout{grid-template-columns:minmax(0,1fr)}
  .tray-closeup .closeup-media{grid-column:1;grid-row:1}
  .tray-closeup .closeup-conversation{grid-column:1;grid-row:2}
  #closeupCanvas{max-height:46dvh;object-fit:contain}
  .closeup-native-image{max-height:46dvh;object-fit:contain}
  #closeupWakeup{max-height:46dvh}
  .closeup-conversation{padding:18px;min-height:112px}
  .closeup-dialog .dialogue-copy p{min-height:0;font-size:1rem}
  .closeup-dialog .choices{margin-top:10px}
}