:root{--bg: #f6efe6;--surface: #fffaf4;--ink: #2b2420;--muted: #7a6d63;--line: #e4d8ca;--x: #d9573b;--o: #2b8a86;--accent: #6b4a34;--accent-ink: #fffaf4;--win: #2f8f4e;--lose: #b23b3b;--radius: 14px;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #1d1a17;--surface: #282420;--ink: #f1e9df;--muted: #a8998c;--line: #3a342e;--x: #f07b5f;--o: #4fc1bb;--accent: #e2b48a;--accent-ink: #1d1a17;--win: #5cc77f;--lose: #ef7575;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}#app{max-width:460px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}h2{margin:0 0 2px;font-size:1.05rem}.muted{color:var(--muted);margin:0 0 12px;font-size:.92rem}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.logo{border:0;background:none;color:var(--ink);font:800 1.6rem/1 system-ui,sans-serif;letter-spacing:-.03em;padding:4px 0;cursor:pointer}.logo span{color:var(--x);padding:0 1px}.net{font-size:.82rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}.net:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}.net.online:before{background:var(--win)}.net.connecting:before{background:var(--accent);animation:pulse 1s infinite alternate}.btn{font:inherit;font-weight:600;padding:10px 16px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .08s,background .15s}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:active:not(:disabled){transform:scale(.97)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible,.cell:focus-visible,input:focus-visible,.logo:focus-visible{outline:3px solid var(--o);outline-offset:2px}.row{display:flex;gap:8px;flex-wrap:wrap}.row+.row{margin-top:8px}input{font:inherit;padding:10px 12px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}.field{display:block;margin-bottom:16px}.field>span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}.join .code-input{flex:2;width:auto;min-width:0;text-transform:uppercase;letter-spacing:.2em;font-weight:700}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px}.scores{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin-bottom:16px}.side{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:2px solid transparent;background:var(--surface);min-width:0}.side.active{border-color:var(--accent)}.mark{font-weight:800;font-size:1.3rem}.mark.x{color:var(--x)}.mark.o{color:var(--o)}.who{min-width:0;display:flex;flex-direction:column}.pname{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note{font-size:.75rem;color:var(--muted)}.wins{font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums}.draws{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;color:var(--muted)}.draws span{font-weight:700;font-size:1rem;color:var(--ink)}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;aspect-ratio:1;background:var(--line);padding:8px;border-radius:var(--radius)}.cell{border:0;border-radius:10px;background:var(--surface);color:var(--ink);font:800 clamp(2.6rem,16vw,4.4rem)/1 system-ui,sans-serif;display:grid;place-items:center;padding:0;cursor:default}.cell.x{color:var(--x)}.cell.o{color:var(--o)}.cell.fresh{animation:pop .18s ease-out}.cell.playable{cursor:pointer}.cell.playable:hover{background:color-mix(in srgb,var(--surface) 85%,var(--accent))}.cell:disabled{opacity:1}.cell.win{background:color-mix(in srgb,var(--surface) 70%,var(--win))}.status{text-align:center;font-weight:600;font-size:1.1rem;margin:16px 0;min-height:1.6em}.status.wait{color:var(--muted)}.status.win{color:var(--win)}.status.lose{color:var(--lose)}.clock{display:flex;align-items:center;gap:10px;height:20px;margin:-6px 0 10px}.clock-bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}.clock-fill{display:block;height:100%;background:var(--muted);border-radius:3px;transition:width .1s linear}.clock.mine .clock-fill{background:var(--accent)}.clock.low .clock-fill{background:var(--lose)}.clock-label{min-width:3ch;text-align:right;font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}.clock.mine.low .clock-label{color:var(--lose)}.wait{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-top:24px}.wait .spinner{align-self:center;width:44px;height:44px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite;margin-bottom:8px}.room-code{font:800 2.6rem/1.1 ui-monospace,SF Mono,Menlo,Consolas,monospace;letter-spacing:.25em;margin:4px 0 12px;user-select:all}#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;max-width:calc(100% - 32px);font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{0%{transform:scale(.6);opacity:.3}}@keyframes pulse{to{opacity:.3}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}.platform{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.platform-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.platform-head span,.hint{color:var(--muted);font-size:.82rem}.hint{margin:8px 0 0}.lb{width:100%;border-collapse:collapse;font-size:.92rem}.lb th{text-align:left;font-size:.78rem;font-weight:600;color:var(--muted);padding:0 6px 6px}.lb td{padding:7px 6px;border-top:1px solid var(--line)}.lb .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lb .rank{width:2.5em;color:var(--muted);font-variant-numeric:tabular-nums}.lb .lb-name{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.lb .record{color:var(--muted)}.lb tr.you td{background:color-mix(in srgb,var(--surface) 82%,var(--accent))}.lb tr.gap td{text-align:center;color:var(--muted);padding:2px}