@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{--navy:#04101d;--navy2:#071b2c;--panel:rgba(7,27,45,.82);--line:rgba(84,197,232,.22);--cyan:#48d9f5;--cyan2:#08a9d2;--amber:#ffc44d;--red:#ff5f58;--text:#eefaff;--muted:#8da9b9;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{background:#020b13;color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100%;overscroll-behavior:none}body{margin:0;min-height:100vh;background:linear-gradient(180deg,rgba(2,10,18,.1),#020a13 92%),url('assets/ocean-command-bg.png') center top/cover fixed no-repeat;overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}.sea-noise{position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}#app{position:relative;z-index:1;min-height:100vh}.topbar{height:76px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(89,204,239,.14);background:linear-gradient(180deg,rgba(1,9,17,.94),rgba(1,9,17,.58));backdrop-filter:blur(14px);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:10px;background:0;border:0;padding:0;text-align:left}.brand-mark{width:39px;height:39px;display:grid;place-items:center;clip-path:polygon(50% 0,92% 22%,84% 78%,50% 100%,16% 78%,8% 22%);background:linear-gradient(135deg,#50e5ff,#09799a);color:#02131f;font:900 15px 'Barlow Condensed'}.brand b{display:block;font:800 19px/16px 'Barlow Condensed';letter-spacing:2.8px}.brand small{color:var(--cyan);font:600 8px/14px Inter;letter-spacing:2.2px}.top-actions{display:flex;align-items:center;gap:14px}.connection{font:700 9px Inter;letter-spacing:1.3px;color:#74dca7;display:flex;align-items:center;gap:6px}.connection i{width:6px;height:6px;border-radius:50%;background:#52e99b;box-shadow:0 0 10px #52e99b}.connection.offline{color:#ff8b84}.connection.offline i{background:#ff5f58}.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:rgba(8,31,49,.7);border-radius:4px;color:#a7c4d4;font-size:17px}.screen{display:none;min-height:calc(100vh - 76px);padding:34px clamp(18px,4vw,64px) calc(36px + var(--safe-bottom));animation:screenIn .4s ease}.screen.active{display:block}@keyframes screenIn{from{opacity:0;transform:translateY(8px)}}.home-screen{max-width:1120px;margin:auto}.hero{max-width:640px;padding:7vh 0 35px}.eyebrow{color:var(--cyan);font:700 10px Inter;letter-spacing:3px;text-transform:uppercase}.eyebrow>span{display:inline-block;width:24px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:8px;box-shadow:0 0 8px var(--cyan)}h1,h2,.section-heading h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase}.hero h1{font-size:clamp(66px,10vw,122px);line-height:.77;letter-spacing:-2px;margin:20px 0 28px;text-shadow:0 8px 30px #000}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(141,225,248,.92);text-shadow:0 0 30px rgba(29,181,220,.25)}.hero>p{max-width:520px;color:#afc3ce;font-size:15px;line-height:1.7;border-left:2px solid var(--cyan2);padding-left:16px}.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}.btn{border:1px solid rgba(85,204,236,.46);background:rgba(8,31,50,.85);min-height:48px;border-radius:3px;padding:11px 20px;font:800 13px 'Barlow Condensed';letter-spacing:1.5px;position:relative;overflow:hidden;text-transform:uppercase;transition:.18s}.btn:hover{transform:translateY(-1px);border-color:var(--cyan);box-shadow:0 7px 24px rgba(0,175,220,.15)}.btn.primary{background:linear-gradient(135deg,#20c9e8,#067d9f);border-color:#68e9ff;color:#00141d;box-shadow:0 0 20px rgba(31,207,239,.18)}.btn.secondary{background:linear-gradient(135deg,rgba(14,45,68,.95),rgba(5,22,36,.95))}.btn.xl{display:grid;grid-template-columns:30px auto;grid-template-rows:auto auto;align-items:center;text-align:left;min-width:220px;padding:13px 20px}.btn.xl>span{grid-row:1/3;font-size:21px}.btn.xl b{line-height:1.1}.btn.xl small{font:500 7px Inter;letter-spacing:1.5px;opacity:.68;margin-top:3px}.btn.full{width:100%;margin-top:12px}.quick-note{margin-top:17px;color:#7895a5;font-size:9px;letter-spacing:1.2px;text-transform:uppercase}.pulse-dot{display:inline-block;width:5px;height:5px;background:#4ee6a0;border-radius:50%;box-shadow:0 0 10px #4ee6a0;margin-right:5px}.glass{background:linear-gradient(145deg,rgba(9,34,54,.86),rgba(3,17,29,.86));border:1px solid var(--line);box-shadow:0 15px 45px rgba(0,0,0,.28);backdrop-filter:blur(12px)}.commander-card{display:flex;align-items:center;gap:13px;padding:13px 16px;max-width:390px;border-left:2px solid var(--cyan)}.avatar-ring{width:47px;height:47px;border-radius:50%;border:1px solid var(--cyan2);display:grid;place-items:center;background:radial-gradient(circle,#123e56,#061623);position:relative;flex:none}.avatar-ring i{position:absolute;right:0;bottom:2px;width:9px;height:9px;border:2px solid #092034;border-radius:50%;background:#53e89d}.commander-card>div:nth-child(2){flex:1}.commander-card small,.player-slot small{display:block;font:700 7px Inter;letter-spacing:1.6px;color:#7898aa}.commander-card strong{display:block;font:800 17px 'Barlow Condensed';letter-spacing:.5px}.rank{display:block;color:var(--cyan);font-size:7px;letter-spacing:1px;margin-top:3px}.text-btn,.dock-head button{background:0;border:0;color:var(--cyan);font:700 8px Inter;letter-spacing:1.2px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.mode-card{text-align:left;min-height:120px;padding:16px;background:linear-gradient(145deg,rgba(7,28,46,.92),rgba(3,15,27,.88));border:1px solid var(--line);color:var(--text);position:relative;transition:.2s}.mode-card:hover{border-color:rgba(72,217,245,.6);transform:translateY(-2px)}.mode-card b,.mode-card small{display:block}.mode-card b{font:800 15px 'Barlow Condensed';letter-spacing:1px;margin-top:15px}.mode-card small{color:var(--muted);font-size:9px;margin-top:4px}.mode-card>i{position:absolute;right:10px;top:10px;font:700 6px Inter;letter-spacing:1px;color:#718796}.mode-icon{font-size:20px}.mode-icon.cyan{color:var(--cyan)}.mode-icon.amber{color:var(--amber)}.mode-icon.violet{color:#ad8cff}.intel-strip{display:flex;gap:20px;align-items:center;padding:13px 16px}.intel-strip div:first-child{flex:1}.intel-strip span,.intel-strip b{display:block}.intel-strip span{font:700 7px Inter;letter-spacing:1.5px;color:var(--amber)}.intel-strip b{font:700 11px 'Barlow Condensed';letter-spacing:.5px;margin-top:4px}.progress{height:4px;background:#122b3b;width:35%;max-width:280px}.progress i{display:block;height:100%;background:var(--amber);box-shadow:0 0 8px var(--amber)}.intel-strip>strong{font:700 10px 'Barlow Condensed';color:#b8cbd5}.back-link{background:0;border:0;color:#87a6b7;font:700 9px Inter;letter-spacing:1.5px;padding:0 0 28px}.section-heading{text-align:center;margin:5px auto 28px}.section-heading>span{font:700 8px Inter;letter-spacing:2px;color:var(--cyan)}.section-heading h2{font-size:clamp(36px,6vw,60px);line-height:1;margin:8px 0}.section-heading p{color:var(--muted);font-size:12px}.section-heading.compact{margin-bottom:20px}.lobby-screen,.deploy-screen,.wait-screen,.battle-screen,.result-screen{max-width:1150px;margin:auto}.room-code{max-width:530px;margin:auto;padding:20px;text-align:center}.room-code small{display:block;font:700 7px Inter;letter-spacing:2px;color:var(--muted)}.room-code strong{display:block;font:900 clamp(42px,8vw,70px) 'Barlow Condensed';letter-spacing:10px;color:var(--cyan);text-shadow:0 0 25px rgba(72,217,245,.34);margin:8px}.versus{display:flex;align-items:center;justify-content:center;gap:clamp(30px,8vw,100px);margin:45px auto}.player-slot{text-align:center;min-width:150px}.player-slot .avatar-ring{width:80px;height:80px;margin:auto auto 15px;font-size:28px}.player-slot b{display:block;font:800 19px 'Barlow Condensed';margin:5px}.player-slot em{font:700 7px Inter;letter-spacing:1.5px;color:#4ee6a0;font-style:normal}.player-slot.waiting{opacity:.55}.vs{font:900 34px 'Barlow Condensed';color:#526b7b}.sonar-loader{text-align:center;color:#6e8fa0;font:700 8px Inter;letter-spacing:2px}.sonar-loader i{display:block;width:34px;height:34px;border:1px solid #168eaa;border-radius:50%;margin:0 auto 12px;animation:sonar 1.6s infinite}@keyframes sonar{to{transform:scale(2);opacity:0}}.deploy-layout,.battle-main{display:grid;grid-template-columns:minmax(0,700px) minmax(210px,300px);gap:18px;justify-content:center}.board-panel{padding:16px}.board-title,.board-caption,.dock-head,.log-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.board-title span,.board-caption span,.dock-head b,.log-head b{font:800 11px 'Barlow Condensed';letter-spacing:1.5px}.board-title small,.board-caption small{font:700 7px Inter;letter-spacing:1px;color:var(--cyan)}.game-board{--cell:clamp(26px,7.3vw,56px);display:grid;grid-template-columns:22px repeat(10,var(--cell));grid-template-rows:22px repeat(10,var(--cell));justify-content:center;touch-action:manipulation;user-select:none}.cell,.axis{border:0;display:grid;place-items:center}.axis{font:700 8px Inter;color:#6e94a8}.cell{position:relative;background:rgba(7,38,59,.7);border-right:1px solid rgba(54,154,190,.18);border-bottom:1px solid rgba(54,154,190,.18);padding:0;transition:.14s}.cell:nth-child(even){background:rgba(8,43,65,.7)}.cell:hover{background:rgba(25,119,148,.35);box-shadow:inset 0 0 0 1px var(--cyan)}.cell.selected{background:rgba(72,217,245,.2);box-shadow:inset 0 0 0 2px var(--cyan),0 0 12px rgba(72,217,245,.3)}.cell.ship{background:linear-gradient(135deg,#54717e,#203946);box-shadow:inset 0 0 0 1px #8aa4ad}.cell.ship:after{content:'';width:58%;height:58%;border-radius:35%;border:1px solid #a6bec6;background:#344f5b}.cell.preview{background:rgba(72,217,245,.26);box-shadow:inset 0 0 0 1px var(--cyan)}.cell.invalid{background:rgba(255,95,88,.27)}.cell.miss:after{content:'';width:24%;height:24%;border-radius:50%;background:#9ad7e7;box-shadow:0 0 9px #75d6ef}.cell.hit:before,.cell.sunk:before{content:'×';font:900 calc(var(--cell)*.7) 'Barlow Condensed';line-height:1;color:#ff7a67;text-shadow:0 0 10px #ff392f;z-index:2}.cell.sunk{background:rgba(105,24,26,.6)}.cell.sunk:before{color:#ffb14d}.cell.shield:before{content:'⬡';color:#65e7ff;text-shadow:0 0 10px #45ddff}.cell.radar{box-shadow:inset 0 0 0 1px rgba(72,217,245,.55)}.cell.radar:after{content:attr(data-signal);position:absolute;font:800 10px Inter;color:#69e5ff}.fleet-dock{padding:16px}.fleet-item{border:1px solid rgba(79,171,202,.16);background:rgba(3,18,30,.55);padding:11px;margin-bottom:8px;display:flex;align-items:center;gap:10px;position:relative}.fleet-item.selected{border-color:var(--cyan);background:rgba(25,134,165,.18)}.fleet-item.placed{opacity:.48}.fleet-item span{font-size:18px;color:var(--cyan)}.fleet-item div{flex:1}.fleet-item b,.fleet-item small{display:block}.fleet-item b{font:700 12px 'Barlow Condensed';letter-spacing:.5px}.fleet-item small{font-size:7px;color:var(--muted);margin-top:2px}.fleet-item i{font:800 9px Inter;color:#83aabb;font-style:normal;letter-spacing:2px}.deploy-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}.deploy-actions .btn{min-width:180px}.wait-screen{text-align:center;padding-top:14vh}.radar-large{width:170px;height:170px;border:1px solid rgba(72,217,245,.36);border-radius:50%;margin:auto;position:relative;display:grid;place-items:center;background:repeating-radial-gradient(circle,transparent 0 28px,rgba(72,217,245,.12) 29px 30px)}.radar-large i{position:absolute;width:50%;height:50%;top:0;right:0;transform-origin:bottom left;background:linear-gradient(45deg,rgba(72,217,245,.3),transparent 60%);animation:sweep 2s linear infinite}.radar-large b{color:var(--cyan);font-size:24px}.wait-screen h2{font-size:45px;margin-bottom:8px}.wait-screen p{color:var(--muted)}.room-pill{display:inline-block;border:1px solid var(--line);padding:10px 18px;margin-top:18px;font:700 8px Inter;letter-spacing:1.5px}.room-pill b{color:var(--cyan)}@keyframes sweep{to{transform:rotate(360deg)}}.battle-screen{padding-top:18px}.battle-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 14px;margin-bottom:12px}.battle-player{display:flex;align-items:center;gap:9px}.mini-avatar{width:36px;height:36px;border:1px solid #913d3d;background:#32181b;display:grid;place-items:center}.battle-player small,.battle-player b{display:block}.battle-player small{font:700 6px Inter;letter-spacing:1.4px;color:#e77d78}.battle-player b{font:800 13px 'Barlow Condensed'}.ship-pips{display:flex;margin-left:8px}.ship-pips i{width:13px;height:5px;background:#4da0b7;margin:1px}.ship-pips i.dead{background:#5d3031}.turn-display{text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 20px}.turn-display small{display:block;font:800 7px Inter;letter-spacing:1.5px;color:var(--cyan)}.turn-display b{font:900 26px 'Barlow Condensed'}.energy{text-align:right}.energy small{font:700 6px Inter;letter-spacing:1px;color:var(--amber)}.energy b{font:900 19px 'Barlow Condensed';margin-left:7px}.energy span{font-size:8px;color:#78919f}.energy-bar{height:4px;background:#193040;margin:4px 0 0 auto;max-width:180px}.energy-bar i{display:block;height:100%;background:linear-gradient(90deg,#e6a834,#ffe075);box-shadow:0 0 8px #ffc44d;transition:.3s}.battle-tabs{display:flex;justify-content:center;margin-bottom:10px}.battle-tabs button{border:0;border-bottom:2px solid transparent;background:rgba(4,18,30,.72);padding:10px 35px;font:800 9px Inter;letter-spacing:1.4px;color:#6f8b9c}.battle-tabs button.active{color:var(--cyan);border-color:var(--cyan)}.battle-side{padding:14px;min-height:300px}.log-head span{font:700 6px Inter;color:#4ee6a0;letter-spacing:1px}.battle-log{max-height:460px;overflow:auto}.log-item{padding:9px 0;border-bottom:1px solid rgba(80,172,202,.1);display:grid;grid-template-columns:22px 1fr}.log-item span{font-size:13px}.log-item p{font-size:9px;line-height:1.4;color:#9bb2be;margin:0}.log-item small{font-size:6px;color:#536e7d}.action-dock{margin-top:12px;padding:10px;display:flex;gap:10px}.ability-scroll{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}.ability{min-width:82px;background:#061b2c;border:1px solid rgba(73,164,192,.19);padding:7px;color:#b8ced8}.ability.active{border-color:var(--cyan);background:rgba(28,137,167,.2);color:var(--cyan)}.ability.locked{opacity:.28}.ability span,.ability b,.ability small{display:block}.ability span{font-size:16px}.ability b{font:700 9px 'Barlow Condensed';margin-top:3px}.ability small{font:600 6px Inter;color:#7b9aaa;margin-top:2px}.btn.fire{min-width:190px;background:linear-gradient(135deg,#ec6c38,#b83427);border-color:#ff9c62;color:#fff}.result-screen{text-align:center;padding-top:10vh}.result-halo{width:120px;height:120px;margin:auto;border-radius:50%;border:1px solid var(--cyan);display:grid;place-items:center;font-size:45px;color:var(--cyan);box-shadow:0 0 60px rgba(72,217,245,.24);background:radial-gradient(circle,rgba(72,217,245,.18),transparent)}.result-screen h1{font-size:clamp(60px,12vw,110px);line-height:1;margin:16px 0 4px;color:var(--cyan);text-shadow:0 0 30px rgba(72,217,245,.4)}.result-screen>p{color:var(--muted)}.stats-grid{max-width:600px;margin:26px auto;display:grid;grid-template-columns:repeat(4,1fr)}.stat{padding:17px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat b,.stat small{display:block}.stat b{font:900 25px 'Barlow Condensed';color:var(--amber)}.stat small{font:700 6px Inter;letter-spacing:1px;color:#7e9aaa}.result-actions{display:flex;justify-content:center;gap:10px}.result-actions .btn{min-width:150px}.modal{position:fixed;inset:0;background:rgba(0,6,12,.8);z-index:100;display:none;place-items:center;padding:18px;backdrop-filter:blur(8px)}.modal.open{display:grid}.modal-card{width:min(440px,100%);padding:28px;position:relative}.modal-card h2{font-size:34px;margin:8px 0}.modal-card>p{color:var(--muted);font-size:11px;line-height:1.5}.modal-close{position:absolute;right:12px;top:10px;background:0;border:0;font-size:26px;color:#7793a3}.divider{height:1px;background:var(--line);margin:24px 0;text-align:center}.divider span{position:relative;top:-7px;background:#071b2c;padding:0 8px;font:700 7px Inter;color:#718f9f;letter-spacing:1px}.modal label{display:block;font:700 7px Inter;letter-spacing:1.3px;color:#8ba8b8;margin-top:12px}.modal input{width:100%;height:48px;background:rgba(2,14,24,.8);border:1px solid var(--line);padding:0 14px;margin-top:6px;outline:0;text-transform:none}.modal input:focus{border-color:var(--cyan)}#joinCode{text-align:center;font:800 24px 'Barlow Condensed';letter-spacing:7px;text-transform:uppercase}.setting{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(77,173,203,.13);padding:14px 0}.setting span b,.setting span small{display:block}.setting span b{font:700 11px 'Barlow Condensed';letter-spacing:1px}.setting span small{font-size:8px;color:var(--muted);margin-top:3px}.setting input{width:38px;height:20px;accent-color:var(--cyan)}.auth-link{display:block;margin:16px auto 0;background:0;border:0;color:var(--cyan);font-size:9px}.split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.toast{position:fixed;z-index:200;left:50%;bottom:calc(22px + var(--safe-bottom));transform:translate(-50%,30px);background:#102c3f;border:1px solid var(--cyan2);padding:12px 20px;color:#dff9ff;font-size:10px;box-shadow:0 10px 40px #000;opacity:0;pointer-events:none;transition:.25s;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{border-color:var(--red)}.impact{position:fixed;inset:0;z-index:150;pointer-events:none;display:none;place-items:center}.impact.show{display:grid}.impact span{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 20px 10px #ff6c34;animation:blast .65s ease-out}.impact b{position:absolute;width:30px;height:30px;border:3px solid #ffad49;border-radius:50%;animation:ring .65s ease-out}@keyframes blast{to{transform:scale(10);opacity:0}}@keyframes ring{to{transform:scale(8);opacity:0}}

@media(max-width:760px){body{background-position:58% top;background-size:auto 100vh}.topbar{height:62px;padding:0 14px}.screen{min-height:calc(100vh - 62px);padding:24px 12px calc(24px + var(--safe-bottom))}.connection span{display:none}.home-screen{padding-top:0}.hero{padding:7vh 6px 24px}.hero h1{font-size:70px}.hero>p{font-size:12px;max-width:340px}.hero-actions{display:grid}.btn.xl{width:100%}.commander-card{max-width:none}.mode-grid{grid-template-columns:1fr 1fr}.mode-card:first-child{grid-column:1/3}.intel-strip{display:grid;grid-template-columns:1fr auto}.intel-strip .progress{grid-row:2;width:100%}.deploy-layout,.battle-main{display:block}.fleet-dock{margin-top:10px}.fleet-dock #fleetList{display:flex;overflow-x:auto;gap:7px}.fleet-item{min-width:145px;margin:0}.game-board{--cell:min(8.35vw,42px);grid-template-columns:18px repeat(10,var(--cell));grid-template-rows:18px repeat(10,var(--cell))}.deploy-actions{position:sticky;bottom:calc(8px + var(--safe-bottom));z-index:5}.deploy-actions .btn{min-width:0;flex:1}.battle-screen{padding:8px 5px calc(120px + var(--safe-bottom))}.battle-status{grid-template-columns:1fr auto;padding:8px}.battle-player .ship-pips{display:none}.turn-display{grid-row:1/3;grid-column:2;border-right:0;padding-right:5px}.energy{grid-row:2;grid-column:1;text-align:left}.energy-bar{margin-left:0;width:140px}.battle-main{max-width:460px;margin:auto}.battle-side{display:none}.battle-board-wrap{padding:7px;background:rgba(3,17,29,.7);border:1px solid var(--line)}.action-dock{position:fixed;z-index:30;left:0;right:0;bottom:0;margin:0;border-left:0;border-right:0;padding:7px 7px calc(7px + var(--safe-bottom));display:block}.ability-scroll{margin-bottom:6px}.ability{min-width:72px;padding:5px}.btn.fire{width:100%;min-height:44px}.battle-tabs{margin-bottom:6px}.battle-tabs button{padding:8px 28px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.room-code strong{letter-spacing:7px}.versus{gap:12px}.player-slot{min-width:120px}.player-slot .avatar-ring{width:64px;height:64px}.vs{font-size:24px}}
@media(min-width:761px){.home-screen:before{content:'';position:fixed;inset:76px 0 0 48%;pointer-events:none;background:radial-gradient(circle at center,rgba(21,148,185,.1),transparent 55%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{animation-duration:.01ms!important;animation-iteration-count:1!important}
body{background-image:linear-gradient(180deg,rgba(2,10,18,.1),#020a13 92%),url('assets/ocean-command-bg.webp')}
.battle-screen.shake{animation:screen-shake .58s cubic-bezier(.36,.07,.19,.97) both}@keyframes screen-shake{10%,90%{transform:translate3d(-2px,1px,0)}20%,80%{transform:translate3d(4px,-2px,0)}30%,50%,70%{transform:translate3d(-7px,3px,0)}40%,60%{transform:translate3d(7px,-3px,0)}}
.cell.impact-target{overflow:visible;z-index:12;box-shadow:inset 0 0 0 2px rgba(255,225,139,.75),0 0 25px rgba(255,138,51,.38)}
.missile-impact{position:absolute;inset:0;display:block;pointer-events:none;z-index:15;overflow:visible}
.missile-impact .missile{position:absolute;left:50%;top:50%;width:9px;height:34px;border-radius:55% 55% 35% 35%;background:linear-gradient(90deg,#667983,#f5fbff 45%,#65757d);box-shadow:0 0 8px #fff;transform:translate(-50%,-230px) rotate(8deg);animation:missile-dive .78s cubic-bezier(.5,.02,.8,.45) forwards}
.missile-impact .missile:before{content:'';position:absolute;left:1px;top:-8px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:10px solid #e9f5f8}
.missile-impact .missile:after{content:'';position:absolute;left:-5px;bottom:1px;width:19px;height:12px;background:linear-gradient(90deg,transparent,#d7e7ec 25% 75%,transparent);clip-path:polygon(0 100%,30% 0,70% 0,100% 100%)}
.missile-impact .missile b{position:absolute;left:2px;bottom:100%;width:5px;height:110px;background:linear-gradient(to top,#ffec83,#ff7b27 18%,rgba(185,220,230,.55) 34%,transparent);filter:blur(1px);transform-origin:bottom;animation:missile-trail .78s ease-in forwards}
.missile-impact .impact-burst,.missile-impact .impact-wave{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%);animation-delay:.72s;animation-fill-mode:forwards}
.missile-impact .impact-wave{width:18px;height:8px;border:3px solid #c9f5ff;border-radius:50%;animation-name:water-wave;animation-duration:.85s}
.missile-impact.water .impact-burst{width:13px;height:13px;border-radius:45% 55% 50% 50%;background:#d8f8ff;box-shadow:-13px -10px 0 -4px #9eeaff,13px -7px 0 -4px #c8f6ff,0 -20px 0 -5px #fff;animation-name:water-splash;animation-duration:.85s}
.missile-impact.explosion .impact-burst{width:24px;height:24px;border-radius:50%;background:#fff4ad;box-shadow:0 0 8px 5px #ffb12f,0 0 22px 13px #ed4c20,0 0 38px 23px rgba(87,20,9,.75);animation-name:ship-explosion;animation-duration:.9s}
.missile-impact.explosion:before{content:'';position:absolute;left:50%;top:55%;width:48px;height:17px;border:2px solid #91a8b0;border-radius:45% 55% 30% 35%;background:linear-gradient(160deg,#738891 0 40%,#293c45 43% 100%);box-shadow:inset 0 -5px 0 rgba(0,0,0,.28);transform:translate(-50%,-50%);animation:hull-hit 1.45s .58s both}
.missile-impact.explosion .impact-wave{border-color:#ffbf42;width:22px;height:22px;animation-name:blast-wave;animation-duration:.8s}
@keyframes missile-dive{0%{transform:translate(-50%,-230px) rotate(8deg);opacity:0}12%{opacity:1}88%{transform:translate(-50%,-50%) rotate(8deg);opacity:1}100%{transform:translate(-50%,-50%) rotate(8deg);opacity:0}}
@keyframes missile-trail{to{height:38px;opacity:.25}}
@keyframes water-splash{0%{opacity:1;transform:translate(-50%,-30%) scale(.2)}45%{opacity:1;transform:translate(-50%,-100%) scale(1.8)}100%{opacity:0;transform:translate(-50%,-170%) scale(2.2)}}
@keyframes water-wave{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
@keyframes ship-explosion{0%{opacity:1;transform:translate(-50%,-50%) scale(.15)}38%{opacity:1;transform:translate(-50%,-50%) scale(2.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
@keyframes blast-wave{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(4.5)}}
@keyframes hull-hit{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}12%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,20%) rotate(-7deg) scale(.92)}}
.battle-cinematic{position:fixed;inset:0;z-index:600;pointer-events:none;overflow:hidden}.battle-cinematic i{position:absolute;display:block;left:var(--impact-x);top:var(--impact-y);opacity:0}.battle-cinematic .cinematic-missile{width:14px;height:52px;border-radius:55% 55% 30% 30%;background:linear-gradient(90deg,#536871,#fff 48%,#647881);box-shadow:0 0 10px 3px #fff;transform:translate(-190px,-320px) rotate(28deg)}.battle-cinematic .cinematic-missile:before{content:'';position:absolute;top:-10px;left:2px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:12px solid #f5fbff}.battle-cinematic .cinematic-trail{width:9px;height:160px;background:linear-gradient(to top,rgba(255,229,126,.98),#f56827 18%,rgba(180,225,235,.4) 45%,transparent);filter:blur(2px);transform:translate(-195px,-475px) rotate(28deg);transform-origin:bottom}.battle-cinematic .cinematic-burst{width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%) scale(.1)}.battle-cinematic .cinematic-ring{width:24px;height:13px;border:4px solid #d8f9ff;border-radius:50%;transform:translate(-50%,-50%) scale(.2)}.battle-cinematic .cinematic-hull{display:none;width:68px;height:23px;border:2px solid #a4bcc3;border-radius:48% 52% 28% 34%;background:linear-gradient(165deg,#7e949b 0 38%,#283d47 40% 100%);box-shadow:inset 0 -8px 0 rgba(0,0,0,.28);transform:translate(-50%,-50%)}.battle-cinematic.explosion .cinematic-hull{display:block}.battle-cinematic.run .cinematic-missile{animation:cinematic-missile 1.05s cubic-bezier(.24,.75,.38,1) forwards}.battle-cinematic.run .cinematic-trail{animation:cinematic-trail 1.05s cubic-bezier(.24,.75,.38,1) forwards}.battle-cinematic.run .cinematic-burst,.battle-cinematic.run .cinematic-ring,.battle-cinematic.run .cinematic-hull{animation-delay:1s;animation-fill-mode:forwards}.battle-cinematic.water.run .cinematic-burst{background:#e3fbff;box-shadow:-26px -18px 0 -7px #a6eaff,25px -15px 0 -7px #c9f7ff,0 -38px 0 -9px #fff;animation-name:cinematic-water-burst;animation-duration:1.05s}.battle-cinematic.water.run .cinematic-ring{animation-name:cinematic-water-ring;animation-duration:1.1s}.battle-cinematic.explosion.run .cinematic-burst{background:#fff2a8;box-shadow:0 0 12px 8px #ffb42e,0 0 35px 22px #ef4b20,0 0 75px 38px rgba(81,17,6,.84);animation-name:cinematic-explosion;animation-duration:1.15s}.battle-cinematic.explosion.run .cinematic-ring{border-color:#ffc13a;animation-name:cinematic-blast-ring;animation-duration:1.05s}.battle-cinematic.explosion.run .cinematic-hull{animation-name:cinematic-hull;animation-duration:1.2s}@keyframes cinematic-missile{0%{opacity:0;transform:translate(-190px,-320px) rotate(28deg)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(28deg)}}@keyframes cinematic-trail{0%{opacity:0;transform:translate(-195px,-475px) rotate(28deg)}8%,72%{opacity:1}100%{opacity:0;transform:translate(-53px,-205px) rotate(28deg)}}@keyframes cinematic-water-burst{0%{opacity:1;transform:translate(-50%,-20%) scale(.2)}42%{opacity:1;transform:translate(-50%,-115%) scale(2.7)}100%{opacity:0;transform:translate(-50%,-190%) scale(3.2)}}@keyframes cinematic-water-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(8)}}@keyframes cinematic-explosion{0%{opacity:1;transform:translate(-50%,-50%) scale(.12)}35%{opacity:1;transform:translate(-50%,-50%) scale(3)}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}@keyframes cinematic-blast-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}@keyframes cinematic-hull{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}16%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,40%) rotate(-10deg) scale(.9)}}
body.force-battle-effects .battle-cinematic.run .cinematic-missile,body.force-battle-effects .battle-cinematic.run .cinematic-trail{animation-duration:1.05s!important}body.force-battle-effects .battle-cinematic.run .cinematic-burst,body.force-battle-effects .battle-cinematic.run .cinematic-ring,body.force-battle-effects .battle-cinematic.run .cinematic-hull{animation-duration:1.15s!important}
.battle-cinematic .cinematic-vfx{position:absolute;left:var(--impact-x);top:var(--impact-y);width:min(440px,78vw);height:auto;opacity:0;transform:translate(-50%,-52%) scale(.35);filter:drop-shadow(0 20px 22px rgba(0,0,0,.55));will-change:transform,opacity}.battle-cinematic.explosion .cinematic-vfx{width:min(520px,88vw);transform:translate(-50%,-54%) scale(.25)}.battle-cinematic .cinematic-glow{width:20px;height:20px;border-radius:50%;background:#fff8c7;box-shadow:0 0 35px 16px #ff9e34,0 0 100px 45px rgba(255,59,12,.5);transform:translate(-50%,-50%) scale(.1)}.battle-cinematic .cinematic-shockwave{width:26px;height:26px;border:3px solid rgba(224,249,255,.9);border-radius:50%;transform:translate(-50%,-50%) scale(.2)}.battle-cinematic.run .cinematic-vfx{animation:aaa-water-impact 2.15s cubic-bezier(.15,.72,.23,1) both}.battle-cinematic.explosion.run .cinematic-vfx{animation-name:aaa-ship-impact}.battle-cinematic.run .cinematic-glow{animation:aaa-flash .7s .58s both}.battle-cinematic.run .cinematic-shockwave{animation:aaa-shockwave 1.25s .68s both}.battle-cinematic.explosion .cinematic-shockwave{border-color:#ffbd55}@keyframes aaa-water-impact{0%{opacity:0;transform:translate(-50%,-76%) scale(.18) rotate(-7deg)}18%{opacity:1;transform:translate(-50%,-60%) scale(.55) rotate(-2deg)}43%{opacity:1;transform:translate(-50%,-52%) scale(1.03)}72%{opacity:1;transform:translate(-50%,-52%) scale(1)}100%{opacity:0;transform:translate(-50%,-48%) scale(1.12)}}@keyframes aaa-ship-impact{0%{opacity:0;transform:translate(-50%,-82%) scale(.14) rotate(-5deg)}18%{opacity:1;transform:translate(-50%,-64%) scale(.52) rotate(-1deg)}42%{opacity:1;transform:translate(-50%,-54%) scale(1.05)}74%{opacity:1;transform:translate(-50%,-54%) scale(1)}100%{opacity:0;transform:translate(-50%,-49%) scale(1.1)}}@keyframes aaa-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}15%{opacity:1;transform:translate(-50%,-50%) scale(3)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}@keyframes aaa-shockwave{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(13)}}body.force-battle-effects .battle-cinematic.run .cinematic-vfx{animation-duration:2.15s!important}body.force-battle-effects .battle-cinematic.run .cinematic-glow{animation-duration:.7s!important}body.force-battle-effects .battle-cinematic.run .cinematic-shockwave{animation-duration:1.25s!important}