/* Per-skin motion packs. Loads after goldrush.css and skins.css, so it may override either.
 *
 * goldrush.css gives every skin the same bullion choreography. That reads right for Gold and Silver and generic
 * everywhere else, so each skin below replaces it with motion that belongs to its own world. Palettes stay in
 * js/skins.js; nothing here invents a colour.
 *
 * THE FIVE SLOTS each pack fills, always scoped to html[data-skin="<id>"]:
 *   1. ambient     body::before          a living wash behind the page
 *   2. entrance    .card, .stat          how a panel arrives, replacing vault-rise
 *   3. feedback    .btn:hover / :active  how a control answers the pointer
 *   4. accent      .stat.fx-shine::after the sweep across a value tile, replacing ingot-shine
 *   5. signature   body::after           one flourish unique to the skin
 *
 * RULES
 *   * Colour only from skin tokens: --page --surface --surface2 --text --text2 --muted --grid --axis --border
 *     --wash --accent --accent-fill --accent-soft --accent-ink --up --down --s1..--s8 --gold-* --shadow --glow.
 *   * Endless loops live under html[data-fx="full"]. Entrances and one-shots may also run at "subtle".
 *     html[data-fx="off"] and prefers-reduced-motion are already killed globally by goldrush.css.
 *   * Ambient and signature layers: position fixed, inset 0, pointer-events none, and BEHIND the content
 *     (z-index -1). They must not shift layout, intercept clicks or reduce text contrast.
 *   * No external assets, no images, no fonts. Gradients, shadows and transforms only.
 *   * Keyframes are named sk-<skin>-<what> so packs can never collide.
 */

/* Shared plumbing: three layers a pack draws into, all behind the page so none can intercept a click
 * or sit on top of text. A pack opts in by setting `content` on the ones it wants.
 *   html::before   the skin's mascot watermark (a character, large and semi-transparent)
 *   body::before   ambient wash
 *   body::after    signature flourish
 */
html[data-skin]::before,
html[data-skin]::after,
html[data-skin] body::before,
html[data-skin] body::after {
  content: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
/* the mascot is art, not texture: it is allowed to be seen */
/* The mascot is cut down the middle and the halves are swapped to the outside: the centre of the artwork
 * lands at each screen edge, which is the only place it can be seen, and the join runs behind the charts.
 * Each copy is a box centred exactly ON a screen edge, so only its outer half is on screen.
 * It rides above the page because app pages cover the viewport in opaque panels, and starts below the
 * header/tab row. */
html[data-skin]::before,
html[data-skin]::after {
  z-index: 3;
  top: var(--sk-mascot-top, 104px);
  bottom: 0;
  --sk-mw: min(54vmin, 470px);
  width: var(--sk-mw);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html[data-skin]::before {                 /* centred on the left edge: its right half shows */
  left: 0; right: auto;
  margin-left: calc(var(--sk-mw) / -2);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,1));
  mask-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,1));
}
html[data-skin]::after {                  /* centred on the right edge: its left half shows */
  right: 0; left: auto;
  margin-right: calc(var(--sk-mw) / -2);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,1));
  mask-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,1));
}


/* ============================================================ Street  (pack_street.css) */
/* ============================================ STREET GROUP MOTION PACKS
   Four dark/light skins, each with motion that lives in its own world.
   All keyframes follow sk-<skin>-<name> convention. All animations scoped to html[data-skin="..."].
============================================ */

/* ============ SPORTS NIGHT: Stadium floodlights, scoreboard flash, LED indicators
   Sweeping light beams, fast sharp entrances, red/green flash feedback, bright accent sweep.
============ */

html[data-skin="sports"] body::before {
  content: "";
}
@keyframes sk-sports-floodlight {
  0% { background: radial-gradient(900px 500px at 0% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
  50% { background: radial-gradient(900px 500px at 100% -20%, color-mix(in srgb, var(--accent-fill) 14%, transparent), transparent 55%); }
  100% { background: radial-gradient(900px 500px at 0% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
}

html[data-skin="sports"] .card,
html[data-skin="sports"] .stat {
  animation: sk-sports-scoreboard .55s cubic-bezier(.34, 1.2, .64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes sk-sports-scoreboard {
  from {
    opacity: 0.0;
    transform: translateY(16px) scaleX(.92);
    filter: brightness(.8);
  }
  to {
    opacity: 0.85;
    transform: none;
    filter: brightness(1);
  }
}

html[data-skin="sports"] .btn:not(:disabled):hover {
  box-shadow: var(--btn-bevel), 0 0 0 1px var(--accent), 0 0 24px -3px var(--down);
}
html[data-skin="sports"] .btn:not(:disabled):active {
  filter: brightness(1.15);
}

html[data-skin="sports"] .stat.fx-shine::after {
  animation: sk-sports-led-sweep 1.1s cubic-bezier(.25, .6, .35, 1) calc(var(--k, 0) * 60ms + 280ms) 1 backwards;
}
@keyframes sk-sports-led-sweep {
  from {
    transform: translateX(-130%);
    background: linear-gradient(110deg, transparent 30%, var(--accent) 50%, transparent 70%);
  }
  to {
    transform: translateX(130%);
    background: linear-gradient(110deg, transparent 30%, var(--down) 50%, transparent 70%);
  }
}

html[data-skin="sports"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 1200px 600px at 20% -40%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 45%);
}
@keyframes sk-sports-scoreboard-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.85; }
}


/* ============ MUSCLE CAR: Hot rod, chrome shine, exhaust heat, speed, red-hot glow
   Heat waves, aggressive zoom entrance, chrome feedback, red hot accent, revving pulse.
============ */

html[data-skin="muscle-car"] body::before {
  content: "";
}
@keyframes sk-muscle-car-exhaust {
  0%, 100% { background: radial-gradient(ellipse 1000px 450px at 10% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%); }
  50% { background: radial-gradient(ellipse 1000px 450px at 10% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%); }
}

html[data-skin="muscle-car"] .card,
html[data-skin="muscle-car"] .stat {
  animation: sk-muscle-car-launch .48s cubic-bezier(.32, 1.4, .68, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes sk-muscle-car-launch {
  from {
    opacity: 0.0;
    transform: translateY(20px) scale(.88);
    filter: brightness(.7) saturate(1.3);
  }
  to {
    opacity: 0.85;
    transform: none;
    filter: brightness(1) saturate(1);
  }
}

html[data-skin="muscle-car"] .btn:not(:disabled):hover {
  filter: brightness(1.1) drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 50%, transparent));
  box-shadow: var(--btn-bevel), 0 0 0 1px var(--accent), 0 0 20px -2px var(--accent);
}
html[data-skin="muscle-car"] .btn:not(:disabled):active {
  filter: brightness(1.25) drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 80%, transparent));
}

html[data-skin="muscle-car"] .stat.fx-shine::after {
  animation: sk-muscle-car-chrome-sweep 1s cubic-bezier(.3, .5, .4, 1) calc(var(--k, 0) * 65ms + 290ms) 1 backwards;
}
@keyframes sk-muscle-car-chrome-sweep {
  from {
    transform: translateX(-150%);
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent-fill) 40%, transparent) 50%, transparent 65%);
  }
  to {
    transform: translateX(150%);
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent-fill) 10%, transparent) 50%, transparent 65%);
  }
}

html[data-skin="muscle-car"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%);
}
@keyframes sk-muscle-car-heat-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.85; }
}


/* ============ FISHING: Deep water, ripples, light refraction, bobber, teal/orange palette
   Rippling water ambient, floating/bobbing entrance, water splash feedback, refraction accent.
============ */

html[data-skin="fishing"] body::before {
  content: "";
}
@keyframes sk-fishing-ripple {
  0% {
    background:
      radial-gradient(ellipse 800px 400px at 50% 20%, color-mix(in srgb, var(--accent-fill) 6%, transparent), transparent 45%),
      radial-gradient(circle at 30% 50%, transparent 0%, transparent 8%, color-mix(in srgb, var(--wash) 50%, transparent) 15%, transparent 25%);
  }
  50% {
    background:
      radial-gradient(ellipse 800px 400px at 50% 20%, color-mix(in srgb, var(--accent-fill) 12%, transparent), transparent 35%),
      radial-gradient(circle at 50% 50%, transparent 0%, transparent 12%, var(--wash) 20%, transparent 35%);
  }
  100% {
    background:
      radial-gradient(ellipse 800px 400px at 50% 20%, color-mix(in srgb, var(--accent-fill) 6%, transparent), transparent 45%),
      radial-gradient(circle at 70% 40%, transparent 0%, transparent 8%, color-mix(in srgb, var(--wash) 50%, transparent) 15%, transparent 25%);
  }
}

html[data-skin="fishing"] .card,
html[data-skin="fishing"] .stat {
  animation: sk-fishing-bob .6s cubic-bezier(.34, .8, .5, .95) backwards;
  animation-delay: calc(var(--i, 0) * 38ms);
}
@keyframes sk-fishing-bob {
  from {
    opacity: 0.0;
    transform: translateY(18px) scale(.96);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-2px);
  }
  to {
    opacity: 0.85;
    transform: none;
  }
}

html[data-skin="fishing"] .btn:not(:disabled):hover {
  box-shadow: var(--btn-bevel), 0 0 0 1px var(--accent), 0 0 18px -2px color-mix(in srgb, var(--accent-fill) 50%, transparent);
}
html[data-skin="fishing"] .btn:not(:disabled):active {
  filter: brightness(1.08);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 12px color-mix(in srgb, var(--accent-fill) 30%, transparent), 0 0 0 1px var(--accent);
}

html[data-skin="fishing"] .stat.fx-shine::after {
  animation: sk-fishing-refract 1.2s cubic-bezier(.2, .6, .4, 1) calc(var(--k, 0) * 70ms + 300ms) 1 backwards;
}
@keyframes sk-fishing-refract {
  from {
    transform: translateX(-140%);
    background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--accent) 50%, transparent) 48%, color-mix(in srgb, var(--accent-fill) 30%, transparent) 52%, transparent 70%);
  }
  to {
    transform: translateX(140%);
    background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--accent) 20%, transparent) 48%, color-mix(in srgb, var(--accent-fill) 10%, transparent) 52%, transparent 70%);
  }
}

html[data-skin="fishing"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 1000px 600px at 50% -10%, var(--wash), transparent 55%);
}
@keyframes sk-fishing-light-dance {
  0%, 100% { background: radial-gradient(ellipse 1000px 600px at 50% -10%, var(--wash), transparent 55%); }
  50% { background: radial-gradient(ellipse 1000px 600px at 40% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%); }
}


/* ============ JUICY FRUIT: Ripe citrus, squish and bounce, bright and sweet, citrus energy
   Warm pulsing glow, bouncy playful entrance, squish feedback, bright shine accent.
============ */

html[data-skin="juicy-fruit"] body::before {
  content: "";
}
@keyframes sk-juicy-fruit-pulse {
  0%, 100% {
    background: radial-gradient(ellipse 900px 450px at 60% 10%, color-mix(in srgb, var(--accent-fill) 8%, transparent), transparent 50%);
  }
  50% {
    background: radial-gradient(ellipse 900px 450px at 60% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 45%);
  }
}

html[data-skin="juicy-fruit"] .card,
html[data-skin="juicy-fruit"] .stat {
  animation: sk-juicy-fruit-bounce .52s cubic-bezier(.34, 1.6, .64, .95) backwards;
  animation-delay: calc(var(--i, 0) * 36ms);
}
@keyframes sk-juicy-fruit-bounce {
  from {
    opacity: 0.0;
    transform: translateY(22px) scale(.88);
  }
  60% {
    opacity: 0.85;
    transform: translateY(-3px) scale(1.02);
  }
  to {
    opacity: 0.85;
    transform: none;
  }
}

html[data-skin="juicy-fruit"] .btn:not(:disabled):hover {
  box-shadow: var(--btn-bevel), 0 0 0 1px var(--accent), 0 0 20px -1px var(--fill);
  filter: brightness(1.05);
}
html[data-skin="juicy-fruit"] .btn:not(:disabled):active {
  transform: scale(.92) translateY(2px);
  filter: brightness(1.15) saturate(1.2);
}

html[data-skin="juicy-fruit"] .stat.fx-shine::after {
  animation: sk-juicy-fruit-shine 1.05s cubic-bezier(.25, .6, .35, 1) calc(var(--k, 0) * 55ms + 270ms) 1 backwards;
}
@keyframes sk-juicy-fruit-shine {
  from {
    transform: translateX(-130%);
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  }
  to {
    transform: translateX(130%);
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .15) 50%, transparent 65%);
  }
}

html[data-skin="juicy-fruit"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100%);
}
@keyframes sk-juicy-fruit-warm-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.85; }
}

/* looping ambient runs only at Full effects */
html[data-fx="full"] ============================================ */

/* ============ SPORTS NIGHT: Stadium floodlights, scoreboard flash, LED indicators
   Sweeping light beams, fast sharp entrances, red/green flash feedback, bright accent sweep.
============ */

html[data-skin="sports"] body::before { }
html[data-fx="full"][data-skin="sports"][data-fx="full"] body::before { }
html[data-fx="full"][data-skin="sports"][data-fx="full"] body::after { }
html[data-fx="full"] ============ */

html[data-skin="muscle-car"] body::before { }
html[data-fx="full"][data-skin="muscle-car"][data-fx="full"] body::before { }
html[data-fx="full"][data-skin="muscle-car"][data-fx="full"] body::after { }
html[data-fx="full"] ============ */

html[data-skin="fishing"] body::before { }
html[data-fx="full"][data-skin="fishing"][data-fx="full"] body::before { }
html[data-fx="full"][data-skin="fishing"][data-fx="full"] body::after { }
html[data-fx="full"] ============ */

html[data-skin="juicy-fruit"] body::before { }
html[data-fx="full"][data-skin="juicy-fruit"][data-fx="full"] body::before { }
html[data-fx="full"][data-skin="juicy-fruit"][data-fx="full"] body::after { }


/* ============================================================ East  (pack_east.css) */
/* =====================================================================
   EAST MOTION PACKS: zen-sakura & samurai

   zen-sakura: petals drift on rice paper — stillness, slow float, muted rose
   samurai: brush stroke, lacquer glint — ink-swift entrance, blade-bright accent
   ===================================================================== */

/* --------- zen-sakura: Sakura zen (light) --------- */
html[data-skin="zen-sakura"] {
  /* ambient: gentle petal-like drift wash behind the page, full mode only */
  body::before {
    content: "";
    background:
      radial-gradient(ellipse 420px 240px at 15% 20%, var(--accent-soft), transparent 58%),
      radial-gradient(ellipse 380px 260px at 88% 65%, var(--accent-soft), transparent 62%),
      radial-gradient(ellipse 400px 300px at 50% 50%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 75%);
  }

  html[data-fx="full"] & body::before {
    animation: sk-zen-sakura-ambient 32s ease-in-out infinite;
  }

  /* entrance: soft float-in, subtle + full */
  @keyframes sk-zen-sakura-enter {
    from {
      opacity: 0.0;
      transform: translateY(14px) scale(.986);
    }
    to {
      opacity: 0.85;
      transform: translateY(0) scale(1);
    }
  }

  .card,
  .stat {
    animation: sk-zen-sakura-enter 0.88s cubic-bezier(.16, .9, .25, 1) backwards !important;
    animation-delay: calc(var(--i, 0) * 48ms) !important;
  }

  /* feedback: subtle highlight aura on button hover */
  @media (hover: hover) {
    .btn:not(:disabled):hover,
    .seg button:hover,
    .tabs .tab:hover,
    .vdh-pills button:hover {
      box-shadow: 0 0 14px -2px var(--accent-soft);
    }
  }

  /* accent: slow meditative shine sweep across stat tiles */
  @keyframes sk-zen-sakura-shine {
    from {
      transform: translateX(-130%);
      opacity: 0.0;
    }
    20% {
      opacity: 0.805;
    }
    50% {
      opacity: 0.85;
    }
    80% {
      opacity: 0.575;
    }
    to {
      transform: translateX(130%);
      opacity: 0.0;
    }
  }

  .stat.fx-shine::after {
    animation: sk-zen-sakura-shine 1.9s cubic-bezier(.2, .6, .2, 1) calc(var(--k, 0) * 70ms + 320ms) 1 backwards !important;
  }

  /* signature: petal whisper at edges, full mode only */
  body::after {
    content: "";
    background:
      radial-gradient(circle 8px at 12% 28%, var(--accent) 0%, transparent 100%),
      radial-gradient(circle 6px at 89% 44%, var(--accent) 0%, transparent 100%),
      radial-gradient(circle 7px at 23% 71%, var(--accent) 0%, transparent 100%),
      radial-gradient(circle 5px at 76% 18%, var(--accent) 0%, transparent 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.08;
  }

  html[data-fx="full"] & body::after {
    animation: sk-zen-sakura-petals 22s ease-in-out infinite;
  }

  @keyframes sk-zen-sakura-ambient {
    0%, 100% {
      background-position: 0% 0%;
    }
    25% {
      background-position: 3% 6%;
    }
    50% {
      background-position: 6% 10%;
    }
    75% {
      background-position: 2% 5%;
    }
  }

  @keyframes sk-zen-sakura-petals {
    0% {
      transform: translateY(-60px) translateX(-8px) rotate(0deg);
      opacity: 0.046;
    }
    25% {
      transform: translateY(80px) translateX(12px) rotate(12deg);
      opacity: 0.276;
    }
    50% {
      transform: translateY(180px) translateX(-6px) rotate(-8deg);
      opacity: 0.184;
    }
    75% {
      transform: translateY(300px) translateX(18px) rotate(14deg);
      opacity: 0.138;
    }
    100% {
      transform: translateY(420px) translateX(0) rotate(360deg);
      opacity: 0.0;
    }
  }
}

/* --------- samurai: Samurai (dark) --------- */
html[data-skin="samurai"] {
  /* ambient: ink wash moving, full mode only */
  body::before {
    content: "";
    background:
      radial-gradient(ellipse 620px 320px at -5% -2%, color-mix(in srgb, var(--accent-fill) 14%, transparent), transparent 68%),
      radial-gradient(ellipse 540px 360px at 102% 48%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
  }

  html[data-fx="full"] & body::before {
    animation: sk-samurai-ambient 26s ease-in-out infinite;
  }

  /* entrance: swift decisive arrival, subtle + full */
  @keyframes sk-samurai-enter {
    from {
      opacity: 0.0;
      transform: translateY(18px) scale(.982);
      filter: brightness(.92);
    }
    to {
      opacity: 0.85;
      transform: translateY(0) scale(1);
      filter: brightness(1);
    }
  }

  .card,
  .stat {
    animation: sk-samurai-enter 0.68s cubic-bezier(.16, .9, .25, 1) backwards !important;
    animation-delay: calc(var(--i, 0) * 42ms) !important;
  }

  /* feedback: sharp gold glint response on interaction */
  @media (hover: hover) {
    .btn:not(:disabled):hover,
    .seg button:hover,
    .tabs .tab:hover,
    .vdh-pills button:hover {
      box-shadow: 0 0 18px -2px var(--accent);
    }
  }

  /* accent: single bright blade slash across stat tiles */
  @keyframes sk-samurai-slash {
    from {
      transform: translateX(-130%);
      opacity: 0.0;
    }
    15% {
      opacity: 0.85;
    }
    35% {
      opacity: 0.85;
    }
    50% {
      opacity: 0.85;
    }
    65% {
      opacity: 0.85;
    }
    85% {
      opacity: 0.46;
    }
    to {
      transform: translateX(130%);
      opacity: 0.0;
    }
  }

  .stat.fx-shine::after {
    animation: sk-samurai-slash 1.1s cubic-bezier(.3, .6, .3, 1) calc(var(--k, 0) * 70ms + 300ms) 1 backwards !important;
  }

  /* signature: lacquer gleam flash, full mode only */
  body::after {
    content: "";
    background:
      linear-gradient(90deg, transparent 0%, var(--accent) 8%, transparent 16%),
      linear-gradient(180deg, transparent 0%, var(--accent-soft) 1px, transparent 2px);
    background-size: 100% 100%, 100% 12px;
    background-position: 0% 0%, 0% 0%;
    background-repeat: no-repeat, repeat-y;
    opacity: 0.25;
  }

  html[data-fx="full"] & body::after {
    animation: sk-samurai-gleam 18s ease-in-out infinite;
  }

  @keyframes sk-samurai-ambient {
    0%, 100% {
      opacity: 0.736;
    }
    50% {
      opacity: 0.506;
    }
  }

  @keyframes sk-samurai-gleam {
    0%, 100% {
      transform: translateY(-100vh) scaleX(1);
      opacity: 0.0;
    }
    20% {
      transform: translateY(-40vh) scaleX(1);
      opacity: 0.85;
    }
    40% {
      transform: translateY(20vh) scaleX(0.95);
      opacity: 0.85;
    }
    60% {
      transform: translateY(60vh) scaleX(0.9);
      opacity: 0.69;
    }
    80% {
      transform: translateY(100vh) scaleX(0.85);
      opacity: 0.23;
    }
  }
}

/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="zen-sakura"],
  html[data-skin="samurai"] {
    * {
      animation: none !important;
    }
  }
}


/* ============================================================ Meme  (pack_meme.css) */
/* Meme skins motion packs: pepe, stonksguy, doge, trump-america
 * Each skin fills all five slots (ambient, entrance, feedback, accent, signature) with motion that
 * belongs to its world. Scoped to html[data-skin="<id>"] so nothing leaks to other skins. */

/* ================================================================== PEPE: Rare Pepe — swamp glow, smug, unhinged */
html[data-skin="pepe"] body::before {
  content: "";
  background: radial-gradient(ellipse 120% 80% at 50% 30%, color-mix(in srgb, var(--accent-fill) 53%, transparent), transparent 55%);
}

html[data-skin="pepe"] .card,
html[data-skin="pepe"] .stat {
  animation: sk-pepe-ripple .6s cubic-bezier(.34, 1.56, .64, 1) backwards !important;
}

html[data-skin="pepe"] .card {
  animation-delay: calc(var(--i, 0) * 35ms) !important;
}

html[data-skin="pepe"] .stat {
  animation-delay: calc(var(--k, 0) * 35ms) !important;
}

html[data-skin="pepe"] .btn:hover {
  transform: translateY(-1px) rotate(.8deg);
}

html[data-skin="pepe"] .btn:not(:disabled):active {
  transform: scale(.94) rotate(-.6deg) translateY(1px);
}

html[data-skin="pepe"] .stat.fx-shine::after {
  animation: sk-pepe-ooze 1.3s cubic-bezier(.25, .46, .45, .94) calc(var(--k, 0) * 60ms + 280ms) 1 backwards !important;
}

html[data-skin="pepe"] body::after {
  content: "";
  background:
    radial-gradient(circle 22px at 12% 18%, color-mix(in srgb, var(--accent) 58%, transparent), transparent 65%),
    radial-gradient(circle 16px at 13% 19%, color-mix(in srgb, var(--accent-fill) 58%, transparent), transparent 50%);
}



@keyframes sk-pepe-swamp {
  0%, 100% { opacity: 0.322; transform: scale(1) translateY(0); }
  50% { opacity: 0.644; transform: scale(1.05) translateY(-4px); }
}

@keyframes sk-pepe-ripple {
  from { opacity: 0.0; transform: translateY(14px) scale(.92) skewY(-1.2deg); }
  to { opacity: 0.85; transform: translateY(0) scale(1) skewY(0); }
}

@keyframes sk-pepe-ooze {
  from { transform: translateX(-130%) scaleX(.8); opacity: 0.85; }
  to { transform: translateX(130%) scaleX(1.1); opacity: 0.85; }
}

@keyframes sk-pepe-eye {
  0%, 100% { opacity: 0.552; }
  50% { opacity: 0.85; }
}

/* ================================================================== STONKS GUY: Stonks guy — jagged, cheap 3D, deadpan */
html[data-skin="stonksguy"] body::before {
  content: "";
  background:
    linear-gradient(118deg, var(--accent) 0%, var(--accent) 2px, transparent 2px, transparent 4px) 0 0 / 18px 18px repeat,
    linear-gradient(28deg, var(--accent) 0%, var(--accent) 2px, transparent 2px, transparent 4px) 0 0 / 18px 18px repeat;
  opacity: .08;
  transform: skewX(-6deg);
}

html[data-skin="stonksguy"] .card,
html[data-skin="stonksguy"] .stat {
  animation: sk-stonksguy-crunch .5s cubic-bezier(.2, 1.2, .8, 1) backwards !important;
}

html[data-skin="stonksguy"] .card {
  animation-delay: calc(var(--i, 0) * 32ms) !important;
}

html[data-skin="stonksguy"] .stat {
  animation-delay: calc(var(--k, 0) * 32ms) !important;
}

@media (hover: hover) {
  html[data-skin="stonksguy"] .btn:not(:disabled):hover {
    box-shadow: var(--btn-bevel), 0 0 0 1px var(--frame-hot), 0 0 18px -3px color-mix(in srgb, var(--accent) 55%, transparent), 0 4px 0 color-mix(in srgb, var(--accent) 30%, transparent) !important;
    transform: translateY(-2px) scaleY(.96) !important;
  }
}

html[data-skin="stonksguy"] .btn:not(:disabled):active {
  transform: scaleX(1.02) scaleY(.92) translateY(2px) !important;
  box-shadow: inset 0 3px 8px color-mix(in srgb, var(--text2) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 0 1px var(--frame-hot) !important;
}

html[data-skin="stonksguy"] .stat.fx-shine::after {
  animation: sk-stonksguy-jagged 1s cubic-bezier(.25, .1, .82, .3) calc(var(--k, 0) * 65ms + 310ms) 1 backwards !important;
}

html[data-skin="stonksguy"] body::after {
  content: "";
  background: linear-gradient(45deg, var(--accent) 58%, transparent 49%, transparent 51%, var(--accent) 58%);
  background-size: 3px 3px;
  opacity: .04;
  pointer-events: none;
  z-index: -1;
}



@keyframes sk-stonksguy-arrow {
  0% { transform: skewX(-6deg) translateX(-100px) translateY(0); opacity: 0.0; }
  10% { opacity: 0.184; }
  90% { opacity: 0.184; }
  100% { transform: skewX(-6deg) translateX(100px) translateY(-8px); opacity: 0.0; }
}

@keyframes sk-stonksguy-crunch {
  from { opacity: 0.0; transform: scaleX(.75) scaleY(1.18) translateY(12px) skewX(4deg); }
  to { opacity: 0.85; transform: scaleX(1) scaleY(1) translateY(0) skewX(0); }
}

@keyframes sk-stonksguy-jagged {
  0% { transform: translateX(-130%) scaleX(.7); }
  50% { transform: translateX(-20%) scaleX(1.1); }
  100% { transform: translateX(130%) scaleX(.9); }
}

@keyframes sk-stonksguy-dither {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(2px) translateY(-1px); }
  50% { transform: translateX(-1px) translateY(1px); }
  75% { transform: translateX(-2px) translateY(-2px); }
}

/* ================================================================== DOGE: Doge — bounce, comic, warm, much wow */
html[data-skin="doge"] body::before {
  content: "";
  background:
    radial-gradient(circle 16px at 18% 26%, color-mix(in srgb, var(--accent-fill) 58%, transparent), transparent 48%),
    radial-gradient(circle 12px at 74% 62%, color-mix(in srgb, var(--accent-fill) 48%, transparent), transparent 45%);
}

html[data-skin="doge"] .card,
html[data-skin="doge"] .stat {
  animation: sk-doge-boing .55s cubic-bezier(.34, 1.56, .64, 1) backwards !important;
}

html[data-skin="doge"] .card {
  animation-delay: calc(var(--i, 0) * 30ms) !important;
}

html[data-skin="doge"] .stat {
  animation-delay: calc(var(--k, 0) * 30ms) !important;
}

@media (hover: hover) {
  html[data-skin="doge"] .btn:not(:disabled):hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--btn-bevel), 0 0 0 1px var(--frame-hot), 0 0 16px -2px color-mix(in srgb, var(--accent-fill) 60%, transparent), 0 8px 16px -4px rgba(0,0,0,.2) !important;
  }
}

html[data-skin="doge"] .btn:not(:disabled):active {
  transform: scale(.96) translateY(2px) !important;
  box-shadow: inset 0 3px 8px color-mix(in srgb, var(--gold-edge) 40%, transparent), inset 0 0 14px color-mix(in srgb, var(--accent-fill) 20%, transparent), 0 0 0 1px var(--frame-hot) !important;
}

html[data-skin="doge"] .stat.fx-shine::after {
  animation: sk-doge-bounce-shine 1.1s cubic-bezier(.34, 1.56, .64, 1) calc(var(--k, 0) * 55ms + 280ms) 1 backwards !important;
}

html[data-skin="doge"] body::after {
  content: "";
  background:
    radial-gradient(circle 14px at 28% 38%, color-mix(in srgb, var(--accent-fill) 58%, transparent), transparent 50%);
}



@keyframes sk-doge-bubble {
  0%, 100% { opacity: 0.276; transform: translateY(0) scale(1); }
  50% { opacity: 0.736; transform: translateY(-12px) scale(1.15); }
}

@keyframes sk-doge-boing {
  0% { opacity: 0.0; transform: translateY(20px) scale(.85); }
  70% { transform: translateY(-3px) scale(1.04); }
  100% { opacity: 0.85; transform: translateY(0) scale(1); }
}

@keyframes sk-doge-bounce-shine {
  0% { transform: translateX(-130%) scaleX(.7); opacity: 0.85; }
  60% { transform: translateX(60%) scaleX(1.2); opacity: 0.85; }
  100% { transform: translateX(130%) scaleX(.9); opacity: 0.85; }
}

@keyframes sk-doge-float {
  0%, 100% { opacity: 0.368; transform: translateY(0) translateX(0); }
  25% { opacity: 0.644; transform: translateY(-8px) translateX(6px); }
  75% { opacity: 0.552; transform: translateY(-4px) translateX(-4px); }
}

/* ================================================================== TRUMP-AMERICA: America — stars, stripes, bombast, ceremonial */
html[data-skin="trump-america"] body::before {
  content: "";
  background:
    radial-gradient(circle 2px at 12% 18%, var(--accent) 58%, transparent 100%),
    radial-gradient(circle 1.5px at 34% 42%, var(--accent) 58%, transparent 100%),
    radial-gradient(circle 2px at 68% 22%, var(--accent) 58%, transparent 100%),
    radial-gradient(circle 1.5px at 82% 58%, var(--accent) 58%, transparent 100%),
    radial-gradient(circle 2px at 24% 74%, var(--accent) 58%, transparent 100%),
    repeating-linear-gradient(0deg, var(--fill) 0, var(--fill) 8px, transparent 8px, transparent 16px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 16px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  opacity: .08;
}

html[data-skin="trump-america"] .card,
html[data-skin="trump-america"] .stat {
  animation: sk-trump-america-rise .58s cubic-bezier(.12, .88, .18, 1) backwards !important;
}

html[data-skin="trump-america"] .card {
  animation-delay: calc(var(--i, 0) * 40ms) !important;
}

html[data-skin="trump-america"] .stat {
  animation-delay: calc(var(--k, 0) * 40ms) !important;
}

@media (hover: hover) {
  html[data-skin="trump-america"] .btn:not(:disabled):hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: var(--btn-bevel), 0 0 0 1px var(--frame-hot), 0 0 20px -2px color-mix(in srgb, var(--accent-fill) 70%, transparent), 0 6px 16px -3px rgba(0,0,0,.4) !important;
  }
}

html[data-skin="trump-america"] .btn:not(:disabled):active {
  transform: scale(.94) translateY(2px) !important;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 0 16px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 0 1px var(--frame-hot) !important;
}

html[data-skin="trump-america"] .stat.fx-shine::after {
  animation: sk-trump-america-sweep 1.2s cubic-bezier(.2, .6, .4, 1) calc(var(--k, 0) * 70ms + 320ms) 1 backwards !important;
}

html[data-skin="trump-america"] body::after {
  content: "";
  background:
    radial-gradient(circle 3px at 16% 28%, var(--accent) 58%, transparent 100%),
    radial-gradient(circle 2.5px at 76% 34%, var(--accent) 58%, transparent 100%),
    radial-gradient(circle 3px at 42% 72%, var(--accent) 58%, transparent 100%);
  opacity: .12;
  pointer-events: none;
  z-index: -1;
}



@keyframes sk-trump-america-stars {
  0% { transform: translateX(-8px); opacity: 0.184; }
  50% { opacity: 0.276; }
  100% { transform: translateX(8px); opacity: 0.184; }
}

@keyframes sk-trump-america-rise {
  from { opacity: 0.0; transform: translateY(16px) scale(.92) rotateX(8deg); }
  to { opacity: 0.85; transform: translateY(0) scale(1) rotateX(0); }
}

@keyframes sk-trump-america-sweep {
  from { transform: translateX(-140%); filter: brightness(1.2); }
  to { transform: translateX(140%); filter: brightness(1); }
}

@keyframes sk-trump-america-stars-spin {
  0% { opacity: 0.23; transform: rotate(0deg) scale(1); }
  50% { opacity: 0.414; }
  100% { opacity: 0.23; transform: rotate(360deg) scale(1); }
}

/* looping ambient runs only at Full effects */


/* ============================================================ Crypto  (pack_crypto.css) */
/* =====================================================================
   Bitcoin: proof-of-work, weight, hard edges, blocks landing on a beat
   ===================================================================== */

html[data-skin="bitcoin"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 120% 140% at 50% 110%, var(--accent) 0%, var(--accent-soft) 58%, transparent 68%) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 140% 100% at 50% 115%, var(--accent-soft) 0%, transparent 45%) 0 0 / 100% 100% no-repeat;
  opacity: 0.08;
  animation-play-state: var(--play, paused);
}


@keyframes sk-bitcoin-furnace {
  0%, 100% { opacity: 0.115; }
  50% { opacity: 0.253; }
}

html[data-skin="bitcoin"] .card,
html[data-skin="bitcoin"] .stat {
  animation: sk-bitcoin-land 0.52s cubic-bezier(0.35, 0.75, 0.15, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

html[data-fx="off"] html[data-skin="bitcoin"] .card,
html[data-fx="off"] html[data-skin="bitcoin"] .stat {
  animation: none;
}

@keyframes sk-bitcoin-land {
  from {
    opacity: 0.0;
    transform: translateY(24px) scale(0.98);
  }
  70% {
    opacity: 0.85;
    transform: translateY(-3px) scale(1.005);
  }
  to {
    opacity: 0.85;
    transform: translateY(0) scale(1);
  }
}

html[data-skin="bitcoin"] .btn:not(:disabled):hover,
html[data-skin="bitcoin"] .seg button:hover,
html[data-skin="bitcoin"] .tabs .tab:hover {
  box-shadow: var(--btn-bevel), 0 0 0 1px var(--border), 0 0 16px -4px color-mix(in srgb, var(--accent) 45%, transparent);
}

html[data-skin="bitcoin"] .btn:not(:disabled):active,
html[data-skin="bitcoin"] .seg button:active,
html[data-skin="bitcoin"] .tabs .tab:active {
  transform: scale(0.93) translateY(2px);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 1px var(--border);
  transition-duration: 0.04s;
}

html[data-skin="bitcoin"] .stat.fx-shine::after {
  animation: sk-bitcoin-smelt 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(var(--k, 0) * 70ms + 280ms) 1 backwards;
}

@keyframes sk-bitcoin-smelt {
  0% {
    opacity: 0;
    box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent);
  }
  25% {
    opacity: 0.9;
    box-shadow: inset 0 0 20px 2px color-mix(in srgb, var(--accent) 60%, transparent);
    transform: scale(1.15);
  }
  55% {
    opacity: 0.4;
    box-shadow: inset 0 0 12px 4px color-mix(in srgb, var(--accent) 25%, transparent);
    transform: scale(0.95);
  }
  100% {
    opacity: 0;
    box-shadow: inset 0 0 0 8px transparent;
    transform: scale(1);
  }
}

html[data-skin="bitcoin"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 44%, var(--accent) 58%, transparent 56%) -100% 50% / 200% 2px no-repeat,
    linear-gradient(0deg, transparent 44%, var(--accent) 58%, transparent 56%) 50% -100% / 2px 200% no-repeat;
  opacity: 0;
  animation-play-state: var(--play, paused);
}


@keyframes sk-bitcoin-settle {
  0% {
    opacity: 0.805;
    transform: scale(0.15);
  }
  40% {
    opacity: 0.644;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.0;
    transform: scale(1);
  }
}


/* =====================================================================
   Ethereum: crystalline, faceted, prismatic refraction, octahedron light
   ===================================================================== */

html[data-skin="ethereum"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(65deg, var(--accent) 0%, transparent 40%) -100% 50% / 300% 300% no-repeat,
    linear-gradient(155deg, var(--accent-soft) 0%, transparent 35%) 100% 50% / 300% 300% no-repeat,
    linear-gradient(245deg, var(--accent-fill) 0%, transparent 38%) 50% -100% / 300% 300% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 35%, color-mix(in srgb, var(--accent) 14%, transparent) 65%);
  opacity: 0.09;
  animation-play-state: var(--play, paused);
}


@keyframes sk-ethereum-facets {
  0% {
    background-position: -100% 50%, 100% 50%, 50% -100%, 50% 50%;
  }
  50% {
    background-position: 50% 50%, 50% 50%, 50% 100%, 50% 50%;
  }
  100% {
    background-position: -100% 50%, 100% 50%, 50% -100%, 50% 50%;
  }
}

html[data-skin="ethereum"] .card,
html[data-skin="ethereum"] .stat {
  animation: sk-ethereum-float 0.68s cubic-bezier(0.16, 0.82, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

html[data-fx="off"] html[data-skin="ethereum"] .card,
html[data-fx="off"] html[data-skin="ethereum"] .stat {
  animation: none;
}

@keyframes sk-ethereum-float {
  from {
    opacity: 0.0;
    transform: translateY(16px) rotateX(12deg) scale(0.96);
  }
  60% {
    opacity: 0.85;
    transform: translateY(-2px) rotateX(0deg) scale(1.01);
  }
  to {
    opacity: 0.85;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

html[data-skin="ethereum"] .btn:not(:disabled):hover,
html[data-skin="ethereum"] .seg button:hover,
html[data-skin="ethereum"] .tabs .tab:hover {
  box-shadow: var(--btn-bevel), 0 0 0 1px var(--border), 0 0 20px -2px color-mix(in srgb, var(--accent) 52%, transparent);
}

html[data-skin="ethereum"] .btn:not(:disabled):active,
html[data-skin="ethereum"] .seg button:active,
html[data-skin="ethereum"] .tabs .tab:active {
  transform: scale(0.95) translateY(1px) rotateY(-2deg);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 16px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 0 1px var(--border);
  transition-duration: 0.05s;
}

html[data-skin="ethereum"] .stat.fx-shine::after {
  animation: sk-ethereum-prism 1.35s cubic-bezier(0.28, 0.5, 0.32, 1) calc(var(--k, 0) * 70ms + 300ms) 1 backwards;
}

@keyframes sk-ethereum-prism {
  0% {
    opacity: 0;
    transform: translateX(-140%);
    background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--accent) 80%, transparent) 50%, transparent 62%);
  }
  35% {
    opacity: 0.85;
    background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--accent-fill) 70%, transparent) 50%, transparent 62%);
  }
  70% {
    opacity: 0.55;
    background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--accent) 40%, transparent) 50%, transparent 62%);
  }
  100% {
    opacity: 0;
    transform: translateX(140%);
    background: linear-gradient(115deg, transparent 38%, transparent 50%, transparent 62%);
  }
}

html[data-skin="ethereum"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation-play-state: var(--play, paused);
  background:
    conic-gradient(from 0deg at 50% 40%, var(--accent) 0deg, transparent 120deg, var(--accent-fill) 180deg, transparent 240deg, var(--accent) 360deg) 50% 40% / 240px 200px no-repeat,
    conic-gradient(from 180deg at 50% 60%, var(--accent-fill) 0deg, transparent 120deg, var(--accent) 180deg, transparent 240deg, var(--accent-fill) 360deg) 50% 60% / 240px 200px no-repeat;
}


@keyframes sk-ethereum-octahedron {
  0% {
    opacity: 0.0;
    transform: scale(0.8) rotateX(-20deg) rotateY(-25deg) rotateZ(0deg);
  }
  25% {
    opacity: 0.506;
    transform: scale(1.05) rotateX(10deg) rotateY(50deg) rotateZ(45deg);
  }
  50% {
    opacity: 0.414;
    transform: scale(0.98) rotateX(-8deg) rotateY(120deg) rotateZ(90deg);
  }
  75% {
    opacity: 0.46;
    transform: scale(1.02) rotateX(15deg) rotateY(200deg) rotateZ(180deg);
  }
  100% {
    opacity: 0.0;
    transform: scale(0.8) rotateX(-20deg) rotateY(360deg) rotateZ(360deg);
  }
}

/* looping ambient runs only at Full effects */


/* ============================================================ Casino  (pack_casino_a.css) */
/* ============================================================
   CASINO MOTION PACK — Five distinct worlds, no generic choreography.
   Each skin fills all five slots: ambient, entrance, feedback, accent, signature.
   Scoped to html[data-skin="<id>"] so no leakage. Looping animations under data-fx="full" only.
   ============================================================ */

/* ============================================================
   VEGAS NEON — Electric buzz, cyan/pink neon tubes, subtle flicker
   ============================================================ */
html[data-skin="vegas-neon"] body::before {
  content: "";
  background: radial-gradient(ellipse 100% 60% at 50% 0%, color-mix(in srgb, var(--accent-fill) 10%, transparent), transparent 70%),
              radial-gradient(ellipse 80% 40% at 50% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%);
}


@keyframes sk-vegas-neon-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.85; }
}

html[data-skin="vegas-neon"] .card,
html[data-skin="vegas-neon"] .stat {
  animation: sk-vegas-neon-entrance 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes sk-vegas-neon-entrance {
  0% { opacity: 0.0; transform: translateY(20px); filter: drop-shadow(0 0 0px transparent); }
  70% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-fill) 60%, transparent)); }
  100% { opacity: 0.85; transform: translateY(0); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-fill) 20%, transparent)); }
}

@media (hover: hover) {
  html[data-skin="vegas-neon"] .btn:not(:disabled):hover {
    box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--accent), inset 0 1px 0 color-mix(in srgb, var(--gold-glint) 22%, transparent);
  }
  html[data-skin="vegas-neon"] .stat:hover::after {
    animation: sk-vegas-neon-shine 1s cubic-bezier(0.3, 0.6, 0.3, 1) 1 both;
  }
}

@keyframes sk-vegas-neon-shine {
  0% { transform: translateX(-130%); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-fill) 60%, transparent)); }
  50% { filter: drop-shadow(0 0 16px var(--accent-fill)); }
  100% { transform: translateX(130%); filter: drop-shadow(0 0 0px color-mix(in srgb, var(--accent-fill) 40%, transparent)); }
}

html[data-skin="vegas-neon"] body::after {
  content: "";
  background:
    radial-gradient(circle at 20% 40%, color-mix(in srgb, var(--accent-fill) 7%, transparent), transparent 25%),
    radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 25%);
}


@keyframes sk-vegas-neon-buzz {
  0% { filter: opacity(0.95); }
  100% { filter: opacity(1.0); }
}

/* ============================================================
   ROULETTE — Spinning wheel, red/black alternation, ball settling
   ============================================================ */
html[data-skin="roulette"] body::before {
  content: "";
  background:
    conic-gradient(from 0deg, var(--fill) 0deg 180deg, var(--accent) 180deg 360deg),
    radial-gradient(circle, transparent 40%, color-mix(in srgb, var(--accent) 19%, transparent) 70%);
  background-size: 100% 100%;
  background-position: center;
  opacity: 0.22;
}


@keyframes sk-roulette-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

html[data-skin="roulette"] .card,
html[data-skin="roulette"] .stat {
  animation: sk-roulette-entrance 0.8s cubic-bezier(0.16, 0.9, 0.25, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes sk-roulette-entrance {
  0% { opacity: 0.0; transform: translateY(18px) scale(0.98) rotateY(25deg); }
  100% { opacity: 0.85; transform: translateY(0) scale(1) rotateY(0); }
}

@media (hover: hover) {
  html[data-skin="roulette"] .btn:not(:disabled):hover {
    animation: sk-roulette-wheel-snap 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) 1;
  }
  html[data-skin="roulette"] .stat:hover::after {
    animation: sk-roulette-shine 1.1s cubic-bezier(0.3, 0.6, 0.3, 1) 1 both;
  }
}

@keyframes sk-roulette-wheel-snap {
  0% { transform: rotateZ(0deg) translateY(-1px); }
  40% { transform: rotateZ(90deg) translateY(-1px); }
  70% { transform: rotateZ(350deg) translateY(-1px); }
  100% { transform: rotateZ(360deg) translateY(-1px); }
}

@keyframes sk-roulette-shine {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

html[data-skin="roulette"] body::after {
  content: "";
  background: radial-gradient(circle at 50% 50%, var(--accent), transparent 60%);
  opacity: 0;
}


@keyframes sk-roulette-ball-settle {
  0% { opacity: 0.85; transform: translate(-120px, -120px) scale(1); }
  25% { opacity: 0.46; }
  50% { opacity: 0.0; transform: translate(0, 0) scale(0.6); }
  75% { opacity: 0.23; }
  100% { opacity: 0.0; }
}

/* ============================================================
   POKER FELT — Green baize, soft settling, quiet card-room charm
   ============================================================ */
html[data-skin="poker-felt"] body::before {
  content: "";
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--up-edge) 10%, transparent) 0, color-mix(in srgb, var(--up-edge) 10%, transparent) 2px, transparent 2px, transparent 4px),
    radial-gradient(ellipse 100% 80% at 50% 50%, color-mix(in srgb, var(--up-edge) 5%, transparent), transparent 70%);
  opacity: 0.5;
}

html[data-skin="poker-felt"] .card,
html[data-skin="poker-felt"] .stat {
  animation: sk-poker-felt-settle 0.9s cubic-bezier(0.26, 0.46, 0.28, 0.99) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes sk-poker-felt-settle {
  0% { opacity: 0.0; transform: translateY(22px) scale(0.97); }
  85% { transform: translateY(-2px) scale(1.02); }
  100% { opacity: 0.85; transform: translateY(0) scale(1); }
}

@media (hover: hover) {
  html[data-skin="poker-felt"] .btn:not(:disabled):hover {
    box-shadow: 0 0 0 1px var(--border), 0 8px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 color-mix(in srgb, var(--gold-glint) 22%, transparent);
    transform: translateY(-2px);
  }
  html[data-skin="poker-felt"] .stat:hover::after {
    animation: sk-poker-felt-shine 1.2s cubic-bezier(0.3, 0.7, 0.4, 1) 1 both;
  }
}

@keyframes sk-poker-felt-shine {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

html[data-skin="poker-felt"] body::after {
  content: "";
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--up-edge) 14%, transparent), transparent 40%),
    radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--accent-fill) 5%, transparent), transparent 45%);
  opacity: 0.7;
}

/* ============================================================
   SLOTS — Reels spinning, snapping, payout flash
   ============================================================ */
html[data-skin="slots"] body::before {
  content: "";
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 10%, transparent) 0, color-mix(in srgb, var(--accent) 10%, transparent) 40px, transparent 40px, transparent 80px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-fill) 10%, transparent), transparent);
}


@keyframes sk-slots-reel-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

html[data-skin="slots"] .card,
html[data-skin="slots"] .stat {
  animation: sk-slots-reel-entrance 0.75s cubic-bezier(0.36, 0, 0.66, -0.56) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes sk-slots-reel-entrance {
  0% { opacity: 0.0; transform: translateY(-30px); }
  60% { transform: translateY(4px); }
  100% { opacity: 0.85; transform: translateY(0); }
}

@media (hover: hover) {
  html[data-skin="slots"] .btn:not(:disabled):hover {
    animation: sk-slots-button-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
  }
  html[data-skin="slots"] .stat:hover::after {
    animation: sk-slots-shine 0.9s cubic-bezier(0.3, 0.6, 0.3, 1) 1 both;
  }
}

@keyframes sk-slots-button-pop {
  0% { transform: translateY(-1px) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(-1px) scale(1); }
}

@keyframes sk-slots-shine {
  0% { transform: translateX(-130%); }
  50% { filter: brightness(1.4); }
  100% { transform: translateX(130%); filter: brightness(1); }
}

html[data-skin="slots"] body::after {
  content: "";
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-fill) 58%, transparent), transparent 60%);
  opacity: 0;
}


@keyframes sk-slots-payout-flash {
  0%, 85%, 100% { opacity: 0.0; transform: scale(0.8); }
  87% { opacity: 0.85; transform: scale(1); }
  90% { opacity: 0.69; transform: scale(1.1); }
  95% { opacity: 0.0; }
}

/* ============================================================
   BLACKJACK — Cards dealt and flipped, crisp snap, 21
   ============================================================ */
html[data-skin="blackjack"] body::before {
  content: "";
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-fill) 5%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--accent-fill) 5%, transparent) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%, color-mix(in srgb, var(--accent-fill) 7%, transparent), transparent 70%);
  opacity: 0.5;
}

html[data-skin="blackjack"] .card,
html[data-skin="blackjack"] .stat {
  animation: sk-blackjack-card-flip 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes sk-blackjack-card-flip {
  0% { opacity: 0.0; transform: translateY(10px) rotateY(90deg) scaleX(0.5); }
  70% { transform: rotateY(-10deg); }
  100% { opacity: 0.85; transform: translateY(0) rotateY(0) scaleX(1); }
}

@media (hover: hover) {
  html[data-skin="blackjack"] .btn:not(:disabled):hover {
    box-shadow: 0 0 0 2px var(--border), 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 color-mix(in srgb, var(--gold-glint) 22%, transparent);
    transform: translateY(-2px);
  }
  html[data-skin="blackjack"] .stat:hover::after {
    animation: sk-blackjack-snap 0.8s cubic-bezier(0.38, 0.8, 0.2, 1) 1 both;
  }
}

@keyframes sk-blackjack-snap {
  0% { transform: translateX(-130%) scaleX(0.8); }
  50% { scaleX(1.1); }
  100% { transform: translateX(130%) scaleX(1); }
}

html[data-skin="blackjack"] body::after {
  content: "";
  background:
    linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 24%, transparent) 25%, transparent 50%, color-mix(in srgb, var(--accent) 24%, transparent) 75%, transparent 100%),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent-fill) 19%, transparent), transparent 60%);
}


@keyframes sk-blackjack-deal-settle {
  0%, 100% { opacity: 0.46; transform: translateX(-15px); }
  25% { opacity: 0.85; transform: translateX(0); }
  50% { opacity: 0.23; transform: translateX(8px); }
  75% { opacity: 0.69; transform: translateX(-2px); }
}

/* looping ambient runs only at Full effects */


/* ============================================================ Casino  (pack_casino_b.css) */
/* Casino motion pack B: five distinct gaming personalities
 * Each skin breaks from the generic gold-bullion choreography with motion
 * that belongs to its own world: craps (tumbling), baccarat (stillness),
 * racetrack (motion blur), high-roller (floating confidence), lucky-lantern (sway).
 */

/* ======================================== CRAPS — tumbling dice, bounce energy */

/* Ambient: subtle rotating dice-like shapes, faint tumble */
html[data-skin="craps"] body::before {
  content: "";
  background:
    linear-gradient(45deg, var(--accent) 0.5px, transparent 0.5px),
    linear-gradient(-45deg, var(--accent) 0.5px, transparent 0.5px);
  background-size: 48px 48px, 48px 48px;
  background-position: 0 0, 0 0;
  opacity: 0.02;
}


@keyframes sk-craps-tumble {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 48px 48px, -48px -48px; }
}

/* Entrance: bounce in like a die bouncing off a backboard */
html[data-skin="craps"] .card,
html[data-skin="craps"] .stat {
  animation: sk-craps-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes sk-craps-bounce {
  0% { opacity: 0.0; transform: translateY(24px) scale(0.92); }
  60% { transform: translateY(-4px) scale(1.02); }
  100% { opacity: 0.85; transform: translateY(0) scale(1); }
}

/* Feedback: bouncy hover, quick spring */
@media (hover: hover) {
  html[data-skin="craps"] .btn:not(:disabled):hover,
  html[data-skin="craps"] .stat:hover,
  html[data-skin="craps"] .card:hover {
    animation: sk-craps-spring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
  }
}

@keyframes sk-craps-spring {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(-2px); }
}

/* Accent: fast red spin sweep across stat tiles */
html[data-skin="craps"] .stat.fx-shine::after {
  background: linear-gradient(115deg, transparent 38%, var(--fill) 50%, transparent 62%);
  animation: sk-craps-spin-sweep 0.85s cubic-bezier(0.3, 0.6, 0.3, 1) calc(var(--k, 0) * 70ms + 300ms) 1 backwards;
}

@keyframes sk-craps-spin-sweep {
  from { transform: translateX(-130%) rotate(-20deg); }
  to { transform: translateX(130%) rotate(0deg); }
}

/* Signature: dice tumble flourish in the background */
html[data-skin="craps"] body::after {
  content: "";
  background:
    radial-gradient(2px 2px at 20% 30%, var(--fill), transparent),
    radial-gradient(2.5px 2.5px at 75% 65%, var(--fill), transparent),
    radial-gradient(1.8px 1.8px at 50% 80%, var(--fill), transparent);
  background-size: 200px 200px, 240px 240px, 180px 180px;
  background-position: 0 0, 0 0, 0 0;
  opacity: 0.04;
}


@keyframes sk-craps-dice-scatter {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: -200px 200px, 240px -240px, -180px 180px; }
}


/* ======================================== BACCARAT — formal stillness, luxe restraint */

/* Ambient: imperceptible breath, barely-there pulse */
html[data-skin="baccarat"] body::before {
  content: "";
  background: radial-gradient(ellipse 1200px 500px at 50% -8%, var(--fill), transparent 65%);
  opacity: 0.02;
}


@keyframes sk-baccarat-breath {
  0%, 100% { opacity: 0.046; }
  50% { opacity: 0.092; }
}

/* Entrance: slow, dignified slide from above */
html[data-skin="baccarat"] .card,
html[data-skin="baccarat"] .stat {
  animation: sk-baccarat-descend 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes sk-baccarat-descend {
  0% { opacity: 0.0; transform: translateY(12px); }
  100% { opacity: 0.85; transform: translateY(0); }
}

/* Feedback: barely-perceptible lift, no urgency */
@media (hover: hover) {
  html[data-skin="baccarat"] .btn:not(:disabled):hover,
  html[data-skin="baccarat"] .stat:hover,
  html[data-skin="baccarat"] .card:hover {
    transform: translateY(-1px);
    transition: transform 0.35s ease-out, box-shadow 0.35s ease-out;
  }
}

/* Accent: glacial gold sweep, the slowest accent */
html[data-skin="baccarat"] .stat.fx-shine::after {
  background: linear-gradient(115deg, transparent 40%, var(--accent) 50%, transparent 60%);
  animation: sk-baccarat-sweep 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) calc(var(--k, 0) * 70ms + 400ms) 1 backwards;
}

@keyframes sk-baccarat-sweep {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Signature: imperceptible glow shift, like distant candlelight */
html[data-skin="baccarat"] body::after {
  content: "";
  background: radial-gradient(ellipse 900px 400px at 50% -8%, var(--accent), transparent 68%);
  opacity: 0.01;
}


@keyframes sk-baccarat-candleglow {
  0%, 100% { opacity: 0.023; }
  50% { opacity: 0.057; }
}


/* ======================================== RACETRACK — motion blur, turf charge */

/* Ambient: horizontal motion-blur streaks, grass texture in motion */
html[data-skin="racetrack"] body::before {
  content: "";
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-fill) 24%, transparent) 0, transparent 10%, transparent 90%, color-mix(in srgb, var(--accent-fill) 24%, transparent) 100%),
    repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 12px);
  background-size: 100% 40px, 420px 60px;
  background-position: 0 50%, 0 50%;
  opacity: 0.05;
}


@keyframes sk-racetrack-blur {
  0% { background-position: 0 50%, 0 50%; }
  100% { background-position: 0 50%, -420px 50%; }
}

/* Entrance: fast horizontal charge like a horse at the gate */
html[data-skin="racetrack"] .card,
html[data-skin="racetrack"] .stat {
  animation: sk-racetrack-charge 0.65s cubic-bezier(0.25, 0.82, 0.25, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes sk-racetrack-charge {
  0% { opacity: 0.0; transform: translateX(-16px) translateY(12px); }
  100% { opacity: 0.85; transform: translateX(0) translateY(0); }
}

/* Feedback: quick dash feedback, energetic */
@media (hover: hover) {
  html[data-skin="racetrack"] .btn:not(:disabled):hover,
  html[data-skin="racetrack"] .stat:hover,
  html[data-skin="racetrack"] .card:hover {
    animation: sk-racetrack-dash 0.3s cubic-bezier(0.25, 0.82, 0.25, 1) 1;
  }
}

@keyframes sk-racetrack-dash {
  0% { transform: translateX(0); }
  50% { transform: translateX(3px); }
  100% { transform: translateX(-2px); }
}

/* Accent: fast horizontal sweep with motion blur feel */
html[data-skin="racetrack"] .stat.fx-shine::after {
  background: linear-gradient(90deg, transparent 35%, var(--accent) 50%, transparent 65%);
  animation: sk-racetrack-photo-finish 0.75s cubic-bezier(0.25, 0.82, 0.25, 1) calc(var(--k, 0) * 70ms + 280ms) 1 backwards;
}

@keyframes sk-racetrack-photo-finish {
  from { transform: translateX(-150%); }
  to { transform: translateX(150%); }
}

/* Signature: turf galloping motion, very subtle */
html[data-skin="racetrack"] body::after {
  content: "";
  background: linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size: 180px 100%;
  background-position: 0 0;
  opacity: 0.03;
}


@keyframes sk-racetrack-gallop {
  0% { background-position: 0 0; }
  100% { background-position: -180px 0; }
}


/* ======================================== HIGH-ROLLER — velvet confidence, floating ease */

/* Ambient: subtle rotating luxury shimmer, barely visible */
html[data-skin="high-roller"] body::before {
  content: "";
  background: radial-gradient(ellipse 1100px 500px at 50% -6%, var(--accent), transparent 70%);
  opacity: 0.015;
  filter: blur(1px);
}


@keyframes sk-high-roller-shimmer {
  0%, 100% { opacity: 0.034; }
  50% { opacity: 0.069; }
}

/* Entrance: gentle, floating rise with ease */
html[data-skin="high-roller"] .card,
html[data-skin="high-roller"] .stat {
  animation: sk-high-roller-float 0.72s cubic-bezier(0.2, 0.7, 0.4, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes sk-high-roller-float {
  0% { opacity: 0.0; transform: translateY(10px) scale(0.98); }
  100% { opacity: 0.85; transform: translateY(0) scale(1); }
}

/* Feedback: unhurried, confident hover — just a gentle lift */
@media (hover: hover) {
  html[data-skin="high-roller"] .btn:not(:disabled):hover,
  html[data-skin="high-roller"] .stat:hover,
  html[data-skin="high-roller"] .card:hover {
    transform: translateY(-1.5px);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.4, 1), box-shadow 0.4s ease-out;
  }
}

/* Accent: luxurious slow gold sweep */
html[data-skin="high-roller"] .stat.fx-shine::after {
  background: linear-gradient(115deg, transparent 42%, var(--accent) 50%, transparent 58%);
  animation: sk-high-roller-sweep 1.25s cubic-bezier(0.15, 0.7, 0.2, 1) calc(var(--k, 0) * 70ms + 350ms) 1 backwards;
}

@keyframes sk-high-roller-sweep {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Signature: hovering glow, velvet floating motion */
html[data-skin="high-roller"] body::after {
  content: "";
  background: radial-gradient(ellipse 950px 450px at 50% -5%, var(--accent), transparent 72%);
  opacity: 0.008;
}


@keyframes sk-high-roller-float-glow {
  0%, 100% { opacity: 0.018; transform: translateY(0); }
  50% { opacity: 0.034; transform: translateY(-2px); }
}


/* ======================================== LUCKY-LANTERN — swaying warmth, festival glow */

/* Ambient: swaying lantern silhouettes, warm red/gold wash */
html[data-skin="lucky-lantern"] body::before {
  content: "";
  background:
    radial-gradient(circle at 15% 40%, var(--fill), transparent 35%),
    radial-gradient(circle at 85% 55%, var(--accent), transparent 30%),
    radial-gradient(ellipse 1000px 500px at 50% 10%, var(--fill), transparent 65%);
  background-size: 240px 320px, 200px 280px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  opacity: 0.035;
}


@keyframes sk-lucky-lantern-sway {
  0% { background-position: 0 0, 0 0, 0 0; opacity: 0.035; }
  25% { background-position: -8px 4px, 6px -4px, 0 0; opacity: 0.045; }
  50% { background-position: 0 0, 0 0, 0 0; opacity: 0.035; }
  75% { background-position: 8px -4px, -6px 4px, 0 0; opacity: 0.045; }
  100% { background-position: 0 0, 0 0, 0 0; opacity: 0.035; }
}

/* Entrance: gentle sway in, not straight up */
html[data-skin="lucky-lantern"] .card,
html[data-skin="lucky-lantern"] .stat {
  animation: sk-lucky-lantern-sway-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes sk-lucky-lantern-sway-in {
  0% { opacity: 0.0; transform: translateY(18px) translateX(-4px); }
  50% { transform: translateX(4px); }
  100% { opacity: 0.85; transform: translateY(0) translateX(0); }
}

/* Feedback: gentle sway on hover, like a swaying lantern */
@media (hover: hover) {
  html[data-skin="lucky-lantern"] .btn:not(:disabled):hover,
  html[data-skin="lucky-lantern"] .stat:hover,
  html[data-skin="lucky-lantern"] .card:hover {
    animation: sk-lucky-lantern-hover-sway 0.6s ease-in-out 1;
  }
}

@keyframes sk-lucky-lantern-hover-sway {
  0% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-2px) translateX(2px); }
  50% { transform: translateY(-2px) translateX(0); }
  75% { transform: translateY(-2px) translateX(-2px); }
  100% { transform: translateY(-2px) translateX(0); }
}

/* Accent: warm red/gold sweep with a gentle pulse */
html[data-skin="lucky-lantern"] .stat.fx-shine::after {
  background: linear-gradient(115deg, transparent 38%, var(--accent) 48%, var(--fill) 50%, var(--accent) 52%, transparent 62%);
  animation: sk-lucky-lantern-glow-sweep 1.05s cubic-bezier(0.3, 0.6, 0.3, 1) calc(var(--k, 0) * 70ms + 320ms) 1 backwards;
}

@keyframes sk-lucky-lantern-glow-sweep {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Signature: swaying lantern glow, warm festival backdrop */
html[data-skin="lucky-lantern"] body::after {
  content: "";
  background:
    radial-gradient(circle at 20% 50%, var(--fill), transparent 40%),
    radial-gradient(circle at 80% 45%, var(--accent), transparent 35%);
  background-size: 280px 360px, 240px 320px;
  background-position: 0 0, 0 0;
  opacity: 0.025;
}


@keyframes sk-lucky-lantern-festival {
  0% { background-position: 0 0, 0 0; opacity: 0.025; }
  25% { background-position: -6px 3px, 6px -3px; opacity: 0.035; }
  50% { background-position: 0 0, 0 0; opacity: 0.025; }
  75% { background-position: 6px -3px, -6px 3px; opacity: 0.035; }
  100% { background-position: 0 0, 0 0; opacity: 0.025; }
}

/* looping ambient runs only at Full effects */


/* ============================================================ Mascot watermarks (html::before / ::after) */
/* Artwork is fetched from Wikimedia Commons by scripts/fetch_skin_art.py under licences that allow
 * commercial reuse; see web/img/skins/CREDITS.md. Monochrome pieces are inverted so they read against
 * their skin. The background never animates. */

/* baccarat */
html[data-skin="baccarat"]::before,
html[data-skin="baccarat"]::after {
  content: "";
  background-image: url("/img/skins/baccarat.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* bitcoin */
html[data-skin="bitcoin"]::before,
html[data-skin="bitcoin"]::after {
  content: "";
  background-image: url("/img/skins/bitcoin.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* blackjack */
html[data-skin="blackjack"]::before,
html[data-skin="blackjack"]::after {
  content: "";
  background-image: url("/img/skins/blackjack.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* craps */
html[data-skin="craps"]::before,
html[data-skin="craps"]::after {
  content: "";
  background-image: url("/img/skins/craps.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* doge */
html[data-skin="doge"]::before,
html[data-skin="doge"]::after {
  content: "";
  background-image: url("/img/skins/doge.svg?v=b48fd2055040");
  opacity: 0.22;
}

/* ethereum */
html[data-skin="ethereum"]::before,
html[data-skin="ethereum"]::after {
  content: "";
  background-image: url("/img/skins/ethereum.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* fishing */
html[data-skin="fishing"]::before,
html[data-skin="fishing"]::after {
  content: "";
  background-image: url("/img/skins/fishing.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* high-roller */
html[data-skin="high-roller"]::before,
html[data-skin="high-roller"]::after {
  content: "";
  background-image: url("/img/skins/high-roller.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* juicy-fruit */
html[data-skin="juicy-fruit"]::before,
html[data-skin="juicy-fruit"]::after {
  content: "";
  background-image: url("/img/skins/juicy-fruit.svg?v=b48fd2055040");
  opacity: 0.22;
}

/* lucky-lantern */
html[data-skin="lucky-lantern"]::before,
html[data-skin="lucky-lantern"]::after {
  content: "";
  background-image: url("/img/skins/lucky-lantern.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* muscle-car */
html[data-skin="muscle-car"]::before,
html[data-skin="muscle-car"]::after {
  content: "";
  background-image: url("/img/skins/muscle-car.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* pepe */
html[data-skin="pepe"]::before,
html[data-skin="pepe"]::after {
  content: "";
  background-image: url("/img/skins/pepe.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* poker-felt */
html[data-skin="poker-felt"]::before,
html[data-skin="poker-felt"]::after {
  content: "";
  background-image: url("/img/skins/poker-felt.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* racetrack */
html[data-skin="racetrack"]::before,
html[data-skin="racetrack"]::after {
  content: "";
  background-image: url("/img/skins/racetrack.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* roulette */
html[data-skin="roulette"]::before,
html[data-skin="roulette"]::after {
  content: "";
  background-image: url("/img/skins/roulette.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* samurai */
html[data-skin="samurai"]::before,
html[data-skin="samurai"]::after {
  content: "";
  background-image: url("/img/skins/samurai.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* slots */
html[data-skin="slots"]::before,
html[data-skin="slots"]::after {
  content: "";
  background-image: url("/img/skins/slots.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* sports */
html[data-skin="sports"]::before,
html[data-skin="sports"]::after {
  content: "";
  background-image: url("/img/skins/sports.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* stonksguy */
html[data-skin="stonksguy"]::before,
html[data-skin="stonksguy"]::after {
  content: "";
  background-image: url("/img/skins/stonksguy.svg?v=b48fd2055040");
  opacity: 0.22;
}

/* trump-america */
html[data-skin="trump-america"]::before,
html[data-skin="trump-america"]::after {
  content: "";
  background-image: url("/img/skins/trump-america.svg?v=b48fd2055040");
  opacity: 0.32;
  filter: invert(1);
}

/* vegas-neon */
html[data-skin="vegas-neon"]::before,
html[data-skin="vegas-neon"]::after {
  content: "";
  background-image: url("/img/skins/vegas-neon.svg?v=b48fd2055040");
  opacity: 0.32;
}

/* zen-sakura */
html[data-skin="zen-sakura"]::before,
html[data-skin="zen-sakura"]::after {
  content: "";
  background-image: url("/img/skins/zen-sakura.svg?v=b48fd2055040");
  opacity: 0.22;
  filter: brightness(.45);
}


/* ============================================================ Signature set-pieces
 * Asked for by name: the samurai's cut, and the juicy-fruit swell. Both are UI-only — the backdrop stays still. */

/* Samurai: a blade passes through the panel, the cut glints, then it bleeds and the wound closes. */
html[data-skin="samurai"] .card,
html[data-skin="samurai"] .stat,
html[data-skin="samurai"] .bt-root .panel { position: relative; }
html[data-fx="full"][data-skin="samurai"] .card::after,
html[data-fx="full"][data-skin="samurai"] .stat::after,
html[data-fx="full"][data-skin="samurai"] .bt-root .panel::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(104deg, transparent 46%, var(--accent) 49.2%, var(--gold-glint) 50%, var(--accent) 50.8%, transparent 54%),
    linear-gradient(104deg, transparent 48.6%, var(--down) 50%, transparent 51.6%);
  background-size: 300% 100%, 300% 100%;
  animation: sk-samurai-cut .62s cubic-bezier(.15, .85, .2, 1) backwards,
             sk-samurai-bleed 1.5s ease-out .5s backwards;
}
@keyframes sk-samurai-cut {
  from { background-position: 150% 0, 150% 0; opacity: 1; }
  to   { background-position: -150% 0, -150% 0; opacity: 1; }
}
@keyframes sk-samurai-bleed {          /* the cut weeps, then closes */
  0%   { opacity: .85; }
  35%  { opacity: .5; }
  100% { opacity: 0; }
}

/* Juicy fruit: controls swell as if they are about to burst, and settle again without ever popping. */
@keyframes sk-juicy-fruit-swell {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.055, 1.09); }
  70%      { transform: scale(.985, .97); }
}
html[data-fx="full"][data-skin="juicy-fruit"] .btn.primary:hover,
html[data-fx="full"][data-skin="juicy-fruit"] .stat:hover {
  animation: sk-juicy-fruit-swell 1.1s cubic-bezier(.34, 1.56, .64, 1) infinite;
}