/* Placa do nome por raridade (Leo, 02/10/2026). O fundo da faixa do nome muda de cor e de acabamento conforme a raridade:
   Comum aço fosco, Incomum esmeralda, Rara safira com fio de luz, Lendária ouro com moldura dupla, Collector holográfico.
   Vale no combate (mão e cena do duelo), na coleção, na abertura de booster, no Collector e em Novas Cartas. Só visual; carregado por último.
   Na arena nada anima sozinho (60 quadros por segundo com 10 cartas): o brilho do Collector só anda com o mouse em cima. */
.card.duel[class*="rar-"] .art h4.cardName, .poFront .card[class*="rar-"] .art h4.cardName, .cxCard .card[class*="rar-"] .art h4.cardName , .ciCard .card[class*="rar-"] .art h4.cardName {
  background: linear-gradient(180deg, color-mix(in srgb, var(--r2, #6f6878) 88%, #000) 0%, color-mix(in srgb, var(--r2, #6f6878) 62%, #000) 100%) !important;
  border-bottom: max(1.5px, .6cqw) solid var(--r, #b9b3c2); border-radius: 0 0 5cqw 5cqw;
  box-shadow: 0 .8cqw 2.4cqw #000c, inset 0 1px 0 #ffffff40, inset 0 -1px 0 #0006 !important;
  padding-bottom: 2cqw !important;
}
/* Comum: aço fosco, sóbrio */
.card.duel.rar-comum .art h4.cardName { background: linear-gradient(180deg, #5a5566 0%, #3a3644 100%) !important; border-bottom-color: #b9b3c2; color: #f1ecf7; }
/* Incomum: esmeralda com brilho suave */
.card.duel.rar-incomum .art h4.cardName { background: linear-gradient(180deg, #2f8a4f 0%, #14502e 100%) !important; border-bottom-color: #7fd68f; color: #eafff0; }
/* Rara: safira com um fio de luz no topo */
.card.duel.rar-rara .art h4.cardName { background: linear-gradient(180deg, #2f6fb8 0%, #173a73 100%) !important; border-bottom-color: #8fcbff; color: #eaf5ff; box-shadow: 0 .8cqw 2.4cqw #000c, inset 0 1px 0 #cfe8ff99, inset 0 0 0 1px #8fcbff33 !important; }
/* Lendária: ouro antigo com moldura dupla */
.card.duel.rar-lendaria .art h4.cardName { background: linear-gradient(180deg, #e0a73a 0%, #8a5412 100%) !important; border-bottom: max(2px, .8cqw) solid #ffe08f; color: #fff8e0; text-shadow: 0 1px 2px #3a1f00, 0 0 8px #3a1f00 !important; box-shadow: 0 .8cqw 2.4cqw #000c, 0 0 3cqw #ffd36b66, inset 0 1px 0 #fff3c7, inset 0 0 0 1px #ffe08f88, inset 0 0 0 .8cqw #8a541233 !important; }
/* Collector: holográfico (conic-gradient parado; gira só com o mouse em cima) */
.card.duel.rar-collector .art h4.cardName { background: linear-gradient(105deg, #ff7ad9 0%, #7a3cff 34%, #4fd6cf 66%, #ffd36b 100%) !important; background-size: 200% 100% !important; border-bottom: max(2px, .8cqw) solid #fff; color: #fff; text-shadow: 0 1px 3px #2a0a4a, 0 0 8px #2a0a4a !important; box-shadow: 0 .8cqw 2.4cqw #000c, 0 0 3cqw #ff7ad999, inset 0 1px 0 #ffffffcc !important; }
.card.duel.rar-collector:hover .art h4.cardName { animation: nomeHolo 2.4s linear infinite; }
@keyframes nomeHolo { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .card.duel.rar-collector:hover .art h4.cardName { animation: none; } }
.reduced .card.duel.rar-collector:hover .art h4.cardName { animation: none; }
/* Booster e Collector usam a mesma placa (classe rt-/rar- vem do tagRarity) */
.poFront .card.duel.rar-comum .art h4.cardName, .cxCard .card.duel.rar-comum .art h4.cardName , .ciCard .card.duel.rar-comum .art h4.cardName { background: linear-gradient(180deg, #5a5566 0%, #3a3644 100%) !important; }
.poFront .card.duel.rar-incomum .art h4.cardName, .cxCard .card.duel.rar-incomum .art h4.cardName , .ciCard .card.duel.rar-incomum .art h4.cardName { background: linear-gradient(180deg, #2f8a4f 0%, #14502e 100%) !important; }
.poFront .card.duel.rar-rara .art h4.cardName, .cxCard .card.duel.rar-rara .art h4.cardName , .ciCard .card.duel.rar-rara .art h4.cardName { background: linear-gradient(180deg, #2f6fb8 0%, #173a73 100%) !important; }
.poFront .card.duel.rar-lendaria .art h4.cardName, .cxCard .card.duel.rar-lendaria .art h4.cardName , .ciCard .card.duel.rar-lendaria .art h4.cardName { background: linear-gradient(180deg, #e0a73a 0%, #8a5412 100%) !important; }
.poFront .card.duel.rar-collector .art h4.cardName, .cxCard .card.duel.rar-collector .art h4.cardName , .ciCard .card.duel.rar-collector .art h4.cardName { background: linear-gradient(105deg, #ff7ad9 0%, #7a3cff 34%, #4fd6cf 66%, #ffd36b 100%) !important; }

/* Novas Cartas: a placa do nome no pé da carta ganha a cor da raridade */
.newCard .newPlate b { display: block; padding: 1.4cqw 3cqw 1.6cqw; border-radius: 6px; border: 1px solid var(--rar); box-shadow: 0 6px 16px #000a, inset 0 1px 0 #ffffff33; background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 60%, #000), color-mix(in srgb, var(--rar) 32%, #000)); }
.newCard.rar-lendaria .newPlate b { background: linear-gradient(180deg, #e0a73a, #8a5412); box-shadow: 0 6px 16px #000a, 0 0 18px #ffd36b66, inset 0 1px 0 #fff3c7; }
.newCard.rar-collector .newPlate b { background: linear-gradient(105deg, #ff7ad9, #7a3cff 40%, #4fd6cf 72%, #ffd36b); box-shadow: 0 6px 16px #000a, 0 0 18px #ff7ad999; }
.newThumb.rar-lendaria .newThumbName, .newThumb.rar-collector .newThumbName { color: var(--rar); }

/* Selo de nível ao lado do nick (combate e perfil) e retoques da aba de recompensas */
.lvlBadge { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 10px; padding: 2px 9px 3px; vertical-align: middle; border-radius: 4px; border: 1px solid #e8c98b99; background: linear-gradient(180deg, #3a2a12, #1c1409); color: #ffe2a0; font: 700 .62em/1 'Grenze Gotisch', Georgia, serif; letter-spacing: .04em; box-shadow: inset 0 1px 0 #ffe2a055, 0 2px 8px #0008; white-space: nowrap; }
.lvlBadge small { font: 700 .62em/1 'Alegreya Sans', system-ui, sans-serif; letter-spacing: .14em; color: #e8c98b; }
#gameView .hud .hudName h3 { display: flex; align-items: center; flex-wrap: nowrap; }
.nextRewards { display: grid; gap: 6px; margin: 8px 0 14px; }
.nextReward { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 4px; border: 1px solid #e8c98b33; background: linear-gradient(90deg, #e8c98b14, transparent); }
.nextReward b { color: #ffe2a0; font-family: 'Grenze Gotisch', Georgia, serif; }
.nextReward span { color: #f1e6cc; text-align: right; }
.onlineRewards .lvlUp { border: 1px solid #e8c98b; background: linear-gradient(180deg, #3a2a12, #1c1409); border-radius: 6px; padding: 6px 12px; box-shadow: 0 0 24px #ffd36b55; }
.shopBuy.free { background: linear-gradient(180deg, #8ee7b0, #2f9a5f) !important; color: #06210f !important; border-color: #b8f5cf !important; }

/* Combate: placa do nome mais baixa e com fonte menor (Leo, 03/10/2026). */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .art h4.cardName { font-size: max(9px, 5.4cqw) !important; line-height: 1.08 !important; padding: 1.1cqw 11cqw 1.3cqw !important; border-radius: 0 0 3.5cqw 3.5cqw; min-height: 0 !important; }

/* Combate: a arte sobra 1px para cada lado (a carta tem largura fracionada e o fundo escuro aparecia como uma linha preta vertical na borda direita). */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .art { left: -1px; right: -1px; width: auto; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel { background-clip: padding-box; }

/* Combate: cartas mais espaçadas; os HUDs e a faixa do meio acompanham (a largura deles já é 4 cartas + 3 espaços) e os menus do cabeçalho vão para a ponta direita. */
@media (min-width: 761px) {
  body[data-screen=game] #gameView .battle { --gap: clamp(14px, 1.8vw, 30px); }
  body[data-screen=game] > header { padding-left: 18px !important; padding-right: 14px !important; }
}

/* A linha preta vertical na direita da carta era a moldura interna (.card::before, combat.css) com sombra escura "inset -1px -1px". Fica só o fio claro. */
.card.duel::before { box-shadow: inset 1px 1px 0 #fff1d91e !important; border-color: #f4d5a22a; }

/* Combate: sem borda no próprio elemento da carta. A borda translucida de 1px, numa carta de largura fracionada, deixava uma faixa escura entre a arte e a moldura.
   A moldura passa a ser o ::before por cima da arte (inset 0), sem fresta possível. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel { border: 0 !important; background-clip: border-box; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel .art { left: 0; right: 0; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel::before { inset: 0; border: 1px solid color-mix(in srgb, var(--r, #e8c98b) 62%, transparent); border-radius: inherit; box-shadow: none !important; z-index: 6; }

/* Etiqueta ATIVA centralizada sobre a habilidade. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act::before { display: block; width: max-content; margin: 0 auto 1px; vertical-align: baseline; }

/* Logo das telas: a MESMA da página principal (logo.js desenha as letras e o eclipse com o código do hero.js). Só em telas largas e altas; no menu vale a do hero. */
.logoStage { display: none; }
@media (min-width: 861px) and (min-height: 560px) {
  body { --hh: clamp(64px, 9vh, 88px); }
  body:not([data-screen=menu]):not([data-screen=game]) > header { height: var(--hh) !important; padding-left: max(20px, 2.6vw) !important; align-items: center; }
  body[data-screen=game] > header { position: absolute; left: 0; right: 0; top: 0; z-index: 70; height: 44px !important; padding-left: max(20px, 2.6vw) !important; background: transparent !important; border: 0 !important; pointer-events: none; }
  body[data-screen=game] > header > * { pointer-events: auto; }
  body:not([data-screen=menu]) header .brand { visibility: hidden; }
  body:not([data-screen=menu]) .logoStage { display: block; position: fixed; z-index: 80; left: 0; top: 0; width: 640px; height: 260px; pointer-events: none;
    --e-display: 'Grenze Gotisch', Georgia, serif; --e-ease: cubic-bezier(.22,1,.36,1); }
  .logoStage .logoCorona { position: absolute; left: 0; top: 0; width: 640px; height: 260px; mix-blend-mode: screen; }
  .logoStage .logoHit { position: absolute; left: max(20px, 2.6vw); top: 0; height: var(--hh); display: flex; align-items: center; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; font: inherit; }
  .logoStage .heroMark { font-size: calc(var(--hh) * .62); line-height: 1.3; }
  .logoStage .heroMark span { padding-block: .06em; }
  .logoStage .heroMark::after { width: calc(var(--er, 60px) * .8); }
  body[data-screen=game] .logoStage { height: 200px; }
}

/* Selos de ATAQUE e DANO um pouco mais baixos (Leo, 03/10/2026), em todas as cartas e no modal de escolha. */
.card .cardStats :is(.atk, .dmg) { line-height: .94 !important; padding-top: .8cqw !important; padding-bottom: .95cqw !important; }
.pickNumbers :is(.atk, .dmg) { line-height: .94 !important; padding-top: 5px !important; padding-bottom: 6px !important; }

/* Combate: sem o rótulo DUELO · DUELISTA e sem o relato do último round. */
#modeLabel, #gameView .midLine .feed { display: none !important; }

/* Resultado das cartas que já lutaram: troféu (dourado ou em rascunho riscado) com a mana gasta embaixo. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel:is(.pastWin, .pastLoss) .state { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; top: auto !important; right: auto !important; left: 50% !important; bottom: auto; transform: translateX(-50%); }
:is(.duelHand, .duelFighter, .ciCard) .card.duel:is(.pastWin, .pastLoss) .state { top: 11cqw !important; display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.trophy { padding: 1.2cqw 2.4cqw; border-radius: 50%/38%; background: radial-gradient(ellipse, #000000b3 30%, #0000 72%); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.trophy svg { width: 23cqw; height: 23cqw; min-width: 30px; min-height: 30px; display: block; overflow: visible; }
.trophy.win svg { filter: drop-shadow(0 0 1.6cqw #ffc94dcc) drop-shadow(0 .6cqw .8cqw #000); }
.trophy.lose svg { filter: drop-shadow(0 .5cqw .7cqw #000); opacity: .92; }
.trophy .trMana { margin-top: .4cqw; font: 800 max(11px, 7cqw) system-ui, sans-serif; letter-spacing: .02em; color: #fff3c4; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.trophy.lose .trMana { color: #d8d3df; }
/* Derrotada: arte sem cor (mistura "color" com cinza) e escurecida por um véu, sem filter, para o risco vermelho do troféu continuar vermelho. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel.pastLoss { filter: none !important; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel.pastLoss .art { background-color: #777; background-blend-mode: luminosity; box-shadow: inset 0 0 0 100vmax #0000008c; }

/* Ícone de mana dos HUDs = frasco do modal de escolha. */
.manaFlask.flask { display: inline-block; width: .5em; height: 1.25em; filter: none; vertical-align: -.25em; margin-right: 4px; }
#gameView .hud .energy .manaFlask.flask, .stats .manaFlask.flask { width: 13px; height: 32px; margin: 0; flex: none; }
.manaFlask.flask svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* SUA VEZ / VEZ DO OPONENTE um pouco maior. */
@media (min-width: 761px) { #gameView .turnBadge { font-size: 17.5px !important; padding: 9px 24px !important; } }

/* ---- Modal da carta no combate, redesenhado (Leo, 03/10/2026): compacto, fontes do jogo, lore atrás do "i". ---- */
#pickDialog { width: min(700px, calc(100vw - 28px)) !important; padding: 18px 20px 18px !important; font-family: var(--e-body, 'Alegreya Sans', system-ui, sans-serif); }
#pickDialog .pickLayout { gap: 22px !important; align-items: start !important; }
#pickDialog .pickCard .card.duel { --cw: clamp(170px, 17vw, 210px) !important; }
#pickDialog .pickBody { gap: 10px !important; }
#pickDialog .pickHead { gap: 11px !important; align-items: center; }
#pickDialog .pickHead .clanIcon { width: 36px !important; height: 36px !important; }
#pickDialog .pickTitles { min-width: 0; flex: 1; }
#pickDialog .pickHead small { font: 700 11px var(--e-body, 'Alegreya Sans', sans-serif) !important; letter-spacing: .2em !important; }
#pickDialog .pickHead h2 { font: 700 clamp(22px, 2vw, 27px)/1.05 'Grenze Gotisch', Georgia, serif !important; margin: 1px 0 0 !important; }
#pickDialog .pickInfoBtn { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #e8c98baa; background: radial-gradient(circle at 35% 30%, #3a2c4a, #1a1324); color: #f1e6cc; font: 700 italic 17px/1 Georgia, serif; cursor: pointer; box-shadow: 0 0 0 3px #e8c98b14; transition: transform .15s, box-shadow .2s, background .2s; padding: 0; }
#pickDialog .pickInfoBtn:hover, #pickDialog .pickInfoBtn[aria-expanded=true] { transform: scale(1.08); background: radial-gradient(circle at 35% 30%, #e8c98b, #a87a2e); color: #1b1320; box-shadow: 0 0 14px #e8c98b88; }
#pickDialog .pickLore { margin: 0; padding: 9px 12px; border-left: 3px solid #e8c98b88; background: linear-gradient(90deg, #e8c98b14, transparent); font: italic 400 15px/1.45 'Alegreya Sans', Georgia, serif !important; color: #efe3cb; max-height: 8.6em; overflow: auto; border-radius: 0 4px 4px 0; }
#pickDialog .pickLore[hidden] { display: none; }
#pickDialog .forceBox { padding: 7px 12px !important; gap: 8px !important; }
#pickDialog .forceBox small { font: 700 11px var(--e-body, 'Alegreya Sans', sans-serif) !important; letter-spacing: .16em !important; }
#pickDialog .forceBox b { font: 700 19px/1 'Grenze Gotisch', Georgia, serif !important; gap: 7px !important; }
#pickDialog .forceBox b i { font-size: 15px !important; }
#pickDialog .forceBox strong { font-size: 27px !important; }
#pickDialog .manaPanel { gap: 9px !important; }
#pickDialog .manaPick > small { font: 700 11px var(--e-body, 'Alegreya Sans', sans-serif) !important; letter-spacing: .16em; }
#pickDialog #flasks { gap: 3px; }
#pickDialog #flasks .flask { max-width: 32px !important; }
#pickDialog .furyToggle { padding: 7px 10px !important; gap: 9px !important; }
#pickDialog .furyToggle .furyText b { font: 700 15px 'Grenze Gotisch', Georgia, serif !important; }
#pickDialog .furyToggle .furyText small { font: 400 12.5px/1.3 'Alegreya Sans', system-ui, sans-serif !important; }
#pickDialog .furyToggle .furyIcon { width: 26px !important; height: 26px !important; }
#pickDialog .manaActions button { font: 700 14px 'Alegreya Sans', system-ui, sans-serif !important; letter-spacing: .08em; padding: 8px 16px !important; }
@media (max-width: 760px) { #pickDialog .pickLayout { grid-template-columns: 1fr !important; justify-items: center; } }
#pickDialog #manaValue { font: 700 22px/1 'Grenze Gotisch', Georgia, serif !important; }

/* ATIVA: etiqueta centralizada sobre a borda de cima da habilidade, sem ocupar linha (a habilidade não cresce mais). */
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act { position: relative; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act::before { position: absolute; display: block; left: 50%; top: 0; width: max-content; margin: 0 !important; transform: translate(-50%, -62%); z-index: 3; box-shadow: 0 1px 4px #000a; }
/* Modal da escolha de mana, ajuste fino (Leo, 03/10/2026): carta maior, modal menor, fontes e textos da carta redesenhados. */
#pickDialog { width: min(640px, calc(100vw - 28px)) !important; padding: 16px 18px !important; }
#pickDialog .pickLayout { gap: 18px !important; }
#pickDialog .pickCard .card.duel { --cw: clamp(205px, 20vw, 245px) !important; }
#pickDialog #flasks .flask { max-width: 24px !important; }
#pickDialog .pickBody { gap: 9px !important; }
#pickDialog .forceBox { min-width: 0; max-width: 100%; box-sizing: border-box; width: 100%; }
#pickDialog .forceBox b#forceRead { margin: 0 !important; min-width: 0; flex: 0 1 auto; }
#pickDialog .forceBox small { white-space: normal; max-width: 7.5em; line-height: 1.15; }

/* Modal da carta: textos das habilidades (na carta) e da Fúria na mesma fonte, peso e caixa. */
#pickDialog .furyToggle .furyText small { font-family: 'Alegreya Sans', system-ui, sans-serif !important; font-weight: 500 !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; line-height: 1.28 !important; color: #efe3cb; }

/* Sem a etiqueta ATIVA: fica só o destaque aceso da habilidade. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act::before { content: none !important; display: none !important; }

/* Logo das telas: não é botão visível (sem fundo, seleção ou realce ao passar o mouse). */
.logoStage .logoHit, .logoStage .logoHit:hover, .logoStage .logoHit:focus, .logoStage .logoHit:active { background: none !important; box-shadow: none !important; border: 0 !important; outline: 0 !important; filter: none !important; transform: none !important; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.logoStage .logoHit:focus-visible .heroMark { outline: 2px solid #e8c98b88; outline-offset: 6px; border-radius: 6px; }
.logoStage .heroMark, .logoStage .heroMark span { user-select: none; -webkit-user-select: none; background: none !important; }

/* ===== Padrão único de carta (Leo, 03/10/2026): o desenho da carta do combate vale em coleção, ficha, loja/abertura e modal da mana. ===== */
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard, #pickCard, .ciCard) .card.duel .art h4.cardName { font: 700 5.4cqw/1.08 Georgia, serif !important; letter-spacing: 0 !important; padding: 1.1cqw 11cqw 1.3cqw !important; text-transform: none !important; white-space: nowrap !important; display: block !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, .cxCard, #pickCard, .ciCard) .card.duel .cardText { padding: 8cqw 2.4cqw 2cqw !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard, #pickCard, .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility, .abT) { font: 400 5cqw/1.2 "Segoe UI", Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard) .card.duel .cardText p.ability { color: #c2b6cb !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard) .card.duel .cardText p.clanAbility { color: #ece6f3 !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard, #pickCard, .ciCard) .card.duel .cardText .abK { font: 700 3.3cqw/1 sans-serif !important; letter-spacing: .18em !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard, #pickCard, .ciCard) .card.duel .cardStats :is(.atk, .dmg) { font: 700 8.6cqw/.94 "Segoe UI", Arial, sans-serif !important; padding: .8cqw 2.6cqw .95cqw !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard, #pickCard, .ciCard) .card.duel .cardStats .stars { font-size: min(8cqw, calc(33cqw / var(--n, 5))) !important; }
:is(#colGrid, #colInspect .inspCard, .poFront, #clansView .clFrame, .cxCard, #pickCard, .ciCard) .card.duel .cardStats :is(.atk, .dmg) small { display: none !important; }

/* Novas Cartas no padrão da carta do combate: placa do nome no alto (cor da raridade), emblema do clã no canto e selos de ataque/estrelas/dano embaixo. */
.newCard .newPlate { top: 0; bottom: auto; padding: 0 !important; z-index: 5; }
.newCard .newPlate b { font: 700 5.4cqw/1.08 Georgia, serif !important; text-align: center; padding: 1.1cqw 11cqw 1.3cqw; color: #f1ecf7; text-shadow: 0 1px 2px #000a !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--r2, #6f6878) 88%, #000), color-mix(in srgb, var(--r2, #6f6878) 62%, #000)); border-bottom: max(1.5px, .6cqw) solid var(--r, #b9b3c2); border-radius: 0 0 3.5cqw 3.5cqw; box-shadow: 0 .8cqw 2.4cqw #000c, inset 0 1px 0 #ffffff40; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newCard .newPlate small { display: none; }
.newCard .clanIcon { z-index: 6; }
.newCard .newBar { left: 3cqw; right: 3cqw; bottom: 3cqw; }
.newCard .newBar > span { font: 700 8.6cqw/.94 "Segoe UI", Arial, sans-serif !important; padding: .8cqw 2.6cqw .95cqw !important; border-radius: 2.6cqw; }
.newCard .newBar .st { padding: 1.2cqw 1.6cqw !important; border-radius: 2.4cqw; font-size: min(8cqw, calc(33cqw / var(--n, 5))); border: 1px solid #e8c98b40; }
.newCard .newBar > span small { display: none; }
.newCard::after { content: ''; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(transparent, #0b0812e6); pointer-events: none; z-index: 3; }

/* Padrão da carta, ajuste: nada de vazio embaixo (os selos já estão dentro do bloco de texto) e as duas habilidades coladas, como no combate. */
:is(#colGrid, .poFront, .cxCard, .ciCard) .card.duel .cardText { padding: 8cqw 2.4cqw 2.6cqw !important; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 1cqw !important; }
:is(#colGrid, .poFront, .cxCard, .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility) { margin: 0 !important; }
:is(#colGrid, .poFront, .cxCard, .ciCard) .card.duel .cardText .cardStats { margin: 1.2cqw 0 0 !important; }

/* Coleção: texto da habilidade do personagem em branco. */
#colGrid .card.duel .cardText p.ability, #colGrid .card.duel .cardText p.ability .abT { color: #fff !important; }

/* Coleção: o botão Voltar sobe para a faixa do cabeçalho (ao lado da logo), sem ocupar uma linha própria; a grade e o deck começam na mesma altura. */
@media (min-width: 861px) and (min-height: 560px) {
  body[data-screen=collection] #collectionView .cxTop { position: fixed; z-index: 85; top: calc((var(--hh, 81px) - 42px) / 2); left: calc(max(20px, 2.6vw) + 300px); padding: 0; margin: 0; }
  body[data-screen=collection] #collectionView .cxMain { padding-top: 10px; }
}

/* Coleção: botão "i" um pouco mais para baixo. */
#colGrid .cxInfo, .cxInfo { top: 13px !important; }

/* Coleção: fundo animado (Leo, 03/10/2026) — auroras lentas nas cores dos clãs e brasas subindo, atrás de tudo. */
body[data-screen=collection]::before, body[data-screen=collection]::after { content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none; }
body[data-screen=collection]::before {
  background:
    radial-gradient(38% 34% at 18% 22%, #7b4bc455, transparent 70%),
    radial-gradient(34% 30% at 82% 18%, #d4213d40, transparent 70%),
    radial-gradient(40% 36% at 70% 82%, #2f8fbf44, transparent 70%),
    radial-gradient(30% 28% at 24% 78%, #e8c98b33, transparent 70%);
  filter: blur(28px); animation: colAurora 26s ease-in-out infinite alternate;
}
body[data-screen=collection]::after {
  background:
    radial-gradient(circle, #ffd9a0cc 0 1.2px, transparent 2px) 0 0 / 120px 160px,
    radial-gradient(circle, #ffb27acc 0 1px, transparent 2px) 60px 80px / 170px 210px,
    radial-gradient(circle, #cfe9ffaa 0 .9px, transparent 1.8px) 30px 40px / 220px 260px;
  opacity: .55; animation: colBrasas 40s linear infinite;
}
@keyframes colAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 4%, 0) scale(1.03); } }
@keyframes colBrasas { from { background-position: 0 0, 60px 80px, 30px 40px; } to { background-position: 0 -640px, 60px -840px, 30px -1040px; } }
@media (prefers-reduced-motion: reduce) { body[data-screen=collection]::before, body[data-screen=collection]::after { animation: none; } }
.reduced body[data-screen=collection]::before, .reduced body[data-screen=collection]::after { animation: none; }

/* ===== Ficha da carta na coleção (botão "i"), redesenhada no padrão dos outros modais (Leo, 03/10/2026) ===== */
#colInspect.cxInspect { width: min(640px, calc(100vw - 24px)) !important; max-height: calc(100vh - 32px); border-radius: 8px; font-family: 'Alegreya Sans', system-ui, sans-serif; }
#colInspect .cxInspBody { grid-template-columns: auto minmax(0, 1fr) !important; gap: 20px !important; padding: 18px !important; align-items: start !important; }
#colInspect .inspCard .card.duel { --cw: clamp(205px, 20vw, 240px) !important; height: calc(var(--cw) * 1.45) !important; border-radius: 10px; }
/* a carta, igual à do combate */
#colInspect .inspCard .card.duel .art { position: absolute !important; inset: 0 !important; height: auto !important; background-size: cover !important; background-position: 50% 22% !important; }
#colInspect .inspCard .card.duel .art h4.cardName { font: 700 5.4cqw/1.08 Georgia, serif !important; padding: 1.1cqw 11cqw 1.3cqw !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; display: block !important; }
#colInspect .inspCard .card.duel .cardText { position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important; padding: 8cqw 2.4cqw 2.6cqw !important; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 1cqw !important; background: linear-gradient(transparent, #0b0812e0 22%, #0b0812f5) !important; }
#colInspect .inspCard .card.duel .cardText :is(p.ability, p.clanAbility) { margin: 0 !important; font: 400 5cqw/1.2 "Segoe UI", Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; padding: 1.1cqw 2.2cqw 1.1cqw 2.8cqw !important; }
#colInspect .inspCard .card.duel .cardText p.ability { color: #fff !important; }
#colInspect .inspCard .card.duel .cardText p.clanAbility { color: #ece6f3 !important; }
#colInspect .inspCard .card.duel .cardText .abK { font: 700 3.3cqw/1 sans-serif !important; letter-spacing: .18em !important; }
#colInspect .inspCard .card.duel .cardStats { margin: 1.2cqw 0 0 !important; }
#colInspect .inspCard .card.duel .cardStats :is(.atk, .dmg) { font: 700 8.6cqw/.94 "Segoe UI", Arial, sans-serif !important; padding: .8cqw 2.6cqw .95cqw !important; }
#colInspect .inspCard .card.duel .cardStats .stars { font-size: min(8cqw, calc(33cqw / var(--n, 5))) !important; }
#colInspect .inspCard .card.duel .cardStats small { display: none !important; }
/* lado direito */
#colInspect .cxInspInfo { gap: 10px !important; padding: 0 !important; min-width: 0; }
#colInspect .inspHead { gap: 11px !important; padding-right: 34px; }
#colInspect .inspHead .clanIcon { width: 38px !important; height: 38px !important; }
#colInspect .cxEyebrow { font: 700 11px 'Alegreya Sans', sans-serif !important; letter-spacing: .2em; text-transform: uppercase; color: #e8c98b; margin: 0 !important; }
#colInspect .inspHead h3, #colInspect .cxInspInfo h3 { font: 700 clamp(24px, 2.2vw, 29px)/1.05 'Grenze Gotisch', Georgia, serif !important; margin: 1px 0 0 !important; color: #f1e6cc; }
#colInspect .inspLore { margin: 0; padding: 10px 12px; border-left: 3px solid #e8c98b88; background: linear-gradient(90deg, #e8c98b14, transparent); font: italic 400 15.5px/1.5 'Alegreya Sans', Georgia, serif !important; color: #efe3cb; max-height: none; border-radius: 0 4px 4px 0; }
#colInspect .cxLevel { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #e8c98b33; border-radius: 6px; background: linear-gradient(180deg, #1a1322e6, #100b16e6); }
#colInspect .cxLevel small { font: 700 11px 'Alegreya Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e8c98b; margin: 0; }
#colInspect .cxActs .cxAct { font: 700 14px 'Alegreya Sans', sans-serif; letter-spacing: .06em; padding: 9px 14px; }
#colInspect .cxActNote { font: 400 13px/1.3 'Alegreya Sans', sans-serif; }
#colInspect .inspSell > summary { font: 700 13px 'Alegreya Sans', sans-serif; letter-spacing: .06em; }
@media (max-width: 640px) { #colInspect .cxInspBody { grid-template-columns: 1fr !important; justify-items: center; } }

/* Ficha e modal da mana: aqui os selos são absolutos (a carta está numa .duelHand, como no combate), então o texto reserva o espaço deles embaixo. */
:is(#colInspect .inspCard, #pickCard, .ciCard) .card.duel .cardText { padding: 8cqw 2.4cqw 15cqw !important; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 1cqw !important; }
:is(#colInspect .inspCard, #pickCard, .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility) { margin: 0 !important; }

/* Venda de cartas na ficha: formulário compacto e simétrico (preço por cópia e quantidade lado a lado). */
#colInspect .inspSell > div { padding: 0 12px 12px; display: grid; gap: 10px; }
#colInspect .sellNote { font: 400 14px/1.4 'Alegreya Sans', system-ui, sans-serif; }
#colInspect .sellGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#colInspect .sellField { display: grid; gap: 4px; min-width: 0; margin: 0; }
#colInspect .sellField > span:first-child { font: 700 11px 'Alegreya Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c9b9d2; }
#colInspect .sellInput { display: flex; align-items: center; gap: 6px; min-width: 0; height: 40px; padding: 0 8px; border-radius: 6px; border: 1px solid #e8c98b66; background: #0e0a14; box-sizing: border-box; }
#colInspect .sellInput input { width: 100%; min-width: 0; flex: 1; border: 0; background: none; color: #f1e6cc; font: 700 18px 'Grenze Gotisch', Georgia, serif; text-align: center; padding: 0; outline: 0; -moz-appearance: textfield; }
#colInspect .sellInput input::-webkit-outer-spin-button, #colInspect .sellInput input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#colInspect .sellInput .coin { flex: none; width: 18px; height: 18px; }
#colInspect .sellStep button { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid #e8c98b88; background: #1a1322; color: #f1e6cc; font: 700 16px/1 system-ui; cursor: pointer; }
#colInspect .sellStep button:hover { background: #e8c98b; color: #1b1320; }
#colInspect .sellStep input { flex: 1 1 0; width: 2.4ch; }
#colInspect .sellStep em { flex: none; font: 400 12px 'Alegreya Sans', sans-serif; font-style: normal; color: #9a8ca6; }
#colInspect .sellFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#colInspect .sellFoot .sellReceive { flex: 1; min-width: 0; font: 500 13.5px/1.3 'Alegreya Sans', sans-serif; color: #8fd9a8; }
#colInspect .sellFoot .cxAct { flex: none; width: auto; padding: 9px 20px; }
#colInspect .sellMine { font: 400 13.5px/1.5 'Alegreya Sans', sans-serif; }
#colInspect #openMarket { padding: 8px 12px; }

/* Coleção: o bloco de texto encosta no fundo da carta (sobrava uma faixa vazia embaixo). */
#colGrid .card.duel .cardText { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; padding-bottom: 2cqw !important; margin: 0 !important; }
#colGrid .card.duel .cardText .cardStats { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Venda na ficha: painel fixo embaixo, de ponta a ponta (preço, cópias e nick), sem botão de abrir/fechar, sem esticar o modal. */
#colInspect .inspSell { grid-column: 1 / -1; padding: 12px 14px; margin: 0; border: 1px solid #e8c98b33; border-radius: 6px; background: linear-gradient(180deg, #1a1322e6, #100b16e6); }
#colInspect .inspSell > div { padding: 0; display: grid; gap: 9px; }
#colInspect .sellGrid { grid-template-columns: 1fr 1.15fr 1.25fr; }
#colInspect .sellInput input[type=text] { text-align: left; font: 500 15px 'Alegreya Sans', system-ui, sans-serif; padding-left: 2px; }
#colInspect .sellNote { font: 400 13.5px/1.35 'Alegreya Sans', sans-serif; margin: 0; }
#colInspect .sellMine { margin: 0; }
#colInspect #openMarket { width: auto; justify-self: start; padding: 6px 12px; font-size: 13px; }
#colInspect #openMarket { width: auto !important; min-height: 0 !important; height: 30px; padding: 0 12px !important; font-size: 12.5px !important; letter-spacing: .04em; }

/* Ficha (botão "i"): modal mais baixo, lore grande, evolução compacta e botão "Pôr no deck" mais para baixo. */
#colInspect .inspCard .card.duel { --cw: clamp(185px, 18vw, 215px) !important; }
#colInspect .cxInspInfo { align-self: stretch; display: flex !important; flex-direction: column; gap: 8px !important; }
#colInspect .inspLore { flex: 1 1 auto; min-height: 150px; max-height: none !important; overflow: auto; font-size: 16px !important; line-height: 1.55 !important; padding: 12px 14px !important; }
#colInspect .cxLevel { padding: 3px 8px !important; gap: 6px !important; flex: none; }
#colInspect .cxLevel small { font-size: 9.5px !important; }
#colInspect .cxLevel .cxPips.big { display: flex; align-items: center; transform: scale(.55); transform-origin: right center; margin-left: auto; }
#colInspect .cxActs { margin-top: 10px !important; flex: none; }
#colInspect .cxActs .cxAct { padding: 8px 14px; }
#colInspect .cxInspBody { padding: 14px !important; gap: 16px !important; }
#colInspect .inspSell { padding: 9px 12px; }

/* Modal da carta no combate: um pouco maior. */
#pickDialog { width: min(720px, calc(100vw - 28px)) !important; padding: 18px 22px !important; }
#pickDialog .pickLayout { gap: 22px !important; }
#pickDialog .pickCard .card.duel { --cw: clamp(228px, 22vw, 272px) !important; }
#pickDialog #flasks .flask { max-width: 28px !important; }
#pickDialog .pickHead h2 { font-size: clamp(25px, 2.2vw, 30px) !important; }
#pickDialog .forceBox b { font-size: 21px !important; }
#pickDialog .forceBox strong { font-size: 30px !important; }
#pickDialog .furyToggle .furyText small { font-size: 14px !important; }
#pickDialog .manaActions button { font-size: 15px !important; padding: 10px 18px !important; }

/* Troféus de vitória/derrota: no centro da carta (horizontal e vertical). */
:is(.duelHand, .duelFighter, .ciCard) .card.duel:is(.pastWin, .pastLoss) .art .state { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 5; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel:is(.pastWin, .pastLoss) .trophy svg { width: 30cqw; height: 30cqw; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel:is(.pastWin, .pastLoss) .trophy .trMana { font-size: max(13px, 9cqw); }

/* Modal da mana: maior, frascos maiores, prévia ao passar o mouse e layout que não mexe com a Fúria. */
#pickDialog { width: min(790px, calc(100vw - 28px)) !important; padding: 20px 24px !important; }
#pickDialog .pickLayout { gap: 24px !important; }
#pickDialog .pickCard .card.duel { --cw: clamp(245px, 23.5vw, 292px) !important; }
#pickDialog #flasks .flask { max-width: 36px !important; }
#pickDialog #flasks { gap: 4px; }
.flask.pv:not(.full) { opacity: .62; }
.flask.pv:not(.full) .fLiquid { transform: scaleY(1) !important; }
.flask.pv:not(.full) .fLiq { fill: #6fc4ff; }
.flask.pv:not(.full) .fGlass { stroke: #bfe9ff; }
/* Fúria: nada muda de tamanho ao ligar (altura fixa, texto sem quebra diferente, botão com largura fixa). */
#pickDialog .furyToggle { min-height: 64px; box-sizing: border-box; border-width: 1px !important; }
#pickDialog .furyToggle .furyText { min-width: 0; }
#pickDialog .manaActions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#pickDialog .manaActions button { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
#pickDialog .pickBody, #pickDialog .manaPanel { min-height: 0; }
#pickDialog .forceBox { min-height: 46px; }
#pickDialog #manaValue { min-height: 26px; }
#pickDialog { width: min(840px, calc(100vw - 28px)) !important; }
#pickDialog #flasks { gap: 3px; }
#pickDialog #flasks .flask { max-width: 40px !important; }
#pickDialog .manaActions button { font-size: 13.5px !important; letter-spacing: .03em !important; padding: 10px 8px !important; }

/* Troféus de vitória e derrota: imagens novas (assets/trofeu-vitoria.webp e trofeu-derrota.webp). */
.trophy { background: none !important; padding: 0 !important; border-radius: 0 !important; }
.trophy .trImg { display: block; width: 32cqw; height: 29cqw; min-width: 36px; min-height: 33px; background: center / contain no-repeat; filter: drop-shadow(0 .6cqw 1cqw #000c); }
.trophy.win .trImg { background-image: url('assets/trofeu-vitoria.webp'); }
.trophy.lose .trImg { background-image: url('assets/trofeu-derrota.webp'); }
:is(.duelHand, .duelFighter, .ciCard) .card.duel:is(.pastWin, .pastLoss) .trophy .trImg { width: 34cqw; height: 31cqw; }

/* Enquanto a carta gira até o modal, o modal fica escondido (aparece quando ela chega). */
body.flipWait dialog[open] { visibility: hidden !important; }
body.flipWait dialog[open]::backdrop { visibility: visible; }

/* Sem desfoque no fundo dos modais do combate (a tela ficava embaçada durante a animação): só escurece. */
#pickDialog::backdrop, dialog.cardInfo::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#pickDialog::backdrop { background: #05030acc !important; }
dialog.cardInfo::backdrop { background: radial-gradient(ellipse at 35% 45%, #2a1838c4, #05030af0 70%) !important; }
body.flipWait dialog[open]::backdrop { backdrop-filter: none !important; }

/* Sem desfoque no fundo durante o combate (cena do duelo, resultado, selecao) */
.duelShade, .duelOverlay, #result::backdrop, #pickDialog::backdrop, dialog.cardInfo::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Fundo dos modais do combate: sem escurecer nem desfocar durante o giro; desfoque so com o modal 100% aberto. */
#pickDialog::backdrop, dialog.cardInfo::backdrop { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
body.flipWait dialog[open]::backdrop { visibility: hidden !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ===== FÚRIA: a carta treme, solta chamas e brasas (modal da mana e cena do duelo) ===== */
#pickDialog.furyOn #pickCard .card.duel::after,
.duelFighter .card.duel.fury::after {
  content: ''; position: absolute; inset: -17% -11% -2%; z-index: -1; pointer-events: none; transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse 8% 88% at 3% 100%, #ffd36b 0, #ff7a2b 30%, #e8341a 55%, transparent 74%),
    radial-gradient(ellipse 9% 96% at 14% 100%, #fff1a6 0, #ff8a2b 30%, #e02a12 56%, transparent 76%),
    radial-gradient(ellipse 10% 84% at 28% 100%, #ffd36b 0, #ff7a2b 32%, #e8341a 58%, transparent 76%),
    radial-gradient(ellipse 10% 92% at 43% 100%, #fff1a6 0, #ff8a2b 32%, #e02a12 58%, transparent 76%),
    radial-gradient(ellipse 10% 86% at 58% 100%, #ffd36b 0, #ff7a2b 32%, #e8341a 58%, transparent 76%),
    radial-gradient(ellipse 10% 94% at 73% 100%, #fff1a6 0, #ff8a2b 32%, #e02a12 58%, transparent 76%),
    radial-gradient(ellipse 9% 90% at 86% 100%, #ffd36b 0, #ff7a2b 30%, #e8341a 56%, transparent 74%),
    radial-gradient(ellipse 8% 82% at 97% 100%, #fff1a6 0, #ff9a2b 30%, #e8341a 55%, transparent 74%);
  filter: blur(1.2px) saturate(1.2); mix-blend-mode: screen;
  animation: furyFlame .42s ease-in-out infinite alternate, furyFlameB .67s ease-in-out infinite alternate;
}
@keyframes furyFlame { from { transform: scale(1, .94) skewX(-2deg); opacity: .85; } to { transform: scale(1.03, 1.12) skewX(2deg); opacity: 1; } }
@keyframes furyFlameB { from { translate: -1.2% 0; } to { translate: 1.2% -2%; } }
/* brasas subindo (camada extra no mesmo pseudo não cabe: usa a sombra animada da própria carta) */
#pickDialog.furyOn #pickCard .card.duel,
.duelFighter .card.duel.fury {
  animation: furyShake .13s linear infinite, furyGlow .5s ease-in-out infinite alternate !important;
  box-shadow: 0 0 0 2px #ff6a2b, 0 0 26px #ff6a2bcc, 0 -10px 50px #ff3d1f99 !important;
}
@keyframes furyShake {
  0% { translate: 0 0; rotate: 0deg; } 20% { translate: -1.5px 1px; rotate: -.5deg; } 40% { translate: 1.5px -1px; rotate: .5deg; }
  60% { translate: -1px -1.5px; rotate: -.3deg; } 80% { translate: 1px 1.5px; rotate: .4deg; } 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes furyGlow { from { filter: brightness(1) saturate(1.05); } to { filter: brightness(1.12) saturate(1.3) drop-shadow(0 0 10px #ff6a2b); } }
@media (prefers-reduced-motion: reduce) {
  #pickDialog.furyOn #pickCard .card.duel, .duelFighter .card.duel.fury { animation: none !important; }
  #pickDialog.furyOn #pickCard .card.duel::after, .duelFighter .card.duel.fury::after { animation: none; }
}
.reduced #pickDialog.furyOn #pickCard .card.duel, .reduced .duelFighter .card.duel.fury { animation: none !important; }
.reduced #pickDialog.furyOn #pickCard .card.duel::after, .reduced .duelFighter .card.duel.fury::after { animation: none; }
#pickDialog.furyOn #pickCard .card.duel, .duelFighter .card.duel.fury { overflow: visible !important; }

/* Ficha 3D: a carta é a mesma do combate (inserida por cardinfo.js); o desenho antigo some. */
.ciCard > :is(.ciArt, .ciFoil, .ciGlare, .ciCardName, .ciCardBar) { display: none !important; }
.ciCard > .card.duel.ciReal { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; pointer-events: none; }

.ciCard .card.duel { overflow: hidden !important; }
.ciCard .card.duel .art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; }

/* ===== Modais = carta do campo (padrão): mesmas proporções em relação à largura da carta ===== */
:is(#pickCard, #cardInfo .ciCard) .card.duel .art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
:is(#pickCard, #cardInfo .ciCard) .card.duel .art h4.cardName { font-size: 5.4cqw !important; padding: 1.1cqw 11cqw 1.3cqw !important; }
:is(#pickCard, #cardInfo .ciCard) .card.duel .cardText .clanName { display: none !important; }

/* Modais: nome da carta um pouco maior; habilidades mais para cima. */
:is(#pickCard, #cardInfo .ciCard) .card.duel .art h4.cardName { font-size: 6.3cqw !important; padding: 1.2cqw 11cqw 1.4cqw !important; }

/* Textos de habilidade nos modais: só a sombra; cor/itálico vêm das regras do campo (estados). */
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility) { text-shadow: 0 1px 3px #000, 0 0 8px #000; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel :is(.ability.off, .ability.locked, .clanAbility.none, .clanAbility.off) { font-style: italic !important; }
.ciCard .card.duel .cardText { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: auto !important; }

/* Carta do modal de mana = carta do campo: sem padding (o cqw muda) e mesma proporção 1:1,4. */
#pickDialog #pickCard .card.duel { padding: 0 !important; height: calc(var(--cw) * 1.4) !important; }

/* Modais: mesmas margens laterais e espaçamento entre habilidades do campo (em cqw, proporcionais à carta). */
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText { padding-left: 4cqw !important; padding-right: 4cqw !important; gap: 1.6cqw !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility) { border-left-width: .9cqw !important; }

/* Textos das habilidades em branco (campo de batalha e modais). */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardText p.ability,
:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardText p.ability .abT,
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability.off, .ability.locked, .clanAbility.none, .clanAbility.off) { color: #fff !important; opacity: 1 !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText p.ability { color: #fff !important; }

/* Modais: sombra, barrinha e negrito das habilidades iguais ao campo (em cqw, proporcionais à carta). */
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility, .abT, .abK) { text-shadow: 0 .45cqw 1.34cqw #000, 0 0 3.57cqw #000 !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability.act, p.ability.act .abT, p.ability.act .abK) { text-shadow: 0 0 3.57cqw #ffd36bcc, 0 .45cqw 1.34cqw #000 !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability, p.clanAbility) { border-left-width: 3px !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability.act, p.clanAbility.act) { border-left-width: 4px !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(p.ability.act, p.ability.act .abT) { font-weight: 700 !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardText :is(.ability.off, .ability.locked, .clanAbility.none, .clanAbility.off) .abT { font-style: italic !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardStats :is(.atk, .dmg) { letter-spacing: normal !important; padding-left: 3cqw !important; padding-right: 3cqw !important; font-family: "Segoe UI", Arial, sans-serif !important; }
:is(#pickDialog #pickCard, #cardInfo .ciCard) .card.duel .cardStats .stars { font-family: "Segoe UI", Arial, sans-serif !important; }

/* ===== HUD do combate: nick ao lado da foto, com o nível num selo dourado ===== */
#gameView .hud .portrait { box-shadow: 0 0 0 2px #e8c98b, 0 0 0 5px #1a1220, 0 0 16px #e8c98b66 !important; }
#gameView .hud .hudName { display: grid; gap: 3px; align-content: center; }
#gameView .hud .hudName h3 { display: flex; align-items: center; gap: 10px; color: #fff3d6 !important; text-shadow: 0 2px 8px #000, 0 0 14px #e8c98b44 !important; }
.lvlBadge { margin-left: 0 !important; padding: 2px 10px 3px !important; border-radius: 999px !important; border: 1px solid #ffe7a8 !important;
  background: linear-gradient(180deg, #ffd77a, #d49a2e 58%, #8a5a12) !important; color: #2a1606 !important; font-weight: 800 !important; letter-spacing: .02em;
  box-shadow: 0 0 12px #e8c98b66, inset 0 1px 0 #fff8 !important; text-shadow: 0 1px 0 #ffe7a8aa; flex: none; }
.lvlBadge small { color: #5a360a !important; }

/* Placa do nome retangular (sem cantos arredondados), habilidades de clã brancas e ícone do clã colado na direita — vale em toda carta. */
.card.duel .art h4.cardName, .ciCard .card .art h4.cardName { border-radius: 0 !important; }
.card.duel :is(.clanAbility, .clanAbility.on, .clanAbility.none, .clanAbility.off, .ability.locked, .ability.off, .clanName, .clanName.on) { color: #fff !important; }
.card.duel .clanIcon {; }

/* Carta 100% retangular: sem cantos arredondados na carta, na arte, na placa do nome e nas molduras. */
.card.duel, .card.duel::before, .card.duel::after, .card.duel .art, .card.duel .art::before, .card.duel .art::after,
.card.duel .art h4.cardName, .card.duel .art h4.cardName::before, .card.duel .art h4.cardName::after,
.ciCard, .ciCard .ciReal, .ciCard .card, .tc, .tc .tcCard, #pickDialog #pickCard, #pickDialog #pickCard .card.duel { border-radius: 0 !important; }

/* Modais da carta (mana e ficha): o MESMO efeito da carta no combate. Lá nada anima sozinho e o brilho de raridade só aparece com o mouse em cima,
   acompanhando o cursor (tilt.js escreve --mx/--my, também nos modais). As camadas antigas da ficha (.ciFoil/.ciGlare) saem: a carta de verdade
   já traz o efeito. */
:is(#pickDialog, #cardInfo) .card.duel .art::before, :is(#pickDialog, #cardInfo) .card.duel .art::after { animation: none; }
:is(#pickDialog, #cardInfo) .card.duel:not(:hover):not(.depth-active):not(.tilt) .art::after { opacity: 0; }
.ciCard:has(.ciReal) :is(.ciFoil, .ciGlare) { display: none !important; }

/* TESTE de fonte (Leo): nome dos personagens no combate (campo, cena e modais) em Alegreya Sans negrito, em vez da gótica.
   Para voltar à gótica, apague este bloco. */
:is(#gameView, #pickDialog, #cardInfo, .dealLayer, .duelOverlay) .card.duel .art h4.cardName { font-family: 'Alegreya Sans', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: .02em !important; font-size: max(9px, 6.4cqw) !important; line-height: 1.05 !important; }
/* Combate: barra do nome (header) mais baixa e fonte menor que antes. Nos modais valem as regras próprias mais abaixo. */
:is(#gameView, .dealLayer, .duelOverlay) .card.duel .art h4.cardName { padding-top: 1.2cqw !important; padding-bottom: 1.4cqw !important; }

/* Modais: placa do nome menor (barra e fonte). Seletor com a mesma força das regras de #pickCard/.ciCard acima, e vem depois, para valer. */
:is(#pickDialog, #cardInfo) :is(#pickCard, .ciCard) .card.duel .art h4.cardName { font-size: 4.6cqw !important; padding: .7cqw 11cqw .8cqw !important; line-height: 1.05 !important; }
:is(#pickDialog, #cardInfo) :is(#pickCard, .ciCard) .card.duel .clanIcon {; }

/* Nos modais a carta não recebe :hover (o invólucro recebe o mouse), então a classe .tilt do tilt.js faz o papel do hover do campo:
   mistura de verdade e brilho que segue o cursor, igual à carta do combate com o mouse em cima. */
:is(#pickDialog, #cardInfo) .card.duel.tilt .art::before { mix-blend-mode: var(--b1, normal); opacity: var(--o1, .3); transform: translateX(calc((50% - var(--fx)) / 3)); transition: transform .12s linear, opacity .2s; }
:is(#pickDialog, #cardInfo) .card.duel.tilt .art::after { mix-blend-mode: var(--b2, normal); opacity: var(--o2, 1); transform: translateX(calc((var(--fx) - 50%) / 3)); transition: transform .08s linear, opacity .2s; }

/* REGRA: a fonte do nome vale em TODO lugar onde a carta aparece (campo, virada, cena do duelo, modais de mana e ficha, coleção, inspetor, booster,
   Novas Cartas, loja, site e admin). `:not(#a):not(#b)` dá força de dois ids para vencer as regras por contexto (#colGrid, #pickCard, .ciCard, .poFront…).
   O tamanho de cada lugar continua o próprio. */
html:not(#fonteA):not(#fonteB) :is(.card.duel .art h4.cardName, .newCard .newPlate b) { font-family: 'Alegreya Sans', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: .02em !important; font-style: normal !important; }

/* Ícones de ATAQUE (luva dourada) e DANO (explosão) no lugar dos símbolos ⚔ e ✹, em todo lugar onde a carta mostra os números. */
.ico-atk,.ico-dmg{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.26em;margin-right:.08em;background:center / contain no-repeat;font-size:inherit;filter:drop-shadow(0 1px 1px #0008)}
.ico-atk{background-image:url('assets/icones/ataque.webp')}
.ico-dmg{background-image:url('assets/icones/dano.webp')}

/* Barra de ATAQUE · estrelas · DANO um tiquinho mais baixa (vale em toda carta: campo, modais, coleção, booster, Novas Cartas, site e admin). */
.card.duel .cardStats { translate: 0 .7cqw; }
.newBar { translate: 0 .7cqw; }

/* ---------- Carta selecionada para o combate bem mais evidente (Leo, 04/10/2026) ----------
   Moldura clara de 3 px, aura em duas camadas e pulso lento; as outras cartas da fileira escurecem um pouco para a escolhida saltar aos olhos.
   Só box-shadow e filter (sem mexer em transform, que o tilt e o golpe usam). Respeita "reduzir movimento". */
:is(.duelHand,.duelFighter) .card.duel.selected{border-color:#d9f8ff!important;
 box-shadow:0 0 0 3px #8ee8ff,0 0 0 8px #8ee8ff3d,0 0 36px 8px #5fd3ffcc,0 0 90px 22px #3aa6ff66,0 24px 38px #000d!important;animation:selPulse 1.4s ease-in-out infinite}
:is(.duelHand,.duelFighter) .card.duel.chosen{border-color:#fff0bf!important;
 box-shadow:0 0 0 3px #ffd77a,0 0 0 8px #ffd77a3d,0 0 36px 8px #f5c05add,0 0 90px 22px #ff9f3a66,0 24px 38px #000d!important}
.duelHand:has(.card.duel.selected) .card.duel:not(.selected):not(.chosen):not(.zone-used){filter:brightness(.72) saturate(.85)}
@keyframes selPulse{50%{box-shadow:0 0 0 3px #e9fbff,0 0 0 12px #8ee8ff55,0 0 52px 14px #8ee8ffee,0 0 130px 34px #3aa6ff88,0 24px 38px #000d}}
.reduced .card.duel.selected{animation:none!important}
@media(prefers-reduced-motion:reduce){:is(.duelHand,.duelFighter) .card.duel.selected{animation:none!important}}

/* Lua da logo nas outras telas: o GSAP (paralaxe de logo.js) zera o "translate" e a lua descia meio diâmetro, parecendo uma segunda lua sobre o botão Menu. Centraliza por margem, que o GSAP não toca. */
.logoStage .heroMoon { translate: none !important; margin: calc(var(--er, 104px) / -2) 0 0 calc(var(--er, 104px) / -2); }

/* Frasco de mana novo (arte do Leo, 05/10/2026): a mesma imagem no seletor, no confronto e nos HUDs. Vazio = apagado e cinza; cheio/prévia = aceso. */
.flask image{filter:grayscale(1) brightness(.5);opacity:.6;transition:filter .2s,opacity .2s}
.flask.full image,.flask.pv image,.dFlask image,.manaFlask image{filter:drop-shadow(0 0 3px #4cc2ffaa);opacity:1}
#flasks .flask.pe.full image{filter:grayscale(1) brightness(.5);opacity:.6}

/* Hover do frasco só no desenho (svg): mover o frasco inteiro tirava o mouse de cima dele e alternava 5/6 sem parar (Leo, 05/10/2026). */
#flasks .flask:hover:not(:disabled){transform:none!important;filter:none!important}
#flasks .flask svg{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
#flasks .flask.pv:not(:disabled) svg{transform:translateY(-3px) scale(1.05)}

/* Pacto de Sangue (Leo, 05/10/2026): -2 de vida, +1 de ataque no round; só 1 vez por partida e com 3 de vida ou mais. */
.pactToggle.on{border-color:#e0405f!important;background:linear-gradient(180deg,#4a121c,#2a0f12)!important}
.pactToggle.on .furyIcon svg{filter:drop-shadow(0 0 8px #ff2a4a)}
.pactToggle.on .furySwitch{background:#c0283f!important}
.pactToggle .newTag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;background:#e0382f;color:#fff;font:800 9px/1.3 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.14em;vertical-align:middle}
.duelOverlay .dPact{visibility:hidden}.duelOverlay .dPact.on{visibility:visible;color:#ff8d9a}
.duelOverlay .dPact b{color:#ff8d9a}
.duelCard.pact{filter:drop-shadow(0 0 14px #ff2a4a99)}
/* ===== FÚRIA com aura em WebGL (furia.js, 05/10/2026): a tela de fogo sai da carta; a chama em CSS fica só de reserva. ===== */
.card .furyAura { position: absolute; z-index: 8; pointer-events: none; mix-blend-mode: screen; }
.card.furyGL { overflow: visible !important; }
#pickDialog.furyOn #pickCard .card.duel.furyGL::after, .duelFighter .card.duel.fury.furyGL::after { display: none; }
#pickDialog.furyOn #pickCard .card.duel.furyGL, .duelFighter .card.duel.fury.furyGL {
  animation: furyShake .16s linear infinite, furyGlow .5s ease-in-out infinite alternate !important;
  box-shadow: 0 0 0 2px #ffb347, 0 0 18px #ff6a2bcc, 0 0 60px #ff3d1f88 !important;
}
.duelFighter .card.duel.fury.furyGL.lost { animation: none !important; box-shadow: 0 0 0 1px #ff6a2b66 !important; }
@media (prefers-reduced-motion: reduce) { #pickDialog.furyOn #pickCard .card.duel.furyGL, .duelFighter .card.duel.fury.furyGL { animation: none !important; } }
.reduced #pickDialog.furyOn #pickCard .card.duel.furyGL, .reduced .duelFighter .card.duel.fury.furyGL { animation: none !important; }
/* O fogo da Fúria passa da borda do modal (no celular o modal rola e o fogo fica dentro). */
@media (min-width: 761px) { #pickDialog.furyOn { overflow: visible; } }

/* Carta da tela final (resultado): a carta é a do campo (.duelHand); só a TIPOGRAFIA volta ao padrão dos modais (fonte e tamanho em cqw), porque `dialog p {font-size:17px}` e a caixa alta do diálogo a deixavam gigante (Leo, 05/10/2026). O espaçamento continua o do campo. */
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText :is(p.ability, p.clanAbility, .abT) { font: 400 5cqw/1.2 "Segoe UI", Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText .abK { font: 700 3.3cqw/1 sans-serif !important; letter-spacing: .18em !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardStats .stars { font-size: min(8cqw, calc(33cqw / var(--n, 5))) !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText :is(p.ability, p.clanAbility) { text-shadow: 0 1px 3px #000, 0 0 8px #000; }
:is(#result .rsCardFrame):not(#rsA) .card.duel :is(.ability.off, .ability.locked, .clanAbility.none, .clanAbility.off) { font-style: italic !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText :is(p.ability, p.clanAbility, .abT, .abK) { text-shadow: 0 .45cqw 1.34cqw #000, 0 0 3.57cqw #000 !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText :is(p.ability.act, p.ability.act .abT, p.ability.act .abK) { text-shadow: 0 0 3.57cqw #ffd36bcc, 0 .45cqw 1.34cqw #000 !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText :is(p.ability.act, p.ability.act .abT) { font-weight: 700 !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardText :is(.ability.off, .ability.locked, .clanAbility.none, .clanAbility.off) .abT { font-style: italic !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardStats .stars { font-family: "Segoe UI", Arial, sans-serif !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .cardStats :is(.atk, .dmg) { font: 700 8.6cqw/.94 "Segoe UI", Arial, sans-serif !important; }
:is(#result .rsCardFrame):not(#rsA) .card.duel .art h4.cardName { font-size: 5.4cqw !important; line-height: 1.08 !important; }

/* Só os NÚMEROS da Fúria e do Pacto um pouco maiores e coloridos, na mesma linha do texto (Leo, 05/10/2026). */
#pickDialog .furyToggle .furyText small b.fv{display:inline!important;position:static!important;margin:0!important;padding:0!important;float:none!important;font:800 1.22em/1 'Alegreya Sans',system-ui,sans-serif!important;color:#ffd9a0;letter-spacing:0!important;white-space:nowrap}
#pickDialog .pactToggle .furyText small b.fv{color:#ff9aa8}

/* Cartas do clã Leader: placa do nome sempre vermelha, em qualquer raridade e em qualquer lugar (Leo, 07/10/2026) */
:root:root .card.duel.clan-leader .art h4.cardName,:root:root .card.duel.clan-isleader .art h4.cardName{background:linear-gradient(180deg,#d8222f 0%,#6e0a14 100%)!important;border-bottom:max(2px,.8cqw) solid #ff8a8f!important;color:#fff0f0!important;box-shadow:0 .8cqw 2.4cqw #0008,0 0 2cqw #ff2a3a66!important;animation:none!important}