/* =============================================================
   TREASURE SCRATCH — Luxury Casino Scratch Card
   Palette: Dark Purple / Black / Gold  •  Mobile-first (390px)
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  --bg-0: #0a0410;
  --bg-1: #1a0b28;
  --purple-deep: #2a0f45;
  --purple: #3d1461;
  --purple-soft: #4c1a75;

  --gold-1: #fff3c4;
  --gold-2: #ffd76a;
  --gold-3: #f5b428;
  --gold-4: #b8791a;
  --gold-line: #ffcf5c;

  --red-ribbon: #b8121a;
  --red-ribbon-2: #7d0a10;

  --silver-1: #d9dde2;
  --silver-2: #a9b0b8;
  --silver-3: #7d848c;

  --green-1: #35d06a;
  --green-2: #1f9e4a;

  --text: #fff6e6;
  --text-dim: #d9c9a8;

  --ease-lux: cubic-bezier(.19, 1, .22, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* bigger card that fills the available width (capped so it stays tidy) */
  --card-w: min(400px, 94vw);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  font-family: 'Kanit', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 80% at 50% -10%, #2a0f45 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

/* =============================================================
   AMBIENT BACKGROUND — soft moving glow + floating dust
   ============================================================= */
.bg-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: screen;
}
.bg-glow--1 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(245,180,40,.45), transparent 70%);
  top: -120px; left: -80px;
  animation: floatGlow 14s var(--ease-lux) infinite alternate;
}
.bg-glow--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(120,40,190,.5), transparent 70%);
  bottom: -160px; right: -120px;
  animation: floatGlow 18s var(--ease-lux) infinite alternate-reverse;
}
@keyframes floatGlow {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(40px,30px,0) scale(1.15); }
}

.bg-particles { position: absolute; inset: 0; }
.bg-particles i {
  position: absolute;
  bottom: -20px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-3));
  box-shadow: 0 0 8px rgba(255,200,90,.9);
  opacity: 0;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .7; }
  100% { transform: translateY(-105vh) scale(1); opacity: 0; }
}

/* =============================================================
   GAME SHELL
   ============================================================= */
.game {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  padding: 18px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- TOP BAR ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(61,20,97,.7), rgba(20,8,35,.85));
  border: 1px solid rgba(255,200,90,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.4);
}
.topbar__brand { display: flex; flex-direction: column; gap: 2px; }
.topbar__kicker {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-2);
}
.topbar__title {
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}

.chance {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3a1560, #200a38);
  border: 1px solid rgba(255,200,90,.4);
  box-shadow: inset 0 0 10px rgba(255,190,70,.15);
  min-width: 74px;
}
.chance__label { font-size: 10px; color: var(--text-dim); }
.chance__value {
  font-size: 16px; font-weight: 800; color: var(--gold-2);
  text-shadow: 0 0 10px rgba(255,190,70,.5);
}

/* =============================================================
   MAIN SCRATCH CARD
   ============================================================= */
.card-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.card {
  position: relative;
  width: var(--card-w);
  max-width: 100%;
  border-radius: 22px;
  padding: 16px 16px 14px;
  background:
    linear-gradient(180deg, #4a1673 0%, #2c0d47 55%, #1c0830 100%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px rgba(255,200,90,.55),
    0 24px 60px rgba(0,0,0,.6),
    inset 0 2px 0 rgba(255,255,255,.08);
  /* idle float */
  animation: cardIdle 5s ease-in-out infinite;
}
@keyframes cardIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(.15deg); }
}

/* shining animated edges (top/bottom sweep) */
.card__edge {
  position: absolute; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  opacity: .8;
}
.card__edge--top { top: 6px; }
.card__edge--bottom { bottom: 6px; }
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,215,106,.9), rgba(255,215,106,0) 40%, rgba(255,215,106,0) 60%, rgba(255,215,106,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: edgeShimmer 4s linear infinite;
}
@keyframes edgeShimmer { to { filter: hue-rotate(12deg) brightness(1.1); } }

.card__header { text-align: center; margin-bottom: 12px; }
.card__brand {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 2px; color: var(--gold-2);
}
.card__brand-th {
  font-size: 26px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-4) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.card__ticket {
  display: inline-block; margin-top: 6px;
  font-size: 11px; color: var(--text-dim);
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid rgba(255,200,90,.25);
  background: rgba(0,0,0,.25);
}

/* ---------- Scratch play area ---------- */
.scratch {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #120621;
  box-shadow: inset 0 0 0 2px rgba(255,200,90,.35), inset 0 10px 30px rgba(0,0,0,.6);
  touch-action: none;   /* allow custom scratch gestures */
}

/* Reward layer (under the canvas) */
.reward {
  position: absolute; inset: 0;
  z-index: 1;
  isolation: isolate;   /* keep child z-index values contained below the canvas */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 40%, #6a2a12 0%, #3a1408 60%, #200a04 100%);
}
.reward::after {
  /* treasure sheen */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 60%, rgba(255,190,70,.35), transparent 70%);
  pointer-events: none;
}
.reward__ribbon {
  position: relative; z-index: 3;
  font-weight: 700; font-size: 14px; color: #fff;
  padding: 5px 22px; border-radius: 6px;
  background: linear-gradient(180deg, #e0272f, var(--red-ribbon-2));
  box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom: 4px;
  opacity: 0; transform: translateY(-8px);
}
.reward__icon {
  position: relative; z-index: 3;
  width: 78px; height: 78px; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
  animation: coinBob 2.4s ease-in-out infinite;
}
@keyframes coinBob { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-6px) rotate(4deg);} }
.reward__title {
  position: relative; z-index: 3;
  font-family: 'Cinzel', serif; font-weight: 800;
  font-size: 15px; letter-spacing: 1px; color: var(--gold-1);
}
.reward__amount {
  position: relative; z-index: 3;
  font-size: 46px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 45%, var(--gold-4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.5));
}
.reward__amount span { font-size: 18px; -webkit-text-fill-color: var(--gold-2); }

/* small subtext under amount (used mainly for the lose state) */
.reward__note {
  position: relative; z-index: 3;
  font-size: 13px; color: var(--text-dim); margin-top: 2px;
}

/* ---- Lose state (amount = 0) : muted, no gold blast ---- */
.reward.is-lose { background: radial-gradient(120% 90% at 50% 40%, #3a2140 0%, #241531 60%, #160c22 100%); }
.reward.is-lose::after { background: radial-gradient(60% 45% at 50% 60%, rgba(150,120,180,.2), transparent 70%); }
.reward.is-lose .reward__ribbon {
  background: linear-gradient(180deg, #6a6f78, #3f434b);
}
.reward.is-lose .reward__amount {
  background: linear-gradient(180deg, #cfd3da, #8a9099);
  -webkit-background-clip: text; background-clip: text;
}
.reward.is-lose .reward__amount span { -webkit-text-fill-color: #aab0b8; }

/* Light burst behind reward on win */
.reward__burst {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 10px; height: 10px; transform: translate(-50%,-50%) scale(0);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,215,106,.0) 0deg, rgba(255,215,106,.85) 12deg, rgba(255,215,106,0) 24deg,
      rgba(255,215,106,0) 30deg, rgba(255,215,106,.85) 42deg, rgba(255,215,106,0) 54deg,
      rgba(255,215,106,0) 60deg, rgba(255,215,106,.85) 72deg, rgba(255,215,106,0) 84deg,
      rgba(255,215,106,0) 90deg, rgba(255,215,106,.85) 102deg, rgba(255,215,106,0) 114deg,
      rgba(255,215,106,0) 120deg, rgba(255,215,106,.85) 132deg, rgba(255,215,106,0) 144deg,
      rgba(255,215,106,0) 150deg, rgba(255,215,106,.85) 162deg, rgba(255,215,106,0) 174deg,
      rgba(255,215,106,0) 180deg, rgba(255,215,106,.85) 192deg, rgba(255,215,106,0) 204deg,
      rgba(255,215,106,0) 210deg, rgba(255,215,106,.85) 222deg, rgba(255,215,106,0) 234deg,
      rgba(255,215,106,0) 240deg, rgba(255,215,106,.85) 252deg, rgba(255,215,106,0) 264deg,
      rgba(255,215,106,0) 270deg, rgba(255,215,106,.85) 282deg, rgba(255,215,106,0) 294deg,
      rgba(255,215,106,0) 300deg, rgba(255,215,106,.85) 312deg, rgba(255,215,106,0) 324deg,
      rgba(255,215,106,0) 330deg, rgba(255,215,106,.85) 342deg, rgba(255,215,106,0) 354deg);
  opacity: 0;
}

/* Win state animations (toggled by JS) */
.reward.is-win .reward__ribbon { animation: ribbonPop .5s var(--ease-bounce) forwards; }
.reward.is-win .reward__amount { animation: rewardScale .6s var(--ease-bounce); }
.reward.is-win .reward__burst  { animation: burstSpin 4s linear infinite, burstIn .5s var(--ease-lux) forwards; }
@keyframes ribbonPop { to { opacity: 1; transform: translateY(0); } }
@keyframes rewardScale { 0%{ transform: scale(.6);} 60%{ transform: scale(1.18);} 100%{ transform: scale(1);} }
@keyframes burstIn { to { transform: translate(-50%,-50%) scale(34); opacity: .5; } }
@keyframes burstSpin { to { rotate: 360deg; } }

/* Scratch canvas sits above reward */
.scratch__canvas {
  position: absolute; inset: 0;
  z-index: 2;   /* above the reward layer until scratched away */
  width: 100%; height: 100%;
  cursor: grab;
  transition: opacity .4s var(--ease-lux);
}
.scratch__canvas.is-cleared { opacity: 0; pointer-events: none; }

/* Moving hand hint */
.hand-hint {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 5;
  transition: opacity .3s ease;
}
.hand-hint__text {
  font-size: 18px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.hand-hint__finger {
  font-size: 40px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: handMove 1.8s var(--ease-lux) infinite;
}
@keyframes handMove {
  0%,100% { transform: translate(-14px,-6px) rotate(-8deg); }
  50%     { transform: translate(16px,10px) rotate(6deg); }
}
.hand-hint.is-hidden { opacity: 0; }

/* Card CTA (under scratch area) */
.card__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.card__cta-btn {
  display: block; width: 100%; text-align: center;
  padding: 10px; border-radius: 12px;
  font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, #7a34b0, #4a1980);
  border: 1px solid rgba(255,200,90,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px rgba(0,0,0,.4);
}
.card__cta-links { display: flex; gap: 8px; }
.card__cta-sub {
  font-size: 12px; cursor: pointer; border: none;
  padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #d99a25, #9c6712);
  color: #2a1400; font-weight: 600;
  font-family: 'Kanit', sans-serif;
  transition: transform .12s var(--ease-lux), filter .12s ease;
}
.card__cta-sub:hover { transform: translateY(-1px); filter: brightness(1.08); }
.card__cta-sub:active { transform: translateY(1px); }
/* secondary "วิธีเล่น" pill = outlined style to differentiate */
.card__cta-sub--alt {
  background: rgba(0,0,0,.28);
  color: var(--gold-2);
  border: 1px solid rgba(255,200,90,.45);
}

/* ---- How-to-play list ---- */
.howto-list {
  list-style: none; text-align: left;
  margin: 6px 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.howto-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; color: var(--text); line-height: 1.35;
}
.howto-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #4a3410;
  background: linear-gradient(180deg, #ffe08a, #d4a53a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.howto-note {
  font-size: 12px; color: var(--text-dim);
  margin-bottom: 16px; text-align: center;
}

/* Instruction line */
.hint-line { font-size: 13px; color: var(--text-dim); text-align: center; }

/* =============================================================
   CLAIM BUTTON (big 3D gold)
   ============================================================= */
.claim-wrap {
  /* claim now happens inside the auto result popup, so this reserves no
     vertical space (keeps the game on a single screen) */
  display: none; justify-content: center;
  opacity: 0; transform: translateY(16px);
  pointer-events: none;
  transition: opacity .4s var(--ease-lux), transform .4s var(--ease-bounce);
}
.claim-wrap.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.btn-claim {
  position: relative;
  width: var(--card-w); max-width: 100%;
  padding: 16px; border: none; cursor: pointer;
  border-radius: 16px;
  font-family: 'Kanit', sans-serif; font-weight: 800; font-size: 20px;
  color: #1e5b2a;
  background: linear-gradient(180deg, #6ef29a 0%, var(--green-1) 45%, var(--green-2) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -4px 0 rgba(0,0,0,.2),
    0 10px 24px rgba(31,158,74,.45);
  overflow: hidden;
  transition: transform .12s var(--ease-lux), box-shadow .12s ease;
  animation: claimPulse 1.6s ease-in-out infinite;
}
@keyframes claimPulse {
  0%,100% { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.2), 0 10px 24px rgba(31,158,74,.45); }
  50%     { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.2), 0 10px 34px rgba(53,208,106,.8); }
}
.btn-claim:hover { transform: translateY(-2px); }
.btn-claim:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); }
.btn-claim__label { position: relative; z-index: 2; }
.btn-claim__glow {
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg);
  animation: sheen 2.4s linear infinite;
}
@keyframes sheen { 0%{ left: -60%; } 60%,100%{ left: 130%; } }

/* =============================================================
   RESULT POPUP
   ============================================================= */
.popup {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-lux);
}
.popup.is-open { opacity: 1; pointer-events: auto; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(4,2,10,.78); backdrop-filter: blur(4px); }
.popup__card {
  position: relative; z-index: 2;
  width: 300px; max-width: 86vw;
  padding: 30px 24px 24px; text-align: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #3a1560 0%, #1c0830 100%);
  border: 1px solid rgba(255,200,90,.4);
  box-shadow: 0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  transform: scale(.85); transition: transform .4s var(--ease-bounce);
}
.popup.is-open .popup__card { transform: scale(1); }
.popup__check {
  width: 72px; height: 72px; margin: 0 auto 14px;
  display: grid; place-items: center;
  font-size: 38px; font-weight: 800; color: #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--green-1), var(--green-2));
  box-shadow: 0 0 0 6px rgba(53,208,106,.2), 0 10px 24px rgba(31,158,74,.5);
  animation: checkPop .5s var(--ease-bounce);
}
@keyframes checkPop { 0%{ transform: scale(0) rotate(-30deg);} 100%{ transform: scale(1) rotate(0);} }
.popup__title { font-size: 20px; font-weight: 700; color: var(--gold-1); margin-bottom: 8px; }
.popup__reward {
  font-size: 22px; font-weight: 800; margin-bottom: 16px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.popup__chance {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px;
  font-size: 13px; color: var(--text-dim);
}
.popup__chance strong { font-size: 20px; color: var(--gold-2); }

.btn-secondary {
  width: 100%; padding: 13px; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(255,200,90,.4);
  font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 15px; color: #2a1400;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.4);
  transition: transform .12s var(--ease-lux);
}
.btn-secondary:hover { transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(1px); }

/* =============================================================
   PRIZE LIST MODAL
   ============================================================= */
.popup__card--wide { width: 340px; }
.prize-sub { font-size: 13px; color: var(--text-dim); margin: -2px 0 14px; }
.prize-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 18px;
}
.prize-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  border: 1px solid rgba(255,200,90,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.prize-item__coin {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: rgba(0,0,0,.55);
  box-shadow: inset 0 0 4px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4);
}
/* tier palettes (set via .tier-* class from JS) */
.tier-purple { background: radial-gradient(circle at 35% 30%, #d9a6ff, #7a2fd0 65%, #4a1785); color:#fff; }
.tier-gold   { background: radial-gradient(circle at 35% 30%, #fff3c4, #f5b428 60%, #b8791a); }
.tier-silver { background: radial-gradient(circle at 35% 30%, #ffffff, #c4cbd2 60%, #8a9099); }
.tier-bronze { background: radial-gradient(circle at 35% 30%, #ffd8a8, #c97f35 60%, #8a5216); color:#fff; }
.tier-green  { background: radial-gradient(circle at 35% 30%, #b6f5c9, #35d06a 60%, #1f9e4a); color:#fff; }
.tier-gray   { background: radial-gradient(circle at 35% 30%, #cfd3da, #9096a0 60%, #5c626c); color:#fff; }
.prize-item__text { line-height: 1.15; }
.prize-item__amt { font-weight: 800; font-size: 15px; color: var(--gold-2); }
.prize-item__amt small { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.prize-item__lbl { font-size: 10.5px; color: var(--text-dim); }
.prize-item.is-jackpot { border-color: rgba(217,166,255,.6); box-shadow: 0 0 14px rgba(138,75,255,.35); }
.prize-item.is-jackpot .prize-item__amt { color: #e0b6ff; }

/* =============================================================
   FX LAYER (confetti + coin explosion)
   ============================================================= */
.fx-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.fx-piece {
  position: absolute; top: -20px; will-change: transform, opacity;
}
.fx-confetti { width: 9px; height: 14px; border-radius: 2px; }
.fx-coin {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-3) 60%, var(--gold-4));
  box-shadow: inset 0 0 4px rgba(120,70,0,.6), 0 0 8px rgba(255,200,90,.6);
  border: 2px solid var(--gold-4);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (min-width: 480px) {
  :root { --card-w: 420px; }
  .game { padding-top: 26px; }
}
@media (max-width: 360px) {
  .topbar__title { font-size: 15px; }
  .reward__amount { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* =============================================================
   ACTIVE THEME — GOLD & SILVER (Platinum Luxury)
   This block overrides the base palette. To revert to the
   original Dark Purple / Gold look, delete everything below.
   ============================================================= */
body{ background: radial-gradient(120% 80% at 50% -10%, #3c3c44 0%, #232329 45%, #121214 100%);}
.bg-glow--1{ background: radial-gradient(circle, rgba(255,206,110,.5), transparent 70%);}
.bg-glow--2{ background: radial-gradient(circle, rgba(206,216,232,.45), transparent 70%);}
.topbar{ background: linear-gradient(180deg, rgba(60,60,68,.8), rgba(20,20,24,.92)); border-color: rgba(255,206,110,.4);}
.topbar__kicker{ color:#ffd98a;}
.topbar__title{ background-image: linear-gradient(180deg,#fff3c4,#e9ecf2 55%,#f3b52a);}
.chance{ background: linear-gradient(180deg,#43434d,#212127); border-color: rgba(210,220,235,.55);}
.chance__value{ color:#ffd98a; text-shadow:0 0 10px rgba(255,206,110,.5);}
.card{ background: linear-gradient(180deg,#40404a 0%, #2a2a30 55%, #1a1a1e 100%);
  box-shadow:0 0 0 2px rgba(255,206,110,.6), 0 0 0 4px rgba(210,220,235,.18), 0 24px 60px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.1);}
.card::before{ background: linear-gradient(135deg, rgba(255,206,110,.95), rgba(210,220,235,.5) 45%, rgba(210,220,235,.4) 55%, rgba(255,206,110,.9));}
.card__edge{ background: linear-gradient(90deg, transparent, #e9ecf2, transparent);}
.card__brand{ color:#dfe3ea;}
.card__brand-th{ background-image: linear-gradient(180deg,#fff3c4 0%, #ffd76a 45%, #b8791a 100%);}
.card__ticket{ border-color: rgba(210,220,235,.4);}
.reward{ background: radial-gradient(120% 90% at 50% 40%, #ffe4a0 0%, #d4a53a 55%, #9c7420 100%);}
.reward::after{ background: radial-gradient(60% 45% at 50% 60%, rgba(255,255,255,.35), transparent 70%);}
.reward__title{ color:#6a4a12;}
.reward__amount{ background-image: linear-gradient(180deg,#ffffff,#eef1f5 45%,#c2c7d0);}
.reward__amount span{ -webkit-text-fill-color:#f4f6fa;}
.card__cta-btn{ background: linear-gradient(180deg,#eef1f5,#b9bec7); color:#2a2a30; border-color: rgba(255,206,110,.5);}
.card__cta-sub{ background: linear-gradient(180deg,#ffe08a,#d4a53a); color:#4a3410;}
.card__cta-sub--alt{ background: rgba(0,0,0,.32); color:#ffd98a; border:1px solid rgba(255,206,110,.5);}
.hint-line{ color:#c4c9d2;}
.popup__card{ background: linear-gradient(180deg,#3a3a42 0%, #1a1a1e 100%); border-color: rgba(255,206,110,.45);}
.popup__title{ color:#ffd98a;}
.popup__reward{ background-image: linear-gradient(180deg,#fff3c4,#f3b52a);}
.popup__chance strong{ color:#ffd98a;}
.btn-secondary{ background: linear-gradient(180deg,#ffe08a,#d4a53a); color:#4a3410;}
.prize-item{ background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.28)); border-color: rgba(210,220,235,.25);}
.reward.is-lose{ background: radial-gradient(120% 90% at 50% 40%, #55555f 0%, #303036 60%, #1c1c20 100%);}
.reward.is-lose .reward__amount{ background-image: linear-gradient(180deg,#e6e9ef,#9096a0);}
/* claim button -> gold */
.btn-claim{ color:#4a3410; animation: none;
  background: linear-gradient(180deg,#fff3c4 0%, #ffd76a 45%, #d4a53a 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(120,80,10,.25), 0 10px 24px rgba(212,165,58,.5);}