:root {
  --ink: #111923;
  --paper: #e8e1ca;
  --paper-dark: #c6bea6;
  --navy: #1a2633;
  --navy-2: #243747;
  --cyan: #64d8cc;
  --cyan-dark: #2f7e7c;
  --amber: #f1c65a;
  --red: #d65d5d;
  --violet: #8c78bf;
  --green: #6fbf8e;
  --white: #f6f3e7;
  --pixel-shadow: 0 5px 0 #070b10;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--paper);
  background: #080d13;
  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; }
.is-hidden { display: none !important; }
#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(34px, 6vw, 90px);
  padding: clamp(24px, 5vw, 74px);
  overflow: auto;
  background:
    linear-gradient(rgba(103, 231, 216, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 231, 216, .035) 1px, transparent 1px),
    radial-gradient(circle at 25% 45%, #183141 0, #0b131c 42%, #070b11 78%);
  background-size: 26px 26px, 26px 26px, auto;
}
#title-screen::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(123, 223, 213, .09) 3px 4px);
}
.title-room {
  position: relative;
  flex: 0 1 760px;
  width: min(760px, 52vw);
  aspect-ratio: 5 / 3;
  overflow: hidden;
  transform: perspective(800px) rotateX(1.5deg);
  background: #31434e;
  border: 7px solid #070b10;
  box-shadow: 0 0 0 3px #415d6c, 18px 20px 0 rgba(0,0,0,.42), 0 0 60px rgba(75, 214, 201, .1);
}
.preview-grid { position: absolute; inset: 0; background-color: #3e525b; background-image: linear-gradient(45deg,#374851 25%,transparent 25%,transparent 75%,#374851 75%),linear-gradient(45deg,#374851 25%,transparent 25%,transparent 75%,#374851 75%); background-size:48px 48px; background-position:0 0,24px 24px; }
.preview-grid::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px #091019; }
.preview-wall { position:absolute; z-index:2; background:#536572; border:5px solid #111923; box-shadow:inset 0 -9px #344550,0 7px rgba(0,0,0,.3); }
.preview-wall-top { left:0; top:0; width:100%; height:12%; }
.preview-wall-left { left:0; top:0; width:6%; height:100%; }
.preview-wall-right { right:0; top:0; width:6%; height:100%; }
.preview-desk { position:absolute; z-index:4; left:13%; top:27%; width:36%; height:23%; background:#8d7258; border:6px solid #151b22; box-shadow:inset 0 8px #b0946d,0 10px #273039; }
.preview-desk::after { content:"MNEMOS"; position:absolute; right:8%; bottom:14%; padding:5px 8px; color:#182027; background:#d8cfb6; border:3px solid #272c32; font-size:10px; font-weight:900; }
.preview-shelf { position:absolute; z-index:4; right:11%; top:16%; width:24%; height:37%; background:repeating-linear-gradient(90deg,#ae514d 0 12%,#d2a942 12% 24%,#4e8197 24% 36%,#557c68 36% 48%,#9f6f48 48% 60%); border:7px solid #172028; box-shadow:inset 0 0 0 6px #6d5541,0 10px #28313a; }
.preview-shelf::after { content:""; position:absolute; inset:31% 0 auto; height:7px; background:#222a31; box-shadow:0 72px #222a31; }
.preview-core { position:absolute; z-index:5; left:56%; bottom:13%; width:18%; aspect-ratio:1; border-radius:50%; border:12px solid #263842; box-shadow:0 0 0 6px #121920,0 0 30px #63d9cd,inset 0 0 22px #63d9cd; animation:core-pulse 2.3s steps(4,end) infinite; }
.preview-core i { position:absolute; inset:28%; border-radius:50%; background:#c9fff5; box-shadow:0 0 24px 8px #68dcd0; }
.preview-cable { position:absolute; z-index:3; height:8px; transform-origin:left; background:#1a242d; border:2px solid #0c1218; }
.cable-a { left:46%; top:52%; width:26%; transform:rotate(26deg); }
.cable-b { left:69%; top:62%; width:20%; transform:rotate(-31deg); }
.preview-person, .mini-avatar { position:absolute; z-index:8; width:25px; height:34px; background:var(--person-color,#52b8ac); border:4px solid #121921; box-shadow:inset 0 7px rgba(255,255,255,.2),0 5px rgba(0,0,0,.35); }
.preview-person::before, .mini-avatar::before { content:""; position:absolute; left:2px; top:-15px; width:15px; height:15px; background:#d7af90; border:4px solid #121921; border-radius:45%; }
.preview-person-a { left:45%; top:66%; --person-color:#54b8ae; }
.preview-person-b { left:78%; top:72%; --person-color:#c96879; }
.preview-scan { position:absolute; z-index:9; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 0 40%,rgba(90,229,213,.12) 50%,transparent 60%); animation:scan 3.8s linear infinite; }
.title-panel { position:relative; z-index:2; width:min(470px,43vw); }
.eyebrow { margin:0 0 9px; color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.18em; }
.title-panel h1 { margin:0; line-height:.88; text-shadow:6px 6px 0 #04080c; }
.title-panel h1 span { display:block; color:var(--amber); font-size:clamp(66px,7.5vw,112px); letter-spacing:-.09em; }
.title-panel h1 small { display:block; margin-top:15px; color:#f4edda; font-size:clamp(30px,3.5vw,49px); letter-spacing:-.08em; }
.title-story { margin:24px 0 17px; color:#aebbc2; font-size:14px; line-height:1.8; }
.lumi-callout, .title-rule { display:flex; align-items:center; gap:13px; padding:11px 13px; background:#121d27; border:3px solid #314a58; box-shadow:var(--pixel-shadow); }
.lumi-callout { margin-bottom:10px; color:#bdd5d6; }
.lumi-callout p, .title-rule p { margin:0; font-size:11px; line-height:1.55; }
.lumi-callout strong { color:#78e1d5; }
.lumi-mini { flex:0 0 36px; height:36px; display:grid; place-items:center; color:#102028; background:#8ff1e5; border:4px solid #1d343e; box-shadow:0 0 13px #52bcb2; font-weight:900; }
.title-rule { color:#d5dde0; background:#171d26; border-color:#3e4b59; }
.title-rule strong { color:#fff; }
.mouse-glyph { position:relative; flex:0 0 27px; height:36px; border:3px solid #8da3af; border-radius:13px; }
.mouse-glyph::before { content:""; position:absolute; left:11px; top:0; width:3px; height:14px; background:#8da3af; }
.mouse-glyph::after { content:""; position:absolute; left:5px; top:6px; width:5px; height:7px; background:var(--amber); }
.count-picker { margin:18px 0 9px; padding:0; border:0; }
.count-picker legend { margin-bottom:8px; color:#82929e; font-size:11px; font-weight:800; }
.count-buttons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.count-button, .pixel-button { min-height:44px; color:#cbd3d7; background:#273441; border:0; box-shadow:inset 0 0 0 3px #435563,0 5px #060a0f; cursor:pointer; font-weight:900; }
.count-button:hover, .pixel-button:hover { filter:brightness(1.12); transform:translateY(-2px); }
.count-button.is-selected { color:#152027; background:var(--amber); box-shadow:inset 0 0 0 3px #ffeba2,0 5px #85691f; }
.start-button { width:100%; min-height:57px; margin-top:7px; color:#111a20; background:var(--amber); box-shadow:inset 0 0 0 3px #fff0ac,0 7px #82631b; font-size:15px; }
.title-footnote { margin:14px 0 0; color:#657782; font-size:10px; text-align:center; }

/* ---------- game shell ---------- */
#game-screen { flex-direction:column; background:#0b1118; }
.game-hud { position:relative; z-index:30; min-height:72px; display:grid; grid-template-columns:240px minmax(250px,1fr) auto; align-items:center; gap:14px; padding:8px 17px; background:#16232e; border-bottom:5px solid #05090d; box-shadow:0 4px 0 #2b4654; }
.room-readout { display:grid; grid-template-columns:1fr auto; column-gap:8px; align-items:end; }
.room-kicker { grid-column:1/-1; color:#6f8794; font-size:9px; letter-spacing:.18em; }
.room-readout strong { color:#eef2e8; font-size:19px; }
.room-readout > span:last-child { color:#77909a; font-size:9px; padding-bottom:3px; }
.player-tabs { min-width:0; display:flex; justify-content:center; gap:6px; }
.player-tab { min-width:62px; height:44px; display:flex; align-items:center; gap:6px; padding:5px 8px; color:#bac7cb; background:#263642; border:0; box-shadow:inset 0 0 0 3px #3e5260,0 4px #05090d; cursor:pointer; }
.player-tab.active { color:#10181e; background:var(--player-color,var(--cyan)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 4px #05090d; }
.tab-avatar { width:25px; height:25px; background:var(--player-color); border:3px solid #111a21; box-shadow:inset 0 7px rgba(255,255,255,.2); }
.player-tab small { font-size:9px; font-weight:900; }
.hud-tools { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.hud-button { min-height:44px; padding:0 10px; display:flex; align-items:center; gap:8px; color:#d5dfe1; background:#263642; border:0; box-shadow:inset 0 0 0 3px #3f5664,0 4px #05090d; cursor:pointer; font-size:10px; font-weight:900; }
.hud-button strong { min-width:22px; padding:4px; color:#162027; background:var(--amber); }
.sound-button { width:44px; justify-content:center; color:#8ee5d9; font-size:19px; }
.sound-button.is-muted { color:#ed9e9e; background:#403038; }
.hud-clock, .burn-clock { min-width:78px; text-align:right; }
.hud-clock span, .burn-clock span { display:block; color:#738993; font-size:8px; }
.hud-clock strong { color:var(--amber); font-size:20px; letter-spacing:.05em; }
.burn-clock { min-width:84px; padding:5px 7px; border:2px solid #743d43; background:#2c1d24; }
.burn-clock span { color:#d99898; }
.burn-clock strong { color:#ff7777; font-size:19px; }
.play-area { position:relative; flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; padding:13px 14px 10px; background:radial-gradient(circle at 50% 35%,#243a47,#0c141c 64%); }
#room-stage { position:relative; width:min(100%,calc((100dvh - 180px) * 1.6667)); aspect-ratio:5/3; overflow:hidden; border:6px solid #05080d; box-shadow:0 0 0 3px #354c58,0 17px 35px rgba(0,0,0,.4); background:#060a0e; }
.objective-strip { position:absolute; z-index:25; left:16px; top:14px; display:flex; gap:9px; align-items:center; padding:7px 10px; color:#cfe2e0; background:rgba(13,25,33,.94); border:3px solid #365762; box-shadow:5px 5px rgba(0,0,0,.28); font-size:10px; pointer-events:none; }
.objective-strip span { color:#70d8cc; font-size:8px; letter-spacing:.1em; }
#world { position:absolute; left:50%; top:50%; width:960px; height:576px; overflow:hidden; transform-origin:center; background:#33484f; }
#room-floor { position:absolute; inset:0; background-color:#445961; background-image:linear-gradient(45deg,#3d5058 25%,transparent 25%,transparent 75%,#3d5058 75%),linear-gradient(45deg,#3d5058 25%,transparent 25%,transparent 75%,#3d5058 75%); background-size:48px 48px; background-position:0 0,24px 24px; }
#room-floor::before { content:""; position:absolute; z-index:1; left:0; top:0; right:0; height:70px; background:#52656f; border-bottom:7px solid #151d24; box-shadow:inset 0 -11px #354851,0 8px rgba(0,0,0,.27); }
#room-floor::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(4,8,12,.65); }
#ambient-layer, #object-layer, #character-layer, #effect-layer { position:absolute; inset:0; }
#ambient-layer, #effect-layer { pointer-events:none; }
#ambient-layer { z-index:12; background:radial-gradient(circle at 42% 48%,transparent 0 34%,rgba(5,9,14,.32) 76%,rgba(3,5,8,.58)); transition:background .45s ease; }
#world[data-power="off"] #ambient-layer { background:radial-gradient(circle at 43% 52%,rgba(109,218,208,.08),rgba(4,7,11,.48) 38%,rgba(2,4,7,.82) 78%); }
#effect-layer { z-index:60; box-shadow:inset 0 0 20px rgba(255,255,255,.03); background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(7,15,20,.055) 4px 5px); }
.room-object { position:absolute; z-index:5; padding:0; color:inherit; background:transparent; border:0; cursor:pointer; }
.room-object::after { content:""; position:absolute; inset:-6px; border:3px solid transparent; pointer-events:none; }
.room-object:hover::after, .room-object.is-new::after { border-color:rgba(109,238,224,.82); animation:object-pulse .85s steps(2,end) infinite; }
.room-object.is-new:not(:hover)::before { content:""; position:absolute; z-index:20; right:-5px; top:-5px; width:10px; height:10px; background:var(--amber); border:3px solid #131b21; box-shadow:0 0 14px 4px rgba(240,198,90,.4); animation:spark 1.1s steps(2,end) infinite; }
.object-label { position:absolute; z-index:30; left:50%; bottom:-28px; width:max-content; max-width:170px; transform:translateX(-50%); padding:4px 7px; color:#10191f; background:#d8fff7; border:2px solid #10191f; font-size:10px; font-weight:900; opacity:0; pointer-events:none; }
.room-object:hover .object-label { opacity:1; }
.object-glyph { position:absolute; inset:0; display:grid; place-items:center; color:#f2e7bf; font-size:11px; font-weight:900; text-shadow:2px 2px #10161c; pointer-events:none; }
.object--bookshelf { background:repeating-linear-gradient(90deg,#ad574f 0 11%,#d1a741 11% 22%,#4d8099 22% 33%,#5b896f 33% 44%,#805a43 44% 55%); border:7px solid #1a2027; box-shadow:inset 0 0 0 5px #715742,0 10px #28323a; }
.object--bookshelf .object-glyph { align-items:end; padding-bottom:13px; color:#172027; text-shadow:none; }
.object--desk { background:#8b7157; border:6px solid #171d23; box-shadow:inset 0 9px #ac906d,0 10px #29323b; }
.object--desk::before { content:""; position:absolute; left:7%; right:7%; bottom:13%; height:26%; border:4px solid #503f32; box-shadow:inset 0 0 0 3px #a17f5f; }
.object--safe { background:#59666e; border:6px solid #121920; box-shadow:inset 0 0 0 6px #7d8b91,0 9px #273039; }
.object--safe::before { content:""; position:absolute; left:14%; top:18%; width:36%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#232c32 0 17%,#b2bdc0 18% 25%,#343f45 26% 46%,#89969c 47% 56%,#263038 57%); }
.object--board { background:#d7cfb7; border:6px solid #413729; box-shadow:inset 0 0 0 4px #eee7d2,0 8px #28313a; }
.object--board::before { content:""; position:absolute; inset:12px; background:linear-gradient(18deg,transparent 0 45%,#9d4d52 46% 51%,transparent 52%),repeating-linear-gradient(#aea68e 0 2px,transparent 2px 13px); opacity:.7; }
.object--clock { border:6px solid #161d24; border-radius:50%; background:#e8dfc8; box-shadow:inset 0 0 0 4px #a49b84,0 7px #29323a; }
.object--clock::before { content:""; position:absolute; left:48%; top:18%; width:5px; height:34%; transform-origin:bottom; transform:rotate(10deg); background:#263038; }
.object--clock::after { content:""; position:absolute; left:48%; top:49%; width:34%; height:5px; transform:rotate(-35deg); transform-origin:left; background:#263038; }
.object--window { background:linear-gradient(145deg,#142f3a,#285766 46%,#122732 47% 53%,#31606d 54%); border:7px solid #182027; box-shadow:inset 0 0 20px #09151c,0 8px #283139; }
.object--window::after { border-color:transparent !important; background:repeating-linear-gradient(105deg,transparent 0 11px,rgba(164,228,229,.25) 12px 14px); animation:rain .8s linear infinite !important; }
.object--door { background:#46636d; border:7px solid #12191f; box-shadow:inset 9px 0 #607d85,inset -8px 0 #324b55,0 9px #263038; }
.object--door::before { content:""; position:absolute; right:12%; top:48%; width:10px; height:10px; background:#73e1d5; border:3px solid #11191f; box-shadow:0 0 10px #65d6ca; }
.object--terminal { background:#4a5a64; border:6px solid #121920; box-shadow:inset 0 0 0 5px #6c7d86,0 9px #263039; }
.object--terminal::before { content:""; position:absolute; inset:12% 12% 28%; background:#112f34; border:4px solid #172026; box-shadow:inset 0 0 18px #55c6b7; }
.room-object.solved { filter:saturate(.8) brightness(1.08); }
.room-object.solved::after { border-color:rgba(104,210,139,.35); animation:none; }
.character { position:absolute; z-index:18; width:36px; height:48px; transform:translate(-50%,-78%); border:0; background:transparent; pointer-events:auto; transition:left .25s linear,top .25s linear; filter:drop-shadow(0 4px rgba(0,0,0,.45)); }
.character::before { content:""; position:absolute; left:6px; top:2px; width:22px; height:21px; background:#dab393; border:4px solid #121920; border-radius:43%; }
.character::after { content:""; position:absolute; left:3px; bottom:3px; width:30px; height:26px; background:var(--player-color); border:4px solid #121920; box-shadow:inset 0 6px rgba(255,255,255,.2); }
.character span { position:absolute; z-index:2; left:3px; bottom:0; width:11px; height:9px; background:#222b32; box-shadow:19px 0 #222b32; }
.character.active { filter:drop-shadow(0 0 5px var(--player-color)) drop-shadow(0 4px rgba(0,0,0,.5)); }
#move-marker { position:absolute; z-index:17; width:25px; height:25px; margin:-12px 0 0 -12px; border:4px solid var(--amber); border-radius:50%; opacity:0; pointer-events:none; }
#move-marker.show { animation:marker .55s steps(3,end); }
.room-intro { position:absolute; z-index:50; left:50%; top:50%; transform:translate(-50%,-50%); min-width:330px; padding:16px 25px; color:#e6fff9; background:#12212b; border:4px solid #64d8cc; box-shadow:9px 9px rgba(0,0,0,.58); text-align:center; font-weight:900; opacity:0; pointer-events:none; }
.room-intro.show { animation:room-title 1.2s steps(1,end); }
.clue-tray { position:absolute; z-index:55; right:24px; top:22px; width:280px; max-height:calc(100% - 44px); display:flex; flex-direction:column; background:rgba(20,31,40,.985); border:4px solid #415b68; box-shadow:0 8px #05090d,0 16px 34px rgba(0,0,0,.44); transition:transform .18s ease,opacity .18s ease; }
.clue-tray.is-collapsed { transform:translateX(calc(100% + 40px)); opacity:0; pointer-events:none; }
.tray-heading { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:9px; background:#263945; border-bottom:4px solid #081016; }
.tray-heading div { display:flex; flex-direction:column; }
.tray-heading div span { color:#66d8cc; font-size:8px; letter-spacing:.15em; }
.tray-heading div strong { color:#f2eddf; font-size:13px; }
.tray-heading > span { min-width:27px; padding:4px; color:#131c22; background:var(--amber); text-align:center; font-weight:900; }
.tray-heading button { width:42px; height:42px; color:#fff; background:#8e444a; border:0; box-shadow:inset 0 0 0 3px #bd6267; cursor:pointer; }
.clue-list { overflow:auto; display:flex; flex-direction:column; gap:8px; padding:10px; }
.empty-clues { padding:22px 8px; color:#728690; font-size:10px; line-height:1.6; text-align:center; }
.dialogue { position:relative; z-index:40; min-height:94px; display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px 20px; color:#222a2e; background-color:#e7e0ca; background-image:linear-gradient(90deg,rgba(69,82,78,.035) 1px,transparent 1px); background-size:8px 8px; border-top:6px solid #05090d; box-shadow:inset 0 5px #f9f4e5; }
.speaker-pip { width:48px; height:48px; display:grid; place-items:center; color:#112027; background:#6bd9cd; border:4px solid #1b282e; box-shadow:inset 0 9px rgba(255,255,255,.28),4px 4px #9c947f,0 0 11px #62c8be; font-weight:900; }
.speaker-pip.warning { color:#f6dddd; background:#9c474c; box-shadow:inset 0 9px rgba(255,255,255,.16),4px 4px #9c947f,0 0 11px #b74f55; }
.dialogue-copy { min-width:0; }
.dialogue-copy strong { display:block; margin-bottom:5px; color:#242d32; font-size:14px; }
.dialogue-copy p { margin:0; color:#4f5b5d; font-size:11px; line-height:1.55; }
.dialogue-actions { display:flex; gap:7px; }
.dialogue-actions button { min-height:43px; padding:0 13px; color:#e8eeee; background:#344753; border:0; box-shadow:inset 0 0 0 3px #526773,0 4px #8d8675; cursor:pointer; font-size:10px; font-weight:900; }

#modal-root:not(:empty) { position:fixed; z-index:100; inset:0; display:grid; place-items:center; overflow:auto; padding:18px; background:rgba(3,7,10,.8); }
.modal-card { width:min(620px,95vw); max-height:calc(100dvh - 36px); overflow:auto; color:#242b2f; background:#e8e1cc; border:6px solid #111920; box-shadow:0 0 0 4px #506571,15px 17px rgba(0,0,0,.56); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; color:#e9f7f2; background:#233642; border-bottom:5px solid #111920; }
.modal-head strong { font-size:14px; }
.modal-close { width:43px; height:43px; color:#fff; background:#91454a; border:0; box-shadow:inset 0 0 0 3px #c36066; cursor:pointer; }
.modal-body { padding:17px; }
.inspect-visual { min-height:145px; display:grid; place-items:center; margin-bottom:14px; padding:20px; color:#d8fff7; background:#3a4d56; border:5px solid #1a2329; box-shadow:inset 0 0 0 4px #566b73; font-size:24px; font-weight:900; text-align:center; white-space:pre-line; }
.modal-copy { margin:0; color:#4c5558; font-size:12px; line-height:1.75; }
.modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:16px; }
.modal-actions button { min-height:44px; padding:0 14px; color:#eaf1f0; background:#344753; border:0; box-shadow:inset 0 0 0 3px #526874,0 4px #aaa28e; cursor:pointer; font-size:11px; font-weight:900; }
.modal-actions button.primary { color:#162027; background:var(--amber); box-shadow:inset 0 0 0 3px #fff0a7,0 4px #9a8247; }
#toast { position:fixed; z-index:150; left:50%; bottom:118px; transform:translate(-50%,18px); max-width:min(560px,86vw); padding:11px 17px; color:#132027; background:#d8fff7; border:4px solid #1a2930; box-shadow:7px 8px rgba(0,0,0,.5); font-size:11px; font-weight:900; opacity:0; pointer-events:none; transition:.18s ease; }
#toast.show { opacity:1; transform:translate(-50%,0); }
#transition-curtain { position:fixed; z-index:160; inset:0; display:grid; place-items:center; color:#bffff5; background:#071017; font-size:15px; font-weight:900; letter-spacing:.18em; opacity:0; visibility:hidden; transition:opacity .25s ease; }
#transition-curtain.is-active { opacity:1; visibility:visible; }

@keyframes core-pulse { 50% { filter:brightness(1.3); } }
@keyframes scan { from { transform:translateY(-100%); } to { transform:translateY(100%); } }
@keyframes object-pulse { 50% { filter:brightness(1.35); } }
@keyframes spark { 50% { opacity:.25; transform:translateY(-4px); } }
@keyframes rain { to { background-position:22px 32px; } }
@keyframes marker { 0% { opacity:1; transform:scale(.35); } 100% { opacity:0; transform:scale(1.5); } }
@keyframes room-title { 0%,78% { opacity:1; } 79%,100% { opacity:0; } }

@media (max-width: 980px) {
  #title-screen { gap:28px; padding:24px; }
  .title-room { width:48vw; }
  .title-panel { width:46vw; }
  .game-hud { grid-template-columns:190px 1fr auto; }
  .player-tab { min-width:44px; padding:5px; }
  .player-tab small { display:none; }
  .hud-button span { display:none; }
}
@media (max-width: 700px) {
  body { overflow:auto; }
  #app { min-height:100dvh; }
  #title-screen { position:relative; min-height:100dvh; flex-direction:column; align-items:stretch; justify-content:flex-start; overflow:auto; padding:18px; }
  .title-room, .title-panel { width:100%; }
  .title-room { flex:none; }
  .title-panel h1 span { font-size:62px; }
  .title-panel h1 small { font-size:32px; }
  .game-hud { min-height:64px; grid-template-columns:1fr auto; gap:7px; padding:7px 9px; }
  .player-tabs { grid-column:1/-1; grid-row:2; overflow-x:auto; justify-content:flex-start; padding-bottom:3px; }
  .room-readout { min-width:0; }
  .hud-tools { gap:6px; }
  .hud-button { width:40px; min-height:40px; padding:0; justify-content:center; }
  .hud-button strong { display:none; }
  .hud-clock { min-width:66px; }
  .hud-clock strong { font-size:17px; }
  .play-area { padding:9px 7px; }
  #room-stage { width:100%; }
  .objective-strip { left:8px; top:8px; max-width:calc(100% - 16px); }
  .dialogue { min-height:108px; grid-template-columns:41px 1fr; gap:10px; padding:9px 11px; }
  .speaker-pip { width:40px; height:40px; }
  .dialogue-actions { grid-column:1/-1; justify-content:flex-end; }
  .dialogue-actions button { min-height:38px; }
  .clue-tray { right:8px; top:8px; width:min(300px,calc(100% - 16px)); max-height:calc(100% - 16px); }
  #toast { bottom:126px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .character { transition:none; }
}

/* ---------- generated environment assets ---------- */
.title-room { background:#101820 url("assets/room-office.png") center / cover no-repeat; }
.title-room .preview-grid,
.title-room .preview-wall,
.title-room .preview-desk,
.title-room .preview-shelf,
.title-room .preview-core,
.title-room .preview-cable,
.title-room .preview-person { display:none; }

#world { image-rendering:auto; background:#090e13; }
#room-floor { background-position:center; background-size:cover; background-repeat:no-repeat; image-rendering:auto; }
#world[data-room="office"] #room-floor { background-image:url("assets/room-office.png"); }
#world[data-room="lab"] #room-floor { background-image:url("assets/room-lab.png"); }
#world[data-room="core"] #room-floor { background-image:url("assets/room-core.png"); }
#room-floor::before { display:none; }
#room-floor::after { box-shadow:inset 0 0 45px rgba(3,7,10,.4); }
#world[data-room="lab"] #ambient-layer { background:radial-gradient(ellipse at 48% 48%,transparent 0 60%,rgba(6,17,21,.13) 88%); }
#world[data-room="core"] #ambient-layer { background:radial-gradient(circle at 50% 46%,rgba(70,232,221,.04),transparent 36%),radial-gradient(ellipse at 50% 52%,transparent 0 57%,rgba(4,7,11,.38) 92%); }
#world[data-room="office"][data-power="off"] #ambient-layer { background:radial-gradient(circle at 43% 52%,transparent 0 28%,rgba(2,5,8,.3) 60%,rgba(1,3,6,.6) 92%); }

.asset-hotspot { background:transparent; border:0; box-shadow:none; }
.asset-hotspot:hover { filter:drop-shadow(0 0 8px rgba(105,235,221,.42)) brightness(1.08); }
.asset-hotspot.is-locked { cursor:not-allowed; filter:saturate(.45) brightness(.82); }
.asset-hotspot.is-locked::after { border-color:rgba(159,175,181,.34); background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(22,29,34,.23) 8px 12px); animation:none; }
.asset-hotspot .object-status { position:absolute; z-index:21; right:3px; top:3px; min-width:23px; min-height:21px; display:grid; place-items:center; padding:3px 5px; color:#142127; background:#72ddcf; border:3px solid #101920; box-shadow:3px 3px rgba(0,0,0,.38); font-size:8px; font-weight:900; pointer-events:none; }
.asset-hotspot.is-locked .object-status { color:#eee; background:#5f6870; }
.asset-hotspot:not(.is-locked):not(.solved) .object-status:empty { display:none; }
.asset-hotspot.solved .object-status { color:#132219; background:#7dd69a; }

/* ---------- notebook ---------- */
.inventory-section { padding:9px; color:#dce7e4; background:#1d2d36; border:3px solid #36505c; }
.inventory-section h3 { margin:0 0 7px; color:#71ddd0; font-size:9px; letter-spacing:.07em; }
.inventory-section div { display:flex; flex-wrap:wrap; gap:5px; }
.inventory-section span { padding:5px 6px; color:#1a2021; background:#d8c77f; border:2px solid #0e161b; font-size:8px; font-weight:900; }
.clue-card { padding:10px; color:#cdd9da; background:#293d48; border:3px solid #405864; font-size:10px; line-height:1.55; }
.clue-card > span { color:#68d8cc; font-size:8px; letter-spacing:.06em; }
.clue-card strong { display:block; margin:3px 0; color:#fff0c6; font-size:11px; }
.clue-card p { margin:0; color:#b9c7c9; }

/* ---------- modal system ---------- */
.modal-card { overflow-x:hidden; overscroll-behavior:contain; scrollbar-color:#5d737e #1a252c; scrollbar-width:thin; }
.modal-wide { width:min(820px,95vw); }
.modal-stage { width:min(1040px,96vw); }
.modal-photo { width:min(960px,96vw); }
.modal-keypad { width:min(410px,94vw); }
.modal-terminal { width:min(620px,95vw); }
.modal-choice { width:min(720px,95vw); }
.modal-head > div { display:flex; flex-direction:column; gap:2px; }
.modal-head > div span { color:#69d9cd; font-size:8px; letter-spacing:.14em; }
.modal-head strong { color:#f5f1e7; }
.modal-close:hover, .modal-actions button:hover { filter:brightness(1.12); transform:translateY(-2px); }
.modal-close:active, .modal-actions button:active { transform:translateY(3px); box-shadow:inset 0 0 0 3px rgba(255,255,255,.24),0 1px #665f50; }
.modal-actions button:disabled, button:disabled { cursor:not-allowed; filter:saturate(.35); opacity:.68; }
.modal-help { margin:10px 0; color:#566164; font-size:11px; line-height:1.6; }
.device-label { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; color:#c9d9d9; background:#293a44; border:4px solid #182229; box-shadow:inset 0 0 0 3px #455b65; }
.device-label span { color:#68d8cc; font-size:8px; letter-spacing:.1em; }
.device-label strong { color:#f2ecd9; font-size:11px; text-align:right; }
.research-note { margin:13px 0; padding:14px 17px; color:#4d4b44; background:#f2ead4; border:3px solid #9d947c; box-shadow:5px 5px #b0a68d; font-size:12px; line-height:1.75; }
.selection-readout { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; margin-top:12px; padding:9px 11px; color:#d6e5e3; background:#24343e; border:3px solid #405763; }
.selection-readout span { color:#69d9cc; font-size:8px; letter-spacing:.1em; }
.selection-readout strong { min-width:0; overflow:hidden; color:#fff1be; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.locked-device { min-height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:14px; color:#e6d2d2; background:repeating-linear-gradient(135deg,#303a40 0 13px,#252e34 13px 26px); border:5px solid #171e23; box-shadow:inset 0 0 0 4px #59646a; }
.locked-device strong { padding:8px 14px; color:#ffd9d9; background:#833f45; border:3px solid #27191c; box-shadow:5px 5px #181b1d; font-size:24px; }
.locked-device span { margin-top:12px; color:#9aa7aa; font-size:9px; letter-spacing:.16em; }

/* ---------- room 1 devices ---------- */
.protocol-picks { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.protocol-binder { position:relative; min-height:88px; display:flex; align-items:center; gap:9px; padding:9px; color:#e5e4d8; background:linear-gradient(90deg,#774447 0 18%,#344a56 18%); border:4px solid #172027; box-shadow:inset 0 0 0 3px #576873,0 5px #a99f87; cursor:pointer; }
.protocol-binder:nth-child(2n) { background:linear-gradient(90deg,#a17a32 0 18%,#3a515d 18%); }
.protocol-binder:nth-child(3n) { background:linear-gradient(90deg,#41706b 0 18%,#344a56 18%); }
.protocol-binder span { width:28px; height:28px; display:grid; place-items:center; color:#172126; background:#d5c48a; border:3px solid #151d22; font-weight:900; }
.protocol-binder strong { font-size:14px; }
.protocol-binder.is-selected { color:#142027; background:var(--amber); box-shadow:inset 0 0 0 4px #fff0a4,0 5px #8d711e,0 0 15px #59c9bd; transform:translateY(-2px); }
.protocol-binder.is-selected span { color:#dffdf7; background:#2d746f; }

.lock-device { padding:13px; background:#303d45; border:5px solid #141c21; box-shadow:inset 0 0 0 5px #596871; }
.keypad-display { min-height:64px; display:grid; place-items:center; margin:13px 8px; color:#a7f5d8; background:#0c1b1b; border:5px solid #151c20; box-shadow:inset 0 0 20px rgba(80,225,191,.34); font-size:31px; font-weight:900; letter-spacing:.25em; text-indent:.25em; }
.keypad-display.is-error { color:#ff8b84; animation:device-shake .22s steps(2,end) 3; }
.keypad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keypad-key { min-height:55px; color:#e6eceb; background:#4c5b63; border:0; box-shadow:inset 0 0 0 4px #74828a,0 5px #151c21; cursor:pointer; font-size:16px; font-weight:900; }
.keypad-key:hover { color:#172124; background:#dfc55b; }
.keypad-key.clear { color:#ffd4d0; background:#824249; }
.keypad-key.enter { color:#173027; background:#65bd8a; }

.loot-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.loot-grid.compact { margin-top:13px; }
.loot-card { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:10px; min-height:80px; padding:10px; color:#dfe8e6; background:#334650; border:4px solid #1b252b; box-shadow:inset 0 0 0 3px #526671; }
.loot-card > span { width:52px; height:52px; display:grid; place-items:center; color:#172027; background:#d8c978; border:4px solid #131c21; font-weight:900; }
.loot-card strong { display:block; color:#fff0bd; font-size:11px; }
.loot-card p { margin:4px 0 0; color:#aebec0; font-size:9px; line-height:1.45; }

.evidence-strip { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:9px 10px; color:#4b5354; background:#d7ceb4; border:4px solid #746c59; }
.evidence-strip > span { padding:5px 7px; color:#f7ebdd; background:#8b4a4a; font-size:8px; font-weight:900; }
.evidence-strip > strong { font-size:10px; }
.photo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; align-items:start; }
.photo-card { position:relative; min-width:0; padding:8px 8px 13px; color:#4d4a42; background:#eee7d2; border:3px solid #807762; box-shadow:4px 5px #a99f89; cursor:pointer; transform:rotate(var(--tilt,-1deg)); }
.photo-card:nth-child(2n) { --tilt:1.2deg; }
.photo-card:hover { transform:translateY(-4px) rotate(0); z-index:2; }
.photo-card.is-selected { border-color:#2e847d; box-shadow:0 0 0 3px #69d8cc,5px 7px #9e967e; }
.photo-card strong { display:block; margin:7px 0 3px; min-height:28px; font-size:10px; line-height:1.35; }
.photo-card small { display:block; color:#777165; font-size:8px; line-height:1.45; }
.photo-card > b { position:absolute; right:-6px; top:-7px; width:27px; height:27px; display:grid; place-items:center; color:#142027; background:#69d8cc; border:3px solid #142027; }
.photo-image { position:relative; height:104px; display:grid; place-items:center; overflow:hidden; background-color:#31414a; border:4px solid #172127; box-shadow:inset 0 0 22px rgba(0,0,0,.4); }
.photo-image::before { content:""; position:absolute; width:44px; height:60px; background:#697d82; border:4px solid #172127; box-shadow:26px 15px 0 -6px #a08367; }
.photo-image i { position:relative; z-index:2; color:#9bffff; font-size:32px; font-style:normal; font-weight:900; text-shadow:0 0 12px #44d9e0; }
.photo-mirror { background:linear-gradient(120deg,#1f313a 0 42%,#75949b 43% 49%,#263942 50%); }
.photo-order { background:#443036; }
.photo-last { background:#203d40; }
.memory-code-reveal { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#172026; background:radial-gradient(circle,#fff5bd,#d9bd57 64%,#a8872e); border:6px solid #172026; box-shadow:inset 0 0 0 5px #fff0a0; text-align:center; }
.memory-code-reveal.cyan { background:radial-gradient(circle,#d9fff8,#6bcfc4 64%,#397d79); }
.memory-code-reveal span { font-size:9px; letter-spacing:.18em; }
.memory-code-reveal strong { margin:12px 0; font-size:42px; }
.memory-code-reveal p { margin:0; font-size:11px; }
.recorder-device { position:relative; min-height:130px; display:flex; align-items:center; justify-content:center; gap:40px; background:#3e4c53; border:5px solid #151e23; box-shadow:inset 0 0 0 5px #607078; }
.recorder-device > span { width:74px; height:74px; border-radius:50%; background:radial-gradient(circle,#1b252a 0 10%,#828d91 11% 17%,#29353a 18% 43%,#9da4a4 44% 49%,#283239 50%); animation:reel-spin 3s steps(12,end) infinite; }
.recorder-device i { position:absolute; left:50%; top:50%; width:72px; height:6px; transform:translate(-50%,-50%); background:#1c2529; }
.voice-record { margin:13px 0 0; padding:14px 17px; color:#4e4c45; background:#f1ead6; border:3px solid #9b927c; font-size:12px; line-height:1.75; }
.voice-record span { display:block; margin-bottom:5px; color:#8e4144; font-size:9px; font-weight:900; }

/* ---------- room 2 devices ---------- */
.coop-banner { display:grid; grid-template-columns:auto 1fr auto auto 1fr; align-items:center; gap:8px; padding:8px 10px; color:#dce8e6; background:#283943; border:4px solid #172127; }
.coop-banner strong { padding:5px 7px; color:#142026; background:#69d8cc; font-size:9px; }
.coop-banner span { font-size:9px; }
.coop-banner i { color:#ffe88e; font-size:10px; font-style:normal; font-weight:900; }
.audio-coop-grid { display:grid; grid-template-columns:1fr 52px 1fr; gap:10px; margin-top:11px; }
.audio-coop-grid section { padding:10px; background:#d9d2bd; border:4px solid #6f6858; }
.audio-coop-grid h3, .timeline-workspace h3, .shard-workspace h3 { margin:0 0 8px; color:#3d494b; font-size:10px; }
.audio-memory { width:100%; min-height:61px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 9px; margin-bottom:7px; padding:7px 9px; color:#d9e5e4; background:#354851; border:0; box-shadow:inset 0 0 0 3px #536873,0 4px #9c937f; cursor:pointer; text-align:left; }
.audio-memory > span { grid-row:1/3; width:37px; height:37px; display:grid; place-items:center; color:#162126; background:#6cd8cc; border:3px solid #151d22; font-size:9px; font-weight:900; }
.audio-memory strong { font-size:10px; }
.audio-memory small { color:#aababb; font-size:8px; line-height:1.35; }
.audio-memory.is-selected { box-shadow:inset 0 0 0 4px #e9c954,0 4px #9c937f,0 0 13px #e8c850; }
.audio-memory.is-complete { color:#15231a; background:#73b98b; }
.glass-divider { display:grid; place-items:center; color:#2b7370; background:linear-gradient(90deg,rgba(97,220,210,.18),rgba(219,255,252,.68),rgba(97,220,210,.18)); border:4px solid #407c7a; font-size:8px; line-height:1.5; text-align:center; }
.symbol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.symbol-card { min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#3d4748; background:#eee7d2; border:4px solid #6f6959; box-shadow:0 4px #9c937f; cursor:pointer; }
.symbol-card strong { font-size:25px; }
.symbol-card span { font-size:9px; font-weight:900; }
.symbol-card.is-selected { color:#132027; background:#e7c958; box-shadow:inset 0 0 0 3px #fff0a7,0 4px #9c937f; }
.symbol-card.is-complete { color:#173021; background:#85c997; }

.film-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding:14px; background:#263941; border:5px solid #151e22; box-shadow:inset 0 0 30px rgba(88,230,220,.18); }
.film-card { position:relative; min-width:0; min-height:210px; display:flex; flex-direction:column; align-items:center; gap:7px; padding:22px 7px 9px; color:#bffcf1; background:linear-gradient(155deg,rgba(139,242,229,.21),rgba(33,92,91,.42)); border:3px solid #6baca8; box-shadow:inset 0 0 18px rgba(94,231,218,.22); cursor:pointer; }
.film-card::after { content:""; position:absolute; inset:8px; background:linear-gradient(35deg,transparent 46%,rgba(194,255,246,.42) 47% 50%,transparent 51%),linear-gradient(145deg,transparent 55%,rgba(194,255,246,.32) 56% 59%,transparent 60%); pointer-events:none; }
.film-card.is-selected { background:rgba(238,205,83,.42); border-color:#ffe47a; transform:translateY(-6px); }
.film-card strong { margin-top:auto; font-size:12px; }
.film-card small { color:#c2dedb; font-size:8px; }
.film-card em { color:#8adbd3; font-size:13px; font-style:normal; font-weight:900; }
.film-index { position:absolute; left:5px; top:5px; color:#172126; background:#e4c65a; padding:3px 5px; font-size:8px; font-weight:900; }
.analog-clock { position:relative; width:58px; height:58px; border-radius:50%; background:#e6dec8; border:4px solid #1b2529; box-shadow:inset 0 0 0 3px #a9a18d; }
.analog-clock i, .analog-clock b { position:absolute; left:50%; bottom:50%; width:3px; transform-origin:bottom; background:#283238; }
.analog-clock i { height:18px; transform:translateX(-50%) rotate(var(--hour)); }
.analog-clock b { height:23px; transform:translateX(-50%) rotate(var(--minute)); }
.film-reveal { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#cafff6; background:radial-gradient(circle,#286f6d,#102b32 65%,#081419); border:6px solid #172127; box-shadow:inset 0 0 45px #4ad8ca; }
.film-reveal span { font-size:9px; letter-spacing:.14em; }
.film-reveal strong { margin:13px; font-size:57px; text-shadow:0 0 18px #74f2e5; }
.film-reveal i { color:#ffdf6a; font-style:normal; font-weight:900; }

.mirror-frame { min-height:280px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(125deg,#20353d,#6f9195 46%,#28424a 47% 53%,#87a7aa 54%,#23383f); border:8px solid #1a2429; box-shadow:inset 0 0 38px #132329,0 7px #a29984; }
.mirror-copy { display:flex; flex-direction:column; gap:12px; padding:24px; color:#cafff6; background:rgba(15,38,43,.76); border:3px solid #69bdb6; transform:scaleX(-1); text-align:center; }
.mirror-frame.is-decoded .mirror-copy { transform:none; box-shadow:0 0 22px #63d9cd; }
.mirror-copy strong { font-size:27px; }
.mirror-copy span { font-size:11px; }

.identity-terminal { padding:14px; background:#304048; border:5px solid #131c21; box-shadow:inset 0 0 0 5px #586870; }
.terminal-lines { min-height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9df4d9; background:#0c1d1b; border:5px solid #131b1e; box-shadow:inset 0 0 26px rgba(70,222,185,.35); }
.terminal-lines span, .terminal-lines i { font-size:8px; font-style:normal; letter-spacing:.14em; }
.terminal-lines strong { margin:13px 0; font-size:31px; letter-spacing:.17em; }
.identity-keys { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:11px; }
.identity-keys button { min-height:45px; color:#e2e9e7; background:#4b5a61; border:0; box-shadow:inset 0 0 0 3px #718087,0 4px #131b1e; cursor:pointer; font-weight:900; }
.identity-dossier { padding:15px; color:#dce6e4; background:#33454e; border:5px solid #172127; box-shadow:inset 0 0 0 4px #536872; }
.identity-dossier > span { color:#69d8cc; font-size:8px; letter-spacing:.15em; }
.identity-dossier > strong { display:block; margin:6px 0 13px; color:#fff0ba; font-size:26px; }
.identity-dossier dl { display:grid; grid-template-columns:130px 1fr; margin:0; border-top:3px solid #182329; }
.identity-dossier dt, .identity-dossier dd { margin:0; padding:9px; border-bottom:2px solid #52636a; font-size:10px; }
.identity-dossier dt { color:#9fefdf; background:#263740; font-weight:900; }

/* ---------- room 3 devices ---------- */
.timeline-clues { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.timeline-clues p { margin:0; padding:9px; color:#dbe3e2; background:#31434c; border:3px solid #52656e; font-size:9px; line-height:1.55; }
.timeline-clues span { display:block; margin-bottom:3px; color:#68d8cc; font-weight:900; }
.timeline-workspace { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:11px; }
.timeline-workspace > section { padding:10px; background:#d9d2bd; border:4px solid #6e6859; }
.event-bank, .timeline-slots { display:flex; flex-direction:column; gap:7px; }
.event-tile, .timeline-slot { min-height:51px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:8px 10px; color:#e0e8e6; background:#354750; border:0; box-shadow:inset 0 0 0 3px #536873,0 4px #9d9581; cursor:pointer; text-align:left; }
.event-tile strong, .timeline-slot span { font-size:9px; }
.event-tile small { color:#92adae; font-size:8px; }
.event-tile.is-selected { color:#172126; background:#e1c45a; }
.event-tile.is-assigned { background:#496657; }
.timeline-slot strong { min-width:53px; color:#172126; background:#e2c75e; padding:7px; text-align:center; }
.timeline-slot.is-filled { background:#3c6157; }
.solved-timeline { margin:0; padding:0; list-style:none; border:5px solid #182127; }
.solved-timeline li { display:grid; grid-template-columns:90px 1fr; background:#334750; border-bottom:3px solid #192329; }
.solved-timeline li:last-child { border:0; }
.solved-timeline strong { padding:12px; color:#172126; background:#e1c55d; text-align:center; }
.solved-timeline span { padding:12px; color:#e5edeb; font-size:11px; }

.core-record { position:relative; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; color:#cbfff6; background:radial-gradient(circle,#3de0d0 0 5%,#1d7b79 6% 23%,#172f39 24% 42%,#0b171d 43%); border:6px solid #152027; box-shadow:inset 0 0 42px #4ce1d3; }
.core-record span { position:absolute; width:170px; height:170px; border:8px dashed #6af1e3; border-radius:50%; animation:orbit-spin 8s steps(24,end) infinite; }
.core-record strong { position:relative; z-index:2; font-size:58px; text-shadow:0 0 18px #fff; }
.core-record i { position:relative; z-index:2; color:#b8ffef; font-size:8px; font-style:normal; letter-spacing:.15em; }

.shard-workspace { display:grid; grid-template-columns:260px 1fr; align-items:center; gap:20px; min-height:410px; padding:14px; background:#273942; border:5px solid #151f24; }
.shard-workspace > section { align-self:stretch; padding:10px; background:#d8d1bc; border:4px solid #6c6657; }
.shard-bank { display:flex; flex-direction:column; gap:9px; }
.memory-shard { min-height:96px; display:grid; grid-template-columns:47px 1fr; align-items:center; gap:3px 10px; padding:9px; color:#d6fff7; background:linear-gradient(135deg,rgba(91,226,212,.5),rgba(52,91,102,.78)); border:4px solid #172127; box-shadow:inset 0 0 0 3px #6cc5bd,0 5px #a09782; clip-path:polygon(5% 0,100% 7%,92% 93%,0 100%); cursor:pointer; }
.memory-shard strong { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; color:#172126; background:#e5cb62; border:3px solid #172126; }
.memory-shard span { font-size:22px; font-weight:900; }
.memory-shard small { font-size:8px; }
.memory-shard.is-selected { filter:brightness(1.24); box-shadow:inset 0 0 0 4px #fff3a5,0 5px #a09782,0 0 20px #70e6da; transform:translateX(7px); }
.shard-b { background:linear-gradient(135deg,rgba(144,125,209,.58),rgba(55,67,102,.8)); }
.shard-c { background:linear-gradient(135deg,rgba(229,194,77,.56),rgba(91,73,49,.8)); }
.memory-dial { position:relative; width:min(430px,100%); aspect-ratio:1; margin:auto; border-radius:50%; background:repeating-conic-gradient(#526771 0 3deg,#263840 3deg 15deg); border:12px solid #121b20; box-shadow:inset 0 0 0 8px #6a7d84,0 0 28px rgba(73,224,211,.24); }
.memory-dial::before { content:""; position:absolute; inset:18%; border:5px solid #72dcd1; border-radius:50%; box-shadow:0 0 16px #4cbeb5; }
.dial-mark { position:absolute; z-index:2; color:#cbe5e2; font-size:10px; font-weight:900; }
.m00 { left:50%; top:4%; transform:translateX(-50%); }.m06 { right:5%; top:50%; transform:translateY(-50%); }.m12 { left:50%; bottom:4%; transform:translateX(-50%); }.m18 { left:5%; top:50%; transform:translateY(-50%); }
.dial-slots { position:absolute; inset:0; }
.dial-slot { position:absolute; width:105px; height:105px; display:grid; place-items:center; color:#d6efec; background:rgba(24,47,54,.86); border:4px solid #5a7980; cursor:pointer; }
.slot-06 { right:8%; top:39%; }.slot-10 { left:31%; bottom:9%; }.slot-14 { left:8%; top:39%; }
.dial-slot > span { position:absolute; right:5px; top:4px; color:#172126; background:#e1c55d; padding:4px; font-size:8px; font-weight:900; }
.dial-slot small { font-size:8px; }
.dial-slot.is-filled { background:rgba(79,187,176,.58); box-shadow:0 0 16px #5ed9cc; }
.placed-shard { width:67px; height:67px; display:grid; place-items:center; color:#172126; background:#7edbd0; border:4px solid #172126; clip-path:polygon(8% 0,100% 12%,90% 100%,0 87%); }
.placed-shard.shard-b { background:#a795d8; }.placed-shard.shard-c { background:#e5ca64; }
.empty-bank { grid-column:1/-1; margin:0; padding:14px; color:#81969b; background:#17252b; border:3px dashed #4c676d; text-align:center; font-size:10px; font-weight:900; }
.dial-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#91eee3; font-size:9px; font-style:normal; letter-spacing:.12em; }
.containment-reveal { min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#172126; background:radial-gradient(circle,#fff,#d8fff7 42%,#70d5ca 68%,#285c60); border:7px solid #172126; box-shadow:inset 0 0 0 6px #fff,0 0 25px #65d9ce; }
.containment-reveal span { font-size:10px; letter-spacing:.16em; }.containment-reveal strong { margin:14px; font-size:66px; }.containment-reveal i { color:#245650; font-style:normal; font-weight:900; }

.choice-preview { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; color:#f5e4e5; background:radial-gradient(circle,#8f353d,#3a2027 65%,#1b1519); border:6px solid #171b20; box-shadow:inset 0 0 0 5px #ad4f55; text-align:center; }
.choice-preview.choice-delete { background:radial-gradient(circle,#3e4146,#171b20 67%,#0b0d10); box-shadow:inset 0 0 0 5px #5c6168; }
.choice-preview.choice-isolate { color:#18302c; background:radial-gradient(circle,#fff,#d7fff7 65%,#70cfc5); box-shadow:inset 0 0 0 5px #fff; }
.choice-preview span { padding:6px 9px; color:#172126; background:#e0c55c; border:3px solid #171b20; font-size:9px; font-weight:900; }
.choice-preview strong { margin:14px 0 8px; font-size:27px; }
.choice-preview p { max-width:520px; margin:0; font-size:11px; line-height:1.7; }
.choice-warning { margin-top:12px; padding:9px; color:#6e4141; background:#f0d6ce; border:3px solid #a16c65; font-size:10px; text-align:center; }

/* ---------- result ---------- */
#result-screen { align-items:center; justify-content:center; gap:clamp(38px,7vw,100px); overflow-y:auto; padding:clamp(25px,5vw,70px); background:radial-gradient(circle at 27% 48%,#183a43,#0a1118 46%,#060a0f 80%); }
.result-visual { position:relative; flex:0 0 min(38vw,440px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#dffff8 0 5%,#58d8cb 6% 13%,#163b46 14% 28%,#0b1820 29% 47%,transparent 48%); filter:drop-shadow(0 0 30px rgba(94,224,211,.38)); }
.result-core-ring { position:absolute; border-radius:50%; border:10px dashed #5ed8cc; }
.ring-a { inset:12%; animation:orbit-spin 14s steps(24,end) infinite; }
.ring-b { inset:29%; border-style:dotted; border-color:#e1c75f; animation:orbit-spin 8s steps(18,end) infinite reverse; }
.result-core-light { width:17%; aspect-ratio:1; border-radius:50%; background:#eafffa; box-shadow:0 0 30px 14px #60d9cd; animation:core-pulse 1.6s steps(4,end) infinite; }
.result-panel { width:min(560px,48vw); }
.ending-tag { display:inline-block; margin-bottom:11px; padding:6px 9px; color:#172126; background:#69d8cc; border:3px solid #172126; font-size:9px; font-weight:900; }
.result-panel h2 { margin:0; color:#f2ead7; font-size:clamp(29px,3vw,45px); line-height:1.15; letter-spacing:-.06em; text-shadow:4px 4px #05080c; }
.result-summary { margin:15px 0; color:#aebfc1; font-size:12px; line-height:1.7; }
.ending-record { padding:13px 15px; color:#c7dcda; background:#182a33; border:4px solid #3e5964; box-shadow:7px 8px #05090d,inset 0 0 20px rgba(75,221,207,.07); }
.ending-record > span { color:#68d8cc; font-size:8px; letter-spacing:.14em; }
.ending-record strong { display:block; margin:6px 0; color:#ffe895; font-size:11px; }
.ending-record p { margin:0; font-size:10px; line-height:1.65; }
.result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:14px; }
.result-stats div { padding:8px; color:#aebfc1; background:#1c2a33; border:3px solid #334a55; text-align:center; }
.result-stats span { display:block; font-size:8px; }.result-stats strong { display:block; margin-top:4px; color:#fff0ba; font-size:13px; }
.ranking-list { margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.ranking-list li { min-height:39px; display:grid; grid-template-columns:27px 22px 42px 1fr auto; align-items:center; gap:7px; padding:5px 8px; color:#d8e1df; background:#20313a; border:3px solid #354d57; }
.ranking-list li > span { color:#142027; background:#d9c35f; padding:4px; text-align:center; font-size:9px; font-weight:900; }
.ranking-list li > i { width:20px; height:20px; background:var(--player-color); border:3px solid #10191e; }
.ranking-list li strong { font-size:10px; }.ranking-list li small { color:#8fa4a7; font-size:8px; }.ranking-list li b { color:#78ddd1; font-size:10px; }
.ranking-list.is-solo li { grid-template-columns:38px 22px 42px 1fr auto; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.result-actions .pixel-button { width:100%; }
.pixel-button.secondary { color:#e2e9e8; background:#32444e; box-shadow:inset 0 0 0 3px #526873,0 6px #070b10; }
#result-screen[data-ending="restore"] .result-core-light { background:#ffd6d8; box-shadow:0 0 30px 14px #d95a62; }
#result-screen[data-ending="restore"] .result-core-ring { border-color:#d95a62; }
#result-screen[data-ending="delete"] .result-visual { filter:grayscale(.9) brightness(.62); }
#result-screen[data-ending="delete"] .ending-tag { color:#eee; background:#555b61; }
#result-screen[data-ending="isolate"] { background:radial-gradient(circle at 27% 48%,#d6fff8,#1d4b51 30%,#0a1218 67%); }
#result-screen[data-ending="isolate"] .result-core-light { box-shadow:0 0 38px 20px #fff; }
#result-screen[data-ending="timeout"] .result-core-light { background:#ff8b83; box-shadow:0 0 28px 15px #b83f48; }
.burn-clock.is-critical { animation:critical-blink .7s steps(2,end) infinite; }

@keyframes device-shake { 50% { transform:translateX(7px); } }
@keyframes reel-spin { to { transform:rotate(360deg); } }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes critical-blink { 50% { background:#752f38; border-color:#ff8c8c; } }

@media (max-width: 1120px) {
  .game-hud { grid-template-columns:185px minmax(220px,1fr) auto; }
  .player-tabs { justify-content:flex-start; overflow-x:auto; padding:2px 0 5px; }
  .player-tab { min-width:43px; padding:5px; }
  .player-tab small { display:none; }
  .hud-tools { gap:6px; }
  .hud-button { min-width:42px; padding:0 7px; }
  .hud-button > span { display:none; }
  .photo-grid { grid-template-columns:repeat(3,1fr); }
  .film-strip { grid-template-columns:repeat(3,1fr); }
  .film-card { min-height:175px; }
}

@media (max-width: 700px) {
  body { overflow:hidden; }
  .game-hud { min-height:64px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:7px; padding:7px 9px; }
  .room-readout { grid-column:1; grid-row:1; min-width:0; }
  .room-readout strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
  .player-tabs { grid-column:1/-1; grid-row:2; justify-content:flex-start; overflow-x:auto; padding:2px 0 4px; }
  .hud-tools { grid-column:2; grid-row:1; gap:5px; }
  .hud-button { width:38px; min-width:38px; min-height:38px; padding:0; justify-content:center; }
  .hud-clock { min-width:60px; }
  .burn-clock { min-width:70px; padding:4px 5px; }
  .hud-clock strong, .burn-clock strong { font-size:16px; }
  #modal-root:not(:empty) { padding:8px; }
  .modal-card, .modal-wide, .modal-stage, .modal-photo, .modal-keypad, .modal-terminal, .modal-choice { width:100%; max-height:calc(100dvh - 16px); }
  .modal-body { padding:10px; }
  .modal-head { padding:8px 9px; }
  .protocol-picks { grid-template-columns:repeat(2,1fr); }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .photo-image { height:90px; }
  .audio-coop-grid { grid-template-columns:1fr; }
  .glass-divider { min-height:34px; }
  .coop-banner { grid-template-columns:auto 1fr auto; }
  .coop-banner strong:nth-of-type(2), .coop-banner span:last-child { display:none; }
  .symbol-card { min-height:74px; }
  .film-strip { grid-template-columns:repeat(2,1fr); padding:8px; }
  .film-card { min-height:150px; }
  .timeline-clues, .timeline-workspace { grid-template-columns:1fr; }
  .shard-workspace { grid-template-columns:1fr; }
  .shard-bank { display:grid; grid-template-columns:repeat(3,1fr); }
  .memory-shard { min-height:82px; grid-template-columns:1fr; text-align:center; }
  .memory-shard strong { grid-row:auto; margin:auto; }
  .memory-dial { width:min(360px,100%); }
  #result-screen { flex-direction:column; justify-content:flex-start; padding:22px 14px; }
  .result-visual { flex:none; width:min(72vw,300px); }
  .result-panel { width:100%; }
  .result-stats { grid-template-columns:repeat(2,1fr); }
  .ranking-list li { grid-template-columns:25px 20px 36px 1fr auto; }
  .ranking-list li small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .result-actions { grid-template-columns:1fr; }
}

@media (max-width: 400px) {
  .room-readout > span:last-child, .hud-clock span { display:none; }
  .hud-clock { min-width:48px; }
  .burn-clock { min-width:62px; }
  .hud-button { width:34px; min-width:34px; }
  .dial-slot { width:clamp(68px,23vw,84px); height:clamp(68px,23vw,84px); border-width:3px; }
  .placed-shard { width:clamp(43px,15vw,58px); height:clamp(43px,15vw,58px); }
  .dial-slot > span { padding:2px 3px; }
}

@media (max-height: 700px) and (min-width: 701px) {
  #title-screen { padding:18px 35px; }
  .title-room { max-height:72vh; }
  .title-story { margin:13px 0 10px; line-height:1.55; }
  .lumi-callout, .title-rule { padding:8px 10px; }
  .count-picker { margin:11px 0 5px; }
  .start-button { min-height:48px; }
  .title-footnote { margin-top:8px; }
}