/* Modal ao escolher a carta no combate, redesenhado (Leo, 02/10/2026).
   Esquerda: a carta como no campo de batalha (arte inteira, nome, emblema do clã, habilidades, ataque, evoluções e dano; o dano sobe em tempo real com a Fúria).
   Direita: clã, nome, resumo da lore, FORÇA (ataque × mana), frascos de mana e Fúria opcional. Carregado por último. */
#pickDialog { width: min(980px, calc(100vw - 32px)); max-width: none; padding: clamp(18px, 2.4vw, 30px); }
#pickDialog .pickLayout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }

/* ---- a carta, como no campo ---- */
#pickDialog .pickCard { display: block !important; position: relative; width: auto; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
#pickDialog .pickCard .card.duel {
  --cw: clamp(230px, 24vw, 320px); width: var(--cw) !important; height: calc(var(--cw) * 1.45) !important; display: block; position: relative; pointer-events: none; transform: none !important;
  border-radius: 10px; border: 1px solid #e8c98b77; box-shadow: 0 22px 44px -10px #000, 0 0 0 1px #000, 0 0 40px -10px color-mix(in srgb, var(--clan, #e8c98b) 60%, transparent);
}
#pickDialog .pickCard .card.duel .cardText { padding-top: 10cqw; padding-bottom: 22cqw; }
/* dano da carta: efeito da Fúria */
#pickDialog .pickCard .cardStats .dmg { transition: box-shadow .3s, filter .3s; }
#pickDialog .pickCard .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; }
@keyframes furyDmgGlow { from { filter: brightness(1); } to { filter: brightness(1.3) drop-shadow(0 0 10px #ff6a2b); } }
#pickDialog.furyOn .pickCard .card.duel { box-shadow: 0 22px 44px -10px #000, 0 0 0 2px #ff6a2b, 0 0 44px #ff6a2bbb; animation: none; }
#pickDialog .pickCard .furyEmber { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(#fff3c4, #ff9a3d 60%, transparent); pointer-events: none; z-index: 9; }

/* ---- lado direito ---- */
#pickDialog .pickBody { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#pickDialog .pickHead { display: flex; align-items: center; gap: 14px; }
#pickDialog .pickHead .clanIcon {
  display: block !important; position: static; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--clanImg, radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--clan, #e8c98b) 45%, #fff) 0 14%, var(--clan, #e8c98b) 48%, color-mix(in srgb, var(--clan, #e8c98b) 55%, #000) 100%)) center / contain no-repeat;
  border: var(--clanBorder, 2px solid color-mix(in srgb, var(--clan, #e8c98b) 60%, #fff)); box-shadow: var(--clanShadowOn, 0 0 0 2px #fff6, 0 0 16px var(--clan, #e8c98b), 0 2px 6px #000a); filter: none;
}
#pickDialog .pickHead small { display: block; font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: #e8c98b; }
#pickDialog .pickHead h2 { margin: 2px 0 0; font: 700 clamp(28px, 3vw, 38px)/1 var(--e-display, 'Grenze Gotisch', Georgia, serif); color: #f1e6cc; text-shadow: 0 2px 12px #000a; }
#pickDialog .pickLore { margin: 0; padding: 10px 14px; border-left: 3px solid #e8c98b88; background: linear-gradient(90deg, #e8c98b12, transparent); font: italic 400 16px/1.5 Georgia, serif; color: #f1e6cc; border-radius: 0 4px 4px 0; max-height: 9.5em; overflow: hidden; }
#pickDialog .pickLore.empty { opacity: .8; }

/* força = ataque × mana */
#pickDialog .forceBox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid #e8c98b44; border-radius: 4px; background: linear-gradient(180deg, #1a1322e6, #100b16e6); box-shadow: inset 0 0 0 3px #120d18, inset 0 0 0 4px #e8c98b18; }
#pickDialog .forceBox small { font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .22em; color: #e8c98b; }
#pickDialog .forceBox b { display: flex; align-items: baseline; gap: 10px; font: 700 26px/1 var(--e-display, Georgia, serif); color: #f1e6cc; }
#pickDialog .forceBox b i { font-style: normal; color: #aaa3b5; font-size: 20px; }
#pickDialog .forceBox #fAtk { color: #ffd36b; } #pickDialog .forceBox #fMana { color: #8fd3ff; }
#pickDialog .forceBox strong { font-size: 40px; color: #fff6e0; text-shadow: 0 0 18px #ffd36b88; min-width: 2ch; text-align: right; }
#pickDialog .forceBox b.empty strong { color: #8d7c99; text-shadow: none; }

#pickDialog .manaPanel { margin: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) { #pickDialog .pickLayout { grid-template-columns: 1fr; justify-items: center; } #pickDialog .pickCard .card.duel { --cw: min(60vw, 230px); } }

/* Modal de mana: carta maior (sobrava espaço embaixo dela) e modal um pouco mais largo (Leo, 05/10/2026). */
:root:root #pickDialog{width:min(790px,calc(100vw - 28px))!important}
:root:root #pickDialog .pickLayout{align-items:center!important;gap:24px!important}
:root:root #pickDialog .pickCard .card.duel{--cw:clamp(280px,min(30vw,50vh),350px)!important}
@media (max-width:760px){:root:root #pickDialog .pickCard .card.duel{--cw:min(60vw,250px)!important}}