.ttt-status{font-size:1.25rem;font-weight:600}.ttt-online-panel{border:1px solid var(--surface-border);background:#0f172a6b;border-radius:8px;gap:12px;width:min(100%,560px);padding:16px;display:grid}.ttt-online-actions{grid-template-columns:auto 1fr;align-items:center;gap:12px;display:grid}.ttt-join-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.ttt-friend-actions{grid-template-columns:1fr;gap:8px;display:grid}.ttt-invite-form,.ttt-add-friend-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.ttt-room-input{border:1px solid var(--surface-border);min-width:0;height:46px;color:var(--text-main);background:var(--surface-soft);text-transform:uppercase;border-radius:8px;padding:0 12px}.ttt-room-input:focus{border-color:var(--accent-color);outline:0}.ttt-room-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;display:grid}.ttt-room-summary div{background:#ffffff0f;border-radius:6px;gap:2px;padding:10px 12px;display:grid}.ttt-room-summary dt{color:var(--text-muted);text-transform:uppercase;font-size:.8rem;font-weight:700}.ttt-room-summary dd{letter-spacing:.08em;margin:0;font-size:1.2rem;font-weight:800}.ttt-online-status{color:#cbd5e1;min-height:1.5em;margin:0}.ttt-board{grid-template-columns:repeat(var(--ttt-size,3), var(--ttt-cell-size,100px));grid-template-rows:repeat(var(--ttt-size,3), var(--ttt-cell-size,100px));background:var(--surface-border);border-radius:8px;gap:8px;width:fit-content;margin:0 auto;padding:8px;display:grid}.ttt-cell{width:100%;height:100%;color:inherit;background:var(--surface-soft);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;border:0;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:3.5rem;font-weight:800;transition:background .15s,transform .1s;display:flex;box-shadow:inset 2px 2px 4px #ffffff1a,inset -2px -2px 4px #0000004d}.ttt-board--large{--ttt-cell-size:64px;gap:6px}.ttt-board--large .ttt-cell{font-size:2.2rem}.ttt-cell:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.ttt-cell:disabled{cursor:default}.ttt-cell:hover:not(.revealed){background:var(--surface-hover)}.ttt-cell:active:not(.revealed){transform:scale(.95)}.ttt-cell.revealed{cursor:default;background:#0f172a8c;box-shadow:inset 1px 1px 3px #00000080}.ttt-cell.x{color:var(--accent-color);text-shadow:0 0 10px #3b82f666}.ttt-cell.o{color:#ef4444;text-shadow:0 0 10px #ef444466}@media (width<=640px){.ttt-status{font-size:1.1rem}.ttt-online-actions,.ttt-join-form,.ttt-friend-actions,.ttt-invite-form,.ttt-add-friend-form{grid-template-columns:1fr}.ttt-board{--ttt-cell-size:80px;gap:5px}.ttt-board--large{--ttt-cell-size:min(11vw, 46px);gap:4px}.ttt-cell{font-size:2.5rem}.ttt-board--large .ttt-cell{font-size:1.6rem}}