.ttt-page{padding-top:34px;padding-bottom:72px;max-width:1120px}.ttt-breadcrumb{font-size:13px;color:#64748b}.ttt-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:40px 0 30px}.ttt-hero .eyebrow{color:#047857;letter-spacing:.18em;font-size:11px}.ttt-hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.06em;line-height:1.15;margin:12px 0 16px}.ttt-hero p:last-child{color:#64748b;line-height:1.9;margin:0;font-size:14px}.ttt-hero-stamp{font:700 66px monospace;letter-spacing:-.12em;white-space:nowrap;color:#059669;opacity:.2;user-select:none}.ttt-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr);gap:22px;align-items:start}.ttt-play{border:1px solid #1e3342;border-radius:24px;background:#08131e;color:#e2e8f0;padding:30px;box-shadow:0 20px 50px #0f172a12}.ttt-play:focus-visible{outline:3px solid #34d399;outline-offset:5px}.ttt-play-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px}.ttt-play-top>span{font:11px monospace;letter-spacing:.14em;color:#85a295}.ttt-round{color:#8092a3;font:11px monospace}.ttt-round strong{color:#e2e8f0;font-size:14px}.ttt-status-row{display:flex;align-items:center;gap:14px;min-height:72px;margin-bottom:28px}.ttt-turn-mark{font:700 34px monospace;background:#102833;color:#6ee7b7;display:grid;place-items:center;width:54px;height:54px;border-radius:15px;flex-shrink:0}.ttt-turn-mark[data-mark=O]{color:#fbbf24;background:#29291f}.ttt-status-row h2{font-size:20px;margin:0 0 7px;line-height:1.5}.ttt-status-row p{font-size:12px;color:#91a3b3;margin:0}.ttt-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:420px;margin:0 auto}.ttt-cell{aspect-ratio:1;display:grid;place-items:center;border:1px solid #263847;background:#101f2d;border-radius:16px;cursor:pointer;padding:20%;transition:background .18s,border-color .18s,transform .18s;color:#6ee7b7;min-width:0;touch-action:manipulation}.ttt-cell:hover:enabled{background:#16382f;border-color:#34d399;transform:translateY(-2px)}.ttt-cell:focus-visible{outline:3px solid #a7f3d0;outline-offset:3px}.ttt-cell:disabled{cursor:default;opacity:1}.ttt-cell[data-mark=O]{color:#fbbf24}.ttt-cell svg{width:100%;height:100%;overflow:visible;stroke:currentColor;stroke-width:6;fill:none;stroke-linecap:round;animation:ttt-appear .18s ease-out}.ttt-cell.is-winning{background:#103a31;border-color:#34d399;box-shadow:inset 0 0 20px #34d39912}.ttt-cell.is-winning[data-mark=O]{background:#362e17;border-color:#fbbf24}.ttt-cell-number{font:12px monospace;color:#61798d}.ttt-board[aria-busy=true] .ttt-cell-number{opacity:.5}.ttt-board-help{font-size:11px;line-height:1.8;color:#91a3b3;text-align:center;margin:22px 0 0}.ttt-sidebar{display:grid;gap:16px}.ttt-panel{background:var(--ttt-panel,#fff);border:1px solid var(--ttt-border,#e2e8f0);border-radius:20px;padding:24px}.ttt-panel h2{font-size:16px;margin:0 0 18px}.ttt-mode-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ttt-mode-switch button{font:inherit;font-size:13px;border:1px solid var(--ttt-border,#e2e8f0);border-radius:10px;background:transparent;color:inherit;padding:12px 4px;cursor:pointer}.ttt-mode-switch button[aria-pressed=true]{background:#047857;border-color:#047857;color:#fff}.ttt-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.ttt-fields label{display:grid;gap:8px;font-size:12px;color:var(--ttt-muted,#64748b)}.ttt-fields select{width:100%;min-width:0;font:inherit;font-size:13px;border:1px solid var(--ttt-border,#e2e8f0);border-radius:9px;padding:10px 8px;background:var(--ttt-panel,#fff);color:var(--ttt-ink,#0f172a)}.ttt-settings-note{font-size:11px;color:var(--ttt-muted,#64748b);margin:16px 0 0;line-height:1.8}.ttt-scores{display:grid;grid-template-columns:1fr .85fr 1fr;gap:8px}.ttt-score{border:1px solid var(--ttt-border,#e2e8f0);border-radius:12px;padding:14px 4px;text-align:center;min-width:0}.ttt-score.is-turn{border-color:#059669;background:#10b9810b}.ttt-score-name{font-size:11px;color:var(--ttt-muted,#64748b);display:block;white-space:nowrap}.ttt-score strong{display:block;font:600 30px monospace;margin-top:10px}.ttt-score-x strong{color:#059669}.ttt-score-o strong{color:#b7790c}.ttt-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:18px}.ttt-actions button,.ttt-clear{font:inherit;font-size:12px;cursor:pointer;border-radius:10px;padding:12px 14px;min-height:44px}.ttt-next{background:#047857;color:#fff;border:1px solid #047857;font-weight:700!important}.ttt-next:hover{background:#065f46}.ttt-undo{background:transparent;color:inherit;border:1px solid var(--ttt-border,#e2e8f0)}.ttt-undo:disabled{opacity:.4;cursor:default}.ttt-clear{display:block;background:transparent;border:0;color:var(--ttt-muted,#64748b);padding:7px 0;margin:8px auto -8px;text-decoration:underline;text-underline-offset:4px}.ttt-rules{margin:0;padding-left:18px;font-size:12px;line-height:2;color:var(--ttt-muted,#64748b)}.ttt-rules li+li{margin-top:7px}.ttt-footnote{font-size:11px;color:var(--ttt-muted,#64748b);line-height:1.9;border-top:1px solid var(--ttt-border,#e2e8f0);margin:16px 0 0;padding-top:14px}.ttt-panel button:focus-visible,.ttt-panel select:focus-visible{outline:3px solid #34d399;outline-offset:3px}.dark .ttt-page{--ttt-panel:#101b25;--ttt-border:#293747;--ttt-muted:#9aaebe;--ttt-ink:#e2e8f0}.dark .ttt-hero .eyebrow,.dark .ttt-score-x strong{color:#6ee7b7}.dark .ttt-score-o strong{color:#fbbf24}.dark .ttt-hero p:last-child,.dark .ttt-breadcrumb{color:#9aaebe}[hidden]{display:none!important}@keyframes ttt-appear{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media(max-width:760px){.ttt-layout{grid-template-columns:1fr}.ttt-page{padding-top:24px;padding-bottom:44px}.ttt-hero{margin:28px 0 24px}.ttt-hero-stamp{font-size:44px}.ttt-play{padding:22px}.ttt-sidebar{grid-template-columns:1fr 1fr;align-items:start}.ttt-panel:last-child{grid-column:1/-1}.ttt-panel{padding:20px}.ttt-fields{grid-template-columns:1fr}.ttt-status-row{margin-bottom:20px}.ttt-play-top{margin-bottom:20px}}@media(max-width:520px){.ttt-sidebar{grid-template-columns:1fr}.ttt-fields{grid-template-columns:1fr 1fr}.ttt-hero-stamp{display:none}.ttt-cell{border-radius:12px}.ttt-board{gap:8px}.ttt-panel:last-child{grid-column:auto}.ttt-status-row h2{font-size:18px}}@media(prefers-reduced-motion:reduce){.ttt-cell,.ttt-cell svg{transition:none;animation:none}}


.ttt-online-button{font:inherit;font-size:13px;border-radius:10px;min-height:44px;padding:12px;width:100%;cursor:pointer}.ttt-room-join{margin-top:20px}.ttt-room-join label,.ttt-room-details label{display:block;font-size:12px;color:var(--ttt-muted,#64748b);margin-bottom:8px}.ttt-room-join>div{display:flex;gap:8px}.ttt-room-join input,.ttt-room-details input{background:var(--ttt-panel,#fff);border:1px solid var(--ttt-border,#e2e8f0);border-radius:9px;padding:11px;min-width:0;width:100%;color:inherit;font:14px monospace}.ttt-room-join button,.ttt-room-details button{border:1px solid var(--ttt-border,#e2e8f0);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:12px;padding:10px 16px;cursor:pointer;white-space:nowrap}.ttt-online-panel button:disabled{opacity:.45;cursor:default}.ttt-room-details{margin-top:20px;padding:18px;border-radius:14px;background:#10b9810a;border:1px solid #10b98140}.ttt-room-details>span{font-size:11px;color:var(--ttt-muted,#64748b)}.ttt-room-details>strong{display:block;font:700 32px monospace;letter-spacing:.18em;color:#059669;margin:8px 0 18px}.ttt-room-details input{font-size:11px;margin-bottom:10px}.ttt-room-details button{width:100%}.ttt-room-details p{font-size:11px;margin:8px 0 0;min-height:0}#ttt-room-status{font-size:12px;line-height:1.8;color:var(--ttt-muted,#64748b);margin:18px 0 0}.dark .ttt-room-details>strong{color:#6ee7b7}.ttt-room-join input:focus-visible,.ttt-room-details input:focus-visible{outline:3px solid #34d399;outline-offset:3px}@media(min-width:521px) and (max-width:760px){.ttt-online-panel{grid-column:1/-1}}