.hidden { display: none !important; }
.online-app header { flex-wrap:wrap; gap:12px; }
.online-app .header-actions { flex-wrap:wrap; justify-content:flex-end; }
.link-button { display: inline-block; text-decoration: none; font-size: 14px; }
.user-presence { display:flex;min-width:92px;flex-direction:column;align-items:flex-start;justify-content:center;padding:5px 11px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.07); }
.user-name { max-width:145px;overflow:hidden;color:var(--cream);font-size:13px;font-weight:800;line-height:1.2;text-overflow:ellipsis;white-space:nowrap; }
.connection { display:flex;align-items:center;gap:5px;padding:0;border-radius:0;font-size:10px;line-height:1.35;background:transparent; }
.connection::before { content:'';width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor; }
.connection.online { color:#9ef0c8; }.connection.offline { color:#f2aaa0; }
.lobby-panel { width: min(430px,100%); margin: 70px auto; padding: 34px; border: 1px solid rgba(231,186,98,.35); border-radius: 20px; text-align: center; background: rgba(5,35,29,.72); box-shadow: var(--shadow); }
.lobby-panel h2 { margin: 14px 0 24px; color: var(--gold); }
.lobby-panel label { display: block; text-align: left; color: var(--muted); font-size: 13px; }
.lobby-panel input { width: 100%; margin-top: 6px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; color: #fff; outline: none; background: rgba(255,255,255,.09); font: inherit; text-transform: none; }
.lobby-panel input:focus { border-color: var(--gold); }
.lobby-actions { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.lobby-actions::before,.lobby-actions::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.14); }
.lobby-actions span { color: var(--muted); font-size: 12px; }
.lobby-actions .primary { flex: 0 0 auto; }
.join-row { display:flex; gap:8px; } .join-row input { margin:0; text-transform:uppercase; letter-spacing:.2em; }
.room-browser { margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.13); text-align:left; }
.room-browser-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:var(--gold); font-size:14px; }
.room-browser-title button { padding:4px 9px; font-size:11px; }
.room-list { display:grid; gap:7px; max-height:230px; overflow-y:auto; }
.room-item { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.11); border-radius:9px; background:rgba(255,255,255,.055); }
.room-item strong { display:block; color:var(--cream); letter-spacing:.12em; }
.room-item small { display:block; margin-top:2px; color:var(--muted); }
.room-item .room-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.room-item button { min-width:58px; padding:7px 10px; }
.empty-rooms { margin:14px 0; text-align:center; color:var(--muted); font-size:13px; }
.roombar { display:flex; width:max-content; margin:14px auto 0; align-items:center; gap:12px; color:var(--muted); }
.roombar strong { color:var(--gold); font-size:24px; letter-spacing:.18em; }
.roombar button { padding:6px 10px; font-size:12px; }
.roombar .quit-room { color:#ffc0b8; border-color:rgba(255,130,115,.4); }
.partner-info { width:max-content;max-width:90%;margin:8px auto -6px;padding:6px 14px;border-radius:99px;color:var(--gold);background:rgba(0,0,0,.16);font-size:12px; }
.online-table { height:650px; }
.online-table.waiting-room { height:470px; }
.online-table.waiting-room .west,.online-table.waiting-room .east,.online-table.waiting-room .center { top:47%; }
.online-table.waiting-room .table-hand-dock { display:none; }
.online-table .player.ally-seat { border-color:rgba(231,186,98,.65); }
.online-table .player.opponent-seat { border-color:rgba(93,181,215,.6); }
.online-table.arranging .player { cursor:pointer; }
.online-table.arranging .player.seat-selected { box-shadow:0 0 0 3px var(--gold),0 10px 25px rgba(0,0,0,.3); }
.online-table.arranging .player.seat-drop { box-shadow:0 0 0 3px #65d9bd,0 10px 25px rgba(0,0,0,.3);transform-origin:center; }
.player.disconnected { opacity:.42; border-style:dashed; }
.player.empty-seat { opacity:.55; }
.team-dialog { width:min(520px,calc(100% - 30px));text-align:center; }
.team-dialog h2 { margin-top:0; }
.partner-choices { display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:18px 0; }
.partner-choice { padding:11px;border:1px solid #c8c0ae;color:#24443d;background:#f7f0e2; }
.partner-choice.current { color:#fff;background:#28705f;border-color:#28705f; }
.team-tools { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0; }
.team-tools .secondary { color:#28554a;background:#e9e2d3;border-color:#cec5b3; }
.confirm-teams { width:100%;margin-top:10px; }
.invite-dialog { width:min(440px,calc(100% - 24px));text-align:center; }
.invite-dialog h2 { margin:0 28px 8px;color:#28554a; }
.invite-dialog > p { color:#675f53;font-size:13px; }
.invite-dialog textarea { box-sizing:border-box;width:100%;padding:11px;border:1px solid #c9c0b1;border-radius:9px;color:#253d37;background:#fff;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;resize:none; }
.invite-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px; }
.invite-actions > * { display:flex;box-sizing:border-box;min-height:42px;align-items:center;justify-content:center;padding:9px 10px;border:1px solid #c9c0b1;border-radius:9px;text-decoration:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer; }
.invite-actions .whatsapp { color:#fff;background:#168c4a;border-color:#168c4a; }
.invite-actions .sms { color:#fff;background:#3478d4;border-color:#3478d4; }
.invite-actions .email { color:#fff;background:#6c6578;border-color:#6c6578; }
.invite-note { margin:12px 0 0; }
.chat-toggle { display:inline-flex;align-items:center;gap:5px; }
.chat-unread { display:inline-grid;min-width:19px;height:19px;padding:0 5px;place-items:center;border-radius:99px;color:#fff;background:#d9433c;font-size:10px;line-height:1; }
.chat-panel { position:fixed;z-index:70;top:88px;right:18px;display:flex;width:min(330px,calc(100vw - 32px));height:min(590px,calc(100vh - 110px));flex-direction:column;border:1px solid rgba(231,186,98,.48);border-radius:16px;color:var(--cream);background:rgba(6,39,33,.97);box-shadow:0 18px 50px rgba(0,0,0,.48);backdrop-filter:blur(12px);overflow:hidden; }
.chat-header { display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055); }
.chat-header strong { color:var(--gold);font-size:14px; }.chat-header>div{display:flex;gap:5px}.chat-icon-button{min-width:34px;padding:5px 8px;color:var(--cream);background:rgba(255,255,255,.08);font-size:16px}.chat-icon-button.muted{opacity:.55}
.chat-messages { display:flex;min-height:0;flex:1;flex-direction:column;gap:9px;padding:12px;overflow-y:auto;overscroll-behavior:contain; }
.chat-empty { margin:auto;color:var(--muted);font-size:12px;text-align:center; }
.chat-message { align-self:flex-start;max-width:88%;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:5px 12px 12px;background:rgba(255,255,255,.075);overflow-wrap:anywhere; }
.chat-message.own { align-self:flex-end;border-color:rgba(231,186,98,.3);border-radius:12px 5px 12px 12px;background:rgba(231,186,98,.14); }
.chat-message.reported { opacity:.62; }.chat-message.blocked{max-width:100%;font-size:11px}
.chat-message-meta { display:flex;align-items:center;gap:6px;margin-bottom:3px;color:var(--muted);font-size:10px; }.chat-message-meta strong{max-width:125px;overflow:hidden;color:var(--gold);text-overflow:ellipsis;white-space:nowrap}.chat-message-meta time{margin-left:auto;white-space:nowrap}
.chat-message-text { color:#fff;font-size:13px;line-height:1.42;white-space:pre-wrap; }
.chat-message-actions { display:flex;gap:4px;margin-top:5px;justify-content:flex-end; }.chat-message-actions button{padding:2px 5px;border-radius:5px;color:var(--muted);background:rgba(255,255,255,.065);font-size:9px}.chat-message-actions button:hover{color:#fff}.chat-message-actions .danger{color:#ffaaa0}
.chat-quick { display:flex;flex:0 0 auto;gap:5px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:thin; }.chat-quick button{flex:0 0 auto;padding:5px 8px;border:1px solid rgba(255,255,255,.13);border-radius:99px;color:var(--muted);background:rgba(255,255,255,.06);font-size:10px;white-space:nowrap}
.chat-compose { display:flex;flex:0 0 auto;gap:7px;padding:9px 10px 11px;border-top:1px solid rgba(255,255,255,.1); }.chat-compose input{min-width:0;flex:1;padding:9px 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:#fff;outline:none;background:rgba(255,255,255,.08);font:inherit;font-size:13px}.chat-compose input:focus{border-color:var(--gold)}.chat-compose button{min-width:62px;padding:8px 10px;font-size:12px}
.chat-muted-notice { padding:7px 10px;color:#ffd0c9;background:rgba(217,67,60,.16);font-size:11px;text-align:center; }
@media(max-width:700px){.lobby-panel{margin:35px auto;padding:25px 20px}.online-table{height:570px}.online-table.waiting-room{height:430px}.roombar{margin-top:8px;max-width:100%;gap:7px;flex-wrap:wrap;justify-content:center}.invite-dialog{padding:24px 17px}.invite-actions{grid-template-columns:1fr}.invite-actions>*{min-height:46px}.chat-panel{top:auto;right:0;bottom:0;left:0;width:100%;height:min(68vh,540px);border-right:0;border-bottom:0;border-left:0;border-radius:18px 18px 0 0}.chat-compose{padding-bottom:max(11px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.chat-panel{backdrop-filter:none}}