:root{--abyss-bg:#02060c;--panel:#081422c7;--panel-border:#38bdf847;--neon:#38bdf8;--neon-soft:#7dd3fc;--text:#dbeafe;--text-dim:#7c96b5;--danger:#f87171;--ok:#4ade80;--font-title:"Orbitron", sans-serif;--font-ui:"Rajdhani", sans-serif;--win-r:31vmin;--win-x:50%;--win-y:44%;--metal-dark:#070b10;--metal-mid:#10161d;--metal-edge:#5a82aa59}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--abyss-bg);width:100%;height:100%;color:var(--text);font-family:var(--font-ui);overflow:hidden}#game-canvas{touch-action:none;background:radial-gradient(at 50% 20%,#0a2740 0%,#04101f 55%,#02060c 100%);width:100%;height:100%;display:block;position:fixed;inset:0}#ui-root{pointer-events:none;z-index:10;position:fixed;inset:0}.screen{justify-content:center;align-items:center;padding:1rem;display:flex;position:absolute;inset:0}.screen.hidden{display:none}.card{pointer-events:auto;background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:1.6rem 1.8rem;box-shadow:0 0 40px #38bdf814,0 20px 60px #0000008c}.menu-card{text-align:center;width:min(560px,94vw);max-height:92vh;overflow:hidden auto}.title{font-family:var(--font-title);letter-spacing:.22em;color:var(--neon-soft);text-shadow:0 0 18px #38bdf88c,0 0 60px #38bdf840;padding-left:.22em;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:900}.subtitle{color:var(--text-dim);letter-spacing:.12em;margin-top:.4rem;font-size:1.05rem}.config-group{text-align:left;margin-top:1.15rem}.config-group h3{font-family:var(--font-title);letter-spacing:.22em;text-transform:uppercase;color:var(--neon);margin-bottom:.5rem;font-size:.72rem;font-weight:700}.chip-row{flex-wrap:wrap;gap:.45rem;display:flex}.chip{pointer-events:auto;font-family:var(--font-ui);letter-spacing:.06em;color:var(--text);cursor:pointer;background:#0c1e3299;border:1px solid #7c96b559;border-radius:999px;padding:.38rem .95rem;font-size:.95rem;font-weight:600;transition:all .15s}.chip:hover:not(:disabled){border-color:var(--neon);color:var(--neon-soft)}.chip.selected{border-color:var(--neon);color:var(--neon-soft);background:#38bdf829;box-shadow:0 0 12px #38bdf859}.chip:disabled{opacity:.35;cursor:not-allowed}.mode-desc{min-height:2.2em;color:var(--text-dim);margin-top:.5rem;font-size:.92rem;line-height:1.25}.volume-group input[type=range]{width:100%;accent-color:var(--neon);cursor:pointer}.menu-actions{flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.4rem;display:flex}.btn{pointer-events:auto;font-family:var(--font-title);letter-spacing:.14em;cursor:pointer;border-radius:10px;padding:.75rem 1.4rem;font-size:.85rem;font-weight:700;transition:all .15s}.btn.primary{border:1px solid var(--neon);color:#e8f7ff;text-shadow:0 0 10px #38bdf8b3;background:linear-gradient(#38bdf847,#38bdf81f)}.btn.primary:hover{transform:translateY(-1px);box-shadow:0 0 22px #38bdf873}.btn.secondary{color:var(--text-dim);background:0 0;border:1px solid #7c96b580}.btn.secondary:hover{border-color:var(--neon);color:var(--neon-soft)}.credit{letter-spacing:.08em;color:#7c96b5a6;margin-top:1.3rem;font-size:.78rem}.toast{background:var(--panel);border:1px solid var(--panel-border);letter-spacing:.06em;opacity:0;pointer-events:none;border-radius:10px;padding:.6rem 1.2rem;font-size:.95rem;transition:all .25s;position:absolute;bottom:8%;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.debug-panel{pointer-events:auto;z-index:30;background:#0009;border:1px dashed #7c96b580;border-radius:8px;flex-direction:column;gap:6px;padding:8px;font-size:.8rem;display:flex;position:absolute;top:10px;right:10px}.debug-panel.hidden{display:none}.debug-panel button{pointer-events:auto;cursor:pointer;font-family:var(--font-ui);color:var(--text);border:1px solid var(--panel-border);background:#10263d;border-radius:6px;padding:4px 8px}#hud{padding:0;display:block}#hud.hidden{display:none}.cockpit-frame{pointer-events:none;z-index:2;background:linear-gradient(#05090e 0 2.2vh,#101923 2.4vh 3.6vh,#0000 5.4vh),linear-gradient(0deg,#04070b 0 3.2vh,#111a24 3.4vh 4.5vh,#0000 6vh),linear-gradient(90deg,#05090e 0 1.1vw,#14202b 1.3vw 2vw,#0000 3.2vw),linear-gradient(270deg,#05090e 0 1.1vw,#14202b 1.3vw 2vw,#0000 3.2vw);position:absolute;inset:0}.cockpit-frame:before{content:"";width:calc(var(--win-r) * 2);height:calc(var(--win-r) * 2);left:var(--win-x);top:var(--win-y);background:0 0;border:clamp(12px,2.1vmin,22px) solid #0a1119;border-radius:50%;outline:2px solid #5ba6dc85;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #18242f,0 0 0 7px #3b82b46b,inset 0 0 18px #50afeb3d,0 0 30px #000000bf}.dome-ribs{z-index:2;pointer-events:none;-webkit-mask:radial-gradient(circle var(--win-r) at var(--win-x) var(--win-y), transparent 0 97%, #000 100%);-webkit-mask:radial-gradient(circle var(--win-r) at var(--win-x) var(--win-y), transparent 0 97%, #000 100%);mask:radial-gradient(circle var(--win-r) at var(--win-x) var(--win-y), transparent 0 97%, #000 100%);position:absolute;inset:0}.dome-ribs i{left:var(--win-x);top:var(--win-y);transform-origin:0;background:linear-gradient(#5eb0e8ad 0 2px,#1b2732 3px 35%,#060b10 45% 70%,#4897cf8f 82% 100%);border-radius:4px;width:72vmax;height:clamp(13px,1.65vmin,19px);position:absolute;box-shadow:0 2px 10px #000000d9,0 0 7px #38bdf82e}.dome-ribs i:first-child{transform:translateY(-50%)rotate(30deg)}.dome-ribs i:nth-child(2){transform:translateY(-50%)rotate(90deg)}.dome-ribs i:nth-child(3){transform:translateY(-50%)rotate(150deg)}.dome-ribs i:nth-child(4){transform:translateY(-50%)rotate(210deg)}.dome-ribs i:nth-child(5){transform:translateY(-50%)rotate(270deg)}.dome-ribs i:nth-child(6){transform:translateY(-50%)rotate(330deg)}.overhead-cluster{z-index:4;color:#6f8da8;pointer-events:none;background:linear-gradient(#111a24,#05090e);border:1px solid #5ba6dc57;border-radius:0 0 14px 14px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:clamp(170px,22vw,310px);min-height:38px;padding:5px 12px 6px;display:grid;position:absolute;top:1.2vh;left:50%;transform:translate(-50%);box-shadow:0 5px 18px #000000b8,inset 0 -1px #38bdf829}.overhead-label{font:600 .46rem/1 var(--font-title);letter-spacing:.12em}.overhead-lamps,.overhead-switches{justify-content:center;align-items:center;gap:8px;display:flex}.overhead-lamps b{background:#24303b;border-radius:50%;width:7px;height:7px;box-shadow:inset 0 0 3px #000}.overhead-lamps b:first-child,.overhead-lamps b:nth-child(4){background:#4ade80;box-shadow:0 0 8px #4ade80bf}.overhead-lamps b:nth-child(3){background:#fbbf24;box-shadow:0 0 8px #fbbf24b8}.overhead-switches i{background:linear-gradient(90deg,#546575,#17212b);border-radius:2px;width:3px;height:13px;transform:rotate(18deg);box-shadow:0 0 0 2px #020406}.frame-light{pointer-events:none;filter:blur(2px);background:radial-gradient(at 50% 100%,#ebf8ffd9,#aad7ff38 45%,#0000 72%);width:8vmin;height:4vmin;position:absolute}.frame-light.tl{left:calc(var(--win-x) - var(--win-r) * .72);top:calc(var(--win-y) - var(--win-r) * 1.02);transform:rotate(24deg)}.frame-light.tr{right:calc(100% - var(--win-x) - var(--win-r) * .72);top:calc(var(--win-y) - var(--win-r) * 1.02);transform:rotate(-24deg)}.frame-dot{border-radius:50%;width:8px;height:8px;position:absolute}.frame-dot.red{background:#b33;box-shadow:0 0 9px #f87171cc}.frame-dot.green{background:#3a5;box-shadow:0 0 9px #4ade80b3}.frame-dot.amber{background:#b83;box-shadow:0 0 9px #fbbf24b3}.frame-dot.d1{left:calc(var(--win-x) - var(--win-r) * 1.06);top:calc(var(--win-y) - var(--win-r) * .5)}.frame-dot.d2{left:calc(var(--win-x) - var(--win-r) * 1.1);top:calc(var(--win-y) + var(--win-r) * .2)}.frame-dot.d3{left:calc(var(--win-x) + var(--win-r) * 1.06);top:calc(var(--win-y) - var(--win-r) * .5)}.frame-dot.d4{left:calc(var(--win-x) + var(--win-r) * 1.1);top:calc(var(--win-y) + var(--win-r) * .2)}.glass-fx{pointer-events:none;background:radial-gradient(circle var(--win-r) at var(--win-x) var(--win-y), transparent 0 72%, #7dd3fc0e 91%, transparent 98%), linear-gradient(118deg, transparent 0 18%, #cdeeff09 25%, transparent 34%), linear-gradient(62deg, transparent 0 68%, #cdeeff06 76%, transparent 84%);z-index:3;position:absolute;inset:0}.hud-feedback{font-family:var(--font-title);letter-spacing:.14em;text-align:center;text-shadow:0 2px 4px #000,0 0 18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;opacity:0;z-index:5;background:#02070db8;border:1px solid #7dd3fc33;border-radius:12px;width:max-content;max-width:min(82vw,980px);padding:.52em .9em;font-size:clamp(1.45rem,2.2vw,2.75rem);font-weight:700;line-height:1.2;transition:opacity .2s;position:absolute;top:17%;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0000007a,inset 0 0 18px #04101c8c}.hud-feedback.show{opacity:1}.hud-feedback.good{color:var(--ok);border-color:#4ade806b}.hud-feedback.bad{color:var(--danger);border-color:#f871716b}.abort-btn{pointer-events:auto;z-index:6;font-family:var(--font-title);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:var(--panel);cursor:pointer;border:1px solid #f871714d;border-radius:8px;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.66rem;font-weight:700;transition:all .15s;display:flex;position:absolute;top:12px;left:16px}.abort-btn:hover{color:var(--danger);border-color:var(--danger);box-shadow:0 0 12px #f871714d}@media (width<=640px){.abort-btn span{display:none}.abort-btn{padding:.4rem .55rem;top:8px;left:8px}}.side-panel{pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:clamp(112px,12.5vw,174px);display:flex;position:absolute;top:18vh;bottom:auto}.side-panel.left{left:1.1vw}.side-panel.right{right:1.1vw}.crt{border:1px solid var(--metal-edge);background:#04090f;border-radius:8px;width:100%;padding:9px 10px;position:relative;overflow:hidden;box-shadow:inset 0 0 14px #000000d9,0 0 10px #38bdf812}.crt:after{content:"";pointer-events:none;background:repeating-linear-gradient(#ffffff06 0 1px,#0000 1px 3px);position:absolute;inset:0}.sonar-screen{flex-direction:column;justify-content:center;align-items:center;padding:8px;display:flex}#sonar-canvas{aspect-ratio:1;border-radius:50%;width:100%;max-width:128px}.sonar-distance{width:100%;font-family:var(--font-title);letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;justify-content:space-between;align-items:baseline;gap:6px;padding:2px 3px 0;font-size:.52rem;display:flex}.sonar-distance b{color:var(--neon-soft);white-space:nowrap;font-size:.72rem}.sonar-distance b.in-range{color:var(--ok);text-shadow:0 0 9px #4ade808c}.stat-screen label{font-family:var(--font-title);letter-spacing:.18em;color:var(--text-dim);text-transform:uppercase;margin-top:4px;font-size:.58rem;display:block}.stat-screen label:first-child{margin-top:0}.depth-value{font-family:var(--font-title);color:var(--neon-soft);text-shadow:0 0 14px #38bdf880;font-size:1.35rem;font-weight:700}.zone-name{color:var(--text-dim);letter-spacing:.06em;font-size:.85rem}.stat-big{font-family:var(--font-title);color:var(--neon-soft);font-size:1.2rem;display:block}.stat-big.hot{color:#ffd27f;text-shadow:0 0 12px #ffd27fb3}.dial{background:radial-gradient(circle,#0b131c 55%,#131d29 56% 70%,#0b131c 71%),conic-gradient(#0c141c,#18242f,#0c141c);border:2px solid #1c2836;border-radius:50%;flex-shrink:0;width:62px;height:62px;position:relative;box-shadow:inset 0 0 10px #000,0 0 8px #38bdf814}.dial i{transform-origin:50% 0;background:#ffd27f;width:2px;height:24px;animation:16s linear infinite dialspin;position:absolute;top:50%;left:calc(50% - 1px);box-shadow:0 0 6px #ffd27fcc}@keyframes dialspin{to{transform:rotate(360deg)}}.light-strip{gap:8px;display:flex}.light-strip b{background:#1d2833;border-radius:50%;width:9px;height:9px;box-shadow:inset 0 0 3px #000}.light-strip b.on{background:var(--ok);animation:3.4s infinite blink;box-shadow:0 0 8px #4ade80cc}.light-strip b.warn{background:#59321a}.light-strip b.warn.on{background:#fbbf24;animation-duration:5.2s;box-shadow:0 0 8px #fbbf24cc}@keyframes blink{0%,91%{opacity:1}95%{opacity:.35}}.meter{font-family:var(--font-title);letter-spacing:.16em;color:var(--text-dim);flex-direction:column;gap:.3rem;width:100%;font-size:.62rem;display:flex}.meter.hidden{display:none}.o2-bar{border:1px solid var(--panel-border);border-radius:6px;width:100%;height:10px;overflow:hidden}.o2-fill{background:linear-gradient(90deg,#38bdf8,#7dd3fc);width:100%;height:100%;transition:width .3s linear}.hull-pips{gap:6px;display:flex}.hull-pips i{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--neon);width:16px;height:16px;box-shadow:0 0 8px #38bdf899}.hull-pips i.cracked{box-shadow:none;background:#3a1518}.hull-cracks{pointer-events:none;z-index:3;position:absolute;inset:0}.hull-cracks span{color:#d7f0ff47;text-shadow:0 0 6px #ffffff59,0 0 22px #a0d2ff33;font-size:110px;line-height:1;animation:.25s ease-out crackin;position:absolute}@keyframes crackin{0%{opacity:0;transform:scale(1.6)}}.console-bottom{pointer-events:none;z-index:4;align-items:flex-end;gap:12px;display:flex;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.console-panel{pointer-events:auto;border:1px solid var(--metal-edge);background:linear-gradient(#0b1119,#05090e);border-bottom:none;border-radius:12px 12px 0 0;flex-direction:column;gap:.4rem;width:min(560px,52vw);padding:.42rem .75rem .28rem;display:flex;box-shadow:0 -8px 26px #0009,inset 0 1px #7dd3fc1f}.answer-prompt{font-family:var(--font-title);letter-spacing:.16em;text-transform:uppercase;color:var(--neon);text-align:center;font-size:.68rem}.answer-prompt.hidden{display:none}.answer-area{flex-wrap:wrap;justify-content:center;gap:.4rem;min-height:4px;display:flex}.answer-btn{pointer-events:auto;font-family:var(--font-ui);letter-spacing:.05em;color:var(--text);cursor:pointer;background:linear-gradient(#101c2b,#0a1320);border:1px solid #38bdf866;border-radius:7px;padding:.34rem .8rem;font-size:.92rem;font-weight:700;transition:all .12s;box-shadow:0 2px 6px #00000080,inset 0 1px #7dd3fc26}.answer-btn:hover{border-color:var(--neon-soft);color:var(--neon-soft);box-shadow:0 0 12px #38bdf859}.answer-btn:active{transform:translateY(1px)}.answer-btn.relisten{border-color:#ffd27f80}.zone-card{pointer-events:none;text-align:center;animation:2.6s forwards ztfade}.zt-name{font-family:var(--font-title);letter-spacing:.3em;color:var(--neon-soft);text-shadow:0 0 24px #38bdf899;font-size:clamp(1.6rem,5vw,2.6rem);font-weight:900}.zt-meters{color:var(--text-dim);letter-spacing:.18em;margin-top:.4rem;font-size:clamp(1.15rem,1.5vw,1.7rem)}.zt-family{font-family:var(--font-title);letter-spacing:.22em;text-transform:uppercase;color:#ffd27f;margin-top:.5rem;font-size:clamp(.95rem,1.2vw,1.35rem)}@keyframes ztfade{0%{opacity:0;transform:translateY(14px)}12%{opacity:1;transform:translateY(0)}82%{opacity:1}to{opacity:0}}.summary-stats{text-align:left;grid-template-columns:1fr 1fr;gap:.5rem 1rem;margin-top:1rem;display:grid}.summary-stats .row{border-bottom:1px dashed #7c96b540;justify-content:space-between;gap:.6rem;padding-bottom:.25rem;display:flex}.summary-stats .row span{color:var(--text-dim);font-size:.88rem}.summary-stats .row b{font-family:var(--font-title);color:var(--neon-soft)}.knob-row{justify-content:center;gap:16px;padding-top:2px;display:flex}.knob-row u{background:radial-gradient(circle at 35% 30%,#33404f,#10161d 72%);border:1px solid #000;border-radius:50%;width:13px;height:13px;text-decoration:none;position:relative}.knob-row u:after{content:"";background:#b4d2f099;width:1px;height:5px;position:absolute;top:1px;left:50%}.joystick{flex-shrink:0;width:36px;height:62px;position:relative}.joystick:before{content:"";background:linear-gradient(#131b25,#080d13);border:1px solid #000;border-radius:7px 7px 3px 3px;width:100%;height:16px;position:absolute;bottom:0;left:0}.joystick i{background:linear-gradient(90deg,#1e2833,#0d141b);border-radius:3px;width:6px;height:36px;position:absolute;bottom:13px;left:calc(50% - 3px)}.joystick i:after{content:"";background:radial-gradient(circle at 35% 28%,#3a4754,#0d1218 75%);border-radius:50%;width:17px;height:17px;position:absolute;top:-14px;left:50%;transform:translate(-50%);box-shadow:0 0 4px #000}.joystick i:before{content:"";z-index:1;background:#f87171;border-radius:50%;width:4px;height:4px;position:absolute;top:-12px;left:50%;transform:translate(-50%);box-shadow:0 0 5px #f87171e6}.touch-controls{display:none}body.touch .touch-controls{display:block}.joy-zone{pointer-events:auto;touch-action:none;background:#0a162473;border:1px solid #38bdf84d;border-radius:50%;justify-content:center;align-items:center;width:104px;height:104px;display:flex;position:absolute;bottom:130px;left:16px}.joy-knob{background:radial-gradient(circle at 35% 30%,#2c3947,#0d141b 75%);border:1px solid #7dd3fc66;border-radius:50%;width:46px;height:46px;box-shadow:0 0 10px #0009}.vert-btns{pointer-events:auto;flex-direction:column;gap:10px;display:flex;position:absolute;bottom:130px;right:14px}.vert-btns button{width:54px;height:54px;color:var(--neon-soft);touch-action:none;cursor:pointer;background:#0a16248c;border:1px solid #38bdf859;border-radius:50%;font-size:1.1rem}.bitacora-grid{text-align:left;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.45rem;margin-top:.9rem;display:grid}.bit-card{background:#060e18d9;border:1px solid #7c96b540;border-left:3px solid #0000;border-radius:8px;flex-direction:column;gap:2px;padding:.45rem .6rem;display:flex}.bit-card b{font-family:var(--font-title);letter-spacing:.06em;font-size:.78rem}.bit-card span{color:var(--text-dim);font-size:.78rem}.bit-card.captured b{color:var(--neon-soft)}.bit-card.seen b{color:var(--text-dim)}.bit-card.unseen{opacity:.45}.bit-card.unseen b{color:#45566b;letter-spacing:.2em}@media (width<=640px){.card{padding:1.1rem 1rem}.menu-actions .btn{flex:100%}:root{--win-r:58vmin}.side-panel.right{display:none}.side-panel.left{gap:6px;width:88px;top:8px;bottom:auto;left:8px}.dial,.side-panel.left .light-strip,.joystick{display:none}.console-panel{width:94vw}}