/* Perfil e Missões redesenhados (online.js: openProfile / openMissions). Carregado por último. */
dialog.onlineDialog.pf { width: min(780px, 94vw); max-width: none; padding: 0 !important; border: 1px solid #e8c98b66; border-radius: 0; background: radial-gradient(120% 80% at 0% 0%, #2a1c3d 0%, #130e1d 55%, #0b0810 100%); color: #f1e6cc; box-shadow: 0 30px 80px #000c, inset 0 0 0 1px #ffffff0a; overflow: auto; }
dialog.onlineDialog.pf::backdrop { background: #05030acc; }
dialog.pf > .close { position: absolute; top: 10px; right: 12px; z-index: 5; }
dialog#onlineProfile > div:last-child { column-count: auto !important; }
dialog.pf > small, dialog.pf > h2 { margin-inline: 26px; }
dialog#onlineMissions > small { display: block; margin-top: 24px; letter-spacing: .3em; color: #e8c98b; }
dialog#onlineMissions > h2 { margin-top: 4px; }
dialog#onlineMissions > div { padding: 6px 26px 24px; }
#oProf .onlineAlert { margin: 12px 20px 0; }

.pfHero { position: relative; display: flex; align-items: center; gap: 22px; padding: 26px 64px 22px 26px; background: linear-gradient(100deg, #e8c98b22, transparent 70%), repeating-linear-gradient(135deg, #ffffff06 0 2px, transparent 2px 10px); border-bottom: 1px solid #e8c98b44; }
.pfAvatar { --p: 0; position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffd36b calc(var(--p) * 1%), #ffffff1a 0); }
.pfAvatar::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b3a8a, #1d1230 75%); box-shadow: inset 0 0 18px #000a; }
.pfAvatar span { position: relative; font: 700 44px/1 'Grenze Gotisch', Georgia, serif; color: #fff3d6; text-shadow: 0 2px 10px #000; }
.pfAvatar em { position: absolute; right: -4px; bottom: -4px; min-width: 34px; padding: 4px 8px; border-radius: 999px; text-align: center; font: 800 16px/1 system-ui, sans-serif; font-style: normal; color: #2a1606; background: linear-gradient(180deg, #ffe7a8, #c98f2a); border: 2px solid #1a1026; box-shadow: 0 3px 8px #000a; }
.pfWho { min-width: 0; flex: 1; }
.pfWho small { letter-spacing: .34em; font-size: 12px; color: #e8c98b; }
.pfWho h2 { margin: 2px 0 10px; font: 700 clamp(30px, 5vw, 44px)/1 'Grenze Gotisch', Georgia, serif; color: #fff3d6; text-shadow: 0 2px 12px #000; overflow-wrap: anywhere; }
.pfXp span { display: block; margin-top: 6px; font-size: 14px; color: #cdbfe0; }
.pfBar { height: 9px; border-radius: 0; background: #0b0810; border: 1px solid #e8c98b44; overflow: hidden; }
.pfBar i { display: block; height: 100%; background: linear-gradient(90deg, #bd8d4c, #ffe9b0); box-shadow: 0 0 10px #ffd36b88; transition: width .6s; }
.pfMissions { position: absolute; right: 18px; bottom: 16px; padding: 8px 14px; border: 1px solid #e8c98b88; border-radius: 0; background: #1a1026cc; color: #ffe7a8; font: 700 14px/1 system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; }
.pfMissions:hover { background: #2a1c3d; }
.pfMissions b, .pfTabs b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; font-size: 12px; color: #2a1606; background: #ffd36b; box-shadow: 0 0 10px #ffd36b99; }

.pfStats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #e8c98b33; }
.pfStats > div { display: grid; gap: 3px; padding: 14px 8px; text-align: center; border-right: 1px solid #e8c98b22; }
.pfStats > div:last-child { border-right: 0; }
.pfStats b { font: 800 clamp(18px, 2.6vw, 26px)/1.1 system-ui, sans-serif; color: #ffe7a8; }
.pfStats b small { font-size: .55em; color: #cdbfe0; }
.pfStats span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #a998b4; }

.pfTabs { display: flex; gap: 4px; padding: 14px 20px 0; border-bottom: 1px solid #e8c98b33; }
.pfTabs button { padding: 10px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 0; background: transparent; color: #b3a3bd; font: 700 15px/1 system-ui, sans-serif; cursor: pointer; }
.pfTabs button:hover { color: #fff3d6; }
.pfTabs button.on { color: #ffe7a8; background: #e8c98b14; border-color: #e8c98b55; box-shadow: inset 0 3px 0 #ffd36b; }
.pfPane { padding: 16px 20px 6px; min-height: 180px; max-height: 40vh; overflow: auto; }
.pfRow { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid #e8c98b2a; border-left: 3px solid #e8c98b66; background: linear-gradient(90deg, #e8c98b12, #ffffff04); }
.pfRow.done, .pfRow.gift { border-left-color: #ffd36b; background: linear-gradient(90deg, #ffd36b24, #ffffff05); }
.pfIco { flex: none; display: grid; place-items: center; width: 40px; height: 40px; font-size: 20px; color: #ffe7a8; background: #0b0810; border: 1px solid #e8c98b55; }
.pfTxt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pfTxt b { font: 700 16px/1.25 system-ui, sans-serif; color: #fff3d6; }
.pfTxt small { font-size: 13px; color: #cdbfe0; }
.pfRow em { flex: none; font-size: 13px; color: #8fd9a8; font-style: normal; }
.pfRow button { flex: none; }
.pfSub { margin: 16px 0 8px; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #e8c98b; }
.pfNext { display: grid; gap: 6px; }
.pfNext > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: #ffffff08; border: 1px solid #e8c98b22; }
.pfNext b { color: #ffe2a0; font-family: 'Grenze Gotisch', Georgia, serif; font-size: 18px; }
.pfNext span { text-align: right; color: #f1e6cc; }
.pfMatch { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; padding: 10px 14px; border-left: 3px solid #888; background: #ffffff08; }
.pfMatch.v { border-left-color: #6fd68f; } .pfMatch.v b { color: #8fe8aa; }
.pfMatch.d { border-left-color: #e2607d; } .pfMatch.d b { color: #ff8fa6; }
.pfMatch.e b { color: #cdbfe0; }
.pfMatch small { color: #a998b4; }
.onlineDialog.pf .onlineActions { margin: 0; padding: 14px 20px 18px; border-top: 1px solid #e8c98b33; }
@media (max-width: 560px) { .pfHero { flex-wrap: wrap; padding-right: 20px; } .pfMissions { position: static; } .pfStats { grid-template-columns: repeat(3, 1fr); } .pfMatch { grid-template-columns: 1fr; } }
dialog.pf { max-height: 94vh; }
dialog.pf #oProf { display: block; }
#oProf > * { flex: none; }
#oProf .onlineAlert { margin: 0; border-radius: 0; padding: 10px 56px 10px 20px; }
.pfHero { min-height: 140px; }
.pfPane { max-height: none; }
@media (max-height: 760px) { .pfHero { padding-block: 16px; } .pfAvatar { width: 76px; height: 76px; } .pfAvatar span { font-size: 34px; } .pfPane { min-height: 120px; } }

/* Cabeçalho: conta e Admin com a mesma altura das pílulas de Ouro e Diamantes. */
header .actions > :is(.accountPill, .adminPill) { min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }

/* Início: cabeçalho (logo e botões) alinhado às bordas dos cartões. */
body[data-screen=menu] header { padding-left: max(20px, 2.6vw); padding-right: max(20px, 2.6vw); }

/* Aviso de e-mail entre as estatísticas e as abas (não cobre o botão Fechar); fonte das abas legível. */
#oProf .onlineAlert { margin: 0; padding: 10px 20px; border-bottom: 1px solid #e8c98b33; }
.pfTabs button { font: 700 15px/1 system-ui, 'Segoe UI', sans-serif !important; letter-spacing: .02em !important; text-transform: none !important; }

/* cartão do jogador em combate */
.pcClick{cursor:pointer}.pcClick:hover{filter:brightness(1.15)}.pcClick:focus-visible{outline:2px solid var(--gold,#e8c98b);outline-offset:3px;border-radius:8px}
dialog#playerCard{width:min(640px,94vw)}
.pcHero{--c:#e8c98b;display:flex;align-items:center;gap:clamp(14px,3vw,28px);padding:22px 64px 18px 26px;border-bottom:1px solid #e8c98b44;background:radial-gradient(ellipse 60% 120% at 0 50%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%)}
.pcEmb .eloEmb.lg{--s:clamp(84px,14vh,120px)}
.pcWho{display:grid;gap:3px;min-width:0}.pcWho small{letter-spacing:.3em;font-size:12px;color:color-mix(in srgb,var(--c) 70%,#fff)}
.pcWho h2{margin:0;font:700 clamp(26px,4vh,38px)/1.05 Georgia,serif;color:#fff;overflow-wrap:anywhere}
.pcLvl{color:#d6cbe0;font-size:15px}.pcTier{font-weight:600;color:color-mix(in srgb,var(--c) 65%,#fff);font-size:16px}
.pcStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 20px}
.pcStats>div{padding:10px 12px;border-radius:12px;border:1px solid #e8c98b24;background:#ffffff08}.pcStats b{display:block;font:700 18px Georgia,serif;color:#fff}.pcStats span{display:block;margin-top:2px;font-size:12.5px;color:#a99db7}
dialog#playerCard>.onlineNote{margin:0 20px 14px}
@media(max-width:560px){.pcStats{grid-template-columns:1fr 1fr}}
/* perfil sem rolagem em telas baixas: o cabeçalho não reserva altura além do conteúdo */
@media(max-height:800px){.pfHero{min-height:0;padding-block:14px}.pfPane{min-height:96px}}

/* ---------- combate: modais sobem para o topo (sobra espaço ali) e encolhem em telas baixas, para nada rolar (Leo, 04/10/2026) ---------- */
body[data-screen=game] #pickDialog[open]{margin:auto;max-height:calc(100dvh - 16px)}
body[data-screen=game] dialog[open]:not(.cardInfo):not(#pickDialog){margin:auto;bottom:8vh;max-height:calc(92dvh - 16px)} /* a área de centralização perde 8vh embaixo: o modal sobe ~4vh */
dialog.cardInfo{place-items:center;padding-block:8px}
.ciClose{top:clamp(8px,1.6vh,20px)}
@media(max-height:579px){.ciLayout{zoom:.88}}
@media(max-height:519px){.ciLayout{zoom:.78}}
@media(max-height:459px){.ciLayout{zoom:.66}}
@media(max-height:499px){#pickDialog{zoom:.88}}
@media(max-height:439px){#pickDialog{zoom:.74}}
@media(max-height:560px){body[data-screen=game] #result{zoom:.85}}

/* ---------- confronto: painéis de dano menores, de largura fixa e iguais nos dois lados (Leo, 04/10/2026) ---------- */
@media(min-width:761px){
 .duelOverlay .duelInfo{zoom:1;width:248px;min-width:248px;max-width:248px;padding:10px 14px;gap:4px;margin-inline:auto}
 .duelOverlay .dRow{flex-wrap:nowrap;gap:8px}
 .duelOverlay .dRow small{font-size:12px;letter-spacing:.6px;white-space:nowrap}
 .duelOverlay .dRow b{font-size:22px;white-space:nowrap}
 .duelOverlay .duelInfo em.eff{font-size:13px;padding:4px 9px}
 .duelOverlay .dLife{font-size:18px}
}

/* ---------- sem barra de rolagem visível no combate (definitivo): a página, o campo e os modais nunca mostram barra ---------- */
html:has(body[data-screen=game]){overflow:hidden!important;overscroll-behavior:none}
body[data-screen=game],body[data-screen=game] #gameView{overflow:hidden!important;overscroll-behavior:none}
body[data-screen=game] dialog,dialog.cardInfo,dialog#pickDialog,dialog#result,dialog#onlineProfile,dialog#playerCard,dialog#historyDialog,dialog#surrenderConfirm{scrollbar-width:none;-ms-overflow-style:none}
body[data-screen=game] dialog::-webkit-scrollbar,dialog.cardInfo::-webkit-scrollbar,dialog#pickDialog::-webkit-scrollbar,dialog#result::-webkit-scrollbar,dialog#onlineProfile::-webkit-scrollbar,dialog#playerCard::-webkit-scrollbar,dialog#historyDialog::-webkit-scrollbar{display:none;width:0;height:0}

/* Selo de nível dos HUDs do combate maior (Leo, 04/10/2026). Só o selo muda: o HUD, o nick e o resto continuam do mesmo tamanho. */
#gameView .hud .lvlBadge{font-size:1.4em!important;padding:3px 13px 4px!important;line-height:1}

/* cartão do jogador em combate: mais compacto e com o nível em destaque (Leo, 04/10/2026) */
dialog#playerCard{width:min(500px,92vw)}
dialog#playerCard .pcHero{gap:16px;padding:16px 56px 12px 20px}
dialog#playerCard .pcEmb .eloEmb.lg{--s:clamp(70px,11vh,96px)}
dialog#playerCard .pcWho h2{font-size:clamp(24px,3.4vh,32px)}
dialog#playerCard .pcLvl{display:inline-block;width:max-content;margin:2px 0 3px;padding:2px 12px 3px;border-radius:999px;border:1px solid #ffe7a8;background:linear-gradient(180deg,#ffd77a,#d49a2e 58%,#8a5a12);color:#2a1606;font:800 20px/1.1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.04em;text-shadow:0 1px 0 #ffe7a8aa;box-shadow:0 0 12px #e8c98b55,inset 0 1px 0 #fff8}
dialog#playerCard .pcTier{font:700 18px 'Alegreya Sans',system-ui,sans-serif}
dialog#playerCard .pcStats{gap:8px;padding:12px 16px}
dialog#playerCard .pcStats>div{padding:8px 10px}
dialog#playerCard .pcStats b{font-size:17px}
dialog#playerCard .pcStats span{font-size:12px}
dialog#playerCard>.onlineNote{margin:0 16px 10px}
dialog#playerCard .onlineActions{padding:8px 16px 12px}

/* modal de seleção da carta: sem a bola do clã ao lado do nome; nome da carta e do clã centralizados na parte direita (Leo, 04/10/2026) */
#pickDialog #pickClanIcon{display:none!important}
#pickDialog .pickHead{position:relative;justify-content:center}
#pickDialog .pickTitles{flex:1;min-width:0;text-align:center;padding-inline:36px}
#pickDialog .pickInfoBtn{position:absolute;right:0;top:50%;translate:0 -50%}

/* Novo ícone da Fúria (arte do Leo, 04/10/2026): imagem no lugar da chama desenhada em SVG */
.furyToggle .furyIcon img{width:30px;height:30px;object-fit:contain;filter:grayscale(.6) brightness(.8);transition:filter .25s}
.furyToggle.on .furyIcon img{filter:drop-shadow(0 0 8px #ff6a2b)}
#pickDialog .furyToggle .furyIcon{width:34px!important;height:34px!important}
#pickDialog .furyToggle .furyIcon img{width:34px;height:34px}
.dFury .flame{width:20px;height:20px;object-fit:contain;display:inline-block;vertical-align:-4px}

/* Perfil: o painel das abas (Recompensas, Conquistas, Partidas) tem altura fixa; o conteúdo rola dentro dele e o modal não muda de tamanho ao trocar de aba. */
.pfPane { height: clamp(150px, 32vh, 330px) !important; min-height: 0 !important; max-height: none !important; overflow-y: auto; box-sizing: border-box; }
/* Próximas recompensas de nível: fonte maior (Leo, 04/10/2026). */
.pfSub { font-size: 15px; }
.pfNext > div { padding: 11px 14px; align-items: center; }
.pfNext b { font-size: 24px; }
.pfNext span { font-size: 19px; line-height: 1.25; }
.pfNext span :is(.coin, .gem) { width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* Fúria na cena do duelo: a linha "FÚRIA · 3 MANA  +2 DANO" cabe no painel (o "+2 DANO" saía para fora dele). */
.duelOverlay .dRow.dFury{gap:6px}
.duelOverlay .dRow.dFury small{font-size:11px;letter-spacing:.3px}
.duelOverlay .dRow.dFury b{font-size:15px;letter-spacing:.2px}

/* Número de dano da carta na cena do duelo com Fúria: igual ao do modal da mana (laranja, com brilho). */
.duelFighter .card.duel .cardStats .dmg.furyDmg{background:linear-gradient(180deg,#ff9a3d,#d4402a)!important;border-color:#ffd36b!important;color:#fff!important;box-shadow:0 0 0 1px #ffd36b,0 0 18px #ff6a2bcc,0 0 36px #ff6a2b77;animation:furyDmgGlow 1.1s ease-in-out infinite alternate}

/* Mana da batalha como frascos que entram um a um (ui.js, antes do cálculo ataque × mana). */
.duelOverlay .dFlasks{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;gap:2px;min-height:38px;margin:2px 0 4px}
.duelOverlay .dFlask{width:15px;height:36px;flex:none;display:block;filter:drop-shadow(0 0 5px #4cc2ff88)}
.duelOverlay .dFlask svg{width:100%;height:100%;display:block;overflow:visible}
.duelOverlay .dRow b .manaFlask{width:.6em;height:.95em;margin:0 0 0 3px;vertical-align:-.1em;filter:drop-shadow(0 0 4px #4cc2ff88)}

/* Painéis de números do confronto (MANA GASTA, ATAQUE × MANA, DANO, efeitos): o texto nunca passa dos limites do painel (Leo, 05/10/2026).
   Com ataque e mana de dois dígitos, a linha "ATAQUE × MANA" e a conta ficavam em linha única e vazavam; agora quebram e encolhem. */
.duelOverlay .duelInfo{overflow:hidden;box-sizing:border-box}
.duelOverlay .duelInfo .dRow{flex-wrap:wrap;min-width:0;gap:2px 8px;justify-content:space-between;align-items:baseline}
.duelOverlay .duelInfo .dRow small{white-space:normal;min-width:0;overflow-wrap:anywhere}
.duelOverlay .duelInfo .dRow b{white-space:normal;min-width:0;max-width:100%;margin-left:auto;text-align:right;overflow-wrap:anywhere;font-size:clamp(15px,1.5vw,22px)}
.duelOverlay .duelInfo .dRow.dFury b{font-size:clamp(13px,1.2vw,15px)}
.duelOverlay .duelInfo em.eff{overflow-wrap:anywhere;word-break:break-word;hyphens:auto;min-width:0}
.duelOverlay .duelInfo .dLife{flex-wrap:wrap;min-width:0}

/* Partidas do perfil: selo K.O. (Leo, 05/10/2026) */
.pfMatch .pfKo{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:4px;background:#e0382f;color:#fff;font:800 11px/1.4 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.12em;vertical-align:middle}

/* Painéis do combate 1 contra 1 sempre do mesmo tamanho e com as linhas alinhadas (Leo, 06/10/2026): linhas reservadas (.ph) ficam invisíveis, separadores finos e números tabulares. */
.duelOverlay .duelInfo .ph{visibility:hidden!important}
.duelOverlay .duelInfo{display:flex;flex-direction:column;box-sizing:border-box;background:linear-gradient(180deg,#241a36ee,#150f22ee);border-color:#a98bb866;box-shadow:0 10px 28px #000a,inset 0 1px 0 #ffffff14}
.duelOverlay .duelInfo .dRow{padding-block:3px;font-variant-numeric:tabular-nums}
.duelOverlay .duelInfo .dRow+.dRow{border-top:1px solid #ffffff12}
.duelOverlay .duelInfo .dFlasks{flex:none}
.duelOverlay .duelInfo .dLife{margin-top:auto;padding-top:6px;border-top:1px solid #ffffff12;justify-content:center}

/* Bolha de recompensas novas na aba Recompensas do perfil (Leo, 06/10/2026): rosa, pulsa e solta ondas para chamar o clique */
.pfTabs button[data-tab="rec"]:has(b){position:relative;padding-right:30px}
.pfTabs button[data-tab="rec"] b{position:absolute;top:2px;right:2px;margin:0;min-width:22px;height:22px;padding:0 6px;font:800 13px/1 system-ui,sans-serif;color:#fff;background:linear-gradient(180deg,#ff7ac3,#d62f86);border:2px solid #1b1224;box-shadow:0 0 12px #ff7ac3cc;animation:pfBubble 1.6s ease-in-out infinite}
.pfTabs button[data-tab="rec"] b::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid #ff7ac3;opacity:0;animation:pfRing 1.6s ease-out infinite;pointer-events:none}
.pfTabs button[data-tab="rec"]:has(b){animation:pfWiggle 3.2s ease-in-out infinite}
@keyframes pfBubble{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes pfRing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.9)}}
@keyframes pfWiggle{0%,86%,100%{transform:none}89%{transform:rotate(-3deg)}92%{transform:rotate(3deg)}95%{transform:rotate(-2deg)}98%{transform:rotate(1deg)}}
@media (prefers-reduced-motion:reduce){.pfTabs button[data-tab="rec"] b,.pfTabs button[data-tab="rec"] b::after,.pfTabs button[data-tab="rec"]:has(b){animation:none}}
.reduced .pfTabs button[data-tab="rec"] b,.reduced .pfTabs button[data-tab="rec"] b::after,.reduced .pfTabs button[data-tab="rec"]:has(b){animation:none}