/* RNG∞ — skins premium (js/shop.js : premium: true). Chacun : la carte, ses chiffres au repos, pendant le tirage
   (.slot.spinning) et quand un chiffre se pose (.slot.revealed), puis son cadre de duel (.side-<id>). Leur signature
   animée est dans js/skinfx.js, leur bouton dans css/buttons.css.
   Règles communes aux skins : remplissage `backwards` (jamais d'opacity: 1 en fin de révélation : les zéros de tête
   doivent rester estompés), déplacements ≤ .16em (la carte rogne ce qui dépasse). */

/* ================================================================== 🌸 Sakura — laque noire, encre et feuille d'or */
.num-card.skin-sakura {
  background:
    radial-gradient(circle at 78% 46%, rgba(255, 246, 229, .2) 0 .56em, rgba(255, 246, 229, .07) .57em .74em, transparent .95em),
    radial-gradient(ellipse 70% 90% at 12% 110%, rgba(244, 114, 182, .22), transparent 62%),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1d0f1c 0%, #120a14 55%, #0b0610 100%);
  border: 2px solid #d4a84a; border-radius: .5rem; color: #fff4ec;
  box-shadow: 0 0 0 1px #2a1420, 0 0 0 3px rgba(212, 168, 74, .28), 0 .16em 0 #5b3a12, 0 0 22px rgba(244, 114, 182, .28), 0 12px 20px rgba(0, 0, 0, .5);
}
.skin-sakura .slot {
  position: relative; color: #fff4ec;
  text-shadow: 0 0 .06em #fff, 0 .05em 0 #7a2a52, 0 0 .5em rgba(244, 114, 182, .75);
}
.skin-sakura .slot.spinning { opacity: .85; color: #f9c7dd; animation: sakura-swirl .26s var(--ease-in-out) infinite alternate; }
@keyframes sakura-swirl { from { transform: translateY(-.07em) rotate(-7deg) scaleX(.9); filter: blur(.9px); } to { transform: translateY(.07em) rotate(7deg) scaleX(1.06); filter: blur(.2px); } }
/* La lame : le chiffre arrive par le haut, tranché net ; un trait blanc le traverse en diagonale. */
.skin-sakura .slot.revealed { animation: sakura-cut .46s var(--ease-out) backwards; }
@keyframes sakura-cut {
  0% { transform: translate(.1em, -.14em) rotate(9deg); filter: brightness(2.6) blur(1px); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  38% { transform: translate(0, .02em) rotate(-1.5deg); filter: brightness(1.7); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { transform: none; filter: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.skin-sakura .slot.revealed::after {
  content: ''; position: absolute; left: -22%; right: -22%; top: 50%; height: .05em; margin-top: -.025em; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 30%, #ffd9ea 70%, transparent); transform: rotate(-24deg) scaleX(0); opacity: 0;
  animation: sakura-slash .42s var(--ease-out) backwards;
}
@keyframes sakura-slash { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 45% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1.15); opacity: 0; } }
.side-sakura { --side-border: #d4a84a; --side-glow: 0 0 18px rgba(244, 114, 182, .3); --side-ink: #ffd9ea; --side-ink-glow: 0 0 8px rgba(244, 114, 182, .7);
  --side-bg: radial-gradient(circle at 86% 16%, rgba(255, 246, 229, .5) 0 1.1rem, rgba(255, 246, 229, .1) 1.15rem 1.7rem, transparent 2.6rem), radial-gradient(ellipse 4px 2.5px at 22% 30%, rgba(249, 168, 212, .55), transparent 70%), radial-gradient(ellipse 3px 2px at 64% 72%, rgba(249, 168, 212, .45), transparent 70%), radial-gradient(ellipse 4px 2.5px at 44% 88%, rgba(253, 224, 235, .4), transparent 70%), linear-gradient(165deg, rgba(60, 22, 52, .5), rgba(14, 8, 18, .55));
  --deco-a: '🌸'; --deco-b: '🌸'; }
.side-sakura::before { animation: sakura-fall 4.2s ease-in-out infinite; }
.side-sakura::after { font-size: .8rem; animation: sakura-fall 5.4s 1.1s ease-in-out infinite; }
@keyframes sakura-fall { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(.35rem, .3rem) rotate(40deg); } }

/* ================================================================== ⚡ Storm — verre d'orage, plasma blanc-bleu */
.num-card.skin-storm {
  background:
    radial-gradient(ellipse 60% 55% at 22% 8%, rgba(148, 163, 184, .34), transparent 70%),
    radial-gradient(ellipse 55% 50% at 74% 0%, rgba(100, 116, 139, .36), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 120%, rgba(56, 189, 248, .2), transparent 65%),
    linear-gradient(180deg, #17202f 0%, #0b1220 58%, #070b14 100%);
  border: 2px solid #7dd3fc; border-radius: .45rem; color: #f0fbff;
  box-shadow: 0 0 0 1px #0b1220, 0 0 0 3px rgba(125, 211, 252, .22), 0 .16em 0 #0f2a44, 0 0 24px rgba(56, 189, 248, .45), 0 12px 20px rgba(0, 0, 0, .5);
}
/* La pluie, en biais, derrière les chiffres. */
.num-card.skin-storm::before {
  content: ''; position: absolute; inset: -20% -10%; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(104deg, transparent 0 9px, rgba(186, 230, 253, .28) 9px 10px, transparent 10px 23px);
  animation: storm-rain .5s linear infinite;
}
@keyframes storm-rain { to { transform: translate(-8px, 32px); } }
.skin-storm .slot {
  position: relative; color: #f0fbff;
  text-shadow: 0 0 .05em #fff, 0 0 .22em #7dd3fc, 0 0 .6em rgba(56, 189, 248, .85), 0 .05em 0 #0c4a6e;
}
.skin-storm .slot.spinning { opacity: .9; color: #bae6fd; animation: storm-crackle .12s steps(2) infinite; }
@keyframes storm-crackle { 0% { transform: translate(-.04em, .03em) skewX(-6deg); filter: brightness(.75); } 50% { transform: translate(.04em, -.04em) skewX(7deg); filter: brightness(1.9); } 100% { transform: translate(-.02em, .02em); filter: brightness(1); } }
/* La foudre tombe : le chiffre arrive étiré depuis le haut, blanc, s'écrase à l'impact puis se pose. */
.skin-storm .slot.revealed { animation: storm-strike .44s var(--ease-out) backwards; }
@keyframes storm-strike {
  0% { transform: translateY(-.16em) scale(.55, 1.7); filter: brightness(5) saturate(0); }
  22% { transform: translateY(.03em) scale(1.22, .78); filter: brightness(3.2); }
  48% { transform: translateY(-.02em) scale(.96, 1.05); filter: brightness(1.7); }
  100% { transform: none; filter: none; }
}
.side-storm { --side-border: #7dd3fc; --side-glow: 0 0 18px rgba(56, 189, 248, .35); --side-ink: #e0f7ff; --side-ink-glow: 0 0 8px rgba(56, 189, 248, .8);
  --side-bg: repeating-linear-gradient(104deg, transparent 0 13px, rgba(186, 230, 253, .1) 13px 14px, transparent 14px 31px), radial-gradient(ellipse 70% 45% at 30% 0%, rgba(100, 116, 139, .4), transparent 70%), radial-gradient(ellipse 60% 40% at 78% 4%, rgba(71, 85, 105, .45), transparent 70%), linear-gradient(180deg, rgba(23, 32, 47, .6), rgba(7, 11, 20, .6));
  --deco-a: '⚡'; --deco-b: '🌩️'; }
.side-storm::before { animation: storm-flicker 3.1s steps(1) infinite; }
.side-storm::after { animation: storm-flicker 4.3s 1.2s steps(1) infinite; }
@keyframes storm-flicker { 0%, 100% { opacity: .35; } 6% { opacity: 1; } 9% { opacity: .3; } 12% { opacity: 1; } 20% { opacity: .35; } }

/* ================================================================== 🐉 Dragon — écailles d'obsidienne, or en fusion */
.num-card.skin-dragon {
  background:
    radial-gradient(circle at 50% 0, transparent .19em, rgba(255, 150, 60, .13) .2em .215em, rgba(0, 0, 0, .55) .22em .245em, transparent .255em) 0 0 / .5em .3em,
    radial-gradient(circle at 50% 0, transparent .19em, rgba(255, 150, 60, .13) .2em .215em, rgba(0, 0, 0, .55) .22em .245em, transparent .255em) .25em .15em / .5em .3em,
    radial-gradient(ellipse 90% 80% at 50% 125%, rgba(251, 146, 60, .55), rgba(180, 30, 14, .25) 45%, transparent 72%),
    linear-gradient(180deg, #2a0d0b 0%, #1a0706 55%, #0d0403 100%);
  border: 2px solid #d99a2b; border-radius: .4rem; color: #ffd76a;
  box-shadow: 0 0 0 1px #1a0706, 0 0 0 3px #7a4a10, 0 0 0 4px rgba(253, 224, 130, .35), 0 .18em 0 #4a2a06, 0 0 26px rgba(234, 88, 12, .5), 0 12px 20px rgba(0, 0, 0, .55);
}
.skin-dragon .slot {
  position: relative;
  background: linear-gradient(180deg, #fff8c9 0%, #ffd76a 30%, #f59e0b 62%, #c2410c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .06em; margin: 0 -.06em;
  filter: drop-shadow(0 .045em 0 #5c1a05) drop-shadow(0 .08em 0 #2a0d03) drop-shadow(0 0 .28em rgba(251, 146, 60, .75));
}
.skin-dragon .slot.ghost { opacity: .34; }
.skin-dragon .slot.spinning { opacity: .9; animation: dragon-smoulder .2s var(--ease-in-out) infinite alternate; }
@keyframes dragon-smoulder {
  from { transform: translateY(.05em) scale(.94); filter: drop-shadow(0 .045em 0 #5c1a05) drop-shadow(0 0 .2em rgba(220, 38, 38, .8)) brightness(.7) saturate(1.4); }
  to { transform: translateY(-.05em) scale(1.04); filter: drop-shadow(0 .045em 0 #5c1a05) drop-shadow(0 0 .5em rgba(253, 186, 116, .95)) brightness(1.35); }
}
/* Forgé au feu : le chiffre sort blanc de chaleur, reçoit le coup, refroidit vers l'or. */
.skin-dragon .slot.revealed { animation: dragon-forge .5s var(--ease-out) backwards; }
@keyframes dragon-forge {
  0% { transform: scale(1.32) translateY(-.06em); filter: brightness(3.6) saturate(.2) drop-shadow(0 0 .6em #fff3c4); }
  30% { transform: scale(.9, .84) translateY(.05em); filter: brightness(2.2) saturate(1.5) drop-shadow(0 0 .5em #fb923c); }
  58% { transform: scale(1.05, 1.03); filter: brightness(1.45) drop-shadow(0 .045em 0 #5c1a05) drop-shadow(0 0 .4em rgba(251, 146, 60, .9)); }
  100% { transform: none; }
}
.side-dragon { --side-border: #d99a2b; --side-glow: 0 0 20px rgba(234, 88, 12, .4); --side-ink: #ffd76a; --side-ink-glow: 0 0 8px rgba(234, 88, 12, .85);
  --side-bg: radial-gradient(circle at 50% 0, transparent 9px, rgba(0, 0, 0, .28) 9.5px 11px, transparent 11.5px) 0 0 / 24px 14px, radial-gradient(circle at 50% 0, transparent 9px, rgba(0, 0, 0, .28) 9.5px 11px, transparent 11.5px) 12px 7px / 24px 14px, radial-gradient(ellipse 90% 60% at 50% 118%, rgba(251, 146, 60, .4), rgba(180, 30, 14, .18) 50%, transparent 75%), linear-gradient(180deg, rgba(42, 13, 11, .65), rgba(13, 4, 3, .65));
  --deco-a: '🐉'; --deco-b: '🔥'; }
.side-dragon::before { font-size: 1.15rem; animation: dragon-breathe 3.6s ease-in-out infinite; }
.side-dragon::after { transform-origin: 50% 100%; animation: flame-dance .5s ease-in-out infinite alternate; }
@keyframes dragon-breathe { 0%, 100% { transform: translateX(0) scale(1); } 50% { transform: translateX(.25rem) scale(1.12); } }

/* ================================================================== 🕳️ Singularity — verre noir, lumière courbée */
.num-card.skin-blackhole {
  background:
    radial-gradient(ellipse 76% 260% at 50% 50%, transparent 57.5%, rgba(255, 250, 235, 1) 60.5%, rgba(255, 237, 213, 1) 62%, rgba(251, 146, 60, .95) 65.5%, rgba(194, 65, 12, .45) 71%, transparent 80%),
    radial-gradient(ellipse 60% 200% at 50% 50%, #000 66%, transparent 80%),
    radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 88% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 84%, #bfdbfe, transparent), radial-gradient(1px 1px at 70% 14%, #fde68a, transparent),
    #020203;
  border: 2px solid transparent; border-radius: .6rem; color: #fff;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
  /* horizon plus marqué (idée d'ichi, 2026-11-01) : l'anneau intérieur plus large et plus blanc, le liseré plus épais */
  box-shadow: 0 0 0 2px #fdba74, 0 0 0 4px rgba(251, 146, 60, .4), 0 0 30px rgba(251, 146, 60, .62), 0 0 64px rgba(124, 58, 237, .28), 0 12px 22px rgba(0, 0, 0, .7);
}
.skin-blackhole .slot {
  position: relative; color: #fff;
  text-shadow: -.035em 0 0 rgba(96, 165, 250, .95), .035em 0 0 rgba(251, 146, 60, .95), 0 0 .4em rgba(255, 237, 213, .8);
}
/* En orbite : les chiffres s'étirent et s'écrasent, la frange bleue et orange s'écarte. */
.skin-blackhole .slot.spinning { opacity: .9; animation: bh-stretch .22s var(--ease-in-out) infinite alternate; }
@keyframes bh-stretch {
  from { transform: scale(.66, 1.42) skewX(-10deg); filter: blur(.7px); text-shadow: -.09em 0 0 rgba(96, 165, 250, .9), .09em 0 0 rgba(251, 146, 60, .9); }
  to { transform: scale(1.18, .8) skewX(8deg); filter: blur(.1px); text-shadow: -.03em 0 0 rgba(96, 165, 250, .9), .03em 0 0 rgba(251, 146, 60, .9); }
}
/* Il tombe dans l'horizon : un fil de lumière qui se ramasse d'un coup, puis l'anneau part de lui. */
.skin-blackhole .slot.revealed { animation: bh-fall .5s var(--ease-snap) backwards; }
@keyframes bh-fall {
  0% { transform: scale(.14, 2.3); filter: blur(1.6px) brightness(3); }
  34% { transform: scale(1.16, .86); filter: blur(0) brightness(2.2); }
  62% { transform: scale(.97, 1.03); filter: brightness(1.4); }
  100% { transform: none; filter: none; }
}
.skin-blackhole .slot.revealed::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; pointer-events: none;
  border: .03em solid #ffedd5; box-shadow: 0 0 .2em #fb923c; transform: scale(.1); opacity: 0;
  animation: bh-ring .5s var(--ease-out) backwards;
}
@keyframes bh-ring { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.side-blackhole { --side-border: #fdba74; --side-glow: 0 0 22px rgba(251, 146, 60, .35), 0 0 44px rgba(124, 58, 237, .2); --side-ink: #ffedd5; --side-ink-glow: 0 0 8px rgba(251, 146, 60, .85);
  --side-bg: radial-gradient(1px 1px at 14% 24%, #fff, transparent), radial-gradient(1px 1px at 82% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 78%, #bfdbfe, transparent), radial-gradient(1px 1px at 68% 86%, #fde68a, transparent), radial-gradient(1px 1px at 52% 10%, #fff, transparent), radial-gradient(ellipse 75% 26% at 50% 54%, transparent 70%, rgba(251, 146, 60, .32) 78%, transparent 92%), linear-gradient(180deg, rgba(4, 3, 8, .8), rgba(2, 2, 3, .8));
  --deco-a: '✦'; --deco-b: '🪐'; }
.side-blackhole::before { animation: gold-sparkle 1.9s ease-in-out infinite; }
.side-blackhole::after { animation: bh-orbit 6s linear infinite; }
@keyframes bh-orbit { from { transform: rotate(0) translateX(.3rem) rotate(0); } to { transform: rotate(360deg) translateX(.3rem) rotate(-360deg); } }

/* ================================================================== ⚖️ Divine Judgment (idée de Gray alt, 2026-10-25)
   Un tribunal céleste : nuit violette, gloire dorée qui rayonne d'en haut, deux colonnes de marbre sur les bords.
   Pendant le tirage, chaque chiffre est pesé (il oscille comme un plateau de balance) ; au verdict, un pilier de lumière
   descend sur lui, il est happé vers le haut, puis frappé en place comme un coup de maillet. */
.num-card.skin-divine {
  background:
    linear-gradient(90deg, #fff7e0 0, #e8dcc0 1.2%, #fffaf0 2.4%, #d9c9a3 3.6%, #f5ead2 4.8%, rgba(184, 134, 11, .9) 5.4%, transparent 5.6% 94.4%, rgba(184, 134, 11, .9) 94.6%, #f5ead2 95.2%, #d9c9a3 96.4%, #fffaf0 97.6%, #e8dcc0 98.8%, #fff7e0 100%),
    radial-gradient(ellipse 55% 110% at 50% -25%, rgba(255, 236, 170, .6), rgba(250, 204, 21, .18) 45%, transparent 70%),
    repeating-conic-gradient(from -2deg at 50% -35%, rgba(253, 224, 71, .13) 0 3deg, transparent 3deg 8deg),
    linear-gradient(180deg, #2b1d4d, #150e2c 65%, #0c0819);
  border: 2px solid #f5d27a; border-radius: .6rem; color: #fffdf2;
  box-shadow: inset 0 0 0 2px rgba(20, 12, 40, .9), inset 0 0 0 3px rgba(245, 210, 122, .55), 0 0 22px rgba(250, 204, 21, .45), 0 0 54px rgba(255, 244, 214, .2), 0 12px 22px rgba(0, 0, 0, .6);
}
.skin-divine .slot {
  position: relative; z-index: 0; color: #fffdf2;
  text-shadow: 0 .045em 0 #a16207, 0 0 .06em #fff, 0 0 .22em rgba(253, 224, 71, .75), 0 0 .6em rgba(250, 204, 21, .3);
}
.skin-divine .slot.ghost { text-shadow: none; color: #e9d8a6; }
/* Pesé : le chiffre monte et descend comme un plateau, la lumière vacille. */
.skin-divine .slot.spinning { opacity: .9; animation: dj-weigh .2s var(--ease-in-out) infinite alternate; }
@keyframes dj-weigh {
  from { transform: translateY(-.1em) rotate(-7deg); filter: brightness(.8); }
  to { transform: translateY(.1em) rotate(7deg); filter: brightness(1.35); }
}
/* Le verdict : happé vers le haut dans la lumière (anticipation), frappé en place (impact), petit rebond rigide. */
.skin-divine .slot.revealed { animation: dj-verdict .62s linear backwards; }
@keyframes dj-verdict {
  0% { transform: translateY(-.08em) scale(.92); filter: brightness(.7); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  24% { transform: translateY(-.3em) scale(.88, 1.06); filter: brightness(1.6); animation-timing-function: cubic-bezier(.7, 0, 1, .6); }
  36% { transform: translateY(.05em) scale(1.16); filter: brightness(1.9) drop-shadow(0 0 .12em #fde047); animation-timing-function: ease-out; }
  52% { transform: translateY(-.04em) scale(.97); filter: brightness(1.4); }
  70% { transform: translateY(0) scale(1.02); filter: brightness(1.2); }
  100% { transform: none; filter: none; }
}
/* Le pilier de lumière qui descend sur le chiffre (derrière lui), puis l'onde du maillet à ses pieds. */
.skin-divine .slot.revealed::before, .skin-divine .slot.revealed::after { content: ''; position: absolute; pointer-events: none; z-index: -1; opacity: 0; }
.skin-divine .slot.revealed::before {
  left: 50%; width: .9em; margin-left: -.45em; top: -3em; bottom: .05em;
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, .3) 30%, rgba(254, 240, 138, .6) 50%, rgba(250, 204, 21, .3) 70%, transparent);
  transform-origin: 50% 0; animation: dj-pillar .62s linear backwards;
}
@keyframes dj-pillar {
  0% { opacity: .2; transform: scaleX(.12) scaleY(.2); }
  24% { opacity: .85; transform: scaleX(.25) scaleY(1); }
  36% { opacity: .75; transform: scaleX(1) scaleY(1); }
  100% { opacity: 0; transform: scaleX(.05) scaleY(1); }
}
.skin-divine .slot.revealed::after {
  left: 50%; bottom: .02em; width: 1.2em; height: .3em; margin-left: -.6em; border-radius: 50%;
  border: .04em solid #fde68a; box-shadow: 0 0 .2em #facc15; animation: dj-ring .62s ease-out backwards;
}
@keyframes dj-ring { 0%, 34% { opacity: 0; transform: scale(.2); } 38% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }
.side-divine { --side-border: #f5d27a; --side-glow: 0 0 22px rgba(250, 204, 21, .38), 0 0 44px rgba(255, 244, 214, .15); --side-ink: #fff7d6; --side-ink-glow: 0 0 8px rgba(250, 204, 21, .9);
  --side-bg: radial-gradient(ellipse 60% 70% at 50% -10%, rgba(255, 236, 170, .38), transparent 70%), repeating-conic-gradient(from -2deg at 50% -20%, rgba(253, 224, 71, .1) 0 3deg, transparent 3deg 9deg), linear-gradient(90deg, rgba(245, 234, 210, .35) 0 3%, transparent 3% 97%, rgba(245, 234, 210, .35) 97%), linear-gradient(180deg, rgba(43, 29, 77, .85), rgba(12, 8, 25, .85));
  --deco-a: '⚖️'; --deco-b: '✦'; }
.side-divine::before { transform-origin: 50% 10%; animation: dj-balance 3.2s ease-in-out infinite; }
.side-divine::after { animation: gold-sparkle 1.9s ease-in-out infinite; }
@keyframes dj-balance { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* ================================================================== 💥 Comic Book (idée de JBearr12, 2026-10-26)
   Une case de bande dessinée : papier crème imprimé en trame (points magenta et cyan), un soleil de rayons jaunes
   derrière les chiffres, un gros trait d'encre noire et une ombre portée franche. Les chiffres : du lettrage de titre,
   jaune, cerné de noir, ombre rouge décalée. Pendant le tirage ils tremblent et penchent comme dessinés en mouvement
   (lignes de vitesse) ; un chiffre qui se pose : il recule (élan), frappe en grossissant d'un coup (éclair blanc) puis
   rebondit en place. Les bulles POW!/BAM! et le grand KA-BOOM! : js/skinfx.js (SCENES.comicbook). */
.num-card.skin-comicbook {
  background:
    /* le soleil de rayons, derrière les chiffres */
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(250, 204, 21, .55) 0 9deg, transparent 9deg 18deg),
    /* la trame : points magenta, puis cyan décalés */
    radial-gradient(circle, rgba(236, 72, 153, .28) 0 .05em, transparent .06em) 0 0 / .2em .2em,
    radial-gradient(circle, rgba(6, 182, 212, .22) 0 .04em, transparent .05em) .1em .1em / .2em .2em,
    radial-gradient(ellipse 60% 70% at 50% 50%, #fff7d6, #fde68a 70%, #fbbf24);
  border: 3px solid #0a0a0a; border-radius: .25rem; color: #facc15;
  box-shadow: inset 0 0 0 2px #fffbeb, inset 0 0 0 4px #0a0a0a, 6px 6px 0 #0a0a0a, 0 0 22px rgba(236, 72, 153, .35), 0 12px 22px rgba(0, 0, 0, .5);
  transform: rotate(-.6deg);
}
.skin-comicbook .slot {
  position: relative; z-index: 1; font-family: Impact, 'Arial Black', 'Helvetica Neue', sans-serif; font-weight: 900;
  color: #facc15; -webkit-text-stroke: .045em #0a0a0a; paint-order: stroke fill;
  text-shadow: .06em .07em 0 #dc2626, .1em .11em 0 #0a0a0a;
}
.skin-comicbook .slot:nth-of-type(2n) { color: #fffbeb; }
.skin-comicbook .slot.ghost { text-shadow: none; -webkit-text-stroke: .03em #0a0a0a; }
/* Pendant le tirage : le chiffre tremble et penche d'une case à l'autre, une traînée de couleur derrière lui. */
.skin-comicbook .slot.spinning { opacity: 1; color: #fde68a; animation: cmx-shake .16s steps(2, jump-none) infinite; }
.skin-comicbook .slot.spinning:nth-of-type(2n) { animation-delay: -.08s; }
@keyframes cmx-shake {
  from { transform: translate(-.04em, .02em) skewX(-12deg) rotate(-4deg); text-shadow: -.12em 0 0 rgba(6, 182, 212, .7), -.24em 0 0 rgba(6, 182, 212, .35); }
  to { transform: translate(.04em, -.03em) skewX(10deg) rotate(4deg); text-shadow: .12em 0 0 rgba(236, 72, 153, .7), .24em 0 0 rgba(236, 72, 153, .35); }
}
/* L'impact : il recule et rapetisse (élan), POW — il grossit d'un coup, blanc d'éclair, penché — puis rebondit en place. */
.skin-comicbook .slot.revealed { animation: cmx-pow .6s backwards; }
@keyframes cmx-pow {
  0% { transform: scale(.7) rotate(-14deg); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  18% { transform: scale(.55) rotate(-18deg) translateY(.06em); animation-timing-function: cubic-bezier(.2, 1.4, .4, 1); }
  34% { transform: scale(1.32) rotate(9deg); color: #ffffff; text-shadow: .1em .12em 0 #dc2626, .16em .18em 0 #0a0a0a; animation-timing-function: ease-out; }
  52% { transform: scale(.9) rotate(-4deg); }
  70% { transform: scale(1.06) rotate(2deg); }
  86% { transform: scale(.98) rotate(-.5deg); }
  100% { transform: none; }
}
/* L'éclat dessiné derrière le chiffre au moment du coup : une étoile à pointes jaune et rouge, cernée de noir. */
.skin-comicbook .slot.revealed::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><polygon points='0,-48 10,-22 34,-36 24,-10 48,-4 26,8 40,32 12,22 4,48 -8,24 -32,40 -24,12 -48,4 -24,-8 -38,-32 -12,-22' fill='%23fde047' stroke='%230a0a0a' stroke-width='4' stroke-linejoin='round'/><polygon points='0,-26 6,-12 20,-18 13,-4 26,0 13,6 20,18 6,12 0,26 -6,12 -20,18 -13,6 -26,0 -13,-4 -20,-18 -6,-12' fill='%23ef4444'/></svg>") 50% 50% / contain no-repeat;
  transform: scale(0); animation: cmx-burst .6s ease-out backwards;
}
@keyframes cmx-burst { 0%, 22% { transform: scale(0) rotate(0); opacity: 1; } 36% { transform: scale(1.2) rotate(12deg); opacity: 1; } 60% { transform: scale(1) rotate(18deg); opacity: .7; } 100% { transform: scale(.5) rotate(24deg); opacity: 0; } }
.skin-comicbook .slot.ghost.revealed::before { display: none; }
@media (prefers-reduced-motion: reduce) { .skin-comicbook .slot, .skin-comicbook .slot::before { animation: none; } .skin-comicbook .slot.revealed::before { display: none; } }
/* Cadre de duel : une planche de BD, trame et rayons ; 💥 explose en rythme, ✦ scintille. */
.side-comicbook { --side-border: #0a0a0a; --side-glow: 4px 4px 0 #0a0a0a, 0 0 18px rgba(236, 72, 153, .35); --side-ink: #db2777; --side-ink-glow: 0 0 6px rgba(250, 204, 21, .8);
  --side-bg: repeating-conic-gradient(from 0deg at 50% 45%, rgba(250, 204, 21, .16) 0 8deg, transparent 8deg 16deg), radial-gradient(circle, rgba(236, 72, 153, .18) 0 1.2px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, rgba(254, 243, 199, .2), rgba(251, 191, 36, .12));
  --deco-a: '💥'; --deco-b: '✦'; }
.side-comicbook::before { animation: cmx-throb 1.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.side-comicbook::after { animation: gold-sparkle 1.9s ease-in-out infinite; }
@keyframes cmx-throb { 0%, 55%, 100% { transform: scale(1) rotate(0); } 65% { transform: scale(1.3) rotate(-10deg); } 80% { transform: scale(.95) rotate(4deg); } }
.room-stage.many .side-comicbook::before, .room-stage.many .side-comicbook::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-comicbook::before, .side-comicbook::after { animation: none; } }

/* ================================================================== 🌌 Milky Way (idée de shadow2 Jr, 2026-10-26)
   Du verre d'espace profond traversé par la bande laiteuse de la Voie lactée (poussière dorée, nuages bleus et violets,
   une ligne de poussière sombre) ; les chiffres sont de la lumière d'étoile : cœur blanc, halo bleu-violet. Pendant le
   tirage, ils tournent en petites orbites, emportés par les bras ; il se pose : l'étoile se contracte en un point
   (élan), s'allume (éclat en croix), puis se pose. Matière dure et lumineuse : pas d'écrasement, des éclats.
   La galaxie spirale qui tourne autour du nombre et le cœur qui s'embrase dès Mythic : js/skinfx.js (SCENES.milkyway). */
.num-card.skin-milkyway {
  background:
    radial-gradient(1px 1px at 12% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 27% 78%, #dbeafe 99%, transparent),
    radial-gradient(1.5px 1.5px at 44% 16%, #fff 99%, transparent), radial-gradient(1px 1px at 63% 84%, #e9d5ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 81% 26%, #fff 99%, transparent), radial-gradient(1px 1px at 92% 70%, #dbeafe 99%, transparent),
    radial-gradient(1px 1px at 6% 60%, #fff 99%, transparent), radial-gradient(1px 1px at 54% 50%, #fff7d6 99%, transparent),
    /* la ligne de poussière sombre au milieu de la bande */
    linear-gradient(-14deg, transparent 47%, rgba(10, 6, 24, .55) 50%, transparent 54%),
    /* la bande laiteuse en biais : cœur doré, bords bleus et violets */
    linear-gradient(-14deg, transparent 22%, rgba(129, 140, 248, .22) 34%, rgba(253, 230, 190, .32) 46%, rgba(255, 244, 222, .38) 50%, rgba(253, 230, 190, .3) 55%, rgba(192, 132, 252, .22) 66%, transparent 78%),
    radial-gradient(ellipse 30% 60% at 50% 50%, rgba(255, 236, 200, .22), transparent 70%),
    linear-gradient(180deg, #0b0a24, #070615 60%, #04030d);
  border: 2px solid #a5b4fc; border-radius: .8rem; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 0 1.4em rgba(99, 102, 241, .35), 0 0 22px rgba(129, 140, 248, .45), 0 0 54px rgba(192, 132, 252, .2), 0 12px 22px rgba(0, 0, 0, .6);
}
.skin-milkyway .slot { position: relative; z-index: 1; font-weight: 800; color: #fff;
  text-shadow: 0 .04em 0 #312e81, 0 0 .12em rgba(191, 219, 254, .8), 0 0 .4em rgba(129, 140, 248, .55), 0 0 .8em rgba(192, 132, 252, .25); }
.skin-milkyway .slot.ghost { opacity: .18; text-shadow: none; color: #c7d2fe; }
/* Pendant le tirage : chaque chiffre décrit une petite orbite, un peu flou, plus ou moins vite selon sa place. */
.skin-milkyway .slot.spinning { opacity: .92; animation: mw-orbit .28s linear infinite; }
.skin-milkyway .slot.spinning:nth-of-type(2n) { animation-duration: .22s; animation-direction: reverse; }
.skin-milkyway .slot.spinning:nth-of-type(3n) { animation-delay: -.1s; }
@keyframes mw-orbit {
  0% { transform: translate(.07em, 0); filter: blur(.5px) brightness(1.2); }
  25% { transform: translate(0, .06em); filter: blur(.9px) brightness(.85); }
  50% { transform: translate(-.07em, 0); filter: blur(.5px) brightness(1.2); }
  75% { transform: translate(0, -.06em); filter: blur(.9px) brightness(1.5); }
  100% { transform: translate(.07em, 0); filter: blur(.5px) brightness(1.2); }
}
/* Il se pose : l'étoile se contracte en un point brûlant, s'allume, retombe en place. */
.skin-milkyway .slot.revealed { animation: mw-ignite .6s backwards; }
@keyframes mw-ignite {
  0% { transform: scale(.35); filter: brightness(2.4) blur(1px); animation-timing-function: cubic-bezier(.2, 0, .4, 1); }
  14% { transform: scale(.28); filter: brightness(3.5) blur(2px); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
  34% { transform: scale(1.14); filter: brightness(1.45) drop-shadow(0 0 .12em #c7d2fe); }
  56% { transform: scale(.97); filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}
/* l'éclat en croix de l'allumage, derrière le chiffre */
.skin-milkyway .slot.revealed::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1.8em; height: 1.8em; margin: -.9em 0 0 -.9em; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), transparent 18%), linear-gradient(90deg, transparent 0 46%, rgba(224, 231, 255, .8) 50%, transparent 54%) center / 100% 8% no-repeat, linear-gradient(0deg, transparent 0 46%, rgba(224, 231, 255, .8) 50%, transparent 54%) center / 8% 100% no-repeat;
  animation: mw-glint .6s ease-out backwards; }
@keyframes mw-glint { 0%, 12% { opacity: 0; transform: scale(.3) rotate(0); } 30% { opacity: 1; transform: scale(1) rotate(20deg); } 100% { opacity: 0; transform: scale(.6) rotate(45deg); } }
.skin-milkyway .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
@media (prefers-reduced-motion: reduce) { .skin-milkyway .slot, .skin-milkyway .slot::before { animation: none; } }
/* Cadre de duel : un ciel de nuit d'été avec la bande de la Voie lactée en biais ; 🌌 respire, une étoile filante passe. */
.side-milkyway { --side-border: #a5b4fc; --side-glow: 0 0 22px rgba(129, 140, 248, .4), 0 0 44px rgba(192, 132, 252, .15); --side-ink: #e0e7ff; --side-ink-glow: 0 0 8px rgba(129, 140, 248, .9);
  --side-bg: linear-gradient(-20deg, transparent 25%, rgba(129, 140, 248, .18) 38%, rgba(255, 240, 210, .22) 50%, rgba(192, 132, 252, .16) 62%, transparent 75%), radial-gradient(1px 1px at 20% 30%, #fff 99%, transparent), radial-gradient(1px 1px at 70% 20%, #fff 99%, transparent), radial-gradient(1px 1px at 85% 65%, #fff 99%, transparent), radial-gradient(1px 1px at 35% 80%, #fff 99%, transparent), linear-gradient(180deg, rgba(11, 10, 36, .9), rgba(4, 3, 13, .9));
  --deco-a: '🌌'; --deco-b: '✨ 💫'; }
.side-milkyway::before { animation: mw-breathe 3.4s ease-in-out infinite; }
.side-milkyway::after { animation: mw-shoot 2.8s ease-in infinite; }
@keyframes mw-breathe { 0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 2px #a5b4fc); } 50% { transform: scale(1.1) rotate(12deg); filter: drop-shadow(0 0 7px #c4b5fd); } }
@keyframes mw-shoot { 0%, 70% { transform: none; opacity: 1; } 85% { transform: translate(-6px, 4px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.room-stage.many .side-milkyway::before, .room-stage.many .side-milkyway::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-milkyway::before, .side-milkyway::after { animation: none; } }

/* ================================================================== ♾️ Infinity — une boucle de lumière dans du verre
   Seulement dans la caisse Premium (0,5 %). Refait le 2026-10-24 pour être au niveau de Singularity (idée de kaz) :
   du verre spatial presque noir (le contraste d'abord), un ∞ de lumière irisé dans la carte, parcouru sans fin par une
   impulsion blanche (SVG animé), un liseré irisé qui tourne autour ; les chiffres en lumière blanche, frange rose et
   cyan. Le grand ∞ qui l'entoure pendant le tirage et à la révélation est dans js/skinfx.js (SCENES.infinity). */
@property --inf-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.num-card.skin-infinity {
  border: 2px solid transparent; border-radius: .7rem; color: #fff;
  background:
    radial-gradient(1px 1px at 7% 24%, #fff, transparent), radial-gradient(1px 1px at 93% 72%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 86%, #a5f3fc, transparent),
    radial-gradient(1px 1px at 78% 12%, #fde68a, transparent), radial-gradient(1.2px 1.2px at 58% 92%, #f5d0fe, transparent), radial-gradient(1px 1px at 40% 8%, #fff, transparent),
    /* le ∞ de lumière : un tracé irisé, et une impulsion blanche qui en fait le tour en 3,2 s */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%2322d3ee'/><stop offset='.35' stop-color='%23a855f7'/><stop offset='.65' stop-color='%23ec4899'/><stop offset='1' stop-color='%2322d3ee'/></linearGradient></defs><path d='M100 40C130 4 192 4 192 40S130 76 100 40 8 4 8 40 70 76 100 40Z' fill='none' stroke='url(%23g)' stroke-width='7' stroke-opacity='.22'/><path d='M100 40C130 4 192 4 192 40S130 76 100 40 8 4 8 40 70 76 100 40Z' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-opacity='.95'/><path d='M100 40C130 4 192 4 192 40S130 76 100 40 8 4 8 40 70 76 100 40Z' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' pathLength='100' stroke-dasharray='7 93'><animate attributeName='stroke-dashoffset' from='0' to='-100' dur='3.2s' repeatCount='indefinite'/></path></svg>") 50% 50% / 94% 86% no-repeat padding-box,
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(91, 33, 182, .32), transparent 75%) padding-box,
    linear-gradient(135deg, #05020f 0%, #0a0420 50%, #02010a 100%) padding-box,
    conic-gradient(from var(--inf-a), #22d3ee, #a855f7, #ec4899, #fbbf24, #a855f7, #22d3ee) border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 22px rgba(168, 85, 247, .55), 0 0 56px rgba(34, 211, 238, .22), 0 12px 22px rgba(0, 0, 0, .7);
  animation: inf-turn 7s linear infinite;
}
@keyframes inf-turn { to { --inf-a: 360deg; } }
/* La nébuleuse : un voile discret qui dérive et change de teinte derrière les chiffres (plus un fond pastel). */
.num-card.skin-infinity::before {
  content: ''; position: absolute; inset: -40% -20%; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .45;
  background:
    radial-gradient(ellipse 30% 44% at 28% 42%, rgba(236, 72, 153, .5), transparent 70%),
    radial-gradient(ellipse 30% 44% at 72% 58%, rgba(34, 211, 238, .45), transparent 70%);
  animation: inf-nebula 16s ease-in-out infinite alternate;
}
@keyframes inf-nebula {
  0% { transform: translate(-6%, 2%) rotate(-6deg) scale(1); filter: hue-rotate(0deg); }
  50% { transform: translate(4%, -3%) rotate(4deg) scale(1.08); filter: hue-rotate(-40deg); }
  100% { transform: translate(7%, 3%) rotate(10deg) scale(.96); filter: hue-rotate(35deg); }
}
/* Les chiffres : de la lumière blanche, une frange rose à gauche et cyan à droite, un halo violet. */
.skin-infinity .slot {
  position: relative; z-index: 1; color: #fff; font-weight: 900;
  text-shadow: -.035em 0 0 rgba(236, 72, 153, .95), .035em 0 0 rgba(34, 211, 238, .95), 0 0 .35em rgba(196, 181, 253, .85), 0 .04em .02em rgba(5, 2, 15, .9);
}
/* Pendant le tirage : le chiffre est entraîné le long de la boucle, en huit, étiré, et sa frange s'écarte. */
.skin-infinity .slot.spinning { opacity: .92; animation: inf-loop .36s linear infinite; }
@keyframes inf-loop {
  0% { transform: translate(0, 0) scaleX(1.12); text-shadow: -.1em 0 0 rgba(236, 72, 153, .9), .1em 0 0 rgba(34, 211, 238, .9), 0 0 .3em rgba(196, 181, 253, .7); }
  25% { transform: translate(.07em, -.05em) scaleX(.9) skewX(-8deg); }
  50% { transform: translate(0, 0) scaleX(1.12); text-shadow: -.06em 0 0 rgba(236, 72, 153, .9), .06em 0 0 rgba(34, 211, 238, .9), 0 0 .3em rgba(196, 181, 253, .7); }
  75% { transform: translate(-.07em, .05em) scaleX(.9) skewX(8deg); }
  100% { transform: translate(0, 0) scaleX(1.12); text-shadow: -.1em 0 0 rgba(236, 72, 153, .9), .1em 0 0 rgba(34, 211, 238, .9), 0 0 .3em rgba(196, 181, 253, .7); }
}
/* Il se pose : un point de lumière qui se déplie (élan), dépasse (impact), revient (repos) ; un petit ∞ s'en échappe. */
.skin-infinity .slot.revealed { animation: inf-form .56s var(--ease-snap) backwards; }
@keyframes inf-form {
  0% { transform: scale(.12); filter: blur(1.4px) brightness(3); }
  38% { transform: scale(1.1); filter: blur(0) brightness(1.6); }
  64% { transform: scale(.96); filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}
.skin-infinity .slot.revealed::after {
  content: '∞'; position: absolute; left: 50%; top: 50%; width: 1em; margin: -.5em 0 0 -.5em; text-align: center; font-size: .8em; line-height: 1; color: #fff; pointer-events: none;
  text-shadow: 0 0 .2em #fff, 0 0 .5em #a855f7, -.04em 0 0 #ec4899, .04em 0 0 #22d3ee; opacity: 0;
  animation: inf-glint .7s .08s var(--ease-out) backwards;
}
@keyframes inf-glint { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.skin-infinity .slot.ghost { opacity: .18; }
.side-infinity { --side-border: #a78bfa; --side-glow: 0 0 20px rgba(168, 85, 247, .38), 0 0 40px rgba(34, 211, 238, .16); --side-ink: #e9d5ff; --side-ink-glow: 0 0 6px #fff, 0 0 14px #a855f7;
  --side-bg: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 80% 28%, #fff, transparent), radial-gradient(1.5px 1.5px at 28% 82%, #a5f3fc, transparent), radial-gradient(1px 1px at 90% 78%, #fde68a, transparent), radial-gradient(1px 1px at 56% 10%, #f5d0fe, transparent),
    radial-gradient(60% 50% at 22% 32%, rgba(236, 72, 153, .22), transparent), radial-gradient(60% 50% at 80% 76%, rgba(34, 211, 238, .2), transparent), radial-gradient(70% 60% at 50% 50%, rgba(124, 58, 237, .22), transparent), linear-gradient(rgba(18, 6, 58, .3), rgba(18, 6, 58, .3));
  --deco-a: '∞'; --deco-b: '✦ ✧'; }
.side-infinity::before { font-size: 1.5rem; letter-spacing: 0; animation: inf-deco 4s ease-in-out infinite; }
.side-infinity::after { animation: gold-sparkle 2s ease-in-out infinite; }
@keyframes inf-deco { 0%, 100% { opacity: .55; filter: hue-rotate(0deg); transform: scale(1); } 50% { opacity: 1; filter: hue-rotate(120deg); transform: scale(1.12); } }
/* Petites cartes (caisses) et duels à 3 joueurs et plus : la nébuleuse s'immobilise. */
.num-card.sm.skin-infinity::before, .room-stage.many .num-card.skin-infinity::before { animation: none; }
.room-stage.many .num-card.skin-infinity { animation: none; }
/* Le liseré qui tourne, sans tout repeindre (signalé par MAYO, 2026-10-28 : « le bouton infinity lag, mon jeu lag ») :
   animer --inf-a sur la carte recalculait le style de la carte et de ses chiffres et repeignait tout son fond (étoiles,
   ∞ en SVG, nébuleuse) à chaque image ; mesuré pendant et après un tirage, c'était l'essentiel du surcoût de ce skin.
   Le dégradé conique tournant passe sur ::after, réduit par un masque à l'anneau du bord : seul cet anneau est repeint
   (le conique du fond reste dessous, figé). overflow: clip + overflow-clip-margin laissent ce calque couvrir le bord ;
   Safari ne connaît pas encore overflow-clip-margin : il garde l'ancienne animation. Pas sur les cartes à rareté
   (data-tier : aperçu de la boutique, résultats de duel), dont ::after est le reflet de la rareté, ni sur les petites. */
@supports (overflow-clip-margin: 2px) {
  .num-card.skin-infinity:not([data-tier]):not(.sm) { overflow: clip; overflow-clip-margin: 2px; animation: none; }
  .num-card.skin-infinity:not([data-tier]):not(.sm)::after {
    inset: -2px; padding: 2px; border-radius: inherit; z-index: 2; opacity: 1; mix-blend-mode: normal; will-change: transform;
    background: conic-gradient(from var(--inf-a), #22d3ee, #a855f7, #ec4899, #fbbf24, #a855f7, #22d3ee);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: inf-turn 7s linear infinite;
  }
  .room-stage.many .num-card.skin-infinity:not([data-tier]):not(.sm)::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .num-card.skin-infinity, .num-card.skin-infinity::before, .num-card.skin-infinity:not([data-tier]):not(.sm)::after, .skin-infinity .slot, .skin-infinity .slot.revealed::after { animation: none; }
}

/* Duels à 3 joueurs et plus : la pluie d'orage s'arrête (décor permanent). */
.room-stage.many .num-card.skin-storm::before { animation: none; }

/* ================================================================== 🜁 Elemental (idée de kaz, 2026-10-25) — une
   dalle d'obsidienne au liseré d'or, quatre éléments dans les coins. Chaque chiffre est fait d'un élément, dans
   l'ordre roche → glace → feu → vent, et la carte prend la matière du dernier chiffre posé (le :has() repère la
   dernière case révélée). Pendant le tirage, les chiffres passent par les quatre éléments ; à la pose, la roche
   s'écrase, la glace cristallise, le feu s'embrase, le vent tourbillonne. Débris, éclats, braises et rafales : js/skinfx.js. */
.num-card.skin-elemental {
  background:
    radial-gradient(ellipse 38% 60% at 0% 0%, rgba(125, 211, 252, .2), transparent 70%),
    radial-gradient(ellipse 38% 60% at 100% 0%, rgba(153, 246, 228, .16), transparent 70%),
    radial-gradient(ellipse 38% 60% at 0% 100%, rgba(168, 162, 158, .22), transparent 70%),
    radial-gradient(ellipse 38% 60% at 100% 100%, rgba(249, 115, 22, .24), transparent 70%),
    linear-gradient(180deg, #1c1917, #0c0a09);
  border: 2px solid #d4a72c; border-radius: .5rem; color: #fafaf9;
  box-shadow: 0 0 0 1px #0c0a09, 0 0 0 3px rgba(212, 167, 44, .25), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 22px rgba(212, 167, 44, .3), 0 12px 20px rgba(0, 0, 0, .5);
}
/* La matière de l'élément en cours, derrière les chiffres. */
.num-card.skin-elemental::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .25s; }
.skin-elemental .slot { position: relative; z-index: 1; font-weight: 900; }
/* roche : granit gris-brun, des fissures */
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n+1):last-of-type)::before,
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n+1) + .slot:not(.revealed))::before { opacity: 1;
  background: linear-gradient(118deg, transparent 46%, rgba(0, 0, 0, .5) 47%, transparent 48.5%) 0 0 / 3.2em 100%, linear-gradient(64deg, transparent 52%, rgba(0, 0, 0, .4) 53%, transparent 54.5%) 1.1em 0 / 2.6em 100%,
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .08) 1px, transparent 2px) 0 0 / .5em .5em, linear-gradient(180deg, #57534e, #292524); }
/* glace : bleu givré, des facettes */
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n+2):last-of-type)::before,
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n+2) + .slot:not(.revealed))::before { opacity: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0 20%, transparent 20% 45%, rgba(255, 255, 255, .1) 45% 55%, transparent 55%), linear-gradient(60deg, transparent 60%, rgba(224, 242, 254, .16) 60% 75%, transparent 75%), linear-gradient(180deg, #0c4a6e, #082f49); }
/* feu : braise rouge, lueur qui monte du bas */
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n+3):last-of-type)::before,
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n+3) + .slot:not(.revealed))::before { opacity: 1;
  background: radial-gradient(ellipse 70% 80% at 50% 120%, rgba(251, 146, 60, .75), transparent 70%), radial-gradient(ellipse 30% 50% at 20% 110%, rgba(250, 204, 21, .45), transparent 70%), linear-gradient(180deg, #450a0a, #7c2d12); }
/* vent : sarcelle pâle, des rafales en biais */
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n):last-of-type)::before,
.num-card.skin-elemental:has(.slot.revealed:nth-of-type(4n) + .slot:not(.revealed))::before { opacity: 1;
  background: repeating-linear-gradient(172deg, transparent 0 .5em, rgba(204, 251, 241, .16) .5em .56em, transparent .56em 1.1em), linear-gradient(180deg, #134e4a, #0f2f2d); }
/* Les chiffres, un élément chacun. */
.skin-elemental .slot:nth-of-type(4n+1) { color: #c8b79a; -webkit-text-stroke: .035em #292018;
  text-shadow: -.03em -.03em 0 #f5ecd9, 0 .05em 0 #6b5a45, 0 .09em 0 #3b2f22, 0 .13em .12em rgba(0, 0, 0, .7); }
.skin-elemental .slot:nth-of-type(4n+2) { color: #e0f7ff; -webkit-text-stroke: .03em #075985;
  text-shadow: 0 0 .06em #fff, 0 0 .25em #38bdf8, 0 .05em 0 #0c4a6e; }
.skin-elemental .slot:nth-of-type(4n+3) { color: #ffd36b; -webkit-text-stroke: .03em #9a3412;
  text-shadow: 0 0 .08em #fde047, 0 -.06em .2em #f97316, 0 -.14em .4em rgba(220, 38, 38, .8); }
.skin-elemental .slot:nth-of-type(4n) { color: #f0fdfa; -webkit-text-stroke: .03em #115e59; font-style: italic;
  text-shadow: -.05em 0 .06em rgba(153, 246, 228, .55), -.14em 0 .1em rgba(153, 246, 228, .25), 0 .04em 0 #134e4a; }
.skin-elemental .slot.ghost { opacity: .18; }
/* Tirage : chaque chiffre passe par les quatre éléments (roche, glace, feu, vent), avec un petit à-coup. */
.skin-elemental .slot.spinning { opacity: .95; animation: el-cycle .32s steps(1) infinite; }
.skin-elemental .slot.spinning:nth-of-type(4n+2) { animation-delay: -.08s; }
.skin-elemental .slot.spinning:nth-of-type(4n+3) { animation-delay: -.16s; }
.skin-elemental .slot.spinning:nth-of-type(4n) { animation-delay: -.24s; }
@keyframes el-cycle {
  0% { color: #c8b79a; -webkit-text-stroke-color: #292018; text-shadow: 0 .06em 0 #57534e, 0 .1em .1em #000; transform: translateY(.04em); }
  25% { color: #e0f7ff; -webkit-text-stroke-color: #075985; text-shadow: 0 0 .25em #38bdf8; transform: scale(.94); }
  50% { color: #ffd36b; -webkit-text-stroke-color: #9a3412; text-shadow: 0 -.08em .3em #f97316; transform: translateY(-.04em) scaleY(1.06); }
  75% { color: #f0fdfa; -webkit-text-stroke-color: #115e59; text-shadow: -.1em 0 0 rgba(153, 246, 228, .5); transform: translateX(.04em) skewX(-8deg); }
}
/* Révélation : un geste par élément, toujours élan → impact → retour au calme. */
.skin-elemental .slot.revealed:nth-of-type(4n+1) { animation: el-rock .55s backwards; }
@keyframes el-rock { /* roche : soulevée, elle retombe lourdement, rebond rigide, sans écrasement */
  0% { transform: translateY(-.55em) rotate(-4deg); opacity: 0; animation-timing-function: cubic-bezier(.6, 0, 1, .5); }
  12% { opacity: 1; }
  34% { transform: translateY(.05em) rotate(0); filter: brightness(1.6); animation-timing-function: ease-out; }
  48% { transform: translateY(-.07em) rotate(1deg); filter: brightness(1.1); }
  60% { transform: translateY(0) rotate(0); }
  68% { transform: translateX(-.02em); }
  76% { transform: translateX(.02em); }
  100% { transform: none; filter: none; }
}
.skin-elemental .slot.revealed:nth-of-type(4n+2) { animation: el-ice .55s backwards; }
@keyframes el-ice { /* glace : un germe se contracte, puis gèle d'un coup (éclat blanc), net */
  0% { transform: scale(.4) rotate(12deg); opacity: 0; filter: blur(2px) brightness(2); }
  18% { transform: scale(.3) rotate(0); opacity: .8; filter: blur(1px) brightness(3); }
  36% { transform: scale(1.18); opacity: 1; filter: brightness(3.4) saturate(.2); animation-timing-function: steps(2); }
  52% { transform: scale(.97); filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
.skin-elemental .slot.revealed:nth-of-type(4n+3) { animation: el-fire .6s backwards; transform-origin: 50% 100%; }
@keyframes el-fire { /* feu : une flammèche couve, s'embrase très haut, puis vacille jusqu'au calme */
  0% { transform: scale(.5, .2); opacity: 0; filter: brightness(2); }
  16% { transform: scale(.6, .3); opacity: 1; filter: brightness(2.6) saturate(1.6); }
  36% { transform: scale(.9, 1.35); filter: brightness(2.2) saturate(1.5); animation-timing-function: ease-out; }
  54% { transform: scale(1.06, .92); filter: brightness(1.4); }
  70% { transform: scale(.98, 1.05); }
  100% { transform: none; filter: none; }
}
.skin-elemental .slot.revealed:nth-of-type(4n) { animation: el-wind .58s backwards; }
@keyframes el-wind { /* vent : il recule, arrive en rafale de biais, dépasse puis se redresse */
  0% { transform: translateX(-.7em) skewX(-30deg) rotate(-25deg); opacity: 0; filter: blur(2px); }
  22% { transform: translateX(-.45em) skewX(-24deg) rotate(-10deg); opacity: .8; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  44% { transform: translateX(.1em) skewX(12deg); opacity: 1; filter: none; }
  64% { transform: translateX(-.03em) skewX(-4deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .skin-elemental .slot, .num-card.skin-elemental::before { animation: none; transition: none; } }
/* Cadre de duel : les quatre éléments dans les coins ; 🔥 vacille, 🌪️ tourne. */
.side-elemental { --side-border: #d4a72c; --side-glow: 0 0 18px rgba(212, 167, 44, .35); --side-ink: #b45309; --side-ink-glow: 0 0 6px rgba(212, 167, 44, .5);
  --side-bg: radial-gradient(ellipse 45% 55% at 0% 0%, rgba(56, 189, 248, .22), transparent 70%), radial-gradient(ellipse 45% 55% at 100% 0%, rgba(45, 212, 191, .2), transparent 70%), radial-gradient(ellipse 45% 55% at 0% 100%, rgba(120, 113, 108, .3), transparent 70%), radial-gradient(ellipse 45% 55% at 100% 100%, rgba(249, 115, 22, .28), transparent 70%);
  --deco-a: '🔥'; --deco-b: '🌪️'; }
.side-elemental::before { transform-origin: 50% 100%; animation: el-flick 1.6s ease-in-out infinite; }
.side-elemental::after { animation: el-whirl 2.4s linear infinite; }
@keyframes el-flick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.92, 1.12); } 60% { transform: scale(1.06, .94); } }
@keyframes el-whirl { to { transform: rotate(360deg); } }
.room-stage.many .side-elemental::before, .room-stage.many .side-elemental::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-elemental::before, .side-elemental::after { animation: none; } }

/* ================================================================== boutique : tuiles premium et fenêtre d'aperçu */
.premium-panel { border-color: rgba(234, 179, 8, .45); box-shadow: 0 0 0 1px rgba(234, 179, 8, .12), 0 0 34px rgba(234, 179, 8, .08); }
.premium-panel .panel-title::before { content: '★ '; color: #eab308; }
.premium-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.skin-tile.premium { padding: 1.3rem .7rem 1rem; gap: .7rem; border-color: rgba(234, 179, 8, .4); background: linear-gradient(180deg, rgba(234, 179, 8, .07), transparent 55%), var(--surface-dim); }
.skin-tile.premium .skin-name b { font-size: .92rem; }
.skin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.skin-actions .btn.ghost { font-size: .68rem; padding-inline: .6rem; }
/* Skin réservé à une caisse (Infinity) : à la place du prix, la caisse et sa chance. */
.skin-actions .btn.case-only { max-width: 100%; line-height: 1.35; font-size: .62rem; padding-inline: .55rem; border-color: rgba(234, 179, 8, .45); }
/* La scène de l'aperçu : assez de place autour de la carte pour ce qui en jaillit. */
.modal:has(.skin-preview) { max-width: min(46rem, 96vw); width: 46rem; overflow: hidden; }
.skin-preview { position: relative; display: grid; place-items: center; height: 17rem; margin: .4rem -.4rem .2rem; }
.skin-preview .card-stage { position: relative; }
@media (max-width: 560px) { .skin-preview { height: 14rem; } .premium-grid { grid-template-columns: 1fr; } }

/* ================================================================== émotes spéciales (js/emotes.js) */
.emote-svg { display: block; }
.emote-svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.emote-svg .em { transform-box: fill-box; transform-origin: 50% 50%; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; }
/* Elles bougent dans une bulle de réaction, au survol de leur bouton, et dans la boutique ; ailleurs, la pose seule. */
.react-bubble .emote-svg .em, .react-btn:hover .emote-svg .em, .emote-tile .emote-svg .em { animation-play-state: running; }
.em-bounce { animation-name: em-bounce; }
.em-breathe { animation-name: em-breathe; animation-duration: 2.4s !important; }
.em-tremble { animation-name: em-tremble; animation-duration: .16s !important; animation-timing-function: linear !important; }
.em-shake { animation-name: em-shake; animation-duration: .12s !important; animation-timing-function: linear !important; }
.em-thumb { animation-name: em-thumb; transform-origin: 50% 100% !important; }
.em-pop { animation-name: em-pop; }
.em-z { animation-name: em-z; animation-duration: 1.8s !important; animation-timing-function: ease-out !important; }
.em-drop { animation-name: em-drop; animation-duration: 1.1s !important; animation-timing-function: ease-in !important; }
.em-pulse { animation-name: em-pulse; animation-duration: .7s !important; }
.em-float { animation-name: em-float; animation-duration: 2s !important; animation-timing-function: ease-out !important; }
.em-steam { animation-name: em-steam; animation-duration: .9s !important; animation-timing-function: ease-out !important; }
.em-wobble { animation-name: em-wobble; animation-duration: .9s !important; }
.em-honk { animation-name: em-honk; animation-duration: .8s !important; }
.em-fall { animation-name: em-fall; animation-duration: 1.5s !important; animation-timing-function: ease-in !important; }
.em-spinx { animation-name: em-spinx; animation-duration: 1s !important; }
.em-burst { animation-name: em-burst; animation-duration: .9s !important; transform-origin: 50% 100% !important; }
.em-ray { animation-name: em-ray; animation-duration: .9s !important; }
.em-tilt { animation-name: em-tilt; animation-duration: 2.2s !important; }
/* Money Spread : l'éventail tourne autour du bas de chaque billet ; au repos (animation en pause), il est ouvert. */
.em-fan { animation-name: em-fan; animation-duration: 1.6s !important; transform-origin: 50% 100% !important; transform: rotate(var(--fan, 0deg)); }
/* Hungry (idée de Monokromati, 2026-11-01) : la bave s'allonge depuis le coin de la bouche, une goutte tombe, la
   fourchette et le couteau tapent sur la table à tour de rôle (pivot en bas du manche). */
.em-drool { animation-name: em-drool; animation-duration: 1.4s !important; transform-origin: 50% 0 !important; }
.em-drip { animation-name: em-drip; animation-duration: 1.4s !important; animation-timing-function: ease-in !important; }
.em-chop { animation-name: em-chop; animation-duration: 1.2s !important; transform-origin: 50% 100% !important; }
@keyframes em-drool { 0% { transform: scaleY(.35); } 70% { transform: scaleY(1.12); } 80%, 100% { transform: scaleY(.45); } }
@keyframes em-drip { 0%, 68% { transform: translateY(-6px) scale(.4); opacity: 0; } 74% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(14px) scale(.9); opacity: 0; } }
@keyframes em-chop { 0%, 40%, 100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(-6px) rotate(-6deg); } 25% { transform: translateY(1.5px) rotate(2deg); } }
.em-toss { animation-name: em-toss; animation-duration: 1.6s !important; animation-timing-function: ease-out !important; }
@keyframes em-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes em-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .97) translateY(1px); } }
@keyframes em-tremble { 0%, 100% { transform: translate(-.6px, 0); } 50% { transform: translate(.6px, .4px); } }
@keyframes em-shake { 0%, 100% { transform: translate(-1.4px, .6px) rotate(-1.5deg); } 50% { transform: translate(1.4px, -.6px) rotate(1.5deg); } }
@keyframes em-thumb { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) translateY(-2px); } }
@keyframes em-pop { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.14) rotate(4deg); } }
@keyframes em-z { 0% { transform: translate(-4px, 6px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(4px, -7px) scale(1.1); opacity: 0; } }
@keyframes em-drop { 0% { transform: translateY(-4px) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(16px) scale(1); opacity: 0; } }
@keyframes em-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.em-beat { animation-name: em-beat; animation-duration: 1.4s !important; }
/* Émote Supporter : un vrai battement de cœur, deux coups rapprochés puis un temps (comme le pouls du skin Supporter). */
@keyframes em-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(.97); } 36% { transform: scale(1.12); } 52% { transform: scale(1); } }
@keyframes em-float { 0% { transform: translateY(8px) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.1); opacity: 0; } }
@keyframes em-steam { 0% { transform: translateY(6px) scale(.5); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-9px) scale(1.15); opacity: 0; } }
@keyframes em-tilt { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(7deg) translateY(-1px); } }
@keyframes em-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes em-honk { 0%, 60%, 100% { transform: scale(1); } 75% { transform: scale(1.45); } 88% { transform: scale(.9); } }
@keyframes em-fall { 0% { transform: translateY(-12px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(30px) rotate(40deg); opacity: 0; } }
@keyframes em-spinx { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }
@keyframes em-burst { 0%, 100% { transform: scale(.82); } 45% { transform: scale(1.18); } }
@keyframes em-ray { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
@keyframes em-fan { 0%, 100% { transform: rotate(var(--fan, 0deg)); } 45%, 55% { transform: rotate(calc(var(--fan, 0deg) * .15)); } }
/* les billets lancés partent du haut de l'éventail, vers la gauche (et vers la droite pour .em-toss-r) */
.em-toss-r { animation-name: em-toss-r !important; }
@keyframes em-toss { 0% { transform: translate(0, -6px) rotate(0) scale(.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-42px, -36px) rotate(-60deg) scale(1); opacity: 0; } }
@keyframes em-toss-r { 0% { transform: translate(0, -6px) rotate(0) scale(.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(42px, -34px) rotate(65deg) scale(1); opacity: 0; } }
/* Boutique et barre de réactions. */
.emote-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.emote-tile .emote { width: 84px; height: 84px; }
.emote-tile.owned { border-color: color-mix(in srgb, var(--success) 45%, var(--outline)); }
.room-reacts { flex-wrap: wrap; }
.react-btn.special { border-color: rgba(234, 179, 8, .55); }
@media (max-width: 560px) { .emote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .emote-tile .emote { width: 64px; height: 64px; } }

/* ------------------------------------------------------------------ skin Supporter (remerciement de la cagnotte)
   Une plaque prune cerclée d'or rose, chiffres en or rose poli, et derrière eux la ligne d'un pouls qui défile :
   « tu gardes le serveur en vie ». Pendant le tirage les chiffres battent ; au verrouillage, un battement franc. */
.num-card.skin-supporter {
  --ecg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 22H34l5-4 5 4h8l4-17 6 30 5-19 4 6h49' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative; border-color: #e8a798;
  background: radial-gradient(120% 90% at 50% 0%, rgba(251, 113, 133, .22), transparent 62%), linear-gradient(160deg, #3a1d2a, #24121b 60%, #2e1622);
  box-shadow: 0 0 0 1px rgba(255, 220, 205, .25) inset, 0 0 16px rgba(244, 148, 132, .38), 0 5px 0 #6b2f3a, 0 10px 18px rgba(0, 0, 0, .45);
}
.num-card.skin-supporter::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .42;
  background: var(--ecg) 0 58% / auto 62% repeat-x; animation: supp-ecg 2.4s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
@keyframes supp-ecg { to { background-position-x: -120px; } }
.skin-supporter .slot {
  position: relative; z-index: 1; padding: 0 .04em; color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3d8 30%, #f2a898 52%, #ffd2c4 70%, #fff3ee 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1.5px 0 #6b2733) drop-shadow(0 0 2px rgba(251, 113, 133, .45));
}
/* Tirage : un pouls, deux coups rapprochés puis un temps. */
.skin-supporter .slot.spinning { opacity: 1; animation: supp-beat .36s ease-in-out infinite; }
@keyframes supp-beat { 0%, 100% { transform: scale(.9); filter: drop-shadow(0 1.5px 0 #6b2733) brightness(.85); } 22% { transform: scale(1.12); filter: drop-shadow(0 1.5px 0 #6b2733) drop-shadow(0 0 5px rgba(251, 113, 133, .9)) brightness(1.2); } 44% { transform: scale(.96); filter: drop-shadow(0 1.5px 0 #6b2733) brightness(.95); } 62% { transform: scale(1.06); filter: drop-shadow(0 1.5px 0 #6b2733) drop-shadow(0 0 4px rgba(251, 113, 133, .7)) brightness(1.1); } }
/* Verrouillage : le chiffre se tasse, frappe avec un éclat corail, dépasse, se pose. */
.skin-supporter .slot.revealed { animation: supp-thump .62s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes supp-thump {
  0% { transform: scale(.72) translateY(.12em); filter: brightness(.8); }
  26% { transform: scale(1.24) translateY(-.06em); filter: drop-shadow(0 1.5px 0 #6b2733) brightness(1.35) drop-shadow(0 0 7px #fb7185); }
  52% { transform: scale(.93); filter: drop-shadow(0 1.5px 0 #6b2733) brightness(1.12) drop-shadow(0 0 4px rgba(251, 113, 133, .8)); }
  76% { transform: scale(1.05); }
  100% { transform: none; }
}
/* Cadre de duel : salon prune, lueur corail, un cœur qui bat et la ligne du pouls au pied du panneau. */
.side-supporter {
  --side-border: #e8a798; --side-glow: 0 0 18px rgba(244, 148, 132, .32); --side-ink: #fb7185; --side-ink-glow: 0 0 8px rgba(251, 113, 133, .9);
  --side-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 22H34l5-4 5 4h8l4-17 6 30 5-19 4 6h49' fill='none' stroke='%23fb7185' stroke-opacity='.35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 100% / auto 2.2rem repeat-x,
    radial-gradient(110% 70% at 50% 0%, rgba(251, 113, 133, .2), transparent 65%), linear-gradient(180deg, rgba(58, 29, 42, .55), rgba(36, 18, 27, .35));
  --deco-a: '♥'; --deco-b: '♥ ♥';
}
.side-supporter::before { animation: supp-heart 1.6s ease-in-out infinite; transform-origin: center; }
.side-supporter::after { animation: supp-heart 1.6s ease-in-out .8s infinite; }
@keyframes supp-heart { 0%, 100% { transform: scale(1); opacity: .6; } 12% { transform: scale(1.35); opacity: 1; } 24% { transform: scale(1.05); } 36% { transform: scale(1.22); opacity: .95; } 52% { transform: scale(1); opacity: .6; } }
.room-stage.many .num-card.skin-supporter::before { animation: none; }
.room-stage.many .side-supporter::before, .room-stage.many .side-supporter::after { animation: none; }

/* Avec la scène animée (js/skinfx.js), la ligne de pouls est dessinée dans le canvas : celle du CSS se retire. */
.num-card.skin-supporter.has-fx::before { opacity: 0; animation: none; }

/* ------------------------------------------------------------------ Fisherman (collab Canne & Dauphins, exclusif) :
   une petite fenêtre de mer en pixel art dans un cadre de planches (le ponton du jeu de Firetail), ses couleurs et sa
   police pixel. Sous l'eau pendant le tirage, chaque chiffre est ferré : il plonge un peu, puis il est arraché vers le
   haut. Le pêcheur, la canne, le fil et les dauphins sont dessinés par la scène (js/skinfx.js, SCENES.fisher). */
.num-card.skin-fisher {
  background:
    repeating-linear-gradient(90deg, #d8f1ff 0 .45em, transparent .45em .9em) 0 57% / 100% .16em no-repeat,
    linear-gradient(180deg, #3f8fe8 0 10%, #4a9aec 10% 20%, #57a6f0 20% 30%, #66b2f3 30% 40%, #8dcbf7 40% 49%, #bce3fb 49% 56%, #4a9be8 56% 60%, #2b78cf 60% 80%, #2468b8 80% 100%);
  border: 4px solid #6b3f1c; border-radius: 0;
  box-shadow: inset 0 0 0 2px #c98a4b, inset 0 0 0 4px #3a2410, 4px 4px 0 #14182c;
  animation: fisher-waves 1.2s steps(2) infinite;
}
@keyframes fisher-waves { to { background-position: .45em 57%, 0 0; } }
.skin-fisher .slot {
  font-family: 'Press Start 2P', monospace; font-size: .6em; width: 1.05em; color: #ffffff;
  text-shadow: .08em 0 0 #14182c, -.08em 0 0 #14182c, 0 .08em 0 #14182c, 0 -.08em 0 #14182c, .08em .08em 0 #14182c, -.08em .08em 0 #14182c, .08em -.08em 0 #14182c, -.08em -.08em 0 #14182c, 0 .2em 0 #27479a;
}
/* Sous l'eau : bleuté, et il ondule par saccades de pixels. */
.skin-fisher .slot.spinning { color: #a8dcff; animation: fisher-under .24s steps(2) infinite; }
@keyframes fisher-under { from { transform: translateY(.08em); opacity: .7; } to { transform: translateY(-.04em); opacity: .9; } }
/* Ferré : il plonge (le poisson tire), puis il est arraché hors de l'eau, retombe et se pose. */
.skin-fisher .slot.revealed { animation: fisher-yank .6s steps(10) backwards; }
@keyframes fisher-yank { 0% { transform: translateY(.18em); color: #a8dcff; } 22% { transform: translateY(.34em); color: #a8dcff; } 50% { transform: translateY(-.5em); color: #ffffff; } 72% { transform: translateY(.1em); } 86% { transform: translateY(-.06em); } 100% { transform: none; } }
.skin-fisher .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
/* Zéros de tête : après les règles d'animation (sinon elles leur rendraient l'opacité, comme sur Haunted). */
.skin-fisher .slot.ghost, .skin-fisher .slot.ghost.revealed { animation: none; opacity: .18; }
.skin-fisher .slot.collapsed, .skin-fisher .slot.collapsed.revealed { animation: none; opacity: 0; text-shadow: none; }
.room-stage.many .num-card.skin-fisher { animation: none; }
@media (prefers-reduced-motion: reduce) { .num-card.skin-fisher, .skin-fisher .slot { animation: none; } }
.btn-roll.gen-fisher {
  border: 3px solid #6b3f1c; border-radius: 0; color: #ffffff; font-family: 'Press Start 2P', monospace; letter-spacing: 0;
  background: linear-gradient(180deg, #57a6f0 0 45%, #4a9be8 45% 52%, #2b78cf 52%);
  text-shadow: .1em 0 0 #14182c, -.1em 0 0 #14182c, 0 .1em 0 #14182c, 0 -.1em 0 #14182c;
  --gs: 0 .3em 0 #3a2410, 0 .5em 0 #14182c; --gs-h: 0 .34em 0 #3a2410, 0 .56em 0 #14182c; --gs-a: 0 .06em 0 #3a2410;
}
.side-fisher { --side-border: #c98a4b; --side-glow: 0 0 0 2px #6b3f1c; --side-ink: #fff2a8;
  --side-bg: linear-gradient(180deg, rgba(63, 143, 232, .35) 0 55%, rgba(74, 155, 232, .5) 55% 60%, rgba(36, 104, 184, .55) 60%);
  --deco-a: '🎣'; --deco-b: '🐬'; }
.side-fisher::after { animation: fisher-dolphin 3s steps(6) infinite; }
@keyframes fisher-dolphin { 0%, 60% { transform: translateY(0); } 75% { transform: translateY(-8px) rotate(-15deg); } 90% { transform: translateY(-3px) rotate(10deg); } }
.room-stage.many .side-fisher::after { animation: none; }
.fisher-how { display: block; margin-top: .25rem; color: #c98a4b; font-weight: 600; }
.fisher-steps { margin: .4rem 0 0; padding-left: 1.2rem; text-align: left; font-size: .72rem; color: var(--prose-2); display: grid; gap: .25rem; }
.fisher-steps li::marker { color: #c98a4b; font-weight: 800; }
.fisher-done { color: #22c55e; font-weight: 700; }
.fisher-steps [data-fish-google] { text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 700; padding: .22rem .55rem; text-align: left; border: 1px solid #c98a4b; border-radius: .4rem; color: inherit; background: rgba(201, 138, 75, .12); }

/* ------------------------------------------------------------------ Sky (idée de Deadshot) : un ciel d'été, des chiffres en
   nuage (blancs, bombés, ombrés de gris-bleu dessous). Pendant le tirage : de la brume qui dérive ; à la révélation, le nuage
   se condense (matière molle : il s'écrase puis rebondit). Anomaly ou mieux : le ciel et les nuages prennent la couleur de
   la rareté (la scène, js/skinfx.js SCENES.sky, colore les nuages autour de la carte). Anomaly aussi depuis le 2026-10-30. */
.num-card.skin-sky {
  background:
    radial-gradient(ellipse 40% 55% at 10% 0%, rgba(255, 250, 220, .85), transparent 70%),
    radial-gradient(ellipse 30% 26% at 18% 104%, #ffffff 60%, transparent 62%), radial-gradient(ellipse 26% 22% at 44% 108%, #f4f8fd 60%, transparent 62%),
    radial-gradient(ellipse 30% 26% at 74% 106%, #ffffff 60%, transparent 62%), radial-gradient(ellipse 22% 20% at 96% 104%, #eef5fc 60%, transparent 62%),
    linear-gradient(180deg, #4f9fe9 0%, #86c3f4 55%, #cfe7fb 100%);
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 1rem;
  box-shadow: 0 0 0 1px #9cc9ef, 0 .5rem 1.4rem rgba(80, 140, 210, .35);
  transition: background .8s ease;
}
.skin-sky .slot {
  color: #ffffff; font-weight: 900;
  text-shadow: 0 .04em 0 #e3ecf6, 0 .09em 0 #c3d4e6, 0 .14em 0 #a9bfd6, 0 .22em .32em rgba(50, 100, 160, .35), 0 0 .28em rgba(255, 255, 255, .7);
}
.skin-sky .slot.spinning { animation: sky-drift .46s ease-in-out infinite alternate; filter: blur(.05em); opacity: .55; }
@keyframes sky-drift { from { transform: translateX(-.06em) scaleX(1.12); } to { transform: translateX(.06em) scaleX(.94); } }
.skin-sky .slot.revealed { animation: sky-poof .72s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes sky-poof { 0% { transform: scale(1.5, .55); filter: blur(.14em); opacity: 0; } 45% { transform: scale(.9, 1.1); filter: blur(0); opacity: 1; } 70% { transform: scale(1.05, .95); } 100% { transform: none; } }
.skin-sky .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
.skin-sky .slot.ghost, .skin-sky .slot.ghost.revealed { animation: none; opacity: .3; filter: none; }
.skin-sky .slot.collapsed, .skin-sky .slot.collapsed.revealed { animation: none; opacity: 0; text-shadow: none; }
/* Le ciel prend la couleur des grandes raretés. */
/* Anomaly (aube orangée) et Godlike (coucher de soleil rose et or) : demandés par Deadshot, le créateur du skin
   (2026-10-30) ; Godlike n'existait pas encore quand le skin est sorti, son ciel restait bleu. */
.num-card.skin-sky[data-tier="anomaly"] { background: radial-gradient(ellipse 40% 55% at 10% 0%, rgba(255, 237, 213, .9), transparent 70%), linear-gradient(180deg, #ea580c 0%, #fb923c 55%, #ffedd5 100%); }
.num-card.skin-sky[data-tier="godlike"] { background: radial-gradient(ellipse 40% 55% at 10% 0%, rgba(254, 240, 138, .95), transparent 70%), linear-gradient(180deg, #e11d48 0%, #fb7185 50%, #fde68a 100%); }
.num-card.skin-sky[data-tier="mythic"] { background: radial-gradient(ellipse 40% 55% at 10% 0%, rgba(255, 228, 240, .9), transparent 70%), linear-gradient(180deg, #db2777 0%, #f472b6 55%, #fbcfe8 100%); }
.num-card.skin-sky[data-tier="celestial"] { background: radial-gradient(ellipse 40% 55% at 10% 0%, rgba(224, 252, 255, .9), transparent 70%), linear-gradient(180deg, #0e7490 0%, #22d3ee 55%, #cffafe 100%); }
.num-card.skin-sky[data-tier="divine"] { background: radial-gradient(ellipse 40% 55% at 10% 0%, rgba(255, 251, 220, .95), transparent 70%), linear-gradient(180deg, #ca8a04 0%, #facc15 55%, #fef9c3 100%); }
.num-card.skin-sky[data-tier="infinite"] { background: linear-gradient(120deg, #f472b6, #a78bfa, #60a5fa, #34d399, #facc15, #f472b6); background-size: 300% 100%; animation: sky-rainbow 6s linear infinite; }
@keyframes sky-rainbow { to { background-position: 300% 0; } }
.room-stage.many .num-card.skin-sky[data-tier="infinite"] { animation: none; }
@media (prefers-reduced-motion: reduce) { .skin-sky .slot { animation: none; filter: none; } }
.side-sky { --side-border: #9cc9ef; --side-glow: 0 0 18px rgba(134, 195, 244, .5); --side-ink: #ffffff;
  --side-bg: radial-gradient(ellipse 22% 16% at 15% 100%, rgba(255, 255, 255, .55) 60%, transparent 62%), radial-gradient(ellipse 20% 14% at 80% 100%, rgba(255, 255, 255, .5) 60%, transparent 62%), linear-gradient(180deg, rgba(79, 159, 233, .45), rgba(207, 231, 251, .25));
  --deco-a: '☁️'; --deco-b: '☀️'; }
.side-sky::before { animation: sky-float 4s ease-in-out infinite; }
@keyframes sky-float { 50% { transform: translateX(6px); } }
.room-stage.many .side-sky::before { animation: none; }

/* ------------------------------------------------------------------ Deck (idée de GamblrGod) : un tapis de jeu vert au liseré
   doré ; chaque chiffre est une carte à jouer (coins arrondis, couleur dans le coin, rouge ou noire). Pendant le tirage, les
   cartes sont face cachée et se mélangent ; à la révélation, la carte se soulève, se retourne et claque sur le tapis. La scène
   (js/skinfx.js, SCENES.cards) pose le paquet et fait voler les cartes. */
.num-card.skin-cards {
  background: radial-gradient(ellipse 80% 90% at 50% 40%, #1f7a4a 0%, #14603a 60%, #0b4027 100%);
  border: 3px solid #c9a24a; border-radius: .9rem;
  box-shadow: inset 0 0 0 2px #0b4027, inset 0 0 1.4rem rgba(0, 0, 0, .45), 0 .4rem 1.2rem rgba(0, 0, 0, .35);
  gap: .12em;
}
.skin-cards .slot {
  position: relative; width: .8em; height: 1.12em; display: inline-grid; place-items: center; margin: 0 .03em;
  font-family: 'Times New Roman', Times, 'Liberation Serif', serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1; font-weight: 700; font-size: .72em; line-height: 1; color: #111827;
  background: linear-gradient(180deg, #ffffff, #f1f1ea); border-radius: .1em; box-shadow: 0 .04em 0 #d6d3c4, 0 .08em .16em rgba(0, 0, 0, .45);
}
.skin-cards .slot:nth-child(even) { color: #dc2626; }
.skin-cards .slot::before { content: '♠'; position: absolute; top: .06em; left: .08em; font-size: .28em; line-height: 1; }
.skin-cards .slot:nth-child(4n+2)::before { content: '♥'; }
.skin-cards .slot:nth-child(4n+3)::before { content: '♣'; }
.skin-cards .slot:nth-child(4n)::before { content: '♦'; }
/* Face cachée pendant le tirage : le dos rouge à croisillons, qui se mélange. */
.skin-cards .slot.spinning { color: transparent; animation: cards-shuffle .18s steps(2) infinite;
  background: repeating-linear-gradient(45deg, #b91c1c 0 .06em, #dc2626 .06em .12em), #dc2626; box-shadow: inset 0 0 0 .05em #ffffff, 0 .08em .16em rgba(0, 0, 0, .45); }
.skin-cards .slot.spinning::before { content: none; }
@keyframes cards-shuffle { from { transform: translateY(-.03em) rotate(-2deg); } to { transform: translateY(.02em) rotate(2deg); } }
/* Retournée : elle se soulève, tourne d'un quart (on voit sa tranche), se pose face visible et claque. */
.skin-cards .slot.revealed { animation: cards-flip .62s cubic-bezier(.3, 1.3, .5, 1) backwards; }
@keyframes cards-flip { 0% { transform: translateY(-.25em) rotateY(90deg) scale(1.1); } 40% { transform: translateY(-.3em) rotateY(0) scale(1.12); } 70% { transform: translateY(.03em) scale(.97); } 100% { transform: none; } }
.skin-cards .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
.skin-cards .slot.collapsed::before { content: none; }
.skin-cards .slot.ghost, .skin-cards .slot.ghost.revealed { animation: none; opacity: .3; }
.skin-cards .slot.collapsed, .skin-cards .slot.collapsed.revealed { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .skin-cards .slot { animation: none; } }
.side-cards { --side-border: #c9a24a; --side-glow: 0 0 16px rgba(201, 162, 74, .35); --side-ink: #fff7d6;
  --side-bg: radial-gradient(ellipse 80% 90% at 50% 40%, rgba(31, 122, 74, .55), rgba(11, 64, 39, .6)); --deco-a: '♠ ♥'; --deco-b: '♣ ♦'; }

/* Packs de sons du tirage (boutique, onglet Sounds) */
.sound-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.sound-tile .sound-icon { font-size: 2.4rem; line-height: 1; padding: .5rem 0 .2rem; }
.sound-tile.owned { border-color: color-mix(in srgb, var(--success) 45%, var(--outline)); }
.sound-tile .sound-play { font-size: .78rem; }
@media (max-width: 560px) { .sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================== 👁️ The Observer (idée de Gray alt, 2026-10-28) — la
   carte est la pupille d'un œil cosmique : la nuit profonde, une nébuleuse violette et turquoise, de fines étoiles ;
   un liseré doré (la lumière des paupières). Les chiffres sont écrits en lumière d'étoile (blanc, halo violet et
   turquoise). Tirage : des constellations floues qui scintillent. Un chiffre qui se pose : il se forme dans le regard
   (trop grand et flou, il se resserre, éclat, se pose) — de la lumière : pas d'écrasement. L'œil, sa galaxie, les étoiles
   et l'éclat cosmique : js/skinfx.js (SCENES.observer). */
.num-card.skin-observer {
  background:
    radial-gradient(circle at 18% 30%, #fff 0 .6px, transparent 1.2px) 0 0 / 2.1em 1.3em,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .8) 0 .5px, transparent 1px) 0 0 / 1.6em 1.1em,
    radial-gradient(ellipse 60% 90% at 22% 80%, rgba(34, 211, 238, .22), transparent 70%),
    radial-gradient(ellipse 60% 90% at 80% 20%, rgba(192, 132, 252, .3), transparent 70%),
    radial-gradient(ellipse 80% 120% at 50% 40%, #1a0f3d, #0a0620 70%, #05030f);
  border: 2px solid #b8892b; border-radius: .7rem; color: #f5f3ff;
  box-shadow: 0 0 0 1px #2e1065, inset 0 0 .7em rgba(139, 92, 246, .45), 0 0 22px rgba(167, 139, 250, .4), 0 0 46px rgba(34, 211, 238, .15), 0 12px 20px rgba(0, 0, 0, .5);
}
.skin-observer .slot { position: relative; z-index: 1; color: #f5f3ff;
  text-shadow: 0 0 .05em #fff, 0 0 .22em rgba(192, 132, 252, .95), 0 0 .5em rgba(34, 211, 238, .5); }
.skin-observer .slot.ghost { text-shadow: none; }
/* Tirage : des constellations floues qui scintillent. */
.skin-observer .slot.spinning { opacity: .55; color: #a5b4fc; filter: blur(1px); text-shadow: 0 0 .3em #8b5cf6; animation: obs-twinkle .5s ease-in-out infinite alternate; }
.skin-observer .slot.spinning:nth-of-type(2n) { animation-delay: -.25s; }
@keyframes obs-twinkle { from { transform: scale(.94); filter: blur(1.4px) brightness(.8); } to { transform: scale(1.03); filter: blur(.6px) brightness(1.3); } }
/* Le chiffre se forme dans le regard : il se resserre, s'illumine, se pose. */
.skin-observer .slot.revealed { animation: obs-form .75s backwards; }
@keyframes obs-form {
  0% { transform: scale(1.6); filter: blur(5px) brightness(.6); animation-timing-function: cubic-bezier(.4, 0, .9, .5); }
  34% { transform: scale(.94); filter: blur(0) brightness(2.6) drop-shadow(0 0 .2em #fff); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  60% { transform: scale(1.03); filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .skin-observer .slot { animation: none; } }
/* Cadre de duel : la nuit étoilée violette ; 👁️ cligne de temps en temps, ✨ scintille. */
.side-observer { --side-border: #b8892b; --side-glow: 0 0 18px rgba(167, 139, 250, .4); --side-ink: #7c3aed; --side-ink-glow: 0 0 8px rgba(192, 132, 252, .7);
  --side-bg: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px) 0 0 / 46px 38px, radial-gradient(circle at 70% 60%, rgba(196, 181, 253, .6) 0 1px, transparent 1.5px) 0 0 / 34px 52px, radial-gradient(ellipse 70% 60% at 50% 40%, rgba(124, 58, 237, .22), transparent 70%), linear-gradient(180deg, rgba(30, 27, 75, .3), rgba(10, 6, 32, .3));
  --deco-a: '👁️'; --deco-b: '✨'; }
.side-observer::before { animation: obs-blink 5s ease-in-out infinite; }
.side-observer::after { animation: obs-shine 2.4s ease-in-out infinite; }
@keyframes obs-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes obs-shine { 0%, 100% { transform: scale(.8) rotate(0); opacity: .5; } 50% { transform: scale(1.2) rotate(20deg); opacity: 1; } }
.room-stage.many .side-observer::before, .room-stage.many .side-observer::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-observer::before, .side-observer::after { animation: none; } }

/* ==================================================================== Skins du 2026-11-05, lot 1 : Angel et Demon
   La paire demandée par qwertyuiop (2026-11-01 : « a legendary angel and demon skin where the angel skin costs 7,777
   and the demon skin costs 6,666 ») ; Demon reprend aussi l'ange déchu de Roanono (2026-11-03 : « ange démoniaque /
   déchu … lumière sombre »). Les deux partagent leurs ailes, dessinées par js/skinfx.js (SCENES.angel, SCENES.demon). */
/* ------------------------------------------------------------------ 🪽 Angel : de la lumière. Un ciel de crépuscule bleu
   nuit, un rayonnement doré derrière les chiffres, des nuages éclairés par en dessous. Chaque chiffre est en lumière
   blanche, bordée d'or, et porte son auréole. Pendant le tirage, les chiffres scintillent et les auréoles tournent sur
   elles-mêmes. Un chiffre qui se pose : l'auréole descend et se pose, le chiffre se condense d'un éclat aveuglant, un
   léger dépassement et il se pose (une lumière : pas d'écrasement, un atterrissage doux). */
.num-card.skin-angel {
  background:
    radial-gradient(ellipse 22% 30% at 15% 104%, rgba(255, 247, 222, .85), transparent 70%), radial-gradient(ellipse 26% 32% at 40% 108%, rgba(255, 250, 235, .8), transparent 70%),
    radial-gradient(ellipse 24% 30% at 68% 106%, rgba(255, 247, 222, .8), transparent 70%), radial-gradient(ellipse 22% 28% at 92% 104%, rgba(255, 250, 235, .75), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(253, 230, 138, .45), rgba(253, 230, 138, .08) 60%, transparent 75%),
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(255, 255, 255, .06) 0 4deg, transparent 4deg 12deg),
    linear-gradient(180deg, #1b2452, #34478f 60%, #6e7fc4);
  border: 2px solid #e9c46a; border-radius: 1rem; color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 1.2em rgba(253, 230, 138, .25), 0 0 0 3px rgba(233, 196, 106, .25), 0 0 26px rgba(253, 230, 138, .45), 0 10px 20px rgba(15, 23, 60, .45);
  padding-top: .5em;
}
.skin-angel .slot {
  position: relative; color: #ffffff; font-weight: 700; font-family: 'Optima', 'Candara', 'Palatino Linotype', Palatino, Georgia, serif; font-variant-numeric: lining-nums;
  text-shadow: 0 0 .04em #fff, 0 .03em .02em #8a6512, 0 0 .2em rgba(253, 230, 138, .95), 0 0 .55em rgba(253, 224, 71, .5);
}
/* l'auréole : un anneau d'or vu de biais au-dessus du chiffre */
.skin-angel .slot::before {
  content: ''; position: absolute; left: 50%; top: -.2em; width: .5em; height: .13em; margin-left: -.25em; border-radius: 50%; pointer-events: none;
  border: .045em solid #fde68a; box-shadow: 0 0 .12em #facc15, inset 0 0 .06em #facc15;
}
.skin-angel .slot.ghost { opacity: .18; }
.skin-angel .slot.ghost::before { display: none; }
.skin-angel .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
.skin-angel .slot.collapsed::before { display: none; }
.skin-angel .slot.spinning { opacity: .6; color: #e0e7ff; text-shadow: 0 0 .3em rgba(253, 230, 138, .8); animation: ang-shimmer .3s ease-in-out infinite alternate; }
.skin-angel .slot.spinning::before { opacity: .55; animation: ang-turn .5s linear infinite; }
.skin-angel .slot.spinning:nth-of-type(2n), .skin-angel .slot.spinning:nth-of-type(2n)::before { animation-delay: -.15s; }
@keyframes ang-shimmer { from { filter: blur(1.2px) brightness(1.3); transform: translateY(-.03em); } to { filter: blur(.3px) brightness(.9); transform: translateY(.03em); } }
@keyframes ang-turn { from { transform: scaleX(1); } 50% { transform: scaleX(.15); } to { transform: scaleX(1); } }
.skin-angel .slot.revealed { animation: ang-form .7s backwards; }
.skin-angel .slot.revealed::before { animation: ang-halo .7s backwards; }
@keyframes ang-form {
  0% { transform: translateY(-.1em) scale(1.14); filter: blur(4px) brightness(2.6); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  38% { transform: translateY(.02em) scale(.97); filter: blur(0) brightness(1.9); }
  62% { transform: translateY(-.015em) scale(1.02); filter: brightness(1.2); }
  100% { transform: none; filter: none; }
}
@keyframes ang-halo { 0% { transform: translateY(-.35em) scale(1.6); opacity: 0; } 45% { transform: translateY(.03em) scale(.92); opacity: 1; } 70% { transform: translateY(-.01em) scale(1.04); } 100% { transform: none; } }
/* Dès Mythic (.ang-glory, posée par la scène) : les auréoles s'embrasent. */
.num-card.skin-angel.ang-glory .slot:not(.ghost)::before { animation: ang-blaze 2.4s ease-in-out infinite alternate; }
@keyframes ang-blaze { from { box-shadow: 0 0 .12em #facc15, inset 0 0 .06em #facc15; } to { box-shadow: 0 0 .3em #fde047, 0 0 .6em rgba(253, 224, 71, .6), inset 0 0 .08em #fff; } }
@media (prefers-reduced-motion: reduce) { .skin-angel .slot, .skin-angel .slot::before { animation: none !important; } }
.side-angel { --side-border: #e9c46a; --side-glow: 0 0 20px rgba(253, 230, 138, .45); --side-ink: #ca8a04; --side-ink-glow: 0 0 8px rgba(253, 224, 71, .7);
  --side-bg: radial-gradient(ellipse 30% 22% at 20% 100%, rgba(255, 255, 255, .3), transparent 70%), radial-gradient(ellipse 34% 24% at 75% 102%, rgba(255, 255, 255, .28), transparent 70%), repeating-conic-gradient(from 0deg at 50% -10%, rgba(253, 230, 138, .1) 0 5deg, transparent 5deg 15deg), linear-gradient(180deg, rgba(110, 127, 196, .18), rgba(253, 230, 138, .1));
  --deco-a: '🪽'; --deco-b: '✨'; }
.side-angel::before { transform-origin: 80% 70%; animation: ang-flap 1.4s ease-in-out infinite; }
.side-angel::after { animation: ang-twinkle 1.8s ease-in-out infinite; }
@keyframes ang-flap { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-16deg) translateY(-4px); } }
@keyframes ang-twinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.15); } }
.room-stage.many .side-angel::before, .room-stage.many .side-angel::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-angel::before, .side-angel::after { animation: none; } }

/* ------------------------------------------------------------------ 😈 Demon : la lumière sombre de l'ange déchu. De
   l'obsidienne fendue, des fissures où rougeoie la braise, une lueur pourpre qui monte du bas. Chaque chiffre est
   marqué au fer rouge (cœur clair, rouge sang, liseré noir) et porte une auréole brisée, de travers. Pendant le tirage,
   les chiffres tressaillent comme des flammes noires. Un chiffre qui se pose : noir et trop grand, il est marqué d'un
   éclair, la carte encaisse le choc (secousse sèche, matière dure) et il se met à rougeoyer. */
.num-card.skin-demon {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'><g fill='none' stroke='%23dc2626' stroke-linecap='round' stroke-linejoin='round'><path d='M0 30L14 26L20 31L33 24L41 27' stroke-width='.9' opacity='.75'/><path d='M120 8L104 13L99 9L86 15' stroke-width='.8' opacity='.7'/><path d='M62 40L66 33L61 28L68 22' stroke-width='.7' opacity='.6'/><path d='M14 26L12 18L16 12' stroke-width='.5' opacity='.5'/><path d='M104 13L108 22L103 30L109 38' stroke-width='.6' opacity='.55'/></g></svg>") 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 70% 55% at 50% 115%, rgba(220, 38, 38, .55), transparent 70%),
    radial-gradient(ellipse 50% 60% at 50% 45%, rgba(127, 29, 29, .35), transparent 75%),
    linear-gradient(160deg, #1a0b10, #0b0507 55%, #160609);
  border: 2px solid #7f1d1d; border-radius: .55rem; color: #fb7185;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .25), inset 0 -.2em .5em rgba(220, 38, 38, .25), 0 0 0 3px rgba(127, 29, 29, .35), 0 0 24px rgba(220, 38, 38, .45), 0 10px 20px rgba(0, 0, 0, .55);
  padding-top: .5em;
}
.skin-demon .slot {
  position: relative; font-weight: 700; color: #ff4d5e; font-family: 'Copperplate', 'Trajan Pro', 'Cinzel', 'Palatino Linotype', Georgia, serif; font-variant-numeric: lining-nums;
  text-shadow: 0 0 .03em #ffe4e6, 0 .04em .02em #000, 0 0 .18em rgba(244, 63, 94, .9), 0 0 .5em rgba(220, 38, 38, .55);
}
/* l'auréole brisée : un anneau rouge sombre ouvert sur le côté, de travers */
.skin-demon .slot::before {
  content: ''; position: absolute; left: 50%; top: -.2em; width: .48em; height: .13em; margin-left: -.24em; border-radius: 50%; pointer-events: none;
  border: .04em solid #ef4444; border-right-color: transparent; border-bottom-color: #7f1d1d; transform: rotate(-12deg);
  box-shadow: 0 0 .1em rgba(239, 68, 68, .8);
}
.skin-demon .slot.ghost { opacity: .18; }
.skin-demon .slot.ghost::before { display: none; }
.skin-demon .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
.skin-demon .slot.collapsed::before { display: none; }
.skin-demon .slot.spinning { opacity: .7; color: #3f0a12; text-shadow: 0 0 .12em #dc2626, 0 0 .3em rgba(220, 38, 38, .6); animation: dmn-flicker .18s steps(3) infinite; }
.skin-demon .slot.spinning::before { opacity: .5; animation: dmn-sputter .4s steps(2) infinite; }
.skin-demon .slot.spinning:nth-of-type(2n) { animation-delay: -.09s; }
@keyframes dmn-flicker { 0% { transform: translate(-.02em, 0) skewX(-3deg); } 50% { transform: translate(.02em, -.02em) skewX(2deg); filter: brightness(1.6); } 100% { transform: translate(0, .02em); } }
@keyframes dmn-sputter { from { opacity: .7; } to { opacity: .2; } }
.skin-demon .slot.revealed { animation: dmn-brand .64s backwards; }
.skin-demon .slot.revealed::before { animation: dmn-halo .64s backwards; }
@keyframes dmn-brand {
  0% { transform: scale(1.3); color: #000; text-shadow: 0 0 .1em #7f1d1d; animation-timing-function: cubic-bezier(.7, 0, .9, .3); }
  20% { transform: scale(.94); color: #fff1f2; text-shadow: 0 0 .1em #fff, 0 0 .4em #f97316, 0 0 .9em #dc2626; animation-timing-function: linear; }
  28% { transform: translateX(-.035em) scale(.97); }
  36% { transform: translateX(.03em); }
  44% { transform: translateX(-.015em); color: #ff8a95; }
  56% { transform: none; }
  100% { transform: none; }
}
@keyframes dmn-halo { 0%, 20% { transform: translateY(-.25em) rotate(30deg); opacity: 0; } 34% { transform: translateY(.03em) rotate(-18deg); opacity: 1; } 52% { transform: rotate(-8deg); } 100% { transform: rotate(-12deg); } }
/* Dès Mythic (.dmn-wrath, posée par la scène) : les chiffres battent comme une braise. */
.num-card.skin-demon.dmn-wrath .slot:not(.ghost) { animation: dmn-ember 1.8s ease-in-out infinite alternate; }
@keyframes dmn-ember { from { text-shadow: 0 0 .03em #ffe4e6, 0 .04em .02em #000, 0 0 .18em rgba(244, 63, 94, .9), 0 0 .5em rgba(220, 38, 38, .55); } to { text-shadow: 0 0 .05em #fff, 0 .04em .02em #000, 0 0 .3em #fb7185, 0 0 .9em rgba(249, 115, 22, .7); } }
@media (prefers-reduced-motion: reduce) { .skin-demon .slot, .skin-demon .slot::before { animation: none !important; } }
.side-demon { --side-border: #991b1b; --side-glow: 0 0 20px rgba(220, 38, 38, .45); --side-ink: #dc2626; --side-ink-glow: 0 0 8px rgba(239, 68, 68, .7);
  --side-bg: radial-gradient(circle, rgba(249, 115, 22, .5) 0 1.2px, transparent 2px) 0 0 / 23px 31px, radial-gradient(ellipse 80% 40% at 50% 110%, rgba(220, 38, 38, .3), transparent 70%), linear-gradient(180deg, rgba(26, 11, 16, .3), rgba(127, 29, 29, .2));
  --deco-a: '😈'; --deco-b: '🪶'; }
.side-demon::before { animation: dmn-glare 2.2s ease-in-out infinite; }
.side-demon::after { animation: dmn-fall 2.6s ease-in-out infinite; }
@keyframes dmn-glare { 0%, 100% { filter: none; transform: none; } 50% { filter: drop-shadow(0 0 4px #ef4444); transform: scale(1.1); } }
@keyframes dmn-fall { 0% { transform: translateY(-6px) rotate(-20deg); } 50% { transform: translateY(2px) rotate(15deg); } 100% { transform: translateY(-6px) rotate(-20deg); } }
.room-stage.many .side-demon::before, .room-stage.many .side-demon::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-demon::before, .side-demon::after { animation: none; } }

/* ==================================================================== ☯️ Yin and Yang (lot 2 du 2026-11-05)
   Idée de kaz (2026-10-31, Legendary) : « a fully black skin while the numbers are white, and every number the colors
   invert … The numbers are chinese text and they are rolling until they become a number; they are slightly foggy.
   Background: floating yin yang circles foggy and transparent » ; et de JBearr12 (2026-11-01 : « the colors switch every
   time … make a yin and yang background »). L'encre et le papier : la carte est noire, les chiffres blancs ; à chaque
   chiffre posé, toute la carte s'inverse (papier blanc, chiffres noirs), puis revient, et ainsi de suite (règle :has()
   sur le nombre de cases posées, elle marche aussi sans la scène). Des cercles du yin et du yang flottent dans la brume
   derrière. Pendant le tirage, les chiffres sont des chiffres chinois flous qui défilent (spinChar dans js/app.js) ; un
   chiffre qui se pose sort de la brume d'un coup de pinceau. Le tourbillon qui inverse la carte, les carpes koï et le
   grand taiji : js/skinfx.js (SCENES.yinyang). */
.num-card.skin-yinyang {
  background: radial-gradient(ellipse 60% 50% at 20% 90%, rgba(168, 162, 158, .18), transparent 70%), radial-gradient(ellipse 50% 45% at 85% 15%, rgba(168, 162, 158, .14), transparent 70%);
  background-color: #0c0a09; color: #fafaf9;
  border: 2px solid #78716c; border-radius: .6rem;
  box-shadow: inset 0 0 0 1px rgba(250, 250, 249, .18), inset 0 0 .8em rgba(120, 113, 108, .35), 0 0 0 3px rgba(120, 113, 108, .25), 0 0 20px rgba(214, 211, 209, .25), 0 10px 20px rgba(0, 0, 0, .45);
  transition: background-color .32s ease, color .32s ease, border-color .32s ease;
}
/* les cercles du yin et du yang qui flottent dans la brume (sur ::before : la carte garde ses propres animations) */
.num-card.skin-yinyang::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%23a8a29e' fill-opacity='.16'/><path d='M50 2A48 48 0 0 1 50 98A24 24 0 0 1 50 50A24 24 0 0 0 50 2Z' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='26' r='7' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='74' r='7' fill='%23a8a29e' fill-opacity='.2'/></svg>") 18% 34% / 1.1em 1.1em no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%23a8a29e' fill-opacity='.16'/><path d='M50 2A48 48 0 0 1 50 98A24 24 0 0 1 50 50A24 24 0 0 0 50 2Z' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='26' r='7' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='74' r='7' fill='%23a8a29e' fill-opacity='.2'/></svg>") 80% 70% / .8em .8em no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%23a8a29e' fill-opacity='.16'/><path d='M50 2A48 48 0 0 1 50 98A24 24 0 0 1 50 50A24 24 0 0 0 50 2Z' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='26' r='7' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='74' r='7' fill='%23a8a29e' fill-opacity='.2'/></svg>") 56% 20% / .6em .6em no-repeat;
  filter: blur(.6px); animation: yy-drift 14s ease-in-out infinite alternate;
}
@keyframes yy-drift { from { background-position: 14% 40%, 84% 64%, 52% 16%; } to { background-position: 24% 26%, 74% 80%, 62% 30%; } }
/* un nombre impair de chiffres posés : le papier blanc et l'encre noire */
.num-card.skin-yinyang:has(> .slot:nth-of-type(1).revealed):not(:has(> .slot:nth-of-type(2).revealed)),
.num-card.skin-yinyang:has(> .slot:nth-of-type(3).revealed):not(:has(> .slot:nth-of-type(4).revealed)),
.num-card.skin-yinyang:has(> .slot:nth-of-type(5).revealed):not(:has(> .slot:nth-of-type(6).revealed)),
.num-card.skin-yinyang:has(> .slot:nth-of-type(7).revealed):not(:has(> .slot:nth-of-type(8).revealed)),
.num-card.skin-yinyang:has(> .slot:nth-of-type(9).revealed):not(:has(> .slot:nth-of-type(10).revealed)) {
  background-color: #f5f5f4; color: #0c0a09; border-color: #a8a29e;
}
.skin-yinyang .slot {
  position: relative; color: inherit; font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; font-weight: 700; font-variant-numeric: lining-nums;
  text-shadow: 0 0 .12em rgba(168, 162, 158, .6); transition: color .32s ease;
}
.num-card.skin-yinyang:has(> .slot:nth-of-type(1).revealed):not(:has(> .slot:nth-of-type(2).revealed)) .slot,
.num-card.skin-yinyang:has(> .slot:nth-of-type(3).revealed):not(:has(> .slot:nth-of-type(4).revealed)) .slot,
.num-card.skin-yinyang:has(> .slot:nth-of-type(5).revealed):not(:has(> .slot:nth-of-type(6).revealed)) .slot,
.num-card.skin-yinyang:has(> .slot:nth-of-type(7).revealed):not(:has(> .slot:nth-of-type(8).revealed)) .slot,
.num-card.skin-yinyang:has(> .slot:nth-of-type(9).revealed):not(:has(> .slot:nth-of-type(10).revealed)) .slot {
  text-shadow: 0 0 .12em rgba(120, 113, 108, .45);
}
.skin-yinyang .slot.ghost { opacity: .18; }
.skin-yinyang .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
/* Pendant le tirage : des chiffres chinois (零 一 二 …) défilent dans la brume. */
.skin-yinyang .slot.spinning { opacity: .7; color: inherit; font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif CJK SC', serif; font-size: .82em; filter: blur(1.1px); animation: yy-mist .4s ease-in-out infinite alternate; }
.skin-yinyang .slot.spinning:nth-of-type(2n) { animation-delay: -.2s; }
@keyframes yy-mist { from { transform: translateY(-.05em); filter: blur(1.4px); } to { transform: translateY(.04em); filter: blur(.7px); } }
/* Le coup de pinceau : flou et trop grand, le chiffre sort de la brume, se resserre et se pose. */
.skin-yinyang .slot.revealed { animation: yy-ink .62s backwards; }
@keyframes yy-ink {
  0% { transform: scale(1.3) rotate(-6deg); filter: blur(5px); letter-spacing: .1em; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  40% { transform: scale(.95) rotate(1deg); filter: blur(0); }
  64% { transform: scale(1.02); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .num-card.skin-yinyang::before, .skin-yinyang .slot { animation: none !important; } }
.room-stage.many .num-card.skin-yinyang::before { animation: none; }
/* Cadre de duel : moitié encre, moitié papier, deux cercles du yin et du yang ; ☯️ tourne lentement. */
.side-yinyang { --side-border: #a8a29e; --side-glow: 0 0 18px rgba(214, 211, 209, .35); --side-ink: #78716c;
  --side-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%23a8a29e' fill-opacity='.16'/><path d='M50 2A48 48 0 0 1 50 98A24 24 0 0 1 50 50A24 24 0 0 0 50 2Z' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='26' r='7' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='74' r='7' fill='%23a8a29e' fill-opacity='.2'/></svg>") 85% 20% / 46px 46px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%23a8a29e' fill-opacity='.16'/><path d='M50 2A48 48 0 0 1 50 98A24 24 0 0 1 50 50A24 24 0 0 0 50 2Z' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='26' r='7' fill='%2378716c' fill-opacity='.22'/><circle cx='50' cy='74' r='7' fill='%23a8a29e' fill-opacity='.2'/></svg>") 12% 80% / 34px 34px no-repeat, linear-gradient(100deg, rgba(12, 10, 9, .28) 0 50%, rgba(250, 250, 249, .14) 50%);
  --deco-a: '☯'; --deco-b: '☯'; }
.side-yinyang::before { font-size: 1.4em; animation: yy-turn 6s linear infinite; }
.side-yinyang::after { animation: yy-turn 9s linear infinite reverse; }
@keyframes yy-turn { to { transform: rotate(360deg); } }
.room-stage.many .side-yinyang::before, .room-stage.many .side-yinyang::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-yinyang::before, .side-yinyang::after { animation: none; } }

/* ==================================================================== 🦆 Duck Singularity (lot 6 du 2026-11-05)
   Idée de Gray alt (2026-10-26, 7k coins) : « A giant golden rubber duck floats inside a miniature black hole. Every roll
   bends space around it until the duck quacks and reality glitches. » Un trou noir miniature : un disque d'accrétion
   or et orangé qui tourne autour d'un centre noir, un anneau de lumière déviée. Les chiffres sont en or, attirés par le
   centre. Pendant le tirage, l'espace se courbe : les chiffres s'étirent et se tordent vers le milieu. Un chiffre qui se
   pose : il est aspiré puis relâché d'un coup (un éclair, un anneau de lentille). À la révélation, le canard fait
   « coin » et la réalité bugue (.dks-glitch, posée par la scène : décalage de couleurs et saccades). Le canard d'or qui
   orbite et le son du coin-coin (celui de la course de canards) : js/skinfx.js (SCENES.ducksing). */
.num-card.skin-ducksing {
  background:
    radial-gradient(ellipse 50% 46% at 50% 50%, transparent 66%, rgba(255, 237, 160, .55) 70%, transparent 76%),
    radial-gradient(ellipse 20% 34% at 50% 50%, #000 0 60%, transparent 100%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(251, 191, 36, .35) 0 6deg, rgba(234, 88, 12, .2) 6deg 14deg, transparent 14deg 22deg),
    radial-gradient(ellipse 70% 80% at 50% 50%, #3b1d06, #0a0603 75%);
  border: 2px solid #ca8a04; border-radius: .7rem; color: #fde68a;
  box-shadow: inset 0 0 .8em rgba(0, 0, 0, .8), 0 0 0 1px rgba(253, 230, 138, .35), 0 0 0 3px rgba(202, 138, 4, .3), 0 0 26px rgba(251, 191, 36, .45), 0 12px 20px rgba(0, 0, 0, .55);
}
.skin-ducksing .slot { position: relative; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 900;
  color: #fde68a; text-shadow: 0 0 .04em #fffbeb, 0 .04em 0 #78350f, 0 0 .3em rgba(251, 191, 36, .8); }
.skin-ducksing .slot.ghost { opacity: .18; }
.skin-ducksing .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
.skin-ducksing .slot.spinning { opacity: .65; animation: dks-warp .28s ease-in-out infinite alternate; }
.skin-ducksing .slot.spinning:nth-of-type(-n + 3) { transform-origin: 140% 50%; }
.skin-ducksing .slot.spinning:nth-of-type(n + 4) { transform-origin: -40% 50%; }
@keyframes dks-warp { from { transform: scaleX(1.25) skewY(-8deg); filter: blur(.8px); } to { transform: scaleX(.85) skewY(6deg); filter: blur(.2px); } }
.skin-ducksing .slot.revealed { animation: dks-snap .55s backwards; }
@keyframes dks-snap {
  0% { transform: scale(.3) rotate(140deg); filter: blur(2px) brightness(2); animation-timing-function: cubic-bezier(.2, .9, .3, 1.3); }
  45% { transform: scale(1.12) rotate(-6deg); filter: brightness(1.6); }
  70% { transform: scale(.97) rotate(2deg); filter: none; }
  100% { transform: none; }
}
/* le bug de la réalité : les couleurs se séparent et la carte saccade, quelques instants */
.num-card.skin-ducksing.dks-glitch .slot:not(.ghost) { animation: dks-glitch .9s steps(6) 1; }
@keyframes dks-glitch {
  0%, 100% { transform: none; text-shadow: 0 0 .04em #fffbeb, 0 .04em 0 #78350f, 0 0 .3em rgba(251, 191, 36, .8); }
  20% { transform: translateX(.06em) skewX(-12deg); text-shadow: -.1em 0 0 #22d3ee, .1em 0 0 #ec4899; }
  40% { transform: translateX(-.05em) scaleY(1.2); text-shadow: .08em 0 0 #22d3ee, -.08em 0 0 #ec4899; }
  60% { transform: translateY(.04em) skewX(10deg); }
  80% { transform: translateX(.03em); text-shadow: -.05em 0 0 #a3e635, .05em 0 0 #ec4899; }
}
@media (prefers-reduced-motion: reduce) { .skin-ducksing .slot { animation: none !important; } }
.side-ducksing { --side-border: #ca8a04; --side-glow: 0 0 20px rgba(251, 191, 36, .45); --side-ink: #facc15; --side-ink-glow: 0 0 8px rgba(251, 191, 36, .7);
  --side-bg: radial-gradient(ellipse 18% 26% at 50% 50%, rgba(0, 0, 0, .6) 0 60%, transparent 100%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(251, 191, 36, .14) 0 6deg, transparent 6deg 20deg), radial-gradient(ellipse 70% 70% at 50% 50%, rgba(59, 29, 6, .3), rgba(10, 6, 3, .25));
  --deco-a: '🦆'; --deco-b: '🕳️'; }
.side-ducksing::before { animation: dks-orbit 3s linear infinite; }
@keyframes dks-orbit { from { transform: rotate(0) translateX(6px) rotate(0); } to { transform: rotate(360deg) translateX(6px) rotate(-360deg); } }
.room-stage.many .side-ducksing::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .side-ducksing::before { animation: none; } }