/* Online: login, lobby, ranking, perfil e trocas (online.js) */
.onlineDialog{max-width:620px}
.onlineDialog h2{clear:none}
.onlineForm{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.onlineForm label{display:flex;flex-direction:column;gap:7px;font-size:15px;color:#decede}
.onlineForm input,.onlineDialog input,.onlineDialog select,.onlineDialog textarea{font:inherit;font-size:16px;color:#f1ecdf;background:#15111c;border:1px solid #62526b;border-radius:8px;padding:11px 13px;width:100%}
.onlineForm input:focus,.onlineDialog input:focus{border-color:var(--gold);outline:none}
.onlineForm .hint{font-size:13px;letter-spacing:.3px;color:var(--muted)}
.onlineError{color:var(--red)!important;font-size:15px!important;margin:0!important;min-height:1em}
.onlineError:empty{display:none}
.onlineNote{color:var(--muted)!important;font-size:15px!important;line-height:1.6!important}
.onlineDialog .link{background:none;border:0;padding:4px;color:var(--cyan);text-decoration:underline;font-size:15px;align-self:center}
.onlineDialog .link:hover:not(:disabled){background:none;color:#a7e9f8}
.onlineGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.onlineGrid>div{border:1px solid #62526b88;border-radius:12px;padding:16px;background:#14111b99;display:flex;flex-direction:column;gap:10px}
.onlineGrid h3{font-size:20px}
.onlineGrid p{font-size:15px;margin:0}
.onlineWait{text-align:center;padding:14px 0}
.onlineWait:before{content:'';display:block;width:34px;height:34px;margin:0 auto 12px;border:3px solid #62526b;border-top-color:var(--gold);border-radius:50%;animation:onlineSpin 1s linear infinite}
.onlineCode{font:700 34px/1 Georgia,serif;letter-spacing:8px;color:var(--gold);text-align:center;padding:14px;border:1px dashed #a88a5d;border-radius:10px;background:#1d1720;user-select:all}
.onlineJoin{display:flex;gap:8px}
.onlineJoin input{text-transform:uppercase;letter-spacing:3px}
.onlineTabs{display:flex;gap:6px;margin:4px 0 14px}
.onlineTabs button{font-size:15px;padding:8px 14px}
.onlineTabs button.on{border-color:var(--gold);background:#3b3043;color:var(--gold)}
.onlineTiers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.onlineTiers>*{font-size:13px;border:1px solid #62526b;border-radius:20px;padding:5px 11px;color:#d8cbe0;background:#1a1522}
.onlineTiers b{color:var(--gold)}
.onlineTableWrap{overflow-x:auto;max-height:52vh;border:1px solid #62526b66;border-radius:10px}
.onlineTable{width:100%;border-collapse:collapse;font-size:15px}
.onlineTable th{position:sticky;top:0;background:#241c2c;color:var(--gold);font-size:12px;letter-spacing:1px;text-align:left;padding:9px 10px}
.onlineTable td{padding:9px 10px;border-top:1px solid #62526b44;color:#ddd0e3}
.onlineTable tr.me td{background:#3a2d1f88;color:#f4dfb2;font-weight:700}
.onlineLevel{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.onlineLevel b{font:700 30px Georgia,serif;color:var(--gold);min-width:64px}
.onlineBar{flex:1;height:8px;border-radius:6px;background:#2d2433;overflow:hidden}
.onlineBar i{display:block;height:100%;background:linear-gradient(90deg,#bd8d4c,#ead5a0);transition:width .5s}
.onlineWallet{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0;font-size:16px;color:#e6dbe9}
.onlineWallet b{color:var(--gold)}
.onlineRow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #62526b55;border-radius:10px;margin:8px 0;background:#15111c88;font-size:15px}
.onlineRow>div{flex:1;min-width:0}
.onlineRow small{display:block;letter-spacing:.4px;font-size:13px;color:var(--muted)}
.onlineRow button{font-size:14px;padding:7px 12px;flex-shrink:0}
.onlineRow.trade{flex-wrap:wrap}
.onlineActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}
.onlineTwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.onlineDialog h3{font-size:20px;margin:20px 0 6px;color:#eadff0}
.onlineRewards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px;font-size:16px;color:var(--gold)}
.onlineRewards:empty{display:none}
.onlineClock{position:fixed;top:12px;left:calc(50% + 84px);transform:none;white-space:nowrap;z-index:40;font:700 15px Segoe UI,Arial,sans-serif;letter-spacing:1px;color:#e8dcef;background:#15111ce6;border:1px solid #62526b;border-radius:20px;padding:6px 14px;pointer-events:none}
.onlineClock:empty{display:none}
.onlineClock.low{color:#ffd2d8;border-color:var(--red);animation:onlinePulse 1s ease-in-out infinite}
.accountPill{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:8px 12px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.accountPill .lv{font-size:12px;font-weight:700;color:#261b1d;background:var(--gold);border-radius:10px;padding:2px 7px}
@keyframes onlineSpin{to{transform:rotate(360deg)}}
@keyframes onlinePulse{50%{box-shadow:0 0 16px #ef8e9c77}}
@media(max-width:760px){.onlineGrid,.onlineTwo{grid-template-columns:1fr}.onlineCode{font-size:28px;letter-spacing:6px}.accountPill{font-size:13px;padding:6px 9px;max-width:120px}.onlineClock{top:6px;font-size:13px}}
.onlineAlert{border:1px solid #c9a35c88;border-left:3px solid var(--gold);border-radius:10px;padding:10px 12px!important;background:#2a2118aa}
.onlineAlert .link{display:inline;padding:0 2px;font-size:inherit}
.onlineDialog form+h3,.onlineDialog button+form{margin-top:16px}

/* Botão do painel do admin no topo (só aparece para admin). */
.adminPill{border-color:#ff9ad988!important;background:linear-gradient(180deg,#3a1d3a,#22122a)!important;color:#ffd0ef;font-weight:700}

/* Conta e segurança: modal estreito (Leo, 04/10/2026). */
dialog#onlineAccount.onlineDialog{width:min(420px,94vw)!important;max-width:min(420px,94vw)!important}

/* Modal do lobby/fila: mais estreito (Leo, 04/10/2026). */
dialog#onlineLobby.onlineDialog,#onlineLobby{width:min(940px,calc(100vw - 32px))!important;max-width:min(940px,calc(100vw - 32px))!important}
#onlineLobby .queueGrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important} /* os 4 modos (IA, ranqueada, casual, convite) ficam sempre numa linha só */

/* Resumo das regras de deck de cada modo, no lobby (regras-modo.js). */
.modeRules{display:block;margin:4px 0 8px;font-size:12px;line-height:1.45;color:#b8a8c4}
/* Relógio da jogada fica ao lado do selo SUA VEZ / VEZ DO OPONENTE, sem cobri-lo (Leo, 06/10/2026) */
@media(max-width:760px){.onlineClock{top:44px;left:50%;transform:translateX(-50%)}}