:root{--abyss: #030812;--deep: #061424;--panel: rgba(8, 22, 38, .74);--panel-2: rgba(14, 36, 58, .6);--line: rgba(94, 242, 255, .14);--line-hi: rgba(94, 242, 255, .34);--cyan: #5ef2ff;--cyan-2: #b6fbff;--ink: #e4f6ff;--muted: rgba(228, 246, 255, .64);--faint: rgba(228, 246, 255, .4);--hit: #ff5a36;--fire: #ffb03a;--sunk: #ff2d55;--ok: #3dffb0;--gold: #ffd166;--radius: 18px;--display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;--ease: cubic-bezier(.2, .9, .3, 1);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:var(--abyss);color:var(--ink);font-family:var(--display);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}h1,h2,p{margin:0}a{color:inherit}.muted{color:var(--muted)}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 #3dffb099;animation:live 2s infinite;flex:none}.app{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh}.ocean{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(1100px 700px at 15% -10%,rgba(30,120,170,.28),transparent 60%),radial-gradient(900px 700px at 110% 110%,rgba(20,70,140,.3),transparent 60%),linear-gradient(180deg,#061a2c,#04101e 55%,#02070f)}.caustics{position:absolute;inset:-40%;opacity:.16;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(120,220,255,.45),transparent) 0 0 / 220px 160px,radial-gradient(closest-side,rgba(80,200,255,.35),transparent) 110px 80px / 260px 200px;filter:blur(18px);animation:caustic 28s linear infinite}.caustics.c2{opacity:.1;animation-duration:40s;animation-direction:reverse;background-size:300px 220px,180px 140px}.gridGlow{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(94,242,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(94,242,255,.05) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}.scan{position:absolute;inset:0;opacity:.08;background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}.topbar{display:flex;align-items:center;gap:12px;width:min(1180px,100%);margin:0 auto;padding:14px clamp(14px,3vw,28px) 8px}.brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;padding:0;border:0;background:none;font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase}.brandMark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-hi);color:var(--cyan);box-shadow:0 0 14px #5ef2ff59}.iconBtn{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.iconBtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.stageArea{padding:8px clamp(14px,3vw,28px) 40px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid transparent;border-radius:12px;background:linear-gradient(180deg,#8ff7ff,#2fd2e6);box-shadow:0 10px 28px -12px #5ef2ffe6,inset 0 1px #fff9;color:#03202a;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:transform .15s,filter .2s,box-shadow .2s}.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.4}.btn.big{height:54px;font-size:16px}.btn.small{height:34px;padding:0 12px;font-size:12px}.btn.ghost{border-color:var(--line-hi);background:#5ef2ff0d;box-shadow:none;color:var(--ink)}.btn.ghost:hover:not(:disabled){background:#5ef2ff1f}.btn.danger{border-color:#ff2d5580;color:#ff8aa0}.linkBtn{justify-self:start;padding:0;border:0;background:none;color:var(--cyan);font-size:13px;letter-spacing:.06em;text-decoration:none}.linkBtn:hover{text-decoration:underline}.field{display:grid;gap:6px}.field span{color:var(--faint);font-size:11px;letter-spacing:.18em;text-transform:uppercase}input{height:44px;padding:0 14px;border:1px solid var(--line-hi);border-radius:12px;outline:none;background:#020a1499}input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #5ef2ff26}input::placeholder{color:#e4f6ff47}.panel{position:relative;display:grid;gap:14px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel:before,.panel:after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--line-hi);pointer-events:none}.panel:before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--radius)}.panel:after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--radius)}.panelHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--cyan);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.panelHead .muted{color:var(--faint);letter-spacing:.08em;text-transform:none}.hint{color:var(--faint);font-size:13px}.formError{flex-basis:100%;color:#ff8aa0;font-size:13px}.code{padding:2px 8px;border:1px solid var(--line-hi);border-radius:6px;color:var(--cyan);font-family:var(--mono);font-weight:600;letter-spacing:.2em}.home{display:grid;gap:clamp(22px,3vw,34px);width:min(1180px,100%);margin:0 auto}.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);align-items:center;gap:24px}.heroCopy{display:grid;gap:18px;animation:rise .7s var(--ease) both}.logo{display:grid;line-height:.86;font-size:clamp(54px,9vw,112px);font-weight:700;letter-spacing:.02em;text-transform:uppercase}.logo span{background:linear-gradient(180deg,#fff 10%,#a6f7ff 55%,#2fd2e6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(94,242,255,.35))}.logo .logo2{background:none;color:transparent;-webkit-text-stroke:2px var(--cyan);filter:drop-shadow(0 0 14px rgba(94,242,255,.55))}.lede{max-width:46ch;color:var(--muted);font-size:clamp(15px,1.5vw,18px)}.fleetParade{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}.paradeShip{width:calc(var(--len) * 30px);height:30px;animation:rise .6s var(--ease) calc(var(--i) * 90ms + .3s) both,bob 3.4s ease-in-out calc(var(--i) * -.6s) infinite}.scope{position:relative;justify-self:center;width:min(360px,78vw);aspect-ratio:1;overflow:hidden;border:1px solid var(--line-hi);border-radius:50%;background:radial-gradient(circle,#5ef2ff1a,#04121feb 70%);box-shadow:0 0 70px #5ef2ff29,inset 0 0 50px #000000a6}.scope.small{width:120px}.scope .ring{position:absolute;inset:16%;border:1px solid var(--line);border-radius:50%}.scope .ring.r2{inset:32%}.scope .ring.r3{inset:44%}.scope .axis{position:absolute;background:var(--line)}.scope .axis.h{top:50%;right:0;left:0;height:1px}.scope .axis.v{top:0;bottom:0;left:50%;width:1px}.scopeSweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 280deg,rgba(94,242,255,.06) 310deg,rgba(94,242,255,.5) 360deg);animation:sweep 4s linear infinite}.blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--hit);box-shadow:0 0 14px var(--hit);opacity:0;animation:blip 4s linear infinite}.blip.b1{top:26%;left:63%;animation-delay:.4s}.blip.b2{top:64%;left:70%;animation-delay:1.5s}.blip.b3{top:58%;left:24%;animation-delay:2.6s}.resume{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid rgba(61,255,176,.45);border-radius:var(--radius);background:linear-gradient(90deg,#3dffb01f,#081626b3);text-align:left;animation:rise .5s var(--ease) both}.resume span:nth-child(2){display:grid;flex:1}.resume small{color:var(--muted)}.resume .arrow{color:var(--ok);font-weight:700;letter-spacing:.06em;text-transform:uppercase}.modes,.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.level{display:grid;align-content:start;gap:4px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s}.level:hover{transform:translateY(-2px)}.level.active{border-color:var(--cyan);box-shadow:0 0 24px #5ef2ff33,inset 0 0 0 1px #5ef2ff40}.levelName{color:var(--cyan);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.captain{font-weight:600}.blurb{color:var(--faint);font-size:12px}.stars{margin-top:4px;color:var(--gold);letter-spacing:.2em}.stars i{color:#ffffff26;font-style:normal}.joinRow{display:flex;gap:8px}.joinRow input{flex:1;min-width:0;font-family:var(--mono);letter-spacing:.4em;text-transform:uppercase}.service{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.service div{display:grid;gap:2px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#020a1466}.service b{font-family:var(--mono);font-size:22px}.service span{color:var(--faint);font-size:11px}.rules{margin:0;padding-left:18px;color:var(--muted);font-size:13px}.foot{display:flex;justify-content:center;gap:10px;color:var(--faint);font-size:13px}.foot a{text-decoration:none}.foot a:hover{color:var(--cyan)}.leaderboard{display:grid;gap:10px}.tabs{display:flex;gap:6px}.tabs button{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.tabs button.active{border-color:var(--cyan);background:#5ef2ff1a;color:var(--cyan)}.board{display:grid;gap:3px;margin:0;padding:0;list-style:none}.board li{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;font-size:14px}.board li:nth-child(odd){background:#5ef2ff08}.board li.mine{background:#5ef2ff24;box-shadow:inset 0 0 0 1px #5ef2ff66}.rank{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--faint);font-family:var(--mono);font-size:12px}.podium .rank{color:#0b1724;font-weight:700}.p1 .rank{background:linear-gradient(180deg,#ffe7a3,#f0b649)}.p2 .rank{background:linear-gradient(180deg,#eef3f8,#a9b6c4)}.p3 .rank{background:linear-gradient(180deg,#f3c9a4,#c07d4c)}.who{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.shots{font-family:var(--mono);font-weight:600}.shots small,.time,.when{color:var(--faint);font-family:var(--mono);font-size:11px}.empty{padding:12px 0;color:var(--muted)}.seaFrame{display:grid;gap:8px;min-width:0}.seaHead{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cyan);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.seaGrid{--lab: 22px;display:grid;grid-template-columns:var(--lab) minmax(0,1fr);grid-template-rows:var(--lab) auto}.compact .seaGrid{--lab: 15px}.colLabels,.rowLabels{display:grid;color:var(--faint);font-family:var(--mono);font-size:11px;text-align:center}.compact .colLabels,.compact .rowLabels{font-size:9px}.colLabels{grid-area:1 / 2;grid-template-columns:repeat(10,1fr);align-items:center}.rowLabels{grid-area:2 / 1;grid-template-rows:repeat(10,1fr);align-items:center}.colLabels span.on,.rowLabels span.on{color:var(--cyan);font-weight:600;text-shadow:0 0 8px var(--cyan)}.sea{position:relative;grid-area:2 / 2;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);aspect-ratio:1;overflow:hidden;border:1px solid var(--line-hi);border-radius:8px;background:radial-gradient(120% 100% at 30% 0%,rgba(20,90,130,.55) 0%,transparent 60%),linear-gradient(180deg,#0a2b44,#061a2c 60%,#04121f);box-shadow:0 30px 60px -30px #000000e6,inset 0 0 40px #00000073;container-type:inline-size;touch-action:manipulation}.placeSea .sea{touch-action:none}.waterTex{position:absolute;inset:0;opacity:.35;background:radial-gradient(ellipse 30% 8% at 20% 30%,rgba(150,230,255,.18),transparent),radial-gradient(ellipse 25% 6% at 70% 60%,rgba(150,230,255,.15),transparent),radial-gradient(ellipse 35% 7% at 40% 85%,rgba(150,230,255,.12),transparent);background-size:200% 200%;animation:waves 16s ease-in-out infinite alternate;pointer-events:none}.cell{position:relative;min-width:0;padding:0;border:0;border-right:1px solid rgba(94,242,255,.07);border-bottom:1px solid rgba(94,242,255,.07);background:transparent}.enemy .cell{cursor:default}.enemy.armed .cell:not(:disabled){cursor:crosshair}.enemy.armed .cell:not(:disabled):hover,.enemy.armed .cell:not(:disabled):focus-visible{background:#5ef2ff1a}.enemy .cell:focus-visible{z-index:6;outline-offset:-2px}.sweep{position:absolute;inset:-25%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(94,242,255,.04) 330deg,rgba(94,242,255,.14) 360deg);opacity:.4;pointer-events:none;animation:sweep 6s linear infinite}.armed .sweep{opacity:1;animation-duration:3.6s}.armed .sea{border-color:#5ef2ff99;box-shadow:0 0 0 1px #5ef2ff26,0 0 40px #5ef2ff1f,inset 0 0 40px #00000073}.shipSlot{position:absolute;z-index:2;padding:.5cqw;pointer-events:none}.ship{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));transition:filter .6s}.ship .rim{stroke:#b6fbff8c;stroke-width:1.5;vector-effect:non-scaling-stroke}.ship .wake{fill:none;stroke:#dcf5ff38;stroke-width:2;vector-effect:non-scaling-stroke}.ship.sunk{filter:grayscale(.55) sepia(.35) brightness(.72) drop-shadow(0 0 6px rgba(255,45,85,.65))}.ship.sunk .rim{stroke:#ff2d55bf}.ship.sunk .wake{display:none}.ship.ghost{opacity:.8;filter:drop-shadow(0 0 8px rgba(61,255,176,.6))}.ship.ghost .rim{stroke:var(--ok)}.ship.invalid{opacity:.6;filter:grayscale(.4) drop-shadow(0 0 8px rgba(255,45,85,.9))}.ship.invalid .rim{stroke:var(--sunk)}.enemy .shipSlot.sunk{animation:surface .9s var(--ease) both}.shipSlot.revealed .ship{opacity:.55;filter:grayscale(.2) drop-shadow(0 0 6px rgba(255,209,102,.45))}.shipSlot.revealed .ship .rim{stroke:var(--gold)}.shipSlot.draggable{pointer-events:auto;cursor:grab;touch-action:none}.shipSlot.draggable:hover .ship{filter:drop-shadow(0 0 10px rgba(94,242,255,.6))}.shipSlot.lifted{opacity:.25}.shipSlot.shake{animation:deny .4s ease}.ghostSlot{z-index:4}.footprint{position:absolute;z-index:1;border-radius:6px;pointer-events:none}.footprint.ok{background:#3dffb024;box-shadow:inset 0 0 0 2px #3dffb0bf}.footprint.bad{background:#ff2d5524;box-shadow:inset 0 0 0 2px #ff2d55bf}.floatingShip{position:fixed;top:0;left:0;z-index:80;pointer-events:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}.stamp{position:absolute;top:50%;left:50%;z-index:7;padding:.3cqw 1.4cqw;border:.45cqw solid var(--sunk);border-radius:.8cqw;color:var(--sunk);font-size:3.4cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 10px rgba(255,45,85,.6);box-shadow:0 0 18px #ff2d5573;background:#1e040a8c;animation:stamp .55s cubic-bezier(.3,1.6,.5,1) .25s both;--rot: -8deg}.stamp.v{--rot: 82deg}.mark{position:absolute;z-index:3;display:grid;place-items:center;pointer-events:none}.mark.miss:before{content:"";width:24%;aspect-ratio:1;border-radius:50%;background:#d6f0ffd9;box-shadow:0 0 10px #b6fbffb3}.mark.water:before{content:"";width:14%;aspect-ratio:1;border-radius:50%;background:#b6fbff52}.mark.water.fresh:before{animation:waterIn .5s ease both;animation-delay:calc(var(--o, 0) * 35ms + .3s)}.mark.hit{z-index:4}.mark.hit:before{content:"";position:absolute;inset:26%;border-radius:50%;box-shadow:0 0 1.6cqw .6cqw #ff5a368c}.fire{position:absolute;inset:14%}.fire span{position:absolute;inset:0;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 50% 70%,#fff4b8 0 16%,#ffb03a 36%,#ff5a36 58%,transparent 72%);mix-blend-mode:screen;animation:flicker .8s ease-in-out infinite alternate}.fire span:nth-child(2){inset:10% 20% 22%;animation-duration:.6s;animation-delay:-.3s}.fire span:nth-child(3){inset:26% 6% 6%;opacity:.7;animation-duration:1.1s;animation-delay:-.6s}.mark.hit.sunk .fire{inset:26%}.mark.hit.sunk .fire span{background:radial-gradient(circle at 50% 70%,#ffcf9a 0 10%,#ff5a36 32%,#6e0d1c 60%,transparent 72%);opacity:.75}.boom{position:absolute;inset:-70%;z-index:8;pointer-events:none}.boom .flash{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#fff 0 14%,#ffe08a 28%,rgba(255,110,54,.85) 48%,transparent 70%);animation:flash .6s ease-out forwards}.boom .smoke{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(70,80,92,.75),transparent 66%);animation:smoke 1.5s ease-out .15s both}.boom i{position:absolute;top:50%;left:50%;width:.8cqw;height:.8cqw;margin:-.4cqw;border-radius:50%;background:#ffd27a;box-shadow:0 0 1cqw #ff8a3d;animation:debris .75s cubic-bezier(.1,.7,.3,1) forwards}.splash{position:absolute;inset:-45%;z-index:8;pointer-events:none}.splash .ring{position:absolute;inset:36%;border:.35cqw solid rgba(182,251,255,.9);border-radius:50%;animation:ripple .95s ease-out both}.splash .r2{animation-delay:.14s}.splash .r3{animation-delay:.28s}.splash i{position:absolute;top:50%;left:50%;width:.6cqw;height:.6cqw;margin:-.3cqw;border-radius:50%;background:#e6fbff;animation:droplet .6s ease-out forwards}.cross{position:absolute;z-index:5;background:#5ef2ff47;pointer-events:none}.cross.h{right:0;left:0;height:1px}.cross.v{top:0;bottom:0;width:1px}.reticle{position:absolute;z-index:6;border:2px solid var(--cyan);border-radius:4px;pointer-events:none;box-shadow:0 0 14px #5ef2ffb3,inset 0 0 8px #5ef2ff66}.reticle:before,.reticle:after{content:"";position:absolute;top:50%;left:50%;background:var(--cyan)}.reticle:before{width:40%;height:2px;transform:translate(-50%,-50%)}.reticle:after{width:2px;height:40%;transform:translate(-50%,-50%)}.reticle.enemyAim{border-color:var(--hit);box-shadow:0 0 16px #ff5a36e6,inset 0 0 8px #ff5a3680;animation:lockOn .65s var(--ease) both}.reticle.enemyAim:before,.reticle.enemyAim:after{background:var(--hit)}.placement{display:grid;gap:18px;width:min(1100px,100%);margin:0 auto;animation:rise .5s var(--ease) both}.placement.busy{pointer-events:none}.placeHead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}.placeHead h1{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:.02em}.placeHead .lede{margin-top:4px}.placeBody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:start;gap:24px}.dock{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}.dockHead{display:flex;justify-content:space-between;color:var(--cyan);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.dockList{display:grid;gap:8px;margin:0;padding:0;list-style:none}.dockShip{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);text-align:left;cursor:grab;touch-action:none;transition:border-color .2s,box-shadow .2s,opacity .2s}.dockShip:hover:not(:disabled){border-color:var(--line-hi)}.dockShip.selected{border-color:var(--cyan);box-shadow:0 0 20px #5ef2ff40}.dockShip.placed{cursor:default;opacity:.4}.dockSilhouette{flex:none;width:calc(var(--len) * 26px);height:26px}.dockName{display:grid;font-weight:600}.dockName small{color:var(--faint);font-weight:400}.dockTools{display:flex;flex-wrap:wrap;gap:8px}.dockTools .btn{flex:1 1 auto}.rotIcon{display:inline-block;transition:transform .3s var(--ease)}.rotIcon.v{transform:rotate(90deg)}.battle{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr);align-items:start;gap:22px;width:min(1180px,100%);margin:0 auto}.battleMain,.battleSide{display:grid;gap:12px;min-width:0}.battleMain>.seaFrame{justify-self:center;width:min(100%,max(320px,calc(100dvh - 215px)))}.battle.online .battleMain>.seaFrame{width:min(100%,max(320px,calc(100dvh - 305px)))}.banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color .3s,box-shadow .3s}.banner.mine{border-color:#5ef2ff8c;box-shadow:0 0 26px #5ef2ff29}.banner .turn{font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.banner.mine .turn{color:var(--cyan);text-shadow:0 0 14px rgba(94,242,255,.6);animation:breathe 1.8s ease-in-out infinite}.banner.theirs .turn{color:var(--fire)}.bannerStats{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:13px}.bannerStats b{color:var(--ink)}.fleets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fleetStatus,.logPanel{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.fleetStatus .panelHead{font-size:10px}.fleetStatus ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}.fleetStatus li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px}.miniShip{display:block;width:calc(var(--len) * 9px);height:11px}.fleetName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fleetStatus li.sunk .fleetName{color:var(--faint);text-decoration:line-through}.pips{display:flex;gap:2px}.pips i{width:6px;height:6px;border-radius:50%;background:#5ef2ff4d}.pips i.hit{background:var(--hit);box-shadow:0 0 6px var(--hit)}.log{display:grid;gap:4px;max-height:190px;margin:0;padding:0 4px 0 0;overflow:auto;list-style:none;font-family:var(--mono);font-size:12.5px;scrollbar-width:thin}.log li{animation:logIn .35s var(--ease) both}.log b{margin-right:6px;color:var(--cyan)}.log-sys{color:var(--muted)}.log-hit,.log-sunk{color:var(--fire)}.log-sunk span{font-weight:600;color:#ffcf6a}.log-them-hit,.log-them-sunk{color:#ff8a7a}.log-them-hit b,.log-them-sunk b,.log-them-miss b,.log-taunt b{color:var(--fire)}.log-taunt{color:var(--cyan-2);font-style:italic}.log-win{color:var(--ok);font-weight:600}.log-lose{color:var(--sunk);font-weight:600}.onlineBar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;width:min(1180px,100%);margin:0 auto 14px}.vs{display:inline-flex;align-items:center;gap:6px;margin-right:auto}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--faint)}.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.off{background:var(--sunk)}.netWarn{color:var(--fire);font-size:13px}.invite{display:grid;gap:8px;max-width:520px;padding:12px 14px;border:1px solid rgba(61,255,176,.4);border-radius:14px;background:#3dffb00f;font-size:14px}.invite.joined{display:flex;align-items:center;gap:8px}.inviteRow{display:flex;gap:8px}.inviteRow input{flex:1;min-width:0;height:34px;color:var(--cyan);font-family:var(--mono);font-size:12px}.waiting{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.radarDot{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:live 1.6s infinite}.emoteBar{position:relative;display:flex;flex-wrap:wrap;gap:6px}.emote{width:40px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:18px;transition:transform .15s}.emote:hover{transform:translateY(-2px) scale(1.08)}.bubble{position:absolute;top:-6px;right:0;padding:6px 12px;border:1px solid var(--line-hi);border-radius:14px;background:#081626f2;font-size:15px;animation:bubble 2.4s var(--ease) forwards}.bubble.them{border-color:#ffb03a99}.toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;z-index:90;padding:10px 18px;border:1px solid var(--line-hi);border-radius:12px;background:#081626f2;box-shadow:0 20px 40px #00000080;transform:translate(-50%);animation:toast 2.6s var(--ease) forwards}.centerCard{justify-items:center;width:min(560px,100%);margin:6vh auto 0;padding:28px;text-align:center}.centerCard h2{font-size:clamp(22px,3vw,30px)}.centerCard .invite{text-align:left}.endOverlay{position:absolute;inset:-10px;z-index:30;display:grid;place-items:start center;padding:clamp(20px,8vh,90px) 10px 20px;border-radius:20px;background:#0208108c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .5s ease .6s both}.endCard{position:relative;display:grid;justify-items:center;gap:12px;width:min(520px,100%);padding:26px 22px 22px;border:1px solid var(--line-hi);border-radius:22px;background:linear-gradient(180deg,#0a1e32f7,#040e1af7);box-shadow:0 40px 80px #0009,0 0 60px #5ef2ff26;text-align:center;animation:rise .6s var(--ease) .7s both}.lose .endCard{border-color:#ff2d5573;box-shadow:0 40px 80px #0009,0 0 60px #ff2d5526}.endGlyph{font-size:42px;line-height:1;filter:drop-shadow(0 0 16px rgba(94,242,255,.6))}.lose .endGlyph{filter:drop-shadow(0 0 16px rgba(255,45,85,.6))}.lose .eyebrow{color:var(--sunk)}.endCard h2{font-size:clamp(26px,3.4vw,36px);font-weight:700}.endSub{color:var(--muted)}.endStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}.endStats div{display:grid;gap:2px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;background:#020a1480}.endStats b{font-family:var(--mono);font-size:20px}.endStats span{color:var(--faint);font-size:11px}.endActions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.endCard .leaderboard{width:100%;text-align:left}.saveForm{display:flex;flex-wrap:wrap;gap:8px;width:100%}.saveForm input{flex:1 1 160px;min-width:0}.rankLine{color:var(--cyan);font-weight:600}.admin{text-align:left;justify-items:stretch}.adminHead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.adminList{display:grid;gap:6px;margin:0;padding:0;list-style:none}.adminList li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}.adminList .who{display:grid}.adminList small{color:var(--faint);font-weight:400}@media(max-width:960px){.hero,.modes,.panels,.placeBody{grid-template-columns:1fr}.hero .scope{order:-1;width:min(240px,60vw)}.battle{grid-template-columns:1fr}.battleSide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.battleSide .fleets{grid-template-columns:1fr}.battleSide .logPanel{grid-column:1 / -1}}@media(max-width:560px){.levels{grid-template-columns:1fr}.level{grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:10px}.level .blurb{grid-column:1 / -1}.level .stars{grid-row:1;grid-column:3;margin:0}.seaGrid{--lab: 16px}.colLabels,.rowLabels{font-size:9.5px}.service,.endStats{grid-template-columns:repeat(2,minmax(0,1fr))}.board li{grid-template-columns:26px minmax(0,1fr) auto auto}.board .when{display:none}.banner .turn{font-size:15px}.bannerStats{margin-left:0;font-size:12px}.dockSilhouette{width:calc(var(--len) * 20px);height:20px}.fleetParade{gap:10px 12px}.paradeShip{width:calc(var(--len) * 22px);height:22px}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes live{0%{box-shadow:0 0 #3dffb08c}70%,to{box-shadow:0 0 0 9px #3dffb000}}@keyframes caustic{0%{transform:translate(0) rotate(0)}to{transform:translate(-220px,-160px) rotate(8deg)}}@keyframes waves{0%{background-position:0% 0%}to{background-position:100% 60%}}@keyframes sweep{to{transform:rotate(360deg)}}@keyframes blip{0%{opacity:1;transform:scale(1.3)}12%{transform:scale(1)}70%,to{opacity:0}}@keyframes bob{0%,to{translate:0 0;rotate:0deg}50%{translate:0 -3px;rotate:-.6deg}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.6}}@keyframes flicker{0%{transform:scale(.92) translateY(2%);opacity:.85}to{transform:scale(1.06) translateY(-4%);opacity:1}}@keyframes flash{0%{transform:scale(.3);opacity:1}60%{opacity:.9}to{transform:scale(1.25);opacity:0}}@keyframes smoke{0%{transform:scale(.4);opacity:0}30%{opacity:.9}to{transform:scale(1.4) translateY(-12%);opacity:0}}@keyframes debris{0%{transform:rotate(var(--a)) translate(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translate(calc(var(--d) * 1cqw)) scale(.3);opacity:0}}@keyframes ripple{0%{transform:scale(.2);opacity:.95}to{transform:scale(1.5);opacity:0}}@keyframes droplet{0%{transform:rotate(var(--a)) translate(0);opacity:1}to{transform:rotate(var(--a)) translate(5cqw);opacity:0}}@keyframes waterIn{0%{transform:scale(3);opacity:0}to{transform:none;opacity:1}}@keyframes lockOn{0%{transform:scale(2.6) rotate(45deg);opacity:0}70%{transform:scale(.92) rotate(0);opacity:1}to{transform:scale(1);opacity:1}}@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);opacity:1}}@keyframes surface{0%{opacity:0;filter:brightness(3) drop-shadow(0 0 20px rgba(255,90,54,.9))}to{opacity:1;filter:none}}@keyframes deny{0%,to{translate:0 0}25%{translate:-4px 0}75%{translate:4px 0}}@keyframes logIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes bubble{0%{opacity:0;transform:translateY(8px) scale(.8)}12%{opacity:1;transform:translateY(-6px) scale(1.05)}80%{opacity:1;transform:translateY(-10px) scale(1)}to{opacity:0;transform:translateY(-18px)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,6px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.caustics,.sweep,.scopeSweep{display:none}}