:root {
  color-scheme: dark;
  --bg: #071522;
  --panel: rgba(8, 25, 40, .91);
  --panel-deep: #0a1d2d;
  --line: rgba(179, 213, 231, .18);
  --ink: #eef7f7;
  --muted: #9aafbb;
  --soft: #718a98;
  --cyan: #76d9e0;
  --mint: #7ce0bf;
  --gold: #f0cc79;
  --coral: #ed9278;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #a4fff0; outline-offset: 4px; }
.app-shell { min-height: 100vh; }

/* The station is the game board. The story UI floats over the artwork. */
.topbar { height: 64px; position: absolute; z-index: 6; inset: 0 0 auto; padding: 0 clamp(16px, 3.3vw, 50px); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(202, 228, 239, .11); background: linear-gradient(180deg, rgba(5, 18, 30, .82), rgba(5, 18, 30, .42)); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }.brand > span:last-child { display: grid; gap: 2px; }.brand strong { font-size: 12px; letter-spacing: .08em; }.brand small { color: #9ab1bf; font-size: 9px; letter-spacing: .05em; }
.brand-mark { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(119, 220, 222, .43); border-radius: 9px; background: rgba(61, 162, 171, .13); transform: rotate(45deg); }.brand-mark span { width: 3px; border-radius: 5px; background: var(--cyan); transform: rotate(-45deg); }.brand-mark span:nth-child(1) { height: 8px; opacity: .6; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 11px; opacity: .75; }
.topbar-actions, .game-hud, .topbar-controls { display: flex; align-items: center; }.topbar-actions { gap: 16px; }.game-hud { gap: 12px; }.topbar-controls { gap: 6px; }.live-status { display: inline-flex; align-items: center; gap: 8px; color: #c0d2db; font-size: 10px; white-space: nowrap; }.live-status i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #708797; box-shadow: 0 0 0 4px rgba(124, 151, 166, .13); }.live-status.is-awake i { background: var(--mint); box-shadow: 0 0 0 4px rgba(124, 224, 191, .13), 0 0 12px rgba(124, 224, 191, .6); }
.helped-chip, .rating-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1px solid rgba(202, 220, 226, .17); border-radius: 99px; color: #b2c4c8; background: rgba(14, 35, 49, .6); white-space: nowrap; }.helped-chip > span { color: #8ad6c5; font-size: 14px; }.helped-chip small, .rating-pill small { color: #a5bac3; font-size: 9px; }.helped-chip b { color: #d8f8ec; font: 700 11px ui-monospace, monospace; }.rating-pill { border-color: rgba(241, 204, 129, .29); }.rating-pill > span { color: var(--gold); font-size: 13px; }.rating-pill strong { color: #f2d995; font: 700 11px ui-monospace, monospace; }
.icon-button { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: rgba(12, 31, 45, .38); color: #bdd0d8; cursor: pointer; transition: .2s; }.icon-button:hover, .icon-button.sound-on { border-color: rgba(131, 218, 212, .27); color: #bbfff1; background: rgba(57, 133, 129, .22); }.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.icon-button svg path:first-child { fill: currentColor; stroke: none; }

.scene-stage { --board-size: min(80svh, 64vw, 860px); position: relative; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; background: radial-gradient(ellipse at 52% 36%, #23465c, #102b40 67%, #091c2d); isolation: isolate; }
.scene-column { position: absolute; inset: 0; min-height: 0; overflow: hidden; background: transparent; }
.scene-frame { position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; width: var(--board-size); height: var(--board-size); transform: translate(-50%, -50%); min-height: 0; aspect-ratio: 1; border: 0; border-radius: 0; overflow: hidden; background: transparent; box-shadow: none; }
.scene-frame { isolation: isolate; }
.scene-frame:before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 19, 32, .24), transparent 21%, transparent 60%, rgba(5, 18, 31, .45)); }
.station-scene { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(.94); }
.scene-sky-glow { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 73% 13%, rgba(109, 200, 225, .19), transparent 41%), linear-gradient(130deg, rgba(10, 28, 43, .2), transparent 38%, rgba(7, 22, 34, .12)); transition: background .8s ease; }
.scene-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 56%, rgba(3, 12, 21, .28)); }
.scene-frame.is-awake .scene-sky-glow { background: radial-gradient(ellipse at 33% 46%, rgba(141, 234, 218, .22), transparent 48%), linear-gradient(125deg, rgba(12, 44, 59, .04), transparent 60%); }
.scene-frame.is-operating .scene-sky-glow { background: radial-gradient(ellipse at 51% 55%, rgba(255, 210, 125, .14), transparent 59%), rgba(105, 194, 221, .04); }
.scene-frame.is-closing .scene-sky-glow { background: linear-gradient(180deg, rgba(5, 14, 26, .43), transparent 52%, rgba(5, 14, 26, .4)); }
.interior-lights { opacity: .16; transition: opacity .8s; }.is-awake .interior-lights, .is-operating .interior-lights { opacity: 1; }.is-closing .interior-lights { opacity: .3; }
.surface-lights { opacity: .57; transition: opacity .6s; }.is-closing .surface-lights { opacity: .18; }
.train { transition: filter .8s; }.is-awake .train, .is-operating .train { filter: drop-shadow(0 0 12px rgba(74, 214, 224, .28)); }
.scene-vignette, .scene-sky-glow { mix-blend-mode: screen; opacity: .92; }
.chapter-stamp { position: absolute; z-index: 2; top: 84px; left: clamp(22px, 4.8vw, 74px); display: grid; gap: 4px; text-shadow: 0 2px 12px rgba(4, 14, 24, .8); }.chapter-stamp span { color: #eff8f9; font-size: 18px; font-weight: 700; letter-spacing: .07em; }.chapter-stamp small { color: rgba(222, 239, 242, .7); font-size: 9px; letter-spacing: .04em; }
.scene-bottom-label { position: absolute; z-index: 2; right: 23px; bottom: 19px; display: flex; align-items: center; gap: 8px; color: #d5e8e9; font-size: 10px; text-shadow: 0 2px 8px #071522; }.signal-dot { width: 6px; height: 6px; border-radius: 50%; background: #58b9cb; box-shadow: 0 0 11px #65d6dd; }.is-awake .signal-dot, .is-operating .signal-dot { background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.scene-toast { position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, 10px); opacity: 0; padding: 10px 16px; border: 1px solid rgba(130, 237, 216, .4); border-radius: 99px; background: rgba(8, 32, 43, .91); color: #e0fff6; font-size: 11px; white-space: nowrap; pointer-events: none; transition: .23s; box-shadow: 0 10px 30px rgba(0, 0, 0, .24); }.scene-toast.show { opacity: 1; transform: translate(-50%, 0); }
.people { filter: drop-shadow(3px 5px 2px rgba(14, 37, 48, .43)); transform-box: fill-box; transform-origin: center; }.scene-person { transition: filter .25s, transform .25s; transform-box: fill-box; transform-origin: bottom center; }.scene-person.is-angry { filter: drop-shadow(0 0 8px rgba(240, 132, 96, .8)); transform: translateY(-2px); }.mood-mark { display: none; filter: drop-shadow(0 2px 2px rgba(39, 31, 25, .3)); }.has-angry-people .mood-mark { display: block; animation: moodPop .38s ease both; }.has-angry-people .scene-person:nth-child(even) .mood-mark { animation-delay: .11s; }.has-angry-people .npc-mouth { stroke: #903d34; stroke-width: 1.3; }
@keyframes moodPop { from { opacity: 0; transform: translateY(4px) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
.scene-person[data-character="commuter"], .scene-person[data-character="passenger"], .scene-person[data-character="child"] { display: none; }
.traveler-layer { pointer-events: none; filter: drop-shadow(2px 4px 2px rgba(13, 40, 50, .35)); }
.moving-traveler { transition: opacity .1s; }
.moving-traveler.is-upset { filter: drop-shadow(0 0 7px rgba(238, 115, 88, .85)); }
.moving-traveler.is-upset .traveler-mouth { stroke: #9e4539; stroke-width: 1.4; }
.moving-traveler.is-ghost { filter: grayscale(.8) drop-shadow(0 0 7px rgba(202, 232, 241, .65)); }

/* Story hotspots pin the next task to a place in the illustration. */
.hotspot-layer { position: relative; z-index: 3; }.issue-hotspot { cursor: pointer; transition: opacity .25s, filter .25s; transform-box: fill-box; }.issue-hotspot .hotspot-ring { fill: rgba(244, 169, 96, .09); stroke: #f3bf72; stroke-width: 2; stroke-dasharray: 6 5; transform-origin: center; animation: hotspotOrbit 3s linear infinite; }.issue-hotspot .hotspot-core { fill: #edac5c; stroke: #fff2c9; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 197, 103, .8)); }.issue-hotspot .hotspot-symbol { fill: #4c3523; text-anchor: middle; font-family: sans-serif; font-size: 17px; font-weight: 800; }.issue-hotspot .hotspot-tail { fill: #edac5c; stroke: #fff2c9; stroke-width: 1.5; }.hotspot-label-bg { fill: rgba(8, 28, 41, .92); stroke: rgba(255, 210, 137, .54); stroke-width: 1; }.hotspot-label { fill: #fff0cf; font-family: sans-serif; font-size: 11px; font-weight: 700; }.issue-hotspot.is-locked { opacity: .28; pointer-events: none; }.issue-hotspot.is-locked .hotspot-ring { animation: none; stroke: #a4afae; fill: rgba(51, 66, 72, .12); }.issue-hotspot.is-locked .hotspot-core { fill: #697d81; stroke: #bdc8c8; filter: none; }.issue-hotspot.is-locked .hotspot-symbol { fill: #e5ecea; }.issue-hotspot.is-locked .hotspot-tail { fill: #697d81; stroke: #bdc8c8; }.issue-hotspot.is-locked .hotspot-label-bg { stroke: rgba(171, 194, 198, .22); }.issue-hotspot.is-locked .hotspot-label { fill: #bcc9c9; }.issue-hotspot.is-done { opacity: .84; }.issue-hotspot.is-done .hotspot-ring { animation: none; stroke: #77e1bf; fill: rgba(66, 179, 147, .1); }.issue-hotspot.is-done .hotspot-core { fill: #62c7a5; stroke: #c2ffe7; filter: drop-shadow(0 0 7px rgba(95, 220, 174, .46)); }.issue-hotspot.is-done .hotspot-symbol { fill: #103d39; }.issue-hotspot.is-done .hotspot-tail { fill: #62c7a5; stroke: #c2ffe7; }.issue-hotspot.is-done .hotspot-label-bg { stroke: rgba(111, 218, 182, .45); }.issue-hotspot.is-done .hotspot-label { fill: #cff9e6; }
.issue-hotspot.is-active:hover { filter: brightness(1.16); }.issue-hotspot.is-active:hover .hotspot-core { r: 22px; }.issue-hotspot.is-active { animation: issueBreathe 1.8s ease-in-out infinite; }
.issue-hotspot.is-locked, .issue-hotspot.is-done, .issue-hotspot.is-missed { opacity: 0; pointer-events: none; }
@keyframes hotspotOrbit { to { transform: rotate(360deg); } }@keyframes issueBreathe { 50% { filter: drop-shadow(0 0 11px rgba(242, 183, 104, .48)); } }
.scan-layer, .danger-layer, .crisis-route { display: none; }

.story-card { position: absolute; z-index: 4; left: clamp(18px, 4.8vw, 74px); bottom: 78px; width: min(390px, 36vw); padding: 17px 19px 16px; border: 1px solid rgba(193, 220, 229, .2); border-radius: 15px; background: linear-gradient(135deg, rgba(8, 26, 42, .91), rgba(10, 33, 48, .78)); box-shadow: 0 18px 54px rgba(3, 13, 21, .28), inset 0 1px rgba(255, 255, 255, .07); backdrop-filter: blur(12px); }.story-card:before { content: ''; position: absolute; top: 0; left: 18px; width: 60px; height: 2px; background: linear-gradient(90deg, #80e6d1, transparent); }.story-progress { display: flex; align-items: center; gap: 9px; color: #87d7cf; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.progress-divider { width: 21px; height: 1px; background: #4b7786; }.story-progress span:last-child { color: #91aabb; }.story-card h1 { margin: 9px 0 6px; color: #f5faf9; font-size: clamp(19px, 2vw, 25px); line-height: 1.35; letter-spacing: -.02em; }.story-card > p { margin: 0; max-width: 350px; color: #a2b8c1; font-size: 10px; line-height: 1.75; }.narrator { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(187, 216, 224, .1); }.assistant-avatar { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(109, 221, 211, .43); border-radius: 9px; color: #b9fff0; background: linear-gradient(140deg, #235b68, #15394c); font-size: 12px; font-weight: 700; box-shadow: 0 0 14px rgba(91, 210, 196, .1); }.narrator-text { display: grid; gap: 3px; min-width: 0; }.narrator-text b { color: #75d9cf; font-size: 8px; letter-spacing: .06em; }.narrator-text span { color: #c0d1d5; font-size: 9px; line-height: 1.55; }
.chapter-rail { position: absolute; z-index: 4; right: clamp(18px, 4.6vw, 68px); bottom: 41px; width: min(420px, 37vw); padding: 13px 16px 14px; border: 1px solid rgba(183, 215, 228, .14); border-radius: 12px; background: rgba(7, 23, 36, .73); backdrop-filter: blur(9px); }.rail-caption { color: #8ba4b2; font-size: 8px; letter-spacing: .1em; }.chapter-rail > div { display: flex; align-items: center; margin-top: 9px; }.chapter-rail i { height: 1px; flex: 1; background: rgba(133, 164, 180, .27); }.step-dot { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(129, 161, 177, .28); border-radius: 50%; color: #78909c; background: #10283a; font: 700 8px ui-monospace, monospace; transition: .25s; }.step-dot.active { border-color: #f1bf6e; color: #ffdf9c; background: rgba(163, 111, 48, .3); box-shadow: 0 0 0 4px rgba(241, 191, 110, .11), 0 0 12px rgba(241, 191, 110, .22); }.step-dot.done { border-color: #72d9b6; color: #08372f; background: #7ce0bf; }.step-dot.locked { opacity: .56; }
.scene-tools { position: absolute; z-index: 5; right: clamp(18px, 4.6vw, 68px); top: 83px; display: flex; gap: 7px; }.utility-button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(181, 213, 225, .17); border-radius: 8px; background: rgba(9, 27, 42, .6); color: #b2c5ce; cursor: pointer; font-size: 9px; backdrop-filter: blur(8px); transition: .2s; }.utility-button:hover { border-color: rgba(137, 219, 214, .4); color: white; background: rgba(25, 59, 72, .77); }.utility-button > span { color: #7fdccd; }
.issue-clock { position: fixed; z-index: 26; top: 70px; right: 18px; display: flex; align-items: baseline; gap: 5px; padding: 8px 12px; border: 1px solid rgba(241, 198, 111, .65); border-radius: 10px; color: #ffe2a3; background: rgba(34, 43, 42, .94); box-shadow: 0 8px 25px rgba(0, 0, 0, .35); pointer-events: none; }
.issue-clock > span { margin-right: 5px; font-size: 9px; }
.issue-clock > b { font: 800 21px ui-monospace, monospace; }
.issue-clock > small { font-size: 9px; }
.issue-clock.urgent { border-color: #f09178; color: #ffc1aa; animation: urgent .7s infinite; }
.step-dot.missed { border-color: #e29a82; color: #ffe1d4; background: #79504a; }
.footer-note { position: absolute; z-index: 3; left: 50%; bottom: 15px; transform: translateX(-50%); color: rgba(211, 228, 232, .48); font-size: 8px; white-space: nowrap; letter-spacing: .02em; }

/* Mini-game pop-up */
.overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(3, 11, 19, .74); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .22s; }.overlay.open { opacity: 1; pointer-events: auto; }.dialog { position: relative; width: min(480px, 100%); max-height: min(92svh, 820px); overflow: auto; padding: 27px 31px 25px; border: 1px solid rgba(142, 213, 220, .26); border-radius: 19px; background: radial-gradient(ellipse at 50% 0%, rgba(51, 133, 149, .22), transparent 43%), linear-gradient(145deg, #112b40, #091c2e 78%); box-shadow: 0 28px 95px rgba(0, 0, 0, .54), inset 0 1px rgba(255, 255, 255, .07); text-align: center; transform: translateY(10px) scale(.99); transition: transform .23s; }.overlay.open .dialog { transform: none; }.dialog:before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(121, 229, 215, .64), transparent); }.dialog.is-mini { width: min(560px, 100%); padding-top: 25px; }.dialog-close { position: absolute; top: 10px; right: 13px; z-index: 1; border: 0; background: transparent; color: #7895a6; cursor: pointer; font-size: 22px; }.dialog-close:hover { color: white; }.dialog-kicker { color: #80dace; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.dialog h2 { margin: 9px 0 7px; color: #f4fafb; font-size: 22px; line-height: 1.35; letter-spacing: -.02em; }.dialog > p:not(.mini-feedback) { max-width: 410px; margin: 0 auto; color: #9ab0bb; font-size: 10px; line-height: 1.75; }.dialog-facts { display: flex; justify-content: center; gap: 19px; margin: 17px 0 18px; color: #7993a2; font-size: 8px; }.dialog-facts span { display: grid; gap: 4px; }.dialog-facts b { color: #d8e6e8; font-size: 11px; }.primary-button { min-height: 41px; min-width: 187px; display: inline-flex; justify-content: center; align-items: center; gap: 14px; padding: 0 16px; border: 1px solid rgba(143, 245, 216, .57); border-radius: 9px; color: #092d32; background: linear-gradient(105deg, #88e7d1, #69d6d4); box-shadow: 0 8px 25px rgba(78, 217, 197, .17); font-size: 10px; font-weight: 700; cursor: pointer; transition: .2s; }.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 29px rgba(78, 217, 197, .25); }.primary-button span { font-size: 15px; }.secondary-button { display: block; margin: 10px auto 0; padding: 5px; border: 0; color: #a1b8c2; background: transparent; font-size: 9px; cursor: pointer; }.secondary-button:hover { color: #eaf7f6; }.mini-game-area { text-align: left; }.mini-feedback { min-height: 15px; margin: 10px 0 12px; color: #83ddbf; font-size: 9px; line-height: 1.55; }.mini-feedback.is-angry { color: #ffad92; }.mini-game-area:empty, .mini-feedback.hidden { display: none; }.hidden { display: none !important; }.dialog.shake { animation: shake .28s ease-in-out; }@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* Shared interaction buttons for the circuit repair board and other stages. */
.wiring-game { padding: 18px 12px 14px; border: 1px solid rgba(121, 192, 205, .15); border-radius: 13px; background: radial-gradient(ellipse at 50% 20%, rgba(49, 120, 138, .15), transparent 69%), #091b2b; }.wire-source, .wire-destination { display: flex; align-items: center; justify-content: center; gap: 8px; color: #a6bdc6; font-size: 9px; }.wire-source > span { color: #f0cc79; font-size: 16px; }.wire-source b, .wire-destination b { color: #dce8e8; font-size: 9px; }.wire-source small, .wire-destination small { color: #66818e; font-size: 8px; }.wire-destination > span { color: #7de0bf; font-size: 14px; }.wire-path { display: flex; align-items: center; justify-content: center; gap: 0; margin: 14px 0; }.wire-piece { position: relative; z-index: 1; width: 77px; min-height: 74px; display: grid; place-items: center; gap: 4px; border: 1px solid rgba(134, 175, 189, .2); border-radius: 12px; background: linear-gradient(145deg, #17384d, #0b2538); color: #81a4b4; cursor: pointer; transition: .2s; }.wire-piece:hover { border-color: rgba(132, 226, 215, .65); transform: translateY(-2px); }.wire-arrow { display: grid; place-items: center; width: 27px; height: 27px; color: #81aaba; border: 1px solid currentColor; border-radius: 8px; font-size: 18px; transform: rotate(var(--angle)); transition: transform .22s, color .22s; }.wire-piece small { color: #819aa7; font-size: 7px; }.wire-piece.is-connected { border-color: rgba(120, 232, 190, .55); box-shadow: 0 0 14px rgba(104, 219, 179, .1); }.wire-piece.is-connected .wire-arrow { color: #8aefc5; }.wire-bridge { width: 17px; height: 2px; background: #405863; transition: .2s; }.wire-bridge.is-live { background: #74e3bd; box-shadow: 0 0 8px #74e3bd; }.mini-actions { display: flex; justify-content: center; align-items: center; gap: 11px; margin-top: 13px; }.panel-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(111, 222, 204, .38); border-radius: 8px; color: #c5fff0; background: rgba(53, 145, 135, .17); font-size: 9px; font-weight: 700; cursor: pointer; transition: .2s; }.panel-button:hover, .mini-confirm:hover { border-color: #8af1d1; background: rgba(60, 159, 145, .34); }.panel-button span { font-size: 14px; }.mini-tip { color: #6f8997; font-size: 8px; }

/* Mini-game 1 redesign: a branching, two-load circuit repair board. */
.wiring-game { padding: 14px 14px 12px; border-color: rgba(99, 200, 194, .24); background: radial-gradient(ellipse at 50% 36%, rgba(31, 100, 112, .2), transparent 65%), linear-gradient(150deg, #0c2639, #071a2a); }
.wire-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.wire-job { display: grid; grid-template-columns: 22px auto; align-items: center; column-gap: 7px; }
.wire-job > i { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255, 204, 109, .42); border-radius: 7px; color: #ffca72; background: rgba(255, 186, 82, .11); font-size: 13px; font-style: normal; }
.wire-job b { color: #e5f3f3; font-size: 9px; }
.wire-job small, .wire-readout small { color: #7896a4; font-size: 7px; }
.wire-readout { display: grid; justify-items: end; gap: 2px; }
.wire-readout b { color: #89e4ca; font: 700 9px ui-monospace, monospace; }
.wire-status { min-height: 27px; display: flex; align-items: center; margin: 0 0 9px; padding: 6px 9px; border: 1px solid rgba(115, 190, 195, .13); border-radius: 7px; color: #a7c1c8; background: rgba(4, 17, 28, .46); font-size: 8px; line-height: 1.4; }
.wire-board { display: grid; grid-template-columns: 35px repeat(4, minmax(0, 64px)) 35px; grid-template-rows: repeat(4, clamp(48px, 11vw, 64px)); justify-content: center; gap: 5px; position: relative; padding: 10px 7px; overflow: hidden; border: 1px solid rgba(104, 156, 171, .18); border-radius: 10px; background: linear-gradient(135deg, rgba(8, 25, 39, .94), rgba(11, 37, 50, .84)), repeating-linear-gradient(0deg, transparent 0 22px, rgba(91, 143, 156, .04) 23px), repeating-linear-gradient(90deg, transparent 0 22px, rgba(91, 143, 156, .04) 23px); box-shadow: inset 0 1px 18px rgba(0, 0, 0, .15); }
.wire-board:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(110, 231, 217, .035) 50%, transparent 70%); }
.wire-tile { position: relative; z-index: 1; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 4px; border: 1px solid rgba(118, 165, 179, .3); border-radius: 10px; color: #a9c6cb; background: linear-gradient(145deg, #183a4b, #102b3d 72%, #0d2637); box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 4px 8px rgba(0, 0, 0, .22); cursor: pointer; transition: transform .16s, border-color .22s, background .22s, box-shadow .22s; -webkit-tap-highlight-color: transparent; }
.wire-tile:before { content: ''; position: absolute; top: 5px; left: 6px; width: 3px; height: 3px; border-radius: 50%; background: #5c7a85; box-shadow: 0 0 0 1px rgba(7, 18, 26, .6); }
.wire-tile:hover { z-index: 2; transform: translateY(-2px) scale(1.035); border-color: rgba(127, 228, 213, .78); }
.wire-tile:active { transform: scale(.95); }
.wire-spare { position: relative; z-index: 1; min-width: 0; min-height: 0; display: grid; align-content: center; justify-items: center; gap: 2px; border: 1px dashed rgba(127, 155, 164, .36); border-radius: 10px; color: #829aa2; background: repeating-linear-gradient(135deg, rgba(91, 111, 119, .1) 0 5px, rgba(14, 35, 49, .3) 5px 10px); }
.wire-spare > span { font-size: 21px; line-height: 1; }
.wire-spare > small { font-size: 7px; white-space: nowrap; }
.wire-tile svg { width: 100%; height: 100%; overflow: visible; }
.wire-rotor { transform: rotate(var(--turn)); transform-origin: 50px 50px; transition: transform .24s cubic-bezier(.2, .75, .25, 1); }
.wire-track, .wire-metal, .wire-power { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire-track { stroke: #0a1d2b; stroke-width: 27; }
.wire-metal { stroke: #507181; stroke-width: 13; }
.wire-power { stroke: #80f5d1; stroke-width: 5; stroke-dasharray: 13 9; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 4px rgba(99, 255, 214, .9)); transition: opacity .18s; }
.wire-joint { fill: #b4d5d2; stroke: #284b58; stroke-width: 5; }
.wire-tile.is-live { border-color: rgba(119, 240, 195, .82); background: linear-gradient(145deg, #1c514d, #123b42 78%, #0e2c38); box-shadow: inset 0 0 16px rgba(72, 224, 179, .15), 0 0 12px rgba(77, 238, 184, .13); }
.wire-tile.is-live .wire-power { opacity: 1; animation: currentFlow .85s linear infinite; }
@keyframes currentFlow { to { stroke-dashoffset: -44; } }
.wire-turn { position: absolute; right: 5px; bottom: 3px; color: rgba(182, 222, 218, .55); font-size: 8px; transition: color .18s, transform .2s; }
.wire-tile:hover .wire-turn { color: #9bf2d4; transform: rotate(45deg); }
.wire-port { position: relative; z-index: 1; align-self: center; justify-self: center; width: 35px; min-height: 39px; display: grid; align-content: center; justify-items: center; gap: 2px; border: 1px solid rgba(133, 164, 174, .25); border-radius: 8px; color: #829ca7; background: linear-gradient(150deg, rgba(21, 44, 57, .95), rgba(9, 26, 38, .95)); transition: .22s; }
.wire-port:after { content: ''; position: absolute; top: 50%; width: 6px; height: 2px; background: #49636c; }
.wire-port--source:after { right: -6px; }
.wire-port:not(.wire-port--source):after { left: -6px; }
.wire-port i { color: #718d98; font-size: 12px; font-style: normal; line-height: 1; }
.wire-port b { color: #91a9b1; font-size: 6px; font-weight: 600; white-space: nowrap; }
.wire-port--source i { color: #ffd073; }
.wire-port.is-live { border-color: rgba(255, 215, 121, .72); color: #fff0b5; background: linear-gradient(145deg, rgba(135, 99, 39, .56), rgba(35, 46, 43, .94)); box-shadow: 0 0 15px rgba(255, 199, 91, .22); }
.wire-port.is-live i { color: #ffe187; filter: drop-shadow(0 0 5px rgba(255, 210, 100, .9)); animation: loadPulse .8s ease-in-out infinite alternate; }
.wire-port.is-live b { color: #f3e7c6; }
@keyframes loadPulse { to { transform: scale(1.2); } }
.wire-progress-wrap { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 8px; margin: 10px 2px 7px; color: #819aa5; font-size: 7px; }
.wire-progress-wrap > b { color: #9bb7be; font-size: 7px; }
.wire-progress { height: 4px; overflow: hidden; border-radius: 9px; background: #1a3545; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.wire-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #65d9c4, #f2d174); box-shadow: 0 0 8px rgba(97, 231, 193, .6); transition: width .22s ease; }
.wire-legend { display: flex; justify-content: center; gap: 13px; padding: 6px 0 2px; border-top: 1px solid rgba(130, 174, 185, .1); color: #718d99; font-size: 7px; }
.wire-legend span { display: inline-flex; align-items: center; gap: 4px; }
.wire-legend i { width: 12px; height: 12px; display: grid; place-items: center; border-radius: 4px; font-size: 8px; font-style: normal; }
.legend-source { color: #ffd073; }.legend-route { border: 1px solid #83aaad; background: #244353; }.legend-load { color: #ffe087; }
.wiring-game .mini-actions { margin-top: 8px; }
.wiring-game .panel-button { min-height: 33px; }
.wiring-game .mini-tip { font-size: 7px; }
.wiring-game.is-sending .wire-power { opacity: 1; animation-duration: .28s; }
.wire-tile.is-hinted, .inspection-hit.is-hinted, .maze-cell.is-hinted, .night-card.is-hinted { border-color: #ffd36e !important; box-shadow: 0 0 0 3px rgba(255, 211, 110, .24), 0 0 18px rgba(255, 211, 110, .46) !important; animation: guidePulse .8s ease-in-out infinite alternate; }
@keyframes guidePulse { to { box-shadow: 0 0 0 5px rgba(255, 211, 110, .08), 0 0 24px rgba(255, 211, 110, .6); } }

.dialog.is-game .dialog-facts, .dialog.is-game #dialogText { display: none; }
.dialog-facts:empty { display: none; }
.game-guide { margin-bottom: 11px; padding: 9px 10px; border: 1px solid rgba(121, 218, 207, .28); border-radius: 9px; background: linear-gradient(110deg, rgba(52, 133, 132, .19), rgba(9, 30, 43, .64)); }
.game-guide-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.game-guide-heading b { color: #d9f8eb; font-size: 10px; }
.game-guide-heading button { min-height: 27px; padding: 0 9px; border: 1px solid rgba(246, 209, 130, .45); border-radius: 7px; color: #f6d696; background: rgba(120, 86, 35, .23); font-size: 8px; cursor: pointer; }
.game-guide-heading button:hover, .game-guide-heading button:focus-visible { border-color: #ffdf9c; background: rgba(156, 109, 42, .35); }
.game-guide-steps { display: flex; gap: 5px; margin-top: 8px; }
.game-guide-steps > span { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 4px; border: 1px solid rgba(133, 174, 178, .18); border-radius: 6px; color: #87a7af; font-size: 7px; line-height: 1.35; }
.game-guide-steps > span i { flex: 0 0 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #a0bdc2; background: #244757; font: 700 8px ui-monospace, monospace; }
.game-guide-steps > span.is-current { border-color: rgba(132, 236, 198, .55); color: #d7f7e9; background: rgba(52, 139, 117, .23); }
.game-guide-steps > span.is-current i, .game-guide-steps > span.is-done i { color: #133b37; background: #8ae4bd; }
.game-guide-steps > span.is-done { color: #a3d5c1; }
.game-guide > p { margin: 8px 1px 0; color: #bddbd8; font-size: 8px; line-height: 1.5; }
@media (max-width: 420px) { .game-guide-steps { gap: 3px; }.game-guide-steps > span { flex-direction: column; align-items: flex-start; font-size: 7px; }.game-guide { padding: 8px; } }

/* Flip-card primitives retained for the other mini-games. */
.pair-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 12px; perspective: 800px; }
.pair-card { position: relative; min-width: 0; min-height: 81px; padding: 0; border: 1px solid rgba(131, 181, 195, .22); border-radius: 11px; background: #102b40; cursor: pointer; transform-style: preserve-3d; transition: transform .26s, border-color .2s, box-shadow .2s; overflow: hidden; }
.pair-card:hover { border-color: rgba(130, 223, 215, .58); transform: translateY(-2px); }
.pair-card .card-back { position: absolute; inset: 0; display: grid; place-items: center; color: #73cfc6; background: radial-gradient(circle, #20485a, #11283c); font-size: 18px; transition: opacity .16s; }
.pair-card .card-face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 5px; opacity: 0; background: linear-gradient(145deg, #1c4256, #112b40); transition: opacity .16s; }
.card-face i { color: #f1cc78; font-size: 20px; font-style: normal; }
.card-face b { max-width: 100%; padding: 0 2px; color: #dce9e8; font-size: 8px; font-weight: 600; }
.pair-card.is-flipped .card-back, .pair-card.is-matched .card-back { opacity: 0; }
.pair-card.is-flipped .card-face, .pair-card.is-matched .card-face { opacity: 1; }
.pair-card.is-matched { border-color: rgba(119, 225, 188, .53); opacity: .58; pointer-events: none; }
.pair-card.is-matched .card-face { background: rgba(36, 104, 85, .45); }
.mini-progress { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; border: 1px solid rgba(129, 173, 188, .13); border-radius: 8px; color: #809aa6; background: rgba(7, 22, 34, .6); font-size: 8px; }
.mini-progress b { color: #8de1c3; font-size: 10px; }

/* Mini-game 3: compare two illustrated station views and tap the changed areas. */
.inspection-game { padding: 11px; border: 1px solid rgba(125, 180, 195, .2); border-radius: 12px; background: radial-gradient(circle at 78% 8%, rgba(87, 164, 178, .14), transparent 38%), linear-gradient(150deg, #173b4e, #091e30 85%); }
.inspection-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 2px 10px; color: #b7d5d8; font-size: 9px; }
.inspection-top > span { font-weight: 700; letter-spacing: .04em; }
.inspection-top > b { color: #91e7ca; font-size: 9px; white-space: nowrap; }
.inspection-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inspection-view { min-width: 0; padding: 6px; border: 1px solid rgba(146, 190, 197, .25); border-radius: 9px; background: #0c2535; }
.inspection-view.is-live { border-color: rgba(117, 218, 206, .55); box-shadow: 0 0 0 1px rgba(94, 197, 185, .09), 0 8px 23px rgba(2, 11, 20, .19); }
.inspection-view-title { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 25px; padding: 1px 3px 6px; font-size: 8px; }
.inspection-view-title > b { color: #e4f1ee; white-space: nowrap; }
.inspection-view-title > small { color: #87a3ad; font-size: 7px; white-space: nowrap; }
.inspection-view.is-live .inspection-view-title > small { color: #92dfd2; }
.inspection-art { position: relative; overflow: hidden; aspect-ratio: 360 / 236; border: 1px solid rgba(183, 224, 224, .2); border-radius: 6px; background: #17394a; }
.inspection-art svg { display: block; width: 100%; height: 100%; }
.inspection-hit { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; place-items: center; padding: 0; border: 2px solid transparent; border-radius: 46%; color: #eaffdf; background: transparent; cursor: crosshair; transition: border-color .18s, background .18s, box-shadow .18s; }
.inspection-hit:not(:disabled):hover, .inspection-hit:focus-visible { border-color: rgba(255, 245, 180, .82); background: rgba(255, 244, 174, .09); outline: none; }
.inspection-hit > span { display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #173a38; background: #a5efc5; font-size: 11px; font-weight: 800; box-shadow: 0 2px 10px rgba(4, 28, 21, .5); }
.inspection-hit.is-found { border-color: #a8f4c5; background: rgba(77, 203, 146, .14); box-shadow: 0 0 0 4px rgba(114, 243, 175, .1); }
.inspection-hit.is-found > span { display: grid; }
.inspection-hit.is-miss { border-color: #ff9b7d; background: rgba(214, 77, 65, .16); animation: shake .26s; }
.inspection-pips { display: flex; gap: 5px; margin: 10px 1px 8px; }
.inspection-pips i { flex: 1; height: 4px; border-radius: 10px; background: #294956; transition: background .2s, box-shadow .2s; }
.inspection-pips i.is-found { background: #83dfb8; box-shadow: 0 0 9px rgba(121, 225, 177, .35); }
.inspection-lesson { display: grid; gap: 4px; min-height: 58px; padding: 9px 10px; border: 1px solid rgba(125, 176, 188, .23); border-radius: 8px; color: #9cb6be; background: rgba(5, 20, 31, .65); }
.inspection-lesson > b { color: #d4e9e8; font-size: 9px; }
.inspection-lesson > span { font-size: 9px; line-height: 1.55; }
.inspection-lesson.is-correct { border-color: rgba(115, 220, 176, .45); background: rgba(25, 81, 68, .25); }
.inspection-lesson.is-correct > b { color: #aaf0cc; }
.inspection-lesson.is-wrong { border-color: rgba(239, 147, 120, .45); background: rgba(105, 46, 44, .23); }
.inspection-lesson.is-wrong > b { color: #ffb49b; }
.inspection-finish { width: 100%; min-height: 37px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; border: 1px solid rgba(126, 225, 190, .55); border-radius: 8px; color: #d8fff0; background: linear-gradient(105deg, rgba(48, 137, 105, .48), rgba(25, 95, 102, .42)); font-size: 10px; font-weight: 700; cursor: pointer; }
.inspection-finish:hover { background: rgba(58, 151, 121, .56); }
@media (max-width: 580px) { .inspection-views { grid-template-columns: 1fr; }.inspection-view-title { font-size: 9px; }.inspection-view-title > small { font-size: 8px; } }

/* Mini-game 4: rolling digits and a station crowd maze. */
.response-game { display: grid; gap: 9px; text-align: left; }
.timer-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border: 1px solid rgba(225, 192, 113, .25); border-radius: 9px; color: #a9bec3; background: rgba(98, 77, 38, .17); font-size: 9px; }
.timer-row > b { color: #f2d684; font: 700 16px ui-monospace, monospace; }
.timer-row > b small { font-size: 9px; }
.timer-row > b.urgent { color: #ff967b; animation: urgent .7s infinite; }
@keyframes urgent { 50% { opacity: .42; } }
.response-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.response-flow > span { padding: 7px 3px; border: 1px solid rgba(131, 162, 173, .19); border-radius: 6px; color: #7e99a3; background: rgba(8, 23, 34, .58); font-size: 8px; text-align: center; white-space: nowrap; }
.response-flow > span.is-current { border-color: rgba(122, 221, 207, .5); color: #b5eee2; background: rgba(42, 112, 113, .24); }
.response-flow > span.is-done { border-color: rgba(119, 216, 167, .34); color: #a3e8bf; }
.response-stage { min-height: 216px; padding: 13px; border: 1px solid rgba(117, 173, 187, .22); border-radius: 10px; background: radial-gradient(circle at 50% 0%, rgba(42, 112, 127, .17), transparent 58%), #0c2536; }
.response-stage-heading { display: grid; gap: 4px; }
.response-stage-heading > small { color: #7bcebf; font-size: 8px; letter-spacing: .07em; }
.response-stage-heading > b { color: #eff8f4; font-size: 13px; }
.response-stage > p { margin: 8px 0 11px; color: #a5bbc0; font-size: 9px; line-height: 1.55; }
.response-lesson { margin-top: 9px; padding: 8px 9px; border: 1px solid rgba(105, 170, 181, .22); border-radius: 7px; color: #a5bdc1; background: rgba(9, 27, 38, .62); font-size: 9px; line-height: 1.5; }
.response-stage.is-complete { min-height: 173px; border-color: rgba(124, 219, 170, .42); background: rgba(26, 75, 61, .23); }
.response-finish { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(121, 224, 184, .55); border-radius: 8px; color: #dbffee; background: rgba(45, 133, 98, .37); font-size: 10px; font-weight: 700; cursor: pointer; }
.response-finish:hover { background: rgba(48, 151, 108, .56); }

/* Question 4 art and controls. */
.cipher-game { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 9px; }
.cipher-reference { display: grid; align-content: center; justify-items: center; gap: 12px; min-width: 0; padding: 15px 8px; border: 1px solid rgba(238, 197, 108, .48); border-radius: 10px; background: radial-gradient(circle at 50% 28%, rgba(197, 145, 65, .19), transparent 62%), #162d38; text-align: center; }
.cipher-reference > small { color: #d6b775; font-size: 8px; }
.cipher-reference > span { color: #9eaa9f; font-size: 8px; }
.cipher-targets, .cipher-locked { display: flex; justify-content: center; gap: 5px; }
.cipher-targets > span, .cipher-locked > span { width: 31px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(141, 165, 166, .35); border-radius: 5px; color: #b9c5ba; background: rgba(7, 26, 36, .55); font: 700 17px ui-monospace, monospace; }
.cipher-targets > span.is-current { border-color: #f4d188; color: #ffe3a1; background: rgba(171, 119, 42, .25); box-shadow: 0 0 13px rgba(235, 185, 97, .18); }
.cipher-targets > span.is-locked, .cipher-locked > span.is-locked { border-color: #7bd9ae; color: #bff4d0; background: rgba(40, 104, 82, .3); }
.cipher-console { display: grid; justify-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(116, 172, 180, .31); border-radius: 10px; background: linear-gradient(150deg, #081c2c, #173b48); }
.cipher-locked > span { width: 26px; height: 25px; font-size: 12px; }
.cipher-locked > span.is-current { border-color: rgba(244, 209, 136, .67); color: #f8d890; }
.cipher-reel { width: 86px; height: 102px; display: grid; grid-template-rows: 24px 54px 24px; place-items: center; overflow: hidden; border: 1px solid rgba(122, 206, 188, .45); border-radius: 8px; background: linear-gradient(#0c2c3a, #205066 50%, #0c2c3a); box-shadow: inset 0 0 14px #071724; font-family: ui-monospace, monospace; }
.cipher-reel > span { color: #6f9da5; font-size: 15px; }
.cipher-reel > strong { width: 64px; height: 46px; display: grid; place-items: center; border-left: 3px solid #e2c77d; border-right: 3px solid #e2c77d; color: #e5ffe6; background: rgba(107, 216, 162, .14); font-size: 30px; text-shadow: 0 0 10px rgba(154, 255, 198, .63); }
.cipher-reel > strong:not(.is-wrong) { animation: reelRoll .3s linear infinite; }
@keyframes reelRoll { 0% { transform: translateY(5px); opacity: .65; } 50% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-5px); opacity: .65; } }
.cipher-reel > strong.is-wrong { color: #ffc9af; border-color: #f49377; background: rgba(170, 71, 53, .23); }
.cipher-lock { width: 100%; min-height: 35px; border: 1px solid rgba(242, 205, 130, .57); border-radius: 7px; color: #ffe6ae; background: linear-gradient(105deg, rgba(135, 95, 41, .48), rgba(77, 68, 44, .35)); font-size: 10px; font-weight: 700; cursor: pointer; }
.cipher-lock:hover, .cipher-lock:focus-visible { border-color: #ffe0a0; background: rgba(139, 103, 50, .6); }
.cipher-lock > span { margin-left: 5px; }
.maze-status { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #91aab3; font-size: 9px; }
.maze-status b { color: #e9d390; font-size: 11px; }
.maze-board { width: min(100%, 354px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 0 auto; padding: 8px; border: 4px solid #8d6943; border-radius: 11px; background: #6d523a; box-shadow: inset 0 0 0 2px #d0a972, 0 9px 22px rgba(0, 0, 0, .22); }
.maze-cell { position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid rgba(159, 122, 76, .18); border-radius: 2px; color: #354e4d; background: linear-gradient(145deg, #e1c38d, #d3ad75); font-size: 12px; font-weight: 800; }
button.maze-cell { cursor: pointer; }
.maze-cell.is-wall { border-color: rgba(122, 83, 55, .32); background: #b89263; box-shadow: inset 0 0 0 2px rgba(86, 54, 39, .08); }
.maze-cell.is-wall img { width: 98%; height: 98%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(71, 48, 35, .3)); }
.maze-cell.is-wall:nth-child(3n) img { transform: scaleX(-1); }
.maze-cell.is-start { background: #c7dda6; }
.maze-cell.is-goal { background: #e1c77b; }
.maze-cell.is-visited:not(.is-current) { background: #98c9bf; }
.maze-cell.can-move:not(.is-current) { box-shadow: inset 0 0 0 3px rgba(59, 145, 137, .32); }
.maze-cell.is-current { border-color: #286e91; background: #b6d9d9; box-shadow: inset 0 0 0 2px #2b86a9, 0 0 10px rgba(22, 116, 173, .42); }
.maze-guide-art { width: 85%; height: 85%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(19, 60, 72, .45)); }
.maze-exit-art { width: 76%; height: 76%; object-fit: contain; }
.maze-start-label { font-size: 10px; }
button.maze-cell:hover, button.maze-cell:focus-visible { border-color: #287c91; outline: none; filter: brightness(1.1); }
.maze-controls { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.maze-controls > button { width: 42px; height: 35px; border: 1px solid rgba(118, 190, 197, .45); border-radius: 7px; color: #d6f4ee; background: rgba(32, 86, 101, .65); font-size: 17px; cursor: pointer; }
.maze-controls > button:hover, .maze-controls > button:focus-visible { border-color: #a5f2d3; background: #2b6977; }
.maze-result { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.maze-result > div { display: grid; justify-items: center; gap: 3px; padding: 10px; border: 1px solid rgba(136, 200, 182, .39); border-radius: 8px; background: rgba(24, 72, 65, .43); }
.maze-result > div:first-child { border-color: rgba(236, 202, 129, .45); background: rgba(92, 73, 36, .28); }
.maze-result small { color: #a9c2bd; font-size: 9px; }
.maze-result strong { color: #d9ffdf; font: 700 23px ui-monospace, monospace; }
.maze-result > div:first-child strong { color: #ffe3a0; }
.maze-result em { font-size: 10px; font-style: normal; }
.maze-board.is-solution { width: min(100%, 245px); }
.maze-board.is-solution .maze-cell.is-shortest { border-color: #eaa535; color: #63481e; background: #f7da85; }
.maze-board.is-solution .maze-cell.is-visited:not(.is-shortest) { border-color: #81c5cf; background: #9ad2d7; }
.maze-legend { display: flex; justify-content: center; gap: 14px; margin: 7px 0 10px; color: #a0b8bd; font-size: 8px; }
@media (max-width: 460px) { .cipher-game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }.cipher-reference { gap: 7px; padding: 9px 4px; }.cipher-targets { gap: 3px; }.cipher-targets > span { width: 25px; height: 30px; font-size: 15px; }.cipher-console { padding: 7px 4px; }.maze-cell { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .cipher-reel > strong:not(.is-wrong) { animation: none; } }

/* Mini-game 5: a live night control desk. Every switch changes the station. */
.night-game { padding: 11px; border: 1px solid rgba(126, 188, 202, .21); border-radius: 13px; background: radial-gradient(ellipse at 50% 0%, rgba(46, 121, 145, .17), transparent 62%), #081c2b; }
.night-goals { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-bottom: 8px; color: #9bb7bd; font-size: 8px; }
.night-goals > b { color: #d9e9e8; white-space: nowrap; }
.night-goals > b span { color: #edca7d; }
.night-goals > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.night-goals > div span { padding: 3px 5px; border: 1px solid rgba(130, 165, 177, .23); border-radius: 99px; color: #7794a0; background: rgba(14, 34, 47, .64); white-space: nowrap; }
.night-goals > div span.is-done { border-color: rgba(121, 226, 177, .46); color: #a2ebc3; background: rgba(39, 102, 79, .23); }
.night-meter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.night-meter { padding: 7px 9px; border: 1px solid rgba(130, 188, 196, .2); border-radius: 8px; background: rgba(7, 21, 33, .65); }
.night-meter > span { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; color: #a5c0c5; font-size: 8px; }
.night-meter b { color: #f4d58c; font: 800 13px ui-monospace, monospace; }
.night-meter.safety b { color: #87e1bc; }
.night-meter.is-over b { color: #ffad95; }
.night-meter-track { position: relative; height: 6px; margin-top: 6px; border-radius: 7px; background: #233e4d; }
.night-meter-track > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #66d6c1, #ebcb7d); transition: width .25s; }
.night-meter.safety .night-meter-track > i { background: #77dcac; }
.night-meter.is-over .night-meter-track > i { background: linear-gradient(90deg, #e1ba73, #e88c76); }
.night-meter-track > em { position: absolute; top: -3px; width: 2px; height: 12px; background: #f7f8e9; box-shadow: 0 0 5px #f7f8e9; transition: left .15s; }
.night-scene { position: relative; overflow: hidden; padding: 8px; border: 1px solid rgba(110, 170, 187, .34); border-radius: 10px; background: radial-gradient(ellipse at 50% 9%, rgba(73, 165, 179, .23), transparent 60%), linear-gradient(170deg, #17374c, #0a2133 70%); box-shadow: inset 0 0 24px rgba(92, 194, 174, .06); }
.night-scene.is-risk { border-color: rgba(239, 137, 113, .65); box-shadow: inset 0 0 28px rgba(223, 86, 75, .11); }
.night-scene-title { display: flex; justify-content: space-between; gap: 6px; margin: 0 2px 7px; color: #bfd6d8; font-size: 8px; }
.night-scene-title small { color: #86aab3; font-size: 7px; }
.night-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.night-card { position: relative; min-width: 0; min-height: 51px; padding: 0; border: 1px solid rgba(126, 180, 191, .35); border-radius: 8px; background: #14344a; box-shadow: 0 3px 7px rgba(1, 12, 23, .27); cursor: pointer; transition: transform .2s, border-color .2s, opacity .2s; overflow: hidden; }
.night-card:hover:not(:disabled) { transform: translateY(-2px); border-color: #89e5cd; }
.night-card-back, .night-card-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; transition: opacity .2s, transform .2s; }
.night-card-back { color: #82d8cc; background: radial-gradient(circle at 50% 34%, #28596a, #0e2a3f); font-size: 20px; }
.night-card-face { gap: 1px; opacity: 0; transform: rotateY(90deg); color: #dff5ee; background: linear-gradient(145deg, #206151, #123a49); }
.night-card-face i { color: #f1d68f; font-size: 17px; font-style: normal; }
.night-card-face b { font-size: 8px; white-space: nowrap; }
.night-card-result { color: #9ee6bd; font-size: 7px; }
.night-card.is-open, .night-card.is-preview { border-color: rgba(137, 230, 187, .7); }
.night-card.is-warning { border-color: #f4a285; box-shadow: 0 0 9px rgba(237, 123, 91, .25); }
.night-card.is-open .night-card-back, .night-card.is-preview .night-card-back, .night-card.is-decided .night-card-back { opacity: 0; transform: rotateY(90deg); }
.night-card.is-open .night-card-face, .night-card.is-preview .night-card-face, .night-card.is-decided .night-card-face { opacity: 1; transform: rotateY(0); }
.night-card.is-decided { border-color: rgba(127, 210, 171, .36); opacity: .62; cursor: default; }
.night-fixed { display: flex; justify-content: space-between; gap: 6px; margin-top: 7px; color: #9bcdbb; font-size: 7px; }
.night-fixed span { padding: 3px 5px; border: 1px solid rgba(116, 211, 171, .2); border-radius: 5px; background: rgba(30, 85, 70, .17); }
.night-decision-overlay { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2, 12, 22, .78); backdrop-filter: blur(6px); }
.night-decision-popup { width: min(420px, 100%); padding: 26px; border: 1px solid rgba(245, 207, 131, .58); border-radius: 18px; background: radial-gradient(circle at 50% 0%, rgba(139, 103, 50, .24), transparent 52%), #102b3a; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); text-align: center; }
.night-decision-kicker { color: #f1cf84; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.night-decision-popup h3 { margin: 8px 0 6px; color: #f6f7ec; font-size: 23px; }
.night-decision-popup > p { margin: 0; color: #c1d7d7; font-size: 13px; line-height: 1.6; }
.night-decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
.night-decision-actions button { min-height: 49px; border: 1px solid rgba(153, 208, 191, .52); border-radius: 9px; color: #e4fff2; background: rgba(45, 115, 95, .65); font-size: 13px; font-weight: 700; cursor: pointer; }
.night-decision-actions button:hover, .night-decision-actions button:focus-visible { border-color: #aeefd0; background: rgba(63, 149, 113, .75); outline: none; }
.night-decision-popup > .night-decision-feedback { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(247, 158, 125, .4); border-radius: 8px; color: #ffd3bf; background: rgba(115, 50, 43, .3); font-size: 12px; text-align: left; }
.issue-clock { z-index: 46; }
.night-platform { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 8px; padding: 5px 6px 1px; border-top: 2px solid rgba(112, 162, 177, .31); color: #6c9daa; font-size: 7px; }
.night-platform > b { color: #9ac5c8; font-size: 7px; font-weight: 500; }
.night-scene.is-risk .night-platform > b { color: #e7a997; }
.night-lesson { display: grid; gap: 3px; min-height: 47px; padding: 7px 9px; border: 1px solid rgba(117, 188, 199, .2); border-radius: 8px; background: rgba(10, 29, 43, .7); }
.night-lesson b { color: #b1d9d7; font-size: 8px; }
.night-lesson span { color: #9cb4bb; font-size: 9px; line-height: 1.45; }
.night-lesson.is-correct { border-color: rgba(113, 220, 170, .45); }
.night-lesson.is-correct b { color: #9ceac1; }
.night-lesson.is-wrong { border-color: rgba(235, 143, 116, .48); }
.night-lesson.is-wrong b { color: #ffad96; }
.night-status { margin: 8px 2px; color: #efc187; font-size: 9px; line-height: 1.35; }
.night-status.is-ready { color: #9ceac1; }
.night-status.is-risk { color: #ffad96; }
.night-result { display: grid; gap: 4px; margin: 8px 0; padding: 8px 9px; border: 1px solid rgba(115, 223, 178, .48); border-radius: 8px; background: rgba(29, 91, 71, .26); }
.night-result strong { color: #a2efc8; font-size: 9px; }
.night-result span { color: #bdddd1; font-size: 8px; line-height: 1.45; }
.night-confirm { width: 100%; min-height: 34px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid rgba(137, 226, 198, .51); border-radius: 8px; color: #d5fff0; background: linear-gradient(95deg, rgba(42, 133, 106, .35), rgba(44, 113, 118, .3)); font-size: 9px; font-weight: 700; cursor: pointer; }
.night-confirm:hover { background: rgba(56, 153, 124, .43); }
@media (max-width: 460px) { .night-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.night-card { min-height: 47px; }.night-scene-title small { font-size: 6px; } .night-goals { align-items: flex-start; }.night-goals > div { gap: 3px; } }
.ending-score { margin: 13px 0 14px; padding: 15px; border: 1px solid rgba(231, 198, 119, .18); border-radius: 12px; background: rgba(96, 75, 36, .12); text-align: center; }.ending-stars { color: #f1cf7b; font-size: 18px; letter-spacing: 3px; }.ending-stars > span { color: #485965; }.ending-score > strong { display: block; margin-top: 5px; color: #f2d88f; font: 700 32px ui-monospace, monospace; }.ending-score > strong small { color: #8da2a9; font-size: 10px; }.ending-score p { margin: 5px 0 0; color: #91a9af; font-size: 8px; }

.toast-portal { position: fixed; z-index: 47; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 15px; border: 1px solid rgba(133, 223, 208, .34); border-radius: 99px; color: #d8fff3; background: rgba(8, 31, 44, .95); font-size: 9px; white-space: nowrap; box-shadow: 0 11px 35px rgba(0, 0, 0, .32); transition: .2s; }.toast-portal.show { opacity: 1; transform: translate(-50%, 0); }.toast-portal.toast-angry { border-color: rgba(243, 153, 121, .45); color: #ffd0bd; background: rgba(65, 34, 35, .96); }

@media (max-width: 1024px) {
  .issue-clock { top: 92px; right: 9px; padding: 5px 8px; }.issue-clock > b { font-size: 17px; }
  .topbar { position: relative; height: 86px; padding: 5px 12px 7px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 34px 34px; row-gap: 5px; background: #0a2031; }.brand { grid-column: 1; grid-row: 1; gap: 8px; }.brand-mark { width: 25px; height: 25px; }.brand strong { font-size: 10px; }.brand small { font-size: 8px; }.topbar-actions { display: contents; }.game-hud { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 5px; }.topbar-controls { grid-column: 2; grid-row: 1; gap: 5px; }.live-status { font-size: 9px; }.helped-chip, .rating-pill { min-height: 27px; padding: 0 7px; gap: 4px; }.helped-chip small, .rating-pill small { font-size: 8px; }.icon-button { width: 29px; height: 29px; }
  .scene-stage { display: flex; flex-direction: column; height: auto; min-height: calc(100svh - 86px); overflow: visible; padding-bottom: 12px; }.scene-column { position: relative; flex: 0 0 auto; width: 100%; height: auto; }.scene-frame { position: relative; top: auto; left: auto; right: auto; bottom: auto; transform: none; width: 100%; height: auto; aspect-ratio: 1 / 1; border-bottom: 1px solid rgba(188, 216, 227, .22); }.station-scene { width: 100%; height: 100%; object-fit: contain; }.chapter-stamp { top: 10px; left: 11px; }.chapter-stamp span { font-size: 12px; }.chapter-stamp small { font-size: 6px; }.scene-bottom-label { right: 9px; bottom: 8px; font-size: 7px; }.scene-toast { top: 45%; max-width: 90%; font-size: 8px; }
  .story-card { position: relative; inset: auto; width: auto; margin: 13px 12px 0; padding: 13px 14px; border-radius: 12px; }.story-card h1 { font-size: 19px; }.story-card > p { font-size: 9px; }.narrator { margin-top: 9px; padding-top: 8px; }.assistant-avatar { width: 25px; height: 25px; flex-basis: 25px; }.chapter-rail { position: relative; inset: auto; width: auto; margin: 10px 12px 0; padding: 10px 13px; }.chapter-rail .step-dot { flex-basis: 22px; width: 22px; height: 22px; }.scene-tools { position: relative; inset: auto; justify-content: flex-end; margin: 9px 12px 0; }.footer-note { position: relative; inset: auto; transform: none; margin: 10px 12px 0; text-align: center; font-size: 7px; }
  .overlay { padding: 9px; }.dialog, .dialog.is-mini { padding: 23px 17px 18px; border-radius: 15px; max-height: 94svh; }.dialog h2 { font-size: 19px; }.dialog > p:not(.mini-feedback) { font-size: 9px; }.dialog-facts { gap: 11px; margin: 13px 0; }.dialog-facts b { font-size: 10px; }.pair-card { min-height: 66px; }.wire-piece { width: 68px; min-height: 65px; }
}
@media (max-width: 380px) {
  .brand small { display: none; }.game-hud { gap: 3px; }.live-status { font-size: 8px; }.helped-chip, .rating-pill { padding: 0 5px; }.helped-chip small, .rating-pill small { font-size: 7px; }.pair-board { gap: 5px; }.pair-card { min-height: 60px; }.wire-board { grid-template-columns: 27px repeat(4, minmax(0, 52px)) 27px; grid-template-rows: repeat(4, 44px); gap: 3px; padding: 7px 4px; }.wire-port { width: 27px; }.dialog-facts { gap: 8px; }.footer-note { white-space: normal; }
}
/* Keep the remaining guidance legible after removing duplicate microcopy. */
.dialog.is-game h2 { margin-bottom: 14px; }
.dialog-kicker { font-size: 10px; }
.dialog > p:not(.mini-feedback), .mini-feedback { font-size: 11px; }
.dialog-facts { font-size: 10px; }
.game-guide-heading b, .game-guide-heading button { font-size: 11px; }
.game-guide-steps > span { font-size: 9px; }
.game-guide > p { font-size: 11px; }
.wire-job { grid-template-columns: 22px auto; }
.wire-job > i { grid-row: 1; }
.wire-job b, .wire-readout b { font-size: 11px; }
.wire-readout small { font-size: 9px; }
.wire-port b, .wire-spare > small { font-size: 9px; }
.wiring-game .panel-button, .inspection-finish, .response-finish, .night-confirm { font-size: 11px; }
.inspection-top { justify-content: flex-end; }
.inspection-top > b, .inspection-view-title, .inspection-lesson > b, .inspection-lesson > span { font-size: 11px; }
.response-stage-heading > b { font-size: 14px; }
.response-stage > p, .maze-legend { font-size: 11px; }
.cipher-reference > small, .maze-status { font-size: 11px; }
.night-meter > span, .night-fixed, .night-platform > b { font-size: 10px; }
.night-scene-title b { color: #bce8dc; font-size: 11px; }
.night-card-face b, .night-card-result, .night-lesson b, .night-lesson span, .night-result strong, .night-result span { font-size: 10px; }
.night-fixed { display: block; text-align: center; }
.night-platform { justify-content: center; }
.story-card > p, .narrator-text span { font-size: 11px; }
.scene-bottom-label { font-size: 10px; }
@media (max-width: 1024px) {
  .dialog > p:not(.mini-feedback) { font-size: 11px; }
  .scene-bottom-label { font-size: 9px; }
  .story-card > p { font-size: 11px; }
}
@media (max-width: 420px) { .game-guide-steps > span { font-size: 9px; } }

/* Opening scene: keep the invitation, useful rules, and actions in separate rows. */
.dialog.is-intro { width: min(500px, 100%); padding: 27px 29px 24px; }
.dialog.is-intro .dialog-kicker { font-size: 10px; }
.dialog.is-intro h2 { margin: 8px 0 0; font-size: 25px; }
.dialog.is-intro #dialogText { max-width: 420px; margin: 14px auto 0; font-size: 12px; line-height: 1.65; }
.dialog.is-intro .dialog-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.dialog.is-intro .dialog-facts span { min-height: 45px; place-content: center; gap: 2px; padding: 5px; border: 1px solid rgba(131, 211, 208, .22); border-radius: 9px; background: rgba(77, 156, 157, .09); color: #a6bbc2; font-size: 9px; }
.dialog.is-intro .dialog-facts b { color: #a9eee0; font-size: 12px; }
.dialog.is-intro #dialogAction { min-width: 210px; min-height: 44px; margin-top: 18px; font-size: 12px; }
.dialog.is-intro #dialogSecondary { margin-top: 10px; font-size: 10px; }
@media (max-width: 460px) {
  .dialog.is-intro { padding: 23px 18px 21px; }
  .dialog.is-intro h2 { font-size: 22px; }
  .dialog.is-intro #dialogText { font-size: 11px; }
  .dialog.is-intro .dialog-facts { gap: 5px; }
  .dialog.is-intro .dialog-facts span { font-size: 8px; }
  .dialog.is-intro .dialog-facts b { font-size: 10px; }
}

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

/* Desktop uses a fixed 2560 × 1440 design canvas, scaled uniformly to the available viewport. */
@media (min-width: 1025px) {
  body { width: 100%; height: var(--viewport-height, 100dvh); min-height: 0; overflow: hidden; }
  .game-canvas { position: fixed; top: calc(var(--viewport-height, 100dvh) / 2); left: 50%; width: 2560px; height: 1440px; overflow: hidden; transform: translate(-50%, -50%) scale(var(--game-scale, 1)); transform-origin: center; }
  .app-shell { position: relative; width: 100%; height: 100%; min-height: 0; }
  .scene-stage { --board-size: 860px; display: block; width: 2560px; height: 1440px; min-height: 0; overflow: hidden; padding: 0; }
  .scene-column { position: absolute; inset: 0; display: block; width: auto; height: auto; min-height: 0; overflow: hidden; }
  .scene-frame { position: absolute; top: 50%; left: 1660px; right: auto; bottom: auto; width: 1100px; height: 1100px; transform: translate(-50%, -50%); }
  .chapter-stamp { top: 100px; left: 100px; gap: 7px; }
  .chapter-stamp span { font-size: 25px; }
  .chapter-stamp small { font-size: 13px; }
  .scene-bottom-label { right: 30px; bottom: 25px; max-width: none; font-size: 14px; }
  .scene-sidebar { position: absolute; top: 50%; left: 74px; display: flex; flex-direction: column; gap: 22px; width: 827px; max-height: calc(100% - 210px); transform: translateY(-50%); }
  .story-card { position: relative; inset: auto; width: 100%; margin: 0; padding: 25px 30px 24px; border-radius: 19px; }
  .story-progress { gap: 13px; font-size: 22px; }
  .story-card h1 { margin: 14px 0 10px; font-size: 60px; }
  .story-card > p { max-width: 680px; font-size: 24px; line-height: 1.6; }
  .narrator { gap: 16px; margin-top: 18px; padding-top: 16px; }
  .assistant-avatar { flex-basis: 50px; width: 50px; height: 50px; border-radius: 14px; font-size: 25px; }
  .narrator-text { gap: 7px; }
  .narrator-text b { font-size: 22px; }
  .narrator-text span { font-size: 23px; line-height: 1.55; }
  .chapter-rail { position: relative; inset: auto; width: 100%; margin: 0; padding: 17px 22px 18px; border-radius: 16px; }
  .rail-caption { font-size: 22px; }
  .chapter-rail > div { margin-top: 15px; }
  .step-dot { flex-basis: 48px; width: 48px; height: 48px; font-size: 22px; }
  .scene-tools { position: absolute; inset: 100px 100px auto auto; gap: 10px; margin: 0; }
  .utility-button { gap: 8px; padding: 10px 15px; border-radius: 10px; font-size: 13px; }
  .topbar { height: 82px; padding: 0 70px; }
  .brand { gap: 15px; }
  .brand-mark { width: 38px; height: 38px; gap: 4px; }
  .brand-mark span { width: 4px; }
  .brand-mark span:nth-child(1) { height: 11px; }
  .brand-mark span:nth-child(2) { height: 20px; }
  .brand-mark span:nth-child(3) { height: 15px; }
  .brand strong { font-size: 16px; }
  .topbar-actions { gap: 22px; }
  .game-hud { gap: 17px; }
  .live-status { gap: 11px; font-size: 14px; }
  .live-status i { flex-basis: 9px; width: 9px; height: 9px; }
  .helped-chip, .rating-pill { gap: 8px; min-height: 42px; padding: 0 15px; }
  .helped-chip > span, .rating-pill > span { font-size: 18px; }
  .helped-chip small, .rating-pill small { font-size: 12px; }
  .helped-chip b, .rating-pill strong { font-size: 14px; }
  .topbar-controls { gap: 9px; }
  .icon-button { width: 44px; height: 44px; border-radius: 12px; }
  .icon-button svg { width: 21px; height: 21px; }
  .issue-clock { top: 88px; right: 28px; gap: 8px; padding: 12px 18px; border-radius: 13px; }
  .issue-clock > span, .issue-clock > small { font-size: 13px; }
  .issue-clock > b { font-size: 29px; }
  .footer-note { position: absolute; inset: auto auto 19px 50%; margin: 0; transform: translateX(-50%); font-size: 11px; }
  .hotspot-label { font-size: 15px; }
  .issue-hotspot:focus-visible { outline: none; filter: drop-shadow(0 0 10px rgba(151, 255, 220, .9)); }
  .dialog, .dialog.is-mini { max-height: 820px; padding: 34px 40px 32px; border-radius: 23px; }
  .dialog { width: min(640px, 100%); }
  .dialog.is-mini { width: min(760px, 100%); }
  .dialog.is-intro { width: min(700px, 100%); padding: 36px 42px 32px; }
  .dialog.is-intro h2 { margin: 10px 0 0; font-size: 33px; }
  .dialog.is-intro #dialogText { max-width: 590px; margin-top: 18px; font-size: 16px; }
  .dialog.is-intro .dialog-facts { gap: 12px; margin-top: 23px; }
  .dialog.is-intro .dialog-facts span { min-height: 60px; padding: 8px; font-size: 12px; }
  .dialog.is-intro .dialog-facts b { font-size: 16px; }
  .dialog.is-intro #dialogAction { min-width: 280px; min-height: 56px; margin-top: 23px; font-size: 15px; }
  .dialog.is-intro #dialogSecondary { margin-top: 13px; font-size: 13px; }
  .dialog-close { top: 14px; right: 18px; font-size: 30px; }
  .dialog-kicker { font-size: 13px; }
  .dialog h2 { margin: 13px 0 10px; font-size: 30px; }
  .dialog > p:not(.mini-feedback) { max-width: 590px; font-size: 14px; line-height: 1.75; }
  .dialog-facts { gap: 24px; margin: 23px 0 25px; font-size: 12px; }
  .dialog-facts b { font-size: 15px; }
  .primary-button { min-height: 54px; min-width: 240px; gap: 18px; padding: 0 22px; border-radius: 12px; font-size: 14px; }
  .primary-button span { font-size: 20px; }
  .secondary-button { margin-top: 14px; padding: 7px; font-size: 12px; }
  .mini-feedback { min-height: 20px; margin: 14px 0 16px; font-size: 13px; line-height: 1.6; }
  .game-guide { padding: 14px 16px; }
  .game-guide-heading b, .game-guide-heading button { font-size: 14px; }
  .game-guide-steps { gap: 9px; }
  .game-guide-steps > span { gap: 7px; font-size: 12px; }
  .game-guide-steps i { width: 22px; height: 22px; font-size: 11px; }
  .game-guide > p { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .wire-job b, .wire-readout b, .inspection-top > b, .inspection-view-title, .inspection-lesson > b, .inspection-lesson > span { font-size: 14px; }
  .wire-readout small { font-size: 11px; }
  .wire-port b, .wire-spare > small { font-size: 12px; }
  .wiring-game .panel-button, .inspection-finish, .response-finish, .night-confirm { min-height: 48px; padding: 0 20px; font-size: 14px; }
  .response-stage-heading > b { font-size: 18px; }
  .response-stage > p, .maze-legend, .cipher-reference > small, .maze-status { font-size: 13px; }
  .night-meter > span, .night-fixed, .night-platform > b { font-size: 12px; }
  .night-card-face b, .night-card-result, .night-lesson b, .night-lesson span, .night-result strong, .night-result span { font-size: 12px; }
  /* Dialog coordinates use a 1600 × 900 sub-canvas inside the same scaled stage. */
  .overlay, .night-decision-overlay { position: absolute; inset: 0 auto auto 0; width: 1600px; height: 900px; padding: 40px; transform: scale(1.6); transform-origin: top left; }
  .dialog, .dialog.is-mini { max-height: 820px; }
  .night-decision-popup { max-height: 820px; overflow-y: auto; }
  .topbar { height: 116px; }
  .brand strong { font-size: 26px; }
  .live-status { font-size: 22px; }
  .helped-chip, .rating-pill { min-height: 60px; }
  .helped-chip small, .rating-pill small { font-size: 21px; }
  .helped-chip b, .rating-pill strong { font-size: 24px; }
  .icon-button { width: 72px; height: 72px; }
  .icon-button svg { width: 32px; height: 32px; }
  .scene-tools { top: 144px; }
  .utility-button { min-height: 70px; padding: 14px 22px; font-size: 24px; }
  .issue-clock { top: 144px; }
  .game-canvas:not(:has(.overlay.open)) .issue-clock { top: 244px; }
  .toast-portal { max-width: 1800px; bottom: 40px; font-size: 22px; white-space: normal; text-align: center; }
}

/* Compact screens reflow at readable CSS-pixel sizes, including phone landscape. */
button, [role="button"] { touch-action: manipulation; }
@media (max-width: 1024px) {
  html, body { min-width: 0; }
  body { overflow-x: hidden; }
  body:has(.overlay.open), body:has(.night-decision-overlay:not(.hidden)) { overflow: hidden; }
  .game-canvas { width: 100%; min-height: var(--viewport-height, 100dvh); }
  .app-shell { min-height: var(--viewport-height, 100dvh); }
  .topbar { height: auto; min-height: 106px; grid-template-rows: 44px 34px; padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .brand strong { font-size: 15px; }
  .icon-button { width: 44px; height: 44px; }
  .icon-button svg { width: 21px; height: 21px; }
  .live-status { font-size: 12px; }
  .helped-chip, .rating-pill { min-height: 32px; padding: 0 7px; gap: 4px; }
  .helped-chip small, .rating-pill small { font-size: 11px; }
  .helped-chip b, .rating-pill strong { font-size: 13px; }
  .scene-stage { min-height: 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .scene-column { max-width: 620px; align-self: center; }
  .scene-sidebar { width: 100%; max-width: 680px; align-self: center; }
  .story-card h1 { font-size: 25px; }
  .story-progress, .narrator-text b, .rail-caption { font-size: 12px; }
  .story-card > p, .narrator-text span { max-width: none; font-size: 14px; line-height: 1.65; }
  .assistant-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }
  .chapter-rail .step-dot { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
  .scene-tools { align-self: center; width: calc(100% - 24px); max-width: 656px; }
  .utility-button { min-height: 44px; padding: 9px 13px; font-size: 13px; }
  .chapter-stamp span { font-size: 16px; }
  .scene-bottom-label { max-width: calc(100% - 24px); font-size: 12px; }
  .scene-toast { white-space: normal; width: max-content; max-width: 90%; font-size: 13px; text-align: center; }
  .hotspot-ring { stroke-width: 3; }
  /* Transparent hit area keeps moving SVG markers easy to tap without moving their anchor. */
  .hotspot-hit-area { fill: transparent; }
  .issue-clock { top: calc(8px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); padding: 8px 12px; }
  .issue-clock > span, .issue-clock > small { font-size: 12px; }
  .issue-clock > b { font-size: 23px; }
  .game-canvas:not(:has(.overlay.open)) .issue-clock { top: calc(114px + env(safe-area-inset-top)); }
  .overlay, .night-decision-overlay { height: var(--viewport-height, 100dvh); padding: calc(60px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .dialog, .dialog.is-mini, .dialog.is-intro { width: min(620px, 100%); max-height: 100%; min-height: 0; padding: 24px 16px 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .dialog-close { top: 3px; right: 3px; width: 44px; height: 44px; font-size: 28px; }
  .dialog h2, .dialog.is-intro h2 { font-size: 24px; }
  .dialog-kicker, .dialog.is-intro .dialog-kicker { padding: 0 22px; font-size: 12px; }
  .dialog > p:not(.mini-feedback), .dialog.is-intro #dialogText, .mini-feedback { font-size: 14px; }
  .dialog-facts, .dialog.is-intro .dialog-facts span { font-size: 12px; }
  .dialog-facts b, .dialog.is-intro .dialog-facts b { font-size: 14px; }
  .primary-button, .secondary-button, .dialog.is-intro #dialogAction, .dialog.is-intro #dialogSecondary { min-height: 44px; font-size: 15px; }
  .game-guide-heading { flex-wrap: wrap; }
  .game-guide-heading b, .game-guide-heading button { font-size: 13px; }
  .game-guide-heading button { min-height: 44px; }
  .game-guide-steps > span { font-size: 11px; }
  .game-guide-steps > span i { flex: 0 0 20px; width: 20px; height: 20px; font-size: 11px; }
  .game-guide > p { font-size: 13px; line-height: 1.6; }
  .wire-topline { flex-wrap: wrap; }
  .wire-job b, .wire-readout b { font-size: 12px; }
  .wiring-game { padding: 10px 6px; }
  .wire-board { grid-template-columns: 26px repeat(4, minmax(0, 64px)) 26px; grid-template-rows: repeat(4, clamp(44px, 12vw, 64px)); gap: 3px; padding: 8px 3px; }
  .wire-port { width: 26px; }
  .wire-tile svg { min-width: 0; min-height: 0; overflow: hidden; }
  .wire-port b { font-size: 9px; }
  .wire-status, .wire-legend, .wire-progress-wrap, .wire-progress-wrap > b { font-size: 11px; }
  .wire-legend { flex-wrap: wrap; gap: 8px; }
  .wiring-game .panel-button, .inspection-finish, .response-finish, .night-confirm, .cipher-lock { min-height: 44px; font-size: 13px; }
  .inspection-view-title, .inspection-lesson > b, .inspection-lesson > span, .response-stage > p, .cipher-reference > small, .maze-status, .maze-legend { font-size: 13px; }
  .cipher-console { min-width: 0; }
  .maze-controls > button { width: 48px; height: 44px; }
  .cipher-targets > span { width: 24px; }
  .night-card { min-height: 64px; }
  .night-card-face b, .night-card-result, .night-lesson b, .night-lesson span, .night-result strong, .night-result span { font-size: 12px; }
  .night-decision-popup { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 22px 16px; }
  .toast-portal { width: max-content; max-width: calc(100% - 24px); bottom: max(16px, env(safe-area-inset-bottom)); white-space: normal; font-size: 13px; text-align: center; }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
  .scene-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .scene-column { width: 100%; }
  .scene-sidebar { min-width: 0; }
  .scene-tools { grid-column: 1 / -1; justify-self: center; }
}