:root{background:#0a151a;color:#ede8da;font-family:'NB International',Arial,sans-serif}.hud{padding:26px 32px}.hud .wordmark{letter-spacing:.09em;font-size:13px}.hud-actions button,.hud-actions a{font-family:inherit;font-size:11px;letter-spacing:.02em}.welcome{left:7vw;top:50%;transform:translateY(-42%);max-width:550px;text-align:left;background:none}.welcome h1{font-family:'Times Now',Georgia,serif;font-size:clamp(68px,9vw,135px);font-weight:400;letter-spacing:-.065em;line-height:.86;margin:30px 0}.welcome .intro{font-family:inherit;font-size:15px;line-height:1.6;color:#bfcbd0}.eyebrow{letter-spacing:.14em;font-size:10px}.welcome .entry-actions{justify-content:flex-start;margin-top:32px}.entry-actions button{background:#e9e6da;color:#182126;border:0;font-family:inherit;padding:15px 23px}.entry-help{font-size:11px;color:#a3b3ba}.tape-data,.walking-help{font-family:monospace;font-size:9px;opacity:.55}.tape-data{bottom:20px}.walking-help{bottom:42px}.panel{background:#171d1d;color:#e5dfd2;border-color:#b4b6a23b;font-family:inherit;box-shadow:0 30px 100px #0008}.panel h2{font-family:Georgia,serif;font-weight:400}.tv-panel{background:#10191de0;backdrop-filter:blur(16px);border-color:#ddd3}.room-arrival{font-family:inherit}#room-name{font-family:Georgia,serif;font-size:42px}.interaction{background:#111a1ee0;border-color:#d7decc44;backdrop-filter:blur(8px)}.project-index{max-height:85vh}.project-index .room-links{grid-template-columns:1fr 1fr 1fr}.room-links button{font-family:inherit;font-size:11px}.project-index .project-list{max-height:32vh;overflow:auto}.media-dialog{position:fixed;inset:0;margin:0;border:0;border-radius:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;background:#000;overflow:hidden;box-shadow:none}.media-dialog::backdrop{background:#000}.media-dialog .media-heading{position:absolute;inset:0 0 auto;z-index:2;padding:20px 28px;background:linear-gradient(#000b,transparent);display:flex;justify-content:space-between;pointer-events:none}.media-heading h2{font-size:14px;font-weight:400}.media-heading .eyebrow{font-size:9px}.media-heading button{pointer-events:auto;background:#1118;border:1px solid #fff4;font-size:11px}.media-dialog #media-content{height:100%;display:flex;align-items:center;justify-content:center}.media-dialog #media-content>div:first-child{width:100%;height:100%}.media-dialog video.film-player{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}.media-dialog .film-footer{display:none}.media-dialog .film-program-label{position:absolute;bottom:65px;right:28px;max-width:260px;opacity:.3;transition:opacity .2s}.media-dialog .film-program-label:hover,.media-dialog .film-program-label:focus-within{opacity:1}.media-dialog .study-tabs{position:absolute;bottom:65px;left:20px;right:20px;max-height:90px;opacity:.2;transition:opacity .2s}.media-dialog .study-tabs:hover{opacity:1}.entering-screen .hud,.entering-screen .tv-panel,.entering-screen .walking-help,.entering-screen .tape-data,.entering-screen #crosshair{opacity:0;transition:opacity .35s}.watching-film .hud,.watching-film .tv-panel{visibility:hidden}.media-dialog .media-heading{opacity:0;transition:opacity .2s}.media-dialog:hover .media-heading,.media-dialog:focus-within .media-heading{opacity:1}@media(max-width:700px){.hud{padding:18px}.welcome{left:7vw;right:7vw}.welcome h1{font-size:80px}.hud-actions{gap:9px}.hud-actions button{font-size:9px}.project-index .room-links{grid-template-columns:1fr 1fr}.media-dialog .film-program-label{bottom:80px;right:14px;max-width:200px}.walking-help{max-width:90vw}}
.hud button:focus-visible,.hud a:focus-visible{outline:2px solid white;outline-offset:5px}.walking-help{filter:drop-shadow(0 1px 3px #000);color:#fff}.room-arrival{text-shadow:0 2px 18px #0009}
.fold-curtain{position:fixed;inset:0;background:#070909;opacity:0;pointer-events:none;z-index:7;transition:opacity .22s}.folding .fold-curtain{opacity:1}@media(prefers-reduced-motion:reduce){.fold-curtain{transition:none}}

.lighting-panel{margin:22px 0;padding:16px 0;border-block:1px solid #ffffff20}.lighting-panel summary{cursor:pointer;margin-bottom:16px}.lighting-panel button{font:inherit;font-size:11px;border:1px solid #ffffff30;padding:8px 12px;background:none;color:inherit}

.screen-hover{position:fixed;z-index:6;display:flex;gap:24px;align-items:center;padding:11px 14px;border:1px solid #ffffff5c;border-radius:3px;background:#131918dd;color:#fff;font:12px 'NB International',Arial,sans-serif;backdrop-filter:blur(16px);box-shadow:0 4px 24px #0006;cursor:pointer;animation:screen-hover-in .16s ease-out}.screen-hover[hidden]{display:none}.screen-hover:hover,.screen-hover:focus-visible{background:#ecebe4;color:#101616;outline:2px solid #fff;outline-offset:3px}.entering-screen .screen-hover,.watching-film .screen-hover{display:none}@keyframes screen-hover-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.screen-hover{animation:none}}

/* Match the public portfolio's bold wordmark at the theater entrance. */
@font-face{font-family:ArchivoBlack;src:url('assets/brand/font-54.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
#welcome{inset:0;transform:none;max-width:none;padding:32px;align-items:center;text-align:center;background:linear-gradient(#07101455,#07101499)}
#welcome .entrance-logo{margin:0 0 32px;font:400 clamp(32px,6vw,60px)/1 ArchivoBlack,Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap}
#welcome .entry-actions{margin:0;align-items:center;justify-content:center}
#welcome #enter{min-height:52px;min-width:200px;font-size:14px}
#enter[aria-busy=true]::after{content:'';display:inline-block;width:12px;height:12px;margin-left:12px;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;animation:film-loading 1s linear infinite}
#load-status:empty{display:none}
body:has(#welcome:not([hidden])) .hud,body:has(#welcome:not([hidden])) .tape-data{visibility:hidden}
body:has(#load-status:not(:empty)) .hud{visibility:visible}
#world,#touch-controls,#interaction,.hud,.screen-hover,.tv-panel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#touch-controls button,#interaction,.screen-hover,.tv-panel button{touch-action:none}
#screen-loading{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none}
#screen-loading span{display:block;width:26px;height:26px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:film-loading .8s linear infinite}
@keyframes film-loading{to{transform:rotate(360deg)}}
@media(pointer:coarse),(max-width:700px){
 #experience #touch-controls:not([hidden]){display:flex!important}
 body:has(dialog[open]) #experience #touch-controls{display:none!important}
 .hud{inset:0 0 auto;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));align-items:flex-start}
 .hud .wordmark,.hud-actions>a,#flashlight-button,.tape-data,.room-arrival,.walking-help,.interaction kbd,#touch-controls>span{display:none!important}
 .hud-actions{width:100%;justify-content:space-between;gap:12px}
 .hud-actions button{min-height:48px;padding:12px;font-size:12px}
 #touch-controls{position:fixed;inset:auto auto max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));z-index:5;width:auto}
 .dpad{grid-template-columns:repeat(3,54px);gap:6px}
 .dpad button{height:54px;padding:0;font-size:22px;border:1px solid #ffffff40;border-radius:12px;background:#10191dbb;backdrop-filter:blur(8px)}
 .dpad button.pressed{background:#ede8da;color:#182126}
 #interaction{position:fixed;left:auto;right:max(20px,env(safe-area-inset-right));top:auto;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 64px);transform:none;min-width:100px;min-height:54px;padding:12px;border-radius:12px;font-size:13px;max-width:calc(100vw - 218px);white-space:normal}
 .screen-hover{left:auto!important;top:auto!important;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));min-height:48px;padding:12px;font-size:12px;gap:10px}
 .tv-panel{position:fixed;inset:max(70px,calc(env(safe-area-inset-top) + 58px)) 16px auto auto;transform:none;width:auto;max-width:calc(100vw - 32px);padding:4px 8px;border-radius:10px;display:flex;gap:4px}
 .tv-panel>div:first-child,.tv-panel select,.tv-panel .tv-volume-label{display:none!important}
 .tv-panel .tv-buttons{display:flex;gap:4px}.tv-panel button{min-width:44px;min-height:44px;padding:10px}
 .panel button,.panel a,.media-heading button{min-height:44px}
 .media-dialog .media-heading{opacity:1}
 body:has(dialog[open]) #touch-controls,body:has(dialog[open]) .tv-panel,body:has(dialog[open]) #screen-loading{display:none!important}
}
@media(prefers-reduced-motion:reduce){#screen-loading span,#enter[aria-busy=true]::after{animation:none}}

/* Keep deliberate menu access above the two-thumb play area. */
#world,#world canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hud{pointer-events:none}.hud a,.hud button{pointer-events:auto}
#menu-button{touch-action:manipulation;min-width:44px;min-height:44px}
@media(pointer:coarse),(max-width:700px){
 #index-button{display:none}
 .hud-actions{justify-content:flex-end}
 #menu-button{width:44px;height:44px;padding:10px;border:1px solid #ffffff30;border-radius:50%;background:#10191d66;font-size:17px;opacity:.7}
 #menu-button:hover,#menu-button:focus-visible{opacity:1}
}

.cinema-map{position:fixed;z-index:5;left:24px;bottom:54px;width:230px;border:1px solid #acc1c42b;background:#07151edb;backdrop-filter:blur(16px);border-radius:6px;color:#dce8e8;font:11px 'NB International',Arial,sans-serif;box-shadow:0 8px 28px #0003}.cinema-map[hidden]{display:none}.map-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.map-toggle:focus-visible{outline:2px solid #edc780}.map-content{padding:0 9px 12px}.cinema-map canvas{display:block;width:100%;height:auto;pointer-events:none}.map-location{margin:4px 3px 9px;color:#fff}.map-legend{display:flex;gap:12px;color:#aabfc5;font-size:9px}.map-legend span{display:flex;align-items:center;gap:4px}.map-legend i{width:6px;height:6px;background:#60808b;display:inline-block}.map-legend .map-you{background:#f9cf83;border-radius:50%}.map-legend .map-route{height:1px}.cinema-map.collapsed{width:86px}.cinema-map.collapsed .map-content{display:none}body:has(dialog[open]) .cinema-map,.watching-film .cinema-map,.entering-screen .cinema-map{display:none}@media(max-width:700px){.cinema-map{left:16px;top:16px;bottom:auto;width:210px;max-height:60vh}.map-toggle{min-height:44px}.map-legend{font-size:8px}.cinema-map.collapsed{width:72px}}

/* Legible arrivals in the white corridor and loading-space void. */
#experience:has(#world:is([data-room="whitehall"],[data-room="construct"])) .room-arrival{color:#263c32;text-shadow:none}
#experience:has(#world:is([data-room="whitehall"],[data-room="construct"])) .walking-help{color:#23382e;filter:none}

/* After Hours / local game layer */
.cinema-map.radar{width:208px;left:24px;bottom:30px;border:0;background:transparent;backdrop-filter:none;box-shadow:none;border-radius:0;font-family:monospace;text-shadow:0 1px 4px #000}
.radar .map-toggle{padding:5px 18px;color:#abc2c6;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.radar .map-content{padding:0}.radar canvas{width:208px;filter:drop-shadow(0 3px 12px #0008)}.radar .map-location{font-size:11px;line-height:1.4;margin:0 14px;max-width:185px}.map-heading{font-size:8px;color:#97b6bb;margin:5px 14px;letter-spacing:.08em}.cinema-map.radar.collapsed{width:130px}.radar.collapsed .map-content{display:none}
.game-settings{padding:20px 0;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;margin:24px 0}.game-settings>label:first-child{display:flex;align-items:center;justify-content:space-between}.game-settings select{font:inherit;padding:8px 12px;background:#172227;color:inherit;border:1px solid #ffffff30;border-radius:2px}.game-settings>button{margin-top:12px}.projection-library{max-width:760px}.library-row{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #ffffff20}.library-row img{width:92px;aspect-ratio:16/9;object-fit:cover;background:#152024}.library-row p{margin:0;font-size:16px}.library-row small{display:block;color:#a9b4b6;font-size:12px;margin-top:5px}.library-row button{padding:8px 12px;white-space:nowrap}.library-row.locked{opacity:.4}.library-row.locked .film-placeholder{width:92px;aspect-ratio:16/9;background:repeating-linear-gradient(0deg,#112027,#112027 3px,#1a2b32 3px,#1a2b32 4px);display:grid;place-items:center;color:#7e9aa4}.project-row.discovered .project-number{color:#edc48a}.project-row.discovered .project-number:before{content:'• ';}.projection-library #visit-booth{margin-top:24px}.projection-library .library-row button:disabled{cursor:default}.hud-actions #library-button{font-variant-numeric:tabular-nums}
@media(max-width:700px){.cinema-map.radar{width:138px;left:10px;top:auto;bottom:174px}.radar canvas{width:138px}.radar .map-location{font-size:9px;margin:0 8px}.radar .map-toggle{font-size:8px;padding:3px 8px}.radar .map-heading{display:none}.hud-actions #library-button{font-size:10px}.library-row{grid-template-columns:65px 1fr;gap:10px}.library-row img,.library-row.locked .film-placeholder{width:65px}.library-row button{grid-column:2;justify-self:start}.hud-actions{gap:12px}}
@media(prefers-reduced-motion:reduce){.radar canvas{filter:none}}

/* Captions belong to a person in the room, without a modal or a backdrop. */
.resident-subtitle{position:fixed;left:0;top:0;z-index:8;width:min(430px,calc(100vw - 40px));margin:0;padding:0;background:none;border:0;color:#fff9e9;text-align:center;pointer-events:none;filter:drop-shadow(0 2px 5px #000b);text-shadow:0 1px 2px #000,0 2px 12px #000,1px 0 2px #0009,-1px 0 2px #0009}.resident-subtitle[hidden]{display:none}.subtitle-speaker{font:500 10px/1.4 'NB International',Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;opacity:.85;margin:0 0 9px}.subtitle-line{font:400 clamp(20px,2.3vw,28px)/1.18 'Times Now',Georgia,serif;letter-spacing:-.018em;text-wrap:pretty;margin:0}.subtitle-line.arriving{animation:subtitle-arrive .22s ease-out both}.subtitle-actions{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;font:10px 'NB International',Arial,sans-serif}.subtitle-actions button{pointer-events:auto;border:0;border-bottom:1px solid #fff6;border-radius:0;background:transparent;color:inherit;font:inherit;padding:7px 1px;cursor:pointer;text-shadow:0 1px 5px #000}.subtitle-actions button:hover{border-color:#fff}.subtitle-actions button:focus-visible{outline:2px solid #f0ce91;outline-offset:4px}.subtitle-actions kbd{font:9px monospace;opacity:.6;margin-right:12px}.subtitle-actions [data-voice]{margin-left:4px;opacity:.7}.subtitle-note{font:9px/1.4 'NB International',Arial,sans-serif;opacity:.7;margin:6px 0 0}.subtitle-note:empty{display:none}.resident-subtitle.speaking .subtitle-speaker::before{content:'';display:inline-block;width:4px;height:4px;background:#ddf2c6;border-radius:50%;margin:0 7px 2px 0;box-shadow:0 0 5px #e6ffb9}.in-conversation .walking-help{opacity:.08}.in-conversation #crosshair{opacity:.35}.in-conversation #room-arrival{visibility:hidden}.watching-film .resident-subtitle,.entering-screen .resident-subtitle,body:has(dialog[open]) .resident-subtitle{display:none}@keyframes subtitle-arrive{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}@media(max-width:700px){.subtitle-line{font-size:23px}.subtitle-actions{gap:7px}.subtitle-actions button{min-height:36px}.subtitle-actions kbd{margin-right:4px}}@media(prefers-reduced-motion:reduce){.subtitle-line.arriving{animation:none}}

.swim-pad,.walking-help .swim-help{display:none}
#experience:has(#world:is([data-water="submerged"],[data-water="surface"])) .swim-help{display:inline}
@media(pointer:coarse),(max-width:700px){
 #experience:has(#world:is([data-water="submerged"],[data-water="surface"])) .swim-pad{display:flex;position:absolute;left:0;bottom:calc(100% + 8px);gap:6px}
 .swim-pad button{min-width:64px;min-height:44px;color:#fff;border:1px solid #ffffff50;border-radius:10px;background:#10191dcc}
 .swim-pad button.pressed{color:#182126;background:#ede8da}
}
#world[data-water="submerged"]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 32%,rgba(5,49,57,.18) 77%,rgba(3,34,43,.45))}
#world[data-crossing]{--gate-glow:110,228,214}
#world[data-crossing="amber"],#world[data-crossing="archive"]{--gate-glow:239,181,111}
#world[data-crossing]::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,rgba(10,23,28,.94) 2%,rgba(var(--gate-glow),.78) 20%,rgba(17,27,31,.97) 32%,rgba(var(--gate-glow),.54) 37%,rgba(7,19,25,.76) 46%,transparent 64%);animation:cross-film-gate 620ms ease-in-out both}
@keyframes cross-film-gate{0%{opacity:0;transform:scale(.15)}32%{opacity:.92}48%,53%{opacity:1;transform:scale(6.5)}100%{opacity:0;transform:scale(8)}}
@media(prefers-reduced-motion:reduce){#world[data-crossing]::before{animation:none}}

/* The player's question reads as the other half of a conversation. */
.subtitle-question{display:inline-block;pointer-events:auto;cursor:pointer;max-width:100%;padding:6px 1px 4px;margin:10px 0 0;color:#f6deab;background:transparent;border:0;border-bottom:1px solid #f6deab88;font:500 12px/1.35 'NB International',Arial,sans-serif;text-shadow:0 1px 5px #000}
.subtitle-question::before{content:'Q';display:inline-block;border:1px solid #f6deab77;border-radius:2px;padding:0 3px;margin-right:6px;font:10px/1.3 monospace;vertical-align:1px}
.subtitle-question[hidden]{display:none}.subtitle-question:focus-visible{outline:2px solid #f6deab;outline-offset:3px}.subtitle-question:not([hidden])+.subtitle-actions{margin-top:4px}
@media(pointer:coarse){.subtitle-question{min-height:40px}.subtitle-question::before{display:none}}

/* The optional room directions occupy the quiet space below the navigation.
   Keep the centre of the film, the navigator and the movement controls clear. */
#room-arrival[data-title-style] {
  --title-ink: #f4ecda;
  --title-shadow: 0 1px 4px #07090acc, 0 3px 18px #07090ac0;
  position: fixed;
  inset: clamp(94px, 15vh, 142px) auto auto clamp(26px, 4vw, 68px);
  max-width: min(460px, 48vw);
  gap: 9px;
  color: var(--title-ink);
  text-shadow: var(--title-shadow);
  pointer-events: none;
}
#experience:has(#world:is([data-room="whitehall"],[data-room="construct"],[data-room="neuro"])) #room-arrival[data-title-style] {
  --title-ink: #182621;
  --title-shadow: 0 1px 7px #f1f3ddd0;
}
#room-arrival[data-title-style] #room-number {
  font: 500 10px/1.35 'NB International', Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .95;
}
#room-arrival[data-title-style] #room-name {
  font: 400 clamp(26px, 3.7vw, 58px)/1 'Times Now', Georgia, serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#room-arrival[data-title-style="house"] #room-number::before {
  content: ''; display: inline-block; width: 22px; margin: 0 10px .3em 0;
  border-top: 1px solid;
}
#room-arrival[data-title-style="leader"] {
  width: fit-content;
  box-sizing: border-box;
  padding: 9px 14px 11px 12px;
  border-left: 3px solid #edb06b;
  color: #f4ebd7;
  background: #141919ef;
  text-shadow: none;
}
#room-arrival[data-title-style="leader"] #room-number {
  color: #f4bd82;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .09em;
}
#room-arrival[data-title-style="leader"] #room-name {
  color: #f4ebd7;
  font: 600 clamp(20px, 2.3vw, 34px)/1.04 'NB International', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
#room-arrival[data-title-style="afterimage"] { flex-direction: column-reverse; }
#room-arrival[data-title-style="afterimage"] #room-name {
  font-style: italic;
  font-size: clamp(24px, 3vw, 44px);
}
#room-arrival[data-title-style="afterimage"] #room-number { letter-spacing: .08em; }
@media (pointer:coarse), (max-width:700px), (max-height:500px) {
  #room-arrival[data-title-style]:not([hidden]) {
    display: flex!important;
    inset: max(69px, calc(env(safe-area-inset-top) + 59px)) auto auto max(18px, env(safe-area-inset-left));
    max-width: min(320px, 63vw);
    gap: 5px;
  }
  #room-arrival[data-title-style] #room-name { font-size: 25px; }
  #room-arrival[data-title-style="leader"] #room-name { font-size: 19px; }
  #room-arrival[data-title-style] #room-number { font-size: 9px; }
}
@media (min-width:701px) and (max-height:500px) {
  #room-arrival[data-title-style]:not([hidden]) { left: 250px; max-width: 37vw; }
}
@media (max-width:700px) {
  #experience:has(#tv-panel:not([hidden])) #room-arrival[data-title-style]:not([hidden]) {
    top: max(136px, calc(env(safe-area-inset-top) + 126px));
  }
}
body:has(dialog[open]) #room-arrival[data-title-style],
.watching-film #room-arrival[data-title-style],
.entering-screen #room-arrival[data-title-style] { visibility: hidden; }
#room-arrival[data-still] { transform: none; transition: none; }
@media (prefers-reduced-motion:reduce) {
  #room-arrival[data-title-style] { transform: none; transition: none; }
}