.stk{position:absolute;inset:0;container-type:size;overflow:hidden;color:#eaf4ff;background:radial-gradient(80% 60% at 20% 0%,rgb(22 184 232 / .25),transparent 70%),radial-gradient(70% 60% at 100% 100%,rgb(85 214 90 / .1),transparent 70%),linear-gradient(180deg,#08223f,#0a2e52 60%,#071b33);--water: #12507E;--water-2: #1A6699;--ship: #A9BCCF;--ship-edge: #7E93A9;--hit: #FF5574;--gold: #FFC21A;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.stk:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-radial-gradient(circle at 50% 120%,transparent 0 18px,rgb(255 255 255 / .12) 19px 20px,transparent 21px 40px);animation:stk-waves 14s linear infinite}@keyframes stk-waves{to{background-position:0 -40px}}.stk button{font:inherit;cursor:pointer;touch-action:manipulation}.stk-place #stk-mine,.stk-dock{touch-action:none}.stk-place #stk-mine .cell{cursor:pointer}.stk-screen{position:relative;width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:clamp(8px,2cqmin,18px);overflow-y:auto;animation:stk-in .35s cubic-bezier(.2,.8,.2,1)}@keyframes stk-in{0%{opacity:0;transform:scale(.98)}}.stk-menu{width:min(100%,760px);margin:auto;display:grid;gap:clamp(10px,2.2cqh,18px)}.stk-hero{display:grid;justify-items:center;text-align:center;gap:4px}.stk-hero-ship{width:clamp(120px,30cqmin,220px);animation:stk-bob 3s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgb(0 0 0 / .35))}@keyframes stk-bob{50%{transform:translateY(-4px) rotate(-1deg)}}.stk-hero h2{font-size:clamp(28px,7cqmin,48px);font-weight:900;letter-spacing:-.03em}.stk-hero p{color:#eaf4ffbf;font-size:14px;max-width:46ch}.stk-nick{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:#eaf4ffbf;font-weight:600}.stk-nick input,.stk-join input{min-width:0;padding:7px 12px;border-radius:999px;border:1px solid rgb(255 255 255 / .3);background:#0000004d;color:#fff;font-weight:700}.stk-nick input{width:190px;text-align:center}.stk-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}.stk-mode{text-align:left;display:grid;gap:8px;align-content:start;padding:14px;border-radius:16px;border:1px solid rgb(255 255 255 / .14);background:#ffffff12;color:#fff;backdrop-filter:blur(6px);transition:transform .2s,background-color .2s}button.stk-mode:hover,.stk-mode:focus-within{background:#ffffff1f;transform:translateY(-2px)}.stk-mode h3{font-size:16px;font-weight:800}.stk-mode p{font-size:13px;color:#eaf4ffb3}.stk-pills{display:flex;flex-wrap:wrap;gap:6px}.stk-pill{padding:6px 12px;border-radius:999px;border:1px solid rgb(255 255 255 / .3);background:transparent;color:#fff;font-weight:700;font-size:13px}.stk-pill:hover{background:#fff;color:#08223f}.stk-pill.gold{background:var(--gold);color:#171b58;border-color:transparent}.stk-join{display:flex;gap:6px}.stk-join input{width:100%;text-transform:uppercase;letter-spacing:.12em;font-size:13px}.stk-wins{color:var(--gold);font-weight:700;font-size:12px}.stk-rules{text-align:center;font-size:12px;color:#eaf4ff8c}.stk-board{--bs: 300px;width:var(--bs);aspect-ratio:1;display:grid;grid-template-columns:.62fr repeat(10,1fr);grid-template-rows:.62fr repeat(10,1fr);gap:2px;padding:6px;border-radius:14px;background:#030e1c8c;border:1px solid rgb(255 255 255 / .12);box-shadow:0 14px 34px #00000059;font-size:calc(var(--bs) / 30)}.stk-board .lbl{display:grid;place-items:center;color:#eaf4ff8c;font-weight:700;font-size:.95em}.stk-board .cell{position:relative;border:0;padding:0;border-radius:3px;min-width:0;min-height:0;background:linear-gradient(160deg,var(--water-2),var(--water));box-shadow:inset 0 0 0 1px #ffffff0d}.stk-board.target .cell:disabled{cursor:default}.stk-board.target.active .cell:not(:disabled):hover{background:linear-gradient(160deg,#2a86c2,#1a6699);box-shadow:inset 0 0 0 2px var(--gold)}.stk-board.target.active .cell:not(:disabled):hover:after{content:"";position:absolute;inset:22%;border:2px solid var(--gold);border-radius:50%}.stk-board.target.active{box-shadow:0 0 0 3px #ffc21a8c,0 14px 34px #00000059}.cell.ship{background:linear-gradient(180deg,#C4D3E1,var(--ship) 55%,var(--ship-edge));box-shadow:inset 0 0 0 1px #00000026}.cell.ship.s-left{border-radius:40% 3px 3px 40%}.cell.ship.s-right{border-radius:3px 40% 40% 3px}.cell.ship.s-top{border-radius:40% 40% 3px 3px}.cell.ship.s-bottom{border-radius:3px 3px 40% 40%}.cell.ship.s-one{border-radius:40%}.cell.ship:before{content:"";position:absolute;inset:34%;border-radius:50%;background:#3c4e628c}.cell.miss{background:linear-gradient(160deg,#0f4670,#0c3b5e)}.cell.miss:after{content:"";position:absolute;inset:36%;border-radius:50%;background:#ddefff;box-shadow:0 0 6px #fff;animation:stk-splash .6s ease-out}@keyframes stk-splash{0%{transform:scale(0)}40%{transform:scale(2.4);opacity:.4;box-shadow:0 0 0 6px #ffffff80}to{transform:scale(1)}}.cell.near{background:linear-gradient(160deg,#0e405f,#0b3550)}.cell.near:after{content:"";position:absolute;inset:42%;border-radius:50%;background:#ddefff59}.cell.hit{background:radial-gradient(circle at 50% 55%,#FFE07A 0 18%,#FF8A3D 30%,var(--hit) 55%,#9B1830 100%);animation:stk-boom .5s ease-out}.cell.hit:after{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgb(255 230 120 / .9),transparent 70%);animation:stk-fire 1.1s ease-in-out infinite alternate}@keyframes stk-boom{0%{transform:scale(.4);filter:brightness(2.5)}60%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes stk-fire{0%{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1.1)}}.cell.sunk{background:linear-gradient(160deg,#4a2533,#2c1420)!important;box-shadow:inset 0 0 0 2px var(--hit);animation:none}.cell.sunk:after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:var(--hit);font-weight:900;font-size:1.4em;background:none;animation:none;opacity:1;transform:none}.cell.incoming{animation:stk-in-cell .35s ease-out;z-index:2}@keyframes stk-in-cell{0%{transform:scale(1.5);box-shadow:0 0 0 4px var(--gold)}to{transform:scale(1)}}.cell.pv-ok{background:linear-gradient(160deg,#6fe07a,#3db54a)!important}.cell.pv-bad{background:linear-gradient(160deg,#ff8a9b,#e23a5b)!important}.stk-board.shake{animation:stk-shake .35s}@keyframes stk-shake{20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.stk-place{display:grid;grid-template-columns:auto minmax(220px,300px);gap:clamp(12px,3cqw,28px);justify-content:center;align-items:center;height:100%}.stk-place .stk-board{--bs: min(100cqh - 36px, 62cqw, 560px)}.stk-side{display:grid;gap:10px;align-content:center}.stk-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.stk-side-head h3{font-size:18px;font-weight:800}.stk-hint{font-size:13px;color:#eaf4ffbf;min-height:2.6em}.stk-dock{display:flex;flex-wrap:wrap;gap:6px}.dock-ship{display:inline-flex;gap:2px;padding:6px;border-radius:10px;border:2px solid rgb(255 255 255 / .18);background:#00000040;transition:border-color .15s,opacity .15s,transform .15s}.dock-ship i{width:14px;height:14px;border-radius:3px;background:linear-gradient(180deg,#C4D3E1,var(--ship))}.dock-ship.sel{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 0 0 3px #ffc21a40}.dock-ship.placed{opacity:.35}.dock-ship.placed i{background:#6fe07a}.stk-actions{display:flex;flex-wrap:wrap;gap:6px}.stk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:12px;border:1px solid rgb(255 255 255 / .25);background:#ffffff14;color:#fff;font-weight:700;font-size:14px;white-space:nowrap}.stk-btn:hover:not(:disabled){background:#ffffff29}.stk-btn.primary{background:var(--gold);color:#171b58;border-color:transparent;box-shadow:0 4px #b88500}.stk-btn.primary:hover:not(:disabled){background:#ffcd3f}.stk-btn.big{padding:12px 18px;font-size:16px}.stk-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.stk-btn kbd{font:inherit;font-size:11px;opacity:.6;border:1px solid currentColor;border-radius:4px;padding:0 4px}.stk-tools{display:flex;gap:6px}.stk-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;border:1px solid rgb(255 255 255 / .2);background:#00000040;color:#fff;font-size:14px}.stk-timer-row{display:flex;align-items:center;gap:8px}.stk-timer{flex:1;height:6px;border-radius:3px;background:#ffffff24;overflow:hidden}.stk-timer i{display:block;height:100%;background:linear-gradient(90deg,var(--hit),var(--gold) 40%,#55D65A);transform-origin:left;transform:scaleX(0)}.stk-secs{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;min-width:2ch;text-align:right}.stk-status{font-size:13px;font-weight:700;min-height:1.4em;color:#eaf4ffd9}.stk-status.good{color:#7cf08a}.stk-status.bad{color:#ff8a9b}.stk-status.warn{color:var(--gold)}.stk-battle{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;height:100%}.stk-top{display:grid;grid-template-columns:1fr minmax(120px,30%) auto;align-items:center;gap:12px}.stk-turn{font-size:clamp(13px,2.6cqmin,16px);padding:6px 12px;border-radius:12px;background:#0000004d;border-left:4px solid transparent;transition:border-color .3s}.stk-turn.me{border-color:var(--gold)}.stk-turn.them{border-color:var(--hit)}.stk-boards{display:grid;grid-template-columns:auto auto;gap:clamp(12px,3cqw,32px);justify-content:center;align-items:center;min-height:0}.stk-boards section{display:grid;gap:6px;justify-items:start}.stk-boards header{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-size:14px}.stk-enemy .stk-board{--bs: min(100cqh - 110px, 52cqw, 560px)}.stk-own .stk-board{--bs: min(100cqh - 230px, 30cqw, 320px)}.stk-own{max-width:340px}.stk-end{display:flex;flex-wrap:wrap;gap:8px}.stk-fleet{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}.stk-fleet .fl{display:inline-flex;gap:1px}.stk-fleet .fl i{width:7px;height:7px;border-radius:2px;background:var(--ship)}.stk-fleet .fl.dead i{background:var(--hit);opacity:.45}.stk-banner{position:absolute;left:50%;top:45%;translate:-50% -50%;z-index:20;padding:12px 22px;border-radius:16px;font-weight:900;font-size:clamp(18px,4.6cqmin,30px);background:#fff;color:#08223f;box-shadow:0 16px 40px #00000080;opacity:0;pointer-events:none;white-space:nowrap;transform:scale(.8);transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}.stk-banner.show{opacity:1;transform:scale(1)}.stk-banner.good{border-bottom:5px solid #55D65A}.stk-banner.bad{border-bottom:5px solid var(--hit)}.stk-wait{margin:auto;display:grid;gap:14px;justify-items:center;text-align:center;max-width:420px}.stk-wait p{color:#eaf4ffbf;font-size:14px}.stk-code{font-size:clamp(34px,10cqmin,56px);font-weight:900;letter-spacing:.2em;padding:6px 18px;border-radius:14px;background:#00000059;border:2px dashed rgb(255 255 255 / .3)}.stk-radar{position:relative;width:110px;height:110px;border-radius:50%;border:2px solid rgb(85 214 90 / .6);background:radial-gradient(circle,rgb(85 214 90 / .15) 0 30%,transparent 31% 60%,rgb(85 214 90 / .1) 61%);overflow:hidden}.stk-radar i{position:absolute;inset:0;background:conic-gradient(from 0deg,rgb(85 214 90 / .55),transparent 25%);animation:stk-radar 2s linear infinite}@keyframes stk-radar{to{transform:rotate(360deg)}}.stk-confetti{position:absolute;inset:0;pointer-events:none;z-index:30}.stk-confetti i{position:absolute;top:40%;left:50%;width:9px;height:14px;border-radius:2px}@container (max-aspect-ratio: 1/1){.stk-place{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;justify-items:center}.stk-place{gap:8px}.stk-place .stk-board{--bs: min(100cqw - 12px, 100cqh - 260px);padding:4px}.stk-side{width:100%;max-width:520px;gap:6px}.stk-hint{font-size:12px;min-height:0}.stk-side-head h3{font-size:15px}.dock-ship{padding:4px}.dock-ship i{width:11px;height:11px}.stk-actions{flex-wrap:nowrap}.stk-actions .stk-btn{flex:1;padding:7px 6px;font-size:13px}.stk-btn kbd{display:none}.stk-btn.big{padding:10px;font-size:15px}.stk-top{grid-template-columns:1fr auto}.stk-top .stk-timer-row{grid-column:1 / -1;grid-row:2}.stk-boards{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;justify-items:center;align-content:start}.stk-battle{gap:6px}.stk-enemy .stk-board{--bs: min(100cqw - 12px, 100cqh - 250px);padding:4px}.stk-own{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head head" "board status" "board end";column-gap:12px;max-width:none;width:100%;align-items:start}.stk-own header{grid-area:head}.stk-own .stk-board{grid-area:board;--bs: min(38cqw, 124px);padding:3px;gap:1px}.stk-own .stk-board .lbl{display:none}.stk-own .stk-board{grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}.stk-own .stk-board .lbl.corner{display:none}.stk-own .stk-status{grid-area:status}.stk-own .stk-end{grid-area:end}}@container (max-height: 420px){.stk-top{gap:8px}.stk-turn{padding:3px 10px}.stk-enemy .stk-board{--bs: min(100cqh - 96px, 50cqw)}.stk-own .stk-board{--bs: min(100cqh - 150px, 26cqw)}.stk-place .stk-board{--bs: min(100cqh - 20px, 56cqw)}.stk-hint{display:none}.stk-side{gap:6px}.stk-side-head h3{font-size:15px}.dock-ship{padding:3px}.dock-ship i{width:10px;height:10px}.stk-actions{flex-wrap:nowrap}.stk-actions .stk-btn{flex:1;padding:6px 8px;font-size:13px}.stk-btn kbd{display:none}.stk-btn.big{padding:9px;font-size:15px}.stk-icon{width:28px;height:28px}}