/* KoinFlip Candy 20
   High-energy presentation layer: rotating lobby cinema, dimensional motion,
   deliberate non-WebGL fallbacks, and celebratory result choreography. */

@font-face {
  font-family: "KoinFlip Display";
  src: url("/fonts/barlow-condensed-black.woff") format("woff");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --c20-cyan: #17e6ff;
  --c20-mint: #43ffc4;
  --c20-violet: #a76cff;
  --c20-pink: #ff4fb8;
  --c20-gold: #ffd768;
  --c20-orange: #ff8a3d;
  --c20-ink: #020812;
  --c20-panel: #071522;
  --c20-display: "KoinFlip Display", "Arial Narrow", sans-serif;
  --c20-ui: Inter, "Helvetica Neue", system-ui, sans-serif;
  --c20-ease: cubic-bezier(.16, 1, .3, 1);
  --c20-spring: cubic-bezier(.16, 1, .3, 1);
}

html[data-candy20="true"] {
  background: #020812;
  scroll-behavior: smooth;
}

html[data-candy20="true"] body {
  font-family: var(--c20-ui);
  background:
    radial-gradient(circle at 82% 8%, rgba(80, 62, 181, .12), transparent 31rem),
    radial-gradient(circle at 12% 28%, rgba(19, 220, 240, .08), transparent 28rem),
    #020812;
}

html[data-candy20="true"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0, transparent 76%);
}

html[data-candy20="true"] button,
html[data-candy20="true"] input,
html[data-candy20="true"] select {
  font-family: var(--c20-ui);
}

/* ---------- Shell energy ---------- */

.topbar,
.app-header,
.shell-header {
  isolation: isolate;
}

.topbar::after,
.app-header::after,
.shell-header::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c20-cyan), var(--c20-violet), transparent);
  opacity: .58;
  filter: drop-shadow(0 0 8px var(--c20-cyan));
  animation: c20-header-breathe 5s ease-in-out infinite;
}

.wallet-pill,
.balance-pill,
[data-wallet-balance] {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 22px rgba(23,230,255,.08);
}

.wallet-pill::after,
.balance-pill::after,
[data-wallet-balance]::after {
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.20) 49%, transparent 61%);
  transform: translateX(-75%) rotate(8deg);
  animation: c20-wallet-sheen 6.5s ease-in-out infinite;
  pointer-events: none;
}

.button,
.px-primary,
.og-play,
.flip-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .24s var(--c20-spring), filter .24s ease, box-shadow .24s ease;
}

.button::after,
.px-primary::after,
.og-play::after,
.flip-action::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: linear-gradient(108deg, transparent 24%, rgba(255,255,255,.38) 47%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .7s var(--c20-ease);
}

.button:hover::after,
.px-primary:hover::after,
.og-play:hover::after,
.flip-action:hover::after { transform: translateX(120%); }

.button:hover,
.px-primary:hover,
.og-play:hover,
.flip-action:hover {
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 10px 30px rgba(23,230,255,.12), inset 0 1px rgba(255,255,255,.3);
}

.button:active,
.px-primary:active,
.og-play:active,
.flip-action:active {
  filter: saturate(1.04) brightness(.98);
}

/* ---------- Rotating cinema hero ---------- */

.cinema-hero.candy-hero {
  --c20-hero-x: 0;
  --c20-hero-y: 0;
  --c20-scroll: 0;
  position: relative;
  min-height: clamp(560px, 72vh, 780px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(105,232,255,.22);
  border-radius: 30px;
  background: #030a15;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -80px 120px rgba(0,0,0,.35),
    0 28px 90px rgba(0,0,0,.38),
    0 0 50px rgba(23,230,255,.06);
  perspective: 1400px;
  transform-style: preserve-3d;
}

.candy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255,255,255,.10), transparent 16%, transparent 82%, rgba(255,255,255,.05)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .42;
}

.candy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 0 70px rgba(23,230,255,.035);
}

.candy-hero-viewport {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.candy-hero-slide {
  --scene-accent: var(--c20-cyan);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  padding: clamp(42px, 6vw, 88px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(9%,0,-100px) rotateY(-5deg) scale(.96);
  transition: opacity .75s ease, transform .95s var(--c20-ease), visibility .75s;
  transform-style: preserve-3d;
}

.candy-hero-slide[data-scene="stack"] { --scene-accent: var(--c20-gold); }
.candy-hero-slide[data-scene="play"] { --scene-accent: var(--c20-violet); }

.candy-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, calc(var(--c20-scroll) * -18px), 0) rotateY(0) scale(1);
  z-index: 2;
}

.candy-hero-slide.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translate3d(-8%,0,-120px) rotateY(5deg) scale(.96);
}

/* A scene has one animation clock. Hidden slides and offscreen heroes do
   no decorative work, while their final layout stays ready for re-entry. */
.candy-hero-slide:not(.is-active):not(.is-leaving) *,
.candy-hero-slide:not(.is-active):not(.is-leaving) *::before,
.candy-hero-slide:not(.is-active):not(.is-leaving) *::after,
.candy-hero.is-offscreen *,
.candy-hero.is-offscreen *::before,
.candy-hero.is-offscreen *::after,
html[data-candy-hidden="true"] .candy-hero *,
html[data-candy-hidden="true"] .candy-hero *::before,
html[data-candy-hidden="true"] .candy-hero *::after {
  animation-play-state: paused !important;
}

.candy-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 45%, color-mix(in srgb, var(--scene-accent) 28%, transparent), transparent 31%),
    radial-gradient(circle at 64% 72%, rgba(255,79,184,.12), transparent 34%),
    linear-gradient(118deg, #030b16 18%, #071526 58%, #030811 100%);
}

.candy-hero-slide::after {
  content: "";
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  right: -18%;
  bottom: -65%;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 34%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 60px color-mix(in srgb, var(--scene-accent) 12%, transparent), inset 0 0 45px color-mix(in srgb, var(--scene-accent) 6%, transparent);
  transform: rotateX(69deg);
}

.candy-hero-copy {
  position: relative;
  z-index: 4;
  max-width: 650px;
  transform: translate3d(calc(var(--c20-hero-x) * -7px), calc(var(--c20-hero-y) * -5px), 60px);
  transition: transform .18s ease-out;
}

.candy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--scene-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, var(--scene-accent) 50%, transparent);
}

.candy-kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 3px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.candy-hero-copy h1 {
  margin: 22px 0 18px;
  max-width: 760px;
  color: #f6fbff;
  font-family: var(--c20-display);
  font-size: clamp(58px, 7.2vw, 116px);
  font-weight: 400;
  font-style: normal;
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.42));
}

.candy-hero-copy h1 em {
  display: block;
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--scene-accent) 80%, white);
  text-shadow: 0 0 34px color-mix(in srgb, var(--scene-accent) 28%, transparent);
}

.candy-hero-copy > p {
  max-width: 470px;
  margin: 0 0 26px;
  color: #b5c8d8;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
}

.candy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.candy-hero-actions .candy-cta {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 15px;
  color: #031018;
  background: linear-gradient(135deg, var(--scene-accent), color-mix(in srgb, var(--scene-accent) 55%, white));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--scene-accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .03em;
  text-decoration: none;
  transition: transform .25s var(--c20-spring), box-shadow .25s;
}

.candy-hero-actions .candy-cta:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 17px 42px color-mix(in srgb, var(--scene-accent) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.7);
}

.candy-hero-actions .candy-ghost {
  color: #eaf7ff;
  background: rgba(9,27,42,.62);
  border: 1px solid rgba(178,225,255,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(16px);
}

.candy-proof {
  display: flex;
  gap: 18px;
  margin-top: 30px;
  color: #8da7ba;
  font-size: 12px;
  font-weight: 700;
}

.candy-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.candy-proof i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--scene-accent);
  box-shadow: 0 0 12px var(--scene-accent);
}

.candy-visual {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 480px;
  z-index: 2;
  background: none;
  transform: translate3d(calc(var(--c20-hero-x) * 13px), calc(var(--c20-hero-y) * 10px), 90px) rotateY(calc(var(--c20-hero-x) * 3deg)) rotateX(calc(var(--c20-hero-y) * -3deg));
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
}

.cinema-hero-art.candy-visual {
  background-image:
    linear-gradient(90deg, rgba(3,10,21,.92), rgba(3,10,21,.62) 38%, rgba(3,10,21,.18)),
    url('/art/cinema12/approved-hero.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal;
}

/* Hero scene: dimensional KoinFlip coin */
.candy-coin-stage {
  position: absolute;
  inset: 6% 2% 0 8%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.candy-coin-halo,
.candy-coin-halo::before,
.candy-coin-halo::after {
  position: absolute;
  width: min(36vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(48,238,255,.28);
  box-shadow: inset 0 0 25px rgba(23,230,255,.07), 0 0 30px rgba(23,230,255,.05);
  content: "";
}

.candy-coin-halo { transform: rotateX(64deg) rotateZ(12deg); animation: c20-halo-spin 15s linear infinite; }
.candy-coin-halo::before { inset: 10%; width: 80%; border-color: rgba(167,108,255,.30); animation: c20-halo-spin-reverse 11s linear infinite; }
.candy-coin-halo::after { inset: 22%; width: 56%; border-style: dashed; border-color: rgba(67,255,196,.42); animation: c20-halo-spin 8s linear infinite; }

.candy-coin {
  position: relative;
  width: min(24vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d9ffff;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.28), transparent 18%),
    radial-gradient(circle at 52% 54%, #162a48 0 48%, #091323 49% 58%, #54f9ed 59% 60%, #1d3357 62% 71%, #0b1529 73%);
  border: 2px solid rgba(132,255,240,.68);
  box-shadow:
    0 0 0 8px rgba(12,29,48,.72),
    0 0 0 10px rgba(91,255,239,.25),
    0 32px 80px rgba(0,0,0,.62),
    0 0 54px rgba(23,230,255,.25),
    inset -22px -15px 38px rgba(0,0,0,.58),
    inset 16px 12px 26px rgba(255,255,255,.07);
  clip-path: none !important;
  mask: none !important;
  overflow: visible;
  backface-visibility: hidden;
  transform: translateZ(40px) rotate(-9deg);
  transform-style: preserve-3d;
  animation: c20-coin-idle 6.2s ease-in-out infinite;
}

.candy-coin::before {
  content: "";
  position: relative;
  z-index: 2;
  font-family: var(--c20-display);
  font-size: clamp(70px, 8vw, 124px);
  line-height: 1;
  display: block;
  width: 54%;
  height: 58%;
  background: url('/brand/05/mark.svg') center / contain no-repeat;
  filter: drop-shadow(0 8px 10px #0008) drop-shadow(0 0 18px rgba(35,230,255,.32));
}

.candy-coin::after {
  content: "KOINFLIP · ORIGINALS · KOINFLIP · ORIGINALS";
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: end center;
  padding-bottom: 8%;
  border: 1px dashed rgba(143,255,246,.24);
  border-radius: 50%;
  color: rgba(199,255,250,.58);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
}

.candy-coin-shadow {
  position: absolute;
  width: 62%;
  height: 14%;
  bottom: 8%;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  filter: blur(18px);
  animation: c20-shadow-breathe 6.2s ease-in-out infinite;
}

.candy-chip {
  position: absolute;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--chip) 17%, #111b32 19% 46%, var(--chip) 48% 56%, #08111f 58%);
  border: 1px solid color-mix(in srgb, var(--chip) 72%, white);
  box-shadow: 0 10px 28px #0008, 0 0 18px color-mix(in srgb, var(--chip) 30%, transparent);
  animation: c20-chip-float var(--speed, 7s) ease-in-out infinite var(--delay, 0s);
}

.candy-chip:nth-of-type(1) { --chip:#1ce8ff; --speed:6.4s; left:10%; top:18%; }
.candy-chip:nth-of-type(2) { --chip:#a76cff; --speed:7.6s; --delay:-2s; right:7%; top:11%; width:38px; }
.candy-chip:nth-of-type(3) { --chip:#43ffc4; --speed:5.8s; --delay:-3.5s; right:13%; bottom:12%; width:68px; }

/* Hero scene: rising credit stacks */
.candy-stack-stage {
  position: absolute;
  inset: 4% 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 17px);
  padding: 0 3% 12%;
  transform: rotateX(8deg) rotateY(-8deg);
  transform-style: preserve-3d;
}

.candy-stack-floor {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 8%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,215,104,.23), rgba(255,138,61,.08) 34%, transparent 70%);
  transform: rotateX(68deg) translateZ(-50px);
  filter: blur(2px);
}

.candy-credit-stack {
  --stack-height: 150px;
  position: relative;
  width: clamp(54px, 6vw, 90px);
  height: var(--stack-height);
  transform-style: preserve-3d;
  animation: c20-stack-rise 1.05s var(--c20-ease) both, c20-stack-bob 5s ease-in-out infinite 1.1s;
}

.candy-credit-stack:nth-of-type(2) { --stack-height: 220px; animation-delay:.12s,1.2s; }
.candy-credit-stack:nth-of-type(3) { --stack-height: 310px; animation-delay:.22s,1.3s; }
.candy-credit-stack:nth-of-type(4) { --stack-height: 255px; animation-delay:.34s,1.4s; }
.candy-credit-stack:nth-of-type(5) { --stack-height: 180px; animation-delay:.44s,1.5s; }

.candy-credit-stack i {
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  bottom: calc(var(--n) * 20px);
  border: 1px solid rgba(255,246,186,.52);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.13), transparent 20% 80%, rgba(255,255,255,.10)),
    linear-gradient(145deg, #ffce57, #9c5b28);
  box-shadow: 0 8px 13px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.45), 0 0 16px rgba(255,184,57,.08);
  transform: translateZ(calc(var(--n) * 1px)) translateX(calc((var(--n) - 4) * .4px));
}

.candy-credit-stack i::after {
  content: "CR";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(47,24,10,.68);
  font: 900 10px/1 var(--c20-ui);
  letter-spacing: .16em;
}

.candy-stack-total {
  position: absolute;
  top: 15%;
  right: 5%;
  padding: 13px 16px;
  border: 1px solid rgba(255,215,104,.30);
  border-radius: 14px;
  color: #fff4bb;
  background: rgba(21,15,18,.46);
  box-shadow: 0 14px 35px #0007, inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(15px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translateZ(80px);
  animation: c20-total-float 4s ease-in-out infinite;
}

.candy-stack-total b {
  display: block;
  margin-top: 5px;
  color: #fff;
  font: 400 clamp(24px,3vw,42px)/1 var(--c20-display);
  letter-spacing: -.03em;
  text-shadow: 0 0 18px rgba(255,199,84,.35);
}

/* Hero scene: play portal */
.candy-play-stage {
  position: absolute;
  inset: 3% 0 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.candy-portal {
  position: relative;
  width: min(32vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #040a15 0 38%, rgba(71,36,121,.72) 40% 44%, transparent 46%);
  border: 1px solid rgba(199,151,255,.55);
  box-shadow: 0 0 0 12px rgba(114,61,191,.08), 0 0 70px rgba(164,97,255,.36), inset 0 0 54px rgba(44,234,255,.20);
  transform: rotateX(8deg) translateZ(30px);
  animation: c20-portal-pulse 3.2s ease-in-out infinite;
}

.candy-portal::before,
.candy-portal::after {
  content: "";
  position: absolute;
  inset: -9%;
  border: 2px dashed rgba(59,231,255,.42);
  border-radius: 50%;
  animation: c20-halo-spin 13s linear infinite;
}

.candy-portal::after {
  inset: 13%;
  border-color: rgba(255,79,184,.38);
  animation-direction: reverse;
  animation-duration: 8s;
}

.candy-portal b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 400 clamp(46px,6vw,82px)/.9 var(--c20-display);
  text-align: center;
  text-shadow: 0 0 28px rgba(167,108,255,.74);
  transform: translateZ(65px);
}

.candy-mini-card {
  position: absolute;
  width: 126px;
  height: 170px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--card) 55%, white);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 28%, #081322), rgba(5,12,23,.92));
  box-shadow: 0 22px 45px #0009, 0 0 30px color-mix(in srgb, var(--card) 18%, transparent), inset 0 1px rgba(255,255,255,.12);
  transform-style: preserve-3d;
  animation: c20-mini-card 5.4s ease-in-out infinite;
}

.candy-mini-card::before {
  content: attr(data-icon);
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  margin: 10px auto 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, white, var(--card) 22%, #111a31 65%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--card) 40%, transparent);
  color: #07101b;
  font: 900 21px/1 var(--c20-ui);
}

.candy-mini-card b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.candy-mini-card:nth-child(2) { --card:#17e6ff; left:0; top:12%; transform: rotateY(18deg) rotateZ(-8deg) translateZ(40px); }
.candy-mini-card:nth-child(3) { --card:#ff4fb8; right:-1%; top:8%; transform: rotateY(-18deg) rotateZ(8deg) translateZ(45px); animation-delay:-1.8s; }
.candy-mini-card:nth-child(4) { --card:#43ffc4; right:11%; bottom:2%; transform: rotateY(-10deg) rotateZ(-5deg) translateZ(70px); animation-delay:-3.2s; }

.candy-hero-nav {
  position: absolute;
  z-index: 12;
  left: clamp(42px, 6vw, 88px);
  right: clamp(42px, 6vw, 88px);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.candy-hero-tabs { display: flex; align-items: center; gap: 9px; }

.candy-hero-dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
}

.candy-hero-dot::before {
  content: "";
  position: absolute;
  inset: 20px 0;
  border-radius: 20px;
  background: rgba(255,255,255,.14);
}

.candy-hero-dot::after {
  content: "";
  position: absolute;
  inset: 20px 0;
  background: linear-gradient(90deg, var(--c20-cyan), var(--c20-violet));
  transform: scaleX(0);
  transform-origin: left;
}

.candy-hero-pause {
  min-height: 44px;
  padding: 0 9px;
  border: 1px solid rgba(186,224,255,.22);
  border-radius: 8px;
  color: #d2e8fa;
  background: #061323;
  font-size: 12px;
  cursor: pointer;
}
.candy-hero-pause:hover { background: #122b3b; }
.candy-hero-dot:focus-visible,
.candy-hero-pause:focus-visible { outline: 2px solid var(--c20-cyan); outline-offset: 3px; }
.candy-hero.is-manually-paused *,
.candy-hero.is-manually-paused *::before,
.candy-hero.is-manually-paused *::after { animation-play-state: paused !important; }

.candy-hero-dot.is-active { width: 68px; }
.candy-hero-dot.is-active::after { animation: c20-hero-progress 6.6s linear forwards; }
.candy-hero.is-paused .candy-hero-dot.is-active::after { animation-play-state: paused; }

.candy-hero-count {
  margin-left: auto;
  color: rgba(203,223,237,.7);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

/* ---------- Cards, scroll depth, idle life ---------- */

.cinema-section,
.cinema-stats,
.cinema-categories {
  --c20-depth: 1;
  transform: translate3d(0, calc((1 - var(--c20-depth)) * 18px), 0);
  opacity: calc(.58 + var(--c20-depth) * .42);
  transition: opacity .65s ease, transform .75s var(--c20-ease);
}

html[data-candy20="true"] .game-card {
  --c20-rx: 0deg;
  --c20-ry: 0deg;
  --c20-card-y: 0px;
  transition: border-color .3s, box-shadow .3s;
}

html[data-candy20="true"] .game-card:nth-child(2n) { --c20-idle: 7.2s; --c20-delay: -2.1s; }
html[data-candy20="true"] .game-card:nth-child(3n) { --c20-idle: 8s; --c20-delay: -4s; }

html[data-candy20="true"] .game-card:hover {
  z-index: 3;
  box-shadow: 0 24px 64px rgba(0,0,0,.42), 0 0 34px color-mix(in srgb, var(--tile, #17e6ff) 16%, transparent);
}

html[data-candy20="true"] .game-card .tile-art {
  transition: transform .3s var(--c20-ease), filter .3s;
}

html[data-candy20="true"] .game-card:hover .tile-art { transform: scale(1.025); }

html[data-candy20="true"] .game-card .poster-art {
  transform: scale(1.035);
  transition: transform .18s ease-out, filter .3s;
}

html[data-candy20="true"] .game-card:hover .poster-art {
  filter: saturate(1.15) contrast(1.05) brightness(1.06);
}

html[data-candy20="true"] .game-card .tile-title,
html[data-candy20="true"] .game-card .poster-caption,
html[data-candy20="true"] .game-card .tile-eyebrow {
  text-shadow: 0 4px 16px rgba(0,0,0,.68);
}

.cinema-section-head h2,
.section-heading h1,
.px-arena-head h2 {
  font-family: var(--c20-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
}

/* ---------- Games: stage first, alive at idle ---------- */

html[data-candy20="true"] .px-game {
  --c20-game-accent: var(--c20-cyan);
  isolation: isolate;
}

html[data-candy20="true"] .px-game[data-play13="crash"] { --c20-game-accent: var(--c20-orange); }
html[data-candy20="true"] .px-game[data-play13="plinko"] { --c20-game-accent: #ec81ff; }
html[data-candy20="true"] .px-game[data-play13="slots"] { --c20-game-accent: var(--c20-gold); }
html[data-candy20="true"] .px-game[data-play13="mines"] { --c20-game-accent: var(--c20-mint); }
html[data-candy20="true"] .px-game[data-play13="coinflip"] { --c20-game-accent: var(--c20-cyan); }
html[data-candy20="true"] .px-game[data-play13="roulette"] { --c20-game-accent: #ff4771; }

html[data-candy20="true"] .px-game .px-arena {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c20-game-accent) 10%, transparent), transparent 38%),
    linear-gradient(180deg, #04101b, #020913 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c20-game-accent) 18%, transparent), inset 0 -60px 100px rgba(0,0,0,.35);
}

html[data-candy20="true"] .px-game .px-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000, transparent 82%);
}

html[data-candy20="true"] .px-game .px-arena::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 12%;
  right: 12%;
  bottom: 6%;
  height: 12%;
  pointer-events: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c20-game-accent) 18%, transparent);
  opacity: .55;
}

html[data-candy20="true"] .px-game .px-arena-head,
html[data-candy20="true"] .px-game .px-world,
html[data-candy20="true"] .px-game .px-result,
html[data-candy20="true"] .px-game .px-toolbar {
  position: relative;
  z-index: 3;
}

html[data-candy20="true"] .px-game .px-label {
  color: var(--c20-game-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--c20-game-accent) 55%, transparent);
}

html[data-candy20="true"] .px-game .px-world {
  position: relative;
}

html[data-candy20="true"] .px-game.candy-round-live .px-world {
  filter: saturate(1.16) brightness(1.07);
  transform: translateZ(12px) scale(1.012);
}

.candy-stage-chrome {
  position: absolute;
  inset: 70px 14px 18px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--c20-game-accent) 15%, transparent);
  border-radius: 20px;
  mask-image: linear-gradient(90deg, #000 0 8%, transparent 8% 92%, #000 92%), linear-gradient(#000 0 10%, transparent 10% 90%, #000 90%);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--c20-game-accent) 5%, transparent);
}

.candy-stage-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.candy-stage-dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c20-game-accent);
  box-shadow: 0 0 8px var(--c20-game-accent);
  opacity: .22;
  animation: c20-dust var(--d) ease-in-out infinite var(--delay);
}

html[data-candy20="true"] .px-game .px-controls {
  background:
    radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--c20-game-accent) 7%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(8,24,38,.98), rgba(5,15,27,.98));
  box-shadow: inset 0 1px color-mix(in srgb, var(--c20-game-accent) 18%, transparent);
}

html[data-candy20="true"] .px-game .amount-control,
html[data-candy20="true"] .px-game .text-input,
html[data-candy20="true"] .px-game .og-select,
html[data-candy20="true"] .px-game .side-picker button {
  transition: border-color .25s, box-shadow .25s, transform .2s var(--c20-spring), background .25s;
}

html[data-candy20="true"] .px-game .amount-control:focus-within,
html[data-candy20="true"] .px-game .text-input:focus,
html[data-candy20="true"] .px-game .og-select:focus {
  border-color: color-mix(in srgb, var(--c20-game-accent) 75%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c20-game-accent) 13%, transparent), 0 0 24px color-mix(in srgb, var(--c20-game-accent) 8%, transparent);
}

html[data-candy20="true"] .px-game .px-primary,
html[data-candy20="true"] .px-game .og-play,
html[data-candy20="true"] .px-game .flip-action {
  box-shadow: 0 12px 30px color-mix(in srgb, var(--c20-game-accent) 12%, transparent), inset 0 1px rgba(255,255,255,.38);
}

/* CoinFlip fallback: premium idle, not a frozen render */
html[data-candy20="true"] .px-game[data-play13="coinflip"] .px-coin-wrap {
  transform-style: preserve-3d;
}

/* Crash fallback becomes a living flight deck */
html[data-candy20="true"] .px-game[data-play13="crash"] .px-flight {
  stroke-dasharray: 10 5;
}

html[data-candy20="true"] .px-game[data-play13="crash"] .px-rocket {
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.42));
}

html[data-candy20="true"] .px-game[data-play13="crash"] .px-rocket::after {
  content: "";
  position: absolute;
  left: 43%;
  top: 79%;
  width: 18%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(#fff8bd, #ff9a3e 40%, transparent);
  filter: blur(2px) drop-shadow(0 0 12px #ff8a3d);
  transform-origin: top;
  animation: c20-thruster .32s ease-in-out infinite alternate;
}

html[data-candy20="true"] .px-game[data-play13="crash"] .px-flight-value {
  font-family: var(--c20-display);
  font-weight: 400;
  text-shadow: 0 8px 22px #000b, 0 0 22px rgba(255,138,61,.18);
}

/* Plinko: energized pegs and actual landing emphasis */
html[data-candy20="true"] .px-game[data-play13="plinko"] .px-pegs circle {
  transform-box: fill-box;
  transform-origin: center;
}

html[data-candy20="true"] .px-game[data-play13="plinko"] .px-ball { filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 17px #ffd768); }
html[data-candy20="true"] .px-game[data-play13="plinko"] .px-bucket { transition: filter .2s, transform .2s; transform-box: fill-box; transform-origin: center bottom; }

/* Slots: keep the full cabinet readable instead of a cropped barrel */
html[data-candy20="true"] .px-game[data-play13="slots"] .px-slot-machine {
  box-shadow: 0 30px 65px rgba(0,0,0,.64), 0 0 42px rgba(255,180,66,.12), inset 0 1px rgba(255,255,255,.12);
}

html[data-candy20="true"] .px-game[data-play13="slots"] .px-reel {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 16px 22px rgba(0,0,0,.6), inset 0 -16px 22px rgba(0,0,0,.6), 0 0 0 1px rgba(255,220,153,.12);
}

html[data-candy20="true"] .px-game[data-play13="slots"] .px-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 24% 75%, rgba(0,0,0,.34));
  pointer-events: none;
}

/* Mines: all 25 tiles must fit, with tactile depth */
html[data-candy20="true"] .px-game[data-play13="mines"] .px-mines {
  width: min(92%, 600px);
  aspect-ratio: 1;
  margin-inline: auto;
  gap: clamp(7px, 1.1vw, 12px);
}

html[data-candy20="true"] .px-game[data-play13="mines"] .mine-tile {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 8px 13px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(74,255,207,.07);
  transition: filter .25s, box-shadow .25s;
}

html[data-candy20="true"] .px-game[data-play13="mines"] .mine-tile:not(:disabled):hover {
  filter: brightness(1.18);
  box-shadow: 0 13px 22px rgba(0,0,0,.38), 0 0 22px rgba(67,255,196,.13), inset 0 1px rgba(255,255,255,.16);
}

html[data-candy20="true"] .px-game[data-play13="mines"] .mine-tile.revealed,
html[data-candy20="true"] .px-game[data-play13="mines"] .mine-tile.safe {
  filter: brightness(1.12) saturate(1.08);
}

/* ---------- Results: wins finally feel like wins ---------- */

html[data-candy20="true"] .px-game .px-result {
  overflow: hidden;
  transition: border-color .35s, background .35s, box-shadow .35s, transform .35s var(--c20-spring);
}

.candy-result-burst {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.candy-result-burst i {
  position: absolute;
  top: 46%;
  left: 24%;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  background: var(--color);
  animation: c20-result-particle 1.15s var(--c20-ease) var(--delay) both;
}
html[data-candy20="true"] .px-result .v14-net b { display: inline-block; font-variant-numeric: tabular-nums; }
html[data-candy20="true"] .px-result[data-victory-tier="big"],
html[data-candy20="true"] .px-result[data-victory-tier="epic"] { border-color: #ffd768 !important; }
html[data-candy20="true"] .px-result[data-victory-tier="big"] .v14-net b,
html[data-candy20="true"] .px-result[data-victory-tier="epic"] .v14-net b { color: #ffe38d !important; }
@keyframes c20-result-particle {
  0% { opacity: 0; transform: translate3d(0,24px,0) rotate(0) scale(.4); }
  16% { opacity: .85; }
  100% { opacity: 0; transform: translate3d(var(--dx),var(--dy),0) rotate(var(--turn)) scale(.8); }
}

html[data-candy20="true"] .px-game .px-result.is-win {
  border-color: rgba(80,255,197,.64) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(67,255,196,.18), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(23,230,255,.12), transparent 35%),
    linear-gradient(120deg, rgba(5,34,36,.98), rgba(4,17,29,.98)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.32), 0 0 34px rgba(67,255,196,.12), inset 0 1px rgba(255,255,255,.09) !important;
  transform: translateY(-2px);
  animation: c20-result-win-in .62s var(--c20-spring);
}

/*
   WebGL rounds already provide the expensive motion. Keep the surrounding
   route on compositor-cheap layers so a visual celebration can never delay
   settlement controls on software-rendered mobile and CI GPUs.
*/
html[data-candy20="true"] body[data-route^="game/"]::before,
html[data-candy20="true"] body[data-route^="game/"] .wallet-pill::after,
html[data-candy20="true"] body[data-route^="game/"] .balance-pill::after,
html[data-candy20="true"] body[data-route^="game/"] [data-wallet-balance]::after,
html[data-candy20="true"] body[data-route^="game/"] .px-game .px-arena::before,
html[data-candy20="true"] body[data-route^="game/"] .px-game .px-arena::after {
  content: none !important;
  display: none !important;
}

html[data-candy20="true"] body[data-route^="game/"] .topbar::after,
html[data-candy20="true"] body[data-route^="game/"] .app-header::after,
html[data-candy20="true"] body[data-route^="game/"] .shell-header::after {
  animation: none !important;
  filter: none !important;
  opacity: .34;
}

html[data-candy20="true"] body[data-route^="game/"] .px-game .px-result.is-win,
html[data-candy20="true"] body[data-route^="game/"] .px-game .px-result.is-loss,
html[data-candy20="true"] body[data-route^="game/"] .px-game .px-result.is-win::before,
html[data-candy20="true"] body[data-route^="game/"] .px-game[data-play13="crash"] .px-rocket::after {
  animation: none !important;
}


/* ---------- Mobile: a complete scene, no clipped rows or dead voids ---------- */

.session-loader .loader-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
html[data-candy20="true"] .px-game .px-arena { max-height: none !important; }

@media (max-width: 760px) {
  html[data-candy20="true"] body[data-route^="game/"] .workspace main { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  html[data-candy20="true"] .px-game .px-arena { display: flex !important; flex-direction: column !important; }
  html[data-candy20="true"] .px-game .px-label { display: none; }
  html[data-candy20="true"] .px-game .px-arena-head { z-index: 5; background: #07121d !important; align-items: center !important; }
  html[data-candy20="true"] .px-game .px-arena-head h2 { margin: 0 !important; font-style: normal !important; letter-spacing: -.02em !important; }
  html[data-candy20="true"] .px-game .px-arena-head > a { min-height: 44px; display: flex; align-items: center; font-size: 11px; }
  html[data-candy20="true"] .px-game .px-toolbar { position: relative !important; inset: auto !important; width: 100%; min-height: 44px !important; margin: 0 !important; padding: 0 16px !important; gap: 8px !important; border: 0 !important; background: #07121d !important; justify-content: space-between !important; }
  html[data-candy20="true"] .px-game .px-toolbar label { display: flex !important; width: auto !important; font-size: 10px !important; }
  html[data-candy20="true"] .px-game .px-toolbar label input { width: 80px !important; height: 28px !important; }
  html[data-candy20="true"] .px-game .px-toolbar button { min-width: 44px; min-height: 44px !important; font-size: 11px !important; }
  html[data-candy20="true"] .px-game .px-result { flex: none !important; padding: 13px 14px !important; }
  html[data-candy20="true"] .px-game .px-result-head > span { font-size: 9px !important; letter-spacing: .14em !important; }
  html[data-candy20="true"] .px-game .px-result-head > strong { font-size: 14px !important; }
  html[data-candy20="true"] .px-game .v14-net > b { font-size: 38px !important; line-height: 1.1; }
  html[data-candy20="true"] .px-game .px-return span { font-size: 10px !important; }
  html[data-candy20="true"] .px-game .px-return b { font-size: 13px !important; }
  html[data-candy20="true"] .px-game .px-controls .amount-control { height: 46px; }
  html[data-candy20="true"] .px-game .px-controls input,
  html[data-candy20="true"] .px-game .px-controls select { font-size: 16px !important; }
  html[data-candy20="true"] .px-game .px-controls .side-picker button { min-height: 44px !important; font-size: 14px !important; }
  html[data-candy20="true"] .catalog-section .section-heading h2,
  html[data-candy20="true"] .cinema-section .section-heading h2 { font-size: 24px; letter-spacing: -.02em; }
  .cinema-hero.candy-hero {
    min-height: min(680px, calc(100svh - 118px));
    border-radius: 0;
    border-inline: 0;
  }

  .candy-hero-slide {
    grid-template-columns: 1fr;
    align-content: end;
    padding: 34px 22px 66px;
  }

  .candy-hero-copy {
    z-index: 5;
    align-self: end;
    max-width: 100%;
    transform: translateZ(70px);
  }

  .candy-hero-copy h1 {
    margin-block: 14px 12px;
    font-size: clamp(54px, 17vw, 78px);
    line-height: .87;
  }

  .candy-hero-copy > p {
    max-width: 88%;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.45;
  }

  .candy-kicker { font-size: 10px; letter-spacing: .25em; }
  .candy-proof { display: none; }
  .candy-hero-actions { gap: 9px; }
  .candy-hero-actions .candy-cta { min-height: 46px; padding-inline: 17px; font-size: 12px; border-radius: 13px; }

  .candy-visual {
    position: absolute;
    inset: 0;
    min-height: 0;
    opacity: .82;
    transform: none;
  }

  .candy-coin-stage { inset: -17% -11% 31% 22%; transform: scale(.82); }
  .candy-coin { width: min(62vw, 280px); }
  .candy-coin-halo,
  .candy-coin-halo::before,
  .candy-coin-halo::after { width: min(88vw, 430px); }
  .candy-chip:nth-of-type(1) { left: 4%; top: 30%; }

  .candy-stack-stage { inset: -4% -14% 27% 20%; transform: scale(.78) rotateX(10deg) rotateY(-10deg); }
  .candy-stack-total { top: 10%; right: 1%; }
  .candy-credit-stack { width: 68px; }

  .candy-play-stage { inset: -15% -12% 27% 18%; transform: scale(.76); }
  .candy-portal { width: min(78vw, 340px); }
  .candy-mini-card { width: 104px; height: 142px; }
  .candy-mini-card:nth-child(2) { left:-4%; }
  .candy-mini-card:nth-child(3) { right:-5%; }

  .candy-hero-nav { left:22px; right:22px; bottom:20px; }
  .candy-hero-dot { width:44px; }
  .candy-hero-dot.is-active { width:52px; }

  html[data-candy20="true"] .game-card {
    transform: none;
  }

  html[data-candy20="true"] .px-game {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  html[data-candy20="true"] .px-game .px-arena {
    order: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
  }

  html[data-candy20="true"] .px-game .px-controls {
    order: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 20px 26px !important;
  }

  html[data-candy20="true"] .px-game .px-arena-head {
    position: relative !important;
    inset: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
  }

  html[data-candy20="true"] .px-game .px-arena-head h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1 !important;
  }

  html[data-candy20="true"] .px-game .px-world {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: clamp(260px, 76vw, 360px) !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-margin-top: calc(var(--header, 62px) + 12px);
  }

  html[data-candy20="true"] .px-game .px-result {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 14px 14px !important;
    min-height: 104px;
    border-radius: 18px;
  }

  html[data-candy20="true"] .px-game .px-world button {
    scroll-margin-block: calc(var(--header, 62px) + 12px) 90px;
  }

  html[data-candy20="true"] .px-game .px-toolbar {
    top: auto !important;
    right: auto !important;
    transform: none;
    transform-origin: right top;
  }

  html[data-candy20="true"] .px-game .play-disclaimer { display: none; }
  .candy-stage-chrome { inset: 76px 9px 13px; }

  /* Crash: compact flight deck and zero black-hole spacing. */
  html[data-candy20="true"] .px-game[data-play13="crash"] .px-world {
    height: clamp(340px, 45svh, 420px) !important;
    min-height: 340px !important;
  }
  html[data-candy20="true"] .px-game[data-play13="crash"] .px-chart { inset: 48px 14px 42px !important; width: calc(100% - 28px) !important; height: calc(100% - 90px) !important; }
  html[data-candy20="true"] .px-game[data-play13="crash"] .px-rocket { width: clamp(74px,22vw,104px) !important; }
  html[data-candy20="true"] .px-game[data-play13="crash"] .px-flight-value { bottom: 22px !important; font-size: clamp(52px,15vw,76px) !important; }
  html[data-candy20="true"] .px-game[data-play13="crash"] .g18-canvas,
  html[data-candy20="true"] .px-game[data-play13="crash"] .c17-canvas { transform: scale(.88) !important; transform-origin: 50% 52%; }

  /* CoinFlip keeps the coin prominent but reserves result/control space. */
  html[data-candy20="true"] .px-game[data-play13="coinflip"] .px-world {
    height: clamp(260px, 76vw, 340px) !important;
    min-height: 0 !important;
  }
  html[data-candy20="true"] .px-game[data-play13="coinflip"] .px-coin-wrap { transform: scale(.84); }

  /* Plinko: board fits completely, including bucket labels. */
  html[data-candy20="true"] .px-game[data-play13="plinko"] .px-world {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 78px 10px 18px !important;
  }
  html[data-candy20="true"] .px-game[data-play13="plinko"] .px-plinko {
    display: block;
    width: 100%;
    height: auto;
    max-height: 53svh;
    margin-inline: auto;
  }

  /* Slots: the complete cabinet is visible, never a cropped reel macro. */
  html[data-candy20="true"] .px-game[data-play13="slots"] .px-world {
    height: clamp(360px, 47svh, 440px) !important;
    min-height: 360px !important;
  }
  html[data-candy20="true"] .px-game[data-play13="slots"] .g18-canvas {
    transform: scale(.74) !important;
    transform-origin: center center;
  }
  html[data-candy20="true"] .px-game[data-play13="slots"] .px-slot-machine {
    width: min(92%, 540px);
    transform: scale(.92);
  }

  /* Mines: reserve the title rail and show every tile. */
  html[data-candy20="true"] .px-game[data-play13="mines"] .px-world {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 16px 16px !important;
    overflow: visible !important;
  }
  html[data-candy20="true"] .px-game[data-play13="mines"] .px-mines {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(100%, 410px) !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    grid-template-rows: repeat(5, minmax(0,1fr)) !important;
    gap: 7px !important;
  }

}

@media (max-width: 430px) {
  html[data-candy20="true"] .px-game .px-world { height: clamp(260px, 76vw, 340px) !important; min-height: 0 !important; }
  html[data-candy20="true"] .px-game[data-play13="plinko"] .px-world,
  html[data-candy20="true"] .px-game[data-play13="mines"] .px-world { height:auto !important; min-height:0 !important; }
  html[data-candy20="true"] .px-game .px-controls { padding-inline: 18px !important; }
  html[data-candy20="true"] .px-game .px-result { margin-inline: 10px !important; }
}

@media (max-width: 360px) {
  .candy-hero-count { display: none; }
  .candy-hero-pause { margin-left: auto; }
  .candy-hero-nav, .candy-hero-tabs { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .candy-hero-slide,
  .candy-coin,
  .candy-coin-halo,
  .candy-coin-halo::before,
  .candy-coin-halo::after,
  .candy-credit-stack,
  .candy-portal,
  .candy-portal::before,
  .candy-portal::after,
  .candy-mini-card,
  html[data-candy20="true"] .game-card,
  html[data-candy20="true"] .px-game .px-world,
  .candy-stage-dust i,
  .candy-result-burst i,
  html[data-candy20="true"] .px-result,
  html[data-candy20="true"] .px-result::before {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

html.reduce-motion .candy-hero *,
html.reduce-motion .candy-hero *::before,
html.reduce-motion .candy-hero *::after,
html.reduce-motion .candy-result-burst i {
  animation: none !important;
  transition: none !important;
}

/* ---------- Motion library ---------- */

@keyframes c20-header-breathe { 0%,100%{opacity:.32;transform:scaleX(.75)} 50%{opacity:.82;transform:scaleX(1)} }
@keyframes c20-wallet-sheen { 0%,64%,100%{transform:translateX(-78%) rotate(8deg)} 78%{transform:translateX(78%) rotate(8deg)} }
@keyframes c20-button-sheen { 0%,58%,100%{transform:translateX(-120%)} 74%{transform:translateX(120%)} }
@keyframes c20-hero-progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes c20-halo-spin { to{transform:rotateX(64deg) rotateZ(372deg)} }
@keyframes c20-halo-spin-reverse { to{transform:rotate(-360deg)} }
@keyframes c20-coin-idle { 0%,100%{transform:translate3d(0,0,40px) rotate(-9deg) scale(.98)} 50%{transform:translate3d(0,-16px,62px) rotate(3deg) scale(1.025)} }
@keyframes c20-shadow-breathe { 0%,100%{transform:scaleX(.82);opacity:.7} 50%{transform:scaleX(1);opacity:.38} }
@keyframes c20-chip-float { 0%,100%{transform:translate3d(0,0,30px) rotate(0)} 50%{transform:translate3d(12px,-18px,70px) rotate(18deg)} }
@keyframes c20-stack-rise { from{opacity:0;transform:translateY(70px) scale(.72)} to{opacity:1;transform:none} }
@keyframes c20-stack-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes c20-total-float { 0%,100%{transform:translate3d(0,0,80px)} 50%{transform:translate3d(0,-10px,100px)} }
@keyframes c20-portal-pulse { 0%,100%{transform:rotateX(8deg) translateZ(30px) scale(.96);filter:brightness(.9)} 50%{transform:rotateX(8deg) translateZ(50px) scale(1.03);filter:brightness(1.15)} }
@keyframes c20-mini-card { 0%,100%{translate:0 0} 50%{translate:0 -15px} }
@keyframes c20-card-idle { 0%,100%{--c20-card-y:0px} 50%{--c20-card-y:-4px} }
@keyframes c20-stage-breathe { 0%,100%{transform:scaleX(.75);opacity:.42} 50%{transform:scaleX(1);opacity:.72} }
@keyframes c20-world-idle { 0%,100%{filter:saturate(1) brightness(1);transform:translateY(0)} 50%{filter:saturate(1.06) brightness(1.025);transform:translateY(-3px)} }
@keyframes c20-dust { 0%,100%{transform:translate3d(0,8px,0) scale(.6);opacity:.06} 50%{transform:translate3d(9px,-14px,0) scale(1);opacity:.32} }
@keyframes c20-coin-wrap { 0%,100%{filter:drop-shadow(0 34px 30px rgba(0,0,0,.68)) drop-shadow(0 0 22px rgba(44,235,255,.18));margin-top:0} 50%{filter:drop-shadow(0 42px 34px rgba(0,0,0,.56)) drop-shadow(0 0 36px rgba(44,235,255,.28));margin-top:-8px} }
@keyframes c20-grid-scan { 0%,100%{opacity:.26} 50%{opacity:.5} }
@keyframes c20-flight-dash { to{stroke-dashoffset:-30} }
@keyframes c20-rocket-idle { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(2deg)} }
@keyframes c20-thruster { from{transform:scaleY(.7)} to{transform:scaleY(1.18)} }
@keyframes c20-peg-breathe { 0%,100%{opacity:.62;transform:scale(.9)} 50%{opacity:1;transform:scale(1.18)} }
@keyframes c20-slot-idle { 0%,100%{transform:translateY(0) rotateX(0)} 50%{transform:translateY(-4px) rotateX(1deg)} }
@keyframes c20-reel-blur { 50%{filter:blur(5px) brightness(1.2);transform:translateY(8px)} }
@keyframes c20-tile-reveal { 0%{transform:rotateY(0) scale(.9)} 55%{transform:rotateY(115deg) scale(1.13)} 100%{transform:rotateY(180deg) scale(1)} }
@keyframes c20-result-win-in { 0%{opacity:0;transform:translateY(15px) scale(.95);filter:brightness(2)} 55%{transform:translateY(-5px) scale(1.025)} 100%{opacity:1;transform:translateY(-2px) scale(1);filter:brightness(1)} }
@keyframes c20-result-win-glow { 0%,100%{box-shadow:0 18px 48px rgba(0,0,0,.32),0 0 25px rgba(67,255,196,.10),inset 0 1px rgba(255,255,255,.09)} 50%{box-shadow:0 18px 48px rgba(0,0,0,.32),0 0 46px rgba(67,255,196,.22),inset 0 1px rgba(255,255,255,.12)} }
@keyframes c20-result-sheen { from{transform:translateX(-80%) rotate(8deg)} to{transform:translateX(95%) rotate(8deg)} }
@keyframes c20-loss-settle { 0%{transform:translateX(0)} 35%{transform:translateX(-4px)} 70%{transform:translateX(3px)} 100%{transform:translateX(0)} }