/* =========================================================
   Liga Elemental — batalha de pets por turnos
   (src/minigames/pet-battle.js)
   ========================================================= */

.game-stage--battle { background: #20264a; touch-action: manipulation; }

.pb {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: 52px 8px 8px;
  color: #f6f8ff; font-family: var(--font-body);
  background: linear-gradient(180deg, #2b3266, #171b38);
}

/* ---------- botões comuns ---------- */
.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14);
  color: #fff; font: 700 .95rem var(--font-display); cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.pb-btn:active:not(:disabled) { transform: scale(.96); }
.pb-btn:disabled { opacity: .45; cursor: default; }
.pb-btn--sm { min-height: 38px; padding: 6px 12px; font-size: .82rem; }
.pb-btn--ghost { background: transparent; }
.pb-btn--go { background: linear-gradient(135deg, #ffcf4d, #ff8a3d); color: #3a1a00; border-color: #ffe08a; box-shadow: 0 6px 18px rgba(255,138,61,.4); font-size: 1.1rem; padding: 10px 26px; }

.pb-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--el); color: #10131f; font: 700 .68rem var(--font-display); white-space: nowrap;
  box-shadow: inset 0 -1px rgba(0,0,0,.18);
}

.pb-hp { position: relative; height: 9px; border-radius: 6px; background: rgba(0,0,0,.35); overflow: hidden; }
.pb-hp__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #34d399, #6ee7b7); transition: width .45s var(--ease-liquid); }
.pb-hp.is-mid .pb-hp__fill { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.pb-hp.is-low .pb-hp__fill { background: linear-gradient(90deg, #ef4444, #fb7185); }

/* ---------- tela de equipe ---------- */
.pb-prep { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 8px; }
/* O cenário da arena aparece no alto da tela de equipe, esmaecendo para o fundo. */
.pb-prep__scene { bottom: auto; height: 190px; border-radius: var(--r-md); overflow: hidden; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.pb-prep > :not(.pb-prep__scene) { position: relative; z-index: 1; }
.pb-prep__head { padding-top: 64px; }
.pb-prep__head > * { text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.pb-prep__head { text-align: center; display: grid; gap: 4px; }
.pb-prep__gym { font: 700 .75rem var(--font-display); color: #c9d2ff; }
.pb-prep__title { font-size: 1.35rem; }
.pb-prep__tip { font-size: .85rem; color: #ffe9a8; background: rgba(0,0,0,.25); border-radius: var(--r-md); padding: 6px 10px; }
.pb-prep__block { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-md); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.pb-prep__block h3 { font-size: .95rem; }
.pb-prep__row { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-prep__note { font-size: .8rem; color: #c9d2ff; }
.pb-prep__allies { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-prep__training { font: 700 .82rem var(--font-display); color: #86efac; }
.pb-prep__wait { align-self: center; font: 700 .95rem var(--font-display); color: #ffe9a8; }
.pb-banner .pb-btn { justify-self: center; margin-top: 4px; }
/* "Lutar!" logo abaixo do título e preso no alto ao rolar: com muitos pets, ele nunca some lá embaixo. */
.pb-prep__actions {
  display: flex; gap: 10px; justify-content: center;
  position: sticky; top: -4px; z-index: 3; padding: 8px 0 10px;
  background: linear-gradient(180deg, #232a5a 70%, transparent);
}

/* Pets já vencidos (emprestados): recolhidos num menu. */
.pb-borrow { border-radius: var(--r-sm); background: rgba(0,0,0,.2); border: 1px solid rgba(253,230,138,.28); }
.pb-borrow__summary {
  display: grid; gap: 2px; padding: 8px 34px 8px 10px; position: relative;
  cursor: pointer; list-style: none; min-height: 44px; align-content: center;
}
.pb-borrow__summary::-webkit-details-marker { display: none; }
.pb-borrow__summary::after {
  content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #fde68a; transition: transform .2s ease;
}
.pb-borrow[open] > .pb-borrow__summary::after { transform: translateY(-50%) rotate(180deg); }
.pb-borrow__title { font: 700 .85rem var(--font-display); color: #fde68a; }
.pb-borrow__sub { font-size: .76rem; color: #c9d2ff; }
.pb-borrow__list { padding: 0 8px 8px; }

.pb-mini { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: var(--r-sm); background: rgba(0,0,0,.22); min-width: 0; }
.pb-mini__art { width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.pb-mini__art svg { width: 100%; height: 100%; }
.pb-mini.is-compact .pb-mini__art { width: 42px; height: 42px; }
.pb-mini__info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: .78rem; min-width: 0; }
.pb-mini__info strong { font-family: var(--font-display); }
.pb-mini__lv { color: #c9d2ff; font-size: .7rem; }
.pb-mini__chips { display: inline-flex; gap: 3px; }
.pb-mini__hint { font: 700 .66rem var(--font-display); padding: 1px 6px; border-radius: var(--r-pill); }
.pb-mini__hint.is-good { background: #34d399; color: #052e1c; }
.pb-mini__hint.is-bad { background: #fb7185; color: #3b0712; }

.pb-pick { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: none; color: inherit; cursor: pointer; }
.pb-pick.is-on { border-color: #ffd34d; }
.pb-pick__mark { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #3b4380; font: 700 .8rem var(--font-display); }
.pb-pick.is-on .pb-pick__mark { background: #ffd34d; color: #3a1a00; }

/* ---------- arena ---------- */
.pb-arena {
  position: relative; flex: 1 1 auto; min-height: 220px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 4px; padding: 6px; border-radius: var(--r-md); overflow: hidden;
  background:
    radial-gradient(60% 22% at 72% 44%, rgba(255,255,255,.28), transparent 70%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 48%, var(--ground1) 48.2%, var(--ground2) 100%);
}
.pb-arena.is-shake { animation: pb-shake .4s linear; }
/* Cenário do ginásio (SVG do kit dos contos), atrás de tudo. */
.pb-arena__scene, .pb-prep__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pb-arena__scene > svg, .pb-prep__scene > svg { display: block; width: 100%; height: 100%; }
.pb-arena > :not(.pb-arena__scene) { position: relative; z-index: 1; }
.pb-arena > .pb-fx { position: absolute; z-index: 3; }

.pb-card {
  align-self: start; display: grid; gap: 3px; padding: 6px 8px; min-width: 0;
  border-radius: var(--r-sm); background: rgba(14,18,40,.82); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.25); z-index: 2;
}
.pb-card--rival { grid-area: 1 / 1; justify-self: start; width: min(100%, 280px); }
.pb-card--player { grid-area: 2 / 2; align-self: end; justify-self: end; width: min(100%, 280px); }
.pb-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pb-card__name { font: 700 .9rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-card__lv { font: 700 .7rem var(--font-display); color: #c9d2ff; flex: none; }
.pb-card__chips { display: flex; gap: 3px; flex-wrap: wrap; }
.pb-card__foot { display: flex; align-items: center; gap: 6px; font-size: .7rem; }
.pb-card__hp { font: 700 .7rem var(--font-display); color: #e2e8ff; }
.pb-card__icons { display: inline-flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.pb-card__dots { display: inline-flex; gap: 3px; margin-left: auto; }
.pb-icon { font-size: .72rem; line-height: 1; }
.pb-icon.is-up { color: #86efac; } .pb-icon.is-down { color: #fda4af; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.pb-dot.is-on { outline: 2px solid #fff; outline-offset: 1px; }
.pb-dot.is-out { background: #4b5280; }

.pb-spot { position: relative; display: grid; place-items: end center; min-height: 0; }
.pb-spot::before {
  content: ''; position: absolute; left: 50%; bottom: 4%; width: 86%; height: 18%;
  transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.28), transparent 72%),
    radial-gradient(closest-side, var(--ground1, #5fb85a) 0 74%, color-mix(in srgb, var(--ground2, #3f8f45) 80%, #000) 75% 88%, transparent 90%);
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.45);
}
.pb-spot--rival { grid-area: 1 / 2; }
.pb-spot--player { grid-area: 2 / 1; }
.pb-sprite { position: relative; width: min(100%, 150px); aspect-ratio: 1; display: grid; place-items: end center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.pb-spot--player .pb-sprite { width: min(100%, 170px); }
.pb-sprite svg { width: 100%; height: 100%; }
.pb-sprite.is-out { opacity: 0; transform: translateY(30%) scale(.7); transition: opacity .6s, transform .6s; }

.pb-sprite.is-lunge-up { animation: pb-lunge-up .45s ease-out; }
.pb-sprite.is-lunge-down { animation: pb-lunge-down .45s ease-out; }
.pb-sprite.is-hit { animation: pb-hit .45s linear; }
.pb-sprite.is-dodge { animation: pb-dodge .45s ease-out; }
.pb-sprite.is-glow { animation: pb-glow .7s ease-out; }
.pb-sprite.is-enter { animation: pb-enter .5s var(--ease-liquid); }
.pb-sprite.is-faint { animation: pb-faint .8s ease-in forwards; }

@keyframes pb-lunge-up { 40% { transform: translate(18%, -14%) scale(1.06); } }
@keyframes pb-lunge-down { 40% { transform: translate(-18%, 14%) scale(1.06); } }
@keyframes pb-hit {
  0%, 100% { transform: none; filter: none; }
  15% { transform: translateX(-8%); filter: brightness(2.4) drop-shadow(0 0 10px var(--flash, #fff)); }
  35% { transform: translateX(7%); }
  55% { transform: translateX(-5%); filter: brightness(1.8) drop-shadow(0 0 8px var(--flash, #fff)); }
  75% { transform: translateX(3%); }
}
@keyframes pb-dodge { 40% { transform: translateX(-22%) skewX(-8deg); opacity: .5; } }
@keyframes pb-glow { 40% { filter: brightness(1.4) drop-shadow(0 0 14px #86efac); } }
@keyframes pb-enter { from { transform: scale(.2); opacity: 0; } }
@keyframes pb-faint { to { transform: translateY(30%) scale(.7); opacity: 0; } }
@keyframes pb-shake {
  20% { transform: translate(var(--shake, 3px), calc(var(--shake, 3px) * -0.6)); }
  45% { transform: translate(calc(var(--shake, 3px) * -1), calc(var(--shake, 3px) * 0.6)); }
  70% { transform: translate(calc(var(--shake, 3px) * 0.5), calc(var(--shake, 3px) * 0.3)); }
}

.pb-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pb-float { z-index: 2;
  position: absolute; transform: translate(-50%, -50%);
  font: 800 1.35rem var(--font-display); color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 8px rgba(0,0,0,.35);
  animation: pb-float 1s ease-out forwards;
}
.pb-float.is-super { color: #ffd34d; font-size: 1.6rem; }
.pb-float.is-weak { color: #c7cbe0; font-size: 1.05rem; }
.pb-float.is-heal { color: #86efac; }
.pb-float.is-miss { color: #e2e8ff; font-size: 1rem; }
.pb-float.is-status { font-size: 1.6rem; }
@keyframes pb-float { from { opacity: 0; margin-top: 10px; } 20% { opacity: 1; } to { opacity: 0; margin-top: -40px; } }

/* Canvas das partículas dos golpes (batalha-pets/fx.js). */
.pb-fx__canvas { z-index: 0; pointer-events: none; }

/* ---------- painel de comandos ---------- */
.pb-panel { display: grid; gap: 6px; padding-top: 6px; }
.pb-msg {
  min-height: 52px; padding: 7px 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,.95); color: #1c2140; border: 2px solid #9aa6ff;
  font: 600 .9rem/1.35 var(--font-body); display: grid; align-content: center;
}
.pb-msg__line + .pb-msg__line { color: #4c3bd1; font-weight: 700; }
.pb-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Botão de golpe: base escura igual para todos (texto sempre legível); a cor
   do elemento vive no ícone, na borda e num brilho suave por trás. */
.pb-move {
  position: relative; display: flex; align-items: center; gap: 9px;
  min-height: 62px; padding: 8px 10px 8px 8px; text-align: left; overflow: hidden;
  border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--el) 55%, transparent);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--el) 34%, transparent), transparent 60%),
    linear-gradient(180deg, #1f2550, #151a3a);
  color: #f6f8ff; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 color-mix(in srgb, var(--el) 35%, #0a0d22), 0 6px 14px -8px color-mix(in srgb, var(--el) 70%, transparent);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), filter var(--t-fast);
}
.pb-move:hover:not(:disabled) { border-color: var(--el); }
.pb-move:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 color-mix(in srgb, var(--el) 35%, #0a0d22); }
.pb-move:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pb-move.is-super { border-color: #ffd34d; }
.pb-move__icon {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.2rem;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--el) 60%, #fff), var(--el) 55%, color-mix(in srgb, var(--el) 60%, #000));
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 2px rgba(255,255,255,.12);
}
.pb-move__body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.pb-move__name {
  font: 700 .86rem/1.15 var(--font-display); letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-right: 22px;
}
.pb-move__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-pill {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #d9defa; font: 700 .64rem/1.4 var(--font-display); white-space: nowrap;
}
.pb-pill.is-fx { background: color-mix(in srgb, var(--el) 35%, transparent); color: #fff; }
.pb-pill.is-cd { color: #c7cbe0; }
.pb-move__tag {
  position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 999px;
  font: 800 .66rem/1.4 var(--font-display);
}
.pb-move__tag.is-good { background: #ffd34d; color: #3a1a00; box-shadow: 0 0 10px rgba(255,211,77,.6); animation: pb-tag 1.6s ease-in-out infinite; }
.pb-move__tag.is-bad { background: rgba(255,255,255,.14); color: #c7cbe0; }
@keyframes pb-tag { 50% { transform: scale(1.1); } }
/* Recarregando: o botão escurece e mostra quantos turnos faltam. */
.pb-move__cool {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: rgba(12,15,38,.84); color: #fff; font: 800 .82rem var(--font-display); letter-spacing: .02em;
}
.pb-move__cool::before { content: ''; }
.pb-move.is-cooling .pb-move__cool { backdrop-filter: blur(1.5px); }
.pb-move:disabled { cursor: default; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pb-move:disabled:not(.is-cooling) { opacity: .72; }
.pb-move.is-cooling .pb-move__icon { filter: grayscale(.8); }

/* Etiqueta de emprestado (tela de equipe, troca e cartão de vida). */
.pb-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font: 700 .64rem/1.5 var(--font-display); white-space: nowrap; }
.pb-tag--borrow { background: #fde68a; color: #5a3a00; box-shadow: inset 0 -1px rgba(0,0,0,.12); }
.pb-card__top .pb-tag--borrow { padding: 0 5px; font-size: .62rem; }
.pb-pick.is-borrowed { border-style: dashed; }
.pb-pick.is-borrowed.is-on { border-style: solid; border-color: #fde68a; }
.pb-prep__note--borrow { color: #fde68a; font-weight: 600; }
.pb-extra { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

/* ---------- janelas ---------- */
.pb-modal { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 48px 10px 10px; background: rgba(8,10,26,.66); }
.pb-modal__box {
  width: min(100%, 460px); max-height: 100%; overflow-y: auto; display: grid; gap: 8px;
  padding: 12px; border-radius: var(--r-lg); background: #20264a; border: 1px solid rgba(255,255,255,.2);
  box-shadow: var(--shadow-lift);
}
.pb-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pb-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pb-types__row { display: grid; justify-items: start; gap: 3px; padding: 6px 8px; border-radius: var(--r-sm); background: rgba(255,255,255,.06); }
.pb-types__row.is-hot { background: rgba(255,211,77,.16); outline: 1px solid rgba(255,211,77,.5); }
.pb-types__line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .78rem; }
.pb-types__why { font-size: .72rem; color: #c9d2ff; }
.pb-types__rule { font-size: .8rem; color: #dfe4ff; }
.pb-members { display: grid; gap: 6px; }
.pb-member {
  display: grid; gap: 4px; padding: 6px; border-radius: var(--r-md); text-align: left;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; cursor: pointer;
}
.pb-member:disabled { opacity: .5; cursor: default; }
.pb-member__state { font: 700 .72rem var(--font-display); color: #c9d2ff; }

.pb-banner {
  position: absolute; left: 50%; top: 38%; z-index: 7; transform: translate(-50%, -50%);
  width: min(92%, 380px); display: grid; gap: 6px; text-align: center;
  padding: 16px 18px; border-radius: var(--r-lg); background: rgba(20,24,52,.94);
  border: 2px solid #ffd34d; box-shadow: var(--shadow-lift);
  animation: pb-enter .5s var(--ease-liquid);
}
.pb-banner strong { font: 700 1.3rem var(--font-display); }
.pb-banner span { font-size: .88rem; color: #e2e8ff; }
.pb-banner.is-lose { border-color: #9aa6ff; }

@media (min-width: 640px) {
  .pb { padding-left: 16px; padding-right: 16px; }
  .pb-moves { grid-template-columns: repeat(4, 1fr); }
  .pb-sprite { width: min(100%, 200px); }
  .pb-spot--player .pb-sprite { width: min(100%, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .pb-sprite, .pb-arena, .pb-float, .pb-move__tag { animation-duration: 1ms !important; }
}

/* ---------- relógio de ausência (duelo on-line) ---------- */
.pb-away {
  position: absolute; left: 50%; top: 56px; z-index: 8; transform: translateX(-50%);
  width: min(92%, 400px); display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-lg);
  background: rgba(20,24,52,.95); border: 2px solid #9aa6ff; color: #f6f8ff;
  font: 600 .88rem/1.3 var(--font-body); box-shadow: var(--shadow-lift);
  animation: pb-enter .35s var(--ease-liquid);
}
.pb-away__count {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #3b4380; font: 800 1.5rem var(--font-display);
}
.pb-away.is-me { border-color: #ffd34d; background: rgba(60,30,8,.95); }
.pb-away.is-me .pb-away__count { background: #ffd34d; color: #3a1a00; animation: pb-away-pulse 1s ease-in-out infinite; }
@keyframes pb-away-pulse { 50% { transform: scale(1.12); } }