:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#080b0f;color:#f7fafc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #080b0f;--surface: #10161d;--surface-strong: #151c25;--border: rgba(178, 197, 218, .17);--border-strong: rgba(52, 219, 221, .72);--text: #f7fafc;--muted: #8d9aa8;--cyan: #36dbdd;--amber: #ffb238;--green: #35c687;--shadow: 0 28px 80px rgba(0, 0, 0, .38)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at top left,rgba(54,219,221,.1),transparent 34rem),linear-gradient(145deg,#080b0f,#0b1016 52%,#080b0f)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.56}.shell{width:min(1496px,calc(100vw - 24px));min-height:calc(100vh - 24px);margin:12px auto;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#080c11e8;box-shadow:var(--shadow)}.shell-menu{min-height:calc(100vh - 24px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:98px;padding:24px 28px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:baseline;gap:18px;min-width:210px}.brand-mark{position:relative;font-size:clamp(2.4rem,5vw,3.9rem);font-weight:760;line-height:.9;letter-spacing:0}.brand-mark:after{position:absolute;top:.23em;right:-.18em;width:.14em;height:.14em;content:"";border-radius:50%;background:var(--cyan)}.brand-subtitle,.room-code span,.connection-row,.player-card p,.log-row{color:var(--muted)}.top-connection{min-height:52px}.play-controls{display:flex;flex:1;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}.room-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}.control-button,.room-code,.new-round{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,#18202af5,#0d131af5);color:var(--text);font-size:.98rem;font-weight:720;line-height:1;transition:border-color .16s ease,color .16s ease,transform .16s ease}.control-button{padding:0 26px}.back-button{padding:0 18px}.control-button svg,.room-code svg,.new-round svg,.option-item svg{color:var(--cyan)}.control-button:hover,.room-code:hover,.new-round:hover{border-color:#36dbdda6;color:#fff;transform:translateY(-1px)}.options-menu{position:relative}.options-trigger{list-style:none;-webkit-user-select:none;user-select:none}.options-trigger::-webkit-details-marker,.options-trigger::marker{display:none;content:""}.options-menu[open] .options-trigger{border-color:#36dbdda6}.options-menu[open] .options-trigger svg:last-child{transform:rotate(180deg)}.options-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:20;display:grid;min-width:230px;padding:8px;border:1px solid var(--border);border-radius:12px;background:#0c1117fa;box-shadow:0 22px 54px #00000061}.option-group-label{padding:8px 12px 6px;color:var(--muted);font-size:.74rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase}.option-group-label:not(:first-child){margin-top:6px;border-top:1px solid rgba(178,197,218,.12)}.option-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;border:0;border-radius:8px;background:transparent;color:var(--text);padding:0 12px;font-size:.96rem;font-weight:720}.option-item:hover,.option-item.selected{background:#36dbdd1a;color:#fff}.join-control{display:grid;grid-template-columns:minmax(128px,154px) auto;gap:8px}.join-control input{width:100%;min-height:52px;border:1px solid var(--border);border-radius:10px;outline:none;background:#10161dcc;color:var(--cyan);padding:0 14px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}.join-control input:focus{border-color:var(--cyan)}.room-code{padding:0 18px}.room-code strong{color:var(--cyan);font-size:1.2rem;letter-spacing:.12em}.difficulty-control{display:grid;grid-template-columns:repeat(4,minmax(92px,1fr));gap:6px;min-height:52px;padding:5px;border:1px solid var(--border);border-radius:10px;background:#10161dd1}.difficulty-control button{min-width:0;border:0;border-radius:7px;background:transparent;color:var(--muted);padding:0 12px;font-size:.92rem;font-weight:760}.difficulty-control button:hover,.difficulty-control button.selected{background:#36dbdd21;color:var(--text)}.games-screen{position:relative;display:grid;gap:clamp(28px,5vw,54px);padding:clamp(38px,7vw,92px) clamp(22px,7vw,168px) 58px}.games-heading{display:grid;gap:10px;max-width:760px}.games-heading h1{margin:0;color:var(--text);font-size:clamp(2.6rem,7vw,5.4rem);font-weight:780;line-height:.95;letter-spacing:0}.games-heading p{margin:0;color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);line-height:1.45}.game-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.game-tile{display:grid;gap:18px;min-height:320px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#151e28f0,#0b1118f2),var(--surface);color:var(--text);padding:18px;text-align:left;transition:border-color .16s ease,transform .16s ease,background .16s ease}.game-tile:hover,.game-tile.selected{border-color:#36dbdd9e;background:linear-gradient(180deg,#1a2733f5,#0c151cf5),var(--surface-strong);transform:translateY(-2px)}.game-tile span{align-self:end;color:var(--text);font-size:clamp(1.45rem,3vw,2rem);font-weight:780;line-height:1.05}.game-tile small{color:var(--muted);font-size:.96rem;font-weight:650;line-height:1.35}.game-preview{display:grid;align-self:start;width:min(100%,230px);aspect-ratio:1;gap:5px}.classic-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.classic-preview>span,.preview-mini,.preview-mini>span{border:1px solid rgba(190,211,232,.2);border-radius:8px;background:#0d151de0}.classic-preview>span{position:relative}.classic-preview .preview-x:before,.classic-preview .preview-x:after{position:absolute;top:50%;left:50%;width:58%;height:5px;content:"";border-radius:999px;background:var(--cyan);transform-origin:center}.classic-preview .preview-x:before{transform:translate(-50%,-50%) rotate(45deg)}.classic-preview .preview-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.classic-preview .preview-o:before{position:absolute;top:50%;left:50%;width:46%;aspect-ratio:1;content:"";border:5px solid var(--amber);border-radius:50%;transform:translate(-50%,-50%)}.super-preview{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.battleship-preview{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.battleship-preview>span{border:1px solid rgba(190,211,232,.18);border-radius:4px;background:#0d1922eb}.battleship-preview>span.ship{background:#8d9aa875}.battleship-preview>span.hit{border-color:#ffb238c2;background:#ffb238d1}.battleship-preview>span.miss{background:#36dbdd94}.preview-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:4px}.preview-mini>span{min-width:0;min-height:0;border-radius:3px}.preview-mini>span.filled{background:#36dbddc7}.opponent-scrim{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#05080cb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.opponent-menu{display:grid;gap:22px;width:min(100%,440px);border:1px solid rgba(54,219,221,.4);border-radius:14px;background:#0c1117fa;padding:22px;box-shadow:0 28px 80px #00000075}.opponent-menu h2{margin:0;color:var(--text);font-size:2rem;line-height:1}.opponent-menu p{margin:8px 0 0;color:var(--muted);font-weight:700}.opponent-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.opponent-actions button{display:grid;place-items:center;gap:12px;min-height:132px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#18202af5,#0d131af5);color:var(--text);font-size:1.08rem;font-weight:780}.opponent-actions button:hover{border-color:#36dbdda6}.opponent-actions svg{color:var(--cyan)}.mode-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:min(100%,764px)}.mode-heading span{color:var(--text);font-size:clamp(1.4rem,3vw,2rem);font-weight:780}.mode-heading strong{color:var(--muted);font-size:.92rem;font-weight:760;text-transform:uppercase}.game-layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(320px,396px);gap:clamp(28px,4vw,52px);align-items:center;padding:clamp(34px,6vw,76px) clamp(22px,7vw,168px) 44px}.board-wrap{display:grid;justify-items:center;gap:28px}.board{display:grid;width:min(100%,764px);aspect-ratio:1;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}.super-board{display:grid;width:min(100%,764px);aspect-ratio:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}.mini-board{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;padding:5px;overflow:hidden;border:1px solid rgba(190,211,232,.26);border-radius:12px;background:#161f29d6}.mini-board.active-mini{border-color:#36dbdd9e;box-shadow:inset 0 0 0 1px #36dbdd21}.mini-board.winning-mini{border-color:var(--border-strong);box-shadow:0 0 28px #36dbdd21}.mini-board.claimed .cell{opacity:.24}.mini-claim{position:absolute;inset:9%;z-index:3;display:grid;place-items:center;pointer-events:none}.mini-claim-x:before,.mini-claim-x:after{position:absolute;top:50%;left:50%;width:min(88%,9.8rem);height:clamp(.7rem,1.5vw,1.08rem);content:"";border-radius:999px;background:linear-gradient(90deg,#7effff,var(--cyan));box-shadow:0 0 32px #36dbdd7a,0 0 8px #7effff5c}.mini-claim-x:before{transform:translate(-50%,-50%) rotate(45deg)}.mini-claim-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.mini-claim-o:before{width:min(76%,8.8rem);aspect-ratio:1;content:"";border:clamp(.7rem,1.5vw,1.08rem) solid #ffc85f;border-radius:50%;box-shadow:0 0 32px #ffb23875,0 0 8px #ffd8824d,inset 0 0 18px #ffb2382b}.cell{display:grid;place-items:center;position:relative;width:100%;height:100%;min-width:0;min-height:0;padding:0;overflow:hidden;border:1px solid rgba(190,211,232,.29);border-radius:12px;background:linear-gradient(180deg,#202b37eb,#121b24f0),#17212b;transition:border-color .16s ease,background .16s ease,transform .16s ease}.super-board .cell{border-radius:6px}.super-board .cell-x:before,.super-board .cell-x:after{width:clamp(1.25rem,3.7vw,3rem);height:clamp(.14rem,.44vw,.28rem)}.super-board .cell-o:before{width:clamp(1.15rem,3.35vw,2.75rem);border-width:clamp(.14rem,.44vw,.28rem)}.cell:not(:disabled):hover{border-color:#36dbdd8c;background:linear-gradient(180deg,#283745fa,#141e28fa),#1b2a36;transform:translateY(-2px)}.cell-x:before,.cell-x:after{position:absolute;width:clamp(5.2rem,12vw,9rem);height:clamp(.44rem,.9vw,.66rem);content:"";border-radius:999px;background:linear-gradient(90deg,#7effff,var(--cyan));box-shadow:0 0 26px #36dbdd61,0 0 8px #7effff57}.cell-x:before{transform:rotate(45deg)}.cell-x:after{transform:rotate(-45deg)}.cell-o:before{position:absolute;width:clamp(4.8rem,11vw,8.3rem);aspect-ratio:1;content:"";border:clamp(.46rem,.92vw,.68rem) solid #ffc85f;border-radius:50%;box-shadow:0 0 28px #ffb23861,0 0 8px #ffd88247,inset 0 0 18px #ffb23829}.cell.winning{border-color:var(--border-strong);box-shadow:inset 0 0 0 1px #36dbdd47,0 0 30px #36dbdd1f}.battleship-wrap{display:grid;width:min(100%,900px);grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.battle-panel{display:grid;gap:12px;min-width:0}.placement-panel{align-content:start}.fleet-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.fleet-choice{display:grid;justify-items:center;gap:6px;min-width:0;min-height:68px;padding:7px 4px;border:1px solid rgba(190,211,232,.2);border-radius:7px;color:var(--muted);background:#0e1b26b8;font-size:.67rem;font-weight:760;line-height:1}.fleet-choice.selected{border-color:#36dbddad;color:var(--text);box-shadow:inset 0 0 0 1px #36dbdd29}.fleet-choice.placed{border-color:#cfe3ef6b}.fleet-silhouette{display:flex;width:100%;max-width:43px;height:12px}.fleet-silhouette i{flex:1;min-width:0;border-block:1px solid currentColor;background:currentColor;opacity:.78}.fleet-silhouette i:first-child{border-radius:6px 1px 1px 6px}.fleet-silhouette i:last-child{border-radius:1px 6px 6px 1px}.fleet-size-4{color:var(--cyan)}.fleet-size-3{color:var(--amber)}.fleet-size-2{color:#d990ff}.placement-controls{display:flex;align-items:center;gap:8px}.icon-button{display:grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;border:1px solid var(--border);border-radius:7px;color:var(--text);background:#12212dd9}.icon-button:disabled{cursor:default;opacity:.36}.deploy-fleet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;margin-left:auto;padding:0 14px;border-color:#36dbdd9e;color:var(--cyan);font-weight:780}.deploy-fleet:disabled{cursor:default;opacity:.38}.battle-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.battle-heading h2{margin:0;color:var(--text);font-size:1rem;font-weight:780}.battle-heading span{color:var(--muted);font-size:.82rem;font-weight:760;text-transform:uppercase}.battle-grid{display:grid;aspect-ratio:1;grid-template-columns:repeat(var(--battle-size),minmax(0,1fr));gap:4px;min-width:0}.battle-cell{position:relative;min-width:0;min-height:0;padding:0;border:1px solid rgba(190,211,232,.22);border-radius:7px;background:linear-gradient(180deg,#142531f0,#0c1822f2),#101d27;transition:border-color .16s ease,background .16s ease,transform .16s ease}.battle-cell:not(:disabled):hover{border-color:#36dbdd9e;transform:translateY(-1px)}.battle-cell.ship{overflow:hidden;border-color:#bed3e875;background:linear-gradient(180deg,#506071f5,#202e3cfa)}.battle-cell.ship-variant-0{border-color:#36dbddc7;background:linear-gradient(180deg,#47b1b8fa,#1c5969fa)}.battle-cell.ship-variant-1{border-color:#ffc85fc2;background:linear-gradient(180deg,#b0853dfa,#5b4119fa)}.battle-cell.ship-variant-2{border-color:#c391ffc7;background:linear-gradient(180deg,#7857acfa,#3e2b61fa)}.battle-cell.ship-variant-3{border-color:#7ee69eb8;background:linear-gradient(180deg,#40895bfa,#1e4832fa)}.battle-cell.ship-variant-4{border-color:#ff8fabbd;background:linear-gradient(180deg,#994965fa,#512234fa)}.battle-cell.ship-bow-east:before,.battle-cell.ship-bow-south:before{position:absolute;z-index:1;content:""}.battle-cell.ship-bow-east:before{top:50%;right:1px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid rgba(241,249,255,.62);transform:translateY(-50%)}.battle-cell.ship-bow-south:before{bottom:1px;left:50%;width:0;height:0;border-right:7px solid transparent;border-left:7px solid transparent;border-top:7px solid rgba(241,249,255,.62);transform:translate(-50%)}.battle-cell.ship-preview{border-color:#36dbddb3;background:linear-gradient(180deg,#36dbdd6b,#19586185);box-shadow:inset 0 0 0 1px #36dbdd33}.battle-cell.shot:after{position:absolute;inset:35%;content:"";border-radius:50%;background:#8d9aa8d1}.battle-cell.hit{border-color:#ffb238b8;background:linear-gradient(180deg,#5b3d17f0,#2c1e12f2),#2f2118}.battle-cell.hit:after{z-index:2;inset:26%;background:#ffc85f;box-shadow:0 0 18px #ffb23870}.battle-cell.miss:after{background:#36dbddb8}.connection-row{display:flex;align-items:center;gap:10px;font-size:1rem}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}.status-dot.connected{background:var(--green)}.status-dot.connecting{background:var(--amber)}.status-dot.offline{background:#ff6b6b}.side-panel{display:grid;gap:12px}.players-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.player-card,.match-log{border:1px solid var(--border);border-radius:12px;background:#10161db8}.player-card{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;min-height:76px;padding:12px}.player-card.active{border-color:var(--border-strong);box-shadow:inset 0 0 0 1px #36dbdd33}.player-card h2,.match-log h2{margin:0;color:var(--text);font-size:1.42rem;font-weight:760;line-height:1.15}.player-card h2{overflow:hidden;font-size:.98rem;text-overflow:ellipsis;white-space:nowrap}.player-card p{overflow:hidden;margin:4px 0 0;font-size:.82rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.player-card.active p{color:var(--cyan)}.avatar{display:grid;place-items:center;position:relative;width:44px;height:44px;border-radius:50%}.avatar-x{border:1px solid var(--cyan);color:var(--cyan)}.avatar-o{border:1px solid var(--amber);color:var(--amber)}.avatar-x:before,.avatar-x:after{position:absolute;width:23px;height:3px;content:"";border-radius:999px;background:#7effff;box-shadow:0 0 12px #36dbdd5c}.avatar-x:before{transform:rotate(45deg)}.avatar-x:after{transform:rotate(-45deg)}.avatar-o:before{width:22px;aspect-ratio:1;content:"";border:3px solid #ffc85f;border-radius:50%;box-shadow:0 0 12px #ffb23857,inset 0 0 8px #ffb23824}.new-round{width:100%;min-height:74px;border-color:var(--border-strong);color:var(--cyan);font-size:1.08rem}.match-log{padding:24px 18px 10px}.log-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 0 18px}.log-heading div{display:grid;grid-template-columns:repeat(4,auto);align-items:baseline;gap:8px}.score-x{color:var(--cyan)}.score-o{color:var(--amber)}.log-list{display:grid}.log-row{display:grid;grid-template-columns:1fr auto;gap:12px;min-height:58px;align-items:center;border-top:1px solid rgba(178,197,218,.12);font-size:.98rem}@media(max-width:1040px){.topbar{align-items:flex-start;flex-direction:column}.room-controls,.play-controls{justify-content:flex-start;width:100%}.game-tiles{grid-template-columns:1fr}.game-tile{min-height:0;grid-template-columns:minmax(110px,180px) minmax(0,1fr);align-items:end}.game-tile small{grid-column:2}.game-layout{grid-template-columns:1fr;padding-inline:clamp(18px,6vw,54px)}.side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.battleship-wrap{grid-template-columns:1fr;width:min(100%,620px)}.players-strip,.match-log,.new-round{grid-column:1 / -1}}@media(max-width:680px){.shell{width:100%;min-height:100vh;margin:0;border-width:0;border-radius:0}.topbar{min-height:0;padding:24px 18px}.brand{align-items:flex-start;flex-direction:column;gap:6px}.play-controls,.room-controls,.join-control{display:grid;grid-template-columns:1fr}.control-button,.room-code,.difficulty-control{width:100%}.difficulty-control{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulty-control button{min-height:42px}.games-screen{padding:30px 18px 36px}.game-tiles{gap:10px}.game-tile{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px}.game-preview{width:92px}.game-tile span{font-size:1.26rem}.game-tile small{font-size:.84rem}.opponent-actions{grid-template-columns:1fr}.opponent-actions button{min-height:86px}.mode-heading{display:grid;gap:6px}.game-layout{gap:26px;padding:26px 14px 34px}.board{gap:4px}.super-board{gap:5px}.mini-board{gap:2px;padding:3px;border-radius:8px}.mini-claim{inset:8%}.mini-claim-x:before,.mini-claim-x:after{width:86%;height:clamp(.34rem,1.8vw,.46rem)}.mini-claim-o:before{width:74%;border-width:clamp(.34rem,1.8vw,.46rem)}.cell{border-radius:9px}.super-board .cell{border-radius:4px}.cell-x:before,.cell-x:after{width:clamp(3.8rem,21vw,5.4rem);height:clamp(.34rem,1.8vw,.46rem)}.cell-o:before{width:clamp(3.4rem,19vw,5rem);border-width:clamp(.34rem,1.8vw,.46rem)}.super-board .cell-x:before,.super-board .cell-x:after{width:clamp(1rem,7vw,1.75rem);height:clamp(.12rem,1vw,.2rem)}.super-board .cell-o:before{width:clamp(.9rem,6vw,1.65rem);border-width:clamp(.12rem,1vw,.2rem)}.side-panel{grid-template-columns:1fr}.players-strip{gap:8px}.player-card{min-height:66px;grid-template-columns:38px minmax(0,1fr);padding:10px}.player-card h2{font-size:.94rem}.player-card p{font-size:.78rem}.avatar{width:38px;height:38px}.avatar-x:before,.avatar-x:after{width:20px;height:3px}.avatar-o:before{width:19px;border-width:3px}}