/* fun-ttt-online-v1 */
.main-stage.has-online-panel{align-content:center;gap:10px}
.online-panel{width:min(100%,calc(var(--cell)*3 + 20px));padding:10px 12px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(7,8,15,.72);box-shadow:0 12px 30px rgba(0,0,0,.2);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:auto}
.paper-mode .online-panel{border-color:rgba(82,53,22,.22);background:rgba(251,242,214,.86);box-shadow:0 10px 24px rgba(45,31,12,.16);color:var(--ink)}
.online-start,.online-room{display:grid;gap:8px}
.online-actions{display:grid;grid-template-columns:1fr auto auto;gap:7px}
.online-actions input{min-width:0;width:100%;height:40px;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.08);color:inherit;font:900 16px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.12em;text-align:center}
.paper-mode .online-actions input{border-color:rgba(82,53,22,.25);background:rgba(255,255,255,.48)}
.online-button{min-height:40px;padding:7px 11px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.09);color:inherit;font-weight:900;cursor:pointer}
.online-button:hover,.online-button:focus-visible{border-color:rgba(34,211,238,.75);outline:none}
.online-button.primary{border-color:rgba(242,169,0,.62);background:rgba(242,169,0,.2)}
.paper-mode .online-button{border-color:rgba(82,53,22,.25);background:rgba(255,255,255,.42)}
.online-room-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.online-room-code{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.online-room-code b{font:1000 18px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em;color:var(--accent)}
.paper-mode .online-room-code b{color:var(--blue)}
.online-seat{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:30px;padding:0 9px;border-radius:10px;background:rgba(255,255,255,.1);font-weight:1000}
.online-seat.x{color:var(--x)}.online-seat.o{color:var(--o)}
.paper-mode .online-seat.x{color:#b83c3c}.paper-mode .online-seat.o{color:#215f9f}
.online-message{min-height:19px;color:var(--muted);font-size:13px;text-align:center}
.paper-mode .online-message{color:rgba(32,32,42,.72)}
.online-message.error{color:#ff7890}.paper-mode .online-message.error{color:#a72d36}
.online-mode .cell:disabled{cursor:not-allowed;opacity:.72}
.online-mode .cell:disabled.x,.online-mode .cell:disabled.o{opacity:1}
.online-mode .top-mode-switch{right:-2px}
@media(max-width:540px){.online-actions{grid-template-columns:1fr auto}.online-actions .create-room{grid-column:1/-1}.online-room-head{align-items:flex-start}.online-room-code{flex-wrap:wrap}.online-button{padding-inline:9px}}