/* LOJA (25/09/2026): câmbio de ouro por Shiny Gems e pacotes da Pokédex e da Shiny Dex, com a abertura no estilo CS2. */

/* ------------------------------------------------------------ cartão da home e Trainer Card */
.home-menu-card.shop-card {
  --accent: #8ff0c0;
  --lip-a: #b7ffd9;
  --lip-b: #0e4a3a;
  --face-a: #1b6456;
  --face-b: #0e3437;
}
/* Trainer Card (revisão 25/09/2026): o ID foi para a faixa do título e as três estatísticas (Shiny Gems, Ouro e Conta criada)
   ficam numa linha só, com a base alinhada à base da foto, como antes do ouro. */
.tc-head-side {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tc-id {
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffd9e0;
  white-space: nowrap;
}
.tc-id b {
  color: #fff;
  letter-spacing: 1.4px;
}
.tc-main {
  align-content: space-between;
  min-height: 100%;
}
.tc-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tc-stat:first-child b {
  white-space: nowrap;
}
.tc-gold b {
  color: #ffe28a;
}
.tc-coin {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
@media (max-width: 560px) {
  /* no celular a foto fica ao lado do nome e do XP, e as três estatísticas numa linha inteira logo abaixo */
  .tc-main {
    display: contents;
  }
  .tc-side {
    grid-row: 1 / span 2;
  }
  .tc-name-row,
  .tc-main > .ab-xp {
    grid-column: 2;
    align-self: center;
  }
  .tc-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tc-stat.tc-gems {
    grid-column: auto;
  }
  .tc-stat b {
    font-size: var(--text-md);
  }
}
@media (max-width: 380px) {
  /* telas bem estreitas: o ID e o selo descem para uma segunda linha em vez de apertar o título */
  .tc-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ------------------------------------------------------------ página */
.shop-page {
  display: grid;
  gap: 12px;
}
.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: #081d38;
  border: 2px solid #2f6395;
}
.shop-tab {
  flex: 1 1 150px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #54799f;
  background: #102c4f;
  color: #d8eaff;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.07em;
  cursor: pointer;
}
.shop-tab.active {
  border-color: #ffe082;
  background: linear-gradient(180deg, #ffdf76, #d89236);
  color: #10223a;
  box-shadow: 0 3px 0 #7a4b20;
}
.shop-tab:not(.active):hover,
.shop-tab:not(.active):focus-visible {
  border-color: #ffdf76;
  color: #fff;
}
.shop-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.shop-wallet {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-bal {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.shop-bal b {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.shop-bal small {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ui-gold, #ffe28a);
}
.shop-bal.gems b {
  color: #a8ecff;
}
.shop-coin {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  vertical-align: middle;
}
.shop-coin.big {
  width: 28px;
  height: 28px;
}
.shop-gem {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}
.shop-gem.big {
  width: 28px;
  height: 28px;
}
.shop-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.shop-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #0b2442, #071a32);
  border: 2px solid #33628f;
  box-shadow:
    inset 0 0 0 2px var(--pl-navy-850),
    3px 4px 0 var(--pl-navy-950);
}
.shop-panel-hd h3 {
  margin: 2px 0 0;
  font-size: 18px;
  color: #fff;
}
.shop-kicker {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--ui-gold, #ffe28a);
}

/* ------------------------------------------------------------ câmbio */
.shop-rate {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: radial-gradient(120% 90% at 50% 0, #ffe28a22, transparent 60%), #06162e;
  border: 1px solid #bf9b48;
  box-shadow: inset 0 0 0 2px #03102a;
}
.shop-rate-lbl {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--pl-slate);
}
.shop-rate-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(20px, 6.5vw, 28px);
  font-weight: 900;
  color: #fff;
}
.shop-rate-val span {
  color: var(--pl-slate);
  font-size: 22px;
}
.shop-rate em {
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px;
  border: 1px solid currentColor;
}
.shop-rate em.up {
  color: #ff8a70;
}
.shop-rate em.flat {
  color: #8ff0c0;
}
.shop-market {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.shop-market div {
  padding: 7px 10px;
  background: #06162e;
  border: 1px solid #243f60;
}
.shop-market dt {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--pl-slate);
}
.shop-market dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  font-weight: 900;
  color: #ffe28a;
}
.shop-note,
.shop-warn {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.45;
  color: #c7d8ea;
}
.shop-warn {
  color: #ffc9a8;
}
.shop-buy {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.shop-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-qty b {
  min-width: 28px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.qty-btn,
.qty-max {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font: inherit;
  font-weight: 900;
  color: #fff;
  background: #123454;
  border: 1px solid var(--ui-line, #496b8c);
  cursor: pointer;
}
.qty-max {
  font-size: var(--text-xs);
  letter-spacing: 1px;
  color: var(--ui-gold, #ffe28a);
}
.qty-btn:disabled,
.qty-max:disabled {
  opacity: 0.4;
  cursor: default;
}
.shop-cost {
  display: grid;
  justify-items: end;
}
.shop-cost span {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--pl-slate);
}
.shop-cost b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  color: #ffe28a;
}
.shop-go {
  min-width: 110px;
}

/* ------------------------------------------------------------ pacotes */
.pack-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pack-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-content: start;
  text-align: center;
  padding: 12px;
  background: linear-gradient(110deg, #10304f, #071a32);
  border: 1px solid #33628f;
}
.pack-card.shiny {
  background: radial-gradient(90% 120% at 0 50%, #e8b92322, transparent 60%), linear-gradient(110deg, #1d1a2e, #0a0a14);
  border-color: #8a6a1c;
}
.pack-card.locked {
  filter: grayscale(0.85);
  opacity: 0.75;
}
.pack-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 150px;
  cursor: pointer;
}
.pack-card.locked .pack-art {
  cursor: default;
}
.pk-svg {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 144px;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 #0008);
  overflow: visible;
}
.pk-art {
  display: block;
  line-height: 0;
}
.pk-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto; /* a arte nova nao esta numa grade de pixel: reduzir com nearest serrilha */
}
.pk-art .pk-body {
  clip-path: inset(var(--pk-cut, 9.5%) 0 0 0);
}
.pk-art .pk-top {
  clip-path: inset(0 0 calc(100% - var(--pk-cut, 9.5%)) 0);
  transform-origin: 0% 100%;
}
/* luz que atravessa o pacote na vitrine: a camada de fora recorta, para a faixa nao sair da arte */
.pk-gloss {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: var(--pk-image) center / contain no-repeat;
  mask: var(--pk-image) center / contain no-repeat;
  mask-mode: alpha;
}
.pk-gloss b {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 34%;
  background: linear-gradient(104deg, transparent, #ffffff5c, transparent);
  mix-blend-mode: screen;
  transform: translateX(-180%) skewX(-16deg);
  animation: pk-gloss 4.2s ease-in-out infinite;
}
@keyframes pk-gloss {
  0%,
  64% {
    transform: translateX(-180%) skewX(-16deg);
  }
  100% {
    transform: translateX(340%) skewX(-16deg);
  }
}
.pack-glow {
  position: absolute;
  inset: 16% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff66, transparent);
  filter: blur(6px);
  animation: pack-breathe 2.6s ease-in-out infinite;
}
.pack-card.shiny .pack-glow {
  background: conic-gradient(from 0deg, #ff6b6b, #ffd84a, #6bff95, #5fd4ff, #b58bff, #ff6b6b);
  opacity: 0.55;
  filter: blur(12px);
  animation:
    pack-breathe 2.6s ease-in-out infinite,
    pack-hue-blur 5s linear infinite;
}
/* the colours turn while the glow stays blurred: every keyframe keeps the same filter list, so the blur is never dropped */
@keyframes pack-hue-blur {
  from {
    filter: blur(12px) hue-rotate(0deg);
  }
  to {
    filter: blur(12px) hue-rotate(360deg);
  }
}
.pk-svg.idle {
  animation: pack-float 3.2s ease-in-out infinite;
}
.pack-card:not(.locked) .pack-art:hover .pk-svg {
  animation: pack-wiggle 0.5s ease-in-out;
}
.pack-info h4 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 1.5px;
  color: #fff;
}
.pack-card.shiny .pack-info h4 {
  color: #f7c62f;
  text-shadow: 0 0 8px #e8b92366;
}
.pack-info p {
  margin: 4px 0 0;
  font-size: var(--text-md);
  line-height: 1.4;
  color: #c7d8ea;
}
.pack-info .pack-left {
  font-weight: 800;
  color: #8ff0c0;
}
.pack-info .pack-left.done {
  letter-spacing: 1px;
  color: var(--ui-gold, #ffe28a);
}
.pack-info .pack-lock {
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffc9a8;
}
.pack-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.pack-buy {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn.shiny-btn {
  --lip-a: #fff6c0;
  --lip-b: #7a5608;
  --face-a: #ffe070;
  --face-b: #d99a14;
  --ink: #1a1204;
  text-shadow: none !important;
}
/* as chances ficam atras de um botao redondo, do mesmo material dos botoes do jogo */
.pack-odds-btn {
  position: relative;
  width: 34px;
  height: 34px;
  align-self: center;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 15px;
  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;
  transition:
    transform 0.12s,
    filter 0.15s;
}
.pack-odds-btn:hover,
.pack-odds-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.pack-odds-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 #fff6cf,
    inset 0 -2px 0 #8a6412;
}
.pack-odds-btn.on {
  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;
}
.pack-odds {
  display: grid;
  gap: 3px;
  margin: 10px 0 0;
  padding: 8px 10px;
  list-style: none;
  background: #06162e;
  border: 1px solid #243f60;
}
.pack-odds li {
  text-align: left;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: var(--text-md);
  color: #d6e7f8;
}
.pack-odds.with-dup li {
  grid-template-columns: 10px 1fr auto 62px;
}
.pack-odds u {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  text-decoration: none;
  font-weight: 800;
  color: var(--ui-gold, #ffe28a);
}
.pack-odds .pack-odds-hd {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--pl-slate);
  border-bottom: 1px solid #243f60;
  padding-bottom: 3px;
}
.pack-odds .pack-odds-hd u {
  color: inherit;
}
.pack-odds i {
  width: 10px;
  height: 10px;
  background: var(--tier);
}
.pack-need {
  display: block;
  margin-top: 6px;
  color: #ffc9a8;
}

/* ------------------------------------------------------------ abertura */
#pack-open .pko {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #fff;
}
.pko-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 45%, #0f2d55f5, #020a18fc 70%);
  animation: pko-fade 0.3s ease-out both;
}
.pko.shiny .pko-bg {
  background: radial-gradient(70% 60% at 50% 45%, #33250cf5, #07050efc 70%);
}
/* ondas de choque em anel (a familia de raios em repeating-conic-gradient saiu do jogo) */
.pko-wave {
  position: absolute;
  left: 50%;
  top: 45%;
  opacity: 0;
  transition: opacity 0.6s;
}
.pko-wave b {
  position: absolute;
  left: 0;
  top: 0;
  width: 40vmax;
  height: 40vmax;
  margin: -20vmax 0 0 -20vmax;
  border: 2px solid #9cc8ff33;
  border-radius: 50%;
  opacity: 0;
  animation: pko-shock 3.6s ease-out infinite;
}
.pko-wave b:nth-child(2) {
  animation-delay: 1.2s;
}
.pko-wave b:nth-child(3) {
  animation-delay: 2.4s;
}
.pko.shiny .pko-wave b {
  border-color: #ffd84a40;
}
.pko.stage-tear .pko-wave,
.pko.stage-reveal .pko-wave {
  opacity: 1;
}
@keyframes pko-shock {
  0% {
    transform: scale(0.15);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
.pko-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(960px, 100vw);
  height: min(560px, 100vh);
}
.pko-pack {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
}
.pko-pack .pk-svg {
  width: 180px;
  height: 270px;
}
.pko.shiny .pko-pack .pk-svg {
  filter: drop-shadow(0 0 18px #ffd84a88) drop-shadow(3px 4px 0 #0008);
}
.pko.stage-drop .pko-pack {
  animation: pko-drop 0.65s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.pko.stage-shake .pko-pack {
  animation: pko-shake 1s ease-in-out both;
}
.pko.stage-shake .pko-pack .pk-svg {
  filter: drop-shadow(0 0 22px #ffffffaa) drop-shadow(3px 4px 0 #0008);
}
.pko.shiny.stage-shake .pko-pack .pk-svg {
  filter: drop-shadow(0 0 26px #ff7ad9) drop-shadow(0 0 12px #5fd4ff) drop-shadow(3px 4px 0 #0008);
  animation: pko-shiny-glow 0.9s ease-in-out infinite alternate;
}
/* only the glow changes colour; the pack itself keeps its colours */
@keyframes pko-shiny-glow {
  from {
    filter: drop-shadow(0 0 22px #ff7ad9) drop-shadow(0 0 10px #5fd4ff) drop-shadow(3px 4px 0 #0008);
  }
  to {
    filter: drop-shadow(0 0 34px #ffd84a) drop-shadow(0 0 16px #6bff95) drop-shadow(3px 4px 0 #0008);
  }
}
.pko.stage-tear .pk-top {
  animation: pko-tear 0.6s cubic-bezier(0.3, 0.1, 0.4, 1) both;
}
.pko-beam {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 150px;
  height: 0;
  margin-left: -75px;
  background: linear-gradient(0deg, #ffffffee, #fff6c0aa 40%, transparent);
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.pko.shiny .pko-beam {
  background: linear-gradient(0deg, #ffffff, #ffd84acc 30%, #ff7ad988 60%, transparent);
}
.pko.stage-tear .pko-beam {
  animation: pko-beam 0.7s ease-out both;
}
.pko-sparks {
  position: absolute;
  inset: -30%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 80% 20%, #fff6a8, transparent),
    radial-gradient(3px 3px at 70% 70%, #fff, transparent), radial-gradient(2px 2px at 30% 80%, #a8ecff, transparent),
    radial-gradient(3px 3px at 50% 10%, #fff, transparent);
  opacity: 0;
  pointer-events: none;
}
.pko.stage-shake .pko-sparks,
.pko.stage-tear .pko-sparks {
  animation: pko-sparks 0.9s ease-out infinite;
}
.pko.stage-reel .pko-pack,
.pko.stage-reveal .pko-pack {
  animation: pko-away 0.18s ease-in both;
  pointer-events: none;
}
.pko.stage-landed .pko-pack,
.pko.stage-reveal .pko-pack {
  visibility: hidden;
}
.pko.stage-reveal .pko-reel {
  visibility: hidden;
}
.pko:after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.pko.stage-reel:after {
  animation: pko-flash 0.45s ease-out;
}
.pko.shiny.stage-reveal:after {
  animation: pko-flash 0.6s ease-out;
}
@keyframes pko-flash {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
.pko-reel {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  height: 176px;
  margin-top: -88px;
  overflow: hidden;
  background: linear-gradient(180deg, #06162ef2, #0b2442f2);
  border-top: 2px solid #33628f;
  border-bottom: 2px solid #33628f;
  box-shadow:
    0 0 0 4px #03102a,
    0 20px 60px #000a;
  opacity: 0;
  transform: scaleY(0.2);
  pointer-events: none;
}
.pko.shiny .pko-reel {
  border-color: #8a6a1c;
  background: linear-gradient(180deg, #120f1cf2, #1d1a2ef2);
}
.pko.stage-reel .pko-reel {
  animation: pko-reel-in 0.3s ease-out 0.12s both;
}
.pko-reel:before,
.pko-reel:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
}
.pko-reel:before {
  left: 0;
  background: linear-gradient(90deg, #020a18, transparent);
}
.pko-reel:after {
  right: 0;
  background: linear-gradient(270deg, #020a18, transparent);
}
.pko-marker {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 3px;
  margin-left: -1.5px;
  background: #ffd84a;
  box-shadow: 0 0 10px #ffd84a;
}
.pko-marker:before,
.pko-marker:after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
}
.pko-marker:before {
  top: 0;
  border-top-color: #ffd84a;
}
.pko-marker:after {
  bottom: 0;
  border-bottom-color: #ffd84a;
}
.pko-strip {
  display: flex;
  gap: 8px;
  height: 100%;
  padding: 12px 0;
  will-change: transform;
}
.pko-card {
  position: relative;
  flex: none;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  width: 104px;
  padding: 6px 4px 0;
  background: linear-gradient(180deg, #1b3553, #0d2038);
  border: 1px solid #2d4f75;
  border-bottom: 6px solid var(--tier);
  box-shadow: inset 0 -26px 26px -18px var(--tier);
}
.pko.shiny .pko-card {
  background: linear-gradient(180deg, #2a2440, #141024);
  border-color: #4a3e6a;
  border-bottom-color: var(--tier);
}
.pko-card-art {
  display: grid;
  place-items: center;
}
.pko-sprite {
  width: 88px;
  height: 88px;
  image-rendering: pixelated;
}
.pko-card small {
  width: 100%;
  padding: 3px 0 5px;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d6e7f8;
}
.pko-reveal {
  position: absolute;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
.pko.stage-reveal .pko-reveal {
  animation: pko-reveal 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  pointer-events: auto;
}
.pko-big-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.pko-big {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  background: radial-gradient(closest-side, #ffffff18, transparent), linear-gradient(180deg, #1b3553, #0a1a30);
  border: 2px solid var(--tier);
  box-shadow:
    0 0 0 4px #03102a,
    0 0 40px var(--tier);
}
.pko-halo {
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tier), transparent);
  opacity: 0.45;
  filter: blur(10px);
  animation: pack-breathe 1.8s ease-in-out infinite;
}
.pko-big-wrap.is-shiny .pko-big {
  background: radial-gradient(closest-side, #ffd84a22, transparent), linear-gradient(180deg, #2a2440, #120f1e);
}
.pko-big-wrap.is-shiny .pko-halo {
  background: none;
  opacity: 0.55;
  filter: blur(22px);
}
/* the rainbow turns on its own layer: the halo keeps breathing (scale) while the colours spin (rotate) */
.pko-big-wrap.is-shiny .pko-halo:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff6b6b, #ffd84a, #6bff95, #5fd4ff, #b58bff, #ff6b6b);
  animation: pack-spin 4s linear infinite;
}
.pko-big-sprite {
  position: relative;
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
}
.pko-tier {
  margin-top: 6px;
  padding: 4px 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #06162e;
  background: var(--tier);
}
.pko-reveal h3 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 1px;
  text-shadow: 0 3px 0 #000a;
}
.pko.shiny .pko-reveal h3 {
  color: #ffd84a;
}
.pko-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #8ff0c0;
}
.pko-new.dup {
  color: var(--ui-gold, #ffe28a);
}
.pko-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.pko-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.pko-skip {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 7px 14px;
  border-radius: 7px;
  font: inherit;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #d6e7f8;
  background: #0b2442cc;
  border: 1px solid #33628f;
  cursor: pointer;
}
.pko.stage-reveal .pko-skip {
  display: none;
}

@keyframes pack-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}
@keyframes pack-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes pack-breathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}
@keyframes pack-hue {
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes pack-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pko-fade {
  from {
    opacity: 0;
  }
}
@keyframes pko-drop {
  from {
    transform: translateY(-120vh) rotate(-18deg);
  }
}
@keyframes pko-shake {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  10% {
    transform: rotate(-5deg) scale(1.02);
  }
  20% {
    transform: rotate(5deg) scale(1.03);
  }
  30% {
    transform: rotate(-7deg) scale(1.04);
  }
  40% {
    transform: rotate(7deg) scale(1.05);
  }
  50% {
    transform: rotate(-9deg) scale(1.06);
  }
  60% {
    transform: rotate(9deg) scale(1.07);
  }
  70% {
    transform: rotate(-11deg) scale(1.08);
  }
  80% {
    transform: rotate(11deg) scale(1.09);
  }
  90% {
    transform: rotate(-4deg) scale(1.1);
  }
}
@keyframes pko-tear {
  to {
    transform: translate(8px, -14px) rotate(-38deg);
    opacity: 0;
  }
}
@keyframes pko-beam {
  0% {
    height: 0;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    height: 60vh;
    opacity: 0.9;
    transform: translateY(-50%);
  }
}
@keyframes pko-sparks {
  from {
    transform: scale(0.6);
    opacity: 1;
  }
  to {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes pko-away {
  to {
    transform: scale(1.6);
    opacity: 0;
    filter: brightness(3);
  }
}
@keyframes pko-reel-in {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes pko-reveal {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .shop-page-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .pack-list {
    gap: 8px;
  }
  .pack-card {
    padding: 8px;
  }
  .pack-actions .btn {
    padding: 0 8px;
  }
  .pk-svg {
    width: 72px;
  }
  .pack-art {
    height: 126px;
  }
  .shop-buy {
    grid-template-columns: 1fr auto;
  }
  .shop-go {
    grid-column: 1 / -1;
  }
  .pko-pack .pk-svg {
    width: 140px;
    height: 210px;
  }
  .pko-card {
    width: 84px;
  }
  .pko-sprite {
    width: 70px;
    height: 70px;
  }
  .pko-big {
    width: 170px;
    height: 170px;
  }
  .pko-big-sprite {
    width: 150px;
    height: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pk-svg.idle,
  .pack-glow,
  .pko-wave b,
  .pko-halo {
    animation: none;
  }
  .pko-wave b {
    opacity: 0.35;
  }
}

/* ============================================================ v2 (25/09/2026): arte 32×48, partículas e efeitos da abertura */

/* ---------- pacotes na vitrine: particulas em orbita num anel que pulsa, estrelinhas piscando */
.pk-svg {
  width: 104px;
  height: 156px;
}
.pack-art {
  height: 176px;
  overflow: visible;
}
.pack-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 156px;
  height: 156px;
  margin: -78px 0 0 -78px;
  border-radius: 50%;
  border: 1px solid #ffffff1f;
  animation: pack-ring 3.4s ease-in-out infinite;
  pointer-events: none;
}
.pack-orbit b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  margin: -50% 0 0 -50%;
  animation: pack-spin 9s linear infinite;
}
.pack-orbit b:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #cfe6ff;
  box-shadow: 0 0 8px #9cc8ff;
}
.pack-orbit b:nth-child(2) {
  width: 78%;
  height: 78%;
  margin: -39% 0 0 -39%;
  animation-duration: 6.5s;
  animation-direction: reverse;
}
.pack-orbit b:nth-child(3) {
  width: 58%;
  height: 58%;
  margin: -29% 0 0 -29%;
  animation-duration: 13s;
}
.pack-orbit b:nth-child(4) {
  width: 92%;
  height: 92%;
  margin: -46% 0 0 -46%;
  animation-duration: 16s;
  animation-direction: reverse;
}
.pack-card.shiny .pack-orbit {
  border-color: #ffd84a33;
}
.pack-card.shiny .pack-orbit b:before {
  background: #fff1a8;
  box-shadow: 0 0 10px #ffd84a;
}
.pack-card.locked .pack-orbit,
.pack-card.locked .pk-tw {
  display: none;
}
@keyframes pack-ring {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
.pk-tw {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center/9px 1px no-repeat,
    linear-gradient(#fff, #fff) center/1px 9px no-repeat,
    linear-gradient(#fff, #fff) center/3px 3px no-repeat;
  image-rendering: pixelated;
  animation: pk-twinkle 2.4s ease-in-out infinite;
}
.pack-card.shiny .pk-tw {
  background:
    linear-gradient(#ffe28a, #ffe28a) center/9px 1px no-repeat,
    linear-gradient(#ffe28a, #ffe28a) center/1px 9px no-repeat,
    linear-gradient(#fff, #fff) center/3px 3px no-repeat;
}
.pk-tw.a {
  left: 18%;
  top: 14%;
}
.pk-tw.b {
  right: 16%;
  top: 30%;
  animation-delay: 0.6s;
}
.pk-tw.c {
  left: 24%;
  bottom: 18%;
  animation-delay: 1.2s;
}
.pk-tw.d {
  right: 22%;
  bottom: 10%;
  animation-delay: 1.8s;
}
@keyframes pk-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(0);
  }
  45% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
  60% {
    opacity: 0;
  }
}
.pack-card:not(.locked) .pack-art:hover .pk-svg {
  animation:
    pack-wiggle 0.5s ease-in-out,
    pack-float 3.2s ease-in-out 0.5s infinite;
  filter: drop-shadow(0 0 10px #ffffff66) drop-shadow(3px 4px 0 #0008);
}
.pack-card.shiny:not(.locked) .pack-art:hover .pk-svg {
  filter: drop-shadow(0 0 14px #ffd84a) drop-shadow(3px 4px 0 #0008);
}

/* ---------- abertura: camadas */
#pack-open .pko-fx {
  position: fixed;
  inset: 0;
  z-index: 6;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  image-rendering: pixelated;
}
.pko-skip {
  z-index: 8;
}
.pko-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 45%, transparent 40%, #000c 100%);
}
.pko-flash {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.pko:after {
  display: none;
}
.pko.stage-tear .pko-flash {
  animation: pko-flash-soft 0.35s ease-out;
}
@keyframes pko-flash-soft {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}
.pko.stage-reveal .pko-flash {
  animation: pko-flash 0.7s ease-out;
}
.pko.t3.stage-reveal .pko-flash,
.pko.t4.stage-reveal .pko-flash,
.pko.shiny.stage-reveal .pko-flash {
  animation: pko-flash-big 1s ease-out;
}
@keyframes pko-flash-big {
  0% {
    opacity: 1;
    background: #fff;
  }
  30% {
    opacity: 0.7;
    background: var(--tier);
  }
  100% {
    opacity: 0;
  }
}

/* tremor da tela */
.pko-stage.quake {
  animation: pko-quake 0.35s steps(2, end) both;
}
@keyframes pko-quake {
  0% {
    transform: translate(4px, -3px);
  }
  20% {
    transform: translate(-5px, 2px);
  }
  40% {
    transform: translate(3px, 4px);
  }
  60% {
    transform: translate(-3px, -4px);
  }
  80% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: none;
  }
}

/* aura que cresce atrás do pacote enquanto ele treme */
.pko-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff66, #8fc5ff33 45%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
.pko.shiny .pko-aura {
  background: none;
}
/* same idea for the aura: it grows (scale) while its rainbow layer spins (rotate) */
.pko.shiny .pko-aura:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff6b6b, #ffd84a, #6bff95, #5fd4ff, #b58bff, #ff6b6b);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  animation: pack-spin 1.4s linear infinite;
}
.pko.stage-shake .pko-aura {
  animation: pko-aura 1.25s ease-in both;
}
.pko.shiny.stage-shake .pko-aura {
  animation: pko-aura 1.25s ease-in both;
}
.pko.stage-tear .pko-aura {
  opacity: 1;
  transform: scale(1.4);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
@keyframes pko-aura {
  to {
    opacity: 0.75;
    transform: scale(1.1);
  }
}
.pko-pack .pk-svg {
  position: relative;
  width: 200px;
  height: 300px;
}
.pko.stage-tear .pko-pack .pk-svg {
  animation: pko-pop 0.4s ease-out both;
}
@keyframes pko-pop {
  0% {
    transform: scale(1.12);
    filter: brightness(1.35) drop-shadow(0 0 24px #fff);
  }
  100% {
    transform: scale(1);
  }
}

/* o carretel continua na tela quando para (fase "landed") */
.pko.stage-landed .pko-pack {
  opacity: 0;
  pointer-events: none;
}
.pko.stage-landed .pko-reel {
  opacity: 1;
  transform: none;
}
.pko-card {
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.pko-card-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pko-card-shine:before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
  transform: skewX(-18deg);
}
.pko-card.t3,
.pko-card.t4 {
  box-shadow:
    inset 0 -30px 30px -18px var(--tier),
    0 0 12px color-mix(in srgb, var(--tier) 55%, transparent);
}
.pko-card.hot {
  transform: translateY(-3px);
  box-shadow:
    inset 0 -30px 30px -12px var(--tier),
    0 0 16px var(--tier);
}
.pko.stage-landed .pko-card:not(.win) {
  filter: brightness(0.45) saturate(0.6);
  transition: filter 0.3s;
}
.pko.stage-landed .pko-card.win {
  z-index: 2;
  transform: scale(1.14);
  box-shadow:
    0 0 0 2px #fff,
    0 0 26px var(--tier),
    0 0 60px var(--tier);
  animation: pko-win 0.7s ease-out both;
}
.pko.stage-landed .pko-card.win .pko-card-shine:before {
  animation: pko-sheen 0.6s ease-out 0.05s both;
}
@keyframes pko-win {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1.14);
  }
}
@keyframes pko-sheen {
  to {
    left: 130%;
  }
}

/* revelação: anel que explode, halo e brilho passando no cartão */
.pko-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border: 6px solid var(--tier);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.pko.stage-reveal .pko-burst {
  animation: pko-burst 0.9s ease-out 0.05s both;
}
.pko-big-wrap.is-shiny .pko-burst {
  border-color: #ffd84a;
  box-shadow:
    0 0 20px #ff7ad9,
    inset 0 0 20px #5fd4ff;
}
@keyframes pko-burst {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
    border-width: 1px;
  }
}
.pko-big {
  overflow: hidden;
}
.pko-big-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pko-big-shine:before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70%;
  width: 45%;
  background: linear-gradient(90deg, transparent, #ffffff55, transparent);
  transform: skewX(-18deg);
  animation: pko-sheen-loop 2.8s ease-in-out 0.4s infinite;
}
@keyframes pko-sheen-loop {
  0% {
    left: -70%;
  }
  40%,
  100% {
    left: 140%;
  }
}
.pko-big-sprite {
  animation: pko-bob 2.4s ease-in-out 0.6s infinite;
}
@keyframes pko-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.pko.t3 .pko-tier,
.pko.t4 .pko-tier {
  box-shadow: 0 0 16px var(--tier);
}
.pko.shiny .pko-tier {
  background: linear-gradient(90deg, #ff6b6b, #ffd84a, #6bff95, #5fd4ff, #b58bff);
  background-size: 200% 100%;
  animation: pko-rainbow 2s linear infinite;
}
@keyframes pko-rainbow {
  to {
    background-position: 200% 0;
  }
}
@media (max-width: 520px) {
  .pk-svg {
    width: 80px;
    height: 120px;
  }
  .pack-art {
    height: 136px;
  }
  .pack-orbit {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
  }
  .pko-pack .pk-svg {
    width: 150px;
    height: 225px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pack-orbit,
  .pack-orbit b,
  .pk-tw,
  .pko-big-shine:before,
  .pko-big-sprite,
  .pko.shiny .pko-tier {
    animation: none;
  }
  .pko-stage.quake {
    animation: none;
  }
}

/* ---- arte dos pacotes v3 (26/09/2026): PNG 296x496 no lugar do desenho 32x48 ----
   Todas as regras acima fixam largura e altura na proporcao antiga (1:1,5); aqui a altura
   volta a sair da largura, entao cada breakpoint continua valendo sem ser reescrito. */
.pk-svg.pk-art {
  height: auto;
  aspect-ratio: 296 / 496;
}
/* The One Piece source has 76px/50px of transparent vertical padding.
   Scale the artwork and its alpha-masked reflection together to match the other packs. */
.pk-onepiece > .pk-print {
  position: absolute;
  inset: 0;
  transform: translateY(-1.447661%) scale(1.140312);
}
@media (prefers-reduced-motion: reduce) {
  .pk-gloss b {
    animation: none;
    opacity: 0;
  }
}

/* ---- acabamento 26/09/2026: o "?" pequeno no alto do card e o booster um pouco menor ----
   Estas regras vivem aqui, e não em compact.css, porque shop.css é carregado depois e vence. */
.pack-card {
  position: relative;
}
.pack-odds-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  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;
}
.pack-odds-btn.on {
  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;
}
.pack-actions {
  justify-content: center;
}
.pk-svg {
  width: 88px;
}
@media (max-width: 520px) {
  .pk-svg {
    width: 72px;
  }
}

/* ---- 26/09/2026: o câmbio anda nos dois sentidos, e o par de abas escolhe qual */
.shop-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 10px;
}
.shop-dir button {
  padding: 7px 8px;
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  background: #0b1a2e80;
  color: var(--pl-slate, #9fb3cc);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.shop-dir button.active {
  border-color: #f0b92366;
  background: #f0b9231f;
  color: #ffe9a8;
}

/* Paineis e dados da loja acompanham os cantos discretos do restante da interface.
   O desenho dos pacotes e as imagens das moedas continuam com seus contornos originais. */
.shop-panel,
.pack-card {
  border-radius: var(--ui-panel-radius, 6px);
}
.shop-bal,
.shop-rate,
.shop-market div,
.shop-rate em {
  border-radius: var(--ui-info-radius, 4px);
}
.pack-odds.with-dup li {
  grid-template-columns: 10px minmax(0, 1fr) 70px 96px;
}
.pack-odds.with-dup u {
  justify-content: flex-start;
  white-space: nowrap;
}
.pack-odds.with-dup u img {
  flex: none;
}
@media (max-width: 420px) {
  .pack-odds.with-dup li {
    grid-template-columns: 10px minmax(0, 1fr) 60px 84px;
    gap: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop-dir button {
    transition: none;
  }
}

/* Rounded tab group and equal-height booster actions. */
.shop-tabs {
  border-radius: 10px;
}
.overlay.site-theme .shop-tabs {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.overlay.site-theme .shop-exit .btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
}
.shop-tab {
  border-radius: 7px;
}
.pack-info {
  display: flex;
  flex-direction: column;
}
.pack-actions {
  margin-top: auto;
  padding-top: 10px;
}
.pack-buy {
  min-height: 40px;
}
/* 28/09: compact store controls and the original Skin Shop accent. */
.site-theme .shop-page .shop-tab {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 11px;
  position: relative;
  overflow: hidden;
}
.site-theme .shop-page .skin-shop-tab {
  background: linear-gradient(100deg, #6a1b9a, #e83e8c 30%, #ff9f1c 60%, #6a1b9a);
  background-size: 300% 100%;
  animation: ss-flow 6s linear infinite;
  color: white;
  border-color: #ffcf75;
  box-shadow: 0 0 10px #e83e8c55;
}
.skin-shop-tab > span {
  position: relative;
  z-index: 3;
}
.skin-shop-tab .ss-spark {
  width: 6px;
  height: 6px;
}
.site-theme .shop-page .shop-buy .btn,
.site-theme .shop-page .pack-actions .btn {
  min-width: 0;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
  gap: 5px;
}
.shop-page .shop-buy {
  gap: 8px;
}
.shop-page .shop-qty {
  gap: 4px;
}
.shop-page .shop-qty b {
  font-size: 16px;
  min-width: 20px;
}
.shop-page .qty-btn,
.shop-page .qty-max {
  height: 26px;
  min-width: 26px;
  padding: 0 6px;
}
.shop-page .shop-cost b {
  font-size: 16px;
}
.sx-btn .item-sprite {
  width: 15px;
  height: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .site-theme .shop-page .skin-shop-tab {
    animation: none;
  }
}

/* Shop controls share one edge, with no extra frame around the section tabs. */
.site-theme .shop-page .shop-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.site-theme .shop-page .shop-tab {
  flex: 1 1 0;
  min-width: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}
.site-theme .shop-page .shop-tab:first-child {
  border-radius: 6px 0 0 6px;
}
.site-theme .shop-page .shop-tab:last-child {
  border-right: 1px solid #54799f;
  border-radius: 0 6px 6px 0;
}
.site-theme .shop-page .shop-wallet {
  flex-wrap: nowrap;
  gap: 18px;
}
.site-theme .shop-page .shop-bal {
  min-width: 0;
  border-radius: 0;
}
.site-theme .shop-page .shop-dir {
  gap: 0;
}
.site-theme .shop-page .shop-dir button {
  border-radius: 0;
}
.site-theme .shop-page .shop-dir button + button {
  border-left: 0;
}
.site-theme .shop-page .shop-dir button:first-child {
  border-radius: 6px 0 0 6px;
}
.site-theme .shop-page .shop-dir button:last-child {
  border-radius: 0 6px 6px 0;
}

/* Both booster odds dialogs share the same rounded finish. */
.overlay.site-theme .modal.help-modal:has(.pack-odds) {
  border-radius: 10px !important;
  overflow: hidden;
}
.overlay.site-theme .modal.help-modal:has(.pack-odds) > .modal-head {
  border-radius: 8px 8px 0 0;
}
.overlay.site-theme .modal.help-modal:has(.pack-odds) > .modal-body {
  border-radius: 0 0 8px 8px;
}
.overlay.site-theme .help-modal .pack-odds {
  border-radius: 6px;
}

/* One Piece uses the same pack opening and FX layers as the other boosters. */
.skin-pack-stage {
  width: min(820px, 94vw);
  gap: 18px;
}
.skin-pack-stage h2 {
  color: #ffdf7f;
  font-size: clamp(20px, 4vw, 30px);
  margin: 4px 0 16px;
}
.skin-pack-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  align-items: center;
  min-height: 240px;
}
.skin-pack-reward-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  isolation: isolate;
}
.skin-pack-reward-art img {
  position: relative;
  z-index: 1;
  width: min(210px, 100%);
  height: 210px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 8px #0008);
}
.pko.stage-reveal .skin-pack-reward-art {
  animation: pko-reveal 0.65s calc(var(--i) * 0.15s) both;
}
.skin-pack-stage footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.skin-pack-stage .btn {
  border-radius: 999px !important;
  clip-path: none !important;
  border-image: none !important;
  padding: 9px 18px !important;
  box-shadow: 0 3px 0 #031224 !important;
  font-size: 10px !important;
  background: linear-gradient(#1b4361, #102b44) !important;
  color: #e3efff !important;
  border: 1px solid #577c99 !important;
}
.skin-pack-stage .btn.primary {
  background: linear-gradient(#ffe28a, #e9b849) !important;
  color: #172b43 !important;
  box-shadow: 0 3px 0 #8b641f !important;
  border-color: #c79a38 !important;
}
.skin-pack-stage .btn::before,
.skin-pack-stage .btn::after {
  display: none !important;
}
@media (max-width: 520px) {
  .skin-pack-rewards {
    gap: 8px;
    min-height: 170px;
  }
  .skin-pack-reward-art {
    height: 150px;
  }
  .skin-pack-reward-art img {
    height: 140px;
  }
  .skin-pack-stage footer {
    margin-top: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skin-pack-overlay.stage-reveal .pko-reveal {
    opacity: 1;
    animation: none;
  }
  .skin-pack-overlay .skin-pack-reward-art {
    animation: none !important;
  }
}