:root{--bg:#061018;--panel:rgba(10,24,33,.83);--steel:#243842;--line:rgba(139,191,207,.18);--text:#edf6f7;--muted:#85a2ad;--cyan:#54d8e7;--orange:#ff7a18;--danger:#ff584f;--ok:#58c98c;--cell:clamp(27px,3.5vw,48px);color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#061018;color:var(--text);font-family:Segoe UI,Arial,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}#sea{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(circle at 50% 30%,#153545 0,#071722 42%,#03090d 100%)}.fog{position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(115deg,transparent 20%,rgba(172,220,226,.045) 45%,transparent 65%);animation:fog 18s ease-in-out infinite alternate}#app{position:relative;z-index:2;min-height:calc(100vh - 34px)}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,58px);border-bottom:1px solid var(--line);background:linear-gradient(#09151dcc,transparent)}.brand{display:flex;align-items:center;gap:9px;letter-spacing:.18em;font-size:12px}.brand strong{font-size:18px}.brand .cut{width:7px;height:30px;background:var(--orange);transform:skew(-18deg);box-shadow:0 0 20px #ff7a1880}.top-actions{display:flex;gap:8px}.icon-btn,.secondary{border:1px solid var(--line);background:#0a1a23b8;min-width:44px;min-height:44px;border-radius:5px;cursor:pointer}.icon-btn:hover,.secondary:hover{border-color:var(--cyan);background:#102832}.screen{display:none;width:min(1240px,94vw);margin:auto;padding:clamp(26px,5vh,64px) 0}.screen.active{display:block}.center-screen.active{display:grid;place-items:center;min-height:calc(100vh - 105px)}.hero{text-align:center;position:relative}.hero h1{font-size:clamp(50px,9vw,105px);line-height:.78;margin:14px 0 28px;letter-spacing:-.055em;text-shadow:0 8px 40px #000}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #b7d4da;letter-spacing:.08em;font-size:.52em}.eyebrow{color:var(--cyan);font-weight:700;letter-spacing:.28em;font-size:11px;margin:0}.tagline{color:var(--muted);letter-spacing:.08em;margin-bottom:30px}.radar-mark{position:absolute;left:50%;top:16%;width:320px;height:320px;transform:translate(-50%,-50%);border:1px solid #54d8e71f;border-radius:50%;z-index:-1}.radar-mark:before,.radar-mark:after{content:"";position:absolute;border:1px solid #54d8e719;border-radius:50%;inset:18%}.radar-mark:after{inset:36%}.radar-mark i{position:absolute;inset:50% 50% 0 0;transform-origin:100% 0;background:linear-gradient(35deg,transparent,#54d8e71f);animation:sweep 5s linear infinite}.difficulty{display:flex;gap:8px;justify-content:center;margin:0 auto 24px}.difficulty button{width:150px;min-height:72px;text-align:left;padding:12px 15px;border:1px solid var(--line);border-radius:6px;background:#0a171fc9;cursor:pointer}.difficulty button.selected{border-color:var(--orange);box-shadow:inset 0 -3px var(--orange),0 0 22px #ff7a1815}.difficulty b,.difficulty small{display:block}.difficulty small{color:var(--muted);font-size:11px;margin-top:4px}.primary{border:0;border-radius:5px;background:linear-gradient(135deg,var(--orange),#d94f09);font-weight:800;letter-spacing:.12em;cursor:pointer;min-height:48px;padding:0 22px;box-shadow:0 8px 30px #ff64182c}.primary:hover{filter:brightness(1.12)}.primary.large{min-width:230px;height:58px}.stage-head,.battle-status{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px;gap:20px}.stage-head h2,.battle-status h2{font-size:clamp(24px,4vw,42px);margin:5px 0 0;letter-spacing:.04em}.status,.combat-message{color:var(--muted);font-size:14px}.deploy-layout{display:grid;grid-template-columns:auto minmax(220px,320px);gap:clamp(24px,5vw,64px);align-items:start}.board-shell{padding:14px;background:linear-gradient(145deg,rgba(13,33,43,.92),rgba(5,14,20,.92));border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 70px #0008,inset 0 1px #ffffff0a}.board-label{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.14em;margin:0 0 10px}.board-label b{color:var(--cyan)}.board{display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));border-left:1px solid #5fc5d52b;border-top:1px solid #5fc5d52b;touch-action:none;user-select:none}.cell{position:relative;width:var(--cell);height:var(--cell);border:0;border-right:1px solid #5fc5d52b;border-bottom:1px solid #5fc5d52b;background:rgba(15,51,65,.22);padding:0;cursor:crosshair}.cell:nth-child(odd){background:rgba(14,47,61,.3)}.cell:hover{background:#42d9eb21}.cell.ship:before{content:"";position:absolute;inset:18%;border-radius:42%;background:linear-gradient(90deg,#59717a,#22343d 44%,#8398a0);box-shadow:0 2px 8px #000}.cell.ship:after{content:"";position:absolute;inset:39%;border-radius:50%;background:#b4c7cc}.cell.hit{background:#ff4b3526}.cell.hit:before{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffb02e 12%,#ed401d 35%,transparent 68%);animation:hitPulse 1.2s infinite}.cell.miss:after{content:"";position:absolute;inset:36%;border:2px solid #d4f7ff;border-radius:50%;box-shadow:0 0 8px #aef5ff}.cell.sunk{background:#4e1717}.cell.sonar-contact{animation:contact 1s 3;background:#54d8e740}.fleet-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}.fleet-list{display:grid;gap:8px;margin-bottom:18px}.fleet-item{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:8px 10px;border:1px solid transparent;border-bottom-color:var(--line);cursor:pointer}.fleet-item.selected{border-color:var(--cyan);background:#54d8e70c}.ship-mini{display:flex;gap:3px}.ship-mini i{width:15px;height:8px;background:#64808a;border-radius:5px}.fleet-item small{color:var(--muted)}.deploy-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.deploy-actions .primary{grid-column:1/-1}.key-help{color:var(--muted);font-size:11px;text-align:center;margin:15px 0 0}kbd{border:1px solid var(--steel);padding:2px 5px;border-radius:3px}.battle-status{align-items:center}.combat-message{flex:1;text-align:center;letter-spacing:.06em}.sonar-btn{display:grid;grid-template-columns:30px auto;grid-template-rows:auto auto;align-items:center;text-align:left;column-gap:8px;border:1px solid #54d8e74a;background:#082531;color:var(--cyan);border-radius:5px;min-height:56px;padding:7px 14px;cursor:pointer}.sonar-btn.active{box-shadow:0 0 25px #54d8e74a;border-color:var(--cyan)}.sonar-btn:disabled{opacity:.35;cursor:not-allowed}.sonar-btn b{font-size:11px;letter-spacing:.15em}.sonar-btn small{color:var(--text)}.sonar-icon{grid-row:1/3;width:28px;height:28px;border:1px solid;border-radius:50%;position:relative}.sonar-icon:after{content:"";position:absolute;inset:7px;border:1px solid;border-radius:50%}.battle-layout{display:grid;grid-template-columns:auto auto;gap:clamp(18px,4vw,48px);justify-content:center;align-items:start}.own-shell{--cell:clamp(22px,2.6vw,36px);margin-top:46px}.target-board.locked .cell{cursor:not-allowed}.target-board:not(.locked) .cell:not(.hit):not(.miss):hover:before{content:"";position:absolute;inset:22%;border:1px solid var(--orange);border-radius:50%;box-shadow:0 0 14px #ff7a18}.shot-overlay{position:fixed;inset:0;z-index:20;pointer-events:none;display:none;background:#00101844}.shot-overlay.active{display:block}.reticle{position:absolute;width:90px;height:90px;border:1px solid var(--orange);border-radius:50%;left:var(--x);top:var(--y);transform:translate(-50%,-50%);animation:lock .38s forwards}.reticle:before,.reticle:after{content:"";position:absolute;background:var(--orange)}.reticle:before{height:1px;width:130px;left:-20px;top:44px}.reticle:after{width:1px;height:130px;left:44px;top:-20px}.impact{position:absolute;left:var(--x);top:var(--y);width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);animation:impact .75s .35s both}.shot-overlay.miss .impact{animation-name:splash}dialog{width:min(480px,90vw);border:1px solid var(--line);border-radius:8px;background:#091820f2;color:var(--text);text-align:center;padding:42px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#02070bcc;backdrop-filter:blur(5px)}dialog h2{font-size:42px;margin:12px 0}.result-actions{display:flex;gap:10px;justify-content:center;margin-top:26px}.result-actions .secondary{padding:0 22px}.pause-overlay{position:fixed;z-index:30;inset:0;display:grid;place-items:center;background:#02070be8;backdrop-filter:blur(8px);text-align:center}.pause-overlay h2{font-size:50px;letter-spacing:.15em}.pause-overlay button{display:block;width:220px;margin:8px auto}.hidden{display:none!important}footer{position:relative;z-index:2;height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(18px,4vw,58px);border-top:1px solid var(--line);font-size:9px;color:#66818b;letter-spacing:.16em}
@keyframes fog{to{transform:translateX(8%)}}@keyframes sweep{to{transform:rotate(360deg)}}@keyframes hitPulse{50%{filter:brightness(1.8);transform:scale(1.2)}}@keyframes contact{50%{background:#54d8e78a;box-shadow:inset 0 0 18px var(--cyan)}}@keyframes lock{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}to{transform:translate(-50%,-50%) scale(.7);opacity:1}}@keyframes impact{0%{box-shadow:0 0 0 0 #ffdf72;background:#fff}60%{box-shadow:0 0 0 75px #ff521900;background:#ff5a19;transform:translate(-50%,-50%) scale(5)}100%{opacity:0}}@keyframes splash{0%{box-shadow:0 0 0 0 #d8f9ff;background:#fff}70%{box-shadow:0 -45px 0 10px #d8f9ff00;transform:translate(-50%,-50%) scale(3)}100%{opacity:0}}
@media(max-width:820px){.topbar{height:58px}.screen{padding-top:24px}.difficulty{flex-direction:column;align-items:stretch}.difficulty button{width:min(330px,86vw);min-height:58px}.hero h1{font-size:58px}.deploy-layout,.battle-layout{grid-template-columns:1fr}.board-shell{width:max-content;max-width:100%;margin:auto;padding:8px}.fleet-panel{margin-top:0}.stage-head,.battle-status{align-items:flex-start;flex-wrap:wrap}.status,.combat-message{width:100%;text-align:left}.battle-layout{gap:22px}.own-shell{--cell:clamp(20px,8.1vw,32px);margin-top:0;order:2}.enemy-shell{--cell:clamp(24px,8.1vw,36px)}.board{max-width:100%}.battle-status .sonar-btn{position:absolute;right:3vw}.brand span:last-child{display:none}}
@media(max-height:700px) and (min-width:821px){.screen{padding:20px 0}.topbar{height:56px}.hero h1{font-size:70px}.hero{transform:scale(.9)}.board{--cell:34px}.own-shell{--cell:28px}.stage-head{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* BUILD 0002 · CINEMATIC COMMAND TABLE */
:root{--cell:clamp(31px,4.15vw,55px);--glass:rgba(7,18,25,.78);--scope:#68d9df;--rust:#a63e18}
body{background:#02070a;background-image:radial-gradient(circle at 50% 20%,#163542 0,#07131a 42%,#020608 86%)}
body:before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.22;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#fff 3px 3px),radial-gradient(circle at 17% 22%,#fff 0 1px,transparent 2px);background-size:auto,180px 170px;mix-blend-mode:overlay}
#sea{filter:saturate(.82) contrast(1.18)}
.fog{background:radial-gradient(ellipse at 50% 28%,transparent 0 22%,rgba(126,171,176,.08) 48%,transparent 73%),linear-gradient(108deg,transparent 18%,rgba(190,225,229,.07) 42%,transparent 64%)}
.topbar{height:82px;background:linear-gradient(180deg,rgba(3,8,11,.98),rgba(5,16,23,.8));box-shadow:0 12px 40px #0008;border-bottom-color:#7bdde427}
.brand{height:62px;gap:14px;overflow:hidden}.brand img{width:62px;height:62px;object-fit:cover;mix-blend-mode:screen}.brand-rule{height:28px;width:1px;background:linear-gradient(transparent,var(--orange),transparent)}.brand strong{font-size:13px;letter-spacing:.32em;color:#dbe6e8;text-shadow:0 0 18px #fff4}
.icon-btn{background:linear-gradient(#12242c,#071117);border-color:#7ab7c02d;box-shadow:inset 0 1px #fff1,0 4px 15px #0008}
.center-screen.active{min-height:calc(100vh - 116px);position:relative;isolation:isolate}.hero{padding:42px clamp(20px,6vw,90px);border-left:1px solid #7cdde424;border-right:1px solid #7cdde424;background:radial-gradient(ellipse at center,rgba(6,19,27,.92),rgba(3,10,14,.25) 70%);backdrop-filter:blur(2px);box-shadow:0 0 120px #000;min-width:min(720px,94vw)}
.hero-forge{width:82px;height:82px;object-fit:cover;mix-blend-mode:screen;margin:-22px auto 4px;opacity:.82;filter:drop-shadow(0 0 18px #ff7a1830)}
.hero h1{margin:8px 0 20px;line-height:.9}.hero h1 span{display:block;font-size:.35em;letter-spacing:.72em;margin-right:-.72em;color:#cbd6d8;text-shadow:0 1px #fff,0 7px 20px #000}.hero h1 em{display:block;font-size:.62em;color:#f1f4f4;-webkit-text-stroke:0;letter-spacing:.08em;text-shadow:0 0 2px #fff,0 4px 0 #18242a,0 12px 30px #000}.hero h1 em:after{content:"";display:block;width:74%;height:4px;margin:13px auto 0;background:linear-gradient(90deg,transparent,var(--orange) 16% 84%,transparent);transform:skew(-28deg);box-shadow:0 0 16px #ff7a1888}
.hero-stage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.horizon{position:absolute;left:-5%;right:-5%;top:43%;height:1px;background:linear-gradient(90deg,transparent,#8fd5dc30,transparent);box-shadow:0 0 45px 13px #93dae112}.warship{position:absolute;width:420px;height:74px;right:-90px;top:37%;opacity:.32;filter:blur(.2px);animation:shipBob 6s ease-in-out infinite}.warship:before{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(#233840,#020609);clip-path:polygon(0 0,100% 20%,88% 100%,10% 88%)}.warship:after{content:"";position:absolute;width:120px;height:37px;right:120px;bottom:20px;background:#0a1216;clip-path:polygon(10% 100%,18% 35%,62% 35%,75% 100%)}.warship i{position:absolute;width:4px;height:48px;right:167px;bottom:43px;background:#10191d}.warship b{position:absolute;width:75px;height:5px;right:132px;bottom:63px;background:#111a1e}.warship span{position:absolute;left:-40px;right:20px;bottom:-3px;height:5px;background:linear-gradient(90deg,transparent,#eafcff8c,transparent);filter:blur(2px)}.searchlight{position:absolute;width:580px;height:190px;right:-100px;top:8%;background:linear-gradient(174deg,transparent 45%,#b7f6ff12 46% 54%,transparent 55%);transform-origin:right center;animation:search 9s ease-in-out infinite alternate}
.radar-mark{width:520px;height:520px;opacity:.58}.difficulty button{position:relative;background:linear-gradient(145deg,rgba(19,40,48,.92),rgba(3,11,15,.95));border-color:#7ccbd434;box-shadow:inset 0 1px #fff1,0 12px 20px #0008;overflow:hidden}.difficulty button:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--orange);transition:.25s}.difficulty button.selected:after{right:0}.difficulty button.selected{transform:translateY(-3px);box-shadow:inset 0 0 25px #ff7a180b,0 16px 28px #000b}.primary{position:relative;overflow:hidden;border:1px solid #ff9b50;background:linear-gradient(135deg,#ff892c,#c84608 65%,#7c2607);text-shadow:0 1px 2px #0008;box-shadow:inset 0 1px #fff6,inset 0 -3px #5e1907,0 12px 32px #000b,0 0 30px #ff6b1824}.primary:after{content:"";position:absolute;inset:0;transform:translateX(-120%) skew(-25deg);width:45%;background:linear-gradient(90deg,transparent,#fff4,transparent);transition:.45s}.primary:hover:after{transform:translateX(260%) skew(-25deg)}
.stage-head,.battle-status{padding:0 8px}.stage-head h2,.battle-status h2{text-shadow:0 4px 20px #000;letter-spacing:.09em}.status,.combat-message{border-left:2px solid var(--orange);padding:9px 13px;background:linear-gradient(90deg,#ff7a180d,transparent)}
.board-shell{position:relative;padding:20px;background:linear-gradient(145deg,rgba(14,34,42,.94),rgba(3,10,14,.96));border-color:#79cdd637;box-shadow:0 24px 80px #000c,inset 0 1px #fff2,inset 0 0 80px #041018}.board-shell:before{content:"";position:absolute;inset:5px;border:1px solid #ffffff0a;pointer-events:none}.scope-corners{position:absolute;inset:10px;pointer-events:none}.scope-corners i{position:absolute;width:16px;height:16px;border-color:var(--orange)}.scope-corners i:nth-child(1){left:0;top:0;border-left:2px solid;border-top:2px solid}.scope-corners i:nth-child(2){right:0;top:0;border-right:2px solid;border-top:2px solid}.scope-corners i:nth-child(3){left:0;bottom:0;border-left:2px solid;border-bottom:2px solid}.scope-corners i:nth-child(4){right:0;bottom:0;border-right:2px solid;border-bottom:2px solid}.board-label{font-weight:700;margin-bottom:13px}.signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:signal 1.8s infinite}.signal-dot.danger{background:var(--danger);box-shadow:0 0 10px var(--danger)}
.board{position:relative;border-color:#69d6df40;background-color:#06171f;background-image:radial-gradient(circle at 50% 50%,transparent 0 20%,#62d6df08 20.3% 20.5%,transparent 20.8% 40%,#62d6df07 40.3% 40.5%,transparent 40.8%),linear-gradient(35deg,#0c334030,#041017 65%);box-shadow:inset 0 0 70px #0008,0 0 35px #43d4de0a;overflow:hidden}.board:before{content:"";position:absolute;inset:-42%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 85%,#6ee7ee10 98%,transparent 100%);animation:boardSweep 8s linear infinite;z-index:0;pointer-events:none}.cell{z-index:1;background:rgba(14,53,65,.08);border-color:#6ed8df27;transition:background .14s,box-shadow .14s}.cell:nth-child(odd){background:rgba(10,42,52,.12)}.cell:hover{z-index:4;background:#54d8e726;box-shadow:inset 0 0 18px #68e7ef33}.cell:focus-visible{z-index:5}.cell.ship:before,.cell.ship:after{display:none}.cell.hit{z-index:5}.cell.hit:before{display:block;inset:12%;z-index:6}.cell.miss:after{display:block;inset:31%;z-index:6}.vessel-layer{position:absolute;inset:0;z-index:2;pointer-events:none}.vessel{position:absolute;padding:4px;filter:drop-shadow(0 5px 5px #000b);transition:.25s}.vessel .hull{position:absolute;inset:17% 4%;background:linear-gradient(180deg,#a7b9bd 0,#4f666e 20%,#1c3038 58%,#07141a 100%);clip-path:polygon(0 50%,8% 10%,83% 10%,100% 50%,83% 90%,8% 90%);box-shadow:inset 0 1px #fff}.vessel.vertical .hull{inset:4% 17%;clip-path:polygon(50% 0,90% 8%,90% 83%,50% 100%,10% 83%,10% 8%)}.vessel .deck{position:absolute;left:29%;right:27%;top:28%;bottom:28%;background:linear-gradient(90deg,#243941,#84969a,#263b43);border:1px solid #cde5e743}.vessel.vertical .deck{top:29%;bottom:27%;left:28%;right:28%;background:linear-gradient(#243941,#84969a,#263b43)}.vessel .turret{position:absolute;width:12px;height:12px;border-radius:50%;left:42%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#c0d1d3 0 22%,#30464e 27% 60%,#0b171c 65%);box-shadow:0 0 0 1px #d4e8e840}.vessel .turret:after{content:"";position:absolute;width:22px;height:3px;left:6px;top:4px;background:#7d9298;transform-origin:left}.vessel.vertical .turret:after{width:3px;height:22px;left:4px;top:6px}.vessel .wake{position:absolute;left:-8%;width:45%;top:22%;bottom:22%;background:linear-gradient(90deg,transparent,#ddfbff25);clip-path:polygon(0 0,100% 42%,100% 58%,0 100%);filter:blur(2px)}.vessel.vertical .wake{left:22%;right:22%;top:-8%;height:45%;width:auto;background:linear-gradient(transparent,#ddfbff25);clip-path:polygon(0 0,42% 100%,58% 100%,100% 0)}.vessel.damaged .hull{background:linear-gradient(180deg,#87594c,#4e2822 25%,#1c2022 65%,#060b0d)}.vessel.damaged:after{content:"";position:absolute;width:25px;height:40px;left:50%;top:-25%;background:radial-gradient(ellipse at bottom,#191919aa,transparent 70%);filter:blur(5px);animation:smoke 2.2s infinite}.vessel.sunk{opacity:.4;filter:grayscale(1) drop-shadow(0 0 8px #ef3e27)}
.enemy-shell{--cell:clamp(34px,4.35vw,58px)}.enemy-shell .board{box-shadow:inset 0 0 90px #000b,0 0 45px #ef4e2110}.enemy-shell .scope-corners i{border-color:var(--danger)}.own-shell{--cell:clamp(23px,2.6vw,35px);opacity:.9}.fleet-panel{background:linear-gradient(160deg,rgba(15,34,41,.96),rgba(3,10,14,.96));box-shadow:0 22px 60px #000b,inset 0 1px #fff1}.fleet-item{position:relative;border-bottom-color:#80bdc524}.fleet-item:before{content:"";position:absolute;left:-20px;width:3px;height:0;background:var(--orange);transition:.2s}.fleet-item.selected:before{height:70%}.ship-mini i{background:linear-gradient(#9aadb2,#283d45);box-shadow:0 2px 5px #000}.sonar-btn{background:radial-gradient(circle at 24px 27px,#135565,#071920 55%);box-shadow:inset 0 1px #fff2,0 8px 22px #0009}.sonar-icon:before{content:"";position:absolute;inset:0;border-right:1px solid;animation:sweep 2s linear infinite;border-radius:50%}
.shot-overlay{backdrop-filter:contrast(1.18)}.shot-overlay.active:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),transparent 0 25px,#ff8a2422 27px,transparent 85px);animation:flash .55s .35s both}.impact{width:28px;height:28px}.reticle{box-shadow:0 0 25px #ff7a1840}.cell.sunk{background:#7e211a5c;box-shadow:inset 0 0 18px #ff4b35}
dialog{background:radial-gradient(circle at 50% 0,#19313a,#071217 55%);border-color:#ff7a1855;box-shadow:0 35px 120px #000,0 0 70px #ff7a1818}dialog h2{text-shadow:0 3px #000,0 0 28px #ff7a1830}
@keyframes shipBob{50%{transform:translateY(7px) rotate(.3deg)}}@keyframes search{to{transform:rotate(-13deg)}}@keyframes boardSweep{to{transform:rotate(360deg)}}@keyframes signal{50%{opacity:.3}}@keyframes smoke{50%{transform:translate(6px,-8px) scale(1.2);opacity:.5}}@keyframes flash{40%{background-color:#fff2}100%{opacity:0}}
@media(max-width:820px){.topbar{height:64px}.brand img{width:50px;height:50px}.hero{min-width:0;padding:30px 14px}.hero-forge{width:64px;height:64px}.hero h1{font-size:48px}.hero h1 em{font-size:.48em}.hero-stage .warship{right:-230px}.board-shell{padding:14px}.enemy-shell{--cell:clamp(27px,8.2vw,36px)}.own-shell{--cell:clamp(23px,7.5vw,32px)}.battle-status{padding-right:82px}.battle-status .sonar-btn{right:3vw}.scope-corners{inset:6px}.difficulty button{width:min(300px,82vw)}}

/* BUILD 0003 · APPROVED ARTWORK INTEGRATION */
#battleScreen,#deployScreen{position:relative;isolation:isolate;width:100%;max-width:none;padding:26px clamp(18px,3vw,44px);min-height:calc(100vh - 116px)}
#battleScreen:before,#deployScreen:before{content:"";position:absolute;z-index:-3;inset:0;background:url('../assets/artwork/command-center.png') center/cover no-repeat;filter:saturate(.78) contrast(1.08) brightness(.58)}
#battleScreen:after,#deployScreen:after{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 50% 66%,rgba(4,14,19,.14),rgba(1,5,7,.64) 77%),linear-gradient(180deg,rgba(2,7,10,.4),transparent 35%,rgba(1,5,7,.7));pointer-events:none}
#deployScreen:before{filter:saturate(.72) contrast(1.1) brightness(.42)}
#battleScreen .battle-status,#deployScreen .stage-head{margin:0 auto 18px;padding:12px 16px;max-width:1270px;background:linear-gradient(90deg,rgba(2,8,11,.9),rgba(8,22,28,.6),rgba(2,8,11,.9));border-top:1px solid #83dae323;border-bottom:1px solid #83dae323;box-shadow:0 10px 28px #000b}
#battleScreen .battle-layout{display:grid;grid-template-columns:auto auto minmax(245px,320px);gap:clamp(14px,2vw,34px);justify-content:center;align-items:end;max-width:1480px;margin:auto;padding-top:8px}
#battleScreen .enemy-shell{--cell:clamp(32px,3.6vw,51px);order:2;transform:perspective(1200px) rotateX(3deg);transform-origin:bottom;box-shadow:0 26px 75px #000,0 0 55px #56d8e512}
#battleScreen .own-shell{--cell:clamp(21px,2.15vw,30px);order:1;margin:0 0 18px;transform:perspective(900px) rotateY(3deg);transform-origin:right;box-shadow:0 22px 55px #000}
.observation-monitor{order:3;align-self:start;margin-top:18px;padding:10px;background:linear-gradient(145deg,#34434a,#10191d 18%,#030709 75%,#202d32);border:1px solid #71858b;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);box-shadow:inset 0 1px #d6e2e255,inset 0 -5px 15px #000,0 25px 55px #000;position:relative}
.observation-monitor:before{content:"";position:absolute;inset:4px;border:1px solid #000;pointer-events:none}.monitor-top,.monitor-bottom{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;font-size:9px;letter-spacing:.16em;color:#8fa5ab;text-shadow:0 1px #000}.monitor-top span{display:flex;align-items:center;gap:6px}.monitor-top i{width:6px;height:6px;border-radius:50%;background:#567078;box-shadow:0 0 5px #567078}.observation-monitor.active .monitor-top i{background:#61d8df;box-shadow:0 0 12px #61d8df;animation:signal 1.2s infinite}.monitor-top small{color:#ff9a55}.monitor-glass{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle,#0d333c,#010608 70%);border:3px solid #020405;box-shadow:inset 0 0 35px #000,0 0 0 1px #55737a55}.monitor-glass:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 35px 12px #000;pointer-events:none}.monitor-glass img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .28s,transform 4s ease-out;filter:contrast(1.1) saturate(.86)}.observation-monitor.active .monitor-glass img{opacity:1;transform:scale(1)}.monitor-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#6fabb2;text-align:center;text-shadow:0 0 10px #59e6ee}.monitor-idle b{font-size:10px;letter-spacing:.25em}.monitor-idle small{font-size:7px;letter-spacing:.17em;opacity:.65}.observation-monitor.active .monitor-idle{display:none}.idle-reticle{width:46px;height:46px;border:1px solid #63cbd36b;border-radius:50%;position:relative;animation:sweep 5s linear infinite}.idle-reticle:before,.idle-reticle:after{content:"";position:absolute;background:#63cbd355}.idle-reticle:before{width:1px;height:58px;left:22px;top:-7px}.idle-reticle:after{height:1px;width:58px;left:-7px;top:22px}.scanlines{position:absolute;inset:0;z-index:3;opacity:.18;background:repeating-linear-gradient(0deg,transparent 0 2px,#b8f8fc 3px 3px);mix-blend-mode:overlay;pointer-events:none}.monitor-flash{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none}.signal-in .monitor-flash{animation:monitorFlash .75s}.signal-in .monitor-glass{animation:monitorJolt .38s}.monitor-bottom{height:38px}.monitor-bottom strong{color:#dbe9eb;font-size:13px;letter-spacing:.22em}.observation-monitor.hit .monitor-bottom strong,.observation-monitor.sunk .monitor-bottom strong{color:#ff7a18;text-shadow:0 0 12px #ff5a18}.observation-monitor.sunk{box-shadow:inset 0 1px #d6e2e255,inset 0 -5px 15px #000,0 25px 55px #000,0 0 32px #e03e2133}.observation-monitor.sunk .monitor-glass img{animation:sinkHold 5s ease-out both}
#deployScreen .deploy-layout{max-width:1120px;margin:auto;padding:20px;background:linear-gradient(90deg,rgba(2,8,11,.82),rgba(5,16,21,.68));border:1px solid #80cad221;box-shadow:0 25px 80px #000b;backdrop-filter:blur(3px)}
@keyframes monitorFlash{0%{opacity:1;background:#dffcff}18%{opacity:.75;background:#ff7a18}100%{opacity:0}}@keyframes monitorJolt{20%{transform:translate(-2px,2px)}40%{transform:translate(3px,-1px)}65%{transform:translate(-1px,-2px)}100%{transform:none}}@keyframes sinkHold{0%{filter:brightness(1.8) contrast(1.2)}20%{filter:brightness(.9) contrast(1.15)}100%{filter:brightness(.68) contrast(1.2) saturate(.7)}}
@media(max-width:1100px) and (min-width:821px){#battleScreen .battle-layout{grid-template-columns:auto minmax(220px,270px)}#battleScreen .enemy-shell{grid-row:1/3;grid-column:1;--cell:clamp(31px,4.6vw,45px)}#battleScreen .own-shell{grid-row:2;grid-column:2;--cell:22px}.observation-monitor{grid-row:1;grid-column:2;margin-top:0}}
@media(max-width:820px){#battleScreen,#deployScreen{padding:14px 10px;min-height:calc(100vh - 98px)}#battleScreen:before,#deployScreen:before{position:fixed;background-position:center top;opacity:.55}#battleScreen .battle-layout{display:flex;flex-direction:column;align-items:center;gap:14px}#battleScreen .enemy-shell{order:1;--cell:clamp(27px,8.1vw,35px);transform:none}#battleScreen .observation-monitor{order:2;width:min(360px,96vw);margin-top:0}#battleScreen .own-shell{order:3;--cell:clamp(22px,7.1vw,30px);transform:none;margin:0}#battleScreen .battle-status{padding-right:92px}.observation-monitor .monitor-glass{aspect-ratio:16/7}#deployScreen .deploy-layout{padding:10px}}

/* BUILD 0005 · DRAG, TRUE FULLSCREEN, COMPLETE MONITOR ART */
#deployBoard .cell.ship{cursor:grab}#deployBoard.dragging,#deployBoard.dragging .cell{cursor:grabbing}#deployBoard .cell.drag-ok{background:#4fa66b4d;box-shadow:inset 0 0 16px #5cdb8d}#deployBoard .cell.drag-bad{background:#e05a4f59;box-shadow:inset 0 0 16px #ff5b4d}.fullscreen-btn{font-size:20px;line-height:1}.monitor-glass{background:#010507}.monitor-glass img{object-position:50% 50%;background:#010507}
html:fullscreen,html:fullscreen body{width:100%;height:100%;overflow:auto}html:fullscreen #app{min-height:calc(100vh - 34px)}html:fullscreen .topbar{padding-left:2vw;padding-right:2vw}html:fullscreen #battleScreen,html:fullscreen #deployScreen{min-height:calc(100vh - 116px)}

/* BUILD 0006 · ONE GEOMETRY FOR CELLS, SHIPS AND POINTERS */
.board{display:inline-grid;width:max-content;height:max-content;justify-self:center;align-self:center}.board-shell{width:max-content;justify-self:center}.vessel-layer{width:100%;height:100%}#deployBoard .vessel{pointer-events:auto;cursor:grab;touch-action:none}#deployBoard.dragging .vessel{cursor:grabbing}#deployBoard .vessel:hover{filter:drop-shadow(0 0 8px #69e5ed) drop-shadow(0 5px 5px #000b)}#deployBoard .vessel:after{content:"";position:absolute;inset:-8px;min-width:44px;min-height:44px}#deployBoard.dragging .vessel{opacity:.82;filter:drop-shadow(0 0 12px #ff8a32)}

/* BUILD 0007 · APPROVED PHOTOREALISTIC FLEET */
.vessel{padding:0;isolation:isolate;filter:drop-shadow(0 5px 5px #000d);transition:opacity .2s,filter .2s}.vessel .hull,.vessel .deck,.vessel .turret,.vessel .wake{display:none}.ship-sprite{position:absolute;display:block;pointer-events:none;user-select:none;object-fit:fill;max-width:none;transform-origin:50% 50%;z-index:1}.vessel.vertical .ship-sprite{left:9%;top:2%;width:82%;height:96%;transform:none}.vessel.horizontal .ship-sprite{left:50%;top:50%;width:calc(82% / var(--ship-size));height:calc(96% * var(--ship-size));transform:translate(-50%,-50%) rotate(90deg)}.vessel-submarine.vertical .ship-sprite{left:15%;width:70%}.vessel-submarine.horizontal .ship-sprite{width:calc(70% / var(--ship-size))}.damage-mark{position:absolute;inset:0;z-index:2;display:none;pointer-events:none}.vessel.damaged .damage-mark{display:block;background:radial-gradient(circle at 54% 47%,#fff7 0 2%,#ff9b28dd 3% 7%,#d52e10aa 9%,transparent 22%)}.vessel.damaged .damage-mark:before{content:"";position:absolute;width:34%;height:46%;left:44%;top:5%;background:radial-gradient(ellipse at bottom,#15191bdd 8%,#29303699 38%,transparent 72%);filter:blur(4px);animation:smoke 2.2s ease-in-out infinite}.vessel.damaged .damage-mark i{position:absolute;width:10%;aspect-ratio:1;left:49%;top:43%;border-radius:50%;background:#fff0b8;box-shadow:0 0 8px 3px #ff7a18,0 0 19px 8px #d53612}.vessel.sunk{opacity:.68;filter:grayscale(.9) sepia(.28) brightness(.52) drop-shadow(0 0 9px #ef3e2766)}.vessel.sunk .ship-sprite{opacity:.72}.vessel.sunk .damage-mark{display:block;background:linear-gradient(90deg,transparent 15%,#02090ca8 50%,transparent 85%),radial-gradient(ellipse at 52% 51%,#ff4a182e,transparent 45%)}.vessel.sunk .damage-mark:before{content:"";position:absolute;inset:14%;border:1px solid #ff5d4638;box-shadow:inset 0 0 18px #020608}.ship-mini{position:relative;width:72px;height:28px;display:block;overflow:hidden}.ship-mini img{position:absolute;width:24px;height:68px;left:24px;top:-20px;object-fit:fill;transform:rotate(90deg);filter:drop-shadow(0 2px 3px #000);pointer-events:none}.fleet-item.selected .ship-mini img{filter:drop-shadow(0 0 5px #67e5ed)}#deployBoard .vessel:after{z-index:5}.cell.hit:before,.cell.miss:after{z-index:7}.cell.hit,.cell.miss{z-index:4}

/* BUILD 0008 · RESTORE REALISTIC SHIP BEAM */
.vessel{--beam:86%;--ship-length:96%}.vessel-carrier{--beam:96%}.vessel-battleship{--beam:92%}.vessel-cruiser{--beam:86%}.vessel-destroyer{--beam:84%}.vessel-submarine{--beam:68%}.vessel.vertical .ship-sprite{left:calc((100% - var(--beam))/2);top:calc((100% - var(--ship-length))/2);width:var(--beam);height:var(--ship-length)}.vessel.horizontal .ship-sprite{left:50%;top:50%;width:calc(var(--beam) / var(--ship-size));height:calc(var(--ship-length) * var(--ship-size));transform:translate(-50%,-50%) rotate(90deg)}.ship-mini img{width:30px;height:72px;left:21px;top:-22px}

/* BUILD 0009 · STARTUP SPLASH AND CACHE-SAFE SUNK FEED */
.splash-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#020608;animation:splashFailSafe .55s 4s forwards}.splash-backdrop{position:absolute;inset:-2%;background:linear-gradient(90deg,#02060822 0,#02060818 42%,#020608b8 72%,#020608e8),linear-gradient(180deg,#02060822,#020608b0),url('../assets/artwork/battleships-splash-hero-0002.png') center/cover no-repeat;filter:brightness(.62) saturate(.82) contrast(1.08);transform:scale(1.04);animation:splashDrift 4s ease-out forwards}.splash-screen:before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 72% 48%,#16404a24 0,transparent 34%),repeating-linear-gradient(0deg,transparent 0 3px,#b9f7fb08 4px 4px);box-shadow:inset 0 0 160px #000}.splash-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(470px,82vw);margin-left:min(40vw,620px);animation:splashArrive .85s cubic-bezier(.2,.8,.2,1) both}.splash-content img{width:clamp(150px,22vw,250px);aspect-ratio:1;object-fit:cover;mix-blend-mode:screen;filter:drop-shadow(0 15px 35px #000) drop-shadow(0 0 24px #ff7a1822)}.splash-divider{width:min(310px,68vw);height:2px;margin:8px 0 18px;background:linear-gradient(90deg,transparent,var(--orange) 18% 82%,transparent);box-shadow:0 0 18px #ff7a1877;transform:skew(-28deg)}.splash-content strong{font-size:clamp(22px,4vw,42px);letter-spacing:.34em;margin-right:-.34em;color:#f1f5f6;text-shadow:0 4px 18px #000;line-height:1}.splash-signal{position:relative;width:min(260px,58vw);height:1px;margin-top:32px;background:#6ce1e624;overflow:visible}.splash-signal i{position:absolute;width:34%;height:2px;top:-1px;left:0;background:linear-gradient(90deg,transparent,#72e9ef,#fff,transparent);box-shadow:0 0 14px #61e5ec;animation:splashScan 1.15s ease-in-out infinite}.splash-screen.is-hiding{animation:splashExit .65s ease forwards}.splash-screen.is-hiding .splash-content{animation:splashContentExit .45s ease forwards}@keyframes splashArrive{from{opacity:0;transform:scale(.92) translateY(12px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@keyframes splashDrift{to{transform:scale(1)}}@keyframes splashScan{from{transform:translateX(-70%);opacity:0}20%{opacity:1}to{transform:translateX(265%);opacity:0}}@keyframes splashExit{to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes splashContentExit{to{opacity:0;transform:scale(1.04)}}@keyframes splashFailSafe{to{opacity:0;visibility:hidden;pointer-events:none}}@media(max-width:700px){.splash-backdrop{background-position:34% center;filter:brightness(.48) saturate(.78)}.splash-content{margin-left:0}.splash-screen:before{background:radial-gradient(circle at center,#16404a22 0,transparent 38%),linear-gradient(#02060855,#020608a8),repeating-linear-gradient(0deg,transparent 0 3px,#b9f7fb08 4px 4px)}}@media(max-height:560px){.splash-content img{width:120px}.splash-divider{margin:4px 0 12px}.splash-signal{margin-top:20px}}@media(prefers-reduced-motion:reduce){.splash-screen{animation:splashFailSafe .01ms 1.2s forwards}.splash-content,.splash-backdrop,.splash-signal i{animation:none}.splash-screen.is-hiding{animation:splashExit .01ms forwards}}

/* BUILD 0011 · CINEMATIC GAME OVER AND DEVELOPER MODE */
.result-dialog{width:min(920px,94vw);max-width:none;padding:0;overflow:hidden;text-align:left;border:1px solid #7ccbd446;background:#04090c;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}.result-dialog::backdrop{background:#010406e8;backdrop-filter:blur(8px)}.result-visual{position:relative;height:clamp(220px,42vh,410px);overflow:hidden;background-position:center;background-size:cover}.result-dialog.victory .result-visual{background-image:linear-gradient(90deg,#02060805,#020608c7),url('../assets/artwork/battleships-splash-hero-0002.png')}.result-dialog.defeat .result-visual{background-image:linear-gradient(180deg,#02060808,#020608d6),url('../assets/artwork/observation-sunk-full-0009.png')}.result-visual:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px #000,inset 0 -70px 55px #04090c;pointer-events:none}.result-scan{position:absolute;z-index:2;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#cbfbff0a 4px 4px);mix-blend-mode:screen}.result-copy{position:relative;padding:0 clamp(24px,5vw,58px) 38px;margin-top:-34px;z-index:3}.result-copy .eyebrow{margin-bottom:8px}.result-dialog h2{font-size:clamp(48px,8vw,88px);line-height:.88;margin:0 0 14px;letter-spacing:.06em}.result-dialog.victory h2{color:#f3f8f8;text-shadow:0 0 38px #55dce638,0 5px #061318}.result-dialog.defeat h2{color:#ff7a18;text-shadow:0 0 34px #e33e253c,0 5px #210803}.result-copy>p:last-of-type{color:#aebfc4;font-size:16px;margin:0;max-width:600px}.result-actions{justify-content:flex-start;margin-top:25px}.result-dialog.victory{box-shadow:0 38px 130px #000,0 0 70px #56dce620}.result-dialog.defeat{box-shadow:0 38px 130px #000,0 0 70px #e34b2528}.developer-panel{position:fixed;z-index:1200;left:18px;bottom:18px;width:min(460px,calc(100vw - 36px));padding:12px;background:#050b0ef2;border:1px solid #59dbe050;box-shadow:0 18px 55px #000,inset 0 1px #fff1;transform:translateY(calc(100% + 28px));opacity:0;visibility:hidden;transition:.25s}.developer-panel.active{transform:none;opacity:1;visibility:visible}.developer-panel header{display:flex;align-items:center;gap:10px;color:#9fb3b8;font-size:10px;letter-spacing:.14em;margin-bottom:10px}.developer-panel header span{background:var(--orange);color:#160601;font-weight:900;padding:4px 7px}.developer-panel header b{color:#dff4f5}.developer-panel header kbd{margin-left:auto}.developer-panel>div{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.developer-panel button{min-height:44px;border:1px solid #ffffff20;background:#112129;cursor:pointer;font-weight:800;font-size:11px;letter-spacing:.08em}.developer-panel .dev-victory{border-color:#54d8e755;color:#74e8ee}.developer-panel .dev-defeat{border-color:#ff6a454f;color:#ff8a55}.developer-panel .dev-close{padding:0 14px;color:#9cafb5}@media(max-width:620px){.result-visual{height:230px}.result-copy{padding:0 20px 26px}.result-dialog h2{font-size:46px}.developer-panel>div{grid-template-columns:1fr 1fr}.developer-panel .dev-close{grid-column:1/-1}.developer-panel header kbd{display:none}}