/* =====================================================================
   ACTIVE BOOSTS — in the deck, behind a button
   ---------------------------------------------------------------------
   They used to stack down the left rail beside the reels, where a run of
   four boosts squeezed the machine and a run of none left a hole. The
   deck has spare width and nothing competing for it, so they live here:
   one button carrying the count, and a panel that opens upward over the
   deck rather than over the reels.
   ===================================================================== */

.boosts-dock { position: relative; justify-self: start; }

.boosts-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cyan-deep);
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(0.52rem, 0.78vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a8f4ff;
  background: linear-gradient(180deg, rgba(34, 227, 255, 0.14), rgba(0, 0, 0, 0.42));
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
}

.boosts-btn[hidden] { display: none; }

/* Live boosts pulse gently, so a running clock is visible without the
   panel being open. */
.boosts-btn.is-live {
  box-shadow: 0 0 14px rgba(34, 227, 255, 0.35);
  animation: boostsLive 2.6s ease-in-out infinite;
}

@keyframes boostsLive {
  0%, 100% { box-shadow: 0 0 12px rgba(34, 227, 255, 0.28); }
  50%      { box-shadow: 0 0 22px rgba(34, 227, 255, 0.6); }
}

.boosts-btn:hover { color: #fff; border-color: var(--cyan-bright); }

.boosts-btn-count {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  color: #06212b;
  background: var(--cyan-bright);
}

/* Opens UPWARD out of the deck, and lays the chips out in a ROW.

   Stacked vertically, four boosts made a panel tall enough to cover a
   third of the reels. The deck's spare space is horizontal, so the panel
   uses that instead: five chips side by side come to about seventy
   pixels, which clears the deck and reaches only the reels' bottom edge.
   A popover crossing that edge for a few seconds is fine; one covering
   the machine it describes is not. */
.boosts-dock .active-boosts {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 80;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  width: max-content;
  max-width: min(46rem, 74vw);
  max-height: 30vh;
  overflow-y: auto;
  padding: 9px;
  border-radius: var(--radius-md);
  border: 1px solid var(--cyan-deep);
  background: linear-gradient(180deg, rgba(10, 26, 32, 0.98), rgba(4, 10, 14, 0.98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(34, 227, 255, 0.22);
  animation: boostsPanelIn 180ms ease-out both;
}

@keyframes boostsPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.boosts-dock .active-boosts[hidden] { display: none; }

/* =====================================================================
   THE PAYTABLE — a real paytable
   ---------------------------------------------------------------------
   It was three columns of numbers with a header saying what they were.
   Now it reads like the plate on a machine: symbols ranked top to
   bottom, each with its art, its name, and what it pays at each length —
   and the top of the table looks like the top of the table.
   ===================================================================== */

.paytable-overlay .paytable-modal,
#paytableOverlay .paytable-modal {
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}

.paytable-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-width: thin;
}

.paytable-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.34));
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.paytable-row:hover {
  transform: translateX(3px);
  border-color: var(--cyan-deep);
  background: linear-gradient(180deg, rgba(34, 227, 255, 0.09), rgba(0, 0, 0, 0.34));
}

.paytable-row img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.pay-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The three lengths, as labelled cells rather than three bare numbers.
   Without the labels the columns had to be explained by a header the
   eye had already scrolled past. */
.paytable-row .amount {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.pay-len {
  position: relative;
  padding: 5px 4px 4px;
  border-radius: var(--radius-xs);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Each cell says which length it is, so the table explains itself. */
.pay-len::before {
  content: attr(data-len);
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  font-size: 0.42rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--text-dim);
}

.pay-len { padding-top: 11px; }

.pay-len-3 { color: var(--text-dim); }
.pay-len-4 { color: #a8f4ff; }
.pay-len-5 {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(255, 217, 77, 0.14), rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

/* The best-paying symbols are marked, so the table has a top rather than
   just being a list that happens to be sorted. */
.paytable-row.tier-top {
  border-color: var(--gold-deep);
  background:
    radial-gradient(ellipse at 0% 50%, rgba(255, 217, 77, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.34));
}

.paytable-row.tier-top .pay-name {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.45);
}

.paytable-row.tier-high { border-color: rgba(var(--violet-mid-rgb), 0.5); }
.paytable-row.tier-high .pay-name { color: #dcc0ff; }

/* The explanatory line, once, at the top — and it stays put while the
   symbols scroll under it. */
.paytable-row.paytable-head {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-template-columns: 1fr;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-dim);
  border-radius: 0;
  background: linear-gradient(180deg, var(--panel-bg-2), rgba(0, 0, 0, 0.9));
  text-align: center;
}

.paytable-head .pay-name {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-align: center;
}

.paytable-head .pay-name b { color: var(--gold); }
.paytable-head .pay-lengths { display: none; }

/* Symbols that do not pay by length say so across the whole width. */
.amount-single {
  grid-column: 1 / -1;
  align-self: center;
  padding: 6px;
  border-radius: var(--radius-xs);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cyan-bright);
  background: rgba(34, 227, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--cyan-deep);
}

@media (max-width: 720px) {
  .paytable-row { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 6px 8px; }
  .paytable-row img { width: 34px; height: 34px; }
  .pay-name { font-size: 0.68rem; }
  /* The figures drop to their own line rather than being squeezed into
     a third of a phone's width. */
  .paytable-row .amount { grid-column: 1 / -1; }
  .paytable-row.paytable-head { grid-template-columns: 1fr; }
  .boosts-dock .active-boosts { max-width: min(18rem, 78vw); }
}

/* In a row the chips size to their content rather than stretching. */
.boosts-dock .active-boosts .boost-chip {
  flex: 0 0 auto;
  animation: none;   /* they arrive as a set, not one at a time */
}

/* =====================================================================
   THE PRIZE WHEEL — ornate face, twelve equal seats
   ---------------------------------------------------------------------
   The ring, the pointer and the medallion are all SIBLINGS of the disc.
   Anything nested inside #wheelDisc turns with the spin, which is right
   for the seats and wrong for a frame that is supposed to hold them.
   ===================================================================== */

.wheel-stage { position: relative; }

/* The gold surround. Three layers: a broad brushed band, a ring of studs
   punched around it, and an inner lip that separates it from the face. */
.wheel-ring {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background:
    /* studs */
    repeating-conic-gradient(from 0deg,
      rgba(255, 246, 207, 0.9) 0deg 2deg,
      transparent 2deg 15deg),
    /* brushed gold */
    conic-gradient(from 0deg,
      #7a5200, #ffe9a3 8%, #b8860b 18%, #fff6cf 27%, #a86e00 38%,
      #ffd94d 50%, #8a5e00 62%, #ffe9a3 74%, #b8860b 85%, #7a5200 100%);
  box-shadow:
    0 0 0 3px #5c3c00,
    0 0 34px rgba(255, 184, 0, 0.5),
    inset 0 0 22px rgba(0, 0, 0, 0.55);
}

/* The inner lip, cut out so the face shows through. */
.wheel-ring::after {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #1a1206;
  box-shadow:
    inset 0 0 0 2px #ffd94d,
    inset 0 0 18px rgba(0, 0, 0, 0.9);
}

.wheel-disc { position: relative; z-index: 2; }

/* The hairlines that lived here painted a fixed 30deg grid — twelve
   equal seats — which stopped being true once slices became
   odds-proportional, and stopped existing at all once the face became an
   <svg> that strokes its dividers on the real boundaries. Both of the
   ::after layers that drew them are gone; wheel-fx.css keeps
   `.wheel-disc::after { display: none }` so nothing revives one. */

/* The seat geometry used to be split across this sheet and
   wheel-shop-icons.css, in rem, and the two halves disagreed about the
   box size (3.4rem here, 5rem there). It is now defined once, in
   percentages of the disc, in wheel-shop-icons.css. Nothing is left here
   deliberately — a second opinion on these lengths is what let the
   prizes end up in a huddle round the hub. */

/* The medallion. Sits above the disc and does not turn. */
.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 40% 30%, #fff6cf, #ffd94d 32%, #b8860b 62%, #6b4600 100%);
  box-shadow:
    0 0 0 4px #5c3c00,
    0 0 0 7px #ffd94d,
    0 6px 20px rgba(0, 0, 0, 0.75),
    inset 0 -6px 14px rgba(107, 70, 0, 0.7),
    inset 0 5px 12px rgba(255, 255, 255, 0.55);
}

.wheel-hub img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* The pointer, above everything, biting into the rim from the top. */
.wheel-pointer {
  z-index: 5;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
}

/* =====================================================================
   THE CLAIM
   ===================================================================== */

.wheel-claim {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(4, 8, 12, 0.9);
  animation: wheelClaimIn 220ms ease-out both;
}

/* The base rule sets display:grid, so the attribute alone will not hide
   it — the same trap .wheel-result already documents. */
.wheel-claim[hidden] { display: none !important; }

@keyframes wheelClaimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wheel-claim-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 34px;
  text-align: center;
  animation: wheelClaimPop 460ms cubic-bezier(0.16, 1.05, 0.3, 1.3) both;
}

@keyframes wheelClaimPop {
  from { opacity: 0; transform: scale(0.72) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.wheel-claim-rays {
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 217, 77, 0.16) 0deg 6deg,
    transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: wheelClaimRays 18s linear infinite;
}

@keyframes wheelClaimRays { to { transform: rotate(1turn); } }

.wheel-claim-art img {
  width: clamp(78px, 18vw, 118px);
  height: clamp(78px, 18vw, 118px);
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.75));
  animation: wheelClaimArt 2.4s ease-in-out infinite;
}

@keyframes wheelClaimArt {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.04); }
}

.wheel-claim-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 0 18px currentColor;
}

.wheel-claim-detail {
  font-size: 0.78rem;
  color: var(--text-dim);
  max-width: 20rem;
}

.wheel-claim-btn {
  margin-top: 6px;
  padding: 12px 42px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 4px;
  color: #1a0f00;
  background: linear-gradient(180deg, #fff3c4, #ffd94d 45%, #ffb800 75%, #d18a00);
  box-shadow: 0 0 22px rgba(255, 184, 0, 0.6),
              inset 0 -3px 8px rgba(140, 90, 0, 0.45),
              inset 0 3px 8px rgba(255, 255, 255, 0.6);
  transition: transform 120ms ease, box-shadow 220ms ease;
}

.wheel-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(255, 184, 0, 0.85); }
.wheel-claim-btn:active { transform: translateY(1px) scale(0.97); }

/* The rarest two prizes get a hotter surround. */
.wheel-claim[data-tier="big"] .wheel-claim-rays {
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 45, 85, 0.2) 0deg 5deg,
    rgba(255, 217, 77, 0.16) 5deg 10deg,
    transparent 10deg 16deg);
  animation-duration: 9s;
}


/* =====================================================================
   WHAT WAS ACTUALLY WON

   A list of figures, used by both claim panels. The wheel used to say
   "A pile of coins" and leave the number to gain chips that were painted
   behind its own backdrop, so the answer was never on the screen.
   ===================================================================== */
.reward-lines {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.reward-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.reward-line img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: none;
}

.reward-line b {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  color: var(--gold-bright, #ffd94d);
  letter-spacing: 0.02em;
}

.reward-line span {
  font-size: 0.86rem;
  color: var(--text-dim);
}

/* The prize's strapline, demoted to a subtitle under the real figures. */
.wheel-claim-strap {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.85;
}

/* =====================================================================
   THE WALK-AWAY CLAIM

   Shown over the machine when the player closes the wheel with a prize
   still waiting. Fixed rather than inset in a panel, because by the time
   it appears the wheel overlay has already gone.
   ===================================================================== */
.prize-claim {
  position: fixed;
  inset: 0;
  z-index: 11700;
  display: grid;
  place-items: center;
  background: rgba(4, 8, 12, 0.86);
  animation: wheelClaimIn 220ms ease-out both;
}
.prize-claim[hidden] { display: none !important; }

.prize-claim-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: min(22rem, 88vw);
  max-width: min(26rem, 92vw);
  padding: 26px 34px;
  text-align: center;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1a0f2e, #080410);
  border: 2px solid var(--gold);
  box-shadow: 0 0 46px rgba(255, 217, 77, 0.32);
  animation: wheelClaimPop 460ms cubic-bezier(0.16, 1.05, 0.3, 1.3) both;
}

.prize-claim-rays {
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 217, 77, 0.16) 0deg 5deg,
    transparent 5deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0 38%, transparent 68%);
          mask: radial-gradient(circle, #000 0 38%, transparent 68%);
  animation: wheelClaimRays 14s linear infinite;
}

.prize-claim-kicker {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

.prize-claim-art img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.8));
}

.prize-claim-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.prize-claim-detail { width: 100%; }

.prize-claim-btn {
  margin-top: 6px;
  padding: 12px 40px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #2a1600;
  background: linear-gradient(180deg, #ffe98a, #ffb800);
  box-shadow: 0 0 26px rgba(255, 184, 0, 0.6);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.prize-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(255, 184, 0, 0.85); }
.prize-claim-btn:active { transform: translateY(1px) scale(0.97); }

/* The mechanism symbols' one-line explanation on the paytable card. They
   pay free spins or a destination rather than coins, and a row that just
   said "FREE SPINS" in the amount column still did not say how. */
.pay-note {
  display: block;
  margin-top: 2px;
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-dim);
  white-space: normal;
}