:root{--bg:#041019;--panel:#0a1d29;--panel2:#0e2836;--line:#1d5367;--cyan:#53d9e8;--ice:#eafcff;--muted:#8eb0bb;--orange:#ff9d22;--red:#e64037;--green:#7de0a6;--cell:rgba(33,112,139,.21);--shadow:0 24px 70px rgba(0,0,0,.42)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ice);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{touch-action:manipulation}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 14%,rgba(46,143,168,.12),transparent 32%),linear-gradient(180deg,#071723,#020a10 72%)}
#app,.view{height:100%}.view{position:relative;z-index:1;overflow:hidden}.topbar{height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;border-bottom:1px solid rgba(83,217,232,.18);background:rgba(2,13,20,.88);backdrop-filter:blur(12px)}.brand-mini{font-size:12px;letter-spacing:.14em;font-weight:800;display:flex;align-items:center;gap:8px}.radar-dot{width:9px;height:9px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}.top-title{color:var(--muted);font-size:12px;letter-spacing:.12em}.topbar>.text-btn{justify-self:end}.text-btn{border:0;background:transparent;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.1em;padding:10px;cursor:pointer}.text-btn.danger{color:#ff756f}.btn{min-height:48px;border-radius:9px;padding:0 20px;border:1px solid transparent;font-weight:900;letter-spacing:.065em;cursor:pointer}.btn.primary{background:linear-gradient(180deg,#47d2df,#229aae);color:#001015;box-shadow:0 8px 25px rgba(83,217,232,.15)}.btn.secondary{background:rgba(10,40,53,.8);border-color:#286077;color:var(--ice)}.btn:disabled,.fire-btn:disabled{opacity:.32;cursor:not-allowed}.btn.danger-fill{background:#7f2b2b;color:#fff;border-color:#b24642}.small-btn{min-height:38px;font-size:10px;width:100%;margin-top:10px}.eyebrow,.section-label,.dialog-kicker,.end-kicker,.captain-mark{font-size:10px;letter-spacing:.22em;font-weight:900;color:var(--cyan)}.muted{color:var(--muted)}.small{font-size:12px}
/* Landing */
.landing{height:100%;display:grid;place-items:center;isolation:isolate}.ocean-bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#06131d 0 44%,#0b3543 45%,#061824 100%)}.ocean-bg:after{content:"";position:absolute;left:-20%;right:-20%;bottom:-18%;height:55%;background:repeating-radial-gradient(ellipse at 50% 0,rgba(116,210,221,.11) 0 1px,transparent 2px 23px);animation:ocean 9s linear infinite}.radar-sweep{position:absolute;width:58vw;height:58vw;max-width:700px;max-height:700px;border:1px solid rgba(83,217,232,.11);border-radius:50%;left:6%;top:-18%;background:conic-gradient(from 20deg,transparent 0 75%,rgba(60,223,236,.13) 94%,transparent 100%);animation:spin 11s linear infinite}.radar-sweep:before,.radar-sweep:after{content:"";position:absolute;inset:20%;border:1px solid rgba(83,217,232,.09);border-radius:50%}.radar-sweep:after{inset:40%}.horizon-ship{position:absolute;bottom:37%;width:125px;height:17px;background:#02080c;clip-path:polygon(0 74%,17% 55%,37% 52%,45% 8%,60% 7%,64% 53%,92% 57%,100% 78%,89% 100%,11% 100%);opacity:.8}.ship-one{right:14%}.ship-two{right:35%;transform:scale(.55);opacity:.45}.landing-card{position:relative;width:min(520px,80vw);padding:38px 44px;background:linear-gradient(145deg,rgba(4,18,27,.89),rgba(7,32,42,.78));border:1px solid rgba(91,213,226,.24);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(13px)}.landing-card h1{font-size:clamp(42px,6.2vw,76px);line-height:.82;margin:18px 0 16px;letter-spacing:-.055em}.landing-card h1 span{display:block;color:var(--cyan);font-size:.43em;letter-spacing:.18em;margin-bottom:11px}.tagline{color:#b7d4db;margin:0 0 28px}.landing-actions{display:grid;gap:10px}.landing-actions .btn{width:100%}.offline-pill{margin-top:20px;color:var(--muted);font-size:9px;letter-spacing:.12em;font-weight:800}.offline-pill span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-right:5px}@keyframes ocean{to{transform:translateX(5%)}}@keyframes spin{to{transform:rotate(360deg)}}
/* Pairing/scanner */
.pair-page{height:calc(100% - 54px);display:grid;place-items:center;padding:24px}.pair-page.two-col{grid-template-columns:minmax(270px,420px) minmax(380px,620px);gap:42px}.pair-page.reverse{direction:rtl}.pair-page.reverse>*{direction:ltr}.pair-copy h2,.center-page h2,.scanner-copy h2,.ready-wait h2,.disconnect-page h2{font-size:clamp(26px,3.4vw,45px);line-height:1.03;margin:12px 0}.pair-copy p,.scanner-copy p,.disconnect-page p{color:var(--muted);line-height:1.55}.step-chip{display:inline-flex;border:1px solid rgba(83,217,232,.35);color:var(--cyan);border-radius:999px;padding:6px 10px;font-size:9px;letter-spacing:.16em;font-weight:900}.step-chip.warning{color:#ffba67;border-color:#8f6131}.session-mark{margin-top:28px;color:var(--muted);font-size:12px;letter-spacing:.2em}.session-mark b{color:var(--ice);font-size:24px;margin-left:10px}.qr-card{background:#eefcff;border-radius:16px;padding:18px;display:grid;gap:12px;justify-items:center;box-shadow:var(--shadow);width:min(100%,620px)}.qr-card canvas{width:min(55vh,100%);aspect-ratio:1;display:block}.qr-card .btn{width:100%}.qr-card .text-btn{color:#9b2a27}.waiting-line{color:#24424b;font-weight:800;font-size:12px}.pulse{display:inline-block;width:8px;height:8px;background:#25a5b5;border-radius:50%;margin-right:7px;animation:pulse 1s infinite}.spinner{width:36px;height:36px;border:3px solid rgba(83,217,232,.16);border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite;margin:24px auto}.spinner.big{width:60px;height:60px}.center-page,.ready-wait,.disconnect-page{height:calc(100% - 54px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.scanner-page{height:calc(100% - 54px);display:grid;grid-template-columns:340px 1fr;gap:28px;padding:24px}.scanner-copy{align-self:center}.camera-wrap{position:relative;overflow:hidden;border-radius:16px;border:1px solid #1c5368;background:#000}.camera-wrap video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;width:min(52vh,55%);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}.scan-frame i{position:absolute;width:48px;height:48px;border-color:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan))}.scan-frame i:nth-child(1){left:0;top:0;border-left:4px solid;border-top:4px solid}.scan-frame i:nth-child(2){right:0;top:0;border-right:4px solid;border-top:4px solid}.scan-frame i:nth-child(3){left:0;bottom:0;border-left:4px solid;border-bottom:4px solid}.scan-frame i:nth-child(4){right:0;bottom:0;border-right:4px solid;border-bottom:4px solid}.scan-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);width:55%;left:22.5%;top:30%;box-shadow:0 0 10px var(--cyan);animation:scan 2.2s ease-in-out infinite alternate}@keyframes scan{to{top:70%}}@keyframes pulse{50%{opacity:.3;transform:scale(.75)}}.warning-icon{font-size:56px;color:#ff8f73;border:2px solid #b74b3d;border-radius:50%;width:90px;height:90px;display:grid;place-items:center;margin-bottom:18px}
/* Board */
.board-widget{position:relative;padding-left:25px;padding-top:23px;width:100%;aspect-ratio:1}.board-core{position:absolute;left:25px;top:23px;right:0;bottom:0;border:1px solid #39778c;background:linear-gradient(rgba(14,71,92,.22),rgba(4,32,45,.53)),radial-gradient(circle at 30% 25%,rgba(40,163,187,.13),transparent 35%);box-shadow:inset 0 0 28px rgba(0,0,0,.32);overflow:hidden}.cell-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);z-index:3}.grid-cell{position:relative;border:0;border-right:1px solid rgba(79,159,182,.34);border-bottom:1px solid rgba(79,159,182,.34);background:transparent;padding:0;color:#fff;cursor:pointer}.grid-cell:nth-child(10n){border-right:0}.grid-cell:nth-last-child(-n+10){border-bottom:0}.grid-cell:not(.spent):hover{background:rgba(83,217,232,.08)}.grid-cell.selected{background:rgba(83,217,232,.25);box-shadow:inset 0 0 0 2px var(--cyan)}.grid-cell.invalid{animation:invalid .45s}.col-labels{position:absolute;left:25px;top:0;right:0;height:23px;display:grid;grid-template-columns:repeat(10,1fr);align-items:center;text-align:center;color:#6f9da9;font-size:10px;font-weight:800}.row-labels{position:absolute;top:23px;left:0;bottom:0;width:25px;display:grid;grid-template-rows:repeat(10,1fr);align-items:center;text-align:center;color:#6f9da9;font-size:10px;font-weight:800}.ship-layer{position:absolute;inset:0;z-index:2;pointer-events:none}.ship-art{position:absolute;left:calc(var(--col)*10% + 2px);top:calc(var(--row)*10% + 3px);width:calc(var(--len)*10% - 4px);height:calc(10% - 6px);pointer-events:auto;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}.ship-art.vertical{width:calc(10% - 6px);height:calc(var(--len)*10% - 4px);left:calc(var(--col)*10% + 3px);top:calc(var(--row)*10% + 2px)}.ship-body{position:absolute;inset:5% 1%;background:linear-gradient(180deg,#8ba2aa,#3a535e 45%,#203640 52%,#68818a);clip-path:polygon(2% 50%,7% 20%,78% 13%,96% 36%,100% 50%,96% 64%,78% 87%,7% 80%);border-radius:35%;opacity:.93}.vertical .ship-body{inset:1% 7%;clip-path:polygon(50% 1%,80% 8%,87% 78%,67% 95%,50% 100%,33% 95%,13% 78%,20% 8%)}.ship-body .deck{position:absolute;left:16%;right:15%;top:36%;height:28%;background:#162b34;border-radius:30%}.ship-body .bridge{position:absolute;width:13%;height:60%;left:53%;top:20%;background:#b6c8ca;border:2px solid #223b43;border-radius:3px}.ship-art.known-sunk{filter:grayscale(.65) brightness(.65);opacity:.7}.marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7}.missile-mark{width:20%;height:72%;border-radius:50% 50% 35% 35%;filter:drop-shadow(0 0 4px currentColor)}.missile-mark:before{content:"";position:absolute;left:18%;right:18%;top:0;height:22%;clip-path:polygon(50% 0,100% 100%,0 100%);background:currentColor}.missile-mark:after{content:"";position:absolute;left:-35%;right:-35%;bottom:0;height:28%;background:currentColor;clip-path:polygon(0 100%,28% 0,50% 60%,72% 0,100% 100%)}.missile-mark.white{color:#f7feff;background:#f7feff}.missile-mark.red{color:#ff4c43;background:#ff4c43}.blast-mark{width:66%;height:66%;background:radial-gradient(circle,#fff59b 0 11%,#ffad21 12% 37%,#e53d28 39% 57%,transparent 59%);filter:drop-shadow(0 0 7px #ff7b20)}.blast-mark:before{content:"";position:absolute;inset:-20%;background:#ff9d22;clip-path:polygon(50% 0,59% 31%,80% 10%,73% 38%,100% 40%,72% 54%,92% 79%,64% 67%,54% 100%,43% 68%,16% 90%,29% 58%,0 48%,32% 39%,17% 12%,42% 31%);z-index:-1}.ship-scorch{position:absolute;width:12px;height:12px;border-radius:50%;background:#d64931;box-shadow:0 0 9px #ff9d22}.ship-scorch:nth-of-type(1){left:28%;top:35%}.ship-scorch:nth-of-type(2){left:52%;top:46%}.ship-scorch:nth-of-type(3){left:70%;top:35%}@keyframes invalid{50%{background:rgba(230,64,55,.55);box-shadow:inset 0 0 0 2px var(--red)}}
/* Placement */
.placement-layout{height:calc(100% - 54px);display:grid;grid-template-columns:minmax(460px,1fr) 330px;gap:34px;padding:20px 32px 26px;max-width:1200px;margin:auto}.placement-board{min-height:0;display:flex;flex-direction:column}.placement-board .board-widget{height:calc(100% - 20px);width:auto;max-width:calc(100vh - 105px);margin:auto}.shipyard{border-left:1px solid rgba(83,217,232,.16);padding-left:26px;display:flex;flex-direction:column;min-height:0}.ship-list{display:grid;gap:7px;margin:12px 0;flex:1}.ship-choice{position:relative;display:grid;grid-template-columns:1fr 100px;grid-template-rows:auto auto;align-items:center;text-align:left;padding:9px 11px;background:rgba(10,37,49,.72);border:1px solid #17485b;border-radius:9px;color:#d9f2f5}.ship-choice.active{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(83,217,232,.25),inset 0 0 22px rgba(83,217,232,.08)}.ship-choice.placed small{color:var(--green)}.ship-choice span{font-weight:800;font-size:12px}.ship-choice small{color:#6e9ca8;font-size:8px;letter-spacing:.1em}.mini-vessel{grid-row:1/3;grid-column:2;width:calc(var(--len)*18px);height:13px;justify-self:end;background:linear-gradient(180deg,#94aab1,#314b56);clip-path:polygon(0 50%,8% 10%,80% 16%,100% 50%,80% 84%,8% 90%)}.placement-controls{display:grid;gap:7px}.hint{font-size:10px;line-height:1.5;color:#7499a3}.opponent-ready{font-size:10px;color:var(--green);letter-spacing:.15em;font-weight:900;margin-top:5px}
/* Ready */
.ready-wait{background:radial-gradient(circle at center,rgba(30,126,151,.17),transparent 43%)}.sonar-ring{width:170px;height:170px;border:1px solid rgba(83,217,232,.6);border-radius:50%;display:grid;place-items:center;margin-bottom:25px;animation:sonar 2.1s ease-out infinite}.sonar-ring:before,.sonar-ring div{content:"";width:90px;height:90px;border:1px solid rgba(83,217,232,.4);border-radius:50%}.sonar-ring div{width:22px;height:22px;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}@keyframes sonar{70%{box-shadow:0 0 0 55px rgba(83,217,232,0)}}
/* Battle */
.battle-layout{height:calc(100% - 54px);display:grid;grid-template-columns:minmax(520px,1fr) minmax(280px,36%);gap:28px;padding:14px 25px 20px;max-width:1280px;margin:auto}.enemy-panel,.own-panel{min-height:0}.enemy-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.own-panel{display:flex;flex-direction:column;border-left:1px solid rgba(83,217,232,.15);padding-left:24px}.board-heading{display:flex;align-items:center;justify-content:space-between;min-height:46px}.board-heading div:first-child{display:flex;flex-direction:column}.board-heading span{font-size:9px;color:#6fa3b0;letter-spacing:.17em;font-weight:900}.board-heading strong{font-size:17px}.turn-badge{font-size:10px;letter-spacing:.13em;color:#759ba5;border:1px solid #245265;padding:8px 11px;border-radius:6px}.turn-badge.active{color:#041016;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(83,217,232,.2)}.enemy-panel>.board-widget{height:100%;width:auto;justify-self:center;max-width:calc(100vh - 145px)}.own-panel>.board-widget{width:min(100%,330px);margin:0 auto}.fire-strip{display:grid;grid-template-columns:120px minmax(180px,360px);gap:12px;justify-content:center;align-items:center;margin-top:6px}.target-readout{height:52px;border:1px solid #27596b;border-radius:7px;padding:7px 13px;display:flex;flex-direction:column}.target-readout small{font-size:8px;color:#769ba5;letter-spacing:.14em}.target-readout b{font-size:20px}.fire-btn{height:52px;border:0;border-radius:7px;background:linear-gradient(180deg,#ffb13e,#de6d1d);color:#1c0a00;font-size:17px;font-weight:950;letter-spacing:.18em;box-shadow:0 8px 22px rgba(222,109,29,.18)}.fleet-key{margin-top:8px;border-top:1px solid rgba(83,217,232,.15);padding-top:8px}.fleet-head,.fleet-row{display:grid;grid-template-columns:1fr 64px 64px;align-items:center;gap:7px}.fleet-head{font-size:7px;color:#648d99;letter-spacing:.12em;margin-bottom:3px}.fleet-row{height:23px;font-size:9px;color:#9ebdc4}.tiny-ship{display:block;height:6px;width:calc(var(--len)*9px);background:#7f9da5;clip-path:polygon(0 50%,12% 0,82% 8%,100% 50%,82% 92%,12% 100%)}.tiny-ship.enemy{background:#bd8246}.tiny-ship.sunk{opacity:.2;text-decoration:line-through;filter:grayscale(1)}
/* Cinematics */
.cinematic-root{position:fixed;inset:0;z-index:80;display:none;background:#020a10}.cinematic-root.show{display:block}.cinematic{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:34px;background:linear-gradient(180deg,#061723,#092d3c 55%,#05131c);overflow:hidden}.cin-gridref{text-align:center;color:#96c1cb;letter-spacing:.2em;font-weight:900;font-size:12px}.cin-gridref b{color:#fff;font-size:26px;margin-left:9px}.cin-scene{position:relative;margin:20px auto;width:min(86vw,1000px);border-radius:18px;overflow:hidden;background:linear-gradient(#071925 0 45%,#116278 46% 55%,#073542 56%);box-shadow:inset 0 0 100px #000,0 20px 70px #000}.cin-scene:after{content:"";position:absolute;left:-10%;right:-10%;bottom:6%;height:42%;background:repeating-radial-gradient(ellipse at 50% 0,rgba(212,249,255,.2) 0 1px,transparent 2px 22px);animation:ocean 4s linear infinite}.cin-radar{position:absolute;width:45vh;height:45vh;border-radius:50%;border:1px solid rgba(83,217,232,.16);left:5%;top:-20%;background:conic-gradient(transparent 0 75%,rgba(83,217,232,.15));animation:spin 5s linear infinite}.cin-projectile{position:absolute;z-index:5;width:18px;height:70px;border-radius:50% 50% 30% 30%;background:#f5feff;left:50%;top:-20%;transform:rotate(12deg);filter:drop-shadow(0 0 7px #fff);animation:projectile 1.4s cubic-bezier(.7,.02,.9,.55) .45s forwards}.cin-hull{position:absolute;z-index:2;left:25%;right:19%;height:55px;bottom:29%;background:#263c46;clip-path:polygon(0 50%,10% 7%,77% 12%,100% 50%,77% 88%,10% 93%);filter:drop-shadow(0 10px 7px rgba(0,0,0,.7))}.cin-impact{position:absolute;z-index:7;left:50%;bottom:31%;width:100px;height:100px;transform:translate(-50%,50%)}.cin-impact .splash{display:block;width:100%;height:100%;opacity:0;animation:impactshow .3s 1.8s forwards;background:radial-gradient(ellipse,#fff 0 12%,#95e4ed 13% 31%,transparent 35%);filter:drop-shadow(0 0 12px #dffcff)}.cin-impact .blast{display:block;width:100%;height:100%;opacity:0;animation:impactshow .25s 1.8s forwards;background:radial-gradient(circle,#fff7a2 0 12%,#ff9d22 18% 43%,#e64037 47% 59%,transparent 62%);filter:drop-shadow(0 0 22px #ff7b20)}.cin-result{text-align:center;min-height:68px;display:flex;flex-direction:column;justify-content:center}.cin-result strong{font-size:32px;letter-spacing:.1em;color:var(--cyan)}.cinematic.hit .cin-result strong,.cinematic.sunk .cin-result strong{color:var(--orange)}.cin-result small{color:#91b2bb;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}.cinematic.sunk .cin-hull{animation:sink 3s ease-in 3s forwards}@keyframes projectile{to{top:66%;transform:rotate(3deg) scale(.75)}}@keyframes impactshow{to{opacity:1;transform:scale(1.35)}}@keyframes sink{to{transform:translateY(80px) rotate(7deg);opacity:.3}}
.coin-screen,.end-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle,#0b3443,#02090e 63%)}.coin{position:relative;width:190px;height:190px;transform-style:preserve-3d;animation:coinflip 2.3s cubic-bezier(.25,.9,.35,1) forwards}.coin span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;background:radial-gradient(circle at 35% 30%,#fff1a4,#c9952b 50%,#715116);border:9px double #5f4313;color:#2d2008;font-size:70px;font-weight:950;box-shadow:0 20px 60px #000}.coin span+span{transform:rotateY(180deg)}.coin-label{margin-top:25px;color:#8db4be;letter-spacing:.25em;font-size:10px}.coin-winner{font-size:30px;font-weight:950;margin-top:9px;opacity:0;animation:reveal .4s 2.45s forwards}@keyframes coinflip{0%{transform:rotateY(0) translateY(0)}45%{transform:rotateY(1170deg) translateY(-160px) rotateX(20deg)}100%{transform:rotateY(2160deg) translateY(0)}}@keyframes reveal{to{opacity:1}}
.end-screen{overflow:hidden}.end-radar{position:absolute;width:70vh;height:70vh;border:1px solid rgba(83,217,232,.18);border-radius:50%;animation:spin 8s linear infinite}.end-screen h1{font-size:clamp(64px,11vw,140px);line-height:.8;margin:12px;letter-spacing:-.07em;z-index:2}.end-screen.victory h1{color:var(--cyan)}.end-screen.defeat h1{color:#dc6a58}.end-screen p,.end-screen .end-kicker{z-index:2}
/* End reveal */
.end-layout{height:calc(100% - 54px);display:grid;grid-template-columns:280px 1fr 1fr;gap:20px;padding:22px 28px;max-width:1280px;margin:auto}.end-summary{align-self:center}.end-summary h2{font-size:32px;line-height:1;margin:10px 0}.end-summary p{color:var(--muted)}.end-actions{display:grid;gap:8px;margin-top:25px}.reveal-board{min-width:0;display:flex;flex-direction:column}.reveal-board h3{text-align:center;margin:0 0 5px}.reveal-board .board-widget{max-height:calc(100vh - 110px);width:auto;margin:auto}
/* Dialog/toast/disconnect/orientation */
.dialog-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,5,8,.72);display:grid;place-items:center;backdrop-filter:blur(8px)}.dialog{position:relative;width:min(390px,80vw);padding:28px;background:#0b202b;border:1px solid #2f6678;border-radius:15px;box-shadow:var(--shadow);display:grid;gap:10px}.dialog h3{font-size:25px;margin:0}.dialog p{color:var(--muted);font-size:12px;line-height:1.5}.dialog-x{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#7ba2ad;font-size:25px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toast-root{position:fixed;z-index:120;left:50%;bottom:20px;transform:translateX(-50%);display:grid;gap:8px}.toast{background:#dffbff;color:#06212b;border-radius:7px;padding:10px 16px;font-weight:750;font-size:12px;box-shadow:0 10px 30px #000}.toast.error{background:#ffd9d5;color:#571610}.signal-lost{display:flex;align-items:end;gap:5px;height:70px;margin-bottom:18px}.signal-lost i{display:block;width:15px;background:#a45b4e}.signal-lost i:nth-child(1){height:20px}.signal-lost i:nth-child(2){height:40px}.signal-lost i:nth-child(3){height:60px;opacity:.2}.disconnect-page .btn{width:280px;margin-top:8px}.orientation-block{display:none;position:fixed;inset:0;background:#031019;z-index:999;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.orientation-block.show{display:flex}.rotate-device{font-size:70px;color:var(--cyan);animation:rotatehint 1.8s ease-in-out infinite}.orientation-block h1{margin:10px 0}.orientation-block p{color:var(--muted)}@keyframes rotatehint{50%{transform:rotate(90deg)}}
@media(max-width:850px){.pair-page.two-col{grid-template-columns:1fr 1.3fr;gap:18px}.scanner-page{grid-template-columns:260px 1fr}.placement-layout{grid-template-columns:1fr 270px;padding-left:16px;padding-right:16px}.battle-layout{grid-template-columns:1.5fr .8fr;gap:15px;padding-left:12px;padding-right:12px}.own-panel{padding-left:12px}.end-layout{grid-template-columns:220px 1fr 1fr;padding:14px}.top-title{display:none}}

.ship-art.vertical .ship-body .deck{left:36%;right:auto;top:16%;bottom:15%;width:28%;height:auto}.ship-art.vertical .ship-body .bridge{left:20%;top:53%;width:60%;height:13%}
/* Tactical cell -> cinematic bridge */
.cin-cell-origin{position:fixed;z-index:90;left:var(--ox);top:var(--oy);width:var(--ow);height:var(--oh);display:grid;place-items:center;background:rgba(83,217,232,.34);border:2px solid var(--cyan);box-shadow:0 0 28px rgba(83,217,232,.65);color:#fff;font-size:11px;animation:cellzoom .72s cubic-bezier(.2,.75,.25,1) forwards;pointer-events:none}.cin-cell-origin b{opacity:0;animation:reveal .18s .45s forwards}@keyframes cellzoom{to{left:7vw;top:11vh;width:86vw;height:72vh;border-radius:18px;opacity:.08}}
.cin-hull.hull-carrier{left:17%;right:12%;height:64px}.cin-hull.hull-battleship{left:22%;right:16%;height:59px}.cin-hull.hull-cruiser{left:29%;right:23%;height:52px}.cin-hull.hull-submarine{left:31%;right:25%;height:42px;border-radius:45%;clip-path:ellipse(50% 48% at 50% 50%)}.cin-hull.hull-destroyer{left:35%;right:29%;height:44px}