/* ======================================================================
   FRUIT GARDEN — ROYAL WHEEL
   Premium mobile mini-game stylesheet
   ====================================================================== */

/* =========================
   Design Tokens
   ========================= */
:root {
  /* --- internal game canvas --- */
  --game-width: 390px;
  --game-height: 805px;
  --game-scale: 1;

  /* --- core palette --- */
  /* royal red / gold palette (matches the supplied artwork) */
  --garden-dark: #3a070c;
  --garden-darker: #1f0306;
  --garden-green: #7a1620;
  --emerald: #19b878;
  --jade: #12a06c;

  --gold-1: #fff1a2;
  --gold-2: #ffd442;
  --gold-3: #e59a16;
  --gold-4: #9b5908;

  --cream: #fff8dc;
  --text: #fffdf2;
  --text-dim: #cfe9dc;
  --muted: rgba(255, 253, 242, 0.62);
  --muted-2: rgba(255, 253, 242, 0.4);

  --panel-dark: #4a0a10;
  --panel-light: #fdf6df;
  --panel-line: rgba(255, 212, 66, 0.55);

  --red-warn: #ff6b52;
  --red-warn-2: #e0392a;

  /* slice tones */
  --slice-red: #c8101c;
  --slice-cream: #f8dc86;

  /* chip colors */
  --chip-green: #1a9a5c;
  --chip-blue: #2277dd;
  --chip-purple: #8a3fd4;
  --chip-red: #d43b3b;

  /* shadows */
  --shadow-gold: 0 0 0 1px rgba(255, 212, 66, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-raised: 0 2px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 6px rgba(0, 0, 0, 0.35) inset, 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-deep: 0 18px 40px rgba(0, 0, 0, 0.55);

  /* borders */
  --border-gold: 2px solid var(--gold-2);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;

  /* typography */
  --font-display: "Trebuchet MS", "Segoe UI", ui-rounded, system-ui, sans-serif;
  --font-number: "Segoe UI", ui-rounded, system-ui, sans-serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-chip: "Segoe UI", system-ui, sans-serif;

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* durations */
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
  --spin-duration: 7000ms;

  /* component sizes */
  --wheel-w: 350px;                 /* frame art is 720x818 -> 350 x 397.7 */
  --wheel-h: 397.7px;               /* frame art: rim, crest, hub, pedestal and the slots plate */
  --frame-dy: 14px;                 /* how far the wheel frame sits lower on the stage */
  --wheel-section-h: 450px;         /* ends exactly at the bottom of the stage plate (354 + 95.9) */
  --hub-x: 174.2px;                 /* hub centre inside the frame art */
  --hub-y: 194.8px;
  --disc-cx: 174.76px;                 /* centre of the rim's inner ellipse in the frame (the disc spins about this point) */
  --disc-cy: 191.25px;
  --disc-r: 158.11px;                 /* disc radius, a little under the rim */
  --disc-k: 1.0258;                    /* the art is drawn ~2.6% squashed vertically: the disc is a circle squashed by 1/k */
  --card-w: 71px;
  --chip-size: 56px;

  /* z-index layers */
  --z-bg: 0;
  --z-atmos: 1;
  --z-stage: 2;
  --z-wheel: 3;
  --z-pointer: 4;
  --z-controls: 5;
  --z-hud: 6;
  --z-particles: 7;
  --z-result: 8;
  --z-modal: 9;
  --z-toast: 10;
}

/* =========================
   Reset
   ========================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Themed letterbox: the space above/below the game canvas is never a
     flat black void — it fades into the same garden palette. */
  background:
    radial-gradient(ellipse 90% 60% at 50% 15%, rgba(150, 40, 30, 0.4), transparent 65%),
    linear-gradient(180deg, #3d0a10 0%, #2a0509 45%, #170205 80%, #0a0102 100%);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-ui);
  color: var(--text);
  touch-action: manipulation;
}
button { font-family: inherit; }
img { -webkit-user-drag: none; user-drag: none; }
svg { display: block; }
ol, h2 { margin: 0; }

/* =========================
   Game Shell
   ========================= */
/* The game canvas is 390 design px wide and scaled to the screen (see applyScale in script.js).
   This layer fills what is left on the left and right with the same hall art
   (assets/ui/bg-wide.webp = the background and its mirror image, tiled sideways), lined up with the
   canvas' own background, so there is never an empty strip beside the game. */
.game-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--game-top, 0px);
  height: calc(var(--canvas-h, 805px) * var(--game-scale, 1));
  z-index: 0;
  pointer-events: none;
  background-color: #170205;
  background-image: url("assets/ui/bg-wide.webp");
  background-repeat: repeat-x;
  background-size: calc(var(--art-w, 453px) * 2 * var(--game-scale, 1)) calc(var(--art-h, 805px) * var(--game-scale, 1));
  background-position: var(--backdrop-x, 0px) var(--backdrop-y, 0px);
}
/* Game logo (assets/ui/banner.webp, 1400x258, cut out of banner.png so it has a transparent
   background). It sits right on the top edge of the game, over the bottom of the live-stream
   area, tucked 1px under the game so there is no gap. --banner-w is set from JS (canvas scale). */
.game-banner {
  position: fixed;
  left: 50%;
  top: calc(var(--game-top, 0px) + 1px - var(--banner-w, 224px) * 256 / 1400);
  width: var(--banner-w, 224px);
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 3px 6px rgba(20, 0, 4, 0.55));
}

/* laptop / desktop: just the phone-shaped game in the middle of the themed page, no extra art beside it */
html.is-desktop .game-backdrop { display: none; }
html.is-desktop .fruit-game {
  border-radius: 18px;
  box-shadow: var(--shadow-deep);
}

.fruit-game {
  /* Positioned so exactly --top-gap is empty above it and --bottom-gap
     empty below it (both set from JS as a % of viewport height).
     transform-origin: top center keeps the TOP edge pinned at --game-top
     regardless of scale, so the gap above never drifts. */
  position: fixed;
  left: 50%;
  top: var(--game-top, 0px);
  width: var(--game-width);
  height: var(--game-height);
  transform: translateX(-50%) scale(var(--game-scale));
  transform-origin: top center;
  isolation: isolate;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  background: var(--garden-darker);
  font-variant-numeric: tabular-nums;
}

/* =========================
   Background
   ========================= */
.bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* the royal hall artwork (assets/ui/bg.webp, from assets/fruits/background.png) */
.bg-art {
  z-index: var(--z-bg);
  background:
    url("assets/ui/bg.webp") center bottom / var(--art-w, 453px) var(--art-h, 805px) no-repeat,
    linear-gradient(180deg, #4a0a10 0%, #2a0509 60%, #170205 100%);
}
.bg-vignette {
  z-index: var(--z-atmos);
  background: radial-gradient(ellipse 100% 80% at 50% 42%, transparent 45%, rgba(20, 0, 2, 0.5) 100%);
}
.bg-spotlight {
  z-index: var(--z-atmos);
  background: radial-gradient(circle at 50% 30%, rgba(255, 224, 150, 0.22), transparent 55%);
  mix-blend-mode: screen;
}
.bg-particles {
  z-index: var(--z-atmos);
  overflow: hidden;
}
.ambient-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-1);
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--gold-2));
  animation: driftUp linear infinite;
}
@keyframes driftUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.4; }
  100% { transform: translateY(-260px) translateX(var(--drift-x, 12px)); opacity: 0; }
}

/* =========================
   HUD
   ========================= */
.hud {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-3);
}
.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.balance-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, rgba(110, 17, 25, 0.92), rgba(48, 6, 11, 0.92));
  border: 1.5px solid var(--gold-3);
  border-radius: 999px;
  padding: 3px 16px 3px 4px;
  box-shadow: var(--shadow-raised), 0 0 0 1px rgba(255, 224, 150, 0.18) inset;
}
.coin-icon img { display: block; width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }
.balance-value {
  font-family: var(--font-number);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.3px;
  color: var(--cream);
  transition: color var(--dur-fast);
}
.balance-value.is-up { color: var(--gold-1); }

/* HUD buttons are the gold diamond badge artwork (assets/ui/icon-*.webp, cut from
   allrupeewhatplusspeaker.png), no drawn button behind them. */
.hud-btn {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  transition: transform var(--dur-fast) ease, filter var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.hud-btn img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hud-btn:hover { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)) brightness(1.1); }
.hud-btn:active { transform: scale(0.92); }
/* muted: the speaker badge greys out and gets a red slash */
#soundBtn.is-muted img { filter: grayscale(0.85) brightness(0.72); }
#soundBtn.is-muted::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: #e0261f;
  box-shadow: 0 0 0 1px rgba(255, 235, 200, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =========================
   Stage
   ========================= */
.stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--stage-pad, 44px);
}

/* =========================
   Wheel
   ========================= */
.wheel-section {
  position: relative;
  width: 100%;
  height: calc(var(--wheel-section-h) * var(--wheel-k, 1));   /* the scene inside shrinks with the screen */
  flex-shrink: 0;
}
/* the wheel scene (glow, stage, wheel, clock) is laid out at 390 x 450 and scaled as one piece */
.wheel-scaler {
  position: absolute;
  left: 50%;
  top: 0;
  width: 390px;
  height: var(--wheel-section-h);
  margin-left: -195px;
  transform: scale(var(--wheel-k, 1));
  transform-origin: 50% 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* The stage the wheel stands on (assets/ui/stage.webp, from tile.png). It runs the
   full width of the game (396px, 3px bleed each side, so no margin left or right),
   95.9px tall. The frame's pedestal and slots plate sit on its back half and its
   front rim shows below them. */
.wheel-stage-img {
  position: absolute;
  left: 50%;
  top: 354px;
  width: 396px;
  max-width: none;
  transform: translateX(-50%);
  z-index: var(--z-atmos);
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}

.wheel-outer {
  position: relative;
  width: var(--wheel-w);
  height: var(--wheel-h);
  top: var(--frame-dy);            /* frame (and the disc/history inside it) sits lower on the stage */
  z-index: var(--z-wheel);
}

/* soft golden glow behind the wheel */
.wheel-glow {
  position: absolute;
  left: 50%;
  top: calc(var(--hub-y) + var(--frame-dy) - 6px);
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 90, 0.42) 0%, rgba(255, 170, 60, 0.14) 48%, transparent 72%);
  z-index: var(--z-atmos);
  animation: wheelBreathe 4.5s ease-in-out infinite;
}
@keyframes wheelBreathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

/* the frame art: crest, rim, hub, base. Sits ABOVE the spinning face. */
.wheel-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

/* the disc that sits in the frame's cut-out. It is a true circle that spins about the
   rim's centre and is squashed vertically by 1/k, exactly like the artwork's rim, so
   the band and its gems stay concentric with the frame at every angle. */
.wheel-disc {
  position: absolute;
  left: calc(var(--disc-cx) - var(--disc-r));
  top: calc(var(--disc-cy) - var(--disc-r));
  width: calc(var(--disc-r) * 2);
  height: calc(var(--disc-r) * 2);
  transform: scaleY(calc(1 / var(--disc-k)));
  z-index: var(--z-wheel);
}
.wheel-rotator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(var(--wheel-rotation, 0deg));
  will-change: transform;
}

/* the spinning face is the original artwork's own wedges (assets/ui/wheel-disc.webp,
   cut from rotatingwheel.png), so at rest it is pixel-identical to the supplied wheel */
.wheel-disc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wheel-dim-overlay,
.wheel-winner-highlight {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}
.wheel-dim-overlay.active { opacity: 1; }
.wheel-winner-highlight.active {
  opacity: 1;
  animation: winnerPulse 1.1s ease-in-out infinite;
}
@keyframes winnerPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

.wheel-segments {
  position: absolute;
  inset: 0;
}
.wheel-segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--seg-angle));
}
.segment-content {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--seg-r, 100px));
  /* stay upright while the wheel turns, and undo the disc's vertical squash so fruits keep their shape */
  transform: translate(-50%, -50%) rotate(calc(-1 * (var(--wheel-rotation, 0deg) + var(--seg-angle)))) scaleY(var(--disc-k));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  /* no transform transition: it is driven every frame by the spin, and easing it made the labels lag and tilt */
  transition: filter var(--dur-med) ease;
}
.fruit-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
  transition: transform var(--dur-med) ease, filter var(--dur-med) ease;
}
.segment-mult {
  font-family: var(--font-number);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #fff3c4;
  text-shadow: 0 1px 0 #6d0a10, 0 0 3px rgba(80, 0, 6, 0.9), 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* light wedges (cream / orange in the art) take a dark red number */
.wheel-segment.seg-light .segment-mult {
  color: #8f0a14;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.9), 0 0 3px rgba(255, 246, 214, 0.9);
}
.wheel-segment.is-winner .fruit-icon {
  transform: scale(1.14);
  filter: drop-shadow(0 0 8px var(--gold-2)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.wheel-segment.is-winner .segment-mult {
  text-shadow: 0 0 6px var(--gold-2), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.wheel-segment.is-dimmed .segment-content {
  filter: saturate(0.55) brightness(0.7);
}

/* the crest's own red gem in the frame art is the pointer, so the old SVG one is gone */
.wheel-pointer { display: none; }

/* the result, shown in the middle of the wheel (the red hub button) the moment the wheel stops,
   before the win / loss popup comes up */
.hub-result {
  position: absolute;
  left: var(--hub-x);
  top: var(--hub-y);
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.35);
  transition: opacity 240ms ease, transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hub-result.show { opacity: 1; transform: scale(1); }
.hub-result-fruit img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(255, 225, 130, 0.95)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.hub-result.show .hub-result-fruit img { animation: hubFruitBob 1.1s ease-in-out infinite; }
@keyframes hubFruitBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.06); } }
.hub-result-mult {
  margin-top: -1px;
  font-family: var(--font-number);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.3px;
  color: #fff3c4;
  text-shadow: 0 1px 0 #6d0a10, 0 0 5px rgba(60, 0, 6, 0.9), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.fruit-game[data-perf="on"] .hub-result.show .hub-result-fruit img { animation: none; }

/* particles burst from the hub */
.wheel-particles {
  position: absolute;
  inset: 0;
  z-index: var(--z-particles);
  pointer-events: none;
  overflow: visible;
}
.spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* betting timer: the alarm clock, ring drawn on its cream face */
.betting-timer {
  position: absolute;
  right: 4px;
  top: 306px;              /* above the stage (which starts at y 354), beside the wheel */
  width: 52px;
  height: 54px;
  z-index: var(--z-pointer);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.timer-clock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* the cream face of the clock art (measured on assets/ui/clock.webp) is centred at 49.8% / 61.0%, ~52% of its width */
.timer-ring {
  position: absolute;
  left: 49.7%;
  top: 61%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.timer-track {
  fill: none;
  stroke: rgba(160, 100, 40, 0.2);
  stroke-width: 6;
}
.timer-progress {
  fill: none;
  stroke: #d9931a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 276.5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 980ms linear, stroke 240ms ease;
}
.timer-center {
  position: absolute;
  left: 49.7%;
  top: 61%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.timer-value {
  font-family: var(--font-number);
  font-weight: 900;
  font-size: 11.5px;
  line-height: 1;
  color: #7a1620;
}
.timer-label {
  font-size: 4.5px;
  letter-spacing: 0.4px;
  color: #a5651a;
  font-weight: 800;
  margin-top: 0.5px;
}
.betting-timer[data-urgent="true"] .timer-progress { stroke: #e0261f; }
.betting-timer[data-urgent="true"] .timer-value { color: #d1180f; }
.betting-timer[data-urgent="true"] {
  animation: timerPulse 0.9s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.betting-timer.shake { animation: timerShake 360ms ease; }
@keyframes timerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* =========================
   History (7 slots on the stage's gold plate)
   ========================= */
/* the pedestal plate's 7 slots are part of the frame art: first slot at x 78.3, pitch 31.2, 26 x 27 each */
.history-strip {
  position: absolute;
  z-index: 8;
  left: 78.3px;
  top: 363.4px;
  width: 214px;
  height: 27px;
  display: flex;
  gap: 5.2px;
  pointer-events: none;
}
.history-chip {
  position: relative;
  flex: 0 0 26px;
  height: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: chipEnter 360ms ease;
}
@keyframes chipEnter {
  0% { transform: translateY(-8px) scale(0.7); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.history-chip img {
  width: 19px;
  height: 19px;
  margin-top: -2px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.history-chip span {
  margin-top: -3px;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
  color: #ffe58a;
  font-family: var(--font-number);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.7);
}
/* the newest result wears a small "new" tag */
.history-chip.is-new::before {
  content: "new";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 4px 2px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ff4a3a, #c1120e);
  border: 1px solid #ffd27a;
  font-size: 6.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fff;
  text-transform: lowercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* =========================
   Betting Board
   ========================= */
.bet-board {
  width: 100%;
  margin-top: 3px;
  padding: 0 8px;
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-shrink: 0;
  transition: filter var(--dur-med) ease, opacity var(--dur-med) ease;
}
.bet-board[data-state="locked"] {
  filter: saturate(0.65) brightness(0.88);
  pointer-events: none;
}

/* card art is 280 x 700 (ratio 0.4): red header for the fruit, cream body, gold pill for your stake */
.bet-card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h, 177.5px);
  flex: 0 0 auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
  transition: transform var(--dur-fast) ease, filter var(--dur-med) ease;
  -webkit-tap-highlight-color: transparent;
}
.bet-card:active { transform: translateY(2px) scale(0.97); }
/* card art is cut in three (header / cream body / stake pill) and the cream body is stretched,
   so the card can be shorter on short screens without squashing the header or the pill */
.bet-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--card-w) * 0.768) 0 calc(var(--card-w) * 0.5) 0;
  border-image: url("assets/ui/card.webp") 215 0 140 0 fill / calc(var(--card-w) * 0.768) 0 calc(var(--card-w) * 0.5) 0 stretch;
}
.bet-card-head {
  position: absolute;
  left: 0;
  right: 0;
  /* the card art's red header is ~4%..23% of the card's height and ~60px wide;
     the fruit is centred in it and kept inside (32px, floating +-1.5px) */
  top: 9px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bet-card-fruit {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
  transition: transform var(--dur-med) ease;
  animation: fruitFloat 3.4s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
@keyframes fruitFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
/* everyone's total on this fruit */
.bet-card-pool {
  position: absolute;
  left: 0;
  right: 0;
  top: 53px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 900;
  color: #7a1620;
  font-family: var(--font-number);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* coins that have flown in from the rupee badge and rest on the card (behind your own chips) */
.bet-card-coins {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 72px;
  bottom: 36px;
  transform: scale(var(--pile-k, 1));
  pointer-events: none;
}
.table-coin {
  position: absolute;
  width: 18px;
  height: 18px;
  left: calc(50% + var(--tx, 0px));
  top: calc(50% + var(--ty, 0px));
  transform: translate(-50%, -50%) rotate(var(--tr, 0deg));
  filter: drop-shadow(0 1px 1.5px rgba(70, 40, 0, 0.55));
  animation: tableCoinLand 260ms ease-out;
}
@keyframes tableCoinLand {
  0%   { transform: translate(-50%, -50%) rotate(var(--tr, 0deg)) scale(1.35); }
  100% { transform: translate(-50%, -50%) rotate(var(--tr, 0deg)) scale(1); }
}
/* pile of your chips */
.bet-card-chips {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 72px;
  bottom: 36px;
  transform: scale(var(--pile-k, 1));
}
.bet-card-chips .mini-chip {
  position: absolute;
  width: 26px;
  height: 26px;
  left: calc(50% + var(--cx, 0px));
  top: calc(50% + var(--cy, 0px));
  transform: translate(-50%, -50%) rotate(var(--cr, 0deg));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  animation: chipDrop 260ms ease backwards;
}
@keyframes chipDrop {
  0% { transform: translate(-50%, -190%) rotate(var(--cr, 0deg)) scale(0.5); opacity: 0; }
  60% { transform: translate(-50%, -46%) rotate(var(--cr, 0deg)) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--cr, 0deg)) scale(1); }
}
/* your stake, in the gold pill */
.bet-card-total {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 15.6px;
  height: 15.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #6b3a08;
  font-family: var(--font-number);
  text-shadow: 0 1px 0 rgba(255, 244, 190, 0.85);
}

.bet-card[data-bet="active"] {
  filter: drop-shadow(0 0 7px rgba(255, 212, 66, 0.85)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}
.bet-card[data-bet="active"] .bet-card-total { color: #8a1010; }

.bet-card.is-winner {
  animation: winnerCardPulse 900ms ease-in-out 3;
}
.bet-card.is-winner .bet-card-fruit { transform: scale(1.1); }
@keyframes winnerCardPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 212, 66, 0.7)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 236, 130, 1)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
}

/* =========================
   Chips
   ========================= */
.control-bar {
  width: 100%;
  margin-top: 4px;
  padding: 3px 10px calc(4px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.chip-rebet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.chip-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 68px;
  flex-shrink: 0;
}
.chip {
  position: relative;
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  transition: transform 180ms ease, filter 180ms ease;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
}
.chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.chip:active { transform: translateY(2px) scale(0.94); }
.chip.active {
  transform: translateY(-7px) scale(1.14);
  animation: chipSelectedPulse 1.4s ease-in-out infinite;
}
@keyframes chipSelectedPulse {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 212, 66, 0.95)) drop-shadow(0 5px 4px rgba(0, 0, 0, 0.5)); }
  50% { filter: drop-shadow(0 0 15px rgba(255, 240, 150, 1)) drop-shadow(0 5px 4px rgba(0, 0, 0, 0.5)); }
}

.flying-chip {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: var(--z-particles);
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}

.flying-coin {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: var(--z-particles);
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 214, 90, 0.85)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.action-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* red plaque buttons (assets/ui/plaque.webp) for REBET and CLEAR */
.plaque-btn {
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  background: url("assets/ui/plaque.webp") center / 100% 100% no-repeat;
  color: #ffe9a0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
  transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.plaque-btn:active { transform: scale(0.95); }
.plaque-main {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 0 #5a0509, 0 2px 3px rgba(0, 0, 0, 0.6);
}
.plaque-sub {
  margin-top: 2px;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
  color: #ffd56a;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.plaque-btn--rebet { width: 120px; height: 48px; }
.plaque-btn--clear { width: 96px; height: 32px; }
.plaque-btn--clear .plaque-main { font-size: 11px; letter-spacing: 0.8px; }
.plaque-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
}
.plaque-btn.holding { animation: holdPulse 480ms ease-in-out infinite; }
@keyframes holdPulse {
  0%, 100% { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5)) brightness(1); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 212, 66, 0.9)) brightness(1.3); }
}

/* generic gold pill (used by the modals) */
.pill-btn {
  min-width: 96px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--gold-3);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
}
.pill-btn:active { transform: scale(0.95); }
.pill-btn--gold {
  background: linear-gradient(180deg, #ffe58a, #d99a1c 55%, #8a570b 100%);
  color: #4a2e05;
  box-shadow: var(--shadow-raised);
}
.pill-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* =========================
   Result Effects
   ========================= */
.result-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-result);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-med) ease;
}
.result-overlay.show { opacity: 1; }
.result-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55) 80%);
}
.result-card {
  position: relative;
  width: 232px;
  padding: 24px 18px 20px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 190, 90, 0.35), transparent 60%),
    linear-gradient(180deg, #7d1621, #35060b);
  border: 3px solid var(--gold-2);
  box-shadow:
    0 0 0 2px #8a570b,
    inset 0 0 0 2px rgba(255, 230, 150, 0.35),
    0 0 44px rgba(255, 190, 60, 0.5),
    var(--shadow-deep);
  text-align: center;
  transform: scale(0.75);
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.result-overlay.show .result-card { transform: scale(1); }
.result-card.is-lose {
  padding: 18px 16px 16px;
  border-color: rgba(255, 212, 66, 0.55);
  box-shadow: 0 0 0 2px #5a3a08, inset 0 0 0 2px rgba(255, 230, 150, 0.2), 0 0 20px rgba(0, 0, 0, 0.4), var(--shadow-deep);
}
.result-fruit-badge {
  width: 74px;
  height: 74px;
  margin: -4px auto 2px;
  filter: drop-shadow(0 0 12px rgba(255, 210, 90, 0.75)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
  animation: badgeBob 1.6s ease-in-out infinite;
}
.result-card.is-lose .result-fruit-badge { width: 54px; height: 54px; animation: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
@keyframes badgeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.result-fruit-badge img { width: 100%; height: 100%; object-fit: contain; }
/* the title sits on the red plaque ribbon */
.result-title {
  width: 190px;
  height: 46px;
  margin: 2px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("assets/ui/plaque.webp") center / 100% 100% no-repeat;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1.4px;
  color: #ffe9a0;
  text-shadow: 0 1px 0 #5a0509, 0 2px 3px rgba(0, 0, 0, 0.6);
}
.result-card.is-lose .result-title { width: 210px; height: 40px; font-size: 11.5px; letter-spacing: 0.6px; }
.result-amount {
  font-family: var(--font-number);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  margin-top: 8px;
  background: linear-gradient(180deg, #fffbd6, #ffd54a 60%, #e59a16);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}
.result-card.is-lose .result-amount { font-size: 16px; margin-top: 6px; background: none; color: var(--text-dim); filter: none; -webkit-background-clip: border-box; }
.result-burst {
  position: absolute;
  inset: -40px;
  pointer-events: none;
}
.confetti-bit {
  position: absolute;
  width: 6px;
  height: 10px;
  border-radius: 1px;
}

/* =========================
   Toasts
   ========================= */
.toast-stack {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  width: 90%;
}
.toast {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(48, 6, 11, 0.94);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 220ms ease, transform 220ms ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-error { border-color: var(--red-warn); color: #ffd9d0; }
.toast.toast-success { border-color: var(--emerald); }
.toast.toast-warning { border-color: var(--gold-2); }

/* =========================
   Modals
   ========================= */
.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(25, 2, 4, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) ease;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal-panel {
  position: relative;
  width: 82%;
  max-width: 320px;
  background: linear-gradient(180deg, #7a1620, #35060a);
  border: 2px solid var(--gold-2);
  border-radius: var(--radius-lg);
  padding: 24px 20px 20px;
  box-shadow: 0 0 40px rgba(255, 212, 66, 0.25), var(--shadow-deep);
  transform: translateY(14px) scale(0.96);
  transition: transform var(--dur-med) ease;
}
.modal-backdrop.show .modal-panel { transform: translateY(0) scale(1); }
.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-1);
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.5px;
}
.modal-rules {
  margin: 0 0 18px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.modal-ok { width: 100%; }
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close svg { width: 14px; height: 14px; stroke: var(--text-dim); stroke-width: 2; }
.modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.toggle-switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  cursor: pointer;
  transition: background 180ms ease;
}
.toggle-switch[aria-pressed="true"] { background: var(--emerald); }
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 180ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.toggle-switch[aria-pressed="true"] .toggle-knob { transform: translateX(18px); }

/* =========================
   Phase / State Driven Styling
   ========================= */
.fruit-game[data-phase="spinning"] .bet-board,
.fruit-game[data-phase="locked"] .bet-board { filter: saturate(0.65) brightness(0.88); pointer-events: none; }
.fruit-game[data-phase="spinning"] .chip-row,
.fruit-game[data-phase="locked"] .chip-row { pointer-events: none; opacity: 0.55; }
.fruit-game[data-phase="betting"] .wheel-pointer.tick { animation: none; }

/* =========================
   Performance Mode
   ========================= */
.fruit-game[data-perf="on"] .idle-layer,
.fruit-game[data-perf="on"] .ambient-dot,
.fruit-game[data-perf="on"] .wheel-glow,
.fruit-game[data-perf="on"] .wheel-center-ring,
.fruit-game[data-perf="on"] .bet-card-fruit,
.fruit-game[data-perf="on"] .chip.active {
  animation: none !important;
}
.fruit-game[data-perf="on"] .bg-particles { display: none; }

/* =========================
   Reduced Motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .idle-layer, .ambient-dot, .wheel-glow, .wheel-center-ring,
  .bet-card-fruit, .chip.active, .wheel-pointer {
    animation: none !important;
  }
}