@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

:root { color-scheme: dark; --cyan:#9eefff; --cyan-strong:#42d8f4; --panel:rgba(3,10,13,.84); --line:rgba(158,239,255,.28); --muted:#8fa7ac; --danger:#ff4d57; }
* { box-sizing:border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; background:#020507; }
body { color:#e9f5f6; font-family:Inter,Segoe UI,sans-serif; }
button, input { font:inherit; }
button { color:inherit; background:transparent; border:1px solid var(--line); padding:.75rem 1rem; letter-spacing:.09em; cursor:pointer; transition:.16s ease; }
button:hover, button:focus-visible, button.selected, .segmented-control button.active { color:#041014; background:var(--cyan); border-color:var(--cyan); outline:none; }
button:disabled { opacity:.28; cursor:not-allowed; background:transparent; color:inherit; }
kbd, .eyebrow, .subtitle, .top-hud, .command-bar, .terminal-copy, small { font-family:'IBM Plex Mono',Consolas,monospace; }
kbd { color:var(--cyan); background:none; padding:0; }
.game-shell { position:relative; width:100%; height:100%; outline:none; background:#020507; }
.screen-fade, .system-flash, .screen-glitch, .screen-reboot, .screen-death-flash { position:absolute; inset:0; z-index:50; pointer-events:none; opacity:0; }
.screen-fade { background:#010304; transition:opacity .15s ease; }
.game-shell.transitioning .screen-fade { opacity:1; transition-duration:.18s; }
.game-shell.transitioning.dir-north .parallax-bg { transform:translate3d(calc(var(--mouse-px, 0) * -14px), calc(var(--mouse-py, 0) * -14px - 18px), 0) scale(1.08); }
.game-shell.transitioning.dir-south .parallax-bg { transform:translate3d(calc(var(--mouse-px, 0) * -14px), calc(var(--mouse-py, 0) * -14px + 18px), 0) scale(0.98); }
.game-shell.transitioning.dir-west .parallax-bg { transform:translate3d(calc(var(--mouse-px, 0) * -14px - 22px), calc(var(--mouse-py, 0) * -14px), 0) scale(1.04); }
.game-shell.transitioning.dir-east .parallax-bg { transform:translate3d(calc(var(--mouse-px, 0) * -14px + 22px), calc(var(--mouse-py, 0) * -14px), 0) scale(1.04); }

.screen-glitch.active { opacity:1; animation:crt-glitch .22s ease-out both; }
@keyframes crt-glitch { 0% { opacity:0; transform:scale(1.02); filter:brightness(2.2) contrast(1.6); } 25% { opacity:1; transform:scale(0.99) skewX(1deg); } 65% { opacity:0.7; transform:scale(1.01) skewX(-0.5deg); } 100% { opacity:0; transform:scale(1); } }

.screen-reboot.active { opacity:1; animation:reboot-flash .5s ease-out both; }
@keyframes reboot-flash { 0% { opacity:1; } 100% { opacity:0; } }

.screen-death-flash.active { opacity:1; animation:death-flash .75s ease-out both; }
@keyframes death-flash { 0% { opacity:1; } 40% { opacity:0.9; } 100% { opacity:0; } }

.system-flash { z-index:40; background:radial-gradient(circle at 50% 45%,rgba(255,74,80,.35),rgba(125,0,8,.12) 42%,transparent 72%); }
.game-shell.system-alert .system-flash { animation:system-flash .65s steps(2,end); }
@keyframes system-flash { 0%,100% { opacity:0; } 15%,45% { opacity:1; } 30%,65% { opacity:.18; } }
.screen-image { position:absolute; inset:0; width:100%; height:100%; min-height:100%; background-position:center; background-size:cover; }
.vignette { position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(0,4,6,.87) 0%,rgba(0,4,6,.28) 40%,rgba(0,4,6,.15) 65%,rgba(0,4,6,.64) 100%),linear-gradient(0deg,rgba(0,3,5,.82) 0%,transparent 40%,rgba(0,3,5,.3) 100%); }
.loading-screen { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--cyan); font:500 .8rem 'IBM Plex Mono'; letter-spacing:.35em; animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.title-card { position:absolute; left:6vw; top:9vh; z-index:10; }
.title-card h1 { margin:.25rem 0; font-size:clamp(3rem,7vw,7rem); font-weight:300; letter-spacing:.19em; line-height:.95; text-shadow:0 2px 32px #000; }
.eyebrow { margin:0 0 .7rem; color:var(--cyan); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
.subtitle { color:var(--muted); letter-spacing:.4em; font-size:.74rem; }
.title-menu { position:absolute; left:6vw; bottom:8vh; display:flex; width:min(22rem,80vw); flex-direction:column; align-items:stretch; gap:.45rem; z-index:10; }
.title-menu button { border:0; border-left:2px solid transparent; text-align:left; padding:.7rem 1rem; font-size:.78rem; }
.title-menu button:hover, .title-menu button.selected { background:linear-gradient(90deg,rgba(158,239,255,.95),rgba(158,239,255,.08)); border-left-color:white; }
.title-menu small { margin-top:1rem; color:var(--muted); letter-spacing:.12em; }
.title-notice { margin:.65rem 0 0; color:var(--cyan); font:.7rem 'IBM Plex Mono',Consolas,monospace; line-height:1.5; }
.terminal-card, .overlay-card { position:relative; border:1px solid var(--line); background:linear-gradient(145deg,rgba(6,17,21,.96),rgba(1,7,10,.94)); box-shadow:0 30px 90px #000, inset 0 0 40px rgba(66,216,244,.025); backdrop-filter:blur(16px); }
.briefing-card { position:absolute; left:6vw; top:50%; transform:translateY(-50%); width:min(38rem,88vw); padding:2.2rem; z-index:10; }
.briefing-card dl { display:grid; grid-template-columns:10rem 1fr; margin:1.7rem 0; gap:.55rem 1rem; font-family:'IBM Plex Mono'; font-size:.78rem; }
.briefing-card dt { color:var(--muted); font-weight:400; }.briefing-card dd { margin:0;color:var(--cyan); }
.briefing-card>p:not(.eyebrow) { color:#c4d0d2; line-height:1.7; max-width:34rem; }
.primary-action { color:#031013; background:var(--cyan); border-color:var(--cyan); }
.top-hud { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.6rem; color:rgba(220,248,250,.7); font-size:.65rem; letter-spacing:.18em; background:linear-gradient(#020608db,transparent); z-index:15; }
.hud-left { display:flex; align-items:center; gap:1.5rem; }
.hud-right { display:flex; align-items:center; gap:1.5rem; }
.bio-monitor { display:flex; align-items:center; gap:.55rem; font-family:'IBM Plex Mono',monospace; font-size:.68rem; padding:.25rem .6rem; border:1px solid rgba(158,239,255,.2); background:rgba(3,10,13,.6); }
.bio-pulse-icon { color:var(--cyan); animation:pulse-heart 1s ease infinite; display:inline-block; }
.bio-pulse-icon.critical { color:var(--danger); animation:pulse-heart .45s ease infinite; }
.bio-pulse-icon.elevated { color:#ffbc42; animation:pulse-heart .7s ease infinite; }
@keyframes pulse-heart { 0%,100% { transform:scale(1); opacity:.8; } 50% { transform:scale(1.28); opacity:1; filter:drop-shadow(0 0 6px currentColor); } }
.bio-stress-pill { font-size:.58rem; padding:.1rem .35rem; border-radius:2px; letter-spacing:.1em; }
.bio-stress-pill.nominal { color:var(--cyan); border:1px solid rgba(66,216,244,.3); }
.bio-stress-pill.elevated { color:#ffbc42; border:1px solid rgba(255,188,66,.4); }
.bio-stress-pill.critical { color:var(--danger); border:1px solid rgba(255,77,87,.5); background:rgba(255,77,87,.15); }
.autosave-state { transition:color .2s,text-shadow .2s; }
.autosave-state.saving { color:var(--cyan); text-shadow:0 0 12px rgba(66,216,244,.85); animation:save-pulse .45s ease infinite alternate; }
@keyframes save-pulse { to { opacity:.45; } }

.title-stats { margin-top:1.2rem; display:flex; flex-direction:column; gap:.4rem; font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:var(--muted); }
.endings-badges { display:flex; gap:.4rem; margin-top:.2rem; }
.ending-badge { padding:.2rem .5rem; border:1px solid rgba(158,239,255,.15); font-size:.6rem; letter-spacing:.12em; color:#4a6266; }
.ending-badge.unlocked { color:#031013; background:var(--cyan); border-color:var(--cyan); font-weight:600; box-shadow:0 0 10px rgba(66,216,244,.35); }

.room-panel { position:absolute; left:2rem; bottom:5.8rem; width:min(38rem,calc(100vw - 11rem)); padding:1.5rem 1.6rem; background:linear-gradient(90deg,rgba(2,8,11,.95),rgba(2,8,11,.65),transparent); text-shadow:0 2px 8px #000; border-left:2px solid var(--line); z-index:10; }
.room-panel h2, .overlay-card h2, .terminal-card h2 { margin:.15rem 0 .65rem; font-weight:400; letter-spacing:.11em; }
.room-panel>p:not(.eyebrow) { max-width:35rem; margin:.35rem 0; color:#c6d2d4; line-height:1.6; }
.reveal-copy { animation:copy-reveal .65s ease both; }
@keyframes copy-reveal { from { opacity:0; transform:translateY(.35rem); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
.room-panel .notice { color:var(--cyan)!important; font-family:'IBM Plex Mono'; font-size:.76rem; white-space:pre-line; }
.interaction-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }.interaction-list button { padding:.55rem .7rem; font-size:.68rem; }
.movement-pad { position:absolute; right:2rem; bottom:6.2rem; display:grid; grid-template:repeat(3,2.7rem)/repeat(3,2.7rem); gap:.25rem; z-index:10; }
.movement-pad button { padding:0; font-size:1.2rem; background:rgba(2,8,11,.78); }.movement-pad .north { grid-area:1/2; }.movement-pad .west { grid-area:2/1; }.movement-pad .position { grid-area:2/2; display:grid; place-items:center; color:var(--muted); font:.58rem 'IBM Plex Mono'; }.movement-pad .east { grid-area:2/3; }.movement-pad .south { grid-area:3/2; }
.command-bar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:.5rem; padding:.8rem; background:rgba(1,6,8,.91); border-top:1px solid rgba(158,239,255,.16); z-index:15; }.command-bar button { border:0; font-size:.66rem; }
.modal-layer { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:2rem; background:rgba(0,3,5,.8); backdrop-filter:blur(12px); animation:modal-backdrop-in .18s ease-out both; }
@keyframes modal-backdrop-in { from { opacity:0; } to { opacity:1; } }

.interaction-modal, .overlay-card, .breaker-switchboard { width:min(44rem,92vw); max-height:86vh; overflow:auto; padding:2rem; animation:modal-card-in .2s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes modal-card-in { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.terminal-copy { white-space:pre-line; color:#bfe6ea; line-height:1.75; }
.terminal-copy strong { color:var(--cyan); }
.close-button { position:absolute; top:.65rem; right:.65rem; border:0; font-size:1.3rem; padding:.35rem .6rem; }
.choice-list { display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem; }.choice-list button { text-align:left; line-height:1.4; padding:.8rem 1rem; }
.action-picker small, .interaction-modal small { display:block; margin-top:1.25rem; color:var(--muted); letter-spacing:.12em; }
.map-card { width:min(34rem,92vw); max-height:88vh; padding:1.8rem; }
.map-grid { display:grid; grid-template-columns:repeat(4,minmax(3.2rem,4.5rem)); grid-template-rows:repeat(10,minmax(2.1rem,2.7rem)); justify-content:center; gap:.35rem; margin:1.2rem auto; }
.map-cell { display:grid; place-items:center; border:1px solid rgba(158,239,255,.1); color:#44565a; font:.95rem 'IBM Plex Mono'; border-radius:2px; }
.map-cell.visited { color:var(--cyan); background:rgba(65,213,240,.06); border-color:var(--line); }
.map-cell.current { color:#021014; background:var(--cyan); box-shadow:0 0 24px rgba(66,216,244,.4); font-weight:bold; }

.inventory-card { width:min(52rem,94vw); }
.inventory-card ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; list-style:none; margin:1.5rem 0 0; padding:0; }
.inventory-card li { padding:1rem; border:1px solid var(--line); cursor:pointer; transition:.15s ease; background:rgba(0,5,8,.4); }
.inventory-card li:hover, .inventory-card li.selected-item { border-color:var(--cyan); background:rgba(66,216,244,.06); }
.inventory-card li small { display:block; color:var(--muted); font-size:.58rem; letter-spacing:.16em; }
.inventory-card li strong { display:block; margin:.3rem 0; color:var(--cyan); font-weight:500; letter-spacing:.06em; }
.inventory-card li p { margin:.25rem 0 0; color:#b8c8cb; font-size:.78rem; line-height:1.5; }

.item-inspect-box { margin-top:1.2rem; padding:1.2rem; border:1px solid var(--cyan-strong); background:rgba(3,15,20,.9); font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:#d8f4f8; line-height:1.6; }
.item-inspect-layout { display:grid; grid-template-columns:130px 1fr; gap:1.2rem; align-items:start; }
.item-inspect-image-wrap { width:130px; height:130px; border:1px solid rgba(66,216,244,.4); overflow:hidden; background:#01070a; box-shadow:0 0 16px rgba(66,216,244,.15); }
.item-inspect-image { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.item-inspect-image:hover { transform:scale(1.05); }
.item-inspect-info { display:flex; flex-direction:column; gap:.35rem; }
.item-category-badge { display:inline-block; font-size:.58rem; color:var(--cyan); letter-spacing:.15em; border-bottom:1px solid rgba(66,216,244,.3); padding-bottom:.2rem; width:fit-content; }
.item-inspect-box .inspect-actions { margin-top:.8rem; display:flex; gap:.6rem; }

.archive-card { width:min(52rem,94vw); }
.archive-list { display:flex; flex-direction:column; gap:.7rem; margin-top:1.5rem; }
.archive-list details { border:1px solid var(--line); background:rgba(0,6,8,.6); transition:border-color .2s ease; }
.archive-list details[open] { border-color:var(--cyan); background:rgba(2,12,18,.75); }
.archive-list summary { padding:1rem; color:var(--cyan); cursor:pointer; letter-spacing:.07em; font-weight:500; }
.archive-body { padding:0 1.2rem 1.2rem; }
.archive-dossier-wrap { display:flex; gap:1.2rem; align-items:center; margin-bottom:1rem; padding:.8rem 1rem; border:1px solid rgba(158,239,255,.15); background:rgba(1,8,11,.7); }
.archive-dossier-portrait { width:72px; height:72px; border-radius:4px; border:1px solid var(--cyan); object-fit:cover; box-shadow:0 0 12px rgba(66,216,244,.25); }
.archive-dossier-meta { display:flex; flex-direction:column; gap:.25rem; }
.dossier-badge { font-size:.6rem; color:var(--cyan); letter-spacing:.14em; font-family:'IBM Plex Mono',monospace; }
.dossier-author { color:#cad9dc; font-size:.72rem; font-family:'IBM Plex Mono',monospace; }

.pause-card, .settings-card { display:flex; flex-direction:column; gap:.75rem; width:min(29rem,92vw); }.settings-card label { margin-top:.5rem; color:var(--muted); font-size:.76rem; letter-spacing:.09em; }.segmented-control { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }.settings-card input { accent-color:var(--cyan-strong); }
.setting-toggle.active { color:#031013; background:var(--cyan); border-color:var(--cyan); }
.danger-action { color:#ff9da2; border-color:rgba(255,77,87,.55); }.danger-action:hover, .danger-action:focus-visible { color:white; background:#a51f29; border-color:#ff5e68; }
.confirmation-card { width:min(34rem,92vw); }.confirmation-card>p:not(.eyebrow) { color:#bdcacc; line-height:1.65; }.confirmation-actions { display:flex; justify-content:flex-end; gap:.65rem; margin-top:1.5rem; }
.play-screen { position:absolute; inset:0; width:100%; height:100%; min-height:100%; overflow:hidden; }
.play-screen.scan-mode-active { filter:drop-shadow(0 0 10px rgba(66,216,244,.3)); }
.viewport-layer { position:absolute; inset:0; overflow:hidden; z-index:1; }
.parallax-bg { position:absolute; inset:-4%; background-size:cover; background-position:center; transform:translate3d(calc(var(--mouse-px, 0) * -14px), calc(var(--mouse-py, 0) * -14px), 0) scale(1.05); transition:transform .1s cubic-bezier(0.2, 0, 0.2, 1); }

.hotspots-layer { position:absolute; inset:0; pointer-events:none; z-index:5; }
.hotspot-pin { position:absolute; transform:translate(-50%, -50%); pointer-events:auto; display:flex; align-items:center; cursor:pointer; background:transparent; border:none; padding:0; outline:none; transition:all .2s ease; }
.hotspot-bracket { width:2.2rem; height:2.2rem; display:grid; place-items:center; border:1px solid rgba(66,216,244,.4); background:rgba(2,12,16,.65); backdrop-filter:blur(4px); color:var(--cyan); font-family:'IBM Plex Mono',monospace; font-size:.78rem; transition:all .2s ease; box-shadow:0 0 12px rgba(66,216,244,.2); }
.hotspot-pin:hover .hotspot-bracket, .hotspot-pin:focus-visible .hotspot-bracket { border-color:#fff; background:var(--cyan); color:#020a0d; transform:scale(1.2) rotate(45deg); box-shadow:0 0 20px rgba(66,216,244,.8); }
.hotspot-pin:hover .hotspot-bracket span, .hotspot-pin:focus-visible .hotspot-bracket span { transform:rotate(-45deg); }
.hotspot-pin.hazard .hotspot-bracket { border-color:rgba(255,77,87,.6); color:var(--danger); }
.hotspot-pin.hazard:hover .hotspot-bracket { background:var(--danger); border-color:#fff; color:#fff; }

.hotspot-tooltip { position:absolute; left:calc(100% + .7rem); white-space:nowrap; padding:.3rem .6rem; background:rgba(2,9,12,.9); border:1px solid var(--line); border-left:3px solid var(--cyan); color:#d8f4f8; font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.1em; pointer-events:none; opacity:0; transform:translateX(-6px); transition:all .2s ease; }
.hotspot-pin:hover .hotspot-tooltip, .hotspot-pin:focus-visible .hotspot-tooltip { opacity:1; transform:translateX(0); }
.hotspot-tooltip small { display:block; color:var(--muted); font-size:.55rem; margin-top:.15rem; }

.lidar-overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(3,25,20,.15), rgba(3,25,20,.35)), repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(66,216,244,.06) 3px, rgba(66,216,244,.06) 4px); z-index:4; mix-blend-mode:screen; animation:lidar-fade .3s ease; }
.lidar-sweep-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, transparent, rgba(66,216,244,.8), transparent); box-shadow:0 0 16px var(--cyan); animation:lidar-sweep 3.5s linear infinite; }
@keyframes lidar-sweep { 0% { top:0%; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { top:100%; opacity:0; } }
@keyframes lidar-fade { from { opacity:0; } to { opacity:1; } }

.lidar-tag { position:absolute; transform:translate(-50%, -150%); padding:.25rem .5rem; background:rgba(0,18,14,.88); border:1px solid #3de3bb; color:#3de3bb; font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.08em; pointer-events:none; box-shadow:0 0 12px rgba(61,227,187,.3); }

.breaker-switchboard { width:min(38rem,94vw); }
.breaker-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.5rem 0; }
.breaker-card { border:1px solid var(--line); padding:1.2rem; background:rgba(2,10,14,.75); text-align:center; transition:.2s ease; cursor:pointer; }
.breaker-card:hover { border-color:var(--cyan); background:rgba(66,216,244,.08); }
.breaker-card.active { border-color:var(--cyan); background:rgba(66,216,244,.15); box-shadow:0 0 20px rgba(66,216,244,.3); }
.breaker-lever { width:3.5rem; height:6.5rem; margin:1rem auto; border:2px solid #526f74; background:#041014; border-radius:4px; position:relative; }
.breaker-lever-handle { width:100%; height:45%; background:var(--cyan); position:absolute; top:0; transition:all .25s cubic-bezier(0.18, 0.89, 0.32, 1.28); box-shadow:0 0 10px rgba(66,216,244,.5); }
.breaker-card:hover .breaker-lever-handle { background:#fff; }
.breaker-lever.down .breaker-lever-handle { top:55%; background:#ff4d57; box-shadow:0 0 10px rgba(255,77,87,.5); }
.breaker-meter { font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--cyan); margin-top:.6rem; }

.dust-layer { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(1px 1px at 20px 30px, #ffffff33, rgba(0,0,0,0)), radial-gradient(1px 1px at 40px 70px, #42d8f433, rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 90px 40px, #ffffff22, rgba(0,0,0,0)); background-repeat:repeat; background-size:120px 120px; animation:dust-float 20s linear infinite; z-index:3; opacity:.4; }
@keyframes dust-float { 0% { transform:translateY(0); } 100% { transform:translateY(-120px); } }

.rain-layer { position:absolute; inset:0; pointer-events:none; z-index:3; background:repeating-linear-gradient(105deg, transparent, transparent 18px, rgba(200,245,255,.07) 19px, rgba(200,245,255,.07) 20px); animation:rain-fall .35s linear infinite; }
@keyframes rain-fall { from { background-position:0 0; } to { background-position:-30px 120px; } }

.vapor-layer { position:absolute; inset:0; pointer-events:none; z-index:3; background:radial-gradient(ellipse at 50% 100%, rgba(200,245,255,.22), transparent 70%), radial-gradient(ellipse at 20% 80%, rgba(66,216,244,.12), transparent 50%); filter:blur(16px); animation:vapor-roll 8s ease-in-out infinite alternate; opacity:.85; }
@keyframes vapor-roll { 0% { transform:scaleY(0.9) translateY(10px); } 100% { transform:scaleY(1.1) translateY(-15px); } }

.spark-layer { position:absolute; inset:0; pointer-events:none; z-index:3; background:radial-gradient(circle at 50% 35%, rgba(130,220,255,.35), transparent 45%); animation:spark-pulse .15s steps(2,end) infinite alternate; }
@keyframes spark-pulse { 0% { opacity:0.1; } 50% { opacity:0.8; } 100% { opacity:0.3; } }

.data-stream-layer { position:absolute; inset:0; pointer-events:none; z-index:3; background:repeating-linear-gradient(180deg, transparent, transparent 24px, rgba(66,216,244,.05) 25px, rgba(66,216,244,.05) 26px); animation:matrix-stream 1.8s linear infinite; }
@keyframes matrix-stream { from { background-position:0 0; } to { background-position:0 100px; } }

.puzzle-card { width:min(44rem,92vw); padding:1.8rem; }
.waveform-display { width:100%; height:130px; background:#01070a; border:1px solid var(--line); margin:1.2rem 0; border-radius:4px; position:relative; overflow:hidden; }
.waveform-display svg { width:100%; height:100%; }
.puzzle-controls { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1rem 0; }
.puzzle-control { display:flex; flex-direction:column; gap:.4rem; font-family:'IBM Plex Mono',monospace; font-size:.72rem; }
.puzzle-control label { color:var(--cyan); }
.puzzle-control input[type=range] { width:100%; accent-color:var(--cyan-strong); }
.puzzle-status { font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-align:center; padding:.6rem; border:1px dashed var(--line); margin-top:.8rem; }
.puzzle-status.locked { color:#3de3bb; border-color:#3de3bb; background:rgba(61,227,187,.1); box-shadow:0 0 16px rgba(61,227,187,.3); font-weight:bold; }

.codex-card { width:min(52rem,94vw); max-height:86vh; padding:1.8rem; }
.achievements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.75rem; margin-top:1.2rem; }
.achievement-item { border:1px solid rgba(158,239,255,.15); padding:.9rem; background:rgba(1,8,11,.6); display:flex; gap:.8rem; align-items:flex-start; }
.achievement-item.unlocked { border-color:var(--cyan); background:rgba(66,216,244,.08); box-shadow:0 0 14px rgba(66,216,244,.2); }
.achievement-icon { font-size:1.4rem; color:#4a6266; }
.achievement-item.unlocked .achievement-icon { color:var(--cyan); filter:drop-shadow(0 0 8px var(--cyan)); }
.achievement-info strong { display:block; font-size:.72rem; color:var(--cyan); margin-bottom:.2rem; font-family:'IBM Plex Mono',monospace; }
.achievement-info p { margin:0; font-size:.65rem; color:#9cb1b5; line-height:1.4; }
.codex-tabs { display:flex; gap:.5rem; margin-top:1rem; border-bottom:1px solid var(--line); padding-bottom:.5rem; }
.codex-tab { border:none; padding:.4rem .8rem; font-size:.72rem; }
.codex-tab.active { background:var(--cyan); color:#020b0e; font-weight:bold; }

@media(max-width:720px) { .title-card { left:1.5rem;top:8vh; }.title-card h1 { font-size:2.7rem;letter-spacing:.12em; }.title-menu { left:1.5rem;bottom:5rem; }.room-panel { left:0;bottom:5.4rem;width:100%;padding:1.2rem;background:rgba(2,8,11,.82); }.movement-pad { right:1rem;bottom:15rem; }.command-bar { overflow-x:auto;justify-content:flex-start; }.command-bar button { white-space:nowrap; }.map-grid { grid-template-columns:repeat(4,2.8rem);grid-template-rows:repeat(10,1.9rem);overflow:auto; }.briefing-card { left:1rem;width:calc(100vw - 2rem);padding:1.4rem; }.briefing-card dl { grid-template-columns:1fr; }.briefing-card dd { margin-bottom:.5rem; } }
@media(max-width:720px) { .inventory-card ul { grid-template-columns:1fr; } .breaker-grid { grid-template-columns:1fr; } .puzzle-controls { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }