.page-play{--arena-bg: #071210;--arena-panel: rgba(12, 32, 28, .72);--arena-ink: #e8f5f0;--arena-soft: #9bb5ab;--arena-muted: #5e7a70;--arena-line: rgba(232, 245, 240, .1);--arena-teal: #1de4c2;--arena-teal-dim: rgba(29, 228, 194, .15);--arena-signal: #ffc53d;--arena-coral: #ff5a36;--font-hud: "Share Tech Mono", ui-monospace, monospace;min-height:100vh;display:flex;flex-direction:column;color:var(--arena-ink);background:radial-gradient(ellipse 80% 50% at 70% 10%,rgba(29,228,194,.1),transparent 55%),radial-gradient(ellipse 50% 40% at 10% 80%,rgba(255,90,54,.06),transparent 50%),linear-gradient(180deg,#050d0b 0%,var(--arena-bg) 45%,#0a1613 100%)}.page-play .noise{opacity:.06;mix-blend-mode:overlay;z-index:50}.page-play .scanlines{pointer-events:none;position:fixed;inset:0;z-index:49;opacity:.035;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 3px)}.play-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--arena-line);background:#071210bf;backdrop-filter:blur(16px);flex-shrink:0}.page-play .logo-mark{background:var(--arena-signal);color:#1a1200;box-shadow:0 0 24px #ffc53d59}.play-header-actions{display:flex;align-items:center;gap:.65rem;margin-left:auto}.play-title{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.35rem);letter-spacing:-.02em;flex:1;min-width:0;color:var(--arena-ink)}.page-play .btn-ghost{color:var(--arena-ink);border-color:#e8f5f040;background:#ffffff08}.page-play .btn-ghost:hover{border-color:var(--arena-signal);background:#ffc53d14;color:var(--arena-signal)}.page-play .btn-primary{background:var(--arena-teal);color:#04110e;box-shadow:0 0 24px #1de4c24d}.page-play .btn-primary:hover{background:#4ff0d4}.btn-how-to{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:12px;background:var(--arena-teal);color:#04110e;font-weight:800;font-size:.95rem;text-decoration:none;border:none;box-shadow:0 0 24px #1de4c24d;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.btn-how-to:hover{transform:translateY(-2px);background:#4ff0d4;box-shadow:0 0 32px #1de4c273}.btn-how-svg{flex-shrink:0}@media(max-width:600px){.btn-how-to span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.btn-how-to{padding:.65rem .75rem}}.play-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:0;flex:1;min-height:0}.play-shell.is-playing{grid-template-columns:1fr}.play-shell.is-playing .lobby-panel{display:none!important}.lobby-panel{padding:1.75rem 1.5rem;border-right:1px solid var(--arena-line);background:#0712108c;overflow:auto}.lobby-preview{margin:0 0 1.25rem;border-radius:14px;overflow:hidden;border:1px solid var(--arena-line);background:#0a1613;aspect-ratio:400 / 240}.lobby-preview img{display:block;width:100%;height:100%;object-fit:cover}.lobby-panel h1{font-family:var(--font-display);font-size:1.8rem;letter-spacing:-.03em;margin:0 0 .4rem;color:var(--arena-ink)}.lobby-blurb{color:var(--arena-soft);margin:0 0 1.5rem}.field{display:grid;gap:.35rem;margin-bottom:1.25rem;font-weight:600;font-size:.9rem;color:var(--arena-soft)}.field-tight{margin-bottom:.85rem}.field input,#join-code{font:inherit;padding:.75rem .9rem;border-radius:12px;border:1.5px solid var(--arena-line);background:#00000059;color:var(--arena-ink);width:100%}#join-code{text-transform:uppercase;letter-spacing:.12em;font-weight:700;text-align:center;font-size:1.15rem;font-family:var(--font-hud)}.field input:focus,#join-code:focus{outline:2px solid var(--arena-teal);outline-offset:1px}.lobby-setup{display:grid;gap:0}.lobby-setup[hidden],.lobby-intro[hidden],.lobby-status[hidden]{display:none!important}.btn-back{justify-self:start;margin-bottom:.85rem;padding:.45rem .85rem;font-size:.85rem}.lobby-status{display:grid}.lobby-entry{display:grid;gap:1rem}.lobby-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.3rem;border-radius:14px;background:#00000059;border:1px solid var(--arena-line)}.lobby-mode-tab{appearance:none;border:none;background:transparent;color:var(--arena-soft);font:inherit;font-weight:700;font-size:.92rem;padding:.7rem .75rem;border-radius:10px;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.lobby-mode-tab:hover{color:var(--arena-ink)}.lobby-mode-tab.is-active{background:var(--arena-teal-dim);color:var(--arena-teal);box-shadow:inset 0 0 0 1px #1de4c259}.lobby-mode-panel{display:grid;gap:.85rem;padding:1.15rem 1.1rem 1.2rem;border-radius:16px;border:1px solid var(--arena-line);background:var(--arena-panel)}.lobby-mode-panel[hidden]{display:none!important}.lobby-mode-copy{margin:0;color:var(--arena-soft);font-size:.95rem;line-height:1.45}.btn-block{width:100%}.lobby-actions{display:grid;gap:.75rem}.join-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}.share-code{margin-bottom:1.25rem;padding:.9rem 1rem;border-radius:14px;background:#00000073;color:var(--arena-ink);border:1px solid var(--arena-line);box-shadow:0 0 30px #1de4c214}.share-label{margin:0 0 .35rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-hud);color:var(--arena-muted)}.share-code-row{display:flex;align-items:center;justify-content:space-between;gap:.55rem}.share-code-value{margin:0;font-family:var(--font-display);font-size:clamp(1.35rem,4vw,1.75rem);letter-spacing:.12em;line-height:1;color:var(--arena-signal)}.share-code-row .btn{flex-shrink:0;background:var(--arena-signal);color:#1a1200;padding:.45rem .8rem;font-size:.82rem;border-radius:8px}.share-code-row .btn:hover{background:#ffd76a}.btn-copy-link{width:100%;margin-top:.65rem;padding:.55rem .85rem;border-radius:10px;border:1px solid rgba(29,228,194,.35);background:#1de4c21a;color:var(--arena-teal);font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.btn-copy-link:hover{background:#1de4c22e;border-color:#1de4c28c}.share-hint{margin:.5rem 0 0;font-size:.78rem;color:var(--arena-muted)}.player-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}.player-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem .9rem;border-radius:12px;background:#1de4c214;border:1px solid var(--arena-line);font-weight:600;color:var(--arena-ink)}.player-list .ready-tag{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-hud);color:var(--arena-teal)}.hint{color:var(--arena-muted);font-size:.9rem;margin:.75rem 0 0}.error{color:var(--arena-coral);font-weight:600;margin-top:1rem}.game-stage{position:relative;padding:.75rem clamp(.75rem,2vw,1.5rem) 1.25rem;display:flex;flex-direction:column;min-width:0;width:100%;height:100%;min-height:calc(100vh - 74px)}.btn-start-host{position:relative;z-index:1;display:none!important;margin-top:.75rem;min-width:12rem;background:#ffc53d!important;color:#1a1200!important;box-shadow:0 0 28px #ffc53d66;font-weight:800}.btn-start-host.is-visible{display:inline-flex!important}.btn-start-host:hover{background:#ffd76a!important;color:#1a1200!important}.arena-wait{position:relative;flex:1;display:grid;place-content:center;justify-items:center;text-align:center;gap:.75rem;padding:2rem 1.25rem;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(29,228,194,.12),transparent 70%),linear-gradient(160deg,#0c201ce6,#071210bf);border:1px solid var(--arena-line);min-height:320px}.arena-wait[hidden]{display:none!important}.arena-wait-orb{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,61,.28),transparent 70%);filter:blur(8px);animation:wait-pulse 2.8s ease-in-out infinite}.arena-wait-ring{position:absolute;width:220px;height:220px;border-radius:50%;border:1.5px dashed rgba(29,228,194,.35);animation:wait-spin 18s linear infinite}@keyframes wait-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}@keyframes wait-spin{to{transform:rotate(360deg)}}.arena-wait-kicker{position:relative;z-index:1;margin:0;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-hud);color:var(--arena-teal)}.arena-wait-title{position:relative;z-index:1;margin:0;font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.03em;max-width:16ch;line-height:1.05;color:var(--arena-ink)}.arena-wait-copy{position:relative;z-index:1;margin:0;color:var(--arena-soft);max-width:34ch}.arena-wait-slots{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(140px,200px));gap:.75rem;margin-top:1rem;width:min(100%,420px)}.arena-slot{display:grid;gap:.25rem;padding:.85rem .9rem;border-radius:14px;border:1px solid var(--arena-line);background:#00000059;text-align:left}.arena-slot.is-empty{border-style:dashed;opacity:.75}.arena-slot.is-ready{border-color:#1de4c273;background:#1de4c21a}.arena-slot-name{font-weight:700;font-size:.95rem;color:var(--arena-ink)}.arena-slot-state{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-hud);color:var(--arena-muted)}.arena-slot.is-ready .arena-slot-state{color:var(--arena-teal);font-weight:700}.result-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(ellipse 50% 40% at 50% 45%,rgba(255,197,61,.18),transparent 65%),#050d0bb8;backdrop-filter:blur(10px)}.result-overlay[hidden]{display:none!important}.result-card{width:min(100%,420px);padding:2rem 1.6rem 1.6rem;border-radius:22px;text-align:center;background:linear-gradient(165deg,#0f221d,#071210);border:1px solid var(--arena-line);box-shadow:0 30px 80px #00000073;animation:result-pop .45s ease both}@keyframes result-pop{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.result-kicker{margin:0 0 .5rem;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-hud);color:var(--arena-teal)}.result-title{margin:0 0 .65rem;font-family:var(--font-display);font-size:clamp(2rem,5vw,2.8rem);letter-spacing:-.03em;line-height:1;color:var(--arena-ink)}.result-message{margin:0 0 1.4rem;color:var(--arena-soft);font-size:1.05rem}.result-actions{display:grid;gap:.6rem}.result-host-hint{margin:.85rem 0 0;color:var(--arena-muted);font-size:.9rem}@media(max-width:700px){.arena-wait-slots{grid-template-columns:1fr}}.stage-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;flex-shrink:0;flex-wrap:wrap}.stage-bar[hidden],.arena-wait[hidden],.game-root[hidden],.result-overlay[hidden],.lobby-setup[hidden],.lobby-intro[hidden],.lobby-status[hidden],#game-stage[hidden]{display:none!important}.stage-bar p{margin:0;font-weight:700;font-size:1.05rem;color:var(--arena-ink)}.stage-bar-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}.stage-room{display:inline-flex;align-items:baseline;gap:.45rem;padding:.4rem .85rem;border-radius:10px;background:var(--arena-signal);color:#1a1200;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.12em}.stage-room-label{font-family:var(--font-hud);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}.btn-exit{border-color:#ff5a3673;color:var(--arena-coral)}.btn-exit:hover{border-color:var(--arena-coral);background:#ff5a361f;color:#ff8a6e}.game-root{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%;padding:.5rem 0 1rem}.game-root>*{width:min(100%,920px);max-width:100%}.board-wrap{width:100%;max-width:720px;margin:0 auto}.score-row{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.85rem;font-weight:700;font-size:clamp(.95rem,2vw,1.15rem)}.score-row .you{color:var(--teal-deep)}.cell-grid{display:grid;gap:8px;width:100%}.cell{aspect-ratio:1;border:none;border-radius:14px;background:#ffffffa6;border:1.5px solid var(--line);font:inherit;font-family:var(--font-display);font-size:clamp(1.8rem,7vw,3rem);cursor:pointer;color:var(--ink);transition:background .15s ease,transform .15s ease}.cell:hover:not(:disabled){background:#fff;transform:scale(1.03)}.cell:disabled{cursor:default}.cell.win{background:var(--signal);border-color:var(--signal)}.cell.p0{color:var(--teal-deep)}.cell.p1{color:var(--coral)}.cell.legal{box-shadow:inset 0 0 0 2px #0a6b6b59}.rps-choices{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.rps-choices button{min-width:120px;padding:1.4rem 1.1rem;border-radius:16px;border:1.5px solid var(--line);background:#ffffffb3;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer}.rps-choices button:hover:not(:disabled){border-color:var(--teal);background:#fff}.rps-choices button:disabled{opacity:.55}.canvas-frame{width:100%;border-radius:16px;overflow:hidden;border:1.5px solid var(--line);background:#0f1a17;box-shadow:var(--shadow)}.canvas-frame canvas{display:block;width:100%;height:auto}.battle-boards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;width:100%}.mini-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.4rem}.sea-grid{display:grid;gap:3px;background:var(--teal-deep);padding:6px;border-radius:10px}.sea-cell{aspect-ratio:1;border:none;background:#1a8a8a;cursor:pointer;border-radius:2px}.sea-cell.ship{background:#cfd8d3}.sea-cell.hit{background:var(--coral)}.sea-cell.miss{background:#0d3f3f}.sea-cell:disabled{cursor:default}.checkers-board,.reversi-board{display:grid;width:min(100%,min(720px,82vmin));aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;border:2px solid var(--ink)}.ck-cell{border:none;position:relative;cursor:pointer}.ck-cell.dark{background:#2f5d4c}.ck-cell.light{background:#d8e0d4}.ck-cell.selected{outline:3px solid var(--signal);outline-offset:-3px}.ck-cell.dest{box-shadow:inset 0 0 0 4px #f0b429b3}.ck-piece{width:72%;height:72%;border-radius:50%;margin:auto;display:block;box-shadow:0 4px #0003}.ck-piece.p0{background:#f4f7f2}.ck-piece.p1{background:#1a1f1c}.ck-piece.king:after{content:"\265b";display:grid;place-items:center;height:100%;color:var(--signal);font-size:.9rem}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;width:min(100%,560px);margin:0 auto}.mem-card{aspect-ratio:1;border:none;border-radius:12px;background:var(--teal);color:#fff;font-family:var(--font-display);font-size:clamp(1.4rem,4vw,2rem);cursor:pointer;transition:transform .2s ease}.mem-card.open,.mem-card.matched{background:#fff;color:var(--ink);border:1.5px solid var(--line)}.mem-card.matched{background:var(--signal)}.dots-board{position:relative;width:min(100%,min(640px,80vmin));aspect-ratio:1;margin:0 auto}.dot{position:absolute;width:12px;height:12px;background:var(--ink);border-radius:50%;transform:translate(-50%,-50%);z-index:2}.dline{position:absolute;border:none;background:#141a171f;cursor:pointer;z-index:1;padding:0}.dline.h{height:8px;transform:translateY(-50%)}.dline.v{width:8px;transform:translate(-50%)}.dline.taken0{background:var(--teal);cursor:default}.dline.taken1{background:var(--coral);cursor:default}.dline:hover:not(:disabled){background:var(--signal)}.box-owner{position:absolute;display:grid;place-items:center;font-family:var(--font-display);font-size:1.4rem;opacity:.85;pointer-events:none}.rv-cell{border:none;background:#1f6b4f;cursor:pointer;position:relative}.rv-cell:nth-child(odd){filter:brightness(1.05)}.rv-disc{width:78%;height:78%;border-radius:50%;margin:auto;display:block}.rv-disc.p0{background:#111}.rv-disc.p1{background:#f4f7f2}.rv-hint{width:28%;height:28%;border-radius:50%;margin:auto;background:#f0b4298c;display:block}.av-dock{position:fixed;right:1rem;bottom:1rem;z-index:45;width:min(340px,calc(100vw - 1.5rem));padding:.85rem .9rem .95rem;border-radius:16px;border:1px solid var(--arena-line);background:#080e12eb;box-shadow:0 18px 40px #00000073;backdrop-filter:blur(10px);color:var(--arena-ink)}.av-dock[hidden]{display:none!important}.av-dock-head{margin-bottom:.55rem}.av-dock.is-collapsed .av-dock-head{margin-bottom:0}.av-dock-toggle{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;margin:0;padding:.15rem .1rem .15rem 0;border:none;border-radius:8px;background:transparent;color:var(--arena-soft);cursor:pointer;transition:color .15s ease,background .15s ease}.av-dock-toggle:hover{color:var(--arena-teal);background:#1de4c20f}.av-dock-kicker{margin:0;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--arena-teal)}.av-chevron{width:1rem;height:1rem;flex-shrink:0;color:var(--arena-soft);transition:transform .2s ease,color .15s ease}.av-dock-toggle:hover .av-chevron{color:var(--arena-teal)}.av-dock.is-collapsed .av-chevron{transform:rotate(-180deg)}.av-dock-body{display:grid}.av-dock.is-collapsed .av-dock-body{display:none}.av-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.65rem}.av-tile{position:relative;aspect-ratio:4 / 3;border-radius:10px;overflow:hidden;background:#0000008c;border:1px solid rgba(29,228,194,.2)}.av-tile video{width:100%;height:100%;object-fit:cover;background:#05080a}#av-local{transform:scaleX(-1)}.av-tile-label{position:absolute;left:.4rem;bottom:.35rem;padding:.15rem .4rem;border-radius:6px;font-size:.68rem;font-weight:700;background:#000000a6;color:var(--arena-ink);z-index:2}.av-tile-off{position:absolute;inset:0;display:grid;place-items:center;font-size:.75rem;font-weight:600;color:var(--arena-soft);background:#050a0e8c;pointer-events:none;z-index:1}.av-tile-off[hidden]{display:none!important}.av-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}.av-btn{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;min-height:4.35rem;border:1px solid var(--arena-line);background:#00000059;color:var(--arena-soft);font:inherit;padding:.45rem .3rem .5rem;border-radius:12px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.av-btn:hover{color:var(--arena-ink);border-color:#1de4c266}.av-btn-icon{position:relative;width:1.55rem;height:1.55rem;display:grid;place-items:center}.av-ico{width:1.55rem;height:1.55rem;grid-area:1 / 1}.av-btn .av-ico-on{display:none}.av-btn .av-ico-off,.av-btn.is-on .av-ico-on{display:block}.av-btn.is-on .av-ico-off{display:none}.av-btn-text{display:flex;flex-direction:column;align-items:center;gap:.05rem;line-height:1.15}.av-btn-name{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:inherit;opacity:.85}.av-btn-state{font-size:.8rem;font-weight:800;color:inherit}.av-btn.is-off{color:#b7c2c8}.av-btn.is-off .av-btn-state{color:#ff9b9b}.av-btn.is-on{background:var(--arena-teal-dim);color:var(--arena-teal);border-color:#1de4c273;box-shadow:inset 0 0 0 1px #1de4c22e}.av-btn.is-on .av-btn-state{color:var(--arena-teal)}.av-btn.is-warn{background:#ff5a5a24;color:#ff9b9b;border-color:#ff78786b;box-shadow:none}.av-btn.is-warn .av-btn-state{color:#ff9b9b}.av-hint{margin:.55rem 0 0;font-size:.75rem;line-height:1.35;color:var(--arena-soft)}.av-error{margin:.45rem 0 0;font-size:.75rem;color:#ff8f8f}.av-error[hidden]{display:none!important}.play-shell.is-playing .av-dock{opacity:.92}@media(max-width:860px){.play-shell{grid-template-columns:1fr}.lobby-panel{border-right:none;border-bottom:1px solid var(--line)}.battle-boards{grid-template-columns:1fr}.av-dock{right:.6rem;bottom:.6rem;width:min(300px,calc(100vw - 1.2rem))}}