/* =====================================================================
   HOLDS
   The HOLD button is SPIN's twin — same pill, same weight, same press
   feel — separated only by colour, so it reads as the other half of a
   pair rather than as one of the small utility buttons underneath.
   Amber was chosen because green and red are already spoken for by
   SPIN and AUTOPLAY, and it is the colour a real cabinet uses for hold.
   ===================================================================== */
.spin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn.hold {
  background: linear-gradient(180deg, #ffcf5c, #f0a52a 50%, #a35c05);
  border-color: #ffe7a8;
  position: relative;
  /* Deliberately NOT a flex container. The label must sit dead centre
     the way SPIN's does, and the charge count rides as a corner badge
     rather than as a sibling that shoves the label off-centre. */
  text-align: center;
}

.btn.hold .hold-label {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Dark and flat until the machine actually offers a hold — being able
   to hold and being invited to are different states and must look it. */
.btn.hold:disabled {
  filter: saturate(0.25) brightness(0.7);
}

/* Locked outright (no charges, below the unlock level): drained of
   colour entirely so it never reads as merely "not right now". */
.btn.hold.locked {
  background: linear-gradient(180deg, #6e6a63, #4a4741 60%, #2c2a26);
  border-color: rgba(255,255,255,0.25);
}

/* On offer: pulses for attention, the same way a real cabinet flashes
   its hold lamps. */
@keyframes holdOffer {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 6px rgba(0,0,0,0.25),
                         0 3px 6px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,193,64,0.65); }
  50%      { box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 6px rgba(0,0,0,0.25),
                         0 3px 6px rgba(0,0,0,0.35), 0 0 22px 6px rgba(255,193,64,0.55); }
}
.btn.hold.offered {
  animation: holdOffer 1.1s ease-in-out infinite;
}

/* Armed: held down, waiting for reel picks. */
.btn.hold.armed {
  background: linear-gradient(180deg, #fff3d0, #ffc93f 55%, #e0a415);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.35), 0 0 18px 4px rgba(255,201,63,0.5);
}

/* Dark ink on the bright armed face — white on pale amber was
   unreadable, and the armed state is the one that most needs to be. */
.btn.hold.armed .hold-label {
  color: #3a2600;
  text-shadow: none;
}

/* Scoped through .btn.hold on purpose. The mobile block above sets
   `.control-bar span { width: 100% }`, which outranks a bare
   `.hold-count` and was stretching the badge across the whole button. */
.btn.hold .hold-count {
  position: absolute;
  top: -6px;
  right: -4px;
  left: auto;
  width: max-content;
  min-width: 20px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius-pill);
  background: #2a1c00;
  border: 2px solid #ffe7a8;
  color: #ffd97a !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45);
}
.btn.hold .hold-count[hidden] { display: none !important; }

/* ---- Reels as hold toggles ---- */
/* Only clickable while hold mode is armed; the rest of the time the
   reels must stay inert so a stray tap never does anything. */
.reel-col.holdable {
  cursor: pointer;
}
.reel-col.holdable::after {
  content: 'HOLD';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,201,63,0.7);
  color: #ffd97a;
  pointer-events: none;
  z-index: 6;
}

.reel-col.held {
  box-shadow: inset 0 0 0 3px #ffc93f, 0 0 20px 3px rgba(255,201,63,0.55);
}
.reel-col.held::after {
  content: 'HELD';
  background: #ffc93f;
  border-color: #fff3cf;
  color: #3a2600;
}

/* The moment of a held reel sitting still while the others tear past
   is the entire appeal, so it gets a steady glow rather than a flash. */
@keyframes heldGlow {
  0%, 100% { box-shadow: inset 0 0 0 3px #ffc93f, 0 0 14px 2px rgba(255,201,63,0.45); }
  50%      { box-shadow: inset 0 0 0 3px #fff0c2, 0 0 26px 6px rgba(255,201,63,0.7); }
}
.reel-col.was-held {
  animation: heldGlow 700ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn.hold.offered,
  .reel-col.was-held { animation: none; }
}

/* Shop icon for the hold pack: a miniature of the button itself. */
.shop-icon-hold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(180deg, #ffcf5c, #f0a52a 50%, #a35c05);
  border: 2px solid #ffe7a8;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 6px rgba(0,0,0,0.25);
}

/* A share of the falling coins render in front of the machine instead of
   behind it. Without this the rain is a flat backdrop; with it the
   screen has a foreground and the downpour reads as three-dimensional. */
.falling-coin.coin-near {
  z-index: 2;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7)) brightness(1.12);
}

/* =====================================================================
   SHOP CATEGORY TABS — RETIRED, AND UNREACHABLE
   ---------------------------------------------------------------------
   The shop is one scrolling list now (see the note in slots/index.html
   where #shopTabs used to be), so nothing in the DOM carries .shop-tabs,
   .shop-tab or .shop-subtab any more and every rule below is inert.

   Left in place rather than swept out because the same selectors are
   spread over five stylesheets and .shop-tab-blurb — which IS still
   used, for the search result count — shares their prefix; a careless
   grep-and-delete takes it with them. If the tabs are not coming back,
   the rules to remove are in: this file, tutorial.css, wheel-shop-icons.css
   and arcade.css, and .shop-tab-blurb must survive all four.
   ===================================================================== */
.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem auto 0.25rem;
  padding: 0 0.5rem;
  max-width: 900px;
}

.shop-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: #cfe9ef;
  background: linear-gradient(180deg, rgba(14,32,44,0.95), rgba(6,16,24,0.95));
  border: 2px solid rgba(123, 243, 255, 0.35);
  transition: transform 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, box-shadow 0.18s ease;
}

.shop-tab:hover { transform: translateY(-2px); border-color: rgba(123,243,255,0.7); }
.shop-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The selected tab is lifted and lit rather than merely tinted — with
   four of these side by side a subtle difference is easy to lose. */
.shop-tab.active {
  color: #04222c;
  background: linear-gradient(180deg, #a8f4ff, #22e3ff 55%, #0e9fc4);
  border-color: #eafffe;
  box-shadow: 0 0 18px 3px rgba(34, 227, 255, 0.45), inset 0 2px 0 rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.shop-tab-count {
  font-size: 0.72rem;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
}
.shop-tab.active .shop-tab-count {
  background: rgba(4, 34, 44, 0.8);
  color: #eafffe;
  border-color: rgba(4, 34, 44, 0.9);
}

.shop-tab-blurb {
  text-align: center;
  margin: 0.15rem 0 0.6rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  min-height: 1.2em;     /* reserved so switching tabs doesn't jog the grid */
}

/* The rising-price note under each card. Deliberately quiet — it is
   reference information, not part of the sell. */
.shop-card-step {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .shop-tab { padding: 8px 13px; font-size: 0.75rem; }
  .shop-tabs { gap: 0.35rem; }
}

/* A wordless curtain (the shop's, now) must not leave its label panel
   sitting in the middle of the screen. */
.curtain-label[hidden] { display: none !important; }

/* Locked HOLD shows the unlock level in place of a charge count, so the
   requirement reads off the button without having to press it. */
.btn.hold .hold-count.is-lock {
  background: #2b2b2b;
  border-color: rgba(255, 255, 255, 0.4);
  color: #e6e6e6 !important;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

/* Cashing in trades one currency for the other, so its icon shows both
   sides of the trade rather than just what you receive. */
.shop-icon-trade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-icon-trade img { width: 30px; height: 30px; object-fit: contain; }
.shop-icon-arrow { color: var(--text-dim); font-size: 1.1rem; }

/* A blocked card explains itself where the rising-price note would go. */
.shop-card-step.is-blocked {
  color: #ff9c9c;
  opacity: 1;
}

/* Double Down armed: the stake on screen is already the doubled figure,
   so the stepper is marked to explain why it jumped. */
@keyframes betDoubled {
  0%, 100% { border-color: #ffd94d; box-shadow: 0 0 10px 1px rgba(255,217,77,0.4); }
  50%      { border-color: #fff3c4; box-shadow: 0 0 20px 5px rgba(255,217,77,0.75); }
}
.bet-stepper.doubled {
  animation: betDoubled 1.2s ease-in-out infinite;
}
/* Sits INSIDE the stepper: the element clips its children with
   overflow:hidden, so a badge hung outside its bounds would never be
   seen. */
.bet-stepper { position: relative; }
.bet-stepper.doubled::after {
  content: 'DOUBLED';
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: #ffd94d;
  color: #3a2600;
  font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
  .bet-stepper.doubled { animation: none; }
}

/* Explanatory chips are read, not glanced at. They wrap onto several
   lines, sit still long enough to finish a sentence, and only then
   fade — the flying animation that suits "+250 coins" makes a
   two-clause explanation impossible to follow. */
@keyframes gainHold {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.94); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.98); }
}
.gain-chip.gain-chip-wide {
  white-space: normal;
  max-width: min(30rem, 86vw);
  text-align: center;
  line-height: 1.35;
  font-size: 0.92rem;
  padding: 14px 20px;
  animation: gainHold 4200ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .gain-chip.gain-chip-wide { animation-duration: 4200ms; }
}

/* =====================================================================
   SPIN MODIFIERS — the bar under the reels and its picker.
   ===================================================================== */
.modifier-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
}
.modifier-bar[hidden] { display: none !important; }

.modifier-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: #04222c;
  background: linear-gradient(180deg, #a8f4ff, #22e3ff 60%, #0e9fc4);
  border: 2px solid #eafffe;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.modifier-btn:hover:not(:disabled) { transform: translateY(-2px); }
.modifier-btn:disabled { filter: saturate(0.2) brightness(0.65); cursor: not-allowed; }

.modifier-count {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(4, 34, 44, 0.85);
  color: #eafffe;
}

.modifier-armed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.modifier-armed img { width: 22px; height: 22px; object-fit: contain; }

.picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 11500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.82);
}
.picker-overlay.open { display: flex; }

.picker-panel {
  width: min(46rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.6rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #0d2230, #061019);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 40px rgba(34, 227, 255, 0.35);
  text-align: center;
}
.picker-title {
  font-family: 'Orbitron', sans-serif;
  color: var(--cyan-bright);
  margin-bottom: 0.35rem;
}
.picker-sub { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.1rem; }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

.picker-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.8rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--border-dim);
  cursor: pointer;
  color: #fff;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.picker-option:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(34, 227, 255, 0.4);
}
.picker-option img { width: 54px; height: 54px; object-fit: contain; }
.picker-big {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--cyan-bright);
}
.picker-label { font-size: 0.76rem; letter-spacing: 0.03em; }
.picker-note { font-size: 0.66rem; color: var(--gold); }

.picker-cancel {
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 2px solid var(--border-dim);
  color: var(--text-dim);
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
}
.picker-cancel:hover { color: #fff; border-color: #fff; }