:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6fbff;--bg-accent:#dff4ff;--bg-deep:#b7e6ff;--text:#123245;--text-soft:#587286;--panel:#ffffffdb;--panel-strong:#fff;--panel-border:#5396bd2e;--topbar:#ffffffb8;--shadow:0 18px 50px #1c516f1f;--accent:#0b8ecf;--accent-strong:#0a6ea2;--accent-soft:#e6f7ff;--accent-warm:#ffd977;--accent-warm-strong:#f5bf42;--good:#def8ea;--warn:#fff4d9;--error:#ffe2ea;--error-text:#8f2a46;--board:#d9f1ff;--board-edge:#c4e9fb;--cell:#fdfefe;--cell-border:#4788ac29;--ghost:#1149661f;--mark-x:#0a7b86;--mark-o:#256bd7;font-family:Avenir Next,Segoe UI,Trebuchet MS,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#071722;--bg-accent:#0d2434;--bg-deep:#123246;--text:#edf8ff;--text-soft:#a3c0d0;--panel:#0d1d29e0;--panel-strong:#112a3a;--panel-border:#80b7d624;--topbar:#09161fd1;--shadow:0 18px 50px #00000047;--accent:#74d0ff;--accent-strong:#46b4ea;--accent-soft:#123246;--accent-warm:#e2c266;--accent-warm-strong:#caa13f;--good:#153b32;--warn:#47381b;--error:#4a2030;--error-text:#ffd7e2;--board:#0d2534;--board-edge:#16394d;--cell:#102c3d;--cell-border:#80b7d61f;--ghost:#cbe7f624;--mark-x:#78ebe1;--mark-o:#90bfff}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{color:var(--text);background:radial-gradient(circle at top left, var(--bg-accent) 0, transparent 28%), radial-gradient(circle at bottom right, #7ac5ec2e 0, transparent 24%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app-shell{height:100svh;position:relative;overflow:hidden}.backdrop{pointer-events:none;position:fixed;inset:0;overflow:hidden}.backdrop-shape{filter:blur(40px);opacity:.5;border-radius:50%;position:absolute}.shape-one{background:#79d6ff38;width:28rem;height:28rem;top:-12rem;left:-8rem}.shape-two{background:#ffdc8e1f;width:34rem;height:34rem;bottom:-14rem;right:-10rem}.app-frame{flex-direction:column;gap:16px;width:min(1180px,100vw - 32px);height:100%;margin:0 auto;padding:18px 0;display:flex;position:relative}.topbar,.panel{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow)}.topbar{background:var(--topbar);border-radius:26px;justify-content:space-between;align-items:center;gap:18px;padding:16px 18px;display:flex}.brand-block{align-items:center;gap:14px;display:flex}.brand-badge{color:#0c3145;background:linear-gradient(#fff0b7 0%,#ffd46f 100%);border-radius:16px;place-items:center;width:54px;height:54px;font-weight:900;display:grid}.brand-kicker{color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:.82rem}.brand-title{margin:.15rem 0 0;font-size:clamp(1.3rem,2vw,1.9rem)}.topbar-tools{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}.tab-nav,.theme-switcher{background:var(--panel-strong);border:1px solid var(--panel-border);border-radius:999px;gap:8px;padding:6px;display:inline-flex}.tab,.theme-option,.button{border:0;border-radius:999px;transition:background-color .14s,color .14s,opacity .14s}.tab,.theme-option{color:var(--text-soft);background:0 0;padding:10px 14px;font-weight:700}.tab.active,.theme-option.active{color:#fff;background:var(--accent)}.panel{border-radius:30px}.home-shell,.play-shell{flex:auto;gap:20px;min-height:0;display:grid}.home-shell{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}.play-shell{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}.home-copy,.home-art,.sidebar-panel,.board-panel{min-height:0;padding:22px}.eyebrow{color:var(--accent-strong);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;font-size:.82rem;font-weight:800;display:inline-block}.home-copy h1,.section-header h2{letter-spacing:-.03em;margin:0;line-height:1.05}.home-copy h1{max-width:12ch;font-size:clamp(2.5rem,5vw,4.4rem)}.home-copy p,.section-header p,.point-card span,.player-line span,.empty-board p{color:var(--text-soft);line-height:1.55}.hero-actions,.sidebar-actions,.info-row{flex-wrap:wrap;gap:12px;display:flex}.hero-actions{margin-top:24px}.button{min-height:48px;padding:13px 18px;font-weight:800}.button-primary{color:#08283a;background:linear-gradient(180deg, var(--accent-warm) 0%, var(--accent-warm-strong) 100%)}.button-secondary{color:var(--text);background:var(--panel-strong);border:1px solid var(--panel-border)}.home-points{gap:12px;margin-top:24px;display:grid}.point-card,.players-card,.status-card,.field input,.field select,.empty-board{background:var(--panel-strong)}.point-card,.players-card,.status-card,.empty-board{border:1px solid var(--panel-border);border-radius:22px}.point-card{padding:16px 18px}.point-card strong,.status-value,.player-line strong{margin-bottom:6px;display:block}.home-art{place-items:center;display:grid}.shark-art{width:min(100%,420px)}.shark-art.compact{width:min(100%,220px);margin-top:12px}.shark-art img{filter:drop-shadow(0 18px 30px #113a522e);width:100%;height:auto;display:block}.section-header p{margin:10px 0 0}.section-header{min-height:72px}.control-stack{gap:12px;margin-top:16px;display:grid}.field{gap:8px;display:grid}.field span,.status-label{color:var(--text-soft);font-size:.88rem;font-weight:700}.field input,.field select{border:1px solid var(--panel-border);width:100%;min-height:48px;color:var(--text);border-radius:16px;padding:12px 14px}.info-row{margin-top:12px}.info-row>*{flex:1 1 0}.play-shell .info-row{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.status-card{min-height:82px;padding:12px 14px}.status-card.good{background:var(--good)}.status-card.warn{background:var(--warn)}.sidebar-actions{margin-top:12px}.winner-banner{border:1px solid var(--panel-border);background:var(--accent-soft);min-height:54px;color:var(--text);border-radius:18px;margin-top:12px;padding:13px 16px;font-weight:700}.winner-banner.hidden{visibility:hidden}.players-card{margin-top:14px;padding:16px}.players-card.muted{color:var(--text-soft)}.player-line+.player-line{border-top:1px solid var(--panel-border);margin-top:12px;padding-top:12px}.error-card{background:var(--error);color:var(--error-text);border-radius:18px;margin-top:12px;padding:12px 14px;font-weight:700}.board-panel{place-items:center;min-height:0;display:grid}.board-frame{background:linear-gradient(180deg, var(--board) 0%, var(--board-edge) 100%);border:1px solid var(--panel-border);border-radius:32px;width:min(100%,560px);padding:16px}.board{grid-template-columns:repeat(3,minmax(88px,1fr));gap:14px;display:grid}.cell{border:1px solid var(--cell-border);background:var(--cell);height:clamp(88px,12.5vw,146px);color:var(--text);border-radius:24px;place-items:center;display:grid}.cell.playable:hover:not(:disabled){background:var(--panel)}.mark,.ghost-mark{font-size:clamp(2.6rem,9vw,5rem);font-weight:800;line-height:1}.mark-x{color:var(--mark-x)}.mark-o{color:var(--mark-o)}.ghost-mark{opacity:0;color:var(--ghost)}.cell.playable:hover .ghost-mark{opacity:1}.empty-board{text-align:center;border:1px solid var(--panel-border);border-radius:28px;width:min(100%,480px);padding:24px}.empty-board h3{margin:14px 0 6px}.empty-board p{margin:0}.multi-shell{grid-template-columns:minmax(360px,430px) minmax(0,1fr)}.compact-sidebar{flex-direction:column;display:flex}.multiplayer-layout{grid-template-columns:minmax(0,1fr) 150px;align-items:start;gap:12px;margin-top:16px;display:grid}.top-fields{gap:10px;display:grid}.join-inline{grid-template-columns:minmax(0,1fr) 120px;align-items:end;gap:10px;display:grid}.code-field input{text-transform:uppercase}.quick-actions{gap:10px;min-width:150px;display:grid}.players-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;display:grid}.player-chip{border:1px solid var(--panel-border);background:var(--panel-strong);border-radius:18px;gap:4px;padding:12px 14px;display:grid}.player-chip span{color:var(--accent-strong);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:800}.player-chip strong{font-size:.98rem}.player-chip em{color:var(--text-soft);font-size:.86rem;font-style:normal}.invite-preview{display:none}.compact-error{min-height:46px}.error-spacer{min-height:58px}.compact-actions{align-items:center;min-height:50px}.action-placeholder{min-height:48px;display:block}.invite-hint{border:1px solid var(--panel-border);background:var(--accent-soft);color:var(--text);border-radius:14px;padding:10px 12px;font-size:.9rem}.share-card{border:1px solid var(--panel-border);background:var(--panel-strong);border-radius:18px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;display:grid}.share-card.placeholder{visibility:hidden}.share-copy strong{letter-spacing:.08em;margin-top:2px;font-size:1.15rem;display:block}.share-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.share-actions .button{min-width:132px}.button.is-success{background:var(--good)}.share-feedback{min-height:24px;color:var(--text-soft);margin-top:8px;font-size:.84rem}.share-feedback .share-copy{min-height:20px}.button:focus-visible,.tab:focus-visible,.theme-option:focus-visible,.cell:focus-visible,.field input:focus-visible,.field select:focus-visible{outline-offset:2px;outline:4px solid #75caf973}@media (width<=980px){.home-shell,.play-shell{grid-template-columns:1fr}.play-shell .info-row{grid-template-columns:repeat(2,minmax(0,1fr))}.multiplayer-layout{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr;min-width:0}.share-card{grid-template-columns:1fr}.share-actions{justify-content:stretch}}@media (width<=760px){.app-frame{width:min(100vw - 20px,1180px);padding:12px 0}.topbar,.home-copy,.home-art,.sidebar-panel,.board-panel{padding:16px}.topbar{flex-direction:column;align-items:flex-start}.topbar-tools,.tab-nav,.theme-switcher{width:100%}.tab-nav,.theme-switcher{justify-content:stretch}.tab,.theme-option{text-align:center;flex:1 1 0}.play-shell .info-row,.quick-actions,.players-strip,.join-inline{grid-template-columns:1fr}.share-actions{flex-direction:column}.section-header{min-height:0}.board{gap:10px}.cell{height:min(26vw,120px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}