.kanto-gym-modal {
  position: fixed;
  inset: 0;
  z-index: 156;
  display: grid;
  place-items: center;
  padding: 4vh 6vw;
  background: #02090dc7;
  backdrop-filter: blur(3px);
}
.kanto-gym-modal.hidden { display: none; }

.kanto-gym-window {
  width: min(88vw, 1500px);
  height: min(82vh, 798px, calc(49.5vw - 46px));
  min-width: min(760px, calc(100vw - 24px));
  min-height: min(520px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #37627a;
  border-radius: var(--radius-8);
  background: linear-gradient(180deg, #0b1c28, #06121b);
  box-shadow: 0 28px 80px #000c, inset 0 1px 0 #ffffff10;
  color: #dceaf2;
}

.kanto-gym-window-header {
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #29485c;
  background: linear-gradient(135deg, #10293a, #091722 76%);
}
.kanto-gym-window-emblem {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #365c73;
  border-radius: var(--radius-6);
  background: radial-gradient(circle, #173b50, #081721 72%);
}
.kanto-gym-window-emblem-icon {
  display: block;
  width: 28px;
  height: 28px;
  background: linear-gradient(145deg, #ffffff 4%, #dce5eb 34%, #8998a3 68%, #f4f7f9 100%);
  filter: drop-shadow(0 2px 2px #0009) drop-shadow(0 0 4px rgba(220, 232, 240, .22));
  -webkit-mask: url('/assets/gym-menu-icon.png') center / contain no-repeat;
  mask: url('/assets/gym-menu-icon.png') center / contain no-repeat;
}
.kanto-gym-window-header > div { min-width: 0; }
.kanto-gym-window-header small { color: #6aa8c6; font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.kanto-gym-window-header h2 { margin: 2px 0; color: #eff9fd; font-size: 18px; line-height: 1; }
.kanto-gym-window-header p { margin: 0; color: #7996a7; font-size: 9px; line-height: 1.35; }
.kanto-gym-window-header .depot-close-button {
  position: static;
  width: 34px;
  height: 34px;
  justify-self: end;
  transform: none;
}

.kanto-gym-panel { min-height: 0; flex: 1; overflow: hidden; }
.kanto-gym-loading { height: 100%; min-height: 320px; }
.kanto-gym-browser { height: 100%; min-height: 0; display: flex; flex-direction: column; color: #dbeaf2; }

/* A batalha usa o mesmo host global dos demais PvEs, mas precisa ocupar o
   degrau imediatamente acima da modal de Ginásios (156). */
#kanto-gym-battle-host .gym-battle-overlay {
  z-index: 166;
  pointer-events: auto;
}

.kanto-gym-toolbar {
  min-height: 57px;
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid #29485c;
  background: #081722;
}
:is(.kanto-gym-modal, .explore-gym-pane) .gym-mode-row { width: auto; margin: 0; }
:is(.kanto-gym-modal, .explore-gym-pane) .gym-mode-row > button { height: 27px; min-width: 76px; font-size: 8px; }
.kanto-gym-progress-copy { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.kanto-gym-progress-copy b { color: #a7daf0; font-size: 14px; }
.kanto-gym-progress-copy small { color: #69899b; font-size: 6px; font-weight: 900; letter-spacing: .07em; }
.kanto-gym-badge-strip { display: grid; grid-template-columns: repeat(8, 27px); justify-content: center; gap: 5px; min-width: 0; }
.kanto-gym-badge-step { position: relative; display: grid; width: 27px; height: 27px; place-items: center; }
.kanto-gym-badge-step > small { position: absolute; right: -2px; bottom: -2px; z-index: 3; display: grid; width: 11px; height: 11px; place-items: center; border-radius: 50%; background: #07131c; color: #7390a1; font-size: 6px; font-weight: 900; }
.kanto-gym-progress-badge { width: 25px; height: 25px; }
:is(.kanto-gym-modal, .explore-gym-pane) .gym-owner-test { min-height: 23px; white-space: nowrap; }
:is(.kanto-gym-modal, .explore-gym-pane) .gym-global-cooldown { min-height: 25px; white-space: nowrap; }
.kanto-gym-browser.is-shiny .kanto-gym-toolbar { border-bottom-color: #4b3f63; background: #0d1421; }

.kanto-gym-content {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.kanto-gym-detail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #2d4f63;
  border-radius: var(--radius-8);
  background: linear-gradient(180deg, #102536, #081620);
  box-shadow: inset 0 1px 0 #ffffff0a;
  scrollbar-color: #365c78 #09141e;
  scrollbar-width: thin;
}
.kanto-gym-detail.is-shiny { border-color: #594b72; background: linear-gradient(180deg, #171b2b, #0c1220); }
.kanto-gym-detail-header { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid #29485c; }
.kanto-gym-detail-portrait { display: grid; width: 82px; height: 88px; place-items: center; border: 1px solid #365b77; border-radius: var(--radius-6); background: radial-gradient(circle at 50% 40%, #1d465f, #091724 72%); }
.kanto-gym-detail-portrait img { width: 78px; height: 78px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 4px #0008); }
.kanto-gym-detail-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kanto-gym-detail-identity > small { color: #6f94aa; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.kanto-gym-detail-identity > strong { overflow: hidden; color: #edf7fc; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.kanto-gym-detail-identity > span { display: flex; align-items: center; gap: 5px; }
.kanto-gym-detail-identity em { color: #9cb3c0; font-size: 8px; font-style: normal; font-weight: 800; }
.kanto-gym-detail-type { width: 21px; height: 21px; }
.kanto-gym-detail-status { position: absolute; right: 0; bottom: 8px; padding: 2px 5px; border: 1px solid #35556a; border-radius: var(--radius-4); background: #091a25; color: #8ca8b8; font-size: 6px; font-weight: 900; }
.kanto-gym-detail-status.is-available { color: #78d8b4; border-color: #377a62; background: #0b2a20; }
.kanto-gym-detail-status.is-completed { color: #99d3b8; border-color: #3b705b; }
.kanto-gym-detail-status.is-cooldown { color: #dbb671; border-color: #655635; background: #251f12; }

.kanto-gym-detail-facts { display: grid; grid-template-columns: 1fr .65fr; gap: 6px; }
.kanto-gym-detail-facts > span { min-width: 0; display: flex; min-height: 38px; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 8px; border: 1px solid #29485c; border-radius: var(--radius-6); background: #091a25; }
.kanto-gym-detail-facts small,
.kanto-gym-detail-team-row > small,
.kanto-gym-detail-reward > small { color: #65879a; font-size: 6px; font-weight: 900; letter-spacing: .07em; }
.kanto-gym-detail-facts strong { color: #cbdbe4; font-size: 9px; }
.kanto-gym-detail-team-row { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid #29485c; border-radius: var(--radius-6); background: #071721; }
.kanto-gym-detail-team { flex-wrap: wrap; justify-content: flex-end; }
.kanto-gym-detail-team img { width: 15px; height: 15px; }
.kanto-gym-detail-badge-row { padding: 7px 8px; border: 1px solid #29485c; border-radius: var(--radius-6); background: #091a25; }
.kanto-gym-detail-badge-row > span { display: flex; align-items: center; gap: 8px; }
.kanto-gym-detail-badge { width: 34px; height: 34px; }
.kanto-gym-detail-badge-row > span > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.kanto-gym-detail-badge-row small { color: #65879a; font-size: 6px; font-weight: 900; }
.kanto-gym-detail-badge-row strong { overflow: hidden; color: #d1e0e8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.kanto-gym-detail-reward { display: flex; flex-direction: column; gap: 5px; }
.kanto-gym-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.kanto-gym-rewards > span { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 5px; min-height: 42px; padding: 5px; border: 1px solid #31516a; border-radius: var(--radius-4); background: #0a1b27; }
.kanto-gym-rewards i { grid-row: 1 / 3; display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #47775e; border-radius: 50%; background: #103326; color: #78d3a6; font-size: 10px; font-style: normal; font-weight: 900; }
.kanto-gym-rewards i.is-xp { border-color: #41698a; background: #102b42; color: #82c7ef; font-size: 6px; }
.kanto-gym-rewards small { color: #66899d; font-size: 5px; font-weight: 900; }
.kanto-gym-rewards strong { color: #d9e8ef; font-size: 9px; }
.kanto-gym-no-reward { margin: 0; color: #7895a6; font-size: 8px; line-height: 1.35; }
.kanto-gym-detail .gym-lock-reason { margin: 0; padding: 6px 7px; font-size: 7px; }
.kanto-gym-detail .gym-challenge-action { min-height: 32px; margin-top: auto; font-size: 8px; }

.kanto-gym-map-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
  background: transparent;
}
.kanto-gym-map-canvas {
  position: relative;
  width: min(100cqw, 177.6833cqh);
  height: min(100cqh, 56.2799cqw);
  aspect-ratio: 1672 / 941;
  flex: none;
  overflow: hidden;
  border: 1px solid #294b60;
  border-radius: var(--radius-8);
  background: #0b4e81;
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.kanto-gym-map-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; user-select: none; }

.kanto-gym-hotspot {
  --hotspot-color: #68b8d8;
  position: absolute;
  left: var(--gym-x);
  top: var(--gym-y);
  z-index: 3;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eefaff;
  font: inherit;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: drop-shadow(0 3px 3px #000b);
}
.kanto-gym-hotspot-pin { position: relative; display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--hotspot-color); border-radius: 50% 50% 50% 7px; background: #07141dec; box-shadow: inset 0 0 0 2px #ffffff12, 0 0 0 2px #061018c7; transform: rotate(-45deg); transition: transform .14s ease, box-shadow .14s ease; }
.kanto-gym-hotspot-pin::before { display: none; }
.kanto-gym-hotspot-pin > b { position: relative; z-index: 2; color: #f3f9fc; font-size: 11px; line-height: 1; text-shadow: 0 1px 2px #000; transform: rotate(45deg); }
.kanto-gym-hotspot-state { position: absolute; z-index: 4; right: -7px; bottom: -5px; display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #356c50; border-radius: 50%; background: #082017; color: #71e69c; font-size: 10px; font-weight: 950; box-shadow: 0 2px 5px #000a; }
.kanto-gym-hotspot-state.is-locked { border-color: #4a5b67; background: #111b22; }
.kanto-gym-hotspot-state.is-locked i { position: relative; width: 7px; height: 6px; border: 1px solid #9aabb5; border-radius: 1px; }
.kanto-gym-hotspot-state.is-locked i::before { position: absolute; left: 1px; bottom: 4px; width: 3px; height: 4px; border: 1px solid #9aabb5; border-bottom: 0; border-radius: 3px 3px 0 0; content: ''; }
.kanto-gym-hotspot-label { position: absolute; left: calc(50% + var(--gym-label-x)); top: calc(50% + var(--gym-label-y)); display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 5px; min-width: 112px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--hotspot-color) 70%, #203847); border-radius: 4px; background: #061018c7; box-shadow: 0 3px 8px #0007, inset 0 1px 0 #ffffff0b; text-align: left; transform: translate(-50%, -50%); backdrop-filter: blur(1px); }
.kanto-gym-hotspot-label > span { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.kanto-gym-hotspot-label small { overflow: hidden; color: #a9bdc8; font-size: 10px; font-weight: 850; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.kanto-gym-hotspot-label strong { overflow: hidden; color: var(--hotspot-color); font-size: 13px; font-weight: 950; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.kanto-gym-hotspot-type { width: 17px; height: 17px; }
.kanto-gym-hotspot-requirement { position: absolute; top: 30px; left: 22px; min-width: 31px; padding: 2px 3px; border: 1px solid #48525a; border-radius: 3px; background: #071018c9; color: #a9b2b8; font-size: 6px; font-weight: 900; white-space: nowrap; }
.kanto-gym-hotspot:hover .kanto-gym-hotspot-pin,
.kanto-gym-hotspot:focus-visible .kanto-gym-hotspot-pin,
.kanto-gym-hotspot.is-selected .kanto-gym-hotspot-pin { transform: rotate(-45deg) scale(1.1); box-shadow: inset 0 0 0 2px #ffffff20, 0 0 0 2px #071018, 0 0 10px color-mix(in srgb, var(--hotspot-color) 58%, transparent); }
.kanto-gym-hotspot:focus-visible { outline: none; }
.kanto-gym-hotspot.is-selected { z-index: 6; }
.kanto-gym-hotspot.is-selected .kanto-gym-hotspot-label { background: #07141fe0; box-shadow: 0 0 0 1px var(--hotspot-color), 0 3px 9px #0008; }
.kanto-gym-hotspot.is-completed { --hotspot-color: #6bd49b; }
.kanto-gym-hotspot.is-locked { --hotspot-color: #7d8d96; filter: grayscale(.65) drop-shadow(0 3px 3px #000b); opacity: .82; }
.kanto-gym-hotspot.is-cooldown { --hotspot-color: #d4ad62; }
.kanto-gym-browser.is-shiny .kanto-gym-hotspot.is-available,
.kanto-gym-browser.is-shiny .kanto-gym-hotspot.is-selected { --hotspot-color: #bd8ce8; }
.kanto-gym-browser > .gym-reward-note { flex: none; margin: 0 10px 8px; padding: 5px 8px; font-size: 7px; }

@media (max-width: 1040px) {
  .kanto-gym-modal { padding: 5vh 3vw; }
  .kanto-gym-window { width: 94vw; height: min(86vh, 52.875vw); }
  .kanto-gym-toolbar { grid-template-columns: auto auto minmax(180px, 1fr) auto; }
  :is(.kanto-gym-modal, .explore-gym-pane) .gym-owner-test { display: none; }
  .kanto-gym-content { grid-template-columns: minmax(235px, 30%) minmax(0, 70%); }
  .kanto-gym-hotspot-label { min-width: 104px; padding-inline: 5px; }
}

@media (max-width: 760px) {
  .kanto-gym-modal { padding: 5vh 3vw; }
  .kanto-gym-window { width: 94vw; height: 88vh; min-width: 0; min-height: 430px; }
  .kanto-gym-window-header { grid-template-columns: 38px minmax(0, 1fr) 32px; min-height: 64px; gap: 8px; padding: 8px; }
  .kanto-gym-window-emblem { width: 36px; height: 36px; }
  .kanto-gym-window-emblem-icon { width: 24px; height: 24px; }
  .kanto-gym-window-header h2 { font-size: 14px; }
  .kanto-gym-window-header p { display: none; }
  .kanto-gym-panel { overflow-y: auto; }
  .kanto-gym-browser { height: auto; min-height: 100%; }
  .kanto-gym-toolbar { position: sticky; top: 0; z-index: 9; grid-template-columns: 1fr auto; gap: 6px; }
  .kanto-gym-badge-strip { grid-column: 1 / -1; grid-row: 2; }
  :is(.kanto-gym-modal, .explore-gym-pane) .gym-global-cooldown { grid-column: 1 / -1; }
  .kanto-gym-progress-copy { justify-self: end; }
  .kanto-gym-content { display: flex; flex-direction: column; overflow: visible; }
  .kanto-gym-detail { overflow: visible; }
  .kanto-gym-map-stage { min-height: 330px; overflow-x: auto; overflow-y: hidden; container-type: normal; place-items: center start; }
  .kanto-gym-map-canvas { width: 650px; height: 365.909px; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .kanto-gym-window { height: min(90vh, calc(49.5vw - 46px)); min-height: 480px; }
  .kanto-gym-window-header { min-height: 62px; padding-block: 7px; }
  .kanto-gym-window-header p { display: none; }
  .kanto-gym-toolbar { min-height: 48px; padding-block: 5px; }
  .kanto-gym-detail { gap: 6px; }
  .kanto-gym-detail-header { grid-template-columns: 68px minmax(0, 1fr); }
  .kanto-gym-detail-portrait { width: 68px; height: 70px; }
  .kanto-gym-detail-portrait img { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .kanto-gym-hotspot-pin { transition: none; }
}