:root{color-scheme:dark;--navy:#03101a;--panel:#082337;--cyan:#4bd7ff;--ice:#caf2ff;--orange:#ff7c36;--muted:#6f95aa;--green:#43d39b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--navy);color:var(--ice);overscroll-behavior:none}
body{min-height:100dvh;overflow-x:hidden}
#ocean{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,#0b425b 0,transparent 42%),linear-gradient(#02080e,#06283c 56%,#03101a);overflow:hidden}
#ocean:after{content:"";position:absolute;inset:32% -20% -10%;opacity:.22;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 34px,#4bd7ff 36px 37px,transparent 39px 65px);animation:drift 12s linear infinite}
.scan{position:absolute;width:70vmin;height:70vmin;left:15vmin;top:16vh;border:1px solid #4bd7ff40;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 82%,#4bd7ff35 96%,transparent);animation:radar 4s linear infinite}
@keyframes radar{to{transform:rotate(1turn)}}@keyframes drift{to{transform:translateY(40px)}}
#app{position:relative;z-index:1;width:min(100%,520px);min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.top{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #4bd7ff66;color:var(--green);font:700 12px/1 monospace;letter-spacing:.12em}
.back{border:0;background:none;color:var(--ice);font-size:38px;padding:0 14px 5px 0;cursor:pointer}
h1,h2,.caps{font-family:"Arial Narrow",Impact,ui-sans-serif,sans-serif;letter-spacing:.09em;text-transform:uppercase}
h1{font-size:clamp(25px,7vw,44px);text-align:center;margin:28px 0 4px;white-space:nowrap}h2{text-align:center;font-size:30px;margin:36px 0 6px}
.sub{text-align:center;color:var(--cyan);font-weight:800;letter-spacing:.12em;font-size:13px}.muted{color:var(--muted)}
.hero{height:245px;display:grid;place-items:center;filter:drop-shadow(0 16px 22px #0008);animation:bob 2.8s ease-in-out infinite}
.hero img{width:100%;max-width:520px;aspect-ratio:1.5;object-fit:cover;border-radius:4px;filter:brightness(1.38) saturate(1.08) contrast(1.06);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 91%,transparent)}@keyframes bob{50%{transform:translateY(7px)}}
.actions{display:grid;gap:14px;margin-top:auto}.panel,.action{position:relative;background:linear-gradient(135deg,#0a3048e8,#04141feF);border:1px solid #4bd7ff80;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.action{min-height:90px;width:100%;color:var(--ice);display:grid;grid-template-columns:68px 1fr 24px;align-items:center;text-align:left;padding:10px 17px;border-color:var(--accent,var(--cyan));cursor:pointer}.action:active{transform:scale(.985)}
.action .glyph{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#4bd7ff15;color:var(--accent,var(--cyan));font-size:25px}.action strong{display:block;font:700 20px/1 "Arial Narrow",sans-serif;letter-spacing:.06em}.action small{display:block;color:var(--accent,var(--cyan));font:700 9px/1.4 monospace;margin-top:8px;letter-spacing:.08em}.action .arrow{font-size:28px;color:var(--accent,var(--cyan))}
.footer{text-align:center;color:var(--muted);font:700 10px monospace;letter-spacing:.09em;padding:28px 0 8px}.difficulty{display:grid;gap:15px;margin-top:34px}.difficulty .action{min-height:132px;grid-template-columns:92px 1fr 22px}.difficulty .glyph{width:76px;height:76px;font-weight:900}
.duel{padding:24px;margin:30px 0;text-align:center}.commanders{display:flex;align-items:center;justify-content:space-around;margin:28px 0 15px}.commander{width:85px;height:85px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center;font:800 31px monospace;background:#4bd7ff12}.commander.orange{border-color:var(--orange);color:var(--orange)}
.code{font:800 clamp(35px,12vw,56px)/1 monospace;letter-spacing:.18em;color:var(--cyan);text-align:center;margin:40px -0.18em 30px 0}.wait{flex:1;display:grid;place-content:center;text-align:center}.radar{width:180px;aspect-ratio:1;border:1px solid var(--cyan);border-radius:50%;margin:0 auto 30px;background:repeating-radial-gradient(circle,transparent 0 28px,#4bd7ff66 29px 30px),conic-gradient(transparent 0 75%,#4bd7ff55);animation:radar 3s linear infinite}
.code-input{display:block;width:min(100%,340px);margin:24px auto 0;padding:17px 14px;background:#041722;border:1px solid var(--cyan);border-radius:4px;color:var(--cyan);text-align:center;text-transform:uppercase;font:800 30px/1 monospace;letter-spacing:.18em;outline:none}.code-input:focus{box-shadow:0 0 24px #4bd7ff33}
.battle-head{text-align:center;padding:18px 0}.battle-head h2{font-size:22px;margin:4px}.battle-head .armor{font:700 10px monospace;color:var(--muted);margin-top:10px}.status{text-align:center;min-height:28px;color:var(--cyan);font:800 11px monospace;letter-spacing:.06em}
.grid-wrap{perspective:700px;margin:8px 2px 24px}.grid{display:grid;grid-template-columns:repeat(10,1fr);aspect-ratio:1;background:#05283bd9;border:1px solid var(--cyan);transform:rotateX(8deg);transform-origin:bottom;box-shadow:0 18px 50px #0008,inset 0 0 60px #4bd7ff0b}
.cell{position:relative;border:0;border-right:1px solid #4bd7ff35;border-bottom:1px solid #4bd7ff35;background:transparent;min-width:0;padding:0;cursor:pointer}.cell:before{content:"";position:absolute;inset:28%;border-radius:50%}.cell.miss:before{border:2px solid var(--cyan);box-shadow:0 0 12px var(--cyan)}.cell.hit:before{inset:18%;background:var(--orange);box-shadow:0 0 18px var(--orange);clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%);transform:rotate(45deg)}
.own-panel{padding:14px;display:grid;grid-template-columns:1fr 92px;align-items:center}.own-grid{display:grid;grid-template-columns:repeat(10,1fr);width:130px;aspect-ratio:1}.own-grid i{border:1px solid #03101a;background:#4bd7ff18}.own-grid i.ship{background:#69b5c8}.own-grid i.hit{background:var(--orange)}.own-grid i.miss{background:#4bd7ff77}.score{text-align:center;color:var(--cyan);font:800 17px monospace}.score small{display:block;font-size:9px;color:var(--muted)}
.progress{height:13px;border-radius:8px;background:#4bd7ff20;overflow:hidden;margin:15px 0 22px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--orange));transition:width .3s}
.result{flex:1;display:grid;place-content:center;text-align:center}.result h1{color:var(--cyan)}
#toast{position:fixed;z-index:5;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#0b2738;color:var(--ice);border:1px solid var(--cyan);padding:12px 18px;border-radius:4px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:800px){#app{width:min(94%,1000px)}.menu-layout{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;flex:1}.hero{height:420px}.battle-layout{display:grid;grid-template-columns:minmax(420px,620px) 260px;gap:28px;align-items:center}.own-panel{grid-template-columns:1fr}.own-grid{width:100%}.difficulty{grid-template-columns:repeat(3,1fr)}.difficulty .action{display:block;text-align:center;padding:24px 12px}.difficulty .glyph{margin:auto auto 18px}.actions{margin-top:0}}

/* Cinematic command-station layout */
.menu-layout{flex:1;display:flex;flex-direction:column}.menu-hero{position:relative;height:40dvh;min-height:285px;margin:0 -18px 10px;overflow:hidden}.menu-hero .hero{height:100%;animation:bob 4s ease-in-out infinite}.menu-hero .hero img{width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;filter:brightness(1.22) saturate(1.08) contrast(1.08);mask-image:linear-gradient(#000 0,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0,#000 72%,transparent 100%)}.menu-hero .sub{position:absolute;left:0;right:0;bottom:15px;text-shadow:0 2px 12px #000}.menu-actions{margin-top:0}.menu-actions .action{min-height:76px}.menu-actions .action strong{font-size:19px}.menu-actions .footer{padding-top:20px}

.battle-hud{height:108px;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;position:relative;z-index:3;margin:0 -4px}.battle-hud>.back{position:absolute;left:-12px;top:25px;z-index:4}.hud-wing{height:82px;padding:14px 15px 9px;background:linear-gradient(135deg,#0a3048ed,#04141ff5);border:1px solid currentColor;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);display:flex;flex-direction:column;justify-content:center}.hud-wing.cyan{color:var(--cyan);padding-left:28px}.hud-wing.orange{color:var(--orange);text-align:right;padding-right:17px}.hud-wing strong{color:var(--ice);font:800 13px/1.1 "Arial Narrow",sans-serif;letter-spacing:.08em;text-transform:uppercase}.hud-wing.orange strong{color:var(--orange);font-size:11px}.hud-wing small{font:700 8px/1 monospace;letter-spacing:.07em;margin-top:7px}.hud-radar,.mini-radar{z-index:2;border:1px solid var(--cyan);border-radius:50%;aspect-ratio:1;background:repeating-radial-gradient(circle,transparent 0 11px,#4bd7ff88 12px 13px),conic-gradient(from 20deg,#4bd7ff75,transparent 28%);box-shadow:0 0 0 8px #03101aec,0 0 18px #4bd7ff55;animation:radar 4s linear infinite}.hud-radar{width:72px;margin:auto}.fleet-pips{display:flex;gap:5px;margin-top:8px}.hud-wing.orange .fleet-pips{justify-content:flex-end}.fleet-pips i{display:block;width:calc(7px + var(--len)*2px);height:5px;background:currentColor;clip-path:polygon(0 0,82% 0,100% 50%,10% 100%)}.fleet-pips i.lost{opacity:.22}

.battle-sky{height:175px;margin:0 -18px -70px;position:relative;background:linear-gradient(#02101b99,#03101af2),url("assets/menu-ship-hero.png") center 45%/cover;box-shadow:inset 0 -55px 50px #03101a}.battle-sky:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 58%,#ff8a3444,transparent 28%)}.battle-sky .status{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(78%,430px);min-height:42px;padding:14px 12px;background:#031521e8;border:1px solid var(--cyan);border-radius:18px;z-index:2}.battle-layout{position:relative;z-index:1}.grid-wrap{position:relative;margin:8px 2px 12px;filter:drop-shadow(0 22px 28px #000b)}.grid{position:relative;background:linear-gradient(#07506bd9,#031b2bec),repeating-linear-gradient(0deg,transparent 0 8%,#b8efff0b 8.5% 9%);transform:perspective(720px) rotateX(10deg);border-width:2px;overflow:visible}.grid:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 0 48%,#4bd7ff22 50%,transparent 53%);animation:gridscan 3.6s linear infinite}.target-status{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;color:var(--muted);font:800 9px monospace;letter-spacing:.07em;margin:18px 7px 24px}.target-status .progress{margin:0;height:9px}.target-status .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--orange));border-radius:8px}.target-status b{color:var(--cyan)}

.own-panel{grid-template-columns:1fr 66px 90px;gap:13px;padding:17px}.own-panel .caps{color:var(--ice)}.own-grid{position:relative;margin-top:10px}.own-grid>i{position:relative;z-index:1;background:#4bd7ff13}.own-grid>i.hit{background:#ff7c3688}.own-grid>i.miss{background:#4bd7ff55}.own-panel .mini-radar{width:58px}.ship-layers,.own-ships{position:absolute;inset:0;pointer-events:none;z-index:2}.ship-layers img,.own-ships img{position:absolute;object-fit:fill;transform:translate(-50%,-50%);filter:drop-shadow(0 0 5px var(--cyan));opacity:.95}.ship-layers img{filter:drop-shadow(0 0 8px var(--orange));}.ship-layers img.horizontal,.own-ships img.horizontal{transform:translate(-50%,-50%) rotate(90deg)}

.cell.impact{z-index:4}.cell.impact:after{content:"";position:absolute;left:50%;top:50%;pointer-events:none}.cell.blast:after{width:230%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff8bd 0 8%,#ffb53d 16%,#ff6329 34%,#ff632966 48%,transparent 68%);box-shadow:0 0 26px #ff7c36;animation:blast 1.35s ease-out both}.cell.splash:after{width:120%;height:250%;transform:translate(-50%,-64%);background:linear-gradient(90deg,transparent,#d7f8ffdd 44%,#fff 50%,#77dcffdd 58%,transparent);clip-path:polygon(44% 0,56% 0,68% 70%,100% 100%,55% 86%,0 100%,34% 68%);filter:drop-shadow(0 0 9px var(--cyan));animation:splash 1.35s ease-out both}.projectile{position:absolute;z-index:8;width:10px;height:10px;border-radius:50%;left:8%;top:102%;background:white;box-shadow:0 0 8px 3px #fff,0 0 18px 8px var(--cyan),-18px 18px 2px #dff8ff99,-34px 34px 3px #dff8ff55;pointer-events:none;animation:projectile .58s cubic-bezier(.2,.65,.35,1) both}.battle-layout:has(.blast){animation:shake .38s linear}.own-grid .impact:after{z-index:5}

@keyframes gridscan{from{transform:translateY(-52%)}to{transform:translateY(52%)}}@keyframes projectile{0%{left:8%;top:102%;opacity:0}12%{opacity:1}78%,100%{left:var(--target-x);top:var(--target-y);opacity:1}}@keyframes blast{0%{opacity:0;scale:.15}15%{opacity:1;scale:.72}50%{opacity:.95;scale:1.25}100%{opacity:0;scale:1.75}}@keyframes splash{0%{opacity:0;scale:.2 .1}18%{opacity:1;scale:.75 1}56%{opacity:.9;scale:1.15 1.3}100%{opacity:0;scale:1.7 .45}}@keyframes shake{0%,100%{transform:none}20%{transform:translate(5px,-3px)}40%{transform:translate(-6px,3px)}60%{transform:translate(4px,2px)}80%{transform:translate(-2px,-2px)}}

@media(min-width:800px){.menu-layout{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.menu-hero{height:560px;margin:0}.menu-hero .hero{height:100%}.menu-actions .action{min-height:88px}.battle-hud{width:min(100%,900px);margin:auto}.battle-sky{margin-left:calc((1000px - 100vw)/2);margin-right:calc((1000px - 100vw)/2)}.battle-layout{grid-template-columns:minmax(480px,640px) 270px}.own-panel{grid-template-columns:1fr;justify-items:center}.own-panel .mini-radar{margin:8px auto}.target-status{margin-bottom:8px}}

/* BLENK // FLEET COMMAND — visual system v8 */
body{background:#020810}
#ocean{background:radial-gradient(circle at 22% 28%,#0a3d55 0,transparent 34%),radial-gradient(circle at 80% 74%,#10364b 0,transparent 28%),linear-gradient(145deg,#01060b,#061b2a 58%,#020912)}
#ocean:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 45%,#7be7ff09 46%,transparent 48%),linear-gradient(80deg,transparent 66%,#7be7ff07 67%,transparent 69%)}
.top{height:64px;border-bottom:1px solid #6ce6ff4f;color:#69e8bd;padding:0 4px}
.top:after{content:"BLENK // FLEET COMMAND";position:absolute;left:50%;transform:translateX(-50%);color:#d8f7ff;font:800 11px/1 "Arial Narrow",sans-serif;letter-spacing:.18em;white-space:nowrap}
.top>span:last-child{margin-left:auto}

.menu-layout{position:relative;isolation:isolate;flex:1;margin:0 -18px;min-height:calc(100dvh - 64px);overflow:hidden;background:#020a11}
.menu-hero{height:42dvh;min-height:310px;margin:0;overflow:hidden}
.menu-hero .hero{position:absolute;inset:0;height:100%;animation:none;filter:none}
.menu-hero .hero img{border-radius:0;object-position:50% 38%;filter:brightness(.92) saturate(1.12) contrast(1.14);mask-image:none;-webkit-mask-image:none}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#01070b26,#01070b12 48%,#01070bd9),linear-gradient(0deg,#020a11 0,transparent 35%,#02070b44 100%)}
.hero-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:23px;text-shadow:0 3px 18px #000}
.hero-copy .eyebrow{color:#69e8bd;font:800 9px/1 monospace;letter-spacing:.17em}
.hero-copy h1{margin:8px 0 5px;text-align:left;font:900 clamp(36px,11vw,62px)/.82 "Arial Narrow",Impact,sans-serif;letter-spacing:.035em;white-space:normal;color:#e5f9ff}.hero-copy h1 em{font-style:normal;color:#dff8ff;font-size:.58em;letter-spacing:.08em}
.hero-copy .sub{position:static;text-align:left;font-size:10px;line-height:1.2;letter-spacing:.22em;color:var(--cyan)}
.hero-copy p{display:none}
.hero-telemetry{display:none}
.menu-command{position:relative;z-index:3;padding:15px 18px 8px;background:linear-gradient(#020a1112,#020a11 10%)}
.menu-command>header{display:flex;justify-content:space-between;color:#7698aa;font:800 9px/1 monospace;letter-spacing:.12em;padding:3px 4px 12px}.menu-command>header b{color:#69e8bd}
.menu-actions{gap:9px}
.menu-actions .action{min-height:65px;grid-template-columns:52px 1fr 20px;background:linear-gradient(110deg,#0a2839f2,#04131ced);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 80%,transparent)}
.menu-actions .action:first-child{background:linear-gradient(110deg,#462319ed,#101923f5);box-shadow:inset 4px 0 0 var(--orange),0 0 28px #ff7c3614}
.menu-actions .action .glyph{width:40px;height:40px;font-size:19px}
.menu-actions .action strong{font-size:17px}.menu-actions .action small{margin-top:5px;font-size:8px}.menu-actions .footer{padding:13px 0 3px}

.battle-screen{position:relative;isolation:isolate;min-height:100dvh;margin:0 -18px;padding:0 18px 28px;background:linear-gradient(180deg,#01070cb8 0,#01070c1f 21%,#01070c82 70%,#01070cf2 100%),url("assets/battle-ocean-v3.png") center top/auto max(760px,100dvh) no-repeat,#020911;overflow:hidden}
.battle-screen:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-linear-gradient(104deg,transparent 0 38px,#a8efff09 39px 40px,transparent 41px 76px);animation:rainfall 1.4s linear infinite}
.battle-screen:after{content:"";position:absolute;z-index:-1;inset:0;box-shadow:inset 0 0 110px #000b;pointer-events:none}
@keyframes rainfall{to{background-position:-35px 120px}}
.battle-hud{height:105px;margin:0 -8px;grid-template-columns:1fr 68px 1fr}
.battle-hud>.back{left:0;top:29px;color:#dff8ff}
.hud-wing{height:74px;padding:12px 12px 8px;background:linear-gradient(135deg,#071a25e8,#02080ff2);backdrop-filter:blur(9px);box-shadow:0 10px 28px #0008,inset 0 -1px 0 #ffffff12}
.hud-wing.cyan{padding-left:34px}.hud-wing strong{font-size:12px}.hud-wing.orange strong{font-size:9px}.hud-radar{width:67px;background:repeating-radial-gradient(circle,transparent 0 10px,#4bd7ff78 11px 12px),conic-gradient(from 20deg,#4bd7ff75,transparent 28%)}
.battle-sky{height:122px;margin:0 -18px -56px;background:none;box-shadow:none;position:relative}
.battle-sky:before{display:none}
.weather-strip{display:flex;justify-content:center;gap:18px;color:#9cc0d0;font:700 7px/1 monospace;letter-spacing:.1em;opacity:.75}
.battle-sky .status{top:48px;min-height:36px;width:min(88%,430px);padding:11px 15px;border:1px solid #4bd7ff85;border-radius:2px;background:linear-gradient(90deg,#05131de8,#082637e8,#05131de8);box-shadow:0 0 24px #4bd7ff1a;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.battle-sky .status i{display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.battle-layout{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.battle-main{min-width:0}
.grid-console{position:relative;margin:0 7px 4px;padding:21px 9px 11px 23px;background:linear-gradient(145deg,#071824bc,#02080db8);border:1px solid #66dcff6b;clip-path:polygon(12px 0,calc(100% - 38px) 0,100% 38px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);box-shadow:0 30px 60px #000c,inset 0 0 44px #4bd7ff0a;backdrop-filter:blur(3px)}
.grid-wrap{margin:0;filter:drop-shadow(0 18px 25px #000a)}
.grid{border:1px solid #7ce7ffcc;background:linear-gradient(#07516b83,#031b2b9e),repeating-linear-gradient(0deg,transparent 0 8%,#b8efff10 8.5% 9%);box-shadow:0 0 0 1px #001019,inset 0 0 54px #4bd7ff16,0 0 32px #4bd7ff14;transform:perspective(720px) rotateX(8deg);transform-origin:bottom}
.cell{border-color:#69ddff4b;transition:background .15s,box-shadow .15s}
.cell:hover{background:#75e6ff1a;box-shadow:inset 0 0 13px #5ce0ff2b}.cell:focus-visible{outline:2px solid #fff;z-index:5}
.axis{position:absolute;z-index:3;display:grid;color:#8adff6;font:700 7px/1 monospace;pointer-events:none}.axis-x{left:23px;right:9px;top:8px;grid-template-columns:repeat(10,1fr);text-align:center}.axis-y{left:6px;top:21px;bottom:11px;grid-template-rows:repeat(10,1fr);align-items:center;text-align:center}
.console-corners:before,.console-corners:after{content:"";position:absolute;width:42px;height:2px;background:var(--orange);box-shadow:0 0 10px var(--orange)}.console-corners:before{right:18px;top:7px}.console-corners:after{left:10px;bottom:5px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.target-status{margin:14px 13px 5px;padding:9px 12px;background:#020a11b0;border-left:2px solid var(--orange)}
.target-status .progress{background:#4bd7ff1c}.target-status b{color:var(--orange)}
.tactical-rail{display:grid;grid-template-columns:1fr;gap:10px}
.rail-card{border:1px solid #4bd7ff55;background:linear-gradient(135deg,#0a2839db,#031018e8);backdrop-filter:blur(8px);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.tactical-readout{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-left:2px solid var(--orange)}
.tactical-readout small,.sea-log small{display:block;color:#7899aa;font:800 7px/1 monospace;letter-spacing:.12em}.tactical-readout strong{display:block;margin-top:5px;color:var(--orange);font:800 13px/1 "Arial Narrow",sans-serif;letter-spacing:.09em}.weapon-lock{padding:8px;border:1px solid var(--orange);color:var(--orange);font:800 8px/1 monospace;box-shadow:inset 0 0 15px #ff7c3622}
.own-panel{display:block;padding:13px 14px;background:linear-gradient(145deg,#09283ade,#031018f0);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.own-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.own-head b{color:var(--cyan);font:800 10px monospace}.own-grid{width:min(100%,280px);margin:0 auto;box-shadow:0 0 24px #4bd7ff12}.own-grid>i{border-color:#4bd7ff21;background:#4bd7ff10}.own-foot{display:flex;align-items:center;justify-content:space-around;margin-top:9px}.own-panel .mini-radar{width:48px;margin:0}.own-panel .score{font-size:19px}.own-panel .score small{margin-top:5px}
.sea-log{display:none;padding:14px}.sea-log p{margin:9px 0 13px;color:#d9f5fc;font:700 10px/1.35 monospace}.sea-log div{color:#69e8bd;font:700 7px/1 monospace}.sea-log div i{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#69e8bd;box-shadow:0 0 7px #69e8bd}
.cell.blast:after{width:300%;box-shadow:0 0 38px 12px #ff7c36}.cell.splash:after{width:170%;height:320%}.projectile{box-shadow:0 0 9px 4px #fff,0 0 25px 10px var(--cyan),-22px 22px 3px #dff8ffcc,-45px 45px 5px #dff8ff66}

@media(min-width:800px){
  #app{width:min(100%,1480px);padding-left:28px;padding-right:28px}
  .menu-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(360px,.72fr);gap:0;margin:0 -28px;min-height:calc(100dvh - 64px);align-items:stretch}
  .menu-hero{height:auto;min-height:650px}.menu-hero .hero img{object-position:46% 48%}
  .hero-shade{background:linear-gradient(90deg,#01070b18 0,#01070b20 48%,#01070bf2 100%),linear-gradient(0deg,#01070bd9 0,transparent 47%)}
  .hero-copy{left:7.5%;right:auto;bottom:7%;width:min(62%,690px)}
  .hero-copy .eyebrow{font-size:11px}.hero-copy h1{font-size:clamp(58px,5.3vw,88px);line-height:.8}.hero-copy .sub{font-size:12px;margin-top:9px}.hero-copy p{display:block;width:min(520px,80%);margin:13px 0 0;color:#b8d4df;font-size:13px;line-height:1.45}
  .hero-telemetry{display:flex;position:absolute;z-index:2;left:7.5%;top:8%;gap:26px;color:#8bb2c2;font:700 8px/1 monospace;letter-spacing:.12em}
  .menu-command{display:flex;flex-direction:column;justify-content:center;padding:48px 7.5%;background:linear-gradient(90deg,#020a11e8,#020a11 18%);border-left:1px solid #4bd7ff32}
  .menu-command>header{padding-bottom:18px}.menu-actions{gap:13px}.menu-actions .action{min-height:82px;grid-template-columns:64px 1fr 22px;padding:11px 18px}.menu-actions .action .glyph{width:48px;height:48px}.menu-actions .action strong{font-size:20px}.menu-actions .action small{font-size:9px}
  .battle-screen{margin:0 -28px;padding:0 42px 34px;background-size:cover;background-position:center 28%}
  .battle-hud{width:min(100%,1050px);margin:auto;height:116px;grid-template-columns:1fr 88px 1fr}.hud-radar{width:84px}.hud-wing{height:82px;padding-left:32px;padding-right:26px}.hud-wing strong{font-size:15px}.hud-wing.orange strong{font-size:13px}
  .battle-sky{height:126px;margin:0 -42px -74px}.weather-strip{gap:38px;font-size:8px}.battle-sky .status{top:49px}
  .battle-layout{display:grid;grid-template-columns:minmax(560px,820px) minmax(270px,340px);gap:26px;align-items:end;justify-content:center;max-width:1210px;margin:auto}
  .grid-console{margin:0;padding:29px 15px 17px 32px}.axis-x{left:32px;right:15px;top:12px;font-size:8px}.axis-y{left:9px;top:29px;bottom:17px;font-size:8px}
  .grid{max-height:67vh;margin:auto}.target-status{margin-top:18px}
  .tactical-rail{gap:13px}.own-panel{padding:17px 19px}.own-grid{width:min(100%,310px)}.own-panel .mini-radar{width:66px}.sea-log{display:block}
}

@media(max-height:760px) and (max-width:799px){.menu-hero{height:38dvh;min-height:255px}.hero-copy h1{font-size:37px}.menu-actions .action{min-height:57px}.menu-command{padding-top:8px}.menu-actions{gap:7px}.menu-actions .footer{display:none}.own-grid{width:min(100%,220px)}}