#store-overlay, #store-celebration, #store-payment-panel {
  --store-border:   rgba(211,168,88,.15);
  --store-border-hi: rgba(211,168,88,.4);
  --store-text-dim: #8a7a62;
  --store-text:     #f0e6cc;
  --store-amber:    #d3a858;
  --store-panel-bg: rgba(14,12,10,.96);
  --store-ink:      #1a1510;
  --store-red:      #e94560;
  --store-gold:     #e8b84a;
}

#store-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: 'DM Sans', sans-serif;
}

#store-box {
  background: var(--store-panel-bg);
  border: 1px solid var(--store-border-hi);
  border-radius: 1rem;
  width: min(700px, 100%);
  max-height: min(640px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.store-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--store-border);
  flex-shrink: 0;
}

.store-gold-display {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .3rem;
  background: rgba(232,184,74,.1);
  border: 1px solid rgba(232,184,74,.3);
  border-radius: 2rem;
  padding: .2rem .65rem .2rem .45rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--store-gold);
}

.store-gold-display.hidden { display: none; }

.store-gold-icon {
  font-size: .95rem;
  line-height: 1;
}

.store-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--store-amber);
}

#store-close {
  background: none;
  border: none;
  color: var(--store-text-dim);
  font-size: 1.1rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  padding: .2rem .4rem;
  border-radius: .3rem;
  transition: color .15s, background .15s;
}

#store-close:hover { color: var(--store-text); background: rgba(255,255,255,.06); }

.store-tabs {
  display: flex;
  border-bottom: 1px solid var(--store-border);
  flex-shrink: 0;
}

.store-tab {
  flex: 1;
  padding: .55rem .5rem;
  background: none;
  border: none;
  color: var(--store-text-dim);
  font-size: .78rem;
  font-weight: 500;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: color .15s, background .15s;
  border-bottom: 2px solid transparent;
}

.store-tab:hover { color: var(--store-text); background: rgba(255,255,255,.03); }

.store-tab.active {
  color: var(--store-amber);
  border-bottom-color: var(--store-amber);
  background: rgba(211,168,88,.04);
}

.store-pane { display: none; }
.store-pane.active { display: block; }

.store-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 1rem;
  scrollbar-width: none;
}

.store-body::-webkit-scrollbar { display: none; }

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .75rem;
}

.store-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--store-border);
  border-radius: .6rem;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: border-color .15s, background .15s;
}

.store-card:hover { border-color: var(--store-border-hi); background: rgba(255,255,255,.05); }
.store-card.owned { border-color: rgba(80,200,120,.35); }

.store-card-preview {
  height: 2.8rem;
  border-radius: .4rem;
  overflow: hidden;
  flex-shrink: 0;
}

.store-card-preview .preview-swatch {
  width: 100%;
  height: 100%;
  border-radius: .4rem;
}

.store-card-preview .preview-board {
  width: 100%;
  height: 100%;
  border-radius: .4rem;
  background: linear-gradient(135deg, #5a8a3c 25%, #e8c96a 25% 50%, #a0522d 50% 75%, #4a7a8a 75%);
  background-size: 20px 20px;
}

.store-card-preview .preview-board-tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* flat-top hex to match the actual game board orientation */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  cursor: zoom-in;
  transition: transform .15s;
}

.store-card-preview .preview-board-tile:hover { transform: scale(1.05); }

/* ── Tile board preview lightbox ─────────────────────────────────────────── */
#store-tile-preview {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  cursor: zoom-out;
}

#store-tile-preview.open {
  opacity: 1;
  pointer-events: all;
}

#store-tile-preview-canvas {
  border-radius: .75rem;
  box-shadow: 0 16px 64px rgba(0,0,0,.7);
  animation: tile-preview-pop .28s cubic-bezier(.22,1,.36,1) both;
  cursor: zoom-out;
}

#store-tile-preview-label {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: rgba(240,230,204,.7);
  letter-spacing: .04em;
  animation: tile-preview-pop .28s cubic-bezier(.22,1,.36,1) both;
}

@keyframes tile-preview-pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.store-card-preview .preview-sound {
  width: 100%;
  height: 100%;
  border-radius: .4rem;
  background: rgba(211,168,88,.08);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .2s;
  position: relative;
}

.store-card-preview .preview-sound:hover {
  background: rgba(211,168,88,.18);
}

.store-card-preview .preview-sound .preview-sound-icon,
.store-card-preview .preview-sound .preview-sound-play {
  grid-area: 1 / 1;
  transition: opacity .2s, transform .2s;
}

.store-card-preview .preview-sound .preview-sound-play {
  font-size: .8rem;
  color: var(--store-amber);
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
}

.store-card-preview .preview-sound:hover .preview-sound-play {
  opacity: 1;
  transform: scale(1);
}

.store-card-preview .preview-sound:hover .preview-sound-icon {
  opacity: .25;
}

.store-card-preview .preview-sound.playing {
  animation: sound-pulse .4s ease 4;
}

.store-card-preview .preview-sound.playing .preview-sound-play {
  opacity: 1;
  transform: scale(1);
}

@keyframes sound-pulse {
  0%, 100% { background: rgba(211,168,88,.12); }
  50% { background: rgba(211,168,88,.35); }
}

.store-card-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--store-text);
}

.store-card-desc {
  font-size: .72rem;
  color: var(--store-text-dim);
  line-height: 1.4;
  flex: 1;
}

.store-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .1rem;
}

.store-card-price {
  font-size: .82rem;
  font-weight: 600;
  color: var(--store-amber);
}

.store-gold-price {
  font-size: .82rem;
  font-weight: 700;
  color: var(--store-gold);
  display: flex;
  align-items: center;
  gap: .2rem;
}

.store-gold-price-short {
  color: rgba(232,184,74,.5);
}

.store-card-owned-badge {
  font-size: .7rem;
  color: #50c878;
  font-weight: 600;
}

.store-card-buy-btn {
  font-size: .72rem;
  padding: .22rem .55rem;
  border-radius: .3rem;
  background: rgba(232,184,74,.18);
  border: 1px solid rgba(232,184,74,.4);
  color: var(--store-gold);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.store-card-buy-btn:hover { background: rgba(232,184,74,.32); }
.store-card-buy-btn:disabled { opacity: .4; cursor: not-allowed; }
.store-card-buy-btn.confirming { background: rgba(80,200,120,.18); border-color: rgba(80,200,120,.45); color: #50c878; }
.store-card-buy-btn-broke { opacity: .55; }
.store-card-buy-btn-broke:hover { background: rgba(233,69,96,.15); border-color: rgba(233,69,96,.4); color: var(--store-red); }

.store-grid-packs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.pack-card-preview {
  font-size: 2rem;
  text-align: center;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(211,168,88,.07);
  border-radius: .4rem;
  flex-shrink: 0;
}

.pack-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin: .1rem 0;
}

.pack-item-chip {
  font-size: .65rem;
  padding: .1rem .38rem;
  border-radius: 3px;
  background: rgba(211,168,88,.1);
  border: 1px solid rgba(211,168,88,.2);
  color: var(--store-text-dim);
  white-space: nowrap;
}

.pack-item-chip-empty { color: rgba(255,255,255,.2); border-color: transparent; }

.gold-pack-buy-btn {
  font-size: .78rem;
  padding: .28rem .7rem;
  border-radius: .3rem;
  background: var(--store-amber);
  border: none;
  color: var(--store-ink);
  font-weight: 700;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: opacity .15s;
}

.gold-pack-buy-btn:hover { opacity: .85; }
.gold-pack-buy-btn:disabled { opacity: .4; cursor: not-allowed; }

.gold-pack-preview {
  font-size: 2.2rem;
  background: rgba(232,184,74,.08) !important;
}

.store-gold-packs-intro {
  font-size: .78rem;
  color: var(--store-text-dim);
  text-align: center;
  padding: .6rem .5rem .4rem;
  line-height: 1.5;
}

.store-text-dim {
  font-size: .75rem;
  color: var(--store-text-dim);
}

.bundle-buy-btn {
  font-size: .72rem;
  padding: .22rem .55rem;
  border-radius: .3rem;
  background: rgba(232,184,74,.18);
  border: 1px solid rgba(232,184,74,.4);
  color: var(--store-gold);
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.bundle-buy-btn:hover { background: rgba(232,184,74,.32); }
.bundle-buy-btn:disabled { opacity: .4; cursor: not-allowed; }
.bundle-buy-btn.confirming { background: rgba(80,200,120,.18); border-color: rgba(80,200,120,.45); color: #50c878; }
.bundle-buy-btn-broke { opacity: .55; }
.bundle-buy-btn-broke:hover { background: rgba(233,69,96,.15); border-color: rgba(233,69,96,.4); color: var(--store-red); }

.store-empty-msg {
  color: var(--store-text-dim);
  font-size: .82rem;
  text-align: center;
  padding: 2rem 1rem;
  font-style: italic;
}

.store-no-auth {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--store-text-dim);
  font-size: .9rem;
}

.store-stripe-note {
  font-size: .68rem;
  color: var(--store-text-dim);
  opacity: .45;
  text-align: center;
  padding: .35rem 1rem .55rem;
  flex-shrink: 0;
}

.store-payment-notice {
  padding: .5rem 1rem;
  background: rgba(80,200,120,.1);
  border-top: 1px solid rgba(80,200,120,.2);
  font-size: .78rem;
  color: #50c878;
  text-align: center;
  flex-shrink: 0;
}

.store-payment-notice.error {
  background: rgba(233,69,96,.1);
  border-top-color: rgba(233,69,96,.2);
  color: var(--store-red);
}

#store-payment-panel {
  background: var(--store-panel-bg);
  border: 1px solid var(--store-border-hi);
  border-radius: 1rem;
  width: min(700px, 100%);
  max-height: min(800px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#store-payment-panel.hidden { display: none; }

.store-payment-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--store-border);
  flex-shrink: 0;
}

#store-payment-back {
  background: none;
  border: 1px solid var(--store-border);
  border-radius: .5rem;
  color: var(--store-text-dim);
  cursor: pointer;
  font-size: .8rem;
  padding: .3rem .6rem;
  transition: color .15s, border-color .15s;
}

#store-payment-back:hover { color: var(--store-gold); border-color: var(--store-gold); }

.store-payment-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--store-text);
}

#stripe-checkout-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 400px;
}

#store-overlay {
  animation: store-overlay-in .25s ease both;
}

#store-overlay.hidden {
  animation: none;
}

@keyframes store-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#store-box {
  animation: store-box-in .3s cubic-bezier(.22,1,.36,1) both;
}

@keyframes store-box-in {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

#store-payment-panel {
  animation: store-box-in .3s cubic-bezier(.22,1,.36,1) both;
}

.store-card {
  position: relative;
  overflow: hidden;
}

.store-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: .6rem;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(211,168,88,.08) 0%, transparent 70%);
  transition: opacity .3s;
  pointer-events: none;
}

.store-card:hover::before {
  opacity: 1;
}

.store-card.owned::before {
  opacity: 0;
}

.store-card .store-card-buy-btn.in-cart {
  background: rgba(80,200,120,.2);
  border-color: rgba(80,200,120,.5);
  color: #50c878;
}

.store-card .store-card-buy-btn.in-cart:hover {
  background: rgba(233,69,96,.2);
  border-color: rgba(233,69,96,.5);
  color: var(--store-red);
}


.store-grid .store-card {
  animation: card-in .35s cubic-bezier(.22,1,.36,1) both;
}

.store-grid .store-card:nth-child(1) { animation-delay: 0s; }
.store-grid .store-card:nth-child(2) { animation-delay: .04s; }
.store-grid .store-card:nth-child(3) { animation-delay: .08s; }
.store-grid .store-card:nth-child(4) { animation-delay: .12s; }
.store-grid .store-card:nth-child(5) { animation-delay: .16s; }
.store-grid .store-card:nth-child(6) { animation-delay: .2s; }
.store-grid .store-card:nth-child(7) { animation-delay: .24s; }
.store-grid .store-card:nth-child(8) { animation-delay: .28s; }
.store-grid .store-card:nth-child(9) { animation-delay: .32s; }
.store-grid .store-card:nth-child(10) { animation-delay: .36s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes camo-nebula-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.color-nebula {
  background: linear-gradient(135deg, #6a0dad, #1a0a3d, #3d1a7a, #7b2fff, #1a0a3d);
  background-size: 300% 300%;
  animation: camo-nebula-shift 4s ease infinite;
}

@keyframes camo-inferno-rise {
  0%   { background-position: 50% 100%; }
  50%  { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

.color-inferno {
  background: linear-gradient(0deg, #1a0000, #8b0000, #ff4500, #ff8c00, #ff4500, #8b0000);
  background-size: 100% 300%;
  animation: camo-inferno-rise 2.5s ease-in-out infinite;
}

@keyframes camo-glacial-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.color-glacial {
  background: linear-gradient(120deg, #a8d8ea, #e8f4f8, #89c4e1, #d6eef8, #5ba4cf, #e8f4f8);
  background-size: 300% 300%;
  animation: camo-glacial-sweep 3s ease-in-out infinite;
}

@keyframes camo-void-pulse {
  0%,100% { background-position: 50% 0%; }
  50%      { background-position: 50% 100%; }
}

.color-void {
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #000005 50%, #0d0d1a 100%),
              linear-gradient(180deg, #000005, #12002a, #000005);
  background-size: 100% 100%, 100% 300%;
  animation: camo-void-pulse 5s ease infinite;
  position: relative;
  overflow: hidden;
}

@keyframes camo-eclipse-rotate {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.color-eclipse {
  background: linear-gradient(90deg, #0a0a0a, #1a1a1a, #d4a017, #ffd700, #d4a017, #1a1a1a, #0a0a0a);
  background-size: 200% 100%;
  animation: camo-eclipse-rotate 3s linear infinite;
}

#store-celebration {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(8px);
  animation: celebration-fade-in .35s ease both;
  font-family: 'DM Sans', sans-serif;
}

#store-celebration.hidden { display: none !important; }

@keyframes celebration-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#celebration-content {
  text-align: center;
  animation: celebration-pop .5s cubic-bezier(.22,1,.36,1) both;
  z-index: 1;
  position: relative;
}

@keyframes celebration-pop {
  from { transform: scale(.6) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

#celebration-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: celebration-bounce .8s ease infinite;
}

@keyframes celebration-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.1); }
  60% { transform: translateY(-6px); }
}

#celebration-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--store-amber);
  text-shadow: 0 0 40px rgba(211,168,88,.4);
  margin-bottom: .5rem;
  letter-spacing: -.02em;
}

#celebration-text {
  color: var(--store-text-dim);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

#celebration-btn {
  padding: .7rem 2.2rem;
  background: var(--store-amber);
  border: none;
  border-radius: 4px;
  color: var(--store-ink);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: url('../img/cursor-pointer.svg') 2 2, pointer;
  transition: background .15s, transform .1s;
  box-shadow: 0 4px 24px rgba(211,168,88,.3);
}

#celebration-btn:hover { background: #e8bf6a; transform: translateY(-2px); }
#celebration-btn:active { transform: translateY(0); }

#celebration-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(720deg) scale(.4);
    opacity: 0;
  }
}

.store-payment-notice {
  padding: .6rem 1rem;
  font-size: .82rem;
  text-align: center;
  flex-shrink: 0;
  animation: notice-in .25s ease both;
}

@keyframes notice-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Mystery box pane ──────────────────────────────────────────────────── */

.mbox-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(211,168,88,.06);
  border: 1px solid rgba(211,168,88,.18);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.mbox-hero-icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  animation: mbox-float 3s ease-in-out infinite;
}

@keyframes mbox-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.mbox-hero-info { flex: 1; }

.mbox-hero-count-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--store-text-dim);
  font-weight: 600;
}

.mbox-hero-count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--store-amber);
  line-height: 1.1;
}

.mbox-hero-sub {
  font-size: .7rem;
  color: #5a4a3a;
  margin-top: .15rem;
}

.mbox-hero-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-shrink: 0;
}

.mbox-open-btn {
  background: var(--store-amber);
  color: var(--store-ink);
  border: none;
  border-radius: .5rem;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 0 0 rgba(211,168,88,0);
}

.mbox-open-btn:not(:disabled):hover {
  opacity: .88;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(211,168,88,.35);
}
.mbox-open-btn:disabled { opacity: .3; cursor: default; }

.mbox-buy-btn {
  background: rgba(255,255,255,.06);
  color: var(--store-text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem;
  padding: .45rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.mbox-buy-btn:not(:disabled):hover { background: rgba(255,255,255,.12); }
.mbox-buy-btn:disabled { opacity: .35; cursor: default; }
.mbox-buy-price { color: var(--store-gold); font-weight: 700; }

.mbox-buy-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: flex-end;
}

.mbox-qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .4rem;
  overflow: hidden;
}

.mbox-qty-btn {
  background: transparent;
  border: none;
  color: var(--store-text-dim);
  font-size: 1rem;
  font-weight: 700;
  width: 1.8rem;
  height: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}

.mbox-qty-btn:hover { background: rgba(255,255,255,.08); color: var(--store-text); }

.mbox-qty-input {
  width: 2.6rem;
  height: 1.6rem;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.06);
  color: var(--store-text);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.mbox-qty-input::-webkit-inner-spin-button,
.mbox-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Pool */
.mbox-pool-section { margin-top: .5rem; }

.mbox-pool-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #5a4a3a;
  margin-bottom: .5rem;
}

.mbox-pool-list { display: flex; flex-direction: column; gap: .3rem; }

.mbox-pool-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .7rem;
  border-radius: .4rem;
  background: rgba(255,255,255,.03);
  border-left: 3px solid transparent;
  font-size: .78rem;
}

.mbox-pool-row.mbox-rarity-common { border-left-color: #5a4a3a; }
.mbox-pool-row.mbox-rarity-rare   { border-left-color: #58a0d3; }
.mbox-pool-row.mbox-rarity-epic   { border-left-color: #d358a0; }

.mbox-pool-reward { flex: 1; color: var(--store-text); }

.mbox-pool-rarity {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mbox-rarity-common .mbox-pool-rarity { color: #5a4a3a; }
.mbox-rarity-rare   .mbox-pool-rarity { color: #58a0d3; }
.mbox-rarity-epic   .mbox-pool-rarity { color: #d358a0; }

.mbox-pool-chance {
  color: #5a4a3a;
  font-size: .7rem;
  min-width: 2.5rem;
  text-align: right;
}

.mbox-pool-empty { font-size: .78rem; color: #4a3a2a; padding: .5rem 0; }

/* ── Mystery box reveal overlay ──────────────────────────────────────────── */

#mbox-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,4,2,.92);
  backdrop-filter: blur(12px);
  font-family: 'DM Sans', sans-serif;
  animation: mbox-overlay-in .3s ease both;
}

#mbox-reveal-overlay.hidden { display: none; }

@keyframes mbox-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#mbox-reveal-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mbox-particle {
  position: absolute;
  border-radius: 50%;
  animation: mbox-particle-fly linear forwards;
  opacity: 0;
}

@keyframes mbox-particle-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.2) rotate(var(--rot)); }
}

#mbox-reveal-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem;
}

/* ── Stage: box ─────────────────────────────────────────── */

#mbox-stage-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  position: relative;
}

#mbox-box-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,168,88,.35) 0%, transparent 70%);
  animation: mbox-glow-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mbox-glow-pulse {
  0%, 100% { transform: scale(1);   opacity: .7; }
  50%       { transform: scale(1.2); opacity: 1;  }
}

#mbox-box-emoji {
  font-size: 7rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
  animation: mbox-box-float 2.5s ease-in-out infinite;
  transition: transform .1s;
  filter: drop-shadow(0 0 24px rgba(211,168,88,.5));
}

#mbox-box-emoji:hover { transform: scale(1.08); }

@keyframes mbox-box-float {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}

#mbox-box-emoji.mbox-box-shake {
  animation: mbox-box-shake .5s ease both;
}

@keyframes mbox-box-shake {
  0%   { transform: translateX(0)    rotate(0deg); }
  10%  { transform: translateX(-8px) rotate(-5deg); }
  25%  { transform: translateX(10px) rotate(6deg); }
  40%  { transform: translateX(-10px) rotate(-6deg); }
  55%  { transform: translateX(10px) rotate(5deg); }
  70%  { transform: translateX(-8px) rotate(-4deg); }
  85%  { transform: translateX(6px)  rotate(3deg); }
  100% { transform: translateX(0)    rotate(0deg); }
}

#mbox-box-emoji.mbox-box-burst {
  animation: mbox-box-burst .35s ease forwards;
}

@keyframes mbox-box-burst {
  0%   { transform: scale(1);   opacity: 1; filter: drop-shadow(0 0 24px rgba(211,168,88,.5)) brightness(1); }
  40%  { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 60px rgba(255,255,255,.9)) brightness(3); }
  100% { transform: scale(0);   opacity: 0; filter: none; }
}

#mbox-box-hint {
  font-size: .9rem;
  color: rgba(240,230,204,.5);
  letter-spacing: .04em;
  animation: mbox-hint-pulse 2s ease-in-out infinite;
}

@keyframes mbox-hint-pulse {
  0%, 100% { opacity: .5; }
  50%       { opacity: .9; }
}

/* ── Stage: reward ─────────────────────────────────────── */

#mbox-stage-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mbox-stage-reward.hidden { display: none; }

#mbox-stage-reward.mbox-reward-in {
  animation: mbox-reward-pop .55s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes mbox-reward-pop {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

#mbox-reward-shine {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: mbox-shine-pulse 1.5s ease-in-out infinite;
}

@keyframes mbox-shine-pulse {
  0%, 100% { opacity: 0;   transform: scale(.8); }
  50%       { opacity: .6;  transform: scale(1.1); }
}

#mbox-reward-card-big {
  background: rgba(20,16,10,.9);
  border: 2px solid var(--mbox-rarity-color, #d3a858);
  border-radius: 1.25rem;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow:
    0 0 40px rgba(var(--mbox-rarity-rgb, 211,168,88), .3),
    0 0 80px rgba(var(--mbox-rarity-rgb, 211,168,88), .15),
    inset 0 0 20px rgba(var(--mbox-rarity-rgb, 211,168,88), .05);
  position: relative;
  overflow: hidden;
  min-width: 220px;
}

#mbox-reward-card-big::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(var(--mbox-rarity-rgb, 211,168,88), .06) 25%,
    transparent 50%,
    rgba(var(--mbox-rarity-rgb, 211,168,88), .06) 75%,
    transparent 100%
  );
  animation: mbox-card-spin 6s linear infinite;
  pointer-events: none;
}

@keyframes mbox-card-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#mbox-reward-icon-large {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: .75rem;
  filter: drop-shadow(0 0 16px rgba(var(--mbox-rarity-rgb, 211,168,88), .6));
  animation: mbox-icon-bounce .6s ease .4s both;
}

@keyframes mbox-icon-bounce {
  0%   { transform: scale(0) rotate(-15deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#mbox-reward-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f0e6cc;
  margin-bottom: .5rem;
  font-family: 'Playfair Display', serif;
}

#mbox-reward-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .25rem .7rem;
  border-radius: 2rem;
  border: 1.5px solid var(--mbox-rarity-color, #d3a858);
  color: var(--mbox-rarity-color, #d3a858);
  background: rgba(var(--mbox-rarity-rgb, 211,168,88), .1);
  animation: mbox-badge-in .4s ease .5s both;
}

@keyframes mbox-badge-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

#mbox-reveal-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: mbox-claim-in .35s ease .7s both;
}

#mbox-reveal-claim-btn {
  padding: .8rem 2.8rem;
  background: var(--mbox-rarity-color, #d3a858);
  color: #0e0c0a;
  border: none;
  border-radius: .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  letter-spacing: .02em;
  box-shadow: 0 4px 24px rgba(var(--mbox-rarity-rgb, 211,168,88), .4);
  transition: transform .1s, box-shadow .15s;
}

#mbox-reveal-equip-btn {
  padding: .8rem 2rem;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
  transition: background .12s, border-color .12s, transform .1s;
}
#mbox-reveal-equip-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-2px);
}

#mbox-reveal-play-btn {
  padding: .8rem 1.5rem;
  background: transparent;
  color: rgba(255,255,255,.7);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: .6rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
#mbox-reveal-play-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.95);
  transform: translateY(-2px);
}

@keyframes mbox-claim-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

#mbox-reveal-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(var(--mbox-rarity-rgb, 211,168,88), .55);
}

/* Rarity themes applied to #mbox-reveal-overlay */
#mbox-reveal-overlay[data-rarity="rare"]  { --mbox-rarity-color: #58a0d3; --mbox-rarity-rgb: 88,160,211; }
#mbox-reveal-overlay[data-rarity="epic"]  { --mbox-rarity-color: #d358a0; --mbox-rarity-rgb: 211,88,160; }
#mbox-reveal-overlay[data-rarity="common"] { --mbox-rarity-color: #d3a858; --mbox-rarity-rgb: 211,168,88; }

#mbox-reveal-overlay[data-rarity="rare"]  #mbox-box-glow {
  background: radial-gradient(circle, rgba(88,160,211,.35) 0%, transparent 70%);
}
#mbox-reveal-overlay[data-rarity="epic"]  #mbox-box-glow {
  background: radial-gradient(circle, rgba(211,88,160,.35) 0%, transparent 70%);
}

#mbox-reveal-overlay[data-rarity="rare"]  #mbox-reward-shine {
  background: radial-gradient(circle, rgba(88,160,211,.4) 0%, transparent 70%);
}
#mbox-reveal-overlay[data-rarity="epic"]  #mbox-reward-shine {
  background: radial-gradient(circle, rgba(211,88,160,.4) 0%, transparent 70%);
}
#mbox-reveal-overlay:not([data-rarity="rare"]):not([data-rarity="epic"]) #mbox-reward-shine {
  background: radial-gradient(circle, rgba(211,168,88,.4) 0%, transparent 70%);
}

/* ── My Banners grid ──────────────────────────────────────────────────────── */
.mbox-banners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
}
.mbox-banner-tile {
  border-radius: .5rem;
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-height: 72px;
  position: relative;
  border: 1.5px solid rgba(255,255,255,.08);
  transition: border-color .15s;
}
.mbox-banner-tile:hover { border-color: rgba(255,255,255,.2); }
.mbox-banner-name {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  flex: 1;
}
.mbox-banner-rarity {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.mbox-rarity-common { color: rgba(211,168,88,.9); }
.mbox-rarity-rare   { color: rgba(88,160,211,.95); }
.mbox-rarity-epic   { color: rgba(211,88,160,.95); }
.mbox-banner-equip-btn {
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: .3rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  transition: background .12s;
  backdrop-filter: blur(4px);
  align-self: flex-start;
  text-shadow: none;
}
.mbox-banner-equip-btn:hover { background: rgba(0,0,0,.65); }
.mbox-banner-equip-btn.active {
  background: rgba(211,168,88,.35);
  border-color: rgba(211,168,88,.7);
  color: #f0e6cc;
}