/* Arena do duelo, ajustes do Leo (01/10/2026). Carregado depois de cardstats.css e tilt.css.
   1. HUDs da Corte e do jogador com a mesma altura, espaçamento e alinhamento (eram 56px e 66px).
   2. Faixa "Duelo · Duelista" e trilha de rounds sempre acima das cartas inclinadas.
   3. Habilidade da carta e do clã visíveis sem passar o mouse, acima da barra de ataque e dano.
   4. Fundo com mais camadas: estrelas, eclipse com coroa, névoa, brasas e vinheta. Só CSS, sem imagem nova. */

/* ---------- 1. HUDs simétricos ---------- */
/* Mesma altura, mesmo respiro e retrato/nome/vida/mana nas mesmas posições nos dois lados (o HUD do jogador era 8px mais alto). */
#gameView .hud{box-sizing:border-box;height:64px;min-height:64px;padding:0 14px;align-items:center}
#gameView .hud .portrait{width:44px;height:44px;margin:0}
#gameView .hud .hudName{width:200px;min-width:200px;overflow:hidden}
#gameView .hud .hudName h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gameView .hud .stats{height:100%;align-items:center;margin-top:0;margin-bottom:0}
#gameView .hudEnemy .stats,#gameView .hudPlayer .stats{margin-left:auto;margin-right:0}
/* Só o painel de mana antigo (escondido hoje) pode crescer o HUD do jogador. */
#gameView .hudPlayer:has(#manaPanel:not([hidden])){height:auto;min-height:64px;padding-block:6px}
@media(min-width:761px) and (max-height:780px){#gameView .hud{height:56px;min-height:56px}#gameView .hud .portrait{width:38px;height:38px}}
@media(max-width:760px){#gameView .hud{height:auto;min-height:48px;padding:6px 8px}#gameView .hud .portrait{width:32px;height:32px}#gameView .hud .hudName{width:auto;min-width:0}}

/* ---------- 2. Rounds acima das cartas ----------
   z-index só vale com position; a faixa era static, então a carta inclinada (z-index 5) passava por cima. */
#gameView .midLine{position:relative;z-index:8}
#gameView .midLine .roundInfo{position:relative;z-index:8}

/* ---------- 3. Habilidades sempre visíveis ---------- */
:is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText{background:linear-gradient(transparent,#0b0812e0 22%,#0b0812f5);padding-top:8cqw;padding-bottom:20cqw}
:is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText>small,
:is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
:is(.duelHand,.duelFighter,.ciCard) .card.duel:is(:hover,:focus-visible,.selected) .cardText{padding-top:8cqw;padding-bottom:20cqw}
/* Cartas muito pequenas (celular): só a habilidade da carta, numa linha. */
@media(max-width:760px){
 :is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText>small,
 :is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText p+p{display:none}
 :is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText p{-webkit-line-clamp:1}}

/* ---------- 4. Fundo com mais detalhes ---------- */
body[data-screen=game]::before,body[data-screen=game]::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1}
/* Céu: estrelas em três tamanhos, o eclipse atrás do selo de vez e uma faixa de nebulosa. */
body[data-screen=game]::before{
 background:
  radial-gradient(circle at 50% 9%,transparent 0 62px,#f6c76a 64px,#e8a24a66 70px,#c7663a26 104px,transparent 190px),
  radial-gradient(circle at 50% 9%,#07050c 0 63px,transparent 64px),
  radial-gradient(ellipse 70% 22% at 50% 12%,#7a3a8a33,transparent 70%),
  radial-gradient(ellipse 45% 30% at 18% 30%,#3b2a6b2e,transparent 70%),
  radial-gradient(ellipse 45% 30% at 82% 26%,#6b2a4a2e,transparent 70%),
  radial-gradient(1.4px 1.4px at 12px 18px,#fff8,transparent),
  radial-gradient(1px 1px at 70px 90px,#fff6,transparent),
  radial-gradient(1.8px 1.8px at 140px 40px,#ffe9b0aa,transparent),
  radial-gradient(1px 1px at 190px 150px,#fff5,transparent),
  radial-gradient(1.2px 1.2px at 40px 170px,#c9d8ff88,transparent);
 background-size:auto,auto,auto,auto,auto,220px 200px,220px 200px,220px 200px,220px 200px,220px 200px;
 -webkit-mask-image:linear-gradient(#000 0 55%,transparent 85%);mask-image:linear-gradient(#000 0 55%,transparent 85%);
 animation:arenaTwinkle 7s ease-in-out infinite alternate}
/* Chão: névoa baixa em duas camadas, brasas subindo devagar e vinheta nas bordas. */
body[data-screen=game]::after{
 background:
  radial-gradient(2px 2px at 30px 260px,#ffb35acc,transparent),
  radial-gradient(1.5px 1.5px at 150px 120px,#ff8a3d99,transparent),
  radial-gradient(2.2px 2.2px at 230px 330px,#ffd27aaa,transparent),
  radial-gradient(1.3px 1.3px at 300px 40px,#ff9b4a88,transparent),
  radial-gradient(ellipse 60% 18% at 25% 100%,#a87bd033,transparent 70%),
  radial-gradient(ellipse 60% 18% at 78% 100%,#d07b9a2b,transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,#05030acc 100%);
 background-size:340px 400px,340px 400px,340px 400px,340px 400px,auto,auto,auto;
 -webkit-mask-image:linear-gradient(transparent 20%,#000 60%);mask-image:none;
 animation:arenaEmbers 26s linear infinite}
@keyframes arenaTwinkle{from{opacity:.75}to{opacity:1}}
@keyframes arenaEmbers{from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:40px -400px,-30px -400px,20px -400px,-40px -400px,0 0,0 0,0 0}}
@media(prefers-reduced-motion:reduce){body[data-screen=game]::before,body[data-screen=game]::after{animation:none}}
.reduced body[data-screen=game]::before,.reduced body[data-screen=game]::after,body.reduced[data-screen=game]::before,body.reduced[data-screen=game]::after{animation:none}

/* ---------- 5. Cartas já usadas / derrotadas continuam opacas ----------
   Antes usavam opacity .42 e o fundo (eclipse, estrelas, brasas) aparecia através delas. Agora só escurecem e perdem a cor. */
:is(.duelHand,.duelFighter,.ciCard) .card.duel.zone-used,
:is(.duelHand,.duelFighter,.ciCard) .card.duel.zone-used:not(.chosen){opacity:1;filter:grayscale(.8) brightness(.62) saturate(.8)}
:is(.duelHand,.duelFighter,.ciCard) .card.duel.zone-used:not(.chosen):hover{opacity:1;filter:grayscale(.45) brightness(.9)}
:is(.duelHand,.duelFighter,.ciCard) .card.duel.pastLoss{filter:grayscale(1) brightness(.5)!important}
:is(.duelHand,.duelFighter,.ciCard) .card.duel.zone-used{background-color:#0b0812}

/* ---------- 6. Botão "Dica" removido da tela (Leo, 01/10/2026) ----------
   Fica no HTML com `hidden` para o ui.js (que lê #suggest) continuar funcionando; basta tirar o `hidden` para voltar. */
#suggest{display:none!important}

/* ---------- 7. Efeitos ativos neste round em destaque (Leo, 01/10/2026) ----------
   ui.js marca a habilidade (.ability) ou o bônus de clã (.clanAbility) que tem condição ("quando joga primeiro/em segundo", "revanche"):
   .act = a condição vale neste round (etiqueta ATIVA, brilho); .off = não vale agora (apagada). Sem condição, fica como antes. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act {
  color: #fff3c4; font-weight: 700; padding: 1px 5px 1px 6px; margin-left: -2px; border-radius: 4px; border-left: 3px solid var(--actc, #ffd36b);
  background: linear-gradient(90deg, color-mix(in srgb, var(--actc, #ffd36b) 38%, transparent), color-mix(in srgb, var(--actc, #ffd36b) 8%, transparent) 75%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--actc, #ffd36b) 80%, transparent), 0 1px 3px #000;
  box-shadow: 0 0 14px color-mix(in srgb, var(--actc, #ffd36b) 35%, transparent); animation: actPulse 2.4s ease-in-out infinite;
}
:is(.duelHand, .duelFighter, .ciCard) .card.duel .clanAbility.act { --actc: var(--clan, #ffd36b); }
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act::before {
  content: 'ATIVA'; display: inline-block; margin-right: 5px; padding: 1px 5px 0; border-radius: 3px; vertical-align: .1em; font: 800 .74em/1.4 system-ui, sans-serif; letter-spacing: .08em;
  color: #2a1608; background: var(--actc, #ffd36b); text-shadow: none;
}
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).off { color: #8f849a; opacity: .75; font-style: italic; }
@keyframes actPulse { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--actc, #ffd36b) 22%, transparent); } 50% { box-shadow: 0 0 18px color-mix(in srgb, var(--actc, #ffd36b) 55%, transparent); } }
.reduced .card.duel :is(.ability, .clanAbility).act { animation: none; }
@media (prefers-reduced-motion: reduce) { :is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability, .clanAbility).act { animation: none; } }

/* Cena do combate: efeitos aplicados viram etiquetas grandes (verde = bom, vermelho = ruim) e o aviso que voa fica maior. */
.duelInfo em.eff { display: block; font: 800 14px/1.25 system-ui, sans-serif; text-align: center; padding: 5px 10px; border-radius: 8px; border: 1px solid; text-shadow: 0 1px 2px #000; animation: effIn .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.duelInfo em.eff.pos { color: #e9ffef; background: linear-gradient(90deg, #1d6a43, #14452d); border-color: #9fe0c0; box-shadow: 0 0 14px #6fe3a066; }
.duelInfo em.eff.neg { color: #ffe3e8; background: linear-gradient(90deg, #7a1f35, #4a1220); border-color: #ff9fb4; box-shadow: 0 0 14px #ff6f8f55; }
@keyframes effIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.abilityTag { font-size: 16px !important; padding: 6px 14px !important; border-width: 2px !important; box-shadow: 0 0 18px #6fe3a077, 0 4px 12px #000a !important; }
.abilityTag.rival { box-shadow: 0 0 18px #ff6f8f66, 0 4px 12px #000a !important; }

/* ---------- 8. Clã sem par: "Sem efeito" (Leo, 01/10/2026) ---------- */
:is(.duelHand,.duelFighter,.ciCard) .card.duel .clanAbility.none{color:#8f849a;font-style:italic;opacity:.8}

/* ---------- 9. Contraste no combate (Leo, 02/10/2026) ----------
   Rótulos e textos em cinza-lilás (#8f849a, #a897b3, #b9a4c7...) quase sumiam no fundo escuro. Agora ficam brancos.
   Habilidades que não valem agora (bloqueada, sem efeito, condição que não vale) continuam diferentes das ativas pelo itálico,
   mas num branco-gelo legível, sem a opacidade que apagava o texto. */
#gameView :is(small, .stats b span, .rounds span, .roundInfo span, .manaPick span, .furyText small),
.duelOverlay :is(small, .dRow small, .dLife),
#pickDialog :is(small, .pickClan, .manaPick span, .furyText small, .pickNumbers small),
#manaPanel :is(small, span),
.hud small { color: #fff; }
#gameView .rounds span:not(.win):not(.loss):not(.tie):not(.now) { color: #fff; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel :is(.ability.off, .ability.locked, .clanAbility.none, .clanAbility.off) { color: #ece6f3 !important; opacity: 1 !important; font-style: italic; }
#gameView #historyOpen span, #gameView #historyCount { color: #fff; opacity: 1; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel .clanName { color: #fff; }
#pickDialog :is(#pickAbility, #pickClanAbility).locked, #pickDialog #pickClanAbility i { color: #ece6f3; }
/* A ficha 3D da carta (cardinfo.css) segue a mesma regra: rótulos brancos; estrelas vazias num cinza claro que se lê; nada de opacidade que apague o texto. */
dialog.cardInfo :is(small, .ciStatus, em, .ciHint, p.ciEmpty, .ciBlock p, .ciBlock small) { color: #fff; opacity: 1; }
dialog.cardInfo :is(.ciBlock.off p, p.off, .ciBlock p[style*="opacity"]) { color: #ece6f3; opacity: 1 !important; font-style: italic; }
dialog.cardInfo :is(.ciStars i, .ciCardBar .st i):not(.on) { color: #cfc5da; }
dialog.cardInfo .ciRar { color: #fff; text-shadow: 0 1px 2px #000a; }