:root {
  --ink: #171922;
  --paper: #f2ead3;
  --paper-2: #d8cdaa;
  --navy: #20283b;
  --blue: #4f7eb5;
  --blue-dark: #2b4f79;
  --yellow: #f2c94c;
  --red: #c64e4b;
  --green: #5b9668;
  --tile-a: #727986;
  --tile-b: #656c79;
  --pixel-shadow: 0 4px 0 #0c0d12;
  --lock-shell: #252b35;
  --lock-edge: #11141a;
  --lock-steel: #5d6875;
  --lock-steel-light: #85919d;
  --lock-screen: #0b1715;
  --lock-glow: #9fe0bd;
  --lock-alert: #d3534f;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; }

body {
  overflow: hidden;
  color: var(--paper);
  background: #0d0f16;
  font-family: "Galmuri11", "DungGeunMo", "Malgun Gothic", ui-monospace, monospace;
  word-break: keep-all;
  user-select: none;
}

button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

#app { position: relative; width: 100%; height: 100%; isolation: isolate; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

/* ---------- title ---------- */
#title-screen {
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 6vw, 100px);
  padding: 28px;
  background:
    linear-gradient(rgba(10, 12, 18, .18), rgba(10, 12, 18, .78)),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.025) 47px 48px),
    #202633;
}

.title-room {
  position: relative;
  width: min(48vw, 670px);
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border: 8px solid #101219;
  box-shadow: 0 0 0 4px #465064, 16px 18px 0 rgba(0,0,0,.38);
  image-rendering: pixelated;
}

.preview-floor {
  position: absolute; inset: 0;
  background:#747c89 url("assets/floor-waiting-room.svg") 0 0 / 40px 40px repeat;
}

.preview-wall { position: absolute; z-index: 1; background: #394052; border: 4px solid #161923; }
.wall-top { left: 0; top: 0; width: 100%; height: 13%; border-width: 0 0 5px; box-shadow: inset 0 -8px #242938; }
.wall-left { left: 0; top: 0; width: 6%; height: 100%; border-width: 0 5px 0 0; }
.wall-right { right: 0; top: 0; width: 6%; height: 100%; border-width: 0 0 0 5px; }

.preview-table {
  position: absolute; z-index: 2; width: 25%; height: 20%;
  background:transparent url("assets/table.svg") center / 100% 100% no-repeat; filter:drop-shadow(0 7px 0 rgba(15,17,23,.4));
}
.preview-table::before, .preview-table::after {
  content: ""; position: absolute; left: 25%; width: 50%; height: 30%;
  background:transparent url("assets/chair.svg") center / contain no-repeat;
}
.preview-table::before { top: -42%; }
.preview-table::after { bottom: -42%; }
.table-one { left: 17%; top: 29%; }
.table-two { left: 17%; top: 64%; }

.preview-door { position:absolute; z-index:3; left:44%; bottom:-3%; width:14%; height:18%; background:transparent url("assets/station-door.svg") 0 0 / 200% 100% no-repeat; filter:drop-shadow(0 5px 0 rgba(0,0,0,.4)); }
.preview-person, .mini-avatar {
  position: absolute; z-index: 4; width: 25px; height: 34px;
  background-image:url("assets/characters-sheet.svg"); background-repeat:no-repeat; background-size:100px 136px;
  border:0; border-radius:0; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.preview-person::after, .mini-avatar::after { content:none; }
.person-one { left:53%; top:27%; background-position:0 0; }
.person-two { left:42%; top:48%; background-position:0 -34px; }
.person-three { left:68%; top:56%; background-position:0 -68px; }
.person-four { left:82%; top:24%; background-position:0 -102px; }

.title-panel { width: min(430px, 42vw); text-align: left; }
.eyebrow { margin: 0 0 10px; color: #7ed0c4; font-size: 12px; font-weight: 900; letter-spacing: .2em; }
.title-panel h1 { margin: 0; line-height: .9; text-shadow: 5px 5px 0 #08090d; }
.title-panel h1 span { display: block; color: var(--yellow); font-size: clamp(58px, 7vw, 100px); letter-spacing: -.08em; }
.title-panel h1 small { display: block; margin-top: 14px; color: #fff8dc; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.08em; }
.title-story { margin: 22px 0 18px; color: #bbc1cf; font-size: 14px; line-height: 1.8; }

.title-rule { display: flex; align-items: center; gap: 13px; padding: 12px 14px; color: #dce2eb; background: #141821; border: 3px solid #3d4659; box-shadow: var(--pixel-shadow); }
.title-rule p { margin: 0; font-size: 12px; line-height: 1.55; }
.title-rule strong { color: #fff; }
.mouse-glyph { position: relative; flex: 0 0 27px; height: 37px; border: 3px solid #8b9db7; border-radius: 13px; }
.mouse-glyph::before { content:""; position:absolute; left:11px; top:0; width:3px; height:15px; background:#8b9db7; }
.mouse-glyph::after { content:""; position:absolute; left:5px; top:6px; width:5px; height:7px; background:var(--yellow); }

.count-picker { margin: 20px 0 12px; padding: 0; border: 0; }
.count-picker legend { margin-bottom: 9px; color: #909aad; font-size: 12px; font-weight: 800; }
.count-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.count-button, .pixel-button {
  min-height: 44px; color: #e7e9ef; background: #303747; border: 0; box-shadow: inset 0 0 0 3px #59647a, 0 5px 0 #0a0b10; cursor: pointer;
}
.count-button:hover { transform: translateY(-2px); background:#3d4659; }
.count-button.is-selected { color:#15171d; background:var(--yellow); box-shadow: inset 0 0 0 3px #fff0a6, 0 5px 0 #8f6b17; }
.party-preview { position: relative; display: flex; gap: 10px; min-height: 42px; align-items: center; padding-left: 4px; }
.mini-avatar { position: relative; display: inline-block; width: 25px; height: 34px; }
.mini-avatar.player-1 { background-position:0 0; }
.mini-avatar.player-2 { background-position:0 -34px; }
.mini-avatar.player-3 { background-position:0 -68px; }
.mini-avatar.player-4 { background-position:0 -102px; }
.pixel-button { padding: 0 20px; font-weight: 900; }
.pixel-button:hover { filter: brightness(1.12); transform: translateY(-2px); }
.pixel-button:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px #59647a, 0 2px 0 #0a0b10; }
.pixel-button.primary { color:#171820; background:var(--yellow); box-shadow: inset 0 0 0 3px #fff2a9, 0 6px 0 #8e6b18; }
.start-button { width: 100%; min-height: 56px; margin-top: 8px; font-size: 16px; }
.title-footnote { margin: 15px 0 0; color:#717b8e; font-size:11px; text-align:center; }

/* ---------- game shell ---------- */
#game-screen { flex-direction: column; background:#0e1118; }
.game-hud { position: relative; z-index: 20; min-height: 70px; display:grid; grid-template-columns:230px 1fr 260px; align-items:center; gap:16px; padding:8px 18px; background:#171c27; border-bottom:5px solid #07090d; box-shadow:0 4px 0 #344052; }
.room-readout { display:grid; grid-template-columns:1fr auto; column-gap:10px; align-items:end; }
.room-kicker { grid-column:1 / -1; color:#738198; font-size:9px; letter-spacing:.18em; }
.room-readout strong { color:#fff4cf; font-size:20px; }
.room-readout > span:last-child { color:#8490a4; font-size:10px; padding-bottom:3px; }
.hud-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.hud-clue-button { min-width:86px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 8px 5px 11px; color:#dce1e9; background:#252c3a; border:0; box-shadow:inset 0 0 0 3px #465166,0 4px #090b0f; cursor:pointer; font-size:10px; font-weight:900; }
.hud-clue-button:hover, .hud-clue-button[aria-expanded="true"] { color:#1b1d22; background:#e2c04b; box-shadow:inset 0 0 0 3px #ffe98b,0 4px #6d5518; }
.hud-clue-button::before { content:"▤"; font-size:15px; line-height:1; }
.hud-clue-button.has-update { animation:notebook-alert .7s steps(2,end) 4; }
@keyframes notebook-alert { 50% { color:#171820; background:#f1cc4e; transform:translateY(-2px); } }
.hud-clue-button strong { min-width:24px; min-height:24px; display:grid; place-items:center; color:#171820; background:#f1cc4e; border:2px solid #171820; }
.hud-sound-button { flex:0 0 44px; min-width:44px; width:44px; padding:0; color:#bfe8db; background:#253139; box-shadow:inset 0 0 0 3px #47646a,0 4px #090b0f; font-size:0; }
.hud-sound-button::before { content:"\266A"; width:100%; display:grid; place-items:center; color:currentColor; font-size:20px; line-height:1; text-shadow:2px 2px #10151a; }
.hud-sound-button > span, .hud-sound-button > strong { display:none; }
.hud-clue-button.hud-sound-button:hover { color:#d6fff2; background:#31505a; box-shadow:inset 0 0 0 3px #5e7f85,0 4px #090b0f; }
.hud-sound-button.is-muted { color:#f0b5ab; background:#443035; box-shadow:inset 0 0 0 3px #785057,0 4px #090b0f; }
.hud-sound-button.is-muted::before { content:"\00D7"; font-size:25px; }
.hud-clock { min-width:92px; text-align:right; }
.hud-clock span { display:block; color:#7f8b9d; font-size:9px; }
.hud-clock strong { color:#f6d35d; font-size:22px; letter-spacing:.06em; }

.player-tabs { min-width:0; display:flex; justify-content:center; gap:8px; }
.player-tab { position:relative; display:flex; align-items:center; gap:8px; min-width:86px; min-height:44px; padding:5px 10px 5px 5px; color:#bac1cd; background:#252c3a; border:0; box-shadow:inset 0 0 0 3px #3e485b, 0 4px 0 #090b0f; cursor:pointer; }
.player-tab:hover { background:#323b4c; }
.player-tab.active { color:#171820; background:var(--player-color, var(--yellow)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 4px 0 rgba(0,0,0,.7); }
.tab-avatar { width:27px; height:27px; background:var(--player-color,#62aaa3); border:3px solid #141721; box-shadow:inset 0 8px rgba(255,255,255,.25); }
.tab-copy { display:flex; flex-direction:column; align-items:flex-start; font-size:10px; }
.tab-copy strong { font-size:11px; }
.tab-copy small { opacity:.75; font-size:8px; }

.play-area { position:relative; z-index:1; flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; padding:12px 14px 10px; background:radial-gradient(circle at 50% 30%,#273041,#11151e 65%); }
#room-stage { position:relative; width:min(100%,calc((100dvh - 174px) * 1.6667)); aspect-ratio:5 / 3; min-width:0; min-height:0; overflow:hidden; border:6px solid #080a0e; box-shadow:0 0 0 3px #3a4352,0 16px 32px rgba(0,0,0,.36); background:#050609; }
#room-stage.is-transitioning #world { filter:brightness(.42) saturate(.72); transform-origin:center; }
#world { position:absolute; width:960px; height:576px; left:50%; top:50%; transform-origin:center center; overflow:hidden; image-rendering:pixelated; background:var(--tile-a); }
#room-floor { position:absolute; inset:0; background-color:var(--tile-a); background-image:linear-gradient(45deg,var(--tile-b) 25%,transparent 25%,transparent 75%,var(--tile-b) 75%),linear-gradient(45deg,var(--tile-b) 25%,transparent 25%,transparent 75%,var(--tile-b) 75%); background-size:48px 48px; background-position:0 0,24px 24px; }
#room-floor::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(4,5,8,.45); }
#ambient-layer, #object-layer, #character-layer, #effect-layer { position:absolute; inset:0; }
#ambient-layer, #effect-layer { pointer-events:none; }
#ambient-layer { z-index:3; background:radial-gradient(circle at 48% 52%,transparent 0 48%,rgba(10,12,16,.16) 82%,rgba(5,6,9,.34)); mix-blend-mode:multiply; }
#effect-layer { z-index:60; box-shadow:inset 0 0 22px rgba(255,255,255,.035); }
#character-layer { pointer-events:none; }

.wall-block { position:absolute; z-index:2; background:#363d4c; border:4px solid #151820; box-shadow:inset 0 -10px #252b37, 0 6px 0 rgba(0,0,0,.25); }
.room-object { position:absolute; z-index:5; padding:0; color:inherit; background:transparent; border:0; cursor:pointer; image-rendering:pixelated; }
.room-object::after { content:""; position:absolute; inset:-5px; border:3px solid transparent; pointer-events:none; }
.room-object:hover::after, .room-object.is-new::after { border-color:rgba(255,232,105,.8); animation:object-pulse .9s steps(2,end) infinite; }
.room-object.solved::after { border-color:rgba(98,207,132,.35); }
.room-object.is-new:not(:hover)::after { inset:-4px -4px auto auto; width:8px; height:8px; border:0; background:#ffe56d; box-shadow:0 0 0 3px rgba(25,27,33,.8),0 0 12px 4px rgba(255,222,91,.45); animation:object-spark 1.25s steps(2,end) infinite; }
.object-label { position:absolute; z-index:9; left:50%; bottom:-27px; transform:translateX(-50%); width:max-content; max-width:150px; padding:4px 7px; color:#171820; background:#fff1b3; border:2px solid #171820; font-size:10px; font-weight:900; opacity:0; pointer-events:none; }
.room-object:hover .object-label { opacity:1; }
.object-glyph { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:92%; color:#fff0a7; text-shadow:2px 2px #171920; font-size:11px; font-weight:900; line-height:1.2; pointer-events:none; }
.door .object-glyph { top:27%; color:#ffe875; letter-spacing:.08em; }
.board .object-glyph, .route-map .object-glyph { color:#353842; text-shadow:none; }
.clock .object-glyph { top:78%; color:#282a31; text-shadow:none; font-size:7px; }
.signal-panel .object-glyph { color:#f4d34f; font-size:24px; }
.terminal .object-glyph { top:35%; color:#80e1d0; font-size:9px; }

@keyframes object-pulse { 50% { filter:brightness(1.45); } }
@keyframes object-spark { 50% { opacity:.32; transform:translateY(-3px) rotate(45deg); } }

.table { background:#d3a532; border:5px solid #1b1d25; box-shadow:inset 0 0 0 5px #f0c94f, 0 9px 0 #363946; }
.table::before { content:""; position:absolute; inset:13px; border:3px solid rgba(93,58,21,.45); }
.chair { background:#4776a9; border:5px solid #1a1d25; box-shadow:inset 0 0 0 4px #6699cc, 0 6px 0 #2c3544; }
.chair::before { content:""; position:absolute; left:12%; right:12%; top:-12px; height:14px; background:#406a9c; border:4px solid #191c24; }
.bench { background:#8d6b3f; border:5px solid #1a1c24; box-shadow:inset 0 8px #b28b55, 0 8px #323641; }
.locker, .cabinet, .shelf { background:#78838b; border:5px solid #181b22; box-shadow:inset 0 0 0 4px #9ca5aa, 0 8px #313640; }
.locker { background:repeating-linear-gradient(90deg,#7d888e 0 43px,#252a33 43px 47px); }
.locker::before { content:""; position:absolute; inset:12px 10px auto; height:5px; background:repeating-linear-gradient(90deg,#343a42 0 11px,transparent 11px 44px); box-shadow:0 13px #343a42; }
.shelf { background:repeating-linear-gradient(0deg,#a47548 0 12px,#342c29 12px 18px,#68727a 18px 54px); }
.board { background:#d5c99e; border:6px solid #493b2b; box-shadow:inset 0 0 0 4px #eee3bd, 0 7px #252831; }
.board::before { content:""; position:absolute; left:12px; right:12px; top:16px; height:5px; background:#b54c45; box-shadow:0 15px #3f718b,0 30px #5d8a57; }
.clock { border:6px solid #1a1d25; border-radius:50%; background:#ebe2c8; box-shadow:inset 0 0 0 4px #b9aa87,0 6px #343843; }
.clock::before { content:""; position:absolute; left:50%; top:14%; width:4px; height:38%; background:#30333b; transform-origin:bottom; transform:rotate(10deg); }
.clock::after { content:""; position:absolute; left:49%; top:47%; width:34%; height:4px; background:#30333b; transform:rotate(-35deg); transform-origin:left; }
.door { background:#9b3940; border:6px solid #171921; box-shadow:inset 9px 0 #c95150,inset -8px 0 #6d2931,0 8px #272b34; }
.door::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:4px; background:#3d1e24; }
.door::after { content:""; position:absolute; right:13px; top:48%; width:8px; height:8px; background:#f2c94c; border:3px solid #22242b; }
.door.open { filter:brightness(1.25); transform:translateY(-15px); }
.terminal, .monitor { background:#4f5965; border:5px solid #161921; box-shadow:inset 0 0 0 5px #747f8c,0 8px #2d313a; }
.terminal::before, .monitor::before { content:""; position:absolute; left:10px; right:10px; top:9px; bottom:24px; background:#183a43; border:4px solid #20242c; box-shadow:inset 0 0 18px #4eb4a1; }
.terminal::after, .monitor::after { content:""; position:absolute; left:16px; bottom:10px; width:9px; height:6px; background:#efc84c; box-shadow:15px 0 #6fb374,30px 0 #c95d57; }
.counter { background:#76634e; border:5px solid #191b23; box-shadow:inset 0 9px #a38a69,0 8px #2c3039; }
.plant { background:linear-gradient(90deg,transparent 30%,#447d4c 30% 70%,transparent 70%); }
.plant::before { content:""; position:absolute; left:16%; right:16%; top:0; height:68%; background:#4f9257; border:4px solid #1b3722; clip-path:polygon(50% 0,68% 32%,100% 24%,79% 58%,94% 86%,58% 73%,50% 100%,42% 73%,6% 86%,21% 58%,0 24%,32% 32%); }
.plant::after { content:""; position:absolute; left:22%; right:22%; bottom:0; height:38%; background:#b16845; border:5px solid #22242a; }
.umbrella-stand { border:5px solid #191c23; background:#6c747d; box-shadow:inset 0 -19px #535b65,0 7px #30343d; }
.umbrella-stand::before { content:""; position:absolute; left:9px; top:5px; width:6px; height:46px; background:#e5c54c; border:2px solid #272a31; box-shadow:13px 1px 0 #e5c54c,26px -2px 0 #e5c54c; }
.umbrella-stand::after { content:""; position:absolute; left:4px; right:4px; bottom:3px; height:22px; background:#626b74; border:3px solid #24272e; }
.luggage { background:#876344; border:5px solid #191b22; box-shadow:inset 0 0 0 5px #a88059,0 7px #30343d; }
.luggage::before { content:""; position:absolute; left:33%; top:-11px; width:34%; height:13px; border:5px solid #23262d; border-bottom:0; }
.luggage::after { content:""; position:absolute; right:12px; top:18px; width:14px; height:20px; background:#e7c44a; border:3px solid #2a2927; transform:rotate(-9deg); }
.hat-rack { border-left:7px solid #3b3028; border-right:7px solid transparent; }
.hat-rack::before { content:""; position:absolute; left:-24px; top:15px; width:48px; height:22px; background:#d5b44e; border:5px solid #201e1c; border-radius:50% 50% 18% 18%; box-shadow:16px 23px #ba4d4a,-10px 48px #507d9c; }
.cups { background:#806b52; border:5px solid #1b1d24; box-shadow:inset 0 8px #aa8e6a,0 7px #31353f; }
.cups::before { content:""; position:absolute; left:15px; top:-12px; width:19px; height:24px; background:#e3c44a; border:4px solid #1e2026; box-shadow:31px 2px #d9dce0,62px -1px #e3c44a,93px 3px #d9dce0; }
.route-map { background:#d7ddcf; border:6px solid #3d443f; box-shadow:inset 0 0 0 4px #f1f3e5,0 7px #272b33; }
.route-map::before { content:""; position:absolute; left:14px; right:14px; top:48%; height:7px; background:#b84946; box-shadow:30px -20px 0 -1px #4e7ea4,70px 18px 0 -1px #d6a23f; }
.signal-panel { background:#5d666d; border:5px solid #171a20; box-shadow:inset 0 0 0 5px #808a90,0 8px #2b3037; }
.signal-panel::before { content:""; position:absolute; inset:12px; background:radial-gradient(circle,#f0c947 0 4px,#343b40 5px 9px,transparent 10px) 0 0 / 28px 28px,#242a30; border:4px solid #171a20; }

/* ---------- 4x rendered environment assets ---------- */
#world[data-room="waiting-room"] #room-floor { background:#737b88 url("assets/floor-waiting-room.svg") 0 0 / 48px 48px repeat; }
#world[data-room="security-office"] #room-floor { background:#68747a url("assets/floor-security-office.svg") 0 0 / 48px 48px repeat; }
#world[data-room="signal-room"] #room-floor { background:#626b77 url("assets/floor-signal-room.svg") 0 0 / 48px 48px repeat; }
#world[data-room="waiting-room"] #ambient-layer { background:radial-gradient(ellipse at 48% 43%,rgba(255,237,177,.12),transparent 42%),linear-gradient(90deg,rgba(16,20,28,.2),transparent 18% 82%,rgba(16,20,28,.2)); }
#world[data-room="security-office"] #ambient-layer { background:radial-gradient(circle at 22% 31%,rgba(67,187,174,.1),transparent 24%),radial-gradient(circle at 78% 31%,rgba(67,187,174,.08),transparent 24%),linear-gradient(rgba(12,22,25,.13),rgba(7,10,15,.25)); }
#world[data-room="signal-room"] #ambient-layer { background:radial-gradient(ellipse at 50% 38%,rgba(246,207,79,.1),transparent 48%),linear-gradient(90deg,rgba(22,18,12,.2),transparent 20% 80%,rgba(22,18,12,.2)); }

.wall-block { background:#343c4a url("assets/station-wall.svg") 0 0 / 48px 48px repeat; border-color:#11141b; box-shadow:inset 0 -8px rgba(11,14,20,.45),0 7px 0 rgba(0,0,0,.25); }

.room-object.table,
.room-object.chair,
.room-object[data-object-id="inspection-poster"],
.room-object.umbrella-stand,
.room-object.luggage,
.room-object.hat-rack,
.room-object.cups,
.room-object.door,
.room-object.terminal,
.room-object.signal-panel,
[data-object-id="control-desk"] {
  border:0;
  box-shadow:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  filter:drop-shadow(0 7px 0 rgba(13,15,20,.42));
}

.room-object.table::before,
.room-object.table::after,
.room-object.chair::before,
.room-object.chair::after,
.room-object[data-object-id="inspection-poster"]::before,
.room-object[data-object-id="inspection-poster"]::after,
.room-object.umbrella-stand::before,
.room-object.umbrella-stand::after,
.room-object.luggage::before,
.room-object.luggage::after,
.room-object.hat-rack::before,
.room-object.hat-rack::after,
.room-object.cups::before,
.room-object.cups::after,
.room-object.door::before,
.room-object.door::after,
.room-object.terminal::before,
.room-object.terminal::after,
.room-object.signal-panel::before,
.room-object.signal-panel::after,
[data-object-id="control-desk"]::before,
[data-object-id="control-desk"]::after { content:none; }

.room-object.table { background-image:url("assets/table.svg"); }
.room-object.chair { background-image:url("assets/chair.svg"); }
.room-object[data-object-id="inspection-poster"] { background-image:url("assets/inspection-memo.svg"); }
.room-object.umbrella-stand { background-image:url("assets/umbrella-stand.svg"); }
.room-object.luggage { background-image:url("assets/luggage.svg"); }
.room-object.hat-rack { background-image:url("assets/hat-rack.svg"); }
.room-object.cups { background-image:url("assets/cups-table.svg"); }
.room-object.door { background-image:url("assets/station-door.svg"); background-size:200% 100%; background-position:0 0; }
.room-object.door.open { background-position:100% 0; transform:translateY(-8px); filter:drop-shadow(0 9px 0 rgba(13,15,20,.32)) brightness(1.08); }
.room-object.terminal { background-image:url("assets/cctv-scenes-sheet.svg"); background-size:400% 100%; }
[data-object-id="cctv-gate"] { background-position:0 0; }
[data-object-id="cctv-vending"] { background-position:33.333% 0; }
[data-object-id="cctv-bench"] { background-position:66.666% 0; }
[data-object-id="cctv-locker"] { background-position:100% 0; }
.room-object.signal-panel { background-image:url("assets/signal-panel.svg"); }

/* High-resolution interactive machinery. Their SVGs own the silhouette, so no legacy shape pseudo-element or fallback glyph is drawn. */
.room-object.security-phone,
.room-object.film-reader,
.room-object.relay-cabinet {
  border:0;
  box-shadow:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 7px 0 rgba(13,15,20,.42));
  image-rendering:auto;
}
.room-object.security-phone { background-image:url("assets/security-phone.svg"); }
.room-object.film-reader { background-image:url("assets/film-reader.svg"); }
.room-object.relay-cabinet { background-image:url("assets/relay-cabinet.svg"); }
.room-object.security-phone::before,
.room-object.film-reader::before,
.room-object.relay-cabinet::before { content:none; }
.room-object.security-phone .object-glyph,
.room-object.film-reader .object-glyph,
.room-object.relay-cabinet .object-glyph { display:none; }
.room-object.security-phone:hover,
.room-object.film-reader:hover,
.room-object.relay-cabinet:hover { filter:drop-shadow(0 9px 0 rgba(13,15,20,.4)) drop-shadow(0 0 8px rgba(255,226,105,.2)) brightness(1.13) saturate(1.06); }
.room-object.security-phone.is-new:not(.is-locked),
.room-object.film-reader.is-new:not(.is-locked),
.room-object.relay-cabinet.is-new:not(.is-locked) { filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)) drop-shadow(0 0 8px rgba(255,226,105,.36)) brightness(1.06); }
[data-object-id="patrol-map"] {
  border:0;
  box-shadow:none;
  background:transparent url("assets/patrol-map-detail.svg") center / contain no-repeat;
  filter:drop-shadow(0 7px 0 rgba(13,15,20,.42));
}
[data-object-id="patrol-map"]::before,
[data-object-id="patrol-map"]::after,
[data-object-id="priority-sign"]::before,
[data-object-id="priority-sign"]::after { content:none; }
[data-object-id="patrol-map"] .object-glyph,
[data-object-id="priority-sign"] .object-glyph,
.room-object.signal-panel .object-glyph { display:none; }
[data-object-id="priority-sign"] {
  border:0;
  box-shadow:none;
  background:transparent url("assets/priority-sign-detail.svg") center / contain no-repeat;
  filter:drop-shadow(0 7px 0 rgba(13,15,20,.42));
}
.room-object[data-object-id="panel-triangle"] { background-image:url("assets/panel-triangle-idle.svg"); }
.room-object[data-object-id="panel-circle"] { background-image:url("assets/panel-circle-idle.svg"); }
.room-object[data-object-id="panel-cross"] { background-image:url("assets/panel-cross-idle.svg"); }
.room-object[data-object-id="panel-square"] { background-image:url("assets/panel-square-idle.svg"); }
.room-object[data-object-id="panel-triangle"].solved { background-image:url("assets/panel-triangle-active.svg"); }
.room-object[data-object-id="panel-circle"].solved { background-image:url("assets/panel-circle-active.svg"); }
.room-object[data-object-id="panel-cross"].solved { background-image:url("assets/panel-cross-active.svg"); }
.room-object[data-object-id="panel-square"].solved { background-image:url("assets/panel-square-active.svg"); }
[data-object-id="control-desk"] { background-image:url("assets/control-console.svg"); }
[data-object-id="office-counter"] { border:0; box-shadow:none; background:transparent url("assets/office-desk.svg") center / 100% 100% no-repeat; filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)); }
[data-object-id="office-counter"]::before, [data-object-id="office-counter"]::after { content:none; }
[data-object-id="office-bench"] { border:0; box-shadow:none; background:transparent url("assets/station-bench.svg") center / 100% 100% no-repeat; filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)); }
[data-object-id="office-bench"]::before, [data-object-id="office-bench"]::after { content:none; }
[data-object-id="office-lockers"], [data-object-id="parts-cabinet"] { border:0; box-shadow:none; background:transparent url("assets/station-locker.svg") center / 100% 100% no-repeat; filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)); }
[data-object-id="office-lockers"]::before, [data-object-id="office-lockers"]::after, [data-object-id="parts-cabinet"]::before, [data-object-id="parts-cabinet"]::after { content:none; }
[data-object-id="plant-a"] { border:0; box-shadow:none; background:transparent url("assets/station-plant.svg") center / 100% 100% no-repeat; filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)); }
[data-object-id="plant-a"]::before, [data-object-id="plant-a"]::after { content:none; }

.room-object.story-object.has-story-asset { border:0; box-shadow:none; background-color:transparent; background-image:var(--story-asset); background-repeat:no-repeat; background-position:center; background-size:contain; filter:drop-shadow(0 5px 0 rgba(13,15,20,.38)); }
.room-object.story-object.has-story-asset::before { content:none; }
.room-object.story-object.has-story-asset .object-glyph { display:none; }
.room-object.story-object.surface-overlay { transform:translateY(-3px); }
.room-object.story-object.story-recorded { filter:drop-shadow(0 5px 0 rgba(13,15,20,.32)) saturate(.82); }
.room-object.story-object.is-new:hover::after { border-color:rgba(176,224,255,.9); }
.room-object.story-object.is-new:not(:hover)::after { background:#b8e7ff; box-shadow:0 0 0 3px rgba(25,27,33,.8),0 0 12px 4px rgba(128,210,255,.52); }

.room-object.umbrella-stand .object-glyph,
.room-object[data-object-id="inspection-poster"] .object-glyph,
.room-object.luggage .object-glyph,
.room-object.hat-rack .object-glyph,
.room-object.cups .object-glyph,
.room-object.terminal .object-glyph,
.room-object.door .object-glyph { display:none; }

.room-object:hover { filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)) brightness(1.08); }
.room-object.door:hover { filter:drop-shadow(0 8px 0 rgba(13,15,20,.38)) brightness(1.09); }

/* Locked objects stay discoverable without borrowing the pulsing "available" treatment. */
.room-object.is-locked,
.room-object.is-locked:hover {
  cursor:not-allowed;
  filter:drop-shadow(0 6px 0 rgba(8,10,14,.4)) grayscale(.38) saturate(.52) brightness(.72);
}
.room-object.is-locked::after,
.room-object.is-locked:hover::after,
.room-object.is-locked.is-new::after,
.room-object.is-locked.is-new:not(:hover)::after {
  content:"";
  inset:2px;
  width:auto;
  height:auto;
  border:2px dashed rgba(149,162,169,.58);
  background:repeating-linear-gradient(-45deg,rgba(8,13,17,.16) 0 5px,rgba(121,136,140,.055) 5px 10px);
  box-shadow:inset 0 0 12px rgba(3,7,10,.34);
  animation:none;
  opacity:1;
  transform:none;
}

.character { appearance:none; position:absolute; z-index:12; width:38px; height:52px; padding:0; border:0; background-color:transparent; background-image:url("assets/characters-sheet.svg"); background-repeat:no-repeat; background-size:152px 208px; transform:translate(-50%,-78%); pointer-events:auto; cursor:pointer; transition:left .13s linear,top .13s linear; filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)); image-rendering:auto; }
.character > span { display:none; }
.character.face-s { background-position-x:0; }
.character.face-n { background-position-x:-38px; }
.character.face-w { background-position-x:-76px; }
.character.face-e { background-position-x:-114px; }
.character.player-1 { background-position-y:0; }
.character.player-2 { background-position-y:-52px; }
.character.player-3 { background-position-y:-104px; }
.character.player-4 { background-position-y:-156px; }
.character.is-moving { animation:walk-bob .26s steps(2,end) infinite; }
.sprite-shadow { position:absolute; left:5px; bottom:0; width:30px; height:10px; background:rgba(12,13,18,.45); border-radius:50%; }
.sprite-feet { position:absolute; left:8px; bottom:4px; width:9px; height:11px; background:#242833; box-shadow:14px 0 #242833; }
.sprite-body { position:absolute; left:6px; bottom:10px; width:28px; height:22px; background:var(--player-color,#56a7a0); border:4px solid #171921; box-shadow:inset 0 5px rgba(255,255,255,.2); }
.sprite-head { position:absolute; left:8px; top:5px; width:24px; height:23px; background:#edc2a1; border:4px solid #171921; border-radius:42%; }
.sprite-hair { position:absolute; z-index:2; left:7px; top:1px; width:26px; height:13px; background:var(--hair,#2d313a); border:4px solid #171921; border-bottom:0; border-radius:45% 45% 15% 15%; }
.character.face-s .sprite-head::after { content:""; position:absolute; left:4px; top:8px; width:3px; height:3px; background:#2c2b2a; box-shadow:9px 0 #2c2b2a; }
.character.face-n .sprite-head::after { content:""; position:absolute; inset:0; background:var(--hair,#2d313a); }
.character.face-e .sprite-head::after { content:""; position:absolute; right:3px; top:8px; width:3px; height:3px; background:#2c2b2a; }
.character.face-w .sprite-head::after { content:""; position:absolute; left:3px; top:8px; width:3px; height:3px; background:#2c2b2a; }
@keyframes walk-bob { 50% { margin-top:-5px; } }

#move-marker { position:absolute; z-index:11; width:24px; height:24px; margin:-12px 0 0 -12px; border:4px solid #ffe879; border-radius:50%; opacity:0; pointer-events:none; }
#move-marker.show { animation:marker .55s steps(3,end); }
@keyframes marker { 0%{opacity:1;transform:scale(.3)} 100%{opacity:0;transform:scale(1.5)} }

.clue-tray { position:absolute; z-index:44; right:24px; top:22px; width:248px; max-height:min(440px,calc(100% - 44px)); display:flex; flex-direction:column; background:rgba(27,32,43,.985); border:4px solid #4b576b; box-shadow:0 8px #07090d,0 16px 34px rgba(0,0,0,.42); transform:translateX(0); opacity:1; visibility:visible; transition:transform .18s ease,opacity .18s ease,visibility 0s; }
.clue-tray.is-collapsed { transform:translateX(calc(100% + 36px)); opacity:0; visibility:hidden; pointer-events:none; transition:transform .18s ease,opacity .18s ease,visibility 0s .18s; }
.tray-heading { display:grid; grid-template-columns:1fr auto auto; justify-content:space-between; align-items:center; gap:9px; padding:9px 9px 9px 13px; color:#c3cad5; background:#262d3b; border-bottom:3px solid #0b0d12; font-size:11px; }
.tray-heading strong { min-width:28px; padding:4px; color:#171820; background:var(--yellow); text-align:center; }
.tray-heading button { width:44px; height:44px; color:#fff; background:#424c5e; border:0; box-shadow:inset 0 0 0 3px #657187; cursor:pointer; font-size:18px; }
.clue-list { overflow:auto; display:flex; flex-direction:column; gap:8px; padding:10px; }
.clue-chip, .clue-card { position:relative; padding:9px 10px 9px 32px; color:#d9dde5; background:#2a3140; border:3px solid #444f61; font-size:10px; line-height:1.45; cursor:pointer; }
.clue-chip::before, .clue-card::before { content:"?"; position:absolute; left:8px; top:9px; width:16px; height:16px; display:grid; place-items:center; color:#191a20; background:#ecc94e; font-weight:900; }
.clue-chip strong, .clue-card strong { display:block; color:#fff3c4; margin-bottom:2px; }
.clue-chip.story-record-card { background:#302d3e; border-color:#685b82; }
.clue-chip.story-record-card::before { content:"R"; color:#f2edff; background:#7966a1; }
.notebook-kind { display:inline-block; margin:0 0 4px; padding:2px 5px; color:#171820; background:#d7bd61; font-size:8px; font-weight:900; }
.story-record-card .notebook-kind { color:#f4efff; background:#69558f; }
.notebook-preview { display:block; color:#bbb3cf; }
.empty-clues { color:#6e7889; font-size:10px; line-height:1.6; text-align:center; padding:18px 8px; }

.dialogue { position:relative; z-index:30; min-height:92px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px 20px; background-color:#eee5cc; background-image:linear-gradient(90deg,rgba(99,79,42,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0)); background-size:7px 7px,100% 100%; border-top:6px solid #080a0e; color:#24252b; box-shadow:inset 0 4px #fff8df; }
.speaker-pip { width:46px; height:46px; background:#5d99a0; border:4px solid #1d2028; box-shadow:inset 0 10px rgba(255,255,255,.25),4px 4px #8b816d; }
.dialogue-copy { min-width:0; }
.dialogue-copy strong { display:block; margin-bottom:5px; color:#252934; font-size:14px; }
.dialogue-copy p { margin:0; color:#4e5057; font-size:12px; line-height:1.55; }
.dialogue-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.dialogue-actions button { min-height:44px; padding:0 14px; color:#ecedf1; background:#394151; border:0; box-shadow:inset 0 0 0 3px #59647a,0 4px #8f856f; cursor:pointer; font-size:11px; font-weight:900; }
.dialogue-actions button.primary { color:#1e2025; background:#e5bf43; box-shadow:inset 0 0 0 3px #ffe98d,0 4px #8f856f; }

.room-intro { position:absolute; z-index:40; left:50%; top:50%; transform:translate(-50%,-50%); min-width:310px; padding:15px 25px; color:#fff2c3; background:#171b25; border:4px solid #f0cb53; box-shadow:8px 8px rgba(0,0,0,.6); text-align:center; font-weight:900; opacity:0; pointer-events:none; }
.room-intro.show { animation:room-title .95s steps(1,end); }
@keyframes room-title { 0%,78%{opacity:1} 79%,100%{opacity:0} }

/* ---------- modal / keypad ---------- */
#modal-root:not(:empty) { position:fixed; z-index:100; inset:0; display:grid; place-items:center; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:18px; background:rgba(5,7,10,.76); }
.modal-card { width:min(560px,95vw); max-width:100%; max-height:calc(100dvh - 36px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; color:#292a30; background-color:#eee5cf; background-image:linear-gradient(90deg,rgba(92,74,42,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0)); background-size:8px 8px,100% 100%; border:6px solid #171922; box-shadow:0 0 0 4px #5a6474,14px 16px rgba(0,0,0,.55); scrollbar-color:#697588 #20242d; scrollbar-width:thin; }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 15px; color:#fff1c0; background:#293141; border-bottom:5px solid #171922; }
.modal-head strong { font-size:15px; }
.modal-close { width:44px; height:44px; color:#fff; background:#9d4144; border:0; box-shadow:inset 0 0 0 3px #d06a69; cursor:pointer; font-size:18px; }
.modal-close:hover { background:#ba4d50; filter:brightness(1.08); }
.modal-close:active { transform:translateY(3px); box-shadow:inset 0 0 0 3px #d06a69,0 1px #571d22; }
.modal-body { padding:17px; }
.inspect-illustration { min-height:135px; display:grid; place-items:center; margin-bottom:15px; padding:16px; color:#f6d75f; background:#4e5663; border:5px solid #22252d; box-shadow:inset 0 0 0 4px #707a86; font-size:clamp(17px,4vw,36px); font-weight:900; line-height:1.45; letter-spacing:.08em; white-space:pre-line; text-align:center; }
.modal-card[data-object-id="yellow-umbrellas"] .inspect-illustration,
.modal-card[data-object-id="tagged-luggage"] .inspect-illustration,
.modal-card[data-object-id="banded-hats"] .inspect-illustration,
.modal-card[data-object-id="yellow-cups"] .inspect-illustration { display:flex; align-items:center; justify-content:center; padding:16px 16px 16px 45%; overflow:hidden; background-color:#4e5663; background-repeat:no-repeat; background-position:8% center; background-size:34% auto; font-size:clamp(12px,1.5vw,16px); line-height:1.7; letter-spacing:.03em; white-space:pre; text-align:center; }
.modal-card[data-object-id="inspection-poster"] .inspect-illustration { background-image:none; }
.modal-card[data-object-id="yellow-umbrellas"] .inspect-illustration { background-image:url("assets/umbrella-stand-detail.svg"); }
.modal-card[data-object-id="tagged-luggage"] .inspect-illustration { background-image:url("assets/luggage-detail.svg"); }
.modal-card[data-object-id="banded-hats"] .inspect-illustration { background-image:url("assets/hat-rack-detail.svg"); }
.modal-card[data-object-id="yellow-cups"] .inspect-illustration { background-image:url("assets/cups-table-detail.svg"); }
.inspect-modal.visual-only { width:min(900px,95vw); }
.inspect-modal.visual-only .modal-body { padding:18px; }
.inspect-modal.visual-only .inspect-illustration { min-height:clamp(300px,50vh,460px); margin-bottom:0; padding:0; overflow:hidden; background-color:#4e5663; background-repeat:no-repeat; background-position:center; background-size:contain; box-shadow:inset 0 0 0 4px #707a86,inset 0 0 42px rgba(13,17,23,.38); image-rendering:auto; font-size:0; }
.inspect-modal.visual-only[data-object-id="inspection-poster"] .inspect-illustration { min-height:clamp(250px,40vh,360px); background-position:center; background-size:98% auto; }
.inspect-modal.visual-only[data-object-id="yellow-cups"] .inspect-illustration,
.inspect-modal.visual-only[data-object-id="tagged-luggage"] .inspect-illustration,
.inspect-modal.visual-only[data-object-id="banded-hats"] .inspect-illustration { min-height:clamp(300px,48vh,430px); background-position:center; background-size:98% auto; }
.inspect-modal.visual-only[data-object-id="yellow-umbrellas"] .inspect-illustration { min-height:clamp(390px,58vh,520px); background-position:center; background-size:auto 98%; }
.inspect-modal.detail-asset .inspect-illustration { min-height:clamp(320px,52vh,470px); background-position:center; background-size:98% auto; }
.inspect-modal.detail-asset.cctv-interactive-modal .inspect-illustration { min-height:0; padding:12px; background:#111a20; }
.cctv-interactive-view { width:100%; aspect-ratio:1454/650; display:grid; grid-template-columns:804fr 650fr; overflow:hidden; background:#10181d; border:4px solid #0a0f13; box-shadow:inset 0 0 0 3px #53636a,0 8px 20px rgba(0,0,0,.35); }
.cctv-scene-crop { min-width:0; background-color:#172329; background-repeat:no-repeat; background-position:left center; background-size:auto 100%; border-right:4px solid #080d10; box-shadow:inset -12px 0 22px rgba(0,0,0,.35); }
.cctv-signal-shell { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3%; overflow:hidden; padding:4%; color:#cbd7d5; background-color:#1b252a; background-image:radial-gradient(circle at 50% 43%,rgba(86,113,112,.2),transparent 56%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px); box-shadow:inset 0 0 0 4px #44535a,inset 0 0 34px rgba(0,0,0,.62); }
.cctv-signal-shell::before, .cctv-signal-shell::after { content:""; position:absolute; top:4%; width:10px; height:10px; background:#0b1114; border:2px solid #6a777a; border-radius:50%; }
.cctv-signal-shell::before { left:5%; }
.cctv-signal-shell::after { right:5%; }
.cctv-signal-rotor { --cctv-turn:0deg; position:relative; width:80%; aspect-ratio:1; flex:0 0 auto; transform:rotate(var(--cctv-turn)); transition:transform .24s cubic-bezier(.2,.75,.3,1); }
.cctv-rotate-button { position:absolute; z-index:3; left:50%; top:0; width:clamp(50px,21%,68px); aspect-ratio:1; display:grid; place-items:center; padding:0; color:#d9e5e2; background:#28363b; border:4px solid #879693; border-radius:50%; box-shadow:inset 0 0 0 4px #11191d,0 5px 0 #090d10,0 0 18px rgba(130,170,162,.16); transform:translateX(-50%); cursor:pointer; font-family:Arial,sans-serif; font-size:clamp(28px,9vw,42px); font-weight:900; line-height:1; }
.cctv-rotate-button:hover { color:#fff9c6; border-color:#e0cb6d; filter:brightness(1.13); }
.cctv-rotate-button:active { margin-top:4px; box-shadow:inset 0 0 0 4px #11191d,0 1px 0 #090d10; }
.cctv-signal-grid { position:absolute; inset:29% 7% 5%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:6%; padding:7%; background:#111a1f; border:5px solid #66757a; border-radius:8px; box-shadow:inset 0 0 0 4px #05090b,inset 0 0 28px rgba(0,0,0,.72); }
.cctv-signal-cell { min-width:0; min-height:0; display:block; background:#33454a; border:3px solid #79888a; border-radius:8px; box-shadow:inset 0 0 0 3px #172126; }
.cctv-signal-cell.is-lit { background:#f3bc3f; border-color:#fff0a5; box-shadow:inset 0 0 0 3px #8b5517,0 0 18px #f0ac2d; }
.cctv-rotation-status { min-height:24px; margin:0!important; padding:5px 9px; color:#c7d0cf; background:#11191d; border:2px solid #536166; font-size:clamp(9px,1.15vw,12px)!important; font-weight:900; line-height:1.25!important; letter-spacing:0; white-space:nowrap; }
.cctv-a11y-status { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.cctv-signal-shell.is-aligned .cctv-rotate-button { color:#d9fff4; border-color:#72d2b8; box-shadow:inset 0 0 0 4px #10231e,0 5px 0 #07110e,0 0 22px rgba(82,226,187,.4); }
.cctv-signal-shell.is-aligned .cctv-rotation-status { color:#d9fff4; border-color:#4a9e87; background:#17352c; }
.inspect-modal.text-memo[data-object-id="inspection-poster"] .inspect-illustration { min-height:clamp(320px,48vh,430px); padding:clamp(18px,3vw,34px); color:#302a21; background-color:#5a6370; background-image:none; font-size:clamp(14px,1.6vw,18px); letter-spacing:0; text-align:left; }
.inspection-memo { position:relative; width:min(720px,100%); padding:clamp(24px,4vw,42px) clamp(24px,5vw,54px); background-color:#e9dfbd; background-image:repeating-linear-gradient(0deg,transparent 0 34px,rgba(83,99,112,.13) 34px 35px),linear-gradient(105deg,rgba(255,255,255,.56),transparent 38% 72%,rgba(111,79,39,.08)); border:1px solid #b9a77c; box-shadow:0 12px 22px rgba(11,14,19,.35),inset 0 0 30px rgba(117,85,42,.12); transform:rotate(-.25deg); }
.inspection-memo::before { content:""; position:absolute; left:50%; top:-13px; width:80px; height:24px; transform:translateX(-50%) rotate(1.5deg); background:rgba(223,201,123,.72); box-shadow:0 2px 5px rgba(67,50,27,.2); }
.inspection-memo p { margin:0!important; color:#34302a; font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size:inherit!important; font-weight:650; line-height:1.9!important; letter-spacing:-.015em; white-space:pre-line; }
.inspection-memo cite { display:block; margin-top:18px; color:#6b5e4c; font-size:.82em; font-style:normal; font-weight:800; text-align:right; }
.modal-body p { margin:0 0 12px; font-size:13px; line-height:1.7; }
.modal-note { padding:10px 12px; color:#3d4148; background:#d5c9a9; border-left:5px solid #a94d4b; }
.story-record-modal { width:min(660px,95vw); }
.story-record-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; color:#665b77; font-size:10px; font-weight:900; letter-spacing:.04em; }
.story-record-meta span { padding:5px 8px; color:#f3efff; background:#69558f; }
.story-record-meta strong { color:#45414b; }
.story-record-visual { min-height:clamp(220px,42vh,350px); display:grid; place-items:center; margin-bottom:16px; padding:18px; color:#e9e1f5; background-color:#303541; background-repeat:no-repeat; background-position:center; background-size:contain; border:5px solid #22252d; box-shadow:inset 0 0 0 4px #626b7a; text-align:center; }
.story-record-visual.has-no-asset { background-image:linear-gradient(135deg,#343a47,#20242d); font-size:14px; font-weight:900; }
.story-record-text { padding:14px 16px; color:#34323a; background:#ddd3bd; border-left:5px solid #76639a; white-space:pre-line; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; padding:0 17px 17px; }
.modal-actions button { min-height:44px; padding:0 16px; border:0; color:#fff; background:#3c4658; box-shadow:inset 0 0 0 3px #647087,0 4px #8c826d; cursor:pointer; font-weight:900; }
.modal-actions button.primary { color:#192019; background:#e1bd43; box-shadow:inset 0 0 0 3px #ffe985,0 4px #8c826d; }
.modal-actions button:disabled { cursor:default; filter:saturate(.35); opacity:.72; }
.modal-actions button:not(:disabled):hover { filter:brightness(1.12); transform:translateY(-2px); }
.modal-actions button:not(:disabled):active { transform:translateY(3px); box-shadow:inset 0 0 0 3px #647087,0 1px #8c826d; }
.signal-test-modal { width:min(900px,95vw); }
.signal-test-modal .modal-body { padding:18px; }
.signal-test-modal .signal-visual { min-height:clamp(350px,56vh,500px); margin:0; padding:0; background-color:#172127; background-repeat:no-repeat; background-position:center; background-size:98% auto; box-shadow:inset 0 0 0 4px #4d5d64,inset 0 0 46px rgba(0,0,0,.58); image-rendering:auto; font-size:0; }
.signal-test-modal.is-active .signal-visual { box-shadow:inset 0 0 0 4px #64827e,inset 0 0 46px rgba(44,221,183,.13),0 0 18px rgba(67,221,190,.16); }

.keypad { width:min(390px,94vw); }
.keypad .modal-head { color:#e9f0df; background:#303943; }
.keypad .modal-body { padding:14px; background-color:#252b36; background-image:radial-gradient(circle at 10px 10px,#89929c 0 2px,#151920 3px 4px,transparent 5px),radial-gradient(circle at calc(100% - 10px) 10px,#89929c 0 2px,#151920 3px 4px,transparent 5px); }
.keypad-display { height:58px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:11px; color:#c8ffba; background:#101713; border:5px solid #111318; box-shadow:inset 0 0 0 2px #24382d,inset 0 0 16px rgba(126,255,129,.2); font-size:28px; letter-spacing:.35em; text-indent:.35em; white-space:nowrap; }
.keypad-hint { min-height:20px; margin:0 0 12px!important; color:#a9b3c2; text-align:center; font-size:10px!important; }
.keypad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keypad-key { min-width:0; min-height:48px; color:#eef0f3; background:#485262; border:0; box-shadow:inset 0 0 0 3px #687487,0 5px #101319; cursor:pointer; font-size:18px; font-weight:900; transition:transform .07s steps(1,end),filter .07s steps(1,end); }
.keypad-key:hover { filter:brightness(1.17); transform:translateY(-2px); }
.keypad-key:active { transform:translateY(4px); box-shadow:inset 0 0 0 3px #687487,0 1px #101319; }
.keypad-key.utility { color:#ffe9a0; background:#765f35; }
.keypad-key.enter { color:#172019; background:#6fa876; box-shadow:inset 0 0 0 3px #9dcea2,0 5px #101319; }
.keypad-error { animation:keypad-shake .24s steps(2,end) 2; color:#ff9a96; }
@keyframes keypad-shake { 50% { transform:translateX(8px); } }

/* Room 2: decommissioned station telephone lock */
.phone-lock-modal { width:min(410px,calc(100vw - 28px)); border-color:#11191d; box-shadow:0 0 0 4px #41616a,14px 16px rgba(0,0,0,.58); }
.phone-lock-modal .modal-head { color:#d9f2e9; background:#20373e; border-bottom-color:#10181c; }
.phone-lock-modal .modal-body { padding:14px; background-color:#1c2b30; background-image:repeating-linear-gradient(0deg,rgba(156,201,198,.025) 0 1px,transparent 1px 5px),radial-gradient(circle at 10px 10px,#638086 0 2px,#0e1619 3px 4px,transparent 5px),radial-gradient(circle at calc(100% - 10px) 10px,#638086 0 2px,#0e1619 3px 4px,transparent 5px); }
.phone-display { min-height:58px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 0 8px; padding:7px 12px; color:#a7f1d8; background:#071311; border:5px solid #0e181a; box-shadow:inset 0 0 0 2px #1e3b36,inset 0 0 20px rgba(74,214,173,.18); font-size:clamp(20px,6vw,28px); font-weight:900; letter-spacing:.2em; text-indent:.2em; text-shadow:0 0 9px rgba(113,235,197,.42); white-space:nowrap; }
.phone-status { min-height:31px; display:grid; place-items:center; margin:0 0 10px!important; padding:5px 8px; color:#9bb5b8; background:#152328; border-left:4px solid #547880; text-align:center; font-size:10px!important; line-height:1.4!important; }
.phone-status.is-error, .phone-status.phone-error { color:#ffc0b8; border-left-color:#d75b56; background:#342326; }
.phone-status.is-success { color:#c8f3bd; border-left-color:#70ad69; background:#1d3027; }
.phone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.phone-key { min-width:0; min-height:48px; padding:3px; color:#dfe9e8; background:#465a60; border:0; box-shadow:inset 0 0 0 3px #6b7e82,0 5px #0b1215; cursor:pointer; font-size:17px; font-weight:900; line-height:1.05; transition:transform .07s steps(1,end),filter .07s steps(1,end); }
.phone-key small { display:block; min-height:9px; margin-top:2px; color:#9cabad; font-size:7px; font-weight:700; letter-spacing:.13em; }
.phone-key:hover { filter:brightness(1.18); transform:translateY(-2px); }
.phone-key:active, .phone-key.is-pressed { transform:translateY(4px); box-shadow:inset 0 0 0 3px #6b7e82,0 1px #0b1215; }
.phone-key.utility { color:#ffe3a3; background:#725b35; box-shadow:inset 0 0 0 3px #9a7b48,0 5px #0b1215; font-size:10px; }
.phone-key.call { color:#13241b; background:#69a876; box-shadow:inset 0 0 0 3px #9bc9a4,0 5px #0b1215; font-size:11px; }
.phone-key:disabled { cursor:default; filter:saturate(.3); opacity:.58; transform:none; }
.telephone-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:9px; }
.telephone-actions .phone-key { min-height:44px; }

/* Room 3: maintenance tumbler, aligned against the red inspection mark */
.wheel-lock-modal { width:min(570px,calc(100vw - 28px)); border-color:#171611; box-shadow:0 0 0 4px #74684d,14px 16px rgba(0,0,0,.62); }
.wheel-lock-modal .modal-head { color:#f4e7b5; background:#373229; border-bottom-color:#16140f; }
.wheel-lock-modal .modal-body { padding:13px 15px 11px; background:#272821; }
.wheel-lock-face { --wheel-screw-drop:216px; position:relative; overflow:hidden; padding:18px 16px; background-color:#45443a; background-image:linear-gradient(90deg,rgba(255,255,255,.045),transparent 10% 90%,rgba(0,0,0,.16)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px); border:5px solid #151611; box-shadow:inset 0 0 0 3px #6f6d5b,inset 0 0 30px rgba(0,0,0,.34); }
.wheel-lock-face::before, .wheel-lock-face::after { content:""; position:absolute; z-index:6; top:9px; width:8px; height:8px; background:#9c9679; border:2px solid #191a15; box-shadow:0 var(--wheel-screw-drop) #9c9679; pointer-events:none; }
.wheel-lock-face::before { left:9px; }
.wheel-lock-face::after { right:9px; }
.alignment-line { position:absolute; z-index:4; left:8px; right:8px; top:50%; height:4px; transform:translateY(-2px); background:#bd4946; box-shadow:0 -2px #572526,0 2px #e07668,0 0 10px rgba(216,74,69,.38); pointer-events:none; }
.alignment-line::before, .alignment-line::after { content:""; position:absolute; top:-6px; width:8px; height:16px; background:#d0524d; border:2px solid #5e2525; }
.alignment-line::before { left:0; }
.alignment-line::after { right:0; }
.digit-wheels { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(58px,1fr)); gap:10px; width:100%; max-width:470px; margin:0 auto; }
.digit-wheel { min-width:0; display:grid; grid-template-rows:38px 116px 38px; gap:7px; }
.wheel-arrow { min-width:0; min-height:38px; padding:0; color:#f0dfac; background:#555344; border:0; box-shadow:inset 0 0 0 3px #77735d,0 4px #161712; cursor:pointer; font-size:16px; font-weight:900; line-height:1; transition:transform .07s steps(1,end),filter .07s steps(1,end); }
.wheel-arrow:hover { filter:brightness(1.18); transform:translateY(-2px); }
.wheel-arrow:active { transform:translateY(3px); box-shadow:inset 0 0 0 3px #77735d,0 1px #161712; }
.wheel-arrow.up { color:#f2d872; }
.wheel-arrow.down { color:#c9b878; }
.wheel-arrow:disabled { cursor:default; filter:saturate(.25); opacity:.55; transform:none; }
.wheel-window { position:relative; min-width:0; height:116px; display:grid; grid-template-rows:31px 54px 31px; overflow:hidden; color:#d5d1bf; background:#151712; border:4px solid #11120f; box-shadow:inset 0 0 0 3px #303226,0 4px rgba(0,0,0,.45); text-align:center; }
.wheel-window::before, .wheel-window::after { content:""; position:absolute; z-index:2; left:0; right:0; height:22px; pointer-events:none; }
.wheel-window::before { top:0; background:linear-gradient(#090a08,transparent); }
.wheel-window::after { bottom:0; background:linear-gradient(transparent,#090a08); }
.wheel-prev, .wheel-current, .wheel-next { min-width:0; display:grid; place-items:center; line-height:1; }
.wheel-prev, .wheel-next { color:#777a68; font-size:15px; }
.wheel-current { position:relative; z-index:5; color:#fff0b6; background:rgba(189,73,70,.08); font-size:32px; font-weight:900; text-shadow:2px 2px #090a08; }
.wheel-actions { display:flex; justify-content:flex-end; gap:9px; padding:11px 15px 15px; background:#272821; }
.wheel-actions button { min-height:44px; padding:0 18px; color:#f0eee4; background:#4a4b42; border:0; box-shadow:inset 0 0 0 3px #727265,0 4px #13140f; cursor:pointer; font-weight:900; transition:transform .07s steps(1,end),filter .07s steps(1,end); }
.wheel-actions button:hover { filter:brightness(1.14); transform:translateY(-2px); }
.wheel-actions button:active { transform:translateY(3px); box-shadow:inset 0 0 0 3px #727265,0 1px #13140f; }
.wheel-actions button.primary, .wheel-actions .primary { color:#271a18; background:#cc6b55; box-shadow:inset 0 0 0 3px #ef9c7c,0 4px #351916; }

/* Live lock contracts */
[data-lock-display] { font-variant-numeric:tabular-nums; }
[data-lock-feedback] { transition:color .08s steps(1,end),background-color .08s steps(1,end); }
[data-lock-feedback]:empty { display:none; }
.lock-error [data-lock-feedback] { color:#ffc0b8!important; }
.lock-error [data-lock-display], [data-lock-display].keypad-error { color:#ff9a96; border-color:#5b2426; box-shadow:inset 0 0 0 2px #4b2021,inset 0 0 18px rgba(218,69,67,.28); }

.telephone-lock[data-lock-type="telephone"] { width:min(410px,calc(100vw - 28px)); border-color:#11191d; box-shadow:0 0 0 4px #41616a,14px 16px rgba(0,0,0,.58); }
.telephone-lock[data-lock-type="telephone"] .modal-head { color:#d9f2e9; background:#20373e; border-bottom-color:#10181c; }
.telephone-lock[data-lock-type="telephone"] .modal-body { padding:12px 14px; background-color:#1c2b30; background-image:repeating-linear-gradient(0deg,rgba(156,201,198,.025) 0 1px,transparent 1px 5px),radial-gradient(circle at 10px 10px,#638086 0 2px,#0e1619 3px 4px,transparent 5px),radial-gradient(circle at calc(100% - 10px) 10px,#638086 0 2px,#0e1619 3px 4px,transparent 5px); }
.telephone-device { position:relative; padding:8px 10px 11px; background:#273b40; border:4px solid #0f171a; box-shadow:inset 0 0 0 3px #486168,inset 0 0 22px rgba(0,0,0,.25); }
.telephone-receiver { height:42px; display:grid; grid-template-columns:45px 1fr 45px; align-items:center; gap:5px; margin:0 0 9px; color:#9db7b8; background:#172328; border:3px solid #0b1013; box-shadow:0 4px #10181b; }
.telephone-receiver span { height:32px; background:#334b51; border:3px solid #10181c; box-shadow:inset 0 0 0 2px #557078; }
.telephone-receiver span:first-child { margin-left:-5px; }
.telephone-receiver span:last-child { margin-right:-5px; }
.telephone-receiver strong { min-width:0; overflow:hidden; font-size:8px; letter-spacing:.12em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.telephone-display { min-height:52px; height:52px; margin-bottom:8px; color:#a7f1d8; border-color:#0e181a; box-shadow:inset 0 0 0 2px #1e3b36,inset 0 0 20px rgba(74,214,173,.18); font-size:23px; letter-spacing:.12em; text-indent:.12em; text-shadow:0 0 9px rgba(113,235,197,.42); }
.telephone-keypad { gap:7px; }
.telephone-keypad .keypad-key { min-height:43px; color:#dfe9e8; background:#465a60; box-shadow:inset 0 0 0 3px #6b7e82,0 4px #0b1215; }
.telephone-keypad .keypad-key.utility { color:#ffe3a3; background:#725b35; box-shadow:inset 0 0 0 3px #9a7b48,0 4px #0b1215; }
.telephone-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px; }
.telephone-actions .keypad-key { min-width:0; min-height:42px; padding:3px 5px; font-size:9px; line-height:1.25; }
.telephone-actions .telephone-call { color:#13241b; background:#69a876; box-shadow:inset 0 0 0 3px #9bc9a4,0 4px #0b1215; font-size:11px; }
.telephone-actions .telephone-back, .telephone-actions .telephone-reset { color:#ffe3a3; background:#725b35; }

.combination-lock-modal[data-lock-type="combination"] { width:min(570px,calc(100vw - 28px)); border-color:#171611; box-shadow:0 0 0 4px #74684d,14px 16px rgba(0,0,0,.62); }
.combination-lock-modal[data-lock-type="combination"] .modal-head { color:#f4e7b5; background:#373229; border-bottom-color:#16140f; }
.combination-lock-modal[data-lock-type="combination"] .modal-body { padding:12px 15px; background:#272821; }
.combination-lock { padding:9px; background:#34352d; border:4px solid #151611; box-shadow:inset 0 0 0 3px #575749; }
.combination-status { height:50px; margin-bottom:8px; color:#f2df9e; background:#171711; border-color:#11120e; box-shadow:inset 0 0 0 2px #3b3828,inset 0 0 16px rgba(224,188,85,.12); font-size:25px; letter-spacing:.28em; text-indent:.28em; }
.combination-wheel-frame { --combination-screw-drop:170px; position:relative; overflow:hidden; margin-top:9px; padding:13px 14px; background-color:#45443a; background-image:linear-gradient(90deg,rgba(255,255,255,.045),transparent 10% 90%,rgba(0,0,0,.16)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px); border:5px solid #151611; box-shadow:inset 0 0 0 3px #6f6d5b,inset 0 0 30px rgba(0,0,0,.34); }
.combination-wheel-frame::before, .combination-wheel-frame::after { content:""; position:absolute; z-index:7; top:8px; width:8px; height:8px; background:#9c9679; border:2px solid #191a15; box-shadow:0 var(--combination-screw-drop) #9c9679; pointer-events:none; }
.combination-wheel-frame::before { left:8px; }
.combination-wheel-frame::after { right:8px; }
.combination-alignment-line { position:absolute; z-index:4; left:7px; right:7px; top:50%; height:4px; transform:translateY(-2px); background:#bd4946; box-shadow:0 -2px #572526,0 2px #e07668,0 0 10px rgba(216,74,69,.38); pointer-events:none; }
.combination-alignment-line::before, .combination-alignment-line::after { content:""; position:absolute; top:-6px; width:8px; height:16px; background:#d0524d; border:2px solid #5e2525; }
.combination-alignment-line::before { left:0; }
.combination-alignment-line::after { right:0; }
.combination-wheel-bank { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(58px,1fr)); gap:10px; max-width:470px; margin:auto; }
.combination-wheel { min-width:0; display:grid; grid-template-rows:38px 82px 38px; gap:6px; }
.combination-wheel .wheel-window { height:82px; grid-template-rows:20px 42px 20px; }
.wheel-button { min-width:0; min-height:38px; padding:0; color:#f0dfac; background:#555344; border:0; box-shadow:inset 0 0 0 3px #77735d,0 4px #161712; cursor:pointer; font-size:16px; font-weight:900; line-height:1; transition:transform .07s steps(1,end),filter .07s steps(1,end); }
.wheel-button:hover { filter:brightness(1.18); transform:translateY(-2px); }
.wheel-button:active { transform:translateY(3px); box-shadow:inset 0 0 0 3px #77735d,0 1px #161712; }
.wheel-button.wheel-up { color:#f2d872; }
.wheel-button.wheel-down { color:#c9b878; }
.wheel-value { position:relative; z-index:5; min-width:0; display:grid; place-items:center; overflow:hidden; color:#fff0b6; background:#151712; border:4px solid #11120f; box-shadow:inset 0 0 0 3px #303226,0 4px rgba(0,0,0,.45); font-size:32px; font-weight:900; line-height:1; text-shadow:2px 2px #090a08; }
.wheel-value::before, .wheel-value::after { content:""; position:absolute; left:0; right:0; height:17px; pointer-events:none; }
.wheel-value::before { top:0; background:linear-gradient(#090a08,transparent); }
.wheel-value::after { bottom:0; background:linear-gradient(transparent,#090a08); }
.combination-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.combination-actions .keypad-key { min-width:0; min-height:43px; font-size:11px; }
.combination-actions .combination-unlock { color:#271a18; background:#cc6b55; box-shadow:inset 0 0 0 3px #ef9c7c,0 4px #351916; }
.combination-actions .combination-reset { color:#f0eee4; background:#4a4b42; box-shadow:inset 0 0 0 3px #727265,0 4px #13140f; }

/* ---------- chained puzzle stages ---------- */
.stage-modal { width:min(1060px,calc(100vw - 28px)); }
.stage-modal .modal-body { padding:14px 16px; }
.stage-feedback { min-height:42px; margin:10px 0 0; padding:10px 12px; color:#d6dde6; background:#202833; border:3px solid #4b5868; font-size:11px; font-weight:800; line-height:1.55; }
.stage-modal.is-complete .stage-feedback { color:#dff7d9; background:#24372d; border-color:#67946d; }
.stage-modal.lock-error .stage-feedback { color:#ffd2ca; background:#462829; border-color:#b65a55; }

.clue-chip.item-card { padding-left:38px; background:#353124; border-color:#8c7744; }
.clue-chip.item-card::before { content:""; left:8px; top:10px; width:20px; height:12px; background:#d6b857; border:3px solid #211f1a; border-radius:8px 2px 2px 8px; box-shadow:9px 0 0 -3px #d6b857,13px 0 0 -3px #d6b857; transform:rotate(-9deg); }
.clue-chip.item-card .notebook-kind { background:#b99a4f; }
.clue-chip.item-card.is-used { filter:saturate(.45); opacity:.72; }
.item-detail-modal .inspect-illustration { position:relative; min-height:190px; overflow:hidden; color:#29251b; background-color:#4d5661; background-image:radial-gradient(ellipse at 50% 63%,rgba(0,0,0,.35),transparent 45%),linear-gradient(120deg,transparent 35%,rgba(255,255,255,.06) 36% 38%,transparent 39%); font-size:18px; letter-spacing:.14em; text-shadow:none; }
.item-detail-modal .inspect-illustration::before { content:""; width:min(340px,72%); height:74px; background:linear-gradient(#f4dc7d,#a98432); border:8px solid #26241e; border-radius:38px 10px 10px 38px; box-shadow:inset 0 0 0 5px #ffe99b,18px 0 0 -5px #b7953e,35px 0 0 -8px #b7953e,0 18px 24px rgba(0,0,0,.3); transform:rotate(-8deg); }
.item-detail-modal .inspect-illustration::after { content:""; position:absolute; left:calc(50% - min(170px,36%)); width:48px; height:48px; background:#4d5661; border:7px solid #26241e; border-radius:50%; transform:translateX(7px) rotate(-8deg); box-shadow:inset 0 0 0 5px #7c642a; }

.security-phone-modal .phone-orientation { min-height:34px; display:grid; place-items:center; margin:0 0 8px; color:#f2d672; background:#18262a; border:3px solid #0c1518; box-shadow:inset 0 0 0 2px #385056; font-size:21px; font-weight:900; line-height:1; }
.security-phone-modal.is-complete .telephone-device { box-shadow:inset 0 0 0 3px #597d6b,inset 0 0 28px rgba(91,218,151,.16),0 0 18px rgba(91,218,151,.14); }

.film-machine { position:relative; overflow-x:auto; padding:18px; background-color:#293038; background-image:radial-gradient(circle at 13px 13px,#8c9296 0 3px,#171b20 4px 6px,transparent 7px),radial-gradient(circle at calc(100% - 13px) 13px,#8c9296 0 3px,#171b20 4px 6px,transparent 7px),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px); border:5px solid #12161b; box-shadow:inset 0 0 0 4px #4d5963,inset 0 0 34px rgba(0,0,0,.38); }
.film-machine > p:first-child { margin:0 0 13px; color:#cbd3dc; font-size:11px; line-height:1.6; }
.film-machine.is-locked { filter:saturate(.45); }
.film-slots { display:grid; grid-template-columns:repeat(6,minmax(110px,1fr)); gap:7px; min-width:720px; padding:14px 12px 18px; background:#10161b; border:4px solid #070a0d; box-shadow:inset 0 0 0 3px #35414a; }
.film-piece { position:relative; min-width:0; aspect-ratio:5 / 3; padding:8px 5px 5px; color:#d7dce0; background:#29343c; border:4px solid #151b20; box-shadow:inset 0 0 0 3px #4c5a63,0 5px #0a0e11; cursor:pointer; transition:transform .08s steps(1,end),filter .08s steps(1,end),border-color .08s steps(1,end); }
.film-piece:not(:disabled):hover { z-index:2; filter:brightness(1.16); transform:translateY(-3px); }
.film-piece:not(:disabled):active { transform:translateY(2px); box-shadow:inset 0 0 0 3px #4c5a63,0 1px #0a0e11; }
.film-piece:focus-visible { outline:4px solid #ffe36c; outline-offset:2px; }
.film-piece.is-selected { border-color:#f0cc53; box-shadow:inset 0 0 0 3px #7c6a37,0 0 18px rgba(242,205,82,.32); transform:translateY(-4px); }
.film-piece.is-correct { border-color:#72c88b; box-shadow:inset 0 0 0 3px #426d50,0 0 14px rgba(93,207,126,.22); }
.film-piece-id { position:absolute; z-index:3; left:7px; top:6px; width:22px; height:22px; display:grid; place-items:center; color:#11161b; background:#d3b94f; border:2px solid #11161b; font-size:10px; font-weight:900; }
.film-art { display:block; width:100%; height:100%; }
.film-art svg { display:block; width:100%; height:100%; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.film-assembly-modal.is-complete .film-machine { box-shadow:inset 0 0 0 4px #5b7564,inset 0 0 34px rgba(69,200,119,.11),0 0 18px rgba(69,200,119,.12); }

.room-object.manual-terminal { border:0; box-shadow:none; background:transparent url("assets/manual-terminal.svg") center / contain no-repeat; filter:drop-shadow(0 5px 0 rgba(13,15,20,.42)); image-rendering:auto; }
.room-object.manual-terminal::before { content:none; }
.room-object.manual-terminal .object-glyph { display:none; }
.room-object.manual-terminal:hover { filter:drop-shadow(0 7px 0 rgba(13,15,20,.42)) drop-shadow(0 0 8px rgba(105,244,209,.2)) brightness(1.12); }

.manual-terminal-modal { width:min(780px,calc(100vw - 28px)); }
.signal-terminal-console { padding:18px; background-color:#202c31; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),radial-gradient(circle at 12px 12px,#7b8b8b 0 3px,#0c1417 4px 6px,transparent 7px),radial-gradient(circle at calc(100% - 12px) 12px,#7b8b8b 0 3px,#0c1417 4px 6px,transparent 7px); border:5px solid #0d1418; box-shadow:inset 0 0 0 4px #456068,inset 0 0 28px rgba(0,0,0,.34); }
.signal-terminal-console.is-locked { filter:saturate(.35) brightness(.75); }
.signal-entry-slots { display:grid; grid-template-columns:repeat(4,minmax(70px,1fr)); gap:8px; margin-bottom:13px; }
.signal-entry-slot { min-width:0; height:70px; display:grid; grid-template-columns:1fr 1fr; place-items:center; color:#65777a; background:#10191d; border:4px solid #0a0f12; box-shadow:inset 0 0 0 3px #304047; }
.signal-entry-slot b { font-size:24px; }
.signal-entry-slot strong { color:#7c898a; font-size:24px; }
.signal-entry-slot.is-filled { color:#86e5ce; border-color:#345e56; box-shadow:inset 0 0 0 3px #466d65,inset 0 0 18px rgba(91,221,187,.16); }
.signal-entry-slot.is-filled strong { color:#f1d770; }
.signal-symbol-grid { display:grid; grid-template-columns:repeat(4,minmax(58px,1fr)); gap:9px; margin-bottom:11px; }
.signal-symbol, .signal-terminal { min-width:0; min-height:52px; padding:5px; color:#e5ebea; background:#42565d; border:0; box-shadow:inset 0 0 0 4px #65777c,0 5px #091013; cursor:pointer; font-size:23px; font-weight:900; }
.signal-symbol:not(:disabled):hover, .signal-terminal:not(:disabled):hover { filter:brightness(1.17); transform:translateY(-2px); }
.signal-symbol:not(:disabled):active, .signal-terminal:not(:disabled):active { transform:translateY(3px); box-shadow:inset 0 0 0 4px #65777c,0 1px #091013; }
.signal-symbol:disabled, .signal-terminal:disabled { cursor:default; filter:saturate(.25); opacity:.48; }
.signal-symbol.is-selected { color:#16241f; background:#6fd1b6; box-shadow:inset 0 0 0 4px #a6ead7,0 5px #173b32; }
.signal-terminal-grid { min-height:66px; display:grid; grid-template-columns:repeat(4,minmax(58px,1fr)); align-items:center; gap:9px; padding:7px; background:#121b1f; border:3px solid #34434a; }
.signal-terminal { color:#251f12; background:#d0ad4c; box-shadow:inset 0 0 0 4px #f0d475,0 5px #443712; font-size:18px; }
.terminal-placeholder { grid-column:1 / -1; color:#859497; font-size:10px; font-weight:800; text-align:center; }
.manual-terminal-modal.is-complete .signal-terminal-console { box-shadow:inset 0 0 0 4px #52766d,inset 0 0 30px rgba(75,227,184,.13),0 0 18px rgba(75,227,184,.12); }

.relay-puzzle-modal { width:min(760px,calc(100vw - 28px)); }
.relay-machine { padding:18px; background-color:#343329; background-image:linear-gradient(90deg,rgba(255,255,255,.04),transparent 14% 86%,rgba(0,0,0,.16)),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px); border:5px solid #141510; box-shadow:inset 0 0 0 4px #64604c,inset 0 0 30px rgba(0,0,0,.34); }
.relay-machine.is-locked { filter:saturate(.35) brightness(.72); }
.relay-logic-plaque { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; padding:12px; background:#b99b57; border:5px solid #181711; box-shadow:inset 0 0 0 4px #e0c77c,0 7px #1b1b16; }
.logic-rule { min-height:76px; display:flex; align-items:center; justify-content:center; gap:15px; color:#27231a; background:#d3bd7a; border:3px solid #766336; box-shadow:inset 0 0 14px rgba(255,255,255,.23); }
.logic-rule b { width:45px; height:45px; display:grid; place-items:center; background:#efe0a7; border:4px solid #28251d; font-size:25px; }
.logic-rule i { color:#a43f3d; font-size:22px; font-style:normal; font-weight:900; }
.logic-rule .logic-gap { width:45px; height:45px; background:rgba(255,255,255,.2); border:4px dashed #704944; text-align:center; }
.logic-rule-gap { gap:8px; }
.relay-cards { display:grid; grid-template-columns:repeat(4,minmax(74px,1fr)); gap:10px; padding:13px; background:#141712; border:4px solid #0b0d09; box-shadow:inset 0 0 0 3px #424439; }
.relay-card { position:relative; min-width:0; min-height:118px; display:grid; place-items:center; padding:8px; color:#eee7c8; background:linear-gradient(#4f5145,#303229); border:5px solid #171813; box-shadow:inset 0 0 0 4px #747566,0 7px #0a0b08; cursor:pointer; }
.relay-card span { width:64px; height:64px; display:grid; place-items:center; background:#eee7d3; border:5px solid #1d1d19; color:#24241e; font-size:34px; box-shadow:inset 0 0 0 4px #b8b2a0; }
.relay-card small { position:absolute; right:6px; bottom:5px; color:#c7b86d; font-size:8px; }
.relay-card:not(:disabled):hover { filter:brightness(1.15); transform:translateY(-3px); }
.relay-card:not(:disabled):active { transform:translateY(3px); box-shadow:inset 0 0 0 4px #747566,0 2px #0a0b08; }
.relay-card.is-selected { border-color:#e3c44f; box-shadow:inset 0 0 0 4px #8a793c,0 0 17px rgba(229,199,82,.35); transform:translateY(-4px); }
.relay-card.is-correct { border-color:#73c98c; box-shadow:inset 0 0 0 4px #4d805c,0 0 16px rgba(84,211,124,.22); }
.relay-puzzle-modal.is-complete .relay-machine { box-shadow:inset 0 0 0 4px #687a5d,inset 0 0 30px rgba(88,214,118,.12),0 0 17px rgba(88,214,118,.12); }

.keyed-door-modal { width:min(470px,calc(100vw - 28px)); }
.keyed-door-device { position:relative; min-height:270px; display:grid; align-content:end; justify-items:center; gap:13px; padding:24px; overflow:hidden; background-color:#34373d; background-image:linear-gradient(90deg,rgba(255,255,255,.05),transparent 18% 82%,rgba(0,0,0,.2)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px); border:6px solid #17191f; box-shadow:inset 0 0 0 5px #59616c,inset 0 0 44px rgba(0,0,0,.36); }
.keyhole { position:absolute; left:50%; top:42%; width:72px; height:72px; transform:translate(-50%,-50%); background:#11141a; border:9px solid #b09342; border-radius:50%; box-shadow:inset 0 0 0 6px #050608,0 8px #17191c,0 0 0 5px #24272d; }
.keyhole::after { content:""; position:absolute; left:50%; top:46px; width:27px; height:60px; transform:translateX(-50%); background:#0c0e12; clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); border-bottom:5px solid #b09342; }
.keyed-door-device.is-ready .keyhole { border-color:#e0bd54; box-shadow:inset 0 0 0 6px #050608,0 8px #17191c,0 0 20px rgba(232,199,83,.3); }
.keyed-door-status { min-width:190px; padding:10px 15px; color:#c2ccd1; background:#14191d; border:4px solid #0a0d10; box-shadow:inset 0 0 0 3px #344047; font-size:18px; font-weight:900; letter-spacing:.14em; text-align:center; }
.keyed-door-device.is-ready .keyed-door-status { color:#f5dc75; }
.keyed-door-device .stage-feedback:empty { display:none; }
.keyed-door-modal.is-locked .keyed-door-device { filter:saturate(.35) brightness(.72); }

#toast { position:fixed; z-index:150; left:50%; bottom:128px; transform:translate(-50%,20px); padding:10px 16px; color:#171820; background:#f1ce54; border:4px solid #171820; box-shadow:6px 6px rgba(0,0,0,.45); font-size:11px; font-weight:900; opacity:0; pointer-events:none; transition:.18s; }
#toast.show { opacity:1; transform:translate(-50%,0); }

#transition-curtain { position:fixed; z-index:180; inset:0; display:grid; place-items:center; color:#ffe781; background:#080a0f; font-size:13px; font-weight:900; letter-spacing:.12em; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease,visibility 0s .22s; }
#transition-curtain::before, #transition-curtain::after { content:""; position:absolute; left:0; right:0; height:7px; background:repeating-linear-gradient(90deg,#d6b43f 0 28px,#222733 28px 56px); }
#transition-curtain::before { top:26%; }
#transition-curtain::after { bottom:26%; }
#transition-curtain.is-active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease; }
#transition-curtain span::after { content:""; display:inline-block; width:1.5em; text-align:left; animation:loading-dots 1s steps(4,end) infinite; }
@keyframes loading-dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%,100%{content:"..."} }

/* ---------- result ---------- */
#result-screen { align-items:center; justify-content:center; gap:80px; padding:30px; background:radial-gradient(circle at 25% 50%,#354356,#11151d 58%); }
.result-room { position:relative; width:min(34vw,420px); aspect-ratio:1; background:#626b78 url("assets/floor-signal-room.svg") 0 0 / 48px 48px repeat; border:8px solid #0b0d12; box-shadow:0 0 0 4px #485466,16px 18px rgba(0,0,0,.45); }
.open-door { position:absolute; left:22%; top:8%; width:56%; height:84%; background:transparent url("assets/station-door.svg") 100% 0 / 200% 100% no-repeat; filter:drop-shadow(0 12px 0 rgba(24,27,34,.62)); }
.train-light { position:absolute; left:50%; top:45%; width:60px; height:60px; transform:translate(-50%,-50%); background:#fff5b5; border-radius:50%; box-shadow:0 0 50px 25px #f5d86a; }
.result-panel { width:min(520px,48vw); }
.result-panel h2 { margin:0 0 12px; color:#fff3c9; font-size:32px; }
.result-summary { margin:0 0 18px; color:#aeb8c8; font-size:13px; line-height:1.7; }
.story-ending { margin:0 0 16px; padding:13px 15px; color:#c9d0db; background:#202631; border:3px solid #455064; box-shadow:0 4px #080a0e; }
.story-ending.is-complete { background:#2e2b25; border-color:#b49a44; }
.story-ending-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; color:#8fa0b7; font-size:10px; font-weight:900; letter-spacing:.06em; }
.story-ending.is-complete .story-ending-head { color:#e2ca72; }
.story-ending-head strong { padding:3px 7px; color:#171820; background:#8ea6bd; }
.story-ending.is-complete .story-ending-head strong { background:#e0c65c; }
.story-ending p { margin:0; color:#d9dde5; font-size:11px; line-height:1.62; white-space:pre-line; }
.ranking-list { display:flex; flex-direction:column; gap:9px; margin:0 0 20px; padding:0; list-style:none; }
.ranking-row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; min-height:54px; padding:8px 13px; color:#e4e7ed; background:#242b38; border:3px solid #424d5f; box-shadow:0 4px #080a0e; }
.ranking-row:first-child { border-color:#dec454; background:#383429; }
.rank-number { color:#f0cd53; font-size:18px; font-weight:900; }
.rank-player { font-weight:900; }
.rank-score { color:#9eabbc; font-size:11px; text-align:right; }
.result-panel .pixel-button { width:100%; min-height:52px; }

@media (max-width: 980px) {
  #title-screen { gap:24px; }
  .title-room { width:46vw; }
  .title-panel { width:46vw; }
  .game-hud { grid-template-columns:190px 1fr 250px; padding-inline:10px; gap:8px; }
  .player-tab { min-width:54px; padding-right:5px; }
  .tab-copy small { display:none; }
  .play-area { padding-right:10px; }
  .clue-tray { right:18px; top:18px; width:230px; max-height:320px; }
}

@media (max-width: 700px) {
  #title-screen { overflow:auto; flex-direction:column; justify-content:flex-start; padding:18px; }
  .title-room { width:100%; max-width:520px; }
  .title-panel { width:100%; max-width:520px; }
  .title-panel h1 span { font-size:58px; }
  .game-hud { min-height:62px; grid-template-columns:1fr auto; }
  .player-tabs { position:absolute; left:50%; top:68px; transform:translateX(-50%); z-index:50; }
  .player-tab { min-width:42px; padding:4px; }
  .tab-copy { display:none; }
  .hud-tools { grid-column:2; gap:6px; }
  .hud-clue-button { position:relative; min-width:52px; width:52px; padding:5px 19px 5px 5px; }
  .hud-clue-button > span { display:none; }
  .hud-clue-button strong { position:absolute; right:3px; top:3px; min-width:20px; min-height:20px; font-size:9px; }
  .hud-clock { min-width:70px; }
  .play-area { padding-top:58px; }
  .clue-tray { right:10px; top:10px; width:min(280px,calc(100vw - 20px)); max-height:calc(100% - 20px); }
  .dialogue { grid-template-columns:38px 1fr; min-height:118px; padding:10px; }
  .speaker-pip { width:36px; height:36px; }
  .dialogue-actions { grid-column:1 / -1; }
  #modal-root:not(:empty) { padding:10px; }
  .modal-card { max-height:calc(100dvh - 20px); }
  .inspect-modal.visual-only { width:100%; }
  .inspect-modal.visual-only .modal-body { padding:10px; }
  .inspect-modal.visual-only[data-object-id="inspection-poster"] .inspect-illustration { min-height:clamp(210px,31vh,260px); background-size:98% auto; }
  .inspect-modal.visual-only[data-object-id="yellow-cups"] .inspect-illustration,
  .inspect-modal.visual-only[data-object-id="tagged-luggage"] .inspect-illustration,
  .inspect-modal.visual-only[data-object-id="banded-hats"] .inspect-illustration { min-height:clamp(240px,36vh,300px); background-size:98% auto; }
  .inspect-modal.visual-only[data-object-id="yellow-umbrellas"] .inspect-illustration { min-height:clamp(280px,43vh,360px); background-size:96% auto; }
  .inspect-modal.detail-asset .inspect-illustration { min-height:clamp(240px,37vh,310px); background-size:98% auto; }
  .inspect-modal.detail-asset.cctv-interactive-modal .inspect-illustration { min-height:0; padding:8px; }
  .cctv-interactive-view { aspect-ratio:auto; display:flex; flex-direction:column; }
  .cctv-scene-crop { width:100%; aspect-ratio:804/650; flex:0 0 auto; border-right:0; border-bottom:4px solid #080d10; }
  .cctv-signal-shell { width:min(290px,100%); aspect-ratio:1; flex:0 0 auto; align-self:center; }
  .cctv-signal-rotor { width:78%; }
  .cctv-rotation-status { min-height:22px; font-size:9px!important; }
  .inspect-modal.text-memo[data-object-id="inspection-poster"] .inspect-illustration { min-height:0; padding:12px; }
  .inspection-memo { padding:24px 22px; }
  .inspection-memo p { font-size:13px!important; line-height:1.8!important; }
  .signal-test-modal { width:100%; }
  .signal-test-modal .modal-body { padding:10px; }
  .signal-test-modal .signal-visual { min-height:clamp(245px,39vh,330px); background-size:98% auto; }
  .phone-lock-modal, .wheel-lock-modal { width:100%; }
  .phone-lock-modal .modal-body { padding:11px; }
  .phone-display { min-height:52px; font-size:22px; }
  .phone-grid { gap:7px; }
  .phone-key { min-height:46px; }
  .wheel-lock-modal .modal-body { padding:9px; }
  .wheel-lock-face { --wheel-screw-drop:186px; padding:13px 7px; }
  .digit-wheels { grid-template-columns:repeat(4,minmax(52px,1fr)); gap:5px; }
  .digit-wheel { grid-template-rows:36px 104px 36px; gap:5px; }
  .wheel-window { height:104px; grid-template-rows:27px 50px 27px; }
  .wheel-current { font-size:28px; }
  .wheel-actions { padding:9px; }
  .wheel-actions button { flex:1 1 0; min-width:0; padding-inline:8px; }
  .telephone-lock[data-lock-type="telephone"], .combination-lock-modal[data-lock-type="combination"] { width:100%; }
  .telephone-lock[data-lock-type="telephone"] .modal-body { padding:9px; }
  .telephone-device { padding:6px 7px 8px; }
  .telephone-receiver { height:38px; grid-template-columns:40px 1fr 40px; }
  .telephone-receiver span { height:29px; }
  .telephone-display { min-height:48px; height:48px; font-size:20px; }
  .telephone-keypad, .telephone-actions { gap:5px; }
  .telephone-keypad .keypad-key { min-height:41px; }
  .telephone-actions .keypad-key { min-height:40px; padding-inline:2px; font-size:8px; }
  .combination-lock-modal[data-lock-type="combination"] .modal-body { padding:8px; }
  .combination-lock { padding:6px; }
  .combination-status { height:46px; font-size:23px; }
  .combination-wheel-frame { --combination-screw-drop:142px; padding:10px 6px; }
  .combination-wheel-bank { grid-template-columns:repeat(4,minmax(46px,1fr)); gap:5px; }
  .combination-wheel { grid-template-rows:34px 72px 34px; gap:4px; }
  .combination-wheel .wheel-window { height:72px; grid-template-rows:18px 36px 18px; }
  .wheel-button { min-height:34px; }
  .wheel-value { font-size:28px; }
  .combination-actions { gap:6px; }
  .combination-actions .keypad-key { min-height:41px; }
  .stage-modal, .manual-terminal-modal, .relay-puzzle-modal, .keyed-door-modal { width:100%; }
  .stage-modal .modal-body { padding:8px; }
  .stage-feedback { min-height:38px; padding:8px; font-size:10px; }
  .film-machine { padding:10px 8px; }
  .film-slots { grid-template-columns:repeat(6,minmax(102px,1fr)); min-width:650px; padding:10px 8px 14px; }
  .film-piece { padding:6px 4px 4px; }
  .film-piece-id { left:4px; top:4px; width:19px; height:19px; font-size:8px; }
  .signal-terminal-console { padding:10px; }
  .signal-entry-slots, .signal-symbol-grid, .signal-terminal-grid { gap:5px; }
  .signal-entry-slot { height:58px; }
  .signal-entry-slot b, .signal-entry-slot strong { font-size:19px; }
  .signal-symbol, .signal-terminal { min-height:46px; font-size:19px; }
  .relay-machine { padding:10px; }
  .relay-logic-plaque { gap:6px; padding:7px; }
  .logic-rule { min-height:62px; gap:8px; }
  .logic-rule b { width:37px; height:37px; font-size:20px; }
  .logic-rule-gap { gap:3px; }
  .logic-rule-gap i:not(.logic-gap) { font-size:14px; }
  .logic-rule-gap .logic-gap { width:37px; height:37px; }
  .relay-cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:7px; }
  .relay-card { min-height:96px; padding:4px; border-width:4px; }
  .relay-card span { width:48px; height:48px; border-width:4px; font-size:27px; }
  .keyed-door-device { min-height:225px; padding:16px; }
  .keyhole { width:62px; height:62px; }
  .keyhole::after { top:39px; height:52px; }
  .item-detail-modal .inspect-illustration { min-height:155px; }
  #result-screen { overflow-x:hidden; overflow-y:auto; flex-direction:column; gap:20px; justify-content:flex-start; padding:20px 14px; }
  .result-room { width:min(70vw,310px); }
  .result-panel { width:100%; max-width:520px; }
}

@media (max-height: 620px) and (min-width: 701px) {
  #modal-root:not(:empty) { padding:10px; }
  .modal-card { max-height:calc(100dvh - 20px); }
  .phone-lock-modal .modal-head, .wheel-lock-modal .modal-head { padding-block:8px; }
  .phone-lock-modal .modal-body { padding:10px 14px; }
  .phone-key { min-height:43px; }
  .wheel-lock-modal .modal-body { padding-block:8px; }
  .wheel-lock-face { --wheel-screw-drop:178px; padding-block:10px; }
  .digit-wheel { grid-template-rows:34px 100px 34px; gap:5px; }
  .wheel-window { height:100px; grid-template-rows:25px 50px 25px; }
  .wheel-actions { padding-block:8px; }
  .telephone-lock[data-lock-type="telephone"] .modal-head, .combination-lock-modal[data-lock-type="combination"] .modal-head { padding-block:8px; }
  .telephone-lock[data-lock-type="telephone"] .modal-body, .combination-lock-modal[data-lock-type="combination"] .modal-body { padding-block:8px; }
  .telephone-receiver { height:36px; margin-bottom:6px; }
  .telephone-keypad .keypad-key { min-height:38px; }
  .telephone-actions .keypad-key { min-height:38px; }
  .combination-wheel-frame { --combination-screw-drop:138px; padding-block:9px; }
  .combination-wheel { grid-template-rows:32px 70px 32px; gap:4px; }
  .combination-wheel .wheel-window { height:70px; grid-template-rows:17px 36px 17px; }
  .combination-actions .keypad-key { min-height:38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}