/* Typeable bet field — looks like the old static number, behaves like
   an input. Fixed width so the stepper doesn't jump as digits are
   added. */
.bet-value-input {
  appearance: none;
  -moz-appearance: textfield;
  border: none;
  background: transparent;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-bright);
  text-align: right;
  width: 4ch;
  padding: 0;
  outline: none;
}
.bet-value-input::-webkit-outer-spin-button,
.bet-value-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.bet-value-input:focus {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bet-value-input:disabled { opacity: 0.6; cursor: not-allowed; }
.bet-value { display: inline-flex; align-items: center; gap: 1px; }

/* Says so when the bet had to be reduced to fit. */
.bet-stepper.reduced { border-color: #f0a; box-shadow: 0 0 12px rgba(255, 0, 170, 0.35); }

/* =====================================================================
   SHOP POLISH — shining item borders, drifting motes, richer stage.
   ===================================================================== */

/* Slow-drifting sparkle field behind the whole shop. */
.shop-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 217, 77, 0.55), transparent),
    radial-gradient(2px 2px at 78% 26%, rgba(255, 180, 90, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 34% 62%, rgba(255, 240, 190, 0.5), transparent),
    radial-gradient(2.5px 2.5px at 88% 74%, rgba(255, 120, 140, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 55% 88%, rgba(255, 217, 77, 0.45), transparent),
    radial-gradient(2px 2px at 22% 44%, rgba(255, 200, 120, 0.35), transparent);
  animation: shopMotes 14s linear infinite;
}
@keyframes shopMotes {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  50%  { transform: translateY(-30px) scale(1.05); opacity: 0.45; }
  100% { transform: translateY(-60px) scale(1); opacity: 0.9; }
}

/* A soft spotlight over the shelf. */
.shop-screen::after {
  content: '';
  position: fixed;
  left: 50%;
  top: -25%;
  width: 130vw;
  height: 90vh;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 217, 77, 0.16), transparent 62%);
  animation: shopSpot 9s ease-in-out infinite alternate;
}
@keyframes shopSpot {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}
.shop-inner { position: relative; z-index: 1; }

/* ---- Item cards: a light that travels around the border ---- */
.shop-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The shine ring. Masked to the border so only the frame lights up. */
.shop-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--shine-angle, 0deg),
    transparent 0deg,
    transparent 250deg,
    rgba(255, 240, 190, 0.9) 300deg,
    var(--gold-bright) 330deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shineSpin 3.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@property --shine-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes shineSpin {
  to { --shine-angle: 360deg; }
}
/* Stagger so the shelf doesn't pulse in unison. */
.shop-card:nth-child(3n)   ::before { animation-delay: -1.1s; }
.shop-card:nth-child(3n+1) ::before { animation-delay: -2.2s; }

/* A highlight sweeping across the face on hover. */
.shop-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -50%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transition: left 650ms ease;
  z-index: 0;
}
.shop-card:hover::after { left: 120%; }

/* Affordable items glow a little; unaffordable ones stay dim. */
.shop-card.unaffordable::before { opacity: 0.25; }

.shop-card-icon img { position: relative; z-index: 2; }
.shop-card-label, .shop-card-blurb, .shop-card-buy { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .shop-screen::before, .shop-screen::after, .shop-card::before { animation: none; }
  .shop-card::after { transition: none; }
}

/* =====================================================================
   CURTAINS — rebuilt for weight.
   Heavy fabric doesn't move linearly: it accelerates as it falls shut
   and eases as it's drawn back. The halves also scale slightly and the
   folds compress, which is what sells them as cloth rather than two
   sliding rectangles.
   ===================================================================== */
.curtain {
  /* Different curves each way: a shove closed, a haul open. */
  transition:
    transform 900ms cubic-bezier(0.32, 0, 0.16, 1),
    filter 900ms ease;
  transform-origin: top center;
  filter: brightness(0.75);
  /* Fold shading rides on top of the base stripe gradient. */
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 18%,
      rgba(255,255,255,0.06) 40%, rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.45) 100%),
    repeating-linear-gradient(90deg,
      #6b0d14 0px, #a4141f 26px, #c81b28 44px, #a4141f 62px, #6b0d14 88px);
}
.curtains.closed .curtain {
  transition:
    transform 820ms cubic-bezier(0.5, 0, 0.2, 1),
    filter 820ms ease;
  filter: brightness(1);
}

/* Slight horizontal squash while open, relaxing as they close — the
   gathered fabric spreading out. */
.curtain-left  { transform: translateX(-101%) scaleX(0.94); }
.curtain-right { transform: translateX(101%)  scaleX(0.94); }
.curtains.closed .curtain-left,
.curtains.closed .curtain-right { transform: translateX(0) scaleX(1); }

/* Valance drops with a slight overshoot, like it's on a rail. */
.curtain-valance {
  transition: transform 620ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* Label fades in only once the halves have actually met. */
.curtain-label {
  transition: opacity 300ms ease 380ms, transform 500ms cubic-bezier(0.2, 1.3, 0.4, 1) 380ms;
  transform: translateY(14px) scale(0.94);
}
.curtains.closed .curtain-label { transform: translateY(0) scale(1); }

/* A seam of light where the two halves meet, brightest as they close. */
.curtains::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 217, 77, 0.55), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.curtains.closed::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .curtain, .curtain-valance, .curtain-label { transition-duration: 140ms; }
}

/* Queue strip inside the chest overlay: what else is waiting. */
.chest-queue {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.chest-queue[hidden] { display: none; }

.chest-queue-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 5px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.chest-queue-item img { width: 26px; height: auto; object-fit: contain; }
.chest-queue-count {
  font-weight: 700;
  color: var(--gold-bright);
  font-size: 0.72rem;
}
.chest-queue-item[data-tier="silver"] { border-color: #b9c6cf; }
.chest-queue-item[data-tier="gold"]   { border-color: var(--gold-bright); }
.chest-queue-item[data-tier="mythic"] { border-color: var(--violet-mid); }
.chest-queue-item[data-tier="jk1x"]   { border-color: var(--cyan-bright); }

/* jk1x tier styling for the chest overlay itself. */
.chest-overlay[data-tier="jk1x"] .chest-modal {
  border-color: var(--cyan-bright);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85), 0 0 60px rgba(34, 227, 255, 0.45);
}
.chest-overlay[data-tier="jk1x"] { --chest-aura: rgba(34, 227, 255, 0.9); }
.chest-overlay[data-tier="jk1x"] .chest-rays {
  background: repeating-conic-gradient(from 0deg, rgba(34, 227, 255, 0.22) 0deg 6deg, transparent 6deg 12deg);
}
/* Its own artwork now — just the glow, no tinting. */
.chest-overlay[data-tier="jk1x"] .chest-img { filter: drop-shadow(0 0 28px var(--cyan-bright)) drop-shadow(0 4px 10px rgba(0,0,0,0.8)); }

@media (max-width: 768px) {
  .chest-queue-item { font-size: 0.55rem; padding: 3px 8px 3px 4px; }
  .chest-queue-item img { width: 20px; }
}