/* Frascos de mana e rubi de vida (Leo, 02/10/2026). Seletor de mana do modal da carta: 12 frascos (tubos de ensaio) lado a lado.
   Ao escolher a carta todos aparecem vazios; clicar no frasco N enche do 1 ao N de azul. Frascos acima do limite ficam apagados.
   Também a arte do ícone de vida (rubi) e de mana (frasco) no HUD e na cena do duelo. Carregado por último. */
#flasks { display: flex; gap: 4px; justify-content: flex-start; align-items: flex-end; width: 100%; margin: 6px 0 2px; }
.manaControls { display: block !important; margin: 0; } .manaControls > :not(#manaValue) { display: none !important; }
.manaPick > small { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
#manaValue { display: block; text-align: center; font: 700 20px var(--e-display, Georgia, serif); color: #8fd3ff; letter-spacing: .04em; margin-top: 4px; }
.manaPick { position: relative; }
.manaPick .manaControls + * { }

#flasks .flask {
  all: unset; box-sizing: border-box; flex: 0 0 calc((100% - 44px) / 12); min-width: 0; max-width: 44px; aspect-ratio: 40 / 100; /* sempre o tamanho de 12 frascos na fileira: com menos mana só somem frascos do final */ cursor: pointer; display: block; position: relative;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .2s;
}
#flasks .flask svg { width: 100%; height: 100%; display: block; overflow: visible; }
#flasks .flask:hover:not(:disabled) { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 8px #6fd3f588); }
#flasks .flask:focus-visible { outline: 2px solid #fff3d6; outline-offset: 3px; border-radius: 6px; }
#flasks .flask.off { opacity: .28; cursor: not-allowed; }
.flask .fGlass { fill: #0f1c2a99; stroke: #cfe9ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flask .fBack { fill: #0b1520; }
.flask .fRim { fill: #1d2f42; stroke: #cfe9ff; stroke-width: 1.5; }
.flask .fCork { fill: #8a6a3a; stroke: #e8c98b; stroke-width: 1.4; }
.flask .fShine { stroke: #ffffff55; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.flask .fLiquid { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .38s cubic-bezier(.34,1.3,.64,1); }
.flask .fLiq { fill: #2fa8ff; }
.flask .fTop { fill: #9be3ff; }
.flask .fBub { fill: #e6f7ff; opacity: 0; }
.flask.full .fLiquid { transform: scaleY(1); }
.flask.full .fGlass { stroke: #bfe9ff; filter: drop-shadow(0 0 5px #4cc2ff99); }
.flask.full .fBub { opacity: .85; animation: fBub 2.6s ease-in-out infinite; }
.flask.full .fBub.b2 { animation-delay: .8s; } .flask.full .fBub.b3 { animation-delay: 1.5s; }
@keyframes fBub { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flask .fLiquid, #flasks .flask { transition: none; } .flask.full .fBub { animation: none; } }
.reduced .flask .fLiquid, .reduced #flasks .flask { transition: none; } .reduced .flask.full .fBub { animation: none; }
#fight:disabled { opacity: .55; }

/* Ícones de vida e mana no HUD e na cena */
.lifeGem { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: 2px; filter: drop-shadow(0 0 6px #ff4d6d77); }
.manaFlask { width: .85em; height: 1.15em; vertical-align: -.2em; margin-right: 3px; filter: drop-shadow(0 0 6px #4cc2ff77); }
.dLife .lifeGem { width: 1em; height: 1em; }

/* Histórico e Nova partida saem da tela de combate (Leo, 02/10/2026) */
#historyOpen, #restart { display: none !important; }

/* Ícones elaborados de vida (rubi num medalhão de ouro) e mana (frasco na diagonal), alinhados ao valor (Leo, 02/10/2026) */
.hud .life > b, .hud .energy > b { display: inline-flex; align-items: center; gap: 7px; line-height: 1; }
.lifeGem, .manaFlask { flex: none; width: 34px; height: 34px; margin: 0; vertical-align: middle; filter: drop-shadow(0 2px 4px #000a); }
.hud .life > b span, .hud .energy > b span { align-self: flex-end; }
.dLife { display: inline-flex; align-items: center; gap: 6px; } .dLife .lifeGem { width: 30px; height: 30px; }
@media (max-width: 760px) { .lifeGem, .manaFlask { width: 26px; height: 26px; } }

/* Habilidade e Clã: dois blocos separados e bem estruturados na carta */
.card.duel .cardText { display: flex; flex-direction: column; gap: 1.6cqw; }
.card.duel .cardText p.ability, .card.duel .cardText p.clanAbility { display: block !important; margin: 0 !important; padding: 1.1cqw 2.2cqw 1.1cqw 2.8cqw !important; border-left: 2px solid #e8c98b; border-radius: 2px; background: linear-gradient(90deg, #e8c98b1c, #ffffff05); -webkit-line-clamp: unset !important; overflow: visible !important; }
.card.duel .cardText p.clanAbility { border-left-color: var(--clan, #78d6ef); background: linear-gradient(90deg, color-mix(in srgb, var(--clan, #78d6ef) 22%, transparent), #ffffff05); }
.card.duel .cardText .abK { display: none; font: 700 3.1cqw/1 var(--e-body, sans-serif); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #e8c98b; margin-bottom: .8cqw; }
.card.duel .cardText p.clanAbility .abK { color: var(--clan, #78d6ef); }
.card.duel .cardText .abT { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@container (min-width: 150px) { .card.duel .cardText .abK { display: block; } }

/* HUD de vida e mana: número e "/máx" na mesma linha, centrados com o ícone (corrige o "/15" solto) */
#gameView .hud .life > b, #gameView .hud .energy > b { display: inline-flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; }
#gameView .hud .life > b span, #gameView .hud .energy > b span { align-self: center; margin-left: -2px; font-size: 13px; opacity: .85; }
#gameView .hud .life, #gameView .hud .energy { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 150px; }
#gameView .hud .stats small { line-height: 1; margin: 0; }
#gameView .hud .life > b, #gameView .hud .energy > b { min-height: 34px; }
/* Histórico/Nova partida, ouro, diamantes e coleção saem do combate; o som vai para as Opções */
body[data-screen=game] header .actions :is(#goldPill, #gemPill, #collection) { display: none !important; }
#sound { display: none !important; }

/* HUD: vida e mana como um só elemento compacto (ícone + valor + barra + rótulo juntos e centralizados), barras um pouco mais curtas (Leo, 02/10/2026) */
#gameView .hud .stats { margin-left: auto; margin-right: 0; gap: 26px; justify-content: flex-end; }
#gameView .hud { padding-right: 8px; }
#gameView .hud .life, #gameView .hud .energy { width: 124px; min-width: 0 !important; align-items: center; justify-content: center; gap: 3px; text-align: center; }
#gameView .hud .life > b, #gameView .hud .energy > b { min-height: 0; justify-content: center; gap: 6px; }
#gameView .hud .life .lifeTrack, #gameView .hud .energy .lifeTrack { width: 100%; margin: 0; }
#gameView .hud .life small, #gameView .hud .energy small { display: block; text-align: center; margin: 0; letter-spacing: .2em; white-space: nowrap; }
#gameView .hud .life .lifeGem, #gameView .hud .energy .manaFlask { width: 30px; height: 30px; }

/* Combate centralizado na tela: o cabeçalho flutua por cima (transparente) e o tabuleiro ocupa a altura toda, com folga igual em cima e embaixo */
@media (min-width: 1500px) and (min-height: 620px) {
  body[data-screen=game] > header { position: absolute; left: 0; right: 0; top: 0; z-index: 70; background: transparent !important; border: 0 !important; pointer-events: none; }
  body[data-screen=game] > header > * { pointer-events: auto; }
  body[data-screen=game] #gameView { height: 100dvh; padding-top: 14px; padding-bottom: 14px; box-sizing: border-box; }
  body[data-screen=game] #gameView .battle { --cw: min(calc((100dvh - 250px) / 2.9), calc((100vw - 48px - 3 * var(--gap)) / 4), 330px); }
}

/* Telas menores (notebook): cabeçalho mais baixo no combate e mesma folga embaixo, para o tabuleiro ficar mais centralizado */
@media (min-width: 761px) and (max-width: 1499px) and (min-height: 620px) {
  body[data-screen=game] > header { height: 44px; padding-block: 0; }
  body[data-screen=game] #gameView { height: calc(100dvh - 44px); padding-top: 4px; padding-bottom: 12px; box-sizing: border-box; }
  body[data-screen=game] #gameView .battle { --cw: min(calc((100dvh - 246px) / 2.9), calc((100vw - 48px - 3 * var(--gap)) / 4), 330px); }
}

/* Habilidade e clã um pouco maiores no combate, usando a folga entre os blocos e as estrelas (Leo, 02/10/2026) */
:is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText p.ability, :is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText p.clanAbility { font-size: max(9px, 5cqw) !important; line-height: 1.2 !important; -webkit-line-clamp: 2; }
:is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText .abK { font-size: max(6px, 3.3cqw); margin-bottom: .3cqw; }
:is(.duelHand,.duelFighter,.ciCard) .card.duel .cardText, :is(.duelHand,.duelFighter,.ciCard) .card.duel:is(:hover,:focus-visible,.selected) .cardText { padding-bottom: 15cqw; }

/* Prévia do mouse: os frascos acima do cursor esvaziam (mesmo os já escolhidos), com a mesma animação de encher/esvaziar. */
#flasks .flask.pe.full .fLiquid { transform: scaleY(0); }
#flasks .flask.pe.full .fGlass { stroke: #cfe9ff; filter: none; }
#flasks .flask.pe.full .fBub { opacity: 0; animation: none; }