:root{--bg:#eef3f8;--surface:#fff;--surface-2:#f5f8fc;--ink:#0f1b2d;--muted:#5b6b82;--line:#d5deea;--accent:#0b6bcb;--accent-ink:#fff;--accent-soft:#e3effb;--ok:#117a3d;--warn:#9a5b00;--warn-soft:#fff4e0;--danger:#c4262e;--danger-soft:#fdecec;--sea:#d7e7f6;--sea-line:#bcd3ea;--sea-hover:#c3daf1;--ship:#4b5d75;--ship-edge:#33435a;--hit:#e0353d;--miss:#6f8fb2;--sunk:#8f2a30;--radius:12px;--radius-sm:8px;--shadow:0 1px 2px #0f1b2d0f, 0 4px 16px #0f1b2d0f;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--bg:#08111f;--surface:#101b2d;--surface-2:#0c1626;--ink:#e6edf7;--muted:#93a3bb;--line:#22324b;--accent:#4da3ff;--accent-ink:#04121f;--accent-soft:#10294a;--ok:#4ade80;--warn:#fbbf4d;--warn-soft:#2b2111;--danger:#ff6b6b;--danger-soft:#3a1416;--sea:#0f2742;--sea-line:#1a3a5c;--sea-hover:#16365a;--ship:#9fb3cf;--ship-edge:#c8d6ea;--hit:#ff5a5f;--miss:#5f86b3;--sunk:#ff8a8f;--shadow:0 1px 2px #0000004d, 0 4px 16px #00000040}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}h1,h2,h3{margin:0 0 .5rem;line-height:1.2}h1{font-size:clamp(1.6rem,4vw,2.2rem)}h2{font-size:1.15rem}h3{font-size:.95rem}p{margin:0 0 .75rem}.muted{color:var(--muted)}.small{font-size:.875rem}.center{text-align:center;margin-top:3rem}.center-text{text-align:center}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}kbd{border:1px solid var(--line);font:inherit;border-bottom-width:2px;border-radius:4px;padding:0 .35em;font-size:.85em}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--surface);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.brand{color:var(--ink);align-items:center;gap:.5rem;font-size:1.05rem;font-weight:700;text-decoration:none;display:inline-flex}.logo{width:28px;height:28px}.topbar-user{background:var(--accent-soft);color:var(--accent);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:50vw;padding:.2rem .7rem;font-size:.9rem;font-weight:600;overflow:hidden}.main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:1.25rem 1rem 3rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.narrow{max-width:30rem;margin:3rem auto}.row{align-items:center;gap:.5rem;display:flex}.row.wrap{flex-wrap:wrap}.btn{min-height:2.6rem;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;gap:.4rem;padding:.5rem 1rem;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.btn.primary:hover:not(:disabled){filter:brightness(1.08)}.btn.ghost{background:0 0}.btn.danger{color:#fff;background:var(--danger);border-color:var(--danger)}.btn.block{width:100%}.input{width:100%;min-height:2.6rem;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem .75rem}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}label{margin-bottom:.35rem;font-weight:600;display:block}.hint{color:var(--muted);margin:.35rem 0 1rem;font-size:.8rem}.form-error{color:var(--danger);font-size:.9rem}.pill{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.1rem .55rem;font-size:.8rem;font-weight:600}.banner{border-radius:var(--radius-sm);margin:0 0 1rem;padding:.65rem .9rem;font-weight:500}.banner.warn{background:var(--warn-soft);color:var(--warn)}.banner.error{background:var(--danger-soft);color:var(--danger)}.toast{z-index:20;border-radius:var(--radius-sm);background:var(--ink);color:var(--bg);box-shadow:var(--shadow);max-width:calc(100vw - 2rem);margin:0;padding:.65rem 1rem;font-weight:600;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%)}.hero{align-items:center;gap:2rem;margin-top:2rem;display:grid}@media (width>=820px){.hero{grid-template-columns:1.2fr 1fr;margin-top:4rem}}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;font-size:.8rem;font-weight:700}.alias-form{justify-self:center;width:100%;max-width:26rem}.home-intro{margin-bottom:1.5rem}.segmented{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;gap:.25rem;padding:.25rem;display:inline-flex}.segment{font:inherit;color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;padding:.5rem 1rem;display:flex}.segment span{color:var(--muted);font-size:.8rem}.segment.active{background:var(--accent);color:var(--accent-ink)}.segment.active span{color:inherit;opacity:.85}.choices{gap:1rem;display:grid}@media (width>=820px){.choices{grid-template-columns:repeat(3,1fr)}}.choice{flex-direction:column;display:flex}.choice p{flex:1}.code-input{letter-spacing:.25em;text-transform:uppercase;font-family:ui-monospace,Cascadia Mono,Consolas,monospace}.room-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.room-code{align-items:baseline;gap:.5rem;display:flex}.room-code strong{letter-spacing:.15em;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:1.15rem}.players{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.player-chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:.45rem;padding:.3rem .75rem;font-size:.9rem;font-weight:600;display:inline-flex}.presence{background:var(--muted);border-radius:50%;width:.55rem;height:.55rem}.player-chip.online .presence{background:var(--ok)}.player-chip.offline{border-color:var(--warn)}.player-chip.offline .presence{background:var(--warn)}.away{color:var(--warn);font-variant-numeric:tabular-nums}.share{text-align:center;max-width:34rem;margin:2rem auto}.share-code{justify-content:center;gap:.4rem;margin:1.25rem 0;display:flex}.share-code span{border-radius:var(--radius-sm);background:var(--accent-soft);width:2.6rem;height:3.2rem;color:var(--accent);place-items:center;font:700 1.6rem ui-monospace,Cascadia Mono,Consolas,monospace;display:grid}.share-link{gap:.5rem;margin-bottom:1rem;display:flex}@media (width<=480px){.share-link{flex-wrap:wrap}.share-link .btn{flex:1}}.waiting-dots:after{content:"…";text-align:left;vertical-align:bottom;width:1.2em;animation:1.4s steps(4,end) infinite dots;display:inline-block;overflow:hidden}@keyframes dots{0%{width:0}to{width:1.2em}}.timer{margin:0 0 1rem}.timer-text{color:var(--muted);justify-content:space-between;margin-bottom:.3rem;font-size:.85rem;display:flex}.timer-seconds{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}.timer-track{background:var(--line);border-radius:999px;height:6px;overflow:hidden}.timer-fill{background:var(--accent);height:100%;transition:width .2s linear}.timer.urgent .timer-fill{background:var(--hit)}.timer.urgent .timer-seconds{color:var(--hit)}.emote-bar{gap:.35rem;display:flex}.emote{background:var(--surface);border:1px solid var(--line);cursor:pointer;border-radius:50%;width:2.6rem;height:2.6rem;font-size:1.25rem}.emote:hover:not(:disabled){border-color:var(--accent)}.emote-bubbles{z-index:15;pointer-events:none;justify-items:end;gap:.5rem;display:grid;position:fixed;bottom:4.5rem;right:1rem}.bubble{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:.5rem;padding:.5rem .85rem;animation:.25s ease-out pop;display:flex}.bubble-icon{font-size:1.3rem}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.topbar-actions{align-items:center;gap:.5rem;display:flex}.sound-controls{position:relative}.icon-btn{width:2.4rem;height:2.4rem;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;place-items:center;padding:0;display:grid}.icon-btn:hover,.icon-btn[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}.sound-panel{z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:15rem;box-shadow:var(--shadow);gap:.75rem;padding:1rem;display:grid;position:absolute;top:calc(100% + .5rem);right:0}.switch{cursor:pointer;align-items:center;gap:.6rem;margin:0;display:flex}.switch input{width:1.1rem;height:1.1rem;accent-color:var(--accent)}.slider{grid-template-columns:5rem 1fr 2rem;align-items:center;gap:.5rem;margin:0;font-size:.9rem;font-weight:500;display:grid}.slider input{width:100%;accent-color:var(--accent)}.slider-value{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.sound-lab{gap:1rem;display:grid}.lab-table{border-collapse:collapse;width:100%}.lab-table th,.lab-table td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:.5rem}.lab-table th{color:var(--muted);font-size:.8rem;font-weight:600}.stage{--glass:#06162894;--glass-line:#c8e1ff2e;--sea-ink:#e8f1fb;--sea-muted:#dcebfab3;--grid-line:#d7ebff21;isolation:isolate;color:var(--sea-ink);background:radial-gradient(at 30% 20%,#0f4561 0%,#072a42 55%,#04182a 100%);margin:0 -1rem;padding:1rem;position:relative;overflow:hidden}@media (width>=720px){.stage{border-radius:18px;margin:0;padding:1.1rem}}.stage.expanded{z-index:40;padding:max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));border-radius:0;margin:0;position:fixed;inset:0;overflow:auto}html.stage-open{overflow:hidden}.ocean-canvas,.fx-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.ocean-canvas{z-index:0}.fx-canvas{z-index:5;pointer-events:none}.stage-content{z-index:2;gap:.9rem;display:grid;position:relative}.stage .hud,.stage .side-card,.stage .log,.stage .placement-panel{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px)saturate(1.2);border-radius:14px;box-shadow:0 10px 30px #00000038}.stage .muted,.stage .small{color:var(--sea-muted)}.stage h2{color:var(--sea-ink)}.stage .btn{color:var(--sea-ink);background:#ffffff14;border-color:#ffffff38}.stage .btn.primary{color:#04121f;background:#6cc4ff;border-color:#6cc4ff}.stage .btn.danger{color:#fff;background:var(--hit);border-color:var(--hit)}.stage .timer-text{color:var(--sea-muted)}.stage .timer-seconds{color:var(--sea-ink)}.stage .timer-track{background:#ffffff29}.stage .timer-fill{background:#6cc4ff}.hud{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status btn""announce announce";align-items:center;gap:.5rem .9rem;padding:.7rem .9rem .25rem;display:grid}@media (width>=900px){.hud{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;grid-template-areas:"status announce btn"}}.hud.mine{border-color:#6cc4ffb3;box-shadow:0 0 0 1px #6cc4ff59,0 10px 30px #00000038}.hud-status{grid-area:status;min-width:0}.hud-status>strong{margin-bottom:.35rem;display:block}.hud-status .timer{margin-bottom:.4rem}.hud-announce{grid-area:announce;justify-content:center;display:flex}@media (width>=900px){.hud-announce{min-height:3.6rem}}.hud .stage-btn{grid-area:btn;align-self:start}.stage-btn{width:2.5rem;height:2.5rem;color:var(--sea-ink);cursor:pointer;background:#ffffff14;border:1px solid #ffffff38;border-radius:10px;place-items:center;display:grid}.stage-btn:hover{background:#ffffff29}.stage .result{text-align:left;margin:0;padding:.2rem 0 .4rem}.stage .result h1{margin:0;font-size:clamp(1.4rem,3vw,2rem)}.stage .result.win h1{color:#7ef0a6}.stage .result.loss h1{color:#ff8b8f}.stage .result p{color:var(--sea-muted);margin:0}.sunk-banner{pointer-events:none;border-radius:12px;align-items:center;gap:.6rem;padding:.45rem .9rem;animation:3.2s ease-out .5s both announce;display:inline-flex}.sunk-banner strong{font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.2}.sunk-banner>span:last-child{opacity:.9;font-size:.85rem}.sunk-banner.mine{color:#fff;background:linear-gradient(135deg,#e0353d,#b3161e);box-shadow:0 0 24px #e0353d8c}.sunk-banner.theirs{color:#fff;background:linear-gradient(135deg,#2b3a4f,#18222f);border:1px solid #fff3}.sunk-icon{font-size:1.6rem;line-height:1}@keyframes announce{0%{opacity:0;transform:scale(.85)}10%{opacity:1;transform:scale(1.05)}18%{transform:scale(1)}82%{opacity:1}to{opacity:0}}@media (width<=899px){.hud{padding:.55rem .7rem .15rem;position:relative}.hud-status>strong{font-size:.95rem}.hud-announce{z-index:1;pointer-events:none;grid-area:1/1/-1/-1;align-items:center;position:absolute;inset:0}.hud-announce .sunk-banner{justify-content:center;width:calc(100% - .6rem);padding:.35rem .7rem}.hud-announce .sunk-banner strong{font-size:1rem}.hud-announce .sunk-banner>span:last-child{font-size:.78rem}.stage{padding:.7rem}.stage-content,.battle,.battle-side{gap:.6rem}}.stage{--main-board:min(calc(100dvh - 21rem), 52vw)}.stage.expanded{--main-board:min(calc(100dvh - 11.5rem), 54vw)}.battle{align-items:start;gap:.9rem;display:grid}@media (width>=900px){.battle{grid-template:"log main fleet""log main actions"1fr/minmax(0,1fr) auto minmax(0,1fr)}.battle-main{grid-area:main}.battle .battle-side{display:contents}.battle .battle-side .own-fleet{grid-area:fleet}.battle .battle-side .log{height:0;min-height:calc(100% - var(--board-title-h) - .4rem);margin-top:calc(var(--board-title-h) + .4rem);grid-area:log;align-self:start;overflow:hidden}.battle .battle-side .game-actions{grid-area:actions;align-self:start}}.battle-main{justify-items:start;gap:.4rem;min-width:0;display:grid}.battle-main .board-title,.battle-main .board{width:100%}.battle{--board-title-h:1.75rem}.battle-main .board-title{height:var(--board-title-h);flex-wrap:nowrap;margin-bottom:0}@media (width>=900px){.battle-main .board-title,.battle-main .board{width:var(--main-board);min-width:300px}}.battle-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"fleet log""actions actions";align-content:start;gap:.9rem;min-width:0;display:grid}.battle-side .own-fleet{grid-area:fleet}.battle-side .log{grid-area:log;height:0;min-height:100%;overflow:hidden}.battle-side .game-actions{grid-area:actions}@media (width<=899px){.battle-side .log{font-size:.85em}}.side-card{padding:.7rem}.own-fleet .board{width:100%}.board-title{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.35rem;display:flex}.board-title h2{text-shadow:0 1px 3px #00000080;margin:0;font-size:1rem}.fleet-status{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.fleet-status li{gap:2px;display:inline-flex}.fleet-status i{background:#b9c6d4;border-radius:2px;width:.62rem;height:.62rem;display:block}.fleet-status li.sunk i{background:var(--hit);opacity:.85}.fleet-status li.just-sunk{animation:.6s ease-out .5s both chip-pop}@keyframes chip-pop{40%{transform:scale(1.6)}}.game-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;display:flex}.rematch{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;margin-left:auto;display:flex}.game-actions>.btn{margin-left:auto}.log{padding:.7rem .9rem}.log h3{color:var(--sea-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .4rem;font-size:.8rem}.log ol{gap:.15rem;margin:0;padding:0;font-size:.88rem;list-style:none;display:grid}.log-hit,.log-sunk{color:#ff9a9e;font-weight:600}.log-miss{color:var(--sea-muted)}.log-warn{color:#ffd27a}.board{grid-template-columns:1.3em repeat(var(--n), minmax(0, 1fr));grid-template-rows:1.3em repeat(var(--n), auto);-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(#04162838,#020e1c52);border:1px solid #d7ebff38;border-radius:12px;width:100%;padding:.35rem .5rem .5rem .25rem;display:grid;box-shadow:inset 0 0 50px #000a1959,0 12px 34px #00000047}.board.compact{padding:.2rem .3rem .3rem .15rem;font-size:.8em}.board-label{color:#e1f0ffb8;text-shadow:0 1px 2px #0009;font-variant-numeric:tabular-nums;place-items:center;font-size:.7rem;font-weight:600;display:grid}.cell{z-index:3;aspect-ratio:1;background:0 0;border:0;border-radius:0;padding:0;position:relative}.grid-lines{z-index:0;pointer-events:none;border-right:1px solid var(--grid-line,#d7ebff21);border-bottom:1px solid var(--grid-line,#d7ebff21);background-image:linear-gradient(to right, var(--grid-line,#d7ebff21) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line,#d7ebff21) 1px, transparent 1px);background-size:calc(100% / var(--n)) calc(100% / var(--n));position:relative}.board.interactive .cell:not([aria-disabled=true]){cursor:crosshair}.board.interactive .cell:not([aria-disabled=true]):hover,.board.interactive .cell:not([aria-disabled=true]):focus-visible{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ff5a5f' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='11'/%3E%3Cpath d='M20 3v9M20 28v9M3 20h9M28 20h9'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23ff5a5f'/%3E%3C/svg%3E") 50%/78% no-repeat,#ff5a5f1a}.board .cell:focus-visible{outline-offset:-2px;outline:2px solid #6cc4ff}.ship-slot{z-index:1;pointer-events:none;position:relative}.ship-sprite{width:92%;height:92%;transition:filter 1.2s,opacity 1.2s,transform 1.2s;position:absolute;inset:4%;overflow:visible}.ship-sunk{filter:grayscale(.7)brightness(.5)sepia(.35);opacity:.88;transform:scale(.95)rotate(-1.5deg)}.ship-ghost-valid{opacity:.8;filter:drop-shadow(0 0 5px #4ade80f2)}.ship-ghost-invalid{opacity:.7;filter:drop-shadow(0 0 5px #ff5a5ff2)saturate(.6)}.ship-foam{animation:2.4s ease-in-out infinite foam}@keyframes foam{50%{opacity:.45}}.radar-spin{transform-box:fill-box;transform-origin:50%;animation:3s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.ship-slot.just-sunk .ship-sprite{animation:1.6s ease-out .55s both sink}@keyframes sink{0%{filter:brightness(2.2)saturate(1.5)}30%{filter:brightness(1.2);transform:scale(1)}to{filter:grayscale(.7)brightness(.5)sepia(.35);transform:scale(.95)rotate(-1.5deg)}}.mark{z-index:2;pointer-events:none;place-items:center;display:grid;position:relative}.mark svg{width:80%;height:80%;overflow:visible}.foam-outer,.foam-inner{fill:none;stroke:#ebf6ffbf}.foam-outer{stroke-width:1.4px;transform-origin:20px 20px;animation:3.2s ease-in-out infinite ripple}.foam-inner{stroke-width:1.8px;stroke:#ebf6ff8c}.foam-dot{fill:#f0f8ffd9}@keyframes ripple{0%,to{opacity:.85;transform:scale(.92)}50%{opacity:.5;transform:scale(1.08)}}.mark.hit svg{width:105%;height:105%}.ember{transform-box:fill-box;transform-origin:50%;filter:blur(.4px);animation:.9s ease-in-out infinite alternate ember}.ember-b{animation-duration:1.3s;animation-delay:-.4s}.ember-c{animation-duration:.7s;animation-delay:-.2s}@keyframes ember{to{opacity:.35;transform:scale(.7)}}.mark.last:after{content:"";border:2px solid #6cc4ffd9;border-radius:4px;animation:1s ease-out 2 last-ping;position:absolute;inset:6%}@keyframes last-ping{0%{box-shadow:0 0 #6cc4ffb3}to{box-shadow:0 0 0 10px #0000}}.placement{align-items:start;gap:.9rem;display:grid}@media (width>=900px){.placement{grid-template-columns:minmax(0,1fr) 20rem}}.placement-board{justify-items:center;display:grid}.placement-board .board{width:min(100%,100dvh - 20rem);min-width:min(100%,300px)}.stage.expanded .placement-board .board{width:min(100%,100dvh - 9rem)}.placement-panel{padding:1rem}.ship-list{gap:.35rem;margin:.8rem 0;padding:0;list-style:none;display:grid}.ship-pick{width:100%;font:inherit;color:var(--sea-ink);cursor:pointer;text-align:left;background:#ffffff0f;border:1px solid #ffffff29;border-radius:10px;grid-template-columns:1fr auto 1.2rem;align-items:center;gap:.6rem;padding:.5rem .7rem;display:grid}.ship-pick.selected{background:#6cc4ff2e;border-color:#6cc4ff}.ship-pick.placed .ship-pick-name{color:var(--sea-muted)}.ship-pick-size{gap:3px;display:inline-flex}.ship-pick-size i{background:#b9c6d4;border-radius:2px;width:.65rem;height:.65rem;display:block}.ship-pick-state{color:#7ef0a6;font-weight:700}.placement-message{color:#ff9a9e;min-height:1.5em;margin:.6rem 0;font-size:.9rem}.stage kbd{border-color:#ffffff4d}.waiting-fleet{text-align:center;justify-items:center;gap:.6rem;display:grid}.waiting-fleet .board{width:min(100%,100dvh - 15rem,34rem)}.stage .emote{background:#ffffff1a;border-color:#ffffff38}.emote-bar{flex-wrap:wrap}@media (prefers-reduced-motion:reduce){.sunk-banner{animation:3.2s step-end .5s both announce-static!important}@keyframes announce-static{0%,99%{opacity:1}to{opacity:0}}}.stage.pq-stage{--glass:#2012089e;--glass-line:#ffd6a02e;--sea-ink:#fbf1e2;--sea-muted:#fae8cdb8;--pq-gold:#f2c75c;--pq-board:min(calc(100dvh - 19.5rem), calc(100vw - 42rem));background:radial-gradient(at 50% 40%,#ffc88c29 0%,#0000 60%),radial-gradient(at 50% 120%,#0000008c 0%,#0000 70%),repeating-linear-gradient(94deg,#fff0 0 22px,#ffe6c809 22px 23px,#0000000a 23px 41px,#fff0 41px 64px),linear-gradient(160deg,#5a3720 0%,#43281a 45%,#2e1b10 100%)}.stage.pq-stage.expanded{--pq-board:min(calc(100dvh - 9rem), 58vw)}.stage.pq-stage .btn.primary{color:#2a1606;background:var(--pq-gold);border-color:var(--pq-gold)}.stage.pq-stage .timer-fill{background:var(--pq-gold)}.stage.pq-stage .hud.mine{border-color:#f2c75cbf;box-shadow:0 0 0 1px #f2c75c59,0 10px 30px #0000004d}.pq-chip{vertical-align:-.05em;border-radius:50%;width:.8em;height:.8em;margin-right:.45em;display:inline-block;box-shadow:0 0 0 2px #ffffffb3}.pq-layout{grid-template-areas:"board""side""players";gap:.9rem;display:grid}.pq-board-wrap{grid-area:board;justify-content:center;display:flex}.pq-players{grid-area:players}.pq-side{grid-area:side;align-content:start;gap:.9rem;min-width:0;display:grid}@media (width>=1000px){.pq-layout{grid-template-columns:minmax(13rem,1fr) auto minmax(15rem,1fr);grid-template-areas:"players board side";align-items:start}}@media (width<=999px){.pq-layout{flex-direction:column;display:flex}.pq-side{display:contents}.pq-board-wrap{order:1}.pq-tray{order:2}.pq-players{order:3}.pq-side .log{order:4}.pq-side .game-actions{order:5}.stage.pq-stage,.stage.pq-stage.expanded{--pq-board:min(100%, calc(100dvh - 12rem), 640px)}.pq-board-wrap .pq-board{width:var(--pq-board)}}.pq-board{width:var(--pq-board);aspect-ratio:1;filter:drop-shadow(0 14px 26px #00000073);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;min-width:280px;height:auto;display:block}.pq-jail-label{letter-spacing:.7px;text-anchor:middle;fill:#ffffffb8;font:700 4.4px system-ui,sans-serif}.pq-unused{opacity:.4;filter:saturate(.35)}.pq-piece{transition:transform .11s linear}.pq-piece.clickable{cursor:pointer;outline:none}.pq-halo{fill:#fff0be2e;stroke:var(--pq-gold,#f2c75c);stroke-width:.9px;transform-origin:50%;transform-box:fill-box;animation:1.2s ease-in-out infinite pq-halo}.pq-piece.selected .pq-halo{fill:#fff0be59;stroke-width:1.3px;animation:none}.pq-piece.clickable:focus-visible .pq-halo{stroke:#fff;stroke-width:1.4px}.pq-piece.flash>g{transform-origin:50%;transform-box:fill-box;animation:.9s ease-out .25s 2 pq-flash}@keyframes pq-halo{50%{opacity:.55;transform:scale(1.14)}}@keyframes pq-flash{30%{filter:drop-shadow(0 0 2px #ff5a3c);transform:scale(1.35)}}.pq-dest{cursor:pointer;outline:none}.pq-dest circle{fill:#fff8e1e0;stroke:#7a4b12;stroke-width:.7px;stroke-dasharray:1.6 1;animation:1s linear infinite pq-dest}.pq-dest:hover circle,.pq-dest:focus-visible circle{fill:var(--pq-gold,#f2c75c);stroke-dasharray:none}.pq-dest text{text-anchor:middle;fill:#4a2a08;pointer-events:none;font:800 5px system-ui,sans-serif}@keyframes pq-dest{to{stroke-dashoffset:-2.6px}}.pq-tray{gap:.75rem;padding:.9rem;display:grid}.pq-tray.mine{border-color:#f2c75c8c}.dice{perspective:700px;justify-content:center;gap:1.1rem;padding:.5rem 0 .2rem;display:flex}.die-slot{--die:54px;width:var(--die);height:var(--die);transition:opacity .25s,filter .25s}.die-slot.used{opacity:.38;filter:grayscale(.8)}.die{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));position:relative}.die.rolling{animation:.68s cubic-bezier(.18,.7,.3,1) both pq-roll}.die.idle{opacity:.9}@keyframes pq-roll{0%{transform:translateY(-34px) rotateX(var(--spin-x)) rotateY(var(--spin-y))}55%{transform:translateY(5px) rotateX(calc(var(--rx) + 40deg)) rotateY(calc(var(--ry) - 30deg))}78%{transform:translateY(-4px) rotateX(calc(var(--rx) - 8deg)) rotateY(calc(var(--ry) + 6deg))}to{transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry))}}.face{backface-visibility:hidden;background:radial-gradient(circle at 30% 25%,#fffdf7 0%,#f3ecdc 60%,#e2d6bd 100%);border-radius:11px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);padding:15%;display:grid;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #785a3240,inset 0 -4px 8px #785a322e}.face.front{transform:translateZ(calc(var(--die) / 2))}.face.back{transform:rotateY(180deg) translateZ(calc(var(--die) / 2))}.face.right{transform:rotateY(90deg) translateZ(calc(var(--die) / 2))}.face.left{transform:rotateY(-90deg) translateZ(calc(var(--die) / 2))}.face.top{transform:rotateX(90deg) translateZ(calc(var(--die) / 2))}.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--die) / 2))}.face i.pip{background:radial-gradient(circle at 40% 35%,#4a2f2f 0 30%,#1d1212 52%,#0000 56%)}.pq-actions{gap:.5rem;display:grid}.pq-roll{padding-block:.7rem;font-size:1.05rem;animation:1.6s ease-in-out infinite pq-pulse}@keyframes pq-pulse{50%{box-shadow:0 0 0 6px #f2c75c38}}.pq-hint{text-align:center;min-height:1.5em;margin:0}.pq-players{align-content:start;gap:.35rem;padding:.6rem;display:grid}.pq-player{border:1px solid #0000;border-radius:10px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem;padding:.55rem .6rem;transition:background .2s,border-color .2s;display:grid}.pq-player.turn{border-color:color-mix(in srgb, var(--pq-color) 70%, transparent);box-shadow:inset 3px 0 0 var(--pq-color);background:#ffffff14}.pq-player.out{opacity:.45}.pq-token{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pq-color) 35%, #fff) 0%, var(--pq-color) 50%, color-mix(in srgb, var(--pq-color) 60%, #000) 100%);border-radius:50%;width:30px;height:30px;box-shadow:0 0 0 2px #fffc,0 3px 6px #00000059}.pq-player-text{min-width:0;line-height:1.25;display:grid}.pq-player-text strong,.pq-player-text span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pq-player-meta{align-items:center;gap:.45rem;min-width:0;display:flex}.pq-player-meta .small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pq-progress{flex:none;gap:3px;display:flex}.pq-progress i{border:1.5px solid color-mix(in srgb, var(--pq-color) 80%, #fff);border-radius:50%;width:9px;height:9px}.pq-progress i.home{background:var(--pq-color)}@media (width<=999px){.pq-players{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}.lobby{gap:1rem;max-width:720px;margin:0 auto;display:grid}.lobby-seats h2{margin-top:0}.lobby-seats ol{gap:.5rem;margin:0 0 .75rem;padding:0;list-style:none;display:grid}.lobby-seat{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.6rem .75rem;display:grid}.lobby-seat.empty{background:0 0;border-style:dashed}.lobby-token{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pq-color) 35%, #fff) 0%, var(--pq-color) 50%, color-mix(in srgb, var(--pq-color) 60%, #000) 100%);border-radius:50%;width:32px;height:32px;box-shadow:0 2px 5px #00000040}.lobby-seat.empty .lobby-token{border:2px dashed var(--line);box-shadow:none;background:0 0}.lobby-name{min-width:0;line-height:1.3;display:grid}.lobby-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.small-btn{padding:.35rem .75rem;font-size:.9rem}.game-picker{margin-bottom:1rem}@media (prefers-reduced-motion:reduce){.pq-piece,.die-slot{transition:none}.die.rolling,.pq-halo,.pq-roll,.pq-dest circle,.pq-piece.flash>g{animation:none}}