/* =========================================================
   Arena Elemental — arena de pets com movimento livre
   (src/minigames/pet-arena.js)
   ========================================================= */

.game-stage--pet-arena { background: #1d3b2a; touch-action: none; user-select: none; -webkit-user-select: none; }

.pa {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  color: #f6f8ff; font-family: var(--font-body);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ground2) 55%, #141833), #121630);
}
.pa-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pa.is-dead .pa-canvas { filter: grayscale(.75) brightness(.8); }
.pa.is-low::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 70px rgba(255, 40, 70, .55); animation: pa-pulse 1s ease-in-out infinite;
}
@keyframes pa-pulse { 50% { opacity: .45; } }

/* ---------- botões e etiquetas ---------- */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 18px; 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);
}
.pa-btn:active { transform: scale(.96); }
.pa-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; align-self: center;
}
.pa-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--el); color: #10131f; font: 700 .66rem var(--font-display); white-space: nowrap;
  box-shadow: inset 0 -1px rgba(0,0,0,.18);
}
.pa-tag { font: 700 .66rem var(--font-display); padding: 2px 8px; border-radius: var(--r-pill); background: rgba(0,0,0,.35); }
.pa-tag--emprestado { color: #fde68a; border: 1px dashed rgba(253,230,138,.6); }
.pa-tag--recruta { color: #bae6fd; border: 1px dashed rgba(186,230,253,.6); }
.pa-edge { font: 800 .72rem var(--font-display); padding: 1px 6px; border-radius: 6px; }
.pa-edge.is-good { background: #fde047; color: #3a2a00; }
.pa-edge.is-bad { background: rgba(255,255,255,.18); color: #e2e8f0; }

/* ---------- preparação ---------- */
.pa-prep {
  position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 56px 10px 18px;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--sky1) 55%, transparent), transparent 70%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}
.pa-prep__head { text-align: center; display: grid; gap: 4px; justify-items: center; }
.pa-prep__gym { font: 700 .75rem var(--font-display); color: #e0e7ff; }
.pa-prep__title { font-size: 1.4rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pa-prep__tip { font-size: .85rem; color: #ffe9a8; background: rgba(0,0,0,.28); border-radius: var(--r-md); padding: 6px 10px; max-width: 560px; }
.pa-prep__training { font: 700 .82rem var(--font-display); color: #86efac; }
.pa-prep__block {
  display: grid; gap: 8px; padding: 10px; border-radius: var(--r-md);
  background: rgba(10,14,40,.45); border: 1px solid rgba(255,255,255,.12); max-width: 760px; width: 100%; margin: 0 auto;
}
.pa-prep__block h3 { font-size: .95rem; }
.pa-prep__note { font-size: .8rem; color: #c9d2ff; }

.pa-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pa-pick {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 18px 6px 8px;
  border-radius: var(--r-md); border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07);
  color: inherit; cursor: pointer; font: inherit; text-align: center;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pa-pick:active { transform: scale(.97); }
.pa-pick.is-on { border-color: #7dd3fc; background: rgba(125,211,252,.14); }
.pa-pick.is-lead { border-color: #fde047; background: rgba(253,224,71,.16); box-shadow: 0 0 0 3px rgba(253,224,71,.18); }
.pa-pick.is-borrowed { border-style: dashed; }
.pa-pick__lead {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 800 .66rem var(--font-display); padding: 2px 8px; border-radius: var(--r-pill); background: #fde047; color: #3a2a00;
}
.pa-pick__lead--ally { background: #7dd3fc; color: #062a3a; }
.pa-pick__art { width: 66px; height: 66px; }
.pa-pick__art > svg { width: 100%; height: 100%; }
.pa-pick__name { font: 700 .86rem var(--font-display); }
.pa-pick__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.pa-pick__moves { font-size: .66rem; color: #c9d2ff; line-height: 1.2; }

.pa-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pa-role {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-md);
  border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: inherit; cursor: pointer; font: inherit; text-align: center;
}
.pa-role.is-on { border-color: #fde047; background: rgba(253,224,71,.14); }
.pa-role__icon { font-size: 1.3rem; }
.pa-role strong { font: 700 .8rem var(--font-display); }
.pa-role small { font-size: .64rem; color: #c9d2ff; line-height: 1.2; }

.pa-rivals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pa-rival { display: grid; justify-items: center; gap: 3px; padding: 6px; border-radius: var(--r-md); background: rgba(255,95,122,.12); border: 1px solid rgba(255,95,122,.35); font-size: .82rem; }

/* ---------- árvore de golpes ---------- */
.pa-tree { list-style: none; margin: 0; padding: 0 0 0 10px; display: grid; gap: 6px; border-left: 3px solid rgba(255,255,255,.18); }
.pa-node { position: relative; display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; }
.pa-node::before {
  content: ''; position: absolute; left: -17px; top: 50%; width: 11px; height: 11px; transform: translateY(-50%);
  border-radius: 50%; background: #1b2045; border: 2px solid rgba(255,255,255,.4);
}
.pa-node.is-reached::before { background: #fde047; border-color: #fff7c2; }
.pa-node__lv { font: 800 .74rem var(--font-display); color: #c9d2ff; background: rgba(255,255,255,.08); border-radius: 8px; padding: 3px 6px; text-align: center; }
.pa-node.is-reached .pa-node__lv { color: #3a2a00; background: #fde047; }
.pa-node__body { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pa-node__hint { font-size: .7rem; color: #c9d2ff; width: 100%; font-style: normal; }
.pa-node__move {
  font: 700 .74rem var(--font-display); padding: 3px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--el) 30%, rgba(10,14,40,.6)); border: 1px solid color-mix(in srgb, var(--el) 70%, transparent);
}
.pa-node__opt { font: 700 .72rem var(--font-display); padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.3); }
.pa-node__opt.is-picked { background: #fde047; color: #3a2a00; border-style: solid; }

/* ---------- HUD da partida ---------- */
.pa-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pa-hud button, .pa-stickzone { pointer-events: auto; }
.pa-top { position: absolute; top: 52px; left: 8px; right: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.pa-me {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 14px;
  background: rgba(10,14,40,.62); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); min-width: 0; flex: 0 1 170px;
}
.pa-me__art { width: 38px; height: 38px; flex: none; border-radius: 50%; background: rgba(255,255,255,.12); overflow: hidden; }
.pa-me__art > svg { width: 100%; height: 100%; }
.pa-me__info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.pa-me__row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pa-me__lv { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fde047; color: #3a2a00; font: 800 .7rem var(--font-display); }
.pa-me__name { font: 700 .76rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-me__buff { font: 700 .62rem var(--font-display); color: #fde68a; }
.pa-me__bar { position: relative; height: 9px; border-radius: 5px; background: rgba(0,0,0,.45); overflow: hidden; }
.pa-me__bar--xp { height: 4px; }
.pa-me__hp { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22c55e, #86efac); border-radius: inherit; transition: width .15s linear; }
.pa-me__xp { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #a78bfa, #f0abfc); border-radius: inherit; }
.pa-me__hptext { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .55rem var(--font-display); color: #fff; text-shadow: 0 1px 2px #000; }

.pa-score {
  display: grid; gap: 1px; justify-items: center; padding: 3px 8px; border-radius: 12px;
  background: rgba(10,14,40,.62); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px);
}
.pa-score__row { display: flex; align-items: center; gap: 8px; }
.pa-score__row--towers { gap: 6px; font-size: .5rem; letter-spacing: -1px; }
.pa-score__kills { font: 800 1.05rem var(--font-display); min-width: 18px; text-align: center; }
.pa-score__kills.is-blue { color: #4cc9ff; }
.pa-score__kills.is-red { color: #ff5f7a; }
.pa-score__clock { font: 700 .82rem var(--font-display); color: #fff; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.1); }
.pa-score__clock.is-late { color: #fecaca; background: rgba(239,68,68,.35); }
.pa-mini {
  width: 112px; height: 70px; flex: none; border-radius: 10px; border: 2px solid rgba(255,255,255,.3);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

.pa-feed { position: absolute; top: 128px; left: 50%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; width: min(92%, 420px); }
.pa-feed__item {
  font: 700 .74rem var(--font-display); padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(10,14,40,.7); border: 1px solid rgba(255,255,255,.14); text-align: center;
  animation: pa-feed-in .25s ease-out;
}
@keyframes pa-feed-in { from { opacity: 0; transform: translateY(-6px); } }

.pa-side { position: absolute; left: 10px; top: 104px; display: grid; gap: 6px; }
.pa-mini-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,14,40,.62); font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(6px);
}
.pa-mini-btn.is-on { background: rgba(125,211,252,.4); box-shadow: 0 0 0 3px rgba(125,211,252,.35); }

/* Joystick flutuante: aparece onde o dedo toca — em qualquer lugar da tela
   (os botões ficam por cima e continuam funcionando com outro dedo). */
.pa-stickzone { position: absolute; inset: 0; touch-action: none; }
.pa-stick {
  position: absolute; left: 82px; bottom: 82px; width: 104px; height: 104px; transform: translate(-50%, 50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(10,14,40,.28); opacity: .7;
  pointer-events: none;
}
.pa-stick.is-on { bottom: auto; transform: translate(-50%, -50%); opacity: 1; }
.pa-stick__knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c7d2fe 60%, #818cf8); box-shadow: 0 4px 10px rgba(0,0,0,.4);
}

/* Botões de golpe em arco, no canto de baixo à direita. */
.pa-skills { position: absolute; right: 12px; bottom: 16px; width: 200px; height: 200px; }
.pa-skill {
  --size: 62px; --cd: 0;
  position: absolute; width: var(--size); height: var(--size); border-radius: 50%; padding: 0;
  display: grid; place-items: center; align-content: center; gap: 0;
  border: 2px solid color-mix(in srgb, var(--el) 80%, #fff);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--el) 55%, #fff), color-mix(in srgb, var(--el) 70%, #10132a) 70%);
  color: #fff; font: inherit; cursor: pointer; touch-action: none; overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.4), inset 0 -3px rgba(0,0,0,.2);
  transition: transform .08s;
}
.pa-skill:active { transform: scale(.92); }
.pa-skill::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(10,12,30,.72) calc(var(--cd) * 360deg), transparent 0);
}
.pa-skill.is-ready { animation: pa-ready 1.6s ease-in-out infinite; }
@keyframes pa-ready { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--el) 45%, transparent), 0 5px 14px rgba(0,0,0,.4); } }
.pa-skill.is-locked { filter: grayscale(1) brightness(.55); }
.pa-skill.is-locked .pa-skill__name { visibility: hidden; }
.pa-skill__icon { position: relative; font-size: 1.35rem; line-height: 1; }
.pa-skill__name {
  position: relative; max-width: 92%; font: 700 .5rem var(--font-display); line-height: 1.05; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.pa-skill__cd { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.15rem var(--font-display); text-shadow: 0 2px 4px #000; }
.pa-skill__lock { position: absolute; bottom: 6px; font: 800 .58rem var(--font-display); color: #fff; }
.pa-skill--basico { --size: 84px; right: 0; bottom: 0; }
.pa-skill--basico .pa-skill__icon { font-size: 1.8rem; }
.pa-skill--basico .pa-skill__name { font-size: .62rem; }
.pa-skill--forte { right: 104px; bottom: 6px; }
.pa-skill--especial { right: 80px; bottom: 80px; }
.pa-skill--extra { right: 8px; bottom: 104px; }
.pa-skill--supremo { --size: 58px; right: 132px; bottom: 132px; border-width: 3px; border-color: #fde047; }

.pa-choice {
  position: absolute; left: 50%; top: 160px; transform: translateX(-50%); width: min(94%, 420px);
  display: grid; gap: 6px; padding: 10px; border-radius: var(--r-md); text-align: center;
  background: rgba(10,14,40,.85); border: 2px solid #fde047; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  pointer-events: auto; animation: pa-feed-in .25s ease-out;
}
.pa-choice__title { font: 700 .9rem var(--font-display); color: #fde047; }
.pa-choice__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pa-choice__opt {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font: inherit; cursor: pointer;
}
.pa-choice__icon { font-size: 1.3rem; }
.pa-choice__opt b { font: 700 .86rem var(--font-display); }
.pa-choice__opt small { font-size: .68rem; color: #c9d2ff; }
.pa-choice__opt kbd { position: absolute; top: 4px; right: 6px; font-size: .6rem; opacity: .6; }

.pa-dead {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: var(--r-pill);
  background: rgba(10,14,40,.82); font: 700 .95rem var(--font-display); text-align: center; white-space: nowrap;
}

.pa-treepanel, .pa-result {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 56px 12px 12px;
  background: rgba(6,8,24,.6); backdrop-filter: blur(3px);
}
.pa-treepanel__card, .pa-result__card {
  display: grid; gap: 10px; width: min(100%, 460px); max-height: 100%; overflow-y: auto; padding: 16px;
  border-radius: var(--r-lg, 20px); background: linear-gradient(180deg, #262c5c, #161a3a); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.pa-treepanel__card .pa-btn { justify-self: center; }
.pa-result__card { text-align: center; justify-items: center; }
.pa-result__title { font-size: 1.6rem; }
.pa-result__stars { display: flex; gap: 6px; font-size: 2rem; color: rgba(255,255,255,.2); }
.pa-result__stars .is-on { color: #fde047; text-shadow: 0 0 12px rgba(253,224,71,.6); }
.pa-result__line { font: 700 .85rem var(--font-display); color: #c9d2ff; }
.pa-result__table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pa-result__table th, .pa-result__table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; }
.pa-result__table td + td, .pa-result__table th + th { text-align: center; }
.pa-result__table tr.is-me td { color: #fde68a; font-weight: 700; }

@media (min-width: 720px) {
  .pa-mini { width: 168px; height: 105px; }
  .pa-me { flex-basis: 220px; }
  .pa-skills { transform: scale(1.12); transform-origin: bottom right; }
}
@media (max-height: 520px) {
  .pa-skills { transform: scale(.82); transform-origin: bottom right; }
  .pa-feed { top: 100px; }
  .pa-choice { top: 96px; }
}

/* ---------- on-line: times na escolha e contagem ---------- */
.pa-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-team { display: grid; gap: 5px; align-content: start; padding: 8px; border-radius: var(--r-md); border: 2px solid transparent; }
.pa-team--azul { background: rgba(76,201,255,.12); border-color: rgba(76,201,255,.35); }
.pa-team--rubi { background: rgba(255,95,122,.12); border-color: rgba(255,95,122,.35); }
.pa-team.is-mine { box-shadow: 0 0 0 3px rgba(253,224,71,.35); }
.pa-team__name { font: 700 .82rem var(--font-display); }
.pa-team__seat { display: grid; gap: 1px; padding: 5px 8px; border-radius: 10px; background: rgba(10,14,40,.45); }
.pa-team__seat.is-ready { background: rgba(34,197,94,.22); }
.pa-team__seat.is-bot { opacity: .65; }
.pa-team__who { font: 700 .8rem var(--font-display); }
.pa-team__seat small { font-size: .68rem; color: #c9d2ff; }
.pa-prep__error { color: #fecaca; background: rgba(239,68,68,.25); border-radius: var(--r-md); padding: 6px 10px; text-align: center; font-size: .85rem; }
.pa-btn:disabled { opacity: .7; cursor: default; }
.pa-count { z-index: 6; }
.pa-count[hidden] { display: none; }