@charset "utf-8";
/* Starter selection uses the same viewport budget as the expedition. */
html:has(.starter-grid) {
  height: 100%;
  overflow: hidden;
}
body:has(.starter-grid) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.menu-page:has(.starter-grid) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 12px 0;
  overflow: hidden;
}
.menu-page:has(.starter-grid) .menu-top {
  flex: none;
  width: calc(100% - 24px);
  max-width: 660px;
  height: 54px;
  margin: 0 auto;
  padding: 6px 14px;
  border: 2px solid var(--pl-ink);
  box-shadow: 3px 3px #51564f;
}
.menu-page:has(.starter-grid) .menu-top .brand-wordmark {
  font-size: 25px;
}
.menu-page:has(.starter-grid) .menu-top .btn {
  min-height: 34px;
  padding: 8px 12px;
  font-size: var(--text-sm);
}
.menu-page:has(.starter-grid) .main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: 570px;
  width: calc(100% - 24px);
  max-width: 660px;
  margin: 0 auto;
  padding: 12px 14px 14px;
  background: #f3f0e5ed;
  border: 2px solid var(--pl-ink);
  box-shadow: 3px 3px #51564f;
}
.menu-page:has(.starter-grid) .starter-intro {
  flex: none;
  margin: 0;
}
.menu-page:has(.starter-grid) .starter-intro .eyebrow {
  font-size: var(--text-xs);
  color: #78571a;
  letter-spacing: 1px;
}
.menu-page:has(.starter-grid) .starter-intro h1 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 7px 0;
}
.menu-page:has(.starter-grid) .starter-intro p {
  font-size: var(--text-md);
  line-height: 1.5;
  max-width: 580px;
}
.menu-page:has(.starter-grid) .main > .banner {
  flex: none;
  min-height: 30px;
  margin: 0;
  padding: 6px 9px;
  gap: 8px;
  font-size: var(--text-xs);
  line-height: 1.3;
  border: 1px solid #a9a18b;
  box-shadow: none;
  background: #e5dfce;
}
.menu-page:has(.starter-grid) .starter-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
.menu-page:has(.starter-grid) .starter {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 145px;
  grid-template-rows: 20px minmax(0, 1fr);
  gap: 4px 10px;
  min-height: 0;
  height: 100%;
  padding: 9px 10px 8px;
  border-width: 2px;
  box-shadow: 3px 3px #5c615a;
}
.menu-page:has(.starter-grid) .starter:hover {
  transform: none;
  box-shadow: 3px 3px var(--starter-accent);
}
.menu-page:has(.starter-grid) .starter:before {
  height: 5px;
}
.menu-page:has(.starter-grid) .starter:after {
  width: 100px;
  height: 100px;
  left: -15px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  border-width: 14px;
}
.menu-page:has(.starter-grid) .starter-top {
  grid-column: 2/4;
  grid-row: 1;
  margin: 0;
  min-height: 0;
}
.menu-page:has(.starter-grid) .starter-number {
  font-size: var(--text-xs);
}
.menu-page:has(.starter-grid) .starter-level {
  font-size: var(--text-2xs);
  padding: 3px 5px;
  border-width: 1px;
}
.menu-page:has(.starter-grid) .starter-portrait {
  grid-column: 1;
  grid-row: 1/3;
  height: 100%;
  min-height: 0;
  border-bottom: 0;
  border-right: 1px dashed #aaa394;
}
.menu-page:has(.starter-grid) .starter-portrait .pixel {
  width: 130px;
  height: 100%;
  max-width: 100%;
  max-height: 155px;
  min-height: 0;
  object-fit: contain;
}
.menu-page:has(.starter-grid) .starter-info {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  min-width: 0;
  gap: 5px;
}
.menu-page:has(.starter-grid) .starter-info h2 {
  font-size: 20px;
  margin: 0;
}
.menu-page:has(.starter-grid) .starter-info p {
  font-size: var(--text-3xs);
  letter-spacing: 1px;
}
.menu-page:has(.starter-grid) .starter-types {
  min-height: 0;
  gap: 4px;
}
.menu-page:has(.starter-grid) .type-logo {
  grid-template-columns: 22px auto;
  min-height: 27px;
  padding: 2px 5px;
  gap: 4px;
}
.menu-page:has(.starter-grid) .type-logo img {
  width: 22px !important;
  height: 22px !important;
}
.menu-page:has(.starter-grid) .type-logo strong {
  font-size: var(--text-2xs);
}
.menu-page:has(.starter-grid) .starter > .btn {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  margin: 0;
  min-height: 38px;
  padding: 8px 5px;
  font-size: var(--text-xs);
  line-height: 1.4;
  border-width: 2px;
  box-shadow: 2px 2px #555850;
}
@media (max-width: 520px) {
  .menu-page:has(.starter-grid) {
    gap: 6px;
    padding: 7px 0;
  }
  .menu-page:has(.starter-grid) .menu-top {
    width: calc(100% - 14px);
    height: 50px;
    padding: 5px 10px;
  }
  .menu-page:has(.starter-grid) .menu-top .brand-wordmark {
    font-size: 22px;
  }
  .menu-page:has(.starter-grid) .main {
    width: calc(100% - 14px);
    padding: 10px;
    gap: 8px;
  }
  .menu-page:has(.starter-grid) .starter-intro .eyebrow {
    font-size: var(--text-2xs);
    letter-spacing: 0;
  }
  .menu-page:has(.starter-grid) .starter-intro h1 {
    font-size: 17px;
    margin: 6px 0;
  }
  .menu-page:has(.starter-grid) .starter-intro p {
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .menu-page:has(.starter-grid) .main > .banner {
    font-size: var(--text-2xs);
    min-height: 28px;
    padding: 5px;
  }
  .menu-page:has(.starter-grid) .starter {
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: 17px minmax(0, 1fr) 42px;
    padding: 9px 8px 8px;
    gap: 4px 9px;
  }
  .menu-page:has(.starter-grid) .starter-top {
    grid-column: 2;
    grid-row: 1;
  }
  .menu-page:has(.starter-grid) .starter-number {
    font-size: var(--text-2xs);
    letter-spacing: 0.5px;
  }
  .menu-page:has(.starter-grid) .starter-level {
    font-size: var(--text-3xs);
    padding: 2px 4px;
  }
  .menu-page:has(.starter-grid) .starter-portrait {
    grid-row: 1/4;
  }
  .menu-page:has(.starter-grid) .starter-info {
    gap: 4px;
  }
  .menu-page:has(.starter-grid) .starter-info h2 {
    font-size: 16px;
  }
  .menu-page:has(.starter-grid) .starter-info p {
    display: none;
  }
  .menu-page:has(.starter-grid) .type-logo {
    grid-template-columns: 16px auto;
    min-height: 21px;
    padding: 1px 3px;
    gap: 3px;
  }
  .menu-page:has(.starter-grid) .type-logo img {
    width: 16px !important;
    height: 16px !important;
  }
  .menu-page:has(.starter-grid) .type-logo strong {
    font-size: var(--text-3xs);
  }
  .menu-page:has(.starter-grid) .starter > .btn {
    grid-column: 2;
    grid-row: 3;
    min-height: 42px;
    padding: 5px 3px;
    font-size: var(--text-2xs);
  }
}
@media (max-height: 620px) and (max-width: 520px) {
  .menu-page:has(.starter-grid) .starter-intro h1 {
    font-size: 15px;
  }
  .menu-page:has(.starter-grid) .starter {
    grid-template-rows: 13px minmax(0, 1fr) 32px;
    padding: 7px 8px 6px;
    gap: 3px 9px;
  }
  .menu-page:has(.starter-grid) .starter-info {
    gap: 2px;
  }
  .menu-page:has(.starter-grid) .starter-info h2 {
    font-size: 14px;
  }
  .menu-page:has(.starter-grid) .type-logo {
    grid-template-columns: 12px auto;
    min-height: 16px;
    padding: 1px 3px;
  }
  .menu-page:has(.starter-grid) .type-logo img {
    width: 12px !important;
    height: 12px !important;
  }
  .menu-page:has(.starter-grid) .type-logo strong {
    font-size: 6px;
  }
  .menu-page:has(.starter-grid) .starter > .btn {
    min-height: 32px;
  }
}
@media (max-height: 600px) and (min-width: 521px) {
  .menu-page:has(.starter-grid) {
    padding: 6px 0;
    gap: 6px;
  }
  .menu-page:has(.starter-grid) .menu-top {
    height: 44px;
  }
  .menu-page:has(.starter-grid) .main {
    padding: 8px 12px;
    gap: 6px;
  }
  .menu-page:has(.starter-grid) .starter-intro h1 {
    font-size: 17px;
    margin: 3px 0;
  }
  .menu-page:has(.starter-grid) .starter-intro p {
    font-size: var(--text-xs);
  }
  .menu-page:has(.starter-grid) .starter-intro .eyebrow {
    font-size: var(--text-2xs);
  }
  .menu-page:has(.starter-grid) .starter-grid {
    gap: 6px;
  }
  .menu-page:has(.starter-grid) .starter {
    grid-template-columns: 80px minmax(0, 1fr) 150px;
    grid-template-rows: 16px minmax(0, 1fr);
    padding: 7px 8px;
    gap: 2px 8px;
  }
  .menu-page:has(.starter-grid) .starter-info {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .menu-page:has(.starter-grid) .starter-info h2 {
    font-size: 15px;
  }
  .menu-page:has(.starter-grid) .starter-info p {
    display: none;
  }
  .menu-page:has(.starter-grid) .type-logo {
    grid-template-columns: 14px auto;
    min-height: 18px;
    padding: 1px 3px;
  }
  .menu-page:has(.starter-grid) .type-logo img {
    width: 14px !important;
    height: 14px !important;
  }
  .menu-page:has(.starter-grid) .type-logo strong {
    font-size: var(--text-3xs);
  }
  .menu-page:has(.starter-grid) .starter > .btn {
    min-height: 30px;
    font-size: var(--text-2xs);
    padding: 5px;
  }
}
/* A single, centred play surface. The page never needs a vertical scroll. */
html:has(.compact-shell) {
  height: 100%;
  overflow: hidden;
}
body:has(.compact-shell) {
  display: flow-root;
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #050c23;
}
.slots-shell.compact-shell {
  --dock-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: calc(100% - 28px);
  max-width: 720px;
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  min-height: 0;
  max-height: 1040px;
  margin: 12px auto;
  padding: 0;
  overflow: visible;
}
.compact-shell > * {
  min-width: 0;
  flex-shrink: 0;
  order: initial;
}
.compact-shell:before {
  opacity: 0.6;
}
.compact-shell.night:before {
  display: none;
}
.compact-shell:after {
  background: linear-gradient(90deg, #030b2022, transparent 30% 70%, #030b2022);
}
.compact-shell .night-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #050b23 url("/static/game/world/starry-meadow-v1.c43ba0fc187a.png") center/cover no-repeat;
  image-rendering: pixelated;
}
.night-scene:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #030e2620 35% 65%, transparent);
}
.meadow-breeze {
  position: absolute;
  inset: -3px;
  background: url("/static/game/world/starry-meadow-v1.c43ba0fc187a.png") center/cover no-repeat;
  image-rendering: pixelated;
}
.meadow-stars {
  position: absolute;
  inset: 0;
}
.meadow-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  height: 3px;
  width: 3px;
  background: #d3eeff;
  box-shadow: 0 0 7px #8ad0fa;
  animation: meadow-twinkle var(--duration) steps(4, end) var(--delay) infinite alternate;
}
@keyframes meadow-breeze {
  from {
    transform: skewX(-0.45deg) translateX(-2px) scaleX(1.018);
  }
  to {
    transform: skewX(0.45deg) translateX(2px) scaleX(1.018);
  }
}
@keyframes meadow-twinkle {
  from {
    opacity: 0.05;
  }
  to {
    opacity: 0.85;
  }
}
.compact-shell .game-topbar {
  order: 0;
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  height: 64px;
  min-height: 0;
  gap: 10px;
  padding: 8px 12px;
  width: 100%;
  margin: 0;
  border-width: 2px;
  outline-width: 1px;
  box-shadow:
    inset 0 0 0 2px #071426,
    inset 0 0 0 3px #547293,
    0 3px #020e22aa;
}
.compact-shell .expedition-brand {
  margin: 0;
  padding: 0;
}
.compact-shell .expedition-brand strong {
  font-size: 26px;
  letter-spacing: 0.3px;
}
.compact-shell .expedition-id {
  display: grid;
  grid-column: auto;
  grid-row: auto;
  gap: 5px;
  border: 0;
  padding: 0;
  text-align: center;
  align-self: center;
}
.compact-shell .expedition-id strong {
  font-size: var(--text-lg);
  letter-spacing: 0.6px;
}
.compact-shell .expedition-id span {
  font-size: var(--text-xs);
  letter-spacing: 2px;
}
.compact-shell .game-top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 0;
  flex-wrap: nowrap;
}
.compact-shell .run-nav {
  display: flex;
  gap: 5px;
  order: 0;
}
.compact-shell .run-nav button {
  font-size: var(--text-xs);
  padding: 5px 7px;
  min-height: 26px;
  box-shadow: none;
}
.compact-shell .run-nav .danger {
  padding: 5px 7px;
}
.compact-shell .speed-control {
  display: flex;
  order: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  gap: 2px;
  min-height: 0;
}
.compact-shell .speed-control > span {
  display: block;
  font-size: var(--text-3xs);
  margin-right: 5px;
  align-self: center;
}
.compact-shell .speed-chip {
  font-size: var(--text-xs);
  padding: 2px 6px;
  min-width: 25px;
  line-height: 14px;
}
.compact-shell .game-stage {
  order: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  gap: 8px;
  overflow: visible;
}
.compact-shell .expedition-progress {
  order: 0;
  display: grid;
  align-items: center;
  flex: none;
  min-height: 0;
  width: 100%;
  margin: 0;
  background: #04142bb3;
  border: 1px solid #6686a457;
}
.compact-shell .biome-identity {
  min-width: 0;
  max-width: none;
  gap: 8px;
  padding-left: 5px;
}
.compact-shell .biome-identity > img {
  width: 42px;
  height: 42px;
  flex: none;
  border-width: 2px;
  outline: 0;
  box-shadow: none;
}
.compact-shell .biome-identity > div {
  padding: 0;
  gap: 4px;
}
.compact-shell .biome-identity small {
  font-size: var(--text-2xs);
  letter-spacing: 1px;
}
.compact-shell .biome-identity strong {
  font-size: var(--text-lg);
  line-height: 1.15;
}
.compact-shell .journey-track {
  order: 0;
  flex-basis: auto;
  min-width: 0;
  margin: 0 6px 0 0;
  overflow: visible;
}
.compact-shell .track-stop {
  aspect-ratio: 1;
  font-size: var(--text-md);
}
.compact-shell .track-stop.caught:after {
  width: 5px;
  height: 5px;
  top: -2px;
  right: -2px;
}
.compact-shell .game-main {
  order: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}
.compact-shell .run-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  gap: 0;
  width: 100%;
  margin: 0;
}
.compact-shell .run-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  width: 100%;
}
.compact-shell .lab {
  flex: none;
  height: 34px;
  min-height: 0;
  padding: 4px 8px;
  margin: 0 0 5px;
  font-size: var(--text-xs);
  gap: 5px;
}
.compact-shell .lab p {
  display: none;
}
.compact-shell .lab .btn {
  font-size: var(--text-xs);
  padding: 4px;
}
.compact-shell .lab select {
  padding: 2px;
  font-size: var(--text-xs);
}
.compact-shell .slot-machine {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 10px;
  gap: 7px;
  border-width: 2px;
  outline-width: 1px;
  box-shadow:
    inset 0 0 0 2px #041225,
    inset 0 0 0 4px #466586,
    0 4px #07112099;
  background: linear-gradient(145deg, #173b61f5, #05172ff7 45%, #102e4eea);
}
.compact-shell .machine-title {
  flex: none;
  height: 65px;
  min-height: 0;
  padding: 6px 8px;
  box-shadow:
    inset 0 0 0 2px #07142b,
    0 2px #020c20;
  gap: 7px;
}
.compact-shell .machine-title h1 {
  font-size: 18px;
  line-height: 1.15;
  margin: 4px 0;
}
.compact-shell .machine-title small {
  font-size: var(--text-xs);
  letter-spacing: 1.2px;
}
.compact-shell .machine-title p {
  font-size: var(--text-md);
}
.compact-shell .machine-title > .item-sprite {
  width: 26px;
  height: 26px;
}
.compact-shell .machine-lights {
  flex: none;
  height: 7px;
  padding: 1px 14px;
  align-items: center;
}
.compact-shell .machine-lights i {
  width: 4px;
  height: 4px;
}
.compact-shell .encounter-reels {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  margin: 0;
  overflow: visible;
}
.compact-shell .encounter-reel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  container-type: size;
}
.compact-shell .reel-window {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  border-width: 3px;
}
.compact-shell .reel-battle {
  flex: none;
  min-height: 31px;
  margin: 0;
  padding: 7px 2px;
  font-size: var(--text-lg);
  line-height: 1.1;
  border-width: 1px;
}
.compact-shell .reel-battle:disabled {
  font-size: var(--text-xs);
}
.compact-shell .reel-focus {
  inset: 19% 0 15%;
  gap: 7px;
  justify-content: center;
}
.compact-shell .reel-pokemon {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: 175px;
  width: 100%;
}
.compact-shell .reel-pokemon .pixel {
  width: min(170px, 100%);
  height: 100%;
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
}
.compact-shell .reel-name {
  flex: none;
  font-size: 17px;
  line-height: 1.1;
  margin: 0;
}
.compact-shell .reel-types {
  flex: none;
  gap: 3px;
  min-height: 18px;
}
.compact-shell .reel-types .type {
  font-size: var(--text-xs) !important;
  padding: 2px 5px;
  line-height: 12px;
}
.compact-shell .reel-types .type-sprite {
  width: 11px;
  height: 11px;
}
.compact-shell .reel-details {
  flex: none;
  font-size: var(--text-sm);
  gap: 5px;
  min-height: 15px;
}
.compact-shell .reel-archetype {
  flex: none;
  font-size: var(--text-2xs);
}
.compact-shell .reel-support {
  flex: none;
  font-size: var(--text-xs);
}
.compact-shell .reel-ghost .pixel {
  width: 90px;
  height: 90px;
}
.compact-shell .reel-ghost.above {
  top: -48px;
}
.compact-shell .reel-ghost.below {
  bottom: -50px;
}
.compact-shell .reel-spark {
  font-size: var(--text-xl);
  top: 12px;
  right: 9px;
}
.compact-shell .machine-controls {
  flex: none;
  display: grid;
  align-items: center;
  margin: 0;
}
.compact-shell .encounter-spin {
  padding: 9px 5px;
  height: 52px;
  min-height: 0;
  font-size: 20px;
  gap: 12px;
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px #c18b21,
    0 3px #81601f,
    0 0 12px #ffc84233;
}
.compact-shell .encounter-spin small {
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  margin-top: 4px;
}
.compact-shell .encounter-spin:disabled {
  font-size: 16px;
}
.compact-shell .spin-emblem .item-sprite {
  width: 32px;
  height: 32px;
}
.compact-shell .machine-lever {
  height: 58px;
  transform: scale(0.8);
  transform-origin: center center;
}
.compact-shell .machine-status {
  flex: none;
  padding: 5px 3px;
  margin: 0;
  min-height: 22px;
  font-size: var(--text-sm);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-color: #486c8c;
}
.compact-shell .machine-status.rarity-legend {
  gap: 9px;
  flex-wrap: wrap;
}
.compact-shell .machine-status.rarity-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a8c6e6;
  white-space: nowrap;
}
.compact-shell .machine-status.rarity-legend .rarity-dot {
  margin: 0;
}
.compact-shell .center-stop {
  flex: none;
  height: 45px;
  min-height: 0;
  padding: 4px 7px;
  gap: 7px;
  margin: 0;
  border-width: 1px;
}
.compact-shell .center-stop .ui-sprite {
  height: 32px;
  width: 32px;
}
.compact-shell .center-stop span {
  gap: 2px;
}
.compact-shell .center-stop strong {
  font-size: var(--text-md);
}
.compact-shell .center-stop small {
  font-size: var(--text-xs);
  line-height: 1.15;
}
.compact-shell .center-stop b {
  font-size: var(--text-sm);
}
/* One bottom panel at a time; every original inventory slot remains available. */
.compact-shell .expedition-dock {
  order: 2;
  flex: none;
  height: var(--dock-height);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 9px;
  background: linear-gradient(145deg, #092440f2, #041329f5);
  border: 2px solid #bb9950;
  box-shadow:
    inset 0 0 0 2px #153959,
    0 3px #020b19a0;
  color: #dcefff;
  min-height: 0;
  overflow: visible;
}
.compact-shell .expedition-dock.battle-dock {
  height: auto;
  padding: 4px 9px;
}
.compact-shell .expedition-dock.battle-dock .dock-footer {
  border-top: 0;
}
.dock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 30px;
}
.dock-tabs {
  display: flex;
  gap: 5px;
  align-items: stretch;
}
.dock-tabs button,
.dock-manage {
  font-size: var(--text-sm);
  font-weight: 800;
  padding: 6px 9px;
  line-height: 16px;
  min-height: 30px;
  white-space: nowrap;
}
.dock-tabs small {
  font-size: var(--text-xs);
  display: inline-block;
  margin-left: 5px;
  opacity: 0.85;
}
.dock-tabs button[aria-selected='true'] {
  background: #eec963;
  border-color: #ffe6a1;
  color: #102239;
}
.dock-manage {
  font-size: var(--text-xs);
  padding: 5px 7px;
  margin-left: auto;
}
.dock-balance {
  font-size: 14px;
  font-weight: 800;
  color: #ffda76;
  white-space: nowrap;
}
.dock-balance .money {
  gap: 4px;
}
.dock-balance .money-icon {
  width: 10px;
  height: 14px;
}
.dock-content {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}
.dock-content > [role='tabpanel'] {
  height: 100%;
  min-height: 0;
}
.dock-content > [hidden] {
  display: none !important;
}
.compact-shell .dock-tips {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: none;
  width: 100%;
  height: 22px;
  min-height: 0;
  padding: 3px 16px 3px 5px;
  border: 0;
  border-top: 1px solid #355373;
  background: none;
  color: #a8c6e6;
  line-height: 1.2;
  text-align: center;
  text-shadow: none;
  white-space: normal;
}
.compact-shell .dock-tips strong {
  font-size: var(--text-sm);
  flex: none;
  color: #efd682;
}
.compact-shell .dock-tips small {
  font-size: var(--text-sm);
  display: inline;
  white-space: normal;
}
.compact-shell .dock-tips .tv-live {
  width: 4px;
  height: 4px;
  right: 3px;
  top: 8px;
}
.compact-shell .expedition-dock .team-rail {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  overflow: visible;
}
.compact-shell .expedition-dock .team-heading {
  display: none;
}
.compact-shell .expedition-dock .team-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 100%;
  gap: 5px;
  padding: 0;
  margin: 0;
}
.compact-shell .expedition-dock .member {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-basis: auto;
  margin: 0;
  border-width: 1px;
  box-shadow: inset 0 0 0 1px #03172e;
}
.compact-shell .expedition-dock .member .team-portrait {
  display: grid;
  place-items: center;
  padding: 0;
  transform: none;
  background: none;
}
.compact-shell .expedition-dock .member .info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  width: auto;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 0;
}
.compact-shell .expedition-dock .member-title {
  display: flex;
  align-items: center;
  gap: 4px;
  grid-column: 1/-1;
  margin: 0;
}
.compact-shell .expedition-dock .member-title h3 {
  font-size: var(--text-md);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.compact-shell .expedition-dock .member-title > strong {
  font-size: var(--text-2xs);
  white-space: nowrap;
  margin: 0 0 0 auto;
}
.compact-shell .expedition-dock .member-health {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: var(--text-2xs);
  gap: 0;
  line-height: 8px;
}
.compact-shell .expedition-dock .member-health > span,
.compact-shell .expedition-dock .member-health em {
  display: none;
}
.compact-shell .expedition-dock .member-health > strong {
  font-size: var(--text-2xs);
}
.compact-shell .expedition-dock .member .hp {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  height: 5px;
  margin: 0;
}
.compact-shell .expedition-dock .member .slot,
.compact-shell .expedition-dock .member .drag-grip {
  display: none;
}
.compact-shell .expedition-dock .member.empty {
  height: 100%;
  min-height: 0;
  gap: 6px;
  justify-content: center;
  flex-direction: row;
  padding: 4px;
  background: #071b3090;
}
.compact-shell .expedition-dock .member.empty .empty-ball {
  font-size: 18px;
  line-height: 18px;
}
.compact-shell .expedition-dock .member.empty small {
  font-size: var(--text-2xs);
  line-height: 1.1;
}
.compact-shell .expedition-dock .inventory-panel {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 7px;
  height: 100%;
  width: 100%;
  position: static;
  padding: 0;
  margin: 0;
  min-height: 0;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  overflow: visible;
}
.compact-shell .expedition-dock .bag-head {
  display: none;
}
.compact-shell .expedition-dock .bag-tabs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 5px;
  margin: 0;
  padding: 0;
}
.compact-shell .expedition-dock .bag-tabs button {
  height: 27px;
  min-height: 0;
  padding: 4px;
  font-size: var(--text-xs);
  line-height: 15px;
}
.compact-shell .expedition-dock .bag-tabs small {
  display: inline;
  margin: 0 0 0 6px;
  font-size: var(--text-xs);
}
.compact-shell .expedition-dock .bag-grid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  min-height: 0;
  height: 100%;
  width: 100%;
  gap: 4px;
  padding: 3px;
  margin: 0;
  align-items: stretch;
}
.compact-shell .expedition-dock .bag-slot {
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
  max-width: none;
  aspect-ratio: auto;
  padding: 1px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.compact-shell .expedition-dock .bag-slot .pixel,
.compact-shell .expedition-dock .bag-slot .item-sprite {
  height: 100%;
  width: 100%;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}
.compact-shell .expedition-dock .bag-slot small {
  display: none;
}
.compact-shell .expedition-dock .bag-stats {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding: 3px 2px;
  font-size: var(--text-2xs);
  background: none;
  border: 0;
}
.compact-shell .expedition-dock .bag-stats > span {
  display: flex;
  gap: 3px;
  align-items: center;
}
.compact-shell .expedition-dock .bag-stats .stat-help {
  width: 11px;
  height: 11px;
  font-size: var(--text-2xs);
  line-height: 10px;
}
.compact-shell .expedition-dock .active-passives {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.compact-shell .expedition-dock .active-passives > header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 22px;
  min-height: 0;
  padding: 2px 5px;
  border: 0;
  background: none;
}
.compact-shell .expedition-dock .active-passives > header strong {
  font-size: var(--text-sm);
}
.compact-shell .expedition-dock .active-passives > header small {
  margin-left: auto;
}
.compact-shell .expedition-dock .passive-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 5px;
  padding: 2px 5px;
  overflow: auto;
}
.compact-shell .expedition-dock .passive-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  min-height: 26px;
}
.compact-shell .expedition-dock .passive-item .item-sprite {
  height: 22px;
  width: 22px;
}
.compact-shell .expedition-dock .passive-item small {
  font-size: var(--text-xs);
}
.compact-shell .expedition-dock .passive-empty {
  font-size: var(--text-md);
  text-align: center;
  width: 100%;
}
/* Selection and battle use the same remaining viewport height. */
.compact-shell .biome-picker {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #051b34eb;
}
.compact-shell .biome-picker header {
  flex: none;
  padding: 12px 5px;
  text-align: center;
}
.compact-shell .biome-picker header h1 {
  font-size: 22px;
  margin: 10px 0;
}
.compact-shell .biome-picker header .eyebrow {
  font-size: var(--text-sm);
  padding: 5px 8px;
}
.compact-shell .biome-picker header p {
  font-size: var(--text-lg);
  line-height: 1.35;
}
.compact-shell .biome-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
}
.compact-shell .biome-picker-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.compact-shell .biome-photo {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  background-position: center;
  background-size: cover;
}
.compact-shell .biome-photo .route-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  bottom: 0;
}
.compact-shell .biome-photo .type {
  font-size: var(--text-2xs);
  padding: 3px;
}
.compact-shell .biome-copy {
  height: auto;
  min-height: 94px;
  flex: none;
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.compact-shell .biome-copy strong {
  font-size: var(--text-xl);
  line-height: 1.4;
}
.compact-shell .biome-copy small {
  font-size: var(--text-xs);
}
.compact-shell .biome-copy > span {
  font-size: var(--text-2xs);
  line-height: 1.4;
}
.compact-shell .biome-picker footer {
  flex: none;
  padding: 7px 4px;
  font-size: var(--text-md);
  line-height: 1.3;
}
.compact-shell .showdown-battle {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: visible;
}
.compact-shell .battle-commandbar {
  flex: none;
  padding: 8px;
  height: 48px;
  min-height: 0;
}
.compact-shell .battle-commandbar .eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 1px;
}
.compact-shell .battle-commandbar h2 {
  font-size: var(--text-xl);
}
.compact-shell .battle-commandbar .btn {
  padding: 6px 8px;
  min-height: 28px;
  font-size: var(--text-xs);
}
.compact-shell .battle-mode {
  font-size: var(--text-xs);
  padding: 5px;
}
.compact-shell .battle-field {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
.compact-shell .battle-console {
  display: flex;
  flex: none;
  height: 68px;
  min-height: 0;
  overflow: hidden;
}
.compact-shell .battle-log-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.compact-shell .battle-log {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 7px 7px 7px 7px;
  font-size: var(--text-xs);
  overflow: auto;
}
.compact-shell .battle-progress {
  flex: none;
  padding: 8px;
  font-size: var(--text-2xs);
  min-width: 110px;
}
.compact-shell .battle-actions {
  flex: none;
  min-height: 44px;
  padding: 6px 8px;
  gap: 8px;
  font-size: var(--text-xs);
}
.compact-shell .battle-actions .btn {
  padding: 8px 10px;
  font-size: var(--text-md);
  min-height: 30px;
}
.compact-shell .battle-field .nameplate {
  width: 200px;
  padding: 7px;
}
.compact-shell .battle-field .nameplate h3 {
  font-size: var(--text-lg);
}
.compact-shell .battle-field .nameplate .type {
  font-size: var(--text-2xs);
}
.compact-shell .battle-field .ally-fighter {
  left: 3%;
  bottom: 5%;
  width: 43%;
  height: 64%;
}
.compact-shell .battle-field .enemy-fighter {
  right: 3%;
  top: 5%;
  width: 43%;
  height: 64%;
}
.compact-shell .battle-field .nameplate .hp {
  height: 8px;
}
.compact-shell .battle-roster {
  padding: 3px;
  gap: 3px;
}
.compact-shell .battle-roster .party-ball {
  height: 18px;
  width: 18px;
}
.compact-shell .battle-roster .battle-ball {
  height: 18px;
  width: 18px;
}
.compact-shell .slot-service {
  display: flex;
  align-items: center;
  text-align: center;
  min-height: 0;
  height: 100%;
  padding: 12px;
}
.compact-shell .slot-service .machine-title {
  width: 100%;
}
.compact-shell .slot-shop-art {
  flex: 1 1 0;
  min-height: 0;
  margin: 8px 0;
  display: grid;
  place-items: center;
}
.compact-shell .slot-shop-art .ui-sprite {
  height: 100%;
  max-height: 150px;
  min-height: 0;
  width: 150px;
  object-fit: contain;
}
.compact-shell .slot-service h2 {
  font-size: 21px;
}
.compact-shell .slot-service p {
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 8px 0;
  max-width: 340px;
}
.compact-shell .slot-service footer {
  margin: 10px 0 0;
  font-size: var(--text-sm);
}
.compact-shell .pixel-dialog {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  overflow: auto;
}
.compact-shell .pixel-dialog h2 {
  font-size: 22px;
}
.compact-shell .pixel-dialog p {
  font-size: var(--text-xl);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 520px) {
  .slots-shell.compact-shell {
    --dock-height: 172px;
    width: calc(100% - 14px);
    height: calc(100vh - 14px);
    height: calc(100dvh - 14px);
    margin: 7px auto;
    gap: 6px;
  }
  .compact-shell .game-topbar {
    height: 62px;
    padding: 4px 8px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 24px 18px;
    align-content: center;
    gap: 2px 6px;
  }
  .compact-shell .expedition-brand strong {
    font-size: 23px;
  }
  .compact-shell .expedition-id {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    white-space: nowrap;
  }
  .compact-shell .expedition-id strong {
    font-size: var(--text-3xs);
    letter-spacing: 0;
  }
  .compact-shell .expedition-id span {
    font-size: var(--text-3xs);
    letter-spacing: 0;
  }
  .compact-shell .game-top-actions {
    grid-column: 2;
    grid-row: 1/3;
  }
  .compact-shell .run-nav button {
    font-size: var(--text-2xs);
    padding: 4px 5px;
  }
  .compact-shell .speed-control > span {
    display: none;
  }
  .compact-shell .speed-chip {
    font-size: var(--text-xs);
    padding: 2px 7px;
    min-width: 25px;
  }
  .compact-shell .game-stage {
    gap: 6px;
  }
  .compact-shell .biome-identity {
    padding: 0;
    gap: 6px;
  }
  .compact-shell .biome-identity > img {
    height: 25px;
    width: 29px;
    border-width: 1px;
  }
  .compact-shell .biome-identity > div {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
  }
  .compact-shell .biome-identity small {
    font-size: var(--text-2xs);
    white-space: nowrap;
  }
  .compact-shell .biome-identity strong {
    font-size: var(--text-md);
    line-height: 1.2;
  }
  .compact-shell .journey-track {
    flex: none;
    margin: 0;
  }
  .compact-shell .slot-machine {
    padding: 7px;
    gap: 5px;
  }
  .compact-shell .machine-title {
    height: 55px;
    padding: 5px;
    gap: 4px;
  }
  .compact-shell .machine-title h1 {
    font-size: 14px;
    letter-spacing: 0;
    margin: 3px 0;
  }
  .compact-shell .machine-title small {
    font-size: var(--text-2xs);
    letter-spacing: 0.7px;
  }
  .compact-shell .machine-title p {
    font-size: var(--text-xs);
  }
  .compact-shell .machine-title > .item-sprite {
    width: 20px;
    height: 20px;
  }
  .compact-shell .machine-lights {
    height: 5px;
    padding: 0 8px;
  }
  .compact-shell .encounter-reels {
    padding: 4px;
    gap: 5px;
  }
  .compact-shell .encounter-reel {
    gap: 5px;
  }
  .compact-shell .reel-window {
    border-width: 2px;
  }
  .compact-shell .reel-focus {
    inset: 15% 0 12%;
    gap: 5px;
  }
  .compact-shell .reel-pokemon {
    max-height: 130px;
  }
  .compact-shell .reel-pokemon .pixel {
    max-width: 100%;
    width: 115px;
  }
  .compact-shell .reel-name {
    font-size: var(--text-xl);
  }
  .compact-shell .reel-types {
    gap: 2px;
    min-height: 14px;
  }
  .compact-shell .reel-types .type {
    font-size: var(--text-3xs) !important;
    line-height: 10px;
    padding: 2px;
  }
  .compact-shell .reel-types .type-sprite {
    width: 8px;
    height: 8px;
  }
  .compact-shell .reel-details {
    font-size: var(--text-2xs);
    min-height: 13px;
    gap: 3px;
  }
  .compact-shell .reel-ghost .pixel {
    width: 65px;
    height: 65px;
  }
  .compact-shell .reel-ghost.above {
    top: -38px;
  }
  .compact-shell .reel-ghost.below {
    bottom: -36px;
  }
  .compact-shell .reel-support {
    font-size: var(--text-2xs);
  }
  .compact-shell .reel-battle {
    font-size: var(--text-sm);
    min-height: 28px;
    padding: 6px 1px;
  }
  .compact-shell .reel-battle:disabled {
    font-size: var(--text-3xs);
  }
  .compact-shell .reel-number {
    font-size: var(--text-2xs);
    left: 4px;
    top: 4px;
  }
  .compact-shell .encounter-spin {
    height: 42px;
    font-size: 16px;
    padding: 5px;
    gap: 9px;
  }
  .compact-shell .encounter-spin small {
    font-size: var(--text-3xs);
    letter-spacing: 0.5px;
    margin-top: 3px;
  }
  .compact-shell .encounter-spin:disabled {
    font-size: var(--text-xl);
  }
  .compact-shell .spin-emblem .item-sprite {
    height: 24px;
    width: 24px;
  }
  .compact-shell .machine-lever {
    transform: scale(0.65);
    height: 49px;
  }
  .compact-shell .machine-status {
    min-height: 17px;
    padding: 3px 2px;
    font-size: var(--text-2xs);
  }
  .compact-shell .center-stop {
    height: 35px;
    padding: 3px 5px;
    gap: 5px;
  }
  .compact-shell .center-stop .ui-sprite {
    width: 25px;
    height: 25px;
  }
  .compact-shell .center-stop strong {
    font-size: var(--text-xs);
  }
  .compact-shell .center-stop small {
    font-size: var(--text-2xs);
  }
  .compact-shell .center-stop b {
    font-size: var(--text-2xs);
  }
  .compact-shell .expedition-dock {
    padding: 5px 6px;
    gap: 5px;
  }
  .dock-header {
    gap: 4px;
    min-height: 27px;
    flex-wrap: nowrap;
  }
  .dock-tabs {
    gap: 3px;
  }
  .dock-tabs button {
    font-size: var(--text-xs);
    padding: 4px 5px;
    min-height: 27px;
    line-height: 17px;
  }
  .dock-tabs small {
    font-size: var(--text-2xs);
    margin-left: 3px;
  }
  .dock-manage {
    font-size: 0;
    min-height: 27px;
    width: 26px;
    padding: 0;
  }
  .dock-manage:after {
    font-size: 18px;
  }
  .dock-balance {
    font-size: var(--text-lg);
  }
  .dock-balance .money-icon {
    width: 8px;
    height: 12px;
  }
  .compact-shell .dock-tips {
    height: 24px;
    gap: 5px;
    padding: 3px 8px 3px 0;
  }
  .compact-shell .dock-tips strong {
    font-size: var(--text-2xs);
  }
  .compact-shell .dock-tips small {
    font-size: var(--text-2xs);
    line-height: 1.25;
  }
  .compact-shell .dock-tips .tv-live {
    display: none;
  }
  .compact-shell .expedition-dock .team-list {
    gap: 4px;
  }
  .compact-shell .expedition-dock .member-title {
    display: block;
  }
  .compact-shell .expedition-dock .member-title h3 {
    font-size: var(--text-xs);
    max-width: 65px;
  }
  .compact-shell .expedition-dock .member-title > strong {
    font-size: var(--text-3xs);
    margin-top: 3px;
  }
  .compact-shell .expedition-dock .member .info {
    gap: 3px 2px;
  }
  .compact-shell .expedition-dock .member-health > strong {
    font-size: var(--text-3xs);
  }
  .compact-shell .expedition-dock .member.empty {
    gap: 4px;
  }
  .compact-shell .expedition-dock .member.empty small {
    font-size: var(--text-3xs);
  }
  .compact-shell .expedition-dock .member.empty .empty-ball {
    font-size: 16px;
  }
  .compact-shell .expedition-dock .inventory-panel {
    grid-template-columns: 71px 1fr;
    gap: 5px;
  }
  .compact-shell .expedition-dock .bag-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 2px;
  }
  .compact-shell .expedition-dock .bag-tabs button {
    font-size: var(--text-2xs);
    height: 25px;
  }
  .compact-shell .expedition-dock .bag-stats {
    font-size: var(--text-3xs);
    padding: 2px 0;
  }
  .compact-shell .expedition-dock .bag-stats .stat-help {
    width: 9px;
    height: 9px;
    font-size: var(--text-3xs);
    line-height: 8px;
  }
  .compact-shell .expedition-dock .passive-item {
    padding: 2px 4px;
    min-height: 23px;
  }
  .compact-shell .expedition-dock .passive-item small {
    font-size: var(--text-2xs);
  }
  .compact-shell .expedition-dock .passive-item .item-sprite {
    width: 19px;
    height: 19px;
  }
  .compact-shell .biome-picker {
    padding: 8px;
    gap: 7px;
  }
  .compact-shell .biome-picker header {
    padding: 10px 2px;
  }
  .compact-shell .biome-picker header h1 {
    font-size: 18px;
    line-height: 1.25;
    margin: 8px 0;
  }
  .compact-shell .biome-picker header p {
    font-size: var(--text-sm);
  }
  .compact-shell .biome-picker header .eyebrow {
    font-size: var(--text-xs);
  }
  .compact-shell .biome-options {
    gap: 6px;
  }
  .compact-shell .biome-copy {
    padding: 8px 4px;
    min-height: 105px;
    gap: 7px;
  }
  .compact-shell .biome-copy strong {
    font-size: var(--text-md);
    line-height: 1.4;
  }
  .compact-shell .biome-copy small {
    font-size: var(--text-2xs);
  }
  .compact-shell .biome-copy > span {
    font-size: var(--text-3xs);
  }
  .compact-shell .biome-photo .route-types {
    padding: 3px;
    gap: 2px;
  }
  .compact-shell .biome-photo .type {
    font-size: var(--text-3xs);
    padding: 2px;
  }
  .compact-shell .biome-picker footer {
    font-size: var(--text-sm);
    padding: 5px 1px;
  }
  .compact-shell .biome-number {
    font-size: var(--text-sm);
  }
  .compact-shell .battle-commandbar {
    height: 40px;
    padding: 5px;
  }
  .compact-shell .battle-commandbar .eyebrow {
    font-size: var(--text-2xs);
  }
  .compact-shell .battle-mode {
    display: none;
  }
  .compact-shell .battle-commandbar .btn {
    font-size: var(--text-2xs);
    min-height: 26px;
    padding: 5px;
  }
  .compact-shell .battle-field .nameplate {
    width: 145px;
    padding: 5px;
  }
  .compact-shell .battle-field .nameplate h3 {
    font-size: var(--text-sm);
  }
  .compact-shell .battle-field .nameplate .type {
    font-size: 6px;
  }
  .compact-shell .battle-field .nameplate .hp {
    height: 6px;
  }
  .compact-shell .battle-console {
    height: 48px;
  }
  .compact-shell .battle-progress {
    min-width: 70px;
    padding: 5px;
    font-size: var(--text-3xs);
  }
  .compact-shell .battle-log {
    font-size: var(--text-3xs);
    padding: 5px;
  }
  .compact-shell .battle-actions {
    min-height: 38px;
    padding: 4px 6px;
  }
  .compact-shell .battle-actions > span {
    font-size: var(--text-2xs);
    max-width: 180px;
    line-height: 1.3;
  }
  .compact-shell .battle-actions .btn {
    font-size: var(--text-xs);
    padding: 6px;
    min-height: 27px;
  }
  .compact-shell .battle-field .ally-fighter {
    width: 46%;
    left: 2%;
    height: 67%;
  }
  .compact-shell .battle-field .enemy-fighter {
    width: 46%;
    right: 2%;
    height: 67%;
  }
  .compact-shell .slot-service h2 {
    font-size: 18px;
  }
  .compact-shell .slot-service p {
    font-size: var(--text-md);
  }
  .compact-shell .slot-shop-art .ui-sprite {
    max-height: 100px;
    width: 100px;
  }
}
@media (max-height: 730px) {
  .slots-shell.compact-shell {
    --dock-height: 176px;
    gap: 5px;
    margin-top: 6px;
    height: calc(100vh - 12px);
    height: calc(100dvh - 12px);
  }
  .compact-shell .game-topbar {
    height: 54px;
    padding: 3px 10px;
  }
  .compact-shell .game-top-actions {
    gap: 3px;
  }
  .compact-shell .run-nav button {
    min-height: 24px;
    padding: 4px 7px;
  }
  .compact-shell .speed-chip {
    padding: 1px 6px;
    line-height: 12px;
    min-height: 0;
  }
  .compact-shell .machine-title {
    height: 47px;
  }
  .compact-shell .machine-title h1 {
    font-size: 15px;
  }
  .compact-shell .machine-title p {
    display: none;
  }
  .compact-shell .encounter-spin {
    height: 39px;
    font-size: 16px;
  }
  .compact-shell .machine-status {
    display: none;
  }
  .compact-shell .reel-focus {
    inset: 10% 0 8%;
    gap: 4px;
  }
  .compact-shell .reel-ghost {
    opacity: 0.16;
  }
  .compact-shell .biome-picker header {
    padding: 5px 0;
  }
  .compact-shell .biome-picker header h1 {
    font-size: 18px;
    margin: 6px 0;
  }
  .compact-shell .biome-picker header p {
    font-size: var(--text-sm);
  }
  .compact-shell .biome-copy {
    min-height: 82px;
  }
  .compact-shell .battle-console {
    height: 40px;
  }
  .compact-shell .dock-tips {
    height: 20px;
  }
}
@media (max-width: 520px) and (max-height: 730px) {
  .compact-shell .biome-identity > img {
    height: 21px;
    width: 25px;
  }
  .compact-shell .biome-identity strong {
    font-size: var(--text-sm);
  }
  .compact-shell .reel-name {
    font-size: var(--text-lg);
  }
  .compact-shell .reel-types .type {
    font-size: 6px !important;
  }
  .compact-shell .reel-details {
    font-size: var(--text-3xs);
  }
  .compact-shell .reel-focus {
    gap: 3px;
  }
  .compact-shell .reel-pokemon .pixel {
    max-height: 87px;
  }
  .compact-shell .expedition-dock .member-title > strong {
    display: none;
  }
  .compact-shell .biome-copy strong {
    font-size: var(--text-sm);
  }
  .compact-shell .biome-copy > span {
    display: none;
  }
}
@media (max-height: 560px) and (min-width: 600px) {
  .slots-shell.compact-shell {
    max-width: 960px;
    --dock-height: 116px;
  }
  .compact-shell .game-topbar {
    height: 44px;
  }
  .compact-shell .expedition-id {
    display: flex;
    gap: 8px;
  }
  .compact-shell .game-top-actions {
    flex-direction: row;
    align-items: center;
  }
  .compact-shell .biome-identity > img {
    height: 30px;
    width: 30px;
  }
  .compact-shell .slot-machine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-rows: 38px 1fr 35px;
    gap: 5px;
    padding: 7px;
  }
  .compact-shell .machine-title {
    grid-column: 1/-1;
    height: 38px;
  }
  .compact-shell .machine-title > div {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .compact-shell .machine-title h1 {
    font-size: 14px;
  }
  .compact-shell .machine-lights {
    display: none;
  }
  .compact-shell .encounter-reels {
    grid-column: 1;
    grid-row: 2/4;
  }
  .compact-shell .machine-controls {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    display: block;
  }
  .compact-shell .spin-emblem,
  .compact-shell .machine-lever {
    display: none;
  }
  .compact-shell .encounter-spin {
    width: 100%;
    font-size: 15px;
    height: 54px;
  }
  .compact-shell .center-stop {
    grid-column: 2;
    grid-row: 3;
    height: 32px;
  }
  .compact-shell .center-stop small {
    display: none;
  }
  .compact-shell .reel-focus {
    inset: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    align-content: center;
  }
  .compact-shell .reel-pokemon {
    flex: none;
    width: 48%;
    height: 65%;
    max-height: 82px;
  }
  .compact-shell .reel-name {
    font-size: var(--text-lg);
    max-width: 45%;
  }
  .compact-shell .reel-types {
    display: none;
  }
  .compact-shell .reel-details {
    width: 100%;
    font-size: var(--text-xs);
  }
  .compact-shell .reel-battle {
    min-height: 24px;
    padding: 4px;
  }
  .compact-shell .reel-ghost {
    display: none;
  }
  .compact-shell .expedition-dock .team-list {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
  }
  .compact-shell .dock-tips {
    height: 18px;
  }
  .compact-shell .expedition-dock .bag-grid {
    grid-template-columns: repeat(20, minmax(0, 1fr));
  }
  .compact-shell .expedition-dock .bag-tabs {
    flex-direction: row;
  }
  .compact-shell .expedition-dock .inventory-panel {
    grid-template-columns: 135px 1fr;
  }
  .compact-shell .expedition-dock .bag-tabs button {
    font-size: var(--text-2xs);
  }
  .compact-shell .biome-picker {
    gap: 5px;
    padding: 7px;
  }
  .compact-shell .biome-picker header {
    padding: 0;
  }
  .compact-shell .biome-picker header h1 {
    font-size: 15px;
    margin: 4px;
  }
  .compact-shell .biome-picker header p,
  .compact-shell .biome-picker footer {
    display: none;
  }
  .compact-shell .biome-picker-card {
    display: grid;
    grid-template-columns: 45% 1fr;
  }
  .compact-shell .biome-copy {
    min-height: 0;
    padding: 4px;
  }
  .compact-shell .biome-photo {
    height: 100%;
  }
  .compact-shell .biome-copy > span {
    display: none;
  }
  .compact-shell .biome-copy strong {
    font-size: var(--text-lg);
  }
  .compact-shell .biome-copy small {
    font-size: var(--text-2xs);
  }
  /* sem altura para o log: sobra a faixa com o botão que abre a batalha inteira */
  .compact-shell .battle-console {
    display: flex;
    flex: none;
    height: 22px;
    min-height: 0;
    overflow: hidden;
  }
  .compact-shell .battle-console .battle-log,
  .compact-shell .battle-console .battle-progress {
    display: none;
  }
  .compact-shell .battle-log-more {
    position: static;
    width: 100%;
    justify-content: center;
    border: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compact-shell .meadow-breeze,
  .compact-shell .meadow-stars i {
    animation: none;
    will-change: auto;
  }
}

/* Shared visual language for the expedition, menus, collections and dialogs. */
.site-theme {
  --font: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --ui-panel: #071d38;
  --ui-raised: #123454;
  --ui-line: #496b8c;
  --ui-gold: #ffe28a;
  --ui-border: #ba9849;
  --ui-text: #edf4ff;
  --ui-muted: #abc5df;
  --ui-frame: inset 0 0 0 2px #06162e, inset 0 0 0 3px #416583, 0 3px #020c1ed9;
  font-family: var(--font);
  color: var(--ui-text);
  --muted: var(--ui-muted);
  --gold: var(--ui-gold);
}
.site-theme button,
.site-theme input,
.site-theme select {
  font-family: inherit;
}
.site-theme {
  font-size: 14px;
}
.site-theme .night-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #050b23 url("/static/game/world/starry-meadow-v1.c43ba0fc187a.png") center/cover no-repeat;
  image-rendering: pixelated;
}
.site-theme .eyebrow {
  font-family: inherit;
  color: var(--ui-gold);
  font-weight: 800;
}
.site-theme .muted,
.site-theme .small.muted {
  color: var(--ui-muted);
}
.site-theme .btn,
.site-theme .run-nav button,
.site-theme .home-back {
  border: 1px solid var(--ui-line);
  background: #123454;
  color: var(--ui-text);
  border-radius: 0;
  box-shadow: 2px 3px var(--pl-navy-950);
  text-shadow: none;
}
.site-theme .btn:hover,
.site-theme .run-nav button:hover,
.site-theme .home-back:hover {
  background: #1b456b;
  border-color: var(--ui-gold);
}
.site-theme .btn.primary {
  background: linear-gradient(#ffe48b, #eaba39);
  border: 2px solid #ffedaa;
  color: #09213c;
  box-shadow: 2px 3px #70551d;
}
.site-theme .btn.primary:hover {
  background: #ffe598;
}
.site-theme .btn.danger,
.site-theme .run-nav .danger {
  background: #4c2434;
  border-color: #b8646d;
  color: #ffc0bc;
}
.site-theme :is(button, a, input, select):focus-visible {
  outline: 2px solid #fff0aa;
  outline-offset: 2px;
}
.site-theme .pill {
  background: #123454;
  color: var(--ui-gold);
  border: 1px solid var(--ui-line);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-md);
}
.site-theme.menu-page {
  position: relative;
  isolation: isolate;
  background: none;
  color: var(--ui-text);
}
.site-theme.menu-page .menu-top,
.site-theme.menu-page:has(.starter-grid) .menu-top {
  background: linear-gradient(#103153, var(--pl-navy-800));
  border: 2px solid var(--ui-border);
  box-shadow: var(--ui-frame);
  color: var(--ui-text);
  width: calc(100% - 24px);
  max-width: 660px;
  height: 54px;
  min-height: 54px;
  flex: none;
  margin: 0 auto;
  padding: 7px 12px;
}
.site-theme .expedition-brand strong {
  font-family: Impact, 'Arial Black', sans-serif;
  color: var(--ui-gold);
  text-shadow:
    2px 3px #8a561c,
    3px 4px #000;
  letter-spacing: 0.5px;
}
.site-theme.menu-page .expedition-brand strong {
  font-size: 26px;
}
.site-theme.menu-page .menu-top .btn {
  font-size: var(--text-sm);
  min-height: 30px;
  padding: 7px 10px;
  box-shadow: none;
}
.site-theme.menu-page h2 {
  color: var(--ui-gold);
}
.site-theme.menu-page:has(.starter-grid) .main {
  background: linear-gradient(145deg, #123354f5, #071b34f5);
  border-color: var(--ui-border);
  box-shadow: var(--ui-frame);
}
.site-theme.menu-page:has(.starter-grid) .starter-intro .eyebrow {
  color: var(--ui-gold);
}
.site-theme.menu-page:has(.starter-grid) .starter-intro h1 {
  color: var(--ui-gold);
  font-size: 23px;
  text-shadow: 1px 2px #020b1b;
}
.site-theme.menu-page:has(.starter-grid) .starter-intro p {
  color: var(--ui-muted);
  font-size: var(--text-lg);
}
.site-theme.menu-page:has(.starter-grid) .main > .banner {
  background: #0a2039;
  border-color: var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--text-sm);
}
.site-theme.menu-page:has(.starter-grid) .starter {
  background: linear-gradient(110deg, #123855, #071a32);
  color: var(--ui-text);
  border-color: var(--ui-line);
  box-shadow: 2px 3px var(--pl-navy-950);
}
.site-theme.menu-page:has(.starter-grid) .starter:hover {
  border-color: var(--starter-accent);
  box-shadow: 2px 3px var(--pl-navy-950);
}
.site-theme.menu-page:has(.starter-grid) .starter:before {
  border-bottom-color: #07182d;
}
.site-theme.menu-page:has(.starter-grid) .starter:after {
  border-color: color-mix(in srgb, var(--starter-accent) 20%, transparent);
}
.site-theme.menu-page:has(.starter-grid) .starter-portrait {
  border-right-color: #496b8c;
}
.site-theme.menu-page:has(.starter-grid) .starter-info h2 {
  color: var(--ui-text);
}
.site-theme.menu-page:has(.starter-grid) .starter-info p,
.site-theme.menu-page:has(.starter-grid) .starter-number {
  color: var(--ui-muted);
}
.site-theme.menu-page:has(.starter-grid) .starter-level {
  background: #07182d;
  border-color: var(--ui-line);
  color: var(--ui-gold);
  box-shadow: 1px 2px var(--starter-accent);
}
.site-theme.menu-page:has(.starter-grid) .type-logo {
  background: #07182d;
  border-color: #496b8c;
  color: var(--ui-text);
  box-shadow: 1px 2px var(--pl-navy-950);
}
.site-theme.menu-page:has(.starter-grid) .starter > .btn {
  background: linear-gradient(#ffe48b, #eaba39);
  border-color: #ffedaa;
  color: #09213c;
  text-shadow: none;
  box-shadow: 2px 3px #70551d;
  font-size: var(--text-md);
}

/* Outcome uses the same compact frame and night scene as the encounter machine. */
html:has(.site-theme .outcome),
body:has(.site-theme .outcome) {
  height: 100%;
  overflow: hidden;
}
.site-theme.menu-page:has(.outcome) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 12px 0;
}
.site-theme.menu-page .main:has(.outcome) {
  flex: none;
  width: calc(100% - 24px);
  max-width: 660px;
  margin: 0 auto;
  padding: 0;
  min-height: 0;
}
.site-theme .outcome {
  width: 100%;
  max-width: none;
  margin: 0;
  background: linear-gradient(145deg, #123354f5, #071b34f5) !important;
  border: 2px solid var(--ui-border) !important;
  box-shadow: var(--ui-frame) !important;
  color: var(--ui-text);
}
.site-theme .outcome:before {
  height: 5px;
  border-bottom: 1px solid var(--pl-navy-800);
  background: var(--ui-gold);
}
.site-theme .outcome h1 {
  color: var(--ui-gold);
  font-size: 26px !important;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 10px 0 !important;
}

/* Collection pages share one header and keep large collections inside their panel. */
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 12px 0;
  overflow: hidden;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)) .main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  width: calc(100% - 24px);
  max-width: 660px;
  margin: 0 auto;
  padding: 18px;
  background: #071d38ed;
  border: 2px solid var(--ui-border);
  box-shadow: var(--ui-frame);
}
.site-theme.menu-page .sectionheading {
  margin: 0 0 16px;
  gap: 12px;
}
.site-theme.menu-page .sectionheading h2 {
  font-size: 21px;
}
.site-theme.menu-page .collection {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.site-theme.menu-page .dex-entry,
.site-theme.menu-page .panel:not(.outcome) {
  background: linear-gradient(#123454, #091d35);
  border: 1px solid var(--ui-line);
  box-shadow: 2px 3px var(--pl-navy-950);
  color: var(--ui-text);
}
.site-theme.menu-page .dex-entry {
  padding: 10px 5px;
  min-width: 0;
}
.site-theme.menu-page .dex-entry .pixel {
  width: 64px;
  height: 64px;
  max-width: 100%;
}
.site-theme.menu-page .dex-entry strong {
  font-size: var(--text-md);
}
.site-theme.menu-page .empty-state {
  padding: 32px 22px;
  color: var(--ui-muted);
  line-height: 1.6;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.empty-state) {
  justify-content: center;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.empty-state) .main {
  flex: none;
}

/* Home and account menus retain their actions with the same palette and typography. */
.site-theme.home-screen {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  padding: 12px;
  overflow: hidden;
}
.site-theme.home-screen:before {
  background: linear-gradient(#04112618, #04112655);
}
.site-theme .home-window {
  width: 100%;
  max-width: 660px;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  overflow: auto;
  padding: 22px 24px;
  background: linear-gradient(145deg, #123354f5, #071b34f5);
  border: 2px solid var(--ui-border);
  box-shadow: var(--ui-frame);
}
.site-theme .home-window:before,
.site-theme .home-window:after {
  width: 6px;
  height: 6px;
  top: 8px;
  background: var(--ui-gold);
  box-shadow: none;
}
.site-theme .home-wordmark {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--ui-gold);
  -webkit-text-stroke: 0;
  text-shadow:
    2px 3px #8a561c,
    3px 4px #000;
  transform: none;
}
.site-theme .home-wordmark:before,
.site-theme .home-wordmark:after {
  display: none;
}
.site-theme .home-tagline {
  color: var(--ui-muted);
  font-size: var(--text-sm);
  letter-spacing: 3px;
  margin-top: 8px;
}
.site-theme .home-version {
  font-size: var(--text-xs);
  color: var(--ui-gold);
  margin-top: 7px;
}
.site-theme .home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 14px;
}
.site-theme .home-menu-card,
.site-theme .home-menu-card.wide {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 68px;
  gap: 0;
  padding: 11px 14px;
  border: 1px solid var(--ui-line);
  background: linear-gradient(110deg, #123855, #071a32);
  box-shadow: 2px 3px var(--pl-navy-950);
  color: var(--ui-text);
  font-family: inherit;
}
.site-theme .home-menu-card.wide {
  grid-column: 1/-1;
}
.site-theme .home-menu-card:hover {
  border-color: var(--ui-gold);
  background: #173c60;
  transform: none;
}
.site-theme .home-menu-card.journey-card {
  border-color: var(--ui-border);
  background: linear-gradient(#ffe48b, #eaba39);
  color: #09213c;
}
.site-theme .home-menu-copy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 100%;
  text-align: left;
}
.site-theme .home-menu-copy strong {
  font-size: 14px;
  letter-spacing: 0.3px;
  color: inherit;
}
.site-theme .home-menu-copy small {
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--ui-muted);
  border: 0;
  padding: 0;
  text-transform: none;
}
.site-theme .journey-card .home-menu-copy small {
  color: #21445c;
}
.site-theme .home-window:not(.auth-active) .home-menu-card.journey-card .home-menu-copy strong {
  color: #09213c;
  text-shadow: none;
}
.site-theme .home-premise {
  border-color: var(--ui-line);
  padding: 12px 0;
  margin-top: 10px;
}
.site-theme .home-premise strong {
  font-size: var(--text-lg);
  color: var(--ui-gold);
}
.site-theme .home-premise p {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ui-muted);
}
.site-theme .home-recovery {
  color: var(--ui-gold);
}
.site-theme .home-credit {
  position: static;
  color: var(--ui-muted);
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  text-shadow: 1px 1px var(--pl-navy-950);
}
.site-theme .home-auth {
  width: 100%;
  max-width: 400px;
  margin: 15px auto 8px;
}
.site-theme .home-auth h2 {
  color: var(--ui-gold);
  font-size: 20px;
}
.site-theme .home-back {
  font-size: var(--text-sm);
  padding: 7px 10px;
}
.site-theme .field {
  color: var(--ui-muted);
  font-size: var(--text-md);
  margin-bottom: 12px;
}
.site-theme .field input,
.site-theme select {
  background: #06172b;
  border-color: var(--ui-line);
  color: var(--ui-text);
  border-radius: 0;
}
.site-theme .field input {
  font-size: 14px;
  padding: 10px;
}

/* Shop, inventory, confirmation and capture retain their individual mechanics. */
.site-theme.overlay {
  background: #020a1ccb;
  backdrop-filter: blur(5px);
}
.site-theme .modal {
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 2px solid var(--ui-border);
  box-shadow: var(--ui-frame);
}
.site-theme .modal-head {
  background: linear-gradient(#103153, var(--pl-navy-800));
  border-bottom: 2px solid var(--ui-border);
  padding: 14px 17px;
}
.site-theme .modal-head h2 {
  font-size: 23px;
  color: var(--ui-gold);
}
.site-theme .modal-head .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 1px;
}
.site-theme .modal-body {
  font-size: 14px;
}
.site-theme .modal-body .banner,
.site-theme .shop-item,
.site-theme .item-use-head,
.site-theme .item-target-card,
.site-theme .partner-summary,
.site-theme .partner-data {
  background: #0b2742;
  border-color: var(--ui-line);
  color: var(--ui-text);
  box-shadow: 2px 3px var(--pl-navy-950);
}
.site-theme .shop-item h3,
.site-theme .item-use-head h3 {
  color: var(--ui-text);
}
.site-theme .shop-item p,
.site-theme .item-target-copy > span,
.site-theme .item-use-head p {
  color: var(--ui-muted);
}
.site-theme .partner-art {
  background: radial-gradient(#245276, #07182f);
  border-color: var(--ui-line);
}
.site-theme .partner-traits > div,
.site-theme .partner-values > div {
  background: #123454;
  border-left-color: var(--ui-border);
}
.site-theme .partner-stat-grid .detail-cell {
  background: #06172b;
  border-color: var(--ui-line);
}
.site-theme .upgrade-side,
.site-theme .upgrade-center {
  background: #0b203a;
  border-color: var(--ui-line);
}
.site-theme .resource-block,
.site-theme .upgrade-side header {
  border-color: var(--ui-line);
}
.site-theme .upgrade-side h3,
.site-theme .resource-block h3 {
  color: var(--ui-gold);
}
.site-theme .capture-pokemon,
.site-theme .sacrifice {
  background: #06172b;
  border-color: var(--ui-line);
}
.site-theme .capture-pokemon.selected,
.site-theme .sacrifice.selected {
  background: #163653;
  border-color: var(--ui-gold);
}
@media (max-width: 520px) {
  .site-theme.menu-page .menu-top,
  .site-theme.menu-page:has(.starter-grid) .menu-top {
    width: calc(100% - 14px);
    height: 50px;
    min-height: 50px;
    padding: 5px 10px;
  }
  .site-theme.menu-page .expedition-brand strong {
    font-size: 23px;
  }
  .site-theme.menu-page:has(.starter-grid) .starter-intro h1 {
    font-size: 18px;
  }
  .site-theme.menu-page:has(.starter-grid) .starter-intro p {
    font-size: var(--text-sm);
  }
  .site-theme.menu-page:has(.starter-grid) .starter > .btn {
    font-size: var(--text-sm);
  }
  .site-theme.menu-page:has(.outcome) {
    padding: 7px 0;
    gap: 6px;
  }
  .site-theme.menu-page .main:has(.outcome) {
    width: calc(100% - 14px);
  }
  .site-theme .outcome h1 {
    font-size: 21px !important;
    margin: 8px 0 !important;
  }
  .site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)) {
    padding: 7px 0;
    gap: 6px;
  }
  .site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)) .main {
    width: calc(100% - 14px);
    padding: 12px;
  }
  .site-theme.menu-page .sectionheading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .site-theme.menu-page .sectionheading h2 {
    font-size: 20px;
  }
  .site-theme.menu-page .collection {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .site-theme.home-screen {
    padding: 7px;
    gap: 6px;
  }
  .site-theme .home-window {
    padding: 18px 14px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .site-theme .home-wordmark {
    font-size: 38px;
  }
  .site-theme .home-menu-card,
  .site-theme .home-menu-card.wide {
    padding: 9px 10px;
    min-height: 64px;
  }
  .site-theme .home-actions {
    gap: 6px;
    margin: 14px 0 10px;
  }
  .site-theme .home-menu-copy strong {
    font-size: var(--text-lg);
  }
  .site-theme .home-menu-copy small {
    font-size: var(--text-sm);
  }
  .site-theme .home-premise p {
    font-size: var(--text-md);
    line-height: 1.4;
  }
  .site-theme .home-tagline {
    font-size: var(--text-xs);
  }
  .site-theme .home-credit {
    font-size: var(--text-3xs);
  }
}
@media (max-height: 620px) and (max-width: 520px) {
  .site-theme.menu-page:has(.starter-grid) .starter-intro h1 {
    font-size: 16px;
  }
  .site-theme.menu-page:has(.starter-grid) .starter-intro p {
    font-size: var(--text-xs);
  }
  .site-theme .outcome h1 {
    font-size: 19px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-theme .meadow-breeze,
  .site-theme .meadow-stars i {
    animation: none;
    will-change: auto;
  }
}
/* Encounter journey: a lit route with a clear current stop and recorded results. */
.compact-shell .expedition-progress {
  height: 66px;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 15px;
  padding: 5px 7px;
}
.journey-route {
  min-width: 0;
  width: 100%;
}
.track-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: #adc9e8;
  margin: 0 3px 4px;
  letter-spacing: 0.6px;
}
.track-caption strong {
  color: var(--pl-gold-light);
  font-size: var(--text-xs);
}
.track-caption span {
  letter-spacing: 0;
}
.compact-shell .journey-track {
  height: 34px;
  min-height: 0;
  gap: 4px;
  padding: 0 3px;
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
}
.compact-shell .journey-track:before,
.compact-shell .journey-track:after {
  top: 50%;
  left: 16px;
  right: 16px;
  height: 5px;
  transform: translateY(-50%);
  border: 0;
  box-shadow:
    0 1px #000,
    inset 0 1px #476789;
}
.compact-shell .journey-track:before {
  background: #10283f;
}
.compact-shell .journey-track:after {
  right: auto;
  max-width: calc(100% - 32px);
  width: calc((100% - 32px) * var(--progress));
  background: linear-gradient(90deg, #26bba8, #82edb0);
  box-shadow: 0 0 8px #53dfac55;
}
.compact-shell .track-stop {
  height: 30px;
  width: 30px;
  max-width: 30px;
  flex: 0 0 30px;
  border: 1px solid #537192;
  background: linear-gradient(135deg, #1d4265, #0a1c33);
  box-shadow:
    inset 0 0 0 2px #071b32,
    0 2px #020d1c;
  padding: 3px;
  color: #9ab4d0;
}
.compact-shell .track-stop-mark {
  font: 700 10px var(--font);
}
.compact-shell .track-stop.current {
  color: #fff1b0;
  border: 2px solid #ffe494;
  background: linear-gradient(#b48625, #5e461e);
  box-shadow:
    0 0 0 2px #091a31,
    0 0 12px #f6cd6366;
  animation: route-beacon 2.4s ease-in-out infinite;
  transform: translateY(-1px);
}
.compact-shell .track-stop.current:before {
  content: '';
  position: absolute;
  top: -6px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background: #ffe494;
  transform: rotate(45deg);
}
.compact-shell .track-stop.caught,
.compact-shell .track-stop.event,
.compact-shell .track-stop.completed {
  border-color: #6edcb7;
  background: #123b42;
  box-shadow:
    inset 0 0 0 1px #216053,
    0 2px #020d1c;
}
.compact-shell .track-stop.missed {
  border-color: #738399;
  background: #1c2b40;
}
.compact-shell .track-stop.current .item-sprite {
  width: 21px;
  height: 21px;
}
@keyframes route-beacon {
  50% {
    box-shadow:
      0 0 0 2px #091a31,
      0 0 18px #f6cd6399;
  }
}
/* Animation speed lives beside the tips, leaving navigation uncluttered. */
.dock-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 25px;
  border-top: 1px solid #355373;
}
.compact-shell .dock-footer .dock-tips {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 0;
  padding: 2px 8px 2px 2px;
  text-align: left;
  justify-content: flex-start;
  overflow: hidden;
}
.compact-shell .dock-footer .dock-tips strong {
  display: none;
}
.compact-shell .dock-footer .dock-tips small {
  font-size: var(--text-xs);
}
.compact-shell .dock-footer .speed-control {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  height: 23px;
  margin: 0;
}
.compact-shell .dock-footer .speed-control > span {
  font-size: var(--text-2xs);
  margin-right: 5px;
  color: #a9c8e5;
}
.compact-shell .dock-footer .speed-chip {
  height: 22px;
  min-width: 25px;
  padding: 2px 4px;
  border: 1px solid #426488;
  box-shadow: none;
  background: #0c2744;
  color: #abc5df;
  font-size: var(--text-sm);
}
.compact-shell .dock-footer .speed-chip.active {
  background: #f0cd72;
  color: #09213c;
  border-color: #ffe6a1;
}
.compact-shell .machine-controls {
  gap: 9px;
  padding: 2px 4px;
  height: 62px;
}
.compact-shell button.machine-lever {
  position: relative;
  display: block;
  width: 42px;
  height: 56px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  overflow: visible;
}
.compact-shell .machine-lever:before {
  display: none;
}
.compact-shell .machine-lever .lever-base {
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 32px;
  height: 15px;
  border: 2px solid #668aa9;
  background: linear-gradient(#244b70, #0c2542);
  box-shadow:
    inset 0 2px #9cbad0,
    0 3px #020d1c;
  z-index: 3;
}
.compact-shell .machine-lever .lever-base:after {
  content: '';
  position: absolute;
  left: 8px;
  top: 3px;
  width: 12px;
  height: 5px;
  background: #06182c;
  border: 1px solid #456883;
}
.compact-shell .machine-lever .lever-arm {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 21px 45px;
  transition: transform 0.2s;
  z-index: 2;
}
.compact-shell .machine-lever .lever-arm i {
  position: absolute;
  left: 17px;
  bottom: 9px;
  top: auto;
  width: 8px;
  height: 33px;
  transform: none;
  border: 1px solid #07182d;
  background: linear-gradient(90deg, #5c7894 15%, #e3f4ff 38%, #a3c4dc 68%, #4d7394 70%);
}
.compact-shell .machine-lever .lever-arm b {
  position: absolute;
  left: 8px;
  top: 0;
  width: 26px;
  height: 26px;
  border: 2px solid #591630;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffb0b9 0 8%, #f85a79 10% 48%, #bd244b 50% 78%, #861a40 80%);
  box-shadow:
    inset -2px -3px #8c1c40,
    1px 2px #04132a;
}
.compact-shell .machine-lever .lever-arm b:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 4px;
  background: #ffc5ca;
}
.compact-shell .machine-lever:hover:not(:disabled) .lever-arm {
  transform: rotate(8deg);
}
.compact-shell .machine-lever:disabled {
  cursor: default;
  opacity: 0.55;
}
.compact-shell .rolling .machine-lever .lever-arm {
  animation: slot-lever-pull 0.6s ease-in-out;
}
@keyframes slot-lever-pull {
  0%,
  100% {
    transform: rotate(0);
  }
  45% {
    transform: rotate(28deg);
  }
}
.compact-shell .center-reel .reel-window {
  background: radial-gradient(ellipse, #f4fff4 25%, #d2ecd8 70%, #7ba39a);
  border-color: #76c7a1;
}
.compact-shell .reel-pokemon > .ui-sprite {
  image-rendering: pixelated;
}
.compact-shell .center-reel .reel-name {
  font-size: 15px;
}
.service-badge {
  display: inline-block;
  background: #225746;
  color: #f0fff6;
  border: 1px solid #6fba90;
  padding: 3px 7px;
  font-size: var(--text-sm);
  font-weight: 800;
}
.compact-shell .center-reel .reel-battle {
  border-color: #72cfab;
  color: #baf1cb;
  background: linear-gradient(#184d49, #0a2d37);
}
/* Capture workbench: offer / wheel and investment / target, within the viewport. */
.site-theme .modal.capture-modal {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  height: min(680px, calc(100dvh - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.site-theme .capture-modal .modal-head {
  flex: none;
  padding: 10px 16px;
  min-height: 58px;
}
.site-theme .capture-modal .modal-head h2 {
  font-size: 20px;
  margin-top: 3px !important;
}
.site-theme .capture-modal .modal-head .eyebrow {
  font-size: var(--text-2xs);
}
.site-theme .capture-modal .modal-head .btn {
  padding: 6px 11px;
  min-height: 30px;
}
.site-theme .capture-modal .modal-body {
  flex: 1;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  background: #05172c;
}
.capture-modal .upgrader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.12fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: 10px;
}
.capture-modal .upgrade-side,
.capture-modal .upgrade-center {
  grid-row: auto;
  grid-column: auto;
  order: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #42698d;
  box-shadow: inset 0 1px #214a6b;
  background: linear-gradient(145deg, #102e4c, #081c34);
  overflow: hidden;
}
.capture-modal .upgrade-center {
  border-color: #bc994d;
  background: radial-gradient(ellipse at 50% 30%, #183c55, #081c34 70%);
  text-align: center;
  align-items: stretch;
  justify-content: center;
}
.capture-modal .upgrader-step-head {
  flex: none;
  padding: 0 0 10px;
  gap: 8px;
  border-bottom: 1px solid #375a79;
}
.capture-modal .upgrader-step-head .step-number {
  font-size: var(--text-lg);
  width: 27px;
  height: 27px;
  min-width: 27px;
  line-height: 25px;
}
.capture-modal .upgrader-step-head h3 {
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--pl-gold-light);
}
.capture-modal .upgrader-step-head p {
  font-size: var(--text-md);
  line-height: 1.4;
  margin-top: 5px;
}
.capture-modal .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 1px;
}
.capture-modal .upgrade-center-title {
  margin: 0;
  font-size: var(--text-lg);
}
.capture-modal .upgrade-center .wheel-wrap {
  flex: none;
  width: clamp(150px, 26vh, 222px);
  height: clamp(150px, 26vh, 222px);
  margin: 8px auto 16px;
}
.capture-modal .wheel-center strong {
  font-size: 38px;
}
.capture-modal .wheel-center span,
.capture-modal .wheel-center small {
  font-size: var(--text-2xs);
  letter-spacing: 0.4px;
}
.capture-modal #chance-detail {
  flex: none;
  margin: 0;
  min-height: 24px;
  line-height: 1.35;
  font-size: var(--text-sm);
  color: #c7daee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture-modal .resource-block {
  padding: 0;
  margin: 0;
  border: 0;
  min-height: 0;
}
.capture-modal .resource-title h3 {
  font-size: var(--text-md);
  color: var(--pl-gold-light);
  line-height: 1.3;
}
.capture-modal .optional-tag {
  font-size: var(--text-2xs);
}
.capture-modal .small {
  font-size: var(--text-sm);
  line-height: 1.4;
}
.capture-modal .resource-title {
  gap: 5px;
}
.capture-modal .stat-help {
  width: 14px;
  height: 14px;
  line-height: 12px;
  font-size: var(--text-xs);
}
.capture-modal .gold-block {
  flex: none;
  width: 100%;
  padding: 9px 10px;
  background: #06162c;
  border: 1px solid #385b7b;
  text-align: left;
}
.capture-modal .gold-block > p.muted {
  display: none;
}
.capture-modal .gold-block .resource-gold {
  font-size: var(--text-md);
}
.capture-modal .gold-slider-row {
  gap: 7px;
  margin: 7px 0;
}
.capture-modal .gold-slider-row input[type='range'] {
  min-width: 0;
  width: 100%;
  height: 14px;
  margin: 0;
}
.capture-modal .gold-slider-entry {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.capture-modal .gold-slider-entry .money-icon {
  width: 16px;
  height: 16px;
}
.capture-modal .gold-slider-value {
  display: block;
  width: 42px;
  min-width: 42px;
  height: 24px;
  box-sizing: border-box;
  padding: 2px 3px;
  border: 1px solid #6685a4;
  border-radius: 3px;
  background: #102844;
  color: #ffe17a;
  font-size: var(--text-md);
  font-weight: 900;
  text-align: right;
  appearance: textfield;
}
.capture-modal .gold-slider-value::-webkit-outer-spin-button,
.capture-modal .gold-slider-value::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.capture-modal .gold-slider-value:focus-visible {
  outline: 2px solid #ffe17a;
  outline-offset: 2px;
}
.capture-modal .capture-cost-line {
  font-size: var(--text-xs);
  padding: 5px 0 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #25415e;
  background: none;
}
.capture-modal .master-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  padding: 7px;
  background: #271f43;
  border: 1px solid #8c71b4;
  text-align: left;
  cursor: pointer;
}
.capture-modal .master-choice.selected,
.capture-modal .master-choice:has(input:checked) {
  border-color: #e0bdff;
  background: #3c2958;
}
.capture-modal .master-choice:has(input:disabled) {
  opacity: 0.55;
}
.capture-modal .master-choice input {
  accent-color: #d5a5f4;
  margin: 0;
}
.capture-modal .master-choice .item-sprite {
  width: 27px;
  height: 27px;
}
.capture-modal .master-choice span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.capture-modal .master-choice strong {
  font-size: var(--text-sm);
  color: #e6c6ff;
}
.capture-modal .master-choice small {
  font-size: var(--text-xs);
  color: #c9b7df;
}
.capture-modal .roulette-skip-toggle {
  flex: none;
  width: 100%;
  padding: 4px 2px;
  min-height: 24px;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  gap: 5px;
  font-size: var(--text-xs);
}
.capture-modal .upgrade-center > .btn {
  flex: none;
  margin: 0;
  padding: 10px 5px;
  min-height: 37px;
  width: 100%;
  font-size: var(--text-xl);
  box-shadow: 0 2px #71551f;
}
.capture-modal .upgrade-center > .btn + .skip-link {
  flex: none;
  margin: 3px 0 0;
  padding: 8px 6px;
  min-height: 36px;
  font-size: var(--text-xs);
  line-height: 1.35;
  border-width: 1px;
  gap: 5px;
  box-shadow: none;
}
.capture-modal .skip-money-icon {
  width: 14px;
  height: 17px;
}
.capture-modal .sacrifice-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.capture-modal .sacrifice-block > .resource-title {
  display: none;
}
.capture-modal .sacrifice-block > p {
  margin: 0;
  font-size: var(--text-sm);
}
.capture-modal .sacrifice-tabs {
  flex: none;
  margin: 0;
  gap: 5px;
}
.capture-modal .sacrifice-tabs button {
  padding: 6px;
  font-size: var(--text-sm);
  min-height: 30px;
}
.capture-modal .sacrifice-block .sacrifices {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.capture-modal .sacrifice {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 16px 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 5px;
  padding: 8px 6px;
  min-height: 72px;
  margin: 0;
  border: 1px solid #496b8c;
}
.capture-modal .sacrifice input {
  grid-row: 1/3;
  grid-column: 1;
  width: 14px;
  height: 14px;
  margin: 0;
  opacity: 1;
  position: static;
  accent-color: #f5d575;
}
.capture-modal .sacrifice-check {
  display: none;
}
.capture-modal .sacrifice > .pixel {
  grid-column: 2;
  grid-row: 1/3;
  width: 46px;
  height: 46px;
}
.capture-modal .sacrifice-copy {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}
.capture-modal .sacrifice-copy strong {
  font-size: var(--text-lg);
  line-height: 1.2;
}
.capture-modal .sacrifice-types {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.capture-modal .sacrifice-types .type {
  gap: 2px;
  padding: 1px 3px;
  font-size: 8px !important;
  line-height: 1.1;
}
.capture-modal .sacrifice-types .type-sprite {
  width: 10px;
  height: 10px;
}
.capture-modal .sacrifice-copy small {
  font-size: var(--text-xs);
}
.capture-modal .sacrifice-copy em {
  display: none;
}
.capture-modal .sacrifice > b {
  grid-column: 3;
  grid-row: 2;
  font-size: var(--text-md);
  justify-self: start;
}
.capture-modal .sacrifice-summary {
  flex: none;
  margin: 0;
  font-size: var(--text-xs);
  padding: 7px 5px;
  border-width: 1px;
}
.capture-modal .empty-sacrifices {
  font-size: var(--text-md);
  padding: 18px 8px;
}
.capture-modal .capture-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.capture-modal .capture-item {
  flex: 1;
  min-width: 50px;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-width: 1px;
}
.capture-modal .capture-item .item-sprite {
  width: 24px;
  height: 24px;
}
.capture-modal .capture-item strong {
  font-size: var(--text-xs);
}
.capture-modal .capture-item small {
  font-size: var(--text-2xs);
}
.capture-modal .target-side .capture-targets {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  gap: 8px;
}
.capture-modal .capture-pokemon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 112px;
  padding: 10px 7px;
  margin: 0;
  border: 1px solid #496b8c;
}
.capture-modal .capture-pokemon input {
  position: absolute;
  left: 7px;
  top: 8px;
  opacity: 1;
  accent-color: #f5d575;
  width: 15px;
  height: 15px;
  margin: 0;
}
.capture-modal .capture-pokemon > .pixel {
  width: 75px;
  height: 75px;
  object-fit: contain;
}
.capture-modal .capture-pokemon > div {
  flex: 1;
  min-width: 95px;
  text-align: left;
}
.capture-modal .capture-pokemon strong {
  font-size: 14px;
  line-height: 1.25;
}
.capture-modal .capture-pokemon small {
  font-size: var(--text-xs);
  line-height: 1.7;
}
.capture-modal .capture-pokemon b {
  font-size: var(--text-md);
  margin-top: 5px;
}
.capture-modal .capture-pokemon .type {
  font-size: var(--text-2xs) !important;
  padding: 2px 3px;
}
.capture-modal .target-values {
  gap: 4px;
  margin-top: 7px;
}
.capture-modal .target-values em {
  font-size: var(--text-xs);
  padding: 4px;
}
.capture-modal .capture-pokemon.single {
  flex-direction: column;
  min-height: 230px;
  justify-content: center;
}
.capture-modal .capture-pokemon.single > .pixel {
  width: 112px;
  height: 112px;
}
.capture-modal .capture-pokemon.single > div {
  flex: 0;
  width: 100%;
  text-align: center;
}
.capture-modal .capture-pokemon.single .target-values {
  justify-content: center;
}
.capture-modal .selected-summary {
  flex: none;
  margin: 0;
  font-size: var(--text-sm);
  padding: 6px;
  border-width: 1px;
}
.capture-modal .capture-help {
  flex: none;
  max-height: 150px;
  overflow: auto;
  margin: 0;
  padding: 7px;
  border-width: 1px;
}
.capture-modal .capture-help summary {
  font-size: var(--text-xs);
}
.capture-modal .capture-formula {
  font-size: var(--text-sm);
}
.capture-modal .capture-formula dt,
.capture-modal .capture-formula dd {
  font-size: var(--text-xs);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .site-theme .modal.capture-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: none;
  }
  .site-theme .capture-modal .modal-body {
    padding: 6px;
  }
  .site-theme .capture-modal .modal-head {
    min-height: 45px;
    padding: 6px 10px;
  }
  .site-theme .capture-modal .modal-head h2 {
    font-size: 17px;
  }
  .site-theme .capture-modal .modal-head .eyebrow {
    display: none;
  }
  .capture-modal .upgrader-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
  }
  .capture-modal .upgrade-center {
    grid-column: 1/-1;
    grid-row: 1;
    padding: 8px 12px;
  }
  .capture-modal .bag-side {
    grid-column: 1;
    grid-row: 2;
  }
  .capture-modal .target-side {
    grid-column: 2;
    grid-row: 2;
  }
  .capture-modal .upgrade-side {
    padding: 7px;
    gap: 7px;
  }
  .capture-modal .upgrade-center > .eyebrow,
  .capture-modal .upgrade-center-title {
    display: none;
  }
  .capture-modal .upgrade-center .wheel-wrap {
    width: 148px;
    height: 148px;
    margin: 3px auto 12px;
  }
  .capture-modal .wheel-center strong {
    font-size: 29px;
  }
  .capture-modal .wheel-center span,
  .capture-modal .wheel-center small {
    font-size: 6px;
  }
  .capture-modal #chance-detail {
    min-height: 15px;
    font-size: var(--text-xs);
  }
  .capture-modal .gold-block {
    padding: 6px 8px;
  }
  .capture-modal .gold-block .row {
    min-height: 16px;
  }
  .capture-modal .gold-slider-row {
    margin: 5px 0;
  }
  .capture-modal .capture-cost-line {
    padding-top: 3px;
    font-size: var(--text-2xs);
  }
  .capture-modal .master-choice {
    padding: 4px;
  }
  .capture-modal .master-choice .item-sprite {
    width: 21px;
    height: 21px;
  }
  .capture-modal .roulette-skip-toggle {
    min-height: 20px;
    padding: 0;
  }
  .capture-modal .upgrade-center > .btn {
    min-height: 31px;
    padding: 7px;
    font-size: var(--text-md);
  }
  .capture-modal .upgrade-center > .btn + .skip-link {
    min-height: 29px;
    padding: 5px;
    font-size: var(--text-2xs);
    margin: 0;
  }
  .capture-modal .upgrader-step-head {
    gap: 4px;
    align-items: center;
  }
  .capture-modal .upgrader-step-head .step-number {
    display: none;
  }
  .capture-modal .upgrader-step-head .eyebrow {
    font-size: var(--text-2xs);
  }
  .capture-modal .upgrader-step-head p,
  .capture-modal .sacrifice-block > p {
    display: none;
  }
  .capture-modal .sacrifice-tabs button {
    padding: 4px 2px;
    font-size: var(--text-2xs);
    min-height: 25px;
  }
  .capture-modal .sacrifice-tabs strong {
    font-size: var(--text-xs);
  }
  .capture-modal .sacrifice {
    grid-template-columns: 13px 30px minmax(0, 1fr);
    gap: 3px;
    padding: 5px 3px;
    min-height: 62px;
  }
  .capture-modal .sacrifice > .pixel {
    width: 30px;
    height: 38px;
  }
  .capture-modal .sacrifice input {
    width: 12px;
    height: 12px;
  }
  .capture-modal .sacrifice-copy strong {
    font-size: var(--text-sm);
  }
  .capture-modal .sacrifice-copy small {
    font-size: var(--text-3xs);
  }
  .capture-modal .sacrifice > b {
    font-size: var(--text-xs);
  }
  .capture-modal .sacrifice-summary {
    font-size: var(--text-3xs);
    padding: 4px;
  }
  .capture-modal .capture-pokemon,
  .capture-modal .capture-pokemon.single {
    min-height: 125px;
    gap: 3px;
    padding: 5px;
    flex-direction: column;
  }
  .capture-modal .capture-pokemon > .pixel,
  .capture-modal .capture-pokemon.single > .pixel {
    width: 52px;
    height: 52px;
  }
  .capture-modal .capture-pokemon > div,
  .capture-modal .capture-pokemon.single > div {
    min-width: 0;
    width: 100%;
    text-align: center;
    flex: none;
  }
  .capture-modal .capture-pokemon strong {
    font-size: var(--text-md);
  }
  .capture-modal .capture-pokemon small {
    font-size: var(--text-2xs);
  }
  .capture-modal .capture-pokemon b {
    font-size: var(--text-xs);
    margin-top: 3px;
  }
  .capture-modal .target-values {
    margin-top: 3px;
    justify-content: center;
  }
  .capture-modal .target-values em {
    font-size: var(--text-3xs);
    padding: 2px;
  }
  .capture-modal .capture-help summary {
    font-size: var(--text-3xs);
  }
  .capture-modal .selected-summary {
    font-size: var(--text-2xs);
    padding: 4px;
  }
  .capture-modal .capture-items {
    gap: 3px;
  }
  .capture-modal .capture-item {
    min-width: 30px;
    padding: 3px 1px;
  }
  .capture-modal .capture-item strong {
    display: none;
  }
  .capture-modal .capture-item .item-sprite {
    width: 20px;
    height: 20px;
  }
  .capture-modal .resource-title h3 {
    font-size: var(--text-xs);
  }
}
@media (max-width: 520px) {
  .compact-shell .expedition-progress {
    padding: 2px 4px;
  }
  .compact-shell .journey-route {
    width: 100%;
  }
  .compact-shell .journey-track {
    height: 30px;
  }
  .track-caption,
  .track-caption strong {
    font-size: var(--text-2xs);
  }
  .compact-shell .track-stop {
    height: 25px;
    width: 25px;
    max-width: 25px;
    flex-basis: 25px;
    padding: 1px;
  }
  .compact-shell .track-stop.current .item-sprite {
    width: 18px;
    height: 18px;
  }
  .compact-shell .machine-controls {
    gap: 5px;
    height: 49px;
    padding: 0;
  }
  .compact-shell button.machine-lever {
    transform: scale(0.78);
    transform-origin: center center;
    width: 32px;
    height: 49px;
  }
  .compact-shell .dock-footer {
    gap: 5px;
  }
  .compact-shell .dock-footer .speed-control > span {
    display: none;
  }
  .compact-shell .dock-footer .speed-chip {
    min-width: 23px;
    font-size: var(--text-xs);
  }
  .compact-shell .dock-footer .dock-tips small {
    font-size: var(--text-2xs);
  }
}
@media (max-height: 730px) and (min-width: 761px) {
  .capture-modal .upgrade-center .wheel-wrap {
    width: 170px;
    height: 170px;
    margin: 4px auto 12px;
  }
  .capture-modal .upgrade-side,
  .capture-modal .upgrade-center {
    padding: 9px;
    gap: 6px;
  }
  .capture-modal .upgrader-step-head p {
    display: none;
  }
  .capture-modal .upgrade-center > .eyebrow {
    display: none;
  }
  .capture-modal .gold-block {
    padding: 6px 8px;
  }
  .capture-modal .master-choice {
    padding: 4px;
  }
  .capture-modal .upgrade-center > .btn {
    min-height: 32px;
    padding: 7px;
  }
}
@media (max-height: 650px) and (max-width: 760px) {
  .capture-modal .upgrade-center .wheel-wrap {
    width: 104px;
    height: 104px;
    margin: 0 auto 10px;
  }
  .capture-modal .wheel-center strong {
    font-size: 23px;
  }
  .capture-modal .wheel-center span {
    display: none;
  }
  .capture-modal .wheel-center small {
    font-size: 5px;
    letter-spacing: 0;
  }
  .capture-modal .upgrade-center {
    padding: 5px 9px;
  }
  .capture-modal .gold-block {
    padding: 4px 6px;
  }
  .capture-modal .master-choice small {
    font-size: var(--text-2xs);
  }
  .capture-modal .master-choice strong {
    font-size: var(--text-xs);
  }
  .capture-modal .capture-pokemon,
  .capture-modal .capture-pokemon.single {
    min-height: 112px;
  }
  .capture-modal .capture-pokemon > .pixel,
  .capture-modal .capture-pokemon.single > .pixel {
    width: 40px;
    height: 40px;
  }
  .capture-modal .upgrade-side {
    gap: 4px;
    padding: 5px;
  }
  .capture-modal .upgrader-step-head .eyebrow {
    display: none;
  }
  .capture-modal .sacrifice-block {
    gap: 5px;
  }
}
@media (max-height: 560px) and (min-width: 761px) {
  .site-theme .modal.capture-modal {
    height: calc(100vh - 12px);
    height: calc(100dvh - 12px);
    max-height: none;
  }
  .site-theme .capture-modal .modal-head {
    min-height: 38px;
    padding: 4px 10px;
  }
  .site-theme .capture-modal .modal-head .eyebrow {
    display: none;
  }
  .capture-modal .upgrade-center .wheel-wrap {
    width: 112px;
    height: 112px;
    margin: 0 auto 9px;
  }
  .capture-modal .wheel-center strong {
    font-size: 24px;
  }
  .capture-modal .wheel-center small,
  .capture-modal .wheel-center span {
    font-size: 5px;
  }
  .capture-modal .upgrade-center-title {
    display: none;
  }
  .capture-modal .gold-block {
    padding: 4px 6px;
  }
  .capture-modal .master-choice {
    padding: 2px;
  }
  .capture-modal .master-choice small {
    display: none;
  }
  .capture-modal .upgrade-center > .btn {
    min-height: 28px;
    padding: 5px;
    font-size: var(--text-md);
  }
  .capture-modal .upgrade-center > .btn + .skip-link {
    min-height: 27px;
    padding: 4px;
    font-size: var(--text-2xs);
  }
  .capture-modal .roulette-skip-toggle {
    min-height: 20px;
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compact-shell .track-stop.current,
  .compact-shell .rolling .machine-lever .lever-arm {
    animation: none;
  }
  .compact-shell .machine-lever .lever-arm {
    transition: none;
  }
}
.capture-modal .upgrader-step-head {
  grid-template-columns: 27px minmax(0, 1fr);
  margin: 0 !important;
  padding-bottom: 10px !important;
}
.capture-modal .capture-pokemon {
  flex: none;
  flex-wrap: nowrap;
}
@media (max-width: 760px) {
  .capture-modal .upgrader-step-head {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 6px !important;
  }
  .capture-modal .upgrader-step-head h3 {
    font-size: var(--text-sm) !important;
    margin: 2px 0 !important;
  }
  .capture-modal .bag-side > .resource-block:last-child:not(.sacrifice-block) .resource-title {
    display: none;
  }
  .capture-modal .capture-items {
    margin: 0;
  }
  .capture-modal .capture-item {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2px;
  }
  .capture-modal .capture-item small {
    max-width: 31px;
  }
  .capture-modal .capture-pokemon small .type {
    font-size: var(--text-3xs) !important;
  }
  .capture-modal .capture-item {
    min-height: 28px;
    height: 28px;
  }
  .capture-modal .capture-item small {
    font-size: var(--text-2xs);
    white-space: nowrap;
  }
  .capture-modal .capture-item small span {
    display: none;
  }
  .capture-modal .sacrifice-tabs button {
    line-height: 14px;
  }
  .capture-modal .sacrifice-summary {
    min-height: 0;
    height: 23px;
  }
  .capture-modal .sacrifice-summary b {
    padding: 2px 4px;
  }
}
@media (max-width: 760px) and (max-height: 600px) {
  .capture-modal .upgrade-center .wheel-wrap {
    width: 86px;
    height: 86px;
  }
  .capture-modal .bag-side > .resource-block:last-child:not(.sacrifice-block) {
    display: none;
  }
  .capture-modal .gold-block .resource-title h3 {
    font-size: var(--text-2xs);
  }
  .capture-modal .gold-slider-row {
    margin: 3px 0;
  }
  .capture-modal .roulette-skip-toggle {
    font-size: var(--text-2xs);
  }
  .capture-modal .capture-pokemon small .type-sprite {
    display: none;
  }
}
@media (max-width: 760px) {
  .capture-modal .capture-help summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 14px;
    padding: 0;
    line-height: 14px;
  }
  .capture-modal .capture-help summary > span {
    width: 13px;
    height: 13px;
    min-width: 13px;
    padding: 0;
    font-size: var(--text-2xs);
    line-height: 13px;
  }
  .capture-modal .capture-help {
    padding: 4px;
    max-height: 100px;
  }
}
.compact-shell .reel-pokemon > .ui-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  object-fit: contain;
}
@media (max-width: 520px) {
  .compact-shell .expedition-progress {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    height: 78px;
  }
  .compact-shell .expedition-progress .biome-identity {
    flex: none;
    height: 24px;
    min-height: 0;
    width: 100%;
  }
  .compact-shell .expedition-progress .biome-identity > img {
    height: 23px;
    width: 27px;
  }
  .compact-shell .expedition-progress .journey-route {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .compact-shell .journey-track {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  .compact-shell .track-caption {
    margin-bottom: 2px;
  }
}
/* Pixel frames and centered artwork keep every sprite inside its own slot. */
@media (min-height: 561px) {
  .slots-shell.compact-shell {
    --dock-height: 188px;
  }
}
.compact-shell .track-stop,
.compact-shell .track-stop-tile {
  border-radius: 0;
}
.compact-shell .track-stop-tile {
  position: absolute;
  inset: 1px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}
.compact-shell .track-stop-tile img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}
.compact-shell .expedition-dock .member {
  padding: 4px 7px;
  gap: 6px;
}
.compact-shell .expedition-dock .member .team-portrait {
  position: relative;
  inset: auto;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 100%;
  max-height: none;
  min-height: 0;
}
.compact-shell .expedition-dock .member .team-portrait .pixel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.compact-shell .machine-controls {
  grid-template-columns: 64px minmax(0, 1fr) 42px;
}
/* Capture targets use a compact six-place roster, with the same card anatomy. */
.capture-modal .target-side .target-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 7px;
  padding: 1px;
  overflow: auto;
}
.capture-modal .target-roster .target-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 42px 16px 14px 15px 20px;
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-height: 0;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 6px;
  background: linear-gradient(150deg, #10334c, #06182e);
  border: 1px solid #486c8c;
  box-shadow: inset 0 1px #ffffff0a;
  overflow: hidden;
  color: #e5f0ff;
  text-align: center;
}
.capture-modal .target-roster .target-card.selected {
  border-color: #eac867;
  background: linear-gradient(150deg, #193f4b, #0a2236);
  box-shadow: inset 0 0 0 1px #c8a45022;
}
.capture-modal .target-roster .target-card:has(input:focus-visible) {
  outline: 2px solid #ffdc70;
  outline-offset: -3px;
}
.capture-modal .target-roster .target-card:hover {
  border-color: var(--pl-gold-light);
}
.capture-modal .target-roster .target-card input {
  z-index: 2;
  left: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.capture-modal .target-roster .target-number {
  position: absolute;
  top: 8px;
  right: 7px;
  color: #8ca8c4;
  font: 700 8px var(--font);
  letter-spacing: 1px;
}
.capture-modal .target-roster .target-card > div {
  flex: none;
  min-width: 0;
  width: 100%;
  margin: 0;
  text-align: center;
}
.capture-modal .target-roster .target-portrait {
  position: relative;
  height: 42px;
  grid-row: 1;
  overflow: visible;
  background: radial-gradient(ellipse at center, #7ebadc20, transparent 68%);
}
.capture-modal .target-roster .target-portrait .pixel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.capture-modal .target-roster .target-identity {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.capture-modal .target-roster .target-identity strong {
  font-size: var(--text-lg);
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eef6ff;
}
.capture-modal .target-roster .target-identity small {
  font-size: var(--text-2xs);
  line-height: 12px;
  white-space: nowrap;
  color: #9dbad7;
}
.capture-modal .target-roster .target-types {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.capture-modal .target-roster .target-types .type {
  font-size: var(--text-3xs) !important;
  line-height: 11px;
  padding: 1px 3px;
  gap: 2px;
  white-space: nowrap;
}
.capture-modal .target-roster .target-types .type-sprite {
  width: 9px;
  height: 9px;
}
.capture-modal .target-roster .target-chance {
  grid-row: 4;
  margin: 0;
  padding: 1px 0;
  width: 100%;
  font-size: var(--text-xs);
  line-height: 12px;
  letter-spacing: 0;
  color: #a9bbc9;
  border-top: 1px solid #385770;
}
.capture-modal .target-roster .selected .target-chance {
  color: #a9ee9f;
}
.capture-modal .target-roster .target-values {
  grid-row: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  margin: 0 !important;
  min-width: 0;
}
.capture-modal .target-roster .target-values em {
  font-size: var(--text-2xs);
  line-height: 10px;
  padding: 3px;
  border: 0;
  background: #04152988;
  white-space: normal;
}
.capture-modal .target-roster .target-values em:first-child {
  flex: 1;
}
.capture-modal .target-roster .target-values .money-icon {
  width: 10px;
  height: 11px;
}
.capture-modal .target-roster .target-values .money {
  gap: 2px;
}
.capture-modal .target-roster .target-card.single {
  grid-column: 1/-1;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: 22px 20px 20px 23px;
  gap: 3px 8px;
  min-height: 0;
  padding: 12px 9px;
}
.capture-modal .target-roster .single .target-portrait {
  grid-column: 1;
  grid-row: 1/-1;
  height: 100%;
  min-height: 78px;
}
.capture-modal .target-roster .single .target-portrait .pixel {
  width: 100px;
  height: 100px;
}
.capture-modal .target-roster .single .target-identity {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-start;
}
.capture-modal .target-roster .single .target-identity strong {
  font-size: 15px;
}
.capture-modal .target-roster .single .target-types {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-start;
}
.capture-modal .target-roster .single .target-chance {
  grid-column: 2;
  grid-row: 3;
  text-align: left;
  font-size: var(--text-sm);
}
.capture-modal .target-roster .single .target-values {
  grid-column: 2;
  grid-row: 4;
  justify-content: flex-start;
}
.capture-modal .target-roster .single .target-values em:first-child {
  flex: none;
}
.capture-modal .target-roster .single .target-number {
  display: none;
}
.capture-modal .target-side .capture-help {
  padding: 7px;
  max-height: 145px;
}
.capture-modal .target-side .capture-help summary {
  display: flex;
  align-items: center;
  min-height: 16px;
  line-height: 16px;
  gap: 6px;
  padding: 0;
}
.capture-modal .target-side .capture-help summary > span {
  width: 16px;
  height: 16px;
  min-width: 16px;
  line-height: 16px;
  font-size: var(--text-xs);
  padding: 0;
}
@media (max-width: 520px) {
  .compact-shell .expedition-dock .member {
    padding: 4px;
    gap: 3px;
  }
  .compact-shell .expedition-dock .member .team-portrait {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
  }
  .compact-shell .machine-controls {
    grid-template-columns: 46px minmax(0, 1fr) 32px;
  }
}
@media (max-width: 760px) {
  .capture-modal .target-side .target-roster {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .capture-modal .target-roster .target-card,
  .capture-modal .target-roster .target-card.single {
    grid-column: auto;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: 17px 15px 16px 22px;
    padding: 6px 4px;
    gap: 2px 3px;
  }
  .capture-modal .target-roster .target-card .target-portrait {
    grid-row: 1/4;
    grid-column: 1;
    min-height: 0;
    height: 100%;
  }
  .capture-modal .target-roster .target-card .target-portrait .pixel {
    width: 52px;
    height: 52px;
  }
  .capture-modal .target-roster .target-card .target-identity {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    gap: 3px;
  }
  .capture-modal .target-roster .target-card .target-identity strong {
    font-size: var(--text-sm);
  }
  .capture-modal .target-roster .target-identity small {
    font-size: var(--text-3xs);
  }
  .capture-modal .target-roster .target-card .target-types {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    gap: 2px;
  }
  .capture-modal .target-roster .target-types .type {
    font-size: 6px !important;
    padding: 1px 2px;
  }
  .capture-modal .target-roster .target-types .type-sprite {
    display: none;
  }
  .capture-modal .target-roster .target-card .target-chance {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    font-size: var(--text-2xs);
    padding: 1px 0;
  }
  .capture-modal .target-roster .target-card .target-values {
    grid-column: 1/-1;
    grid-row: 4;
    justify-content: space-between;
  }
  .capture-modal .target-roster .target-values em {
    font-size: var(--text-3xs);
    padding: 2px;
  }
  .capture-modal .target-roster .target-card .target-values em:first-child {
    flex: 1;
  }
  .capture-modal .target-roster .target-number {
    display: none;
  }
  .capture-modal .target-roster .target-card input {
    left: 4px;
    top: 4px;
    width: 11px;
    height: 11px;
  }
  .capture-modal .target-side .capture-help {
    padding: 4px;
    max-height: 100px;
  }
  .capture-modal .target-side .capture-help summary {
    font-size: var(--text-3xs);
    min-height: 13px;
    line-height: 13px;
  }
  .capture-modal .target-side .capture-help summary > span {
    width: 13px;
    height: 13px;
    min-width: 13px;
    line-height: 13px;
    font-size: var(--text-2xs);
  }
}
.compact-shell .encounter-heading {
  height: 68px;
  position: relative;
  padding: 6px 8px;
}
.compact-shell .encounter-heading .machine-heading-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  text-align: center;
}
.compact-shell .encounter-heading .machine-heading-copy > small {
  display: block;
  min-height: 0;
  padding: 0;
  text-align: center;
  font-size: var(--text-2xs);
  line-height: 11px;
}
.compact-shell .encounter-heading h1 {
  width: 100%;
  margin: 0;
}
.compact-shell .encounter-heading p {
  margin: 0;
}
.compact-shell .encounter-heading > .speed-control {
  position: absolute;
  right: 8px;
  top: 5px;
}
.compact-shell .encounter-heading .speed-control,
.compact-shell .battle-playback .speed-control {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
.compact-shell .encounter-heading .speed-control > span,
.compact-shell .battle-playback .speed-control > span {
  font-size: var(--text-3xs);
  color: #a9c8e5;
  margin-right: 4px;
}
.compact-shell .encounter-heading .speed-chip,
.compact-shell .battle-playback .speed-chip {
  min-width: 24px;
  height: 21px;
  padding: 2px 4px;
  border: 1px solid #426488;
  box-shadow: none;
  background: #0c2744;
  color: #c6ddf3;
  font-size: var(--text-xs);
  line-height: 14px;
}
.compact-shell .encounter-heading .speed-chip.active,
.compact-shell .battle-playback .speed-chip.active {
  background: #f0cd72;
  color: #09213c;
  border-color: #ffe6a1;
}
.compact-shell .card-battle .battle-playback {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compact-shell .card-battle .battle-playback .speed-control {
  order: 0;
}
.compact-shell .card-battle .battle-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 14px;
  min-height: 0;
  border: 1px solid #6989a6;
}
.compact-shell .card-battle .battle-overlay {
  background: linear-gradient(180deg, #06142bbd, #06142b66 50%, #06142ba6);
  box-shadow: inset 0 0 45px #020b20a6;
}
.battle-column {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 8px;
}
.battle-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  flex: none;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  color: #f7d778;
  text-shadow: 1px 1px #031021;
}
.battle-column-title > span {
  color: #c2dcf6;
  font-size: var(--text-xs);
  letter-spacing: 0;
}
.battle-card-list {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  flex: 1;
  min-height: 0;
  gap: 6px;
  overflow: auto;
  padding: 2px;
}
.battle-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 56px;
  min-width: 0;
  min-height: 0;
  padding: 5px 8px 5px 3px;
  border: 1px solid #567894;
  border-radius: 0;
  background: linear-gradient(110deg, #143657f5, #061b32f5);
  box-shadow: inset 0 0 0 1px #03172e;
  color: #e0edff;
  text-align: left;
}
.battle-card.in-field {
  border-color: #94b9d4;
}
.battle-card.fainted {
  background: #111f2ee8;
  border-color: #384d60;
  color: #8d9bad;
}
.battle-card.fainted .battle-card-portrait {
  filter: grayscale(0.85);
  opacity: 0.55;
}
.battle-card.fainted .battle-card-types {
  opacity: 0.55;
}
.battle-card-portrait {
  display: block;
  flex: 0 0 46px;
  width: 46px;
  height: 44px;
  overflow: hidden;
}
.battle-card-portrait > .pixel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: none;
}
.battle-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  gap: 5px;
}
.battle-card-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.battle-card-title h3 {
  font:
    700 12px/1.1 'Trebuchet MS',
    'Segoe UI',
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: inherit;
}
.battle-card-title > span {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--text-2xs);
  color: #a7c2db;
  font-weight: 700;
}
.battle-card-health {
  display: flex;
  align-items: center;
  gap: 5px;
}
.compact-shell .battle-card .hp {
  position: relative;
  flex: 1;
  height: 5px;
  min-width: 0;
  margin: 0;
  border: 1px solid #91afc3;
  border-radius: 0;
  background: #061528;
}
.compact-shell .battle-card .hp > span {
  background: #12cf8d;
}
.compact-shell .battle-card .hp.low > span {
  background: #f16a6e;
}
.battle-card-health > strong {
  font-size: var(--text-2xs);
  line-height: 1;
  color: #c2d9ed;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.battle-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
}
.battle-card-meta > small {
  font-size: 6px;
  letter-spacing: 0.4px;
  color: #aac4dc;
  white-space: nowrap;
}
.battle-card-types {
  display: flex;
  gap: 2px;
  min-width: 0;
}
.compact-shell .battle-card-types .type {
  font-size: 6px !important;
  line-height: 8px;
  letter-spacing: 0;
  padding: 1px 2px;
  gap: 2px;
  border-radius: 0;
}
.compact-shell .battle-card-types .type-sprite {
  width: 8px !important;
  height: 8px !important;
  filter: none;
}
.battle-card.legend-card {
  border-color: #d5b55b;
  box-shadow: inset 0 0 0 1px #40371f;
  background: linear-gradient(110deg, #243c55f5, #0b1e35f5);
}
.battle-card.legend-card .hp:after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #061528 calc(25% - 1px) 25%);
  pointer-events: none;
}
.battle-card.legend-card .battle-card-meta > small {
  color: #f4d479;
}
.battle-versus {
  align-self: center;
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: var(--text-md);
  font-weight: 900;
  color: #f4d479;
  text-shadow: 2px 2px #04132b;
}
.battle-card.taking-hit {
  animation: battle-hit-red calc(0.55s / var(--spd, 1)) ease-out calc(0.15s / var(--spd, 1)) forwards;
}
@keyframes battle-hit-red {
  0% {
    filter: sepia(1) saturate(9) hue-rotate(-50deg) brightness(1.25);
    transform: translateX(-4px);
    box-shadow: inset 0 0 22px #ff2b2bcc;
  }
  18% {
    transform: translateX(4px);
  }
  36% {
    transform: translateX(-3px);
  }
  54% {
    transform: translateX(2px);
    filter: sepia(1) saturate(6) hue-rotate(-50deg);
  }
  100% {
    filter: none;
    transform: none;
    box-shadow: inset 0 0 0 1px #03172e;
  }
}
@media (max-height: 730px) {
  .compact-shell .encounter-heading {
    height: 53px;
    padding: 4px 8px;
  }
  .compact-shell[data-phase='battle'] {
    --dock-height: 128px;
  }
  .compact-shell[data-phase='battle'] .dock-footer {
    display: none;
  }
  .compact-shell[data-phase='battle'] .expedition-dock .member {
    padding: 3px;
    gap: 4px;
  }
  .compact-shell .card-battle .battle-field {
    padding: 8px;
    gap: 6px;
  }
  .battle-column {
    gap: 5px;
  }
  .battle-card-list {
    gap: 4px;
  }
  .battle-card {
    flex-basis: 40px;
    padding: 3px 6px 3px 2px;
    gap: 5px;
  }
  .battle-card-portrait {
    height: 32px;
    flex-basis: 40px;
    width: 40px;
  }
  .battle-card-portrait > .pixel {
    width: 55px;
    height: 55px;
  }
  .battle-card-info {
    gap: 2px;
  }
  .battle-card-title h3 {
    font-size: var(--text-md);
  }
  .battle-card-meta {
    height: 10px;
  }
}
@media (max-width: 520px) {
  .compact-shell .encounter-heading {
    height: 76px;
    padding: 25px 5px 5px;
  }
  .compact-shell .encounter-heading > .speed-control {
    right: 5px;
    top: 4px;
  }
  .compact-shell .encounter-heading .speed-control > span {
    display: none;
  }
  .compact-shell .encounter-heading .machine-heading-copy > small {
    font-size: var(--text-3xs);
    letter-spacing: 0.5px;
  }
  .compact-shell .encounter-heading h1 {
    font-size: var(--text-xl);
  }
  .compact-shell .card-battle .battle-commandbar {
    height: 49px;
    gap: 4px;
  }
  .compact-shell .card-battle .battle-commandbar h2 {
    font-size: var(--text-sm);
    max-width: 145px;
    margin-top: 3px;
  }
  .compact-shell .card-battle .battle-commandbar .eyebrow {
    font-size: var(--text-3xs);
    letter-spacing: 0.4px;
  }
  .compact-shell .card-battle .battle-playback {
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
  }
  .compact-shell .card-battle .battle-playback .speed-control > span {
    display: none;
  }
  .compact-shell .card-battle .battle-playback .speed-chip {
    height: 19px;
    font-size: var(--text-2xs);
    min-width: 23px;
    padding: 1px 3px;
  }
  .compact-shell .card-battle .battle-playback > .btn {
    height: 19px;
    min-height: 19px;
    padding: 2px 5px;
    font-size: var(--text-3xs);
  }
  .compact-shell .card-battle .battle-field {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
    padding: 6px;
    gap: 3px;
  }
  .battle-column {
    gap: 4px;
  }
  .battle-column-title {
    font-size: var(--text-3xs);
    letter-spacing: 0.3px;
  }
  .battle-column-title > span {
    font-size: var(--text-3xs);
  }
  .battle-versus {
    font-size: var(--text-2xs);
  }
  .battle-card-list {
    gap: 4px;
    padding: 1px;
  }
  .battle-card {
    flex-basis: 46px;
    gap: 3px;
    padding: 3px;
  }
  .battle-card-portrait {
    flex-basis: 28px;
    width: 28px;
    height: 34px;
  }
  .battle-card-portrait > .pixel {
    width: 49px;
    height: 49px;
  }
  .battle-card-info {
    gap: 4px;
  }
  .battle-card-title {
    gap: 2px;
  }
  .battle-card-title h3 {
    font-size: var(--text-xs);
  }
  .battle-card-title > span {
    font-size: 6px;
  }
  .battle-card-health {
    gap: 3px;
  }
  .battle-card-health > strong {
    font-size: 6px;
  }
  .battle-card-meta > small {
    font-size: 5px;
    letter-spacing: 0;
  }
  .compact-shell .battle-card-types .type {
    font-size: 5px !important;
    padding: 1px;
    gap: 1px;
  }
  .compact-shell .battle-card-types .type-sprite {
    width: 6px !important;
    height: 6px !important;
  }
}
@media (max-width: 520px) and (max-height: 730px) {
  .compact-shell .card-battle .battle-card {
    flex-basis: 30px;
  }
  .compact-shell .card-battle .battle-card-meta {
    display: none;
  }
  .compact-shell .card-battle .battle-card-portrait {
    height: 23px;
  }
  .compact-shell .card-battle .battle-card-title h3 {
    font-size: var(--text-2xs);
  }
  .compact-shell .card-battle .battle-card-info {
    gap: 3px;
  }
  .compact-shell .card-battle .battle-field {
    padding: 4px;
  }
  .compact-shell .card-battle .battle-card-list {
    gap: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-card.taking-hit {
    animation: none;
  }
  .battle-card .hp > span {
    transition: none !important;
  }
}
.battle-card[data-full-pokemon] {
  cursor: help;
}
.battle-card[data-full-pokemon]:hover {
  border-color: #eacb78;
}
.battle-card[data-full-pokemon]:focus-visible {
  outline: 2px solid #f9d975;
  outline-offset: -2px;
}
.compact-shell .encounter-heading h1 {
  position: relative;
  padding: 0 24px;
}
.encounter-help {
  position: absolute;
  left: 0;
  top: 50%;
  transform: none;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid #f0cd72;
  background: #0b2744;
  color: #f8db83;
  font-size: var(--text-md);
  font-weight: 900;
  box-shadow: inset 0 0 0 2px #04162b;
}
.encounter-help:hover {
  background: #153d60;
  border-color: #fff0b2;
}
.site-theme .encounter-help-modal {
  width: min(470px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}
.site-theme .encounter-help-modal .modal-head {
  padding: 13px 16px;
}
.site-theme .encounter-help-modal .modal-head h2 {
  font-size: 19px;
  margin-top: 5px !important;
}
.site-theme .encounter-help-modal .modal-body {
  padding: 16px;
}
.encounter-rate-sheet {
  display: grid;
  gap: 14px;
  color: #c5dbef;
  font-size: var(--text-lg);
  line-height: 1.5;
}
.rate-intro {
  font-size: 16px;
  font-weight: 700;
  color: #f7d777;
}
.rate-intro small {
  display: block;
  font-size: var(--text-sm);
  color: #a8c5df;
  font-weight: 400;
  margin-top: 3px;
}
.encounter-rate-table {
  width: 100%;
  border-collapse: collapse;
  background: #061b31;
  font-size: var(--text-lg);
}
.encounter-rate-table th,
.encounter-rate-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #34516d;
  text-align: left;
}
.encounter-rate-table thead {
  background: #15334f;
  color: #a9c8e5;
  font-size: var(--text-2xs);
  letter-spacing: 0.8px;
}
.encounter-rate-table tbody th {
  font-weight: 600;
}
.encounter-rate-table td:nth-child(2) {
  color: var(--pl-gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.encounter-rate-table td:last-child {
  font-size: var(--text-sm);
  color: #bad0e4;
}
.rarity-dot {
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: #a2b8ca;
}
.rarity-1 {
  background: #53d9ac;
}
.rarity-2 {
  background: #57b9f0;
}
.rarity-3 {
  background: #c398f8;
}
.rarity-4 {
  background: #ffcf69;
}
.shiny-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #a08c4d;
  background: #3a341b44;
  padding: 10px;
  color: #ffdf80;
  font-weight: 700;
}
.shiny-rate small {
  font-size: var(--text-sm);
  font-weight: 400;
  color: #c4d9ea;
}
.rate-note {
  border-top: 1px solid #38536d;
  padding-top: 12px;
  font-size: var(--text-sm);
  color: #8faec8;
}
.site-theme .music-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 28px;
  min-height: 0;
  padding: 2px;
  border: 1px solid #557793;
  border-radius: 0;
  background: #102e4b;
  color: #87a7c5;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
  font-size: 17px;
  line-height: 1;
}
.site-theme .music-toggle.music-on {
  color: var(--pl-gold);
  border-color: #d3b565;
  background: #21394b;
}
.site-theme .music-toggle:hover {
  color: #ffdf8c;
  border-color: var(--pl-gold);
}
.menu-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-window {
  position: relative;
}
@media (max-width: 520px) {
  .compact-shell .run-nav .music-toggle {
    width: 24px;
    height: 24px;
    padding: 2px;
    font-size: 15px;
  }
}

/* Frame the supplied transparent artwork beside the home title. */
.site-theme .home-masthead {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) 105px;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  min-height: 96px;
  margin: 0 auto;
}
.site-theme .home-masthead-copy {
  min-width: 0;
  text-align: center;
}
.site-theme .home-masthead .home-wordmark {
  margin: 0;
  white-space: nowrap;
  font-size: 39px;
}
.site-theme .home-mascot {
  position: relative;
  display: block;
  width: 105px;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.site-theme .home-mascot img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
}
.site-theme .home-mascot-meow img {
  width: 112px;
  margin-left: -5px;
}
@media (max-width: 520px) {
  .site-theme .home-masthead {
    grid-template-columns: 60px minmax(0, 1fr) 60px;
    gap: 4px;
    min-height: 80px;
    padding-top: 8px;
  }
  .site-theme .home-masthead .home-wordmark {
    font-size: 28px;
    letter-spacing: 0.5px;
  }
  .site-theme .home-masthead .home-tagline {
    font-size: var(--text-2xs);
    letter-spacing: 1.5px;
    margin-top: 6px;
  }
  .site-theme .home-masthead .home-version {
    font-size: var(--text-2xs);
    margin-top: 5px;
  }
  .site-theme .home-mascot {
    width: 60px;
    height: 60px;
  }
  .site-theme .home-mascot img {
    width: 128px;
  }
  .site-theme .home-mascot-meow img {
    width: 66px;
    margin-left: -3px;
  }
}
@media (max-width: 360px) {
  .site-theme .home-masthead {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
  }
  .site-theme .home-mascot {
    width: 52px;
    height: 54px;
  }
  .site-theme .home-mascot img {
    width: 112px;
  }
  .site-theme .home-mascot-meow img {
    width: 59px;
  }
  .site-theme .home-masthead .home-wordmark {
    font-size: 27px;
  }
}
@media (max-width: 520px) and (max-height: 720px) {
  .site-theme .home-window .home-actions {
    margin: 10px 0 14px;
    gap: 6px;
  }
  .site-theme .home-window:not(.auth-active) .home-menu-card {
    min-height: 54px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .site-theme .home-window .home-premise {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Scale by the sprite's visible pixel bounds, so large species fit and small ones remain legible. */
.compact-shell .card-battle .battle-card-portrait > .pixel {
  width: 68px;
  height: 68px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.compact-shell .card-battle .battle-card-portrait > .pixel.portrait-medium {
  width: 56px;
  height: 56px;
}
.compact-shell .card-battle .battle-card-portrait > .pixel.portrait-large {
  width: 44px;
  height: 44px;
}
.compact-shell .expedition-dock .member .team-portrait {
  overflow: hidden;
}
.compact-shell .expedition-dock .member .team-portrait .pixel {
  width: 52px;
  height: 52px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.compact-shell .expedition-dock .member .team-portrait .pixel.portrait-large {
  width: 39px;
  height: 39px;
}
@media (max-height: 730px) {
  .compact-shell .card-battle .battle-card-portrait > .pixel {
    width: 44px;
    height: 44px;
  }
  .compact-shell .card-battle .battle-card-portrait > .pixel.portrait-medium {
    width: 40px;
    height: 40px;
  }
  .compact-shell .card-battle .battle-card-portrait > .pixel.portrait-large {
    width: 32px;
    height: 32px;
  }
  .compact-shell[data-phase='battle'] .expedition-dock .member .team-portrait .pixel {
    width: 43px;
    height: 43px;
  }
  .compact-shell[data-phase='battle'] .expedition-dock .member .team-portrait .pixel.portrait-large {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 520px) {
  .compact-shell .card-battle .battle-card-portrait > .pixel {
    width: 42px;
    height: 42px;
  }
  .compact-shell .card-battle .battle-card-portrait > .pixel.portrait-medium {
    width: 34px;
    height: 34px;
  }
  .compact-shell .card-battle .battle-card-portrait > .pixel.portrait-large {
    width: 28px;
    height: 28px;
  }
  .compact-shell .expedition-dock .member .team-portrait .pixel {
    width: 40px;
    height: 40px;
  }
  .compact-shell .expedition-dock .member .team-portrait .pixel.portrait-medium {
    width: 36px;
    height: 36px;
  }
  .compact-shell .expedition-dock .member .team-portrait .pixel.portrait-large {
    width: 30px;
    height: 30px;
  }
  .compact-shell[data-phase='battle'] .expedition-dock .member .team-portrait .pixel {
    width: 40px;
    height: 40px;
  }
  .compact-shell[data-phase='battle'] .expedition-dock .member .team-portrait .pixel.portrait-medium {
    width: 36px;
    height: 36px;
  }
  .compact-shell[data-phase='battle'] .expedition-dock .member .team-portrait .pixel.portrait-large {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 520px) and (max-height: 730px) {
  .compact-shell .card-battle .battle-card-portrait > .pixel {
    width: 32px;
    height: 32px;
  }
  .compact-shell .card-battle .battle-card-portrait > .pixel.portrait-medium {
    width: 26px;
    height: 26px;
  }
  .compact-shell .card-battle .battle-card-portrait > .pixel.portrait-large {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 520px) {
  .site-theme .encounter-help-modal .modal-body {
    padding: 12px;
  }
  .encounter-rate-sheet {
    font-size: var(--text-md);
    gap: 10px;
    line-height: 1.45;
  }
  .encounter-rate-table th,
  .encounter-rate-table td {
    padding: 8px;
  }
  .site-theme .encounter-help-modal .modal-head {
    padding: 10px 12px;
  }
  .rate-note {
    padding-top: 8px;
  }
}

/* Elite emphasis: roulette badge/aura, battle card marker, drop toast icon */
.reel-elite,
.compact-shell .reel-elite {
  position: absolute;
  left: 50%;
  top: 6px;
  right: auto;
  transform: translateX(-50%);
  z-index: 6;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  color: #4a2300;
  background: linear-gradient(#fff3b0, #ffc61a);
  border: 1px solid #fff8d0;
  box-shadow:
    0 1px 0 #7a4a00,
    0 0 8px #ffcf4dcc;
  white-space: nowrap;
  animation: elite-badge 1.2s ease-in-out infinite;
}
.encounter-reel.elite .reel-pokemon:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  background: radial-gradient(circle, #ffd95aee 0, #ffb62b77 38%, transparent 68%);
  animation: elite-glow 1.7s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.encounter-reel.elite .reel-pokemon .pixel {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 6px #ffcf4d) drop-shadow(0 0 12px #ff9d1aa0);
}
.encounter-reel.elite .reel-number {
  color: #b47a00;
}
.battle-card.elite-card {
  border-color: #ffcf4d !important;
  background-image: linear-gradient(90deg, #ffcf4d30, transparent 75%);
  box-shadow:
    inset 0 0 0 2px #4a2f04,
    0 0 0 2px #ffcf4d,
    0 0 16px 3px #ffcf4d80;
  animation: elite-aura 1.7s ease-in-out infinite;
}
.battle-card.elite-card .battle-card-portrait img {
  filter: drop-shadow(0 0 5px #ffcf4d) drop-shadow(0 0 10px #ff9d1aa0);
}
.battle-elite-tag {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  color: #4a2300;
  background: linear-gradient(#fff3b0, #ffc61a);
  border: 1px solid #fff8d0;
  margin: 0 6px;
  white-space: nowrap;
}
@keyframes elite-badge {
  50% {
    transform: translateX(-50%) scale(1.07);
    filter: brightness(1.15);
  }
}
@keyframes elite-glow {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reel-elite,
  .encounter-reel.elite .reel-pokemon:before,
  .battle-card.elite-card {
    animation: none;
  }
}

.encounter-reel.shiny .reel-window {
  border-color: var(--pl-cyan);
  box-shadow:
    inset 0 0 0 2px #0a3a4d,
    0 0 0 2px var(--pl-cyan),
    0 0 14px 2px #7fe6ff88;
}
.encounter-reel.shiny .reel-pokemon .pixel {
  filter: drop-shadow(0 0 5px #8fefff) drop-shadow(0 0 10px #6fd2ff99);
}
.reel-shiny {
  flex: none;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  color: #053447;
  background: linear-gradient(#e9fdff, var(--pl-cyan));
  border: 1px solid #d6fbff;
  box-shadow: 0 0 8px #7fe6ffaa;
  white-space: nowrap;
  animation: shiny-tag 1.4s ease-in-out infinite;
}
@keyframes shiny-tag {
  50% {
    filter: brightness(1.18);
    box-shadow: 0 0 13px var(--pl-cyan);
  }
}

/* ---- TESTE SUA SORTE (pixel button) ---- */
.lucky-cta {
  position: relative;
  display: block;
  width: 100%;
  max-width: 310px;
  margin: 14px auto 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #ffe100;
  font: inherit;
  filter:
    drop-shadow(3px 0px 0 var(--pl-brown)),
    drop-shadow(-3px 0px 0 var(--pl-brown)),
    drop-shadow(0px 3px 0 var(--pl-brown)),
    drop-shadow(0px -3px 0 var(--pl-brown)),
    drop-shadow(3px 3px 0 var(--pl-brown)),
    drop-shadow(-3px 3px 0 var(--pl-brown)),
    drop-shadow(3px -3px 0 var(--pl-brown)),
    drop-shadow(-3px -3px 0 var(--pl-brown)) drop-shadow(0 0 10px #ffd23f99);
  animation: lucky-pulse 1.8s ease-in-out infinite;
  transition: transform 0.12s;
}
.lucky-cta:hover {
  transform: translateY(-2px);
}
.lucky-cta:active {
  transform: translateY(3px);
}
.lucky-body {
  display: block;
  padding: 3px 3px 9px;
  background: linear-gradient(#ffe7a0, #b8730a);
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    calc(100% - 8px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 8px,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%,
    8px 100%,
    8px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 8px),
    0 calc(100% - 8px),
    0 8px,
    4px 8px,
    4px 4px,
    8px 4px
  );
}
.lucky-face {
  position: relative;
  display: block;
  padding: 9px 16px 11px;
  border: 3px solid #fff;
  background: linear-gradient(
    100deg,
    var(--pl-gold-bright) 0%,
    #ff8ad8 25%,
    var(--pl-cyan) 50%,
    #ff8ad8 75%,
    var(--pl-gold-bright) 100%
  );
  background-size: 200% 100%;
  animation: lucky-flow 6s linear infinite;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 6px,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) 100%,
    6px 100%,
    6px calc(100% - 3px),
    3px calc(100% - 3px),
    3px calc(100% - 6px),
    0 calc(100% - 6px),
    0 6px,
    3px 6px,
    3px 3px,
    6px 3px
  );
  overflow: hidden;
  text-align: center;
  box-shadow:
    inset 0 3px 0 #ffffff40,
    inset 0 -3px 0 #00000040;
}
.lucky-face:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 26%;
  background: linear-gradient(100deg, transparent, #ffffffb0, transparent);
  transform: skewX(-20deg);
  animation: lucky-shine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
.lucky-cta strong {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: 2px;
  font-weight: 900;
  color: #3b1d00;
  text-shadow: 0 2px 0 #ffffffa0;
}
.lucky-cta small,
.lucky-cta em {
  position: relative;
  z-index: 2;
  display: block;
  font-style: normal;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #5a2d00;
}
.lucky-cta small {
  margin-bottom: 3px;
}
.lucky-cta em {
  margin-top: 4px;
}
.lucky-cta .spark {
  position: absolute;
  z-index: 4;
  color: #fff6a8;
  font-style: normal;
  font-size: var(--text-sm);
  text-shadow:
    0 0 5px #fff,
    0 0 8px var(--pl-gold-bright);
  animation: lucky-twinkle 1.5s ease-in-out infinite;
  pointer-events: none;
}
.lucky-cta .s1 {
  left: 9px;
  top: 5px;
}
.lucky-cta .s2 {
  left: 22%;
  bottom: 3px;
  animation-delay: 0.4s;
}
.lucky-cta .s3 {
  left: 47%;
  top: 2px;
  animation-delay: 0.9s;
}
.lucky-cta .s4 {
  right: 24%;
  bottom: 4px;
  animation-delay: 0.2s;
}
.lucky-cta .s5 {
  right: 10px;
  top: 6px;
  animation-delay: 0.7s;
}
.lucky-cta .s6 {
  right: 7px;
  bottom: 4px;
  animation-delay: 1.1s;
}
@keyframes lucky-flow {
  to {
    background-position: 200% 0;
  }
}
@keyframes lucky-pulse {
  50% {
    filter:
      drop-shadow(3px 0px 0 var(--pl-brown)),
      drop-shadow(-3px 0px 0 var(--pl-brown)),
      drop-shadow(0px 3px 0 var(--pl-brown)),
      drop-shadow(0px -3px 0 var(--pl-brown)),
      drop-shadow(3px 3px 0 var(--pl-brown)),
      drop-shadow(-3px 3px 0 var(--pl-brown)),
      drop-shadow(3px -3px 0 var(--pl-brown)),
      drop-shadow(-3px -3px 0 var(--pl-brown)) drop-shadow(0 0 20px #ffe27add);
  }
}
@keyframes lucky-shine {
  0% {
    left: -40%;
  }
  55%,
  100% {
    left: 130%;
  }
}
@keyframes lucky-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.6) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(25deg);
  }
}
.modal.lucky-modal {
  width: min(390px, calc(100vw - 20px));
}
.lucky-modal .modal-body {
  padding: 0;
}
.lucky-modal .lucky-center {
  margin: 0;
  border: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lucky-prize {
  position: relative;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
}
.lucky-prize .lucky-sprite {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 6px #8fefff) drop-shadow(0 0 12px #ffd23f99);
  animation: lucky-float 2.4s ease-in-out infinite;
}
@keyframes lucky-float {
  50% {
    transform: translateY(-5px);
  }
}
.lucky-name {
  font-size: 17px;
  color: #ffe58c;
  margin: 2px 0 0;
}
.lucky-timer {
  font-size: var(--text-xs);
  letter-spacing: 1px;
  color: #9fb6d4;
  margin: 0 0 4px;
}
.lucky-timer b {
  color: #fff6c2;
  font-size: var(--text-md);
  letter-spacing: 1.5px;
}
.lucky-modal .wheel-center strong {
  font-size: 26px;
}
.lucky-modal .wheel-center span,
.lucky-modal .wheel-center small {
  font-size: 6px;
}
.lucky-modal .btn.lucky-go {
  font-size: var(--text-lg);
  padding: 12px;
  margin-top: 2px;
  box-shadow:
    0 0 16px #ffc51b88,
    4px 4px 0 #08090e;
}
.lucky-note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #c6d6ec;
}
.lucky-auth {
  display: flex;
  gap: 8px;
  width: 100%;
}
.lucky-auth .btn {
  flex: 1;
  font-size: var(--text-md);
  padding: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .lucky-cta,
  .lucky-face,
  .lucky-face:before,
  .lucky-cta .spark,
  .lucky-prize .lucky-sprite,
  .wheel-wrap.lucky-win,
  .wheel-wrap.lucky-win:after,
  .lucky-reveal * {
    animation: none !important;
  }
  .lucky-reveal .lr-flash,
  .lucky-reveal .lr-rays,
  .lucky-reveal .lr-ring,
  .lucky-reveal .lr-star {
    display: none;
  }
}

/* ---- TESTE SUA SORTE: comemoração da vitória ---- */
.wheel-wrap.lucky-win {
  animation: lucky-shake 0.8s steps(2) 2;
}
.wheel-wrap.lucky-win:after {
  content: '';
  position: absolute;
  inset: -14px;
  border: 6px solid var(--pl-gold-bright);
  border-radius: 50%;
  box-shadow:
    0 0 22px #ffe27a,
    inset 0 0 22px #ffe27a80;
  pointer-events: none;
  animation: lucky-win-ring 1.5s ease-out 3 both;
}
.wheel-wrap.lucky-win .wheel {
  animation: lucky-wheel-glow 0.8s ease-in-out 6;
}
@keyframes lucky-shake {
  25% {
    transform: translate(-3px, 1px);
  }
  75% {
    transform: translate(3px, -1px);
  }
}
@keyframes lucky-win-ring {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@keyframes lucky-wheel-glow {
  50% {
    filter: brightness(1.5) saturate(1.3);
  }
}
.lucky-reveal {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: lr-life 5.2s ease-out both;
}
.lucky-reveal .lr-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #fffbe0 0, #ffd23fa0 30%, #ffd23f30 55%, transparent 75%);
  animation: lr-flash 1.8s ease-out both;
}
.lucky-reveal .lr-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, #ffe27a66 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 45%);
  mask: radial-gradient(circle, #000 0, transparent 45%);
  animation: lr-rays 5.2s ease-out both;
}
.lucky-reveal .lr-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 6px solid var(--pl-gold-bright);
  border-radius: 50%;
  box-shadow:
    0 0 20px #ffe27a,
    inset 0 0 20px #ffe27a;
  animation: lr-ring 2.4s ease-out both;
}
.lucky-reveal .lr-ring.r2 {
  border-color: var(--pl-cyan);
  box-shadow:
    0 0 20px var(--pl-cyan),
    inset 0 0 20px var(--pl-cyan);
  animation-delay: 0.45s;
}
.lucky-reveal .lr-star {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff6a8;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-shadow:
    0 0 6px #fff,
    0 0 12px var(--pl-gold-bright);
  animation: lr-star 2.9s ease-out both;
  animation-delay: var(--dl);
}
.lucky-reveal .lr-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: -70px;
  animation: lr-card 5.2s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.lucky-reveal .lr-sprite {
  width: 170px !important;
  height: 170px !important;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px #fff36f) drop-shadow(0 0 28px var(--pl-gold-bright)) drop-shadow(0 4px 0 var(--pl-brown));
}
.lucky-reveal strong {
  padding: 6px 14px;
  background: #06183aeb;
  border: 2px solid var(--pl-gold-bright);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffe100;
  text-align: center;
  text-shadow:
    -2px 0 var(--pl-brown),
    2px 0 var(--pl-brown),
    0 -2px var(--pl-brown),
    0 2px var(--pl-brown),
    -2px -2px var(--pl-brown),
    2px -2px var(--pl-brown),
    -2px 2px var(--pl-brown),
    2px 2px var(--pl-brown),
    0 0 14px var(--pl-gold-bright);
}
.lucky-reveal em {
  padding: 3px 12px;
  background: #06183aeb;
  border: 2px solid var(--pl-cyan);
  font-style: normal;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    -1px 0 #06183a,
    1px 0 #06183a,
    0 -1px #06183a,
    0 1px #06183a,
    0 0 10px var(--pl-cyan);
}
@keyframes lr-life {
  0%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lr-flash {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lr-rays {
  0% {
    opacity: 0;
    transform: rotate(0) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.85;
    transform: rotate(50deg) scale(1);
  }
}
@keyframes lr-ring {
  0% {
    transform: scale(0.2);
    opacity: 1;
  }
  100% {
    transform: scale(11);
    opacity: 0;
  }
}
@keyframes lr-star {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.5);
  }
}
@keyframes lr-card {
  0% {
    opacity: 0;
    transform: scale(0.15) rotate(-12deg);
  }
  16% {
    opacity: 1;
    transform: scale(1.2) rotate(3deg);
  }
  26% {
    transform: scale(1) rotate(0);
  }
  84% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}
@media (max-width: 520px) {
  .lucky-reveal .lr-sprite {
    width: 130px !important;
    height: 130px !important;
  }
  .lucky-reveal strong {
    font-size: 15px;
    letter-spacing: 2px;
  }
}

/* ---- botão de efeitos sonoros (par do botão de música) ---- */
.site-theme .sfx-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 28px;
  min-height: 0;
  padding: 2px;
  border: 1px solid #557793;
  border-radius: 0;
  background: #102e4b;
  color: #87a7c5;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
  line-height: 1;
  cursor: pointer;
}
.site-theme .sfx-toggle svg {
  display: block;
  pointer-events: none;
}
.site-theme .sfx-toggle.music-on {
  color: var(--pl-gold);
  border-color: #d3b565;
  background: #21394b;
}
.site-theme .sfx-toggle:hover {
  color: #ffdf8c;
  border-color: var(--pl-gold);
}
.sfx-toggle .sfx-waves {
  display: none;
}
.sfx-toggle.music-on .sfx-waves {
  display: inline;
}
.sfx-toggle .sfx-off {
  display: inline;
}
.sfx-toggle.music-on .sfx-off {
  display: none;
}
@media (max-width: 520px) {
  .compact-shell .run-nav .sfx-toggle {
    width: 24px;
    height: 24px;
    padding: 2px;
  }
  .compact-shell .run-nav .sfx-toggle svg {
    width: 15px;
    height: 15px;
  }
}

/* ---- log de combate: rola sozinho até o último evento; sem barra de rolagem visível (a roda do mouse continua funcionando) ---- */
.battle-log {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.battle-log::-webkit-scrollbar {
  display: none;
}

/* ---- a caixa do log cabe ~3 linhas: um aviso de que há texto acima e um botão que abre a batalha inteira ---- */
.battle-log-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
}
.battle-log-wrap > .battle-log {
  flex: 1;
  min-width: 0;
}
.battle-log-wrap:before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  background: linear-gradient(#0d1730, #0d173000);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
.battle-log-wrap.has-above:before {
  opacity: 1;
}
.battle-log-above {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  transform: translateX(-50%);
  font-size: 8px;
  line-height: 1;
  color: #9fc3ff;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  animation: battle-log-nudge 1.8s ease-in-out infinite;
}
.battle-log-wrap.has-above .battle-log-above {
  opacity: 0.85;
}
@keyframes battle-log-nudge {
  0%,
  100% {
    transform: translate(-50%, 1px);
  }
  50% {
    transform: translate(-50%, -1px);
  }
}
/* o LOG fica sobre a caixa: bisel do jogo, brilho ao passar o mouse e a seta que abre */
.battle-log-more {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 9px;
  font: inherit;
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #06121f;
  background: linear-gradient(#ffe9a6, #d9a52a);
  border: 0;
  border-bottom: 2px solid #8a6412;
  box-shadow:
    inset 0 1px 0 #fff6cf,
    0 2px 0 #03102a;
  cursor: pointer;
  transition:
    transform 0.12s,
    filter 0.15s,
    box-shadow 0.15s;
}
.battle-log-more:hover,
.battle-log-more:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 #fff6cf,
    0 3px 0 #03102a,
    0 0 12px #ffd45c7a;
}
.battle-log-more:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 #fff6cf;
}
/* quando ha texto fora de vista o botao chama a atencao uma vez a cada ciclo */
.battle-log-wrap.has-above .battle-log-more {
  animation: battle-log-call 3.6s ease-in-out infinite;
}
@keyframes battle-log-call {
  0%,
  86%,
  100% {
    box-shadow:
      inset 0 1px 0 #fff6cf,
      0 2px 0 #03102a;
  }
  93% {
    box-shadow:
      inset 0 1px 0 #fff6cf,
      0 2px 0 #03102a,
      0 0 14px 2px #ffd45c9c;
  }
}
.battle-log-hint {
  margin: 0 0 10px;
  font-size: var(--text-xs);
  color: var(--pl-slate, #9fb3cc);
}
.battle-log.full-log {
  max-height: min(58vh, 460px);
  padding: 12px 14px;
  background: #0d1730;
  border: 1px solid #243f60;
  font-size: var(--text-xs);
  line-height: 1.5;
  overflow: auto;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.battle-log.full-log::-webkit-scrollbar {
  display: block;
  width: 9px;
}
.battle-log.full-log::-webkit-scrollbar-thumb {
  background: #3d5b8c;
}
.battle-log.full-log p {
  padding: 3px 0;
  opacity: 0.75;
}
.battle-log.full-log p.current {
  opacity: 1;
  color: #f4df65;
}
@media (prefers-reduced-motion: reduce) {
  .battle-log-above,
  .battle-log-wrap.has-above .battle-log-more {
    animation: none;
  }
  .battle-log-wrap:before,
  .battle-log-above,
  .battle-log-more {
    transition: none;
  }
}

/* ---- log de combate: habilidades, natures, clima e resumo ---- */
.showdown-battle .battle-log p.ability {
  color: #8bd7ff;
}
.showdown-battle .battle-log p.ability:before {
  content: '✦ ';
}
.showdown-battle .battle-log p.nature {
  color: #d7a8ff;
}
.showdown-battle .battle-log p.nature:before {
  content: '◈ ';
}
.showdown-battle .battle-log p.info {
  color: #a9c1d6;
}
.showdown-battle .battle-log p.item {
  color: #ffd38a;
}

/* ---- Pokémon que usa uma habilidade/nature brilha ---- */
.battle-card.ability-pop {
  animation: ability-pop 1.1s ease-out;
}
@keyframes ability-pop {
  0% {
    box-shadow:
      0 0 0 0 #7fe6ffcc,
      0 0 0 var(--pl-cyan);
  }
  55% {
    box-shadow:
      0 0 0 8px #7fe6ff22,
      0 0 24px #7fe6ffaa;
  }
  100% {
    box-shadow:
      0 0 0 0 #7fe6ff00,
      0 0 0 #7fe6ff00;
  }
}

/* ---- clima no campo de batalha (areia, chuva, sol, granizo) ---- */
.weather-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.weather-fx > i {
  position: absolute;
  display: block;
}
.weather-tag {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 2px 9px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  white-space: nowrap;
  color: #fff;
  background: #06183ad9;
  border: 1px solid var(--wx, #8bd7ff);
  text-shadow: 0 1px 0 #000;
  animation: wx-tag-in 0.5s ease-out both;
}
@keyframes wx-tag-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}
.weather-rain {
  --wx: #8fd0ff;
  background: linear-gradient(180deg, #0a2d6a4d, #0a2d6a1f);
}
.weather-rain > i {
  left: var(--x);
  top: -14%;
  width: 2px;
  height: 26px;
  background: linear-gradient(#bfe6ff00, #bfe6ffcc);
  transform: rotate(12deg);
  animation: wx-rain var(--d) linear infinite;
  animation-delay: var(--w);
}
@keyframes wx-rain {
  to {
    transform: translate(-9vw, 120vh) rotate(12deg);
  }
}
.weather-hail {
  --wx: #d6f3ff;
  background: linear-gradient(180deg, #9fd8ff2b, #9fd8ff12);
}
.weather-hail > i {
  left: var(--x);
  top: -6%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #d6f3ff;
  animation: wx-hail calc(var(--d) * 1.8) linear infinite;
  animation-delay: var(--w);
}
@keyframes wx-hail {
  50% {
    transform: translate(-14px, 60vh);
  }
  to {
    transform: translate(8px, 120vh);
  }
}
.weather-sand {
  --wx: #e6c46f;
  background: linear-gradient(90deg, #c99a4a4d, #a8793326 60%, #c99a4a42);
}
.weather-sand:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 85%, #d8b06466, #0000 62%), radial-gradient(ellipse at 85% 20%, #d8b06444, #0000 60%);
  animation: wx-haze 4s ease-in-out infinite;
}
.weather-sand > i {
  left: -14%;
  top: var(--y);
  width: 58px;
  height: 2px;
  background: linear-gradient(90deg, #f0d28f00, #f0d28fd6);
  animation: wx-sand calc(var(--d) * 2.4) linear infinite;
  animation-delay: var(--w);
}
@keyframes wx-sand {
  to {
    transform: translateX(125vw);
  }
}
@keyframes wx-haze {
  50% {
    opacity: 0.55;
  }
}
.weather-sun {
  --wx: #ffd54a;
  background: linear-gradient(180deg, #ffb52a33, #ff8a0014);
}
.weather-sun .sun-core {
  position: absolute;
  right: -70px;
  top: -70px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbd0 0, #ffe066b0 28%, #ffb52a55 52%, #ffb52a00 72%);
  animation: wx-pulse 3s ease-in-out infinite;
}
.weather-sun .sun-rays {
  position: absolute;
  right: -190px;
  top: -190px;
  width: 520px;
  height: 520px;
  background: repeating-conic-gradient(#ffe27a3d 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 62%);
  mask: radial-gradient(circle, #000 0, transparent 62%);
  animation: wx-spin 30s linear infinite;
}
@keyframes wx-pulse {
  50% {
    transform: scale(1.12);
    opacity: 0.85;
  }
}
@keyframes wx-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .weather-fx *,
  .weather-fx:after,
  .battle-card.ability-pop {
    animation: none !important;
  }
}

/* ---- ao fim da batalha o log cresce para o resumo caber inteiro ---- */

/* ---- gênero ---- */
.gender {
  display: inline-block;
  margin-left: 2px;
  font-weight: 900;
}
.gender.male {
  color: #7fb8ff;
}
.gender.female {
  color: #ff8fc7;
}

/* ================= tooltip do Pokémon (roleta de encontros) ================= */
.poke-tip {
  position: fixed;
  z-index: 60;
  display: none;
  grid-template-columns: minmax(210px, 235px) minmax(190px, 215px);
  gap: 0;
  max-width: calc(100vw - 16px);
  color: #dfe9f7;
  font-size: var(--text-sm);
  line-height: 1.35;
  background: #08152b;
  border: 2px solid #d3b565;
  box-shadow:
    0 0 0 2px var(--pl-navy-900),
    0 14px 34px #000c;
  pointer-events: none;
}
.poke-tip.show {
  display: grid;
  animation: tip-in 0.12s ease-out;
}
@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.poke-tip .tip-main {
  padding: 9px 12px 10px;
  text-align: center;
  background: linear-gradient(#10264a, #0a1834);
  border-right: 2px solid #24405f;
}
.poke-tip .tip-main > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
}
.poke-tip .tip-tag {
  padding: 1px 6px;
  color: #0a1834;
  background: var(--pl-gold);
}
.poke-tip .tip-rarity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #a9c1d6;
}
.poke-tip .tip-portrait {
  display: grid;
  place-items: center;
  height: 96px;
  margin: 4px 0 2px;
  background: radial-gradient(circle, #1e4a80 0, transparent 68%);
}
.poke-tip .tip-sprite {
  width: 84px;
  height: 84px;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
}
.poke-tip h3 {
  margin: 0;
  font-size: 14px;
  color: var(--pl-gold);
  letter-spacing: 0.7px;
}
.poke-tip .tip-level {
  margin: 1px 0 5px;
  color: #a9c1d6;
  font-size: var(--text-xs);
  letter-spacing: 0.8px;
}
.poke-tip .tip-types {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
}
.tip-type {
  display: inline-block;
  padding: 1px 7px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #fff;
  text-shadow: 0 1px 0 #0009;
  border: 1px solid #0007;
  box-shadow: inset 0 -2px 0 #0004;
  background: #68778a;
}
.tip-type.normal {
  background: #8b8d7e;
}
.tip-type.fire {
  background: #e2571e;
}
.tip-type.water {
  background: #3f87e8;
}
.tip-type.electric {
  background: #d8a90d;
  color: #1d1600;
  text-shadow: none;
}
.tip-type.grass {
  background: #4ca23a;
}
.tip-type.ice {
  background: #5cbfc9;
}
.tip-type.fighting {
  background: #b03a35;
}
.tip-type.poison {
  background: #96409b;
}
.tip-type.ground {
  background: #b58f3f;
}
.tip-type.flying {
  background: #7d92e0;
}
.tip-type.psychic {
  background: #e0487f;
}
.tip-type.bug {
  background: #8ea01a;
}
.tip-type.rock {
  background: #9d8632;
}
.tip-type.ghost {
  background: #5f4a8e;
}
.tip-type.dragon {
  background: #5a3de0;
}
.tip-type.dark {
  background: #5a463a;
}
.tip-type.steel {
  background: #8f8fa6;
}
.tip-type.fairy {
  background: #e58bb3;
}
.poke-tip .tip-stats {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.poke-tip .tip-stats li {
  display: grid;
  grid-template-columns: 44px 1fr 26px;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.poke-tip .tip-stats small {
  font-size: var(--text-2xs);
  font-weight: 900;
  color: var(--pl-slate);
  letter-spacing: 0.4px;
}
.poke-tip .tip-stats span {
  height: 6px;
  background: #122544;
  border: 1px solid #24405f;
}
.poke-tip .tip-stats i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4bd67a, #a6f07a);
}
.poke-tip .tip-stats b {
  text-align: right;
  font-size: var(--text-sm);
  color: #fff;
}
.poke-tip .tip-hp {
  height: 9px;
  margin-top: 2px;
  background: #122544;
  border: 1px solid #0a1834;
  box-shadow: inset 0 0 0 1px #24405f;
}
.poke-tip .tip-hp span {
  display: block;
  height: 100%;
  background: linear-gradient(#5be07d, #2ea655);
}
.poke-tip .tip-hp-text {
  display: block;
  margin: 3px 0 8px;
  font-size: var(--text-2xs);
  color: var(--pl-slate);
}
.poke-tip .tip-move {
  padding: 7px 8px;
  border: 1px solid var(--pl-steel);
  background: #0b1c3a;
  display: grid;
  gap: 4px;
}
.poke-tip .tip-move strong {
  font-size: var(--text-md);
  color: #fff;
  letter-spacing: 0.4px;
}
.poke-tip .tip-move em {
  font-style: normal;
  justify-self: center;
  padding: 0 8px;
  font-size: var(--text-2xs);
  font-weight: 900;
  color: #0a1834;
  background: var(--pl-gold);
}
.poke-tip .tip-move div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.tip-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #dfe9f7;
  background: var(--pl-steel);
  border: 1px solid #0007;
}
.tip-chip.phys {
  background: #b84a2f;
}
.tip-chip.spec {
  background: #4a5fd0;
}
.poke-tip .tip-abilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 7px;
}
.poke-tip .tip-abilities span {
  padding: 1px 6px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.4px;
  color: #8bd7ff;
  border: 1px solid #24405f;
  background: #0b1c3a;
}
.poke-tip .tip-archetype {
  display: grid;
  gap: 2px;
  margin: 7px 0 0;
  padding: 6px;
  border: 1px solid #476982;
  background: #0b263c;
  color: #bed4e4;
  font-size: var(--text-2xs);
  line-height: 1.35;
}
.poke-tip .tip-archetype strong {
  color: #ffe17a;
  font-size: var(--text-2xs);
  letter-spacing: 0.6px;
}
.poke-tip .tip-allies {
  margin: 6px 0 0;
  font-size: var(--text-2xs);
  color: #a9c1d6;
}
.poke-tip .tip-main footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--pl-steel);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--pl-gold);
}
.poke-tip .tip-charts {
  padding: 9px 12px;
  background: #0d1e3d;
  overflow: hidden;
}
.poke-tip .tip-charts h4 {
  margin: 0 0 5px;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-gold);
  padding-bottom: 3px;
  border-bottom: 1px solid #24405f;
}
.poke-tip .tip-charts h4:not(:first-child) {
  margin-top: 10px;
}
.poke-tip .tip-def {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.poke-tip .tip-charts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.poke-tip .tip-charts li {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 6px;
}
.poke-tip .tip-charts li span {
  font-size: var(--text-xs);
  color: #a9c1d6;
}
.poke-tip .tip-charts li b {
  font-size: var(--text-sm);
}
.poke-tip .tip-charts li.bad b {
  color: #ff6b6b;
}
.poke-tip .tip-charts li.good b {
  color: #6df08b;
}

/* Full Pokémon details share the tooltip root, but need their own single-column layout. */
#poke-tip.show:has(.pc-info) {
  display: block;
  width: min(304px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  box-sizing: border-box;
  border-radius: 6px;
  background: linear-gradient(160deg, #163553, #0a1b34 70%);
  box-shadow:
    0 0 0 2px #06152c,
    0 16px 36px #000b;
}
:is(#poke-tip, .pokemon-purchase) .pc-info {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  color: #e7f0fa;
  text-align: left;
}
:is(#poke-tip, .pokemon-purchase) .pc-info header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px solid #476782;
}
:is(#poke-tip, .pokemon-purchase) .pc-info-art {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
}
:is(#poke-tip, .pokemon-purchase) .pc-info-art > img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .type {
  gap: 2px;
  padding: 1px 3px 1px 2px;
  font-size: 8px;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .type-sprite {
  width: 10px;
  height: 10px;
}
:is(#poke-tip, .pokemon-purchase) .pc-info-value {
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #ffe08a;
  font-size: 10px;
  font-weight: 900;
}
:is(#poke-tip, .pokemon-purchase) .pc-info-value .money-icon {
  width: 13px;
  height: 13px;
}
:is(#poke-tip, .pokemon-purchase) .pc-info header strong {
  display: block;
  color: #ffe08a;
  font-size: 15px;
  line-height: 1.2;
}
:is(#poke-tip, .pokemon-purchase) .pc-info header p {
  margin: 3px 0 5px;
  color: #acc6db;
}
:is(#poke-tip, .pokemon-purchase) .pc-info > p {
  margin: 8px 0 0;
  color: #bdd1e2;
  line-height: 1.4;
}
:is(#poke-tip, .pokemon-purchase) .pc-info > p > strong {
  color: #fff0bc;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .partner-moves {
  margin: 12px 0;
  padding-top: 10px;
  border-top: 1px solid #365775;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-title small {
  line-height: 1.35;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 4px;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid #416485;
  border-left: 3px solid #d0aa52;
  border-radius: 4px;
  background: #102b49;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-row strong {
  font-size: 10px;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-row .type {
  gap: 2px;
  padding: 1px 2px;
  font-size: 7px !important;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-row .type-sprite {
  width: 8px;
  height: 8px;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-row .mv-tag {
  margin: 0;
  padding: 1px 3px;
  font-size: 7px;
  letter-spacing: 0;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-tm {
  grid-column: auto;
  justify-self: end;
  font-size: 8px;
  white-space: nowrap;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .pm-tm .tm-pips {
  display: none;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .detail-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #416485;
  border-radius: 4px !important;
  background: #102b49;
  box-shadow: none;
  text-align: center;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .detail-cell span {
  color: #afc9e2;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .detail-cell strong {
  color: #ffe08a;
  font-size: 14px;
  line-height: 1.1;
}
:is(#poke-tip, .pokemon-purchase) .pc-info .detail-cell small {
  color: #c6d7e7;
  font-size: 9px;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .poke-tip {
    grid-template-columns: minmax(0, 236px);
  }
  .poke-tip .tip-charts {
    display: none;
  }
}

/* ================= espera do Raid Boss ================= */
.raid-wait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 18px 22px;
  text-align: center;
  border: 2px solid #d3b565;
  background:
    linear-gradient(#050a18e6, #0a1226d9),
    var(--raid-bg) center/cover;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-900),
    0 0 0 2px var(--pl-navy-900);
}
.raid-wait > * {
  position: relative;
  z-index: 1;
}
.raid-embers {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
}
.raid-embers i {
  position: absolute;
  bottom: -10px;
  left: calc(var(--n, 1) * 6%);
  width: 4px;
  height: 4px;
  background: #ffb33d;
  box-shadow: 0 0 8px #ff8a1d;
  animation: ember 5s linear infinite;
}
.raid-embers i:nth-child(1) {
  left: 4%;
  animation-delay: 0s;
}
.raid-embers i:nth-child(2) {
  left: 11%;
  animation-delay: 1.1s;
}
.raid-embers i:nth-child(3) {
  left: 18%;
  animation-delay: 2.3s;
}
.raid-embers i:nth-child(4) {
  left: 26%;
  animation-delay: 0.6s;
}
.raid-embers i:nth-child(5) {
  left: 33%;
  animation-delay: 3.1s;
}
.raid-embers i:nth-child(6) {
  left: 41%;
  animation-delay: 1.7s;
}
.raid-embers i:nth-child(7) {
  left: 48%;
  animation-delay: 2.8s;
}
.raid-embers i:nth-child(8) {
  left: 55%;
  animation-delay: 0.3s;
}
.raid-embers i:nth-child(9) {
  left: 62%;
  animation-delay: 3.6s;
}
.raid-embers i:nth-child(10) {
  left: 69%;
  animation-delay: 1.4s;
}
.raid-embers i:nth-child(11) {
  left: 76%;
  animation-delay: 2.5s;
}
.raid-embers i:nth-child(12) {
  left: 83%;
  animation-delay: 0.9s;
}
.raid-embers i:nth-child(13) {
  left: 89%;
  animation-delay: 3.3s;
}
.raid-embers i:nth-child(14) {
  left: 94%;
  animation-delay: 1.9s;
}
.raid-embers i:nth-child(15) {
  left: 8%;
  animation-delay: 4.2s;
}
.raid-embers i:nth-child(16) {
  left: 58%;
  animation-delay: 4.6s;
}
.raid-wait header h1 {
  margin: 6px 0;
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing: 4px;
  color: #ffe100;
  text-shadow:
    -3px 0 var(--pl-brown),
    3px 0 var(--pl-brown),
    0 -3px var(--pl-brown),
    0 3px var(--pl-brown),
    0 0 22px var(--pl-gold-bright);
  animation: raid-title 2.4s ease-in-out infinite;
}
@keyframes raid-title {
  50% {
    text-shadow:
      -3px 0 var(--pl-brown),
      3px 0 var(--pl-brown),
      0 -3px var(--pl-brown),
      0 3px var(--pl-brown),
      0 0 38px #ffe27a;
  }
}
.raid-wait header p {
  margin: 0 auto;
  max-width: 560px;
  font-size: var(--text-md);
  color: #c7d7ea;
}
.raid-silhouettes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.raid-silhouette {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.raid-silhouette .sil-aura {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd23f66, transparent 68%);
  animation: wx-pulse 2.6s ease-in-out infinite;
}
.raid-silhouette .sil-img {
  position: relative;
  width: 96px;
  height: 96px;
  object-fit: contain;
  animation: sil-float 3.2s ease-in-out infinite;
}
.raid-silhouette:nth-child(2) .sil-img {
  animation-delay: 0.5s;
}
.raid-silhouette:nth-child(3) .sil-img {
  animation-delay: 1s;
}
.raid-silhouette:nth-child(4) .sil-img {
  animation-delay: 1.5s;
}
.raid-silhouette:nth-child(5) .sil-img {
  animation-delay: 2s;
}
@keyframes sil-float {
  50% {
    transform: translateY(-8px);
  }
}
.raid-silhouette figcaption {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--pl-gold);
}
.raid-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: #a9c1d6;
}
.raid-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 760px;
}
.raid-member {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: #08152bcc;
  border: 1px solid var(--pl-steel);
}
.raid-member-sprite img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}
.raid-member strong {
  font-size: var(--text-sm);
  color: #fff;
}
.raid-member small {
  font-size: var(--text-2xs);
  color: var(--pl-slate);
}
.raid-member .hp {
  width: 100%;
  height: 6px;
}
.raid-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 760px;
}
.raid-rules article {
  padding: 8px 10px;
  text-align: left;
  background: #061a36d9;
  border-left: 3px solid var(--pl-gold);
}
.raid-rules b {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: 1px;
  color: var(--pl-gold);
}
.raid-rules span {
  font-size: var(--text-xs);
  color: #c7d7ea;
}
.raid-go {
  min-width: min(340px, 100%);
  animation: raid-pulse 1.6s ease-in-out infinite;
}
@keyframes raid-pulse {
  50% {
    box-shadow: 0 0 22px #ffd23f99;
  }
}

/* ================= Hall da Fama ================= */
.hall-page {
  display: grid;
  gap: 14px;
}
.hall-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.hall-head h2 {
  margin: 2px 0;
}
.hall-head p {
  margin: 0;
  color: #a9c1d6;
  font-size: var(--text-md);
}
.hall-stats {
  display: flex;
}
.hall-stats span {
  display: grid;
  justify-items: center;
  background: var(--pl-navy-700);
  border: 1px solid #557793;
}
.hall-stats b {
  color: var(--pl-gold);
}
.hall-stats small {
  font-weight: 900;
  color: var(--pl-slate);
}
.hall-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: #c7d7ea;
  background: repeating-linear-gradient(135deg, #0d1e3d 0 10px, #0a1834 10px 20px);
  border: 1px dashed #d3b565;
}
.hall-soon b {
  color: var(--pl-gold);
  letter-spacing: 1.2px;
}
.hall-list {
  display: grid;
  gap: 14px;
}
.hall-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(#0e2245, #08152b);
  border: 2px solid #557793;
  box-shadow: inset 0 0 0 2px var(--pl-navy-900);
}
.hall-card:first-child {
  border-color: #d3b565;
}
.hall-card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.hall-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hall-title strong {
  display: block;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--pl-gold);
}
.hall-title small {
  color: var(--pl-slate);
  font-size: var(--text-sm);
}
.hall-badges {
  display: flex;
  gap: 6px;
}
.hall-boss {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hall-boss small {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-slate);
}
.hall-team {
  display: grid;
}
.hall-member {
  display: grid;
  justify-items: center;
  text-align: center;
  background: #091a36;
  border: 1px solid #24405f;
}
.hall-member.shiny {
  border-color: var(--pl-cyan);
  box-shadow: 0 0 12px #7fe6ff44;
}
.hall-member.empty {
  opacity: 0.35;
  place-content: center;
  min-height: 96px;
}
.hall-portrait {
  position: relative;
}
.hall-portrait img.pixel {
  object-fit: contain;
  image-rendering: pixelated;
}
.hall-member strong {
  color: #fff;
  word-break: break-word;
}
.hall-member small {
  color: var(--pl-slate);
}
.hall-member em {
  font-style: normal;
  font-weight: 900;
  color: var(--pl-gold);
}
.hall-types {
  display: flex;
}
.hall-name-input {
  padding: 4px 6px;
  font: inherit;
  font-size: var(--text-md);
  text-align: center;
  color: #fff;
  background: var(--pl-navy-900);
  border: 1px solid #d3b565;
  outline: 0;
}
.hall-name-input:focus {
  box-shadow: 0 0 0 2px #f6d77855;
}
.hall-card > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hall-card > footer small {
  color: var(--pl-slate);
  font-size: var(--text-xs);
}
.outcome-naming {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  background: var(--pl-navy-700);
  border: 2px solid #d3b565;
  box-shadow: inset 0 0 0 2px var(--pl-navy-900);
}
.outcome-naming strong {
  display: block;
  font-size: var(--text-xl);
  letter-spacing: 1.4px;
  color: var(--pl-gold);
}
.outcome-naming small {
  color: #a9c1d6;
  font-size: var(--text-sm);
}
.outcome-naming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hall-member {
  min-width: 0;
  overflow: hidden;
}
.hall-member > * {
  max-width: 100%;
}
.hall-name-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.hall-types {
  flex-wrap: wrap;
  justify-content: center;
}
.hall-member {
  grid-template-columns: minmax(0, 1fr);
}

/* ================= cartas de bioma ================= */
.card-table {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  --ch: clamp(150px, 30vh, 260px);
  --cw: min(calc(var(--ch) / 1.42), calc((100cqw - 2 * var(--gap) - 24px) / 3.5));
  --gap: clamp(10px, 2.4vw, 26px);
}
.card-table header h1 {
  margin-bottom: 4px;
}
.card-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap);
  perspective: 1200px;
}
.card-slot {
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.42);
}
.card-row.dealing .card-slot {
  animation: card-deal 0.78s cubic-bezier(0.2, 0.85, 0.25, 1.08) backwards;
  animation-delay: calc(0.2s + var(--i) * 0.28s);
}
@keyframes card-deal {
  0% {
    opacity: 0;
    transform: translate(calc((var(--mid) - var(--i)) * (var(--cw) + var(--gap))), calc(var(--rise) * -1))
      rotate(-16deg) scale(0.32);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.play-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease-out,
    filter 0.2s;
}
.play-card:not(.flipped):hover,
.play-card:not(.flipped):focus-visible {
  transform: translateY(-12px) rotate(-1.2deg);
  filter: drop-shadow(0 0 14px #f6d778aa);
  outline: 0;
}
.play-card.flipped {
  cursor: default;
}
.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.play-card.flipped .card-inner {
  transform: rotateY(180deg);
}
.card-back,
.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-face {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #061a36;
}
.card-art {
  position: relative;
  flex: 1 1 62%;
  min-height: 0;
  background: #0a1730 center/cover no-repeat;
}
.card-copy .route-types {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  margin: 1px 0 2px;
}
.card-copy .route-types .type {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 5px;
  font-size: var(--text-3xs);
  gap: 3px;
}
.card-copy .route-types .type-sprite {
  width: 11px;
  height: 11px;
}
.card-crest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe100;
  text-shadow:
    -2px 0 var(--pl-brown),
    2px 0 var(--pl-brown),
    0 -2px var(--pl-brown),
    0 2px var(--pl-brown),
    0 0 12px var(--pl-gold-bright);
}
.card-copy {
  display: grid;
  gap: 2px;
  padding: 7px 8px 8px;
  background: linear-gradient(var(--pl-navy-700), #061a36);
  border-top: 2px solid var(--pl-gold);
}
.card-copy strong {
  font-size: clamp(10px, 1.7vh, 13px);
  letter-spacing: 0.5px;
  color: var(--pl-gold);
  line-height: 1.15;
}
.card-copy small {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.7px;
  color: var(--pl-slate);
}
.card-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  background: #03102ac4;
  color: #ffb3b3;
}
.card-lock img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  filter: grayscale(1) brightness(1.4);
}
.card-lock b {
  font-size: var(--text-xs);
  letter-spacing: 1px;
}
.play-card.locked .card-art {
  filter: grayscale(0.85) brightness(0.7);
}
.card-scan {
  position: absolute;
  inset: 6px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 6px;
  border: 1px solid var(--pl-cyan);
  background: #031a2ad0;
  color: var(--pl-cyan);
  text-align: center;
  overflow: hidden;
}
.card-scan i {
  position: absolute;
  inset: 0;
  background: center/cover;
  opacity: 0.55;
  filter: saturate(0.7) hue-rotate(150deg);
}
.card-scan b {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--text-2xs);
  letter-spacing: 2px;
}
.card-scan b img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}
.card-scan strong {
  position: relative;
  grid-row: 3;
  font-size: clamp(9px, 1.5vh, 12px);
  color: #fff;
  text-shadow: 0 1px 0 #000;
  line-height: 1.15;
}
.card-scan small {
  position: relative;
  grid-row: 4;
  font-size: var(--text-2xs);
  font-weight: 900;
  color: #ffb3b3;
}
.card-scan:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 24%;
  background: linear-gradient(transparent, #7fe6ff66, transparent);
  animation: scan-sweep 2.2s linear infinite;
}
@keyframes scan-sweep {
  from {
    top: -28%;
  }
  to {
    top: 112%;
  }
}
.card-prompt {
  min-height: 22px;
  text-align: center;
  font-size: clamp(11px, 1.9vh, 15px);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-gold);
  animation: prompt-pulse 1.5s ease-in-out infinite;
}
@keyframes prompt-pulse {
  50% {
    opacity: 0.55;
  }
}
.card-actions {
  display: flex;
  justify-content: center;
  min-height: 6px;
}
.card-scanner-hint {
  justify-content: center;
}
.raid-gate .play-card.picked {
  filter: drop-shadow(0 0 26px var(--pl-gold-bright));
}
@media (max-width: 640px) {
  .card-table {
    --ch: clamp(120px, 24vh, 190px);
    --gap: 8px;
  }
  .card-copy strong {
    font-size: var(--text-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-table *,
  .raid-wait * {
    animation: none !important;
  }
  .card-inner {
    transition: none;
  }
}

/* cartas: cabem em telas baixas e não apagam quando viradas */
.card-table {
  --ch: clamp(124px, calc(100dvh - 500px), 270px);
}
.card-row {
  padding: 6px 0 4px;
}
.card-prompt {
  margin: 2px 0 0;
}
.play-card:disabled {
  opacity: 1 !important;
  cursor: default;
}
.card-table.has-pick footer {
  display: none;
}
@media (max-height: 700px) {
  .card-table header p {
    display: none;
  }
  .card-copy small {
    display: none;
  }
}
.card-table {
  --ch: clamp(124px, calc(100dvh - 545px), 270px);
  padding-bottom: 14px !important;
}
.card-actions {
  padding: 6px 0 2px;
}

/* ---- verso da carta: arte fornecida ---- */
.card-back {
  display: block;
  border: 0;
  border-radius: 6px;
  background: url("/static/game/ui/card_back.81f95cac9283.png?v=20260919") center/100% 100% no-repeat;
}
.card-face {
  border-radius: 6px;
}
.play-card:not(.flipped):hover .card-back,
.play-card:not(.flipped):focus-visible .card-back {
  box-shadow:
    0 12px 22px #000b,
    0 0 22px #ffd23f99;
}
.card-table {
  --rise: 70px;
}
.card-scan {
  border-radius: 4px;
}

/* ---- faixa da etapa ---- */
.stage-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 30px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.6px;
  color: #0b213a;
  filter: drop-shadow(0 3px 0 var(--pl-navy-900));
}
.stage-ribbon em {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 12px 0 14px;
  font-style: normal;
  color: var(--pl-gold);
  background: linear-gradient(#123a70, #0a2247);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}
.stage-ribbon .stage-label {
  place-items: center;
  height: 100%;
  padding: 0 20px 0 22px;
  margin-left: -8px;
  white-space: nowrap;
  background: linear-gradient(#ffe7a0, #f6c945 55%, #d99a26);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  text-shadow: 0 1px 0 #ffffffa0;
}
.stage-ribbon .stage-label strong {
  font-size: 15px;
  color: var(--pl-brown);
}
.stage-ribbon .stage-pips {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 14px 0 20px;
  margin-left: -8px;
  background: linear-gradient(#123a70, #0a2247);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.stage-pips i {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid #f6d77899;
  background: #061733;
}
.stage-pips i.on {
  background: var(--pl-gold);
  border-color: #fff3c0;
  box-shadow: 0 0 6px var(--pl-gold-bright);
}
.stage-pips i.now {
  background: #fff;
  animation: pip-now 1.4s ease-in-out infinite;
}
@keyframes pip-now {
  50% {
    transform: rotate(45deg) scale(1.35);
    box-shadow: 0 0 12px #fff;
  }
}
.stage-ribbon.final .stage-label {
  background: linear-gradient(#ffd0a0, #ff9a3d 55%, #d4611a);
}
.stage-ribbon.final .stage-label {
  color: #3b1300;
}

/* ---- botão IR PARA ---- */

/* ---- dica do Scanner, acima do botão ---- */
.card-actions {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.card-scanner-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(540px, 100%);
  margin: 0;
  padding: 6px 12px;
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #c7d7ea;
  background: linear-gradient(90deg, #0b2a4f, #061a36);
  border: 1px solid #7fe6ff88;
  border-left: 3px solid var(--pl-cyan);
  box-shadow: 0 0 12px #7fe6ff22;
}
.card-scanner-hint img {
  flex: none;
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px #7fe6ffaa);
}
.card-scanner-hint b {
  color: var(--pl-cyan);
  letter-spacing: 0.8px;
}
.card-table {
  --ch: clamp(124px, calc(100dvh - 520px), 280px);
}
.stage-ribbon .stage-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.stage-ribbon .stage-label strong {
  margin: 0;
}
.card-back {
  box-shadow: 0 6px 12px #0007;
}
.play-card:not(.flipped):hover,
.play-card:not(.flipped):focus-visible {
  filter: none;
}
.play-card:not(.flipped):hover .card-back,
.play-card:not(.flipped):focus-visible .card-back {
  box-shadow: 0 0 26px 2px #ffd23fcc;
}

/* ---- player de música ---- */
.music-player {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-theme .mp-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 28px;
  min-height: 0;
  padding: 2px;
  border: 1px solid #557793;
  border-radius: 0;
  background: #102e4b;
  color: #87a7c5;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.site-theme .mp-btn:hover {
  color: #ffdf8c;
  border-color: var(--pl-gold);
}
.site-theme .music-player .music-toggle span {
  font-size: var(--text-md);
  letter-spacing: -1px;
}
.mp-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: 200px;
  margin-left: 8px;
  text-align: left;
}
.mp-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--pl-gold);
  text-shadow: 0 1px 0 #000;
}
.mp-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--pl-slate);
  white-space: nowrap;
}
.mp-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 8px;
  font-style: normal;
}
.mp-eq u {
  display: block;
  width: 2px;
  height: 3px;
  text-decoration: none;
  background: #557793;
}
.music-player.playing .mp-eq u {
  background: var(--pl-gold);
  animation: mp-bar 0.8s ease-in-out infinite;
}
.music-player.playing .mp-eq u:nth-child(2) {
  animation-delay: 0.25s;
}
.music-player.playing .mp-eq u:nth-child(3) {
  animation-delay: 0.5s;
}
@keyframes mp-bar {
  0%,
  100% {
    height: 2px;
  }
  50% {
    height: 8px;
  }
}
.music-player.compact .mp-info {
  display: none;
}
.top-player {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
@media (max-width: 520px) {
  .mp-info {
    max-width: 120px;
  }
  .site-theme .mp-btn {
    width: 22px;
    height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .music-player .mp-eq u {
    animation: none !important;
  }
}

/* ---- cartas: contorno discreto, carta escolhida em destaque ---- */
.card-face {
  border: 1px solid #f6d77840;
  box-shadow: 0 6px 14px #0009;
}
.play-card.picked {
  filter: drop-shadow(0 0 9px #ffd23f88);
}
.play-card.picked:disabled {
  filter: drop-shadow(0 0 9px #ffd23f88);
}
.card-slot {
  transition: transform 0.8s cubic-bezier(0.3, 0.85, 0.25, 1);
}
.card-slot.zoom {
  z-index: 3;
}
.card-slot.chosen {
  z-index: 2;
}
.card-table.has-pick .card-row {
  align-items: center;
}
.card-table.has-pick .card-slot.chosen {
  width: calc(var(--cw) * 1.1);
  height: calc(var(--cw) * 1.562);
  transform: none;
}
.card-table.has-pick .card-slot.unchosen {
  width: calc(var(--cw) * 0.9);
  height: calc(var(--cw) * 1.278);
  transform: none;
}
.card-slot.unchosen .play-card {
  filter: brightness(0.8) saturate(0.85) blur(1.4px);
}

/* ---- botão IR PARA (estilo dos botões quadrados, versão calma do botão shiny) ---- */
.card-go {
  position: relative;
  display: block;
  width: fit-content;
  min-width: min(250px, 100%);
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #102239;
  filter: drop-shadow(2px 0 0 var(--pl-navy-900)) drop-shadow(-2px 0 0 var(--pl-navy-900))
    drop-shadow(0 2px 0 var(--pl-navy-900)) drop-shadow(0 -2px 0 var(--pl-navy-900));
  transition:
    transform 0.12s,
    filter 0.15s;
}
.card-go .go-body {
  display: block;
  padding: 2px 2px 5px;
  background: linear-gradient(#ffe7a0, #9a5f08);
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 6px,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) 100%,
    6px 100%,
    6px calc(100% - 3px),
    3px calc(100% - 3px),
    3px calc(100% - 6px),
    0 calc(100% - 6px),
    0 6px,
    3px 6px,
    3px 3px,
    6px 3px
  );
}
.card-go .go-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 7px 6px 15px;
  overflow: hidden;
  background: linear-gradient(#ffe9a6, #f6c945 55%, #dba22a);
  box-shadow:
    inset 0 2px 0 #ffffff66,
    inset 0 -3px 0 #00000026;
  clip-path: polygon(
    4px 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 2px),
    2px calc(100% - 2px),
    2px calc(100% - 4px),
    0 calc(100% - 4px),
    0 4px,
    2px 4px,
    2px 2px,
    4px 2px
  );
}
.card-go .go-face:before {
  display: none;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 22%;
  background: linear-gradient(100deg, transparent, #ffffff90, transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.card-go .go-text {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.card-go small {
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 2.6px;
  color: #5d3a00;
}
.card-go strong {
  font-size: clamp(12px, 2vh, 14px);
  font-weight: 900;
  letter-spacing: 1px;
  color: #102239;
  text-shadow: none;
  line-height: 1.15;
}
.card-go:hover {
  transform: translateY(-2px);
  filter: drop-shadow(2px 0 0 var(--pl-navy-900)) drop-shadow(-2px 0 0 var(--pl-navy-900))
    drop-shadow(0 2px 0 var(--pl-navy-900)) drop-shadow(0 -2px 0 var(--pl-navy-900)) brightness(1.06);
}
.card-go:active {
  transform: translateY(3px);
}
.card-go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.ic-play {
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.ic-pause {
  display: block;
  width: 11px;
  height: 12px;
  box-sizing: border-box;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* ---- página inicial: faixa de som (música + efeitos) ---- */
.home-audio {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 6px 10px;
  background: linear-gradient(90deg, #0b2450, #07173a);
  border: 1px solid var(--pl-steel);
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.home-audio .music-player {
  flex: 1;
  min-width: 0;
}
.home-audio .mp-info {
  flex: 1;
  max-width: none;
  margin-left: 10px;
}
.home-audio .mp-title {
  font-size: var(--text-lg);
}
.site-theme .sfx-toggle.home-sfx-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 28px;
  padding: 2px 11px 2px 9px;
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.3px;
}
.home-sfx-btn .sfx-label {
  line-height: 1;
}
@media (max-width: 520px) {
  .home-audio {
    gap: 8px;
    padding: 5px 7px;
  }
  .home-audio .mp-meta {
    display: none;
  }
  .home-audio .mp-info {
    margin-left: 6px;
  }
  .site-theme .sfx-toggle.home-sfx-btn {
    padding: 2px 7px;
  }
  .home-sfx-btn .sfx-label {
    display: none;
  }
}

/* depois da escolha a carta é desenhada plana (sem 3D), para o zoom não borrar a arte */
.card-table.has-pick .card-inner {
  transform: none;
  transform-style: flat;
  transition: none;
}
.card-table.has-pick .card-face {
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.card-table.has-pick .card-back {
  display: none;
}

/* ================= botões pixel (mesma família do IR PARA e do TESTE SUA SORTE) ================= */
:root {
  --px-o: polygon(
    6px 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 6px,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 3px) calc(100% - 6px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) 100%,
    6px 100%,
    6px calc(100% - 3px),
    3px calc(100% - 3px),
    3px calc(100% - 6px),
    0 calc(100% - 6px),
    0 6px,
    3px 6px,
    3px 3px,
    6px 3px
  );
  --px-in: polygon(
    4px 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 2px),
    2px calc(100% - 2px),
    2px calc(100% - 4px),
    0 calc(100% - 4px),
    0 4px,
    2px 4px,
    2px 2px,
    4px 2px
  );
}
.btn,
.run-nav button,
.home-back,
.encounter-spin,
.reel-battle,
.skip-link,
.home-menu-card,
.rg-go {
  --line: #03102a;
  --lip-a: #5b93c4;
  --lip-b: #0e2f52;
  --face-a: #2d6299;
  --face-b: #15395f;
  --ink: #f0f7ff;
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  outline: 0;
  background: var(--line) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  text-shadow: 0 1px 0 #0009 !important;
  clip-path: var(--px-o);
  transition:
    transform 0.12s,
    filter 0.15s;
}
.btn:before,
.run-nav button:before,
.home-back:before,
.encounter-spin:before,
.reel-battle:before,
.skip-link:before,
.home-menu-card:before,
.rg-go:before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: -1px;
  background: linear-gradient(var(--lip-a), var(--lip-b));
  clip-path: var(--px-in);
  pointer-events: none;
}
.btn:after,
.run-nav button:after,
.home-back:after,
.encounter-spin:after,
.reel-battle:after,
.skip-link:after,
.home-menu-card:after,
.rg-go:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  background: linear-gradient(var(--face-a), var(--face-b));
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e;
  clip-path: var(--px-in);
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.btn:hover:not(:disabled),
.run-nav button:hover:not(:disabled),
.home-back:hover:not(:disabled),
.encounter-spin:hover:not(:disabled),
.reel-battle:hover:not(:disabled),
.skip-link:hover:not(:disabled),
.home-menu-card:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.btn:active:not(:disabled),
.run-nav button:active:not(:disabled),
.home-back:active:not(:disabled),
.encounter-spin:active:not(:disabled),
.reel-battle:active:not(:disabled),
.skip-link:active:not(:disabled),
.home-menu-card:active:not(:disabled) {
  transform: translateY(2px);
  filter: none;
}
.btn:focus-visible:after,
.run-nav button:focus-visible:after,
.home-back:focus-visible:after,
.encounter-spin:focus-visible:after,
.reel-battle:focus-visible:after,
.skip-link:focus-visible:after,
.home-menu-card:focus-visible:after,
.home-account button:focus-visible:after {
  box-shadow: inset 0 0 0 2px #fff;
}
.btn:disabled,
.run-nav button:disabled {
  filter: saturate(0.5);
}
.btn.primary,
.reel-battle {
  --lip-a: #ffe7a0;
  --lip-b: #9a5f08;
  --face-a: #ffe9a6;
  --face-b: #dba22a;
  --ink: #102239;
  text-shadow: none !important;
}
.btn.ghost,
.home-back,
.run-nav button {
  --lip-a: #4b7399;
  --lip-b: #0b2138;
  --face-a: #1d456e;
  --face-b: #0f2c4b;
  --ink: #d6e7f8;
}
.btn.danger,
.run-nav .danger {
  --lip-a: #e08a92;
  --lip-b: #5a1a2b;
  --face-a: #b04357;
  --face-b: #722639;
  --ink: #ffe6e3;
}

/* BATALHAR: amarelo, com brilho que passa de tempos em tempos */
.reel-battle {
  font-weight: 900;
  letter-spacing: 1.4px;
}
.reel-battle:after {
  background: linear-gradient(var(--face-a), var(--face-b));
}
.reel-battle:hover:not(:disabled):after {
  background-position: 0 0;
}
.reel-battle:disabled {
  --lip-a: #d8c77a;
  --lip-b: #4d3f12;
  --face-a: #b9a453;
  --face-b: #8d7930;
  --ink: #40340c;
  opacity: 0.85;
}
.compact-shell .center-reel .reel-battle {
  --lip-a: #9be7bf;
  --lip-b: #0d4636;
  --face-a: #37b085;
  --face-b: #146250;
  --ink: #f0fff7;
  text-shadow: 0 1px 0 #06322a !important;
}

/* converter em ouro: âmbar com moeda girando */
.skip-link {
  --lip-a: #f4c95a;
  --lip-b: #7a4a0a;
  --face-a: #6a4515;
  --face-b: #3c250a;
  --ink: #ffe27a;
  font-weight: 900;
  letter-spacing: 0.6px;
}
.skip-link:hover:not(:disabled) {
  --face-a: #815619;
  --face-b: #4a2d0c;
  --ink: #fff0a8;
}
.skip-money-icon {
  filter: drop-shadow(0 0 4px #ffcf4d);
  animation: coin-flip 2.6s ease-in-out infinite;
}
.skip-link:hover .skip-money-icon {
  animation-duration: 0.9s;
}
@keyframes coin-flip {
  0%,
  55%,
  100% {
    transform: rotateY(0);
  }
  78% {
    transform: rotateY(180deg);
  }
}

/* ================= GIRAR ENCONTROS: roxo, gradiente vivo, brilho e estrelas ================= */
.encounter-spin {
  --lip-a: #ff9df5;
  --lip-b: #4c1d95;
  --ink: #fff;
  text-shadow:
    0 2px 0 #2b0a5c,
    0 0 10px #e9b6ff !important;
  font-weight: 900;
  letter-spacing: 1px;
}
.encounter-spin:before {
  background: linear-gradient(90deg, #ff9df5, #a78bfa, #6ee7f9, #a78bfa, #ff9df5) 0 0/300% 100% repeat-x;
  animation: px-rim 3.2s linear infinite;
}
.encounter-spin:after {
  background:
    linear-gradient(105deg, transparent 42%, #ffffffc8 50%, transparent 58%) no-repeat -70% 0/40% 100%,
    radial-gradient(circle, #fff 0 1px, transparent 1.7px) 0 0/43px 29px,
    radial-gradient(circle, #ffe9ff 0 1px, transparent 1.5px) 15px 9px/61px 37px,
    linear-gradient(#ffffff3d, transparent 46%, #0000003a),
    linear-gradient(100deg, #5b21b6, #a21caf, #7c3aed, #c026d3, #6d28d9, #a21caf, #5b21b6) 0 0/300% 100% repeat-x;
  animation: px-purple 5s linear infinite;
}
.encounter-spin > span[aria-hidden] {
  color: #fff;
  font-size: 1.05em;
  text-shadow:
    0 0 6px #fff,
    0 0 12px #e879f9 !important;
  animation: lucky-twinkle 1.6s ease-in-out infinite;
}
.encounter-spin > span[aria-hidden]:last-child {
  animation-delay: 0.8s;
}
.encounter-spin small {
  color: #f3d9ff;
  text-shadow: 0 1px 0 #2b0a5c !important;
}
.machine-controls:has(.encounter-spin:not(:disabled)) {
  animation: px-glow 2s ease-in-out infinite;
}
/* girando */
.rolling .encounter-spin {
  filter: brightness(1.15) saturate(1.2);
  animation: px-jitter 0.16s steps(2) infinite;
}
.rolling .encounter-spin:before {
  animation-duration: 0.8s;
}
.rolling .encounter-spin:after {
  animation-duration: 0.9s;
}
.rolling .machine-controls {
  animation: px-glow 0.55s ease-in-out infinite;
}
/* revelados: mais calmo, mesma cor */
.encounter-spin:disabled:not(:hover) {
  filter: saturate(0.75) brightness(0.88);
}
.rolling .encounter-spin:disabled {
  filter: brightness(1.15) saturate(1.2);
}
.encounter-spin:disabled:after {
  animation-duration: 14s;
}
.encounter-spin:disabled:before {
  animation-duration: 9s;
}
.rolling .encounter-spin:disabled:after {
  animation-duration: 0.9s;
}
.rolling .encounter-spin:disabled:before {
  animation-duration: 0.8s;
}

/* ================= GIRAR ROLETA (upgrader): pegando fogo ================= */
.upgrade-center > .fire-btn {
  position: relative;
  flex: none;
  width: 100%;
  margin: 12px 0 0;
  animation: fire-glow 1.3s ease-in-out infinite;
}
.fire-btn > .btn {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 42px;
  padding: 11px 6px;
  font-size: 15px;
  letter-spacing: 2.5px;
  --lip-a: #ffe27a;
  --lip-b: #a51a00;
  --ink: #fff;
  text-shadow:
    0 2px 0 #7a1000,
    0 0 10px #ffcc33 !important;
}
.fire-btn > .btn:after {
  background:
    radial-gradient(ellipse 50% 90% at 50% 125%, #fff3a0dd, #ffb52acc 45%, transparent 75%) 0 0/38px 100% repeat-x,
    radial-gradient(ellipse 50% 75% at 50% 125%, #ffe98acc, #ff7a00aa 45%, transparent 75%) 12px 0/29px 100% repeat-x,
    linear-gradient(0deg, #d61f00, #ff6a00 55%, #ffa61a);
  animation: px-fire 2.4s linear infinite;
}
.fire-btn > .btn:before {
  background: linear-gradient(#ffe27a, #a51a00);
}
.fire-btn > .btn:not(:disabled) {
  animation: fire-flick 1.1s steps(1) infinite;
}
.fire-btn > .btn:disabled {
  --lip-a: #7f6a6a;
  --lip-b: #2e1f1f;
  --ink: #e8d8d0;
}
.fire-btn > .btn:disabled:after {
  animation: none;
  background: linear-gradient(#5a3c3c, #382626);
}
.flames {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: calc(100% - 9px);
  height: 38px;
  pointer-events: none;
  z-index: 0;
}
.flames i {
  position: absolute;
  bottom: 0;
  left: calc(var(--i) * 9%);
  width: 11%;
  height: var(--h, 22px);
  background: linear-gradient(0deg, #ffe98a 0, #ffb62b 32%, #ff6a00 66%, #e02500 100%);
  clip-path: polygon(50% 0, 62% 22%, 76% 22%, 88% 48%, 100% 48%, 100% 100%, 0 100%, 0 48%, 12% 48%, 24% 22%, 38% 22%);
  transform-origin: 50% 100%;
  animation: flame 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.13s);
}
.flames i:after {
  content: '';
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 0;
  height: 58%;
  background: linear-gradient(0deg, #fffbe0, #ffe066);
  clip-path: polygon(50% 0, 100% 55%, 100% 100%, 0 100%, 0 55%);
}
.flames i:nth-child(odd) {
  --h: 28px;
}
.flames i:nth-child(3n) {
  --h: 20px;
}
.flames i:nth-child(4n) {
  --h: 35px;
}
.flames i:nth-child(5n + 2) {
  --h: 24px;
}
.flames b {
  position: absolute;
  bottom: 8px;
  left: calc(var(--i) * 11% + 4%);
  width: 3px;
  height: 3px;
  background: #ffd26a;
  box-shadow: 0 0 5px #ff8a00;
  opacity: 0;
  animation: ember 1.7s ease-out infinite;
  animation-delay: calc(var(--i) * -0.41s);
}
.flames b:nth-child(3n) {
  width: 2px;
  height: 2px;
}
.fire-btn:hover .flames i {
  animation-duration: 0.55s;
}
.fire-btn:has(.btn:disabled) {
  animation: none;
}
.fire-btn:has(.btn:disabled) .flames {
  display: none;
}
.or-sep {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 6px 0 0;
  color: #a9c8e5;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 3px;
}
.or-sep:before,
.or-sep:after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, #406686 55%, #406686);
}
.or-sep:after {
  background: linear-gradient(270deg, transparent, #406686 55%, #406686);
}
.or-sep span {
  padding: 2px 9px;
  background: #0c2946;
  border: 1px solid #406686;
}
.capture-modal .or-sep + .skip-link,
.upgrade-center > .or-sep + .skip-link {
  flex: none;
  width: 100%;
  margin: 6px 0 0;
  min-height: 36px;
  padding: 9px 8px;
  font-size: var(--text-sm);
  line-height: 1.35;
  gap: 8px;
}

/* ================= vitória do upgrader ================= */
.capture-modal {
  position: relative;
}
.capture-win-fx {
  position: absolute;
  inset: -46px;
  pointer-events: none;
  z-index: 8;
}
.capture-win-fx > * {
  position: absolute;
}
.cw-flash {
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #fff7b0 32%, transparent 70%);
  opacity: 0;
}
.cw-rays {
  inset: -60%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #fff6b0d0 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%);
  mask: radial-gradient(circle, #000 10%, transparent 62%);
  opacity: 0;
}
.cw-rays.r2 {
  background: repeating-conic-gradient(from 7deg, #8df3ffb8 0 4deg, transparent 4deg 22deg);
}
.cw-ring {
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  margin: -36% 0 0 -36%;
  border: 4px solid var(--c);
  border-radius: 50%;
  box-shadow:
    0 0 14px var(--c),
    inset 0 0 14px var(--c);
  opacity: 0;
}
.cw-p {
  left: 50%;
  top: 50%;
  opacity: 0;
  font-style: normal;
}
.cw-p.conf {
  width: var(--s);
  height: calc(var(--s) * 0.55);
  background: var(--c);
}
.cw-p.coin {
  width: calc(var(--s) * 1.7);
  height: calc(var(--s) * 1.7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7b0, #ffcf3a 48%, #b87400);
  border: 1px solid #7a4a00;
  box-shadow: 0 0 8px var(--pl-gold-bright);
}
.cw-p.star {
  font-size: calc(var(--s) * 2.4);
  line-height: 1;
  color: var(--c);
  text-shadow: 0 0 8px var(--c);
}
.cw-tw {
  font-style: normal;
  color: #fff;
  font-size: calc(8px + 12px * var(--u, 1));
  line-height: 1;
  text-shadow:
    0 0 8px #fff,
    0 0 14px var(--pl-gold-bright);
  opacity: 0;
}
.cw-stack {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3px + 6px * var(--u, 1));
  z-index: 4;
  opacity: 0;
  width: max-content;
}
.cw-mon {
  position: relative;
  width: max(58px, calc(120px * var(--u, 1)));
  height: max(58px, calc(120px * var(--u, 1)));
  display: grid;
  place-items: center;
}
.cw-mon:before {
  content: '';
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbd0dd 0, #ffd23f77 38%, transparent 68%);
  animation: cw-pulse 0.5s ease-in-out infinite alternate;
}
.cw-mon .pixel {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: scale(1.4);
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 0 #0008);
}
.cw-plate {
  filter: drop-shadow(0 0 12px var(--pl-gold-bright)) drop-shadow(0 3px 0 #000b);
}
.cw-banner {
  display: flex;
  padding: 0.16em 0.55em 0.2em;
  font-size: var(--fs, 24px);
  background: linear-gradient(#3a25a0, #160b4c 55%, #2a1a78);
  clip-path: var(--px-o);
  box-shadow:
    inset 0 0 0 2px var(--pl-gold-bright),
    inset 0 0 0 4px #7a4a00;
}
.cw-banner b {
  display: inline-block;
  font-size: 1em;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #fff6b8;
  text-shadow:
    0.05em 0 0 #4a2400,
    -0.05em 0 0 #4a2400,
    0 0.05em 0 #4a2400,
    0 -0.05em 0 #4a2400,
    0.05em 0.05em 0 #4a2400,
    -0.05em 0.05em 0 #4a2400,
    0 0.1em 0 #b36b00,
    0 0 0.4em var(--pl-gold-bright);
}
.cw-sub {
  padding: 0.35em 0.9em;
  font-size: max(8px, calc(13px * var(--u, 1)));
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
  color: #eaffdc;
  background: linear-gradient(#0f5a2a, #083a1a);
  clip-path: var(--px-in);
  box-shadow: inset 0 0 0 1px #8df358;
  text-shadow: 0 1px 0 #032510;
  opacity: 0;
}
.wheel-wrap.celebrating {
  animation: cw-bounce 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.wheel-wrap.celebrating .wheel {
  animation: cw-glow 0.55s ease-in-out 6;
}
.wheel-wrap.celebrating .wheel-center {
  opacity: 0.1;
}
.wheel-wrap.celebrating .cw-flash {
  animation: cw-flash 0.8s ease-out both;
}
.wheel-wrap.celebrating .cw-rays {
  animation: cw-rays 3s ease-out both;
}
.wheel-wrap.celebrating .cw-rays.r2 {
  animation: cw-rays2 3s ease-out 0.15s both;
}
.wheel-wrap.celebrating .cw-ring {
  animation: cw-ring 1.1s ease-out var(--dl) both;
}
.wheel-wrap.celebrating .cw-p {
  animation: cw-burst var(--du) cubic-bezier(0.12, 0.7, 0.3, 1) var(--dl) both;
}
.wheel-wrap.celebrating .cw-tw {
  animation: cw-tw 1.1s ease-in-out var(--dl) 2;
}
.wheel-wrap.celebrating .cw-stack {
  animation: cw-stack 3.3s linear both;
}
.wheel-wrap.celebrating .cw-mon {
  animation: cw-mon-pop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) 0.1s both;
}
.wheel-wrap.celebrating .cw-plate {
  animation: cw-plate 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.25s both;
}
.wheel-wrap.celebrating .cw-banner b {
  animation:
    cw-letter 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) calc(0.35s + var(--k) * 0.05s) both,
    cw-hop 0.7s ease-in-out calc(1.4s + var(--k) * 0.06s) 2;
}
.wheel-wrap.celebrating .cw-sub {
  animation: cw-sub 0.5s ease-out 1s both;
}
.cw-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 30;
}
.cw-rain i {
  position: absolute;
  top: -16px;
  left: var(--l);
  width: var(--w);
  height: calc(var(--w) * 0.55);
  background: var(--c);
  animation: cw-fall var(--du) linear var(--dl) both;
}
.cw-screenflash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: cw-screenflash 0.55s ease-out;
}
.capture-modal.cw-shake {
  animation: cw-shake 0.6s linear;
}
@keyframes cw-flash {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes cw-rays {
  0% {
    opacity: 0;
    transform: rotate(0) scale(0.5);
  }
  15% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: rotate(90deg) scale(1.15);
  }
}
@keyframes cw-rays2 {
  0% {
    opacity: 0;
    transform: rotate(0) scale(0.5);
  }
  15% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: rotate(-70deg) scale(1.1);
  }
}
@keyframes cw-ring {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes cw-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0);
  }
  10% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--x) * var(--u, 1) * 1px),
        calc(-50% + var(--y) * var(--u, 1) * 1px + 60px * var(--u, 1))
      )
      scale(1) rotate(420deg);
  }
}
@keyframes cw-tw {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(30deg);
  }
}
@keyframes cw-stack {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cw-mon-pop {
  0% {
    transform: scale(0) rotate(-30deg);
  }
  45% {
    transform: scale(1.4) rotate(8deg);
  }
  65% {
    transform: scale(0.9) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes cw-plate {
  0% {
    transform: scale(0.2);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes cw-letter {
  0% {
    opacity: 0;
    transform: translateY(-1.4em) scale(2.4) rotate(-14deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes cw-hop {
  50% {
    transform: translateY(-0.22em) scale(1.12);
  }
}
@keyframes cw-sub {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes cw-pulse {
  to {
    transform: scale(1.12);
    opacity: 0.85;
  }
}
@keyframes cw-bounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes cw-glow {
  50% {
    filter: drop-shadow(0 0 22px #8ee56f) brightness(1.35);
  }
}
@keyframes cw-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0.9;
    transform: translate(var(--sw), 105vh) rotate(var(--rot));
  }
}
@keyframes cw-screenflash {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cw-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(-5px, 3px);
  }
  25% {
    transform: translate(5px, -3px);
  }
  38% {
    transform: translate(-4px, -2px);
  }
  52% {
    transform: translate(4px, 3px);
  }
  66% {
    transform: translate(-2px, 2px);
  }
  80% {
    transform: translate(2px, -1px);
  }
}

/* toque longo na carta do encontro não abre menu nem seleciona */
.encounter-reel .reel-window {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ================= animações compartilhadas ================= */
@keyframes px-sweep {
  0% {
    background-position:
      -70% 0,
      0 0;
  }
  55%,
  100% {
    background-position:
      170% 0,
      0 0;
  }
}
@keyframes px-purple {
  0% {
    background-position:
      -70% 0,
      0 0,
      15px 9px,
      0 0,
      0% 0;
  }
  45% {
    background-position:
      170% 0,
      -19px 13px,
      42px -8px,
      0 0,
      67% 0;
  }
  100% {
    background-position:
      170% 0,
      -43px 29px,
      76px -28px,
      0 0,
      150% 0;
  }
}
@keyframes px-rim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 150% 0;
  }
}
@keyframes px-fire {
  0% {
    background-position:
      0 0,
      12px 0,
      0 0;
  }
  100% {
    background-position:
      76px 0,
      -46px 0,
      0 0;
  }
}
@keyframes px-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 5px #b455ff77);
  }
  50% {
    filter: drop-shadow(0 0 15px #d17bffdd);
  }
}
@keyframes px-jitter {
  0% {
    transform: translate(-1px, 0);
  }
  100% {
    transform: translate(1px, 1px);
  }
}
@keyframes fire-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 6px #ff6a0088);
  }
  50% {
    filter: drop-shadow(0 0 16px #ffae1acc);
  }
}
@keyframes fire-flick {
  0%,
  100% {
    filter: brightness(1);
  }
  20% {
    filter: brightness(1.12);
  }
  40% {
    filter: brightness(0.97);
  }
  60% {
    filter: brightness(1.18);
  }
  80% {
    filter: brightness(1.03);
  }
}
@keyframes flame {
  0%,
  100% {
    transform: scaleY(0.8) skewX(-3deg);
  }
  35% {
    transform: scaleY(1.15) skewX(4deg);
  }
  70% {
    transform: scaleY(0.92) skewX(-2deg);
  }
}
@keyframes ember {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc((var(--i) - 4) * 5px), -48px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn:after,
  .run-nav button:after,
  .home-back:after,
  .encounter-spin:after,
  .reel-battle:after,
  .skip-link:after,
  .btn:before,
  .run-nav button:before,
  .home-back:before,
  .encounter-spin:before,
  .reel-battle:before,
  .skip-link:before,
  .encounter-spin > span[aria-hidden],
  .machine-controls,
  .fire-btn,
  .fire-btn > .btn,
  .flames i,
  .flames b,
  .skip-money-icon,
  .rolling .encounter-spin {
    animation: none !important;
  }
  .wheel-wrap.celebrating .cw-banner {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cw-rain,
  .capture-win-fx .cw-p,
  .capture-win-fx .cw-ring,
  .capture-win-fx .cw-rays,
  .capture-win-fx .cw-flash,
  .capture-win-fx .cw-tw {
    display: none;
  }
  .capture-modal.cw-shake {
    animation: none;
  }
  .wheel-wrap.celebrating .cw-stack {
    animation: none;
    opacity: 1;
  }
  .wheel-wrap.celebrating .cw-mon,
  .wheel-wrap.celebrating .cw-plate,
  .wheel-wrap.celebrating .cw-banner b,
  .wheel-wrap.celebrating .cw-sub {
    animation: none;
    opacity: 1;
  }
}
/* cartas estreitas: os tipos viram só o ícone */
@media (max-width: 640px) {
  .card-copy .route-types .type {
    font-size: 0;
    gap: 0;
    padding: 3px;
  }
  .card-copy .route-types .type .type-sprite {
    margin: 0;
    width: 13px;
    height: 13px;
  }
}
.capture-modal .upgrade-center {
  gap: 5px;
  padding-top: 8px;
}
@media (min-width: 761px) {
  .capture-modal .upgrade-center .wheel-wrap {
    margin-top: 4px;
    margin-bottom: 10px;
  }
}

/* ================= menu inicial ================= */
.home-menu-card {
  --accent: var(--menu-accent, #5fd4ff);
  --glow: #ffffff1c;
  --lip-a: var(--accent);
  --lip-b: #0a2a48;
  --face-a: #1b4c75;
  --face-b: #0d2a4a;
  --ink: #eef6ff;
  text-align: left;
  font-family: inherit;
}
.home-menu-card:after {
  background:
    radial-gradient(ellipse 50% 90% at 50% 50%, var(--glow), transparent 72%) no-repeat -30% 0/60% 100%,
    linear-gradient(var(--face-a), var(--face-b));
  animation: px-drift 9s ease-in-out infinite alternate;
}
.home-menu-card:hover:not(:disabled):after {
  --glow: #ffffff30;
}
.home-menu-card .home-menu-copy strong {
  color: var(--ink);
  text-shadow: 0 1px 0 #0009;
}
.home-menu-card .home-menu-copy small {
  color: #a9c8e5;
}
.home-menu-card.dex-card {
  --accent: #5fd4ff;
  --lip-b: #0b3a58;
}
.home-menu-card.hall-card {
  --accent: #ffbf47;
  --lip-b: #6b4308;
  --face-a: #3f4a63;
  --face-b: #1f2c48;
}
.home-menu-card.vault-card {
  --accent: #ff8ad8;
  --lip-b: #5f1a52;
  --face-a: #4a3b7a;
  --face-b: #241b4c;
}
.home-menu-card.login-card {
  --accent: #72d9ff;
}
.home-menu-card.account-card {
  --accent: #83e4a2;
  --lip-b: #0f4a34;
  --face-a: #1f6a55;
  --face-b: #123a3a;
}
.home-menu-card.trade-card {
  --accent: #7e8ea3;
  --lip-a: #7e8ea3;
  --lip-b: #26313f;
  --face-a: #31435a;
  --face-b: #1b2839;
  animation: none;
}
.home-menu-card.trade-card:after {
  animation: none;
}
.home-menu-card.journey-card {
  --lip-a: #ffe7a0;
  --lip-b: #9a5f08;
  --face-a: #ffe9a6;
  --face-b: #dba22a;
  --ink: #09213c;
  --glow: #ffffff66;
}
.home-menu-card.journey-card:hover:not(:disabled):after {
  --glow: #ffffff88;
}
.home-menu-card.journey-card .home-menu-copy strong {
  text-shadow: none;
  letter-spacing: 1px;
}
.home-menu-card.journey-card .home-menu-copy small {
  color: #21445c;
}
.home-window .home-menu-card:before,
.home-window:not(.auth-active) .home-menu-card:before {
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: -1px;
  width: auto;
  height: auto;
  background: linear-gradient(var(--lip-a), var(--lip-b));
  box-shadow: none;
}
@keyframes px-drift {
  0% {
    background-position:
      -30% 0,
      0 0;
  }
  100% {
    background-position:
      130% 0,
      0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-menu-card:after {
    animation: none;
  }
}

/* Pikachu anjinho e capetinha ao lado da roleta do upgrader */
.wheel-wrap > .wheel-mascot {
  position: absolute;
  z-index: 2;
  top: 50%;
  height: 36%;
  display: block;
  translate: 0 -50%;
  pointer-events: none;
  user-select: none;
  animation: mascot-float 2.6s ease-in-out infinite;
}
.wheel-mascot img {
  display: block;
  height: 100%;
  width: auto;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 3px 0 #0007);
}
.wheel-mascot.angel {
  right: calc(100% - 4px);
}
.wheel-mascot.devil {
  left: calc(100% - 4px);
  height: 32%;
  animation-delay: -1.3s;
}
.wheel.capture-win ~ .wheel-mascot.angel img {
  animation: angel-win 3.3s ease-in-out both;
}
.wheel.capture-win ~ .wheel-mascot.devil img {
  animation: devil-cower 3.3s ease-in-out both;
}
.wheel.capture-loss ~ .wheel-mascot.devil img {
  animation: devil-lose 2.3s ease-in-out both;
}
.wheel.capture-loss ~ .wheel-mascot.angel img {
  animation: angel-sad 2.3s ease-in-out both;
}
@keyframes mascot-float {
  0%,
  100% {
    translate: 0 -50%;
  }
  50% {
    translate: 0 calc(-50% - 4px);
  }
}
@keyframes angel-win {
  0% {
    transform: none;
  }
  8% {
    transform: scale(1.14, 0.86);
  }
  22% {
    transform: translateY(-28px) scale(0.92, 1.14);
    filter: drop-shadow(0 0 12px #fff6a8) drop-shadow(0 3px 0 #0007);
  }
  34% {
    transform: translateY(-16px) rotate(-6deg) scale(1.06);
  }
  48% {
    transform: translateY(-20px) rotate(6deg) scale(1.08);
    filter: drop-shadow(0 0 16px #fff6a8) drop-shadow(0 3px 0 #0007);
  }
  62% {
    transform: translateY(-16px) rotate(-5deg) scale(1.06);
  }
  76% {
    transform: translateY(-20px) rotate(5deg) scale(1.08);
    filter: drop-shadow(0 0 16px #fff6a8) drop-shadow(0 3px 0 #0007);
  }
  90% {
    transform: translateY(-12px) scale(1.04);
  }
  100% {
    transform: none;
  }
}
@keyframes devil-cower {
  0% {
    transform: none;
  }
  15% {
    transform: scale(0.72) rotate(-10deg) translateY(6px);
    opacity: 0.6;
  }
  85% {
    transform: scale(0.72) rotate(-10deg) translateY(6px);
    opacity: 0.6;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes devil-lose {
  0% {
    transform: none;
  }
  10% {
    transform: scale(1.4) rotate(-8deg);
    filter: drop-shadow(0 0 14px #ff3b3b) drop-shadow(0 3px 0 #0007);
  }
  22% {
    transform: scale(1.35) rotate(9deg);
  }
  34% {
    transform: scale(1.4) rotate(-9deg);
  }
  46% {
    transform: scale(1.35) rotate(9deg);
  }
  58% {
    transform: scale(1.4) rotate(-8deg);
  }
  70% {
    transform: scale(1.35) rotate(8deg);
  }
  86% {
    transform: scale(1.3) rotate(0);
    filter: drop-shadow(0 0 12px #ff3b3b) drop-shadow(0 3px 0 #0007);
  }
  100% {
    transform: none;
  }
}
@keyframes angel-sad {
  0% {
    transform: none;
  }
  14% {
    transform: translateY(8px) rotate(-8deg) scale(0.9);
    filter: brightness(0.7) drop-shadow(0 3px 0 #0007);
  }
  86% {
    transform: translateY(8px) rotate(-8deg) scale(0.9);
    filter: brightness(0.7) drop-shadow(0 3px 0 #0007);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-wrap > .wheel-mascot,
  .wheel-mascot img {
    animation: none !important;
  }
}

/* itens como sprite (nome fica na dica ao passar o mouse) */
.item-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.item-tag .item-sprite {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  object-fit: contain;
}
.item-tag.big .item-sprite {
  width: 34px;
  height: 34px;
}
.item-tag.prompt-item .item-sprite {
  width: 24px;
  height: 24px;
  margin: -6px 3px;
}
.card-copy small .item-tag .item-sprite {
  width: 14px;
  height: 14px;
  margin: -3px 0 -3px 2px;
}
.card-scan small .item-tag .item-sprite {
  width: 14px;
  height: 14px;
}
.biome-unlock-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.biome-unlock-items .unlock-item {
  padding: 5px;
  background: #0c2946;
  border: 1px solid #406686;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.biome-unlock-items .unlock-item .item-sprite {
  width: 30px;
  height: 30px;
}
.held-swap {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.held-swap b {
  color: var(--pl-gold);
  font-size: var(--text-lg);
}
.held-swap .held-none {
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: #7f9bb8;
  padding: 5px 6px;
  border: 1px dashed #406686;
}
.held-swap .item-tag {
  padding: 3px;
  background: #0c2946;
  border: 1px solid #406686;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.held-item-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.partner-traits strong.held-item-slot {
  display: flex;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.held-item-slot .item-tag {
  padding: 4px;
  background: #0c2946;
  border: 1px solid #406686;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.held-item-slot .item-tag .item-sprite {
  width: 34px;
  height: 34px;
}
.btn .item-sprite {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -4px 5px -4px 0;
  vertical-align: middle;
  image-rendering: pixelated;
}
.passive-item .item-sprite,
.bag-slot .item-sprite {
  width: 30px;
  height: 30px;
}
.battle-card-list {
  overflow-x: hidden;
}
.card-table .card-prompt {
  margin: 10px 0 2px;
}
.card-table .card-actions {
  padding: 6px 0 2px;
}

/* dica ao passar o mouse nos itens: nome + explicação */
.item-tip {
  position: fixed;
  z-index: 70;
  display: none;
  max-width: min(270px, calc(100vw - 16px));
  padding: 8px 11px 9px;
  color: #dfe9f7;
  font-size: var(--text-sm);
  line-height: 1.4;
  background: #08152b;
  border: 2px solid #d3b565;
  box-shadow:
    0 0 0 2px var(--pl-navy-900),
    0 12px 28px #000c;
  pointer-events: none;
}
.item-tip.show {
  display: block;
  animation: tip-in 0.12s ease-out;
}
.item-tip header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.item-tip header .item-sprite {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.item-tip header strong {
  font-size: var(--text-md);
  letter-spacing: 0.5px;
  color: var(--pl-gold);
}
.item-tip p {
  margin: 0;
  color: #b9d0e8;
}
[data-item-tip] {
  cursor: help;
}
[data-item-tip]:focus-visible {
  outline: 2px solid var(--pl-gold);
  outline-offset: 2px;
}

/* ---- loja: saldo compacto na linha das abas, preço no canto do card ---- */
.shop-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.shop-balance {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #ffda76;
}
.shop-item {
  position: relative;
}
.shop-price {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-md);
  font-weight: 900;
  color: #ffda76;
  padding: 2px 6px;
  background: #0c2946;
  border: 1px solid #406686;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.shop-preview-note {
  margin: 0 0 10px;
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #a9d8ff;
  background: #0c2946;
  border: 1px dashed #406686;
}
button.track-stop {
  padding: 0;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}
.track-stop.shop-stop:hover .track-stop-tile,
.track-stop.shop-stop:focus-visible .track-stop-tile {
  filter: brightness(1.25) drop-shadow(0 0 6px var(--pl-gold-bright));
}
.item-tip .tip-only {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--pl-gold);
}

/* ---- Folha de Prata / Shiny Gem ---- */
.gift-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  background: #0c2946;
  border: 1px solid var(--pl-gold);
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.gift-note > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-gold);
}
.gift-note strong {
  display: block;
  font-size: var(--text-lg);
  color: #fff;
}
.gift-note small {
  display: block;
  font-size: var(--text-sm);
  color: #a9c8e5;
  line-height: 1.35;
}
.gift-note .item-tag .item-sprite {
  width: 34px;
  height: 34px;
}
.gem-choice {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.gem-choice-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 130px;
}
.gem-choice-art i {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #fff8c0cc, #7fe6ff55 45%, transparent 70%);
  animation: cw-pulse 0.8s ease-in-out infinite alternate;
}
.gem-choice-art .pixel {
  position: relative;
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px #8fefff);
}
.gem-choice h3 {
  margin: 0;
  color: var(--pl-gold);
  letter-spacing: 2px;
}
.gem-choice p {
  margin: 0;
  font-size: var(--text-lg);
  color: #c7dcf2;
}
.gem-choice-actions {
  display: grid;
  gap: 8px;
  width: 100%;
}
.gem-choice small {
  font-size: var(--text-sm);
  color: var(--pl-slate);
}

/* ---- telas de evento (loja, Pokémon Center, captura) ---- */
.evc-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 0;
  align-items: stretch;
  margin-top: 20px;
  min-height: 340px;
  overflow: hidden;
  background: #061d38ef;
  border: 2px solid #bf9b48;
  box-shadow: inset 0 0 0 3px #153b60;
}
.evc-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, var(--ev-a, #1f5a92), var(--ev-b, #0a2447) 72%);
  border-right: 2px solid #bf9b48;
}
.evc-card.shop {
  --ev-a: #7a5a14;
  --ev-b: #241a06;
}
.evc-card.center {
  --ev-a: #8a2a52;
  --ev-b: #2a0c1e;
}
.evc-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 70%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff55, transparent 70%);
  animation: cw-pulse 1.8s ease-in-out infinite alternate;
}
.evc-art-img {
  position: relative;
  z-index: 1;
  width: min(210px, 78%);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 #0007);
  animation: event-bob 3.2s ease-in-out infinite;
}
.evc-spark {
  position: absolute;
  z-index: 2;
  color: #fff6a8;
  font-size: 16px;
  text-shadow: 0 0 8px var(--pl-gold-bright);
  animation: lucky-twinkle 1.9s ease-in-out infinite;
}
.evc-spark.s1 {
  left: 16%;
  top: 18%;
}
.evc-spark.s2 {
  right: 18%;
  top: 28%;
  animation-delay: 0.6s;
}
.evc-spark.s3 {
  left: 24%;
  bottom: 16%;
  animation-delay: 1.1s;
}
.evc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 26px 28px;
  text-align: left;
}
.evc-body .eyebrow {
  color: var(--pl-gold);
}
.evc-body h2 {
  margin: 0;
  font-size: 26px;
  color: #fff;
}
.evc-body > p {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.5;
  color: #c7dcf2;
}
.evc-perks {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  background: #0a2447;
  border: 1px solid var(--pl-steel);
}
.evc-perks-title {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.evc-perk-row,
.evc-team {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.evc-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #0c2946;
  border: 1px solid #406686;
}
.evc-perk b {
  font-size: var(--text-md);
  color: #ffda76;
}
.evc-mon {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 54px;
}
.evc-mon .pixel {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.evc-mon .hp {
  display: block;
  width: 100%;
  height: 5px;
  background: #06182c;
  border: 1px solid #406686;
}
.evc-mon .hp span {
  display: block;
  height: 100%;
  background: #12cf8d;
}
.evc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
@keyframes event-bob {
  50% {
    transform: translateY(-8px);
  }
}
@media (max-width: 640px) {
  .evc-card {
    grid-template-columns: 1fr;
  }
  .evc-art {
    min-height: 160px;
    border-right: 0;
    border-bottom: 2px solid #bf9b48;
  }
  .evc-body {
    padding: 18px;
  }
  .evc-body h2 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evc-art-img,
  .evc-glow,
  .evc-spark {
    animation: none;
  }
}

/* ================= abas, chips e controles no estilo pixel ================= */
.dock-tabs button,
.dock-manage,
.speed-chip,
.bag-tabs button,
.sacrifice-tabs button,
.mp-btn,
.music-toggle,
.dex-chip {
  --line: #03102a;
  --lip-a: #4b7399;
  --lip-b: #0b2138;
  --face-a: #1d456e;
  --face-b: #0f2c4b;
  --ink: #d6e7f8;
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  outline: 0;
  background: var(--line) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  text-shadow: 0 1px 0 #0009 !important;
  clip-path: var(--px-o);
  transition:
    transform 0.12s,
    filter 0.15s;
}
.dock-tabs button:before,
.dock-manage:before,
.speed-chip:before,
.bag-tabs button:before,
.sacrifice-tabs button:before,
.mp-btn:before,
.music-toggle:before,
.dex-chip:before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: -1px;
  background: linear-gradient(var(--lip-a), var(--lip-b));
  clip-path: var(--px-in);
  pointer-events: none;
}
.dock-tabs button:after,
.dock-manage:after,
.speed-chip:after,
.bag-tabs button:after,
.sacrifice-tabs button:after,
.mp-btn:after,
.music-toggle:after,
.dex-chip:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  background: linear-gradient(var(--face-a), var(--face-b));
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e;
  clip-path: var(--px-in);
  pointer-events: none;
}
.dock-tabs button:hover:not(:disabled),
.dock-manage:hover:not(:disabled),
.speed-chip:hover:not(:disabled),
.bag-tabs button:hover:not(:disabled),
.sacrifice-tabs button:hover:not(:disabled),
.mp-btn:hover:not(:disabled),
.music-toggle:hover:not(:disabled),
.dex-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.dock-tabs button:active:not(:disabled),
.dock-manage:active:not(:disabled),
.speed-chip:active:not(:disabled),
.bag-tabs button:active:not(:disabled),
.sacrifice-tabs button:active:not(:disabled),
.mp-btn:active:not(:disabled),
.music-toggle:active:not(:disabled),
.dex-chip:active:not(:disabled) {
  transform: translateY(2px);
  filter: none;
}
.dock-tabs button:focus-visible:after,
.dock-manage:focus-visible:after,
.speed-chip:focus-visible:after,
.bag-tabs button:focus-visible:after,
.sacrifice-tabs button:focus-visible:after,
.auth-tabs button:focus-visible:after,
.mp-btn:focus-visible:after,
.music-toggle:focus-visible:after,
.dex-chip:focus-visible:after {
  box-shadow: inset 0 0 0 2px #fff;
}
.dock-tabs button[aria-selected='true'],
.bag-tabs button.active,
.bag-tabs button[aria-selected='true'],
.sacrifice-tabs button.active,
.sacrifice-tabs button[aria-selected='true'],
.speed-chip.active,
.speed-chip[aria-pressed='true'],
.dex-chip.active {
  --lip-a: #ffe7a0;
  --lip-b: #9a5f08;
  --face-a: #ffe9a6;
  --face-b: #dba22a;
  --ink: #102239;
  text-shadow: none !important;
}
.music-toggle.music-on,
.sfx-toggle.music-on {
  --ink: #ffda76;
}
.dock-tabs button,
.bag-tabs button {
  padding-top: 6px;
  padding-bottom: 6px;
}
.speed-chip {
  min-height: 24px;
}
.mp-btn,
.music-toggle {
  min-height: 28px;
}

/* ================= escolha do inicial ================= */
.menu-page:has(.pk-grid) .main {
  width: min(1000px, calc(100% - 24px)) !important;
  max-width: 1000px !important;
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(145deg, #123354f5, #071b34f5);
  border: 2px solid var(--ui-border);
  box-shadow: var(--ui-frame);
}
.site-theme.menu-page:has(.pk-grid) .menu-top {
  width: min(1000px, calc(100% - 24px)) !important;
  max-width: 1000px !important;
}
.pk-intro {
  text-align: center;
}
.pk-intro .eyebrow {
  color: var(--pl-gold);
}
.pk-intro h1 {
  color: #fff;
}
.pk-intro p {
  margin: 0;
  color: #a9c8e5;
}
.gift-banner {
  justify-content: center;
}
.pk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pk-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--pk-edge);
  background: linear-gradient(180deg, var(--pk-a), var(--pk-b));
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-900),
    0 12px 26px #0009;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.pk-card:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-900),
    0 18px 32px #000a,
    0 0 22px var(--pk-glow);
}
.pk-grass {
  --pk-a: #1e6a3a;
  --pk-b: #0a2418;
  --pk-edge: #6fd07a;
  --pk-glow: #8df35880;
}
.pk-fire {
  --pk-a: #8a3414;
  --pk-b: #2a0d06;
  --pk-edge: #ff9a4a;
  --pk-glow: #ffb54a80;
}
.pk-water {
  --pk-a: #1c58a0;
  --pk-b: #081b3c;
  --pk-edge: #6fb8ff;
  --pk-glow: #7fe6ff80;
}
.pk-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pk-scene i {
  position: absolute;
  width: 6px;
  height: 6px;
  opacity: 0;
  animation: pk-rise calc(3.4s + var(--i) * 0.35s) linear infinite;
  animation-delay: calc(var(--i) * -0.7s);
}
.pk-grass .pk-scene i {
  width: 9px;
  height: 9px;
  border-radius: 0 100% 0 100%;
  background: #8df358;
  --sway: 14px;
}
.pk-fire .pk-scene i {
  background: #ffb54a;
  box-shadow: 0 0 8px #ff7a00;
  --sway: 6px;
}
.pk-water .pk-scene i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #bfe9ff;
  background: #ffffff22;
  --sway: 10px;
}
.pk-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffffb0;
}
.pk-top b {
  padding: 1px 6px;
  color: #102239;
  background: var(--pk-edge);
}
.pk-portrait {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
}
.pk-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pk-glow), transparent 70%);
  animation: cw-pulse 2s ease-in-out infinite alternate;
}
.pk-anim {
  position: relative;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #0008);
}
.pk-shadow {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  border-radius: 50%;
  background: #0007;
}
.pk-card:hover .pk-anim {
  animation-duration: 0.8s;
}
.pk-info {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-self: stretch;
}
.pk-info h2 {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 0 #000a;
}
.pk-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pk-stats {
  display: grid;
  width: 100%;
  align-self: stretch;
  background: #03102a99;
  border: 1px solid #ffffff22;
}
.pk-stats span {
  display: grid;
  align-items: center;
}
.pk-stats small {
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffffb8;
}
.pk-stats i {
  display: block;
  background: var(--pl-navy-900);
  border: 1px solid #ffffff30;
}
.pk-stats b {
  display: block;
  height: 100%;
  background: var(--pk-edge);
}
.pk-card > .btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
}
@keyframes pk-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  12% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--sway, 8px), -330px);
  }
}
@keyframes pk-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (max-width: 760px) {
  .pk-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pk-scene i,
  .pk-halo,
  .pk-anim {
    animation: none;
  }
}

/* ================= login e cadastro ================= */
.auth-card {
  width: 100%;
  max-width: 430px;
  margin: 12px auto 6px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, #0f2f52, #071a36);
  border: 2px solid #bf9b48;
  box-shadow:
    inset 0 0 0 3px #153b60,
    0 12px 28px #0008;
}
.auth-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 12px;
}
.auth-hero .eyebrow {
  display: block;
  text-align: left;
  color: var(--pl-gold);
}
.auth-hero h2 {
  margin: 2px 0 3px;
  text-align: left;
  font-size: 19px;
  color: #fff;
}
.auth-lead {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.4;
  color: #a9c8e5;
}
.auth-card .field {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--pl-sky);
}
.auth-card .field input {
  width: 100%;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: #04132a;
  border: 2px solid var(--pl-steel);
  border-radius: 0;
  box-shadow: inset 0 2px 0 #00000066;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.auth-card .field input::placeholder {
  color: #5f7f9f;
}
.auth-card .field input:focus {
  outline: 0;
  border-color: var(--pl-gold);
  box-shadow:
    inset 0 2px 0 #00000066,
    0 0 0 2px #f6d77855;
}
.pass-wrap {
  position: relative;
  display: block;
}
.pass-wrap input {
  padding-right: 74px !important;
}
.pass-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  padding: 5px 8px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
  background: #0c2946;
  border: 1px solid #406686;
  cursor: pointer;
}
.pass-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 2px;
}
.pass-meter i {
  height: 5px;
  background: #0c2946;
  border: 1px solid var(--pl-steel);
}
.pass-meter[data-level='1'] i:nth-child(-n + 1) {
  background: #e74747;
}
.pass-meter[data-level='2'] i:nth-child(-n + 2) {
  background: #ff9d2d;
}
.pass-meter[data-level='3'] i:nth-child(-n + 3) {
  background: #ffe22d;
}
.pass-meter[data-level='4'] i {
  background: #8df358;
}
.auth-alt {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  text-align: center;
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 3px;
  color: #a9c8e5;
}
.auth-or:before,
.auth-or:after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--pl-steel);
}

/* ================= Pokédex e Shiny Dex ================= */
.dex-page {
  display: grid;
  gap: 14px;
}
.dex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 16px;
  margin-bottom: 4px;
  background: linear-gradient(110deg, #123855, #071a32);
  border: 1px solid var(--pl-steel);
  border-bottom: 3px solid var(--pl-gold);
}
.is-shiny .dex-head {
  border-bottom-color: #ff9be8;
}
.dex-head > div:first-child {
  flex: 1 1 220px;
}
.dex-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
  color: #fff;
}
.dex-head .eyebrow {
  color: var(--pl-gold);
}
.dex-progress {
  flex: 1 1 100%;
  min-width: 200px;
  display: grid;
  gap: 5px;
  font-size: var(--text-md);
  font-weight: 800;
  color: #c7dcf2;
}
.dex-bar {
  height: 12px;
  background: #04132a;
  border: 2px solid var(--pl-steel);
}
.dex-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2d9b6a, #8df358);
  transition: width 0.4s;
}
.is-shiny .dex-bar i {
  background: linear-gradient(90deg, var(--pl-cyan), #ff9be8, #ffe647);
}
.dex-gems {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #0c2946;
  border: 1px solid var(--pl-cyan);
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.dex-gems .item-sprite {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.dex-gems b {
  font-size: 18px;
  color: #8fefff;
}
.dex-gems small {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #a9c8e5;
}
.dex-tools input,
.dex-tools select {
  padding: 8px 10px;
  font-size: var(--text-lg);
  color: #fff;
  background: #04132a;
  border: 2px solid var(--pl-steel);
  border-radius: 0;
}
.dex-tools input {
  flex: 1;
  min-width: 180px;
}
.dex-chips {
  display: flex;
  gap: 6px;
}
.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.dex-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 4px 8px;
  color: #dfe9f7;
  background: linear-gradient(#123456, #0a2038);
  border: 1px solid var(--pl-steel);
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s;
}
.dex-card:hover {
  transform: translateY(-2px);
  border-color: var(--pl-gold);
}
.dex-card .pixel {
  object-fit: contain;
}
.dex-card.unknown .pixel {
  filter: brightness(0) opacity(0.45);
}
.dex-card.unknown {
  color: #7f9bb8;
}
.dex-card.shiny.own {
  border-color: var(--pl-cyan);
  background: linear-gradient(#153a63, #0a2038);
}
.dex-no {
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--pl-slate);
}
.dex-card strong {
  font-size: var(--text-md);
}
.dex-stack {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 5px;
  font-size: var(--text-sm);
  font-weight: 900;
  color: #102239;
  background: #8fefff;
}
.dex-star {
  position: absolute;
  top: 3px;
  right: 6px;
  font-style: normal;
  color: #8fefff;
  text-shadow: 0 0 6px var(--pl-cyan);
}
.dex-empty {
  grid-column: 1/-1;
  padding: 24px;
  text-align: center;
  color: var(--pl-slate);
}
.dex-detail {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
}
.dex-detail-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 150px;
  background: radial-gradient(circle, #2d6299, #0a2447);
  border: 2px solid var(--pl-steel);
}
.dex-detail-art .pixel {
  position: relative;
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.dex-detail.unknown .pixel {
  filter: brightness(0) opacity(0.5);
}
.dex-detail-info h2 {
  margin: 2px 0 6px;
  color: #fff;
}
.dex-detail-types {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.dex-stats {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}
.dex-stats span {
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  align-items: center;
  gap: 6px;
}
.dex-stats small {
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--pl-slate);
}
.dex-stats i {
  display: block;
  height: 7px;
  background: #04132a;
  border: 1px solid var(--pl-steel);
}
.dex-stats b {
  display: block;
  height: 100%;
  background: #8df358;
}
.dex-stats em {
  font-style: normal;
  font-size: var(--text-md);
  font-weight: 800;
  color: #fff;
  text-align: right;
}
.dex-found {
  margin: 4px 0 0;
  font-size: var(--text-md);
  color: #a9c8e5;
}
@media (max-width: 560px) {
  .dex-detail {
    grid-template-columns: 1fr;
  }
  .dex-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  }
}

/* ================= menu de simulação ================= */
.sim-page {
  display: grid;
}
.sim-page h2 {
  margin: 2px 0 4px;
  color: #fff;
}
.sim-page header p {
  margin: 0;
  font-size: var(--text-lg);
  color: #a9c8e5;
}
.sim-page .eyebrow {
  color: var(--pl-gold);
}
.sim-group h3 {
  margin: 0 0 8px;
  font-size: var(--text-md);
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.sim-list {
  flex-wrap: wrap;
}
.home-menu-card.sim-card {
  --accent: #c084fc;
  --lip-b: #3b1a66;
  --face-a: #4a2f80;
  --face-b: #231246;
}
.menu-page:has(.pk-grid) .main {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}
.dex-chip {
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.dex-card .pixel {
  width: 72px !important;
  height: 72px !important;
  max-width: none;
}
.menu-page:has(.dex-page) .main,
.menu-page:has(.sim-page) .main {
  width: min(940px, calc(100% - 24px)) !important;
  max-width: 940px !important;
  margin: 0 auto;
}
.site-theme.menu-page:has(.dex-page) .menu-top,
.site-theme.menu-page:has(.sim-page) .menu-top {
  width: min(940px, calc(100% - 24px)) !important;
  max-width: 940px !important;
}
.run-main > .evc-card {
  margin: auto 0;
}

/* ================= v72: captura sem planta, drop do elite, upgrader, inicial, fim de expedição ================= */

/* --- captura disponível: só os Pokémon encontrados --- */
.evc-card.capture .evc-art {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px 4px;
  padding: 18px 10px;
}
.evc-foe {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
  flex: 0 1 46%;
  animation: event-bob 3.2s ease-in-out calc(var(--i) * -0.7s) infinite;
}
.evc-foes.n1 .evc-foe {
  flex-basis: 100%;
}
.evc-foe .evc-foe-img {
  width: 112px !important;
  height: 112px !important;
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 0 #0008);
}
.evc-foes.n1 .evc-foe-img {
  width: 170px !important;
  height: 170px !important;
}
.evc-foes.n3 .evc-foe-img {
  width: 92px !important;
  height: 92px !important;
}
.evc-foe figcaption {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 2px 9px;
  background: #04122ccc;
  border: 1px solid #ffffff2b;
}
.evc-foe figcaption strong {
  font-size: var(--text-md);
  color: #fff;
}
.evc-foe figcaption small {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: #a9d8ff;
}

/* --- drop do elite dentro do upgrader --- */
.elite-drop {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(470px, 54%);
  margin: 0 14px 0 auto;
  padding: 3px 10px 3px 9px;
  background: linear-gradient(90deg, #3d2703, #7a4d08 50%, #3d2703);
  border: 2px solid #ffcf4d;
  box-shadow:
    inset 0 0 0 2px #2b1a02,
    0 0 16px #ffb52a66;
  animation:
    ed-in 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    ed-glow 2.2s ease-in-out 0.6s infinite;
}
.elite-drop .ed-star {
  color: #ffe27a;
  font-size: 18px;
  text-shadow: 0 0 8px #ffb52a;
  animation: lucky-twinkle 1.6s ease-in-out infinite;
}
.elite-drop .ed-item {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 #0009);
}
.elite-drop > div {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.elite-drop small {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffe9a3;
}
.elite-drop strong {
  font-size: var(--text-xl);
  color: #fff;
  text-shadow: 0 1px 0 #000a;
}
.elite-drop em {
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  color: #4a2300;
  background: linear-gradient(#fff3b0, #ffc61a);
}
@keyframes ed-in {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ed-glow {
  50% {
    box-shadow:
      inset 0 0 0 2px #2b1a02,
      0 0 26px #ffcf4dcc;
  }
}

/* --- roleta do upgrader: textura, brilho e órbita --- */
.capture-modal .wheel-wrap {
  --wheel-glow: #8df358;
}
.capture-modal .wheel-wrap:before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    transparent 60%,
    color-mix(in srgb, var(--wheel-glow) 55%, transparent) 68%,
    transparent 76%
  );
  animation: wheel-halo 2.6s ease-in-out infinite;
}
.wheel-orbit {
  position: absolute;
  inset: -13px;
  z-index: 1;
  pointer-events: none;
  animation: wheel-orbit 14s linear infinite;
}
.wheel-orbit i {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
}
.wheel-orbit i:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background: #fff6a8;
  box-shadow:
    0 0 8px var(--pl-gold-bright),
    0 0 14px #ffd23f88;
  animation: lucky-twinkle 1.8s ease-in-out infinite;
}
.wheel-orbit i:nth-child(2n):before {
  width: 4px;
  height: 4px;
  margin-left: -2px;
  background: #bff3ff;
  box-shadow: 0 0 8px var(--pl-cyan);
  animation-delay: 0.6s;
}
.wheel-wrap.spinning .wheel-orbit {
  animation-duration: 2.4s;
}
@keyframes wheel-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wheel-halo {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
.lucky-reveal.in-modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: radial-gradient(circle, #03102acc, #020a1eee);
}
.site-theme .modal.capture-modal {
  position: relative;
}

/* --- botão do santuário --- */
.raid-go-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: 6px;
}
.raid-go-wrap:before,
.raid-go-wrap:after {
  content: '✦';
  position: absolute;
  top: 50%;
  z-index: 3;
  color: #fff6a8;
  font-size: 16px;
  text-shadow: 0 0 8px var(--pl-gold-bright);
  pointer-events: none;
  animation: lucky-twinkle 1.7s ease-in-out infinite;
}
.raid-go-wrap:before {
  left: -20px;
  translate: 0 -50%;
}
.raid-go-wrap:after {
  right: -20px;
  translate: 0 -50%;
  animation-delay: 0.8s;
}
.btn.raid-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: min(400px, 100%);
  min-height: 52px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 900;
  animation: none;
}
.btn.raid-go .rg-label {
  position: relative;
}
.btn.raid-go .rg-chev {
  display: inline-flex;
  gap: 2px;
}
.btn.raid-go .rg-chev i {
  display: block;
  width: 8px;
  height: 14px;
  background: #7a2f00;
  clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
  animation: rg-chev 1.1s ease-in-out infinite;
}
.btn.raid-go .rg-chev i:nth-child(2) {
  animation-delay: 0.15s;
}
.btn.raid-go .rg-chev i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes rg-chev {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(-2px);
  }
  50% {
    opacity: 1;
    transform: translateX(3px);
  }
}
@keyframes raid-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px #ffb52a88);
  }
  50% {
    filter: drop-shadow(0 0 22px #ffd23fdd);
  }
}

/* --- escolha do inicial: partículas e botões temáticos --- */
.pk-scene i {
  left: calc(var(--i) * 6.6% + 2%);
  bottom: -16px;
  animation-duration: calc(3.2s + var(--z) * 0.55s);
}
.pk-scene i:nth-child(3n) {
  width: 4px;
  height: 4px;
}
.pk-grass .pk-scene i:nth-child(3n) {
  width: 12px;
  height: 12px;
}
.pk-fire .pk-scene i:nth-child(2n) {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 6px #ffcf4d;
}
.pk-water .pk-scene i:nth-child(3n) {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.pk-scene b {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  background: var(--pk-edge);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: pk-glint 2.6s ease-in-out var(--dl) infinite;
}
.pk-scene:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(transparent, var(--pk-glow));
  opacity: 0.55;
  animation: pk-breathe 3.4s ease-in-out infinite alternate;
}
.pk-scene:after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent, #ffffff26, transparent);
  transform: skewX(-14deg);
  animation: pk-beam 6s ease-in-out infinite;
}
.pk-fire .pk-scene:before {
  background: linear-gradient(transparent, #ff7a1a99);
  animation-duration: 1.6s;
}
.pk-water .pk-scene:before {
  background:
    repeating-linear-gradient(0deg, #7fe6ff30 0 3px, transparent 3px 9px), linear-gradient(transparent, #3d9bff66);
}
@keyframes pk-glint {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
  }
}
@keyframes pk-breathe {
  to {
    opacity: 0.95;
    transform: translateY(-4px);
  }
}
@keyframes pk-beam {
  0%,
  55% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
.pk-go-wrap {
  position: relative;
  align-self: stretch;
  margin-top: auto;
  z-index: 1;
}
.pk-go-wrap .btn.pk-go {
  width: 100%;
  margin: 0;
}
.pk-grass {
  --g1: #2fae4e;
  --g2: #7be26a;
  --g3: #1a8a3a;
  --rim1: #d8ffa0;
  --rim2: #3fc257;
}
.pk-fire {
  --g1: #e8541a;
  --g2: #ffb13d;
  --g3: #b82a08;
  --rim1: #fff0a0;
  --rim2: #ff7a1a;
}
.pk-water {
  --g1: #2a7fe0;
  --g2: #5ed0ff;
  --g3: #1a4fb0;
  --rim1: #e0fbff;
  --rim2: #4aa8ff;
}
.btn.pk-go {
  --lip-a: var(--rim1);
  --lip-b: var(--g3);
  --ink: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 1.6px;
}
.btn.pk-go .pk-go-spark {
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 12px var(--rim2) !important;
}
.btn.pk-go .pk-go-arrow {
  font-size: 0.85em;
}
.pk-fizz {
  position: absolute;
  z-index: 3;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 0 8px var(--pk-edge);
  opacity: 0;
  pointer-events: none;
}
.pk-card:hover .pk-fizz {
  animation: pk-fizz 1s ease-out infinite;
}
@keyframes pk-fizz {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.5);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(1.2) rotate(40deg);
  }
}
@keyframes pk-go-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px var(--pk-glow));
  }
  50% {
    filter: drop-shadow(0 0 14px var(--pk-glow));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pk-scene b,
  .pk-scene:before,
  .pk-scene:after,
  .pk-go-wrap,
  .raid-go-wrap,
  .raid-go-wrap:before,
  .raid-go-wrap:after,
  .rg-chev i,
  .wheel-orbit,
  .wheel-orbit i:before,
  .capture-modal .wheel-wrap:before,
  .elite-drop,
  .evc-foe {
    animation: none !important;
  }
}

/* --- fim da expedição --- */
.site-theme.menu-page .main:has(.oc) {
  max-width: 760px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100dvh - 76px);
  border: 0;
}
.site-theme .outcome.oc {
  --oc-a: #7fb8ff;
  --oc-b: #8a6bff;
  --oc-bg: #2a3f8c;
  position: relative;
  overflow: hidden;
  text-align: center !important;
  background: radial-gradient(ellipse at 50% 0, var(--oc-bg) 0, #0a2646 46%, #051429 100%) !important;
  border: 2px solid var(--oc-a) !important;
  box-shadow:
    inset 0 0 0 3px #0a2a4a,
    0 0 0 1px var(--pl-navy-900),
    0 0 30px color-mix(in srgb, var(--oc-a) 40%, transparent) !important;
  animation: oc-frame 2.8s ease-in-out infinite;
}
.site-theme .outcome.oc:before {
  height: 5px;
  background: linear-gradient(90deg, var(--oc-b), var(--oc-a), var(--oc-b));
}
.site-theme .outcome.oc.oc-win {
  --oc-a: #ffd23f;
  --oc-b: #ff9d1a;
  --oc-bg: #4a5a12;
}
.site-theme .outcome.oc.oc-escaped {
  --oc-a: #ff8a5c;
  --oc-b: #d13b2a;
  --oc-bg: #6a2a1a;
}
.site-theme .outcome.oc.oc-ended {
  --oc-a: #7fb8ff;
  --oc-b: #8a6bff;
  --oc-bg: #2a3f8c;
}
@keyframes oc-frame {
  50% {
    box-shadow:
      inset 0 0 0 3px #0a2a4a,
      0 0 0 1px var(--pl-navy-900),
      0 0 46px color-mix(in srgb, var(--oc-a) 65%, transparent);
  }
}
.oc-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.oc-tw {
  position: absolute;
  color: #fff6a8;
  font-style: normal;
  font-size: var(--sz);
  text-shadow: 0 0 8px var(--oc-a);
  animation: lucky-twinkle 2.2s ease-in-out var(--dl) infinite;
}
.oc-pt {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: 4px;
  height: 4px;
  background: var(--oc-a);
  box-shadow: 0 0 8px var(--oc-a);
  opacity: 0;
  animation: oc-rise var(--du) linear var(--dl) infinite;
}
@keyframes oc-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  12% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--sw), -620px);
  }
}
.oc-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 24px 14px;
}
.oc-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 150px;
  margin-bottom: 4px;
}
.oc-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--oc-a) 65%, transparent), transparent 68%);
  animation: cw-pulse 1.8s ease-in-out infinite alternate;
}
.oc-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  background: repeating-conic-gradient(color-mix(in srgb, var(--oc-a) 34%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 66%);
  mask: radial-gradient(circle, #000 0, transparent 66%);
  animation: oc-spin 30s linear infinite;
}
.oc-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border: 3px solid var(--oc-a);
  border-radius: 50%;
  opacity: 0;
  animation: oc-ring 2.8s ease-out infinite;
}
.oc-ring.r2 {
  animation-delay: 1.4s;
}
.oc-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 176px;
  height: 176px;
  margin: -88px 0 0 -88px;
  pointer-events: none;
  animation: oc-spin 10s linear infinite;
}
.oc-orbit i {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
}
.oc-orbit i:before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: -4px;
  margin-left: -7px;
  font-size: 14px;
  line-height: 1;
  color: #fff6a8;
  text-shadow: 0 0 8px var(--oc-a);
  animation: lucky-twinkle 1.6s ease-in-out infinite;
}
.oc-orbit i:nth-child(2n):before {
  content: '✦';
  font-size: var(--text-lg);
  animation-delay: 0.5s;
}
.oc-shadow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 96px;
  height: 14px;
  translate: -50% 0;
  border-radius: 50%;
  background: #0008;
}
.site-theme .outcome.oc .oc-mon {
  position: relative;
  z-index: 2;
  width: 128px !important;
  height: 128px !important;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #000a) drop-shadow(0 0 14px color-mix(in srgb, var(--oc-a) 70%, transparent));
  animation: oc-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s both;
}
.oc-win .oc-mon,
.oc-escaped .oc-mon {
  animation:
    oc-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s both,
    oc-hop 2.2s ease-in-out 0.9s infinite;
}
.oc-escaped .oc-mon {
  filter: drop-shadow(0 4px 0 #000a) drop-shadow(0 0 14px #ff5a3a99) saturate(0.85);
}
.oc-ended .pikachu-dance {
  animation:
    oc-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s both,
    pikachu-dance 0.72s steps(2, end) 0.8s infinite;
  transform-origin: 50% 82%;
}
.oc-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 2px;
  color: #0a2039;
  background: linear-gradient(var(--oc-a), var(--oc-b));
  clip-path: var(--px-o);
  animation: oc-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both;
}
.site-theme .outcome.oc .oc-title {
  margin: 4px 0 0 !important;
  font-size: clamp(24px, 4.6vw, 38px) !important;
  line-height: 1.12;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: none;
}
.oc-word {
  display: inline-block;
  white-space: nowrap;
}
.oc-title b {
  display: inline-block;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(#fffbd0, var(--oc-a) 55%, var(--oc-b));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 0 #000b);
  animation: oc-letter 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) calc(0.3s + var(--k) * 0.035s) both;
}
.oc-win .oc-title b {
  animation:
    oc-letter 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) calc(0.3s + var(--k) * 0.035s) both,
    oc-hop 1.6s ease-in-out calc(1.6s + var(--k) * 0.05s) infinite;
}
.site-theme .outcome.oc .oc-msg {
  max-width: 520px;
  margin: 2px auto 0 !important;
  font-size: var(--text-xl);
  line-height: 1.55;
  color: #c9def3 !important;
  animation: oc-pop 0.5s ease-out 0.6s both;
}
.oc-gift {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin-top: 12px;
  padding: 18px 14px 12px;
  background: linear-gradient(#123c62, #0a2543);
  border: 2px solid var(--pl-gold);
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-850),
    0 0 22px #ffd23f55;
  animation:
    oc-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.9s both,
    oc-glow 2.2s ease-in-out 1.6s infinite;
}
.oc-gift-tag {
  position: absolute;
  left: 50%;
  top: -11px;
  translate: -50% 0;
  padding: 3px 12px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
  color: #4a2300;
  background: linear-gradient(#fff3b0, #ffc61a);
}
.oc-gift-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}
.oc-gift .item-tag.big .item-sprite {
  width: 46px;
  height: 46px;
  margin: 0;
  filter: drop-shadow(0 0 8px #d9f2ff);
  animation: oc-float 2.2s ease-in-out infinite;
}
.oc-gift strong {
  display: block;
  font-size: 14px;
  color: #fff;
}
.oc-gift small {
  display: block;
  max-width: 290px;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #a9c8e5;
}
@keyframes oc-glow {
  50% {
    box-shadow:
      inset 0 0 0 2px var(--pl-navy-850),
      0 0 34px #ffd23fbb;
  }
}
.oc-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 10px;
  padding: 8px 22px 14px;
}
.oc-stat {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 3px;
  justify-items: center;
  min-height: 82px;
  padding: 10px 8px;
  background: linear-gradient(#0f3357, #082140);
  border: 2px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
  animation: oc-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(1s + var(--n, 0) * 0.14s) both;
}
.oc-stat > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: #9fc4e8;
}
.oc-stat > strong {
  font-size: 26px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 0 #000a;
}
.oc-stat > small {
  font-size: var(--text-sm);
  color: #9fc4e8;
}
.oc-result {
  border-color: var(--oc-a);
}
.oc-result > strong {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--oc-a);
}
.oc-result:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, #ffffff40, transparent);
  transform: skewX(-16deg);
  animation: pk-beam 3.6s ease-in-out 1.6s infinite;
}
.oc .outcome-naming {
  position: relative;
  z-index: 2;
  margin: 0 22px 12px;
  text-align: left;
}
.oc-next {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 22px 22px;
  border-top: 1px solid #ffffff1f;
  background: linear-gradient(transparent, #03102a80);
}
.site-theme .outcome.oc .oc-next p {
  margin: 0 !important;
  max-width: none;
  font-size: var(--text-md);
  line-height: 1.4;
  color: #a9c8e5 !important;
}
.oc-cta .btn {
  min-width: min(340px, 100%);
  min-height: 46px;
  font-size: var(--text-lg);
  letter-spacing: 1.6px;
}
.oc-cta .btn > span[aria-hidden] {
  display: inline-block;
  animation: lucky-twinkle 1.6s ease-in-out infinite;
}
.oc-cta .btn > span[aria-hidden]:last-child {
  animation-delay: 0.8s;
}
@keyframes oc-letter {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.3) rotate(-14deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes oc-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes oc-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes oc-float {
  50% {
    transform: translateY(-4px) rotate(4deg);
  }
}
@keyframes oc-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes oc-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(2.7);
  }
}
@media (max-width: 560px) {
  .oc-stats {
    grid-template-columns: 1fr 1fr;
    padding: 6px 12px 12px;
  }
  .oc-result {
    grid-column: 1/-1;
  }
  .oc-hero {
    padding: 18px 12px 10px;
  }
  .oc-stage {
    width: 150px;
    height: 126px;
  }
  .site-theme .outcome.oc .oc-mon {
    width: 104px !important;
    height: 104px !important;
  }
  .oc-gift-body {
    flex-direction: column;
    text-align: center;
  }
  .oc-next {
    padding: 12px 12px 18px;
  }
  .oc .outcome-naming {
    margin: 0 12px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .oc,
  .oc * {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .elite-drop {
    max-width: 60%;
    margin: 0 8px 0 auto;
    padding: 2px 6px;
  }
  .elite-drop em,
  .elite-drop .ed-star {
    display: none;
  }
  .elite-drop small {
    font-size: var(--text-3xs);
    letter-spacing: 0.5px;
  }
  .elite-drop strong {
    font-size: var(--text-md);
  }
  .elite-drop .ed-item {
    width: 24px;
    height: 24px;
  }
}

/* ================= v73: botões sem reflexo e efeitos mais lentos; CTA azul cósmico ================= */
.btn.pk-go {
  text-shadow: 0 1px 0 #0006 !important;
}
.btn.raid-go:hover:not(:disabled) .rg-chev i {
  animation-duration: 1.1s;
}
.raid-go-wrap:before,
.raid-go-wrap:after {
  animation-duration: 3.2s;
}
.oc-cta .btn > span[aria-hidden] {
  animation-duration: 3s;
}
@keyframes cta-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px #5b6cffaa);
  }
  50% {
    filter: drop-shadow(0 0 20px #8fa6ffdd);
  }
}

/* ================= v74: cards do inicial sem reflexo; sombra atrás do Pokémon ================= */
.pk-scene:after {
  display: none;
}
.pk-halo {
  z-index: 0;
}
.pk-shadow {
  z-index: 0;
}
.pk-anim {
  z-index: 1;
}

/* ================= v75: filtros da Dex, Desafio, dicas do inicial ================= */

/* --- filtros da Pokédex e da Shiny Dex --- */
.dex-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 12px 14px 14px;
  background: linear-gradient(#0d2c4d, #071c36);
  border: 2px solid #33628f;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-850),
    0 6px 14px #0006;
}
.dex-field {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 0;
}
.dex-field > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.dex-tools .dex-field input,
.dex-tools .dex-field select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-weight: 800;
  font-size: var(--text-lg);
  font-family: inherit;
  color: #fff;
  background-color: #04132a;
  border: 2px solid var(--pl-steel);
  border-radius: 0;
  outline: 0;
  box-shadow:
    inset 0 3px 0 #00000070,
    inset 0 -1px 0 #ffffff14;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.dex-tools .dex-field input {
  padding-left: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M6 1h4v1h2v2h1v4h-1v2h-2v1H6v-1H4V8H3V4h1V2h2z' fill='none' stroke='%23f6d778' stroke-width='1.6'/><path d='M10 10l4 4' stroke='%23f6d778' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: 11px 50%;
}
.dex-tools .dex-field select {
  padding-right: 34px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23f6d778' stroke-width='2'/></svg>"),
    linear-gradient(90deg, #04132a, #0a2444);
  background-repeat: no-repeat;
  background-position:
    right 12px center,
    0 0;
}
.dex-tools .dex-field input::placeholder {
  color: #7f9dbd;
  font-weight: 700;
}
.dex-tools .dex-field input:hover,
.dex-tools .dex-field select:hover {
  border-color: #5f8fc2;
}
.dex-tools .dex-field input:focus,
.dex-tools .dex-field select:focus {
  border-color: var(--pl-gold);
  box-shadow:
    inset 0 3px 0 #00000070,
    0 0 0 2px #f6d77840;
}
.dex-tools select option {
  background: #071c36;
  color: #fff;
}
.dex-tools .dex-chips {
  display: flex;
  flex-wrap: wrap;
}
.dex-tools .dex-chip {
  min-height: 38px;
}
.dex-clear {
  --lip-a: #ff9c8a;
  --lip-b: #6b1d15;
  --face-a: #a8352a;
  --face-b: #651a13;
  --ink: #fff;
  align-self: flex-end;
}
@media (max-width: 760px) {
  .dex-find,
  .dex-show {
    flex: 1 1 100%;
  }
  .dex-tools label.dex-field:not(.dex-find) {
    flex: 1 1 130px;
  }
}

/* --- Desafio e dicas, abaixo dos parceiros --- */
.pk-extra {
  display: grid;
}
.pk-challenge {
  --pk-a: #4b1a7a;
  --pk-b: #150826;
  --pk-edge: #c58bff;
  --pk-glow: #c58bff88;
  --g1: #7c3aed;
  --g2: #c084fc;
  --g3: #4c1d95;
  --rim1: #f0dcff;
  --rim2: #a855f7;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  background: linear-gradient(135deg, var(--pk-a), var(--pk-b));
  border: 2px solid var(--pk-edge);
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-900),
    0 12px 26px #0009;
}
.pk-challenge:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 50%, #c58bff44, transparent 55%),
    repeating-linear-gradient(135deg, #ffffff08 0 8px, transparent 8px 16px);
}
.pkc-art {
  grid-area: art;
  position: relative;
  display: grid;
  place-items: center;
}
.pkc-ball {
  position: relative;
  z-index: 1;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #0008);
  animation: pkc-wobble 3.6s ease-in-out infinite;
}
.pkc-art b {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #2b0a5c;
  background: linear-gradient(#fff3b0, #ffc61a);
  border: 2px solid #4a2300;
  box-shadow: 2px 2px 0 #000a;
}
.pkc-s {
  position: absolute;
  font-style: normal;
  color: #fff;
  text-shadow: 0 0 8px #c58bff;
  animation: lucky-twinkle 3s ease-in-out infinite;
}
.pkc-s.s1 {
  left: 0;
  top: 6px;
}
.pkc-s.s2 {
  right: 0;
  top: 0;
  animation-delay: 1s;
}
.pkc-s.s3 {
  left: 6px;
  bottom: 0;
  animation-delay: 2s;
}
.pkc-copy {
  grid-area: copy;
  position: relative;
  z-index: 1;
  display: grid;
}
.pkc-copy .eyebrow {
  color: #e2c4ff;
}
.pkc-copy h2 {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 0 #000a;
}
.pkc-copy p {
  margin: 0;
  color: #d9c6f2;
}
.pkc-copy strong {
  color: var(--pl-gold-bright);
}
.pk-challenge .pkc-go {
  grid-area: go;
  position: relative;
  z-index: 1;
  align-self: end;
}
@keyframes pkc-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-9deg);
  }
  20% {
    transform: rotate(8deg);
  }
  30% {
    transform: rotate(-5deg);
  }
  40%,
  100% {
    transform: rotate(0);
  }
}
.pk-tips {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#0d2c4d, #071c36);
  border: 2px solid #33628f;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-850),
    0 12px 26px #0009;
}
.pk-tips header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pk-tips .eyebrow {
  color: var(--pl-gold);
}
.pkt-next {
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #9fc4e8;
  background: transparent;
  border: 1px solid #33628f;
  cursor: pointer;
}
.pkt-next:hover {
  color: #fff;
  border-color: var(--pl-gold);
}
.pkt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #04132a;
  border-left: 3px solid var(--pl-gold);
}
.pkt-body p {
  margin: 0;
  color: #dcebfa;
}
.pkt-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pkt-dots i {
  width: 6px;
  height: 6px;
  background: #1d456e;
}
.pkt-dots i.on {
  background: var(--pl-gold);
  box-shadow: 0 0 6px var(--pl-gold);
}
@media (max-width: 520px) {
  .pk-challenge {
    justify-items: center;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pkc-ball,
  .pkc-s {
    animation: none !important;
  }
}
.challenge-tag {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 3px 8px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #2b0a5c;
  background: linear-gradient(#f0dcff, #a855f7);
}

/* --- revelação do Desafio --- */
.cr-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #12295a 0, #060f2a 62%, #02060f 100%);
  animation: cr-in 0.35s ease-out both;
}
.cr-overlay.leaving {
  opacity: 0;
  transition: opacity 0.35s;
}
.cr-overlay.shiny {
  background: radial-gradient(ellipse at 50% 42%, #3a2c66 0, #0d0a2e 62%, #03030f 100%);
}
@keyframes cr-in {
  from {
    opacity: 0;
  }
}
.cr-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
.shiny .cr-flash {
  background: radial-gradient(circle, #fff 0, #ffe27a 45%, #ffb52a 100%);
  animation-duration: 1.3s;
}
@keyframes cr-flash {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
.cr-stage {
  position: relative;
  flex: none;
  width: 340px;
}
.cr-rays {
  position: absolute;
  left: 50%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  opacity: 0;
  background: repeating-conic-gradient(#9fd0ff40 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 62%);
  mask: radial-gradient(circle, #000 0, transparent 62%);
  animation:
    cr-rays-in 1.2s ease-out 1.4s both,
    cr-spin 30s linear infinite;
}
.cr-rays.r2 {
  background: repeating-conic-gradient(#ffffff2a 0 3deg, transparent 3deg 12deg);
  animation:
    cr-rays-in 1.2s ease-out 1.5s both,
    cr-spin 22s linear reverse infinite;
}
.shiny .cr-rays {
  background: repeating-conic-gradient(
    #ffd23f66 0 6deg,
    #ff7ad966 6deg 12deg,
    #7fe6ff66 12deg 18deg,
    transparent 18deg 24deg
  );
  animation:
    cr-rays-in 1.2s ease-out 1.4s both,
    cr-spin 14s linear infinite;
}
.shiny .cr-rays.r2 {
  background: repeating-conic-gradient(#fff8 0 2deg, transparent 2deg 10deg);
  animation:
    cr-rays-in 1.2s ease-out 1.5s both,
    cr-spin 10s linear reverse infinite;
}
@keyframes cr-rays-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes cr-spin {
  to {
    transform: rotate(360deg);
  }
}
.cr-beam {
  position: absolute;
  left: 50%;
  opacity: 0;
  animation: cr-beam 1.6s ease-out 1.3s both;
}
@keyframes cr-beam {
  0% {
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: 50% 100%;
  }
  25% {
    opacity: 0.95;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1.05);
  }
}
.cr-ring {
  position: absolute;
  left: 50%;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  border: 4px solid #bfe4ff;
  border-radius: 50%;
  opacity: 0;
  animation: cr-ring 1.4s ease-out 1.35s both;
}
.cr-ring.r2 {
  border-color: #ffe27a;
  animation-delay: 1.6s;
}
@keyframes cr-ring {
  0% {
    opacity: 0.95;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(3.4);
  }
}
.cr-ball {
  position: absolute;
  left: 50%;
  width: 96px;
  height: 96px;
  margin-left: -48px;
}
.cr-half {
  position: absolute;
  inset: 0;
}
.cr-half img {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #0008);
}
.cr-half.top {
  clip-path: inset(0 0 50% 0);
  animation: cr-top 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 1.3s both;
}
.cr-half.bot {
  clip-path: inset(50% 0 0 0);
  animation: cr-bot 0.55s ease-out 1.3s both;
}
@keyframes cr-drop {
  0% {
    transform: translateY(-320px);
    opacity: 0;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
  82% {
    transform: translateY(-22px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes cr-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-14deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(5deg);
  }
}
@keyframes cr-fade {
  to {
    opacity: 0;
  }
}
@keyframes cr-top {
  to {
    transform: translate(-16px, -40px) rotate(-38deg);
  }
}
@keyframes cr-bot {
  to {
    transform: translateY(12px);
  }
}
.cr-mon {
  position: absolute;
  left: 50%;
  opacity: 0;
}
.cr-mon .cr-sprite {
  display: block;
  width: 164px !important;
  height: 164px !important;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
  animation: cr-reveal 1.1s ease-out 1.4s both;
}
.shiny .cr-mon .cr-sprite {
  animation:
    cr-reveal 1.1s ease-out 1.4s both,
    cr-shine 1.8s ease-in-out 2.6s infinite;
}
@keyframes cr-reveal {
  0% {
    filter: brightness(6) saturate(0) drop-shadow(0 0 14px #fff);
  }
  100% {
    filter: brightness(1) saturate(1) drop-shadow(0 4px 0 #0008);
  }
}
@keyframes cr-shine {
  0%,
  100% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 6px var(--pl-gold-bright));
  }
  50% {
    filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 20px #ffe27a);
  }
}
.cr-p {
  position: absolute;
  left: 50%;
  margin: 0 0 0 calc(var(--s) / -2);
  background: #fff;
  box-shadow: 0 0 8px #bfe4ff;
}
.shiny .cr-p {
  background: #fff6a8;
  box-shadow: 0 0 10px var(--pl-gold-bright);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.shiny .cr-p:nth-of-type(3n) {
  background: #ff9be8;
  box-shadow: 0 0 10px #ff7ad9;
}
.shiny .cr-p:nth-of-type(3n + 1) {
  background: var(--pl-cyan);
  box-shadow: 0 0 10px #4ad0ff;
}
@keyframes cr-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(0.2);
  }
}
.cr-plate {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 30px 12px;
  background: #06183aeb;
  border: 2px solid #7fb8ff;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-900),
    0 0 24px #4a90ff55;
  opacity: 0;
  animation: cr-plate 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 2.3s both;
}
.shiny .cr-plate {
  border-color: var(--pl-gold-bright);
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-900),
    0 0 30px #ffd23f88;
}
@keyframes cr-plate {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cr-eyebrow {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 3px;
  color: #9fd0ff;
}
.shiny .cr-eyebrow {
  font-size: var(--text-xl);
  color: #ffe100;
  text-shadow: 0 0 10px var(--pl-gold-bright);
}
.cr-plate h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 3px 0 #000a;
}
.shiny .cr-plate h2 {
  color: #fff6a8;
  text-shadow:
    0 3px 0 var(--pl-brown),
    0 0 16px var(--pl-gold-bright);
}
.cr-types {
  display: flex;
  gap: 6px;
}
.cr-plate small {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #c9def3;
}
.cr-hint {
  position: relative;
  z-index: 4;
  margin-top: 6px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: #7f9dbd;
  opacity: 0;
  animation: cr-hint 3s ease-in-out 3.2s infinite;
}
@keyframes cr-hint {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.shiny.cr-overlay {
  animation:
    cr-in 0.35s ease-out both,
    cr-shake 0.5s linear 1.35s 2;
}
@keyframes cr-shake {
  25% {
    transform: translate(4px, -3px);
  }
  75% {
    transform: translate(-4px, 3px);
  }
}
@media (max-width: 520px) {
  .cr-stage {
    transform: scale(0.8);
    margin: -24px 0;
  }
  .cr-plate h2 {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-overlay *,
  .cr-overlay {
    animation: none !important;
  }
  .cr-ball,
  .cr-flash,
  .cr-beam,
  .cr-ring,
  .cr-rays,
  .cr-p {
    display: none;
  }
  .cr-mon,
  .cr-plate,
  .cr-hint {
    opacity: 1;
  }
  .cr-mon {
    transform: none;
  }
}
.pkc-copy .eyebrow {
  display: none;
}
.menu-page:has(.pk-grid) .main {
  gap: 10px;
}
.cr-overlay {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #edf4ff;
}
.dex-find {
  flex: 1 1 150px;
  min-width: 150px;
}
.dex-tools .dex-field select {
  min-width: 124px;
}
.dex-tools {
  gap: 10px 12px;
}
.dex-tools .dex-chips {
  gap: 4px;
}
.dex-tools .dex-chip {
  padding: 8px 9px;
}

/* ================= v80: roleta vívida, botões sem efeitos, evolução, batalha, avisos ================= */

/* --- roleta do upgrader (e do Teste sua sorte): cores vívidas e o mesmo acabamento --- */
.capture-modal .wheel,
.lucky-modal .wheel {
  filter: saturate(1.5) brightness(1.08);
  box-shadow:
    0 0 0 3px #4f5667,
    0 0 0 8px #090b12,
    0 18px 36px #0009,
    inset 0 0 0 2px #ffffff55,
    inset 0 0 12px #0008;
}
.capture-modal .wheel:before,
.lucky-modal .wheel:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: overlay;
  background:
    radial-gradient(circle at 28% 20%, #ffffffb0, transparent 36%),
    repeating-conic-gradient(from 0deg, #ffffff50 0 0.8deg, transparent 0.8deg 7.5deg),
    repeating-linear-gradient(118deg, #ffffff18 0 2px, transparent 2px 6px);
}
.lucky-modal .wheel-wrap {
  --wheel-glow: #ff5a5a;
}
.lucky-modal .wheel-wrap:before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    transparent 60%,
    color-mix(in srgb, var(--wheel-glow) 55%, transparent) 68%,
    transparent 76%
  );
  animation: wheel-halo 2.6s ease-in-out infinite;
}

/* --- escolha do inicial: botões parados --- */
.pk-anim {
  animation: none !important;
}
.pk-go-wrap {
  animation: none !important;
  filter: none !important;
}
.pk-fizz {
  display: none !important;
}
.btn.pk-go:before {
  background: linear-gradient(var(--rim1), var(--rim2)) !important;
  animation: none !important;
}
.btn.pk-go:after {
  background: linear-gradient(var(--g2), var(--g1) 55%, var(--g3)) !important;
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e !important;
  animation: none !important;
}
.btn.pk-go .pk-go-spark,
.btn.pk-go .pk-go-arrow {
  animation: none !important;
  transition: none !important;
}
.btn.pk-go:hover:not(:disabled) .pk-go-arrow {
  transform: none !important;
}

/* --- botão final: amarelo simples, sem efeitos --- */
.oc-cta {
  animation: none !important;
  filter: none !important;
}
.site-theme .oc-cta .btn.primary {
  --lip-a: #ffe7a0;
  --lip-b: #9a5f08;
  --face-a: #ffe9a6;
  --face-b: #dba22a;
  --ink: #102239;
  color: #102239 !important;
  text-shadow: none !important;
}
.site-theme .oc-cta .btn.primary:before {
  background: linear-gradient(var(--lip-a), var(--lip-b)) !important;
  animation: none !important;
}
.site-theme .oc-cta .btn.primary:after {
  background: linear-gradient(var(--face-a), var(--face-b)) !important;
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e !important;
  animation: none !important;
}

/* --- botão do santuário: só a seta apontando --- */
.raid-go-wrap {
  animation: none !important;
  filter: none !important;
}
.raid-go-wrap:before,
.raid-go-wrap:after {
  display: none !important;
}
.btn.raid-go {
  --lip-a: #ffe7a0;
  --lip-b: #9a5f08;
  --face-a: #ffe9a6;
  --face-b: #dba22a;
  --ink: #102239;
  color: #102239 !important;
  text-shadow: none !important;
  letter-spacing: 2px;
}
.btn.raid-go:before {
  background: linear-gradient(var(--lip-a), var(--lip-b)) !important;
  animation: none !important;
}
.btn.raid-go:after {
  background: linear-gradient(var(--face-a), var(--face-b)) !important;
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e !important;
  animation: none !important;
}
.btn.raid-go .rg-chev i {
  animation-duration: 1.4s;
}

/* --- silhuetas dos lendários: brilho de cada ave --- */
.raid-silhouette {
  --sil: #ffd23f;
  --sil2: #ffb33d;
}
.raid-silhouette.sil-144 {
  --sil: #4fb3ff;
  --sil2: #1f7bff;
}
.raid-silhouette.sil-145 {
  --sil: #ffe100;
  --sil2: #ffb800;
}
.raid-silhouette.sil-146 {
  --sil: #ff8a1d;
  --sil2: #ff4a00;
}
.raid-silhouette.sil-150 {
  --sil: #c58bff;
  --sil2: #8a5cff;
}
.raid-silhouette.sil-151 {
  --sil: #ff9be8;
  --sil2: #ff5fcf;
}
.raid-silhouette .sil-aura {
  background: radial-gradient(circle, color-mix(in srgb, var(--sil) 55%, transparent), transparent 68%);
}
.raid-silhouette .sil-img {
  filter: brightness(0) drop-shadow(0 0 6px var(--sil)) drop-shadow(0 0 14px var(--sil2));
}

/* --- captura disponível: fundo azul em vez de verde --- */
.evc-card.capture {
  --ev-a: #245a96;
  --ev-b: #08162e;
}

/* --- revelação do Desafio: ajuste de posições --- */
.cr-stage {
  height: 300px;
}
.cr-floor {
  position: absolute;
  left: 50%;
  width: 140px;
  height: 22px;
  margin-left: -70px;
  border-radius: 50%;
  background: radial-gradient(#000b, transparent 70%);
  animation: cr-in 0.5s ease-out both;
}
.cr-ball {
  bottom: 26px;
}
.cr-beam {
  bottom: 70px;
  width: 96px;
  height: 230px;
  margin-left: -48px;
  clip-path: none;
  background: linear-gradient(to top, #eaf6ff, #bfe4ff88 45%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}
.shiny .cr-beam {
  background: linear-gradient(to top, #fff6c8, #ffe27a99 45%, transparent);
}
.cr-ring {
  bottom: 29px;
}
.cr-mon {
  bottom: auto;
  translate: -50% -50%;
}
.cr-p {
  bottom: 74px;
}
@keyframes cr-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.cr-mon {
  animation:
    cr-rise 1.3s cubic-bezier(0.2, 1.3, 0.4, 1) 1.35s both,
    cr-float 2.6s ease-in-out 2.7s infinite;
}

/* --- evolução: mais lenta e com build-up --- */
.modal.evolution-modal {
  width: min(470px, calc(100% - 20px));
}
.evolution-modal .modal-head h2 {
  font-size: 16px;
}
.evolution-fx {
  position: relative;
  overflow: hidden;
  gap: 10px;
  padding: 26px 22px 22px;
  background: radial-gradient(circle at 50% 38%, #1b3f73 0, #081428 74%);
}
.evolution-fx.shiny {
  background: radial-gradient(circle at 50% 38%, #4a3a12 0, #0d0a1e 74%);
}
.evolution-fx > * {
  position: relative;
  z-index: 2;
}
.evolution-fx > .evo-flash {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
@keyframes evo2-flash {
  0% {
    opacity: 0;
  }
  35%,
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.evo-eyebrow {
  min-height: 14px;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 3px;
  color: #9fd0ff;
}
.evolution-fx.shiny .evo-eyebrow {
  color: #ffe27a;
}
.evo-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffffaa, #8fc5ff55 50%, transparent 72%);
  opacity: 0;
}
.evolution-stage.evo-charging .evo-aura {
  opacity: 0.7;
  animation: evo2-aura 1.4s ease-in-out infinite;
}
.evolution-stage.evo-hyper .evo-aura {
  opacity: 1;
  animation-duration: 0.5s;
}
@keyframes evo2-aura {
  0%,
  100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.25);
  }
}
.evo-in {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.evo-in b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3px;
  background: #fff8d6;
  box-shadow: 0 0 8px #ffe9a3;
  opacity: 0;
}
.evolution-stage.evo-charging .evo-in b {
  animation: evo2-suck 1.6s ease-in var(--dl) infinite;
}
.evolution-stage.evo-hyper .evo-in b {
  animation-duration: 0.6s;
}
@keyframes evo2-suck {
  0% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(var(--evo-charge-distance, 120px) * -1)) scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-8px) scale(0.3);
  }
}
.evo-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 100px;
  height: 100px;
  margin: -50px;
  border: 4px solid #ffe58c;
  border-radius: 50%;
  opacity: 0;
}
.evolution-stage.evo-reveal .evo-rings i {
  animation: evo2-ring 1.8s ease-out both;
}
.evo-rings i:nth-child(2) {
  animation-delay: 0.35s !important;
  border-color: #8fd0ff;
}
.evo-rings i:nth-child(3) {
  animation-delay: 0.7s !important;
}
@keyframes evo2-ring {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(3.6);
  }
}
.evolution-sparkles i {
  width: 7px;
  height: 7px;
}
@keyframes evo2-sparkle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--d) * var(--evo-spark-range, 1) * -1))
      scale(0.2);
  }
}
@keyframes evo2-slow {
  0%,
  60% {
    filter: none;
  }
  61%,
  100% {
    filter: brightness(0) invert(1) drop-shadow(0 0 12px #fff);
  }
}
@keyframes evo2-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.08;
  }
}
@keyframes evo2-fast {
  0%,
  49% {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff);
  }
  50%,
  100% {
    filter: brightness(1.6) saturate(1.4);
  }
}
@keyframes evo2-shake {
  25% {
    translate: 2px -1px;
  }
  75% {
    translate: -2px 1px;
  }
}
@keyframes evo2-grow {
  to {
    scale: 1.3;
  }
}
@keyframes evo2-reveal {
  0% {
    transform: scale(0.4);
    filter: brightness(6) saturate(0);
  }
  45% {
    transform: scale(1.25);
    filter: brightness(2.2) saturate(0.4);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}
.evolution-fx.evo-hyper .evolution-stage {
  animation: evo2-shake 0.12s linear infinite;
}
.evolution-title {
  font-size: 17px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.evolution-fx.evo-done .evolution-title {
  animation: oc-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.evo-sub {
  margin: 0;
  min-height: 14px;
  font-size: var(--text-md);
  color: #a9c8e5;
}
@media (prefers-reduced-motion: reduce) {
  .evolution-fx,
  .evolution-fx * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- batalha: status e shiny --- */
.battle-card {
  position: relative;
}
.battle-shiny-tag {
  margin-left: 4px;
  padding: 2px 6px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #3a2600;
  background: linear-gradient(#fff6a8, var(--pl-gold-bright));
  border: 1px solid #fff8d0;
}
.battle-card.shiny-card {
  border-color: var(--pl-gold-bright) !important;
  box-shadow:
    inset 0 0 0 2px #4a3a04,
    0 0 12px #ffd23f66;
}
.battle-card.shiny-card .battle-card-portrait img {
  animation: bs-shiny 2.6s ease-in-out infinite;
}
@keyframes bs-shiny {
  0%,
  100% {
    filter: drop-shadow(0 0 3px var(--pl-gold-bright));
  }
  50% {
    filter: drop-shadow(0 0 10px #ffe27a);
  }
}
.status-badge {
  margin-left: 4px;
  padding: 2px 6px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #101a33;
  border: 1px solid #fff8;
}
.status-badge.sleep {
  background: #7fb8ff;
}
.status-badge.paralysis {
  background: #ffe100;
}
.status-badge.burn {
  background: #ff8a3d;
}
.status-badge.poison {
  background: #c58bff;
}
.status-badge.freeze {
  background: #8fe3ff;
}
.battle-card-portrait {
  position: relative;
}
.battle-card[data-status='sleep'] .battle-card-portrait:after {
  position: absolute;
  right: -4px;
  top: -8px;
  font-size: var(--text-xl);
  font-weight: 900;
  color: #bfe0ff;
  text-shadow: 0 0 6px #4a90ff;
  animation: bs-zzz 1.8s ease-in-out infinite;
}
@keyframes bs-zzz {
  0% {
    opacity: 0;
    transform: translate(0, 6px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(6px, -10px);
  }
}
.battle-card[data-status='paralysis'] .battle-card-portrait img {
  animation: bs-para 0.3s steps(2) infinite;
}
@keyframes bs-para {
  0% {
    transform: translateX(-1px);
    filter: drop-shadow(0 0 5px #ffe100);
  }
  100% {
    transform: translateX(1px);
    filter: drop-shadow(0 0 2px #ffe100) brightness(1.2);
  }
}
.battle-card[data-status='burn'] .battle-card-portrait img {
  filter: drop-shadow(0 0 6px #ff7a1a);
}
.battle-card[data-status='poison'] .battle-card-portrait img {
  filter: drop-shadow(0 0 6px #b06bff);
}
.battle-card[data-status='freeze'] .battle-card-portrait img {
  filter: saturate(0.6) brightness(1.1) drop-shadow(0 0 6px #8fe3ff);
}
.battle-status-pop {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 14px 8px;
  text-align: center;
  background: #06183af2;
  border: 2px solid var(--c);
  box-shadow:
    0 0 18px var(--c),
    inset 0 0 0 2px var(--pl-navy-900);
  animation: bsp 2.6s ease-out both;
}
.battle-status-pop strong {
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--c);
  text-shadow: 0 2px 0 #000a;
}
.battle-status-pop small {
  max-width: 220px;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: #dcebfa;
}
.bsp-glyph {
  position: absolute;
  inset: -12px;
  border: 3px solid var(--c);
  opacity: 0;
  animation: bsp-ring 1.3s ease-out both;
}
@keyframes bsp {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.6);
  }
  10% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  20% {
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-14px);
  }
  100% {
    opacity: 0;
    transform: translateY(-26px);
  }
}
@keyframes bsp-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.7);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-card.shiny-card .battle-card-portrait img,
  .battle-card .battle-card-portrait img,
  .battle-card .battle-card-portrait:after,
  .battle-status-pop,
  .bsp-glyph {
    animation: none !important;
  }
}

/* --- avisos (toast) no design atual --- */
#toast.toast {
  --toast-accent: #5aa9ff;
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 400;
  width: min(430px, calc(100vw - 28px));
  min-height: 0;
  padding: 0;
  display: none;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  transform: translateX(-50%);
  overflow: hidden;
  background: linear-gradient(#123454, #071d38);
  color: #edf4ff;
  border: 2px solid var(--toast-accent);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-800),
    0 8px 22px #000b;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}
#toast.toast.show {
  display: grid;
  animation: toast-in 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
#toast.toast.success {
  --toast-accent: #45d97a;
}
#toast.toast.gold {
  --toast-accent: #ffcf3f;
}
#toast.toast.danger {
  --toast-accent: #ff5a5a;
}
@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 28px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes toast-bar {
  to {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #toast.toast.show {
    animation: none;
  }
}
.auth-card .form-error {
  min-height: 0;
  margin: 0;
}
.form-error:empty {
  display: none;
}
.form-error:not(:empty) {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 8px;
  padding: 8px 10px;
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.35;
  color: #ffd9d6;
  background: #3a0f16;
  border: 2px solid #ff5a5a;
  box-shadow: inset 0 0 0 2px #1d070b;
  animation: oc-pop 0.25s ease-out both;
}
.form-error:not(:empty):before {
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: var(--text-xl);
  font-weight: 900;
  color: #3a0f16;
  background: #ff5a5a;
}
.battle-status-pop {
  translate: -50% -100%;
}
.evolution-stage {
  width: 270px;
  height: 250px;
}
.evolution-sprite {
  width: 200px;
  height: 200px;
}
.evo-aura {
  width: 200px;
  height: 200px;
}
.cr-mon {
  top: 150px;
}
.cr-rays {
  top: 150px;
}
.cr-floor {
  bottom: 38px;
}

/* ================= v84: evolução rápida com zoom, sprites de status, sorteio lendário, avisos, Desafio ================= */
.evolution-fx.evo-flashing > .evo-flash {
  animation: evo2-flash 0.9s ease-in-out both;
}
.evolution-stage.evo-charging .evolution-sprite {
  animation:
    evo2-slow 1.1s steps(1, end) infinite,
    evo3-zoom 1.1s ease-in-out infinite;
}
.evolution-stage.evo-hyper .evolution-sprite {
  animation:
    evo2-fast 0.28s steps(1, end) infinite,
    evo3-zoom-fast 0.5s ease-in-out infinite,
    evo2-shake 0.1s linear infinite;
}
.evolution-stage.evo-reveal .evolution-sprite {
  animation: evo2-reveal 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) 0.6s both;
}
.evolution-stage.evo-reveal .evolution-sparkles i {
  animation: evo2-sparkle 1.5s ease-out 0.6s both;
}
@keyframes evo3-zoom {
  0%,
  100% {
    scale: 0.94;
  }
  50% {
    scale: 1.16;
  }
}
@keyframes evo3-zoom-fast {
  0%,
  100% {
    scale: 0.85;
  }
  50% {
    scale: 1.34;
  }
}

/* --- sprites em batalha: status nunca mexem no posicionamento --- */
.battle-card[data-status='paralysis'] .battle-card-portrait > .pixel {
  animation: bs-para2 0.3s steps(2) infinite;
}
@keyframes bs-para2 {
  0% {
    translate: -1px 0;
    filter: drop-shadow(0 0 5px #ffe100);
  }
  100% {
    translate: 1px 0;
    filter: drop-shadow(0 0 2px #ffe100) brightness(1.2);
  }
}
.battle-card[data-status='sleep'] .battle-card-portrait:after {
  content: none;
}
.battle-card[data-status='sleep']:after {
  content: 'Zz';
  position: absolute;
  right: 8px;
  top: 1px;
  font-size: var(--text-lg);
  font-weight: 900;
  color: #bfe0ff;
  text-shadow: 0 0 6px #4a90ff;
  animation: bs-zzz 1.8s ease-in-out infinite;
}
.battle-card.has-status[data-status='sleep'] {
  border-color: #7fb8ff;
}
.battle-card.has-status[data-status='paralysis'] {
  border-color: #ffe100;
}
.battle-card.has-status[data-status='burn'] {
  border-color: #ff8a3d;
}
.battle-card.has-status[data-status='poison'] {
  border-color: #c58bff;
}
.battle-card.has-status[data-status='freeze'] {
  border-color: #8fe3ff;
}
.lucky-stage {
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
}
.lucky-kicker {
  font-weight: 900;
  color: var(--lc);
  text-shadow: 0 0 10px var(--lc);
}
.lucky-center .lucky-prize {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
.lp-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lc) 70%, transparent), transparent 68%);
  animation: cw-pulse 2s ease-in-out infinite alternate;
}
.lp-parts b {
  position: absolute;
  bottom: 14px;
  left: var(--x);
  width: 5px;
  height: 5px;
  opacity: 0;
  animation: lp-rise var(--du) linear var(--dl) infinite;
}
.lucky-center .lucky-prize .lucky-sprite {
  position: relative;
  z-index: 2;
  object-fit: contain;
  image-rendering: pixelated;
  animation: oc-hop 2.6s ease-in-out infinite;
}
.lp-floor {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 130px;
  height: 16px;
  margin-left: -65px;
  border-radius: 50%;
  background: radial-gradient(#000b, transparent 70%);
}
.lucky-center .lucky-name {
  margin: 0;
  letter-spacing: 5px;
  color: #fff;
  text-shadow:
    0 3px 0 #000a,
    0 0 18px var(--lc);
}
.lucky-center .lucky-timer {
  padding: 4px 10px;
  background: #04122c;
  border: 1px solid #33628f;
}
.lucky-note.used {
  padding: 8px 12px;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #ffe58c;
  background: #0a2447;
  border-left: 3px solid var(--pl-gold-bright);
}
@media (prefers-reduced-motion: reduce) {
  .lp-glow,
  .lp-parts b,
  .lucky-center .lucky-prize .lucky-sprite {
    animation: none !important;
  }
}

/* --- Desafio: organização harmônica --- */
.pk-challenge {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'art copy' 'go go';
}
.pk-challenge .pkc-go {
  width: 100%;
  justify-self: stretch;
}
.pkc-copy p {
  max-width: none;
}
@media (max-width: 520px) {
  .pk-challenge {
    grid-template-columns: 1fr;
    grid-template-areas: 'art' 'copy' 'go';
  }
}

/* --- avisos: cartões de notificação --- */
#toast {
  display: none !important;
}
#toasts {
  position: fixed;
  left: 50%;
  z-index: 400;
  display: flex;
  flex-direction: column;
  width: min(470px, calc(100vw - 24px));
  translate: -50% 0;
  pointer-events: none;
}
.toast-card {
  --ta: #5aa9ff;
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ta) 26%, #0d2c4d), #071c36 64%);
  border: 2px solid var(--ta);
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
  animation: tc-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.toast-card.success {
  --ta: #45d97a;
}
.toast-card.gold {
  --ta: #ffcf3f;
}
.toast-card.danger {
  --ta: #ff5a5a;
  animation:
    tc-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    tc-shake 0.4s linear 0.35s 1;
}
.toast-card.leaving {
  animation: tc-out 0.28s ease-in both;
}
.tc-medal {
  position: relative;
  display: grid;
  place-items: center;
}
.tc-medal b {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #04122c;
  background: linear-gradient(var(--ta), color-mix(in srgb, var(--ta) 58%, #04122c));
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  animation: tc-icon 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 0.15s both;
}
.tc-medal b .item-sprite,
.tc-medal b .pixel {
  object-fit: contain;
}
.toast-card.gold .tc-medal b {
  animation:
    tc-icon 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 0.15s both,
    tc-coin 2s ease-in-out 0.9s infinite;
}
.toast-card.info .tc-medal b {
  animation:
    tc-icon 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 0.15s both,
    tc-bob 1.6s ease-in-out 0.9s infinite;
}
.toast-card.success .tc-medal b {
  animation:
    tc-icon 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 0.15s both,
    tc-beat 1.4s ease-in-out 0.9s infinite;
}
.tc-ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--ta);
  border-radius: 50%;
  opacity: 0;
  animation: tc-ring 0.9s ease-out 0.2s both;
}
.tc-p {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2px;
  background: var(--ta);
  opacity: 0;
  animation: tc-burst 0.8s ease-out 0.2s both;
}
.tc-copy {
  display: grid;
  min-width: 0;
}
.tc-copy em {
  font-style: normal;
  font-weight: 900;
  color: var(--ta);
}
.tc-copy strong {
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 0 #000a;
}
.tc-copy small {
  font-weight: 700;
  color: #cfe2f5;
}
.tc-close {
  align-self: start;
  justify-self: end;
  line-height: 1;
  color: #9fc4e8;
  background: transparent;
  border: 1px solid #33628f;
  cursor: pointer;
}
.tc-close:hover {
  color: #fff;
  border-color: var(--ta);
}
.tc-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--ta);
  transform-origin: left;
  animation: tc-bar var(--ms, 3.8s) linear forwards;
}
.toast-card:hover .tc-bar {
  animation-play-state: paused;
}
@keyframes tc-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes tc-out {
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
}
@keyframes tc-icon {
  0% {
    transform: scale(0.2) rotate(-40deg);
  }
  100% {
    transform: none;
  }
}
@keyframes tc-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes tc-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(-22px);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-46px);
  }
}
@keyframes tc-bar {
  to {
    transform: scaleX(0);
  }
}
@keyframes tc-shake {
  25% {
    translate: -5px 0;
  }
  75% {
    translate: 5px 0;
  }
}
@keyframes tc-coin {
  0%,
  60%,
  100% {
    transform: rotateY(0);
  }
  80% {
    transform: rotateY(180deg);
  }
}
@keyframes tc-bob {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes tc-beat {
  50% {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast-card,
  .toast-card * {
    animation: none !important;
  }
  .tc-bar {
    display: none;
  }
}

/* --- Desafio: nova revelação (sem raios giratórios) --- */
.cr-rays,
.cr-beam,
.cr-ring {
  display: none !important;
}
.cr-flash {
  animation: cr-flash2 0.9s ease-out 1.3s both;
}
@keyframes cr-flash2 {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}
.cr-glow {
  position: absolute;
  left: 50%;
  top: 170px;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(circle, #7fb8ff66, transparent 62%);
  opacity: 0;
  animation:
    cr-glow-in 1.2s ease-out 1.4s both,
    cr-glow-pulse 2.6s ease-in-out 2.6s infinite alternate;
}
.shiny .cr-glow {
  background: radial-gradient(circle, #ffd23f77, transparent 62%);
}
@keyframes cr-glow-in {
  to {
    opacity: 1;
  }
}
@keyframes cr-glow-pulse {
  to {
    transform: scale(1.12);
  }
}
.cr-pillar {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 78px;
  height: 250px;
  margin-left: -39px;
  opacity: 0;
  background: linear-gradient(to top, #eaf6ff, #a9d6ff77 50%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  transform-origin: 50% 100%;
  animation: cr-pillar 1.3s ease-out 1.3s both;
}
.shiny .cr-pillar {
  background: linear-gradient(to top, #fff6c8, #ffd23f77 50%, transparent);
}
@keyframes cr-pillar {
  0% {
    opacity: 0;
    transform: scaleY(0.1);
  }
  25% {
    opacity: 0.95;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1.05);
  }
}
.cr-shock i {
  position: absolute;
  left: 50%;
  top: 226px;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 4px solid #bfe4ff;
  animation: cr-shock 1.2s ease-out 1.3s both;
}
.cr-shock i:nth-child(2) {
  animation-delay: 1.5s;
  border-color: var(--pl-sky);
}
.cr-shock i:nth-child(3) {
  animation-delay: 1.7s;
  border-color: #ffffff;
}
.shiny .cr-shock i {
  border-color: #ffe27a;
}
.shiny .cr-shock i:nth-child(2) {
  border-color: #ff9be8;
}
.shiny .cr-shock i:nth-child(3) {
  border-color: var(--pl-cyan);
}
.cr-ball {
  z-index: 4;
  animation:
    cr-drop 0.55s cubic-bezier(0.4, 0, 0.6, 1) both,
    cr-wobble 0.7s ease-in-out 0.55s 1,
    cr-fade 0.45s ease-out 2.3s forwards;
}
.cr-p {
  animation: cr-up 1.7s ease-out var(--dl) both;
}
@keyframes cr-rise {
  0% {
    opacity: 0;
    transform: translateY(76px) scale(0.3);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.cr-rain {
  position: absolute;
  top: -14px;
  left: var(--l);
  z-index: 1;
  width: 8px;
  height: 12px;
  background: var(--c);
  animation: cr-fall var(--du) linear var(--dl) both;
}
@media (prefers-reduced-motion: reduce) {
  .cr-rain,
  .cr-glow,
  .cr-pillar,
  .cr-shock i {
    display: none;
  }
}
#toasts {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #edf4ff;
}
.tc-close {
  font-family: inherit;
}
.cr-p {
  z-index: 2 !important;
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
}
/* partículas e ondas só existem depois que a Pokébola assentou e abriu (antes ficavam visíveis no atraso) */
.cr-p,
.cr-shock i,
.cr-rain {
  animation-fill-mode: forwards !important;
  opacity: 0;
}
@keyframes cr-up {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), calc(var(--d) * -1)) scale(0.3);
  }
}
@keyframes cr-shock {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0.2);
  }
  6% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(4.4);
  }
}
@keyframes cr-fall {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0);
  }
  6% {
    opacity: 1;
  }
  100% {
    opacity: 0.9;
    transform: translateY(105vh) rotate(540deg);
  }
}

/* --- sorteio lendário: sem quadro, sem barra de rolagem, timer no fim --- */
.lucky-modal .modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lucky-modal .modal-body::-webkit-scrollbar {
  display: none;
}
.lucky-modal .lucky-center {
  gap: 8px;
  justify-content: center;
}
.lucky-stage {
  overflow: visible;
  gap: 2px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.lucky-kicker {
  font-size: var(--text-md);
  letter-spacing: 4px;
}
.lucky-center .lucky-prize {
  margin-top: 2px;
}
.lp-glow {
  width: 190px;
  height: 190px;
}
.lucky-center .lucky-prize .lucky-sprite {
  width: 132px;
  height: 132px;
}
@keyframes lp-rise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-110px);
  }
}
.lucky-center .lucky-name {
  font-size: 26px;
  margin-top: 2px;
}
.lucky-modal .wheel-wrap {
  width: 190px;
  height: 190px;
}
.lucky-note.used,
.lucky-note {
  margin: 2px 0 0;
  width: 100%;
}
.lucky-center .lucky-timer {
  margin: 4px 0 0;
}
.lucky-modal .lucky-center {
  padding: 8px 20px 8px;
}

/* --- Desafio: o Pokémon aparece por cima da Ultra Ball --- */
.cr-mon {
  z-index: 6;
}

/* --- botão de girar do Teste sua sorte: único, com partículas --- */
.lucky-go-wrap {
  position: relative;
  width: 100%;
  margin-top: 20px;
  animation: lg-glow 2.4s ease-in-out infinite;
}
.lg-p {
  position: absolute;
  z-index: 3;
  left: var(--x);
  bottom: 46%;
  width: 6px;
  height: 6px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  opacity: 0;
  animation: lg-rise var(--du) ease-out var(--dl) infinite;
}
.lg-p:nth-child(3n) {
  width: 9px;
  height: 9px;
}
@keyframes lg-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), -52px) scale(1.2);
  }
}
@keyframes lg-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 6px #ffd23f88);
  }
  50% {
    filter: drop-shadow(0 0 16px #ff8ad8cc);
  }
}
.btn.lucky-go {
  --lip-a: #fff3b0;
  --lip-b: #b3369a;
  --ink: #3a0f4a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: 2px;
  color: #3a0f4a !important;
  text-shadow: none !important;
}
.btn.lucky-go:before {
  background: linear-gradient(90deg, #ff9df5, #ffe27a, var(--pl-cyan), #ff9df5, #ffe27a) 0 0/300% 100% repeat-x !important;
  animation: px-rim 3s linear infinite !important;
}
.btn.lucky-go:after {
  background:
    linear-gradient(#0000, #0000) no-repeat 0 0/1px 1px,
    radial-gradient(circle, #fff 0 1px, transparent 1.7px) 0 0/43px 29px,
    radial-gradient(circle, #fffbe0 0 1px, transparent 1.5px) 15px 9px/61px 37px,
    linear-gradient(#0000, #0000002e),
    linear-gradient(
        100deg,
        var(--pl-gold-bright),
        #ffb52a,
        #ff8ad8,
        var(--pl-gold-bright),
        #ff9d1a,
        #ff8ad8,
        var(--pl-gold-bright)
      )
      0 0/300% 100% repeat-x !important;
  animation: px-purple 5s linear infinite !important;
}
.btn.lucky-go > span[aria-hidden] {
  color: #fff;
  font-size: 1.1em;
  text-shadow:
    0 0 6px #ff6ad5,
    0 0 12px #fff !important;
  animation: lucky-twinkle 1.6s ease-in-out infinite;
}
.btn.lucky-go > span[aria-hidden]:last-child {
  animation-delay: 0.8s;
}
.btn.lucky-go:disabled {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .lucky-go-wrap,
  .lg-p,
  .btn.lucky-go > span[aria-hidden] {
    animation: none !important;
  }
  .lg-p {
    display: none;
  }
}
.lucky-modal .wheel-wrap {
  margin: 10px auto 6px;
}
.lucky-center .lucky-prize {
  height: 140px;
}
.lucky-modal,
.lucky-modal * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lucky-modal::-webkit-scrollbar,
.lucky-modal *::-webkit-scrollbar {
  display: none;
}

/* sorteio lendário: sem glow no Pokémon, só partículas brancas */
.lp-glow {
  display: none;
}
.lucky-center .lucky-prize .lucky-sprite {
  filter: drop-shadow(0 4px 0 #000a);
}
.lp-parts b {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}

/* ================= biomas míticos: Laboratório do Mewtwo e Portal Ancestral do Mew ================= */
.raid-wait.mythic {
  background:
    linear-gradient(#050a18a3, #0a1226b8),
    var(--raid-bg) center/cover;
}
.raid-wait.both {
  border-color: #c9b4ff;
}
.raid-wait.mew {
  border-color: #5be3a0;
}
.raid-wait.mewtwo {
  border-color: #c58bff;
}
.raid-wait > .raid-split {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  display: flex;
  background: #050a18;
}
.raid-split i {
  flex: 1;
  background: var(--a) center/cover no-repeat;
}
.raid-wait > .raid-split:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#050a18a3, #0a1226b8), linear-gradient(90deg, transparent 47%, #ffffff3d 50%, transparent 53%);
}
.raid-wait.mew header h1 {
  color: #8dffc6;
  text-shadow:
    -3px 0 #0b4a34,
    3px 0 #0b4a34,
    0 -3px #0b4a34,
    0 3px #0b4a34,
    0 0 22px #3dff9a;
}
.raid-wait.mewtwo header h1 {
  color: #e2c4ff;
  text-shadow:
    -3px 0 #3d1a6b,
    3px 0 #3d1a6b,
    0 -3px #3d1a6b,
    0 3px #3d1a6b,
    0 0 22px #c58bff;
}
.raid-wait.both header h1 {
  color: #f2ddff;
  text-shadow:
    -3px 0 #33206b,
    3px 0 #33206b,
    0 -3px #33206b,
    0 3px #33206b,
    0 0 22px #9ff0ff;
}
.raid-wait.mew .raid-embers i {
  background: #7dffc0;
  box-shadow: 0 0 8px #3dff9a;
}
.raid-wait.mewtwo .raid-embers i {
  background: #e2c4ff;
  box-shadow: 0 0 8px #c58bff;
}
.raid-wait.mythic .eyebrow {
  color: #e2d0ff;
}
.card-art.raid-split {
  display: flex;
  overflow: hidden;
}
.card-art.raid-split i {
  flex: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.card-art.raid-split i:nth-child(1) {
  background-image: var(--a);
}
.card-art.raid-split i:nth-child(2) {
  background-image: var(--b);
}
.card-art.raid-split:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #050a18d9 0, transparent 62%),
    linear-gradient(90deg, transparent 47%, #ffffff40 50%, transparent 53%);
  pointer-events: none;
}
.card-art.raid-split .card-crest {
  z-index: 2;
}

.stage-pips i.boss {
  border-color: #c58bff99;
  background: #1d0f3a;
}
.stage-pips i.boss.on {
  border-color: #c58bff;
}
.stage-pips i.boss.now {
  background: #c58bff;
  border-color: #f0dcff;
  box-shadow: 0 0 10px #c58bff;
}

/* v99 · seletor de idioma, Trainer Card e trocas de shiny */

.trades-page {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 22px;
}
.trade-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.tr-rule {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--pl-steel);
  background: linear-gradient(110deg, #123855, #071a32);
}
.tr-rule b {
  font-size: 17px;
  color: #ffda76;
}
.tr-rule span {
  font-size: var(--text-xs);
  letter-spacing: 0.8px;
  color: var(--ui-muted);
  text-transform: uppercase;
}
.tr-rule small {
  font-size: var(--text-xs);
  color: #ffb0a8;
}
.trade-warning {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #b8646d;
  background: #3a1a2b;
  color: #ffc0bc;
  font-size: var(--text-lg);
  line-height: 1.5;
}
.trade-compose,
.trade-list {
  padding: 12px 14px;
  border: 1px solid var(--pl-steel);
  background: #08203c;
}
.trade-compose h3,
.trade-list h3 {
  margin: 0 0 10px;
  font-size: var(--text-md);
  letter-spacing: 1.6px;
  color: #ffda76;
}
.trade-search {
  flex-wrap: wrap;
}
.trade-search input {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid #557793;
  background: var(--pl-navy-850);
  color: #fff;
  font: inherit;
  font-size: var(--text-xl);
}
.trade-search input:focus {
  outline: 2px solid var(--pl-gold);
  outline-offset: 1px;
}
.trade-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.trade-col h4 {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  letter-spacing: 1.4px;
  color: var(--ui-text);
}
.trade-partner {
  margin-left: 6px;
  color: #8af0ff;
}
.trade-grid {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}
.trade-chip {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--pl-steel);
  background: #0c2a49;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.trade-chip:hover:not(:disabled) {
  border-color: #8af0ff;
}
.trade-chip.chosen {
  border-color: #ffda76;
  background: #21394b;
  box-shadow: inset 0 0 0 1px #ffda76;
}
.trade-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tr-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 5px;
  background: var(--pl-gold-bright);
  color: #3a2400;
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
}
.tr-lucky-note {
  margin: 10px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ui-muted);
}
.trade-send {
  margin-top: 12px;
}
.trade-row {
  display: grid;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #2a4a6c;
  background: #0a2440;
}
.trade-row.declined,
.trade-row.cancelled,
.trade-row.expired,
.trade-row.failed {
  opacity: 0.7;
}
.tr-who {
  font-size: var(--text-sm);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.tr-who b {
  color: #8af0ff;
  text-transform: none;
}
.tr-swap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tr-side small {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.tr-arrow {
  font-size: 18px;
  font-style: normal;
  color: #ffda76;
}
.tr-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tr-status {
  padding: 3px 8px;
  border: 1px solid #557793;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1px;
}
.tr-status.accepted {
  color: #8dffb0;
  border-color: #4fb672;
}
.tr-status.declined,
.tr-status.cancelled {
  color: #ffb0a8;
  border-color: #b8646d;
}
.tr-status.expired,
.tr-status.failed {
  color: #9fb4c9;
}
@media (max-width: 640px) {
  .trade-rules {
    grid-template-columns: 1fr 1fr;
  }
  .trade-columns {
    grid-template-columns: 1fr;
  }
  .tr-actions {
    justify-content: flex-start;
  }
}
.home-menu-card.trade-card.on {
  --accent: #59d8ff;
  --lip-a: #5fd3f0;
  --lip-b: #0f3a52;
  --face-a: #1d6a8f;
  --face-b: #0f3f5f;
}
.home-menu-card.trade-card.has-offers small {
  color: #ffda76;
  font-weight: 900;
}
.trade-row {
  grid-template-columns: 1fr auto;
  grid-template-areas: 'who actions' 'swap swap';
}
.tr-who {
  grid-area: who;
}
.tr-actions {
  grid-area: actions;
}
.tr-swap {
  grid-area: swap;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.tr-swap .tr-side {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 640px) {
  .trade-row {
    grid-template-columns: 1fr;
    grid-template-areas: 'who' 'swap' 'actions';
  }
  .tr-swap {
    flex-wrap: wrap;
  }
}

/* v100 · seletor de idioma em menu suspenso e Trainer Card no desenho do site */
.lang-dd {
  position: relative;
  flex: none;
  display: inline-flex;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #557793;
  background: #102e4b;
  color: #d6e7f8;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
}
.lang-btn:hover,
.lang-dd.open .lang-btn {
  border-color: var(--pl-gold);
  color: var(--pl-gold-light);
}
.lang-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.lang-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border: 4px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: 0;
  transition: transform 0.15s;
}
.lang-dd.open .lang-caret {
  transform: rotate(180deg);
}
.flag {
  position: relative;
  display: inline-block;
  flex: none;
  width: 20px;
  height: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--pl-navy-900),
    1px 2px 0 1px var(--pl-navy-950);
}
.flag-pt {
  background: #1fa04a;
}
.flag-pt:before {
  content: '';
  position: absolute;
  inset: 2px 1px;
  background: var(--pl-gold-bright);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.flag-pt:after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #20449c;
}
.flag-en {
  background: repeating-linear-gradient(#c9343f 0 2px, #f5f5f5 2px 4px);
}
.flag-en:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 8px;
  background: #26428b;
}
.lang-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 7px);
  right: 0;
  min-width: 158px;
  padding: 5px;
  background: linear-gradient(#123556, #071b34);
  border: 2px solid #ba9849;
  box-shadow:
    3px 4px var(--pl-navy-950),
    inset 0 0 0 1px var(--pl-navy-850);
}
.lang-menu[hidden] {
  display: none;
}
.lang-menu:before {
  content: '';
  position: absolute;
  top: -7px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #123556;
  border: solid #ba9849;
  border-width: 2px 0 0 2px;
  transform: translateY(3px) rotate(45deg);
}
.lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  color: #d6e7f8;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-transform: none;
}
.lang-opt:hover,
.lang-opt:focus-visible {
  background: #1b456b;
  border-color: var(--pl-gold);
  outline: 0;
}
.lang-opt[aria-selected='true'] {
  color: var(--pl-gold-light);
}
.lang-opt[aria-selected='true']:after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  background: var(--pl-gold-light);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.compact-shell .run-nav .lang-btn {
  padding: 5px 7px;
  min-height: 26px;
  height: auto;
  font-size: var(--text-xs);
}
@media (max-width: 520px) {
  .lang-btn {
    gap: 5px;
    padding: 0 7px;
  }
  .lang-menu {
    min-width: 148px;
  }
}

@media (max-width: 520px) {
  .menu-header-actions {
    gap: 5px;
  }
  .menu-header-actions .lang-code,
  .run-nav .lang-code {
    display: none;
  }
  .menu-header-actions .lang-btn,
  .run-nav .lang-btn {
    padding: 0 6px;
  }
}

/* v101 · Trainer Card como identidade do jogador, escolha de foto e barra da conta */
.av-emotions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.av-emotions > span {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--ui-muted);
}
.av-emotions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.av-emo,
.av-cell {
  border: 1px solid var(--pl-steel);
  background: #0b2340;
  cursor: pointer;
  font: inherit;
}
.av-emo {
  padding: 3px;
  line-height: 0;
}
.av-emo img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.av-emo:hover,
.av-cell:hover {
  border-color: #8af0ff;
}
.av-emo.on,
.av-cell.on {
  border-color: var(--ui-gold);
  background: #21394b;
  box-shadow: inset 0 0 0 1px var(--ui-gold);
}
.av-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #557793;
  background: var(--pl-navy-850);
  color: #fff;
  font: inherit;
  font-size: var(--text-xl);
}
.av-search:focus {
  outline: 2px solid var(--pl-gold);
  outline-offset: 1px;
}
.av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}
.av-cell {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 2px;
  color: var(--ui-muted);
}
.av-cell img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.av-cell small {
  font-size: var(--text-xs);
}
.av-empty {
  grid-column: 1/-1;
  margin: 6px 0;
}

/* v102 · Trainer Card alinhado, barra da conta com Gerenciar/Sair e mercado global de shinies */

.tr-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tr-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 6px;
  background: linear-gradient(#123855, #0a2440);
  border: 1px solid var(--ui-line);
  box-shadow: 2px 3px var(--pl-navy-950);
  color: var(--ui-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.2px;
  cursor: pointer;
}
.tr-tab:hover {
  border-color: #8af0ff;
  color: #fff;
}
.tr-tab.on {
  background: linear-gradient(#f2c94c, #c99a2e);
  border-color: #7a5a12;
  box-shadow:
    inset 0 2px 0 #ffffff55,
    2px 3px var(--pl-navy-950);
  color: #2b1c00;
}
.tr-badge {
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid #4a1122;
  background: #d94a5e;
  color: #fff;
  font-size: var(--text-sm);
  font-style: normal;
  line-height: 1.4;
}
.tr-body {
  display: grid;
  gap: 12px;
}
.trade-rules .tr-rule {
  padding: 7px 10px;
}
.trade-rules .tr-rule b {
  font-size: 15px;
}
.trade-warning.soft {
  border-color: #b89a49;
  background: #3a3218;
  color: var(--pl-gold-light);
}
.mon-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
}
.mc-art {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: radial-gradient(circle, #245a8c, #0a2140 75%);
  border: 1px solid var(--pl-steel);
}
.mon-card.lucky .mc-art {
  border-color: var(--pl-gold-bright);
  background: radial-gradient(circle, #6a4c14, #0a2140 75%);
}
.mc-art img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}
.mc-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: start;
}
.mc-info b {
  font-size: 14px;
  color: #fff;
}
.mc-info small {
  color: var(--ui-muted);
}
.mc-iv {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-iv em {
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 900;
  color: var(--ui-gold);
}
.ivbars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.ivbars i {
  display: block;
  width: 5px;
  height: calc(2px + 12px * var(--v));
  background: linear-gradient(#8af0ff, #2a8fd0);
  border: 1px solid var(--pl-navy-850);
}
.tr-tag.market {
  margin-left: 8px;
  background: #8af0ff;
  color: var(--pl-navy-850);
}
.trade-chip {
  padding: 6px;
}
.mk-bar {
  flex-wrap: wrap;
}
.mk-bar input {
  flex: 1;
  background: var(--pl-navy-850);
  color: #fff;
  font: inherit;
}
.mk-bar input:focus {
  outline: 2px solid var(--pl-gold);
  outline-offset: 1px;
}
.chip {
  padding: 9px 12px;
  border: 1px solid #557793;
  background: #102e4b;
  color: #d6e7f8;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.chip:hover {
  border-color: #8af0ff;
}
.chip.on {
  border-color: var(--ui-gold);
  background: #21394b;
  color: var(--ui-gold);
}
.mk-count {
  color: var(--ui-muted);
}
.mk-count b {
  font-size: 15px;
  color: var(--ui-gold);
}
.mk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mk-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #123354, #08203c);
  border: 1px solid var(--ui-line);
  box-shadow: 2px 3px var(--pl-navy-950);
}
.mk-card.mine {
  border-color: var(--ui-gold);
}
.mk-card.opened {
  grid-column: 1/-1;
  border-color: #8af0ff;
}
.mk-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mk-owner {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.mk-owner b {
  font-size: var(--text-lg);
  letter-spacing: 0.3px;
  text-transform: none;
  color: #8af0ff;
}
.mk-card header small {
  font-size: var(--text-xs);
  color: var(--ui-muted);
}
.mk-wants {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  background: var(--pl-navy-800);
  border: 1px solid #1f3f60;
}
.mk-label {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--ui-gold);
}
.mk-wants > div,
.mk-wants-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.want {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border: 1px solid var(--pl-steel);
  background: #0b2340;
  color: var(--ui-text);
  font: inherit;
  font-size: var(--text-md);
}
.want img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
button.want {
  cursor: pointer;
}
button.want i {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--ui-muted);
}
.want-open {
  padding: 5px 9px;
  border: 1px solid #4fb672;
  background: #1b3a2f;
  color: #8dffb0;
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
}
.mk-card footer {
  flex-wrap: wrap;
  margin-top: auto;
}
.mk-offer {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--pl-steel);
}
.mk-offer h4 {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 1.4px;
  color: var(--ui-text);
}
.mk-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  font-size: var(--text-md);
  color: var(--ui-muted);
}
.tr-empty {
  display: grid;
  justify-items: center;
  text-align: center;
}
.tr-empty p {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--ui-muted);
}
.post-panel {
  display: grid;
  border: 1px solid var(--pl-steel);
  background: #08203c;
}
.post-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: var(--text-md);
  letter-spacing: 1.5px;
  color: var(--ui-gold);
}
.post-panel h3:first-child {
  margin-top: 0;
}
.post-panel h3 span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--ui-gold);
  color: #2b1c00;
  font-size: var(--text-md);
  clip-path: var(--px-in);
}
.post-note {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.seg button {
  background: #102e4b;
  color: #d6e7f8;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.seg button.on {
  background: #21394b;
  box-shadow: inset 0 0 0 1px var(--ui-gold);
  color: var(--ui-gold);
}
.post-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.post-chosen p {
  margin: 0;
}
.post-count {
  margin-left: auto;
  font-size: var(--text-md);
  color: var(--ui-muted);
}
.want-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow: auto;
}
.want-tile {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 2px;
  border: 1px solid var(--pl-steel);
  background: #0b2340;
  color: var(--ui-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.want-tile:hover {
  border-color: #8af0ff;
}
.want-tile img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}
.want-tile.on {
  border-color: var(--ui-gold);
  background: #21394b;
  color: var(--ui-gold);
}
@media (max-width: 640px) {
  .mk-grid {
    grid-template-columns: 1fr;
  }
  .mon-card {
    gap: 8px;
  }
  .mc-art {
    width: 56px;
    height: 56px;
  }
  .mc-art img {
    width: 48px;
    height: 48px;
  }
}
.tr-who small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  letter-spacing: 0.4px;
  text-transform: none;
}
.tr-actions {
  align-items: center;
}
.mc-info small {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}
.mc-info b {
  text-transform: none;
}
.tr-side .mon-card {
  margin-top: 2px;
}

/* v102 · Trainer Card alinhado, barra da conta com Gerenciar/Sair e mercado global de shinies */
.trainer-card {
  position: relative;
  overflow: hidden;
  color: var(--ui-text);
  background: linear-gradient(145deg, #123354, #071b34);
  border: 2px solid var(--ui-border);
}
.trainer-card:before,
.trainer-card:after {
  content: '';
  position: absolute;
  background: var(--ui-gold);
}
.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(#c4485d, #7d2439);
  border-bottom: 3px solid #4a1122;
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e;
  clip-path: var(--px-in);
}
.tc-head h2 {
  margin: 0;
  font-weight: 900;
  color: #fff3ec;
  text-shadow: 0 2px 0 #4a1122;
}
.tc-role,
.tc-region {
  border: 1px solid var(--pl-navy-850);
  font-weight: 900;
}
.tc-role {
  background: var(--pl-gold-bright);
  color: #3a2400;
}
.tc-region {
  background: #0005;
  border-color: #ffffff40;
  color: #ffe9dc;
}
.tc-body {
  display: grid;
  align-items: stretch;
}
.tc-side {
  display: grid;
  align-content: start;
}
.tc-photo {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, #245a8c, #0a2140 72%);
  border: 2px solid var(--ui-border);
}
.tc-photo img {
  object-fit: contain;
  image-rendering: pixelated;
}
.tc-c {
  position: absolute;
  border: 0 solid var(--ui-gold);
  pointer-events: none;
}
.tc-c.a {
  border-width: 2px 0 0 2px;
}
.tc-c.b {
  border-width: 2px 2px 0 0;
}
.tc-c.c {
  border-width: 0 0 2px 2px;
}
.tc-c.d {
  border-width: 0 2px 2px 0;
}
.tc-edit:focus-visible,
.av-cell:focus-visible,
.av-emo:focus-visible,
.avp-close:focus-visible,
.ab-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.tc-gems:before {
  background: #49c8f5;
}
.tc-gems b {
  color: #a8ecff;
}
.tc-gem {
  flex: none;
}
.tc-picker {
  background: linear-gradient(var(--pl-navy-800), #081f3b);
  border: 1px solid var(--ui-line);
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.tc-picker header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tc-picker h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--ui-gold);
}
.avp-close {
  width: 26px;
  height: 24px;
  border: 1px solid #557793;
  background: #102e4b;
  color: #d6e7f8;
  font: inherit;
  font-size: var(--text-md);
  cursor: pointer;
}
.avp-close:hover {
  border-color: var(--ui-gold);
  color: var(--ui-gold);
}
.tc-badges {
  background: linear-gradient(var(--pl-navy-800), #081f3b);
  border: 1px solid var(--ui-line);
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.tc-badges-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tc-badges-head span {
  font-weight: 800;
  color: var(--ui-text);
}
.tc-badges-head em {
  border: 1px solid var(--ui-border);
  background: #21394b;
  color: var(--ui-gold);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.account-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  background: linear-gradient(90deg, #0b2450, #07173a);
  border: 1px solid var(--pl-steel);
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.ab-photo {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: radial-gradient(circle, #245a8c, #0a2140);
  border: 2px solid var(--ui-border);
  box-shadow: inset 0 0 0 1px var(--pl-navy-800);
}
.ab-photo img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}
.ab-text {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}
.ab-text small {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--ui-gold);
}
.ab-text b {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-actions {
  display: flex;
  flex: none;
  gap: 6px;
}
.ab-btn {
  border: 1px solid #557793;
  background: #102e4b;
  color: #d6e7f8;
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
  font: inherit;
  cursor: pointer;
}
.ab-btn:hover {
  border-color: var(--ui-gold);
  color: var(--ui-gold);
}
.ab-btn.out {
  border-color: #b8646d;
  background: linear-gradient(#5a2436, #3a1a2b);
  color: #ffc0bc;
}
.ab-btn.out:hover {
  background: linear-gradient(#7a2f45, #4c2434);
  border-color: #ffc0bc;
  color: #fff;
}
.account-bar.guest .ab-photo img {
  width: 32px;
  height: 32px;
}
.account-bar.guest .ab-text b {
  color: var(--ui-muted);
  white-space: normal;
}
@media (max-width: 420px) {
  .ab-btn span {
    display: none;
  }
  .account-bar {
    margin-bottom: 20px;
  }
}
.barter-market-page .post-shiny-list {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 5px;
  max-height: 202px;
  padding-right: 2px;
}
.site-theme .barter-market-page .post-shiny-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 3px 5px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: #0a223c;
  text-align: left;
}
.site-theme .barter-market-page .post-shiny-row input[type='radio'] {
  width: 13px;
  height: 13px;
  flex: none;
  padding: 0;
  accent-color: var(--ui-gold);
}
.site-theme .barter-market-page .post-shiny-row.chosen {
  border-color: var(--ui-gold);
  background: #1b3348;
  box-shadow: none;
}
.site-theme .barter-market-page .post-shiny-row.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.barter-market-page .post-shiny-row img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}
.barter-market-page .post-trade-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.barter-market-page .post-shiny-row strong {
  overflow: hidden;
  color: var(--ui-text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barter-market-page .post-trade-name small {
  overflow: hidden;
  margin: 0;
  color: var(--ui-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barter-market-page .post-shiny-row small {
  margin-left: auto;
  font-size: 10px;
}
@media (max-width: 520px) {
  .barter-market-page .post-shiny-list {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}
.site-theme .barter-market-page .post-send {
  align-self: center;
  justify-self: center;
  width: 170px;
  min-width: 170px;
  padding: 0 16px;
}
.barter-market-page .mine-listings .mk-grid {
  margin-top: 5px;
}
.barter-market-page .trade-list {
  padding: 9px 11px;
}
.barter-market-page .trade-list h3 {
  margin-bottom: 6px;
}
.barter-market-page .tr-empty.small {
  display: block;
  padding: 7px 9px;
  text-align: left;
}
.barter-market-page .tr-empty.small .tr-empty-icon {
  display: none;
}

/* v103 · avisos menores, barras de rolagem em pixel art e botões do topo da home alinhados */
#toasts {
  bottom: 16px;
  gap: 7px;
  width: min(350px, calc(100vw - 24px));
}
.toast-card {
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  gap: 9px;
  padding: 8px 7px 11px 9px;
  border-width: 2px;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}
.tc-medal {
  width: 40px;
  height: 40px;
}
.tc-medal b {
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.tc-medal b .item-sprite,
.tc-medal b .pixel {
  width: 24px;
  height: 24px;
}
.tc-ring {
  border-width: 2px;
}
.tc-p {
  width: 4px;
  height: 4px;
}
.tc-copy {
  gap: 1px;
}
.tc-copy em {
  font-size: var(--text-2xs);
  letter-spacing: 2px;
}
.tc-copy strong {
  font-size: var(--text-lg);
}
.tc-copy small {
  font-size: var(--text-md);
  line-height: 1.35;
}
.tc-close {
  width: 20px;
  height: 20px;
  font-size: var(--text-xl);
}
.tc-bar {
  height: 3px;
}
@media (max-width: 520px) {
  #toasts {
    width: min(320px, calc(100vw - 20px));
  }
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background: var(--pl-navy-900);
}
::-webkit-scrollbar-track {
  background-color: #071a33;
  background-image:
    linear-gradient(
      90deg,
      var(--pl-navy-900) 0 2px,
      transparent 2px calc(100% - 2px),
      var(--pl-navy-900) calc(100% - 2px)
    ),
    repeating-linear-gradient(0deg, #0b2340 0 2px, transparent 2px 4px);
}
::-webkit-scrollbar-track:horizontal {
  background-image:
    linear-gradient(
      0deg,
      var(--pl-navy-900) 0 2px,
      transparent 2px calc(100% - 2px),
      var(--pl-navy-900) calc(100% - 2px)
    ),
    repeating-linear-gradient(90deg, #0b2340 0 2px, transparent 2px 4px);
}
::-webkit-scrollbar-thumb {
  min-height: 34px;
  min-width: 34px;
  background: #4f86b8;
  border: 2px solid var(--pl-navy-900);
  box-shadow:
    inset 2px 2px 0 #9cd0f5,
    inset -2px -2px 0 #2c5f8f;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: #e6b93f;
  box-shadow:
    inset 2px 2px 0 #fff0a8,
    inset -2px -2px 0 #a97d14;
}
::-webkit-scrollbar-corner {
  background: var(--pl-navy-900);
}
::-webkit-scrollbar-button:single-button {
  display: block;
  width: 14px;
  height: 14px;
  background-color: #0b2a4c;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  border: 2px solid var(--pl-navy-900);
  box-shadow:
    inset 2px 2px 0 #2c5f8f,
    inset -2px -2px 0 var(--pl-navy-800);
}
::-webkit-scrollbar-button:single-button:hover {
  background-color: #123f6b;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23d6e7f8'%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='2' y='4' width='6' height='2'/%3E%3Crect x='0' y='6' width='10' height='2'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23d6e7f8'%3E%3Crect x='0' y='2' width='10' height='2'/%3E%3Crect x='2' y='4' width='6' height='2'/%3E%3Crect x='4' y='6' width='2' height='2'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23d6e7f8'%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='4' y='2' width='2' height='6'/%3E%3Crect x='6' y='0' width='2' height='10'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23d6e7f8'%3E%3Crect x='2' y='0' width='2' height='10'/%3E%3Crect x='4' y='2' width='2' height='6'/%3E%3Crect x='6' y='4' width='2' height='2'/%3E%3C/svg%3E");
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #4f86b8 #071a33;
  }
}

.site-theme .home-audio,
.account-bar {
  gap: 6px;
  padding: 6px;
}
.site-theme .home-audio .sfx-toggle.home-sfx-btn,
.site-theme .home-audio .lang-btn,
.ab-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  margin: 0;
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1;
}
.site-theme .home-audio .sfx-toggle.home-sfx-btn,
.ab-btn:not(.out) {
  width: 104px;
}
.site-theme .home-audio .lang-btn,
.ab-btn.out {
  width: 76px;
}
.site-theme .home-audio .sfx-toggle.home-sfx-btn svg {
  width: 14px;
  height: 14px;
}
.home-audio .lang-dd {
  margin-left: 0;
}
@media (max-width: 520px) {
  .site-theme .home-audio .sfx-toggle.home-sfx-btn,
  .site-theme .home-audio .lang-btn,
  .ab-btn,
  .ab-btn.out,
  .ab-btn:not(.out) {
    width: 44px;
    padding: 0;
  }
  .home-audio .lang-code,
  .ab-btn span {
    display: none;
  }
  .site-theme .home-audio .sfx-toggle .sfx-label {
    display: none;
  }
}
.ab-text {
  justify-items: start;
  text-align: left;
}

/* v104 · barra de som no rodapé da home e seta de movimento nos cartões do menu */
.site-theme .home-window .home-audio {
  margin: 14px 0 0;
}
.home-audio .lang-menu {
  top: auto;
  bottom: calc(100% + 7px);
}
.home-audio .lang-menu:before {
  top: auto;
  bottom: -7px;
  background: #071b34;
  border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg);
}

/* v105 · a seta do botão "Seguir para o santuário" (três divisas em movimento) vira a seta de todos os botões */
.chev {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  vertical-align: middle;
}
.chev i {
  display: block;
  width: 7px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
  animation: rg-chev 1.4s ease-in-out infinite;
}
.chev i:nth-child(2) {
  animation-delay: 0.15s;
}
.chev i:nth-child(3) {
  animation-delay: 0.3s;
}
.chev.back {
  margin: 0 8px 0 0;
  transform: scaleX(-1);
}
button:hover:not(:disabled) .chev i,
.btn:hover:not(:disabled) .chev i {
  animation-duration: 0.7s;
}
.card-go .chev {
  margin-left: 0;
}
.card-go .chev i {
  width: 8px;
  height: 14px;
  background: #7a2f00;
}
.pkt-next .chev {
  margin-left: 6px;
}
.pkt-next .chev i {
  width: 6px;
  height: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .chev i {
    animation: none;
    opacity: 1;
  }
}

/* home: Pokédex e Shiny Dex lado a lado (style.css deixava o menu em uma coluna) */
.site-theme .home-window:not(.auth-active) .home-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-theme .home-window:not(.auth-active) .home-menu-card:not(.wide) {
  min-height: 62px;
  padding: 9px 12px;
}
.site-theme .home-window:not(.auth-active) .home-menu-card:not(.wide) .home-menu-copy small {
  font-size: var(--text-xs);
  line-height: 1.3;
}
.site-theme .home-window:not(.auth-active) .home-menu-card {
  grid-column: auto;
}
.site-theme .home-window:not(.auth-active) .home-menu-card.wide {
  grid-column: 1/-1;
}

/* v106 · escolha do inicial mais compacta e proporcional */
.site-theme.menu-page:has(.pk-grid) .main {
  padding-top: 12px;
  padding-bottom: 14px;
}
.pk-intro .eyebrow {
  font-size: var(--text-2xs);
  letter-spacing: 2.4px;
}
.pk-intro h1 {
  margin: 2px 0 1px;
  font-size: 19px;
  letter-spacing: 0.8px;
}
.pk-intro p {
  font-size: var(--text-md);
}
.gift-banner {
  margin-top: 8px;
  padding: 3px 10px;
  gap: 8px;
}
.gift-banner .item-tag.big .item-sprite {
  width: 24px;
  height: 24px;
}
.gift-banner > span:first-child {
  font-size: var(--text-2xs);
  letter-spacing: 1.6px;
}
.gift-banner strong {
  font-size: var(--text-md);
}
.gift-banner small {
  font-size: var(--text-xs);
  line-height: 1.2;
}
.pk-lab {
  padding: 5px 8px;
  font-size: var(--text-sm);
}
.pk-card:hover .pk-halo {
  width: 128px;
  height: 128px;
}
.pk-shadow {
  width: 62px;
  height: 9px;
  bottom: 4px;
}
.pk-info {
  gap: 5px;
}
.pk-types {
  gap: 4px;
}
.pk-types .type-logo {
  font-size: var(--text-xs);
}
.pk-types .type-logo img,
.pk-types .type-logo svg {
  width: 14px;
  height: 14px;
}
.pk-stats {
  gap: 2px;
  padding: 5px 7px;
}
.pk-stats span {
  grid-template-columns: 32px 1fr;
  gap: 5px;
}
.pk-stats small {
  font-size: var(--text-3xs);
}
.pk-stats i {
  height: 4px;
}
.pk-challenge {
  gap: 4px 12px;
}
.pkc-art {
  width: 64px;
  height: 64px;
}
.pkc-ball {
  width: 50px;
  height: 50px;
}
.pkc-art b {
  right: 0;
  bottom: 2px;
  width: 22px;
  height: 22px;
  font-size: 14px;
}
.pkc-copy h2 {
  font-size: 17px;
  letter-spacing: 2px;
}
.pkc-copy p {
  font-size: var(--text-md);
  line-height: 1.35;
}
.pk-challenge .pkc-go {
  margin: 2px 0 0;
}
.pk-tips {
  gap: 6px;
}
.pkt-body {
  gap: 6px;
  padding: 7px 10px;
}
.pkt-body p {
  font-size: var(--text-md);
  line-height: 1.4;
}
.pk-challenge {
  padding: 8px 14px;
}
.pkc-copy {
  gap: 1px;
}
.pkc-go .btn.pk-go {
  min-height: 30px;
}

/* v107 · insígnias dos lendários no Trainer Card e notas de habilidade na tabela de tipos */
.tc-bdgs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bdg {
  display: grid;
  justify-items: center;
  background: linear-gradient(#0b2340, #071a33);
  border: 1px solid var(--pl-steel);
}
.bdg img {
  object-fit: contain;
  filter: grayscale(1) brightness(0.32) contrast(1.15);
  opacity: 0.8;
}
.bdg b {
  font-weight: 900;
  color: #5f7d9c;
}
.bdg.got {
  border-color: var(--ui-border);
  background: linear-gradient(#123c63, #0a2544);
  box-shadow: inset 0 0 0 1px var(--pl-navy-850);
}
.bdg.got img {
  filter: drop-shadow(0 2px 0 #0008);
  opacity: 1;
}
.bdg.got b {
  color: var(--ui-gold);
}
.tip-note {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: #9fc4e8;
}

/* insígnias em tamanho de insígnia */
.tc-bdgs {
  display: flex;
  flex-wrap: wrap;
}
.bdg {
  gap: 3px;
}
.tip-charts li.none {
  justify-content: center;
  color: #7d9ab8;
}

/* v108 · aviso de convidado: só o texto, menor e centralizado */
.site-theme .account-bar.guest {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 6px 14px;
  justify-content: center;
  text-align: center;
}
.account-bar.guest .ab-text {
  flex: none;
  justify-items: center;
  text-align: center;
}
.account-bar.guest .ab-text b {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
}
@media (max-width: 420px) {
  .site-theme .account-bar.guest {
    margin-bottom: 14px;
    padding: 6px 10px;
  }
  .account-bar.guest .ab-text b {
    font-size: 8.5px;
  }
}

/* v109 · tela do parceiro inicial no mesmo tamanho dos outros menus (660px de largura, altura natural) */
.menu-page:has(.pk-grid) .main,
.site-theme.menu-page:has(.pk-grid) .menu-top {
  width: calc(100% - 24px) !important;
  max-width: 660px !important;
}
.site-theme.menu-page:has(.pk-grid) .main {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 12px 14px;
  gap: 8px;
}
.pk-grid {
  gap: 8px;
  margin-top: 6px;
}
.pk-card {
  gap: 4px;
  padding: 8px 8px 10px;
}
.pk-top {
  font-size: var(--text-2xs);
}
.pk-portrait {
  height: 92px;
}
.pk-halo {
  width: 96px;
  height: 96px;
}
.pk-anim {
  width: 80px;
}
.pk-info h2 {
  font-size: 15px;
}
.pk-go-wrap .btn.pk-go {
  min-height: 32px;
  padding: 6px 4px;
  font-size: var(--text-xs);
  letter-spacing: 0.6px;
  gap: 5px;
}
.pk-extra {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.pk-tips {
  padding: 9px 10px;
}
@media (max-width: 760px) {
  .pk-portrait {
    height: 110px;
  }
  .pk-anim {
    width: 92px;
  }
}

/* v110 · ícones de tipo proporcionais ao cartão do parceiro (a regra base usa !important no tamanho) */
.pk-types .type-logo {
  height: auto;
  box-shadow: 1px 1px 0 #8d897c;
}

/* v111 · selos de tipo do cartão do parceiro mais discretos; marca de simulação */
.pk-types .type-logo {
  grid-template-columns: 14px auto;
  min-height: 20px;
  padding: 2px 6px 2px 3px;
  gap: 3px;
}
.pk-types .type-logo img {
  width: 14px !important;
  height: 14px !important;
}
.pk-types .type-logo strong {
  font-size: var(--text-3xs);
  letter-spacing: 0.2px;
}
.pk-card .pk-types .type-logo {
  grid-template-columns: 10px auto;
  min-height: 15px;
  padding: 1px 3px 1px 2px;
  gap: 2px;
}
.pk-card .pk-types .type-logo img {
  width: 10px !important;
  height: 10px !important;
}
.pk-card .pk-types .type-logo strong {
  font-size: 6.5px;
}
.pill.sim {
  color: #2b0a5c;
  background: linear-gradient(#f0dcff, #a855f7);
  border-color: #c58bff;
}
.sim-note {
  text-align: center;
  letter-spacing: 1px;
}

/* v112 · Trainer Card no formato de identidade (cartão pequeno, ~430px) */
.trainer-card {
  max-width: 430px;
  margin: 12px auto 8px;
  box-shadow:
    var(--ui-frame),
    2px 3px var(--pl-navy-950);
}
.trainer-card:before,
.trainer-card:after {
  top: 6px;
  width: 4px;
  height: 4px;
}
.trainer-card:before {
  left: 6px;
}
.trainer-card:after {
  right: 6px;
}
.tc-head {
  margin: 8px 8px 0;
  padding: 6px 12px 7px;
  border-bottom-width: 2px;
}
.tc-head h2 {
  font-size: var(--text-md);
  letter-spacing: 2.2px;
}
.tc-role,
.tc-region {
  padding: 2px 6px;
  font-size: var(--text-3xs);
  letter-spacing: 1px;
}
.tc-body {
  gap: 10px;
  padding: 10px 8px;
}
.tc-side {
  grid-row: auto;
  gap: 5px;
}
.tc-photo {
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-800),
    1px 2px var(--pl-navy-950);
}
.tc-c {
  width: 7px;
  height: 7px;
}
.tc-c.a,
.tc-c.b {
  top: 3px;
}
.tc-c.c,
.tc-c.d {
  bottom: 3px;
}
.tc-c.a,
.tc-c.c {
  left: 3px;
}
.tc-c.b,
.tc-c.d {
  right: 3px;
}
.tc-gems {
  grid-column: auto;
  grid-row: auto;
}
.tc-gem {
  width: 16px;
  height: 16px;
}
.tc-picker {
  margin: 0 8px 8px;
  padding: 8px;
}
.tc-badges {
  margin: 0 8px 8px;
  padding: 7px 9px 8px;
}
.tc-badges-head {
  margin-bottom: 7px;
}
.tc-badges-head span {
  font-size: var(--text-2xs);
  letter-spacing: 1.3px;
}
.tc-badges-head em {
  padding: 2px 7px;
  font-size: var(--text-2xs);
}
.tc-bdgs {
  gap: 6px;
}
.bdg {
  width: 44px;
  padding: 4px 1px 3px;
}
.bdg img {
  width: 28px;
  height: 28px;
}
.bdg b {
  font-size: 5.5px;
  letter-spacing: 0.4px;
}
@media (max-width: 560px) {
  .trainer-card {
    max-width: calc(100% - 4px);
  }
  .tc-body {
    gap: 8px;
    padding: 8px;
  }
  .tc-side {
    grid-row: auto;
  }
  .tc-head {
    margin: 8px 8px 0;
    padding: 6px 10px 7px;
  }
  .tc-picker,
  .tc-badges {
    margin: 0 8px 8px;
  }
}

/* v113 · etiqueta do tipo de golpe (físico / especial) ao lado do movimento */
.mv-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 5px;
  vertical-align: middle;
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1.3;
  color: #fff;
  border: 1px solid #0007;
  text-shadow: 0 1px 0 #0006;
}
.mv-tag.phys {
  background: #b84a2f;
}
.mv-tag.spec {
  background: #4a5fd0;
}

/* v114 · aposta 1 de 2 no Upgrader */
.bet-round {
  display: inline-block;
  align-self: center;
  margin: 0 0 6px;
  padding: 3px 10px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #0a2a12;
  background: linear-gradient(#b8f5a0, #5fd06a);
  border: 1px solid var(--pl-navy-850);
}
.bet-round.last {
  color: #3a2400;
  background: linear-gradient(var(--pl-gold-light), #f0a92e);
}
.capture-pokemon.target-card.captured {
  opacity: 0.6;
  filter: grayscale(0.5);
}
.capture-pokemon.target-card.captured .target-chance {
  color: #87ef42;
}

/* v115 · Hall da Fama com os seis Pokémon lado a lado */
.hall-team {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.hall-member {
  padding: 7px 3px 6px;
  gap: 2px;
}
.hall-portrait img.pixel {
  width: 52px;
  height: 52px;
}
.hall-member strong {
  font-size: var(--text-sm);
}
.hall-member small {
  font-size: var(--text-2xs);
}
.hall-ability {
  font-size: var(--text-3xs) !important;
  line-height: 1.3;
}
.hall-member em {
  font-size: var(--text-2xs);
}
.hall-member .tip-type {
  font-size: 6.5px;
  padding: 1px 3px;
}
.hall-types {
  gap: 2px;
}
@media (max-width: 560px) {
  .hall-team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hall-portrait img.pixel {
    width: 56px;
    height: 56px;
  }
}

/* v115 · página de trocas: cabeçalho, abas, filtro e botões no mesmo desenho e tamanho */
.tr-head {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  padding: 0 0 10px;
}
.tr-head h2 {
  font-size: 20px;
  letter-spacing: 2.5px;
}
.tr-head p {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ui-muted);
}
.trades-page {
  display: grid;
  gap: 10px;
  align-content: start;
}
.trades-page .trade-rules {
  gap: 8px;
  margin: 0;
}
.trades-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  height: 38px;
  padding: 0 16px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1;
  white-space: nowrap;
}
.trades-page .btn.tr-tab {
  width: 100%;
  padding: 0 6px;
  background: none;
  box-shadow: none;
}
.tr-tabs {
  gap: 8px;
}
.tr-tab .tr-badge {
  position: relative;
  z-index: 2;
}
.mk-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  gap: 8px;
}
.mk-bar input {
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-size: var(--text-lg);
  font-weight: 700;
  border: 2px solid var(--pl-steel);
  box-shadow: inset 0 2px 0 #00000055;
}
.trades-page .btn.tr-chip {
  background: none;
  box-shadow: none;
}
.tr-chip i {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: none;
  width: 14px;
  height: 14px;
  font-style: normal;
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
  color: #09213c;
  background: var(--pl-navy-850);
  border: 2px solid #7f9cba;
}
.tr-chip.on i {
  background: #fff6cf;
  border-color: #09213c;
}
.mk-count {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mk-grid {
  margin-top: 6px;
}
.mk-card {
  gap: 10px;
  padding: 12px;
}
.mk-card footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 8px;
}
.mk-card footer .btn,
.mk-offer .btn {
  width: 100%;
}
.mk-offer .btn {
  justify-self: stretch;
}
.tr-actions {
  gap: 8px;
}
.tr-actions .btn {
  min-width: 0;
}
.tr-empty {
  gap: 10px;
  padding: 32px 14px 30px;
  border: 2px dashed var(--pl-steel);
  background: linear-gradient(#061a35, #04122a);
}
.tr-empty b {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #fff;
}
.tr-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 24px;
  color: var(--pl-gold-light);
  background: radial-gradient(circle, #4a3a10, #0a2140 75%);
  border: 2px solid var(--ui-gold);
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.tr-empty .btn {
  margin-top: 4px;
  min-width: 180px;
}
.seg {
  gap: 8px;
}
.seg button {
  min-height: 38px;
  padding: 0 10px;
  border: 2px solid var(--pl-steel);
}
.seg button.on {
  border-color: var(--ui-gold);
}
.post-panel {
  gap: 12px;
  padding: 16px;
}
.post-send {
  justify-self: stretch;
}
.trade-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.trade-search input {
  min-width: 0;
  height: 38px;
}
@media (max-width: 640px) {
  .mk-bar {
    grid-template-columns: 1fr 1fr;
  }
  .mk-bar input {
    grid-column: 1/-1;
  }
  .trades-page .btn {
    padding: 0 10px;
  }
  .tr-tabs {
    grid-template-columns: 1fr 1fr;
  }
}
.capture-modal .upgrade-center > .bet-round {
  flex: none;
  margin: 8px auto 2px;
  padding: 4px 10px;
  line-height: 1.4;
}

/* v116 · Hall: cabeçalho sem troféu, botões menores, contadores; mochila com todos os Pokémon */
.hall-stats {
  flex-wrap: wrap;
  gap: 6px;
}
.hall-stats span {
  min-width: 0;
  padding: 6px 10px;
  text-align: center;
}
.hall-stats b {
  font-size: 17px;
}
.hall-stats small {
  font-size: var(--text-3xs);
  letter-spacing: 0.8px;
}
.hall-boss {
  padding: 6px 12px;
  background: none;
  border: 0;
  border-left: 3px solid var(--ui-gold);
}
.hall-boss span {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ui-muted);
}
.hall-boss strong {
  display: inline;
  font-size: var(--text-xl);
  color: #fff;
}
.hall-card > footer .btn {
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  font-size: var(--text-xs);
  letter-spacing: 0.8px;
}
.hall-card > footer {
  gap: 6px;
}
.compact-shell .expedition-dock .bag-grid {
  overflow-y: auto;
  overflow-x: hidden;
  grid-template-rows: none;
  grid-auto-rows: calc(50% - 2px);
}
@media (max-width: 760px) {
  .compact-shell .expedition-dock .bag-grid {
    grid-auto-rows: calc(25% - 2px);
  }
}

/* v117 · Organizar equipe (arrastar sprites entre o time e a mochila) */
.organize-modal {
  width: min(780px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}
.organize-modal .modal-body {
  overflow-y: auto;
}
.org {
  display: grid;
  gap: 12px;
}
.org-help {
  margin: 0;
  padding: 8px 12px;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.5;
  color: #a9c8e5;
  background: var(--pl-navy-800);
  border: 1px dashed var(--pl-steel);
}
.org-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(#0e2b4a, #08203c);
  border: 1px solid var(--ui-line);
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.org-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.org-panel h3 {
  margin: 0;
  font-size: var(--text-md);
  letter-spacing: 2px;
  color: var(--ui-gold);
}
.org-panel > header span {
  padding: 2px 9px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--ui-gold);
  background: #21394b;
  border: 1px solid var(--ui-border);
}
.org-team {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.org-slot {
  position: relative;
  display: grid;
  align-content: stretch;
  min-height: 132px;
  background: var(--pl-navy-800);
  border: 2px dashed var(--pl-steel);
}
.org-slot.filled {
  border-style: solid;
  border-color: var(--pl-steel);
}
.org-slot.empty {
  place-items: center;
  cursor: pointer;
}
.org-slot.empty:hover {
  border-color: #8af0ff;
}
.org-num {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 4px;
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--pl-slate);
}
.org-empty {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #557793;
}
.org-mon {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 7px;
  text-align: center;
  cursor: grab;
  background: linear-gradient(#0d2c4d, #071c36);
  border: 1px solid var(--pl-steel);
  user-select: none;
  -webkit-user-drag: element;
}
.org-slot .org-mon {
  border: 0;
  height: 100%;
}
.org-mon:hover {
  border-color: #8af0ff;
}
.org-mon:active {
  cursor: grabbing;
}
.org-mon img.pixel {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.org-mon strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: #fff;
}
.org-mon small {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--pl-slate);
}
.org-mon.shiny {
  box-shadow: inset 0 0 0 1px #7fe6ff66;
}
.org-mon.ko {
  filter: grayscale(0.8);
}
.org-hp {
  display: block;
  width: 80%;
  height: 5px;
  background: var(--pl-navy-900);
  border: 1px solid #ffffff30;
}
.org-hp b {
  display: block;
  height: 100%;
  background: #59d58a;
}
.org-hp.low b {
  background: #e5534b;
}
.org-cv {
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 900;
  color: var(--ui-gold);
}
.org-mon.selected {
  border-color: var(--ui-gold);
  box-shadow:
    0 0 0 2px var(--ui-gold),
    0 0 14px #ffd23f66;
  background: linear-gradient(#3a3210, #1d1a08);
}
.org-slot:has(.org-mon.selected) {
  border-color: var(--ui-gold);
}
.org-mon.dragging {
  opacity: 0.35;
}
.org .drop-target {
  outline: 2px dashed #8af0ff;
  outline-offset: 1px;
  background: #0b3550;
}
.org.has-selection .org-slot,
.org.has-selection .org-bag {
  cursor: pointer;
}
.org-bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}
.org-bag-empty {
  margin: 0;
  padding: 22px 10px;
  text-align: center;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ui-muted);
  border: 1px dashed var(--pl-steel);
  background: var(--pl-navy-800);
}
.org.locked .org-mon {
  cursor: not-allowed;
  opacity: 0.7;
}
@media (max-width: 620px) {
  .org-team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .org-bag-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }
}

/* v117 · Menu de simulação organizado (abas, busca e grade de botões iguais) */
.sim-page {
  gap: 12px;
}
.sim-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: end;
  gap: 14px;
  padding-bottom: 10px;
}
.sim-head input {
  height: 38px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  background: var(--pl-navy-850);
  border: 2px solid var(--pl-steel);
  box-shadow: inset 0 2px 0 #00000055;
}
.sim-head input:focus {
  outline: 2px solid var(--pl-gold);
  outline-offset: 1px;
}
.sim-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-line);
}
.sim-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--ui-muted);
  background: #0b2340;
  border: 1px solid var(--pl-steel);
  cursor: pointer;
}
.sim-tab small {
  padding: 1px 6px;
  font-size: var(--text-xs);
  color: var(--pl-sky);
  background: var(--pl-navy-850);
}
.sim-tab:hover {
  border-color: #8af0ff;
  color: #fff;
}
.sim-tab.on {
  color: var(--ui-gold);
  background: #21394b;
  border-color: var(--ui-gold);
}
.sim-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sim-btn {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px;
  height: auto !important;
  min-height: 46px;
  padding: 8px 12px !important;
  text-align: left;
  white-space: normal !important;
  font-size: var(--text-sm) !important;
  line-height: 1.3 !important;
}
.sim-btn small {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--pl-sky);
}
.sim-none {
  grid-column: 1/-1;
  margin: 8px 0;
}
@media (max-width: 760px) {
  .sim-head {
    grid-template-columns: 1fr;
  }
  .sim-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 460px) {
  .sim-list {
    grid-template-columns: 1fr;
  }
}

/* v118 · Passivos ativos no visual do site (a versão compacta do dock continua só com os ícones) */
.pi-copy,
.passive-empty small {
  display: none;
}
.modal .active-passives {
  margin: 12px 0 0;
  padding: 0;
  background: linear-gradient(#0e2b4a, #08203c);
  border: 1px solid var(--ui-line);
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
  color: var(--ui-text);
}
.modal .active-passives > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
}
.modal .active-passives > header strong {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ui-gold);
}
.modal .active-passives > header .stat-help {
  margin-right: auto;
}
.modal .active-passives > header small {
  min-width: 22px;
  padding: 2px 8px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--ui-gold);
  background: #21394b;
  border: 1px solid var(--ui-border);
}
.modal .passive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  padding: 12px;
}
.modal .passive-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  background: var(--pl-navy-800);
  border: 1px solid var(--pl-steel);
}
.modal .passive-item:hover,
.modal .passive-item:focus-visible {
  border-color: #8af0ff;
}
.modal .passive-item .item-sprite {
  flex: none;
  width: 32px;
  height: 32px;
}
.modal .pi-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.modal .pi-copy b {
  font-size: var(--text-md);
  color: #fff;
}
.modal .pi-copy em {
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ui-muted);
}
.modal .passive-empty {
  grid-column: 1/-1;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 16px 12px;
  text-align: center;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--ui-text);
  background: var(--pl-navy-800);
  border: 1px dashed var(--pl-steel);
}
.modal .passive-empty small {
  display: block;
  max-width: 420px;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ui-muted);
}

/* v119 · Upgrader: uma roleta por alvo e lista só com o que ainda pode ser capturado */
.shiny-rate.elite-rate {
  margin-bottom: 6px;
  color: #ffb0a8;
  background: linear-gradient(90deg, #3a1420, #1c0a14);
  border-color: #b8646d;
}
.shiny-rate.elite-rate span {
  color: #ff9a8f;
}
.shiny-rate.elite-rate strong {
  color: #ffd0c8;
}
.caught-strip {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  background: #0d3a24;
  border: 1px solid #4fb672;
}
.caught-strip b {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #8dffb0;
}
.caught-strip span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.caught-strip img.pixel {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
}
.caught-strip em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 800;
  color: #fff;
  background: var(--pl-navy-800);
  border: 1px solid var(--pl-steel);
}
.capture-pokemon.target-card.won {
  border-color: #4fb672;
  background: linear-gradient(#123d28, #0a2418);
}
.capture-pokemon.target-card.won .target-chance {
  color: #8dffb0;
}
.capture-pokemon.target-card.lost {
  filter: grayscale(0.6);
  opacity: 0.75;
}
.capture-pokemon.target-card.lost .target-chance {
  color: #ff9a8f;
}

/* v120 · explicação do Pokémon Elite na folha de chances */
.encounter-rate-sheet .elite-note {
  padding: 9px 12px;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: #f3d9d4;
  background: #2a1220;
  border-left: 3px solid #b8646d;
}
.encounter-rate-sheet .elite-note b {
  color: #ffb0a8;
}

/* v121 · Dificuldade do chefe no menu de simulação */
.diff-panel {
  display: grid;
  gap: 12px;
}
.diff-intro {
  margin: 0;
  padding: 10px 12px;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.6;
  color: #a9c8e5;
  background: var(--pl-navy-800);
  border: 1px dashed var(--pl-steel);
}
.diff-intro b {
  color: #fff;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.diff-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(145deg, #123354, #08203c);
  border: 1px solid var(--ui-line);
  box-shadow: 2px 3px var(--pl-navy-950);
}
.diff-card.on {
  border-color: var(--ui-gold);
  box-shadow:
    0 0 0 1px var(--ui-gold),
    2px 3px var(--pl-navy-950);
}
.diff-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.diff-card h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #fff;
}
.diff-card header em {
  padding: 2px 8px;
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #0a2a12;
  background: linear-gradient(#b8f5a0, #5fd06a);
}
.diff-stats {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ui-muted);
}
.diff-stats b {
  color: var(--ui-gold);
}
.diff-win {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.diff-win span {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--ui-muted);
  background: var(--pl-navy-800);
  border: 1px solid var(--pl-steel);
}
.diff-win b {
  font-size: 18px;
  letter-spacing: 0;
  color: #fff;
}
.diff-card .btn {
  width: 100%;
}
@media (max-width: 760px) {
  .diff-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= nível do treinador, nome do time no Hall e painel de jogadores ================= */
.ab-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ab-name b {
  flex: 0 1 auto;
  min-width: 0;
}
.oc-xp {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px 12px;
  margin: 0 22px 12px;
  padding: 8px 14px;
  background: linear-gradient(#0f3357, #082140);
  border: 2px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.oc-xp > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: #9fc4e8;
}
.oc-xp > strong {
  font-size: 16px;
  color: #8ff0a9;
}
.oc-xp > em {
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
}
.oc-xp .ab-xp {
  grid-column: 1/-1;
  max-width: none;
}

.hall-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hall-rename {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--pl-slate);
  background: #0a1834;
  border: 1px solid var(--pl-steel);
  cursor: pointer;
}
.hall-rename:hover,
.hall-rename:focus-visible {
  color: var(--pl-gold);
  border-color: var(--pl-gold);
}
.hall-team-name-input,
.hall-team-field input {
  display: block;
  width: min(280px, 100%);
  height: 32px;
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
  background: #04132a;
  border: 2px solid var(--pl-gold);
  border-radius: 0;
  outline: 0;
  box-sizing: border-box;
}
.hall-team-name-input::placeholder,
.hall-team-field input::placeholder {
  color: #8f7d3c;
}
.hall-team-field {
  display: grid;
  gap: 5px;
}
.hall-team-field > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
#hall-results {
  display: grid;
  gap: 12px;
}
.hall-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.hall-more {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

.home-menu-card.players-card {
  --accent: #34d399;
  --lip-b: #0f4b3a;
  --face-a: #1f6b57;
  --face-b: #0e3a30;
}
.players-page {
  display: grid;
  gap: 14px;
}
.players-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.players-head h2 {
  margin: 2px 0;
  color: #fff;
}
.players-head p {
  margin: 0;
  font-size: var(--text-md);
  color: #a9c1d6;
}
.players-head .eyebrow {
  color: var(--pl-gold);
}
.players-totals {
  display: flex;
  gap: 8px;
}
.players-totals span {
  display: grid;
  justify-items: center;
  background: var(--pl-navy-700);
  border: 1px solid #557793;
}
.players-totals b {
  color: var(--pl-gold);
}
.players-totals .on b {
  color: #8ff0a9;
}
.players-totals .bad b {
  color: #ff8a8a;
}
.players-totals small {
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-slate);
}
.players-refresh {
  min-height: 38px;
}
.players-count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.players-list {
  display: grid;
}
.players-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.ban-form {
  display: grid;
  gap: 12px;
}
.ban-lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: #c7d7ea;
}
.ban-form .field {
  display: grid;
  gap: 5px;
}
.ban-form .field > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.ban-form input,
.ban-form textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #04132a;
  border: 2px solid var(--pl-steel);
  border-radius: 0;
  outline: 0;
  box-sizing: border-box;
}
.ban-form input:focus,
.ban-form textarea:focus {
  border-color: var(--pl-gold);
}
.ban-form textarea {
  resize: vertical;
  min-height: 70px;
}
.ban-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ban-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.allin-skip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 2px;
  font-size: var(--text-md);
  font-weight: 800;
  color: #c7d7ea;
  cursor: pointer;
}
.allin-skip input {
  width: 16px;
  height: 16px;
  accent-color: var(--pl-gold);
}
.ban-perm {
  --ink: #ffd0d0;
}
.ban-perm.active {
  --lip-a: #ff9b9b;
  --lip-b: #7a1c2c;
  --face-a: #ff6b6b;
  --face-b: #a12a3f;
  --ink: #fff;
}

/* nível do treinador: etiqueta e barra de experiência */
.ab-lv {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-weight: 900;
  color: #3b2200;
  text-shadow: 0 1px 0 #fff9;
  background: linear-gradient(#fff3b5 0, #ffd75a 45%, #f0a924 100%);
}
.ab-lv:before {
  content: '';
  flex: none;
  background: #8a4b06;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
}
.ab-xp {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(#020b18, #06182e);
  border: 2px solid var(--pl-navy-800);
}
.ab-xp i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  min-width: 4px;
  overflow: hidden;
  background: linear-gradient(#d8ffe3 0 18%, #5fe58a 18% 55%, #26b45a 55% 100%);
  box-shadow:
    inset -2px 0 0 #b9ffd0,
    0 0 8px #4ade8099;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ab-xp i:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, #ffffff80 50%, transparent 65%);
  transform: translateX(-100%);
  animation: xp-shine 3.4s ease-in-out infinite;
}
.ab-xp:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ab-xp em {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  color: #fff;
}
@keyframes xp-shine {
  0%,
  55% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-xp i:after {
    animation: none;
  }
}

/* cards de jogador (painel de administração) */
.player-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'photo id side' 'stats stats stats' 'ban ban ban';
  align-items: center;
  background: linear-gradient(110deg, #123855, #071a32);
  border: 1px solid var(--pl-steel);
  border-left: 5px solid #557793;
  box-shadow: 2px 3px var(--pl-navy-950);
}
.player-card.online {
  border-left-color: #5fd06a;
}
.player-card.banned {
  border-left-color: #e05a5a;
  background: linear-gradient(110deg, #3a1826, #1a0b18);
}
.pc-photo {
  grid-area: photo;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #245a8c, #0a2140);
  border: 2px solid #33628f;
}
.pc-photo img {
  image-rendering: pixelated;
}
.pc-id {
  grid-area: id;
  display: grid;
  min-width: 0;
}
.pc-id > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pc-id > header > strong {
  color: #fff;
  overflow-wrap: anywhere;
}
.pc-tag {
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #0b1d34;
  background: var(--pl-gold);
}
.pc-tag.bad {
  background: #ff8a8a;
}
.pc-meta {
  display: flex;
  flex-wrap: wrap;
}
.pc-meta > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.pc-meta small {
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-gold);
}
.pc-meta b {
  font-weight: 800;
  color: #e6f0ff;
}
.pc-side {
  grid-area: side;
  display: grid;
  justify-items: end;
  align-content: center;
}
.pc-status {
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #9fb6d4;
  background: #0a1834;
  border: 1px solid var(--pl-steel);
}
.pc-status.on {
  color: #8ff0a9;
  background: #0d3324;
  border-color: #2f8f5a;
}
.pc-stats {
  grid-area: stats;
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--pl-steel);
  border: 1px solid var(--pl-steel);
}
.pc-stats > div {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  background: var(--pl-navy-700);
}
.pc-stats dt {
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.pc-stats dd {
  margin: 0;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
}
.pc-stats .lv dd {
  color: #ffd75a;
}
.pc-stats .lv small {
  font-weight: 800;
  color: #9fc4e8;
}
.pc-stats .zero dd {
  color: #5f7a9b;
}
.pc-ban {
  grid-area: ban;
  display: grid;
  gap: 2px;
  margin: 0;
  color: #ffd0d0;
  background: #3a1220;
  border: 1px solid #a04058;
}
.pc-ban b {
  color: #ff8a8a;
}

/* barra de conta: foto maior, nível e XP mais discretos */
.account-bar:not(.guest) {
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 18px;
}
.account-bar:not(.guest) .ab-photo {
  width: 60px;
  height: 60px;
}
.account-bar:not(.guest) .ab-photo img {
  width: 52px;
  height: 52px;
}
.account-bar:not(.guest) .ab-text {
  align-content: center;
  gap: 2px;
}
.account-bar .ab-name {
  gap: 6px;
}
.account-bar .ab-name b {
  font-size: 15px;
}
.ab-lv {
  gap: 3px;
  margin: 0 1px;
  padding: 0 6px 0 4px;
  font-size: var(--text-2xs);
  letter-spacing: 0.8px;
  line-height: 1.7;
  box-shadow:
    0 -1px 0 var(--pl-navy-800),
    0 1px 0 var(--pl-navy-800),
    -1px 0 0 var(--pl-navy-800),
    1px 0 0 var(--pl-navy-800),
    0 2px 0 #7a4707,
    inset 0 1px 0 #fffc;
}
.ab-lv:before {
  width: 7px;
  height: 7px;
}
.ab-xp {
  height: 9px;
  max-width: 170px;
  margin-top: 2px;
  border-width: 1px;
  box-shadow:
    0 0 0 1px #3c6a97,
    inset 0 1px 0 #000a;
}
.ab-xp:before {
  background: repeating-linear-gradient(90deg, transparent 0 7px, #03101f88 7px 8px);
}
.ab-xp em {
  font-size: 6.5px;
  letter-spacing: 0.6px;
  text-shadow: 1px 1px 0 #03101f;
}
.ab-xp.big {
  max-width: none;
}
.ab-xp.near {
  box-shadow:
    0 0 0 1px var(--pl-gold),
    0 0 6px #f6d77855,
    inset 0 1px 0 #000a;
}

/* cards de jogador mais compactos */
.players-list {
  gap: 6px;
}
.player-card {
  gap: 6px 10px;
  padding: 8px 10px;
}
.pc-photo {
  width: 42px;
  height: 42px;
}
.pc-photo img {
  width: 34px;
  height: 34px;
}
.pc-id {
  gap: 3px;
}
.pc-id > header {
  gap: 6px;
}
.pc-id > header > strong {
  font-size: 14px;
}
.pc-tag {
  font-size: var(--text-3xs);
  padding: 1px 5px;
}
.pc-meta {
  gap: 2px 16px;
}
.pc-meta small {
  font-size: var(--text-3xs);
}
.pc-meta b {
  font-size: var(--text-md);
}
.pc-side {
  gap: 5px;
}
.pc-status {
  padding: 2px 7px;
  font-size: var(--text-2xs);
}
.pc-side .btn {
  min-height: 0;
  height: 28px;
  padding: 0 14px;
  font-size: var(--text-sm);
}
.pc-stats > div {
  gap: 0;
  padding: 4px 3px;
}
.pc-stats dt {
  font-size: var(--text-3xs);
}
.pc-stats dd {
  font-size: 15px;
}
.pc-stats .lv small {
  font-size: var(--text-2xs);
}
.pc-ban {
  padding: 4px 8px;
  font-size: var(--text-sm);
}

/* botão de avisos e link de créditos */
.site-theme .home-audio .notif-toggle {
  width: 34px;
  height: 32px;
  margin: 0;
}
.credits-link {
  display: block;
  margin: 7px auto 0;
  padding: 3px 10px;
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.6px;
  color: #7f9dbd;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.credits-link:hover,
.credits-link:focus-visible {
  color: var(--pl-gold);
}
.credits-sheet {
  display: grid;
  gap: 14px;
  max-height: min(68vh, 560px);
  overflow: auto;
  padding-right: 4px;
}
.credits-sheet h3 {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  letter-spacing: 2px;
  color: var(--pl-gold);
}
.credits-sheet ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.credits-sheet li {
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  background: var(--pl-navy-700);
  border-left: 3px solid #33628f;
}
.credits-sheet li strong {
  font-size: var(--text-lg);
  color: #fff;
}
.credits-sheet li span {
  font-size: var(--text-md);
  line-height: 1.45;
  color: #b8cbe0;
}
.credits-sheet li a {
  font-size: var(--text-sm);
  color: var(--pl-sky);
  overflow-wrap: anywhere;
}
.credits-note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--pl-slate);
}

/* ================= skins: loja, coleção e administração ================= */
.site-theme .home-actions .admin-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.site-theme .home-actions .admin-row .home-menu-card {
  min-height: 58px;
}

/* cartão da loja na tela inicial: chama atenção */
.site-theme .home-menu-card.skin-shop-card {
  --lip-a: #ffe08a;
  --lip-b: #a3175f;
  --ink: #fff;
  --glow: #ffffff44;
  overflow: hidden;
  min-height: 78px;
  animation: ss-glow 2.2s ease-in-out infinite;
}
.site-theme .home-menu-card.skin-shop-card:after {
  background: linear-gradient(100deg, #6a1b9a, #e83e8c 30%, #ff9f1c 60%, #e83e8c 80%, #6a1b9a);
  background-size: 300% 100%;
  animation: ss-flow 6s linear infinite;
}
.ss-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #ffffffaa 48%, transparent 66%);
  transform: translateX(-120%);
  animation: ss-sweep 3.2s ease-in-out infinite;
}
.home-menu-card.skins-card {
  --accent: #c084fc;
  --lip-a: #c084fc;
  --lip-b: #3b1a66;
  --face-a: #5b2a86;
  --face-b: #241246;
}
.home-menu-card.admin-skins-card {
  --accent: #f6d778;
  --lip-a: #f6d778;
  --lip-b: #6b4308;
  --face-a: #7a5a12;
  --face-b: #2e2308;
}
.skin-shop-card .home-menu-copy strong {
  font-size: 17px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow:
    0 0 12px #fff,
    0 2px 0 #7a1055;
}
.skin-shop-card .home-menu-copy small {
  color: #fff2b8;
  font-weight: 800;
}
.site-theme .home-menu-card.skin-shop-card.closed {
  animation: none;
  filter: saturate(0.6);
}
.skin-shop-card:hover {
  transform: translateY(-2px) scale(1.01);
}
.ss-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  padding: 2px 8px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #4a0d33;
  background: linear-gradient(#fff6c2, var(--pl-gold-bright));
  border: 1px solid #7a4707;
  box-shadow: 0 0 0 2px var(--pl-navy-800);
  animation: ss-bounce 1.2s ease-in-out infinite;
}
.ss-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: ss-twinkle 1.8s ease-in-out infinite;
}
.ss-spark.s1 {
  left: 8%;
  top: 20%;
}
.ss-spark.s2 {
  left: 24%;
  top: 66%;
  width: 7px;
  height: 7px;
  animation-delay: 0.4s;
}
.ss-spark.s3 {
  left: 58%;
  top: 16%;
  animation-delay: 0.9s;
}
.ss-spark.s4 {
  left: 74%;
  top: 64%;
  width: 8px;
  height: 8px;
  animation-delay: 1.2s;
}
.ss-spark.s5 {
  left: 90%;
  top: 38%;
  width: 6px;
  height: 6px;
  animation-delay: 0.2s;
}
@keyframes ss-flow {
  to {
    background-position: 300% 0;
  }
}
@keyframes ss-sweep {
  0%,
  35% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes ss-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 2px #ffe08a44,
      0 0 16px #ff4fa388,
      3px 4px var(--pl-navy-950);
  }
  50% {
    box-shadow:
      0 0 0 2px #ffe08a99,
      0 0 32px #ff4fa3,
      3px 4px var(--pl-navy-950);
  }
}
@keyframes ss-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}
@keyframes ss-twinkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.5) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(45deg);
  }
}
@keyframes ss-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ss-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes ss-shadow {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(0.8);
    opacity: 0.3;
  }
}
@keyframes ss-halo {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
@keyframes ss-rise {
  0% {
    transform: translateY(20px) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(-360px) scale(1.2);
    opacity: 0;
  }
}
@keyframes ss-in {
  from {
    transform: translateY(26px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes ss-burst {
  from {
    transform: rotate(var(--a)) translateX(0) scale(0.4);
    opacity: 1;
  }
  to {
    transform: rotate(var(--a)) translateX(var(--d)) scale(1.3);
    opacity: 0;
  }
}
.ss-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe08acc 0, #ff7ac866 40%, transparent 70%);
  animation: ss-halo 2.4s ease-in-out infinite;
}
.ss-note {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: #b9a7de;
}
.ss-burst {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 5;
  pointer-events: none;
}
.ss-burst i {
  position: absolute;
  font-style: normal;
  font-size: 16px;
  color: #ffe08a;
  text-shadow: 0 0 8px var(--pl-gold-bright);
  animation: ss-burst 1.4s ease-out forwards;
  animation-delay: var(--dl);
}
@media (prefers-reduced-motion: reduce) {
  .skin-shop-card,
  .skin-shop-card * {
    animation: none !important;
  }
}

/* menu SKINS, seletores e janelas */
.skins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px;
}
.skin-card {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 6px;
  background: linear-gradient(#123855, #071a32);
  border: 2px solid #33628f;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.skin-card img {
  width: 84px;
  height: 84px;
  image-rendering: pixelated;
}
.skin-card strong {
  font-size: var(--text-lg);
  color: #fff;
  overflow-wrap: anywhere;
}
.skin-card small {
  font-size: var(--text-xs);
  font-weight: 800;
  color: #9fc4e8;
}
.skin-card.own {
  border-color: var(--pl-gold);
}
.skin-card.own:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 16px #f6d77855;
}
.skin-card.locked {
  cursor: default;
  opacity: 0.85;
}
.skin-card.locked img {
  filter: brightness(0) opacity(0.5);
}
.skin-card.on-sale {
  cursor: pointer;
  border-color: #ff7ac8;
  animation: ss-glow 2s ease-in-out infinite;
}
.sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  min-height: 11px;
}
.sc-tags i {
  font-style: normal;
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  color: #0b1d34;
  background: var(--pl-gold);
}
.skin-sheet {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.skin-sheet h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.skin-sheet p {
  margin: 0;
  font-size: var(--text-lg);
  color: #c7d7ea;
}
.skin-sheet-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
}
.skin-sheet-art img {
  position: relative;
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
  animation: ss-float 3s ease-in-out infinite;
}
.skin-use {
  display: grid;
  gap: 8px;
  width: min(320px, 100%);
}
.skin-tip {
  max-width: 340px;
  font-size: var(--text-sm) !important;
  line-height: 1.5;
  color: var(--pl-slate) !important;
}
.dex-skins {
  display: grid;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 8px 10px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.dex-skins h4 {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--pl-gold);
}
.skin-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.skin-pick span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.skin-select,
.hall-skin-select {
  padding: 4px 6px;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 800;
  color: #fff;
  background: #04132a;
  border: 1px solid var(--pl-steel);
  border-radius: 0;
}
.hall-skin-select {
  width: 100%;
  margin-top: 4px;
  font-size: var(--text-sm);
}

/* administração das skins */
.adm-skins {
  display: grid;
  gap: 14px;
}
.adm-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(#0d2c4d, #071c36);
  border: 2px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.adm-panel h3 {
  margin: 0;
  font-size: var(--text-md);
  letter-spacing: 2px;
  color: var(--pl-gold);
}
.adm-panel p {
  margin: 0;
  font-size: var(--text-md);
  color: #a9c1d6;
}
.adm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-panel input,
.adm-panel select {
  height: 36px;
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
  background: #04132a;
  border: 2px solid var(--pl-steel);
  border-radius: 0;
  box-sizing: border-box;
  max-width: 100%;
}
.adm-panel input[type='file'] {
  padding: 6px 8px;
  height: auto;
}
.adm-panel .field {
  display: grid;
  gap: 5px;
  margin: 0;
}
.adm-panel .field > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.adm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.adm-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.adm-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  background: #04132a;
  border: 2px solid var(--pl-steel);
}
.adm-thumb.big {
  width: 96px;
  height: 96px;
}
.adm-thumb img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}
.adm-thumb em {
  font-size: var(--text-xs);
  font-style: normal;
  color: #6f89a8;
}
.adm-list {
  display: grid;
  gap: 8px;
}
.adm-skin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(110deg, #123855, #071a32);
  border: 1px solid var(--pl-steel);
  border-left: 5px solid #557793;
}
.adm-skin.live {
  border-left-color: #5fd06a;
}
.adm-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.adm-info strong {
  font-size: 14px;
  color: #fff;
  overflow-wrap: anywhere;
}
.adm-info small {
  font-size: var(--text-md);
  color: #a9c1d6;
}
.adm-state {
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #9fb6d4;
}
.adm-state.on {
  color: #8ff0a9;
}
.adm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.adm-actions .btn {
  min-height: 0;
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-xs);
}
.skin-preview-modal {
  width: min(840px, calc(100vw - 24px));
}
.prev-lead {
  margin: 0 0 10px;
  font-size: var(--text-lg);
  color: #c7d7ea;
}
.prev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.prev-tile {
  display: grid;
  gap: 6px;
  margin: 0;
}
.prev-tile figcaption {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-gold);
}
.prev-box {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 10px;
  overflow: hidden;
  background: #071c36;
  border: 1px solid var(--pl-steel);
}
.prev-box .dex-grid {
  display: block;
}
.skins-page .dex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

/* ===================== v2: beta, correio, métricas, prêmios, reciclagem, volume, simulação ===================== */
.beta-tag {
  display: inline-block;
  align-self: flex-start;
  margin: 2px 0 0 6px;
  padding: 1px 5px;
  font-style: normal;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  line-height: 1.4;
  color: var(--pl-navy-800);
  background: linear-gradient(var(--pl-gold-light), #f0b43a);
  border: 1px solid #7a4707;
  box-shadow: 0 0 0 1px var(--pl-navy-850);
  transform: rotate(-4deg);
  text-shadow: none;
  white-space: nowrap;
  -webkit-text-stroke: 0;
}
.expedition-brand {
  display: inline-flex;
  align-items: flex-start;
}
.home-wordmark-row {
  position: relative;
  display: inline-block;
}
.home-wordmark-row .home-early-access {
  position: absolute;
  top: auto;
  bottom: -5px;
  right: 0;
  padding: 1px 4px;
  border: 1px solid #55b47b;
  border-radius: 2px;
  background: linear-gradient(#a0efb8, #54ba82);
  color: #073321;
  font-size: 6px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: none;
  transform: none;
}
.home-wordmark-row .beta-tag {
  position: absolute;
  right: -10px;
  top: -9px;
  margin: 0;
  font-size: var(--text-xs);
  transform: rotate(8deg);
}
@media (max-width: 520px) {
  .home-wordmark-row .beta-tag {
    right: -6px;
    top: -8px;
    font-size: var(--text-3xs);
    padding: 1px 4px;
  }
}
@keyframes ss-breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes ss-sheen-sweep {
  from {
    transform: translateX(-170%) skewX(-12deg);
  }
  to {
    transform: translateX(330%) skewX(-12deg);
  }
}
@keyframes ss-halo-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 2px var(--pl-navy-850),
      0 8px 22px #0008,
      0 0 0 #ffe08a00;
  }
  50% {
    box-shadow:
      inset 0 0 0 2px var(--pl-navy-850),
      0 8px 22px #0008,
      0 0 22px #ffe08a55;
  }
}

/* correio */
.ab-btn.mail {
  position: relative;
}
.mail-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ff4d6d;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 900;
  font-style: normal;
  border: 1px solid var(--pl-navy-850);
  box-shadow: 0 0 8px #ff4d6d;
  animation: mail-pulse 1.6s ease-in-out infinite;
}
@keyframes mail-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
.mail-page,
.adm-mail,
.mx-page,
.adm-lucky {
  display: grid;
  gap: 14px;
}
.mail-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.mail-list {
  display: grid;
  gap: 6px;
  max-height: 560px;
  overflow: auto;
  align-content: start;
}
.mail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  text-align: left;
  color: #d6e7f8;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
  cursor: pointer;
  font: inherit;
}
.mail-row.new {
  border-color: var(--pl-gold-light);
  background: #12305a;
}
.mail-row.on {
  outline: 2px solid #6fb3ff;
}
.mr-copy b {
  font-size: var(--text-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-copy small {
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.mr-gift {
  font-style: normal;
  color: var(--pl-gold-bright);
}
.mr-gift.done {
  color: #5fd06a;
}
.mail-reader {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background: linear-gradient(#0d2c4d, #071c36);
  border: 2px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
  min-height: 180px;
}
.mail-reader.empty {
  place-items: center;
  color: var(--pl-slate);
}
.mail-reader header {
  display: grid;
  gap: 3px;
}
.mail-reader h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.mail-reader small {
  color: var(--pl-slate);
  font-size: var(--text-sm);
}
.mail-body {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px;
  background: #061a33;
  border: 1px solid var(--pl-steel);
  color: #e6f0fb;
  font-size: var(--text-xl);
  line-height: 1.55;
  max-height: 340px;
  overflow: auto;
}
.mail-gifts {
  display: grid;
  gap: 8px;
}
.mail-gifts h4 {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 1.6px;
  color: var(--pl-sky);
}
.gift-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gift {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 6px 10px 6px 6px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-gold);
}
.gift img,
.gift svg {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}
.gift b {
  font-size: var(--text-xl);
  color: #fff;
  align-self: end;
}
.gift small {
  font-size: var(--text-xs);
  color: var(--pl-sky);
  letter-spacing: 0.5px;
  align-self: start;
}
.gift.shiny {
  border-color: #ff9be8;
}
.mail-done {
  margin: 0;
  color: #5fd06a;
  font-weight: 800;
}
@media (max-width: 760px) {
  .mail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .mail-list {
    max-height: 260px;
  }
}

/* administrador: correio, registro, vitrine, sorteio */
.adm-panel textarea {
  width: 100%;
  box-sizing: border-box;
  background: #061a33;
  color: #edf4ff;
  border: 2px solid var(--pl-steel);
  padding: 10px;
  font: inherit;
  font-size: var(--text-xl);
  line-height: 1.5;
  resize: vertical;
}
.mail-count {
  float: right;
  font-style: normal;
  color: var(--pl-slate);
  font-weight: 600;
  letter-spacing: 0;
}
.mail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-gold);
  font-size: var(--text-md);
  color: #fff;
}
.mail-chip img,
.mail-chip svg {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.mail-chip small {
  color: var(--pl-sky);
  font-size: var(--text-xs);
}
.mail-chip button {
  border: 0;
  background: transparent;
  color: #ff8a8a;
  cursor: pointer;
  font-weight: 900;
}
.mail-confirm {
  display: grid;
  gap: 12px;
}
.mail-confirm h3 {
  margin: 0;
  color: var(--pl-gold-bright);
  letter-spacing: 1px;
}
.mail-confirm dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.mail-confirm dl > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
}
.mail-confirm dt {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.mail-confirm dd {
  margin: 0;
}
.mc-text {
  white-space: pre-wrap;
  max-height: 120px;
  overflow: auto;
  background: #061a33;
  padding: 8px;
  border: 1px solid var(--pl-steel);
}
.mc-note {
  margin: 0;
  font-size: var(--text-md);
  color: #c9d9ee;
  line-height: 1.5;
}
.bad {
  color: #ff8a8a;
}
.adm-mail-row {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.adm-mail-row.rolled {
  opacity: 0.6;
}
.amr-head {
  display: grid;
  gap: 2px;
}
.amr-head small {
  color: var(--pl-slate);
  font-size: var(--text-sm);
}
.amr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.amr-stats {
  font-size: var(--text-sm);
  color: var(--pl-sky);
}
.audit-table {
  display: grid;
  border: 1px solid var(--pl-steel);
}
.audit-row {
  display: grid;
  grid-template-columns: 130px 90px 150px 130px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--text-md);
  border-top: 1px solid #1d3a5e;
  color: #d6e7f8;
  word-break: break-word;
}
.audit-row.head {
  background: var(--pl-navy-700);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
  border-top: 0;
}
.audit-tag {
  font-style: normal;
  padding: 1px 6px;
  font-size: var(--text-xs);
  font-weight: 900;
  background: #1c3f66;
  border: 1px solid #5b86b3;
}
.audit-tag.mail_rollback,
.audit-tag.ban,
.audit-tag.skin_delete {
  background: #5a1c2a;
  border-color: #c0505f;
}
@media (max-width: 760px) {
  .audit-row {
    grid-template-columns: 1fr 1fr;
  }
  .audit-row.head {
    display: none;
  }
}
.vit-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.vit-slot {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: center;
  min-height: 150px;
  padding: 8px;
  background: var(--pl-navy-700);
  border: 2px dashed var(--pl-steel);
  text-align: center;
}
.vit-slot.on {
  border: 2px solid var(--pl-gold);
  background: linear-gradient(#2c1a5a, #0d1c3f);
}
.vit-slot img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}
.vit-slot small {
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.vit-slot em {
  color: #546d8f;
  font-style: normal;
}
.lk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.lk-prize {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-gold);
}
.lk-art img {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
}
.lk-prize small {
  display: block;
  font-size: var(--text-xs);
  color: var(--pl-sky);
}
.lk-day {
  position: absolute;
  top: 3px;
  right: 26px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold-bright);
}
.lk-prize button {
  position: absolute;
  top: 2px;
  right: 4px;
  border: 0;
  background: transparent;
  color: #ff8a8a;
  cursor: pointer;
  font-weight: 900;
}
.skin-del {
  justify-items: center;
  text-align: center;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-lg);
  color: #d6e7f8;
}
.field.inline {
  display: inline-grid;
}

/* métricas */
.mx-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mx-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mx-tiles.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mx-tile {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  padding: 12px 6px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.mx-tile b {
  font-size: 24px;
  color: #fff;
}
.mx-tile span {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
  text-align: center;
}
.mx-tile small {
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.mx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mx-grid .wide {
  grid-column: 1/-1;
}
.mx-bar {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: var(--text-md);
}
.mx-l {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: #d6e7f8;
}
.mx-sp img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.mx-track {
  height: 12px;
  background: #061a33;
  border: 1px solid var(--pl-steel);
}
.mx-track i {
  display: block;
  height: 100%;
  background: linear-gradient(#6fb3ff, #2f74c0);
}
.mx-track.bad i {
  background: linear-gradient(#ff7b7b, #c0392b);
}
.mx-track.good i {
  background: linear-gradient(#7be08a, #2a8f3d);
}
.mx-v {
  text-align: right;
  color: #fff;
}
.mx-v small {
  color: var(--pl-slate);
  font-size: var(--text-xs);
}
.mx-stack {
  display: flex;
  height: 22px;
  border: 1px solid var(--pl-steel);
  overflow: hidden;
  background: #061a33;
}
.mx-legend {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-size: var(--text-md);
  color: #d6e7f8;
}
.mx-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}
.mx-heat {
  display: grid;
  gap: 3px;
  overflow-x: auto;
}
.mx-hr {
  display: grid;
  grid-template-columns: 70px repeat(9, minmax(34px, 1fr));
  gap: 3px;
}
.mx-hr.head span {
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--pl-sky);
  text-align: center;
}
.mx-rh {
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--pl-sky);
}
.mx-cell {
  display: grid;
  place-items: center;
  min-height: 30px;
  font-size: var(--text-lg);
  font-weight: 900;
  color: #fff;
  background: rgba(255, 80, 80, calc(0.12 + var(--a) * 0.8));
  border: 1px solid #1d3a5e;
}
.mx-cell.zero {
  background: var(--pl-navy-700);
  color: var(--pl-steel);
}
.mx-chart {
  width: 100%;
  height: 110px;
  background: #061a33;
  border: 1px solid var(--pl-steel);
}
.mx-chart .r {
  fill: #6fb3ff;
}
.mx-chart .n {
  fill: var(--pl-gold-bright);
}
.mx-key {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--pl-slate);
}
.mx-key i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 8px;
}
.mx-key i.r {
  background: #6fb3ff;
}
.mx-key i.n {
  background: var(--pl-gold-bright);
}
.mx-note {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--pl-slate);
}
@media (max-width: 760px) {
  .mx-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mx-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mx-bar {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .mx-v {
    grid-column: 1/-1;
    text-align: left;
  }
}

/* trocas: skins e shinies sobressalentes */
.tr-kind {
  max-width: 320px;
  margin: 0 0 6px;
}
.tr-kind-note {
  margin: 0 0 10px;
  font-size: var(--text-md);
  color: #abc5df;
}
.mon-card.skin .mc-art img {
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
}
.tr-tag.skin {
  background: #5b2a86;
  color: #f3e1ff;
}

/* reciclagem */
.dock-trash {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  overflow: visible;
  cursor: pointer;
}
.dock-trash:hover:not(:disabled) {
  background: linear-gradient(#5a1c2e, #3a1420);
  color: #ffd7d0;
}
.dock-trash:hover:not(:disabled) .trash-lid {
  transform: translateY(-1.5px) rotate(-8deg);
}
.dock-trash:active:not(:disabled) .trash-lid {
  transform: translateY(-1px) rotate(-4deg);
}
.dock-trash .trash-lid {
  transform-origin: 4px 5.5px;
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.dock-trash.over {
  background: linear-gradient(#c0392b, #8a2418);
  color: #fff;
  box-shadow:
    0 0 4px 1px #ff5a5a,
    0 0 16px #ff5a5a99;
  animation: trash-shake 0.35s ease-in-out infinite;
}
.dock-trash.over .trash-lid {
  transform: translateY(-2.5px) rotate(-16deg);
}
.dock-trash:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@keyframes trash-shake {
  0%,
  100% {
    rotate: 0deg;
  }
  25% {
    rotate: -4deg;
  }
  75% {
    rotate: 4deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dock-trash,
  .dock-trash * {
    transition: none !important;
    animation: none !important;
  }
}
.bag-slot[data-bag-item] {
  cursor: grab;
}
.recycle-sheet {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.recycle-sheet h3 {
  margin: 0;
}
.rc-art img {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
}
.rc-gain {
  font-size: 22px;
  font-weight: 900;
  color: var(--pl-gold-bright);
}
.rc-warn {
  margin: 0;
  color: #ff9be8;
  font-size: var(--text-lg);
}
.recycle-panel {
  display: grid;
  gap: 8px;
}
.recycle-panel h4 {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  letter-spacing: 1.5px;
  color: var(--pl-sky);
}
.rc-lead {
  margin: 0;
  font-size: var(--text-lg);
  color: #c9d9ee;
  line-height: 1.5;
}
.rc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.rc-mini img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}
.rc-row small {
  display: block;
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.rc-val {
  color: var(--pl-gold-bright);
}
.elite-drop.pickup {
  border-color: #8de08d;
}

/* volume da música */
.music-player {
  position: relative;
}
.vol-wrap {
  position: relative;
  display: inline-flex;
}
.vol-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #071d38;
  border: 2px solid #ba9849;
  box-shadow: 0 6px 18px #000a;
}
.vol-pop[hidden] {
  display: none;
}
.vol-range {
  width: 110px;
  accent-color: var(--pl-gold-bright);
}
.vol-val {
  min-width: 34px;
  font-size: var(--text-sm);
  color: var(--pl-gold-light);
}

/* simulação */
.sim-editor {
  padding: 14px 16px;
}
.sim-editor summary {
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--pl-gold-light);
  padding: 2px 0;
}
.sim-editor[open] summary {
  margin-bottom: 10px;
  border-bottom: 1px solid #1d3a5e;
  padding-bottom: 12px;
}
.sim-editor .se-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.sim-editor summary small {
  margin-left: 8px;
  color: var(--pl-slate);
  font-weight: 600;
  letter-spacing: 0;
}
.se-block {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #1d3a5e;
}
.se-block h4 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--pl-sky);
  letter-spacing: 1px;
}
.se-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.se-team select {
  width: 100%;
}
.se-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.se-hall {
  display: flex;
  gap: 6px;
  align-items: center;
}
@media (max-width: 760px) {
  .se-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* card do jogador: 6 números */
.pc-stats {
  grid-template-columns: 1.1fr repeat(5, 1fr);
}
.game-topbar .expedition-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.game-topbar .expedition-brand .beta-tag {
  margin: -2px 0 0 2px;
  padding: 0 4px;
  font-size: var(--text-3xs);
  transform: none;
}
@media (max-width: 420px) {
  .ab-actions {
    gap: 4px;
  }
  .ab-btn {
    min-width: 30px;
  }
  .ab-name {
    gap: 4px;
  }
  .ab-lv {
    flex: none;
    white-space: nowrap;
  }
  .ab-name b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.admin-mail-card .home-menu-copy strong:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 2h20v16H2z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M2 3l10 8 10-8' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 2h20v16H2z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M2 3l10 8 10-8' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

/* Trainer Card reorganizado: foto com botão flutuante, nome+nível+XP em destaque, estatísticas em chips, profissões (em breve) */
.tc-photo {
  position: relative;
}
.tc-edit-icon {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #102e4b;
  color: #d6e7f8;
  border: 2px solid var(--ui-gold);
  box-shadow: 0 2px 6px #000a;
  cursor: pointer;
  transition:
    transform 0.15s,
    color 0.15s;
}
.tc-edit-icon:hover,
.tc-edit-icon.on {
  color: var(--ui-gold);
  transform: scale(1.1);
}
.tc-main {
  display: grid;
  align-content: start;
}
.tc-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tc-username {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.tc-lv-chip {
  flex: none;
  padding: 3px 10px;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 1px;
  color: #3a2400;
  background: linear-gradient(var(--pl-gold-light), #f0b43a);
  border: 1px solid #7a4707;
  box-shadow: 0 0 0 1px var(--pl-navy-850);
}
.tc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tc-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
  background: linear-gradient(110deg, #123855, #071a32);
  border: 1px solid var(--ui-line);
  box-shadow: 2px 3px 0 var(--pl-navy-850);
}
.tc-stat span {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ui-gold);
}
.tc-stat b {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.tc-stat:first-child b {
  overflow-wrap: anywhere;
  white-space: normal;
}
.tc-stat.tc-gems b {
  color: #a8ecff;
}
.tc-jobs {
  display: grid;
  background: linear-gradient(var(--pl-navy-800), #081f3b);
  border: 1px dashed var(--ui-line);
}
.tc-jobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--ui-muted);
}
.tc-jobs-head em {
  font-style: normal;
  padding: 1px 6px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold-bright);
  border: 1px solid #7a4707;
  background: #21394b;
}
.tc-jobs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tc-job {
  display: flex;
  align-items: center;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.tc-job-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--pl-sky);
  background: var(--pl-navy-800);
  border-radius: 50%;
}
.tc-job b {
  color: #d6e7f8;
  font-weight: 800;
}
.tc-job small {
  margin-left: auto;
  font-weight: 900;
  color: var(--pl-gold-bright);
}
@media (max-width: 420px) {
  .tc-jobs-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .tc-username {
    font-size: 20px;
  }
  .tc-stats {
    grid-template-columns: 1fr 1fr;
  }
  .tc-stat.tc-gems {
    grid-column: 1/-1;
  }
}

/* ===================== v3: biomas, minigames, notas de atualização ===================== */
.notes-banner {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #1b2f52, #152648 60%, #122140);
  border: 1px solid #3a5a82;
  border-left: 4px solid #ffb37a;
  color: #d6e7f8;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}
.notes-banner:hover {
  transform: translateX(2px);
}
.nb-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #ffb37a;
  background: var(--pl-navy-700);
  border: 1px solid #ffb37a55;
  border-radius: 50%;
}
.notes-banner:hover {
  border-color: var(--pl-gold-bright);
  background: linear-gradient(90deg, #233b63, #16264a);
}
.nb-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.nb-copy b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.nb-count {
  font-style: normal;
  padding: 0 5px;
  font-size: var(--text-2xs);
  color: var(--pl-navy-800);
  background: var(--pl-sky);
  border-radius: 8px;
}
.nb-arrow {
  flex: none;
  font-size: 18px;
  color: #557793;
}
.nb-copy small {
  font-size: var(--text-md);
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nb-badge {
  flex: none;
}
.notes-sheet {
  display: grid;
  gap: 12px;
  max-height: 70vh;
  overflow: auto;
}
.note-card {
  padding: 14px 16px;
  background: linear-gradient(#0d2c4d, #071c36);
  border: 1px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.note-card.new {
  border-color: var(--pl-gold-bright);
}
.note-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.note-card h3 {
  margin: 0;
  font-size: 15px;
  color: #fff;
}
.note-card small {
  font-size: var(--text-sm);
  color: var(--pl-slate);
  white-space: nowrap;
}
.note-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-xl);
  line-height: 1.55;
  color: #dbe8f7;
}
.note-body.small {
  font-size: var(--text-lg);
  color: #c9d9ee;
  max-height: 80px;
  overflow: auto;
}

/* biomas */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.bio-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 0 0 12px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.bio-art {
  display: block;
  height: 80px;
  background-size: cover;
  background-position: center;
}
.bio-info {
  display: grid;
  gap: 6px;
  padding: 0 12px;
}
.bio-info h3 {
  margin: 0;
  font-size: 14px;
  color: #fff;
}
.bio-info small {
  font-size: var(--text-sm);
  color: var(--pl-slate);
}
.bio-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bio-type {
  padding: 2px 7px;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #d6e7f8;
  background: #1c3f66;
  border: 1px solid #3a5a82;
}
.bio-actions {
  display: grid;
  gap: 6px;
  padding: 0 12px;
}
.bio-sheet {
  display: grid;
  gap: 12px;
  max-height: 74vh;
  overflow: auto;
}
.bio-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bio-type-btn {
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #d6e7f8;
  background: #102e4b;
  border: 1px solid #557793;
  cursor: pointer;
}
.bio-type-btn.on {
  color: var(--pl-navy-800);
  background: linear-gradient(var(--pl-gold-light), #f0b43a);
  border-color: #7a4707;
}
.bio-tiers {
  display: grid;
  gap: 8px;
}
.bio-tier {
  display: grid;
  gap: 6px;
}
.bio-tier b {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-sky);
}
.bio-tier-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bio-mon {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 52px;
}
.bio-mon img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.bio-mon small {
  font-size: var(--text-2xs);
  color: #abc5df;
  text-align: center;
  line-height: 1.1;
}

/* minigames */
.mg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.mg-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 20px 16px;
  background: linear-gradient(160deg, #123855, #071a32);
  border: 2px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
  text-align: center;
  justify-items: center;
}
.mg-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--pl-gold-bright);
  background: var(--pl-navy-700);
  border: 2px solid #557793;
  border-radius: 50%;
}
.mg-card h3 {
  margin: 4px 0 0;
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff;
}
.mg-card p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #c9d9ee;
}
.mg-lv {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-sky);
}
.mg-lv b {
  font-size: 14px;
  color: #fff;
}
.mg-soon {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-slate);
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.mg-note {
  margin: 4px 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--pl-slate);
}
@media (max-width: 560px) {
  .mg-grid {
    grid-template-columns: 1fr;
  }
}

/* identidade visual dos painéis de administrador: ícone e cor por seção */
.adm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.adm-head.mail {
  --adm-accent: #6fb3ff;
}
.adm-head.metrics {
  --adm-accent: #7be08a;
}
.adm-head.skins {
  --adm-accent: #ff9be8;
}
.adm-head.sim {
  --adm-accent: #c084fc;
}
.adm-head.lucky {
  --adm-accent: #ffd23f;
}
.adm-head.biomes {
  --adm-accent: #7fe0a0;
}
.adm-head.notes {
  --adm-accent: #ffb37a;
}
.adm-head {
  flex-wrap: nowrap;
}
.adm-head > div {
  flex: 1;
  min-width: 0;
}
.adm-head h2 {
  color: #fff;
  padding-bottom: 4px;
  display: block;
  width: fit-content;
}
.tr-empty.small {
  padding: 14px 10px;
  gap: 4px;
}
.tr-empty.small .tr-empty-icon {
  font-size: 18px;
}
.tr-empty.small p {
  margin: 0;
  font-size: var(--text-md);
  color: var(--pl-slate);
}
.tr-head .eyebrow {
  color: #72d6b2;
  letter-spacing: 2px;
  font-size: var(--text-xs);
}
.tr-head h2 {
  margin: 4px 0 2px;
  color: #fff;
}
.mail-hd .eyebrow {
  color: #6fb3ff;
  letter-spacing: 2px;
  font-size: var(--text-xs);
}
.mail-hd h2 {
  margin: 4px 0 2px;
  color: #fff;
}
.mail-reader.empty {
  gap: 10px;
}
.mail-reader-icon {
  color: #3a5a82;
  opacity: 0.7;
}
.mail-reader-icon svg {
  width: 34px;
  height: 29px;
}
.mg-hd .eyebrow {
  color: #ffb37a;
  letter-spacing: 2px;
  font-size: var(--text-xs);
}
.mg-hd h2 {
  margin: 4px 0 2px;
  color: #fff;
}
.mg-card {
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.mg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px #0006;
}
.mg-icon {
  box-shadow: 0 0 14px #ffd23f33;
}

/* ===================== v5: revisão de tamanhos e alinhamento dos painéis de administração ===================== */
/* formulários de admin: botões do tamanho dos campos, linhas alinhadas pela base */
.adm-row {
  align-items: flex-end;
}
.adm-panel .btn {
  min-height: 36px;
  height: 36px;
  padding: 0 16px;
  font-size: var(--text-md);
  letter-spacing: 0.9px;
}
.adm-panel .btn .item-sprite {
  width: 15px;
  height: 15px;
  margin: -3px 4px -3px 0;
}
.bio-page,
.adm-notes {
  display: grid;
  gap: 14px;
}
.players-totals span {
  min-width: 76px;
  padding: 5px 10px;
}
.players-totals b {
  font-size: 16px;
}
.players-totals small {
  font-size: var(--text-3xs);
}
.sim-tab {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-xs);
}

/* busca de jogadores (admin): mais compacta */
.players-tools {
  padding: 8px 10px 9px;
  gap: 8px 10px;
}
.players-tools .dex-field {
  gap: 3px;
}
.players-tools .dex-field > span {
  font-size: var(--text-2xs);
}
.players-tools .dex-field input,
.players-tools .dex-field select {
  height: 30px;
  font-size: var(--text-md);
}
.players-tools .dex-chip {
  padding: 5px 9px;
  min-height: 30px;
}
.players-tools .players-refresh {
  min-height: 30px;
  height: 30px;
}

/* Trainer Card: foto maior, XP e cartões de estatística um pouco menores para alinhar visualmente */
.tc-body {
  grid-template-columns: 108px minmax(0, 1fr);
}
.tc-photo {
  width: 108px;
  height: 108px;
}
.tc-photo img {
  width: 96px;
  height: 96px;
}
.tc-main {
  gap: 8px;
}
.ab-xp.big {
  height: 12px;
}
.ab-xp.big em {
  font-size: var(--text-3xs);
}
.tc-stats {
  gap: 6px;
}
.tc-stat {
  padding: 6px 9px;
}
.tc-stat b {
  font-size: var(--text-lg);
}
.tc-jobs {
  margin: 0 8px 12px;
  padding: 9px 10px;
  gap: 7px;
}
.tc-jobs-row {
  gap: 8px;
}
.tc-job {
  padding: 6px 8px;
  gap: 7px;
}
.tc-job-icon {
  width: 24px;
  height: 24px;
}
.tc-job-icon .item-sprite {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.tc-job b {
  font-size: var(--text-sm);
}
.tc-job small {
  font-size: var(--text-xs);
}

/* menu de simulação: sem cor de destaque roxa no cabeçalho */
.sim-head {
  border-bottom-color: var(--ui-line);
}
.sim-head .eyebrow {
  color: var(--pl-gold);
}
.sim-head h2 {
  border-bottom-color: var(--ui-line);
}
@media (max-width: 560px) {
  .tc-body {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .tc-photo {
    width: 96px;
    height: 96px;
  }
  .tc-photo img {
    width: 84px;
    height: 84px;
  }
}

/* ===================== v6: linha colorida removida, notas mais compactas, prévia do upgrader, skins premium ===================== */
/* nenhum título de painel usa mais linha colorida embaixo do nome */
.adm-head h2 {
  border-bottom: 0;
}
.sim-head {
  border-bottom: 0;
}
.sim-head h2 {
  border-bottom: 0;
}
.tr-head {
  border-bottom: 0;
}
.mail-hd {
  border-bottom: 0;
}
.mg-hd {
  border-bottom: 0;
}

/* botões de linhas de lista (correio enviado, notas) do tamanho das outras ações de admin */
.adm-list .btn {
  min-height: 0;
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-xs);
  letter-spacing: 0.6px;
}

/* notas de atualização: título e destaque lado a lado, texto menor, menos espaço no total */
#note-form {
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
#note-form > h3 {
  grid-column: 1/-1;
}
#note-form > .field:nth-of-type(1) {
  order: 1;
}
#note-form > .field:nth-of-type(3) {
  order: 2;
}
#note-form > .field:nth-of-type(2) {
  order: 3;
  grid-column: 1/-1;
}
#note-form > .adm-row {
  order: 4;
  grid-column: 1/-1;
}
@media (max-width: 560px) {
  #note-form {
    grid-template-columns: 1fr;
  }
}

/* prévia de skin no Upgrader: caixa do tamanho certo para mostrar a carta inteira, sem cortar/rolar */
.prev-box.cap {
  min-height: 230px;
  align-items: start;
  padding: 14px 10px;
}
.prev-box.cap .target-roster {
  display: block;
  overflow: visible;
  max-height: none;
  padding: 0;
}
.prev-box.cap .capture-pokemon {
  grid-template-columns: 1fr;
  min-height: 0;
  width: 100%;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px;
}
.prev-box.cap .target-number {
  display: none;
}
.prev-box.cap .target-portrait {
  height: auto;
}
.prev-box.cap .target-portrait .pixel {
  width: 100px;
  height: 100px;
}
.prev-box.cap .target-identity {
  justify-content: center;
  gap: 6px;
}
.prev-box.cap .target-identity strong {
  font-size: 15px;
}
.prev-box.cap .target-types {
  justify-content: center;
}

/* coleção de skins: toque premium (brilho ambiente, brilho ao passar o mouse) e botões do mesmo tamanho */
.skins-page {
  position: relative;
}
.skin-card.own {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* a varredura passa por baixo da arte e do texto (z-index negativo) e para fora da carta no fim (forwards) */
.skin-card.own:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent, #ffffffb0, transparent);
  opacity: 0;
  transform: translateX(-170%) skewX(-12deg);
  transition: opacity 0.25s;
}
.skin-card.own:hover:before {
  opacity: 1;
  animation: ss-sheen-sweep 1.9s ease-out forwards;
}

/* patch notes: botão simples igual aos demais do menu, com um selo de "novo" chamativo no canto */
.notes-card {
  --menu-accent: #ffb37a;
}
.nb-badge {
  position: absolute;
  z-index: 1;
  padding: 2px 7px;
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: #ff4d6d;
  border: 1px solid var(--pl-navy-850);
  box-shadow: 0 0 8px #ff4d6d;
  animation: mail-pulse 1.6s ease-in-out infinite;
}

/* ===================== v7: correção do selo "NOVO" (ficava coberto pelo card de cima) ===================== */
.nb-badge {
  top: 6px;
  right: 10px;
}

/* ===================== v8: convidado, coleção de skins, correio estilo e-mail, Jirachi, fundo animado ===================== */
/* menus que pedem conta (convidado/visitante): visíveis, mas apagados e com selo "CONTA" */
.home-menu-card.needs-account {
  filter: saturate(0.45) brightness(0.8);
}
.home-menu-card.needs-account:hover:not(:disabled) {
  filter: saturate(0.75) brightness(0.95);
}
.acct-lock {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  border: 1px solid #ffe28a88;
}
.acct-lock:before {
  width: 8px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z' fill='black'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z' fill='black'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

/* coleção de skins: cabeçalho compacto e "premium", sem brilho vazando pela página */
.skins-page {
  display: grid;
  gap: 10px;
  isolation: auto;
}
.sk-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse 70% 140% at 0% 0%, #6a2fa066, transparent 62%),
    radial-gradient(ellipse 60% 140% at 100% 100%, #ff9be833, transparent 60%),
    linear-gradient(135deg, #17305a, #0a1c38);
  border: 2px solid #b98bff;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-850),
    0 0 16px #b98bff33;
}
.sk-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, #ffffff1f 47%, transparent 56%);
  background-size: 260% 100%;
  animation: sk-sheen 7s ease-in-out infinite;
}
@keyframes sk-sheen {
  0% {
    background-position: 160% 0;
  }
  55%,
  100% {
    background-position: -60% 0;
  }
}
.sk-title {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.sk-title .eyebrow {
  color: var(--pl-gold-bright);
  letter-spacing: 3px;
  font-size: var(--text-sm);
}
.sk-title h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 12px #ff9be866;
}
.sk-title p {
  margin: 0;
  font-size: var(--text-md);
  color: #d9c9f5;
}
.sk-count {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 130px;
}
.sk-count b {
  font-size: 26px;
  line-height: 1;
  color: var(--pl-gold-light);
  text-shadow: 0 0 10px #ffd23f55;
}
.sk-count b small {
  font-size: var(--text-xl);
  color: #cbb8ee;
}
.sk-count > span {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.6px;
  color: #cbb8ee;
}
.sk-count .dex-bar {
  width: 100%;
}
.sk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sk-bar .dex-chips {
  display: flex;
  gap: 6px;
}
.sk-bar .dex-chip {
  min-height: 32px;
  padding: 6px 12px;
}
.sk-bar .btn {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  font-size: var(--text-sm);
  letter-spacing: 1px;
}
.sk-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: var(--text-md);
  color: #ffe9a6;
  background: #231a07;
  border: 1px solid #f6d77866;
}
.sk-guest .btn {
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  font-size: var(--text-xs);
}
.sk-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(110deg, #1b1442, #0a1c38);
  border: 1px dashed #b98bff66;
}
.sk-empty-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--pl-gold-bright);
  background: var(--pl-navy-850);
  border: 1px solid #ffd23f88;
  box-shadow: 0 0 14px #ffd23f33;
}
.sk-empty b {
  display: block;
  font-size: var(--text-xl);
  color: #fff;
}
.sk-empty p {
  margin: 2px 0 0;
  font-size: var(--text-md);
  color: #b9a8dd;
}
.skins-page .ss-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--pl-slate);
  text-align: left;
}
@media (max-width: 520px) {
  .sk-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sk-count {
    justify-items: start;
    min-width: 0;
  }
  .sk-title h2 {
    font-size: 22px;
  }
  .sk-guest {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* correio com cara de cliente de e-mail */
.mail-page {
  gap: 10px;
}
.mail-client {
  display: grid;
  background: #071c36;
  border: 2px solid #33628f;
  box-shadow: inset 0 0 0 2px var(--pl-navy-850);
}
.mc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  background: linear-gradient(#123a63, #0b2748);
  border-bottom: 1px solid #33628f;
}
.mc-bar-icon {
  display: grid;
  color: var(--pl-sky);
}
.mc-bar b {
  font-size: var(--text-lg);
  letter-spacing: 1px;
  color: #fff;
}
.mc-count {
  padding: 1px 7px;
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 900;
  color: #0b1d34;
  background: var(--pl-gold-bright);
}
.mc-bar .btn {
  margin-left: auto;
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  font-size: var(--text-xs);
  letter-spacing: 0.8px;
}
.mail-client .mail-layout {
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.mail-client .mail-list {
  gap: 0;
  max-height: 460px;
  overflow: auto;
  border-right: 1px solid #1d3a5e;
  background: #06172e;
}
.mail-client .mail-row {
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid #1d3a5e;
  background: transparent;
}
.mail-client .mail-row:hover {
  background: #0d2748;
}
.mail-client .mail-row.on {
  outline: 0;
  background: #123a63;
  box-shadow: inset 3px 0 0 #6fb3ff;
}
.mail-client .mail-row.new {
  border-color: #1d3a5e;
  background: #0b2340;
}
.mail-client .mail-row.new .mr-subj {
  color: #fff;
  font-weight: 900;
}
.mail-client .mail-row.new .mr-avatar {
  box-shadow:
    0 0 0 2px #06172e,
    0 0 0 3px #ff4d6d;
}
.mr-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--text-lg);
  font-weight: 900;
  color: #0b1d34;
  background: var(--pl-gold);
}
.mr-avatar.bug {
  color: #fff;
  background: #e0556b;
}
.mr-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.mr-top time {
  flex: none;
}
.mr-from {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.mr-from b {
  font-size: var(--text-sm);
  color: #d6e7f8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-tag {
  padding: 0 4px;
  font-style: normal;
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #fff;
  background: #e0556b;
}
.mr-subj {
  overflow: hidden;
  font-size: var(--text-md);
  color: #a9c1d6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-list-empty {
  margin: 0;
  padding: 18px 12px;
  font-size: var(--text-md);
  color: var(--pl-slate);
  text-align: center;
}
.mail-client .mail-reader {
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.mail-client .mail-reader.empty {
  place-items: center;
  align-content: center;
  min-height: 180px;
  text-align: center;
}
.mr-head {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1d3a5e;
}
.mr-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
  overflow-wrap: anywhere;
}
.mr-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mr-meta > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.mr-meta small {
  font-size: var(--text-xs);
  color: var(--pl-slate);
}
.mail-client .mail-body {
  max-height: 300px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: var(--text-xl);
}
.mail-client .mail-gifts {
  padding: 10px;
  background: var(--pl-navy-700);
  border: 1px solid var(--pl-steel);
}
.mail-client .mail-gifts h4 {
  font-size: var(--text-xs);
  letter-spacing: 1.6px;
}
.mail-client .mail-collect {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  font-size: var(--text-sm);
  justify-self: start;
}
@media (max-width: 760px) {
  .mail-client .mail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .mail-client .mail-list {
    max-height: 230px;
    border-right: 0;
    border-bottom: 1px solid #33628f;
  }
  .mail-client .mail-reader.empty {
    min-height: 110px;
  }
}

/* barra do treinador: botões menores e alinhados à linha do nome/XP */
.account-bar:not(.guest) {
  align-items: center;
}
.account-bar:not(.guest) .ab-actions {
  align-self: center;
  gap: 5px;
}
.ab-btn,
.ab-btn:not(.out),
.ab-btn.out {
  width: auto;
  height: 26px;
  padding: 0 9px;
  gap: 5px;
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  white-space: nowrap;
}
.ab-btn svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 520px) {
  .ab-btn,
  .ab-btn:not(.out),
  .ab-btn.out {
    width: 34px;
    height: 32px;
    padding: 0;
  }
}

/* profissões com barra de nível */
.tc-job-info {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.tc-job-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.tc-job-top small {
  margin-left: 0;
}
.tc-job-bar {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  background: #020b18;
  border: 1px solid var(--pl-navy-800);
  box-shadow: 0 0 0 1px var(--pl-steel);
}
.tc-job-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(#bfe6ff, #4fa8e6);
}

/* lixeira no mesmo estilo de botão pixelado do ORGANIZAR, alinhada a ele */
.dock-trash {
  --line: #1c0510;
  --lip-a: #d06b7a;
  --lip-b: #4a1020;
  --face-a: #7a2436;
  --face-b: #46182a;
  --ink: #ffd0cc;
  isolation: isolate;
  align-self: stretch;
  width: 34px;
  height: auto;
  min-height: 0;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: var(--line) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  clip-path: var(--px-o);
  transition:
    transform 0.12s,
    filter 0.15s;
}
.dock-trash:before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 2px;
  right: 2px;
  bottom: -1px;
  left: 2px;
  background: linear-gradient(var(--lip-a), var(--lip-b));
  clip-path: var(--px-in);
  pointer-events: none;
}
.dock-trash:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  background: linear-gradient(var(--face-a), var(--face-b));
  box-shadow:
    inset 0 2px 0 #ffffff3a,
    inset 0 -2px 0 #0000002e;
  clip-path: var(--px-in);
  pointer-events: none;
}
.dock-trash:hover:not(:disabled) {
  --face-a: #943045;
  --face-b: #5a1c2e;
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.dock-trash.over {
  --face-a: #e04a3a;
  --face-b: #a0281c;
  --ink: #fff;
  transform: scale(1.12);
}
.dock-trash .trash-svg {
  position: relative;
  z-index: 1;
}

/* fundo: a grama balança com o vento e os vagalumes piscam devagar */
.meadow-breeze {
  -webkit-mask-image: linear-gradient(transparent 64%, #000 78%) !important;
  mask-image: linear-gradient(transparent 64%, #000 78%) !important;
  transform-origin: 50% 100%;
  animation: meadow-sway 9s ease-in-out infinite !important;
  will-change: transform;
}
@keyframes meadow-sway {
  0%,
  100% {
    transform: skewX(-0.9deg) scaleX(1.03);
  }
  30% {
    transform: skewX(1.2deg) scaleX(1.03);
  }
  55% {
    transform: skewX(-0.3deg) scaleX(1.03);
  }
  78% {
    transform: skewX(1.4deg) scaleX(1.03);
  }
}
.fireflies {
  position: absolute;
  inset: 0;
}
.fireflies i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 3px;
  height: 3px;
  background: #fff7a8;
  box-shadow:
    0 0 5px 2px #e8ff6a,
    0 0 14px 5px #c8ff3a55;
  opacity: 0;
  animation:
    ff-blink var(--d) ease-in-out var(--dl) infinite,
    ff-drift calc(var(--d) * 2.4) ease-in-out var(--dl) infinite alternate;
}
@keyframes ff-blink {
  0%,
  100% {
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.95;
  }
}
@keyframes ff-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--dx), -12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .meadow-breeze,
  .fireflies i {
    animation: none !important;
  }
  .fireflies i {
    opacity: 0.6;
  }
}

/* Jirachi: companheira flutuante / relato de bug */
#jirachi {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  pointer-events: none;
  transition:
    left 0.95s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 0.95s cubic-bezier(0.45, 0.05, 0.3, 1),
    opacity 0.3s;
}
.jira-btn {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  animation: jira-bob 3.2s ease-in-out infinite;
}
.jira-btn img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transition: transform 0.25s;
}
.jira-btn:focus-visible {
  outline: 2px solid var(--pl-gold-light);
  outline-offset: 2px;
}
#jirachi.face-right .jira-btn img {
  transform: scaleX(-1);
}
#jirachi.flying .jira-btn {
  animation: jira-fly 0.5s ease-in-out infinite;
}
#jirachi.ghost {
  opacity: 0.4;
}
#jirachi.ghost .jira-btn,
#jirachi.behind .jira-btn {
  pointer-events: none;
}
#jirachi.behind {
  opacity: 0;
}
@keyframes jira-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes jira-fly {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-10px) rotate(6deg);
  }
}
.jira-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(250px, calc(100vw - 20px));
  padding: 10px 26px 10px 12px;
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.45;
  color: #1b2340;
  background: #fffbe8;
  border: 2px solid #0b1d34;
  box-shadow: 3px 3px 0 #0b1d34;
  pointer-events: auto;
  animation: jira-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.jira-tip:after {
  content: '';
  position: absolute;
  right: 30px;
  bottom: -10px;
  border: 9px solid transparent;
  border-top-color: #0b1d34;
  border-bottom: 0;
}
.jira-tip:before {
  content: '';
  position: absolute;
  right: 32px;
  bottom: -6px;
  z-index: 1;
  border: 7px solid transparent;
  border-top-color: #fffbe8;
  border-bottom: 0;
}
#jirachi.left-side .jira-tip {
  right: auto;
  left: 0;
}
#jirachi.left-side .jira-tip:after {
  right: auto;
  left: 30px;
}
#jirachi.left-side .jira-tip:before {
  right: auto;
  left: 32px;
}
.jira-tip[hidden] {
  display: none;
}
.jira-tip p {
  margin: 0;
}
.jira-tip-x {
  position: absolute;
  top: 1px;
  right: 4px;
  padding: 0 3px;
  font-size: 15px;
  font-weight: 900;
  color: #1b2340;
  background: none;
  border: 0;
  cursor: pointer;
}
@keyframes jira-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 520px) {
  .jira-tip {
    width: min(220px, calc(100vw - 16px));
    font-size: var(--text-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .jira-btn,
  #jirachi.flying .jira-btn {
    animation: none;
  }
}
.modal:has(.bug-sheet) {
  width: min(480px, 94vw);
}
.bug-sheet {
  display: grid;
  gap: 10px;
}
.bug-intro {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bug-jira {
  flex: none;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #ffe28a66);
}
.bug-intro p {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: #c7d7ea;
}
.bug-sheet .field {
  display: grid;
  gap: 5px;
  margin: 0;
}
.bug-sheet .field > span {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.bug-sheet textarea {
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  padding: 10px;
  font: inherit;
  font-size: var(--text-xl);
  line-height: 1.5;
  color: #edf4ff;
  background: #061a33;
  border: 2px solid var(--pl-steel);
  resize: vertical;
}
.bug-sheet textarea:focus {
  outline: 0;
  border-color: var(--pl-gold);
}
.bug-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bug-foot small {
  font-size: var(--text-sm);
  color: var(--pl-slate);
}
.bug-sheet .btn {
  min-height: 36px;
  height: 36px;
  padding: 0 16px;
  font-size: var(--text-md);
}
#jirachi,
#jirachi button,
.jira-tip {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* Upgrader: "converter derrotados em ouro" cabia cortado no rodapé da coluna central */
.capture-modal .upgrade-center .skip-link {
  min-height: 0;
  height: 30px;
  padding: 0 8px;
  font-size: var(--text-xs);
  letter-spacing: 0.6px;
}
.capture-modal .upgrade-center .skip-link .skip-money-icon {
  width: 16px;
  height: 16px;
}
.capture-modal .upgrade-center {
  overflow-y: auto;
  scrollbar-width: thin;
}
.capture-modal .upgrade-center .fire-btn {
  margin-top: 6px;
}
.capture-modal .upgrade-center .bet-round {
  margin-top: 2px;
}
.capture-modal .upgrade-center .or-sep {
  margin-top: 2px;
  margin-bottom: 2px;
}
.capture-modal .upgrade-center .skip-link {
  margin-top: 0;
}
.capture-modal .upgrade-center {
  padding-bottom: 4px;
}
/* Jirachi espiando da borda (celular, quando não há canto livre de botões) */
#jirachi.peek-right .jira-btn {
  transform-origin: 100% 50%;
}
#jirachi.peek-right:not(.flying) .jira-btn {
  animation: jira-peek 3.2s ease-in-out infinite;
}
#jirachi.peek-left:not(.flying) .jira-btn {
  animation: jira-peek-l 3.2s ease-in-out infinite;
}
@keyframes jira-peek {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }
  50% {
    transform: rotate(-12deg) translateY(-5px);
  }
}
@keyframes jira-peek-l {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(12deg) translateY(-5px);
  }
}
#jirachi.peek-right .jira-tip:after {
  right: 14px;
}
#jirachi.peek-right .jira-tip:before {
  right: 16px;
}
/* espiando: a parte transparente do GIF não recebe cliques (clip-path também recorta a área clicável) */
#jirachi.peek-right .jira-btn {
  clip-path: inset(-20px -20px -20px 22%);
}
#jirachi.peek-left .jira-btn {
  clip-path: inset(-20px 22% -20px -20px);
}
#jirachi.peek-right .jira-tip {
  right: calc(40% + 4px);
}
#jirachi.peek-left .jira-tip {
  left: calc(40% + 4px);
}

/* Jirachi: o GIF ganhou margem transparente (112×88) para a animação não bater na borda; brilho bem mais suave */
#jirachi,
.jira-btn {
  width: 102px;
}
.jira-btn {
  filter: drop-shadow(0 0 3px #ffe28a55);
}
.jira-btn:hover {
  filter: drop-shadow(0 0 5px #ffe28a99);
}
.bug-jira {
  width: 86px;
}
@media (max-width: 520px) {
  #jirachi,
  .jira-btn {
    width: 78px;
  }
}

/* selo "CONTA": cadeado dourado que se abre quando o cursor passa pelo menu */
.acct-lock {
  gap: 5px;
  padding: 2px 7px 2px 6px;
  color: #ffd84a;
  background: linear-gradient(#2a2208, #161103);
  border-color: #ffd84a99;
  box-shadow: 0 0 8px #ffd84a33;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.acct-lock:before {
  content: none !important;
}
.acct-lock .lock-svg {
  display: block;
  overflow: visible;
  color: #ffd84a;
  filter: drop-shadow(0 0 2px #ffd84a88);
}
.acct-lock .lock-shackle {
  transform-origin: 8.8px 6.4px;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.acct-lock span {
  color: #ffe98a;
  letter-spacing: 1.2px;
}
.home-menu-card.needs-account:hover .acct-lock,
.home-menu-card.needs-account:focus-visible .acct-lock {
  border-color: #ffe98a;
  box-shadow: 0 0 12px #ffd84a66;
}
.home-menu-card.needs-account:hover .lock-shackle,
.home-menu-card.needs-account:focus-visible .lock-shackle {
  transform: translateY(-1.6px) rotate(28deg);
}
@media (prefers-reduced-motion: reduce) {
  .acct-lock .lock-shackle {
    transition: none;
  }
}

/* ===================== v9: nova LOJA DE SKINS (destaque + ofertas), com tema escolhido pelo administrador ===================== */
.shopx {
  --sx-bg1: #1b0f3d;
  --sx-bg2: #3a1a78;
  --sx-bg3: #0a1638;
  --sx-accent: #c9a7ff;
  --sx-accent2: #7fe3ff;
  --sx-card1: #3b2573;
  --sx-card2: #171038;
  --sx-glow: #b98bff;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--sx-bg2), var(--sx-bg1) 42%, var(--sx-bg3));
  border: 1px solid color-mix(in srgb, var(--sx-accent) 45%, transparent);
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-850),
    0 0 26px color-mix(in srgb, var(--sx-glow) 22%, transparent);
}
.sx-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  aspect-ratio: 8/3;
  min-height: 200px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse 55% 95% at 80% 35%, color-mix(in srgb, var(--sx-glow) 50%, transparent), transparent 70%),
    linear-gradient(115deg, var(--sx-bg1) 20%, var(--sx-bg2));
  border: 1px solid color-mix(in srgb, var(--sx-accent) 50%, transparent);
}
.sx-hero.has-banner {
  background:
    linear-gradient(90deg, #000000c0 0%, #00000070 34%, transparent 64%),
    var(--sx-banner) center/cover no-repeat;
}
.sx-hero:after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(transparent, #0006);
}
.sx-orb {
  position: absolute;
  top: 50%;
  right: 6%;
  z-index: 0;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 40% 35%,
    color-mix(in srgb, var(--sx-accent2) 60%, transparent),
    color-mix(in srgb, var(--sx-glow) 40%, transparent) 42%,
    transparent 70%
  );
  transform: translateY(-50%);
  animation: sx-orb 7s ease-in-out infinite alternate;
}
.sx-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  align-self: flex-start;
  max-width: 68%;
  min-width: 0;
}
.sx-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 2px;
  color: #eef1ff;
  text-shadow: 0 1px 2px #000a;
}
.sx-kicker i,
.sx-offers-head i {
  flex: none;
  width: 1px;
  height: 12px;
  background: #ffffff66;
}
.sx-kicker b {
  color: var(--sx-accent2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.sx-kicker b.closed {
  color: #ff9a9a;
}
.sx-title {
  margin: 6px 0 0;
  font-size: clamp(24px, 5.2vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
  text-shadow:
    0 2px 0 #0009,
    0 0 18px color-mix(in srgb, var(--sx-glow) 55%, transparent);
}
.sx-sub {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sx-accent) 75%, #fff);
  text-shadow: 0 1px 2px #000a;
}
.sx-wallet {
  position: relative;
  z-index: 2;
  flex: none;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 7px 12px;
  background: color-mix(in srgb, var(--sx-bg1) 70%, #0000);
  border: 1px solid color-mix(in srgb, var(--sx-accent2) 65%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sx-accent2) 25%, transparent);
  backdrop-filter: blur(3px);
}
.sx-wallet img {
  grid-row: span 2;
  width: 20px;
  height: 20px;
}
.sx-wallet b {
  font-size: 18px;
  line-height: 1;
  color: #fff;
}
.sx-wallet small {
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #dfe6ff;
}
.sx-offers-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 2.4px;
  color: #eef1ff;
}
.sx-offers-head span {
  color: var(--sx-accent2);
  letter-spacing: 1px;
}
.sx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.sx-grid.n1 {
  grid-template-columns: minmax(0, 260px);
  justify-content: center;
}
.sx-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  min-height: 210px;
  padding: 9px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sx-card1), var(--sx-card2));
  border: 1px solid color-mix(in srgb, var(--sx-accent) 38%, transparent);
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
  animation: sx-in 0.5s both;
  animation-delay: calc(var(--i) * 0.07s);
}
.sx-card:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background: linear-gradient(
      135deg,
      transparent 46%,
      color-mix(in srgb, var(--sx-accent) 16%, transparent) 46% 54%,
      transparent 54%
    )
    0 0/56px 56px;
}
.sx-card:after {
  content: '';
  position: absolute;
  z-index: -1; /* por baixo do sprite, do preço, do nome e do botão */
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 42%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent, #ffffff88, transparent);
  transform: translateX(-170%) skewX(-12deg);
  transition: opacity 0.2s;
}
.sx-card:hover {
  z-index: 1;
  transform: translateY(-3px);
  border-color: var(--sx-accent);
  box-shadow:
    0 10px 22px #0009,
    0 0 18px color-mix(in srgb, var(--sx-glow) 40%, transparent);
}
.sx-card:hover:after {
  opacity: 1;
  animation: ss-sheen-sweep 1.9s ease-out forwards;
}
.sx-card.owned {
  border-color: #5fd06a;
}
.sx-card.off {
  filter: saturate(0.6);
}
.sx-price {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: var(--text-lg);
  background: #04162ccc;
  border: 1px solid color-mix(in srgb, var(--sx-accent2) 55%, transparent);
}
.sx-price img {
  width: 14px;
  height: 14px;
}
.sx-price b {
  color: #fff;
}
.sx-owned {
  font-size: var(--text-xs);
  letter-spacing: 1.4px;
  color: #8ff0a9 !important;
}
.sx-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100px;
}
.sx-art-glow {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sx-glow) 50%, transparent), transparent 70%);
  transition: transform 0.3s;
}
.sx-card:hover .sx-art-glow {
  transform: scale(1.15);
}
.sx-skin {
  position: relative;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #0007);
  transition: transform 0.25s;
  animation: ss-float 3s ease-in-out infinite;
}
.sx-card:hover .sx-skin {
  transform: scale(1.08);
}
.sx-default {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #04162ccc;
  border: 1px solid #ffffff33;
}
.sx-default img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  opacity: 0.8;
}
.sx-info {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.sx-info h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
}
.sx-info small {
  font-size: var(--text-sm);
  color: #d6dcf5;
}
.sx-info small b {
  color: var(--sx-accent2);
}
.sx-btn {
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--text-sm);
  letter-spacing: 0.8px;
}
.sx-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  text-align: center;
  background: linear-gradient(160deg, var(--sx-card1), var(--sx-card2));
  border: 1px dashed color-mix(in srgb, var(--sx-accent) 50%, transparent);
}
.sx-empty b {
  font-size: 14px;
  color: #fff;
}
.sx-empty p {
  max-width: 420px;
  margin: 0 auto;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #d6dcf5;
}
.sx-note {
  margin: 0;
  font-size: var(--text-sm);
  text-align: center;
  color: #c9d2ee;
}
@keyframes sx-orb {
  from {
    transform: translateY(-50%) scale(0.95);
  }
  to {
    transform: translateY(-54%) scale(1.05);
  }
}
@keyframes sx-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* partículas: ficam presas dentro do banner (overflow hidden) */
.sx-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.sx-particles i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: block;
  will-change: transform, opacity;
}
.sx-particles.p-stars i,
.sx-particles.p-sparkles i {
  width: 9px;
  height: 9px;
  background: var(--sx-accent2);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: sx-twinkle var(--d) ease-in-out var(--dl) infinite;
}
.sx-particles.p-sparkles i {
  background: #ffe27a;
  filter: drop-shadow(0 0 3px var(--pl-gold-bright));
}
.sx-particles.p-petals i {
  top: -8%;
  width: 10px;
  height: 6px;
  border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #ffd6ea, #ff8fc8);
  animation: sx-fall var(--d) linear var(--dl) infinite;
}
.sx-particles.p-snow i {
  top: -8%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #fff;
  animation: sx-fall var(--d) linear var(--dl) infinite;
}
.sx-particles.p-embers i {
  top: 108%;
  width: 3px;
  height: 3px;
  background: #ffb347;
  box-shadow: 0 0 6px 2px #ff6b3d;
  animation: sx-rise var(--d) ease-in var(--dl) infinite;
}
.sx-particles.p-bubbles i {
  top: 108%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #c8f6ffcc;
  box-shadow: inset 2px -2px 0 #ffffff55;
  animation: sx-rise var(--d) ease-in-out var(--dl) infinite;
}
.sx-particles.p-wisps i {
  top: 108%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sx-accent2) 60%, transparent), transparent 70%);
  animation: sx-rise calc(var(--d) * 1.4) ease-in-out var(--dl) infinite;
}
.sx-particles.p-fireflies i {
  width: 3px;
  height: 3px;
  background: #fff7a8;
  box-shadow: 0 0 5px 2px #e8ff6a;
  animation:
    sx-blink var(--d) ease-in-out var(--dl) infinite,
    ff-drift calc(var(--d) * 2) ease-in-out var(--dl) infinite alternate;
  --dx: 14px;
}
@keyframes sx-twinkle {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(calc(var(--s) * 0.5)) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(var(--s)) rotate(45deg);
  }
}
@keyframes sx-fall {
  from {
    top: -8%;
    transform: translateX(0) rotate(0) scale(var(--s));
  }
  to {
    top: 108%;
    transform: translateX(40px) rotate(320deg) scale(var(--s));
  }
}
@keyframes sx-rise {
  0% {
    top: 108%;
    opacity: 0;
    transform: translateX(0) scale(var(--s));
  }
  15% {
    opacity: 1;
  }
  100% {
    top: -8%;
    opacity: 0;
    transform: translateX(-18px) scale(var(--s));
  }
}
@keyframes sx-blink {
  0%,
  100% {
    opacity: 0;
  }
  45%,
  55% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sx-particles i,
  .sx-orb,
  .sx-skin,
  .sx-card {
    animation: none !important;
  }
  .sx-particles i {
    opacity: 0.5;
  }
  .sx-card:hover:after,
  .skin-card.own:hover:before {
    animation: none !important;
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .shopx {
    padding: 8px;
    gap: 10px;
  }
  .sx-hero {
    flex-direction: column;
    align-items: stretch;
    aspect-ratio: auto;
    min-height: 190px;
    padding: 14px;
  }
  .sx-hero-copy {
    max-width: 100%;
  }
  .sx-wallet {
    align-self: flex-start;
  }
  .sx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sx-skin {
    width: 80px;
    height: 80px;
  }
  .sx-card {
    min-height: 190px;
  }
}

/* admin: escolha do tema, prévia e banner */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.theme-tile {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  font: inherit;
  background: linear-gradient(160deg, var(--sx-card1), var(--sx-card2));
  border: 2px solid var(--pl-steel);
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.theme-tile:hover {
  transform: translateY(-2px);
  border-color: var(--sx-accent);
}
.theme-tile.on {
  border-color: var(--pl-gold);
  box-shadow:
    0 0 0 1px var(--pl-gold),
    0 0 14px #f6d77855;
}
.theme-swatch {
  display: block;
  width: 100%;
  height: 30px;
  background: linear-gradient(115deg, var(--sx-bg1), var(--sx-bg2) 60%, var(--sx-bg3));
  border: 1px solid #ffffff22;
}
.theme-swatch i {
  display: block;
  width: 12px;
  height: 12px;
  margin: 9px 0 0 calc(100% - 22px);
  border-radius: 50%;
  background: var(--sx-accent2);
  box-shadow: 0 0 8px var(--sx-glow);
}
.theme-tile b {
  font-size: var(--text-md);
}
.theme-tile small {
  font-size: var(--text-xs);
  color: #d6dcf5;
}
.theme-preview {
  padding: 6px;
}
.theme-preview .sx-hero {
  min-height: 150px;
}
.banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.banner-thumb {
  display: grid;
  place-items: center;
  width: 192px;
  aspect-ratio: 8/3;
  overflow: hidden;
  background: #04132a;
  border: 2px solid var(--pl-steel);
}
.banner-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-thumb em {
  font-size: var(--text-sm);
  font-style: normal;
  color: #6f89a8;
}
.site-theme .shopx .sx-title {
  color: #fff;
}

/* ===== v10: botão para esconder/mostrar a Jirachi (painel superior) ===== */
#jirachi[hidden] {
  display: none !important;
}
.site-theme .home-audio .jira-toggle {
  width: 34px;
  height: 32px;
  margin: 0;
}
.jira-toggle.music-on svg path:first-child {
  color: #ffd84a;
  filter: drop-shadow(0 0 3px #ffd84a88);
}

/* ===== v10: comprar a chave do bioma na mesa de cartas (+50%) ===== */
.card-actions .key-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(430px, 100%);
  margin: 0 auto 8px;
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(#3a2a08, #241803);
  border: 2px solid #f0b53a;
  box-shadow:
    inset 0 1px 0 #ffe28a55,
    0 3px 0 #0006;
  animation: key-offer-in 0.35s ease-out both;
}
.card-actions .key-offer:hover:not(:disabled),
.card-actions .key-offer:focus-visible {
  border-color: var(--pl-gold-light);
  background: linear-gradient(#4a360b, #2c1d04);
}
.card-actions .key-offer:disabled {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.75;
}
.key-offer > img,
.key-offer > .item-sprite {
  flex: none;
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.key-offer .ko-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.key-offer .ko-copy b {
  font-size: var(--text-md);
  letter-spacing: 1px;
  color: var(--pl-gold-light);
}
.key-offer .ko-copy small {
  font-size: var(--text-xs);
  color: #d8c49a;
}
.key-offer .ko-price {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: end;
  gap: 1px 4px;
  flex: none;
}
.key-offer .ko-price b {
  font-size: 15px;
  color: var(--pl-gold-light);
}
.key-offer .ko-price small {
  grid-column: 1/-1;
  font-size: 7.5px;
  letter-spacing: 0.6px;
  color: #ff9d8a;
}
.key-offer .ko-gold {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
@keyframes key-offer-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-actions .key-offer {
    animation: none;
  }
}

/* ===== v10: editor completo de bioma (nome, até 6 tipos, Pokémon específicos por raridade) ===== */
.bio-editor .bio-block {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  background: #0a1e3d99;
  border: 1px solid #2a4d73;
}
.bio-editor h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 1.4px;
  color: var(--pl-gold);
}
.bio-editor h4 small {
  font-size: var(--text-xs);
  letter-spacing: 0.4px;
  color: #8fb3d6;
}
.bio-editor h4 small.bad {
  color: #ff8a7a;
}
.bio-editor .check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: #c9dcef;
}
.bio-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}
.bio-add-row input,
.bio-add-row select {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  font: inherit;
  font-size: var(--text-md);
  color: #fff;
  background: var(--pl-navy-800);
  border: 1px solid #3c6a96;
}
.bio-add-row .btn {
  height: 30px;
  min-height: 0;
  padding: 0 12px;
  font-size: var(--text-sm);
}
.bio-tier b small {
  margin-left: 4px;
  color: #6f93b8;
}
.bio-mon.edit {
  position: relative;
  grid-template-columns: 14px 34px 14px;
  grid-template-areas: 'l s r' 'n n n';
  width: auto;
  min-width: 64px;
  padding: 3px 2px 4px;
  background: #0b213f;
  border: 1px solid #274a70;
}
.bio-mon.edit > img,
.bio-mon.edit > .sprite,
.bio-mon.edit > span:not(.bio-del) {
  grid-area: s;
}
.bio-mon.edit small {
  grid-area: n;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bio-mon.edit .bio-move {
  align-self: center;
  width: 14px;
  height: 24px;
  padding: 0;
  font: inherit;
  font-size: var(--text-xl);
  line-height: 1;
  color: #9cc6ee;
  background: none;
  border: 0;
  cursor: pointer;
}
.bio-mon.edit .bio-move:first-child {
  grid-area: l;
}
.bio-mon.edit .bio-move:nth-of-type(2) {
  grid-area: r;
}
.bio-mon.edit .bio-move:disabled {
  opacity: 0.25;
  cursor: default;
}
.bio-mon.edit .bio-move:hover:not(:disabled) {
  color: var(--pl-gold-light);
}
.bio-mon.edit .bio-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  padding: 0;
  font: inherit;
  font-size: var(--text-md);
  line-height: 14px;
  color: #fff;
  background: #b3262f;
  border: 1px solid #4d0a10;
  border-radius: 50%;
  cursor: pointer;
}
.bio-mon.edit .bio-del:hover {
  background: #e0414b;
}
.bio-none {
  font-size: var(--text-sm);
  color: #6f8aa8;
}
@media (max-width: 520px) {
  .bio-add-row {
    grid-template-columns: 1fr 1fr;
  }
  .bio-add-row input {
    grid-column: 1/-1;
  }
}

/* ===== v10: taxas de encontro (admin → Simulação) ===== */
.rates-panel {
  display: grid;
  gap: 10px;
}
.rates-custom {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  color: var(--pl-navy-800);
  background: var(--pl-gold);
}
.rates-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.rate-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--pl-navy-700);
  border: 1px solid #2f5680;
}
.rate-field span {
  display: grid;
  gap: 2px;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--pl-gold);
}
.rate-field small {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #8fb3d6;
}
.rate-field input {
  width: 84px;
  height: 30px;
  padding: 0 8px;
  font: inherit;
  font-size: var(--text-xl);
  font-weight: 800;
  text-align: right;
  color: #fff;
  background: var(--pl-navy-800);
  border: 1px solid #3c6a96;
}
.rates-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rates-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.rates-table th,
.rates-table td {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid #1d3b5f;
}
.rates-table thead th {
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--pl-sky);
}
.rates-table tbody th,
.rates-table tfoot th {
  text-align: left;
  white-space: nowrap;
  color: #d6e7f8;
}
.rates-table input {
  width: 100%;
  max-width: 70px;
  height: 26px;
  padding: 0 5px;
  font: inherit;
  font-size: var(--text-md);
  text-align: right;
  color: #fff;
  background: var(--pl-navy-800);
  border: 1px solid #33628f;
}
.rates-table tfoot td {
  font-weight: 900;
}
.rates-table tfoot td.ok {
  color: #7be08a;
}
.rates-table tfoot td.bad {
  color: #ff8a7a;
}
.rates-note {
  margin: 0;
  font-size: 9.5px;
}
.card-table .card-actions:has(.key-offer) {
  flex: none;
  flex-direction: column;
  align-items: center;
}

/* ===== v12: pedido de novo nome de usuário ===== */
.pc-tag.warn {
  background: #ffb35c;
}
.rename-preview {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  background: #2a1606;
  border: 2px solid #ffb35c;
}
.rename-preview b {
  font-size: var(--text-md);
  letter-spacing: 1.4px;
  color: #ffcf8a;
}
.rename-preview span {
  font-size: 11.5px;
  color: #fff1dc;
}
.rename-gate {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #020a1ce6;
  backdrop-filter: blur(3px);
}
.rename-card {
  display: grid;
  gap: 10px;
  width: min(440px, 100%);
  padding: 22px 20px 18px;
  text-align: center;
  background: linear-gradient(#10284a, #0a1a33);
  border: 2px solid #ffb35c;
  box-shadow:
    0 0 0 4px var(--pl-navy-850),
    0 18px 50px #000a;
}
.rename-card h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 2px;
  color: #ffcf8a;
}
.rename-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #e6eef8;
}
.rename-card .rename-current {
  font-size: var(--text-md);
  color: #9fbad6;
}
.rename-card .field {
  text-align: left;
}
.rename-card input {
  width: 100%;
}
.rename-hint {
  font-size: var(--text-sm);
  color: #8fb3d6;
}
.rename-card .btn.primary {
  min-height: 40px;
}
.rename-out {
  justify-self: center;
  padding: 4px 8px;
  font: inherit;
  font-size: var(--text-sm);
  color: #9fbad6;
  background: none;
  border: 0;
  text-decoration: underline dotted;
  cursor: pointer;
}
.rename-out:hover {
  color: #fff;
}
.rename-gate,
.rename-gate button,
.rename-gate input {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}
.rename-gate input {
  height: 38px;
  padding: 0 10px;
  font-size: 15px;
  color: #fff;
  background: var(--pl-navy-800);
  border: 1px solid #5c86b3;
}
.rename-gate .field span {
  display: block;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #9fc3e6;
}
.rename-pika {
  justify-self: center;
  width: 112px;
  height: 112px;
  margin: -6px 0 -4px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px #0008);
}
.rename-pika-mini {
  width: 34px;
  height: 34px;
  margin: -8px 4px -10px 0;
  vertical-align: middle;
  object-fit: contain;
}
.rename-preview b {
  display: flex;
  align-items: center;
}

/* ===== v13: versão do jogo (admin → Simulação) ===== */
.version-panel {
  display: grid;
  gap: 10px;
}
.version-row {
  display: grid;
  align-items: center;
  gap: 10px;
}
.version-now {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  background: var(--pl-navy-700);
  border: 1px solid #2f5680;
}
.version-now small {
  font-size: 8.5px;
  letter-spacing: 1.2px;
  color: #8fb3d6;
}
.version-now b {
  font-size: var(--text-xl);
  letter-spacing: 1.4px;
  color: var(--pl-gold);
}
.version-arrow {
  font-size: 18px;
  color: #8fb3d6;
}
.version-field input {
  width: 150px;
  text-align: left;
}
.version-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.version-quick b {
  margin-left: 4px;
  color: var(--pl-gold);
}
.version-preview {
  margin: 0;
  font-size: var(--text-md);
  color: #c9dcef;
}
.version-preview b {
  letter-spacing: 1.4px;
  color: #fff;
}
@media (max-width: 520px) {
  .version-arrow {
    display: none;
  }
  .version-field input {
    width: 120px;
  }
}
.version-row {
  grid-template-columns: auto auto auto;
  justify-content: start;
}
.version-field {
  justify-content: flex-start;
  gap: 14px;
}

/* ===== v16: dificuldade da expedição, chave da Roleta da sorte, golpes com TM próprio ===== */
.diff-sep {
  margin: 4px 0;
  border: 0;
  border-top: 1px dashed var(--pl-steel);
}
.exp-win {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--ui-muted);
}
.exp-win th,
.exp-win td {
  padding: 5px 4px;
  text-align: center;
  background: var(--pl-navy-800);
  border: 1px solid var(--pl-steel);
}
.exp-win tbody th {
  text-align: left;
  white-space: nowrap;
}
.exp-win td {
  font-size: 14px;
  letter-spacing: 0;
  color: #fff;
}
.cz-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: linear-gradient(145deg, #123354, #08203c);
  border: 1px solid var(--ui-line);
  box-shadow: 2px 3px var(--pl-navy-950);
}
.cz-switch.on {
  border-color: var(--ui-gold);
}
.cz-switch b {
  font-size: var(--text-xl);
  letter-spacing: 1px;
  color: #fff;
}
.cz-switch p {
  margin: 4px 0 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #a9c8e5;
}
.sw-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #a9c8e5;
  background: var(--pl-navy-800);
  border: 1px solid var(--pl-steel);
  cursor: pointer;
}
.sw-toggle i {
  position: relative;
  width: 38px;
  height: 20px;
  background: #2a3f5c;
  border: 1px solid #496b8c;
  transition: background 0.2s;
}
.sw-toggle i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #c7dcf2;
  transition: transform 0.2s;
}
.sw-toggle.on {
  color: #b8f5a0;
  border-color: #5fd06a;
}
.sw-toggle.on i {
  background: #1f7a3a;
  border-color: #5fd06a;
}
.sw-toggle.on i::after {
  transform: translateX(18px);
  background: #fff;
}
.sw-toggle:focus-visible {
  outline: 2px solid var(--ui-gold);
  outline-offset: 2px;
}
.ability-others {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ui-muted, #8fb3d6);
}
.partner-moves {
  display: grid;
  gap: 5px;
  margin: 10px 0;
}
.pm-title {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-gold);
}
.pm-title small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  color: #a9c8e5;
}
.pm-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #123454;
  border-left: 3px solid var(--ui-border, #406686);
}
.pm-row strong {
  font-size: var(--text-lg);
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-tm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
}
.tm-pips {
  display: inline-flex;
  gap: 2px;
}
.tm-pips i {
  width: 7px;
  height: 7px;
  background: var(--pl-navy-800);
  border: 1px solid #496b8c;
}
.tm-pips i.on {
  background: var(--pl-gold-light);
  border-color: #bf9b48;
}
.type.mv-neutral {
  background: #5b6b80;
  color: #fff;
}
.item-target-card.tm-target {
  grid-template-columns: 58px minmax(0, 1fr);
}
.tm-moves {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.tm-move {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 7px 9px;
  font: inherit;
  text-align: left;
  color: #fff;
  background: #123454;
  border: 1px solid var(--ui-line, #406686);
  box-shadow: 2px 2px var(--pl-navy-950);
  cursor: pointer;
}
.tm-move b {
  font-size: var(--text-lg);
}
.tm-move small {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
}
.tm-move:hover:not(:disabled) {
  border-color: var(--ui-gold, var(--pl-gold-light));
  box-shadow:
    0 0 0 1px var(--ui-gold, var(--pl-gold-light)),
    2px 2px var(--pl-navy-950);
}
.tm-move:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 520px) {
  .pm-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .pm-row .mv-tag {
    display: none;
  }
  .cz-switch {
    flex-direction: column;
    align-items: stretch;
  }
  .tm-moves {
    grid-template-columns: 1fr;
  }
}

/* ===== v17: tutorial da Jirachi (visual do site: azul-marinho, dourado, brilho e faíscas) ===== */
.tut {
  position: fixed;
  inset: 0;
  z-index: 380;
  pointer-events: none;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}
.tut[hidden] {
  display: none;
}
/* notices never cover Jirachi's balloon: while she is guiding, they sit under the tutorial layer (25/09/2026) */
body:has(.tut:not([hidden])) #toasts {
  z-index: 370;
}
.tut-dim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tut-dim path {
  fill: rgba(1, 7, 20, 0.6);
}
.tut.no-dim .tut-dim {
  display: none;
}
.tut-spot {
  position: fixed;
  display: none;
  border-radius: 8px;
  transition:
    left 0.45s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 0.45s cubic-bezier(0.45, 0.05, 0.3, 1),
    width 0.45s,
    height 0.45s;
}
.tut-spot.on {
  display: block;
  box-shadow:
    0 0 0 2px var(--pl-gold-light),
    0 0 0 6px rgba(255, 226, 138, 0.16),
    0 0 28px rgba(255, 205, 80, 0.5);
  animation: tut-glow 1.6s ease-in-out infinite alternate;
}
.tut-spot.on::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 10px;
  background:
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) left top/16px 3px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) left top/3px 16px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) right top/16px 3px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) right top/3px 16px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) left bottom/16px 3px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) left bottom/3px 16px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) right bottom/16px 3px no-repeat,
    linear-gradient(var(--pl-gold-light), var(--pl-gold-light)) right bottom/3px 16px no-repeat;
  filter: drop-shadow(0 0 4px var(--pl-gold-bright));
  animation: tut-corners 1.1s ease-in-out infinite alternate;
}
@keyframes tut-glow {
  from {
    box-shadow:
      0 0 0 2px var(--pl-gold-light),
      0 0 0 5px rgba(255, 226, 138, 0.12),
      0 0 12px rgba(255, 205, 80, 0.35);
  }
  to {
    box-shadow:
      0 0 0 2px #fff3c4,
      0 0 0 8px rgba(255, 226, 138, 0.2),
      0 0 32px rgba(255, 205, 80, 0.6);
  }
}
@keyframes tut-corners {
  from {
    inset: -8px;
  }
  to {
    inset: -13px;
  }
}

.tut-card {
  position: fixed;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  width: min(480px, calc(100vw - 20px));
  pointer-events: auto;
  transition:
    left 0.75s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 0.75s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.tut-card.ask {
  width: min(520px, calc(100vw - 20px));
  grid-template-columns: 116px minmax(0, 1fr);
}
.tut-jira-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  margin-top: -6px;
  animation: tut-bob 3s ease-in-out infinite;
}
.tut-halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 170, 0.62) 0%, rgba(255, 205, 80, 0.2) 48%, transparent 70%);
  animation: tut-halo 2.4s ease-in-out infinite;
}
.tut-jira {
  position: relative;
  width: 112%;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
}
.tut-sp {
  position: absolute;
  font-style: normal;
  line-height: 1;
  color: var(--pl-gold-light);
  text-shadow:
    0 0 6px var(--pl-gold-bright),
    0 0 12px #ffb300;
  animation: tut-twinkle 1.9s ease-in-out infinite;
}
.tut-sp.s1 {
  top: 8%;
  left: 10%;
  font-size: var(--text-xl);
}
.tut-sp.s2 {
  top: 20%;
  right: 2%;
  font-size: var(--text-xs);
  animation-delay: 0.65s;
}
.tut-sp.s3 {
  bottom: 12%;
  left: 2%;
  font-size: var(--text-sm);
  animation-delay: 1.3s;
}
@keyframes tut-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes tut-halo {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@keyframes tut-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(20deg);
  }
}

.tut-bubble {
  position: relative;
  padding: 15px 16px 12px;
  color: #c7dcf2;
  background: linear-gradient(160deg, #143e6c 0%, #0b2748 42%, #061a33 100%);
  border: 2px solid #bf9b48;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 138, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px #04152b,
    0 14px 30px rgba(0, 0, 0, 0.55);
}
.tut-bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 34px;
  width: 16px;
  height: 16px;
  background: #113660;
  border-left: 2px solid #bf9b48;
  border-bottom: 2px solid #bf9b48;
  transform: rotate(45deg);
  border-radius: 0 0 0 3px;
}
.tut-bubble::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  pointer-events: none;
  background: radial-gradient(120% 60% at 0 0, rgba(255, 226, 138, 0.1), transparent 60%);
}
.tut-card.pop .tut-bubble {
  animation: tut-pop 0.42s cubic-bezier(0.25, 1.5, 0.45, 1);
}
.tut-card.pop .tut-jira-wrap {
  animation:
    tut-arrive 0.6s ease-out,
    tut-bob 3s ease-in-out 0.6s infinite;
}
@keyframes tut-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tut-arrive {
  0% {
    transform: translate(-14px, -10px) rotate(-12deg) scale(0.9);
  }
  60% {
    transform: translate(2px, 2px) rotate(4deg) scale(1.04);
  }
  100% {
    transform: none;
  }
}
.tut-progress {
  position: absolute;
  left: 14px;
  right: 14px;
  top: -2px;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0 0 3px 3px;
}
.tut-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f0b923, var(--pl-gold-light));
  box-shadow: 0 0 8px var(--pl-gold-bright);
  transition: width 0.5s;
}
.tut-bubble header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tut-chap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tut-chap-n {
  flex: none;
  padding: 3px 7px;
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.1;
  color: #2e1e00;
  background: linear-gradient(#fff0b3, #f0b923);
  border-radius: 6px;
  box-shadow: 0 2px 0 #7a5a14;
}
.tut-chap-n small {
  font-size: var(--text-xs);
  opacity: 0.7;
}
.tut-chap-t {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}
.tut-chap-t small {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.8px;
  color: #8fb3d6;
}
.tut-chap-t b {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: var(--pl-gold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tut-dots {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 45%;
}
.tut-dots i {
  width: 7px;
  height: 7px;
  background: #16395f;
  border: 1px solid #406686;
  transform: rotate(45deg);
}
.tut-dots i.on {
  background: #f0b923;
  border-color: var(--pl-gold-light);
}
.tut-dots i.now {
  background: var(--pl-gold-light);
  box-shadow: 0 0 6px var(--pl-gold-bright);
}
.tut-bubble h3 {
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.tut-bubble p {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.6;
  color: #c7dcf2;
}
.tut-kicker {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 1.8px;
  color: var(--pl-gold);
}
.tut-do {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 8px 11px;
  background: linear-gradient(90deg, rgba(255, 210, 90, 0.2), rgba(255, 210, 90, 0.04));
  border: 1px solid rgba(255, 226, 138, 0.5);
  border-radius: 8px;
}
.tut-do-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding-left: 2px;
  font-size: var(--text-sm);
  color: #2e1e00;
  background: linear-gradient(#fff0b3, #f0b923);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 226, 138, 0.18);
  animation: tut-call 1.2s ease-in-out infinite;
}
@keyframes tut-call {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(255, 226, 138, 0.18);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 226, 138, 0);
  }
}
.tut-do-copy {
  display: grid;
  line-height: 1.3;
}
.tut-do-copy small {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.8px;
  color: var(--pl-gold);
}
.tut-do-copy b {
  font-size: var(--text-lg);
  font-weight: 900;
  color: #fff;
}
.tut-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.tut-topics li {
  padding: 4px 9px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
  background: #0a2447;
  border: 1px solid #406686;
  border-radius: 999px;
}
.tut-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px dashed rgba(143, 179, 214, 0.25);
}
.tut-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}
.tut-actions .btn {
  min-height: 34px;
  padding: 7px 14px;
  font-size: var(--text-sm);
}
.tut-exit {
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  color: #8fb3d6;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}
.tut-exit:hover {
  color: #fff;
}
.tut-exit.armed {
  color: #ff8a92;
  text-decoration: underline;
}
.tut-never {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 800;
  color: #8fb3d6;
  cursor: pointer;
}
.tut-never input {
  accent-color: #f0b923;
}
.tut-bubble.final {
  border-color: var(--pl-gold-light);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 138, 0.3),
    0 0 0 1px #04152b,
    0 0 30px rgba(255, 210, 90, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.55);
}
#jirachi.tut-away {
  display: none;
}

/* anel no que o jogador precisa clicar, com uma seta dourada pulando */
.tut-spot.act.on {
  border-radius: 6px;
  box-shadow:
    0 0 0 3px var(--pl-gold-light),
    0 0 0 7px rgba(255, 226, 138, 0.25),
    0 0 22px var(--pl-gold-bright);
  animation: tut-act 1s ease-in-out infinite;
}
.tut-spot.act.on::before {
  display: none;
}
@keyframes tut-act {
  0%,
  100% {
    box-shadow:
      0 0 0 3px var(--pl-gold-light),
      0 0 0 6px rgba(255, 226, 138, 0.3),
      0 0 14px var(--pl-gold-bright);
  }
  50% {
    box-shadow:
      0 0 0 3px #fff,
      0 0 0 11px rgba(255, 226, 138, 0),
      0 0 28px var(--pl-gold-bright);
  }
}
.tut-point {
  position: fixed;
  display: none;
  width: 26px;
  height: 32px;
  filter: drop-shadow(0 2px 0 #3a2600) drop-shadow(0 0 6px var(--pl-gold-bright));
  animation: tut-point 0.8s ease-in-out infinite;
}
.tut-point.on {
  display: block;
}
.tut-point i {
  position: absolute;
  left: 3px;
  top: 0;
  width: 20px;
  height: 28px;
  background: linear-gradient(#fff6c8, #f0b923);
  clip-path: polygon(30% 0, 70% 0, 70% 50%, 100% 50%, 50% 100%, 0 50%, 30% 50%);
}
.tut-point.up i {
  transform: rotate(180deg);
}
@keyframes tut-point {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.tut-point.up {
  animation-name: tut-point-up;
}
@keyframes tut-point-up {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}
button.tut-do {
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.1s;
}
button.tut-do:hover {
  border-color: var(--pl-gold-light);
  background: linear-gradient(90deg, rgba(255, 210, 90, 0.32), rgba(255, 210, 90, 0.08));
}
button.tut-do:active {
  transform: translateY(1px);
}
button.tut-do:focus-visible {
  outline: 2px solid var(--pl-gold-light);
  outline-offset: 2px;
}
.tut-do-copy {
  flex: 1;
}
.tut-do-auto {
  flex: none;
  padding: 4px 7px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #2e1e00;
  background: linear-gradient(#fff0b3, #f0b923);
  border: 1px solid #fff6c8;
  box-shadow: 0 2px 0 #7a5a14;
}

/* botão APRENDER A JOGAR: a arte da Jirachi (círculo, anel, faíscas, brilho) no formato em pixel art dos botões do jogo */
.btn.tut-replay {
  --lip-a: #ffe7a0;
  --lip-b: #8a5a0c;
  --face-a: #1c4f86;
  --face-b: #0b2748;
  --ink: #fff;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: auto;
  min-height: 0;
  margin: 12px auto 2px;
  padding: 6px 14px 8px 8px;
  line-height: 1;
  font-size: inherit;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none !important;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.btn.tut-replay:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(255, 210, 90, 0.45));
}
.btn.tut-replay:active {
  transform: translateY(1px);
}
.btn.tut-replay:focus-visible {
  filter: drop-shadow(0 0 0 2px var(--pl-gold-light)) drop-shadow(0 0 8px var(--pl-gold-bright));
}
.tr-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: 0;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 190, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: tr-shine 4.6s ease-in-out infinite;
}
@keyframes tr-shine {
  0%,
  58% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
.tr-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #3f82c4 0%, #16457a 45%, #0a2447 75%);
  box-shadow:
    inset 0 0 0 2px #bf9b48,
    inset 0 0 8px rgba(255, 226, 138, 0.35),
    0 0 9px rgba(255, 210, 90, 0.35);
}
.tr-ring {
  position: absolute;
  inset: -2px;
  border: 1px dashed rgba(255, 226, 138, 0.6);
  border-radius: 50%;
  animation: tr-spin 14s linear infinite;
}
@keyframes tr-spin {
  to {
    transform: rotate(360deg);
  }
}
.tr-art img {
  position: relative;
  width: 42px;
  max-width: none;
  height: auto;
  margin-top: -3px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
  animation: tut-bob 2.6s ease-in-out infinite;
}
.tr-sp {
  position: absolute;
  font-style: normal;
  line-height: 1;
  color: var(--pl-gold-light);
  text-shadow: 0 0 6px var(--pl-gold-bright);
  animation: tut-twinkle 1.8s ease-in-out infinite;
}
.tr-sp.a {
  top: -3px;
  right: -2px;
  font-size: var(--text-2xs);
}
.tr-sp.b {
  bottom: 0;
  left: -3px;
  font-size: 6px;
  animation-delay: 0.6s;
}
.tr-sp.c {
  top: 7px;
  left: -5px;
  font-size: 5px;
  animation-delay: 1.2s;
}
.tr-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1;
}
.tr-copy small {
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--pl-sky);
}
.tr-copy b {
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--pl-gold-light);
  text-shadow: 0 1px 0 #2e1e00;
}
.tr-copy em {
  font-style: normal;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #c7dcf2;
}
.btn.tut-replay:hover @media(max-width:520px) {
  .tut-card,
  .tut-card.ask {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .tut-bubble {
    padding: 13px 12px 10px;
  }
  .tut-bubble h3 {
    font-size: 15px;
  }
  .tut-bubble p {
    font-size: var(--text-lg);
  }
  .tut-bubble::before {
    top: 24px;
  }
  .tut-dots {
    display: none;
  }
  .tut-foot {
    margin-top: 10px;
  }
  .tut-actions .btn {
    min-height: 32px;
    padding: 6px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tut-spot,
  .tut-card {
    transition: none;
  }
  .tut-spot.on,
  .tut-spot.on::before,
  .tut-jira-wrap,
  .tut-card.pop .tut-jira-wrap,
  .tut-halo,
  .tut-sp,
  .tut-card.pop .tut-bubble,
  .tut-do-ico,
  .tut-spot.act.on,
  .tut-point,
  .tr-shine,
  .tr-ring,
  .tr-art img,
  .tr-sp {
    animation: none;
  }
}

/* ===== v18: Roleta da sorte = roleta de prêmios (giro grátis, 20 fatias, lâmpadas, ponteiro, chuva de moedas) ===== */
.pw {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px 16px;
  overflow: hidden;
  color: #edf4ff;
  background: radial-gradient(ellipse at 50% 45%, #164278 0%, #0b2a50 45%, #04152b 100%);
  border: 2px solid #bf9b48;
  box-shadow:
    inset 0 0 0 3px #153b60,
    0 0 24px #f2c24a36,
    0 3px 0 #020c1ed9;
}
.pw-head {
  position: relative;
  flex: none;
  text-align: center;
}
.pw-head .eyebrow {
  color: var(--pl-gold);
}
.pw-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255, 190, 70, 0.5),
    0 3px 0 #2e1e00;
}
.pw-head p {
  margin: 4px 0 0;
  font-size: var(--text-lg);
  color: #c7dcf2;
}
.pw-odds {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 8;
  text-align: left;
}
.pw-odds summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  list-style: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 900;
  color: #352000;
  background: linear-gradient(#fff4bd, #efb932);
  border: 2px solid #fff0a6;
  box-shadow:
    0 0 14px #ffd45077,
    2px 3px #503711;
}
.pw-odds summary::-webkit-details-marker {
  display: none;
}
.pw-odds summary:hover,
.pw-odds[open] summary {
  filter: brightness(1.16);
  box-shadow:
    0 0 22px #ffe178aa,
    2px 3px #503711;
}
.pw-odds summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.pw-odds-panel {
  position: absolute;
  top: 41px;
  right: 0;
  display: grid;
  gap: 8px;
  width: min(330px, calc(100vw - 52px));
  max-height: min(480px, 72dvh);
  overflow-y: auto;
  padding: 12px;
  background: #071d38f5;
  border: 2px solid #e6bf61;
  box-shadow:
    0 12px 30px #010813cc,
    0 0 24px #e9bf4c55;
}
.pw-odds-panel > strong {
  font-size: var(--text-md);
  letter-spacing: 1.3px;
  color: var(--pl-gold-light);
}
.pw-odds-panel > small {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #b4cbe1;
}
.pw-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 2px;
  flex: 1;
  min-height: 0;
  place-items: center;
}
.pw-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  isolation: isolate;
}
.pw-aurora {
  position: absolute;
  inset: 4% 11%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 29% 43%, #64c9ff55, transparent 45%),
    radial-gradient(ellipse at 69% 35%, #ff78d055, transparent 48%),
    radial-gradient(ellipse at 50% 75%, #ffd65c99, transparent 54%);
  filter: blur(24px);
  animation: pw-aurora 5s ease-in-out infinite alternate;
}
.pw-light-ring {
  position: absolute;
  z-index: -1;
  width: min(65%, 420px);
  aspect-ratio: 1;
  border: 2px solid #ffe59155;
  border-radius: 50%;
  box-shadow:
    0 0 12px #ffdd7866,
    0 0 42px #ffb93255,
    inset 0 0 32px #ffdd783b;
  animation: pw-ring 3s ease-in-out infinite alternate;
}
/* ondas de choque em anel: enriquece o entorno sem voltar à família de raios */
.pw-shock {
  position: absolute;
  z-index: -1;
  display: grid;
  place-items: center;
  width: min(65%, 420px);
  aspect-ratio: 1;
  pointer-events: none;
}
.pw-shock b {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid #ffe5914a;
  border-radius: 50%;
  opacity: 0;
  animation: pw-shock 4.2s ease-out infinite;
}
.pw-shock b:nth-child(2) {
  animation-delay: 1.4s;
}
.pw-shock b:nth-child(3) {
  animation-delay: 2.8s;
}
.pw.spinning .pw-shock b {
  border-color: #fff3c880;
  animation-duration: 1.5s;
}
@keyframes pw-shock {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.pw-sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pw-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  background: #fff8d3;
  box-shadow:
    0 0 7px 2px #ffe58a,
    0 0 17px #ffb933;
  transform: rotate(45deg);
  animation: pw-spark 2.3s ease-in-out var(--d) infinite alternate;
}
@keyframes pw-aurora {
  to {
    transform: scale(1.14) translateY(-1%);
    filter: blur(32px) hue-rotate(22deg);
  }
}
@keyframes pw-ring {
  to {
    transform: scale(1.16);
    opacity: 0.36;
  }
}
@keyframes pw-spark {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0.3);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0.14;
    transform: rotate(45deg) scale(1.5);
  }
}
.pw-wheel {
  display: block;
  width: min(520px, 95%, calc(83.7dvh - 206px));
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 20px #f8cc4c77);
}
.pw-slice {
  stroke: #fff3c4;
  stroke-width: 0.8;
  stroke-opacity: 0.6;
}
.pw-slice.mag {
  fill: url(#pw-g-mag);
}
.pw-slice.ora {
  fill: url(#pw-g-ora);
}
.pw-slice.lime {
  fill: url(#pw-g-lime);
}
.pw-slice.pur {
  fill: url(#pw-g-pur);
}
.pw-slice.master {
  fill: url(#pw-g-master);
}
.pw-slice.shiny {
  fill: url(#pw-g-shiny);
}
.pw-slice.won {
  stroke: #fff;
  stroke-width: 2.4;
  stroke-opacity: 1;
  animation: pw-won 0.6s ease-in-out infinite alternate;
}
@keyframes pw-won {
  from {
    filter: brightness(1.1);
  }
  to {
    filter: brightness(1.6);
  }
}
.pw-wheel text {
  font-family: inherit;
}
.pw-num {
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: 0;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: #10213b;
  stroke-width: 1.7px;
  stroke-linejoin: round;
}
.pw-lbl {
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 0.2px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: #10213b;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}
.pw-star {
  font-size: 20px;
  font-weight: 900;
  fill: var(--pl-gold-light);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: #10213b;
  stroke-width: 2px;
}
.pw-qbox {
  fill: url(#pw-g-gold);
  stroke: #10213b;
  stroke-width: 1.6;
}
.pw-q {
  font-size: var(--text-lg);
  font-weight: 900;
  fill: #3a2600;
  text-anchor: middle;
  dominant-baseline: central;
}
.pw-rotor image {
  image-rendering: pixelated;
  filter: drop-shadow(0 1.5px 0 rgba(16, 33, 59, 0.85));
}
.pw-peg {
  fill: #fff3c4;
  stroke: #7a5a14;
  stroke-width: 0.7;
}
.pw-edge {
  fill: none;
  stroke: #bf9b48;
  stroke-width: 2;
}
.pw-rim-out {
  fill: url(#pw-g-gold);
  stroke: #3a2600;
  stroke-width: 1.2;
}
.pw-rim {
  fill: #0f3160;
  stroke: var(--pl-gold-light);
  stroke-width: 1.2;
}
.pw-rim-in {
  fill: #061a33;
  stroke: #bf9b48;
  stroke-width: 1;
}
.pw-bulb {
  fill: #8a6a1c;
  stroke: #3a2600;
  stroke-width: 0.8;
  animation: pw-bulb 1.1s steps(1) infinite;
}
.pw-bulb.b1 {
  animation-delay: -0.55s;
}
@keyframes pw-bulb {
  0% {
    fill: #fff6c8;
    filter: drop-shadow(0 0 3px var(--pl-gold-bright));
  }
  50% {
    fill: #8a6a1c;
    filter: none;
  }
}
.pw.spinning .pw-bulb {
  animation: pw-chase 0.5s linear infinite;
  animation-delay: calc(var(--d) * -0.025s);
}
@keyframes pw-chase {
  0%,
  28% {
    fill: #fff6c8;
    filter: drop-shadow(0 0 4px var(--pl-gold-bright));
  }
  29%,
  100% {
    fill: #8a6a1c;
    filter: none;
  }
}
.pw.done .pw-bulb {
  animation: pw-bulb 0.3s steps(1) infinite;
}
.pw-hub-ring {
  fill: url(#pw-g-gold);
  stroke: #3a2600;
  stroke-width: 1.2;
}
.pw-ball-top {
  fill: #e3342f;
}
.pw-ball-bot {
  fill: #f4f4f4;
}
.pw-ball-line {
  fill: #1b1b1b;
}
.pw-ball-btn {
  fill: #f4f4f4;
  stroke: #1b1b1b;
  stroke-width: 2.2;
}
.pw-pin-body {
  fill: url(#pw-g-gold);
  stroke: #5a3a08;
  stroke-width: 1.3;
}
.pw-pin-gem {
  fill: #e3342f;
  stroke: #fff3c4;
  stroke-width: 1.3;
}
.pw-stand-body {
  fill: #10223d;
  stroke: #bf9b48;
  stroke-width: 1.5;
}
.pw-stand-base {
  fill: #0a1830;
  stroke: #bf9b48;
  stroke-width: 1.5;
}
.pw-side {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: #0a2447;
  border: 1px solid var(--pl-steel);
}
.pw-side-title {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-sky);
}
.pw-side small {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: #8fb3d6;
}
.pw-legend {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pw-leg {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  font-size: var(--text-sm);
  font-weight: 800;
  background: #0c2946;
  border: 1px solid #406686;
  transition: transform 0.2s;
}
.pw-leg b {
  color: #ffda76;
}
.pw-leg.shiny {
  border-color: #ff9ad5;
  background: linear-gradient(90deg, #3a1450, #0c2946);
}
.pw-leg.master {
  border-color: #c58bff;
  background: linear-gradient(90deg, #2d0f4a, #0c2946);
}
.pw-leg.gold500 {
  border-color: var(--pl-gold-light);
}
.pw-leg.hit {
  border-color: #fff;
  background: linear-gradient(90deg, #7a5a14, #0c2946);
  transform: translateX(-4px);
  box-shadow: 0 0 12px rgba(255, 210, 90, 0.45);
}
.pw-ico {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
.pw-ico.star {
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  text-shadow:
    0 0 6px #ff9ad5,
    0 0 10px var(--pl-cyan);
}
.pw-ico.q {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1;
  color: #5a3a08;
  background: linear-gradient(#fff0b3, #f0b923);
  border: 1px solid #8a5a0c;
}
.pw-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 3px 0 5px;
}
.pw-ctrl > .btn:not(.pw-spin) {
  min-width: 180px;
  min-height: 42px;
}
.btn.pw-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: min(300px, 100%);
  min-height: 52px;
  font-size: 15px;
  letter-spacing: 2px;
  animation:
    pw-call 1.4s ease-in-out infinite,
    pw-shiver 4.6s ease-in-out infinite;
}
/* marquise: as lampadas correm em volta do botao, como a moldura de uma roda de cassino */
.pw-spin-bulbs {
  position: absolute;
  inset: 3px;
  z-index: 2;
  pointer-events: none;
}
.pw-spin-bulbs b {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff8d3;
  box-shadow: 0 0 5px 1px #ffd23f;
  animation: pw-bulb 1.1s linear infinite;
  animation-delay: calc(var(--k) * -0.0785s);
  offset-path: content-box;
  offset-distance: calc(var(--k) * 7.14%);
}
@supports not (offset-path: content-box) {
  /* sem offset-path a marquise vira duas fileiras, em cima e embaixo */
  .pw-spin-bulbs b {
    top: 0;
    left: calc(var(--k) * 14.2%);
  }
  .pw-spin-bulbs b:nth-child(n + 8) {
    top: auto;
    bottom: 0;
    left: calc((var(--k) - 7) * 14.2%);
  }
}
@keyframes pw-bulb {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes pw-breathe {
  50% {
    transform: scale(1.015);
  }
}
.btn.pw-spin .pk-go-spark {
  animation: lucky-twinkle 1.6s ease-in-out infinite;
}
@keyframes pw-call {
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 210, 90, 0.8));
  }
}
/* a borda viva fica atrás do bisel (--lip-* em -2, --face-* em -1), por cima só do contorno escuro */
.pw-spin-edge {
  position: absolute;
  z-index: -3;
  inset: -1px;
  clip-path: var(--px-o);
  background: linear-gradient(90deg, #ffe9a6, #ff9df5, #7fe4ff, #ffe9a6);
  background-size: 300% 100%;
  animation:
    pw-spin-edge 3.2s linear infinite,
    pw-breathe 2.2s ease-in-out infinite;
  pointer-events: none;
}
.pw-spin-sheen {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, #ffffffaa, #ffffff33, transparent);
  mix-blend-mode: screen;
  transform: translateX(-170%) skewX(-18deg);
  animation: pw-spin-sheen 2.8s ease-in-out infinite;
  pointer-events: none;
}
.btn.pw-spin > span {
  position: relative;
  z-index: 2;
}
.pw-spin-dots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.pw-spin-dots b {
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  background: #fff6c8;
  box-shadow: 0 0 6px #ffd23f;
  opacity: 0;
  animation: pw-spin-dot 1.9s ease-out infinite;
}
.pw-spin-dots b:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.pw-spin-dots b:nth-child(2) {
  left: 25%;
  animation-delay: 0.18s;
}
.pw-spin-dots b:nth-child(3) {
  left: 42%;
  animation-delay: 0.36s;
}
.pw-spin-dots b:nth-child(4) {
  left: 58%;
  animation-delay: 0.54s;
}
.pw-spin-dots b:nth-child(5) {
  left: 75%;
  animation-delay: 0.72s;
}
.pw-spin-dots b:nth-child(6) {
  left: 90%;
  animation-delay: 0.9s;
}
.btn.pw-spin:hover:not(:disabled) .pw-spin-dots b,
.btn.pw-spin:focus-visible .pw-spin-dots b {
  animation-duration: 1.1s;
}
.btn.pw-spin:hover:not(:disabled) .pw-spin-bulbs b,
.btn.pw-spin:focus-visible .pw-spin-bulbs b {
  animation-duration: 0.6s;
}
.btn.pw-spin:hover:not(:disabled) .pw-spin-edge,
.btn.pw-spin:focus-visible .pw-spin-edge {
  animation-duration: 1.4s;
}
@keyframes pw-spin-edge {
  to {
    background-position: 300% 0;
  }
}
@keyframes pw-spin-sheen {
  0%,
  58% {
    transform: translateX(-170%) skewX(-18deg);
  }
  100% {
    transform: translateX(350%) skewX(-18deg);
  }
}
@keyframes pw-shiver {
  0%,
  82%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  86% {
    transform: translate(-1.5px, 0) rotate(-0.4deg);
  }
  90% {
    transform: translate(1.5px, 0) rotate(0.4deg);
  }
  94% {
    transform: translate(-1px, 0) rotate(-0.25deg);
  }
  97% {
    transform: translate(1px, 0) rotate(0.25deg);
  }
}
@keyframes pw-spin-dot {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-28px) scale(1);
  }
}
.pw.spinning .btn.pw-spin {
  animation: none;
  opacity: 0.55;
}
.pw.spinning .pw-spin-edge,
.pw.spinning .pw-spin-sheen,
.pw.spinning .pw-spin-bulbs b,
.pw.spinning .pw-spin-dots b {
  animation: none;
}
.pw-force {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 32px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-gold);
  background: #2a1a4acc;
  border: 1px dashed #b98cff;
}
.pw-force select {
  height: 24px;
  font: inherit;
  font-size: var(--text-sm);
  color: #fff;
  background: #140a2a;
  border: 1px solid #6d4fa8;
}
.pw-fx {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.pw-fx i {
  position: absolute;
  top: -4%;
  left: var(--x);
  width: 8px;
  height: 12px;
  opacity: 0;
  animation: pw-fall 2.8s cubic-bezier(0.3, 0.6, 0.5, 1) var(--d) forwards;
}
.pw-fx i.cn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, var(--pl-gold-bright) 45%, #b07d10);
  box-shadow: 0 0 6px #ffd23f99;
}
.pw-fx i.cf.c0 {
  background: #ff5ea8;
}
.pw-fx i.cf.c1 {
  background: var(--pl-gold-bright);
}
.pw-fx i.cf.c2 {
  background: #7cf07c;
}
.pw-fx i.cf.c3 {
  background: #5ec8ff;
}
.pw-fx i.cf.c4 {
  background: #b58cff;
}
.pw-fx i.cf.c5 {
  background: #ff8a3d;
}
@keyframes pw-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(var(--s));
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--w), 105vh) rotate(var(--r)) scale(var(--s));
  }
}
.pw.jackpot-now::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 240, 180, 0.6),
    rgba(255, 200, 80, 0.15) 40%,
    transparent 65%
  );
  animation: pw-flash 1.8s ease-out forwards;
}
@keyframes pw-flash {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* abertura: cartão de evento com a roleta girando devagar */
.evc-card.pw-intro {
  --ev-a: #b8660e;
  --ev-b: #2a1406;
}
.pw-intro-aurora {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(ellipse at 36% 38%, #ffb93b88, transparent 42%),
    radial-gradient(ellipse at 68% 56%, #f867bd66, transparent 46%),
    radial-gradient(ellipse at 53% 76%, #66c9ff66, transparent 48%);
  filter: blur(15px);
  animation: pw-aurora 4s ease-in-out infinite alternate;
}
.pw-intro-wheel {
  position: relative;
  z-index: 1;
  width: min(230px, 84%);
  animation: event-bob 3.2s ease-in-out infinite;
}
.pw-intro-wheel .pw-wheel {
  width: 100%;
  animation: pw-in 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.pw-intro .pw-rotor {
  animation: pw-idle 9s linear infinite;
}
@keyframes pw-idle {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pw-in {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-40deg);
  }
}
.pw-drop span {
  display: inline-block;
  animation: pw-drop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(var(--i) * 0.05s);
}
@keyframes pw-drop {
  from {
    opacity: 0;
    transform: translateY(-34px);
  }
}
.pw-perk,
.evc-perk .item-sprite {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.pw-perk-star {
  font-size: 16px;
  color: #fff;
  text-shadow:
    0 0 6px #ff9ad5,
    0 0 10px var(--pl-cyan);
}
.pw-coin-fall {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, var(--pl-gold-bright) 45%, #b07d10);
  box-shadow: 0 0 8px #ffd23f99;
  animation: pw-coin-drop 2.6s ease-in infinite;
}
.pw-coin-fall.c1 {
  left: 20%;
  animation-delay: 0.2s;
}
.pw-coin-fall.c2 {
  left: 60%;
  animation-delay: 1.1s;
}
.pw-coin-fall.c3 {
  left: 80%;
  animation-delay: 1.8s;
}
@keyframes pw-coin-drop {
  0% {
    top: -8%;
    opacity: 0;
    transform: rotateY(0);
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 92%;
    opacity: 0;
    transform: rotateY(720deg);
  }
}
.compact-shell:has(.pw) .expedition-dock {
  display: none;
}
.compact-shell:has(.pw) .expedition-progress {
  display: none;
}
body:has(.pw, .pw-intro) #jirachi {
  display: none !important;
}
.compact-shell .run-main:has(.pw) {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pw-side .pw-ctrl {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin-top: 2px;
}
.pw-side .pw-ctrl .btn {
  width: 100%;
}
.pw-side .btn.pw-spin {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  gap: 8px;
  font-size: var(--text-lg);
  letter-spacing: 1px;
  white-space: nowrap;
}
.pw-side .pw-force {
  justify-content: space-between;
}
@media (max-width: 760px) {
  .pw {
    padding: 10px;
  }
  .pw-head h2 {
    font-size: 20px;
  }
  .pw-ctrl > .btn:not(.pw-spin) {
    min-width: 130px;
  }
  .pw-odds {
    top: 0;
  }
  .pw-odds summary {
    width: 30px;
    height: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-pop-back,
  .pw-pop-card,
  .pw-pop-aurora,
  .pw-pop-halo,
  .pw-pop-sp,
  .pw-pop.flash::after,
  .pw-aurora,
  .pw-light-ring,
  .pw-shock b,
  .pw-spin-edge,
  .pw-spin-sheen,
  .pw-spin-bulbs b,
  .pw-spin-dots b,
  .pw-sparks i,
  .pw-bulb,
  .pw-slice.won,
  .btn.pw-spin,
  .pw-res-img,
  .pw-res-mon,
  .pw-res-coin,
  .pw-intro-aurora,
  .pw-intro-wheel,
  .pw-intro .pw-rotor,
  .pw-drop span,
  .pw-coin-fall,
  .pw-fx i,
  .pw.jackpot-now::after {
    animation: none !important;
  }
}
.pw-pop {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: center;
  padding: 16px;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}
.pw-pop-back {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(40, 20, 0, 0.55), rgba(1, 6, 18, 0.82) 70%);
  animation: pw-back 0.35s ease-out both;
}
@keyframes pw-back {
  from {
    opacity: 0;
  }
}
.pw-pop-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(400px, 100%);
  padding: 26px 24px 20px;
  text-align: center;
  color: #edf4ff;
  background: linear-gradient(180deg, #123a66 0%, #0a2447 50%, #061a33 100%);
  border: 3px solid #bf9b48;
  box-shadow:
    inset 0 0 0 2px #153b60,
    0 0 0 2px #04152b,
    0 0 40px rgba(255, 200, 80, 0.35),
    0 20px 50px rgba(0, 0, 0, 0.6);
  isolation: isolate;
  overflow: hidden;
  animation: pw-card-in 0.7s cubic-bezier(0.18, 1.5, 0.4, 1) both;
}
@keyframes pw-card-in {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-8deg);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
.pw-pop-aurora {
  position: absolute;
  inset: -24%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 42% 36%, #ffe49b88, transparent 42%),
    radial-gradient(ellipse at 66% 62%, #f18ac466, transparent 48%),
    radial-gradient(ellipse at 25% 74%, #71caff55, transparent 45%);
  filter: blur(18px);
  animation: pw-aurora 3s ease-in-out infinite alternate;
}
.pw-pop-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  font: inherit;
  font-size: var(--text-xl);
  font-weight: 900;
  color: #8fb3d6;
  background: #0a2447;
  border: 1px solid #406686;
  cursor: pointer;
}
.pw-pop-x:hover {
  color: #fff;
  border-color: var(--pl-gold-light);
}
.pw-pop-ribbon {
  position: absolute;
  top: 24px;
  left: -44px;
  z-index: 3;
  width: 170px;
  padding: 4px 0;
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #2e1e00;
  background: linear-gradient(#fff0b3, #f0b923);
  box-shadow: 0 2px 0 #7a5a14;
  transform: rotate(-35deg);
}
.pw-pop-kicker {
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 2.4px;
  color: var(--pl-gold);
  animation: pw-kicker 1.2s ease-in-out infinite alternate;
}
@keyframes pw-kicker {
  to {
    text-shadow: 0 0 12px var(--pl-gold-bright);
  }
}
.pw-pop-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 130px;
  animation: pw-art-in 0.8s cubic-bezier(0.2, 1.7, 0.4, 1) 0.15s both;
}
@keyframes pw-art-in {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.pw-pop-halo {
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 160, 0.75), rgba(255, 200, 80, 0.18) 55%, transparent 72%);
  animation: tut-halo 2s ease-in-out infinite;
}
.pw-pop-sp {
  position: absolute;
  font-style: normal;
  line-height: 1;
  color: var(--pl-gold-light);
  text-shadow: 0 0 8px var(--pl-gold-bright);
  animation: tut-twinkle 1.6s ease-in-out infinite;
}
.pw-pop-sp.p1 {
  top: 4%;
  left: 12%;
  font-size: 16px;
}
.pw-pop-sp.p2 {
  top: 10%;
  right: 8%;
  font-size: var(--text-lg);
  animation-delay: 0.3s;
}
.pw-pop-sp.p3 {
  bottom: 12%;
  left: 4%;
  font-size: var(--text-md);
  animation-delay: 0.6s;
}
.pw-pop-sp.p4 {
  bottom: 4%;
  right: 14%;
  font-size: 15px;
  animation-delay: 0.9s;
}
.pw-pop-sp.p5 {
  top: 44%;
  left: -2%;
  font-size: var(--text-xs);
  animation-delay: 1.2s;
}
.pw-pop-sp.p6 {
  top: 40%;
  right: -2%;
  font-size: var(--text-sm);
  animation-delay: 0.45s;
}
.pw-pop .pw-res-img {
  width: 92px;
  height: 92px;
  image-rendering: pixelated;
  animation: event-bob 2.4s ease-in-out infinite;
}
.pw-pop .pw-res-mon {
  width: 124px;
  height: 124px;
  object-fit: contain;
  animation: event-bob 2.4s ease-in-out infinite;
}
.pw-pop .pw-big-gold {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.pw-pop .pw-res-coin {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  animation: pw-coin-spin 1.1s linear infinite;
}
.pw-pop .pw-big-gold b {
  font-size: 32px;
  line-height: 1;
  color: var(--pl-gold-light);
  text-shadow:
    0 3px 0 #2e1e00,
    0 0 16px rgba(255, 210, 90, 0.6);
}
@keyframes pw-coin-spin {
  50% {
    transform: scaleX(0.15);
  }
}
.pw-pop-card h3 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.pw-pop-card p {
  margin: 0;
  max-width: 320px;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.55;
  color: #c7dcf2;
}
.pw-pop-card .btn {
  min-width: 220px;
  margin-top: 6px;
}
.pw-pop.jackpot .pw-pop-card {
  border-color: var(--pl-gold-light);
  box-shadow:
    inset 0 0 0 2px #153b60,
    0 0 0 2px #04152b,
    0 0 70px rgba(255, 210, 90, 0.6),
    0 20px 50px rgba(0, 0, 0, 0.6);
}
.pw-pop.kind-shiny .pw-pop-card {
  border-color: #ff9ad5;
  background: linear-gradient(180deg, #3a1450 0%, #1a1446 45%, #061a33 100%);
}
.pw-pop.kind-shiny h3 {
  background: linear-gradient(90deg, #ff5ea8, var(--pl-gold-bright), #7cf07c, #5ec8ff, #b58cff, #ff5ea8) 0 0/200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: lucky-flow 3s linear infinite;
}
.pw-pop.kind-master.jackpot .pw-pop-card {
  border-color: #c58bff;
  background: linear-gradient(180deg, #3a1260 0%, #1d0f46 45%, #061a33 100%);
}
.pw-pop.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 244, 200, 0.85),
    rgba(255, 200, 80, 0.25) 35%,
    transparent 65%
  );
  animation: pw-flash 1.4s ease-out forwards;
}
@media (max-width: 520px) {
  .pw-pop-card {
    padding: 22px 16px 16px;
  }
  .pw-pop-card h3 {
    font-size: 20px;
  }
  .pw-pop-art {
    width: 130px;
    height: 112px;
  }
}

/* ================= escolha da região (antes dos iniciais) e abas de região nas coleções ================= */
.rg-intro {
  position: relative;
}
.rg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #cfe0ff;
  background: #10294a;
  border: 1px solid var(--pl-steel, #33628f);
  cursor: pointer;
}
.rg-back:hover,
.rg-back:focus-visible {
  color: #fff;
  background: #1b4372;
}
.rg-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
/* faixa larga e baixa: o nome a esquerda, os chefes no meio e o JOGAR a direita */
.rg-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 12px 16px;
  font: inherit;
  text-align: left;
  color: #eaf3ff;
  background: linear-gradient(100deg, #123855, #061428 70%);
  border: 2px solid var(--pl-steel, #33628f);
  box-shadow: inset 0 0 0 1px #0a1c33;
}
.rg-card.kanto {
  cursor: pointer;
  border-color: var(--pl-gold, #ffd45c);
  transition:
    transform 0.16s,
    box-shadow 0.16s;
}
.rg-card.kanto:hover,
.rg-card.kanto:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px #0a1c33,
    0 10px 22px #0009,
    0 0 20px #ffd45c4d;
}
.rg-glow {
  position: absolute;
  inset: 0 30% 0 -10%;
  z-index: -1;
  background: radial-gradient(ellipse at 30% 50%, #ffd45c2e, transparent 66%);
  filter: blur(12px);
  animation: rg-breathe 4.6s ease-in-out infinite alternate;
  pointer-events: none;
}
.rg-card.johto .rg-glow {
  background: radial-gradient(ellipse at 30% 50%, #8fd2ff26, transparent 66%);
}
.rg-sheen {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(112deg, transparent, #ffffff22, transparent);
  transform: translateX(-180%) skewX(-14deg);
  animation: rg-sheen 6s ease-in-out infinite;
  pointer-events: none;
}
.rg-name {
  min-width: 0;
}
.rg-name b {
  display: block;
  font-size: 22px;
  letter-spacing: 2.5px;
  color: #fff;
  text-shadow: 2px 3px 0 #04101f;
}
.rg-card.johto .rg-name b {
  color: #b9d6f2;
}
.rg-name small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: #a9c4dd;
}
.rg-bosses {
  display: flex;
  align-items: center;
  gap: 1px;
}
.rg-bosses i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: radial-gradient(closest-side, #ffd45c1a, transparent 70%);
}
.rg-boss {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 #0007);
  animation: rg-float 3.4s ease-in-out infinite;
}
.rg-bosses i:nth-child(2) .rg-boss {
  animation-delay: 0.35s;
}
.rg-bosses i:nth-child(3) .rg-boss {
  animation-delay: 0.7s;
}
.rg-bosses i:nth-child(4) .rg-boss {
  animation-delay: 1.05s;
}
.rg-bosses i:nth-child(5) .rg-boss {
  animation-delay: 1.4s;
}
.rg-bosses i:nth-child(6) .rg-boss {
  animation-delay: 1.75s;
}
/* o JOGAR: bisel dourado, borda que respira e brilho que varre por dentro */
.rg-go {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 2px;
  color: #17120a;
  background: linear-gradient(#ffe9a6, #e0aa2b);
  border-bottom: 3px solid #8a6412;
  box-shadow:
    inset 0 1px 0 #fff6cf,
    0 0 0 0 #ffd45c00;
  animation: rg-go-pulse 1.8s ease-in-out infinite;
}
.rg-go > span,
.rg-go .chev {
  position: relative;
  z-index: 1;
}
.rg-go-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(104deg, transparent, #fffdf2cc, transparent);
  transform: translateX(-170%) skewX(-18deg);
  animation: rg-go-sweep 2.6s ease-in-out infinite;
}
.rg-card.kanto:hover .rg-go,
.rg-card.kanto:focus-visible .rg-go {
  filter: brightness(1.08);
}
.rg-go.off {
  color: #6f93b5;
  background: #0d2743;
  border-bottom-color: #1b3a5c;
  box-shadow: none;
  animation: none;
}
.rg-card.soon {
  filter: saturate(0.55);
}
.rg-seal {
  position: absolute;
  top: 10px;
  right: -32px;
  z-index: 2;
  width: 126px;
  padding: 3px 0;
  text-align: center;
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: #06121f;
  background: linear-gradient(#8fd2ff, #3f88c4);
  border-top: 1px solid #cdeaff;
  border-bottom: 1px solid #1d4d78;
  transform: rotate(38deg);
}
@keyframes rg-breathe {
  to {
    opacity: 0.5;
    transform: scale(1.08);
  }
}
@keyframes rg-sheen {
  0%,
  62% {
    transform: translateX(-180%) skewX(-14deg);
  }
  100% {
    transform: translateX(340%) skewX(-14deg);
  }
}
@keyframes rg-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes rg-go-pulse {
  50% {
    box-shadow:
      inset 0 1px 0 #fff6cf,
      0 0 14px 2px #ffd45c7a;
  }
}
@keyframes rg-go-sweep {
  0%,
  58% {
    transform: translateX(-170%) skewX(-18deg);
  }
  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}
/* abas de região da Pokédex e da Shiny Dex */
.dex-regions {
  display: flex;
  gap: 6px;
}
.dex-region {
  display: grid;
  gap: 0;
  padding: 4px 9px;
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #a9c4dd;
  background: #0a2138;
  border: 1px solid var(--pl-steel, #33628f);
  cursor: pointer;
}
.dex-region:hover,
.dex-region:focus-visible {
  color: #fff;
  background: #123c62;
}
.dex-region.active {
  color: #06121f;
  background: var(--pl-gold, #ffd45c);
  border-color: var(--pl-gold, #ffd45c);
}
.is-shiny .dex-region.active {
  background: #ff9be8;
  border-color: #ff9be8;
}
.dex-region small {
  font-size: 6px;
  letter-spacing: 0.5px;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .rg-glow,
  .rg-sheen,
  .rg-boss,
  .rg-go,
  .rg-go-glow {
    animation: none;
  }
  .rg-card.kanto {
    transition: none;
  }
}
@media (max-width: 520px) {
  .rg-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    min-height: 0;
    padding: 12px;
  }
  .rg-name b {
    font-size: 19px;
  }
  .rg-bosses {
    grid-column: 1 / -1;
    order: 3;
    justify-content: center;
  }
  .rg-bosses i {
    width: 38px;
    height: 38px;
  }
  .rg-boss {
    width: 34px;
    height: 34px;
  }
  .rg-go {
    padding: 8px 12px;
  }
}

/* ================= PVP em testes (26/09/2026): lobby, escolha de equipes, VS e emojis ================= */
.pvp-page {
  display: grid;
  gap: 12px;
}
.pvp-hd h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pvp-tag {
  padding: 3px 8px;
  font-size: var(--text-3xs);
  font-weight: 900;
  letter-spacing: 1.6px;
  color: #2a1204;
  background: linear-gradient(#ffc078, #e8722b);
  border-bottom: 2px solid #8a3c10;
}
.pvp-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--pl-slate, #9fb3cc);
}
.pvp-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}
.pvp-panel-hd h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 1.6px;
  color: var(--ui-gold, #ffe28a);
}
.pvp-panel-hd p {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  color: #a9c4dd;
}
.pvp-warn {
  color: #ffc9a8 !important;
}
/* ---- escolha das equipes */
.pvp-slot {
  display: grid;
  gap: 5px;
}
.pvp-slot-lbl {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--pl-slate, #9fb3cc);
}
.pvp-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pvp-hall {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font: inherit;
  color: #d6e7f8;
  background: #0a2138;
  border: 1px solid var(--pl-steel, #33628f);
  cursor: pointer;
  transition:
    border-color 0.14s,
    background 0.14s;
}
.pvp-hall:hover {
  background: #123c62;
}
.pvp-hall.on {
  color: #06121f;
  background: var(--pl-gold, #ffd45c);
  border-color: var(--pl-gold, #ffd45c);
}
.pvp-hall-no {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
}
.pvp-team {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.pvp-mon {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.pvp-team.big .pvp-mon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(2px 3px 0 #0007);
}
.pvp-panel-actions {
  display: flex;
  justify-content: flex-end;
}
/* ---- convites e lobby */
.pvp-invites ul,
.pvp-lobby ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pvp-invite,
.pvp-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--text-md);
  background: #0a2138;
  border: 1px solid #243f60;
}
.pvp-invite.in {
  border-color: var(--pl-gold, #ffd45c);
  box-shadow: 0 0 12px #ffd45c33;
  animation: pvp-ring 1.6s ease-in-out infinite;
}
.pvp-invite-go {
  display: flex;
  gap: 6px;
}
.pvp-wait {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 2px solid #3d5b8c;
  border-top-color: var(--pl-gold, #ffd45c);
  border-radius: 50%;
  animation: pvp-spin 0.9s linear infinite;
}
.pvp-player-id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pvp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fd06a;
  box-shadow: 0 0 6px #5fd06a;
  animation: pvp-pulse 2s ease-in-out infinite;
}
.pvp-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--pl-slate, #9fb3cc);
}
.pvp-locked {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}
.pvp-locked strong {
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--ui-gold, #ffe28a);
}
/* ---- a tela de VS antes da luta */
.pvp-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 22px 16px;
  background: radial-gradient(120% 100% at 50% 0, #1b3a68, #061428 70%);
  border: 2px solid var(--pl-gold, #ffd45c);
  animation: pvp-vs-in 0.45s ease-out both;
}
.pvp-vs-side {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.pvp-vs-side b {
  font-size: 17px;
  letter-spacing: 1.4px;
  color: #fff;
}
.pvp-vs-side.me {
  animation: pvp-slide-l 0.5s ease-out both;
}
.pvp-vs-side.you {
  animation: pvp-slide-r 0.5s ease-out both;
}
.pvp-vs-side .pvp-team {
  flex-wrap: wrap;
  justify-content: center;
}
.pvp-vs-mark {
  font-size: 38px;
  font-weight: 900;
  font-style: italic;
  color: var(--pl-gold, #ffd45c);
  text-shadow: 3px 4px 0 #04101f;
  animation: pvp-vs-pop 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both 0.25s;
}
.pvp-vs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* ---- emojis */
.pvp-emotes {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: #0a2138;
  border: 1px solid #243f60;
}
.pvp-emote-feed {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 46px;
}
.pvp-emote-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  font-size: var(--text-2xs);
  background: #0d2743;
  border: 1px solid #243f60;
  animation: pvp-emote-in 0.35s ease-out both;
}
.pvp-emote-row.me {
  border-color: var(--pl-gold, #ffd45c);
}
.pvp-emote-row img {
  width: 34px;
  height: 34px;
}
.pvp-emote-pick {
  display: flex;
  gap: 8px;
}
.pvp-emote-btn {
  display: grid;
  place-items: center;
  padding: 4px;
  background: #0d2743;
  border: 1px solid var(--pl-steel, #33628f);
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.14s;
}
.pvp-emote-btn:hover,
.pvp-emote-btn:focus-visible {
  transform: translateY(-2px) scale(1.06);
  border-color: var(--pl-gold, #ffd45c);
}
.pvp-emote-btn img {
  width: 40px;
  height: 40px;
}
.pvp-battle .battle-field {
  min-height: 300px;
}
/* ---- o cartão do menu inicial */
.home-menu-card.em-testes {
  position: relative;
}
.home-menu-card.em-testes:after {
  content: 'EM TESTES';
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 2px 6px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #2a1204;
  background: linear-gradient(#ffc078, #e8722b);
}
@keyframes pvp-ring {
  50% {
    box-shadow: 0 0 20px #ffd45c73;
  }
}
@keyframes pvp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pvp-pulse {
  50% {
    opacity: 0.4;
  }
}
@keyframes pvp-vs-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes pvp-slide-l {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }
}
@keyframes pvp-slide-r {
  from {
    opacity: 0;
    transform: translateX(26px);
  }
}
@keyframes pvp-vs-pop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }
}
@keyframes pvp-emote-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-invite.in,
  .pvp-wait,
  .pvp-dot,
  .pvp-vs,
  .pvp-vs-side.me,
  .pvp-vs-side.you,
  .pvp-vs-mark,
  .pvp-emote-row {
    animation: none;
  }
  .pvp-hall,
  .pvp-emote-btn {
    transition: none;
  }
}
@media (max-width: 520px) {
  .pvp-vs {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 10px;
  }
  .pvp-vs-mark {
    font-size: 28px;
  }
  .pvp-team.big .pvp-mon {
    width: 40px;
    height: 40px;
  }
}

/* A batalha do PVP acontece numa página de menu, e não na casca da expedição (.compact-shell), então as regras
   de layout do combate (".compact-shell .card-battle ...") não a alcançam. Estas repetem só o que o campo precisa. */
.pvp-battle .battle-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 14px;
  min-height: 0;
  border: 1px solid #6989a6;
}
.pvp-battle .battle-card-list {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}
.pvp-battle .battle-commandbar,
.pvp-battle .battle-actions {
  background: #0a2138;
  color: #d6e7f8;
  border-color: #243f60;
}
.pvp-battle .battle-console {
  border-color: #243f60;
}
.pvp-battle .battle-log {
  min-height: 92px;
  max-height: 92px;
}
@media (max-width: 620px) {
  .pvp-battle .battle-field {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
  }
  .pvp-battle .battle-versus {
    display: none;
  }
}

.pvp-battle .battle-console {
  overflow: hidden; /* o log tem altura fixa: sem isto ele passava por cima da barra de ações */
}

/* ================= acabamento 26/09/2026: selo dos cards, botão "?" único e botões no estilo da página ================= */

/* O selo "EM TESTES" é um filho, e não um :after: os cards do menu usam :before/:after para o bisel. */
.menu-tag {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  padding: 2px 6px;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #2a1204;
  background: linear-gradient(#ffc078, #e8722b);
  border-bottom: 1px solid #8a3c10;
  pointer-events: none;
}

/* ---- o "?" de ajuda: um só desenho, pequeno e no alto, em todas as telas que explicam algo */
.pack-odds-btn,
.encounter-help,
.pw-odds > summary {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  list-style: none;
  color: #06121f;
  background: radial-gradient(circle at 34% 28%, #ffe9a6, #e0aa2b 62%, #a9761a);
  border: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 #fff6cf,
    inset 0 -2px 0 #8a6412,
    0 2px 0 #06121f;
  cursor: pointer;
  transition:
    transform 0.12s,
    filter 0.15s;
}
.pack-odds-btn::-webkit-details-marker,
.pw-odds > summary::-webkit-details-marker {
  display: none;
}
.pack-odds-btn:hover,
.encounter-help:hover,
.pw-odds > summary:hover,
.pack-odds-btn:focus-visible,
.encounter-help:focus-visible,
.pw-odds > summary:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.pack-odds-btn.on,
.pw-odds[open] > summary {
  color: #f6f9ff;
  background: radial-gradient(circle at 34% 28%, #7fc4ff, #2d74b8 62%, #17456f);
  box-shadow:
    inset 0 1px 0 #cdeaff,
    inset 0 -2px 0 #123454,
    0 2px 0 #06121f;
}
/* cada tela ancora o seu no canto de cima (a LOJA faz isso em shop.css, que carrega depois) */
.encounter-help {
  top: 8px;
  right: 8px;
}
.pw-odds > summary {
  top: 0;
  right: 0;
}

/* ---- TROCAR DE REGIÃO: botão do jogo, alinhado à esquerda e fora do fluxo do título */
.rg-intro {
  display: grid;
  justify-items: center;
}
.btn.rg-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: var(--text-2xs);
  letter-spacing: 1.4px;
}

/* ---- JOGAR: o bisel vem do sistema; aqui ficam só o tamanho e a cor dourada */
.rg-go {
  --lip-a: #ffe9a6;
  --lip-b: #8a6412;
  --face-a: #ffd45c;
  --face-b: #d9a52a;
  --ink: #17120a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  font-size: var(--text-md);
  font-weight: 900;
  letter-spacing: 2px;
  animation: rg-go-pulse 1.8s ease-in-out infinite;
}
.rg-go.off {
  --lip-a: #1b3a5c;
  --lip-b: #0a1c33;
  --face-a: #0d2743;
  --face-b: #081d33;
  --ink: #6f93b5;
  animation: none;
}

/* ---- LOG: o mesmo botão fantasma do PULAR BATALHA, só menor e sobre a caixa */
.btn.battle-log-more {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding: 0 8px;
  font-size: var(--text-3xs);
  letter-spacing: 1.2px;
}

/* ---- avisos curtos não precisam de uma janela inteira */
.modal.gem-modal {
  width: min(420px, 94vw);
}
.modal.gem-modal .modal-body {
  padding: 14px 16px 16px;
}
.modal.gem-modal .gem-choice-art {
  width: 104px;
  height: 104px;
}
.modal.gem-modal .gem-choice-art img {
  width: 76px;
  height: 76px;
}
.modal.gem-modal h3 {
  font-size: 17px;
}

/* ================= acabamento 26/09/2026 (2ª volta) ================= */

/* ---- TROCAR DE REGIÃO no canto de cima da página, fora do fluxo do título */
.menu-page > .main {
  position: relative;
}
.btn.rg-back {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  margin: 0;
}
.rg-intro {
  padding-top: 18px;
}

/* ---- JOGAR sem o reflexo; os chefes maiores nos dois cards */
.rg-go-glow {
  display: none;
}
.rg-bosses i {
  width: 58px;
  height: 58px;
}
.rg-boss {
  max-width: 54px;
}
.rg-card {
  min-height: 108px;
}

/* ---- LOG um pouco maior e translúcido, para não brigar com o log */
.btn.battle-log-more {
  min-height: 24px;
  padding: 0 10px;
  font-size: var(--text-2xs);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.btn.battle-log-more:hover,
.btn.battle-log-more:focus-visible {
  opacity: 1;
}

/* ---- o "?" não chama atenção sozinho: sem animação, só resposta ao toque */
.pack-odds-btn,
.encounter-help,
.pw-odds-btn {
  transition: filter 0.15s;
  animation: none;
}
.pack-odds-btn:hover,
.encounter-help:hover,
.pw-odds-btn:hover,
.pack-odds-btn:focus-visible,
.encounter-help:focus-visible,
.pw-odds-btn:focus-visible {
  transform: none;
  filter: brightness(1.1);
}
/* a roleta perdeu o <details>: o botão herda o mesmo desenho */
.pw-odds-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: #06121f;
  background: radial-gradient(circle at 34% 28%, #ffe9a6, #e0aa2b 62%, #a9761a);
  border: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 #fff6cf,
    inset 0 -2px 0 #8a6412,
    0 2px 0 #06121f;
  cursor: pointer;
}

/* ---- a janela de ajuda: a mesma para todo "?" do jogo */
.modal.help-modal {
  width: min(460px, 94vw);
}
.help-sheet {
  display: grid;
  gap: 10px;
}
.help-note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--pl-slate, #9fb3cc);
}
.help-sheet .pack-odds,
.help-sheet .pw-legend {
  margin: 0;
}

/* ---- avisos curtos não precisam de janela cheia */
.modal.abandon-modal {
  width: min(430px, 94vw);
}
.modal.abandon-modal .modal-body {
  padding: 14px 16px 16px;
}
.modal.abandon-modal .abandon-flag {
  width: 54px;
  height: 54px;
  font-size: 24px;
}
.modal.abandon-modal h3 {
  font-size: 17px;
}

/* ================= PVP: denso, sem o bloco laranja atrás dos times ================= */
.pvp-page {
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}
.pvp-hd {
  padding: 10px 12px;
}
.pvp-hd h2 {
  font-size: 19px;
}
.pvp-panel {
  gap: 8px;
  padding: 10px 12px;
}
.pvp-panel-hd h3 {
  font-size: 13px;
}
.pvp-panel-hd p {
  font-size: var(--text-2xs);
}
/* as duas equipes lado a lado */
.pvp-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pvp-slot {
  gap: 4px;
  min-width: 0;
}
.pvp-slot-lbl {
  font-size: var(--text-3xs);
}
.pvp-slot-list {
  gap: 4px;
}
/* o selecionado é uma borda dourada, e não um bloco dourado atrás das sprites */
.pvp-hall {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  color: #d6e7f8;
  background: #0a2138;
  border: 1px solid #2c4b6e;
}
.pvp-hall:hover {
  background: #123c62;
  border-color: #4a76a8;
}
.pvp-hall.on {
  color: #ffe28a;
  background: #0d2c4c;
  border-color: var(--pl-gold, #ffd45c);
  box-shadow: inset 0 0 0 1px #ffd45c40;
}
.pvp-hall-no {
  font-size: var(--text-3xs);
  opacity: 0.8;
}
.pvp-team {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
}
.pvp-mon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.pvp-panel-actions .btn {
  min-height: 28px;
  font-size: var(--text-2xs);
}
.pvp-player,
.pvp-invite {
  padding: 6px 8px;
  font-size: var(--text-xs);
}
.pvp-player .btn,
.pvp-invite .btn {
  min-height: 26px;
  font-size: var(--text-2xs);
}
.pvp-empty {
  padding: 10px;
}
.pvp-note {
  font-size: var(--text-2xs);
}
@media (max-width: 520px) {
  .pvp-slots {
    grid-template-columns: 1fr;
  }
}

/* ---- roleta 26/09/2026: roda menor e o GIRAR com as cores dos prêmios correndo, como o selo NEW ---- */
.pw-wheel {
  width: min(420px, 88%, calc(70dvh - 206px));
}
/* a face do botão (o `:after` do bisel) passa a ser um arco-íris que corre; as cores são as das fatias */
.btn.pw-spin:after {
  background: linear-gradient(
    100deg,
    #e8347f,
    #ff9a2a 18%,
    #9ed64e 36%,
    #7a4fd0 54%,
    #ffd23f 72%,
    #e8347f 90%,
    #ff9a2a
  );
  background-size: 320% 100%;
  animation: pw-spin-flow 4.5s linear infinite;
}
.btn.pw-spin {
  --ink: #17120a;
  --lip-a: #fff3c4;
  --lip-b: #8a5a0c;
  text-shadow: 0 1px 0 #ffffff66 !important;
}
@keyframes pw-spin-flow {
  to {
    background-position: 320% 0;
  }
}
.pw.spinning .btn.pw-spin:after {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn.pw-spin:after {
    animation: none;
  }
}

/* ---- mochila cheia 26/09/2026: a fila do que está esperando espaço e o contador que fica vermelho no limite */
.bag-waiting {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  background: #0b1a2e66;
}
.bag-waiting li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--text-xs);
}
.bag-waiting-ico {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.help-actions {
  display: flex;
  justify-content: flex-end;
}
.bag-tabs small.bag-full,
.dock-tabs small.bag-full {
  color: #ff9a9a;
}

/* ---- 26/09/2026: o ouro guardado entrou no resumo do fim da expedição, então são quatro colunas */
.oc-stats {
  grid-template-columns: repeat(3, 1fr) 1.4fr;
}
.oc-gold {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.oc-coin {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
@media (max-width: 720px) {
  .oc-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- 26/09/2026: a faixa do treinador ganhou a carteira (ouro e Shiny Gems) e virou três blocos alinhados:
   quem é o treinador · o que ele tem · o que ele pode fazer. Assim o nome e a barra de XP param de brigar
   por espaço com os botões, que antes empurravam tudo quando o nome era comprido. */
.account-bar {
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 10px;
}
.ab-text {
  gap: 2px;
  min-width: 118px; /* sem isto o nome do treinador encolhia até virar reticências ao lado da carteira */
}
.ab-wallet {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: stretch;
  padding: 4px 4px 4px 0;
  border-right: 1px solid #ffffff1a;
}
.ab-wallet > span {
  display: grid;
  gap: 1px;
  justify-items: end;
  padding: 2px 8px;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  background: #0713291f;
}
.ab-wallet small {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ui-gold);
}
.ab-wallet b {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}
.ab-wallet-ico {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.ab-gem b {
  color: #bdefff;
}
/* Quando tudo não cabe numa linha, os botões descem inteiros e ficam encostados à direita, debaixo da carteira:
   as duas linhas terminam na mesma margem e a faixa continua parecendo uma coisa só. */
.ab-actions {
  margin-left: auto;
}
@media (max-width: 520px) {
  .ab-wallet {
    padding-right: 0;
    border-right: 0;
  }
  .ab-wallet small {
    display: none;
  }
  .ab-wallet > span {
    align-content: center;
    padding: 2px 6px;
  }
}

/* ---- 26/09/2026: as setas "→" saíram. ▲ verde diz que um número sobe (o nível do TM), ▼ vermelho que desce,
   e ▶ é só percurso: de uma coisa para a próxima (evolução, etapa seguinte, versão nova). */
.up-arrow,
.down-arrow {
  font-style: normal;
  font-size: 0.85em;
  line-height: 1;
}
.up-arrow {
  color: #7ee08a;
}
.down-arrow {
  color: #ff8f8f;
}
.to-arrow {
  font-style: normal;
  font-size: 0.8em;
  line-height: 1;
  color: var(--ui-gold, #f0b923);
  opacity: 0.85;
}

/* ---- 26/09/2026: a mesa de cartas tinha `overflow: hidden` e altura fixa; quando a compra da chave aparecia,
   o aviso, a oferta e o rodapé eram empurrados para fora e sumiam. Agora a mesa rola quando não cabe, e as
   cartas ficam um pouco menores para o caso comum caber sem barra nenhuma. Enquanto as cartas são distribuídas
   a barra continua desligada: a animação sobe as cartas para fora da mesa de propósito. */
.card-table {
  overflow: hidden auto;
}
/* Em janela baixa as cartas encolhem mais cedo: o que estava embaixo delas (o aviso, a compra da chave e o
   rodapé) passa a caber sem barra de rolagem. Em tela alta o tamanho de antes continua valendo. */
@media (max-height: 900px) {
  .card-table {
    --ch: clamp(112px, calc(100dvh - 648px), 220px);
    padding: 10px;
  }
  .card-table > header {
    margin-bottom: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* os nomes dos biomas de 26/09/2026 são longos: na carta menor eles ganham um corpo menor para não virarem
     três linhas e empurrarem os tipos para fora */
  .card-table .card-copy strong {
    font-size: 11px;
    line-height: 1.15;
    text-wrap: balance;
  }
  /* três tipos não cabem escritos numa carta estreita: fica só o ícone, que já diz o tipo (o nome continua
     no atributo da imagem, para quem usa leitor de tela) */
  .card-table .card-copy .route-types .type {
    padding: 2px 4px;
    font-size: 0;
    gap: 0;
  }
  .card-table .card-copy .route-types .type-sprite {
    margin: 0;
  }
}
.card-table:has(.card-row.dealing) {
  overflow: hidden;
}
.card-table > footer {
  flex: none;
}

/* ---- 26/09/2026: a skin não colecionada mostra a arte, o nome e o Pokémon. Ela continua se distinguindo da
   que é sua pelo brilho apagado e pela etiqueta, não por esconder o que é. */
.skin-card.locked {
  opacity: 1;
}
.skin-card.locked img {
  filter: grayscale(0.55) brightness(0.72);
}
.skin-card.locked strong,
.skin-card.locked small {
  color: var(--ui-muted, #9fb3cc);
}
.skin-card.on-sale img {
  filter: none;
}
.sc-tags i.sale {
  background: #ff7ac82b;
  color: #ffc7e8;
}
.sc-tags i.soon {
  background: #ffffff12;
  color: var(--ui-muted, #9fb3cc);
}

/* Superficies que guardam informacao: cantos discretos, sem alterar molduras de sprites,
   trilha da jornada, rolos da maquina ou arte das cartas. */
.site-theme {
  --ui-panel-radius: 6px;
  --ui-info-radius: 4px;
}
.site-theme .home-window,
.site-theme.menu-page .panel:not(.outcome),
.site-theme.menu-page .modal,
.mail-client,
.mail-client .mail-reader,
.adm-panel,
.gx-card,
.gx-tile {
  border-radius: var(--ui-panel-radius) !important;
}
.site-theme .home-menu-card,
.site-theme.menu-page .banner,
.site-theme.menu-page .detail-cell,
.mail-client .mail-row,
.mail-client .mail-gifts,
.players-totals span,
.tc-stat,
.gx-info {
  border-radius: var(--ui-info-radius) !important;
}

/* Telas de coleção e conta. Retratos, sprites, barras de progresso e arte dos biomas
   mantêm o contorno original. */
.site-theme .home-audio,
.site-theme .account-bar,
.site-theme .auth-card,
.site-theme.menu-page > .menu-top,
.site-theme.menu-page > .main,
.site-theme.menu-page .sectionheading,
.site-theme .dex-head,
.site-theme .hall-card,
.site-theme .trade-compose,
.site-theme .trade-list,
.site-theme .shopx,
.site-theme .sx-hero,
.site-theme .tc-badges,
.site-theme .tc-jobs,
.site-theme .note-card,
.site-theme .notes-sheet,
.site-theme .bio-card,
.site-theme .mg-card,
.site-theme .skin-preview-modal,
.site-theme .mail-reader,
.site-theme .adm-mail-row {
  border-radius: var(--ui-panel-radius);
}
.site-theme .dex-gems,
.site-theme .dex-card,
.site-theme .dex-stats span,
.site-theme .dex-region,
.site-theme .hall-stats span,
.site-theme .hall-soon,
.site-theme .hall-member,
.site-theme .tr-rule,
.site-theme .trade-warning,
.site-theme .trade-chip,
.site-theme .trade-row,
.site-theme .sx-wallet,
.site-theme .sx-card,
.site-theme .sx-price,
.site-theme .sx-empty,
.site-theme .sx-note,
.site-theme .skin-card,
.site-theme .sk-empty,
.site-theme .tc-job,
.site-theme .tc-badges-head em,
.site-theme .bio-mon,
.site-theme .bio-tier,
.site-theme .mg-soon,
.site-theme .note-body,
.site-theme .ab-btn,
.site-theme .ab-wallet > span {
  border-radius: var(--ui-info-radius);
}
.site-theme .auth-card .field input,
.site-theme .dex-tools input,
.site-theme .dex-tools select,
.site-theme .trade-search input,
.site-theme .hall-name-input,
.site-theme .adm-panel input,
.site-theme .adm-panel select,
.site-theme .adm-panel textarea {
  border-radius: var(--ui-info-radius);
}
.site-theme .auth-card {
  border-radius: var(--ui-panel-radius) !important;
}
.site-theme.menu-page .dex-entry {
  border-radius: var(--ui-info-radius) !important;
}

/* A identidade, a carteira e as acoes do treinador nao competem pela mesma linha. */
.site-theme .account-bar:not(.guest) {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}
.site-theme .account-bar:not(.guest) .ab-photo {
  grid-column: 1;
  grid-row: 1;
}
.site-theme .account-bar:not(.guest) .ab-text {
  grid-column: 2;
  min-width: 0;
}
.site-theme .account-bar:not(.guest) .ab-wallet {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  border: 0;
}
.site-theme .account-bar:not(.guest) .ab-wallet > span {
  min-width: 88px;
  justify-items: center;
}
.site-theme .account-bar:not(.guest) .ab-actions {
  grid-column: 1 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  justify-self: stretch;
  margin: 0;
}
.site-theme .account-bar:not(.guest) .ab-actions .ab-btn {
  width: 100%;
  min-width: 0;
}

.site-theme .home-audio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: 6px;
  align-items: center;
}
.site-theme .home-audio .music-player,
.site-theme .home-audio .mp-info {
  min-width: 0;
}
.site-theme .home-audio .mp-info {
  overflow: hidden;
}
.site-theme .home-audio .mp-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-theme .home-audio .mp-btn,
.site-theme .home-audio .music-toggle,
.site-theme .home-audio .sfx-toggle,
.site-theme .home-audio .notif-toggle,
.site-theme .home-audio .jira-toggle,
.site-theme .home-audio .lang-btn {
  border-radius: var(--ui-info-radius) !important;
  clip-path: none;
}
@media (max-width: 560px) {
  .site-theme .account-bar:not(.guest) {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .site-theme .account-bar:not(.guest) .ab-photo {
    width: 48px;
    height: 48px;
    grid-row: 1;
  }
  .site-theme .account-bar:not(.guest) .ab-photo img {
    width: 42px;
    height: 42px;
  }
  .site-theme .account-bar:not(.guest) .ab-wallet,
  .site-theme .account-bar:not(.guest) .ab-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .site-theme .account-bar:not(.guest) .ab-wallet {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-theme .account-bar:not(.guest) .ab-wallet > span {
    justify-items: start;
    min-width: 0;
  }
  .site-theme .account-bar:not(.guest) .ab-actions {
    grid-row: 3;
    justify-content: flex-end;
  }
  .site-theme .home-audio {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-theme .home-audio .music-player {
    grid-column: 1 / -1;
  }
  .site-theme .home-audio > :not(.music-player) {
    width: 100% !important;
    min-width: 0;
    margin: 0;
  }
  .site-theme .home-audio .lang-dd,
  .site-theme .home-audio .lang-btn {
    width: 100% !important;
  }
}

/* Acabamento dos elementos assinalados: 6px nos paineis, 4px nos controles.
   Sprites, rolos, trilhas e barras de HP nao recebem mascaras arredondadas. */
.site-theme .sk-hero,
.site-theme .trainer-card,
.site-theme .tc-photo,
.site-theme .lucky-timer,
.site-theme .tr-empty,
.site-theme .post-panel,
.site-theme .dex-tools,
.site-theme .credits-sheet,
.site-theme .pw-odds-panel,
.site-theme .pw-pop-card,
.site-theme .help-sheet,
.site-theme .mx-chart,
.site-theme .bio-editor .bio-block,
.site-theme .bio-sheet,
.site-theme .capture-modal,
.site-theme .capture-modal .upgrade-side,
.site-theme .capture-modal .upgrade-center,
.site-theme .slot-machine,
.site-theme .expedition-progress,
.site-theme .expedition-dock,
.site-theme .showdown-battle {
  border-radius: var(--ui-panel-radius, 6px) !important;
}
.site-theme .modal:has(.shop-grid),
.site-theme .pw-side {
  border-radius: var(--ui-panel-radius, 6px) !important;
}
.site-theme .jira-toggle,
.site-theme .notif-toggle,
.site-theme .sfx-toggle,
.site-theme .hall-badges .pill,
.site-theme .seg button,
.site-theme .tr-empty-icon,
.site-theme .players-tools,
.site-theme .player-card,
.site-theme .pc-stats > div,
.site-theme .sim-tab,
.site-theme .mx-tile,
.site-theme .mx-cell,
.site-theme .gx-tab,
.site-theme .gx-group,
.site-theme .gx-feature,
.site-theme .adm-thumb,
.site-theme .adm-skin,
.site-theme .adm-state,
.site-theme .mail-gift-box,
.site-theme .mail-chip,
.site-theme .sim-btn,
.site-theme .players-pager .btn,
.site-theme .mx-tools .btn,
.site-theme .bio-type-btn,
.site-theme .bio-tier,
.site-theme .bio-mon,
.site-theme .bio-editor .check,
.site-theme .bio-add-row input,
.site-theme .bio-add-row select,
.site-theme .machine-title,
.site-theme .battle-commandbar,
.site-theme .battle-console,
.site-theme .dock-tips,
.site-theme .expedition-dock .member,
.site-theme .capture-modal .capture-pokemon,
.site-theme .capture-modal .target-card,
.site-theme .capture-modal .capture-item,
.site-theme .capture-modal .resource-block,
.site-theme .capture-modal .selected-summary,
.site-theme .capture-modal .capture-help,
.site-theme .capture-modal .sacrifice,
.site-theme .pw-leg,
.site-theme .pw-odds-btn,
.site-theme .pw-pop-x,
.site-theme .pw-intro,
.site-theme .pw-perk,
.site-theme .lucky-stage,
.site-theme .lucky-prize,
.site-theme .lucky-reveal .lr-card {
  border-radius: var(--ui-info-radius, 4px) !important;
}
.site-theme .shop-item,
.site-theme .shop-price,
.site-theme .item-use-head,
.site-theme .item-target-card,
.site-theme .shop-tabs .btn {
  border-radius: var(--ui-info-radius, 4px) !important;
}

/* Reflexo mais calmo; skins ainda indisponiveis ganham pontinhos claros sem brilho de oferta. */
.sx-card:hover:after {
  animation-duration: 3.8s;
}
.skin-card.locked.on-sale {
  animation: none;
  box-shadow: none;
}
.skin-card.locked {
  position: relative;
  isolation: isolate;
}
.skin-card.locked::after {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.6px) 8px 6px/41px 37px,
    radial-gradient(circle, #ffffffcc 0 1px, transparent 1.6px) 23px 20px/57px 47px;
  opacity: 0.5;
  animation: locked-skin-twinkle 4s ease-in-out infinite alternate;
}
@keyframes locked-skin-twinkle {
  to {
    opacity: 0.85;
  }
}

/* O player da pagina inicial continua com botoes quadrados como o aparelho de musica. */
.site-theme .home-audio .mp-btn,
.site-theme .home-audio .music-toggle {
  border-radius: 0 !important;
  clip-path: var(--px-o);
}
.site-theme .home-audio .music-player.home-bar {
  border-radius: 0 !important;
}
.site-theme.menu-page .btn.rg-back {
  min-width: 160px;
  min-height: 34px;
  justify-content: center;
  border-radius: var(--ui-info-radius, 4px) !important;
}
.site-theme #battle-continue,
.site-theme .pw-ctrl .btn {
  border-radius: var(--ui-info-radius, 4px) !important;
}

/* A roleta chama o jogador com dourado estavel, sem faixa arco-iris movendo sob o texto. */
.pw .btn.pw-spin:after {
  background: linear-gradient(180deg, #fff2bd, #f8c64c 50%, #ba7a1d);
  background-size: 100% 100%;
  animation: none;
}
.pw .btn.pw-spin {
  --lip-a: #fff7d3;
  --lip-b: #845006;
  --face-a: #ffe598;
  --face-b: #d9962b;
}

/* Os paineis de fundo do Raid se sobrepoem em 2px para eliminar filetes na divisao.
   O terceiro painel usa a mesma regra sem distorcer a proporcao das imagens. */
.raid-split > i {
  min-width: 0;
  flex: 1 1 0;
}
.raid-split > i + i {
  margin-left: -2px;
}
.raid-split.triple > i {
  flex-basis: calc(100% / 3);
}
.card-art.raid-split.triple i:nth-child(3) {
  background-image: var(--c);
}
.card-art.raid-split:after {
  background: linear-gradient(0deg, #050a18d9 0, transparent 62%);
}
.raid-wait > .raid-split:after {
  background:
    linear-gradient(#050a18a3, #0a1226b8), linear-gradient(90deg, transparent 44%, #050a1840 50%, transparent 56%);
}
.raid-wait > .raid-split.triple:after {
  background:
    linear-gradient(#050a18a3, #0a1226b8),
    linear-gradient(90deg, transparent 29%, #050a1840 33%, transparent 37% 63%, #050a1840 67%, transparent 71%);
}
@media (prefers-reduced-motion: reduce) {
  .skin-card.locked::after {
    animation: none;
  }
}

/* PvP: uma escolha de equipe e uma ação principal ocupam a área útil do menu. */
.menu-page.site-theme .pvp-page {
  width: 100%;
  max-width: 760px;
  gap: 14px;
}
.menu-page.site-theme .pvp-hd,
.menu-page.site-theme .pvp-panel,
.menu-page.site-theme .pvp-vs,
.menu-page.site-theme .pvp-emotes {
  border-radius: var(--ui-panel-radius);
}
.menu-page.site-theme .pvp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}
.menu-page.site-theme .pvp-hd h2 {
  margin: 4px 0 0;
  font-size: 23px;
}
.menu-page.site-theme .pvp-note {
  max-width: 260px;
  line-height: 1.5;
}
.menu-page.site-theme .pvp-panel {
  padding: 17px 18px;
  gap: 12px;
}
.menu-page.site-theme .pvp-panel-hd h3 {
  font-size: 16px;
}
.menu-page.site-theme .pvp-panel-hd p {
  margin-top: 5px;
  line-height: 1.5;
}
.menu-page.site-theme .pvp-slots {
  display: block;
}
.menu-page.site-theme .pvp-slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 8px;
}
.menu-page.site-theme .pvp-hall {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: var(--ui-info-radius);
}
.menu-page.site-theme .pvp-mon {
  width: 30px;
  height: 30px;
}
.menu-page.site-theme .pvp-panel-actions,
.menu-page.site-theme .pvp-search-actions {
  display: flex;
  justify-content: flex-end;
}
.menu-page.site-theme .pvp-panel-actions .btn,
.menu-page.site-theme .pvp-search-actions .btn {
  min-width: 180px;
  min-height: 38px;
  border-radius: var(--ui-info-radius);
}
.menu-page.site-theme .pvp-matchmaking {
  background: linear-gradient(145deg, #102e52, #081d36 72%);
}
.menu-page.site-theme .pvp-search-status {
  padding: 15px 16px;
  border: 1px solid #49688a;
  border-radius: var(--ui-info-radius);
  background: #061a31b8;
  color: #dcecff;
  font-size: var(--text-sm);
  text-align: center;
}
@media (max-width: 620px) {
  .menu-page.site-theme .pvp-hd {
    display: block;
    padding: 14px;
  }
  .menu-page.site-theme .pvp-note {
    max-width: none;
    margin-top: 8px;
  }
  .menu-page.site-theme .pvp-panel {
    padding: 14px;
  }
  .menu-page.site-theme .pvp-slot-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-page.site-theme .pvp-panel-actions .btn,
  .menu-page.site-theme .pvp-search-actions .btn {
    width: 100%;
  }
}

/* Os controles do topo das paginas de menu devem caber sem cortar MENU no celular. */
@media (max-width: 520px) {
  .menu-page.site-theme .menu-header-actions {
    gap: 4px;
  }
  .menu-page.site-theme .menu-header-actions .music-player {
    gap: 3px;
  }
  .menu-page.site-theme .menu-header-actions .mp-btn,
  .menu-page.site-theme .menu-header-actions .music-toggle,
  .menu-page.site-theme .menu-header-actions .vol-wrap {
    width: 28px;
    min-width: 28px;
  }
}

/* Feedback 27/09: softer corners on the expedition controls. */
.compact-shell .game-topbar {
  border-radius: 10px;
  overflow: hidden;
}
.run-main > .evc-card.capture {
  border-radius: 10px;
}
.sacrifice-block > .sacrifice-summary,
.upgrader-layout .or-sep > span,
.pkt-next {
  border-radius: 7px;
}
.dock-header .dock-trash {
  width: 30px;
  height: 30px;
  min-height: 30px;
  align-self: center;
}
.dock-header .dock-trash .trash-svg {
  width: 14px;
  height: 14px;
}
.btn.rg-back {
  top: 4px;
  left: 4px;
  min-height: 22px;
  padding: 0 7px;
  font-size: 10px;
  letter-spacing: 0.8px;
}

/* Blend adjacent boss locales and center each silhouette in its own scene. */
.raid-wait > .raid-split {
  display: grid;
  grid-template-columns: repeat(var(--raid-panels, 3), minmax(0, 1fr));
}
.raid-wait > .raid-split i {
  min-width: 0;
  margin-left: -42px;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px);
  mask-image: linear-gradient(90deg, transparent 0, #000 42px);
}
.raid-wait > .raid-split i:first-child {
  margin-left: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.raid-wait > .raid-split:after {
  background: linear-gradient(#050a18a3, #0a1226b8);
}
.raid-wait.both .raid-silhouettes {
  display: grid;
  grid-template-columns: repeat(var(--raid-panels, 3), minmax(0, 1fr));
  gap: 0;
  width: 100%;
}
.raid-wait.both .raid-silhouette {
  justify-self: center;
}

/* PvP lobby: one compact automatic-match button plus a direct invitation form. */
.pvp-selected-card {
  width: 100%;
  margin-top: 10px;
}
.pvp-selected-card .hall-team {
  width: 100%;
}
.pvp-quick-match {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pvp-quick-match > span {
  color: #a9c4dd;
  font-size: var(--text-xs);
}
.pvp-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.pvp-invite-form label {
  grid-column: 1 / -1;
  color: var(--ui-gold, #ffe28a);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
}
.pvp-invite-form input {
  min-width: 0;
  min-height: 37px;
  padding: 8px 10px;
  border: 1px solid #54799f;
  border-radius: 7px;
  background: #081d38;
  color: #fff;
  font: inherit;
}
.pvp-invite-form input:focus-visible {
  outline: 2px solid #ffdf76;
  outline-offset: 1px;
}
@media (max-width: 560px) {
  .pvp-invite-form {
    grid-template-columns: 1fr;
  }
}

/* PvP lobby: keep the selected roster and both ways to start a match together. */
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pvp-lobby) {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pvp-lobby) > .main {
  flex: none;
  height: auto;
  overflow: visible;
  padding-bottom: 18px;
}
.pvp-lobby .pvp-panel {
  gap: 10px;
}
.pvp-lobby .pvp-team-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pvp-lobby .pvp-team-hd > div {
  min-width: 0;
}
.pvp-lobby .pvp-selected-card {
  margin-top: 0;
}
.pvp-lobby .pvp-selected-card > header {
  justify-content: flex-start;
}
.pvp-lobby .btn {
  min-width: 0;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 10px;
}
.pvp-lobby .pvp-team-hd .btn {
  flex: 0 0 auto;
  min-height: 30px;
}
.pvp-lobby .pvp-invite-form input {
  min-height: 34px;
}
.pvp-lobby .pvp-invite-form .btn {
  min-height: 34px;
}
.pvp-lobby .pvp-quick-match {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid #4b6785;
  gap: 9px;
}
@media (max-width: 620px) {
  .pvp-lobby .pvp-team-hd {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
/* Selected refinements, September 2026. Loaded after the game and phone layouts. */
.site-theme.menu-page .btn.rg-back {
  min-width: 0;
  min-height: 24px;
  width: auto;
  padding: 3px 8px;
  font-size: 9px;
}
.pk-card .pk-portrait {
  height: 100px;
  overflow: hidden;
}
.pk-card .pk-portrait .pk-anim {
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 86px;
  object-fit: contain;
  align-self: center;
  transform: none;
}
.pkt-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.pkt-dots button {
  width: 9px;
  height: 9px;
  min-width: 9px;
  padding: 0;
  border: 1px solid #456c91;
  border-radius: 2px;
  background: #163452;
  cursor: pointer;
}
.pkt-dots button.on,
.pkt-dots button:hover,
.pkt-dots button:focus-visible {
  background: #f6d574;
  border-color: #fff0b0;
}
.rg-card:not(:disabled) {
  border-color: #456886;
}
.rg-card:not(:disabled):is(:hover, :focus-visible) {
  border-color: #ffdb63;
  box-shadow:
    0 0 0 1px #ffdb63,
    inset 0 0 18px #ffd23f18;
}
.rg-card .rg-bosses {
  flex: 1;
  justify-content: center;
}
.rg-card.hoenn {
  cursor: pointer;
  opacity: 1;
  flex-wrap: wrap;
}
.rg-card.sinnoh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px 16px;
  cursor: default;
  opacity: 0.7;
}

/* Compact trainer rank and region-ordered collection. */
.site-theme .rank-icon {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain;
  flex-shrink: 0;
}
.site-theme .tc-rank.panel {
  --rank-accent: #c86838;
  --rank-light: #ffc38a;
  --rank-haze: #c868382b;
  position: relative;
  isolation: isolate;
  justify-content: center;
  margin: 10px 8px;
  padding: 10px 38px;
  box-sizing: border-box;
  height: 76px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  background:
    radial-gradient(ellipse at center, var(--rank-haze), transparent 80%), linear-gradient(135deg, #173650, #0a1b31);
  border: 0;
  border-radius: 0;
  box-shadow: 0 8px 16px #020a1840;
  min-width: 0;
}
.site-theme .tc-rank[data-rank='silver'] {
  --rank-accent: #b8c0d0;
  --rank-light: #edf0f8;
  --rank-haze: #b8c0d02b;
}
.site-theme .tc-rank[data-rank='gold'] {
  --rank-accent: #f09000;
  --rank-light: #ffe87c;
  --rank-haze: #f090002b;
}
.site-theme .tc-rank[data-rank='platinum'] {
  --rank-accent: #00b8c0;
  --rank-light: #92ffff;
  --rank-haze: #00b8c02b;
}
.site-theme .tc-rank[data-rank='diamond'] {
  --rank-accent: #0050f0;
  --rank-light: #91eaff;
  --rank-haze: #0050f02b;
}
.site-theme .tc-rank[data-rank='master'] {
  --rank-accent: #7800d8;
  --rank-light: #eab7ff;
  --rank-haze: #7800d82b;
}
.site-theme .tc-rank[data-rank='grand-master'] {
  --rank-accent: #f00010;
  --rank-light: #ffb08b;
  --rank-haze: #f000102b;
}
.site-theme .tc-rank[data-rank='champion'] {
  --rank-accent: #f0a000;
  --rank-light: #fff6ac;
  --rank-haze: #f0a0002b;
}
.site-theme .tc-rank-frame {
  position: absolute;
  inset: -4px 0;
  width: 100%;
  height: calc(100% + 8px);
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}
.site-theme .rank-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.site-theme .tc-bdgs .bdg img {
  filter: var(--badge-clean) grayscale(1) brightness(0.32) contrast(1.15);
}
.site-theme .tc-bdgs .bdg.got img {
  filter: var(--badge-clean) drop-shadow(0 2px 0 #0008);
}
.site-theme .tc-rank-emblem {
  position: relative;
  width: 82px;
  height: 56px;
  flex: 0 0 82px;
  display: grid;
  place-items: center;
}
.site-theme .tc-rank .tc-rank-copy > strong {
  color: var(--rank-light);
}
.site-theme .rank-preview-select {
  max-width: 260px;
  margin: 20px auto;
}
.site-theme .rank-preview .rank-preview-card {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 8px 0;
}
.site-theme .tc-rank .rank-icon {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  transform: translate(var(--rank-sprite-x, 0px), var(--rank-sprite-y, 0px)) scale(var(--rank-sprite-scale, 1.3));
  margin-inline: 0;
  position: relative;
  z-index: 1;
}
/* The second source sheet has wider transparent margins around the actual emblems. */
.site-theme .tc-rank[data-rank='diamond'] {
  --rank-sprite-scale: 1.5754;
  --rank-sprite-x: -2.74px;
  --rank-sprite-y: -0.21px;
}
.site-theme .tc-rank[data-rank='master'] {
  --rank-sprite-scale: 1.5597;
  --rank-sprite-x: 2.58px;
  --rank-sprite-y: -0.91px;
}
.site-theme .tc-rank[data-rank='grand-master'] {
  --rank-sprite-scale: 1.5108;
  --rank-sprite-x: -2.56px;
  --rank-sprite-y: 2.83px;
}
.site-theme .tc-rank[data-rank='champion'] {
  --rank-sprite-scale: 1.5405;
  --rank-sprite-x: 3.03px;
  --rank-sprite-y: 2.34px;
}
.site-theme .tc-rank-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 0 1 auto;
  text-align: center;
  justify-items: center;
  display: grid;
  gap: 2px;
}
.site-theme .tc-rank-copy > span {
  color: #9fbbd4;
  font-size: 8px;
  letter-spacing: 1px;
}
.site-theme .tc-rank-copy > strong {
  color: #ffdf82;
  font-size: 15px;
}
.site-theme .tc-rank-copy > small {
  color: #a8c1d8;
  font-size: 8px;
  line-height: 1.4;
}
.site-theme .tc-badge-region {
  grid-column: 1/-1;
  padding: 8px 0 4px;
  border-bottom: 1px solid #365b77;
  color: #e2c774;
  font-size: 9px;
  letter-spacing: 1.5px;
}
/* Permanent PC storage: keep the collection readable in the compact game frame. */
.site-theme .pc-page {
  gap: 18px;
  padding: 6px 0;
}
.site-theme .pc-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  justify-content: space-between;
}
.site-theme .pc-heading h2 {
  margin: 4px 0 8px;
  font-size: 32px;
  color: #ffe080;
  letter-spacing: 2px;
}
.site-theme .pc-heading h2 span {
  font-size: 12px;
  color: #9bb6cc;
  letter-spacing: 3px;
}
.site-theme .pc-heading p {
  max-width: 450px;
  margin: 0;
  color: #afc5db;
  line-height: 1.6;
  font-size: 11px;
}
.site-theme .pc-heading > .btn {
  flex-shrink: 0;
  margin-top: 4px;
}
.site-theme .pc-preview-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px;
  border: 1px solid #6f87bb;
  background: #182949;
  color: #bccded;
  font-size: 11px;
}
.site-theme .pc-preview-note b {
  color: #e6d6ff;
  letter-spacing: 1px;
}
.site-theme .pc-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.site-theme .pc-overview > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: linear-gradient(140deg, #143652, #081b31);
  border: 1px solid #395975;
  border-left: 3px solid #e5bf53;
}
.site-theme .pc-overview strong {
  font-size: 24px;
  color: #ffdc70;
}
.site-theme .pc-overview span {
  font-size: 9px;
  letter-spacing: 1px;
  color: #a9c3d9;
}
.site-theme .pc-roster.panel {
  padding: 16px;
  border-color: #90733e;
  background: linear-gradient(135deg, #142b40, #0a1b30);
}
.site-theme .pc-roster h3,
.site-theme .pc-storage h3 {
  margin: 4px 0;
  color: #ffe080;
  font-size: 17px;
}
.site-theme .pc-roster p,
.site-theme .pc-roster footer > small {
  color: #a9c3d9;
  font-size: 10px;
  line-height: 1.5;
}
.site-theme .pc-team-count {
  font-size: 24px;
  color: #ffe080;
  font-weight: 800;
}
.site-theme .pc-team-count small {
  font-size: 13px;
  color: #9cb9d0;
}
.site-theme .pc-team {
  gap: 6px;
  margin: 16px 0;
}
.site-theme .pc-slot {
  position: relative;
  min-height: 118px;
  border: 1px solid #6d879e;
  padding: 16px 4px 7px;
  border-radius: 3px;
  background: linear-gradient(#153753, #091c31);
  cursor: pointer;
}
.site-theme .pc-slot-number {
  position: absolute;
  top: 5px;
  left: 6px;
  color: #819bb3;
  font-size: 8px;
}
.site-theme .pc-slot img {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
}
.site-theme .pc-slot strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  white-space: nowrap;
}
.site-theme .pc-slot > small {
  margin-top: 5px;
  font-size: 7px;
  color: #bfccd8;
  letter-spacing: 0.4px;
}
.site-theme .pc-slot.empty {
  border-style: dashed;
  border-color: #36546b;
  background: #081a2b;
  cursor: default;
}
.site-theme .pc-slot.empty b {
  font-size: 26px;
  color: #365a74;
}
.site-theme .pc-slot.empty small {
  text-align: center;
  font-size: 7px;
  color: #728fa5;
}
.site-theme .pc-slot:not(.empty):hover,
.site-theme .pc-slot:focus-visible {
  border-color: #ffe080;
  box-shadow: inset 0 0 0 1px #ffe080;
}
.site-theme .pc-storage {
  border: 1px solid #40627c;
  background: #081b30;
  padding: 16px;
}
.site-theme .pc-box-number {
  padding: 5px 10px;
  border: 1px solid #3d607c;
  background: #132f49;
  color: #abc6dc;
  font-size: 11px;
}
.site-theme .pc-filters {
  display: grid;
  grid-template-columns: minmax(100px, 1.4fr) minmax(90px, 1fr) minmax(105px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin: 16px 0 10px;
}
.site-theme .pc-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 9px;
  letter-spacing: 0.8px;
  color: #99b7cf;
}
.site-theme .pc-filters input,
.site-theme .pc-filters select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid #426680;
  background: #0c2238;
  border-radius: 3px;
  padding: 6px 8px;
  color: #e0ebf4;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
}
.site-theme .pc-filter-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
  font-size: 9px;
  color: #a9c3d9;
}
.site-theme .pc-filter-flags label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.site-theme .pc-filter-flags input {
  accent-color: #f5d26b;
}
.site-theme .pc-filter-flags > small {
  margin-left: auto;
}
.site-theme .pc-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.site-theme .pc-page .pc-card {
  position: relative;
  padding: 8px;
  gap: 6px;
  border: 1px solid #345875;
  border-radius: 4px;
  background: linear-gradient(160deg, #132f49, #091a30);
  transition:
    border-color 0.15s,
    background 0.15s;
  min-width: 0;
}
.site-theme .pc-page .pc-card.selected {
  border-color: #ecca67;
  box-shadow: inset 0 0 0 1px #ecca6738;
  background: linear-gradient(160deg, #313d3f, #0d2539);
}
.site-theme .pc-card-top {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: #809fb7;
  font-size: 8px;
  letter-spacing: 0.3px;
}
.site-theme .is-shiny .pc-card-top span:last-child {
  color: #fce388;
}
.site-theme .pc-page .pc-pokemon {
  width: 100%;
  padding: 0 0 6px;
  min-width: 0;
  gap: 7px;
  cursor: pointer;
}
.site-theme .pc-page .pc-pokemon img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 4px #0005);
}
.site-theme .pc-page .pc-pokemon > strong {
  font-size: 12px;
  line-height: 1.3;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #e2edf8;
}
.site-theme .pc-page .pc-pokemon:focus-visible {
  outline: 2px solid #ffe080;
  outline-offset: 2px;
}
.site-theme .pc-iv {
  width: 100%;
  display: grid;
  gap: 5px;
  color: #83a5bd;
  font-size: 9px;
}
.site-theme .pc-iv > span:first-child {
  display: flex;
  justify-content: space-between;
}
.site-theme .pc-iv b {
  color: #c7d9e5;
  font-size: 10px;
}
.site-theme .pc-iv small {
  color: #7696ae;
  font-size: 8px;
}
.site-theme .pc-iv-track {
  height: 3px;
  background: #051326;
  overflow: hidden;
}
.site-theme .pc-iv-track i {
  height: 100%;
  display: block;
  background: #7ac9ce;
}
.site-theme .pc-page .pc-card .btn {
  width: 100%;
  min-width: 0;
  font-size: 9px;
  letter-spacing: 0.3px;
}
.site-theme .pc-restricted {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  color: #bdaddd;
  background: #201e36;
  border: 1px solid #494465;
  font-size: 8px;
}
.site-theme .pc-empty {
  grid-column: 1/-1;
  padding: 32px 12px;
  text-align: center;
  color: #9bb8d0;
  border: 1px dashed #3b5771;
}
.site-theme .pc-empty b {
  color: #c8dbeb;
  font-size: 12px;
}
.site-theme .pc-empty p {
  font-size: 11px;
}
.site-theme .pc-pagination {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #304b66;
  color: #a3bdd0;
  font-size: 11px;
}
@media (max-width: 600px) {
  .site-theme .pc-heading {
    flex-direction: column;
    gap: 8px;
  }
  .site-theme .pc-overview > div {
    padding: 10px;
  }
  .site-theme .pc-overview span {
    font-size: 8px;
    letter-spacing: 0;
  }
  .site-theme .pc-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-theme .pc-roster footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .site-theme .pc-roster,
  .site-theme .pc-storage {
    padding: 12px;
  }
  .site-theme .pc-team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 380px) {
  .site-theme .pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .site-theme .pc-page .pc-pokemon img {
    width: 68px;
    height: 68px;
  }
}
.rg-card.sinnoh .rg-bosses {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  justify-items: center;
}
.rg-card.sinnoh .rg-boss {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.rg-card.sinnoh .rg-soon {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.rg-card.hoenn .rg-bosses {
  min-width: 0;
  gap: 1px;
}
.rg-card.hoenn .rg-boss {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.rg-soon {
  padding: 4px 8px;
  border: 1px solid #718096;
  border-radius: 4px;
  color: #ccd8e6;
  font-size: 10px;
  letter-spacing: 1px;
}
.skin-card,
.sx-card,
.vit-slot.on {
  background: var(--skin-card-bg, #3b2573) !important;
  color: var(--skin-card-ink, #e5eeff) !important;
}
.skin-card::before,
.skin-card::after,
.sx-card::before,
.sx-card::after,
.sx-card .sx-art-glow {
  display: none !important;
}
.skin-card img,
.sx-card .sx-skin {
  filter: none !important;
  animation: none !important;
}
.skin-card :is(strong, small),
.sx-card .sx-info :is(h3, small, b),
.vit-slot :is(b, small) {
  color: inherit;
}
.card-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
  margin: 10px 0 18px;
}
.card-color {
  display: grid;
  gap: 6px;
  place-items: center;
  padding: 8px;
  background: #0c2340;
  border: 1px solid #446686;
  border-radius: 5px;
  color: #dce8fa;
  cursor: pointer;
}
.card-color i {
  width: 40px;
  height: 30px;
  background: var(--swatch);
  border: 1px solid #7591b0;
  border-radius: 4px;
}
.card-color.on {
  border-color: #ffe27b;
  box-shadow: inset 0 0 0 1px #ffe27b;
}
.shopx.light .sx-hero-copy,
.shopx.light .sx-title,
.shopx.light .sx-sub,
.shopx.light .sx-offers-head,
.shopx.light .sx-note {
  color: #1d3457;
  text-shadow: none;
}
.sim-workspace {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.sim-workspace .sim-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 12px 0 0;
  border-bottom: 0;
  border-right: 1px solid #375773;
}
.sim-workspace .sim-tab {
  width: 100%;
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
}
.sim-content {
  min-width: 0;
}
.sim-content > h3 {
  color: #f3d37b;
  font-size: 13px;
  margin: 0 0 10px;
}
.sim-content .sim-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sim-content .sim-btn {
  min-height: 42px;
  min-width: 0;
  font-size: 10px;
  padding: 6px 9px;
  text-align: left;
}
.evc-perks,
.evc-perks > span,
.evc-perks > div,
.evc-perks li,
.pw-pop-card,
.lucky-result,
.lucky-prize,
.lucky-win-card {
  border-radius: 8px !important;
  overflow: hidden;
}
.pw .pw-body {
  flex: none;
  grid-template-rows: auto auto;
  gap: 0;
  align-content: start;
}
.pw .pw-stage {
  height: auto;
}
.pw .pw-ctrl {
  margin-top: -20px;
  padding: 0 0 10px;
  position: relative;
  z-index: 3;
}
.site-theme .pw .btn.pw-spin {
  min-height: 44px;
  min-width: 240px;
  font-size: 13px;
  animation: pw-spectrum-glow 4s linear infinite;
}
.site-theme .pw .btn.pw-spin:after {
  background: linear-gradient(100deg, #e8347f, #ff9a2a, #9ed64e, #7a4fd0, #ffd23f, #e8347f);
  background-size: 300% 100%;
  animation: ss-flow 7s linear infinite;
}
.pw-spin-bulbs,
.pw-spin-dots {
  display: none;
}
.pw-spin-sheen {
  animation: ss-sweep 4s ease-in-out infinite;
}
@keyframes pw-spectrum-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 7px #e8347f88);
  }
  25% {
    filter: drop-shadow(0 0 7px #ff9a2a88);
  }
  50% {
    filter: drop-shadow(0 0 7px #9ed64e88);
  }
  75% {
    filter: drop-shadow(0 0 7px #7a4fd088);
  }
}
.lucky-center .lucky-note.used {
  margin-top: 24px;
}
.pvp-invite {
  border-radius: 6px !important;
}
.site-theme .pvp-vs-actions .btn,
.site-theme .pvp-battle .battle-actions .btn {
  min-width: 0;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pvp-page, .sim-page) {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pvp-page, .sim-page) > .main {
  flex: none;
  height: auto;
  overflow: visible;
  padding-bottom: 16px;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pvp-lobby) > .main {
  overflow: clip;
  background-clip: padding-box;
}
.site-theme.menu-page:has(.pvp-battle-page) > .main {
  max-width: 780px;
  padding: 12px;
}
.pvp-battle-page.compact-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: auto;
  background: none;
  border: 0;
}
.pvp-battle-page.compact-shell::before,
.pvp-battle-page.compact-shell::after {
  display: none;
}
.pvp-battle-page .pvp-battle {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.pvp-battle-page .card-battle .battle-commandbar {
  height: auto;
  min-height: 40px;
  padding: 7px 10px;
  gap: 8px;
}
.pvp-battle-page .card-battle .battle-playback {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.pvp-battle-page .card-battle .battle-playback > .btn {
  min-height: 25px;
  min-width: 0;
  padding: 3px 7px;
  font-size: 9px;
}
.pvp-battle-page .card-battle .battle-field {
  height: auto;
  min-height: 0;
  padding: 10px;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
}
.pvp-battle-page .card-battle .battle-card-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: visible;
  justify-content: flex-start;
}
.pvp-battle-page .card-battle .battle-card {
  flex: 0 0 auto;
  min-height: 68px;
  padding: 4px 7px;
  gap: 5px;
  border-radius: 5px;
}
.pvp-battle-page .card-battle .battle-card-portrait {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: visible;
}
.pvp-battle-page .card-battle .battle-card-portrait > .pixel {
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.pvp-battle-page .card-battle .battle-card-title h3 {
  font-size: 12px;
}
.pvp-battle-page .card-battle .battle-card-info {
  gap: 5px;
}
.pvp-battle-page .card-battle .battle-card-meta {
  display: flex;
  height: auto;
  min-height: 12px;
  flex-wrap: wrap;
  gap: 3px;
}
.pvp-battle-page .card-battle .battle-card-title {
  flex-wrap: wrap;
}
.pvp-battle-page .card-battle .battle-console {
  flex: none;
  overflow: visible;
  padding: 0;
}
.pvp-battle-page .card-battle .battle-log {
  min-height: 78px;
  height: 78px;
  max-height: 78px;
  padding-right: 65px;
}
.pvp-battle-page .card-battle .battle-log-wrap {
  position: relative;
  overflow: visible;
}
.pvp-battle-page .card-battle .battle-log-more {
  right: 8px;
  bottom: 8px;
  min-height: 22px;
  min-width: 0;
  padding: 2px 6px;
  font-size: 9px;
}
.pvp-battle-page .card-battle .battle-actions {
  height: auto;
  min-height: 40px;
  padding: 7px 10px;
}
.pvp-emote-control {
  position: absolute;
  right: 8px;
  bottom: 36px;
  z-index: 5;
}
.site-theme .pvp-emote-control .pvp-emoji-toggle {
  min-width: 31px;
  min-height: 25px;
  padding: 2px 6px;
  font-size: 16px;
}
.pvp-emote-picker {
  position: absolute;
  right: 0;
  bottom: 32px;
  display: flex;
  gap: 5px;
  padding: 7px;
  border-radius: 6px;
  border: 1px solid #f4d778;
  background: #091b35;
  box-shadow: 0 3px 15px #0009;
}
.pvp-emote-display {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  animation: pvp-emote-fade 3.5s both;
}
.pvp-emote-display b {
  color: #fff0b0;
  background: #07162bd9;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
}
.pvp-emote-display img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px #0008);
}
@keyframes pvp-emote-fade {
  0% {
    opacity: 0;
    scale: 0.8;
  }
  8%,
  80% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 520px) {
  .sim-workspace {
    grid-template-columns: 1fr;
  }
  .sim-workspace .sim-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    padding: 0;
  }
  .sim-workspace .sim-tab {
    width: auto;
  }
  .sim-content .sim-list {
    grid-template-columns: 1fr;
  }
  .rg-card.hoenn .rg-bosses {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  .pvp-battle-page .card-battle .battle-field {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }
  .pvp-battle-page .card-battle .battle-versus {
    display: none;
  }
  .pvp-battle-page .card-battle .battle-card {
    flex-direction: column;
    min-height: 115px;
    padding: 5px;
  }
  .pvp-battle-page .card-battle .battle-card-portrait {
    flex: none;
    height: 50px;
  }
  .pvp-battle-page .card-battle .battle-card-info {
    width: 100%;
  }
  .pvp-battle-page .card-battle .battle-card-title h3 {
    font-size: 10px;
  }
  .pvp-battle-page .card-battle .battle-card-meta > small {
    display: none;
  }
  .pvp-battle-page .card-battle .battle-column-title {
    letter-spacing: 0;
    font-size: 10px;
  }
  .pvp-battle-page .card-battle .battle-playback {
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw .pw-spin,
  .pw .pw-spin::after,
  .pw-spin-sheen {
    animation: none !important;
  }
}

/* Let a standalone PvP battle measure its content instead of the expedition's fixed viewport. */
body:has(.pvp-battle-page) {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}
.pvp-battle-page .card-battle .battle-field {
  flex: none;
}
.pvp-battle-page .card-battle .battle-card-list {
  flex: none;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pvp-battle-page) > .main {
  max-width: 780px;
}
.evc-perks .evc-perk,
.pw-intro .evc-body,
.pw-intro .evc-actions {
  border-radius: 6px;
}
.rg-card.hoenn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px 16px;
}
.rg-card.hoenn .rg-name {
  grid-column: 1;
  min-width: 0;
}
.rg-card.hoenn .rg-bosses {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.rg-card.hoenn .rg-soon {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.rg-card.hoenn .rg-bosses {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}
.rg-card.hoenn .rg-bosses i {
  width: 100%;
  min-width: 0;
  height: 44px;
}
@media (max-width: 520px) {
  .rg-card.hoenn .rg-bosses {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.theme-tile[data-theme='white'],
.theme-tile[data-theme='white'] small {
  color: #1d3457;
  text-shadow: none;
}
.shopx.light .sx-wallet,
.shopx.light .sx-wallet small {
  color: #1d3457;
  text-shadow: none;
}
.shopx.light .has-banner .sx-hero-copy,
.shopx.light .has-banner .sx-title,
.shopx.light .has-banner .sx-sub {
  color: #f2f7ff;
  text-shadow: 0 2px 3px #061326;
}
/* 28/09: revisions from the marked browser screens. */
.site-theme .home-masthead {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
}
.site-theme .home-masthead-copy {
  grid-column: 1;
}
.pw .pw-ctrl {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 16px;
}
.pw .pw-stage {
  margin-bottom: 0;
}
.pw .pw-spin-sheen,
.pw .pw-spin-edge,
.pw .pw-spin-bulbs,
.pw .pw-spin-dots {
  display: none;
  animation: none;
}
.pw .pw-spin .ss-spark {
  z-index: 3;
}
.pw .pw-spin > span {
  position: relative;
  z-index: 4;
}
.rg-card.kanto .rg-bosses i,
.rg-card.johto .rg-bosses i {
  width: 60px;
  height: 68px;
}
.rg-card.kanto .rg-boss,
.rg-card.johto .rg-boss {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.rg-card .rg-name {
  flex: 0 1 180px;
  min-width: 0;
}
.rg-card.hoenn .rg-bosses {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.rg-card.hoenn {
  position: relative;
  overflow: hidden;
  padding-top: 18px;
}
.rg-card.hoenn .rg-soon {
  position: absolute;
  top: 15px;
  right: -34px;
  width: 140px;
  transform: rotate(35deg);
  text-align: center;
  border-radius: 0;
  padding: 5px 0;
  background: #f4cb62;
  color: #1c2f46;
  border: 1px solid #ffe493;
  box-shadow: 0 2px 4px #0006;
  font-size: 9px;
  letter-spacing: 1px;
}
.tc-bdgs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.tc-bdgs > .bdg {
  min-width: 0;
  width: 100%;
  padding: 5px 2px;
}
.tc-bdgs > .bdg img {
  display: block;
  width: min(48px, 80%);
  height: 48px;
  object-fit: contain;
  margin: 0 auto;
}
.tc-bdgs > .bdg b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 8px;
  line-height: 1.2;
}
.tc-bdg-region {
  display: grid;
  grid-template-columns: repeat(var(--badge-count), minmax(0, 1fr));
  gap: 6px;
}
.tc-bdg-region .bdg {
  width: 100%;
  min-width: 0;
  padding: 5px 2px;
}
.tc-bdg-region .bdg img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.tc-bdg-region .bdg b {
  font-size: 7px;
  letter-spacing: 0;
}
.pvp-selected-team > header {
  margin: 8px 0 12px;
}
.pvp-selected-team .hall-name-row {
  color: #f4d675;
}
.pvp-selected-team header small {
  color: #9ab2d1;
  font-size: 10px;
}
.pvp-selected-team .hall-team {
  margin: 0;
}
.pvp-invite-form {
  grid-template-columns: minmax(160px, 280px) auto;
  justify-content: start;
  gap: 8px;
}
.pvp-invite-form label {
  grid-column: 1/-1;
}
.pvp-invite-form input {
  min-width: 0;
  width: 100%;
  height: 30px;
}
.pvp-trainer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
}
.pvp-trainer > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
  image-rendering: pixelated;
  border: 1px solid #6c89a6;
  border-radius: 6px;
  background: #102b47;
}
.pvp-trainer > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.pvp-trainer b {
  font-size: 14px;
  color: #fff;
  overflow-wrap: anywhere;
}
.pvp-trainer small {
  font-size: 9px;
  color: #f4d778;
}
.pvp-invite.in {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}
.pvp-invite.in .pvp-trainer > img {
  width: 38px;
  height: 38px;
}
.pvp-invite-copy {
  flex: 1;
  font-size: 10px;
}
.pvp-vs {
  padding: 24px 16px;
}
.pvp-vs-side .pvp-team.big {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  width: 100%;
}
.pvp-vs-side .pvp-team.big .pvp-mon {
  width: 64px;
  height: 64px;
  max-width: 100%;
  object-fit: contain;
}
.pvp-vs-side {
  min-width: 0;
  align-items: center;
}
.pvp-battle-page .pvp-battle {
  min-height: 710px;
  display: flex;
  flex-direction: column;
}
.pvp-battle-page .card-battle .battle-field {
  min-height: 490px;
  align-items: start;
  padding: 16px 12px;
}
.pvp-battle-page .card-battle .battle-column-title {
  height: auto;
  min-height: 60px;
  margin-bottom: 14px;
  align-items: center;
  gap: 8px;
}
.pvp-battle-page .card-battle .battle-card-list {
  gap: 7px;
}
.pvp-battle-page .card-battle .battle-card {
  min-height: 56px;
  height: auto;
  padding: 3px 6px;
}
.pvp-battle-page .card-battle .battle-card-portrait {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
}
.pvp-battle-page .card-battle .battle-card-portrait > .pixel {
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
}
.pvp-battle-page .card-battle .battle-card-title h3 {
  font-size: 11px;
}
.pvp-battle-page .card-battle .battle-console {
  height: 116px;
  min-height: 116px;
  flex: none;
  position: relative;
  overflow: visible;
}
.pvp-battle-page .card-battle .battle-log-wrap {
  height: 100%;
  overflow: visible;
}
.pvp-battle-page .card-battle .battle-log {
  height: 100%;
  min-height: 0;
  max-height: none;
  padding-bottom: 12px;
  box-sizing: border-box;
}
.pvp-battle-page .card-battle .battle-actions {
  flex: none;
  position: relative;
  min-height: 48px;
  height: auto;
  border-top: 1px solid #496782;
  padding: 10px 12px;
  gap: 8px;
}
.pvp-emote-display {
  animation: none;
  top: 45%;
  transform: translate(-50%, -50%);
}
.pvp-emote-display.me {
  left: 25%;
}
.pvp-emote-display.you {
  left: 75%;
}
.pvp-emote-display img {
  width: 76px;
  height: 76px;
}
.pvp-result {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: 12px;
}
.pvp-result h3 {
  font-size: 28px;
  color: #f4d675;
}
.pvp-result p {
  font-size: 10px;
  color: #a8bdd6;
  letter-spacing: 2px;
}
.pvp-result .pvp-team.winners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pvp-result .pvp-team.winners .pvp-mon {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.skin-card,
.sx-card,
.vit-slot.on {
  background:
    radial-gradient(ellipse at 50% 0%, #ffffff15, transparent 65%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--skin-card-bg) 78%, white),
      var(--skin-card-bg) 60%,
      color-mix(in srgb, var(--skin-card-bg) 85%, black)
    ) !important;
  box-shadow:
    inset 0 1px 0 #ffffff20,
    inset 0 -12px 24px #00000016;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.skin-card:hover,
.sx-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 #ffffff30,
    0 5px 12px #0004;
}
.card-color i {
  background: linear-gradient(145deg, color-mix(in srgb, var(--swatch) 75%, white), var(--swatch));
  box-shadow: inset 0 1px 0 #fff5;
}
@media (max-width: 520px) {
  .rg-card.kanto .rg-bosses i,
  .rg-card.johto .rg-bosses i {
    width: 40px;
    height: 48px;
  }
  .rg-card.kanto .rg-boss,
  .rg-card.johto .rg-boss {
    width: 40px;
    height: 40px;
  }
  .rg-card.hoenn .rg-bosses {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .pvp-invite-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pvp-vs-side .pvp-team.big .pvp-mon {
    width: 48px;
    height: 48px;
  }
  .pvp-trainer > img {
    width: 38px;
    height: 38px;
  }
  .pvp-trainer b {
    font-size: 11px;
  }
  .pvp-trainer {
    gap: 6px;
  }
  .pvp-battle-page .card-battle .battle-field {
    min-height: 0;
    padding: 10px 5px;
  }
  .pvp-battle-page .card-battle .battle-column-title {
    flex-wrap: wrap;
    min-height: 64px;
  }
  .pvp-battle-page .card-battle .battle-card {
    min-height: 98px;
    padding: 5px;
  }
  .pvp-battle-page .card-battle .battle-card-portrait {
    flex: none;
  }
  .pvp-battle-page .card-battle .battle-card-info {
    gap: 3px;
  }
  .tc-bdg-region {
    gap: 3px;
  }
  .tc-bdg-region .bdg img {
    width: 28px;
    height: 28px;
  }
  .tc-bdg-region .bdg b {
    font-size: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw .ss-spark,
  .skin-shop-tab .ss-spark,
  .skin-shop-tab .ss-sheen {
    animation: none;
  }
  .skin-card:hover,
  .sx-card:hover {
    transform: none;
  }
}
.overlay .pvp-result-modal {
  border-radius: 10px;
  overflow: hidden;
}
.site-theme .pvp-result .btn {
  min-height: 30px;
  min-width: 0;
  padding: 5px 12px;
  font-size: 11px;
}

/* 28/09: revisão dos espaços, retratos e fichas completas do PvP. */
.site-theme .pvp-team-hd > .btn {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 9px;
  letter-spacing: 0;
}
.pvp-selected-team {
  margin-top: 12px;
}
.pvp-team-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  text-align: center;
}
.pvp-team-details .hall-member {
  min-width: 0;
  padding: 8px 4px;
}
.pvp-team-details .hall-portrait {
  width: 76px;
  height: 76px;
  margin: auto;
}
.pvp-team-details .hall-portrait > .pixel {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.pvp-team-details .hall-types {
  justify-content: center;
  flex-wrap: wrap;
}
.pvp-team-details .hall-ability {
  white-space: normal;
}
.pvp-vs {
  align-items: start;
  gap: 12px;
}
.pvp-vs-side {
  min-width: 0;
}
.pvp-vs-mark {
  align-self: center;
}
.pvp-result .pvp-team-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pvp-trainer > span {
  gap: 2px;
}
.pvp-result .pvp-trainer > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pvp-invite.in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.pvp-invite.in .pvp-invite-copy {
  padding-top: 6px;
  line-height: 1.4;
}
.pvp-invite.in .pvp-invite-go {
  align-self: center;
}
.shopx .sx-card {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 174px auto minmax(30px, auto);
  min-height: 250px;
  gap: 8px;
}
.shopx .sx-card .sx-price {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}
.shopx .sx-card .sx-art {
  height: 174px;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 144px) minmax(0, 64px);
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.shopx .sx-card .sx-skin {
  width: 100%;
  max-width: 144px;
  height: 144px;
  min-width: 0;
  object-fit: contain;
  object-position: center;
  animation: none;
  transform: none;
}
.shopx .sx-card .sx-default {
  position: static;
  min-width: 0;
  width: 100%;
  max-width: 64px;
  height: 80px;
  border: 0;
  background: transparent;
}
.shopx .sx-card .sx-default img {
  width: 100%;
  max-width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 1;
}
.shopx .sx-card .sx-btn {
  min-width: 0;
  height: auto;
  min-height: 30px;
  padding: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  letter-spacing: 0.2px;
  flex-wrap: wrap;
  gap: 2px;
}
.compact-shell .run-main:has(> .pw) {
  min-height: 0;
  height: auto;
  align-self: start;
}
.compact-shell .run-main > .pw {
  flex: none;
  min-height: 0;
  height: auto;
  padding-bottom: 18px;
}
.slot-machine .encounter-heading {
  position: relative;
}
.slot-machine .encounter-heading h1 {
  position: static;
}
.slot-machine .encounter-heading .encounter-help {
  position: absolute;
  top: 7px;
  left: 7px;
  margin: 0;
}
.slot-machine .encounter-heading .speed-control {
  gap: 4px;
}
.slot-machine .encounter-heading .speed-control > span {
  margin: 0 2px 0 0;
  min-width: 0;
  width: auto;
}
.pk-card .pk-portrait {
  position: relative;
  height: 100px;
  overflow: visible;
}
.pk-card .pk-portrait .pk-anim {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  animation: none;
}
.pk-card .pk-portrait .pk-shadow {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}
.site-theme .pk-intro > .btn {
  border-radius: 7px;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 10px;
}
.rg-card.kanto .rg-bosses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  flex: 1;
}
.rg-card.johto .rg-bosses {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  flex: 1;
}
.rg-card.kanto .rg-bosses > i,
.rg-card.johto .rg-bosses > i {
  width: 100%;
  min-width: 0;
}
.rg-card.hoenn .rg-soon {
  top: 25px;
  right: -49px;
  width: 200px;
  padding: 7px 0;
  text-align: center;
  transform: rotate(35deg);
  font-size: 9px;
  letter-spacing: 1px;
}
.site-theme .account-bar:not(.guest) .ab-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  grid-column: 2 / 4;
  gap: 5px;
  width: auto;
}
.site-theme .account-bar:not(.guest) .ab-actions .ab-btn {
  width: auto;
  min-height: 25px;
  height: 25px;
  padding: 3px 9px;
  font-size: 9px;
}
.compact-shell .card-battle .battle-card-portrait > .pixel,
.pvp-battle-page .card-battle .battle-card-portrait > .pixel {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: none;
  position: static;
}
.evolution-choice {
  display: grid;
  gap: 14px;
  text-align: center;
}
.evolution-choice-art {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.evolution-choice-art img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.evolution-choice-art > span {
  color: #ffdb75;
  font-size: 28px;
}
.evolution-choice-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .pvp-vs {
    grid-template-columns: minmax(0, 1fr);
  }
  .pvp-vs-mark {
    text-align: center;
  }
  .pvp-team-details,
  .pvp-result .pvp-team-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pvp-invite.in {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pvp-invite.in .pvp-invite-go {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
  .shopx .sx-card .sx-skin {
    max-width: 112px;
    height: 112px;
  }
  .shopx .sx-card .sx-art {
    grid-template-columns: minmax(0, 112px) minmax(0, 52px);
  }
  .shopx .sx-card .sx-default,
  .shopx .sx-card .sx-default img {
    max-width: 52px;
    height: 52px;
  }
  .site-theme .account-bar:not(.guest) .ab-actions {
    grid-column: 1/-1;
    justify-self: center;
  }
}

/* Feedback de 28/09: detalhes do menu e partidas compartilhadas. */
.pk-card .pk-portrait .pk-shadow {
  translate: none;
  transform: translateX(-50%);
}
.oc-stat > strong.oc-gold {
  display: flex;
  position: static;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 auto;
  white-space: nowrap;
}
.oc-stat > strong.oc-gold > .oc-coin {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  position: static;
  transform: none;
}
.oc-stat > strong.oc-gold > span {
  display: block;
  position: static;
  width: auto;
  transform: none;
}
.rg-card.hoenn .rg-soon {
  top: 8px;
  right: -33px;
  width: 132px;
  padding: 5px 0;
  font-size: 7px;
  transform: rotate(35deg);
}
.shopx .sx-card > .btn .item-sprite {
  width: 10px;
  height: 10px;
  object-fit: contain;
  vertical-align: middle;
}
.shopx .sx-card .sx-btn > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.pvp-invite.in {
  align-items: center;
}
.pvp-invite.in .pvp-invite-copy {
  text-align: center;
  padding: 0;
  justify-self: center;
}
.pvp-battle .battle-column-title {
  position: relative;
  justify-content: center;
  padding: 8px 35px;
}
.pvp-battle .battle-column-title > span[id$='-count'] {
  position: absolute;
  right: 8px;
}
.pvp-countdown {
  color: var(--pl-gold);
  font-size: 48px;
  line-height: 1;
  text-shadow: 0 0 20px #ffdb6680;
}
.pvp-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #33557a;
}
.pvp-history-row time {
  color: var(--pl-slate);
  font-size: 10px;
}
.pvp-history-row .btn {
  margin-left: auto;
}
.overlay .pvp-result-modal {
  width: 540px;
  max-width: calc(100vw - 24px);
  min-height: 0;
}
.pvp-result-modal .modal-body {
  padding: 16px;
}
.pvp-result {
  position: relative;
  gap: 10px;
  padding: 0;
  overflow: hidden;
}
.pvp-result h3,
.pvp-result p {
  margin: 0;
}
.pvp-result .pvp-team-details {
  gap: 6px;
}
.pvp-result .hall-member {
  padding: 6px 3px;
}
.pvp-result .hall-portrait,
.pvp-result .hall-portrait > .pixel {
  width: 58px;
  height: 58px;
}
.pvp-win-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pvp-win-particles i {
  position: absolute;
  left: var(--x);
  top: -12px;
  width: 5px;
  height: 9px;
  background: #ffd86a;
  animation: pvp-confetti 2.8s var(--delay) ease-out infinite;
}
.pvp-win-particles i:nth-child(3n) {
  background: #70e7ce;
}
.pvp-win-particles i:nth-child(3n + 1) {
  background: #ec93ef;
}
.pvp-result.won h3 {
  animation: pvp-glow 1.4s ease-in-out 3;
}
@keyframes pvp-confetti {
  to {
    transform: translateY(460px) rotate(480deg);
    opacity: 0;
  }
}
@keyframes pvp-glow {
  50% {
    text-shadow: 0 0 16px #f9d66b;
    transform: scale(1.04);
  }
}
.site-theme .account-bar:not(.guest) {
  grid-template-columns: 78px minmax(100px, 1fr) auto;
  gap: 7px 12px;
  padding: 12px;
}
.site-theme .account-bar:not(.guest) .ab-photo {
  width: 78px;
  height: 86px;
  grid-row: 1 / 3;
  padding: 3px;
}
.site-theme .account-bar:not(.guest) .ab-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-theme .account-bar:not(.guest) .ab-text {
  grid-row: 1 / 3;
}
.site-theme .account-bar:not(.guest) .ab-name {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.site-theme .account-bar:not(.guest) .ab-name > b {
  font-size: 22px;
}
.site-theme .account-bar:not(.guest) .ab-xp {
  width: 100%;
  max-width: 230px;
  margin-top: 6px;
}
.site-theme .account-bar:not(.guest) .ab-wallet > span {
  min-width: 92px;
  padding: 8px;
}
.site-theme .account-bar:not(.guest) .ab-wallet b {
  font-size: 17px;
  gap: 5px;
}
.site-theme .account-bar:not(.guest) .ab-wallet-ico {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.site-theme .account-bar:not(.guest) .ab-actions {
  grid-column: 3;
  grid-row: 2;
}
.card-color-grid i {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, #ffffff80, transparent 38%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--swatch) 60%, white),
      var(--swatch) 45%,
      color-mix(in srgb, var(--swatch) 60%, #03102a)
    );
  box-shadow: inset 0 0 12px #ffffff30;
}
@media (max-width: 560px) {
  .site-theme .account-bar:not(.guest) {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .site-theme .account-bar:not(.guest) .ab-photo {
    width: 56px;
    height: 64px;
    grid-row: 1;
  }
  .site-theme .account-bar:not(.guest) .ab-text {
    grid-row: 1;
  }
  .site-theme .account-bar:not(.guest) .ab-wallet {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .site-theme .account-bar:not(.guest) .ab-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .site-theme .account-bar:not(.guest) .ab-name > b {
    font-size: 18px;
  }
  .pvp-result .pvp-team-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-win-particles i,
  .pvp-result.won h3,
  .skin-card::before,
  .shopx .sx-card::before {
    animation: none;
  }
}

/* Feedback 28/09: compact identity, readable access tag and evenly spaced sprite artwork. */
.home-wordmark-row .home-early-access {
  background: linear-gradient(#9655db, #622ca3);
  border-color: #c599ff;
  color: #fff;
  font-size: 7px;
  padding: 2px 5px;
  box-shadow: 0 1px 3px #0008;
}
.pk-card .pk-portrait .pk-shadow {
  display: none;
}
.rg-back .back-arrow {
  width: 16px;
  height: 16px;
  display: block;
}
.rg-card.kanto .rg-bosses,
.rg-card.johto .rg-bosses {
  --sprite-size: 58px;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}
.rg-card.kanto .rg-bosses > i,
.rg-card.johto .rg-bosses > i {
  position: relative;
  width: calc(var(--sprite-size) * var(--crop-width) / 96);
  height: var(--sprite-size);
  flex: none;
}
.rg-card.kanto .rg-boss,
.rg-card.johto .rg-boss {
  position: absolute;
  width: var(--sprite-size);
  height: var(--sprite-size);
  max-width: none;
  left: calc(var(--sprite-size) * var(--crop-left) / -96);
  top: calc(
    (var(--sprite-size) - var(--sprite-size) * var(--crop-height) / 96) / 2 - var(--sprite-size) * var(--crop-top) / 96
  );
}
.rg-card.hoenn .rg-soon {
  top: -3px;
  right: -39px;
  width: 132px;
  padding: 4px 0;
  border: 0;
  box-shadow: none;
}
.pvp-panel > p {
  font-size: 10px;
  color: var(--ui-muted);
  line-height: 1.5;
}
.site-theme .account-bar:not(.guest) {
  grid-template-columns: 42px minmax(90px, 1fr) auto;
  padding: 5px 8px;
  gap: 3px 8px;
  min-height: 0;
  margin-bottom: 16px;
}
.site-theme .account-bar:not(.guest) .ab-photo {
  width: 42px;
  height: 46px;
  padding: 2px;
}
.site-theme .account-bar:not(.guest) .ab-name {
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.site-theme .account-bar:not(.guest) .ab-name > b {
  font-size: 14px;
}
.site-theme .account-bar:not(.guest) .ab-text {
  gap: 1px;
}
.site-theme .account-bar:not(.guest) .ab-text > small {
  font-size: 6px;
  line-height: 1;
}
.site-theme .account-bar:not(.guest) .ab-xp {
  margin-top: 3px;
  height: 7px;
  max-width: 180px;
}
.site-theme .account-bar:not(.guest) .ab-lv {
  font-size: 7px;
  padding: 1px 3px;
}
.site-theme .account-bar:not(.guest) .ab-wallet {
  gap: 5px;
}
.site-theme .account-bar:not(.guest) .ab-wallet > span {
  padding: 3px 6px;
  min-width: 76px;
  gap: 1px;
}
.site-theme .account-bar:not(.guest) .ab-wallet small {
  font-size: 6px;
}
.site-theme .account-bar:not(.guest) .ab-wallet b {
  font-size: 12px;
  gap: 4px;
}
.site-theme .account-bar:not(.guest) .ab-wallet-ico {
  width: 18px;
  height: 18px;
}
.site-theme .account-bar:not(.guest) .ab-actions {
  gap: 4px;
}
.site-theme .account-bar:not(.guest) .ab-actions .ab-btn {
  min-height: 18px;
  padding: 2px 5px;
  font-size: 7px;
  line-height: 1.1;
}
@media (max-width: 560px) {
  .rg-card.kanto .rg-bosses,
  .rg-card.johto .rg-bosses {
    --sprite-size: 42px;
    gap: 7px;
  }
  .site-theme .account-bar:not(.guest) {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .site-theme .account-bar:not(.guest) .ab-photo,
  .site-theme .account-bar:not(.guest) .ab-text {
    grid-row: 1;
  }
  .site-theme .account-bar:not(.guest) .ab-wallet {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .site-theme .account-bar:not(.guest) .ab-actions {
    grid-column: 1/-1;
    grid-row: 3;
  }
}

.site-theme .account-bar:not(.guest) {
  grid-template-rows: 24px 18px;
}
.site-theme .account-bar:not(.guest) .ab-wallet > span {
  height: 24px;
  padding: 2px 6px;
}
.site-theme .account-bar:not(.guest) .ab-wallet small {
  line-height: 7px;
}
.site-theme .account-bar:not(.guest) .ab-wallet b {
  line-height: 13px;
}
.site-theme .account-bar:not(.guest) .ab-actions .ab-btn {
  height: 18px;
}
.site-theme .account-bar:not(.guest) .ab-actions .ab-btn svg {
  width: 10px;
  height: 10px;
}
.rg-card.hoenn .rg-soon {
  top: -7px;
}
@media (max-width: 560px) {
  .site-theme .account-bar:not(.guest) {
    grid-template-rows: auto 24px 18px;
  }
}

/* Refinements requested in the third browser review. */
.site-theme.menu-page .btn.rg-back {
  top: 10px;
  left: 10px;
  padding: 4px 10px;
}
.pk-card[data-starter='155'] .pk-portrait .pk-anim {
  width: 92px;
  height: 92px;
  max-width: 92px;
  max-height: 92px;
}
.pk-card[data-starter='152'] .pk-portrait .pk-anim {
  width: 88px;
  height: 88px;
  max-width: 88px;
  max-height: 88px;
}
.pk-card[data-starter='158'] .pk-portrait .pk-anim {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  bottom: 0;
}
.pk-card[data-starter='390'] .pk-portrait .pk-anim {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  bottom: 4px;
}
.card-actions .card-go {
  min-width: 0;
  width: max-content;
}
.card-actions .card-go .go-face {
  padding: 6px 16px;
  text-align: center;
}
.pvp-history-row {
  display: block;
  margin-top: 14px;
  padding: 12px 0;
}
.pvp-history-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pvp-history-result.won {
  color: #64e39b;
}
.pvp-history-result.lost {
  color: #ff747c;
}
.pvp-history-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 6px;
}
.pvp-history-vs {
  align-self: center;
  text-align: center;
  color: #ffda70;
  font-size: 12px;
}
.pvp-history-side {
  min-width: 0;
}
.pvp-history-side > .pvp-trainer {
  margin-bottom: 10px;
}
.pvp-history-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.pvp-history-member {
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid #315275;
  border-radius: 5px;
  background: #091e3a;
  text-align: center;
}
.pvp-history-member .hall-member {
  border: 0;
  padding: 0;
  background: none;
}
.pvp-history-member .hall-portrait {
  height: 42px;
}
.pvp-history-member .hall-portrait > img {
  max-width: 42px;
  max-height: 42px;
}
.pvp-history-member .hall-member strong {
  font-size: 9px;
  overflow-wrap: anywhere;
}
.pvp-history-member .hall-member small,
.pvp-history-member .hall-member em {
  font-size: 7px;
}
.pvp-history-member .hall-types {
  flex-wrap: wrap;
  gap: 2px;
}
.pvp-history-member .type-pill {
  font-size: 6px;
}
.pvp-history-item {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  color: #acc7e3;
  overflow-wrap: anywhere;
}
.pvp-history-item .item-tag {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}
.overlay .pvp-forfeit-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  overflow: hidden;
}
.pvp-forfeit-modal .modal-head {
  padding: 14px 16px;
}
.pvp-forfeit-modal .modal-head h2 {
  font-size: 19px;
}
.pvp-forfeit-modal .modal-body {
  padding: 16px;
  font-size: 12px;
}
.pvp-forfeit-modal .modal-body .row {
  gap: 8px;
  margin-top: 12px;
}
.pvp-forfeit-modal .btn {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 10px;
}
.pvp-fireworks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.pvp-fireworks > span {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
}
.pvp-fireworks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--hue) 100% 75%);
  box-shadow: 0 0 6px hsl(var(--hue) 100% 65%);
  animation: pvp-firework-burst 2.6s ease-out var(--delay) infinite;
}
@keyframes pvp-firework-burst {
  0%,
  12% {
    transform: rotate(var(--angle)) translateY(0) scale(0.4);
    opacity: 0;
  }
  16%,
  35% {
    opacity: 1;
  }
  70%,
  100% {
    transform: rotate(var(--angle)) translateY(-70px) scale(0.2);
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .pvp-history-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pvp-history-side > .pvp-trainer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-fireworks,
  .pvp-win-particles {
    display: none;
  }
  .card-color-grid i::after,
  .skin-card::before,
  .shopx .sx-card::before {
    animation: none;
  }
}

/* Trainer card and history spacing, fourth browser review. */
.site-theme .account-bar:not(.guest) {
  grid-template-columns: 52px minmax(90px, 1fr) auto;
  grid-template-rows: 30px 22px;
  padding: 7px 10px;
  gap: 4px 10px;
}
.site-theme .account-bar:not(.guest) .ab-photo {
  width: 52px;
  height: 58px;
}
.site-theme .account-bar:not(.guest) .ab-name > b {
  font-size: 16px;
}
.site-theme .account-bar:not(.guest) .ab-text > small {
  font-size: 7px;
}
.site-theme .account-bar:not(.guest) .ab-xp {
  height: 9px;
  max-width: 210px;
}
.site-theme .account-bar:not(.guest) .ab-lv {
  font-size: 8px;
}
.site-theme .account-bar:not(.guest) .ab-wallet > span {
  height: 30px;
  min-width: 84px;
  padding: 2px 7px;
  grid-template-rows: 8px 14px;
  gap: 1px;
  align-content: center;
}
.site-theme .account-bar:not(.guest) .ab-wallet small {
  font-size: 6px;
  line-height: 8px;
}
.site-theme .account-bar:not(.guest) .ab-wallet b {
  font-size: 12px;
  line-height: 14px;
}
.site-theme .account-bar:not(.guest) .ab-wallet-ico {
  width: 14px;
  height: 14px;
}
.site-theme .account-bar:not(.guest) .ab-actions .ab-btn {
  height: 22px;
  min-height: 22px;
  font-size: 8px;
  padding: 3px 6px;
}
.menu-page.site-theme .pvp-lobby .pvp-panel.pvp-history-panel {
  gap: 2px;
  padding: 16px 16px 8px;
}
.pvp-history-panel .pvp-history-row {
  margin-top: 0;
  padding: 0;
  border-bottom: 0;
}
.pvp-history-panel .pvp-history-row + .pvp-history-row {
  margin-top: 18px;
  padding-top: 18px;
}
.pvp-history-heading {
  margin-bottom: 4px;
}
.pvp-history-side > .pvp-trainer {
  margin-bottom: 6px;
  gap: 7px;
}
.pvp-history-side > .pvp-trainer > img {
  width: 40px;
  height: 40px;
}
.pvp-history-member {
  padding: 4px 2px;
}
.pvp-history-item {
  margin-top: 3px;
  line-height: 1.2;
}
@media (max-width: 560px) {
  .site-theme .account-bar:not(.guest) {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto 30px 22px;
  }
}

/* Visitor menus use the same two-column rhythm as account and collection actions. */
.site-theme .home-actions .visitor-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.site-theme .home-actions .visitor-options.solo {
  grid-template-columns: minmax(0, 1fr);
}
.site-theme .home-actions .visitor-options > .home-menu-card {
  min-width: 0;
  height: 100%;
}

.account-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  margin: 8px 0;
  border: 1px solid #b69647;
  border-radius: 4px;
  background: #102640;
  color: #f8df87;
  font-size: 11px;
  line-height: 1.3;
}
.account-notice .btn {
  flex: none;
  min-height: 0;
  font-size: 9px;
  padding: 6px 9px;
}
@media (max-width: 520px) {
  .account-notice {
    flex-wrap: wrap;
  }
}

.guest-progress-note {
  margin: 0 30px 12px;
  color: #e8d17e;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
}
.safari-event {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #b9df68;
  box-shadow:
    inset 0 0 34px #6da94824,
    0 0 26px #a7e76748;
}
.safari-event > :not(.safari-event-fx) {
  position: relative;
  z-index: 1;
}
.safari-event .card-row {
  justify-content: center;
}
.safari-event .card-slot {
  max-width: min(100%, 240px);
}
.safari-event .play-card {
  border-radius: 6px;
  box-shadow:
    0 0 15px #a1dd72,
    0 0 36px #5ab99a7a;
}
.safari-event .card-lock {
  border-radius: inherit;
}
.safari-event-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.safari-event-fx i {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e5ffc0;
  box-shadow: 0 0 10px #96e5a9;
  animation: safari-spark 3.5s ease-in-out infinite;
  animation-delay: calc(var(--n) * -0.13s);
}
.safari-crest {
  position: absolute;
  inset: 12px 8px auto;
  padding: 5px;
  background: #173e2cca;
  border: 1px solid #c4f27e;
  color: #f3ffc7;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 0 9px #a5e777;
}
.safari-skip {
  margin: 8px auto;
}
@keyframes safari-spark {
  0%,
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateX(40px) scale(0.3);
  }
  45% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
    transform: rotate(var(--a)) translateX(260px) scale(1.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .safari-event-fx i {
    animation: none;
    opacity: 0.55;
    transform: rotate(var(--a)) translateX(90px);
  }
}
.dex-form-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.dex-form-gallery h3 {
  flex-basis: 100%;
  margin: 0;
  color: #ffe18b;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.dex-form {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 70px;
  padding: 6px;
  border: 1px solid #5f7690;
  background: #12263d;
  font-size: 10px;
}
.dex-form img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.dex-form.unknown img {
  filter: grayscale(1) brightness(0.15);
}
.dex-form small {
  color: #a9b9c9;
  font-size: 8px;
}

/* A rare Charm remains centered in the shop and capture panel. */
.shiny-charm-offer {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #ffd56d;
  border-radius: 9px;
  background:
    radial-gradient(circle at 45px 50%, #ffe98733, transparent 130px), linear-gradient(120deg, #183150, #0d1d38);
  box-shadow:
    0 0 18px #ffd55e44,
    inset 0 0 14px #ffe0981a;
}
.shiny-charm-offer h4 {
  color: #ffdf80;
  margin: 0 0 4px;
}
.shiny-charm-offer p {
  margin: 0 0 5px;
}
.shiny-charm-offer small {
  color: #cfe7ff;
}
.shiny-charm-art {
  display: grid;
  place-items: center;
  min-height: 82px;
  filter: drop-shadow(0 0 10px #fff3a9);
  animation: charm-glow 2.8s ease-in-out infinite;
}
.shiny-charm-art .item-sprite {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.shiny-charm-offer > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 142px;
  white-space: nowrap;
}
.shiny-charm-offer > .btn .shop-coin {
  width: 14px;
  height: 14px;
}
.shiny-charm-use {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid #f6d17a;
  border-radius: 8px;
  background: linear-gradient(110deg, #59468e, #173e62);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 12px #ffe39155;
}
.shiny-charm-use .item-sprite {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px #fff4a8);
}
.shiny-charm-use span {
  display: grid;
  gap: 2px;
}
.shiny-charm-use small {
  font-size: 10px;
  color: #e0f2ff;
}
@keyframes charm-glow {
  50% {
    filter: drop-shadow(0 0 17px #fff5af) brightness(1.18);
  }
}
@media (max-width: 680px) {
  .shiny-charm-offer {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .shiny-charm-offer .btn {
    grid-column: 1 / -1;
  }
  .shiny-charm-art .item-sprite {
    width: 50px;
    height: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shiny-charm-art {
    animation: none;
  }
}

/* Alternative boss choices and compact rare-item offer (30/09/2026). */
.site-theme .tc-bdgs .bdg img[src*='/deoxys-attack.png'] {
  width: 23.02px;
  height: 38.4px;
  clip-path: inset(0 4% 0 7%);
}
.tc-bdgs > .bdg img {
  width: min(38.4px, 64%);
  height: 38.4px;
}
.shiny-charm-offer {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  margin-top: 10px;
}
.shiny-charm-art {
  min-height: 40px;
}
.shiny-charm-art .item-sprite {
  width: 36px;
  height: 36px;
}
.shiny-charm-offer h4 {
  font-size: 11px;
  margin-bottom: 3px;
}
.shiny-charm-offer p {
  font-size: 10px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.shiny-charm-offer small {
  font-size: 9px;
}
.shiny-charm-offer > .btn {
  min-width: 112px;
  grid-column: auto;
  font-size: 10px;
  padding: 6px 8px;
}
.boss-form-offers {
  display: grid;
  gap: 8px;
  width: min(100%, 460px);
  margin: 0 auto;
}
.boss-form-offers p {
  font-size: 11px;
  margin: 0;
}
.boss-form-offers .key-offer {
  width: 100%;
}
.boss-form-offers .selected {
  border-color: #81efb3;
  box-shadow: 0 0 8px #81efb333;
}
@media (max-width: 480px) {
  .shiny-charm-offer {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .shiny-charm-offer > .btn {
    grid-column: 2;
    justify-self: start;
    min-height: 34px;
  }
  .boss-form-offers .key-offer {
    padding: 8px;
    gap: 6px;
  }
}

.weather-wind i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 36px;
  height: 2px;
  border-radius: 50%;
  background: #b6e9f988;
  animation: boss-wind var(--d) linear infinite;
  animation-delay: var(--w);
}
@keyframes boss-wind {
  from {
    transform: translateX(-90px);
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  to {
    transform: translateX(90px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .weather-wind i {
    animation: none;
  }
}

/* Player review — compact controls and event discovery. */
.shiny-charm-offer {
  padding-right: 30px;
}
.shop-item .item-icon[src*='blue-orb'],
.shop-item .item-icon[src*='red-orb'] {
  width: 30px;
  height: 30px;
}
.shop-item .item-icon[src*='latiosite'],
.shop-item .item-icon[src*='latiasite'] {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.rg-card.sinnoh {
  position: relative;
  overflow: hidden;
}
.rg-card.sinnoh .rg-soon {
  position: absolute;
  top: 18px;
  right: -36px;
  width: 168px;
  transform: rotate(35deg);
  text-align: center;
  background: #e5be62;
  color: #192842;
  border: 2px solid #ffde8d;
  font-weight: 900;
  z-index: 3;
  font-size: 9px;
}
.rg-card.sinnoh .rg-name {
  padding-right: 80px;
}
.card-table.raid-gate {
  min-height: 0;
  padding-block: 22px 16px;
  gap: 14px;
}
.card-table.raid-gate .card-row {
  margin-block: 12px;
  min-height: 0;
}
.card-table.raid-gate .card-prompt:empty {
  display: none;
}
.card-table.raid-gate .card-actions {
  gap: 12px;
  margin-top: 8px;
}
.card-table.raid-gate header h1 {
  margin-block: 10px 6px;
}
.raid-silhouette .sil-aura {
  background: radial-gradient(ellipse, var(--boss-aura, #ffe168) 0%, transparent 65%);
}
.raid-silhouette .sil-img {
  filter: brightness(0) drop-shadow(0 0 12px var(--boss-aura, #ffe168));
}
.tc-badge,
.tc-bdg {
  text-align: center;
}
.tc-badge small,
.tc-bdg small,
.tc-badge span,
.tc-bdg span {
  text-align: center;
  width: 100%;
  justify-self: center;
}
.skin-equip-modal {
  width: min(360px, calc(100vw - 24px));
}
.skin-equip-modal .modal-body {
  padding: 14px;
}
.skin-equip-modal .skin-sheet {
  gap: 8px;
}
.skin-equip-modal .skin-sheet-art {
  width: 116px;
  height: 116px;
}
.skin-equip-modal .skin-sheet-art img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.skin-equip-modal .skin-sheet h3 {
  font-size: 15px;
}
.skin-equip-modal .skin-sheet p {
  font-size: 11px;
}
.skin-equip-modal .skin-use {
  width: min(240px, 100%);
  gap: 6px;
}
.skin-equip-modal .skin-use .btn {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 10px;
}
.ss-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ss-sparks i {
  position: absolute;
  left: calc(10% + var(--n) * 15%);
  top: calc(15% + var(--n) * 8%);
  font-style: normal;
  color: #bce9ff;
  animation: skin-spark 2.8s ease-in-out infinite;
  animation-delay: calc(var(--n) * -0.4s);
}
@keyframes skin-spark {
  0%,
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.4);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-8px) scale(1);
  }
}
.sx-hero.has-banner {
  aspect-ratio: 8/3;
  min-height: 0;
  background-size: auto, cover;
}
.dex-alternates {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #426682;
}
.dex-alternates > h3 {
  font-size: 13px;
  color: #f5d175;
}
.dex-alternates .dex-form-gallery {
  display: contents;
}
.dex-alternates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}
.dex-alternates > h3 {
  grid-column: 1/-1;
}
.dex-alternates .dex-form {
  min-width: 0;
  text-align: center;
  padding: 10px;
  background: #102b46;
  border: 1px solid #426682;
  display: grid;
  justify-items: center;
  gap: 5px;
}
.dex-alternates .dex-form img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: none;
}
.dex-alternates .dex-form b {
  font-size: 10px;
}
.dex-alternates .dex-form small {
  font-size: 9px;
}
.safari-discovery {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: #030b1ae8;
  padding: 24px;
}
.safari-discovery > div {
  text-align: center;
  max-width: 440px;
}
.safari-discovery h2 {
  color: #ffe08b;
  font-size: clamp(18px, 4vw, 28px);
}
.safari-discovery p {
  color: #c6e0f2;
  line-height: 1.5;
}
.safari-lost-card {
  display: block;
  width: 126px;
  height: 180px;
  margin: 24px auto;
  background: url("/static/game/ui/card_back.81f95cac9283.png") center/cover;
  border: 2px solid #d6bb67;
  animation:
    lost-card-arrive 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) both,
    lost-card-float 3s 1.4s ease-in-out infinite;
}
@keyframes lost-card-arrive {
  from {
    opacity: 0;
    transform: translate(40vw, -35vh) rotate(110deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg);
  }
}
@keyframes lost-card-float {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}
.purchase-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  background: #010815cc;
  padding: 16px;
}
.purchase-dialog {
  width: min(360px, 100%);
  padding: 22px;
  background: #102b46;
  border: 2px solid #edc66e;
  color: #e7f3ff;
  box-shadow: 0 12px 40px #0009;
}
.purchase-dialog h2 {
  font-size: 18px;
  color: #ffe08b;
  margin: 0 0 10px;
}
.purchase-dialog label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0;
  font-size: 12px;
}
.purchase-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.purchase-dialog .btn {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 11px;
}
.charm-transform {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: #030b1aeb;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.charm-transform-stage {
  position: relative;
  width: min(320px, 80vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.charm-transform-stage .charm-before,
.charm-transform-stage .charm-after {
  position: absolute;
  width: 160px;
  height: 160px;
  object-fit: contain;
}
.charm-before {
  animation: charm-before 2.4s both;
}
.charm-after {
  animation: charm-after 2.4s both;
}
.charm-transform-stage > .item-sprite {
  position: absolute;
  width: 46px;
  height: 46px;
  top: 15px;
  animation: charm-orbit 2.4s both;
}
.charm-transform-stage > i {
  position: absolute;
  inset: 15%;
  border: 2px solid #b5f7ef;
  border-radius: 50%;
  animation: charm-ring 2.4s both;
}
.charm-transform-stage > b {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #f7e47f;
  animation: charm-star 2.4s both;
  animation-delay: calc(var(--n) * 0.03s);
}
.charm-transform p {
  position: absolute;
  top: calc(50% + 130px);
  color: #a6ffe1;
  font-weight: 900;
  text-align: center;
}
@keyframes charm-before {
  0%,
  35% {
    opacity: 1;
    filter: none;
  }
  50% {
    opacity: 1;
    filter: brightness(8);
    transform: scale(1.15);
  }
  65%,
  100% {
    opacity: 0;
  }
}
@keyframes charm-after {
  0%,
  50% {
    opacity: 0;
  }
  65% {
    opacity: 1;
    filter: brightness(3);
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}
@keyframes charm-ring {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  45% {
    opacity: 1;
    transform: rotate(180deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(1.5);
  }
}
@keyframes charm-star {
  0%,
  25% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
  }
  60% {
    opacity: 1;
    transform: rotate(calc(var(--n) * 30deg)) translateX(120px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--n) * 30deg + 40deg)) translateX(150px) scale(0.3);
  }
}
@keyframes charm-orbit {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  35% {
    opacity: 1;
    transform: translateY(35px);
  }
  65%,
  100% {
    opacity: 0;
    transform: translateY(80px) scale(0.3);
  }
}
@media (max-width: 480px) {
  .sx-hero.has-banner {
    aspect-ratio: 2/1;
    min-height: 150px;
  }
  .card-table.raid-gate {
    padding: 14px 8px;
  }
  .shiny-charm-offer {
    padding-right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ss-sparks i,
  .safari-lost-card,
  .charm-before,
  .charm-after,
  .charm-transform-stage > i,
  .charm-transform-stage > b,
  .charm-transform-stage > .item-sprite {
    animation: none;
  }
  .charm-before {
    display: none;
  }
}

.tc-bdgs > .bdg b {
  width: 100%;
  text-align: center;
  display: block;
}

.charm-transform {
  pointer-events: auto;
}

.shop-item .item-icon[src*='latiosite'] {
  width: 26px;
  height: 26px;
}
@media (max-width: 480px) {
  .sx-hero.has-banner {
    aspect-ratio: 8/3;
    min-height: 0;
  }
}

.tc-bdgs > .bdg .badge-name-line {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
}

/* Compact Safari and collection review. */
.purchase-overlay .purchase-dialog {
  width: min(284px, 100%);
  border-radius: 12px;
  padding: 14px;
}
.purchase-dialog h2 {
  font-size: 14px;
  margin-bottom: 8px;
}
.purchase-dialog p {
  font-size: 11px;
  margin: 0;
  line-height: 1.4;
}
.purchase-dialog label {
  font-size: 10px;
  margin: 12px 0;
  gap: 6px;
}
.purchase-dialog .btn {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
}
.card-table.safari-event {
  --cw: min(144px, 55vw);
  min-height: 0;
  height: auto;
  padding: 12px 16px 16px !important;
  justify-content: flex-start;
  gap: 0;
  overflow: auto;
}
.card-table.safari-event > header {
  margin: 0;
  padding: 0;
  flex: none;
}
.card-table.safari-event .card-row {
  flex: none;
  min-height: 0;
  margin: 14px 0 8px;
  padding: 0;
}
.card-table.safari-event .card-prompt {
  flex: none;
  margin: 6px 0;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.card-table.safari-event .card-actions {
  flex: none;
  gap: 10px;
  margin: 0;
  padding: 4px 0 8px;
}
.card-table.safari-event footer {
  margin: 0;
  padding: 0;
}
.safari-event .safari-skip {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 11px;
}
.safari-discovery > div > .btn {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 11px;
  margin-top: 16px;
}
.safari-discovery p {
  margin-bottom: 0;
}
.rg-card.sinnoh .rg-soon {
  top: 0;
}
.shop-item .item-icon[src*='blue-orb'],
.shop-item .item-icon[src*='red-orb'] {
  width: 26px;
  height: 26px;
}
.pk-card[data-starter='252'] .pk-portrait .pk-anim {
  width: 104px;
  height: 104px;
  max-width: 104px;
  max-height: 104px;
  bottom: -4px;
}
.pk-card[data-starter='258'] .pk-portrait .pk-anim {
  width: 88px;
  height: 88px;
  max-width: 88px;
  max-height: 88px;
}
.dex-alternates .dex-form-gallery {
  display: contents;
}
.dex-alternates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  gap: 10px;
}
.dex-alternates > h3 {
  grid-column: 1 / -1;
}
.dex-alternates .dex-form {
  min-height: 116px;
  padding: 10px 6px;
  gap: 4px;
}
.dex-form.unknown img {
  filter: brightness(0);
  opacity: 0.7;
}
.dex-form .dex-no {
  font-size: 9px;
}
.dex-form strong {
  font-size: 10px;
  text-align: center;
}
@media (max-height: 800px) and (min-width: 521px) {
  .card-table.safari-event {
    --cw: 100px;
    padding: 8px 16px !important;
  }
  .card-table.safari-event .card-row {
    margin: 8px 0 4px;
  }
  .card-table.safari-event .card-prompt {
    margin: 4px 0;
  }
  .card-table.safari-event .card-actions {
    gap: 6px;
    padding: 2px 0 0;
  }
  .card-table.safari-event .safari-skip {
    margin: 0 auto;
  }
  .card-table.safari-event .gate-offer {
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* Player review: centered compact dialogs and responsive biome choices. */
.purchase-overlay .purchase-dialog {
  width: min(244px, 100%);
  padding: 12px;
  text-align: center;
}
.purchase-dialog h2 {
  font-size: 13px;
  margin: 0 0 7px;
}
.purchase-dialog label {
  justify-content: center;
  margin: 9px 0;
}
.purchase-dialog footer {
  justify-content: center;
  gap: 8px;
}
.purchase-dialog .btn {
  min-height: 28px;
  padding: 4px 8px;
}
.modal.evolution-modal {
  width: min(340px, calc(100% - 20px));
  border-radius: 12px;
  overflow-x: hidden;
}
.evolution-modal .modal-head {
  padding: 12px 14px;
}
.evolution-modal .modal-head > div {
  flex: 1;
  text-align: center;
}
.evolution-modal .modal-head h2 {
  font-size: 14px;
  margin-top: 4px !important;
}
.evolution-modal .modal-body {
  padding: 14px;
}
.evolution-modal .evolution-fx {
  padding: 0;
  gap: 8px;
  text-align: center;
  background: none;
  overflow: visible;
}
.evolution-modal .modal-body:has(.evolution-fx) {
  background: radial-gradient(ellipse at 50% 40%, #1b3f73, #081428 85%);
}
.evolution-modal .modal-body:has(.evolution-fx.shiny) {
  background: radial-gradient(ellipse at 50% 40%, #4a3a12, #0d0a1e 85%);
}
.evolution-modal .evolution-stage {
  --evo-charge-distance: 82px;
  --evo-spark-range: 0.6;
  width: 200px;
  height: 200px;
  max-width: 100%;
  overflow: clip;
  isolation: isolate;
}
.evolution-modal .evo-in,
.evolution-modal .evo-rings,
.evolution-modal .evolution-sparkles {
  z-index: 1;
}
.evolution-modal .evolution-sprite {
  z-index: 2;
}
.evolution-modal .evo-rings i {
  width: 50px;
  height: 50px;
  margin: -25px;
  border-width: 2px;
}
.evolution-modal .evo-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.evolution-modal .evo-eyebrow {
  min-height: 28px;
  display: grid;
  align-items: center;
}
.evolution-modal .evolution-title {
  min-height: 42px;
  display: grid;
  align-items: center;
  margin: 0;
}
.evolution-modal .evo-flashing .evolution-sprite {
  opacity: 1;
  animation: evo-silhouette-glow 0.9s ease-in-out both;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px #fff);
}
@keyframes evo-silhouette-glow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}
.evolution-modal .evolution-stage.evo-flashing::before {
  content: none;
}
.evolution-modal .evolution-fx.evo-hyper .evolution-stage {
  animation: none;
}
.evolution-modal .evo-aura {
  display: none;
}
.evolution-modal .evo-hyper .evo-aura {
  animation: evo2-aura 0.5s ease-in-out infinite;
}
.evolution-modal .evo-hyper .evo-in b {
  animation: evo2-suck 0.6s ease-in var(--dl) infinite;
}
.evolution-modal .evo-reveal .evolution-sprite {
  animation: evo2-reveal 0.8s ease-out both;
}
.evolution-modal .evo-reveal .evolution-sparkles i {
  animation: evo2-sparkle 0.8s ease-out both;
}
.evolution-modal .evo-reveal .evo-rings i {
  animation-duration: 0.8s;
}
.evolution-modal .evo-rings i:nth-child(2) {
  animation-delay: 0.15s !important;
}
.evolution-modal .evo-rings i:nth-child(3) {
  animation-delay: 0.3s !important;
}
.evolution-modal .evo-done .evolution-sprite {
  animation: none;
  opacity: 1;
  scale: 1;
  transform: none;
  filter: none;
}
.evolution-modal .evolution-sprite,
.evolution-modal .evo-aura {
  width: 128px;
  height: 128px;
}
.evolution-modal .evolution-title {
  font-size: 16px;
}
.evolution-modal .evolution-choice {
  gap: 9px;
}
.evolution-modal .evolution-choice-art {
  gap: 14px;
}
.evolution-modal .evolution-choice-art img {
  width: 72px;
  height: 72px;
}
.evolution-modal .evolution-choice p {
  font-size: 12px;
  margin: 0;
}
.evolution-modal .evolution-choice-actions .btn {
  min-height: 30px;
  font-size: 10px;
  padding: 5px 8px;
}
.stage-ribbon .stage-label strong {
  font: inherit;
}
.card-table {
  min-height: 0;
  overflow: auto;
  gap: 10px;
  padding: 14px 16px;
}
.card-table > header {
  flex: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.card-table .card-row {
  min-height: 0;
  margin: 12px 0 4px;
  padding: 0;
}
.card-table .card-actions {
  flex: none;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.card-table .card-prompt {
  flex: none;
  text-align: center;
  margin: 4px 0;
}
.card-table > footer {
  flex: none;
  text-align: center;
  margin: 0;
  padding: 8px 0 0;
}
.card-table.safari-event {
  --cw: clamp(110px, calc((100dvh - 480px) * 0.44), 190px);
  gap: 10px;
}
.card-table.safari-event .card-row {
  flex: 1;
  align-items: center;
  margin: 12px 0;
}
.card-table.safari-event .card-actions {
  gap: 10px;
}
.card-table.safari-event .safari-skip {
  margin: 0 auto;
}
.card-table.safari-event > footer {
  padding-top: 6px;
}
@media (max-height: 800px) {
  .card-table {
    --ch: clamp(100px, calc(100dvh - 570px), 210px);
    gap: 6px;
    padding: 10px;
  }
  .card-table > header h1 {
    margin: 8px 0;
    font-size: 20px;
  }
  .card-table .card-row {
    flex: none;
    margin: 8px 0 4px;
  }
  .card-table .card-actions {
    gap: 6px;
  }
  .card-table.raid-gate {
    gap: 6px;
    padding-block: 10px;
  }
  .card-table.raid-gate .card-row {
    margin-block: 6px;
  }
  .card-table.raid-gate .card-actions {
    margin-top: 0;
    gap: 6px;
  }
  .card-table .card-prompt {
    font-size: 11px;
  }
  .card-table.safari-event {
    --cw: 100px;
    gap: 0;
  }
  .card-table.safari-event .card-row {
    flex: none;
    margin: 6px 0;
  }
  .card-table.safari-event .card-prompt {
    margin: 2px 0;
  }
  .card-table.safari-event .card-actions {
    gap: 6px;
  }
}

@media (min-width: 700px) and (min-height: 801px) {
  .card-table:not(.raid-gate):not(.safari-event) {
    --ch: clamp(180px, 34vh, 300px);
    --cw: min(calc(var(--ch) / 1.42), calc((100cqw - 2 * var(--gap) - 24px) / 3));
    gap: 14px;
  }
  .card-table:not(.raid-gate):not(.safari-event) > header h1 {
    font-size: 24px;
  }
  .card-table:not(.raid-gate):not(.safari-event) .card-prompt {
    font-size: 16px;
  }
  .card-table:not(.raid-gate):not(.safari-event) .card-scanner-hint {
    padding: 9px 14px;
    font-size: 11px;
  }
  .card-table:not(.raid-gate):not(.safari-event) .card-scanner-hint img,
  .card-table:not(.raid-gate):not(.safari-event) .biome-unlock-items .unlock-item .item-sprite {
    width: 36px;
    height: 36px;
  }
}

/* Larger regional guardians, five per row. */
.rg-card.hoenn .rg-bosses,
.rg-card.sinnoh .rg-bosses {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 8px 4px;
  justify-items: center;
}
.rg-card.hoenn .rg-bosses i,
.rg-card.sinnoh .rg-bosses i {
  grid-column: span 2;
  width: min(72px, 100%);
  height: 72px;
}
.rg-card.hoenn .rg-boss,
.rg-card.sinnoh .rg-boss {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rg-card.sinnoh .rg-bosses i:nth-child(11) {
  grid-column: 2 / span 2;
}
@media (max-width: 520px) {
  .rg-card.hoenn .rg-bosses i,
  .rg-card.sinnoh .rg-bosses i {
    height: 56px;
  }
}

/* Keep each capture choice readable at a glance: portrait left, details right. */
.capture-modal .sacrifice-block .sacrifice {
  grid-template-columns: 18px 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: stretch;
  gap: 3px 8px;
  padding: 9px 10px;
  text-align: left;
}
.capture-modal .sacrifice-block .sacrifice input {
  position: static;
  grid-column: 1;
  grid-row: 1 / 3;
}
.capture-modal .sacrifice-block .sacrifice > .pixel {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.capture-modal .sacrifice-block .sacrifice-copy {
  grid-column: 3;
  grid-row: 1;
  align-items: flex-start;
  text-align: left;
}
.capture-modal .sacrifice-block .sacrifice > b {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
}
.capture-modal .target-side .target-roster {
  grid-template-columns: minmax(0, 1fr);
}
.capture-modal .target-roster .target-card,
.capture-modal .target-roster .target-card.single {
  grid-column: 1;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  justify-items: stretch;
  gap: 3px 9px;
  min-height: 112px;
  padding: 10px;
  text-align: left;
}
.capture-modal .target-roster .target-portrait,
.capture-modal .target-roster .single .target-portrait {
  grid-column: 1;
  grid-row: 1 / 5;
  min-height: 0;
  height: 100%;
  align-self: center;
}
.capture-modal .target-roster .target-portrait .pixel,
.capture-modal .target-roster .single .target-portrait .pixel {
  width: 82px;
  height: 82px;
}
.capture-modal .target-roster .target-identity,
.capture-modal .target-roster .target-types,
.capture-modal .target-roster .target-chance,
.capture-modal .target-roster .target-values,
.capture-modal .target-roster .single .target-identity,
.capture-modal .target-roster .single .target-types,
.capture-modal .target-roster .single .target-chance,
.capture-modal .target-roster .single .target-values {
  grid-column: 2;
  justify-content: flex-start;
  text-align: left;
}
.capture-modal .target-roster .target-identity,
.capture-modal .target-roster .single .target-identity {
  grid-row: 1;
}
.capture-modal .target-roster .target-types,
.capture-modal .target-roster .single .target-types {
  grid-row: 2;
}
.capture-modal .target-roster .target-chance,
.capture-modal .target-roster .single .target-chance {
  grid-row: 3;
}
.capture-modal .target-roster .target-values,
.capture-modal .target-roster .single .target-values {
  grid-row: 4;
  flex-wrap: wrap;
}
.capture-modal .target-roster .target-card input {
  left: 7px;
  top: 7px;
}
@media (max-width: 760px) {
  .capture-modal .sacrifice-block .sacrifice {
    grid-template-columns: 16px 42px minmax(0, 1fr);
    gap: 2px 5px;
    padding: 6px;
  }
  .capture-modal .sacrifice-block .sacrifice > .pixel {
    width: 42px;
    height: 48px;
  }
  .capture-modal .target-roster .target-card,
  .capture-modal .target-roster .target-card.single {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 2px 6px;
    padding: 7px;
  }
  .capture-modal .target-roster .target-portrait .pixel,
  .capture-modal .target-roster .single .target-portrait .pixel {
    width: 62px;
    height: 62px;
  }
}
.capture-modal .btn.shiny-charm-use {
  --lip-a: #d0b8ff;
  --lip-b: #483476;
  --face-a: #7855b2;
  --face-b: #303d78;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  min-height: 48px;
  padding: 7px 10px;
}
.capture-modal .shiny-charm-use span {
  text-align: center;
}

/* Regional names and spaced, labelled guardians. */
.rg-card.kanto,
.rg-card.johto,
.rg-card.hoenn,
.rg-card.sinnoh {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.rg-card .rg-name b {
  font-size: 30px;
}
.rg-card .rg-bosses {
  width: 100%;
  margin: 0;
  gap: 14px 8px;
}
.rg-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.rg-member small {
  display: block;
  color: #dcecff;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}
.rg-card.kanto .rg-member > i,
.rg-card.johto .rg-member > i {
  position: relative;
  width: calc(var(--sprite-size) * var(--crop-width) / 96);
  height: var(--sprite-size);
}
.rg-card.hoenn .rg-member,
.rg-card.sinnoh .rg-member {
  grid-column: span 2;
}
.rg-card.sinnoh .rg-member:nth-child(11) {
  grid-column: 2 / span 2;
}
.rg-card.hoenn .rg-member > i,
.rg-card.sinnoh .rg-member > i {
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 520px) {
  .rg-card .rg-name b {
    font-size: 26px;
  }
  .rg-card .rg-bosses {
    gap: 12px 4px;
  }
  .rg-member small {
    font-size: 8px;
  }
}

/* Keep controls inside their panels across browser flex implementations. */
.capture-modal .upgrade-center > .bet-round {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.4;
  flex-shrink: 0;
}
.compact-shell .showdown-battle {
  overflow-y: auto;
}
.showdown-battle .battle-actions {
  flex-shrink: 0;
}
.item-use-modal .item-target-copy .type,
.evolution-modal .type {
  color: #fff;
  text-shadow: 0 1px 2px #07182f;
}

.compact-shell .run-main > .raid-wait {
  min-height: 0;
  flex: 1 1 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px 12px 10px;
}
.raid-wait-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}
.raid-wait-content > * {
  flex-shrink: 0;
}
.raid-wait.mythic .raid-wait-content {
  flex: 0 1 auto;
}
.raid-wait.mythic > .raid-go-wrap {
  margin-top: 8px;
  margin-bottom: 30px;
}
@media (max-height: 800px) {
  .raid-wait.mythic > .raid-go-wrap {
    margin-bottom: 0;
  }
}
.raid-wait > .raid-go-wrap {
  flex: none;
}
.raid-wait .btn.raid-go {
  min-width: 0;
  min-height: 40px;
  padding: 10px 18px;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 1.2px;
}
.raid-wait .btn.raid-go .rg-chev i {
  width: 6px;
  height: 11px;
}

/* Sinnoh is now an available expedition. */
.site-theme .pc-storage .pc-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
  border: 2px solid #608a91;
  background:
    linear-gradient(45deg, #173f4855 25%, transparent 25%, transparent 75%, #173f4855 75%),
    linear-gradient(45deg, #173f4855 25%, #102f3a 25%, #102f3a 75%, #173f4855 75%);
  background-size: 24px 24px;
  background-position:
    0 0,
    12px 12px;
}
.site-theme .pc-storage .pc-card {
  padding: 5px;
  border-radius: 2px;
}
.site-theme .pc-page .pc-pokemon .hall-member {
  padding: 4px 0;
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.site-theme .pc-page .pc-pokemon .hall-portrait {
  width: 64px;
  height: 64px;
  display: block;
  margin: auto;
}
.site-theme .pc-page .pc-pokemon .hall-portrait img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.site-theme .pc-page .pc-pokemon .hall-member strong {
  font-size: 9px;
  line-height: 1.4;
  white-space: normal;
}
.site-theme .pc-page .pc-pokemon .hall-member small {
  font-size: 7px;
  line-height: 1.4;
}
.site-theme .pc-page .pc-pokemon .hall-member .hall-ability {
  min-height: 20px;
  overflow-wrap: anywhere;
}
.site-theme .pc-page .pc-pokemon .hall-member em {
  font-size: 8px;
  color: #f3d47a;
}
.site-theme .pc-page .pc-pokemon .hall-types {
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
}
.site-theme .pc-page .pc-pokemon .tip-type {
  font-size: 6px;
  padding: 1px 3px;
}
.site-theme .pc-page .pc-card .btn,
.site-theme .pc-page .pc-restricted {
  font-size: 7px;
}
.site-theme .pc-team .pc-slot[draggable] {
  cursor: grab;
}
.site-theme .pc-team .pc-slot.dragging {
  opacity: 0.45;
}
.site-theme .pc-team .pc-slot.drop-target {
  border-color: #ffdf76;
  box-shadow:
    inset 0 0 0 2px #ffdf76,
    0 0 12px #ffdf7666;
}
.site-theme .pc-storage .pc-card {
  gap: 3px;
  padding: 4px;
}
.site-theme .pc-page .pc-pokemon {
  gap: 2px;
  padding: 0;
  cursor: help;
}
.site-theme .pc-page .pc-pokemon .hall-member {
  padding: 0;
}
.site-theme .pc-page .pc-pokemon .hall-portrait,
.site-theme .pc-page .pc-pokemon .hall-portrait img {
  width: 50px;
  height: 50px;
}
.site-theme .pc-page .pc-pokemon .hall-member strong {
  font-size: 10px;
}
.site-theme .pc-page .pc-pokemon .hall-member .hall-ability {
  min-height: 0;
}
.site-theme .pc-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}
.site-theme .pc-page .pc-card-actions .btn {
  min-width: 0;
  min-height: 23px;
  padding: 3px 2px;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: normal;
}
.site-theme .pc-card-actions .pc-restricted,
.site-theme .pc-card-actions:has(.pc-restricted) .btn {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .site-theme .pc-storage .pc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rg-card.sinnoh {
  opacity: 1;
  cursor: pointer;
}

/* One lobby with separate ranked, automatic friendly and invitation actions. */
.menu-page.site-theme .pvp-ranked-panel {
  padding: 14px 18px 16px;
  gap: 14px;
}
.site-theme .pvp-ranked-panel .tc-rank.panel {
  margin: 0;
  width: 100%;
}
.pvp-ranked-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.pvp-ranked-rules {
  flex: 1;
  min-width: 0;
}
.pvp-ranked-rules h3 {
  margin: 0 0 6px;
}
.pvp-ranked-rules p {
  margin: 4px 0 0;
  color: #aac3d9;
  font-size: 10px;
  line-height: 1.5;
}
.pvp-ranked-controls {
  display: grid;
  justify-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pvp-ranked-controls > span {
  color: #aac3d9;
  font-size: 10px;
  text-align: center;
}
.pvp-ranked-controls > span:empty {
  display: none;
}
.menu-page.site-theme .pvp-ranked-find:not(:disabled) {
  background: linear-gradient(#ffcc86, #f39a3d 45%, #d66b1b 46%, #f5a13d);
  color: #371800;
  border-color: #ffbd70;
  box-shadow:
    inset 0 2px 0 #ffe1ab,
    inset 0 -3px 0 #a44810,
    0 3px 0 #4c250e;
}
.pvp-lobby .pvp-friendly-search .pvp-quick-match {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
@media (max-width: 620px) {
  .pvp-ranked-details {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .pvp-ranked-controls {
    justify-items: start;
  }
  .site-theme .pvp-ranked-panel .tc-rank.panel {
    padding-inline: 20px;
    gap: 6px;
  }
}

/* PVP layout: shared rank/roster header, parallel match cards, invitation below. */
.menu-page.site-theme .pvp-roster-panel {
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pvp-roster-rank {
  flex: 0 0 200px;
  border-right: 1px solid #42617b;
  padding-right: 10px;
}
.site-theme .pvp-roster-rank .tc-rank.panel {
  margin: 0;
  padding: 0;
  gap: 2px;
  background: transparent;
  box-shadow: none;
}
.pvp-roster-rank .tc-rank-frame {
  display: none;
}
.site-theme .pvp-roster-rank .tc-rank-emblem {
  width: 66px;
  flex-basis: 66px;
}
.pvp-roster-copy {
  flex: 1;
  min-width: 0;
}
.pvp-roster-copy h3 {
  margin: 0 0 8px;
}
.pvp-roster-copy p {
  color: #aac3d9;
  font-size: 9px;
  line-height: 1.5;
  margin: 7px 0 0;
}
.pvp-roster-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.pvp-roster-slots {
  display: flex;
  gap: 5px;
}
.pvp-roster-slot {
  width: 30px;
  height: 32px;
  display: grid;
  place-items: center;
}
.pvp-roster-slot .pvp-mon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.pvp-roster-slot .pvp-empty-ball {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0.85;
}
.pvp-match-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pvp-match-options > .pvp-panel {
  min-height: 236px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.pvp-match-options > .pvp-ranked-panel {
  padding: 22px;
  border: 16px solid transparent;
  border-image: var(--pvp-rank-frame) 25 40 / 16px 22px stretch;
}
.pvp-match-options .pvp-ranked-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.pvp-match-options .pvp-ranked-rules {
  flex: 1;
}
.pvp-match-options .pvp-ranked-controls {
  justify-items: center;
  margin-top: auto;
}
.pvp-match-options .pvp-friendly-search .pvp-quick-match {
  margin-top: auto;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pvp-match-options .pvp-friendly-search .pvp-panel-hd {
  padding-top: 22px;
}
.pvp-match-options .pvp-ranked-find {
  white-space: normal;
}
.pvp-match-options:has(> :only-child) {
  grid-template-columns: 1fr;
}
@media (max-width: 520px) {
  .menu-page.site-theme .pvp-roster-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .pvp-roster-rank {
    flex: auto;
    border-right: 0;
    border-bottom: 1px solid #42617b;
    padding: 0 0 8px;
  }
  .pvp-match-options {
    grid-template-columns: 1fr;
  }
}

/* Use the pixel button's face/lip variables, rather than a hidden background. */
.menu-page.site-theme .pvp-ranked-find {
  --lip-a: #ffce86;
  --lip-b: #9a4413;
  --face-a: #ffb650;
  --face-b: #e7731b;
  --ink: #341800;
}
/* Compact, equal PVP match cards with consistent type sizes. */
.menu-page.site-theme .pvp-match-options > .pvp-panel {
  height: 166px;
  min-height: 166px;
  max-height: 166px;
  padding: 16px;
}
.menu-page.site-theme .pvp-match-options > .pvp-ranked-panel {
  border-width: 12px;
  border-image: var(--pvp-rank-frame) 25 40 / 12px 18px stretch;
  padding: 11px 14px;
}
.pvp-match-options .pvp-ranked-details {
  gap: 6px;
}
.pvp-match-options .pvp-friendly-search .pvp-panel-hd {
  padding-top: 0;
}
.pvp-match-options h3 {
  font-size: 14px;
  line-height: 1.2;
}
.pvp-match-options .pvp-panel-hd p,
.pvp-match-options .pvp-ranked-rules p,
.pvp-match-options .pvp-quick-match > span,
.pvp-match-options .pvp-ranked-controls > span {
  font-size: 10px;
  line-height: 1.4;
}
.pvp-match-options .pvp-quick-match .btn,
.pvp-match-options .pvp-ranked-controls .btn {
  font-size: 10px;
  min-height: 32px;
}
.pvp-roster-slot {
  width: 30px;
  height: 34px;
  overflow: visible;
}
.site-theme .pvp-roster-slot .pvp-roster-pokemon.pixel {
  display: block;
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
@media (max-width: 520px) {
  .menu-page.site-theme .pvp-match-options > .pvp-panel {
    height: auto;
    min-height: 156px;
    max-height: none;
  }
}

/* Put the rank ornament around the rank itself, leaving both match cards plain. */
.menu-page.site-theme .pvp-match-options > .pvp-ranked-panel {
  border: 1px solid #466b8b;
  border-image: none !important;
  padding: 16px;
}
.site-theme .pvp-roster-rank {
  box-sizing: border-box;
  flex-basis: 214px;
  padding: 3px 12px;
  border: 13px solid transparent;
  border-image: var(--pvp-rank-frame) 25 40 / 13px 18px stretch;
}
.site-theme .pvp-roster-rank .tc-rank.panel {
  min-height: 62px;
  height: auto;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.site-theme .pvp-roster-rank .tc-rank-emblem {
  width: 62px;
  flex-basis: 62px;
}
.site-theme .pvp-roster-rank .tc-rank-copy > span,
.site-theme .pvp-roster-rank .tc-rank-copy > small {
  font-size: 9px;
}
.site-theme .pvp-roster-rank .tc-rank-copy > strong {
  font-size: 17px;
}
.site-theme .pvp-match-options .pvp-ranked-rules p {
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .site-theme .pvp-roster-rank {
    flex-basis: auto;
    width: 100%;
  }
}

/* The PVP lobby rank is an unframed summary beside the selected team. */
.menu-page.site-theme .pvp-roster-rank {
  flex-basis: 222px;
  padding: 0;
  border: 0;
  border-image: none;
  background: transparent;
}
.site-theme .pvp-roster-rank .tc-rank.panel {
  min-height: 72px;
  gap: 8px;
}
.site-theme .pvp-roster-rank .tc-rank-emblem {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
}
.site-theme .pvp-roster-rank .rank-icon {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
}
.site-theme .pvp-roster-rank .tc-rank-copy > span,
.site-theme .pvp-roster-rank .tc-rank-copy > small {
  font-size: 10px;
}
.site-theme .pvp-roster-rank .tc-rank-copy > strong {
  font-size: 19px;
}
.menu-page.site-theme .pvp-match-options .pvp-ranked-rules h3,
.menu-page.site-theme .pvp-match-options .pvp-panel-hd h3 {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.4px;
}
.pvp-rank-delta {
  display: inline-flex;
  align-items: center;
  color: #d9e8f5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.pvp-rank-delta.positive {
  color: #67e8a0;
}
.pvp-rank-delta.negative {
  color: #ff858d;
}
.pvp-result > .pvp-rank-delta {
  justify-content: center;
  min-width: 110px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  background: #06182d;
  font-size: 15px;
}
@media (max-width: 520px) {
  .menu-page.site-theme .pvp-roster-rank {
    flex-basis: auto;
  }
}

/* Compact PVP roster, with the PC action set apart from the six sprites. */
.menu-page.site-theme .pvp-roster-panel {
  padding: 8px 14px;
  gap: 12px;
}
.menu-page.site-theme .pvp-roster-rank {
  flex-basis: 202px;
}
.site-theme .pvp-roster-rank .tc-rank.panel,
.site-theme .pvp-roster-rank .tc-rank-emblem {
  min-height: 64px;
  height: 64px;
}
.site-theme .pvp-roster-rank .tc-rank-emblem {
  width: 64px;
  flex-basis: 64px;
}
.site-theme .pvp-roster-rank .rank-icon {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
}
.pvp-roster-copy h3 {
  margin-bottom: 3px;
}
.pvp-roster-copy p {
  margin-top: 3px;
  line-height: 1.3;
}
.pvp-roster-copy .pvp-item-clause-error {
  color: #ffc37b;
}
.menu-page.site-theme .pvp-roster-line > .btn {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 26px;
  margin-left: 8px;
  padding: 4px 7px;
  font-size: 8px;
}

/* The countdown stays at the viewport center while each digit shrinks for one second. */
.pvp-vs-page .pvp-countdown {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #fff2b6;
  font-size: clamp(72px, 12vw, 128px);
  font-weight: 900;
  transform: translate(-50%, -50%);
  text-shadow:
    0 0 20px #ffd973,
    0 0 45px #ffb74c,
    3px 5px 0 #06142d;
  pointer-events: none;
}
.pvp-vs-page:has(.pvp-countdown)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 29;
  background: #030d1bc0;
  pointer-events: none;
}
.pvp-vs-page .pvp-countdown-tick {
  animation: pvp-countdown-shrink 1s linear both;
}
@keyframes pvp-countdown-shrink {
  from {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0.48);
    opacity: 0.65;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-vs-page .pvp-countdown-tick {
    animation: none;
  }
}

/* Rounded PVP result window. */
.overlay.site-theme .pvp-result-modal {
  border-radius: 16px;
  overflow: hidden;
}
.overlay.site-theme .pvp-result-modal .modal-head {
  border-radius: 15px 15px 0 0;
}

/* Give each storage Pokémon enough room for its two compact actions. */
.site-theme .pc-storage .pc-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.site-theme .pc-storage .pc-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
}
.site-theme .pc-page .pc-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 -4px -4px;
  border-top: 1px solid #496b88;
}
.site-theme .pc-page .pc-card-actions .btn {
  width: 100%;
  min-height: 24px;
  padding: 2px 0;
  font-size: 7.2px;
  line-height: 1.15;
  border: 0;
  border-radius: 0;
  border-bottom: 0 !important;
  box-shadow: none;
  clip-path: none;
  transform: none;
}
.site-theme .pc-page .pc-card-actions .btn + .btn {
  border-left: 1px solid #496b88 !important;
}
.site-theme .pc-page .pc-card-actions .btn.ghost {
  --line: linear-gradient(#123654, #0b213d);
  --ink: #d9e7f5;
}
.site-theme .pc-page .pc-card-actions .btn.primary {
  --line: linear-gradient(#ffe48b, #eaba39);
  --ink: #09213c;
}
.site-theme .pc-page .pc-card-actions .btn.ghost:hover {
  --line: linear-gradient(#1b4a6c, #123654);
}
.site-theme .pc-page .pc-card-actions .btn.primary:hover {
  --line: #ffe598;
}
.site-theme .pc-page .pc-card-actions .btn::before,
.site-theme .pc-page .pc-card-actions .btn::after {
  display: none;
}
.site-theme .pc-page .pc-card-actions .btn:hover {
  box-shadow: none;
  transform: none;
}
.site-theme .pc-heading > .btn,
.site-theme .pc-roster footer .btn,
.site-theme .pc-filters > .btn,
.site-theme .pc-filter-flags > .btn,
.site-theme .pc-pagination .btn {
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
  line-height: 1.1;
}
.site-theme .pc-filters > .btn {
  min-height: 34px;
}
@media (max-width: 600px) {
  .site-theme .pc-storage .pc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* All PVP lobby section titles use the same type scale and gold as the site panels. */
.menu-page.site-theme .pvp-lobby .pvp-roster-copy h3,
.menu-page.site-theme .pvp-lobby .pvp-match-options h3,
.menu-page.site-theme .pvp-lobby .pvp-invites h3,
.menu-page.site-theme .pvp-lobby .pvp-history-panel h3 {
  margin: 0;
  color: var(--ui-gold);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.4px;
}

/* The PC conversion confirmation shows the exact server-provided payout. */
.site-theme .modal:has(.pc-sell-confirmation) {
  width: min(450px, calc(100vw - 28px));
  border-radius: 12px !important;
  overflow: hidden auto;
}
.site-theme .modal:has(.pc-sell-confirmation) .modal-head {
  padding: 11px 15px;
}
.site-theme .modal:has(.pc-sell-confirmation) .modal-head h2 {
  font-size: 19px;
}
.site-theme .modal:has(.pc-sell-confirmation) .modal-body {
  padding: 16px 18px 18px;
}
.site-theme .modal:has(.pc-sell-confirmation) .modal-head > .btn {
  min-width: 30px;
  min-height: 30px;
  padding: 3px 7px;
  font-size: 16px;
}
.site-theme .pc-sell-confirmation p {
  margin: 0 0 12px;
  line-height: 1.4;
}
.site-theme .pc-sell-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 7px 10px;
  border: 1px solid #967846;
  border-radius: 7px;
  background: #102b45;
  color: var(--ui-gold);
  font-size: 11px;
  font-weight: 800;
}
.site-theme .pc-sell-reward .money {
  font-size: 16px;
}
.site-theme .pc-sell-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.site-theme .pc-sell-actions .btn {
  min-width: 0;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
  line-height: 1.1;
}

.site-theme .pvp-availability-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 26px;
  padding: 4px 8px;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
}
.site-theme .pvp-availability-button.on {
  --lip-a: #8af4a6;
  --lip-b: #175e37;
  --face-a: #37a864;
  --face-b: #17653a;
  --ink: #f4fff6;
}
.site-theme .pvp-availability-button.off {
  --lip-a: #f6a0a0;
  --lip-b: #722335;
  --face-a: #c4525b;
  --face-b: #842c3b;
  --ink: #fff4f1;
}

/* Keep the three market categories in one compact, aligned row. */
.site-theme .trades-page .tr-kind {
  width: min(100%, 348px);
  max-width: 348px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}
.site-theme .trades-page .tr-kind button {
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.mk-pokemon {
  border-radius: 4px;
  cursor: help;
}
.mk-pokemon:focus-visible {
  outline: 2px solid var(--ui-gold);
  outline-offset: 3px;
}

/* Collection totals are compact counters, not full-size cards. */
.site-theme .pc-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.site-theme .pc-overview > div {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-left-width: 2px;
}
.site-theme .pc-overview strong {
  font-size: 17px;
  line-height: 1;
}
.site-theme .pc-overview span {
  font-size: 9px;
  letter-spacing: 0.3px;
}

/* The challenge switch belongs in the lobby header's upper-right corner. */
.menu-page.site-theme .pvp-lobby .pvp-hd {
  align-items: flex-start;
}
.menu-page.site-theme .pvp-lobby .pvp-hd .pvp-note {
  margin: 7px 0 0;
}
.site-theme .pvp-lobby .pvp-availability-button {
  flex: none;
}
@media (max-width: 620px) {
  .menu-page.site-theme .pvp-lobby .pvp-hd {
    display: flex;
  }
}

/* The permanent-Pokémon market has its own compact layout inside the collection window. */
.site-theme .pokemon-market-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  gap: 14px;
}
.pokemon-market-head h2 {
  margin: 2px 0 6px;
  color: var(--ui-gold);
  font-size: 22px;
}
.pokemon-market-head p {
  max-width: 66ch;
  margin: 0;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.4;
}
.site-theme .pokemon-market-page .tr-kind {
  width: min(100%, 348px);
  max-width: 348px;
  margin: 0 0 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-theme .pokemon-market-page .tr-kind button {
  min-width: 0;
  min-height: 30px;
}
.pokemon-market-warning {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #b8646d;
  border-radius: 8px;
  color: #ffc9c4;
  font-size: 12px;
  line-height: 1.4;
}
.site-theme .pokemon-market-create,
.site-theme .pokemon-market-results {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: linear-gradient(160deg, #102e4b, #071c35);
}
.site-theme .pokemon-market-create {
  display: grid;
  gap: 11px;
}
.pokemon-market-create h3,
.pokemon-market-results h3 {
  margin: 0;
  color: var(--ui-gold);
  font-size: 15px;
}
.pokemon-market-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}
.site-theme .pokemon-market-page input,
.site-theme .pokemon-market-page select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--ui-line);
  border-radius: 3px;
  background: #0b2540;
  color: var(--ui-text);
  font-size: 12px;
}
.site-theme .pokemon-market-page input::placeholder {
  color: #8eb0cf;
}
.pokemon-market-picker,
.pokemon-market-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  min-width: 0;
}
.pokemon-market-picker label,
.pokemon-market-offer label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--ui-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.7px;
}
.pokemon-market-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}
.pokemon-market-pager span {
  flex: none;
  color: var(--ui-text);
  font-size: 11px;
  font-weight: 800;
}
.site-theme .pokemon-market-page .btn {
  min-width: 0;
  min-height: 32px;
  height: 32px;
  padding: 5px 10px;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.3px;
}
.pokemon-market-create-actions {
  display: flex;
  justify-content: flex-end;
}
.site-theme .pokemon-market-results {
  display: grid;
  gap: 12px;
}
.pokemon-market-results-head {
  display: grid;
  gap: 9px;
}
.pokemon-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0;
}
.pokemon-market-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: #0a223c;
}
.pokemon-market-mon {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  cursor: help;
}
.pokemon-market-mon img {
  width: 58px;
  height: 58px;
  flex: none;
  object-fit: contain;
  image-rendering: pixelated;
}
.pokemon-market-mon > div {
  min-width: 0;
}
.pokemon-market-mon h4 {
  margin: 0 0 3px;
  color: var(--ui-text);
  font-size: 14px;
}
.pokemon-market-mon small {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ui-muted);
  font-size: 10px;
}
.pokemon-market-price {
  color: var(--ui-gold);
  font-size: 13px;
}
.site-theme .pokemon-market-card .btn {
  justify-self: start;
}
.pokemon-market-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px;
  color: var(--ui-muted);
  text-align: center;
}
@media (max-width: 650px) {
  .pokemon-market-picker {
    grid-template-columns: minmax(0, 1fr);
  }
  .pokemon-market-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 420px) {
  .site-theme .pokemon-market-create,
  .site-theme .pokemon-market-results {
    padding: 10px;
  }
  .pokemon-market-offer {
    grid-template-columns: minmax(0, 1fr);
  }
  .pokemon-market-search {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compact market rows keep the Pokémon art visible; complete details stay in the hover card. */
.site-theme .mk-card {
  gap: 7px;
  padding: 10px;
}
.site-theme .mk-pokemon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--ui-line);
  background: radial-gradient(circle, #245a8c, #0a2140 75%);
}
.site-theme .mk-pokemon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pokemon-market-page) .main {
  max-width: 660px;
}
.site-theme .pokemon-market-picker {
  grid-template-columns: minmax(0, 1fr) auto;
}
.pokemon-market-field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ui-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.7px;
}
.pokemon-market-mine-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}
.site-theme .pokemon-market-picker .pokemon-market-mine-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 50px;
  padding: 4px 7px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: #0a223c;
  color: var(--ui-text);
  cursor: pointer;
}
.pokemon-market-mine-row:has(input:checked) {
  border-color: var(--ui-gold);
  background: #1b3348;
}
.site-theme .pokemon-market-mine-row input[type='radio'] {
  width: 13px;
  height: 13px;
  flex: none;
  padding: 0;
  accent-color: var(--ui-gold);
}
.pokemon-market-mine-row img {
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: contain;
  image-rendering: pixelated;
}
.pokemon-market-mine-row strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-theme .pokemon-market-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.site-theme .pokemon-market-card {
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  min-height: 62px;
  padding: 6px 9px;
}
.site-theme .pokemon-market-mon img {
  width: 46px;
  height: 46px;
}
.pokemon-market-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pokemon-market-species {
  overflow: hidden;
  color: var(--ui-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-theme .pokemon-market-card > .pokemon-market-price {
  align-self: center;
  font-size: 11px;
}
.pokemon-market-summary small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-theme .pokemon-market-card .btn {
  justify-self: end;
}
.site-theme .pokemon-market-card > .btn {
  min-height: 22px;
  height: 22px;
  padding: 1px 5px;
  font-size: 8px;
  line-height: 1.1;
}
.site-theme .pc-overview > div {
  border-radius: 6px;
}
.site-theme .pc-storage .pc-grid {
  padding: 0;
  border: 0;
  background: none;
}
.site-theme .pc-roster footer > .row {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pc-skin-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-line);
}
.pc-skin-editor h4 {
  margin: 0 0 8px;
  color: var(--ui-gold);
  font-size: 11px;
}
.pc-skin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.pc-skin-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: #0a223c;
}
.pc-skin-row img {
  width: 38px;
  height: 38px;
  grid-row: span 2;
  object-fit: contain;
}
.pc-skin-row strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-skin-row select {
  min-width: 0;
  width: 100%;
  font-size: 10px;
}
@media (max-width: 650px) {
  .site-theme .pokemon-market-picker,
  .pc-skin-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pokemon-market-mine-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the market aligned with the shared menu frame. */
.site-theme.menu-page:has(.pokemon-market-page) > .menu-top,
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pokemon-market-page) > .main {
  max-width: 660px;
}
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.pokemon-market-page) > .main {
  flex: 0 1 auto;
  max-height: calc(100dvh - 90px);
  padding: 14px;
}
.site-theme .pokemon-market-page {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding-bottom: 0;
}
.pokemon-market-head {
  min-width: 0;
}
.site-theme .pokemon-market-page .tr-kind {
  grid-column: 2;
  align-self: center;
  margin: 0;
}
.site-theme .pokemon-market-page > .pokemon-market-warning,
.site-theme .pokemon-market-page > .pokemon-market-create,
.site-theme .pokemon-market-page > .pokemon-market-results {
  grid-column: 1 / -1;
}
.site-theme .pokemon-market-create,
.site-theme .pokemon-market-results {
  gap: 8px;
  padding: 11px 12px;
}
.site-theme .pokemon-market-create {
  grid-template-columns: minmax(0, 220px) auto;
}
.pokemon-market-create > h3,
.pokemon-market-create > .pokemon-market-search,
.pokemon-market-create > .pokemon-market-picker {
  grid-column: 1 / -1;
}
.site-theme .pokemon-market-create > .pokemon-market-offer {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
}
.site-theme .pokemon-market-create > .pokemon-market-create-actions {
  align-self: end;
  justify-content: flex-start;
}
.site-theme .pokemon-market-create > .pokemon-market-search {
  width: min(100%, 325px);
}
.site-theme .pokemon-market-picker {
  display: block;
  padding-top: 2px;
}
.pokemon-market-picker > .pokemon-market-pager {
  justify-content: flex-end;
  margin-top: 7px;
}
.pokemon-market-mine-list {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  max-height: 202px;
  gap: 5px;
}
.site-theme .pokemon-market-picker .pokemon-market-mine-row {
  min-height: 42px;
  padding: 3px 5px;
}
.pokemon-market-mine-row img {
  width: 34px;
  height: 34px;
}
.pokemon-market-create > .pokemon-market-create-actions {
  grid-column: 2;
}
.pokemon-market-results-head {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.pokemon-market-results-head .pokemon-market-search {
  justify-self: end;
  width: min(100%, 245px);
}
.site-theme .pokemon-market-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.site-theme .pokemon-market-card {
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  gap: 6px;
  min-height: 54px;
  padding: 5px 7px;
}
.site-theme .pokemon-market-mon img {
  width: 38px;
  height: 38px;
}
@media (max-width: 900px) {
  .site-theme .pokemon-market-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-theme .pokemon-market-page .tr-kind {
    grid-column: 1;
  }
}
@media (max-width: 760px) {
  .site-theme .pokemon-market-grid,
  .pokemon-market-results-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .pokemon-market-results-head .pokemon-market-search {
    justify-self: stretch;
    width: 100%;
  }
}
@media (max-width: 520px) {
  .site-theme .pokemon-market-create {
    grid-template-columns: minmax(0, 1fr);
  }
  .pokemon-market-create > .pokemon-market-create-actions {
    grid-column: 1;
  }
  .pokemon-market-picker > .pokemon-market-pager {
    justify-content: center;
  }
  .pokemon-market-mine-list {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}

/* Shiny and skin barter use the compact market layout while keeping offer controls visible. */
.site-theme.menu-page:not(:has(.starter-grid)):not(:has(.outcome)):has(.barter-market-page) .main {
  max-width: 660px;
}
.site-theme .barter-market-page {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding-bottom: 0;
}
.barter-market-page .tr-head {
  min-width: 0;
  margin: 0;
  padding: 0;
}
.site-theme .barter-market-page .tr-kind {
  grid-column: 2;
  align-self: center;
  margin: 0;
}
.barter-market-page > :not(.tr-head):not(.tr-kind) {
  grid-column: 1 / -1;
}
.barter-market-page .tr-kind-note {
  margin: 0;
}
.barter-market-page .trade-rules {
  gap: 6px;
}
.barter-market-page .trade-rules .tr-rule {
  min-width: 0;
  padding: 5px 8px;
}
.barter-market-page .tr-rule b {
  font-size: 14px;
}
.barter-market-page .tr-tabs {
  gap: 6px;
}
.site-theme .barter-market-page .btn.tr-tab {
  min-height: 32px;
  height: 32px;
  font-size: 10px;
}
.barter-market-page .mk-bar {
  grid-template-columns: minmax(0, 240px) auto auto;
  justify-content: start;
  align-items: center;
}
.barter-market-page .mk-bar input {
  height: 32px;
  font-size: 12px;
}
.site-theme .barter-market-page .mk-bar .btn {
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 10px;
}
.barter-market-page .mk-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.barter-market-page .mk-offer .trade-grid {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  max-height: 202px;
}
.site-theme .barter-market-page .mk-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
  padding: 8px;
}
.site-theme .barter-market-page .mk-card.shiny {
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr) auto;
}
.site-theme .barter-market-page .mk-card.skin {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.barter-market-page .mk-card > header,
.barter-market-page .mk-card > .mk-offer {
  grid-column: 1 / -1;
}
.site-theme .barter-market-page .mk-card.shiny > .mk-pokemon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 66px;
  height: auto;
  border: 0;
  background: none;
  text-align: center;
  justify-self: center;
}
.site-theme .barter-market-page .mk-card.shiny > .mk-pokemon img {
  width: 56px;
  height: 56px;
}
.barter-market-page .mk-card.shiny > .mk-pokemon strong {
  max-width: 66px;
  overflow: hidden;
  color: var(--ui-text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barter-market-page .mk-card.shiny > .mk-label {
  grid-column: 2;
  text-align: center;
  line-height: 1.3;
}
.barter-market-page .mk-wanted {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.barter-market-page .mk-wanted .want {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 42px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.barter-market-page .mk-wanted .want img {
  width: 56px;
  height: 56px;
}
.barter-market-page .mk-wanted .want b {
  max-width: 82px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barter-market-page .mk-wanted .want-open {
  text-align: center;
}
.barter-market-page .mk-card > .mk-wants {
  align-self: stretch;
  align-content: center;
  min-width: 0;
  padding: 5px 7px;
}
.barter-market-page .mk-card > .mk-pokemon,
.barter-market-page .mk-card > .mon-card {
  width: 52px;
  min-width: 0;
}
.barter-market-page .mk-card > .mon-card .mc-info {
  display: none;
}
.barter-market-page .mk-card > .mon-card.skin {
  grid-column: 1;
  width: auto;
}
.barter-market-page .mk-card > .mon-card.skin .mc-info {
  display: grid;
}
.barter-market-page .mk-card > .mon-card.skin + .mk-wants {
  grid-column: 2;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.barter-market-page .mk-card.skin > .mk-wants > div {
  justify-content: center;
}
.barter-market-page .mk-card.skin .tr-tag.skin {
  display: none;
}
.barter-market-page .mk-card > .mon-card .mc-art,
.site-theme .barter-market-page .mk-card > .mk-pokemon {
  width: 60px;
  height: 60px;
}
.barter-market-page .mk-card > .mon-card .mc-art img,
.site-theme .barter-market-page .mk-card > .mk-pokemon img {
  width: 56px;
  height: 56px;
}
.barter-market-page .mk-card footer {
  grid-column: 3;
  margin: 0;
  margin-right: 6px;
}
.barter-market-page .mk-card.shiny footer {
  grid-column: 4;
}
.site-theme .barter-market-page .mk-card footer .btn {
  width: auto;
  min-height: 30px;
  height: 30px;
  padding: 0 7px;
  font-size: 9px;
}
@media (max-width: 900px) {
  .site-theme .barter-market-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-theme .barter-market-page .tr-kind {
    grid-column: 1;
  }
}
@media (max-width: 650px) {
  .barter-market-page .mk-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .barter-market-page .mk-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .barter-market-page .mk-bar .tr-post {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 420px) {
  .site-theme .barter-market-page .mk-card.shiny {
    grid-template-columns: 58px 78px minmax(0, 1fr);
  }
  .barter-market-page .mk-card.shiny footer {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* Market controls share a single frame, with dividers instead of gaps. */
.site-theme .trades-page .tr-kind,
.site-theme .barter-market-page .trade-rules,
.site-theme .barter-market-page .tr-tabs,
.site-theme .barter-market-page .post-panel .seg {
  gap: 0;
  overflow: hidden;
  border: 1px solid #496b88;
  border-radius: 3px;
}
.site-theme .trades-page .tr-kind {
  width: min(100%, 348px);
}
.site-theme .trades-page .tr-kind button,
.site-theme .barter-market-page .post-panel .seg button {
  min-width: 0;
  border: 0 !important;
  border-right: 1px solid #496b88 !important;
  border-radius: 0 !important;
  box-shadow: none;
}
.site-theme .trades-page .tr-kind button:last-child,
.site-theme .barter-market-page .post-panel .seg button:last-child {
  border-right: 0 !important;
}
.site-theme .trades-page .tr-kind button.on,
.site-theme .barter-market-page .post-panel .seg button.on {
  background: #29445b;
  color: #ffe08a;
  box-shadow: inset 0 0 0 1px #ffda76;
}
.site-theme .barter-market-page .trade-rules .tr-rule {
  border: 0;
  border-right: 1px solid #496b88;
  border-radius: 0 !important;
}
.site-theme .barter-market-page .trade-rules .tr-rule:last-child {
  border-right: 0;
}
.site-theme .barter-market-page .btn.tr-tab {
  --line: linear-gradient(#244b70, #0c2846);
  --ink: #d9e7f5;
  min-width: 0;
  border-bottom: 0 !important;
  border-right: 1px solid #496b88 !important;
  border-radius: 0 !important;
  clip-path: none;
  text-shadow: none !important;
}
.site-theme .barter-market-page .btn.tr-tab:last-child {
  border-right: 0 !important;
}
.site-theme .barter-market-page .btn.tr-tab.on {
  --line: linear-gradient(#ffe48b, #eaba39);
  --ink: #09213c;
}
.site-theme .barter-market-page .btn.tr-tab::before,
.site-theme .barter-market-page .btn.tr-tab::after {
  display: none;
}
.site-theme .barter-market-page .btn.tr-tab:hover {
  transform: none;
}
@media (max-width: 640px) {
  .site-theme .barter-market-page .trade-rules .tr-rule:nth-child(2) {
    border-right: 0;
  }
  .site-theme .barter-market-page .trade-rules .tr-rule:nth-child(-n + 2) {
    border-bottom: 1px solid #496b88;
  }
}
@media (max-width: 760px) {
  .site-theme .barter-market-page .btn.tr-tab:nth-child(2) {
    border-right: 0 !important;
  }
  .site-theme .barter-market-page .btn.tr-tab:nth-child(-n + 2) {
    border-bottom: 1px solid #496b88 !important;
  }
}

/* Completed trades use the same sprite/name presentation as current listings. */
.site-theme .barter-market-page .trade-row.history {
  gap: 5px 8px;
  padding: 8px;
}
.barter-market-page .trade-row.history .tr-history-swap {
  grid-area: swap;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}
.barter-market-page .tr-history-mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
.barter-market-page .tr-history-mon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}
.barter-market-page .tr-history-mon strong,
.barter-market-page .tr-history-mon small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barter-market-page .tr-history-mon strong {
  font-size: 10px;
}
.barter-market-page .tr-history-mon small {
  color: var(--ui-muted);
  font-size: 8px;
}
.barter-market-page .tr-history-label {
  color: var(--ui-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-align: center;
}

.pokemon-market-price-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pokemon-market-price-label .money-icon {
  width: 14px;
  height: 14px;
}

/* Keep the invite action inside the username field at every viewport size. */
.pvp-lobby .pvp-invite-form {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 350px);
}
.pvp-lobby .pvp-invite-entry {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #54799f;
  border-radius: 6px;
  background: #081d38;
}
.pvp-lobby .pvp-invite-entry:focus-within {
  outline: 2px solid #ffdf76;
  outline-offset: 1px;
}
.pvp-lobby .pvp-invite-entry input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  border: 0;
  background: none;
}
.pvp-lobby .pvp-invite-entry input:focus-visible {
  outline: none;
}
.pvp-lobby .pvp-invite-entry .btn {
  flex: 0 0 auto;
  min-height: 26px;
  height: 26px;
  margin: 3px;
  padding: 0 7px;
  font-size: 9px;
}

/* Compact collection header and joined collection filters. */
.site-theme .skins-page .sk-hero {
  padding: 8px 12px;
  gap: 10px;
}
.site-theme .skins-page .sk-stars {
  z-index: 0;
}
.site-theme .skins-page .sk-title,
.site-theme .skins-page .sk-count {
  z-index: 1;
}
.site-theme .skins-page .sk-title {
  gap: 1px;
}
.site-theme .skins-page .sk-title .eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
}
.site-theme .skins-page .sk-title h2 {
  font-size: 22px;
}
.site-theme .skins-page .sk-title p {
  font-size: 11px;
}
.site-theme .skins-page .sk-count {
  min-width: 110px;
  gap: 2px;
}
.site-theme .skins-page .sk-count b {
  font-size: 22px;
}
.site-theme .skins-page .sk-bar .dex-chips {
  gap: 0;
  overflow: hidden;
  border: 1px solid #496b88;
  border-radius: 3px;
}
.site-theme .skins-page .sk-bar .dex-chip {
  flex: 1;
  min-width: 58px;
  min-height: 29px;
  padding: 6px 12px;
  border: 0 !important;
  border-right: 1px solid #496b88 !important;
  border-radius: 0 !important;
  clip-path: none;
  background: #102e50 !important;
  box-shadow: none !important;
  color: #d6e7f8 !important;
  transform: none;
}
.site-theme .skins-page .sk-bar .dex-chip:last-child {
  border-right: 0 !important;
}
.site-theme .skins-page .sk-bar .dex-chip::before,
.site-theme .skins-page .sk-bar .dex-chip::after {
  display: none;
}
.site-theme .skins-page .sk-bar .dex-chip.active {
  background: linear-gradient(#ffe9a6, #dba22a) !important;
  color: #102239 !important;
  text-shadow: none !important;
}
.site-theme .skins-page .sk-bar .dex-chip:focus-visible {
  outline: 2px solid #fff2bb;
  outline-offset: -3px;
}

/* Contiguous collection controls and a compact Shiny Dex summary. */
.site-theme .dex-page .dex-regions,
.site-theme .dex-page .dex-tools .dex-chips {
  gap: 0;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #496b88;
  border-radius: 3px;
}
.site-theme .dex-page .dex-region,
.site-theme .dex-page .dex-tools .dex-chips .dex-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 29px;
  padding: 6px 9px;
  border: 0 !important;
  border-right: 1px solid #496b88 !important;
  border-radius: 0 !important;
  clip-path: none;
  background: #102e50 !important;
  box-shadow: none !important;
  color: #d6e7f8 !important;
  transform: none;
}
.site-theme .dex-page .dex-region:last-child,
.site-theme .dex-page .dex-tools .dex-chips .dex-chip:last-child {
  border-right: 0 !important;
}
.site-theme .dex-page .dex-region::before,
.site-theme .dex-page .dex-region::after,
.site-theme .dex-page .dex-tools .dex-chips .dex-chip::before,
.site-theme .dex-page .dex-tools .dex-chips .dex-chip::after {
  display: none;
}
.site-theme .dex-page .dex-region.active,
.site-theme .dex-page .dex-tools .dex-chips .dex-chip.active {
  background: linear-gradient(#ffe9a6, #dba22a) !important;
  color: #102239 !important;
  text-shadow: none !important;
}
.site-theme .dex-page.is-shiny .dex-region.active {
  background: linear-gradient(#ffd1f2, #ed8dd5) !important;
}
.site-theme .dex-page .dex-region:focus-visible,
.site-theme .dex-page .dex-tools .dex-chips .dex-chip:focus-visible {
  outline: 2px solid #fff2bb;
  outline-offset: -3px;
}
.site-theme .dex-page.is-shiny .dex-head {
  padding: 9px 14px;
  gap: 6px 16px;
  margin-bottom: 0;
}
.site-theme .dex-page.is-shiny .dex-head h2 {
  font-size: 22px;
  line-height: 1.1;
}
.site-theme .dex-page.is-shiny .dex-progress {
  gap: 3px;
  font-size: 11px;
}
.site-theme .dex-page.is-shiny .dex-bar {
  height: 9px;
}

/* The player's league frame surrounds the whole rank and team panel. */
.menu-page.site-theme .pvp-roster-panel.has-league-frame {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 27px 24px;
}
.pvp-roster-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: -1;
}

/* Align each action beneath its corresponding encounter reel. */
button.ui-close {
  clip-path: none !important;
  border: 1px solid #688cae !important;
  border-radius: 6px !important;
  background: linear-gradient(#254c70, #112f4b) !important;
  color: #e6f3ff !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 #ffffff24 !important;
}
button.ui-close::before,
button.ui-close::after {
  display: none !important;
}
button.ui-close:hover:not(:disabled) {
  background: linear-gradient(#315d83, #1a3c5b) !important;
}
button.ui-close:focus-visible {
  outline: 2px solid #ffd35a;
  outline-offset: 2px;
}
.compact-shell .game-topbar,
.menu-page .menu-top {
  overflow: visible;
  z-index: 50;
}
.menu-page > .menu-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.collection-player {
  min-width: 0;
}
.collection-player .music-player.bar {
  width: min(100%, 360px);
  min-width: 0;
}
.collection-player .mp-info {
  flex: 1;
  max-width: none;
  min-width: 0;
}
.collection-player .mp-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.15;
  font-size: 11px;
}
@media (max-width: 760px) {
  .menu-page > .menu-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
  }
  .menu-page > .menu-top .collection-player {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .menu-page > .menu-top .menu-header-actions {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}
.run-menu-dropdown {
  position: relative;
}
.run-menu-dropdown > .btn,
.run-menu-panel > .btn,
.run-menu-language .lang-btn {
  clip-path: none !important;
  border: 1px solid #688cae !important;
  border-radius: 6px !important;
  background: linear-gradient(#254c70, #112f4b) !important;
  box-shadow: inset 0 1px 0 #ffffff24 !important;
}
.run-menu-dropdown > .btn::before,
.run-menu-dropdown > .btn::after,
.run-menu-panel > .btn::before,
.run-menu-panel > .btn::after,
.run-menu-language .lang-btn::before,
.run-menu-language .lang-btn::after {
  display: none;
}
.run-menu-dropdown > .btn:focus-visible,
.run-menu-panel > .btn:focus-visible,
.run-menu-language .lang-btn:focus-visible {
  outline: 2px solid #ffd35a;
  outline-offset: 3px;
}
.run-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: 200px;
  padding: 10px;
  border: 1px solid #688cae;
  border-radius: 8px;
  background: linear-gradient(#123454, #071b33);
  box-shadow: 0 8px 20px #0008;
}
.run-menu-panel[hidden] {
  display: none;
}
.run-menu-panel > .btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  text-align: left;
}
.run-menu-language {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #56758f;
  font-size: 12px;
  color: #d9eafa;
}
.run-menu-language .lang-dd {
  display: block;
  width: 100%;
  min-width: 0;
}
.run-menu-language .lang-btn {
  width: 100%;
  min-width: 0;
}
.run-menu-language .lang-code {
  display: inline;
}
.run-menu-language .lang-menu {
  position: static;
  inset: auto;
  transform: none;
  margin: 5px 0 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
}
.run-menu-language .lang-menu::before {
  display: none;
}
.run-menu-language .lang-opt {
  clip-path: none;
  border-radius: 4px;
}
.overlay.site-theme .abandon-confirm-modal {
  width: min(340px, calc(100vw - 32px));
  border-radius: 10px !important;
  overflow: hidden;
}
.overlay.site-theme .abandon-confirm-modal .modal-head {
  padding: 12px 14px;
}
.overlay.site-theme .abandon-confirm-modal .modal-head h2 {
  margin-top: 4px !important;
  font-size: 18px;
}
.overlay.site-theme .abandon-confirm-modal .modal-head > .btn {
  width: 28px;
  min-height: 28px;
  padding: 2px;
}
.overlay.site-theme .abandon-confirm-modal .modal-body {
  padding: 10px 14px 14px;
}
.abandon-confirm-modal .abandon-sheet {
  padding: 0;
  gap: 8px;
}
.abandon-dialog-flag {
  display: block;
  width: 76px;
  height: 66px;
  background: url("/static/game/ui/abandon-flag.5f38ac63192d.gif") -22px -28px / 96px 96px no-repeat;
  image-rendering: pixelated;
}
.abandon-confirm-modal .abandon-sheet h3 {
  margin: 0;
  font-size: 14px;
}
.abandon-confirm-modal .abandon-sheet p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.abandon-confirm-modal .abandon-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.abandon-confirm-modal .abandon-actions > .btn {
  min-height: 32px;
  padding: 6px;
  font-size: 11px;
  clip-path: none !important;
  border: 1px solid var(--lip-a) !important;
  border-radius: 6px !important;
  background: linear-gradient(var(--face-a), var(--face-b)) !important;
}
.abandon-confirm-modal .abandon-actions > .btn::before,
.abandon-confirm-modal .abandon-actions > .btn::after {
  display: none;
}
.compact-shell .machine-controls {
  grid-template-columns: 156px minmax(0, 1fr) 156px;
  padding-inline: max(0px, calc(16.6667% - 56px));
  gap: 4px;
  align-items: center;
  animation: none !important;
}
.compact-shell .encounter-spin {
  justify-self: center;
  width: 100%;
  gap: 4px;
  font-size: 15px;
}
.compact-shell .encounter-center {
  --lip-a: #66bc89;
  --lip-b: #0b402c;
  --face-a: #208553;
  --face-b: #0c5036;
  --ink: #f5fff7;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
  min-width: 0;
  width: min(156px, 100%);
  height: 48px;
  padding: 4px 5px;
  text-align: left;
}
.compact-shell .encounter-center:hover:not(:disabled),
.compact-shell .encounter-center:focus-visible {
  --lip-a: #8fdda8;
  --lip-b: #145c3d;
  --face-a: #299961;
  --face-b: #136345;
}
.compact-shell .encounter-center:disabled {
  opacity: 0.78;
  cursor: default;
}
.compact-shell .encounter-center-icon {
  flex: none;
  display: block;
  width: 36px;
  height: 36px;
  margin: 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 3px #fff49b) drop-shadow(0 0 5px #79ffd4);
}
.ultra-revive-art {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 36px;
  height: 36px;
}
.ultra-revive-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff29c80, #6fffc933 45%, transparent 72%);
}
.revive-spark {
  position: absolute;
  color: #fff4a1;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 4px #fff8ca;
  animation: ultra-revive-spark 2.4s ease-in-out infinite;
  pointer-events: none;
}
.revive-spark.spark-one {
  top: 1px;
  right: 0;
}
.revive-spark.spark-two {
  bottom: 1px;
  left: 0;
  animation-delay: -0.8s;
}
.revive-spark.spark-three {
  top: 9px;
  left: 1px;
  font-size: 6px;
  color: #aaffec;
  animation-delay: -1.6s;
}
@keyframes ultra-revive-spark {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.65);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.encounter-center:disabled .revive-spark {
  animation: none;
  opacity: 0.4;
}
.compact-shell .encounter-center-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: -4px;
  padding-right: 4px;
  line-height: 1.1;
}
.compact-shell .encounter-center strong {
  font-size: 10px;
  color: #fff1b8;
  white-space: nowrap;
}
.compact-shell .encounter-center small {
  margin-top: 0;
  text-transform: none;
  color: #e2ffea;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.15;
}
.compact-shell .encounter-abandon {
  display: flex;
  justify-self: center;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: min(156px, 100%);
  height: 48px;
  padding: 4px 5px;
  line-height: 1.15;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
}
.compact-shell .encounter-abandon-flag {
  display: block;
  flex: none;
  width: 43px;
  height: 37px;
  transform: translateY(2px);
  background: url("/static/game/ui/abandon-flag-tileset.cbd98c75167f.png") 0 -7.2px / 172.8px 86.4px no-repeat;
  image-rendering: pixelated;
}
.compact-shell .encounter-abandon-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
}
.compact-shell .encounter-abandon small {
  display: block;
  margin-top: 3px;
  color: #ffd6d2;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .compact-shell .machine-controls {
    grid-template-columns: 134px minmax(0, 1fr) 134px;
    padding-inline: 4px;
    gap: 4px;
  }
  .compact-shell .encounter-spin {
    width: 100%;
  }
  .compact-shell .encounter-spin,
  .compact-shell .encounter-spin:disabled {
    height: 44px;
    padding: 0 2px;
    gap: 2px;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1;
  }
  .compact-shell .encounter-spin > span[aria-hidden] {
    display: none;
  }
  .compact-shell .encounter-spin small {
    margin-top: 1px;
    font-size: 7px;
    line-height: 1.1;
    letter-spacing: 0;
  }
  .compact-shell .encounter-center-icon {
    width: 32px;
    height: 32px;
  }
  .ultra-revive-art {
    width: 32px;
    height: 32px;
  }
  .compact-shell .encounter-center {
    height: 44px;
    gap: 2px;
    padding: 3px 5px;
  }
  .compact-shell .encounter-center strong {
    font-size: 9px;
  }
  .compact-shell .encounter-center small {
    font-size: 7px;
  }
  .compact-shell .encounter-abandon {
    height: 44px;
    font-size: 9px;
  }
}
@media (max-height: 560px) and (min-width: 600px) {
  .compact-shell .machine-controls {
    display: grid;
    grid-template-columns: 156px minmax(0, 1fr) 156px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .revive-spark {
    animation: none;
  }
  .abandon-dialog-flag {
    background: url("/static/game/ui/abandon-flag-tileset.cbd98c75167f.png") 0 -12px / 304px 152px no-repeat;
  }
  .compact-shell .encounter-abandon:is(:hover, :focus-visible) .encounter-abandon-flag {
    background: url("/static/game/ui/abandon-flag-tileset.cbd98c75167f.png") 0 -7.2px / 172.8px 86.4px no-repeat;
  }
}

/* Encounter details reuse the market Pokémon sheet alongside type matchups. */
#poke-tip.show:has(.encounter-info) {
  display: grid;
  grid-template-columns: minmax(0, 304px) minmax(0, 218px);
  width: min(522px, calc(100vw - 16px));
}
#poke-tip .encounter-info {
  min-width: 0;
  border-right: 1px solid #365775;
}
#poke-tip .encounter-info > .tip-archetype,
#poke-tip .encounter-info > .tip-allies,
#poke-tip .encounter-info > footer {
  margin: 0 12px 10px;
  font-size: 10px;
}
#poke-tip .encounter-info > footer {
  color: #ffe08a;
  text-align: center;
}
#poke-tip:has(.encounter-info) .tip-charts {
  display: block;
  min-width: 0;
  padding: 12px;
}
#poke-tip:has(.encounter-info) .tip-charts li {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 4px;
}
@media (max-width: 560px) {
  #poke-tip.show:has(.encounter-info) {
    grid-template-columns: minmax(0, 1fr);
    width: min(340px, calc(100vw - 16px));
  }
  #poke-tip .encounter-info {
    border-right: 0;
    border-bottom: 1px solid #365775;
  }
}

/* Match the encounter summary to the dark type-matchup panel. */
#poke-tip.show:has(.encounter-info) {
  border-radius: 12px;
  border: 1px solid #d3b565;
  background: #0d1e3d;
  overflow: auto;
}
#poke-tip .encounter-info {
  background: #0d1e3d;
}
#poke-tip .encounter-info .pc-info header {
  border-color: #294563;
}
#poke-tip .encounter-info .pc-info .partner-moves {
  border-color: #294563;
}
#poke-tip .encounter-info .pc-info .pm-title {
  color: #ffe08a;
  font-size: 10px;
  letter-spacing: 1.4px;
}
#poke-tip .encounter-info .pc-info .pm-row,
#poke-tip .encounter-info .pc-info .detail-cell {
  border-color: #345473;
  border-radius: 7px !important;
  background: #102947;
}
#poke-tip .encounter-info .pc-info .detail-cell {
  padding: 8px 6px;
}
#poke-tip .encounter-info > .tip-archetype {
  border: 1px solid #294563;
  border-radius: 7px;
  background: #102947;
  padding: 8px;
}
#poke-tip .encounter-info > .tip-archetype strong {
  color: #ffe08a;
  letter-spacing: 1px;
}

/* Keep test controls outside the viewport-sized game layout. */
.journey-lab-tail.compact-shell {
  position: relative;
  z-index: 1;
  width: calc(100% - 28px);
  max-width: 720px;
  margin: 16px auto 24px;
  padding: 0;
}
.journey-lab-tail.compact-shell::before,
.journey-lab-tail.compact-shell::after {
  display: none;
}
.journey-lab-tail .lab {
  margin: 0;
}

html:has(.journey-lab-tail) {
  overflow-y: auto;
}
body:has(.journey-lab-tail) {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}