/* RKS LAB 001 — THE WATER IS LISTENING
 * Fixed 1920x1080 stage, scaled to fit by main.js. Deep-sea industrial console. */

:root {
  --bg: #040607;
  --steel-1: #0d1519;
  --steel-2: #080e11;
  --edge: #1c2a30;
  --edge-hi: #2a3c44;
  --phos: #7ef7df;
  --phos-rgb: 126, 247, 223;
  --ice: #e6fffb;
  --text: #9cc9c3;
  --dim: #4f6f6d;
  --red: #ff4637;
  --red-rgb: 255, 70, 55;
  --mono: "Consolas", "Cascadia Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
  --disp: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--mono); color: var(--text); -webkit-font-smoothing: antialiased; user-select: none; }
button { font-family: inherit; }

#viewport { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(120, 190, 210, 0.07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #070b0d, #030506);
}

.screen { position: absolute; inset: 0; display: none; z-index: 1; }
.screen.active { display: block; }

#title-bg {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  opacity: 0; transition: opacity 0.8s; z-index: 0;
}
#title-bg.on { opacity: 1; }

/* ---------------------------------------------------------------- global fx */
#fx-grain {
  position: absolute; inset: -50px; pointer-events: none; z-index: 100; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.5s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-18px, 12px); }
  50% { transform: translate(14px, -20px); } 75% { transform: translate(-8px, -6px); } 100% { transform: translate(0, 0); }
}
#fx-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 99;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
}

/* ------------------------------------------------------------------ splash */
#scr-splash { background: #000; display: none; align-items: center; justify-content: center; }
#scr-splash.active { display: flex; }
.splash-inner { text-align: center; opacity: 0; transition: opacity 1.2s ease; color: var(--ice); }
#scr-splash.in .splash-inner { opacity: 1; }
#scr-splash.out .splash-inner { opacity: 0; transition-duration: 0.9s; }
.crown { width: 120px; height: 70px; color: var(--phos); filter: drop-shadow(0 0 12px rgba(var(--phos-rgb), 0.45)); }
.splash-inner .studio { font-family: var(--disp); font-size: 44px; letter-spacing: 0.42em; margin: 28px 0 14px 0.42em; font-weight: 300; }
.splash-inner .lab { font-size: 15px; letter-spacing: 0.5em; color: var(--dim); }

/* ------------------------------------------------------------------- title */
.title-studio { position: absolute; left: 150px; top: 120px; font-size: 15px; letter-spacing: 0.5em; color: var(--dim); }
.title-block { position: absolute; left: 150px; top: 250px; }
.title-tag { font-size: 16px; letter-spacing: 0.55em; color: var(--red); margin-bottom: 26px; }
.title-main {
  margin: 0; font-family: var(--disp); font-weight: 300; font-size: 118px; line-height: 0.98;
  letter-spacing: 0.05em; color: var(--ice);
  text-shadow: 0 0 30px rgba(var(--phos-rgb), 0.25), 0 0 2px rgba(var(--phos-rgb), 0.6);
}
.title-sub { margin: 30px 0 70px; font-size: 17px; letter-spacing: 0.08em; color: var(--text); max-width: 640px; }
.menu button {
  display: block; background: none; border: 0; padding: 12px 0 12px 30px; cursor: pointer;
  font-size: 21px; letter-spacing: 0.32em; color: var(--dim); text-align: left; position: relative;
  transition: color 0.15s;
}
.menu button::before { content: '▸'; position: absolute; left: 0; opacity: 0; color: var(--phos); transition: opacity 0.15s; }
.menu button.sel, .menu button:hover { color: var(--ice); }
.menu button.sel::before, .menu button:hover::before { opacity: 1; }
.menu button[hidden] { display: none; }
.title-touch { margin-top: 30px; font-size: 16px; letter-spacing: 0.2em; color: var(--red); }
.title-touch[hidden] { display: none; }
.menu.row { display: flex; gap: 60px; }
.title-foot-l { position: absolute; left: 150px; bottom: 70px; font-size: 15px; letter-spacing: 0.22em; color: var(--dim); }
.title-foot-r { position: absolute; right: 120px; bottom: 70px; font-size: 15px; letter-spacing: 0.2em; color: var(--dim); }
.title-foot-r span { margin-left: 18px; }
.title-foot-r span.got, #end-found span.got { color: var(--phos); }
.title-copy { position: absolute; right: 120px; top: 120px; font-size: 14px; letter-spacing: 0.3em; color: var(--dim); }

/* ------------------------------------------------------------------- intro */
#scr-intro { background: #000; }
#intro-text { position: absolute; left: 280px; top: 290px; width: 1360px; font-size: 25px; line-height: 2.05; letter-spacing: 0.06em; color: var(--text); }
#intro-text .il.hd { color: var(--ice); font-size: 30px; letter-spacing: 0.25em; margin-bottom: 18px; }
#intro-text .il.em { color: var(--ice); margin-top: 26px; }
#intro-text .il.warn { color: var(--red); }
#intro-skip { position: absolute; left: 0; right: 0; bottom: 110px; text-align: center; font-size: 20px; letter-spacing: 0.4em; color: var(--phos); opacity: 0; }
#intro-skip.on { opacity: 1; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* -------------------------------------------------------------------- game */
#game-body { position: absolute; inset: 0; }
#game-body::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 50% 35% at 50% -5%, rgba(150, 215, 235, 0.09), transparent 70%);
}
#cables { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 0; }
.cable path { fill: none; stroke: #0a1114; stroke-width: 15; stroke-linecap: round; filter: drop-shadow(-1px -1px 0 rgba(120, 175, 175, 0.16)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)); }
.cable.thin path { stroke-width: 7; stroke: #0c1417; }
.cable.red path { stroke: #2c0b09; stroke-width: 9; }

.panel {
  position: absolute; z-index: 1;
  background: linear-gradient(180deg, var(--steel-1) 0%, var(--steel-2) 100%);
  border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(160, 220, 220, 0.06), inset 0 0 30px rgba(0, 0, 0, 0.6), 0 10px 26px rgba(0, 0, 0, 0.65);
}
.panel::before, .panel::after {
  content: ''; position: absolute; top: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4f6167, #0e1518 70%);
}
.panel::before { left: 7px; }
.panel::after { right: 7px; }
.ph {
  font-size: 13px; letter-spacing: 0.2em; color: var(--dim); padding: 10px 22px 9px;
  border-bottom: 1px solid rgba(var(--phos-rgb), 0.08);
}
.ph .note { float: right; font-size: 11px; letter-spacing: 0.12em; opacity: 0.7; }
.ph .rec, .clock .rec { color: var(--red); animation: blink 2s infinite; }

#hud-top { left: 30px; top: 16px; width: 1860px; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.brand { display: flex; align-items: center; gap: 14px; font-size: 14px; letter-spacing: 0.2em; color: var(--dim); }
.brand .rks { font-family: var(--disp); color: var(--bg); background: var(--phos); padding: 3px 8px; letter-spacing: 0.12em; font-weight: 600; border-radius: 2px; }
.objective { display: flex; align-items: center; gap: 16px; font-size: 18px; letter-spacing: 0.14em; color: var(--phos); }
.objective .lbl { font-size: 12px; color: var(--dim); letter-spacing: 0.3em; border: 1px solid var(--edge-hi); padding: 3px 8px; }
.clock { display: flex; align-items: center; gap: 18px; font-size: 17px; letter-spacing: 0.15em; color: var(--text); }
.lamp { width: 13px; height: 13px; border-radius: 50%; background: #3a0e0b; box-shadow: inset 0 0 3px #000; }
.lamp.on { background: var(--red); box-shadow: 0 0 12px rgba(var(--red-rgb), 0.9), 0 0 30px rgba(var(--red-rgb), 0.5); animation: blink 0.9s infinite; }

#col-left { position: absolute; left: 30px; top: 86px; width: 380px; height: 928px; z-index: 1; }
#col-left .panel, #col-right .panel { position: absolute; left: 0; width: 100%; }
#p-status { top: 0; height: 574px; }
#p-archive { top: 586px; height: 342px; }
#p-status .row { padding: 10px 22px 8px; border-bottom: 1px solid rgba(var(--phos-rgb), 0.04); }
#p-status .row .k { display: block; font-size: 13px; letter-spacing: 0.22em; color: var(--dim); margin-bottom: 6px; }
#p-status .row .v { display: block; font-size: 21px; color: var(--ice); letter-spacing: 0.08em; }
#p-status .row .v.small { font-size: 16px; color: var(--phos); }
#p-status .row.big .v { font-family: var(--disp); font-size: 44px; font-weight: 300; letter-spacing: 0.06em; text-shadow: 0 0 14px rgba(var(--phos-rgb), 0.25); }
#p-status .row.two { display: flex; }
#p-status .row.two > div { flex: 1; }
.bar { height: 9px; background: rgba(var(--phos-rgb), 0.06); border: 1px solid rgba(var(--phos-rgb), 0.16); }
.bar i { display: block; height: 100%; width: 0; background: var(--phos); box-shadow: 0 0 8px rgba(var(--phos-rgb), 0.5); transition: width 0.08s linear; }
.bar.noise.hot i { background: var(--red); box-shadow: 0 0 10px rgba(var(--red-rgb), 0.7); }
.hull { display: flex; gap: 8px; }
.hull i { width: 104px; height: 14px; background: var(--phos); box-shadow: 0 0 8px rgba(var(--phos-rgb), 0.45); }
.hull i.lost { background: #2a0907; border: 1px solid var(--red); box-shadow: 0 0 10px rgba(var(--red-rgb), 0.4); }

#archive { list-style: none; margin: 0; padding: 8px 12px; }
#archive button {
  width: 100%; display: flex; gap: 14px; align-items: baseline; text-align: left; background: none;
  border: 1px solid transparent; padding: 8px 10px; cursor: default; color: var(--dim); font-size: 15px;
}
#archive button .c { color: var(--dim); font-size: 12px; letter-spacing: 0.12em; min-width: 100px; }
#archive button .t { letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#archive button.got { cursor: pointer; color: var(--text); }
#archive button.got .c { color: var(--phos); }
#archive button.got:hover { border-color: rgba(var(--phos-rgb), 0.3); background: rgba(var(--phos-rgb), 0.04); color: var(--ice); }

#col-center { position: absolute; left: 432px; top: 86px; width: 884px; height: 928px; z-index: 1; }
#crt-wrap {
  position: relative; width: 880px; height: 876px; margin-left: 2px; border-radius: 22px;
  background: linear-gradient(145deg, #1b262a, #0a0f12 55%, #141c20);
  box-shadow: inset 0 0 0 2px #243238, inset 0 0 40px rgba(0, 0, 0, 0.8), 0 22px 50px rgba(0, 0, 0, 0.75);
}
#crt, #drops, .crt-glass { position: absolute; left: 10px; top: 8px; width: 860px; height: 860px; border-radius: 16px; }
#crt { animation: crtflick 5s infinite; }
#drops { pointer-events: none; }
.crt-glass {
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 26% 16%, rgba(220, 255, 250, 0.07), transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9);
}
@keyframes crtflick { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: 0.94; } 49% { opacity: 1; } 83% { opacity: 0.97; } 84% { opacity: 1; } }
.screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #56676d, #0d1417 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); }
.screw::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: rgba(0, 0, 0, 0.6); transform: rotate(35deg); }
.screw.tl { left: 14px; top: 14px; } .screw.tr { right: 14px; top: 14px; } .screw.bl { left: 14px; bottom: 14px; } .screw.br { right: 14px; bottom: 14px; }

#console-row { position: absolute; left: 2px; top: 884px; width: 880px; height: 44px; display: flex; gap: 12px; }
#prompt { position: relative; flex: 1; display: flex; align-items: center; padding: 0 24px; font-size: 18px; letter-spacing: 0.12em; color: var(--dim); overflow: hidden; }
#prompt.active { color: var(--text); }
#prompt.actionable { color: var(--ice); border-color: rgba(var(--phos-rgb), 0.55); box-shadow: 0 0 18px rgba(var(--phos-rgb), 0.12), inset 0 0 20px rgba(var(--phos-rgb), 0.05); }
#prompt-text { white-space: nowrap; }
#dl { display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(var(--phos-rgb), 0.1); }
#dl i { display: block; height: 100%; width: 0; background: var(--phos); box-shadow: 0 0 8px var(--phos); }
.ping-btn {
  width: 160px; border-radius: 6px; cursor: pointer; font-size: 17px; letter-spacing: 0.4em; padding-left: 0.4em;
  color: var(--dim); background: linear-gradient(180deg, #111a1e, #0a1013); border: 1px solid var(--edge);
}
.ping-btn.ready { color: var(--phos); border-color: rgba(var(--phos-rgb), 0.45); box-shadow: 0 0 14px rgba(var(--phos-rgb), 0.15); }
.ping-btn.hint { animation: pinghint 0.8s 4; }
@keyframes pinghint { 50% { box-shadow: 0 0 30px rgba(var(--phos-rgb), 0.7); color: var(--ice); } }

#col-right { position: absolute; left: 1338px; top: 86px; width: 552px; height: 928px; z-index: 1; }
#p-chart { top: 0; height: 404px; }
#chart { display: block; margin: 12px auto 0; width: 480px; height: 352px; }
#p-cam { top: 416px; height: 246px; }
.cam-wrap { position: relative; margin: 10px auto 0; width: 520px; height: 192px; border: 1px solid #0f1a1d; background: #000; }
#cam { display: block; width: 520px; height: 192px; image-rendering: pixelated; }
#cam-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 15px; letter-spacing: 0.4em; pointer-events: none; }
#p-term { top: 674px; height: 254px; }
#term { position: absolute; left: 0; right: 0; top: 38px; bottom: 8px; overflow: hidden; padding: 6px 18px; font-size: 16px; line-height: 1.45; }
#term .ln { margin-bottom: 2px; }
#term .ts { color: var(--dim); margin-right: 10px; font-size: 13px; }
#term .tx { color: var(--text); letter-spacing: 0.03em; }
#term .ln.sys .tx { color: #6f9893; }
#term .ln.info .tx { color: var(--ice); }
#term .ln.hint .tx { color: #9fd6ff; }
#term .ln.warn .tx { color: var(--red); }
#term .ln.rx .tx { color: var(--red); letter-spacing: 0.12em; animation: rx 0.15s steps(2) 12; }
@keyframes rx { 50% { opacity: 0.4; margin-left: 3px; } }

#hud-bottom { position: absolute; left: 30px; top: 1030px; width: 1860px; height: 34px; display: flex; align-items: center; gap: 34px; padding: 0 12px; font-size: 14px; letter-spacing: 0.14em; color: var(--dim); z-index: 1; }
#hud-bottom b { color: var(--phos); border: 1px solid rgba(var(--phos-rgb), 0.3); padding: 2px 7px; border-radius: 3px; margin-right: 8px; font-weight: normal; }
#hud-bottom .studio { margin-left: auto; letter-spacing: 0.3em; }

/* tension: red cabin light creeping in from the edges */
#fx-alert {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(var(--red-rgb), 0.32) 100%);
  opacity: var(--alert, 0); transition: opacity 0.4s;
  animation: alertpulse 2.4s ease-in-out infinite;
}
@keyframes alertpulse { 50% { filter: brightness(0.6); } }
#fx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 30; background: #dffdf8; opacity: 0; mix-blend-mode: screen; }
#fx-fade { position: absolute; inset: 0; pointer-events: none; z-index: 40; background: #000; opacity: 0; }

/* GO DARK: everything but the scope goes out */
#scr-game.dark #hud-top, #scr-game.dark #col-left, #scr-game.dark #col-right,
#scr-game.dark #hud-bottom, #scr-game.dark #console-row { filter: brightness(0.28) saturate(0.4); transition: filter 1.6s; }
#scr-game.dark #crt-wrap { filter: brightness(0.85); transition: filter 1.6s; }
#scr-game.dark #game-body::before { opacity: 0; }
#hud-top, #col-left, #col-right, #hud-bottom, #console-row, #crt-wrap { transition: filter 0.6s; }

/* ------------------------------------------------------------------ modals */
.modal {
  position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: rgba(0, 6, 8, 0.74);
}
.modal.open { display: flex; }
.modal-card {
  position: relative; width: 880px; padding: 46px 60px 40px;
  background: linear-gradient(180deg, #0e171b, #070c0f); border: 1px solid var(--edge-hi); border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 0, 0, 0.6);
}
.modal-card h2 { margin: 0 0 26px; font-family: var(--disp); font-weight: 300; font-size: 40px; letter-spacing: 0.14em; color: var(--ice); }
.modal-card.log { border-left: 3px solid var(--phos); }
.modal.record .modal-card.log { border-left-color: var(--red); }
.log-head { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: 0.3em; color: var(--phos); margin-bottom: 18px; }
.modal.record .log-head { color: var(--red); }
.log-head #log-stamp { color: var(--dim); }
#log-title { font-size: 30px; margin-bottom: 8px; }
#log-src { font-size: 14px; letter-spacing: 0.2em; color: var(--dim); margin-bottom: 30px; }
#log-body p { margin: 0 0 18px; font-size: 20px; line-height: 1.65; color: var(--text); }
#log-body p:last-child { color: var(--ice); }
.modal-actions { margin-top: 30px; text-align: right; }
.modal-actions button, .ping-btn { font-family: var(--mono); }
#log-close { background: none; border: 1px solid rgba(var(--phos-rgb), 0.4); color: var(--phos); padding: 10px 22px; letter-spacing: 0.25em; cursor: pointer; font-size: 14px; }
#log-close b { font-weight: normal; color: var(--ice); }
.vol { display: block; margin: 30px 0 18px; font-size: 13px; letter-spacing: 0.3em; color: var(--dim); }
.vol input { width: 300px; vertical-align: middle; margin-left: 16px; accent-color: var(--phos); }
.controls-list { font-size: 15px; line-height: 1.9; color: var(--dim); border-top: 1px solid var(--edge); padding-top: 16px; }
.controls-list b { color: var(--phos); font-weight: normal; display: inline-block; min-width: 190px; }
.modal-card.lost { border-left: 3px solid var(--red); }
.modal-card.lost h2 { color: var(--red); }
.modal-card.lost p { font-size: 17px; line-height: 1.6; margin: 0 0 30px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ ending */
#scr-ending { background: rgba(0, 0, 0, 0.55); }
.end-wrap { position: absolute; left: 50%; top: 130px; width: 1120px; transform: translateX(-50%); }
.end-top { font-size: 14px; letter-spacing: 0.4em; color: var(--dim); margin-bottom: 70px; }
#end-num { font-size: 16px; letter-spacing: 0.5em; color: var(--red); }
#end-name { margin: 10px 0 8px; font-family: var(--disp); font-weight: 300; font-size: 104px; letter-spacing: 0.12em; color: var(--ice); text-shadow: 0 0 30px rgba(var(--phos-rgb), 0.25); }
#end-tag { font-size: 16px; letter-spacing: 0.3em; color: var(--phos); margin-bottom: 44px; }
#end-body p { margin: 0 0 16px; font-size: 20px; line-height: 1.65; color: var(--text); max-width: 1000px; opacity: 0; }
#end-stats { margin-top: 34px; font-size: 16px; letter-spacing: 0.2em; color: var(--dim); }
#end-found { margin-top: 12px; font-size: 16px; letter-spacing: 0.2em; color: var(--dim); }
#end-found span { margin-left: 16px; }
#end-hint { margin-top: 12px; font-size: 16px; letter-spacing: 0.08em; color: #9fd6ff; font-style: italic; }
#end-menu { margin-top: 36px; }
.late { opacity: 0; }

/* ----------------------------------------------------------------- credits */
#scr-credits { background: rgba(0, 0, 0, 0.6); overflow: hidden; }
#credits-roll { position: absolute; left: 50%; top: 0; width: 1100px; text-align: center; }
#credits-roll > div { margin-bottom: 26px; font-size: 18px; letter-spacing: 0.2em; color: var(--text); }
#credits-roll .big { font-family: var(--disp); font-weight: 300; font-size: 72px; letter-spacing: 0.1em; color: var(--ice); margin-bottom: 10px; }
#credits-roll .tag { color: var(--red); letter-spacing: 0.5em; font-size: 15px; }
#credits-roll .hd { color: var(--phos); letter-spacing: 0.35em; font-size: 20px; }
#credits-roll .pair .h { display: block; font-size: 12px; letter-spacing: 0.35em; color: var(--dim); margin-bottom: 6px; }
#credits-roll .small { font-size: 13px; color: var(--dim); }
#credits-roll .gap { height: 90px; }
.credits-skip { position: absolute; right: 60px; bottom: 50px; font-size: 15px; letter-spacing: 0.3em; color: var(--dim); }