/* A separate black room, outside the portfolio and case-study layout. */
html.game-session-open {overflow:hidden!important;scroll-snap-type:none!important}
body.game-session-open {overflow:hidden;overscroll-behavior:none}
body.game-session-open>main,body.game-session-open>.site-nav,body.game-session-open>.mansion-world,body.game-session-open>.atmosphere-controls,body.game-session-open>.sound-notice,body.game-session-open>.story-progress {visibility:hidden}
body.game-session-open #footstepTrail,body.game-session-open #storyParticles {visibility:hidden}
.story-play-room {position:fixed;inset:0;z-index:1000;min-height:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scroll-snap-align:none;background:#000;padding:120px clamp(24px,6vw,90px) 60px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#dceeee}
.story-play-room[hidden] {display:none}
.game-session-header {position:absolute;top:32px;left:clamp(24px,6vw,90px);right:clamp(24px,6vw,90px);display:flex;align-items:center;justify-content:space-between;gap:24px}
#gameSessionExit {display:flex;align-items:center;gap:12px;flex:none;border:1px solid #c8eeee33;border-radius:4px;padding:11px 14px;background:#c8eeee07;color:#c8dddd;font:400 11px/1.4 Inter,sans-serif;cursor:pointer}
#gameSessionExit svg {width:15px;height:15px}
#gameSessionExit:hover,#gameSessionExit:focus-visible {color:#efffff;border-color:#c8eeee99;background:#c8eeee12}
.story-play-room .keyboard-demo {width:100%;max-width:1050px;margin:auto 0;flex:none}
.story-play-room .keyboard-demo.is-focused {background:#000;outline:none;box-shadow:none;z-index:auto}
.story-play-room .keyboard-caption {display:none}
.game-board-layout {display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:32px;align-items:center}
.game-board-layout .floor-navigation {flex-direction:column;gap:12px;align-items:center}
.game-board-layout .floor-navigation>span {font:400 8px/1.5 'IBM Plex Mono',monospace;color:#809b9b}
.game-board-layout .floor-ruler {display:flex;flex-direction:column;width:50px}
.game-board-layout .floor-tick {width:50px;min-height:27px;height:27px;flex-direction:row;gap:9px;padding:0;justify-content:flex-start}
.game-board-layout .floor-tick-line {height:1px;width:12px;margin:0;flex:none;transition:width .2s,background .2s,box-shadow .2s}
.game-board-layout .floor-tick[aria-pressed="true"] .floor-tick-line {height:1px;width:25px}
.game-board-layout .floor-number {font-size:9px}
.game-board-layout .floor-tick[data-locked="true"] .floor-number::after {display:none}
.story-play-room .keyboard-legend {margin:20px 0;gap:12px 20px}
.story-play-room .sound-only .keyboard-legend {visibility:hidden}
.story-play-room .keyboard-visual-options {margin:22px 0 16px}
.story-play-room .keyboard-actions #keyboardWatch,.story-play-room .keyboard-actions #keyboardTry {display:none}
.story-play-room .keyboard-actions button[hidden] {display:none}
.story-play-room .keyboard-session-status {margin-top:16px}
.story-play-room .keyboard-status {font-size:12px;min-height:1.7em}
.story-play-room .keyboard-modes {margin-top:12px}
.story-play-room .keyboard-modes[hidden] {display:none}
@media(pointer:fine) {.story-play-room .keyboard-modes {display:none}}
/* The hidden map stays interactive, but reveals no key shapes or objects. */
.story-play-room .sound-only .keyboard-keys {opacity:0}
.story-play-room .sound-only .game-keyboard::after {display:none}
.game-static {display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;border:1px solid #c8eeee1d;border-radius:7px;background:radial-gradient(ellipse,#91b8b829,#21373710 65%,#000 100%);box-shadow:inset 0 0 40px 12px #0008}
.sound-only .game-static {display:block}
.game-static::before {content:"";position:absolute;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23noise)' opacity='.55' d='M0 0h160v160H0z'/%3E%3C/svg%3E");opacity:.34;filter:grayscale(1) contrast(1.25) blur(.3px);animation:game-static-drift .48s steps(4,end) infinite}
.game-static::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#c8eeee0b 45%,transparent 60%),repeating-linear-gradient(transparent 0 3px,#0007 3px 4px);box-shadow:inset 0 0 38px 10px #000b}
@keyframes game-static-drift {0%,100%{transform:translate(0,0)}25%{transform:translate(-8%,5%)}50%{transform:translate(5%,-6%)}75%{transform:translate(-3%,-2%)}}
.game-visual-glitch .keyboard-keys,.game-visual-glitch .keyboard-trail {animation:game-signal-loss .45s steps(1,end) both}
@keyframes game-signal-loss {0%{opacity:1;transform:none}15%{opacity:.4;transform:translateX(5px)}32%{opacity:.9;transform:translateX(-3px)}48%{opacity:.1;transform:none}65%{opacity:.65;transform:translateX(2px)}82%,100%{opacity:0;transform:none}}
.game-visual-notice {position:relative;max-width:560px;display:grid;grid-template-columns:1fr auto;gap:12px 20px;margin-top:24px;padding:18px 44px 18px 18px;border:1px solid #c8eeee33;border-radius:5px;background:#071010b3;box-shadow:0 0 24px #c8eeee06;font:400 12px/1.7 Inter,sans-serif;color:#b7cccc}
.game-visual-notice[hidden] {display:grid;visibility:hidden;pointer-events:none}
.game-visual-notice p {margin:0}
.game-visual-notice button {padding:0;background:none;border:0;color:#dceeee;font:inherit;cursor:pointer}
.game-show-visuals {text-decoration:underline;text-underline-offset:4px;align-self:center;white-space:nowrap}
.game-visual-notice .game-notice-close {position:absolute;right:12px;top:12px;width:16px;height:16px}
.game-notice-close svg {width:100%;height:100%}
.keyboard-demo[data-paused="true"] .game-static::before,body.motion-paused .game-static::before {animation-play-state:paused}
.case-entry-pulse {z-index:2000}
@media(max-width:650px) {
 .story-play-room {padding:100px 24px 35px;justify-content:flex-start}
 .game-session-header {top:24px;left:24px;right:24px;gap:15px;align-items:flex-start}
  #gameSessionExit {padding:9px 10px;gap:7px;font-size:10px}
 .game-board-layout {grid-template-columns:minmax(0,1fr) 35px;gap:16px}
 .game-board-layout .floor-ruler,.game-board-layout .floor-tick {width:35px}
 .game-board-layout .floor-tick {height:24px;min-height:24px;gap:6px}
 .game-board-layout .floor-tick[aria-pressed="true"] .floor-tick-line {width:20px}
 .game-board-layout .floor-number {font-size:8px}
 .story-play-room .keyboard-demo {margin:auto 0}
 .game-visual-notice {grid-template-columns:1fr;gap:8px;font-size:11px;padding:15px 35px 15px 15px}
 .game-show-visuals {justify-self:start}
}
@media(prefers-reduced-motion:reduce) {.game-static::before,.game-visual-glitch .keyboard-keys,.game-visual-glitch .keyboard-trail {animation:none}}
.game-session-header {position:fixed;z-index:4;background:linear-gradient(#000e,transparent)}

/* The same explicit sound controls remain available inside the game dialog. */
.story-play-room .atmosphere-controls {z-index:6;bottom:24px;right:24px}
.story-play-room #motionToggle {display:none}
.story-play-room .sound-notice {z-index:6;bottom:24px}
.story-choice-buttons #playMansion {display:flex;flex-direction:column;gap:5px}
#playMansion small {font-size:.72em;letter-spacing:.06em;line-height:1.2;font-weight:400;opacity:.75}

/* Labels share a baseline; the platform note sits beneath the game label. */
.story-choice-buttons .explore-case {min-height:84px}
.story-choice-buttons #playMansion {gap:0}
#playMansion small {position:absolute;top:calc(50% + 13px);left:0;right:0;font-size:8px;line-height:1.3;white-space:nowrap}
#gameSessionExit {gap:0}
#gameSessionExit span {max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
#gameSessionExit:hover span,#gameSessionExit:focus-visible span {max-width:80px;opacity:1;margin-right:10px}
@media(prefers-reduced-motion:reduce) {#gameSessionExit span {transition:none}}

/* Keep each information row in the layout when the map goes dark. */
.story-play-room .keyboard-visual-options {min-height:3.2em}
.story-play-room .keyboard-visual-options>span {max-width:none}
.story-play-room .keyboard-demo .keyboard-status {position:static;width:auto;height:auto;margin:15px 0 0;padding:0;overflow:visible;clip:auto;white-space:normal}
.story-play-room .sound-only .keyboard-status {visibility:hidden}

/* Sound guidance shares one fixed notification position and visual treatment. */
.mansion-notice {position:fixed;z-index:45;left:var(--pad);bottom:24px;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:8px;width:330px;max-width:calc(100vw - 120px);margin:0;padding:17px 46px 17px 18px;border:1px solid #d3eeee25;border-radius:4px;background:#030909b8;backdrop-filter:blur(8px);box-shadow:0 0 18px #c8eeee09;color:#e0ecec;font:400 12px/1.5 Inter,sans-serif;letter-spacing:0;text-shadow:none}
.mansion-notice .notice-enable {justify-self:start;align-self:auto;color:#f0ffff;font:500 12px/1.5 Inter,sans-serif;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-shadow:none}
.mansion-notice .notice-close {position:absolute;top:9px;right:8px;display:grid;place-items:center;width:32px;height:32px;padding:7px;line-height:1;color:#c6d9d9}
.mansion-notice .notice-close svg {display:block;width:18px;height:18px}
.mansion-notice .notice-enable:hover,.mansion-notice .notice-close:hover {color:#fff;text-shadow:none}
@media(max-width:650px) {.mansion-notice {left:20px;width:280px;max-width:calc(100vw - 110px);padding:16px 40px 16px 16px}}

/* Stack older guidance above the new notice without dismissing it. */
.sound-notice.is-visible {transform:translateY(var(--notice-stack-offset,0px))}

/* One unchanging frame contains the map and its legend in both modes. */
.keyboard-stage {position:relative;isolation:isolate;min-width:0;padding:16px;border:1px solid #c8eeee1d;border-radius:7px}
.story-play-room .keyboard-stage .keyboard-legend {margin:20px 0 0}
.keyboard-stage .game-static {border:0;border-radius:6px;z-index:3}
.story-play-room .keyboard-stage .game-keyboard:focus-visible {outline:none}
@media(max-width:650px) {.keyboard-stage {padding:10px}}

/* The current console line stays readable in both visual modes. */
.story-play-room .keyboard-console {height:112px;max-width:650px;margin-top:15px;overflow:hidden;mask-image:linear-gradient(#000 65%,transparent);font:400 12px/1.7 Inter,sans-serif;color:#a5bcbc}
.story-play-room .keyboard-console .keyboard-status {visibility:visible;margin:0;min-height:0}
.keyboard-console-history p {margin:5px 0 0;opacity:.5;animation:console-line-down .28s ease-out,console-line-fade 4s ease-out forwards}
@keyframes console-line-down {from{transform:translateY(-16px)}to{transform:translateY(0)}}
@keyframes console-line-fade {from{opacity:calc(.5 - var(--console-age,0) * .13)}to{opacity:0}}
@media(prefers-reduced-motion:reduce) {.keyboard-console-history p {animation:none;opacity:calc(.45 - var(--console-age,0) * .12)}}
body.motion-paused .keyboard-console-history p {animation:none}

/* Keep the entry pulse free of preview prompts while reserving their space. */
.story-play-room .keyboard-demo[data-mode="preview"] .keyboard-session-status,
.story-play-room .keyboard-demo[data-mode="preview"] .keyboard-console {visibility:hidden;opacity:0}

.game-session-header {justify-content:flex-end}
.story-play-room .game-demo-label {margin:0 0 18px;font:400 9px/1.7 'IBM Plex Mono',monospace;letter-spacing:.2em;color:#b8d7d7;text-transform:none;text-shadow:none}