:root{--bg:#04101a;--panel:rgba(10,30,45,.72);--line:rgba(117,210,255,.16);--cyan:#52d9ff;--blue:#1388ff;--orange:#ff9a4a;--red:#ff4e6a;--text:#edfaff;--muted:#83a2b4;--cell:min(2.2vw,35px)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 50% -20%,#124365 0,#071a29 37%,#030b12 100%);color:var(--text)}body{overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}#oceanFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.45}.shell{position:relative;z-index:1;max-width:1800px;margin:auto;padding:18px 24px 32px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.13em}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(82,217,255,.18),rgba(10,26,39,.5));box-shadow:inset 0 0 25px rgba(82,217,255,.12)}.brand strong{display:block;font-size:20px}.brand small{font-size:8px;color:var(--muted)}.status-pill{display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(4,14,23,.58);font-size:12px;color:var(--muted)}#netDot{width:8px;height:8px;border-radius:50%;background:#ffc857;box-shadow:0 0 12px currentColor}.screen{display:none}.screen.active{display:block}.hero{min-height:calc(100vh - 130px);display:none;grid-template-columns:1.25fr .75fr;align-items:center;gap:9vw;padding:5vh 5vw}.hero.active{display:grid}.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--cyan);font-weight:800}.hero h1{font-size:clamp(54px,7vw,110px);line-height:.91;margin:20px 0;letter-spacing:-.06em}.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),#6ca9ff);-webkit-background-clip:text;color:transparent;text-shadow:0 0 38px rgba(82,217,255,.18)}.hero-copy p{max-width:650px;font-size:17px;line-height:1.7;color:#9eb8c8}.features{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.features span{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(9,26,39,.5);font-size:12px;color:#b8d0dc}.glass{background:linear-gradient(145deg,rgba(13,37,54,.82),rgba(5,18,29,.74));border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(22px)}.lobby-card{position:relative;padding:36px;border-radius:28px;overflow:hidden}.card-glow{position:absolute;width:190px;height:190px;background:var(--cyan);filter:blur(100px);opacity:.13;right:-70px;top:-60px}.lobby-card h2{margin:0 0 28px;font-size:28px}.lobby-card label{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted);margin:15px 0}.lobby-card input{width:100%;margin-top:8px;padding:16px 17px;color:white;border:1px solid rgba(133,212,255,.16);border-radius:12px;background:rgba(1,10,17,.58);outline:none;text-transform:uppercase}.lobby-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(82,217,255,.08)}.primary,.secondary{border:0;border-radius:12px;padding:14px 18px;font-weight:900;font-size:12px;letter-spacing:.08em}.primary{color:#001019;background:linear-gradient(100deg,var(--cyan),#54a8ff);box-shadow:0 10px 30px rgba(40,185,255,.25);transition:.25s}.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.secondary{color:#bad8e7;border:1px solid var(--line);background:rgba(7,23,35,.72)}.lobby-card button{width:100%;margin-top:11px}.hint{text-align:center!important;font-size:11px!important;margin:17px 0 0!important}.game-screen{padding-top:10px}.battle-header{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;border-radius:18px;padding:14px 20px;margin-bottom:14px}.battle-header>div:first-child,.turn-box{display:flex;align-items:center;gap:10px}.battle-header small{color:var(--muted);font-size:9px;letter-spacing:.18em}.battle-header strong{font-size:14px}.battle-header button{background:none;color:var(--cyan);border:0;font-size:11px}.versus{display:flex;justify-content:center;align-items:center;gap:18px;font-weight:800}.versus b{font-size:10px;color:var(--orange);border:1px solid rgba(255,154,74,.3);padding:5px 8px;border-radius:7px}.turn-box{justify-content:flex-end}.placement-panel{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-radius:18px;margin-bottom:14px}.placement-panel h2{margin:5px 0;font-size:22px}.placement-panel p{margin:0;color:var(--muted);font-size:12px}.placement-actions{display:flex;gap:8px}.boards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.board-wrap{min-width:0;border-radius:22px;padding:16px}.board-title{display:flex;justify-content:space-between;align-items:center;min-height:52px}.board-title h3{margin:4px 0;font-size:16px}.fleet-tray{display:flex;gap:5px}.ship-chip{height:8px;border-radius:8px;background:linear-gradient(90deg,#4dd2f8,#2f7bc7);box-shadow:0 0 14px rgba(77,210,248,.28)}.legend{display:flex;gap:12px;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:8px;height:8px;border-radius:50%}.legend .hit{background:var(--red)}.legend .miss{background:#8dc9df}.grid-shell{position:relative;display:grid;place-items:center;overflow:auto;padding:8px;border-radius:15px;background:radial-gradient(circle at center,rgba(23,119,161,.14),rgba(1,10,17,.5))}.grid{--cell:min(2.18vw,38px);display:grid;grid-template-columns:repeat(20,var(--cell));grid-template-rows:repeat(20,var(--cell));gap:2px;min-width:max-content}.cell{position:relative;width:var(--cell);height:var(--cell);border:1px solid rgba(105,190,224,.11);background:rgba(9,45,64,.46);transition:transform .12s,background .18s,border-color .18s;overflow:visible}.cell:hover{z-index:2;border-color:rgba(82,217,255,.55);background:rgba(25,94,121,.58)}.cell.ship{background:linear-gradient(145deg,#557482,#233d49);border-color:#8bc1d2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.cell.ship:after{content:"";position:absolute;inset:24%;border-radius:50%;background:#a7c6d2;box-shadow:inset 0 -2px 4px rgba(0,0,0,.4)}.cell.preview-ok{background:rgba(69,224,173,.35);border-color:#66e9b7}.cell.preview-bad{background:rgba(255,78,106,.36);border-color:#ff5971}.cell.hit{background:rgba(255,54,86,.24)}.cell.miss{background:rgba(101,182,218,.12)}.cell.hit:before,.cell.miss:before{content:"";position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}.cell.hit:before{background:#ff4968;box-shadow:0 0 0 5px rgba(255,73,104,.12),0 0 18px #ff4968;animation:pulse 1.6s infinite}.cell.miss:before{background:#92cee2;box-shadow:0 0 10px rgba(146,206,226,.5)}.cell.bomb-known:after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:#ffb15c;text-shadow:0 0 12px #ff8b2e;animation:pulse 1.4s infinite}.cell.explode{z-index:10;animation:explode .72s ease-out}.cell.explode:after{content:"";position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,#ffd26a 10%,#ff7b35 32%,rgba(255,59,69,.48) 52%,transparent 70%);animation:blast .72s ease-out forwards}.enemy-grid.ready .cell:not(.hit):not(.miss){cursor:crosshair}.enemy-grid.ready .cell:not(.hit):not(.miss):hover{transform:scale(1.15);box-shadow:0 0 18px rgba(82,217,255,.34)}.reticle{position:absolute;width:42px;height:42px;border:1px solid var(--cyan);border-radius:50%;pointer-events:none;opacity:0;transition:.08s;box-shadow:0 0 18px rgba(82,217,255,.25)}.reticle:before,.reticle:after{content:"";position:absolute;background:var(--cyan)}.reticle:before{width:1px;height:58px;left:50%;top:-9px}.reticle:after{height:1px;width:58px;top:50%;left:-9px}.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(1,8,14,.78);z-index:50;backdrop-filter:blur(10px)}.modal.show{display:grid}.modal-card{text-align:center;min-width:min(420px,90vw);padding:36px;border-radius:25px}.trophy{font-size:58px;animation:float 2s infinite ease-in-out}.modal-card h2{font-size:40px;margin:10px}.modal-card p{color:var(--muted)}#toast{position:fixed;right:24px;bottom:24px;z-index:80;display:grid;gap:8px}.toast-item{padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(8,26,38,.94);box-shadow:0 15px 35px rgba(0,0,0,.4);animation:toastIn .3s ease;color:#dff7ff;font-size:12px}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.25);filter:brightness(1.25)}}@keyframes explode{40%{transform:scale(1.22)}}@keyframes blast{0%{transform:scale(.15);opacity:1}100%{transform:scale(1.8);opacity:0}}@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}@keyframes toastIn{from{transform:translateX(30px);opacity:0}}@media(max-width:1050px){.hero.active{grid-template-columns:1fr}.hero-copy{padding-top:30px}.boards{grid-template-columns:1fr}.grid{--cell:min(4.1vw,35px)}.placement-panel{align-items:flex-start;gap:18px;flex-direction:column}.battle-header{grid-template-columns:1fr 1fr}.versus{display:none}}@media(max-width:600px){.shell{padding:10px}.brand small{display:none}.hero.active{padding:25px 4px;gap:30px}.hero h1{font-size:52px}.lobby-card{padding:24px}.battle-header{padding:12px}.boards{gap:10px}.board-wrap{padding:10px}.grid{--cell:4.1vw;gap:1px}.placement-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.placement-actions .primary{grid-column:1/-1}.board-title{align-items:flex-start}.legend{display:none}}


/* Drag & drop fleet deployment */
.fleet-tray{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:420px}
.ship-chip{width:auto!important;min-width:48px;height:34px;padding:5px 8px;border:1px solid rgba(108,211,255,.2);border-radius:9px;background:rgba(4,22,34,.78);display:flex;align-items:center;gap:7px;touch-action:none;cursor:grab;transition:.18s;box-shadow:none}
.ship-chip:hover,.ship-chip.selected{border-color:var(--cyan);background:rgba(32,105,135,.32);transform:translateY(-2px)}
.ship-chip:active{cursor:grabbing}.ship-chip.deployed{opacity:.46}.ship-chip.deployed:hover,.ship-chip.deployed.selected{opacity:1}
.ship-chip small{font-size:9px;color:#9bdcf2;font-weight:900}.mini-ship,.drag-ship{display:flex;gap:2px;align-items:center;filter:drop-shadow(0 0 8px rgba(82,217,255,.38))}
.mini-ship i,.drag-ship i{display:block;width:8px;height:14px;background:linear-gradient(180deg,#79e2ff,#256d98);border:1px solid rgba(211,247,255,.55)}
.mini-ship i:first-child,.drag-ship i:first-child{border-radius:8px 2px 2px 8px}.mini-ship i:last-child,.drag-ship i:last-child{border-radius:2px 8px 8px 2px}
.drag-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:0;transform-origin:0 0;transition:opacity .12s;will-change:transform}.drag-ghost.show{opacity:.92}
.drag-ship i{width:24px;height:31px;background:linear-gradient(180deg,#9cecff,#347da5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.is-dragging,.is-dragging *{cursor:grabbing!important;user-select:none}.is-dragging .grid-shell{overflow:hidden}
#myGrid{touch-action:none}.cell.drag-source{opacity:.25}.cell.preview-ok{animation:dropPulse .55s ease-in-out infinite alternate}.cell.preview-bad{animation:badPulse .42s ease-in-out infinite alternate}
@keyframes dropPulse{to{filter:brightness(1.35);box-shadow:inset 0 0 12px rgba(94,255,194,.32)}}@keyframes badPulse{to{filter:brightness(1.2)}}
@media(max-width:600px){.fleet-tray{justify-content:flex-start;max-width:100%;margin-top:8px}.board-title{flex-direction:column}.ship-chip{min-width:43px;height:31px;padding:4px 6px}.mini-ship i{width:6px;height:12px}.drag-ship i{width:18px;height:25px}.placement-panel p{line-height:1.55}}


/* Real-time lobby chat */
.chat-panel{margin-top:14px;border-radius:22px;padding:16px;display:grid;grid-template-rows:auto minmax(150px,230px) auto;min-width:0;overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}.chat-head small{font-size:9px;letter-spacing:.18em;color:var(--muted)}.chat-head h3{margin:4px 0 0;font-size:16px}.chat-status{font-size:9px;letter-spacing:.12em;color:#55e6a5;text-shadow:0 0 12px rgba(85,230,165,.55)}.chat-status.offline{color:#ffc857;text-shadow:none}
.chat-messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px;border:1px solid rgba(117,205,240,.1);border-radius:15px;background:linear-gradient(180deg,rgba(1,11,18,.58),rgba(6,25,37,.44));display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(82,217,255,.28) transparent}.chat-empty{margin:auto;color:var(--muted);font-size:12px;text-align:center}.chat-message{max-width:min(72%,620px);display:grid;gap:4px}.chat-message.mine{align-self:flex-end}.chat-message.theirs{align-self:flex-start}.chat-meta{font-size:8px;letter-spacing:.11em;color:#7696a6;padding:0 6px}.chat-message.mine .chat-meta{text-align:right}.chat-bubble{padding:10px 13px;border-radius:14px 14px 14px 4px;background:rgba(26,61,79,.86);border:1px solid rgba(125,211,244,.13);font-size:12px;line-height:1.45;color:#dceff6;overflow-wrap:anywhere;box-shadow:0 8px 20px rgba(0,0,0,.16)}.chat-message.mine .chat-bubble{border-radius:14px 14px 4px 14px;color:#00131d;background:linear-gradient(110deg,#70ddf7,#5ea9ff);border-color:transparent;font-weight:650}.chat-message.fresh{animation:chatIn .28s cubic-bezier(.2,.8,.2,1)}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:9px;padding-top:11px}.chat-form input{min-width:0;padding:13px 15px;border:1px solid rgba(133,212,255,.14);border-radius:12px;color:#e8f7fb;background:rgba(1,10,17,.62);outline:none}.chat-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(82,217,255,.07)}.chat-form button{min-width:120px}
@keyframes chatIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
@media(max-width:600px){.chat-panel{grid-template-rows:auto minmax(180px,34vh) auto;padding:11px}.chat-message{max-width:88%}.chat-form{grid-template-columns:1fr}.chat-form button{width:100%;min-width:0}.chat-bubble{font-size:13px}}