@font-face{font-family:Gorilla Warfare Spaced;src:url(/fonts/gorillawarfarespaced.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Gunplay;src:url(/fonts/gunplay-regular.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:No Safety Zone;src:url(/fonts/no-safety-zone.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:oklch(15% .018 240);--bg-deep:oklch(10% .016 240);--surface:oklch(30% .02 238);--surface-high:oklch(38% .022 238);--surface-low:oklch(22% .018 240);--steel-hi:oklch(50% .02 235);--steel-lo:oklch(18% .018 240);--ink:oklch(96% .01 240);--ink-dim:oklch(80% .014 238);--muted:oklch(62% .02 238);--muted-low:oklch(46% .02 238);--sonar:oklch(78% .15 175);--sonar-dim:oklch(55% .12 175);--sonar-ink:oklch(14% .03 175);--water:oklch(40% .09 235);--water-deep:oklch(30% .075 238);--water-shimmer:oklch(52% .1 220);--grid-line:oklch(10% .016 240/.8);--hit:oklch(64% .2 35);--hit-dim:oklch(40% .14 30);--miss:oklch(86% .045 210);--sunk:oklch(24% .05 25);--good:var(--sonar);--bad:oklch(62% .2 25);--font-display:"Rajdhani", "Eurostile", "Bank Gothic", ui-sans-serif, system-ui, sans-serif;--font-title:"Gunplay", var(--font-display);--font-tagline:"No Safety Zone", var(--font-display);--font-body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;--font-mono:"SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:18px;--radius-pill:999px;--cell-size:clamp(20px, calc((100vw - 114px) / 10), 42px);--cell-size-desktop:clamp(32px, 4vw, 44px);--board-gutter:20px;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--dur-fast:.15s;--dur-base:.24s;--dur-slow:.42s;--dur-splash:.65s;--dur-explosion:.7s;--dur-sink:1.4s;--shadow-panel:0 1px 0 oklch(100% 0 0/.06) inset, 0 -1px 0 oklch(0% 0 0/.4) inset, 0 18px 40px oklch(0% 0 0/.5);--shadow-raised:0 10px 24px oklch(0% 0 0/.4);--shadow-btn:0 1px 0 oklch(100% 0 0/.15) inset, 0 6px 16px oklch(0% 0 0/.35);--z-board:1;--z-overlay:10;--z-banner:20;--z-toast:30}@media (width>=720px){:root{--cell-size:var(--cell-size-desktop)}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background-color:var(--bg);background-image:radial-gradient(120% 90% at 50% -10%, oklch(32% .035 210) 0%, transparent 62%), linear-gradient(180deg, transparent 45%, oklch(8% .016 240) 100%), linear-gradient(oklch(8% .016 240/.6), oklch(8% .016 240/.9)),  var(--page-background);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;margin:0;position:relative}body:before{content:"";z-index:0;pointer-events:none;mix-blend-mode:screen;background-color:#0000;background-image:radial-gradient(55% 45% at 20% 25%,oklch(40% .09 235/.16) 0%,#0000 70%),radial-gradient(50% 40% at 82% 65%,oklch(52% .1 220/.12) 0%,#0000 70%),radial-gradient(65% 55% at 50% 105%,oklch(30% .075 238/.22) 0%,#0000 70%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:200% 200%;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;animation:50s ease-in-out infinite alternate water-drift;position:fixed;inset:0}body:after{content:"";z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.28;transform-origin:50% -60%;background:repeating-conic-gradient(from -20deg at 50% -60%,#0000 0deg,oklch(88% .05 195/.09) 4deg,#0000 9deg 10.5deg,oklch(88% .05 195/.07) 11.5deg,#0000 12.5deg 14deg,oklch(88% .05 195/.09) 16deg,#0000 18.5deg 20deg,oklch(88% .05 195/.11) 21.8deg,#0000 23.2deg 26deg);animation:24s ease-in-out infinite alternate rays-sway;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000 0%,#0000 55%);mask-image:linear-gradient(#000 0%,#0000 55%)}#root{z-index:1;height:auto;min-height:100%;position:relative}@keyframes rays-sway{0%{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}@keyframes water-drift{0%{background-position:0 0,100% 100%,50% 100%}50%{background-position:15% 20%,70% 55%,42% 92%}to{background-position:5% 10%,90% 75%,58% 96%}}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;text-wrap:balance;margin:0;font-weight:700}p{color:var(--ink-dim);text-wrap:pretty;margin:0}button{color:inherit;font-family:inherit}.app{min-height:100dvh;padding:var(--space-5) var(--space-4) var(--space-8);justify-content:center;align-items:center;gap:var(--space-5);flex-direction:column;display:flex}.app__credit{align-items:center;gap:var(--space-2);letter-spacing:.02em;color:var(--muted-low);opacity:.75;font-size:.7rem;display:flex}.app__credit span{margin-right:-18px}.app__credit-logo{width:auto;height:80px}.btn{appearance:none;cursor:pointer;font-family:var(--font-display);letter-spacing:.02em;border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);transition:transform var(--dur-fast) var(--ease-out-quart), filter var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);border:none;font-size:1rem;font-weight:600}.btn:active{transform:translateY(1px)scale(.99)}.btn:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}.btn--primary{color:#fff;text-shadow:1px 1px 2px #000000e6;box-shadow:var(--shadow-btn);background:linear-gradient(oklch(82% .15 175),oklch(68% .15 175))}.btn--primary:hover{filter:brightness(1.08)}.btn--primary:disabled{background:var(--surface-low);color:var(--muted-low);box-shadow:none;cursor:not-allowed}.btn--ghost{background:var(--surface);color:var(--ink-dim);box-shadow:inset 0 1px oklch(100% 0 0/.08),0 4px 10px oklch(0% 0 0/.3)}.btn--ghost:hover{background:var(--surface-high);color:var(--ink)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.metal-frame{padding:var(--space-2) var(--space-2) var(--space-3);border-radius:var(--radius-lg);background:repeating-linear-gradient(115deg, oklch(100% 0 0/.035) 0px, transparent 1.5px 6px), linear-gradient(155deg, var(--steel-hi) 0%, var(--surface) 35%, var(--surface-low) 70%, var(--steel-lo) 100%);box-shadow:0 1px 0 oklch(100% 0 0/.25) inset, 0 -2px 6px oklch(0% 0 0/.5) inset, var(--shadow-raised);width:fit-content;max-width:100%;position:relative}.metal-frame--enemy{background:repeating-linear-gradient(115deg,oklch(100% 0 0/.03) 0,#0000 1.5px 6px),linear-gradient(155deg,oklch(42% .03 25) 0%,oklch(28% .03 25) 35%,oklch(20% .02 25) 70%,oklch(14% .02 25) 100%)}.metal-frame__label{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);padding:var(--space-1) var(--space-2) var(--space-2);text-shadow:0 1px oklch(0% 0 0/.4);font-size:.72rem;font-weight:700}.metal-frame__rivets{border-radius:calc(var(--radius-lg) - 4px);pointer-events:none;background-image:radial-gradient(circle,oklch(0% 0 0/.5) 0 1px,oklch(100% 0 0/.18) 1px 1.6px,#0000 1.6px);background-position:6px 6px,calc(100% - 6px) 6px,6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px);background-repeat:no-repeat;background-size:8px 8px;position:absolute;inset:6px}.metal-frame__inner{border-radius:var(--radius-md);padding:var(--space-2);background:var(--bg-deep);box-shadow:inset 0 2px 10px oklch(0% 0 0/.6)}@media (width<=375px){.metal-frame__label{text-align:center}}.board{grid-template-columns:var(--board-gutter) repeat(10, var(--cell-size));grid-template-rows:var(--board-gutter) repeat(10, var(--cell-size));gap:3px;width:fit-content;display:grid;position:relative}.board__water{grid-template-columns:var(--board-gutter) repeat(10, var(--cell-size));grid-template-rows:var(--board-gutter) repeat(10, var(--cell-size));pointer-events:none;z-index:0;gap:3px;display:grid;position:absolute;inset:0}.board__water-defs{width:0;height:0;position:absolute;overflow:hidden}.board__water-fill{background-color:var(--water-deep);filter:url(#water-flow);border-radius:4px;grid-area:2/2/-1/-1;overflow:hidden}.board__grid-lines{z-index:1;background-image:repeating-linear-gradient(to right, transparent 0, transparent var(--cell-size), var(--grid-line) var(--cell-size), var(--grid-line) calc(var(--cell-size) + 3px)), repeating-linear-gradient(to bottom, transparent 0, transparent var(--cell-size), var(--grid-line) var(--cell-size), var(--grid-line) calc(var(--cell-size) + 3px));grid-area:2/2/-1/-1}.board__ships{grid-template-columns:var(--board-gutter) repeat(10, var(--cell-size));grid-template-rows:var(--board-gutter) repeat(10, var(--cell-size));pointer-events:none;z-index:1;gap:3px;display:grid;position:absolute;inset:0}.board__corner{width:100%;height:100%}.board__label{font-family:var(--font-mono);color:var(--muted);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:.68rem;font-weight:600;display:flex}.board__label--col{height:100%}.board__label--row{width:100%}.cell{width:var(--cell-size);height:var(--cell-size);appearance:none;cursor:default;background:0 0;border:none;border-radius:4px;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 1px oklch(100% 0 0/.08),inset 0 -1px 2px oklch(0% 0 0/.35)}.cell__fx{pointer-events:none;position:absolute;inset:0}.cell--interactive{cursor:url(/img/target.svg) 16 16,crosshair}.cell--interactive:hover{box-shadow:0 0 0 2px var(--sonar) inset, 0 1px 0 oklch(100% 0 0/.08) inset}.cell--interactive:hover .cell__fx:before{content:"";background:oklch(100% 1 1/.08);border-radius:3px;position:absolute;inset:3px}.cell:disabled{cursor:default}.cell--ship{box-shadow:inset 0 2px 6px oklch(0% 0 0/.35)}.ship-sprite{filter:drop-shadow(0 2px 3px oklch(0% 0 0/.5));position:relative;container-type:size}.ship-sprite__img{transition:opacity var(--dur-sink) var(--ease-out-quart);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ship-sprite__img--outline{opacity:0}.ship-sprite--sunk .ship-sprite__img--outline{opacity:.55}.ship-sprite--sunk .ship-sprite__img:not(.ship-sprite__img--outline){opacity:0}.ship-sprite--h:not(.ship-sprite--rotated) .ship-sprite__img{width:100%;height:auto}.ship-sprite--h.ship-sprite--rotated .ship-sprite__img{width:auto;height:100cqw;transform:translate(-50%,-50%)rotate(90deg)}.ship-sprite--v:not(.ship-sprite--rotated) .ship-sprite__img{width:auto;height:100%}.ship-sprite--v.ship-sprite--rotated .ship-sprite__img{width:100cqh;height:auto;transform:translate(-50%,-50%)rotate(90deg)}.ship-sprite--sunk{filter:drop-shadow(0 1px 2px oklch(0% 0 0/.4))}.ship-sprite__wake{background:radial-gradient(oklch(90% .03 200/.3) 0%,#0000 70%);border-radius:999px;animation:4.5s ease-in-out infinite wake-pulse;position:absolute;inset:-18%}@keyframes wake-pulse{0%,to{opacity:.5;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}@media (prefers-reduced-motion:reduce){.ship-sprite__wake{opacity:.6;animation:none}}.cell--miss,.cell--hit,.cell--sunk,.cell--last-shot,.cell--preview-valid,.cell--preview-invalid{z-index:2}.cell--miss{background:linear-gradient(160deg, var(--water) 0%, var(--water-deep) 100%)}.cell--miss .cell__fx:before{content:"";background:var(--miss);opacity:.85;border-radius:50%;width:40%;height:40%;margin:-20% 0 0 -20%;position:absolute;top:50%;left:50%;box-shadow:0 0 6px oklch(100% 1 1/.5)}.cell--miss .cell__fx:after{content:"";border:2px solid var(--miss);width:20%;height:20%;animation:splash-ring var(--dur-splash) var(--ease-out-expo) forwards;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cell--hit{background:0 0}.cell--hit .cell__fx:before{content:"";background:radial-gradient(circle, oklch(72% .19 45) 0%, var(--hit) 55%, transparent 75%);width:46%;height:46%;animation:hit-flash var(--dur-explosion) var(--ease-out-expo) forwards;border-radius:50%;margin:-23% 0 0 -23%;position:absolute;top:50%;left:50%}.cell--hit .cell__fx:after{content:"";width:24%;height:24%;animation:2.8s ease-out infinite smoke-rise;animation-delay:calc(var(--dur-explosion) * -1 + .3s);background:radial-gradient(circle,oklch(32% .01 60/.6) 0%,#0000 72%);border-radius:50%;position:absolute;bottom:54%;left:50%}.cell--sunk{animation:sink-down var(--dur-sink) var(--ease-out-quart) both;background:0 0}.cell--sunk .cell__fx:before{content:"";opacity:.7;background:radial-gradient(circle,oklch(35% .02 25/.6) 0%,#0000 70%);border-radius:50%;width:55%;height:55%;margin:-27.5% 0 0 -27.5%;position:absolute;top:50%;left:50%}.cell--preview-valid{box-shadow:0 0 0 2px var(--sonar) inset}.cell--preview-valid:before{content:"";z-index:1;background:oklch(78% .15 175/.28);position:absolute;inset:0}.cell--preview-invalid{box-shadow:0 0 0 2px var(--bad) inset}.cell--preview-invalid:before{content:"";z-index:1;background:oklch(62% .2 25/.28);position:absolute;inset:0}.cell--last-shot{box-shadow:inset 0 0 0 2px oklch(100% 1 1/.7)}.cell--targeting{z-index:2;box-shadow:0 0 0 2px var(--sonar) inset;animation:.9s ease-in-out infinite targeting-pulse}@keyframes targeting-pulse{0%,to{background-color:oklch(78% .15 175/.1)}50%{background-color:oklch(78% .15 175/.4)}}@media (prefers-reduced-motion:reduce){.cell--targeting{background-color:oklch(78% .15 175/.3);animation:none}}@keyframes splash-ring{0%{opacity:.9;width:15%;height:15%}to{opacity:0;width:90%;height:90%}}@keyframes hit-flash{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.6)}to{opacity:.9;transform:scale(1)}}@keyframes smoke-rise{0%{opacity:0;transform:translate(-50%)scale(.6)}20%{opacity:.65}to{opacity:0;transform:translate(-50%,-75%)scale(1.5)}}@keyframes sink-down{0%{filter:brightness();transform:translateY(0)}40%{filter:brightness(.8);transform:translateY(2px)}to{filter:brightness(.85);transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.cell--miss .cell__fx:after,.cell--hit .cell__fx:before,.cell--hit .cell__fx:after,.cell--sunk{animation:none}}.menu,.placement,.handoff,.game,.result,.lobby{animation:screen-in var(--dur-slow) var(--ease-out-quart) both;flex-direction:column;align-items:center;width:100%;display:flex}@keyframes screen-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.menu{gap:var(--space-7);padding-top:var(--space-6);position:relative}.menu__audio-controls{top:var(--space-4);right:var(--space-4);align-items:center;gap:var(--space-2);flex-direction:column;display:flex;position:absolute}.menu__mute{padding:var(--space-2) var(--space-3);font-size:1.1rem;line-height:1}.menu__volume-slider{writing-mode:vertical-lr;cursor:pointer;width:6px;height:72px;accent-color:var(--sonar);direction:rtl}.menu__hero{border-radius:var(--radius-lg);width:min(92vw,560px);box-shadow:var(--shadow-panel), 0 0 40px oklch(78% .15 175/.15);border:6px solid #232a45;overflow:hidden}.menu__hero-image{width:100%;height:auto;display:block}.menu__intro{text-align:center;max-width:56ch}.menu__intro-title{font-family:var(--font-title);color:var(--ink);margin:0 0 var(--space-2);font-size:clamp(1.4rem,4.5vw,1.9rem);font-weight:400}.menu__intro-text{color:var(--ink-dim);margin:0;font-size:.95rem;line-height:1.6}.menu__subtitle{font-family:var(--font-tagline);color:#fff;letter-spacing:.08em;text-transform:uppercase;font-size:1.85rem}.menu__modes{justify-content:center;gap:var(--space-4);flex-wrap:wrap;max-width:900px;display:flex}.menu__mode-card{appearance:none;cursor:pointer;text-align:left;width:240px;padding:var(--space-5) var(--space-4);border-radius:var(--radius-md);background:linear-gradient(160deg, var(--surface-high) 0%, var(--surface) 100%);box-shadow:var(--shadow-panel);gap:var(--space-2);transition:transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart), border-color var(--dur-base);border:3px solid #232a45;flex-direction:column;display:flex}.menu__mode-card:hover{box-shadow:var(--shadow-panel), 0 0 0 1px oklch(78% .15 175/.3), 0 0 30px oklch(78% .15 175/.15);border-color:oklch(78% .15 175/.5);transform:translateY(-4px)}.menu__mode-title{font-family:var(--font-tagline);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-align:center;font-size:1.55rem;font-weight:700}.menu__mode-desc{color:var(--muted);font-size:.88rem;line-height:1.4}.menu__legal-link{color:var(--muted-low);font-size:.8rem;text-decoration:none}.menu__legal-link:hover{color:var(--muted);text-decoration:underline}.placement{gap:var(--space-4);padding-top:var(--space-1);position:relative}.placement__back{margin-left:var(--space-4);align-self:flex-start}.placement__audio-controls{top:var(--space-1);right:var(--space-4);align-items:center;gap:var(--space-2);display:flex;position:absolute}.placement__mute{padding:var(--space-2) var(--space-3);font-size:1.1rem;line-height:1}.placement__volume-slider{cursor:pointer;width:80px;accent-color:var(--sonar)}.placement--waiting .placement__back{align-self:center;margin-left:0}.placement__topbar{justify-content:space-between;align-items:center;gap:var(--space-2);width:100%;display:flex}.placement__topbar .placement__back{padding:var(--space-2) var(--space-4);white-space:nowrap;align-self:auto;margin-left:0;font-size:.85rem}.placement__topbar .placement__audio-controls{position:static}@media (width<=400px){.placement__topbar .placement__volume-slider{width:60px}}.placement__heading{font-family:var(--font-title);letter-spacing:.02em;text-align:center;font-size:clamp(1.4rem,4vw,1.9rem)}.placement__deploy-label{font-family:var(--font-tagline);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--sonar);margin-top:calc(-1 * var(--space-2));font-size:clamp(1.1rem,3.2vw,1.5rem)}.placement__title{font-family:var(--font-title);letter-spacing:.03em;text-align:center;color:var(--ink);text-shadow:0 0 24px oklch(78% .15 175/.4);font-size:clamp(1.6rem,5vw,2.6rem);font-weight:400}.placement__briefing-row{max-width:780px;margin:0 100px}.placement__briefing-portrait{float:right;width:180px;height:auto;margin:0 -80px var(--space-3) var(--space-4)}.placement__briefing-barrels{float:left;width:185px;height:auto;margin:0 var(--space-4) var(--space-3) -92.5px}.placement__briefing-carrier{float:left;width:300px;height:auto;margin:0 var(--space-4) var(--space-3) -110px}.placement__briefing-bomb{float:left;width:150px;height:auto;margin:0 var(--space-4) var(--space-3) -75px}.placement__briefing-battleship{float:left;width:250px;height:auto;margin:0 var(--space-4) var(--space-3) -75px}.placement__briefing-fleet{float:left;margin:0 var(--space-5) var(--space-3) -75px;padding:40px 40px 0 0;position:relative}.placement__briefing-fleet .placement__briefing-battleship{float:none;z-index:1;margin:0;display:block;position:relative}.placement__briefing-fleet-back{width:190px;height:auto;position:absolute;top:-14px;right:0}.placement__briefing-battleship--right{float:right;width:200px;margin:0 -90px var(--space-3) var(--space-4)}.placement__briefing-patrol{float:left;width:260px;height:auto;margin:0 var(--space-4) var(--space-3) -90px}.placement__briefing-spy{float:right;width:150px;height:auto;margin:0 -70px var(--space-3) var(--space-4)}.placement__briefing-toll{float:left;width:200px;height:auto;margin:0 var(--space-4) -68px -75px}.placement__briefing{max-width:62ch;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border-left:3px solid var(--sonar-dim);background:var(--bg-deep);box-shadow:var(--shadow-panel);color:var(--ink-dim);text-align:left;padding-top:20px;padding-bottom:30px;font-size:.92rem;line-height:1.6}.placement__briefing strong{color:var(--sonar);font-family:var(--font-mono);font-weight:700}@media (width<=719px){.placement__briefing-row{margin:0 var(--space-4)}.placement__briefing-portrait{float:none;width:96px;margin:0 auto var(--space-2);display:block}.placement__briefing-barrels{float:none;width:80px;margin:0 auto var(--space-2);display:none}.placement__briefing-carrier{float:none;width:160px;margin:0 auto var(--space-2);display:none}.placement__briefing-bomb,.placement__briefing-battleship{float:none;width:96px;margin:0 auto var(--space-2);display:none}.placement__briefing-fleet{float:none;width:fit-content;margin:0 auto var(--space-2);padding:16px 28px 0 0;display:none}.placement__briefing-fleet .placement__briefing-battleship{width:96px}.placement__briefing-fleet-back{width:76px;top:-6px}.placement__briefing-toll{float:none;width:96px;margin:0 auto var(--space-2);display:block}.placement__briefing-patrol{float:none;width:140px;margin:0 auto var(--space-2);display:none}.placement__briefing-spy{float:none;width:90px;margin:0 auto var(--space-2);display:block}}.placement__tray{justify-content:center;gap:var(--space-2);flex-wrap:wrap;max-width:640px;display:flex}.ship-chip{appearance:none;cursor:pointer;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-dim);transition:border-color var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);border:1px solid oklch(100% 0 0/.08);flex-direction:column;display:flex}.ship-chip__art{object-fit:contain;width:auto;max-width:100px;height:28px}.ship-chip__row{align-items:center;gap:var(--space-2);display:flex}.ship-chip:hover:not(:disabled){border-color:oklch(78% .15 175/.5)}.ship-chip--selected{border-color:var(--sonar);color:var(--ink);background:oklch(78% .15 175/.12)}.ship-chip--placed{opacity:.4;cursor:default}.ship-chip__blocks{gap:2px;display:flex}.ship-chip__block{background:var(--steel-hi);border-radius:2px;width:9px;height:9px}.ship-chip--selected .ship-chip__block{background:var(--sonar)}.ship-chip__name{white-space:nowrap;font-size:.82rem;font-weight:600}.placement__controls{gap:var(--space-3);display:flex}.placement__callsign{align-items:center;gap:var(--space-2);flex-direction:column;width:min(280px,100%);display:flex}.placement__callsign-label{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.8rem}.placement__callsign-input{width:100%;padding:var(--space-3);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--ink);font:inherit;text-align:center;border:1px solid oklch(100% 0 0/.12)}.placement__callsign-input:focus-visible{outline:2px solid var(--sonar)}.placement__briefing-row+.btn--confirm{margin-top:var(--space-4)}.btn--confirm{z-index:1;min-width:220px;font-family:Gunplay;font-size:20px;position:relative}.placement--waiting{gap:var(--space-4)}.waiting-panel{align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-5);text-align:center;flex-direction:column;min-width:260px;display:flex}.waiting-panel__code{font-family:var(--font-mono);letter-spacing:.1em;color:var(--sonar);font-size:1.1rem}.sonar-sweep{--sweep-size:84px;width:var(--sweep-size);height:var(--sweep-size);background:radial-gradient(circle,oklch(20% .03 175) 0%,oklch(12% .02 175) 100%);border-radius:50%;position:relative;overflow:hidden;box-shadow:0 0 0 1px oklch(78% .15 175/.25),inset 0 0 20px oklch(0% 0 0/.6)}.sonar-sweep:before{content:"";background-image:repeating-radial-gradient(circle, oklch(78% .15 175/.35) 0 1px, transparent 1px calc(var(--sweep-size) / 4));position:absolute;inset:0}.sonar-sweep:after{content:"";background:conic-gradient(oklch(78% .15 175/.55),#0000 35%);animation:2.4s linear infinite sonar-rotate;position:absolute;inset:0}@keyframes sonar-rotate{to{transform:rotate(360deg)}}.handoff{justify-content:center;min-height:40dvh}.handoff__audio-controls{top:var(--space-3);right:var(--space-3);align-items:center;gap:var(--space-2);display:flex;position:absolute}.handoff__mute{padding:var(--space-2) var(--space-3);font-size:1.1rem;line-height:1}.handoff__volume-slider{cursor:pointer;width:80px;accent-color:var(--sonar)}.handoff__panel{align-items:center;gap:var(--space-3);text-align:center;max-width:480px;padding:var(--space-7) var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(160deg, var(--surface-high) 0%, var(--surface-low) 100%);box-shadow:var(--shadow-panel);flex-direction:column;display:flex;position:relative}.handoff__icon{border:2px solid var(--sonar);width:56px;height:56px;animation:pulse-ring 1.8s var(--ease-out-quart) infinite;border-radius:50%;position:relative}.handoff__icon:before{content:"";background:var(--sonar);border-radius:50%;position:absolute;inset:14px}@keyframes pulse-ring{0%{box-shadow:0 0 oklch(78% .15 175/.4)}to{box-shadow:0 0 0 16px oklch(78% .15 175/0)}}.handoff__message{text-wrap:pretty;font-size:1.3rem}.handoff__hint{color:var(--muted);font-size:.85rem}.game{gap:var(--space-4);padding-top:var(--space-2)}@media (width<=719px){.game{gap:var(--space-6)}}.game__status{width:100%;max-width:640px;min-height:1.6em;padding:var(--space-2) 0 var(--space-3);justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex;position:relative}.game__tickers{gap:var(--space-3);grid-template-columns:minmax(0,1fr);width:min(100%,300px);display:grid}.game__tickers:has(>:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.game__tickers>.oil-ticker{padding:var(--space-3) var(--space-4);justify-content:space-between;gap:var(--space-2);text-align:center}@media (width<=560px){.game__tickers:has(>:nth-child(2)){grid-template-columns:minmax(0,1fr);width:min(100%,300px)}}.game__status-row{align-items:center;gap:var(--space-2);grid-template-columns:1fr auto 1fr;width:100%;display:grid}.game__status-center{align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;display:flex}.game__back{padding:var(--space-2) var(--space-4);justify-self:start;font-size:.85rem}.game__audio-controls{justify-self:end;align-items:center;gap:var(--space-2);display:flex}@media (width<=480px){.game__status-row{row-gap:var(--space-3);grid-template-columns:auto 1fr auto;grid-template-areas:"back.audio""center center center"}.game__back{white-space:nowrap;grid-area:back}.game__audio-controls{grid-area:audio}.game__status-center{grid-area:center}}.game__volume-slider{cursor:pointer;width:70px;accent-color:var(--sonar)}.game__mute{padding:var(--space-2) var(--space-3);font-size:1.1rem;line-height:1}.game__battle-label{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.75rem;font-weight:600}.game__status-text{font-family:var(--font-display);letter-spacing:.04em;color:var(--ink);font-size:1.1rem;font-weight:700}.game__status-text--pulse{color:var(--sonar);animation:1.6s ease-in-out infinite text-pulse}@keyframes text-pulse{0%,to{opacity:1}50%{opacity:.5}}.game__online-error{justify-content:center;align-items:center;gap:var(--space-3);margin:0 auto var(--space-3);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--bad);max-width:560px;color:var(--bad);text-align:center;background:oklch(30% .12 25/.35);font-size:.85rem;display:flex}.game__online-error-dismiss{appearance:none;color:inherit;cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.oil-ticker{padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);background:var(--bg-deep);border:1px solid oklch(100% 0 0/.08);flex-direction:column;align-items:center;gap:2px;display:flex;box-shadow:inset 0 1px oklch(100% 0 0/.06)}.oil-ticker__label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted-low);font-size:.68rem}.oil-ticker__price{font-family:var(--font-mono);color:var(--ink);align-items:center;gap:.3em;font-size:1rem;font-weight:700;display:inline-flex}.oil-ticker__barrel{object-fit:contain;filter:drop-shadow(0 2px 3px oklch(0% 0 0/.5));height:3em}.oil-ticker__barrel--ship{object-fit:contain;filter:none;width:7em;height:auto}.oil-ticker__arrow{font-size:.7em}.oil-ticker__unit{font-family:var(--font-body);color:var(--muted);font-size:.72em;font-weight:400}.oil-ticker__target{letter-spacing:.02em;color:var(--muted-low);font-size:.65rem}.oil-ticker--up .oil-ticker__price,.oil-ticker--up .oil-ticker__arrow{color:var(--bad)}.oil-ticker--down .oil-ticker__price,.oil-ticker--down .oil-ticker__arrow{color:var(--good)}.oil-ticker--positive .oil-ticker__price,.oil-ticker--positive .oil-ticker__arrow{color:var(--sonar)}.oil-ticker--negative .oil-ticker__price,.oil-ticker--negative .oil-ticker__arrow{color:var(--bad)}.fleet-gauge{min-width:220px}.fleet-gauge__ship{object-fit:contain;width:5em;height:auto;margin-bottom:-2px}.fleet-gauge__track{background:var(--surface-low);border-radius:999px;gap:2px;width:100%;display:flex;overflow:hidden}.fleet-gauge__segment{background:var(--surface-low);height:.85em;transition:background-color .3s var(--ease-out-quart);flex:1}.fleet-gauge__body{flex-direction:column;align-items:center;gap:2px;width:100%;display:flex}.fleet-gauge__divider{background:var(--bg-deep);flex:0 0 6px}.fleet-gauge__segment--zero{background:oklch(100% 0 0/.16)}.fleet-gauge__segment--good{background:var(--sonar)}.fleet-gauge__segment--bad{background:var(--bad)}.fleet-gauge__value{font-family:var(--font-mono);color:var(--ink);font-size:.85rem;font-weight:700}.fleet-gauge__value--good{color:var(--sonar)}.fleet-gauge__value--bad{color:var(--bad)}.oil-ticker--restored{border-color:oklch(78% .15 175/.5);box-shadow:inset 0 1px oklch(100% 0 0/.06),0 0 20px oklch(78% .15 175/.2)}.oil-ticker--restored .oil-ticker__target{color:var(--good);font-weight:600}.oil-ticker--maxed{border-color:oklch(60% .2 25/.5);box-shadow:inset 0 1px oklch(100% 0 0/.06),0 0 20px oklch(60% .2 25/.2)}.oil-ticker--maxed .oil-ticker__target{color:var(--bad);font-weight:600}.oil-ticker--pulse{animation:oil-ticker-pulse 1.1s var(--ease-out-quart)}@keyframes oil-ticker-pulse{0%{box-shadow:inset 0 1px oklch(100% 0 0/.06),0 0 oklch(78% .15 175/.4)}30%{box-shadow:inset 0 1px oklch(100% 0 0/.06),0 0 0 6px oklch(78% .15 175/0)}to{box-shadow:inset 0 1px oklch(100% 0 0/.06),0 0 oklch(78% .15 175/0)}}.game__boards{align-items:center;gap:var(--space-5);flex-direction:column;display:flex}.game__column{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.chat{gap:var(--space-2);width:min(520px, calc(100vw - 2 * var(--space-4) - 4 * var(--space-2)));display:flex}.chat__main{gap:var(--space-2);flex-direction:column;flex:1;min-width:0;display:flex}.chat__log{gap:var(--space-1);height:140px;padding:var(--space-1);flex-direction:column;display:flex;overflow-y:auto}.chat__empty{color:var(--muted);margin:auto;font-size:.85rem}.chat__msg{gap:var(--space-2);font-size:.85rem;line-height:1.4;display:flex}.chat__msg-who{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);flex:none;padding-top:.15em;font-size:.72rem;font-weight:700}.chat__msg--you .chat__msg-who{color:var(--sonar)}.chat__msg-text{color:var(--ink-dim);word-break:break-word}.chat__taunts{gap:var(--space-1);flex-direction:column;flex:none;width:112px;display:flex;overflow-y:auto}.chat__taunt{appearance:none;cursor:pointer;text-align:left;width:100%;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-dim);transition:border-color var(--dur-fast), background var(--dur-fast);border:1px solid oklch(100% 0 0/.08);font-size:.72rem;line-height:1.3}.chat__taunt:hover{color:var(--ink);border-color:oklch(78% .15 175/.5)}.chat__form{gap:var(--space-2);display:flex}.chat__input{min-width:0;padding:var(--space-2);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--ink);border:1px solid oklch(100% 0 0/.12);flex:1;font-size:.85rem}.chat__input:focus-visible{outline:2px solid var(--sonar)}.chat__send{padding:var(--space-2) var(--space-3);flex:none}@media (width<=480px){.chat{flex-direction:column}.chat__taunts{width:auto;padding-bottom:var(--space-1);flex-direction:row;overflow:auto hidden}.chat__taunt{white-space:nowrap;flex:none;width:auto}}@media (width>=900px){.game__boards{align-items:flex-start;gap:var(--space-6);flex-direction:row}}.fleet-status{justify-content:center;gap:var(--space-1) var(--space-3);flex-wrap:wrap;max-width:320px;display:flex}.fleet-status__ship{align-items:center;gap:var(--space-1);letter-spacing:.02em;color:var(--muted);font-size:.72rem;font-weight:600;display:inline-flex}.fleet-status__art{object-fit:contain;opacity:.75;width:auto;max-width:92px;height:20px}.fleet-status__ship--sunk{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1.5px}.fleet-status__ship--sunk .fleet-status__art{opacity:.35;filter:grayscale()}.result{text-align:center;justify-content:center;min-height:50dvh}.result__row{justify-content:center;align-items:center;gap:var(--space-4);width:100%;max-width:1100px;display:flex}.result__content{align-items:center;gap:var(--space-5);flex-direction:column;display:flex}.result__reaction-stack{justify-content:center;align-items:flex-end;display:flex;position:relative}.result__barrels{z-index:0;opacity:.9;width:auto;height:150px;position:absolute;bottom:18px;left:35%;transform:translate(-50%)}.result__reaction{z-index:1;flex-shrink:0;width:auto;height:500px;position:relative}@media (width<=900px){.result__row{flex-wrap:wrap}.result__content{order:-1}}@media (width<=375px){.result__reaction{height:350px}.result__barrels{height:105px}}.result__title{letter-spacing:.02em;font-size:clamp(2.2rem,7vw,3.4rem)}.result--win .result__title{color:var(--sonar);text-shadow:0 0 28px oklch(78% .15 175/.45)}.result--lose .result__title{color:var(--bad);text-shadow:0 0 28px oklch(62% .2 25/.4)}.result--game-over .result__title{letter-spacing:.08em;text-transform:uppercase;color:var(--bad);text-shadow:0 0 40px oklch(62% .2 25/.55);font-size:clamp(2.8rem,9vw,4.4rem)}.result__subtitle{max-width:40ch;font-size:1rem}.result__oil-price{font-family:var(--font-mono);color:var(--muted);max-width:36ch;font-size:.85rem}.result__status-line{display:block}.result__status-line+.result__status-line{margin-top:var(--space-1);opacity:.85;font-size:.8rem}.result__oil-price--restored{color:var(--good);font-weight:600}.result__oil-price--maxed{color:var(--bad);font-weight:600}.result__record{color:var(--muted);font-size:.9rem}.result__record--war{color:var(--muted);font-size:.8rem}.result__rematch{font-family:var(--font-display);letter-spacing:.04em;color:var(--sonar);font-weight:700}.result__rematch--waiting{animation:1.6s ease-in-out infinite text-pulse}.result__rematch--error{color:var(--bad);font-weight:400}.result__actions{gap:var(--space-3);display:flex}.lobby{gap:var(--space-5);text-align:center;width:100%;max-width:420px;min-height:50dvh;padding-top:var(--space-6);justify-content:center;position:relative}@media (width<=700px){.lobby{padding-top:calc(var(--space-6) + 56px)}}.lobby__hero{border-radius:var(--radius-lg);width:min(80vw,320px);box-shadow:var(--shadow-panel), 0 0 40px oklch(78% .15 175/.15);overflow:hidden}.lobby__hero-image{width:100%;height:auto;display:block}.lobby__audio-controls{top:var(--space-4);right:var(--space-4);align-items:center;gap:var(--space-2);z-index:10;display:flex;position:fixed}.lobby__mute{padding:var(--space-2) var(--space-3);font-size:1.1rem;line-height:1}.lobby__volume-slider{cursor:pointer;width:80px;accent-color:var(--sonar)}.lobby__title{font-size:clamp(1.6rem,5vw,2.2rem)}.lobby__hint{max-width:42ch;font-size:.9rem}.lobby__choice{gap:var(--space-3);flex-direction:column;width:100%;max-width:280px;display:flex}.lobby__choice--grouped{column-gap:var(--space-5);row-gap:var(--space-2);width:min(600px, calc(100vw - 2 * var(--space-4)));grid-template-rows:repeat(6,auto);grid-template-columns:1fr 1fr;grid-auto-flow:column;max-width:none;display:grid}.lobby__group{grid-row:span 6;grid-template-rows:subgrid;align-content:start;display:grid}@media (width<=560px){.lobby__choice--grouped{grid-template-columns:1fr;grid-auto-flow:row}.lobby__group+.lobby__group{margin-top:var(--space-4)}}.lobby__group-title{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.8rem}.lobby__option-hint{color:var(--ink-dim);margin-bottom:var(--space-2);font-size:.8rem}.lobby__rules{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sonar)}.lobby__join{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.lobby__code-input{font-family:var(--font-mono);letter-spacing:.2em;text-align:center;text-transform:uppercase;width:140px;padding:var(--space-3);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--ink);border:1px solid oklch(100% 0 0/.12)}.lobby__code-input:focus-visible{outline:2px solid var(--sonar)}.lobby__code{font-family:var(--font-mono);letter-spacing:.3em;color:var(--sonar);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);background:var(--bg-deep);font-size:2.4rem;box-shadow:0 0 0 1px oklch(78% .15 175/.3)}.lobby__error{color:var(--bad);font-size:.85rem}.lobby__menu-back{margin-top:var(--space-2)}.confirm-dialog__backdrop{z-index:10;padding:var(--space-7) var(--space-4) var(--space-4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:screen-in var(--dur-fast) var(--ease-out-quart) both;background:oklch(0% 0 0/.55);justify-content:center;align-items:flex-start;display:flex;position:fixed;inset:0}.confirm-dialog{align-items:center;gap:var(--space-5);text-align:center;max-width:360px;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-panel);flex-direction:column;display:flex}.confirm-dialog__message{color:var(--ink);font-size:1rem;line-height:1.4}.confirm-dialog__actions{gap:var(--space-3);display:flex}.about{width:min(1040px,100%);margin-top:var(--space-6);color:var(--ink-dim);text-align:left;font-size:.95rem;line-height:1.65}.about__heading{font-family:var(--font-title);color:var(--ink);text-align:center;margin:var(--space-7) 0 var(--space-4);font-size:clamp(1.2rem,4vw,1.5rem);font-weight:400}.about__heading--first{margin-top:0}.about__online{text-align:center;max-width:68ch;margin:0 auto}.about__battles{gap:var(--space-4);grid-template-columns:1fr;margin:0;padding:0;list-style:none;display:grid}@media (width>=800px){.about__battles{grid-template-columns:1fr 1fr}}.about__battle{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border-left:3px solid var(--sonar-dim);box-shadow:var(--shadow-panel);background:oklch(10% .016 240/.75)}.about__battle p{margin:0}.about__battle-name{margin:0 0 var(--space-2);font-family:var(--font-display);color:var(--ink);font-size:1.1rem;font-weight:700}.about__battle-name span{letter-spacing:.14em;text-transform:uppercase;color:var(--sonar);font-size:.72rem;display:block}.about__battle-art{float:right;height:auto;margin:0 0 var(--space-2) var(--space-4);filter:drop-shadow(0 6px 12px oklch(0% 0 0/.5))}.about__battle-art--portrait{width:110px}.about__battle-art--object{width:140px;margin-top:var(--space-2)}@media (width<=480px){.about__battle-art--portrait{width:80px}.about__battle-art--object{width:100px}}.bubbles{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bubble{width:var(--size);height:var(--size);opacity:0;animation:bubble-rise var(--duration) linear infinite;animation-delay:var(--delay);background:radial-gradient(circle at 35% 30%,oklch(95% .02 200/.6),oklch(75% .09 210/.18) 55%,#0000 75%);border-radius:50%;position:absolute;bottom:-20px;left:50%;box-shadow:0 0 4px oklch(85% .05 200/.2)}@keyframes bubble-rise{0%{transform:translate(var(--x), 0) scale(.85);opacity:0}8%{opacity:var(--o)}85%{opacity:var(--o)}to{transform:translate(calc(var(--x) + var(--drift)), -105vh) scale(1.1);opacity:0}}