/* Ginásios, Bosses e a arena de batalha — mesmo padrão das janelas Pescador/Loja/Missões. */

/* Ginásios */
.gymwin { width: min(600px, 95vw); height: min(800px, 94vh); }
.gymwin .wbody { display: grid; grid-template-rows: auto auto auto minmax(140px, 1fr) auto; gap: 10px; overflow: hidden; }
body.playing .gymtabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-inline: 6px; }
.gymtabs button > span { min-width: 0; line-height: 1.15; text-align: center; }
.gymtabs .pkicon { width: 16px; height: 16px; }
.gymtabcount { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 8px; color: var(--muted); background: rgb(255 255 255 / 6%); }
.gymtabcount.done { color: #20180a; background: var(--gold); }
.badgeicon { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.badgeicon.mini { width: 18px; height: 18px; image-rendering: auto; }
.profbadges { display: grid; gap: 6px; padding: 8px 10px; border-radius: 9px; background: linear-gradient(#0d1a24, #0a141c); border: 1px solid var(--gold-dim); }
.profleague { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; }
.profleague .small { color: var(--muted); font-weight: 600; }
.profbadgeicons { display: flex; flex-wrap: wrap; gap: 4px; }
.profbadgeicons .badgeicon { filter: grayscale(1) brightness(0.4); }
.profbadgeicons .badgeicon.earned { filter: drop-shadow(0 0 3px rgb(255 214 102 / 65%)); }
.gymcount { color: var(--gold); border-color: var(--gold-dim); font-weight: 700; white-space: nowrap; }
.badgecase {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; padding: 8px;
  border-radius: 10px; background: linear-gradient(#0d1a24, #0a141c); border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 18px rgb(0 0 0 / 55%), 0 0 10px rgb(232 200 114 / 10%);
}
body.playing .badgeslot {
  display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 8px;
  background: radial-gradient(#132433, #0a141c 70%); border: 1px solid #1d3242; color: var(--muted);
  font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.badgeslot .badgeicon { width: 48px; height: 48px; image-rendering: auto; filter: grayscale(1) brightness(0.45) contrast(0.9); transition: filter 0.2s, transform 0.2s; }
.badgeslot span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.playing .badgeslot.earned { border-color: var(--gold-dim); color: var(--gold); }
.badgeslot.earned .badgeicon { filter: drop-shadow(0 0 4px rgb(255 214 102 / 70%)); }
.badgeslot:hover .badgeicon { transform: scale(1.06); }
.badgecase[data-league="orange"] { border-color: #b8661e; box-shadow: inset 0 0 18px rgb(0 0 0 / 55%), 0 0 10px rgb(255 150 60 / 14%); }
.badgecase[data-league="outland"] { border-color: #6a7480; box-shadow: inset 0 0 18px rgb(0 0 0 / 55%), 0 0 10px rgb(170 190 210 / 14%); }
.badgecase[data-league="indigo"] { border-color: #5a4ab8; box-shadow: inset 0 0 18px rgb(0 0 0 / 55%), 0 0 10px rgb(130 110 255 / 18%); }
body.playing .badgeslot.selected { border-color: #8fd3ff; box-shadow: 0 0 0 1px #8fd3ff, 0 0 10px rgb(74 163 255 / 35%); }
.gymlist .tiercard .thumbs { max-width: none; flex-wrap: nowrap; }
.gymwin .gymlist .tiercard .thumb { width: 32px; height: 32px; }
.gymwin .gymlist .tiercard .thumb canvas { width: 30px; height: 30px; }
.gymcard .tiertext b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.playing .gymcard.earned { box-shadow: inset 3px 0 0 var(--gold); }
.gymcard .tiertext .small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gymcard .tiertext .type { font-size: 9px; padding: 1px 5px; }
.tiertag.gymready { color: #ffd166; border-color: var(--gold-dim); background: rgb(232 200 114 / 12%); text-transform: uppercase; letter-spacing: 0.08em; }
.tiertag.gymwait { color: #ffb86b; border-color: #7a4f2a; font-variant-numeric: tabular-nums; }
.tiertag .icon { width: 12px; height: 12px; }
.gymfoot { gap: 8px; }
.gymfoot .label { margin: 0; }
.gymhead { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.gymface {
  width: 44px; height: 44px; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 6px;
}
.gymface .npcface { margin: 0; width: 44px; height: 44px; }
.gymbadge { display: grid; justify-items: center; gap: 2px; text-align: center; max-width: 92px; }
.gymbadge .badgeicon { filter: grayscale(1) brightness(0.55); }
.gymbadge.earned .badgeicon { filter: drop-shadow(0 0 5px rgb(255 214 102 / 75%)); }
.gymbadge .small { font-size: 10px; line-height: 1.2; }
body.playing .gymgo { width: 100%; padding: 10px; font-size: 15px; letter-spacing: 0.04em; }
.gymgo .pkicon { width: 20px; height: 20px; }

/* Conversa com o líder */
.gymdlg { width: min(400px, 94vw); }
.gymdlg .wbody { gap: 10px; }
.gymdlgtag { display: flex; align-items: center; gap: 8px; }
.gymgreet { font-style: italic; color: var(--text); line-height: 1.45; }
.gymdlgteam, .gymdlgprize { display: grid; justify-items: center; gap: 6px; width: 100%; }
.gymdlgteam .label, .gymdlgprize .label { margin: 0; }
.gymdlgteam .thumbs { display: flex; gap: 4px; justify-content: center; }
.gymdlgteam .thumb, .gymwin .tiercard .thumb {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 5px;
}
.gymdlgteam .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.gymdlgteam .thumb em {
  position: absolute; right: -3px; bottom: -5px; padding: 0 4px; border-radius: 6px; font: 700 9px/13px "Segoe UI", sans-serif;
  font-style: normal; color: #20180a; background: var(--gold);
}
.gymdlgprize .chips { justify-content: center; }
.gymprizebadge { color: var(--gold); border-color: var(--gold-dim); font-weight: 700; }
.gymdlgnote { color: #ffb86b !important; margin: 0; }
.gymdlgactions { display: grid; grid-template-columns: auto 1fr; gap: 8px; width: 100%; }
body.playing .gymdlgactions .gold { padding: 9px; font-size: 15px; }
.gymdlgactions .pkicon { width: 18px; height: 18px; }

/* Bosses */
.bosswin { width: min(860px, 96vw); height: min(780px, 94vh); }
.bosswin .wbody { display: grid; grid-template-rows: auto 1fr; gap: 10px; overflow: hidden; }
.bossgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; padding-right: 4px; }
.bosscard {
  display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(160deg, #101e2a, #0a141c 65%); border: 1px solid var(--edge);
  box-shadow: inset 3px 0 0 #7b1fa2;
}
.bosscard.ready { border-color: #6a3b8a; box-shadow: inset 3px 0 0 #c86bff, 0 0 14px rgb(200 107 255 / 14%); }
.bosscard.locked { opacity: 0.62; }
.bosscard .label { margin: 0; }
.bosshead { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.bossart {
  position: relative; width: 84px; height: 84px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, #2a1838, #0a141c 70%); border: 1px solid #4a2d5e; border-radius: 10px;
}
.bossart canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.bosscard.locked .bossart canvas { filter: grayscale(1) brightness(0.7); }
.bosslv {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px;
  font: 800 11px/16px "Segoe UI", sans-serif; color: #fff; background: linear-gradient(#c86bff, #7b1fa2); border: 1px solid #e3b5ff;
  white-space: nowrap; box-shadow: 0 0 8px rgb(200 107 255 / 45%);
}
.bossinfo { display: grid; gap: 5px; min-width: 0; }
.bossname { font: 600 16px/1.15 Georgia, serif; font-variant: small-caps; letter-spacing: 0.04em; color: #f0d9ff; }
.bosstypes { display: flex; gap: 4px; }
.bossfacts .chip { font-size: 11px; padding: 2px 7px; }
.bossneed { display: flex; gap: 10px; flex-wrap: wrap; }
.bossneed span { display: inline-flex; align-items: center; gap: 3px; }
.bossneed .icon { width: 12px; height: 12px; }
.bossneed .ok { color: var(--green); }
.bossneed .no { color: #ff8a80; }
.bossloot .chip { font-size: 11px; }
.bossloot .chip.gold, .arreward .chip.gold { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); border-color: var(--gold-dim); font-weight: 700; }
.bossloot .chip.gold .icon, .arreward .chip.gold .icon, .qreward .chip.gold .icon { width: 13px; height: 13px; }
.qreward .chip.gold { display: inline-flex; align-items: center; gap: 4px; }
.bosscatch { display: inline-flex; align-items: center; gap: 4px; color: #ff8fb1; border-color: #7a2f4a !important; font-weight: 700; }
.bosscatch .icon { width: 13px; height: 13px; }
.bossfoot { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding-top: 8px; border-top: 1px solid var(--edge); }
.bosstries { color: #d9b3ff; border-color: #5a3a78; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bossstate { font-variant-numeric: tabular-nums; }
.bosscard.respawn .bossstate, .bosscard.attempts .bossstate { color: #ffb86b; }
body.playing .bossgo { padding: 8px 18px; }
.bossgo .pkicon { width: 18px; height: 18px; }

/* Arena */
.arenawin { width: min(900px, 97vw); max-height: 96vh; }
.arenawin .wbody { display: grid; gap: 8px; padding: 10px 12px 12px; }
.arenaspeed { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); }
body.playing .arenaspeed button { padding: 3px 9px; font-size: 12px; font-weight: 700; border: 1px solid transparent; background: transparent; color: var(--muted); }
body.playing .arenaspeed button.active { color: #8fd3ff; border-color: #2f7fd6; background: linear-gradient(#13283a, #0c1a26); }
body.playing .askip { font-weight: 700; }
.arenateams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.apips { display: flex; gap: 4px; }
.apips.foe { justify-content: flex-end; }
.apip {
  display: grid; gap: 2px; justify-items: center; width: 40px; padding: 3px 3px 2px; border-radius: 7px;
  background: #0a141c; border: 1px solid var(--edge); transition: border-color 0.2s, opacity 0.2s;
}
.apip canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.apip .bar { width: 100%; height: 4px; margin: 0; }
.apip .bar span { background: var(--green); }
.apips.foe .apip .bar span { background: #ff7a6a; }
.apip.cur { border-color: #8fd3ff; box-shadow: 0 0 8px rgb(74 163 255 / 40%); }
.apips.foe .apip.cur { border-color: #ff9a8a; box-shadow: 0 0 8px rgb(255 120 110 / 40%); }
.apip.down { opacity: 0.38; }
.apip.down canvas { filter: grayscale(1); }
.around { display: grid; justify-items: center; gap: 0; text-align: center; }
.around b { font: 600 15px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); }
.around .small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.arenastage {
  position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #1f4152;
  box-shadow: inset 0 0 0 1px #0a1119, 0 0 18px rgb(79 216 232 / 10%);
  aspect-ratio: 480 / 250;
}
.arenastage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.aplate {
  position: absolute; display: grid; gap: 3px; width: min(320px, 46%); padding: 7px 10px 6px; border-radius: 9px;
  background: linear-gradient(170deg, rgb(15 28 39 / 92%), rgb(10 20 28 / 92%)); border: 1px solid var(--edge);
  box-shadow: 0 4px 14px rgb(0 0 0 / 45%);
}
.aplate.foe { left: 12px; top: 12px; border-color: #6a3a3a; box-shadow: inset 3px 0 0 #ff7a6a, 0 4px 14px rgb(0 0 0 / 45%); }
.aplate.ally { right: 12px; bottom: 12px; border-color: #24506a; box-shadow: inset 3px 0 0 #4fd8e8, 0 4px 14px rgb(0 0 0 / 45%); }
.aplate[hidden] { display: none; }
.aphead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aphead b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alv { color: var(--gold); font-size: 12px; font-weight: 700; white-space: nowrap; }
.atypes { display: flex; gap: 3px; margin-left: auto; }
.atypes .type { font-size: 9px; padding: 1px 5px; }
.aplate .bar.hp { height: 8px; margin: 0; }
.aplate .bar.hp span { background: linear-gradient(90deg, #2f9a4f, #7cf29a); transition: width 0.25s ease-out; }
.aplate .bar.hp.low span { background: linear-gradient(90deg, #a33, #ff7a6a); }
.aphp { justify-self: end; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arenaresult {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 14px;
  background: radial-gradient(rgb(5 10 15 / 55%), rgb(5 10 15 / 82%)); animation: arfade 0.3s ease-out;
}
.arenaresult[hidden] { display: none; }
@keyframes arfade { from { opacity: 0; } to { opacity: 1; } }
.arcard {
  display: grid; justify-items: center; gap: 8px; width: min(420px, 92%); max-height: 100%; overflow-y: auto; padding: 14px 18px;
  border-radius: 12px; background: linear-gradient(170deg, #0f1c27, #0b1620 60%, #0e1f24); border: 1px solid var(--line);
  box-shadow: 0 0 0 1px #0a1119, 0 16px 50px rgb(0 0 0 / 60%); text-align: center;
}
.arcard .label { margin: 2px 0 0; }
.artitle { font: 700 30px/1 Georgia, serif; font-variant: small-caps; letter-spacing: 0.12em; }
.arenaresult.win .artitle { color: #ffd166; text-shadow: 0 0 16px rgb(255 209 102 / 55%); }
.arenaresult.loss .artitle { color: #ff8a80; text-shadow: 0 0 16px rgb(255 120 110 / 45%); }
.arenaresult.win .arcard { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim), 0 0 30px rgb(232 200 114 / 25%), 0 16px 50px rgb(0 0 0 / 60%); }
.arline { font-style: italic; color: var(--text) !important; text-align: center !important; margin: 0 !important; }
.arbadge {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; width: 100%;
  padding: 8px 10px; border-radius: 9px; background: rgb(232 200 114 / 8%); border: 1px solid var(--gold-dim);
}
.arbadge .badgeicon { width: 64px; height: 64px; filter: drop-shadow(0 0 6px rgb(255 214 102 / 80%)); }
.arbadge b { display: block; color: var(--gold); }
.arbadge.capture { background: rgb(255 143 177 / 8%); border-color: #7a2f4a; }
.arbadge.capture b { color: #ff8fb1; }
.arreward { justify-content: center; }
.arlevel { color: #7cf29a; font-weight: 700; }
.arexp { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 5px; width: 100%; }
.arexprow {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 7px; align-items: center; text-align: left; padding: 4px 8px 4px 4px;
  border-radius: 8px; background: rgb(79 216 232 / 6%); border: 1px solid rgb(79 216 232 / 22%);
}
.arexprow b { display: block; font-size: 12px; }
.arexprow .up { display: block; font-size: 11px; font-weight: 700; color: #7cf29a; }
.arexprow .evo { display: block; font-size: 11px; color: #ffd166; }
.arexprow .xp { font-size: 12px; font-weight: 800; color: #9fe7ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.playing .arclose { min-width: 140px; margin-top: 4px; }