.online-lobby{justify-content:center;max-width:450px;min-height:450px}.online-lobby,.online-lobby-card{display:flex;align-items:center;width:100%}.online-lobby-card{flex-direction:column;gap:1rem;padding:2.5rem 2rem;text-align:center;background:#fff;border-radius:2rem;box-shadow:0 8px 32px 0 rgba(0,0,0,.1)}.online-lobby-title{margin:0;font-family:var(--font-fredoka),"Fredoka",sans-serif;font-size:1.75rem;font-weight:700;color:#222}.online-lobby-subtitle{margin:0;font-size:.95rem;color:#6b7280}.online-lobby-error{width:100%;padding:.625rem 1rem;font-size:.875rem;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:.75rem}.online-lobby-btn{transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;margin-top:.5rem;padding:.75rem 2.25rem;font-family:var(--font-fredoka),"Fredoka",sans-serif;font-size:1.1rem;font-weight:700;color:#fff;background:linear-gradient(90deg,#08f,#ff6b00);border:none;border-radius:9999px;cursor:pointer}.online-lobby-btn:not(:disabled):active{box-shadow:0 4px 18px rgba(0,136,255,.35);transform:scale(1.05)}@media(hover:hover){.online-lobby-btn:not(:disabled):hover{box-shadow:0 4px 18px rgba(0,136,255,.35);transform:scale(1.05)}}.online-lobby-btn:active:not(:disabled){transform:scale(.97)}.online-lobby-btn:disabled{opacity:60%;cursor:not-allowed}@keyframes online-spin{to{transform:rotate(1turn)}}.online-waiting-spinner{width:3rem;height:3rem;border:3px solid #e5e7eb;border-top-color:#08f;border-radius:50%;animation:online-spin .8s linear infinite}.online-invite-block{display:flex;gap:.75rem;align-items:center;justify-content:space-between;width:100%;padding:.625rem 1rem;background:#f0f6ff;border-radius:.75rem}.online-invite-code{font-family:monospace;font-size:1.1rem;font-weight:700;letter-spacing:.1em;color:#08f}.online-copy-btn{transition:all .18s cubic-bezier(.4,0,.2,1);padding:.35rem .75rem;font-size:.8rem;font-weight:600;white-space:nowrap;color:#fff;background:#08f;border:none;border-radius:.5rem;cursor:pointer}.online-copy-btn:active{opacity:85%}@media(hover:hover){.online-copy-btn:hover{opacity:85%}}.online-player-symbol{margin:0;font-size:.9rem;color:#6b7280}.online-player-symbol strong{color:#222}.online-opponent-turn{margin-top:.75rem;font-size:.9rem;text-align:center;color:#6b7280;animation:pulse-opacity 1.5s ease-in-out infinite}@keyframes pulse-opacity{0%,to{opacity:100%}50%{opacity:45%}}