:root{color-scheme:light;font-family:Avenir Next,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#f6f0e8;background:radial-gradient(circle at top left,rgba(255,191,105,.24),transparent 26%),radial-gradient(circle at bottom right,rgba(86,124,228,.22),transparent 28%),linear-gradient(135deg,#18141c,#221b2d,#0e1119);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--panel: rgba(16, 21, 34, .78);--panel-border: rgba(255, 255, 255, .1);--accent: #ffbf69;--accent-strong: #ff8c42;--muted: rgba(246, 240, 232, .72);--success: #6dd3a0;--danger: #ff6b6b;--surface-max-width: 1440px}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button,input{font:inherit}button{border:0;cursor:pointer}#root{min-height:100vh}.app-shell{position:relative;min-height:100vh;padding:24px clamp(16px,3vw,32px) 40px;overflow:hidden;isolation:isolate}.bg-orb{position:absolute;width:22rem;height:22rem;border-radius:999px;filter:blur(40px);opacity:.35;pointer-events:none}.bg-orb-left{top:-8rem;left:-6rem;background:#ff8c4275}.bg-orb-right{right:-4rem;bottom:8rem;background:#6dd3a047}.topbar,.layout-grid,.hero-panel{position:relative;z-index:1}.topbar{width:min(100%,var(--surface-max-width));margin:0 auto 24px;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px 20px;align-items:stretch}.status-banner{width:100%;min-width:0;padding:12px 16px;border-radius:20px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--muted);display:flex;align-items:center;overflow-wrap:anywhere}.eyebrow{margin:0 0 6px;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent)}h1,h2,p{margin:0}h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:.95;margin-bottom:12px}h2{font-size:1.35rem}.hero-copy,.muted{color:var(--muted)}.mono{font-family:SFMono-Regular,Menlo,monospace;font-size:.84rem}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:28px;padding:clamp(18px,2vw,24px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 50px #00000042;min-width:0}.hero-panel{width:min(100%,720px);margin:0 auto;display:grid;gap:18px;align-content:start;align-self:start;justify-self:center}.field{display:grid;gap:8px}.field input{width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;padding:14px 16px;color:inherit}.form-error{padding:10px 12px;border-radius:14px;background:#ff6b6b24;border:1px solid rgba(255,107,107,.24);color:#ffd5d5}.primary-button,.secondary-button,.warning-button,.ghost-button,.chip{padding:13px 18px;border-radius:16px;transition:transform .18s ease,opacity .18s ease,background .18s ease}.primary-button:hover,.secondary-button:hover,.warning-button:hover,.ghost-button:hover,.chip:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.warning-button:disabled,.ghost-button:disabled{cursor:not-allowed;opacity:.55;transform:none}.primary-button{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#221b2d;font-weight:700}.secondary-button{background:#6dd3a02e;color:#e9fff5}.warning-button{background:#ff6b6b29;color:#ffe5e5}.ghost-button{background:#ffffff12;color:inherit}.layout-grid{display:grid;width:min(100%,var(--surface-max-width));margin:0 auto;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:start}.column{display:grid;gap:clamp(16px,2vw,24px);min-width:0}.column-left,.column-board{min-height:0}.lobby-panel,.stats-panel{min-width:0}.panel-header,.status-strip,.match-footer,.action-grid,.room-card,.leaderboard-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.mode-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.chip{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:inherit;min-width:0;min-height:96px;display:grid;justify-items:start;align-content:start;gap:6px;text-align:left;position:relative}.chip.active{background:linear-gradient(180deg,#ffbf693d,#ff8c422e);color:#fff7ea;border:1px solid rgba(255,191,105,.55);box-shadow:inset 0 0 0 1px #fff5e524}.action-grid{margin-bottom:18px}.room-list,.leaderboard-list{display:grid;gap:12px}.action-grid>*,.mode-toggle>*{flex:1 1 160px}.chip-label{font-weight:700;font-size:1rem}.chip-meta{color:var(--muted);font-size:.88rem}.chip.active .chip-meta{color:#fff7eadb}.chip-check{margin-top:4px;padding:4px 10px;border-radius:999px;background:#221b2d52;color:#fff7ea;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mode-summary{margin-bottom:18px;padding:12px 14px;border-radius:16px;background:#ffffff0d;color:var(--muted)}.room-card,.stat-card,.status-strip,.match-meta{padding:14px 16px;border-radius:18px;background:#ffffff0d}.leaderboard-row{padding:0;border-radius:0;background:transparent}.room-title{font-weight:700;overflow-wrap:anywhere}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 24px}.stat-card{display:grid;gap:4px;min-height:92px;align-content:start;padding:10px 0 0;border-radius:0;background:transparent;border:0;box-shadow:none}.stat-card strong{font-size:1.35rem}.stats-panel{display:flex;flex-direction:column;gap:0;overflow:visible;padding-bottom:22px}.stats-panel.collapsed{padding-bottom:18px}.stats-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}.stats-toggle{min-width:96px}.stats-collapsed-copy{padding-top:2px}.stats-panel .leaderboard-list{display:grid;gap:10px;padding-bottom:6px}.board-panel{display:grid;gap:12px;min-width:0}.board-panel-win{border-color:#6dd3a059}.board-panel-loss{border-color:#ff6b6b47}.board-panel-draw{border-color:#ffbf693d}.status-pill{padding:6px 10px;border-radius:999px;background:#ffbf6924;color:#fff1d8;text-transform:capitalize}.match-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.match-banner{padding:10px 14px;border-radius:18px;background:#ffbf691f;border:1px solid rgba(255,191,105,.22);color:#fff4df;font-weight:600;line-height:1.35}.match-banner-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.connection-banner{padding:10px 14px;border-radius:18px;background:#567ce41f;border:1px solid rgba(86,124,228,.22);color:#dbe6ff;font-weight:600;line-height:1.35}.result-panel{position:relative;overflow:hidden;padding:12px 16px;border-radius:20px;border:1px solid transparent;display:grid;gap:8px;min-height:0}.result-panel-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1}.result-panel-win{background:linear-gradient(135deg,#6dd3a033,#6dd3a014);border-color:#6dd3a042}.result-panel-loss{background:linear-gradient(135deg,#ff6b6b29,#ff6b6b0f);border-color:#ff6b6b3d}.result-panel-draw{background:linear-gradient(135deg,#ffbf6924,#ffbf690d);border-color:#ffbf6938}.result-panel h3{font-size:1.1rem;line-height:1.1}.result-panel p{color:#f6f0e8db;position:relative;z-index:1;font-size:.98rem}.result-badge{width:fit-content;padding:5px 10px;border-radius:999px;background:#1015224d;color:#fffaf2;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1}.confetti-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.confetti-piece{position:absolute;top:-14px;left:calc(8% + var(--offset, 0%));width:7px;height:16px;border-radius:999px;opacity:.82;animation:confetti-fall 2.4s ease-in infinite;animation-delay:var(--delay, 0s)}.confetti-piece:nth-child(4n+1){background:#ffbf69}.confetti-piece:nth-child(4n+2){background:#6dd3a0}.confetti-piece:nth-child(4n+3){background:#86a7ff}.confetti-piece:nth-child(4n){background:#fff6e7}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0);opacity:0}15%{opacity:.95}to{transform:translate3d(0,82px,0) rotate(180deg);opacity:0}}.room-card>div,.leaderboard-row>div,.status-strip>span,.panel-header>div{min-width:0}.room-card .muted,.leaderboard-row .muted,.status-strip span,.match-meta p,.match-footer p,.status-banner,.mono{overflow-wrap:anywhere}.timer{color:var(--success);font-weight:700}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,720px);justify-self:center;align-self:start}.board-finished{margin-top:2px;width:min(100%,460px)}.cell{aspect-ratio:1;min-height:0;border-radius:24px;background:#ffffff0f;color:#fff8ee;font-size:clamp(2rem,6vw,4.5rem);font-weight:800}.cell.winning{background:#6dd3a033;color:#e9fff5}.board-placeholder .placeholder-cell{background:#ffffff0a;border:1px dashed rgba(255,255,255,.12)}.player-slot{transition:background .18s ease,color .18s ease,border-color .18s ease;border:1px solid transparent}.player-slot.active-turn{background:#6dd3a029;border-color:#6dd3a047;color:#effff6;font-weight:700}.turn-chip{padding:7px 10px;border-radius:999px;background:#ffffff0f;color:#fff4df}@media(min-width:961px){body,#root{height:100dvh;overflow:hidden}.app-shell{height:100dvh;min-height:100dvh;padding:18px clamp(16px,2.4vw,28px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px}.topbar{margin-bottom:0}.hero-panel{height:auto;max-height:calc(100dvh - 150px);overflow:auto}.layout-grid{min-height:0;height:100%;align-items:stretch;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"left board"}.column{min-height:0;padding-right:6px}.column-board{grid-area:board;height:100%}.column-left{grid-area:left;overflow:auto;overscroll-behavior:contain;align-content:start}.column-lobby,.column-stats{padding-right:0}.lobby-panel{align-self:start;overflow:visible}.stats-panel{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible}.lobby-panel .room-list{padding-bottom:4px}.board-panel{height:100%;min-height:0;grid-template-rows:auto auto auto minmax(0,1fr) auto;overflow:hidden;align-items:start}.status-strip,.match-banner,.result-panel{padding-top:10px;padding-bottom:10px}.board{width:min(100%,500px,calc(100dvh - 330px));max-width:100%;max-height:100%}.board-finished{width:min(100%,460px,calc(100dvh - 430px))}.cell{border-radius:20px;font-size:clamp(1.7rem,3.6vw,3.2rem)}.panel-header{gap:8px}.panel-header .ghost-button,.match-footer .warning-button{padding:9px 12px}.match-footer{gap:8px}.match-footer .muted{font-size:.92rem}.board-panel-win .result-panel,.board-panel-loss .result-panel,.board-panel-draw .result-panel{padding-top:9px;padding-bottom:9px}}@media(min-width:1280px){.layout-grid{grid-template-columns:minmax(320px,400px) minmax(540px,1fr);grid-template-areas:"left board"}.board-panel{padding:22px}.board{width:min(100%,520px,calc(100dvh - 320px))}.board-finished{width:min(100%,470px,calc(100dvh - 420px))}}@media(max-width:960px){.layout-grid{grid-template-columns:1fr;grid-template-areas:"left" "board" "stats"}.topbar{grid-template-columns:1fr}.status-banner{width:100%}.column-left,.column-lobby{grid-area:left}.column-board{grid-area:board}.column-stats{grid-area:stats}.column-left{overflow:visible}}@media(max-width:640px){.app-shell{padding:16px}.panel,.hero-panel{padding:18px;border-radius:22px}.panel-header,.status-strip,.match-footer{flex-direction:column;align-items:stretch}.mode-toggle{grid-template-columns:1fr}.column-left{display:contents}.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}.action-grid>*{flex:initial;width:100%;min-width:0;padding:12px 14px}.panel-header .ghost-button{align-self:stretch}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.board{width:100%;gap:10px}.cell{border-radius:18px}}