/* RNG∞ — skins du bouton de tirage (« Generate », « Roll again », « Roll round » en duel).
   .btn-roll.gen-<id> : même identifiant que le skin de nombre assorti (SKINS dans js/shop.js) ou qu'un bouton vendu
   à part (BUTTONS). Le libellé reste un simple texte, traduit au vol : les décors sont en ::before / ::after, derrière
   lui. Variables par skin : --gs (ombre au repos), --gs-h (survol), --gs-a (enfoncé), --press (course du clic).
   Planche de contrôle : node tools/button-overview.mjs */
.btn-roll[class*="gen-"] {
  isolation: isolate;
  animation: none;
  box-shadow: var(--gs, none);
  margin-bottom: var(--edge, 0px); /* place de la tranche sous le bouton : elle ne touche pas la ligne d'en dessous */
  transition: transform .13s var(--ease-out), box-shadow .16s ease, filter .16s ease;
}
.btn-roll[class*="gen-"]::before, .btn-roll[class*="gen-"]::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.btn-roll[class*="gen-"]:hover { transform: translateY(-1px); box-shadow: var(--gs-h, var(--gs, none)); filter: brightness(1.06); }
.btn-roll[class*="gen-"]:active { transform: translateY(var(--press, 2px)); box-shadow: var(--gs-a, var(--gs, none)); filter: brightness(.96); transition-duration: .05s; }
.btn-roll[class*="gen-"]:disabled { transform: none; filter: none; box-shadow: var(--gs, none); }
/* Décalage animable d'un motif répété (hologramme, chevrons, quadrillage) : le motif glisse à l'intérieur du dégradé
   lui-même, donc sans raccord visible au bord, ce que ne permet pas un déplacement de l'image de fond. */
@property --gen-shift { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* Reflet qui traverse le bouton (métaux, glace, gemmes) : posé en ::before, lancé au survol. */
@keyframes gen-sweep { from { left: -45%; } to { left: 125%; } }

/* ------------------------------------------------------------------ assortis aux skins de nombre */

/* Neon — enseigne : tube rose sur fond nuit, qui grésille au survol et faiblit quand on appuie. */
.btn-roll.gen-neon {
  background: #0b0614; border-color: #ff4fd8; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px #ff4fd8, 0 0 22px #ff4fd8;
  --gs: 0 0 14px rgba(255, 79, 216, .55), inset 0 0 12px rgba(255, 79, 216, .28), 0 10px 18px -8px rgba(0, 0, 0, .6);
  --gs-h: 0 0 24px rgba(255, 79, 216, .85), inset 0 0 18px rgba(255, 79, 216, .42), 0 10px 18px -8px rgba(0, 0, 0, .6);
  --gs-a: 0 0 6px rgba(255, 79, 216, .35), inset 0 0 6px rgba(255, 79, 216, .15);
}
.btn-roll.gen-neon:hover { animation: gen-neon-buzz .9s steps(1) 1; }
.btn-roll.gen-neon:active { text-shadow: 0 0 2px #fff, 0 0 6px #ff4fd8; }
@keyframes gen-neon-buzz { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 12% { opacity: 1; } 22% { opacity: .7; } 26% { opacity: 1; } }

/* LCD — écran de calculette : cristaux sombres sur fond vert-gris, coque noire, rétroéclairage au survol. */
.btn-roll.gen-lcd {
  font-family: 'Share Tech Mono', var(--font-mono); font-weight: 400; letter-spacing: .16em;
  background: linear-gradient(180deg, #b9c7a4, #a3b28f); border-color: #4b5544; color: #1c2518;
  text-shadow: .07em .07em 0 rgba(28, 37, 24, .2);
  --gs: inset 0 2px 5px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 4px #26292a, 0 0 0 5px #3f4446, 0 8px 14px rgba(0, 0, 0, .45);
  --gs-h: inset 0 2px 5px rgba(0, 0, 0, .22), inset 0 0 22px rgba(224, 255, 160, .6), 0 0 0 4px #26292a, 0 0 0 5px #3f4446, 0 8px 16px rgba(0, 0, 0, .5);
  --gs-a: inset 0 3px 9px rgba(0, 0, 0, .5), 0 0 0 4px #26292a, 0 0 0 5px #3f4446;
}
.btn-roll.gen-lcd:hover { background: linear-gradient(180deg, #d3e8ab, #bad197); filter: none; }

/* Pixel — borne 8 bits : aplats, coins carrés, ombre dure, déplacements par crans (aucune transition). */
.btn-roll.gen-pixel {
  font-family: 'Press Start 2P', var(--font-mono); font-weight: 400; letter-spacing: .04em;
  font-size: clamp(.74rem, 2.9vw, 1rem); padding: 1.35rem clamp(1.1rem, 5vw, 2.2rem); border-radius: 0;
  background: #1e1b4b; border: 3px solid #38bdf8; color: #fde047; text-shadow: 2px 2px 0 #dc2626;
  --gs: 5px 5px 0 #0369a1; --gs-h: 7px 7px 0 #0369a1; --gs-a: 1px 1px 0 #0369a1;
  transition: none;
}
.btn-roll.small.gen-pixel { font-size: .6rem; padding: .8rem 1.1rem; }
.btn-roll.gen-pixel:hover { transform: translate(-2px, -2px); filter: none; background: #2a2670; }
.btn-roll.gen-pixel:active { transform: translate(4px, 4px); filter: none; }

/* Candy — bonbon gélifié : pilule brillante, tranche framboise, s'écrase mollement puis rebondit. */
.btn-roll.gen-candy {
  border-radius: 999px; border: 3px solid #f472b6; color: #db2777;
  background: linear-gradient(180deg, #fff 0%, #ffe4f1 48%, #fbcfe8 100%);
  text-shadow: 0 1px 0 #fff;
  --gs: 0 .3em 0 #be185d, 0 .55em .8em rgba(236, 72, 153, .35), inset 0 -.25em .4em rgba(236, 72, 153, .28), inset 0 .22em .3em rgba(255, 255, 255, .9);
  --gs-h: 0 .36em 0 #be185d, 0 .7em 1em rgba(236, 72, 153, .45), inset 0 -.25em .4em rgba(236, 72, 153, .28), inset 0 .22em .3em rgba(255, 255, 255, .9);
  --gs-a: 0 .06em 0 #be185d, 0 .15em .3em rgba(236, 72, 153, .35), inset 0 -.2em .4em rgba(236, 72, 153, .32), inset 0 .2em .3em rgba(255, 255, 255, .8);
  transition: transform .24s var(--ease-snap), box-shadow .16s ease;
}
.btn-roll.gen-candy::before { top: 9%; left: 6%; right: 6%; height: 30%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.btn-roll.gen-candy:hover { transform: translateY(-2px) scale(1.02, .98); filter: none; }
.btn-roll.gen-candy:active { transform: translateY(.24em) scale(1.04, .92); filter: none; }

/* Jersey — maillot : maille rouge, flancs marine, surpiqûre blanche, lettres brodées. */
.btn-roll.gen-jersey {
  font-family: 'Graduate', var(--font-sans); font-weight: 400; letter-spacing: .12em;
  border-radius: .7rem; border: 2px solid #111a3d; color: #fff;
  background:
    linear-gradient(90deg, #1e2a5a 0 6%, transparent 6% 94%, #1e2a5a 94%),
    radial-gradient(circle, rgba(0, 0, 0, .2) 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(180deg, #dc2646, #b3172f);
  text-shadow: 0 2px 0 #111a3d, 2px 2px 0 #111a3d, -1px 0 0 #111a3d, 1px 0 0 #111a3d, 0 -1px 0 #111a3d;
  --gs: 0 .26em 0 #6d0f1f, 0 .5em .8em rgba(0, 0, 0, .4);
  --gs-h: 0 .32em 0 #6d0f1f, 0 .65em 1em rgba(0, 0, 0, .45);
  --gs-a: 0 .05em 0 #6d0f1f, 0 .12em .3em rgba(0, 0, 0, .4);
  --press: .22em;
}
.btn-roll.gen-jersey::before { inset: 5px; border: 2px dashed rgba(255, 255, 255, .6); border-radius: .45rem; }

/* Slots — machine à sous : caisse rouge, jonc doré, rampes d'ampoules qui courent au survol. */
.btn-roll.gen-slots {
  border-radius: .8rem; border: 3px solid #fbbf24; color: #fff7ed;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 60%, #7f1d1d 100%);
  text-shadow: 0 2px 0 #7c2d12, 0 0 10px rgba(251, 191, 36, .55);
  --gs: 0 .3em 0 #92400e, 0 .55em .9em rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .25);
  --gs-h: 0 .34em 0 #92400e, 0 .6em 1.1em rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .25), 0 0 20px rgba(251, 191, 36, .5);
  --gs-a: 0 .06em 0 #92400e, inset 0 3px 6px rgba(0, 0, 0, .35);
  --press: .24em;
}
.btn-roll.gen-slots::before {
  inset: 4px 10px; opacity: .6;
  background:
    radial-gradient(circle, #fde68a 0 2px, rgba(253, 230, 138, 0) 3px) 0 0 / 14px 6px repeat-x,
    radial-gradient(circle, #fde68a 0 2px, rgba(253, 230, 138, 0) 3px) 7px 100% / 14px 6px repeat-x;
}
.btn-roll.gen-slots:hover::before { opacity: 1; animation: gen-bulbs .5s steps(2) infinite; }
.btn-roll.gen-slots:active::before { opacity: 1; }
@keyframes gen-bulbs { from { background-position: 0 0, 7px 100%; } to { background-position: 14px 0, 21px 100%; } }

/* Scoreboard — panneau de stade : LED ambre sur trame noire, cadre acier. */
.btn-roll.gen-scoreboard {
  font-family: 'Share Tech Mono', var(--font-mono); font-weight: 400; letter-spacing: .2em;
  border-radius: .3rem; border: 2px solid #3f3f46; color: #ffc233;
  background: radial-gradient(circle, rgba(255, 176, 32, .14) 1px, transparent 1.6px) 0 0 / 5px 5px, #0a0a0a;
  text-shadow: 0 0 2px #ffc233, 0 0 8px rgba(255, 176, 32, .9), 0 0 18px rgba(255, 140, 0, .55);
  --gs: 0 0 0 3px #18181b, 0 8px 16px rgba(0, 0, 0, .5), inset 0 0 14px rgba(0, 0, 0, .8);
  --gs-h: 0 0 0 3px #18181b, 0 8px 18px rgba(0, 0, 0, .55), inset 0 0 14px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 176, 32, .32);
  --gs-a: 0 0 0 3px #18181b, inset 0 0 18px rgba(0, 0, 0, .9);
}
.btn-roll.gen-scoreboard:hover { color: #ffe08a; filter: none; }
.btn-roll.gen-scoreboard:active { color: #b97a10; text-shadow: none; }

/* Dice — dé d'ivoire : face blanche, points dans les coins, tranche grise ; bascule d'un cran au survol. */
.btn-roll.gen-dice {
  border-radius: .7rem; border: 1px solid #d6d3d1; color: #1c1917;
  background: linear-gradient(160deg, #fff 0%, #f5f5f4 55%, #e7e5e4 100%);
  text-shadow: 0 1px 0 #fff;
  --gs: 0 .3em 0 #a8a29e, 0 .55em .9em rgba(0, 0, 0, .45), inset 0 -3px 6px rgba(0, 0, 0, .08), inset 0 2px 0 #fff;
  --gs-h: 0 .36em 0 #a8a29e, 0 .7em 1.1em rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .08), inset 0 2px 0 #fff;
  --gs-a: 0 .06em 0 #a8a29e, 0 .12em .3em rgba(0, 0, 0, .4), inset 0 2px 5px rgba(0, 0, 0, .12);
  --press: .24em;
}
/* Deux petits dés rouges posés de chaque côté (un 5 et un 3), légèrement de travers. */
.btn-roll.gen-dice::before, .btn-roll.gen-dice::after {
  top: 50%; width: .9em; height: .9em; margin-top: -.45em; border-radius: .2em;
  box-shadow: 0 .08em 0 #7f1d1d, 0 .14em .2em rgba(0, 0, 0, .3), inset 0 .06em 0 rgba(255, 255, 255, .45);
}
.btn-roll.gen-dice::before {
  left: .5em; transform: rotate(-9deg);
  background:
    radial-gradient(circle at 26% 26%, #fff 0 .08em, transparent .1em), radial-gradient(circle at 74% 26%, #fff 0 .08em, transparent .1em),
    radial-gradient(circle at 50% 50%, #fff 0 .08em, transparent .1em),
    radial-gradient(circle at 26% 74%, #fff 0 .08em, transparent .1em), radial-gradient(circle at 74% 74%, #fff 0 .08em, transparent .1em),
    linear-gradient(145deg, #ef4444, #b91c1c);
}
.btn-roll.gen-dice::after {
  right: .5em; transform: rotate(11deg);
  background:
    radial-gradient(circle at 26% 26%, #fff 0 .08em, transparent .1em), radial-gradient(circle at 50% 50%, #fff 0 .08em, transparent .1em),
    radial-gradient(circle at 74% 74%, #fff 0 .08em, transparent .1em),
    linear-gradient(145deg, #ef4444, #b91c1c);
}
.btn-roll.small.gen-dice::before, .btn-roll.small.gen-dice::after { width: .8em; height: .8em; margin-top: -.4em; }
.btn-roll.small.gen-dice::before { left: .4em; }
.btn-roll.small.gen-dice::after { right: .4em; }
.btn-roll.gen-dice:hover::before { transform: rotate(-24deg); }
.btn-roll.gen-dice:hover::after { transform: rotate(26deg); }
.btn-roll.gen-dice:hover { transform: translateY(-2px) rotate(-1.2deg); filter: none; }
.btn-roll.gen-dice:active { transform: translateY(.24em); }

/* Ocean — grand bleu : lumière en surface, abysses en bas, bulles qui montent sans fin. */
.btn-roll.gen-ocean {
  overflow: hidden; border-radius: .7rem; border: 2px solid #7dd3fc; color: #f0f9ff;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 38%, #075985 72%, #082f49 100%);
  text-shadow: 0 2px 0 #075985, 0 0 12px rgba(186, 230, 253, .6);
  --gs: 0 .26em 0 #0c4a6e, 0 .5em .9em rgba(2, 132, 199, .35), inset 0 2px 0 rgba(255, 255, 255, .45);
  --gs-h: 0 .3em 0 #0c4a6e, 0 .6em 1.1em rgba(2, 132, 199, .5), inset 0 2px 0 rgba(255, 255, 255, .45);
  --gs-a: 0 .05em 0 #0c4a6e, inset 0 3px 8px rgba(8, 47, 73, .6);
  --press: .21em;
}
.btn-roll.gen-ocean::before {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 2px, transparent 3px) 6px 0 / 46px 64px,
    radial-gradient(circle, rgba(255, 255, 255, .32) 0 3px, transparent 4px) 30px 30px / 74px 92px,
    radial-gradient(circle, rgba(255, 255, 255, .4) 0 1.5px, transparent 2.5px) 18px 12px / 38px 50px;
  animation: gen-bubbles 7s linear infinite;
}
.btn-roll.gen-ocean:hover::before { animation-duration: 3s; }
@keyframes gen-bubbles { to { background-position: 6px -64px, 30px -62px, 18px -38px; } }

/* Chrome — métal poli : horizon chromé, lettres gravées, reflet qui file au survol. */
.btn-roll.gen-chrome {
  overflow: hidden; border-radius: .6rem; border: 2px solid #f1f5f9; color: #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 30%, #7c8ba1 50%, #e2e8f0 53%, #a3b0c2 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(15, 23, 42, .25);
  --gs: 0 .24em 0 #475569, 0 .5em .9em rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
  --gs-h: 0 .28em 0 #475569, 0 .6em 1.1em rgba(0, 0, 0, .5), inset 0 1px 0 #fff;
  --gs-a: 0 .04em 0 #475569, inset 0 2px 6px rgba(15, 23, 42, .4);
  --press: .2em;
}
.btn-roll.gen-chrome::before, .btn-roll.gen-gold::before, .btn-roll.gen-ice::before, .btn-roll.gen-diamond::before {
  top: 0; bottom: 0; left: -45%; width: 30%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
}
.btn-roll.gen-chrome:hover::before, .btn-roll.gen-gold:hover::before, .btn-roll.gen-ice:hover::before, .btn-roll.gen-diamond:hover::before { animation: gen-sweep .75s var(--ease-out) 1; }

/* Blocks — bloc d'herbe en pixels : dessus vert qui déborde, terre mouchetée, se fissure quand on le mine. */
.btn-roll.gen-blocks {
  font-family: 'Press Start 2P', var(--font-mono); font-weight: 400; letter-spacing: .04em;
  font-size: clamp(.74rem, 2.9vw, 1rem); padding: 1.35rem clamp(1.1rem, 5vw, 2.2rem); border-radius: 0;
  border: 3px solid #2b1c0c; color: #fff; text-shadow: 2px 2px 0 #2b1c0c;
  background:
    linear-gradient(90deg, #5fa83a 50%, transparent 50%) 0 31% / 16px 4px repeat-x,
    linear-gradient(90deg, #5fa83a 25%, transparent 25%) 4px 38% / 32px 4px repeat-x,
    linear-gradient(180deg, #86d253 0 9%, #6fbe45 9% 28%, transparent 28%),
    conic-gradient(at 4px 4px, transparent 75%, #6b4420 0) 6px 2px / 20px 12px,
    conic-gradient(at 4px 4px, transparent 75%, #a87643 0) 14px 8px / 28px 16px,
    conic-gradient(at 8px 4px, transparent 75%, #74481f 0) 2px 10px / 36px 20px,
    #8b5a2b;
  --gs: 0 .42em 0 #4a3015, 0 .42em 0 3px #2b1c0c, 0 .8em 1em rgba(0, 0, 0, .45);
  --gs-h: 0 .5em 0 #4a3015, 0 .5em 0 3px #2b1c0c, 0 1em 1.2em rgba(0, 0, 0, .5);
  --gs-a: 0 .08em 0 #4a3015, 0 .08em 0 3px #2b1c0c;
  --press: .34em;
  transition: none;
}
.btn-roll.small.gen-blocks { font-size: .6rem; padding: .8rem 1.1rem; }
.btn-roll.gen-blocks:hover { transform: translateY(-3px); filter: none; }
.btn-roll.gen-blocks:active { transform: translateY(.34em); filter: none; }
.btn-roll.gen-blocks::after {
  inset: 0; opacity: 0;
  background:
    conic-gradient(at 4px 4px, transparent 75%, #1f1408 0) 3px 5px / 24px 16px,
    conic-gradient(at 4px 4px, transparent 75%, #1f1408 0) 15px 13px / 32px 20px,
    conic-gradient(at 8px 4px, transparent 75%, #1f1408 0) 9px 1px / 44px 28px;
}
.btn-roll.gen-blocks:active::after { opacity: .7; }

/* Ice — bloc gelé : bleu nuit translucide, liseré de givre, biseaux clairs, reflet au survol. */
.btn-roll.gen-ice {
  overflow: hidden; border-radius: .6rem; border: 2px solid #d9f3ff; color: #e8f9ff;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .2) 18% 21%, transparent 21% 44%, rgba(255, 255, 255, .1) 44% 49%, transparent 49% 78%, rgba(255, 255, 255, .16) 78% 80%, transparent 80%),
    linear-gradient(160deg, #2380bd 0%, #0e4a72 45%, #0a2f4d 100%);
  text-shadow: 0 2px 0 #0a2f4d, 0 0 12px rgba(186, 230, 253, .75);
  --gs: 0 .26em 0 #0a3a5c, 0 .5em .9em rgba(14, 116, 144, .35), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 16px rgba(186, 230, 253, .35);
  --gs-h: 0 .3em 0 #0a3a5c, 0 .6em 1.1em rgba(14, 116, 144, .5), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 22px rgba(186, 230, 253, .5);
  --gs-a: 0 .05em 0 #0a3a5c, inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 3px 8px rgba(10, 47, 77, .7);
  --press: .21em;
}
.btn-roll.gen-ice::before { background: linear-gradient(100deg, transparent, rgba(224, 247, 255, .6), transparent); }

/* Gold — lingot : or massif, tranche sombre, lettres frappées dans le métal, éclat au survol. */
.btn-roll.gen-gold {
  overflow: hidden; border-radius: .5rem; border: 2px solid #fde68a; color: #5b3a00;
  background: linear-gradient(180deg, #fff3b0 0%, #fbbf24 22%, #f59e0b 58%, #c2780a 100%);
  text-shadow: 0 1px 0 rgba(255, 243, 176, .9), 0 -1px 0 rgba(91, 58, 0, .35);
  --gs: 0 .3em 0 #7a5a00, 0 .55em 1em rgba(212, 160, 23, .35), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(122, 90, 0, .35);
  --gs-h: 0 .34em 0 #7a5a00, 0 .65em 1.2em rgba(212, 160, 23, .5), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(122, 90, 0, .35);
  --gs-a: 0 .06em 0 #7a5a00, inset 0 3px 7px rgba(122, 90, 0, .55);
  --press: .24em;
}

/* Circuit — carte électronique : vernis vert, trame fine, pistes cuivrées en équerre qui s'allument au survol. */
.btn-roll.gen-circuit {
  font-family: 'Share Tech Mono', var(--font-mono); font-weight: 400; letter-spacing: .16em;
  border-radius: .4rem; border: 2px solid #10b981; color: #d1fae5;
  background:
    repeating-linear-gradient(0deg, rgba(16, 185, 129, .1) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(16, 185, 129, .1) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, #06513c, #053b2c 60%, #032a20);
  text-shadow: 0 0 8px rgba(52, 211, 153, .8);
  --gs: 0 .2em 0 #022c22, 0 .45em .9em rgba(0, 0, 0, .45), inset 0 0 14px rgba(16, 185, 129, .18);
  --gs-h: 0 .24em 0 #022c22, 0 .55em 1.1em rgba(0, 0, 0, .5), inset 0 0 18px rgba(16, 185, 129, .3), 0 0 16px rgba(16, 185, 129, .35);
  --gs-a: 0 .04em 0 #022c22, inset 0 3px 8px rgba(0, 0, 0, .5);
  --press: .16em;
}
.btn-roll.gen-circuit::before, .btn-roll.gen-circuit::after { width: 22%; height: 38%; border: 0 solid rgba(217, 119, 6, .8); transition: border-color .2s ease, filter .2s ease; }
.btn-roll.gen-circuit::before { top: 7px; left: 9px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 5px; }
.btn-roll.gen-circuit::after { bottom: 7px; right: 9px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 5px; }
.btn-roll.gen-circuit:hover::before, .btn-roll.gen-circuit:hover::after { border-color: #fcd34d; filter: drop-shadow(0 0 4px rgba(252, 211, 77, .9)); }

/* Matrix — console : vert phosphore sur noir, pluie de code derrière le texte, plus dense au survol. */
.btn-roll.gen-matrix {
  font-family: 'Share Tech Mono', var(--font-mono); font-weight: 400; letter-spacing: .24em;
  overflow: hidden; border-radius: .25rem; border: 1px solid #00ff41; color: #00ff41; background: #020a04;
  text-shadow: 0 0 6px rgba(0, 255, 65, .9), 0 0 16px rgba(0, 255, 65, .45);
  --gs: 0 0 12px rgba(0, 255, 65, .35), inset 0 0 18px rgba(0, 255, 65, .12);
  --gs-h: 0 0 20px rgba(0, 255, 65, .55), inset 0 0 22px rgba(0, 255, 65, .2);
  --gs-a: 0 0 6px rgba(0, 255, 65, .3), inset 0 0 30px rgba(0, 255, 65, .4);
}
.btn-roll.gen-matrix::before {
  inset: 0; opacity: .3;
  background:
    linear-gradient(180deg, transparent 0 35%, rgba(0, 255, 65, .4) 88%, rgba(200, 255, 215, .85) 100%) 5px 0 / 23px 46px,
    linear-gradient(180deg, transparent 0 50%, rgba(0, 255, 65, .3) 90%, rgba(200, 255, 215, .7) 100%) 14px 20px / 31px 62px;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 11.5px);
  mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 11.5px);
  animation: gen-rain 1.6s linear infinite;
}
.btn-roll.gen-matrix::after { inset: 0; background: radial-gradient(ellipse 62% 78% at 50% 50%, #020a04 30%, rgba(2, 10, 4, 0) 78%); }
.btn-roll.gen-matrix:hover::before { opacity: .75; animation-duration: .8s; }
@keyframes gen-rain { to { background-position: 5px 46px, 14px 82px; } }

/* Nixie — tube à décharge : verre fumé, grille fine, filament orange qui chauffe au survol. */
.btn-roll.gen-nixie {
  border-radius: .9rem; border: 2px solid #6b5a48; color: #ff9a3c;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 50%, #2e1c0e 0%, #120b06 75%);
  text-shadow: 0 0 5px #ff7a00, 0 0 14px rgba(255, 90, 0, .7), 0 0 28px rgba(255, 90, 0, .35);
  --gs: inset 0 3px 8px rgba(255, 255, 255, .1), inset 0 -8px 16px rgba(0, 0, 0, .6), 0 0 0 3px #1c1917, 0 8px 16px rgba(0, 0, 0, .5);
  --gs-h: inset 0 3px 8px rgba(255, 255, 255, .1), inset 0 -8px 16px rgba(0, 0, 0, .6), 0 0 0 3px #1c1917, 0 8px 16px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 122, 0, .32);
  --gs-a: inset 0 4px 12px rgba(0, 0, 0, .7), 0 0 0 3px #1c1917;
}
.btn-roll.gen-nixie:hover { color: #ffbf7a; filter: none; }
.btn-roll.gen-nixie:active { color: #a85a1c; text-shadow: 0 0 3px #7a3a00; }

/* Fire — braise : cœur incandescent en bas, flammes qui lèchent le bord inférieur. */
.btn-roll.gen-fire {
  overflow: hidden; border-radius: .6rem; border: 2px solid #f97316; color: #fff1d6;
  background: radial-gradient(ellipse 90% 120% at 50% 110%, #ea580c 0%, #9a3412 38%, #3b0d05 72%, #1c0a05 100%);
  text-shadow: 0 2px 0 #7c2d12, 0 0 12px rgba(251, 146, 60, .8);
  --gs: 0 0 18px rgba(249, 115, 22, .55), 0 .5em 1em rgba(124, 45, 18, .5), inset 0 -6px 14px rgba(251, 146, 60, .35);
  --gs-h: 0 0 28px rgba(249, 115, 22, .8), 0 .5em 1.1em rgba(124, 45, 18, .55), inset 0 -8px 18px rgba(251, 146, 60, .5);
  --gs-a: 0 0 10px rgba(249, 115, 22, .5), inset 0 -4px 10px rgba(251, 146, 60, .3), inset 0 3px 8px rgba(0, 0, 0, .5);
}
.btn-roll.gen-fire::before {
  left: 0; right: 0; bottom: -12%; height: 72%; transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse 15px 100% at 50% 100%, rgba(253, 186, 116, .65), transparent 72%) 0 100% / 34px 100% repeat-x,
    radial-gradient(ellipse 12px 70% at 50% 100%, rgba(251, 146, 60, .6), transparent 72%) 17px 100% / 46px 100% repeat-x,
    radial-gradient(ellipse 9px 50% at 50% 100%, rgba(254, 240, 138, .5), transparent 72%) 8px 100% / 27px 100% repeat-x;
  filter: blur(1.6px);
  animation: gen-flames 1.1s ease-in-out infinite alternate;
}
.btn-roll.gen-fire:hover::before { animation-duration: .55s; }
@keyframes gen-flames { from { transform: scaleY(.78) skewX(-4deg); opacity: .7; } to { transform: scaleY(1.12) skewX(4deg); opacity: 1; } }

/* Vaporwave — coucher de soleil synthwave : ciel en dégradé, soleil rayé posé sur l'horizon derrière les lettres,
   sol quadrillé en perspective qui défile au survol, italique blanche à franges rose et cyan. */
.btn-roll.gen-vaporwave {
  overflow: hidden; font-style: italic; font-weight: 900; border-radius: .5rem; border: 2px solid #f0abfc; color: #fff;
  background:
    linear-gradient(180deg, transparent 0 62%, #fff 62% 63.2%, rgba(13, 2, 33, .96) 63.2% 100%),
    linear-gradient(180deg, transparent 0 36%, #3b0f66 36% 39%, transparent 39% 45%, #3b0f66 45% 49%, transparent 49% 54%, #3b0f66 54% 59%, transparent 59%) 50% 0 / 3.2em 100% no-repeat,
    radial-gradient(circle 1.5em at 50% 63%, #fff59d 0, #fde047 26%, #fb923c 62%, #f43f5e 99%, transparent 100%),
    linear-gradient(180deg, #170a3a 0%, #4c1d95 40%, #c026d3 74%, #fb7185 100%);
  text-shadow: .05em .05em 0 #a21caf, -.03em -.03em 0 #22d3ee, 0 0 .5em rgba(23, 10, 58, .9);
  --gs: 0 0 0 1px #2e1065, 0 .24em 0 #3b0764, 0 .5em 1em rgba(192, 38, 211, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
  --gs-h: 0 0 0 1px #2e1065, 0 .28em 0 #3b0764, 0 .6em 1.2em rgba(192, 38, 211, .55), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 18px rgba(34, 211, 238, .35);
  --gs-a: 0 0 0 1px #2e1065, 0 .04em 0 #3b0764, inset 0 3px 8px rgba(27, 11, 58, .6);
  --press: .2em;
}
.btn-roll.gen-vaporwave::before {
  left: -30%; right: -30%; bottom: 0; height: 37%; transform: perspective(70px) rotateX(55deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(103, 232, 249, .7) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(103, 232, 249, .7) var(--gen-shift), rgba(103, 232, 249, .7) calc(var(--gen-shift) + 1px), transparent calc(var(--gen-shift) + 1px), transparent calc(var(--gen-shift) + 8px));
}
.btn-roll.gen-vaporwave:hover::before { animation: gen-grid .5s linear infinite; }
.btn-roll.gen-vaporwave:active { text-shadow: .09em .03em 0 #a21caf, -.09em -.03em 0 #22d3ee; }
@keyframes gen-grid { to { --gen-shift: -8px; } }

/* Galaxy — ciel profond : nébuleuses, trois plans d'étoiles, une étoile filante au survol. */
.btn-roll.gen-galaxy {
  overflow: hidden; border-radius: .7rem; border: 2px solid #8b5cf6; color: #fff;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px) 8px 15px / 53px 37px,
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px) 30px 31px / 71px 43px,
    radial-gradient(circle, rgba(196, 181, 253, .9) 0 1.2px, transparent 1.8px) 46px 23px / 97px 51px,
    radial-gradient(ellipse 60% 90% at 20% 30%, rgba(168, 85, 247, .55), transparent 65%),
    radial-gradient(ellipse 50% 80% at 85% 80%, rgba(59, 130, 246, .45), transparent 62%),
    linear-gradient(135deg, #0b0424, #1e1065 55%, #0b0424);
  text-shadow: 0 0 8px rgba(196, 181, 253, .9), 0 0 20px rgba(139, 92, 246, .7);
  --gs: 0 0 16px rgba(139, 92, 246, .5), 0 .5em 1em rgba(0, 0, 0, .5), inset 0 0 18px rgba(139, 92, 246, .25);
  --gs-h: 0 0 26px rgba(139, 92, 246, .75), 0 .5em 1.1em rgba(0, 0, 0, .55), inset 0 0 24px rgba(139, 92, 246, .4);
  --gs-a: 0 0 8px rgba(139, 92, 246, .4), inset 0 0 30px rgba(11, 4, 36, .8);
}
.btn-roll.gen-galaxy::after { top: 18%; left: -20%; width: 18%; height: 2px; border-radius: 2px; opacity: 0; transform: rotate(14deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95)); }
.btn-roll.gen-galaxy:hover::after { animation: gen-comet .9s var(--ease-out) 1; }
@keyframes gen-comet { 0% { left: -20%; top: 14%; opacity: 0; } 15% { opacity: 1; } 100% { left: 105%; top: 62%; opacity: 0; } }

/* Diamond — pierre taillée : quatre biseaux de teintes différentes autour d'une table claire, irisation des lettres,
   éclat au survol. Les bordures en onglet donnent les facettes. */
.btn-roll.gen-diamond {
  overflow: hidden; border-radius: .3rem; color: #172033;
  border: .3em solid; border-color: #ffffff #a9bfe6 #7f95bd #dbe8fb;
  background:
    linear-gradient(118deg, transparent 0 30%, rgba(255, 255, 255, .85) 30% 34%, transparent 34% 62%, rgba(255, 255, 255, .5) 62% 64%, transparent 64%) padding-box,
    linear-gradient(135deg, #e6f0ff 0%, #c9d8f7 38%, #f4f8ff 54%, #bcd0f3 74%, #e3ebfb 100%) padding-box;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 1px 0 0 rgba(244, 114, 182, .45), -1px 0 0 rgba(34, 211, 238, .45);
  --gs: 0 0 0 1px #f8fbff, 0 .22em 0 1px #5d7096, 0 .5em 1em rgba(148, 163, 184, .45), 0 0 20px rgba(191, 219, 254, .5);
  --gs-h: 0 0 0 1px #f8fbff, 0 .26em 0 1px #5d7096, 0 .6em 1.2em rgba(148, 163, 184, .55), 0 0 30px rgba(191, 219, 254, .8);
  --gs-a: 0 0 0 1px #f8fbff, 0 .04em 0 1px #5d7096, 0 0 12px rgba(191, 219, 254, .5);
  --press: .18em;
}
.btn-roll.small.gen-diamond { border-width: .24em; }

/* Rainbow — toutes les couleurs : liseré qui défile, halo des lettres qui change de teinte. */
.btn-roll.gen-rainbow {
  border: 3px solid transparent; color: #fff;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) padding-box,
    linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ec4899, #ef4444) 0 0 / 200% 100% border-box;
  animation: gen-rainbow-run 4s linear infinite, gen-rainbow-ink 8s linear infinite;
  --gs: 0 0 18px rgba(168, 85, 247, .35), 0 0 34px rgba(59, 130, 246, .2);
  --gs-h: 0 0 24px rgba(236, 72, 153, .5), 0 0 44px rgba(59, 130, 246, .35);
  --gs-a: 0 0 8px rgba(168, 85, 247, .3);
}
.btn-roll.gen-rainbow:hover { animation-duration: 1.6s, 3s; }
@keyframes gen-rainbow-run { to { background-position: 0 0, 200% 0; } }
@keyframes gen-rainbow-ink {
  0%, 100% { text-shadow: 0 0 10px #ef4444, 0 0 22px #f59e0b; }
  25% { text-shadow: 0 0 10px #eab308, 0 0 22px #22c55e; }
  50% { text-shadow: 0 0 10px #22d3ee, 0 0 22px #3b82f6; }
  75% { text-shadow: 0 0 10px #a855f7, 0 0 22px #ec4899; }
}

/* Owner — rubis du créateur : nuit grenat, liseré rouge, un reflet discret toutes les 6 s. */
.btn-roll.gen-owner {
  overflow: hidden; border-radius: .5rem; border: 2px solid #e11d48; color: #ffe4ea;
  background:
    radial-gradient(ellipse 60% 80% at 20% 15%, rgba(255, 77, 109, .28), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 90%, rgba(159, 18, 57, .5), transparent 62%),
    linear-gradient(135deg, #17020a, #2b0410 50%, #0e0105);
  text-shadow: 0 0 8px rgba(251, 113, 133, .9), 0 0 20px rgba(225, 29, 72, .6);
  --gs: 0 0 16px rgba(225, 29, 72, .5), inset 0 0 14px rgba(225, 29, 72, .25), 0 .5em 1em rgba(0, 0, 0, .5);
  --gs-h: 0 0 26px rgba(225, 29, 72, .75), inset 0 0 20px rgba(225, 29, 72, .38), 0 .5em 1.1em rgba(0, 0, 0, .55);
  --gs-a: 0 0 8px rgba(225, 29, 72, .4), inset 0 3px 10px rgba(0, 0, 0, .6);
}
.btn-roll.gen-owner::before { top: 0; bottom: 0; left: -45%; width: 24%; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 228, 234, .35), transparent); animation: gen-owner-sheen 6s ease-in-out infinite; }
@keyframes gen-owner-sheen { 0%, 78% { left: -45%; } 100% { left: 125%; } }

/* Sakura — laque et feuille d'or : lune pâle, pétales qui glissent au survol, lettres crème. */
.btn-roll.gen-sakura {
  overflow: hidden; border-radius: .45rem; border: 2px solid #d4a84a; color: #fff4ec; letter-spacing: .16em;
  background:
    radial-gradient(circle at 90% 30%, #fff6e5 0 .34em, rgba(255, 246, 229, .25) .36em .5em, transparent .8em),
    radial-gradient(ellipse 60% 100% at 8% 120%, rgba(244, 114, 182, .3), transparent 62%),
    linear-gradient(160deg, #24122a 0%, #150b18 55%, #0b0610 100%);
  text-shadow: 0 .05em 0 #7a2a52, 0 0 .5em rgba(244, 114, 182, .75);
  --gs: 0 0 0 1px #2a1420, 0 .24em 0 #5b3a12, 0 .5em 1em rgba(0, 0, 0, .5), 0 0 18px rgba(244, 114, 182, .28);
  --gs-h: 0 0 0 1px #2a1420, 0 .28em 0 #5b3a12, 0 .6em 1.2em rgba(0, 0, 0, .55), 0 0 28px rgba(244, 114, 182, .5);
  --gs-a: 0 0 0 1px #2a1420, 0 .04em 0 #5b3a12, inset 0 3px 8px rgba(0, 0, 0, .6);
  --press: .2em; --edge: .25em;
}
.btn-roll.gen-sakura::before {
  inset: 0;
  background:
    radial-gradient(ellipse 4px 2.5px at 50% 50%, #f9a8d4, transparent 72%) 10px 0 / 61px 43px,
    radial-gradient(ellipse 3px 2px at 50% 50%, #fde0eb, transparent 72%) 38px 18px / 83px 37px,
    radial-gradient(ellipse 4px 2.5px at 50% 50%, #f472b6, transparent 72%) 22px 30px / 97px 51px;
  opacity: .55; animation: gen-petals 9s linear infinite;
}
.btn-roll.gen-sakura:hover::before { opacity: .95; animation-duration: 3.5s; }
@keyframes gen-petals { to { background-position: 71px 43px, 121px 55px, 119px 81px; } }

/* Storm — verre d'orage : nuages sombres, pluie en biais, éclair qui traverse le bouton au survol. */
.btn-roll.gen-storm {
  overflow: hidden; border-radius: .45rem; border: 2px solid #7dd3fc; color: #f0fbff;
  background:
    radial-gradient(ellipse 50% 70% at 20% 0%, rgba(148, 163, 184, .4), transparent 70%),
    radial-gradient(ellipse 45% 60% at 76% -6%, rgba(100, 116, 139, .42), transparent 70%),
    linear-gradient(180deg, #17202f 0%, #0b1220 60%, #070b14 100%);
  text-shadow: 0 0 .22em #7dd3fc, 0 0 .6em rgba(56, 189, 248, .85), 0 .05em 0 #0c4a6e;
  --gs: 0 0 0 1px #0b1220, 0 .24em 0 #0f2a44, 0 .5em 1em rgba(0, 0, 0, .5), 0 0 20px rgba(56, 189, 248, .4);
  --gs-h: 0 0 0 1px #0b1220, 0 .28em 0 #0f2a44, 0 .6em 1.2em rgba(0, 0, 0, .55), 0 0 32px rgba(56, 189, 248, .7);
  --gs-a: 0 0 0 1px #0b1220, 0 .04em 0 #0f2a44, inset 0 0 26px rgba(186, 230, 253, .55);
  --press: .2em; --edge: .25em;
}
.btn-roll.gen-storm::before {
  inset: -30% -10%; opacity: .5;
  background: repeating-linear-gradient(104deg, transparent 0 9px, rgba(186, 230, 253, .3) 9px 10px, transparent 10px 23px);
  animation: storm-rain .5s linear infinite;
}
.btn-roll.gen-storm::after { top: -10%; bottom: -10%; left: 18%; width: 64%; opacity: 0; background: linear-gradient(100deg, transparent 46%, #fff 49% 51%, transparent 54%), linear-gradient(80deg, transparent 58%, rgba(186, 230, 253, .9) 60% 61%, transparent 63%); }
.btn-roll.gen-storm:hover::after { animation: gen-flash .7s steps(1) 1; }
@keyframes gen-flash { 0% { opacity: 1; } 8% { opacity: 0; } 14% { opacity: .9; } 22%, 100% { opacity: 0; } }

/* Dragon — écailles d'obsidienne et or en fusion : la braise monte du bas, les lettres sont forgées dans l'or. */
.btn-roll.gen-dragon {
  overflow: hidden; border-radius: .4rem; border: 2px solid #d99a2b; color: #ffd76a;
  background:
    radial-gradient(circle at 50% 0, transparent .2em, rgba(0, 0, 0, .5) .21em .24em, transparent .25em) 0 0 / .5em .3em,
    radial-gradient(circle at 50% 0, transparent .2em, rgba(0, 0, 0, .5) .21em .24em, transparent .25em) .25em .15em / .5em .3em,
    radial-gradient(ellipse 90% 90% at 50% 130%, rgba(251, 146, 60, .6), rgba(180, 30, 14, .28) 45%, transparent 72%),
    linear-gradient(180deg, #2a0d0b 0%, #1a0706 55%, #0d0403 100%);
  text-shadow: 0 .05em 0 #5c1a05, 0 .09em 0 #2a0d03, 0 0 .4em rgba(251, 146, 60, .8);
  --gs: 0 0 0 1px #1a0706, 0 0 0 3px #7a4a10, 0 .26em 0 3px #4a2a06, 0 .55em 1em rgba(0, 0, 0, .55), 0 0 22px rgba(234, 88, 12, .45);
  --gs-h: 0 0 0 1px #1a0706, 0 0 0 3px #7a4a10, 0 .3em 0 3px #4a2a06, 0 .65em 1.2em rgba(0, 0, 0, .6), 0 0 34px rgba(234, 88, 12, .75);
  --gs-a: 0 0 0 1px #1a0706, 0 0 0 3px #7a4a10, 0 .05em 0 3px #4a2a06, inset 0 -10px 22px rgba(251, 146, 60, .55);
  --press: .21em; --edge: .32em;
}
.btn-roll.gen-dragon::before {
  left: 0; right: 0; bottom: -14%; height: 74%; transform-origin: 50% 100%; filter: blur(1.6px);
  background:
    radial-gradient(ellipse 15px 100% at 50% 100%, rgba(253, 186, 116, .6), transparent 72%) 0 100% / 34px 100% repeat-x,
    radial-gradient(ellipse 11px 66% at 50% 100%, rgba(248, 113, 22, .55), transparent 72%) 17px 100% / 46px 100% repeat-x;
  animation: gen-flames 1.3s ease-in-out infinite alternate;
}
.btn-roll.gen-dragon:hover::before { animation-duration: .5s; }

/* Singularity — verre noir : l'anneau d'accrétion derrière les lettres, étoiles, frange bleue et orange. */
.btn-roll.gen-blackhole {
  overflow: hidden; border-radius: .6rem; border: 2px solid #fdba74; color: #fff;
  background:
    radial-gradient(ellipse 74% 260% at 50% 50%, transparent 59%, rgba(255, 244, 214, .85) 61.5%, rgba(251, 146, 60, .7) 64.5%, rgba(194, 65, 12, .25) 70%, transparent 78%),
    radial-gradient(ellipse 58% 200% at 50% 50%, #000 66%, transparent 80%),
    radial-gradient(1px 1px at 8% 26%, #fff, transparent), radial-gradient(1px 1px at 92% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 14% 80%, #bfdbfe, transparent), radial-gradient(1px 1px at 86% 18%, #fde68a, transparent),
    #020203;
  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);
  --gs: 0 0 0 3px rgba(251, 146, 60, .22), 0 0 24px rgba(251, 146, 60, .5), 0 0 54px rgba(124, 58, 237, .25), 0 .5em 1em rgba(0, 0, 0, .6);
  --gs-h: 0 0 0 3px rgba(251, 146, 60, .35), 0 0 36px rgba(251, 146, 60, .8), 0 0 70px rgba(124, 58, 237, .4), 0 .5em 1.1em rgba(0, 0, 0, .65);
  --gs-a: 0 0 0 3px rgba(251, 146, 60, .22), 0 0 12px rgba(251, 146, 60, .45), inset 0 0 30px #000;
  transition: transform .2s var(--ease-snap), box-shadow .16s ease, letter-spacing .2s var(--ease-out);
}
.btn-roll.gen-blackhole:hover { letter-spacing: .14em; }
.btn-roll.gen-blackhole:active { transform: scale(.94, .9); letter-spacing: .04em; }

/* Milky Way (idée de shadow2 Jr, 2026-10-26) — la nuit profonde et la bande laiteuse en biais ; au survol, la bande
   glisse comme le ciel qui tourne. */
.btn-roll.gen-milkyway {
  overflow: hidden; border-radius: .8rem; border: 2px solid #a5b4fc; color: #fff;
  background:
    linear-gradient(-14deg, transparent 47%, rgba(10, 6, 24, .5) 50%, transparent 54%),
    linear-gradient(-14deg, transparent 20%, rgba(129, 140, 248, .3) 34%, rgba(255, 244, 222, .45) 50%, rgba(192, 132, 252, .3) 66%, transparent 80%),
    radial-gradient(1px 1px at 15% 30%, #fff 99%, transparent), radial-gradient(1px 1px at 80% 70%, #fff 99%, transparent), radial-gradient(1px 1px at 60% 20%, #fff 99%, transparent),
    linear-gradient(180deg, #0b0a24, #04030d);
  background-size: 200% 100%, 200% 100%, auto, auto, auto, auto; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  text-shadow: 0 0 3px #fff, 0 0 10px rgba(129, 140, 248, .9);
  --gs: 0 0 0 3px rgba(129, 140, 248, .2), 0 0 22px rgba(129, 140, 248, .45), 0 .5em 1em rgba(0, 0, 0, .55);
  --gs-h: 0 0 0 3px rgba(129, 140, 248, .35), 0 0 38px rgba(192, 132, 252, .7), 0 .5em 1.1em rgba(0, 0, 0, .6);
  --gs-a: 0 0 0 3px rgba(129, 140, 248, .25), 0 0 14px rgba(129, 140, 248, .5), inset 0 0 26px rgba(255, 244, 222, .35);
}
.btn-roll.gen-milkyway:hover { animation: gen-mw-drift 3s linear infinite; }
@keyframes gen-mw-drift { to { background-position: 100% 0, 100% 0, 0 0, 0 0, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-milkyway:hover { animation: none; } }

/* Divine Judgment (idée de Gray alt, 2026-10-25) — nuit violette, gloire dorée d'en haut, colonnes de marbre ; au
   survol, la lumière s'intensifie. */
.btn-roll.gen-divine {
  overflow: hidden; border-radius: .6rem; border: 2px solid #f5d27a; color: #fffdf2;
  background:
    linear-gradient(90deg, #f5ead2 0 3%, rgba(184, 134, 11, .9) 3% 3.6%, transparent 3.6% 96.4%, rgba(184, 134, 11, .9) 96.4% 97%, #f5ead2 97%),
    radial-gradient(ellipse 55% 120% at 50% -30%, rgba(255, 236, 170, .6), rgba(250, 204, 21, .15) 50%, transparent 72%),
    repeating-conic-gradient(from -2deg at 50% -60%, rgba(253, 224, 71, .14) 0 2deg, transparent 2deg 6deg),
    linear-gradient(180deg, #2b1d4d, #0c0819);
  text-shadow: 0 .06em 0 #a16207, 0 0 .35em rgba(253, 224, 71, .9);
  --gs: 0 0 0 3px rgba(250, 204, 21, .2), 0 0 22px rgba(250, 204, 21, .45), 0 .5em 1em rgba(0, 0, 0, .55);
  --gs-h: 0 0 0 3px rgba(250, 204, 21, .35), 0 0 38px rgba(253, 224, 71, .8), 0 0 70px rgba(255, 244, 214, .3), 0 .5em 1.1em rgba(0, 0, 0, .6);
  --gs-a: 0 0 0 3px rgba(250, 204, 21, .25), 0 0 14px rgba(250, 204, 21, .5), inset 0 0 26px rgba(255, 236, 170, .5);
}

/* Bakery — une miche dorée : croûte cuite, trois entailles de boulanger, lettres crème ; elle gonfle au survol. */
.btn-roll.gen-bakery {
  overflow: hidden; border-radius: 999px; border: 2px solid #8a4513; color: #fff7e6;
  background:
    radial-gradient(ellipse 50% 40% at 35% 22%, rgba(255, 236, 190, .75), transparent 70%),
    radial-gradient(ellipse 2px 1.4px at 22% 70%, #fff3d0 60%, transparent), radial-gradient(ellipse 2px 1.4px at 74% 30%, #fff3d0 60%, transparent), radial-gradient(ellipse 2px 1.4px at 88% 66%, #fff3d0 60%, transparent),
    linear-gradient(180deg, #f6c46e 0%, #e09a45 40%, #c2702a 78%, #9a5219 100%);
  text-shadow: 0 1px 0 #6b3410, 0 0 6px rgba(107, 52, 16, .5);
  --gs: 0 .3em 0 #6b3410, 0 .55em 1em rgba(181, 101, 29, .4), inset 0 2px 0 rgba(255, 236, 190, .6), inset 0 -4px 8px rgba(107, 52, 16, .45);
  --gs-h: 0 .34em 0 #6b3410, 0 .7em 1.3em rgba(245, 158, 11, .5), inset 0 2px 0 rgba(255, 236, 190, .6), inset 0 -4px 8px rgba(107, 52, 16, .45);
  --gs-a: 0 .06em 0 #6b3410, inset 0 3px 8px rgba(107, 52, 16, .6);
  --press: .24em; --edge: .3em;
  transition: transform .26s var(--ease-snap), box-shadow .16s ease;
}
.btn-roll.gen-bakery::before { inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22%, rgba(255, 240, 200, .5) 22% 23.5%, rgba(107, 52, 16, .35) 23.5% 25.5%, transparent 25.5% 33%) 18% 0 / 100% 100% no-repeat; opacity: .45; }
.btn-roll.gen-bakery:hover { transform: translateY(-1px) scale(1.04, 1.06); filter: none; }

/* Infinity — l'espace profond dans un liseré irisé qui tourne sans fin ; un ∞ de lumière passe au survol. */
.btn-roll.gen-infinity {
  overflow: hidden; border-radius: .7rem; border: 2px solid transparent; color: #fff;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px) 10px 12px / 47px 33px padding-box,
    radial-gradient(circle, rgba(165, 243, 252, .85) 0 1px, transparent 1.5px) 31px 25px / 67px 41px padding-box,
    radial-gradient(ellipse 45% 90% at 22% 40%, rgba(236, 72, 153, .5), transparent 70%) padding-box,
    radial-gradient(ellipse 45% 90% at 80% 60%, rgba(34, 211, 238, .42), transparent 70%) padding-box,
    linear-gradient(135deg, #070322, #1d0b55 52%, #04021a) padding-box,
    conic-gradient(from var(--inf-a), #22d3ee, #a855f7, #ec4899, #fbbf24, #a855f7, #22d3ee) border-box; /* --inf-a : css/premium.css */
  text-shadow: 0 0 6px rgba(255, 255, 255, .8), 0 0 16px rgba(168, 85, 247, .9);
  --gs: 0 0 18px rgba(168, 85, 247, .55), 0 0 36px rgba(34, 211, 238, .2), 0 .5em 1em rgba(0, 0, 0, .55);
  --gs-h: 0 0 28px rgba(168, 85, 247, .8), 0 0 50px rgba(34, 211, 238, .35), 0 .5em 1.1em rgba(0, 0, 0, .6);
  --gs-a: 0 0 10px rgba(168, 85, 247, .45), inset 0 0 26px rgba(4, 2, 26, .85);
  animation: inf-turn 7s linear infinite;
}
/* Le ∞ qui passe au survol glisse avec transform (calque sur toute la largeur du bouton : translateX(-30% → 110%)
   = l'ancien left -30% → 110%). Il animait `left` : une mise en page complète à chaque image du survol (signalé par
   MAYO, 2026-10-28 : « le bouton infinity lag »). */
.btn-roll.gen-infinity::after { content: '∞'; top: 50%; left: 0; width: 100%; white-space: nowrap; text-align: left; font-size: 2.6em; line-height: 1; margin-top: -.55em; color: transparent; opacity: 0;
  transform: translateX(-30%); -webkit-text-stroke: 1px rgba(255, 255, 255, .7); text-shadow: 0 0 10px rgba(240, 171, 252, .9); }
.btn-roll.gen-infinity:hover::after { animation: gen-inf-pass 1.1s var(--ease-out) 1; }
@keyframes gen-inf-pass { 0% { transform: translateX(-30%); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateX(110%); opacity: 0; } }
/* Le liseré qui tourne (MAYO, 2026-10-28) : animer --inf-a sur le bouton lui-même recalculait son style et repeignait
   tout son fond (six dégradés, étoiles, halo flou de --gs) à chaque image. Le dégradé conique tournant passe sur un
   calque à part (::before), réduit par un masque à l'anneau de 2 px du bord : seul cet anneau est repeint. Il faut
   laisser ce calque déborder du padding sur le bord (overflow: clip + overflow-clip-margin) ; Safari ne le sait pas
   encore, il garde l'ancienne animation. Le fond du bouton garde son conique, figé, sous l'anneau. */
@supports (overflow-clip-margin: 2px) {
  .btn-roll.gen-infinity { overflow: clip; overflow-clip-margin: 2px; animation: none; }
  .btn-roll.gen-infinity::before { inset: -2px; padding: 2px; border-radius: inherit; z-index: 0; 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; }
}
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-infinity, .btn-roll.gen-infinity::before, .btn-roll.gen-infinity:hover::after { animation: none; } }

/* ------------------------------------------------------------------ vendus à part (BUTTONS) */

/* Keycap — touche mécanique : dessus creusé, jupe haute, la plus longue course de tous les boutons. */
.btn-roll.gen-keycap {
  border-radius: .55rem; border: 1px solid #d4d4d4; color: #262626; letter-spacing: .14em;
  background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
  text-shadow: 0 1px 0 #fff;
  --gs: inset 0 .1em 0 #fff, inset 0 -.18em .3em rgba(0, 0, 0, .1), 0 .16em 0 #d1d1d1, 0 .5em 0 #a3a3a3, 0 .5em 0 1px #8a8a8a, 0 .9em 1em rgba(0, 0, 0, .45);
  --gs-h: inset 0 .1em 0 #fff, inset 0 -.18em .3em rgba(0, 0, 0, .1), 0 .16em 0 #d1d1d1, 0 .56em 0 #a3a3a3, 0 .56em 0 1px #8a8a8a, 0 1.05em 1.2em rgba(0, 0, 0, .5);
  --gs-a: inset 0 .1em 0 #fff, inset 0 -.1em .3em rgba(0, 0, 0, .16), 0 .05em 0 #d1d1d1, 0 .1em 0 #a3a3a3, 0 .1em 0 1px #8a8a8a, 0 .2em .3em rgba(0, 0, 0, .4);
  --press: .4em;
  transition: transform .07s linear, box-shadow .07s linear;
}
.btn-roll.gen-keycap:hover { filter: none; }

/* Terminal — fenêtre de console : trois pastilles, invite, curseur qui clignote ; s'inverse quand on valide. */
.btn-roll.gen-terminal {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; text-transform: lowercase;
  border-radius: .45rem; border: 1px solid #3f3f46; color: #4ade80;
  background:
    radial-gradient(circle at .75em .62em, #f87171 0 .2em, transparent .22em),
    radial-gradient(circle at 1.4em .62em, #fbbf24 0 .2em, transparent .22em),
    radial-gradient(circle at 2.05em .62em, #4ade80 0 .2em, transparent .22em),
    linear-gradient(180deg, #27272a 0 1.25em, #0c0c0c 1.25em);
  padding-top: 1.55rem; padding-bottom: .75rem;
  --gs: 0 .5em 1.2em rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .04);
  --gs-h: 0 .6em 1.4em rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 0 18px rgba(74, 222, 128, .22);
  --gs-a: 0 .15em .4em rgba(0, 0, 0, .5);
}
.btn-roll.small.gen-terminal { padding-top: 1.3rem; padding-bottom: .45rem; }
.btn-roll.gen-terminal::before { content: '$'; position: static; margin-right: .5em; color: #a1a1aa; }
.btn-roll.gen-terminal::after { content: ''; position: static; display: inline-block; width: .55em; height: 1em; margin-left: .25em; vertical-align: -.14em; background: #4ade80; animation: gen-cursor 1.05s steps(1) infinite; }
.btn-roll.gen-terminal:hover { filter: none; text-shadow: 0 0 10px rgba(74, 222, 128, .7); }
.btn-roll.gen-terminal:active { color: #bbf7d0; }
@keyframes gen-cursor { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Arcade — gros bouton de borne : dôme rouge sur collerette noire, s'allume au survol, s'enfonce franchement. */
.btn-roll.gen-arcade {
  border-radius: 999px; border: .26em solid #18181b; color: #fff; font-weight: 900;
  background: radial-gradient(ellipse 70% 90% at 50% 18%, #ff9d9d 0%, #ef4444 38%, #b91c1c 100%);
  text-shadow: 0 2px 0 #7f1d1d;
  --gs: 0 0 0 2px #52525b, 0 .34em 0 2px #09090b, 0 .7em 1em rgba(0, 0, 0, .55), inset 0 -.3em .5em rgba(127, 29, 29, .6), inset 0 .12em 0 rgba(255, 255, 255, .5);
  --gs-h: 0 0 0 2px #52525b, 0 .34em 0 2px #09090b, 0 .7em 1em rgba(0, 0, 0, .55), inset 0 -.3em .5em rgba(127, 29, 29, .5), inset 0 .12em 0 rgba(255, 255, 255, .5), 0 0 28px rgba(239, 68, 68, .7);
  --gs-a: 0 0 0 2px #52525b, 0 .08em 0 2px #09090b, inset 0 .25em .6em rgba(127, 29, 29, .8), 0 0 34px rgba(239, 68, 68, .85);
  --press: .26em;
}
.btn-roll.gen-arcade::before { top: 8%; left: 14%; right: 14%; height: 26%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.btn-roll.gen-arcade:hover { transform: none; filter: brightness(1.1); }
.btn-roll.gen-arcade:active { transform: translateY(.26em); }

/* Ticket — billet de tombola : papier crème, encoches rondes, cadre imprimé, talon à détacher. */
.btn-roll.gen-ticket {
  font-family: 'Graduate', var(--font-sans); font-weight: 400; letter-spacing: .12em;
  border-radius: .25rem; border: 0; color: #991b1b;
  background:
    repeating-linear-gradient(0deg, #991b1b 0 5px, transparent 5px 10px) 21% 0 / 2px 100% no-repeat,
    linear-gradient(180deg, #fff3d1, #f9e2ad);
  text-shadow: none;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent .42em, #000 .45em) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .42em, #000 .45em) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent .42em, #000 .45em) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .42em, #000 .45em) 100% 0 / 51% 100% no-repeat;
  padding-left: clamp(2.6rem, 14vw, 5.4rem);
  transition: transform .18s var(--ease-snap), filter .16s ease;
}
.btn-roll.small.gen-ticket { padding-left: 2.9rem; padding-right: 1.1rem; letter-spacing: .06em; }
.btn-roll.gen-ticket::before { inset: 5px; border: 2px solid #991b1b; border-radius: .15rem; opacity: .75; }
.btn-roll.gen-ticket::after { content: '№ 7'; z-index: 0; left: 0; top: 0; bottom: 0; width: 21%; display: grid; place-items: center; font-size: .5em; letter-spacing: .05em; color: #991b1b; }
.btn-roll.gen-ticket:hover { transform: rotate(-1.4deg) translateY(-2px); filter: none; }
.btn-roll.gen-ticket:active { transform: rotate(0) scale(.97); }

/* Comic — case de BD : trame de points, contour épais, ombre portée pleine, lettres rouges cernées de noir. */
.btn-roll.gen-comic {
  font-weight: 900; font-style: italic; letter-spacing: .08em;
  border-radius: .3rem; border: 3px solid #111; color: #ef4444;
  background: radial-gradient(circle, #f59e0b 0 22%, transparent 24%) 0 0 / .42em .42em, #fde047;
  -webkit-text-stroke: .05em #111; paint-order: stroke fill;
  text-shadow: .09em .09em 0 #111;
  --gs: .28em .28em 0 #2563eb; --gs-h: .4em .4em 0 #2563eb; --gs-a: .04em .04em 0 #2563eb;
  transform: rotate(-1.2deg);
  transition: transform .1s var(--ease-out), box-shadow .1s ease;
}
.btn-roll.gen-comic:hover { transform: rotate(-1.2deg) translate(-.12em, -.12em); filter: none; }
.btn-roll.gen-comic:active { transform: rotate(-1.2deg) translate(.22em, .22em); filter: none; }

/* Launch — bouton de mise à feu : cadre à chevrons jaune et noir, plaque sombre, voyant qui passe au vert. */
.btn-roll.gen-launch {
  font-family: 'Graduate', var(--font-sans); font-weight: 400; letter-spacing: .16em;
  border-radius: .35rem; border: .34em solid transparent; color: #facc15;
  background:
    linear-gradient(180deg, #27272a, #111113) padding-box,
    repeating-linear-gradient(-45deg, #facc15 var(--gen-shift), #facc15 calc(var(--gen-shift) + .5em), #111 calc(var(--gen-shift) + .5em), #111 calc(var(--gen-shift) + 1em)) border-box;
  text-shadow: 0 2px 0 #000;
  --gs: 0 .26em 0 #000, 0 .6em 1em rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
  --gs-h: 0 .3em 0 #000, 0 .7em 1.2em rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 18px rgba(250, 204, 21, .25);
  --gs-a: 0 .05em 0 #000, inset 0 3px 8px rgba(0, 0, 0, .7);
  --press: .21em;
  padding-left: clamp(2.4rem, 12vw, 4rem);
}
.btn-roll.small.gen-launch { padding-left: 2.1rem; padding-right: 1.1rem; letter-spacing: .1em; }
.btn-roll.gen-launch::before { z-index: 0; left: .9em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: #ef4444; box-shadow: 0 0 .5em #ef4444, inset 0 -.1em .15em rgba(0, 0, 0, .4); animation: gen-led 1.2s steps(1) infinite; }
.btn-roll.gen-launch:hover { animation: gen-hazard 1.2s linear infinite; }
.btn-roll.gen-launch:active::before { background: #4ade80; box-shadow: 0 0 .7em #4ade80; animation: none; }
@keyframes gen-led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }
@keyframes gen-hazard { to { --gen-shift: 1em; } }

/* Hologram — film holographique : dégradé nacré qui glisse lentement, stries brillantes, lettres indigo. */
.btn-roll.gen-hologram {
  overflow: hidden; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .8); color: #1e1b4b;
  background: repeating-linear-gradient(115deg, #a5f3fc var(--gen-shift), #c4b5fd calc(var(--gen-shift) + 144px), #f9a8d4 calc(var(--gen-shift) + 288px), #fde68a calc(var(--gen-shift) + 432px), #86efac calc(var(--gen-shift) + 576px), #a5f3fc calc(var(--gen-shift) + 720px));
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  animation: gen-holo 9s linear infinite;
  --gs: 0 .22em 0 #6366f1, 0 .5em 1em rgba(129, 140, 248, .45), inset 0 0 0 1px rgba(255, 255, 255, .5);
  --gs-h: 0 .26em 0 #6366f1, 0 .6em 1.2em rgba(129, 140, 248, .6), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 22px rgba(196, 181, 253, .6);
  --gs-a: 0 .04em 0 #6366f1, inset 0 3px 8px rgba(67, 56, 202, .35);
  --press: .18em;
}
.btn-roll.gen-hologram::before { inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, .38) 9px 11px, rgba(255, 255, 255, 0) 11px 24px); }
.btn-roll.gen-hologram:hover { animation-duration: 2.5s; }
@keyframes gen-holo { to { --gen-shift: 720px; } }

/* Royal — velours et or : pourpre profond, double filet doré, losanges de part et d'autre. */
.btn-roll.gen-royal {
  letter-spacing: .2em; font-weight: 700;
  border-radius: .4rem; border: 2px solid #eab308; color: #fde68a;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 5px 5px,
    radial-gradient(ellipse 80% 120% at 50% -10%, #7c3aed 0%, #4c1d95 45%, #2e1065 100%);
  text-shadow: 0 1px 0 #713f12, 0 0 12px rgba(234, 179, 8, .35);
  --gs: 0 .26em 0 #713f12, 0 .6em 1.1em rgba(46, 16, 101, .6), inset 0 0 0 4px #2e1065, inset 0 0 0 5px rgba(253, 230, 138, .7);
  --gs-h: 0 .3em 0 #713f12, 0 .7em 1.3em rgba(46, 16, 101, .7), inset 0 0 0 4px #2e1065, inset 0 0 0 5px #fde68a, 0 0 20px rgba(234, 179, 8, .35);
  --gs-a: 0 .05em 0 #713f12, inset 0 0 0 4px #2e1065, inset 0 0 0 5px rgba(253, 230, 138, .7), inset 0 6px 12px rgba(0, 0, 0, .5);
  --press: .21em;
}
.btn-roll.gen-royal::before, .btn-roll.gen-royal::after { z-index: 0; top: 50%; width: .42em; height: .42em; margin-top: -.21em; background: linear-gradient(135deg, #fef3c7, #eab308 55%, #a16207); transform: rotate(45deg); }
.btn-roll.gen-royal::before { left: 1.05em; }
.btn-roll.gen-royal::after { right: 1.05em; }
.btn-roll.small.gen-royal { letter-spacing: .14em; }
.btn-roll.small.gen-royal::before { left: .62em; }
.btn-roll.small.gen-royal::after { right: .62em; }

/* Pickle — un cornichon (idée d'Edward et de Dylanrulez123, 2026-10-27) : gélule vert olive, peau bosselée (petites
   verrues claires, quelques taches sombres), reflet humide en haut. Appuyé, il s'écrase (plus large, plus bas) puis
   rebondit en tremblotant comme une gelée ; son « squish » mouillé est dans js/sound.js (recette click). */
.btn-roll.gen-pickle {
  border-radius: 999px; border: 2px solid #3f6212; color: #f7fee7; letter-spacing: .12em;
  background:
    radial-gradient(circle at 30% 40%, rgba(236, 252, 203, .55) 0 1.6px, transparent 2.4px) 0 0 / 15px 11px,
    radial-gradient(circle at 70% 75%, rgba(217, 249, 157, .45) 0 1.3px, transparent 2.1px) 5px 3px / 13px 12px,
    radial-gradient(circle at 50% 50%, rgba(26, 46, 5, .35) 0 1px, transparent 1.8px) 9px 6px / 23px 17px,
    radial-gradient(ellipse 70% 45% at 50% 12%, rgba(255, 255, 255, .35), transparent 70%),
    linear-gradient(180deg, #a3c94a 0%, #6b9a2a 45%, #4d7c0f 80%, #3f6212 100%);
  text-shadow: 0 1px 0 #365314, 0 -1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(26, 46, 5, .5);
  --gs: inset 0 2px 0 rgba(236, 252, 203, .5), inset 0 -.25em .4em rgba(26, 46, 5, .35), 0 .26em 0 #365314, 0 .5em .9em rgba(26, 46, 5, .4);
  --gs-h: inset 0 2px 0 rgba(236, 252, 203, .6), inset 0 -.25em .4em rgba(26, 46, 5, .35), 0 .3em 0 #365314, 0 .62em 1.1em rgba(26, 46, 5, .45);
  --gs-a: inset 0 2px 0 rgba(236, 252, 203, .35), inset 0 .25em .5em rgba(26, 46, 5, .45), 0 .05em 0 #365314, 0 .12em .3em rgba(26, 46, 5, .4);
  transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.25, 1.9, .45, .8), box-shadow .2s ease, filter .2s ease;
}
/* Les deux bouts arrondis du cornichon, un peu plus foncés, et une goutte de saumure qui brille. */
.btn-roll.gen-pickle::before { inset: 0; border-radius: inherit; background: radial-gradient(ellipse 14% 70% at 0% 50%, rgba(54, 83, 20, .55), transparent 80%), radial-gradient(ellipse 14% 70% at 100% 50%, rgba(54, 83, 20, .55), transparent 80%); }
.btn-roll.gen-pickle::after { top: 14%; left: 18%; width: .5em; height: .3em; border-radius: 50%; background: rgba(255, 255, 255, .75); filter: blur(.4px); transform: rotate(-12deg); }
.btn-roll.gen-pickle:hover { transform: translateY(-1px) scale(1.015, .99); filter: none; }
.btn-roll.gen-pickle:active { transform: translateY(.2em) scale(1.1, .8); filter: saturate(1.15); transition: transform .06s ease-out, box-shadow .06s; }
.btn-roll.gen-pickle { --edge: .26em; }

/* Pack ASMR (idée de JAKECisthebest, 2026-10-20). Chacun a son propre son de pression (js/sound.js, recette click). */
/* Thock — touche mécanique lubrifiée : capuchon fumé translucide, rétroéclairage pastel qui déborde dessous, course
   courte et sèche. Le son est grave et mat (le « thock »), pas le clic aigu de Keycap. */
.btn-roll.gen-thock {
  border-radius: .6rem; border: 1px solid #3f3f46; color: #f5f3ff; letter-spacing: .12em;
  background: linear-gradient(180deg, rgba(82, 82, 91, .95) 0%, rgba(39, 39, 42, .95) 100%);
  text-shadow: 0 0 6px rgba(196, 181, 253, .7);
  --gs: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -.2em .3em rgba(0, 0, 0, .35), 0 .14em 0 #27272a, 0 .34em 0 #18181b, 0 .34em .9em rgba(167, 139, 250, .55), 0 .6em 1em rgba(0, 0, 0, .45);
  --gs-h: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -.2em .3em rgba(0, 0, 0, .35), 0 .14em 0 #27272a, 0 .38em 0 #18181b, 0 .38em 1.3em rgba(167, 139, 250, .75), 0 .7em 1.1em rgba(0, 0, 0, .5);
  --gs-a: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -.1em .3em rgba(0, 0, 0, .4), 0 .04em 0 #27272a, 0 .08em 0 #18181b, 0 .1em 1.6em rgba(167, 139, 250, .95);
  --press: .26em;
  transition: transform .06s cubic-bezier(.5, 0, .9, .5), box-shadow .06s linear;
}
/* Dessus légèrement creusé (cylindrique), comme un vrai capuchon. */
.btn-roll.gen-thock::before { inset: 10% 5% 18%; border-radius: .45rem; background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .06) 60%, transparent); }
.btn-roll.gen-thock:hover { filter: none; }

/* Crunchy Wax (et ASMR, le skin assorti) — pavé de cire pastel mat, craquelé : il s'écrase sous le doigt, les fissures
   s'éclairent, puis il revient lentement. */
.btn-roll.gen-wax, .btn-roll.gen-asmr {
  border-radius: 1rem; border: 2px solid; letter-spacing: .1em;
  background:
    linear-gradient(28deg, transparent 18%, rgba(255, 255, 255, .7) 18.6%, transparent 19.6%),
    linear-gradient(-40deg, transparent 72%, rgba(255, 255, 255, .6) 72.6%, transparent 73.6%),
    linear-gradient(96deg, transparent 88%, rgba(255, 255, 255, .55) 88.5%, transparent 89.5%),
    radial-gradient(ellipse 60% 50% at 30% 15%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(180deg, #ffe9a6, #fbd168);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .7);
  --gs: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -.2em .35em rgba(180, 120, 20, .25), 0 .28em 0 #c9922a, 0 .5em .9em rgba(120, 70, 10, .35);
  --gs-h: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -.2em .35em rgba(180, 120, 20, .25), 0 .32em 0 #c9922a, 0 .6em 1em rgba(120, 70, 10, .4);
  --gs-a: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 .2em .5em rgba(180, 120, 20, .35), 0 .06em 0 #c9922a, 0 .15em .3em rgba(120, 70, 10, .35);
  transform-origin: 50% 100%;
  transition: transform .32s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease, filter .2s ease;
}
.btn-roll.gen-wax { border-color: #f0c75e; color: #8a5a12; }
.btn-roll.gen-asmr { border-color: #c4b5fd; color: #6d28d9; background:
    linear-gradient(28deg, transparent 18%, rgba(255, 255, 255, .7) 18.6%, transparent 19.6%),
    linear-gradient(-40deg, transparent 72%, rgba(255, 255, 255, .6) 72.6%, transparent 73.6%),
    radial-gradient(ellipse 60% 50% at 30% 15%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(90deg, #ffe08a, #b8f2d4 35%, #e2cdff 65%, #ffc9dc);
  --gs: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -.2em .35em rgba(124, 58, 237, .18), 0 .28em 0 #a78bfa, 0 .5em .9em rgba(88, 28, 135, .3);
  --gs-h: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -.2em .35em rgba(124, 58, 237, .18), 0 .32em 0 #a78bfa, 0 .6em 1em rgba(88, 28, 135, .35);
  --gs-a: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 .2em .5em rgba(124, 58, 237, .25), 0 .06em 0 #a78bfa, 0 .15em .3em rgba(88, 28, 135, .3); }
.btn-roll.gen-wax:hover, .btn-roll.gen-asmr:hover { transform: translateY(-1px) scale(1.01, .99); filter: none; }
.btn-roll.gen-wax:active, .btn-roll.gen-asmr:active { transform: translateY(.22em) scale(1.06, .86); filter: brightness(1.04); transition: transform .05s ease-out, box-shadow .05s; }

/* Épaisseur de la tranche visible sous chaque bouton (voir margin-bottom plus haut) ; la course du clic reste en deçà. */
.btn-roll.gen-keycap { --edge: .52em; }
.btn-roll.gen-blocks, .btn-roll.gen-arcade { --edge: .42em; }
.btn-roll.gen-thock, .btn-roll.gen-wax, .btn-roll.gen-asmr, .btn-roll.gen-candy, .btn-roll.gen-slots, .btn-roll.gen-dice, .btn-roll.gen-gold, .btn-roll.gen-comic { --edge: .3em; }
.btn-roll.gen-jersey, .btn-roll.gen-ocean, .btn-roll.gen-chrome, .btn-roll.gen-ice, .btn-roll.gen-circuit, .btn-roll.gen-vaporwave,
.btn-roll.gen-diamond, .btn-roll.gen-launch, .btn-roll.gen-hologram, .btn-roll.gen-royal { --edge: .25em; }
.btn-roll.gen-pixel, .btn-roll.gen-lcd { --edge: 6px; }

/* Les décors permanents s'arrêtent quand le bouton est désactivé (tirage en cours). */
.btn-roll[class*="gen-"]:disabled, .btn-roll[class*="gen-"]:disabled::before, .btn-roll[class*="gen-"]:disabled::after { animation-play-state: paused; }

/* ------------------------------------------------------------------ boutique : aperçus des boutons */
.gen-tile { justify-content: space-between; }
.gen-tile .btn-roll { margin: .55rem 0 .75rem; }
.skin-state.locked { color: var(--prose-3); font-weight: 600; }
@media (max-width: 560px) { .gen-tile .btn-roll { zoom: .8; } }
@media (max-width: 340px) { .gen-tile .btn-roll { zoom: .72; } }

/* Supporter : or rose poli, liseré clair, halo corail qui bat doucement au survol. */
.btn-roll.gen-supporter {
  overflow: hidden; border-radius: .6rem; border: 2px solid #ffe1d6; color: #5a1f2b;
  background: linear-gradient(180deg, #fff1ea 0%, #f9c7b7 26%, #e59a8c 60%, #c9756d 100%);
  text-shadow: 0 1px 0 rgba(255, 241, 234, .85), 0 -1px 0 rgba(90, 31, 43, .3);
  --gs: 0 .3em 0 #7a3340, 0 .55em 1em rgba(251, 113, 133, .35), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(122, 51, 64, .35);
  --gs-h: 0 .34em 0 #7a3340, 0 .7em 1.4em rgba(251, 113, 133, .6), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(122, 51, 64, .35);
  --gs-a: 0 .06em 0 #7a3340, inset 0 3px 7px rgba(122, 51, 64, .55);
  --press: .24em; --edge: .3em;
}

/* Bouton Generate HellBorn : une dalle de basalte fendue, la lave pulse dans les fentes. */
.btn-roll.gen-hellborn {
  overflow: hidden; border: 2px solid #ff5a00; color: #ffe2c2; border-radius: .8rem;
  background:
    linear-gradient(118deg, transparent 40%, rgba(255, 106, 0, .8) 40.6%, rgba(255, 200, 80, .9) 41.2%, transparent 42%),
    linear-gradient(64deg, transparent 66%, rgba(255, 106, 0, .7) 66.5%, transparent 67.4%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(255, 80, 0, .7), transparent 65%),
    linear-gradient(180deg, #2a1712, #120806);
  text-shadow: 0 0 8px rgba(255, 106, 0, .8), 0 1px 0 #000;
  --gs: 0 .3em 0 #3d1408, 0 .5em 1em rgba(255, 69, 0, .45); --gs-h: 0 .34em 0 #3d1408, 0 .7em 1.4em rgba(255, 106, 0, .6); --gs-a: 0 .06em 0 #3d1408;
  animation: gen-hb-pulse 2.2s ease-in-out infinite alternate;
}
@keyframes gen-hb-pulse { from { filter: brightness(.95); } to { filter: brightness(1.18) saturate(1.15); } }

/* Bouton Generate Mayo : un flacon jaune moelleux. */
.btn-roll.gen-mayo { border: 2px solid #ca8a04; border-radius: 999px; color: #713f12; background: radial-gradient(ellipse 60% 45% at 35% 25%, rgba(255, 255, 255, .8), transparent 70%), linear-gradient(180deg, #fef08a, #facc15 60%, #eab308); text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  --gs: 0 .3em 0 #a16207, 0 .5em 1em rgba(234, 179, 8, .35); --gs-h: 0 .34em 0 #a16207, 0 .7em 1.3em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #a16207; }
.btn-roll.gen-mayo:hover { transform: translateY(-1px) scale(1.05, .96); }
.btn-roll.gen-ketchup { border: 2px solid #991b1b; border-radius: 999px; color: #fff; background: radial-gradient(ellipse 60% 45% at 35% 25%, rgba(255, 255, 255, .45), transparent 70%), linear-gradient(180deg, #f87171, #dc2626 60%, #b91c1c); text-shadow: 0 1px 0 rgba(127, 29, 29, .6);
  --gs: 0 .3em 0 #7f1d1d, 0 .5em 1em rgba(220, 38, 38, .35); --gs-h: 0 .34em 0 #7f1d1d, 0 .7em 1.3em rgba(239, 68, 68, .45); --gs-a: 0 .06em 0 #7f1d1d; }
.btn-roll.gen-ketchup:hover { transform: translateY(-1px) scale(1.05, .96); }
.btn-roll.gen-mustard { border: 2px solid #a16207; border-radius: 999px; color: #713f12; background: radial-gradient(ellipse 60% 45% at 35% 25%, rgba(255, 255, 255, .6), transparent 70%), linear-gradient(180deg, #fde047, #eab308 60%, #ca8a04); text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  --gs: 0 .3em 0 #854d0e, 0 .5em 1em rgba(202, 138, 4, .35); --gs-h: 0 .34em 0 #854d0e, 0 .7em 1.3em rgba(234, 179, 8, .45); --gs-a: 0 .06em 0 #854d0e; }
.btn-roll.gen-mustard:hover { transform: translateY(-1px) scale(1.05, .96); }

/* Bouton Generate Haunted : nuit violette, lune, lueur de citrouille. */
.btn-roll.gen-haunted { border: 2px solid #7c3aed; color: #f5f3ff; background: radial-gradient(circle at 85% 30%, #fef9c3 0 8%, transparent 14%), linear-gradient(180deg, #2e1065, #4c1d95 60%, #9a3412); text-shadow: 0 0 8px rgba(255, 255, 255, .7);
  --gs: 0 .3em 0 #1e0b45, 0 .5em 1em rgba(124, 58, 237, .45); --gs-h: 0 .34em 0 #1e0b45, 0 .7em 1.4em rgba(249, 115, 22, .45); --gs-a: 0 .06em 0 #1e0b45; }

.btn-roll.gen-pumpkin { border: 2px solid #7c2d12; border-radius: 999px; color: #fff3b0; background: radial-gradient(ellipse at 50% 40%, #fb923c, #ea580c 60%, #9a3412); text-shadow: 0 0 8px #fbbf24;
  --gs: 0 .3em 0 #431407, 0 .5em 1em rgba(249, 115, 22, .45); --gs-h: 0 .34em 0 #431407, 0 .7em 1.4em rgba(251, 191, 36, .5); --gs-a: 0 .06em 0 #431407; }
.btn-roll.gen-brew { border: 2px solid #27272a; color: #ecfccb; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(163, 230, 53, .6), transparent 70%), linear-gradient(180deg, #1a2e05, #0b1402); text-shadow: 0 0 8px #a3e635;
  --gs: 0 .3em 0 #050801, 0 .5em 1em rgba(132, 204, 22, .45); --gs-h: 0 .34em 0 #050801, 0 .7em 1.4em rgba(163, 230, 53, .55); --gs-a: 0 .06em 0 #050801; }

/* Boutons des skins Sky et Deck (2026-10-16). */
.btn-roll.gen-sky { border: 2px solid #ffffff; border-radius: 999px; color: #ffffff; background: radial-gradient(ellipse 35% 60% at 15% 100%, #ffffff 55%, transparent 60%), radial-gradient(ellipse 30% 55% at 88% 105%, #f4f8fd 55%, transparent 60%), linear-gradient(180deg, #4f9fe9, #86c3f4);
  text-shadow: 0 .06em 0 #3b82c4, 0 0 .4em rgba(30, 90, 160, .5);
  --gs: 0 .3em 0 #3b82c4, 0 .5em 1em rgba(80, 140, 210, .45); --gs-h: 0 .34em 0 #3b82c4, 0 .7em 1.4em rgba(80, 140, 210, .6); --gs-a: 0 .06em 0 #3b82c4; }
.btn-roll.gen-cards { border: 3px solid #c9a24a; border-radius: .6rem; color: #fff7d6; background: radial-gradient(ellipse 80% 120% at 50% 30%, #1f7a4a, #0b4027); font-family: Georgia, serif;
  text-shadow: 0 .06em 0 #052e16; --gs: 0 .3em 0 #7a5a17, 0 .5em 1em rgba(0, 0, 0, .4); --gs-h: 0 .34em 0 #7a5a17, 0 .7em 1.4em rgba(201, 162, 74, .45); --gs-a: 0 .06em 0 #7a5a17; }
.btn-roll.gen-heavenly { border: 2px solid #ca8a04; border-radius: 999px; color: #92400e; background: radial-gradient(ellipse 70% 60% at 50% 0%, #fff, transparent 75%), linear-gradient(180deg, #fffdf7, #f5f0e6 60%, #e9e1d0); text-shadow: 0 1px 0 #fff;
  --gs: 0 .3em 0 #a16207, 0 0 1.2em rgba(253, 224, 71, .45); --gs-h: 0 .34em 0 #a16207, 0 0 1.8em rgba(253, 224, 71, .65); --gs-a: 0 .06em 0 #a16207; }
.btn-roll.gen-bloodlust { border: 2px solid #450a0a; border-radius: 999px; color: #fecaca; background: radial-gradient(ellipse 60% 45% at 35% 20%, rgba(254, 202, 202, .35), transparent 70%), linear-gradient(180deg, #b91c1c, #7f1d1d 60%, #450a0a); text-shadow: 0 1px 0 #3b0505;
  --gs: 0 .3em 0 #3b0505, 0 .5em 1em rgba(185, 28, 28, .35); --gs-h: 0 .34em 0 #3b0505, 0 .7em 1.3em rgba(220, 38, 38, .45); --gs-a: 0 .06em 0 #3b0505; }
.btn-roll.gen-trickortreat { border: 2px solid #c2410c; border-radius: .6em .6em .2em .2em; color: #fff7ed; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(253, 230, 138, .45), transparent 70%), linear-gradient(180deg, #f97316, #c2410c 60%, #7c2d12); text-shadow: 0 1px 0 #431407;
  --gs: 0 .3em 0 #431407, 0 .5em 1em rgba(249, 115, 22, .35); --gs-h: 0 .34em 0 #431407, 0 .7em 1.3em rgba(251, 146, 60, .45); --gs-a: 0 .06em 0 #431407; }
.btn-roll.gen-western { border: 2px solid #451a03; border-radius: .4em; color: #fef3c7; background: repeating-linear-gradient(90deg, transparent 0 1.6em, rgba(69, 26, 3, .35) 1.6em 1.7em), linear-gradient(180deg, #b45309, #92400e 60%, #78350f); text-shadow: 0 1px 0 #451a03;
  --gs: 0 .3em 0 #451a03, 0 .5em 1em rgba(180, 83, 9, .35); --gs-h: 0 .34em 0 #451a03, 0 .7em 1.3em rgba(245, 158, 11, .45); --gs-a: 0 .06em 0 #451a03; }
.btn-roll.gen-meteor { border: 2px solid #9a3412; border-radius: .6em; color: #fff7ed; background: radial-gradient(ellipse 80% 70% at 50% 120%, rgba(249, 115, 22, .55), transparent 70%), linear-gradient(180deg, #0f1b3d, #050816); text-shadow: 0 0 .4em #fb923c;
  --gs: 0 .3em 0 #431407, 0 .5em 1em rgba(249, 115, 22, .35); --gs-h: 0 .34em 0 #431407, 0 .7em 1.3em rgba(251, 146, 60, .5); --gs-a: 0 .06em 0 #431407; }
/* Dynamite (idée de casmictechthing et ichi, 2026-10-24) : un bâton rouge en cylindre, une étiquette crème au milieu,
   la bande « danger » en bas ; au survol, une étincelle court au bord comme une mèche. */
.btn-roll.gen-dynamite { border: 2px solid #450a0a; border-radius: .5em; color: #1c1917;
  background:
    repeating-linear-gradient(-45deg, #facc15 0 .3em, #1c1917 .3em .6em) 0 100% / 100% .28em no-repeat,
    linear-gradient(180deg, transparent 24%, #fef3c7 24%, #fde68a 70%, transparent 70%),
    linear-gradient(180deg, #f87171, #dc2626 40%, #991b1b);
  text-shadow: 0 1px 0 rgba(255, 251, 235, .6);
  --gs: 0 .3em 0 #450a0a, 0 .5em 1em rgba(220, 38, 38, .32); --gs-h: 0 .34em 0 #450a0a, 0 .7em 1.4em rgba(251, 146, 60, .5); --gs-a: 0 .06em 0 #450a0a; }
.btn-roll.gen-dynamite:hover { filter: brightness(1.08); }
/* Supernova (idée de jjcoolcid1, 2026-10-25) : le vide indigo, un cœur blanc-bleu, un anneau de choc violet. */
.btn-roll.gen-supernova { border: 2px solid #8b5cf6; border-radius: .6em; color: #f8faff;
  background: radial-gradient(ellipse 30% 70% at 50% 50%, rgba(224, 231, 255, .35), transparent 70%), radial-gradient(ellipse 60% 120% at 50% 50%, transparent 55%, rgba(167, 139, 250, .5) 62%, transparent 70%), radial-gradient(ellipse 50% 90% at 15% 40%, rgba(59, 130, 246, .45), transparent 70%), radial-gradient(ellipse 50% 90% at 85% 60%, rgba(168, 85, 247, .5), transparent 70%), linear-gradient(160deg, #0b0a2a, #120a35 50%, #050414);
  text-shadow: 0 0 .3em #818cf8, 0 0 .6em rgba(168, 85, 247, .6);
  --gs: 0 .3em 0 #1e1048, 0 .5em 1em rgba(139, 92, 246, .4); --gs-h: 0 .34em 0 #1e1048, 0 .7em 1.4em rgba(96, 165, 250, .55); --gs-a: 0 .06em 0 #1e1048; }
/* Shiny Diamond (idée de finnnnn, 2026-10-25) : velours noir, une rangée de facettes claires et sombres, un liseré
   en or blanc ; au survol, les facettes s'allument. */
.btn-roll.gen-shinydiamond { border: 2px solid #cbd5e1; border-radius: .5em; color: #f0f9ff;
  background:
    repeating-conic-gradient(from 11.25deg at 50% 50%, rgba(240, 249, 255, .14) 0 22.5deg, transparent 22.5deg 45deg),
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(186, 230, 253, .3), transparent 70%),
    linear-gradient(180deg, #2a2540, #0b0a12);
  text-shadow: 0 0 6px rgba(186, 230, 253, .8);
  --gs: 0 .3em 0 #475569, 0 .5em 1em rgba(186, 230, 253, .25); --gs-h: 0 .34em 0 #475569, 0 .7em 1.4em rgba(224, 242, 254, .5); --gs-a: 0 .06em 0 #475569; }
.btn-roll.gen-shinydiamond:hover { filter: brightness(1.15) saturate(1.2); }
/* Cursed Energy (idée d'Edward, 2026-10-20) : nuit violette, énergie qui remonte du bas, liseré d'aura. */
.btn-roll.gen-cursed { border: 2px solid #6d28d9; border-radius: .6em; color: #ede9fe; background: radial-gradient(ellipse 70% 80% at 50% 130%, rgba(129, 140, 248, .6), transparent 70%), radial-gradient(ellipse 40% 60% at 15% 0%, rgba(168, 85, 247, .35), transparent 70%), linear-gradient(180deg, #1e1048, #0b0820); text-shadow: 0 0 .35em #a78bfa, 0 1px 0 #0a0518;
  --gs: 0 .3em 0 #1e1048, 0 .5em 1em rgba(124, 58, 237, .4); --gs-h: 0 .34em 0 #1e1048, 0 .7em 1.4em rgba(167, 139, 250, .55); --gs-a: 0 .06em 0 #1e1048; }
/* Marshmallow (idée de DandoriNinja, 2026-10-21) : une grosse guimauve rose poudrée, ciel pastel au-dessus. */
.btn-roll.gen-marsh { border: 2px solid #f472b6; border-radius: 999px; color: #9d174d; background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .7) 0 .08em, transparent .1em) 0 0 / 1.1em .9em, radial-gradient(ellipse 70% 55% at 50% 0%, #fff, transparent 75%), linear-gradient(180deg, #fff1f7, #fbcfe8 60%, #f5b4d3); text-shadow: 0 1px 0 #fff;
  --gs: 0 .3em 0 #db7aa6, 0 .5em 1em rgba(244, 114, 182, .3); --gs-h: 0 .34em 0 #db7aa6, 0 .7em 1.3em rgba(196, 181, 253, .5); --gs-a: 0 .06em 0 #db7aa6; }
.btn-roll.gen-marsh:active { transform: translateY(.22em) scale(1.05, .88); }
/* Lab (idée de costoroll, 2026-10-21) : un tube de verre couché ; les six liquides du skin en bandes au fond, un reflet
   de verre en haut, quelques bulles qui remontent quand on le survole. */
.btn-roll.gen-lab { border: 2px solid rgba(226, 232, 240, .7); border-radius: 999px; color: #f0fdfa;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 32%),
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 .09em, transparent .13em) 18% 72% / 2.4em 100% repeat-x,
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(90deg, #f97316 0 16.6%, #2563eb 0 33.3%, #e2e8f0 0 50%, #9333ea 0 66.6%, #16a34a 0 83.3%, #dc2626 0) 0 100% / 100% 48% no-repeat,
    linear-gradient(180deg, #1c3640, #0f2129);
  text-shadow: 0 0 .35em #5eead4, 0 1px 0 #042f2e, 0 0 2px #042f2e;
  --gs: 0 .3em 0 #6b4423, 0 .5em 1em rgba(45, 212, 191, .3); --gs-h: 0 .34em 0 #6b4423, 0 .7em 1.4em rgba(45, 212, 191, .5); --gs-a: 0 .06em 0 #6b4423; }
.btn-roll.gen-lab:hover { background-position: 0 0, 18% 40%, 0 0, 0 100%, 0 0; transition: background-position .6s ease-out, transform .15s ease, box-shadow .15s ease; }
/* Wheelie (idée de JBearr12, 2026-10-21) : une bande de bitume, la ligne jaune pointillée qui défile au survol. */
.btn-roll.gen-wheelie { border: 2px solid #18181b; border-radius: .5em; color: #fafafa;
  background: repeating-linear-gradient(90deg, #facc15 0 .9em, transparent .9em 1.6em) 0 calc(100% - .25em) / 100% .1em no-repeat, linear-gradient(180deg, #d6d3d1 0 .14em, #3f3f46 .14em, #27272a); text-shadow: 0 1px 0 #000;
  --gs: 0 .3em 0 #09090b, 0 .5em 1em rgba(250, 204, 21, .25); --gs-h: 0 .34em 0 #09090b, 0 .7em 1.3em rgba(251, 146, 60, .4); --gs-a: 0 .06em 0 #09090b; }
.btn-roll.gen-wheelie:hover { animation: wh-btn-road .6s linear infinite; }
@keyframes wh-btn-road { 0% { background-position: 0 calc(100% - .25em), 0 0; } 100% { background-position: -1.6em calc(100% - .25em), 0 0; } }
/* Polygon Donut (idée de PongonLOLZFan, 2026-10-21) : glaçage rose en facettes et quelques vermicelles. */
.btn-roll.gen-polydonut { border: 2px solid #be185d; border-radius: 999px; color: #fff; text-shadow: 0 1px 0 #831843;
  background: linear-gradient(35deg, transparent 46%, #facc15 46% 54%, transparent 54%) 12% 25% / .5em .5em no-repeat, linear-gradient(-40deg, transparent 46%, #38bdf8 46% 54%, transparent 54%) 86% 70% / .5em .5em no-repeat,
    linear-gradient(155deg, #fbcfe8 0 22%, #f9a8d4 22% 45%, #f472b6 45% 68%, #ec4899 68% 86%, #d6a05c 86%);
  --gs: 0 .3em 0 #9d174d, 0 .5em 1em rgba(236, 72, 153, .35); --gs-h: 0 .34em 0 #9d174d, 0 .7em 1.3em rgba(244, 114, 182, .5); --gs-a: 0 .06em 0 #9d174d; }
/* Sonic Wave (idée de Matthew, 2026-10-21) : l'écran d'un oscilloscope, une onde cyan au milieu, l'égaliseur en bas ;
   au survol, l'onde défile. */
.btn-roll.gen-sonic { border: 2px solid #22d3ee; border-radius: .6em; color: #ecfeff;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><path d='M0 20 Q10 4 20 20 T40 20 T60 20 T80 20' fill='none' stroke='%2367e8f9' stroke-opacity='.55' stroke-width='2'/><path d='M0 20 Q20 32 40 20 T80 20' fill='none' stroke='%23e879f9' stroke-opacity='.4' stroke-width='1.5'/></svg>") 0 50% / 2.6em 1.3em repeat-x,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='20'><g fill='%2322d3ee' fill-opacity='.3'><rect x='1' y='10' width='4' height='10'/><rect x='7' y='4' width='4' height='16'/><rect x='13' y='13' width='4' height='7'/><rect x='19' y='7' width='4' height='13'/><rect x='25' y='2' width='4' height='18'/><rect x='31' y='12' width='4' height='8'/><rect x='37' y='6' width='4' height='14'/><rect x='43' y='14' width='4' height='6'/></g></svg>") 0 100% / 2em .55em repeat-x,
    linear-gradient(180deg, #0a1033, #050816);
  text-shadow: -.06em 0 0 rgba(236, 72, 153, .7), .06em 0 0 rgba(34, 211, 238, .8), 0 0 .4em #22d3ee;
  --gs: 0 .3em 0 #164e63, 0 .5em 1em rgba(34, 211, 238, .35); --gs-h: 0 .34em 0 #164e63, 0 .7em 1.4em rgba(232, 121, 249, .45); --gs-a: 0 .06em 0 #164e63; }
.btn-roll.gen-sonic:hover { animation: gen-sonic-run .8s linear infinite; }
/* Christmas (idées de JBearr12 et Angelicide9, 2026-10-25) : un paquet cadeau, ruban doré en croix. */
.btn-roll.gen-christmas { border: 2px solid #7f1d1d; border-radius: .5em; color: #fffbeb;
  background:
    linear-gradient(90deg, transparent 46%, #fbbf24 46%, #fde68a 50%, #fbbf24 54%, transparent 54%),
    linear-gradient(180deg, transparent 44%, #fbbf24 44%, #fbbf24 56%, transparent 56%),
    radial-gradient(circle, rgba(255, 255, 255, .16) 0 2px, transparent 2.5px) 0 0 / 12px 12px,
    linear-gradient(180deg, #ef4444, #c81e1e 50%, #991b1b);
  text-shadow: 0 1px 0 #450a0a, 0 0 3px #450a0a, 0 0 .4em rgba(69, 10, 10, .9);
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(239, 68, 68, .3); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.4em rgba(34, 197, 94, .45); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-christmas:hover { filter: brightness(1.08); }
/* Snow Globe (événement de Noël, 2026-11-01) : de l'eau bleu nuit sous le verre, de la neige qui tombe, un reflet
   courbe en haut à gauche et le filet doré du socle en bas ; au survol, la neige tombe (on a secoué la boule). */
.btn-roll.gen-snowglobe { border: 2px solid rgba(219, 234, 254, .8); border-bottom: 4px solid #5a3416; border-radius: .8em .8em .35em .35em; color: #f8fbff;
  background:
    radial-gradient(ellipse 30% 70% at 12% 0%, rgba(255, 255, 255, .28), transparent 70%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='white'><circle cx='6' cy='8' r='1.5' opacity='.8'/><circle cx='22' cy='4' r='1' opacity='.6'/><circle cx='31' cy='19' r='1.6' opacity='.75'/><circle cx='13' cy='26' r='1.1' opacity='.6'/><circle cx='35' cy='34' r='.9' opacity='.5'/><circle cx='21' cy='36' r='1.3' opacity='.7'/></g></svg>") 0 0 / 22px 22px,
    linear-gradient(180deg, transparent calc(100% - 3px), #f3cf7a calc(100% - 3px)),
    linear-gradient(180deg, #1f5596, #143a70 60%, #0d2a54);
  text-shadow: 0 1px 0 #0c2a52, 0 0 3px #0c2a52, 0 0 .5em rgba(186, 230, 253, .7);
  --gs: 0 .3em 0 #3a200c, 0 .5em 1em rgba(125, 211, 252, .3); --gs-h: 0 .34em 0 #3a200c, 0 .7em 1.4em rgba(186, 230, 253, .5); --gs-a: 0 .06em 0 #3a200c; }
.btn-roll.gen-snowglobe:hover { animation: gen-snowglobe-fall 1.4s linear infinite; }
@keyframes gen-snowglobe-fall { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 22px, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-snowglobe:hover { animation: none; } }
/* Gingerbread (événement de Noël, 2026-11-01) : un grand biscuit en pain d'épices, une ligne de glace en zigzag près du
   bord et deux pastilles de sucre ; le texte est écrit à la glace blanche. */
.btn-roll.gen-gingerbread { border: 2px solid #6b3412; border-radius: .6em; color: #fffaf0;
  background:
    radial-gradient(circle at 8% 50%, #dc2626 0 4px, #7f1d1d 4.5px 5px, transparent 5.5px),
    radial-gradient(circle at 92% 50%, #16a34a 0 4px, #14532d 4.5px 5px, transparent 5.5px),
    linear-gradient(135deg, transparent 33%, #fffaf0 33% 41%, transparent 41%) 0 3px / 10px 6px repeat-x,
    linear-gradient(45deg, transparent 33%, #fffaf0 33% 41%, transparent 41%) 5px 3px / 10px 6px repeat-x,
    linear-gradient(135deg, transparent 33%, #fffaf0 33% 41%, transparent 41%) 0 calc(100% - 3px) / 10px 6px repeat-x,
    linear-gradient(45deg, transparent 33%, #fffaf0 33% 41%, transparent 41%) 5px calc(100% - 3px) / 10px 6px repeat-x,
    radial-gradient(circle, rgba(80, 35, 8, .35) 0 1px, transparent 1.6px) 0 0 / 7px 8px,
    linear-gradient(180deg, #d58a4a, #bd6c32 50%, #9c5222);
  text-shadow: 0 2px 0 #6b3412, 0 0 3px #6b3412, 0 0 .4em rgba(107, 52, 18, .9);
  --gs: 0 .3em 0 #6b3412, 0 .5em 1em rgba(217, 119, 6, .3); --gs-h: 0 .34em 0 #6b3412, 0 .7em 1.4em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #6b3412; }
.btn-roll.gen-gingerbread:hover { filter: brightness(1.08); }
/* Ugly Sweater (événement de Noël, 2026-11-01) : du jersey rouge tricoté, une bordure de côtes vertes en haut et en bas,
   texte en laine crème. */
.btn-roll.gen-sweater { border: 2px solid #7f1d1d; border-radius: .5em; color: #fffaf0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><defs><mask id='m'><rect width='10' height='10' fill='white'/><ellipse cx='2.75' cy='5' rx='2.05' ry='5' transform='rotate(-28 2.75 5)'/><ellipse cx='7.25' cy='5' rx='2.05' ry='5' transform='rotate(28 7.25 5)'/></mask></defs><rect width='10' height='10' fill='%23000' opacity='0.26' mask='url(%23m)'/><ellipse cx='2.3' cy='3.7' rx='.75' ry='2.5' transform='rotate(-28 2.3 3.7)' fill='%23fff' opacity='0.12'/><ellipse cx='7.7' cy='3.7' rx='.75' ry='2.5' transform='rotate(28 7.7 3.7)' fill='%23fff' opacity='0.12'/></svg>") 0 0 / 7px 7px, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3' shape-rendering='crispEdges'><rect width='4' height='3' fill='%23166534'/><rect x='0' y='0' width='1' height='1' fill='%23166534'/><rect x='1' y='0' width='1' height='1' fill='%23166534'/><rect x='2' y='0' width='1' height='1' fill='%230f4a26'/><rect x='3' y='0' width='1' height='1' fill='%230f4a26'/><rect x='0' y='1' width='1' height='1' fill='%23166534'/><rect x='1' y='1' width='1' height='1' fill='%23166534'/><rect x='2' y='1' width='1' height='1' fill='%230f4a26'/><rect x='3' y='1' width='1' height='1' fill='%230f4a26'/><rect x='0' y='2' width='1' height='1' fill='%23fdf3d8'/><rect x='1' y='2' width='1' height='1' fill='%23dc2626'/><rect x='2' y='2' width='1' height='1' fill='%23fdf3d8'/><rect x='3' y='2' width='1' height='1' fill='%23dc2626'/></svg>") 0 0 / 12px 9px repeat-x, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3' shape-rendering='crispEdges'><rect width='4' height='3' fill='%23166534'/><rect x='0' y='0' width='1' height='1' fill='%23fdf3d8'/><rect x='1' y='0' width='1' height='1' fill='%23dc2626'/><rect x='2' y='0' width='1' height='1' fill='%23fdf3d8'/><rect x='3' y='0' width='1' height='1' fill='%23dc2626'/><rect x='0' y='1' width='1' height='1' fill='%23166534'/><rect x='1' y='1' width='1' height='1' fill='%23166534'/><rect x='2' y='1' width='1' height='1' fill='%230f4a26'/><rect x='3' y='1' width='1' height='1' fill='%230f4a26'/><rect x='0' y='2' width='1' height='1' fill='%23166534'/><rect x='1' y='2' width='1' height='1' fill='%23166534'/><rect x='2' y='2' width='1' height='1' fill='%230f4a26'/><rect x='3' y='2' width='1' height='1' fill='%230f4a26'/></svg>") 0 100% / 12px 9px repeat-x, linear-gradient(180deg, #a91b1b, #c42727 50%, #a11a1a);
  text-shadow: 0 2px 0 #450a0a, 0 0 3px #450a0a, 0 0 .4em rgba(69, 10, 10, .9);
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(220, 38, 38, .3); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.4em rgba(253, 243, 216, .35); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-sweater:hover { filter: brightness(1.08); }
/* Turkey Roast (Thanksgiving 2026) : la queue de la dinde en éventail derrière le texte (plumes châtaigne, pointes
   crème), le centre plus sombre ; texte doré comme la peau rôtie. Au survol, la queue s'ouvre un peu plus. */
.btn-roll.gen-turkey { border: 2px solid #3a1505; border-radius: .6em; color: #ffd88a;
  background:
    radial-gradient(ellipse 48% 70% at 50% 75%, rgba(28, 12, 5, .92), rgba(28, 12, 5, .55) 60%, transparent 85%),
    /* les séparations des plumes par-dessus la bande crème : elle devient une rangée de pointes */
    repeating-conic-gradient(from -90deg at 50% 135%, rgba(28, 12, 5, .95) 0 1.2deg, transparent 1.2deg 8deg),
    radial-gradient(ellipse 58% 150% at 50% 135%, transparent 78%, #efe0bd 79% 85%, #24100a 86% 90%, transparent 91%),
    repeating-conic-gradient(from -90deg at 50% 135%, #86421b 0 7deg, #3d1a09 7deg 8deg, #6f3314 8deg 15deg, #3d1a09 15deg 16deg),
    #2b140a;
  text-shadow: 0 2px 0 #3a1505, 0 0 3px #3a1505, 0 0 .5em rgba(251, 146, 60, .6);
  --gs: 0 .3em 0 #3a1505, 0 .5em 1em rgba(234, 88, 12, .3); --gs-h: 0 .34em 0 #3a1505, 0 .7em 1.4em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #3a1505; }
.btn-roll.gen-turkey:hover { filter: brightness(1.1) saturate(1.1); }
/* Money (idées de JBearr12 et finnnnn, 2026-10-25) : un billet vert pâle à double cadre, texte doré. */
.btn-roll.gen-money { border: 2px solid #2f5d3a; border-radius: .35em; color: #fde68a;
  background: repeating-radial-gradient(ellipse 60% 90% at 50% 50%, transparent 0 4px, rgba(47, 93, 58, .12) 4px 5px), linear-gradient(180deg, #4d7c57, #2f5d3a);
  box-shadow: inset 0 0 0 3px #4d7c57, inset 0 0 0 4px #cddfba;
  text-shadow: 0 1px 0 #3b2304, 0 0 2px #3b2304;
  --gs: 0 .3em 0 #1c3b24, 0 .5em 1em rgba(250, 204, 21, .25); --gs-h: 0 .34em 0 #1c3b24, 0 .7em 1.4em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #1c3b24; }
.btn-roll.gen-money:hover { filter: brightness(1.1); }
/* DNA Helix (idée de R77, 2026-10-25) : fond de labo sombre, deux brins cyan et magenta qui se croisent ; au survol,
   l'hélice tourne. */
.btn-roll.gen-dna { border: 2px solid #6366f1; border-radius: 999px; color: #fff;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' preserveAspectRatio='none'><path d='M0 20C10 40 30 40 40 20S70 0 80 20' fill='none' stroke='%2322d3ee' stroke-width='3' stroke-opacity='.6'/><path d='M0 20C10 0 30 0 40 20S70 40 80 20' fill='none' stroke='%23e879f9' stroke-width='3' stroke-opacity='.6'/></svg>") 0 50% / 3em 100% repeat-x,
    linear-gradient(180deg, #1e1b4b, #0b1030);
  text-shadow: 0 0 2px #1e1b4b, 0 0 .4em rgba(34, 211, 238, .8);
  --gs: 0 .3em 0 #312e81, 0 .5em 1em rgba(34, 211, 238, .3); --gs-h: 0 .34em 0 #312e81, 0 .7em 1.4em rgba(232, 121, 249, .45); --gs-a: 0 .06em 0 #312e81; }
.btn-roll.gen-dna:hover { animation: gen-dna-twist 1s linear infinite; }
@keyframes gen-dna-twist { to { background-position: 3em 50%, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-dna:hover { animation: none; } }
/* Elemental (idée de kaz, 2026-10-25) : quatre bandes roche, glace, feu, vent sous un liseré d'or ; au survol, elles défilent. */
.btn-roll.gen-elemental { border: 2px solid #d4a72c; border-radius: .6em; color: #fff;
  background: linear-gradient(90deg, #57534e 0 25%, #0369a1 25% 50%, #c2410c 50% 75%, #0f766e 75% 100%) 0 0 / 200% 100%;
  text-shadow: 0 1px 0 #000, 0 0 .4em rgba(0, 0, 0, .7);
  --gs: 0 .3em 0 #78350f, 0 .5em 1em rgba(212, 167, 44, .35); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.4em rgba(249, 115, 22, .45); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-elemental:hover { animation: gen-el-cycle 1.6s linear infinite; }
@keyframes gen-el-cycle { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-elemental:hover { animation: none; } }
/* Hot Dog (idée de finnnnn, 2026-10-26) : un pain doré, une saucisse grillée au milieu, un zigzag ketchup et moutarde ;
   au survol, la sauce coule. */
.btn-roll.gen-hotdog { border: 2px solid #7a3e10; border-radius: 999px; color: #fff7e6;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255, 58, 47, .85) 14px 17px, transparent 17px 26px, rgba(255, 210, 31, .85) 26px 29px, transparent 29px 40px),
    linear-gradient(180deg, #e6a54a 0 18%, #a8482a 30% 70%, #d18c38 82% 100%);
  background-size: 40px 100%, 100% 100%;
  text-shadow: 0 2px 0 #4a0606, 0 0 3px #4a0606;
  --gs: 0 .3em 0 #6b3410, 0 .5em 1em rgba(239, 68, 68, .3); --gs-h: 0 .34em 0 #6b3410, 0 .7em 1.4em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #6b3410; }
.btn-roll.gen-hotdog:hover { animation: gen-hotdog-drip 1.2s linear infinite; }
@keyframes gen-hotdog-drip { to { background-position: 40px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-hotdog:hover { animation: none; } }
/* Radioactive (idée de shadow2, 2026-10-26) : un fût d'acier, bandes de danger, lettres de gelée verte qui luisent ;
   au survol, la lueur grésille. */
.btn-roll.gen-radioactive { border: 2px solid #facc15; border-radius: .4em; color: #d4ff6a;
  background:
    repeating-linear-gradient(-45deg, #facc15 0 6px, #18181b 6px 12px) top / 100% 5px no-repeat,
    repeating-linear-gradient(-45deg, #facc15 0 6px, #18181b 6px 12px) bottom / 100% 5px no-repeat,
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(132, 255, 60, .4), transparent 70%),
    linear-gradient(90deg, #1f2a22, #34433a 40%, #18221b);
  text-shadow: 0 0 3px #a3ff3c, 0 0 10px rgba(132, 255, 60, .8), 0 1px 0 #052e16;
  --gs: 0 .3em 0 #0f1a12, 0 .5em 1em rgba(132, 255, 60, .3); --gs-h: 0 .34em 0 #0f1a12, 0 .7em 1.4em rgba(132, 255, 60, .55); --gs-a: 0 .06em 0 #0f1a12; }
.btn-roll.gen-radioactive:hover { animation: gen-rad-crackle .3s steps(1) infinite; }
@keyframes gen-rad-crackle { 0%, 60% { filter: brightness(1); } 30% { filter: brightness(1.35); } 80% { filter: brightness(1.15) saturate(1.3); } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-radioactive:hover { animation: none; } }
/* Waterfall (idée de JBearr12 et jjcoolcid1, 2026-10-24) : l'herbe en haut, un rideau d'eau, l'écume en bas ; au
   survol, l'eau coule. */
.btn-roll.gen-waterfall { border: 2px solid #14532d; border-radius: .6em; color: #fff;
  background:
    linear-gradient(180deg, #16a34a 0 14%, transparent 14%, transparent 82%, #f0f9ff 82%, #a5f3fc 90%, #0e7490) 0 0 / 100% 100%,
    repeating-linear-gradient(180deg, transparent 0 .3em, rgba(255, 255, 255, .35) .3em .45em, transparent .45em 1em) 0 0 / 100% 1em,
    linear-gradient(180deg, #38bdf8, #0284c7);
  text-shadow: 0 1px 0 #0c2b45, 0 0 2px #0c2b45, 0 0 .4em rgba(8, 47, 73, .8);
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(34, 211, 238, .3); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.4em rgba(125, 211, 252, .5); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-waterfall:hover { animation: gen-wtf-flow .6s linear infinite; }
@keyframes gen-wtf-flow { to { background-position: 0 0, 0 1em, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-waterfall:hover { animation: none; } }
/* Greek (idée de kaz, 2026-10-25) : un bloc de marbre cannelé sous une frise à méandres dorée, texte gravé ; au survol,
   un reflet doré passe sur la pierre. */
.btn-roll.gen-greek { border: 2px solid #b08d2a; border-radius: .3em; color: #1e3a5f;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'><rect width='20' height='10' fill='%231e3a5f'/><path d='M1 9V1h8v6H5V4h2' fill='none' stroke='%23e9c46a' stroke-width='1.3'/><path d='M11 9V1h8v6h-4V4h2' fill='none' stroke='%23e9c46a' stroke-width='1.3'/></svg>") 0 0 / .7em .35em repeat-x,
    linear-gradient(100deg, transparent 40%, rgba(253, 230, 138, .55) 50%, transparent 60%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(120, 113, 108, .18) 0, rgba(255, 255, 255, .5) .25em, rgba(120, 113, 108, .18) .4em),
    linear-gradient(90deg, #d6d3d1, #fafaf9 45%, #e7e5e4 70%, #a8a29e);
  text-shadow: 0 -1px 0 rgba(28, 25, 23, .4), 0 1px 0 #fff;
  --gs: 0 .3em 0 #78716c, 0 .5em 1em rgba(233, 196, 106, .3); --gs-h: 0 .34em 0 #78716c, 0 .7em 1.4em rgba(233, 196, 106, .5); --gs-a: 0 .06em 0 #78716c; }
.btn-roll.gen-greek:hover { animation: gen-grk-glint 1.2s ease-in-out infinite; }
@keyframes gen-grk-glint { to { background-position: 0 0, 300% 0, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-greek:hover { animation: none; } }
/* Fairy Dust (idée de R77, 2026-10-25) : velours violet semé de paillettes dorées ; au survol, elles scintillent. */
.btn-roll.gen-fairydust { border: 2px solid #c4b5fd; border-radius: .8em; color: #fff7d6;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><g fill='%23fde68a'><path d='M7 4l.5 1.5 1.5.5-1.5.5-.5 1.5-.5-1.5-1.5-.5 1.5-.5z'/><path d='M30 12l.5 1.5 1.5.5-1.5.5-.5 1.5-.5-1.5-1.5-.5 1.5-.5z'/><circle cx='19' cy='8' r='.8'/><circle cx='36' cy='3' r='.6'/><circle cx='13' cy='16' r='.6'/></g></svg>") 0 0 / 2em 1em,
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(244, 114, 182, .35), transparent 70%),
    linear-gradient(160deg, #6d28d9, #4c1d95 55%, #2e1065);
  text-shadow: 0 1px 0 #3b0764, 0 0 2px #3b0764, 0 0 .5em rgba(253, 224, 71, .7);
  --gs: 0 .3em 0 #3b0764, 0 .5em 1em rgba(216, 180, 254, .35); --gs-h: 0 .34em 0 #3b0764, 0 .7em 1.4em rgba(253, 224, 71, .45); --gs-a: 0 .06em 0 #3b0764; }
.btn-roll.gen-fairydust:hover { animation: gen-fdu-glint .9s ease-in-out infinite; }
@keyframes gen-fdu-glint { 50% { background-position: .2em -.15em, 0 0, 0 0; filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-fairydust:hover { animation: none; } }
@keyframes gen-sonic-run { to { background-position: -2.6em 50%, 0 100%, 0 0; } }
/* UFO (idée de JBearr12, 2026-10-21) : un ciel de nuit, l'herbe en bas, un rayon vert qui descend au milieu. */
.btn-roll.gen-ufo { border: 2px solid #84cc16; border-radius: 999px; color: #f7fee7;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='20'><path d='M0 20 L3 8 L5 20 L8 4 L11 20 L13 10 L16 20 L19 6 L22 20 L25 11 L27 20 L30 3 L33 20 L36 9 L38 20 L41 5 L44 20 L47 10 L49 20 L52 6 L55 20 L57 9 L60 20 Z' fill='%2316a34a'/></svg>") 0 100% / 2.4em .5em repeat-x,
    linear-gradient(90deg, transparent 30%, rgba(190, 242, 100, .35) 42%, rgba(217, 249, 157, .5) 50%, rgba(190, 242, 100, .35) 58%, transparent 70%),
    radial-gradient(1px 1px at 12% 25%, #fff, transparent), radial-gradient(1px 1px at 82% 20%, #fff, transparent), radial-gradient(1px 1px at 68% 45%, #bbf7d0, transparent),
    linear-gradient(180deg, #0b1026, #1b2550);
  text-shadow: 0 0 .35em #a3e635, 0 1px 0 #052e16, 0 0 2px #052e16;
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(132, 204, 22, .32); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.4em rgba(190, 242, 100, .5); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-ufo:hover { animation: gen-ufo-beam .5s steps(2) infinite; }
@keyframes gen-ufo-beam { 50% { filter: brightness(1.18); } }
/* Burger (idée de jaxoncool43, 2026-10-23) : un pain brioché doré et brillant semé de sésame, la salade qui dépasse en
   bas et le steak dessous ; au survol, le pain sort du grill un peu plus doré. */
.btn-roll.gen-burger { border: 2px solid #92400e; border-radius: 999px 999px .7em .7em; color: #fffbeb;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><g fill='%23fffbeb' fill-opacity='.85'><ellipse cx='6' cy='5' rx='2' ry='1' transform='rotate(-20 6 5)'/><ellipse cx='20' cy='3' rx='2' ry='1' transform='rotate(15 20 3)'/><ellipse cx='33' cy='6' rx='2' ry='1' transform='rotate(-30 33 6)'/><ellipse cx='13' cy='10' rx='2' ry='1' transform='rotate(25 13 10)'/><ellipse cx='27' cy='11' rx='2' ry='1' transform='rotate(-10 27 11)'/></g></svg>") 0 .1em / 2em 1em repeat-x,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='8' preserveAspectRatio='none'><path d='M0 0Q2.5 7 5 2Q7.5 7 10 2Q12.5 7 15 2Q17.5 7 20 0V8H0Z' fill='%2384cc16'/></svg>") 0 calc(100% - .32em) / 1em .32em repeat-x,
    linear-gradient(180deg, transparent calc(100% - .34em), #7c2d12 calc(100% - .34em)),
    radial-gradient(ellipse 60% 40% at 40% 18%, rgba(254, 243, 199, .55), transparent 70%),
    linear-gradient(180deg, #fbbf24, #d97706 60%, #b45309);
  text-shadow: 0 1px 0 #78350f, 0 0 2px #78350f, 0 0 .3em rgba(120, 53, 15, .8);
  --gs: 0 .3em 0 #78350f, 0 .5em 1em rgba(245, 158, 11, .3); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.4em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-burger:hover { filter: brightness(1.08) saturate(1.1); }
/* Wood carving (idée de jjcoolcid1 et JBearr12, 2026-10-25) : une planche de pin veinée, le texte taillé en creux ; au
   survol, la planche s'éclaire comme sous la lampe de l'établi. */
.btn-roll.gen-woodcarving { border: 2px solid #7c4a1e; border-radius: .5em; color: #fff3dc;
  background:
    repeating-linear-gradient(178deg, transparent 0 .3em, rgba(133, 77, 30, .25) .31em .35em, transparent .36em .6em),
    radial-gradient(ellipse 70% 60% at 40% 25%, rgba(255, 240, 210, .45), transparent 70%),
    linear-gradient(180deg, #d9a463, #b9793a 60%, #8f5a26);
  text-shadow: 0 -1px 0 #3a1b06, 0 1px 0 rgba(255, 238, 205, .5), 0 0 .3em rgba(58, 27, 6, .7);
  --gs: 0 .3em 0 #5c3010, 0 .5em 1em rgba(168, 105, 47, .3); --gs-h: 0 .34em 0 #5c3010, 0 .7em 1.4em rgba(217, 164, 99, .45); --gs-a: 0 .06em 0 #5c3010; }
.btn-roll.gen-woodcarving:hover { filter: brightness(1.1) saturate(1.05); }
/* Blinds (idée de costoroll, 2026-10-21) : un store vénitien beige fermé, texte jaune néon ; au survol, les lames
   pivotent et laissent voir le ciel bleu derrière. */
.btn-roll.gen-blinds { border: 2px solid #a4804a; border-radius: .45em; color: #fef08a;
  background: repeating-linear-gradient(180deg, #f6ead0 0, #d9bf8d .3em, rgba(80, 56, 24, .55) .3em, transparent calc(.3em + 1px), transparent .32em) 0 0 / 100% .32em, linear-gradient(180deg, #2563eb, #93c5fd);
  text-shadow: 0 0 .25em #facc15, 0 0 .5em rgba(250, 204, 21, .6), 0 0 2px #713f12, 0 1px 0 #713f12;
  transition: transform .15s ease, box-shadow .15s ease;
  --gs: 0 .3em 0 #7c5a2c, 0 .5em 1em rgba(250, 204, 21, .25); --gs-h: 0 .34em 0 #7c5a2c, 0 .7em 1.4em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #7c5a2c; }
/* lames vues de la tranche : elles s'amincissent, le ciel apparaît entre elles */
.btn-roll.gen-blinds:hover { background-image: repeating-linear-gradient(180deg, #f6ead0 0, #d9bf8d .06em, rgba(80, 56, 24, .55) .06em, transparent calc(.06em + 1px), transparent .32em), linear-gradient(180deg, #2563eb, #93c5fd); }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-sonic:hover, .btn-roll.gen-ufo:hover { animation: none; } }
/* Bowling (idée de JBearr12, 2026-10-25) : une boule violette brillante sur une latte d'érable. */
.btn-roll.gen-bowling { border: 2px solid #78350f; border-radius: 999px; color: #fff7ed;
  background: radial-gradient(circle at 22% 35%, #c4b5fd 0 .12em, transparent .16em), radial-gradient(circle at 30% 30%, #7c3aed, #3b0764 70%), linear-gradient(180deg, #e8c48f, #c9955a);
  background-size: 100% 100%, 2.2em 2.2em, 100% 100%; background-position: 0 0, .4em 50%, 0 0; background-repeat: no-repeat;
  text-shadow: 0 1px 0 #451a03, 0 0 .3em rgba(0, 0, 0, .4);
  --gs: 0 .3em 0 #78350f, 0 .5em 1em rgba(124, 58, 237, .3); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.3em rgba(167, 139, 250, .45); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-bowling:hover { filter: brightness(1.08); }
/* Rock Smash (idée de HSI, 2026-10-25) : une dalle de granit moucheté, une fissure ambre qui luit. */
.btn-roll.gen-rocksmash { border: 2px solid #292524; border-radius: .7em .5em .8em .45em; color: #fef3c7;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35) 0 1px, transparent 2px) 0 0 / .5em .45em, linear-gradient(115deg, transparent 47%, rgba(245, 158, 11, .7) 48.5%, transparent 50.5%), linear-gradient(160deg, #a8a29e, #78716c 55%, #57534e);
  text-shadow: 0 0 .3em #f59e0b, 0 1px 0 #292524;
  --gs: 0 .3em 0 #292524, 0 .5em 1em rgba(0, 0, 0, .35); --gs-h: 0 .34em 0 #292524, 0 .7em 1.3em rgba(245, 158, 11, .4); --gs-a: 0 .06em 0 #292524; }
.btn-roll.gen-rocksmash:hover { filter: brightness(1.08); }
/* Cracked Screen (idée de KMC, 2026-10-25) : une vitre noire bleutée, une fissure en étoile dans un coin. */
.btn-roll.gen-cracked { border: 2px solid #3f3f46; border-radius: .8em; color: #f8fafc;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='none' stroke='%23e0f2fe' stroke-opacity='.6' stroke-width='.8'><path d='M30 10L22 2M30 10L40 6M30 10L38 22M30 10L24 20L14 24M30 10L18 12'/></g></svg>") 100% 0 / 2.4em 2.4em no-repeat, linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .1) 45%, transparent 55%), radial-gradient(ellipse at 50% 50%, #0b1730, #020409);
  text-shadow: -.04em 0 rgba(239, 68, 68, .7), .04em 0 rgba(34, 211, 238, .7);
  --gs: 0 .3em 0 #18181b, 0 .5em 1em rgba(56, 189, 248, .25); --gs-h: 0 .34em 0 #18181b, 0 .7em 1.3em rgba(56, 189, 248, .45); --gs-a: 0 .06em 0 #18181b; }
.btn-roll.gen-cracked:hover { filter: brightness(1.12); }
/* Medieval Castle (idée de BIGBOIJONER69, 2026-10-25) : un bloc de rempart, des créneaux en haut, texte doré. */
.btn-roll.gen-castle { border: 2px solid #292524; border-radius: .3em; color: #fde68a;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'><path d='M0 10V0H7V5H13V0H20V10Z' fill='%23a8a29e'/></svg>") 0 0 / 1.4em .45em repeat-x, repeating-linear-gradient(180deg, transparent 0 .7em, rgba(28, 25, 23, .5) .7em .76em), linear-gradient(180deg, #78716c, #57534e);
  padding-top: .5em; text-shadow: 0 1px 0 #451a03, 0 0 .3em rgba(251, 191, 36, .5);
  --gs: 0 .3em 0 #292524, 0 .5em 1em rgba(202, 138, 4, .25); --gs-h: 0 .34em 0 #292524, 0 .7em 1.3em rgba(251, 191, 36, .4); --gs-a: 0 .06em 0 #292524; }
.btn-roll.gen-castle:hover { filter: brightness(1.1); }
/* Chocolate (idée de finnnnn, 2026-10-25) : des carrés de chocolat au lait biseautés, papier doré aux bouts. */
.btn-roll.gen-chocolate { border: 2px solid #2a1408; border-radius: .45em; color: #fde68a;
  background: linear-gradient(90deg, #ca8a04, #fef3c7 40%, #b45309) 0 0 / .45em 100% no-repeat, linear-gradient(90deg, #b45309, #fef3c7 60%, #ca8a04) 100% 0 / .45em 100% no-repeat, linear-gradient(90deg, rgba(42, 20, 8, .7) .08em, transparent .08em) 0 0 / 1.6em 100%, linear-gradient(145deg, #a0592c, #7b3f1c 55%, #5e2e12);
  text-shadow: 0 1px 0 #2a1408;
  --gs: 0 .3em 0 #2a1408, 0 .5em 1em rgba(123, 63, 28, .35); --gs-h: 0 .34em 0 #2a1408, 0 .7em 1.3em rgba(202, 138, 4, .4); --gs-a: 0 .06em 0 #2a1408; }
.btn-roll.gen-chocolate:hover { filter: brightness(1.08); }
/* White Chocolate (idée de qwertyuiop, 2026-11-01) : des carrés de chocolat blanc, papier rose et argent aux bouts. */
.btn-roll.gen-whitechoc { border: 2px solid #8a6d45; border-radius: .45em; color: #7a5528;
  background: linear-gradient(90deg, #db2777, #fbcfe8 40%, #be185d) 0 0 / .45em 100% no-repeat, linear-gradient(90deg, #64748b, #f8fafc 60%, #94a3b8) 100% 0 / .45em 100% no-repeat, linear-gradient(90deg, rgba(160, 125, 75, .45) .08em, transparent .08em) 0 0 / 1.6em 100%, linear-gradient(145deg, #fffaf0, #f6e9cf 55%, #e8d3aa);
  text-shadow: 0 1px 0 #fffaf0;
  --gs: 0 .3em 0 #8a6d45, 0 .5em 1em rgba(244, 114, 182, .25); --gs-h: 0 .34em 0 #8a6d45, 0 .7em 1.3em rgba(244, 114, 182, .4); --gs-a: 0 .06em 0 #8a6d45; }
.btn-roll.gen-whitechoc:hover { filter: brightness(1.05); }
/* Floppy Fish (idée d'AnnJoe, 2026-10-25) : la mare, une ligne d'eau ondulée, le ciel au-dessus. */
.btn-roll.gen-fish { border: 2px solid #0c4a6e; border-radius: .8em; color: #fff;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><path d='M0 4Q5 0 10 4T20 4T30 4T40 4V10H0Z' fill='%230ea5e9'/><path d='M0 4Q5 0 10 4T20 4T30 4T40 4' fill='none' stroke='%23f0f9ff' stroke-width='1.4'/></svg>") 0 35% / 2em .4em repeat-x, linear-gradient(180deg, #bae6fd 0 42%, #0ea5e9 42%, #0369a1);
  -webkit-text-stroke: .04em #0c2b45; text-shadow: 0 .06em 0 #0c2b45;
  --gs: 0 .3em 0 #0c4a6e, 0 .5em 1em rgba(14, 165, 233, .35); --gs-h: 0 .34em 0 #0c4a6e, 0 .7em 1.3em rgba(56, 189, 248, .5); --gs-a: 0 .06em 0 #0c4a6e; }
.btn-roll.gen-fish:hover { filter: brightness(1.08); }
/* Axe Thrower (idée de jjcoolcid1, 2026-10-25) : des planches sombres, une rondelle de bois cible à gauche. */
.btn-roll.gen-axeman { border: 2px solid #1c120a; border-radius: .45em; color: #fde68a;
  background: radial-gradient(circle, #f5deb3 0 15%, #cfa66c 16% 30%, #ecd0a0 31% 50%, #7c4a22 51% 62%, transparent 63%) .3em 50% / 1.6em 1.6em no-repeat, linear-gradient(90deg, rgba(0, 0, 0, .45) 1px, transparent 1px) 0 0 / 1.2em 100%, linear-gradient(180deg, #5a4030, #3a2819);
  text-shadow: 0 1px 0 #1c120a;
  --gs: 0 .3em 0 #1c120a, 0 .5em 1em rgba(180, 83, 9, .3); --gs-h: 0 .34em 0 #1c120a, 0 .7em 1.3em rgba(245, 158, 11, .4); --gs-a: 0 .06em 0 #1c120a; }
.btn-roll.gen-axeman:hover { filter: brightness(1.1); }
/* Math (idée de sennybex1, 2026-10-25) : un petit tableau vert dans son cadre de bois, texte à la craie. */
.btn-roll.gen-math { border: .18em solid #7c4a22; border-radius: .35em; color: #f8fafc;
  background: radial-gradient(ellipse 30% 40% at 25% 40%, rgba(255, 255, 255, .08), transparent 70%), linear-gradient(180deg, #1f4a37, #12301f);
  text-shadow: .02em .02em 0 rgba(248, 250, 252, .4), 0 0 .2em rgba(248, 250, 252, .4);
  --gs: 0 .3em 0 #4a2a12, 0 .5em 1em rgba(31, 74, 55, .4); --gs-h: 0 .34em 0 #4a2a12, 0 .7em 1.3em rgba(74, 222, 128, .3); --gs-a: 0 .06em 0 #4a2a12; }
.btn-roll.gen-math:hover { filter: brightness(1.12); }
/* Blackjack (idée de kaz, 2026-10-26) : le feutre vert d'une table, un liseré doré, un pique et un cœur aux bords. */
.btn-roll.gen-blackjack { border: 2px solid #a16207; border-radius: .7rem; color: #fefce8;
  background: radial-gradient(ellipse 70% 140% at 50% -40%, transparent 78%, rgba(250, 204, 21, .45) 79% 81%, transparent 82%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #16a34a, #0f5f2e);
  text-shadow: 0 1px 0 #052e16, 0 0 .3em rgba(0, 0, 0, .4);
  --gs: 0 .3em 0 #5b3311, 0 .5em 1em rgba(22, 163, 74, .3); --gs-h: 0 .34em 0 #5b3311, 0 .7em 1.3em rgba(250, 204, 21, .35); --gs-a: 0 .06em 0 #5b3311; }
.btn-roll.gen-blackjack:hover { filter: brightness(1.08); }
/* Rocket (idée de HSI, 2026-10-26) : un ciel de nuit, la lueur orange du pas de tir en bas. */
.btn-roll.gen-rocket { border: 2px solid #f97316; border-radius: 999px; color: #f8fafc;
  background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 78% 25%, #fff, transparent), radial-gradient(ellipse 60% 60% at 50% 120%, rgba(251, 146, 60, .7), transparent 75%), linear-gradient(180deg, #0b1a3a, #1e1b4b);
  text-shadow: 0 1px 0 #0f172a, 0 0 .4em rgba(251, 146, 60, .7);
  --gs: 0 .3em 0 #7c2d12, 0 .5em 1em rgba(249, 115, 22, .3); --gs-h: 0 .34em 0 #7c2d12, 0 .7em 1.4em rgba(251, 146, 60, .5); --gs-a: 0 .06em 0 #7c2d12; }
.btn-roll.gen-rocket:hover { filter: brightness(1.1); }
/* Sushi (idée de Gray alt, 2026-10-26) : un maki vu de dessus, riz blanc et cœur de saumon sur une planche claire. */
.btn-roll.gen-sushi { border: 2px solid #92400e; border-radius: 999px; color: #fffdf8;
  background: radial-gradient(circle at 1.3em 50%, #fb923c 0 .22em, #fffdf8 .26em .6em, #1f2d1f .62em .78em, transparent .8em), linear-gradient(180deg, #e7c08a, #c98f4f);
  padding-left: 2.4em; text-shadow: 0 1px 0 #451a03, 0 0 .3em rgba(69, 26, 3, .6);
  --gs: 0 .3em 0 #78350f, 0 .5em 1em rgba(251, 146, 60, .25); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.3em rgba(251, 146, 60, .4); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-sushi:hover { filter: brightness(1.08); }
/* Comic Book (idée de JBearr12, 2026-10-26) — une case de BD : trame, rayons jaunes, trait d'encre et ombre franche. */
.btn-roll.gen-comicbook {
  overflow: hidden; border-radius: .3rem; border: 3px solid #0a0a0a; color: #facc15; -webkit-text-stroke: .04em #0a0a0a; paint-order: stroke fill;
  font-family: Impact, 'Arial Black', sans-serif; letter-spacing: .04em;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(250, 204, 21, .6) 0 9deg, transparent 9deg 18deg), radial-gradient(circle, rgba(236, 72, 153, .3) 0 1.2px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(180deg, #fff7d6, #fbbf24);
  text-shadow: .06em .07em 0 #dc2626, .1em .11em 0 #0a0a0a;
  --gs: 5px 5px 0 #0a0a0a, 0 0 18px rgba(236, 72, 153, .3); --gs-h: 7px 7px 0 #0a0a0a, 0 0 28px rgba(236, 72, 153, .5); --gs-a: 1px 1px 0 #0a0a0a;
}
.btn-roll.gen-comicbook:hover { transform: rotate(-1.5deg) scale(1.03); }
/* ==== Skins du 2026-10-27, lot A : boutons assortis ==== */
/* Fairy Lights (idée de 17black, 2026-10-27) : une vitre de nuit, une guirlande d'ampoules en feston en haut. */
.btn-roll.gen-fairylights { border: 2px solid #6b4423; border-radius: .6rem; color: #fff7e6;
  background: radial-gradient(circle at 12% 22%, #f87171 0 .14em, transparent .3em), radial-gradient(circle at 30% 30%, #4ade80 0 .14em, transparent .3em), radial-gradient(circle at 50% 33%, #fbbf24 0 .14em, transparent .3em), radial-gradient(circle at 70% 30%, #60a5fa 0 .14em, transparent .3em), radial-gradient(circle at 88% 22%, #f472b6 0 .14em, transparent .3em), radial-gradient(ellipse 60% 30% at 50% 0, transparent 70%, rgba(22, 101, 52, .9) 72% 78%, transparent 80%), linear-gradient(180deg, #0a0f24, #1a1442);
  text-shadow: 0 0 .3em #fbbf24, 0 1px 0 #000;
  --gs: 0 .3em 0 #2a1a0c, 0 .5em 1em rgba(251, 191, 36, .25); --gs-h: 0 .34em 0 #2a1a0c, 0 .7em 1.4em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #2a1a0c; }
.btn-roll.gen-fairylights:hover { animation: gen-fl-twinkle .9s steps(1) 1; }
@keyframes gen-fl-twinkle { 0%, 100% { filter: none; } 20% { filter: brightness(1.25) saturate(1.3); } 40% { filter: brightness(.9); } 60% { filter: brightness(1.2); } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-fairylights:hover { animation: none; } }
/* Elves' Workshop (idée de costoroll, 2026-10-27) : un tapis roulant noir strié, une planchette de pin à gauche. */
.btn-roll.gen-workshop { border: 2px solid #44403c; border-radius: .45em; color: #fde68a;
  background: linear-gradient(180deg, #e6b874, #d4a05a) .45em 50% / 1.2em 1.3em no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px), linear-gradient(180deg, #a8a29e 0 3px, #292524 3px calc(100% - 3px), #a8a29e calc(100% - 3px));
  padding-left: 2.2em; text-shadow: 0 1px 0 #000, 0 0 .3em rgba(251, 191, 36, .5);
  --gs: 0 .3em 0 #1c1917, 0 .5em 1em rgba(251, 191, 36, .2); --gs-h: 0 .34em 0 #1c1917, 0 .7em 1.3em rgba(251, 191, 36, .4); --gs-a: 0 .06em 0 #1c1917; }
.btn-roll.gen-workshop:hover { animation: gen-wsh-belt .5s linear infinite; }
@keyframes gen-wsh-belt { to { background-position: .45em 50%, -9px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-workshop:hover { animation: none; } }
/* Snow Reveal (idée de G8_floppa, 2026-10-27) : de la neige fraîche, des paillettes, le texte creusé en bleu. */
.btn-roll.gen-snowreveal { border: 2px solid #bfdbfe; border-radius: 999px; color: #2f5d9e;
  background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px) 0 0 / 14px 12px, radial-gradient(ellipse 60% 50% at 20% 120%, rgba(147, 197, 253, .55), transparent 70%), linear-gradient(180deg, #ffffff, #e2ecf7);
  text-shadow: 0 -1px 0 rgba(23, 47, 110, .5), 0 1px 0 #fff;
  --gs: 0 .3em 0 #93c5fd, 0 .5em 1em rgba(147, 197, 253, .35); --gs-h: 0 .34em 0 #93c5fd, 0 .7em 1.3em rgba(186, 230, 253, .6); --gs-a: 0 .06em 0 #93c5fd; }
.btn-roll.gen-snowreveal:hover { filter: brightness(1.04); }
/* Graveyard (idée d'IXOLAF2, 2026-10-27) : une nuit violette, la lune, une pierre tombale à gauche. */
.btn-roll.gen-graves { border: 2px solid #6d28d9; border-radius: .6rem; color: #bbf7d0;
  background: radial-gradient(ellipse .5em .62em at .95em 62%, #9ca3af 0 60%, transparent 62%) 0 0 / 100% 100% no-repeat, radial-gradient(circle at 88% 28%, #fef9c3 0 .3em, rgba(254, 249, 195, .3) .34em .6em, transparent .8em), linear-gradient(180deg, transparent 78%, #3b2a1e 78%), linear-gradient(180deg, #1c1340, #3b2a5e);
  padding-left: 2em; text-shadow: 0 0 .35em #22c55e, 0 1px 0 #000;
  --gs: 0 .3em 0 #2e1065, 0 .5em 1em rgba(134, 239, 172, .2); --gs-h: 0 .34em 0 #2e1065, 0 .7em 1.3em rgba(134, 239, 172, .4); --gs-a: 0 .06em 0 #2e1065; }
.btn-roll.gen-graves:hover { filter: brightness(1.12); }
/* Ship Wake (idée de 17black, 2026-10-27) : la mer vue d'en haut, un sillage d'écume en V à gauche. */
.btn-roll.gen-shipwake { border: 2px solid #0369a1; border-radius: 999px; color: #f0fdff;
  background: linear-gradient(160deg, transparent 46%, rgba(240, 253, 255, .55) 49%, transparent 54%) 0 0 / 2.2em 50% no-repeat, linear-gradient(20deg, transparent 46%, rgba(240, 253, 255, .55) 49%, transparent 54%) 0 100% / 2.2em 50% no-repeat, linear-gradient(160deg, #0e7490, #0c4a6e 60%, #082f49);
  text-shadow: 0 0 .3em rgba(224, 242, 254, .8), 0 1px 0 #082f49;
  --gs: 0 .3em 0 #075985, 0 .5em 1em rgba(56, 189, 248, .3); --gs-h: 0 .34em 0 #075985, 0 .7em 1.3em rgba(56, 189, 248, .5); --gs-a: 0 .06em 0 #075985; }
.btn-roll.gen-shipwake:hover { filter: brightness(1.1); }
/* Torn Paper (idée de 17black, 2026-10-27) : du kraft déchiré en diagonale sur une affiche jaune. */
.btn-roll.gen-tornpaper { border: 2px solid #8a5f2e; border-radius: .3rem; color: #111;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Black', sans-serif; letter-spacing: .04em;
  background: linear-gradient(100deg, #c49a5f 0 18%, #fbf7ec 18.5% 20%, transparent 20.5% 80%, #fbf7ec 80.5% 82%, #c49a5f 82.5%), radial-gradient(circle, rgba(236, 72, 153, .3) 0 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(160deg, #fde047, #f59e0b);
  --gs: 0 .3em 0 #6b4423, 0 .5em 1em rgba(250, 204, 21, .25); --gs-h: 0 .34em 0 #6b4423, 0 .7em 1.3em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #6b4423; }
.btn-roll.gen-tornpaper:hover { filter: brightness(1.06); }
/* Stickman (idée de Jguz01, 2026-10-27) : une page de cahier, lignes bleues et marge rouge, texte au feutre. */
.btn-roll.gen-stickman { border: 2px solid #1f2937; border-radius: .35rem; color: #111827;
  font-family: 'Marker Felt', 'Segoe Print', 'Chalkboard SE', 'Comic Sans MS', cursive;
  background: linear-gradient(90deg, transparent 1.1em, rgba(239, 68, 68, .6) 1.1em 1.2em, transparent 1.2em), repeating-linear-gradient(180deg, transparent 0 .6em, rgba(96, 165, 250, .45) .6em .66em), #fdfbf3;
  --gs: 3px 4px 0 #1f2937; --gs-h: 4px 6px 0 #1f2937; --gs-a: 1px 1px 0 #1f2937; }
.btn-roll.gen-stickman:hover { transform: rotate(-1deg) translateY(-1px); }

/* ==== Skins du 2026-10-27, lot B ==== boutons assortis */
/* Baseball (idée de Kj13, 2026-10-27) : le cuir crème d'une balle et ses coutures rouges sur les bords. */
.btn-roll.gen-baseball { border: 2px solid #a8a29e; border-radius: 999px; color: #1e3a8a;
  background: radial-gradient(ellipse 40% 140% at -8% 50%, transparent 70%, #dc2626 71% 74%, transparent 75%), radial-gradient(ellipse 40% 140% at 108% 50%, transparent 70%, #dc2626 71% 74%, transparent 75%), linear-gradient(180deg, #fbf8f1, #e5dcc6);
  text-shadow: 0 1px 0 #fff;
  --gs: 0 .3em 0 #78716c, 0 .5em 1em rgba(220, 38, 38, .2); --gs-h: 0 .34em 0 #78716c, 0 .7em 1.3em rgba(220, 38, 38, .35); --gs-a: 0 .06em 0 #78716c; }
.btn-roll.gen-baseball:hover { filter: brightness(1.04); }
/* Race Car (idée de whywhywaylon, 2026-10-27) : l'asphalte, un vibreur rouge et blanc dessous, un damier à gauche. */
.btn-roll.gen-racecar { border: 2px solid #0b0b0f; border-radius: .5rem; color: #fff; font-style: italic;
  background: repeating-linear-gradient(90deg, #dc2626 0 10px, #f8fafc 10px 20px) 0 100% / 100% 4px no-repeat, conic-gradient(#0b0b0f 25%, #f8fafc 0 50%, #0b0b0f 0 75%, #f8fafc 0) 0 0 / 10px 10px repeat-y, linear-gradient(180deg, #3f3f46, #18181b);
  padding-left: 1.6em; text-shadow: .06em .06em 0 #dc2626, 0 0 .2em rgba(0, 0, 0, .6);
  --gs: 0 .3em 0 #7f1d1d, 0 .5em 1em rgba(220, 38, 38, .3); --gs-h: 0 .34em 0 #7f1d1d, 0 .7em 1.3em rgba(220, 38, 38, .45); --gs-a: 0 .06em 0 #7f1d1d; }
.btn-roll.gen-racecar:hover { filter: brightness(1.12); }
/* Domino (idée de kaz, 2026-10-27) : un domino noir laqué, trait du milieu, quelques points blancs. */
.btn-roll.gen-domino { border: 2px solid #a16207; border-radius: .55rem; color: #fafaf9;
  background: radial-gradient(circle at 1em 30%, #fafaf9 0 2.2px, transparent 2.8px), radial-gradient(circle at 1.6em 70%, #fafaf9 0 2.2px, transparent 2.8px), radial-gradient(circle at calc(100% - 1em) 30%, #fafaf9 0 2.2px, transparent 2.8px), radial-gradient(circle at calc(100% - 1.6em) 70%, #fafaf9 0 2.2px, transparent 2.8px), linear-gradient(160deg, #3f3f46, #111 45%, #0a0a0a);
  padding-inline: 2.4em; text-shadow: 0 0 .25em rgba(250, 250, 249, .45);
  --gs: 0 .3em 0 #5b3311, 0 .5em 1em rgba(22, 101, 52, .3); --gs-h: 0 .34em 0 #5b3311, 0 .7em 1.3em rgba(250, 204, 21, .3); --gs-a: 0 .06em 0 #5b3311; }
.btn-roll.gen-domino:hover { filter: brightness(1.15); }
/* Lily Pads (idée de casmicgraything, 2026-10-27) : une feuille de nénuphar sur l'eau verte de la mare. */
.btn-roll.gen-lilypad { border: 2px solid #166534; border-radius: 999px; color: #fefce8;
  background: radial-gradient(circle at 1.3em 50%, #86efac 0, #22c55e .4em, #15803d .62em, transparent .66em), linear-gradient(180deg, #115e59, #0f3d3a);
  padding-left: 2.4em; text-shadow: 0 1px 0 #14532d, 0 0 .3em rgba(20, 83, 45, .8);
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(34, 197, 94, .25); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.3em rgba(34, 197, 94, .4); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-lilypad:hover { filter: brightness(1.1); }
/* Ripple (idée de casmicgraything, 2026-10-27) : de l'eau profonde et deux ronds qui s'élargissent. */
.btn-roll.gen-ripple { border: 2px solid #7dd3fc; border-radius: 999px; color: #ecfeff;
  background: radial-gradient(ellipse 30% 60% at 50% 50%, transparent 60%, rgba(224, 242, 254, .45) 64%, transparent 70%), radial-gradient(ellipse 55% 110% at 50% 50%, transparent 72%, rgba(224, 242, 254, .25) 75%, transparent 80%), radial-gradient(ellipse 90% 120% at 50% 60%, #0e7490, #0c4a6e 70%, #082f49);
  text-shadow: 0 1px 0 #082f49, 0 0 .3em rgba(103, 232, 249, .6);
  --gs: 0 .3em 0 #082f49, 0 .5em 1em rgba(56, 189, 248, .3); --gs-h: 0 .34em 0 #082f49, 0 .7em 1.3em rgba(56, 189, 248, .45); --gs-a: 0 .06em 0 #082f49; }
.btn-roll.gen-ripple:hover { filter: brightness(1.12); }
/* Bullet Train (idée de yukitsunodaiscool, 2026-10-27) : le flanc blanc d'un train, sa bande bleue, le ciel rose derrière. */
.btn-roll.gen-bullettrain { border: 2px solid #1d4ed8; border-radius: .6rem 2em 2em .6rem; color: #1e1b4b;
  background: linear-gradient(180deg, transparent 68%, #1d4ed8 68% 80%, transparent 80%), linear-gradient(180deg, #ffffff, #e2e8f0 70%, #cbd5e1);
  text-shadow: 0 1px 0 #fff;
  --gs: 0 .3em 0 #f472b6, 0 .5em 1em rgba(236, 72, 153, .3); --gs-h: 0 .34em 0 #f472b6, 0 .7em 1.3em rgba(236, 72, 153, .45); --gs-a: 0 .06em 0 #f472b6; }
.btn-roll.gen-bullettrain:hover { filter: brightness(1.05); }
/* Orbital Cannon (idée de LEVIATHAN, 2026-10-27) : un écran de visée, grille cyan et coins de cible. */
.btn-roll.gen-orbital { border: 2px solid #22d3ee; border-radius: .35rem; color: #cffafe; font-family: var(--font-mono); letter-spacing: .06em;
  background: linear-gradient(90deg, rgba(103, 232, 249, .12) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(180deg, rgba(103, 232, 249, .12) 1px, transparent 1px) 0 0 / 10px 10px, radial-gradient(ellipse 70% 90% at 50% 50%, #0f2a3d, #05090f);
  text-shadow: 0 0 .3em #22d3ee;
  --gs: 0 .3em 0 #164e63, 0 .5em 1em rgba(34, 211, 238, .3); --gs-h: 0 .34em 0 #164e63, 0 .7em 1.3em rgba(34, 211, 238, .5); --gs-a: 0 .06em 0 #164e63; }
.btn-roll.gen-orbital:hover { filter: brightness(1.15); }

/* Lightbulb (idée de costoroll, 2026-10-28) : une ampoule allumée à gauche, sur le mur tan, le bord du bureau en bas. */
.btn-roll.gen-lightbulb { border: 2px solid #3b2a1a; border-radius: .7rem; color: #fff7d6;
  background: radial-gradient(ellipse .55em .62em at 1.25em 46%, #fffbea 0, #fde68a 45%, #eab308 85%, transparent 92%) 0 0 / 100% 100% no-repeat, radial-gradient(ellipse 2.4em 1.6em at 1.25em 46%, rgba(253, 224, 71, .35), transparent 70%), linear-gradient(180deg, transparent 82%, #8a5528 82%), linear-gradient(180deg, #5e4631, #3f2e1f);
  padding-left: 2.4em; text-shadow: 0 1px 0 #3f2e1f, 0 0 .3em rgba(253, 224, 71, .6);
  --gs: 0 .3em 0 #2a1d12, 0 .5em 1em rgba(253, 224, 71, .22); --gs-h: 0 .34em 0 #2a1d12, 0 .7em 1.3em rgba(253, 224, 71, .4); --gs-a: 0 .06em 0 #2a1d12; }
.btn-roll.gen-lightbulb:hover { filter: brightness(1.12); }

/* Stonks (idée de casmicgraything, 2026-10-28) : un écran de bourse quadrillé et une courbe verte qui grimpe. */
.btn-roll.gen-stonks { border: 2px solid #16a34a; border-radius: .4rem; color: #f0fdf4;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'><path d='M0 34 L14 30 L24 32 L36 24 L48 27 L60 18 L72 20 L86 9 L100 3' fill='none' stroke='%234ade80' stroke-opacity='.6' stroke-width='2' vector-effect='non-scaling-stroke'/></svg>") 0 0 / 100% 100% no-repeat, linear-gradient(90deg, rgba(148, 163, 184, .12) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(180deg, rgba(148, 163, 184, .12) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(180deg, #13213a, #070c18);
  text-shadow: 0 1px 0 #000, 0 0 .3em rgba(74, 222, 128, .6);
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(34, 197, 94, .25); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.3em rgba(34, 197, 94, .45); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-stonks:hover { filter: brightness(1.15); }

/* Chess (idée de casmicgraything, 2026-10-28) : un échiquier du noir au blanc dans son cadre de noyer. */
.btn-roll.gen-chess { border: 3px solid #5b3a1e; border-radius: .45rem; color: #fef3c7;
  background: conic-gradient(rgba(0, 0, 0, .3) 25%, rgba(255, 255, 255, .13) 0 50%, rgba(0, 0, 0, .3) 0 75%, rgba(255, 255, 255, .13) 0) 0 0 / 12px 12px, linear-gradient(90deg, #0c0a09, #57534e 50%, #e7e5e4);
  text-shadow: .06em 0 0 #5b3a1e, -.06em 0 0 #5b3a1e, 0 .06em 0 #5b3a1e, 0 -.06em 0 #5b3a1e, 0 .1em .08em rgba(0, 0, 0, .5);
  --gs: 0 .3em 0 #3f2a14, 0 .5em 1em rgba(120, 80, 40, .3); --gs-h: 0 .34em 0 #3f2a14, 0 .7em 1.3em rgba(180, 120, 60, .4); --gs-a: 0 .06em 0 #3f2a14; }
.btn-roll.gen-chess:hover { filter: brightness(1.12); }

/* Weather (idée de casmicgraything, 2026-10-28) : un ciel qui passe de l'orage au grand beau, de gauche à droite. */
.btn-roll.gen-weather { border: 2px solid #38bdf8; border-radius: 999px; color: #fff;
  background: radial-gradient(circle at 88% 30%, #fef08a 0 .3em, rgba(250, 204, 21, .45) .34em .6em, transparent .8em), linear-gradient(90deg, #1e1b3a, #3d4a5f 25%, #4e7487 45%, #8094aa 62%, #0ea5e9 80%, #7dd3fc);
  text-shadow: 0 1px 0 #0f172a, 0 0 .3em rgba(15, 23, 42, .8);
  --gs: 0 .3em 0 #0c4a6e, 0 .5em 1em rgba(56, 189, 248, .3); --gs-h: 0 .34em 0 #0c4a6e, 0 .7em 1.3em rgba(56, 189, 248, .5); --gs-a: 0 .06em 0 #0c4a6e; }
.btn-roll.gen-weather:hover { filter: brightness(1.12); }
/* Ninja (idée de casmictechthing, 2026-10-28) : une bûche de dojo, une tige de bambou tranchée en biais à gauche. */
.btn-roll.gen-ninja { border: 2px solid #3b2412; border-radius: .45rem; color: #1c1208; font-weight: 800;
  background: linear-gradient(160deg, transparent 0 48%, #ecfccb 48% 50%, transparent 50%) .6em 0 / .7em 100% no-repeat, linear-gradient(90deg, #365314, #84cc16 40%, #d9f99d 50%, #4d7c0f 80%) .6em 0 / .7em 100% no-repeat, linear-gradient(180deg, #2b1a0e 0 4px, transparent 4px calc(100% - 4px), #2b1a0e calc(100% - 4px)), repeating-linear-gradient(178deg, transparent 0 5px, rgba(120, 72, 30, .2) 5px 6px), linear-gradient(180deg, #c08a50, #ddb07a 45%, #b27e45);
  padding-left: 2em; text-shadow: 0 1px 0 rgba(255, 236, 200, .6);
  --gs: 0 .3em 0 #3b2412, 0 .5em 1em rgba(132, 204, 22, .2); --gs-h: 0 .34em 0 #3b2412, 0 .7em 1.3em rgba(132, 204, 22, .4); --gs-a: 0 .06em 0 #3b2412; }
.btn-roll.gen-ninja:hover { filter: brightness(1.08); }
/* Scroll of Alchemy (idée de R77, 2026-10-28) : un parchemin entre deux rouleaux, une rune d'or à gauche. */
.btn-roll.gen-alchemy { border: 1px solid #7c4a1e; border-radius: .3rem; color: #4a2c0a; font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  background: radial-gradient(circle at 1.25em 50%, transparent 0 .32em, #b7791f .32em .4em, transparent .4em), linear-gradient(90deg, #8a5a2b, #f3dfb3 45%, #6f4520) 0 0 / .5em 100% no-repeat, linear-gradient(90deg, #8a5a2b, #f3dfb3 45%, #6f4520) 100% 0 / .5em 100% no-repeat, radial-gradient(ellipse 80% 90% at 50% 50%, transparent 55%, rgba(120, 70, 20, .35)), linear-gradient(180deg, #f4e4c0, #dfc28a);
  padding-left: 2.1em; text-shadow: 0 0 .3em rgba(251, 191, 36, .6);
  --gs: 0 .3em 0 #7c4a1e, 0 .5em 1em rgba(251, 191, 36, .25); --gs-h: 0 .34em 0 #7c4a1e, 0 .7em 1.3em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #7c4a1e; }
.btn-roll.gen-alchemy:hover { filter: brightness(1.06); }
/* Window Cleaner (idée de Deadshot, 2026-10-28) : une vitre dans un cadre blanc, à moitié raclée en biais. */
.btn-roll.gen-windowcleaner { border: 3px solid #f8fafc; border-radius: .3rem; color: #f6c945; font-family: Georgia, 'Bookman Old Style', serif; font-weight: 900;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 36%, transparent 44%), linear-gradient(90deg, rgba(150, 137, 112, .75) 0 22%, #0f172a 22% 23.5%, transparent 23.5%), linear-gradient(180deg, #60a5fa, #bfdbfe);
  text-shadow: 1px 0 0 #1c1917, -1px 0 0 #1c1917, 0 1px 0 #1c1917, 0 -1px 0 #1c1917, 2px 2px 0 #7c2d12;
  --gs: 0 .3em 0 #94a3b8, 0 .5em 1em rgba(96, 165, 250, .3); --gs-h: 0 .34em 0 #94a3b8, 0 .7em 1.3em rgba(96, 165, 250, .5); --gs-a: 0 .06em 0 #94a3b8; }
.btn-roll.gen-windowcleaner:hover { filter: brightness(1.06); }
/* Firework (idée de HSI, 2026-10-28) : un ciel de nuit, deux bouquets d'étincelles de part et d'autre du texte. */
.btn-roll.gen-firework { border: 2px solid #4338ca; border-radius: 999px; color: #fff;
  background: radial-gradient(circle at 12% 45%, #fff 0 1.5px, rgba(244, 114, 182, .9) 2px, rgba(244, 114, 182, .25) .45em, transparent .7em), radial-gradient(circle at 88% 40%, #fff 0 1.5px, rgba(250, 204, 21, .9) 2px, rgba(250, 204, 21, .25) .45em, transparent .7em), repeating-conic-gradient(from 0deg at 12% 45%, rgba(244, 114, 182, .5) 0 4deg, transparent 4deg 30deg), linear-gradient(180deg, #060818, #2a1d55);
  text-shadow: 0 0 .2em #f472b6, 0 0 .5em #c084fc;
  --gs: 0 .3em 0 #1e1b4b, 0 .5em 1em rgba(244, 114, 182, .3); --gs-h: 0 .34em 0 #1e1b4b, 0 .7em 1.3em rgba(244, 114, 182, .5); --gs-a: 0 .06em 0 #1e1b4b; }
.btn-roll.gen-firework:hover { filter: brightness(1.15); }

/* ==== Skins du 2026-10-28, lot C ==== */
/* Graffiti (idée de JBearr12, 2026-10-28) : un mur de briques, le texte en lettres bulles vert acide cernées de noir. */
.btn-roll.gen-graffiti { border: 2px solid #2b1d18; border-radius: .35rem; color: #a3e635;
  font-family: 'Arial Black', 'Segoe UI Black', Impact, system-ui, sans-serif; letter-spacing: .03em; -webkit-text-stroke: .12em #111; paint-order: stroke fill;
  background: radial-gradient(ellipse 30% 70% at 10% 50%, rgba(244, 114, 182, .35), transparent 70%), radial-gradient(ellipse 30% 70% at 92% 50%, rgba(34, 211, 238, .3), transparent 70%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='22'><rect width='44' height='22' fill='%23463530'/><g fill='%238b3a2a'><rect x='1' y='1' width='20' height='9' rx='1'/><rect x='23' y='1' width='20' height='9' rx='1' fill='%237c3224'/><rect x='-10' y='12' width='20' height='9' rx='1'/><rect x='12' y='12' width='20' height='9' rx='1' fill='%2394402d'/><rect x='34' y='12' width='20' height='9' rx='1'/></g></svg>") 0 0 / 30px 15px, #463530;
  text-shadow: .06em .07em 0 #111;
  --gs: 0 .3em 0 #2b1d18, 0 .5em 1em rgba(244, 114, 182, .25); --gs-h: 0 .34em 0 #2b1d18, 0 .7em 1.3em rgba(163, 230, 53, .4); --gs-a: 0 .06em 0 #2b1d18; }
.btn-roll.gen-graffiti:hover { filter: brightness(1.12) saturate(1.15); }
/* Origami (idée de JBearr12, 2026-10-28) : une feuille de papier rose pliée en deux facettes, le coin haut droit corné. */
.btn-roll.gen-origami { border: 0; border-radius: .15rem; color: #1f1630; font-weight: 800;
  background: linear-gradient(225deg, #fffdf6 0 .55em, #d6cdb8 .58em, transparent .62em), linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 255, 255, .7) 50%, transparent calc(50% + 1px)), linear-gradient(to bottom right, #f9a8d4 50%, #e97cb7 50%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  --gs: 0 .3em 0 #14533d, 0 .5em 1em rgba(20, 83, 61, .35); --gs-h: 0 .34em 0 #14533d, 0 .7em 1.3em rgba(110, 231, 183, .35); --gs-a: 0 .06em 0 #14533d; }
.btn-roll.gen-origami:hover { filter: brightness(1.06); }
/* Taco (idée de sennybex1, 2026-10-28) : une coque de taco dorée et mouchetée, une frange de salade en haut. */
.btn-roll.gen-taco { border: 2px solid #92400e; border-radius: .8rem .8rem 1.6rem 1.6rem; color: #fff7ed;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif; -webkit-text-stroke: .1em #7c2d12; paint-order: stroke fill;
  background: radial-gradient(circle at 50% 100%, #22c55e 58%, transparent 62%) 0 -3px / 10px 9px repeat-x, radial-gradient(circle, rgba(146, 64, 14, .5) 0 1px, transparent 1.6px) 0 0 / 9px 8px, linear-gradient(180deg, #fcd34d, #f59e0b 60%, #d97706);
  --gs: 0 .3em 0 #0f766e, 0 .5em 1em rgba(250, 204, 21, .3); --gs-h: 0 .34em 0 #0f766e, 0 .7em 1.3em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #0f766e; }
.btn-roll.gen-taco:hover { filter: brightness(1.08); }
/* Beach (idée de furcoat0, 2026-10-28 ; couleurs du fond Windy Beach) : la mer en haut, la ligne d'écume, le sable doré. */
.btn-roll.gen-beach { border: 2px solid #0284c7; border-radius: .6rem; color: #7c3a0a;
  font-family: 'Chalkboard SE', 'Comic Sans MS', 'Marker Felt', 'Trebuchet MS', cursive; font-weight: 700;
  background: linear-gradient(180deg, #0284c7 0, #22d3ee 24%, #a5f3fc 30%, #ffffff 33%, #e2bc63 36%, #fde68a 55%, #fcd34d 100%);
  text-shadow: 0 -1px 0 rgba(92, 45, 8, .5), 0 1px 0 rgba(255, 251, 235, .9);
  --gs: 0 .3em 0 #b45309, 0 .5em 1em rgba(56, 189, 248, .3); --gs-h: 0 .34em 0 #b45309, 0 .7em 1.3em rgba(56, 189, 248, .45); --gs-a: 0 .06em 0 #b45309; }
.btn-roll.gen-beach:hover { filter: brightness(1.06); }

/* ==== Skins du 2026-10-28, lot D ==== boutons assortis */
/* Arcade Fighter (idée de 17black, 2026-10-28) : l'écran de la borne, police pixel, une barre de vie jaune dessous. */
.btn-roll.gen-fighter { border: 2px solid #0b0716; border-radius: .3rem; color: #fff3b0; font-family: 'Press Start 2P', var(--font-mono); font-weight: 400; letter-spacing: .04em;
  background: linear-gradient(90deg, #facc15 0 62%, #ef4444 62% 74%, #4c1d24 74%) .6em calc(100% - .35em) / calc(100% - 1.2em) 4px no-repeat, repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px), linear-gradient(180deg, #24104d, #5b1d6b 70%, #9c3a5a);
  text-shadow: 2px 2px 0 #f97316, 4px 4px 0 #6b1238;
  --gs: 0 .3em 0 #3b3550, 0 .5em 1em rgba(236, 72, 153, .3); --gs-h: 0 .34em 0 #3b3550, 0 .7em 1.3em rgba(236, 72, 153, .5); --gs-a: 0 .06em 0 #3b3550; }
.btn-roll.gen-fighter:hover { filter: brightness(1.15); }
/* Battleship (idée de 17black, 2026-10-28) : le couchant en haut, la mer sombre en bas, un soleil sur l'horizon. */
.btn-roll.gen-battleship { border: 2px solid #0e1a34; border-radius: .5rem; color: #f1f5f9; font-weight: 900;
  background: radial-gradient(circle at 50% 52%, #ffe1a1 0 .35em, rgba(255, 140, 90, .45) .6em, transparent 1.2em), linear-gradient(180deg, transparent 52%, #1c2b4f 52%, #0e1a34), linear-gradient(180deg, #5c3166, #c4615e 80%, #f39a5b);
  text-shadow: .06em .06em 0 #0b1226;
  --gs: 0 .3em 0 #0e1a34, 0 .5em 1em rgba(251, 146, 60, .3); --gs-h: 0 .34em 0 #0e1a34, 0 .7em 1.3em rgba(251, 146, 60, .5); --gs-a: 0 .06em 0 #0e1a34; }
.btn-roll.gen-battleship:hover { filter: brightness(1.12); }
/* Cone of Destiny (idée de Gray alt, 2026-10-28) : le plastique orange d'un cône et ses deux bandes blanches. */
.btn-roll.gen-cone { border: 2px solid #9a3412; border-radius: .55rem; color: #1c1917; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Black', sans-serif; letter-spacing: .04em;
  background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .3) 36%, transparent 44%), linear-gradient(#f8fafc, #e2e8f0) 0 12% / 100% 14% no-repeat, linear-gradient(#f8fafc, #e2e8f0) 0 88% / 100% 14% no-repeat, linear-gradient(180deg, #ff8f33, #f26a0f 55%, #d4530a);
  text-shadow: 0 1px 0 rgba(255, 237, 213, .5);
  --gs: 0 .3em 0 #9a3412, 0 .5em 1em rgba(249, 115, 22, .3); --gs-h: 0 .34em 0 #9a3412, 0 .7em 1.3em rgba(249, 115, 22, .5); --gs-a: 0 .06em 0 #9a3412; }
.btn-roll.gen-cone:hover { filter: brightness(1.08); }
/* The Observer (idée de Gray alt, 2026-10-28) : la nuit cosmique, un iris violet et turquoise au centre, un liseré doré. */
.btn-roll.gen-observer { border: 2px solid #b8892b; border-radius: 999px; color: #f5f3ff;
  background: radial-gradient(circle at 20% 35%, #fff 0 1px, transparent 1.5px) 0 0 / 22px 16px, radial-gradient(ellipse 22% 70% at 50% 50%, rgba(5, 3, 15, .9) 0 30%, rgba(124, 58, 237, .55) 55%, rgba(14, 165, 183, .3) 80%, transparent 100%), radial-gradient(ellipse 80% 120% at 50% 50%, #1a0f3d, #05030f);
  text-shadow: 0 0 .3em #c084fc, 0 0 .6em rgba(34, 211, 238, .5);
  --gs: 0 .3em 0 #2e1065, 0 .5em 1em rgba(167, 139, 250, .35); --gs-h: 0 .34em 0 #2e1065, 0 .7em 1.3em rgba(167, 139, 250, .55); --gs-a: 0 .06em 0 #2e1065; }
.btn-roll.gen-observer:hover { filter: brightness(1.15); }

/* Power Core (idée de Sean, 2026-10-28) : un lourd anneau de métal gris foncé autour d'une lentille de verre qui luit
   rose vif ; au survol, de petits éclairs bleus crépitent autour du cadre ; au clic, la lentille s'enfonce dans le cadre
   dans un éclair de lumière blanche. Éclairs et éclair blanc sont deux calques dont seuls l'opacité et le transform
   changent : rien n'est repeint à chaque image (voir le bouton Infinity, signalé lent par MAYO le même jour). */
.btn-roll.gen-powercore {
  border: .3em solid transparent; border-radius: 999px; color: #fff; letter-spacing: .14em;
  background:
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(255, 255, 255, .42), transparent 70%) padding-box,
    radial-gradient(ellipse 70% 120% at 50% 58%, #ff8ade 0%, #ec4899 32%, #9d174d 70%, #3b0a24 100%) padding-box,
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .35), transparent 45%) border-box,
    linear-gradient(180deg, #7a7a83 0%, #3f3f46 28%, #18181b 55%, #52525b 82%, #27272a 100%) border-box;
  text-shadow: 0 0 .25em #fff, 0 0 .7em #ff4fd8, 0 1px 0 #500724;
  --gs: inset 0 0 .7em rgba(59, 10, 36, .95), inset 0 .12em .2em rgba(255, 255, 255, .3), 0 0 0 1px #09090b, 0 .22em 0 #0c0c0f, 0 0 1em rgba(236, 72, 153, .45), 0 .5em 1em rgba(0, 0, 0, .5);
  --gs-h: inset 0 0 .6em rgba(59, 10, 36, .9), inset 0 .12em .2em rgba(255, 255, 255, .35), 0 0 0 1px #09090b, 0 .26em 0 #0c0c0f, 0 0 1.5em rgba(236, 72, 153, .7), 0 0 .5em rgba(96, 165, 250, .35), 0 .6em 1.1em rgba(0, 0, 0, .55);
  --gs-a: inset 0 0 1em rgba(59, 10, 36, .95), inset 0 .3em .45em rgba(0, 0, 0, .65), 0 0 0 1px #09090b, 0 .05em 0 #0c0c0f, 0 0 1.8em rgba(255, 255, 255, .6), 0 0 .9em rgba(236, 72, 153, .8);
  --press: .17em; --edge: .26em;
}
/* L'éclair blanc du clic : il s'allume d'un coup quand on appuie et s'éteint en un quart de seconde. */
.btn-roll.gen-powercore::before { inset: 0; border-radius: inherit; opacity: 0; transition: opacity .28s ease-out;
  background: radial-gradient(ellipse 60% 90% at 50% 50%, #fff 0%, rgba(255, 255, 255, .85) 30%, rgba(253, 224, 255, .35) 60%, transparent 85%); }
.btn-roll.gen-powercore:active::before { opacity: .92; transition-duration: .02s; }
/* Les étincelles : six petits éclairs bleus posés sur le cadre (dessus, dessous, côtés), qui crépitent au survol. */
.btn-roll.gen-powercore::after { inset: -.55em -.4em; opacity: 0; will-change: opacity, transform;
  --pc-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M1 7L9 4L12 8L19 2L22 7L31 4' fill='none' stroke='%233b82f6' stroke-width='3.4' stroke-opacity='.45'/%3E%3Cpath d='M1 7L9 4L12 8L19 2L22 7L31 4' fill='none' stroke='%23dbeafe' stroke-width='1.5' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  --pc-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28'%3E%3Cpath d='M6 1L3 9L8 12L2 19L7 21L4 27' fill='none' stroke='%233b82f6' stroke-width='3.4' stroke-opacity='.45'/%3E%3Cpath d='M6 1L3 9L8 12L2 19L7 21L4 27' fill='none' stroke='%23dbeafe' stroke-width='1.5' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  background: var(--pc-h) 20% 0 / 1.5em .56em no-repeat, var(--pc-h) 68% 0 / 1.2em .45em no-repeat, var(--pc-h) 38% 100% / 1.3em .5em no-repeat,
    var(--pc-h) 86% 100% / 1.5em .56em no-repeat, var(--pc-v) 0 45% / .5em 1.15em no-repeat, var(--pc-v) 100% 60% / .5em 1.15em no-repeat; }
.btn-roll.gen-powercore:hover::after { animation: gen-pc-crackle .42s steps(1) infinite; }
.btn-roll.gen-powercore:disabled::after { animation: none; opacity: 0; }
@keyframes gen-pc-crackle {
  0% { opacity: 1; transform: none; } 18% { opacity: 0; } 30% { opacity: .85; transform: scaleX(-1); } 46% { opacity: .2; transform: scaleX(-1); }
  58% { opacity: 1; transform: scale(-1, -1); } 74% { opacity: 0; } 86% { opacity: .7; transform: scaleY(-1); } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-powercore:hover::after { animation: none; opacity: .75; } }

/* Black Hole (idée de MattyFaux-Lucky, 2026-10-28), assorti au fond Black Hole et au skin Singularity : la lumière
   s'enroule dans un disque d'accrétion vu de biais autour d'un cœur noir, et un arc de lumière déviée passe au-dessus
   (la lentille gravitationnelle) ; enfoncé, le disque tourne bien plus vite et le bouton est aspiré vers son centre.
   Les deux disques ne font que tourner (transform) ; le rapide ne fait qu'apparaître (opacité) : aucun saut de vitesse
   et rien à repeindre à chaque image. Identifiant « eventhorizon » : « blackhole » est le skin Singularity. */
.btn-roll.gen-eventhorizon {
  overflow: hidden; border-radius: 999px; border: 1px solid rgba(253, 186, 116, .6); color: #fff7ed;
  background:
    radial-gradient(2em .78em at 50% 50%, #000 0 72%, transparent 100%),
    radial-gradient(2.5em 1.05em at 50% 50%, transparent 78%, rgba(255, 237, 213, .85) 86%, transparent 95%),
    radial-gradient(2.9em 1.65em at 50% 58%, transparent 80%, rgba(253, 186, 116, .5) 87%, transparent 96%),
    radial-gradient(1px 1px at 9% 30%, #fff, transparent), radial-gradient(1px 1px at 91% 66%, #e0e7ff, transparent), radial-gradient(1px 1px at 22% 78%, #fde68a, transparent), radial-gradient(1px 1px at 80% 22%, #fff, transparent),
    radial-gradient(ellipse 80% 140% at 50% 50%, #1e1b4b 0%, #0b0820 55%, #020108 100%);
  text-shadow: 0 0 .2em #000, 0 0 .5em rgba(0, 0, 0, .9), 0 0 .8em rgba(251, 146, 60, .55);
  --gs: 0 0 0 2px rgba(124, 58, 237, .25), 0 0 1.1em rgba(251, 146, 60, .4), 0 0 2.4em rgba(124, 58, 237, .25), 0 .45em 1em rgba(0, 0, 0, .6);
  --gs-h: 0 0 0 2px rgba(124, 58, 237, .4), 0 0 1.6em rgba(251, 146, 60, .65), 0 0 3em rgba(124, 58, 237, .4), 0 .45em 1.1em rgba(0, 0, 0, .65);
  --gs-a: 0 0 0 2px rgba(124, 58, 237, .3), 0 0 .6em rgba(251, 146, 60, .5), inset 0 0 1.4em #000;
  transition: transform .22s var(--ease-snap), box-shadow .16s ease, letter-spacing .22s var(--ease-out), filter .16s ease;
}
.btn-roll.gen-eventhorizon::before, .btn-roll.gen-eventhorizon::after { left: 50%; top: 50%; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; will-change: transform;
  -webkit-mask: radial-gradient(circle, transparent 0 17%, #000 22% 38%, transparent 66%); mask: radial-gradient(circle, transparent 0 17%, #000 22% 38%, transparent 66%);
  transform: scaleY(.3) rotate(0deg); }
.btn-roll.gen-eventhorizon::before { animation: gen-eh-spin 7s linear infinite;
  background: conic-gradient(from 0deg, transparent 0%, rgba(253, 186, 116, .85) 8%, rgba(255, 247, 237, .95) 10%, rgba(251, 146, 60, .55) 17%, transparent 30%, rgba(167, 139, 250, .45) 42%, transparent 54%,
    rgba(253, 186, 116, .8) 61%, rgba(255, 247, 237, .9) 63%, rgba(234, 88, 12, .45) 70%, transparent 80%, rgba(96, 165, 250, .4) 90%, transparent 100%); }
.btn-roll.gen-eventhorizon::after { opacity: 0; transition: opacity .25s ease-out; animation: gen-eh-spin .55s linear infinite;
  background: conic-gradient(from 90deg, transparent 0%, rgba(255, 255, 255, .95) 6%, rgba(253, 186, 116, .7) 14%, transparent 26%, rgba(255, 247, 237, .9) 52%, rgba(251, 146, 60, .6) 60%, transparent 74%, rgba(196, 181, 253, .6) 88%, transparent 100%); }
.btn-roll.gen-eventhorizon:hover { letter-spacing: .13em; }
.btn-roll.gen-eventhorizon:active { transform: scale(.94, .9); letter-spacing: .03em; }
.btn-roll.gen-eventhorizon:active::after { opacity: 1; transition-duration: .06s; }
@keyframes gen-eh-spin { from { transform: scaleY(.3) rotate(0deg); } to { transform: scaleY(.3) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-eventhorizon::before, .btn-roll.gen-eventhorizon::after { animation: none; } }

/* ------------------------------------------------------------------ idées de joueurs du 2026-11-01 */

/* Cardboard Box (idée de MAYO, 2026-11-01) : le bouton le moins cher, un carton kraft ondulé fermé par une bande de
   scotch ; appuyé, il se froisse (il s'écrase de travers, des plis apparaissent) avec un « pof » sourd (js/sound.js). */
.btn-roll.gen-cardboard {
  border-radius: .18em; border: 2px solid #8b5a2b; color: #4a2c12; letter-spacing: .14em;
  background:
    linear-gradient(180deg, transparent 36%, rgba(255, 246, 220, .7) 36% 38%, rgba(205, 150, 70, .4) 38% 62%, rgba(120, 70, 20, .3) 62% 63.5%, transparent 63.5%),
    linear-gradient(180deg, transparent 49.5%, rgba(110, 66, 26, .35) 49.5% 50.5%, transparent 50.5%),
    repeating-linear-gradient(90deg, rgba(110, 66, 26, .06) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse 60% 80% at 25% 20%, rgba(255, 230, 180, .25), transparent 70%),
    linear-gradient(180deg, #d4a66c, #c69659 60%, #b8884d);
  text-shadow: 0 1px 0 rgba(255, 236, 200, .55);
  --gs: inset 0 0 0 1px rgba(255, 232, 190, .35), 0 .2em 0 #7a4a1f, 0 .45em .8em rgba(60, 30, 10, .4);
  --gs-h: inset 0 0 0 1px rgba(255, 232, 190, .45), 0 .24em 0 #7a4a1f, 0 .55em .9em rgba(60, 30, 10, .45);
  --gs-a: inset 0 0 0 1px rgba(255, 232, 190, .2), inset 0 .2em .4em rgba(60, 30, 10, .35), 0 .04em 0 #7a4a1f;
  --edge: .2em;
}
/* « this side up » au coin, au tampon */
.btn-roll.gen-cardboard::before { content: '\2191\2191'; left: .45em; top: .15em; font-size: .5em; letter-spacing: 0; color: rgba(74, 44, 18, .5); text-shadow: none; }
/* les plis du carton écrasé, invisibles au repos */
.btn-roll.gen-cardboard::after { inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(118deg, transparent 30%, rgba(90, 52, 20, .35) 31%, rgba(255, 236, 200, .4) 32.5%, transparent 34%), linear-gradient(64deg, transparent 62%, rgba(90, 52, 20, .3) 63%, rgba(255, 236, 200, .35) 64.5%, transparent 66%), linear-gradient(160deg, transparent 70%, rgba(90, 52, 20, .25) 71%, transparent 73%); }
.btn-roll.gen-cardboard:hover { transform: translateY(-1px) rotate(-.4deg); filter: none; }
.btn-roll.gen-cardboard:active { transform: translateY(.18em) scale(.97, .88) rotate(.8deg) skewX(-3deg); filter: brightness(.95); transition: transform .05s ease-out, box-shadow .05s; }
.btn-roll.gen-cardboard:active::after { opacity: 1; transition-duration: .04s; }

/* Free Download (idée de Yentizx, 2026-11-01) : la parodie du faux bouton de téléchargement d'un site louche. Vert
   brillant façon années 2000, deux flèches qui clignotent de chaque côté, une pastille « 100% SAFE » de travers au coin.
   Inoffensif : il ne télécharge rien, il lance le tirage. */
.btn-roll.gen-download {
  border-radius: .5em; border: 2px solid #14532d; color: #fff; letter-spacing: .1em;
  background: linear-gradient(180deg, #bbf7d0 0%, #4ade80 46%, #16a34a 54%, #15803d 100%);
  text-shadow: 0 -1px 0 #14532d, 0 1px 3px rgba(0, 0, 0, .45);
  --gs: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -.15em .25em rgba(20, 83, 45, .35), 0 .2em 0 #14532d, 0 0 .9em rgba(34, 197, 94, .55);
  --gs-h: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -.15em .25em rgba(20, 83, 45, .35), 0 .24em 0 #14532d, 0 0 1.5em rgba(74, 222, 128, .8);
  --gs-a: inset 0 .2em .35em rgba(20, 83, 45, .55), 0 .04em 0 #14532d, 0 0 1em rgba(74, 222, 128, .6);
  --edge: .2em;
}
.btn-roll.gen-download::before { inset: 0 .4em; animation: gen-dl-blink .9s steps(1) infinite;
  --dl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M7 1H13V11H19L10 22L1 11H7Z' fill='%23fef08a' stroke='%2314532d' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background: var(--dl) 0 50% / .62em .74em no-repeat, var(--dl) 100% 50% / .62em .74em no-repeat; }
@keyframes gen-dl-blink { 0%, 100% { opacity: 1; transform: translateY(-.06em); } 50% { opacity: .2; transform: translateY(.08em); } }
.btn-roll.gen-download::after { content: '100% SAFE'; z-index: 1; top: -.95em; right: -1.1em; padding: 1.15em .75em; font-size: .34em; line-height: 1; letter-spacing: .02em;
  font-weight: 900; color: #b91c1c; text-shadow: none; background: #fde047; transform: rotate(14deg);
  clip-path: polygon(50% 0, 59% 13%, 75% 7%, 77% 23%, 93% 25%, 87% 40%, 100% 50%, 87% 60%, 93% 75%, 77% 77%, 75% 93%, 59% 87%, 50% 100%, 41% 87%, 25% 93%, 23% 77%, 7% 75%, 13% 60%, 0 50%, 13% 40%, 7% 25%, 23% 23%, 25% 7%, 41% 13%); }
.btn-roll.gen-download:hover::after { animation: gen-dl-wiggle .5s ease-in-out 1; }
@keyframes gen-dl-wiggle { 0%, 100% { transform: rotate(14deg) scale(1); } 40% { transform: rotate(4deg) scale(1.12); } 70% { transform: rotate(20deg) scale(1.04); } }
.btn-roll.gen-download:disabled::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn-roll.gen-download::before { animation: none; } }

/* Bread (idée de MattyFaux-Lucky, avec MaxABGD, 2026-11-01), assorti au fond Spinning Bread : une miche dorée, entailles
   claires sur la croûte, un peu de farine. Elle perd une bouchée par chiffre révélé (data-bites, posé par js/app.js) et
   redevient entière au tirage suivant ; les bouchées mangent le bout droit de la miche, jamais le texte. Le masque
   retirerait aussi une ombre portée sous la miche : la croûte ne tient qu'en ombres intérieures (aucun saut à la
   première bouchée). Appuyée, elle s'écrase mollement et lâche un nuage de farine. */
.btn-roll.gen-bread {
  border-radius: 1.2em / 1em; border: 2px solid #7c3f12; color: #fff7e6; letter-spacing: .12em;
  background:
    linear-gradient(112deg, transparent 18%, rgba(255, 226, 170, .6) 19%, rgba(255, 240, 210, .75) 20%, transparent 21.5%),
    linear-gradient(112deg, transparent 48%, rgba(255, 226, 170, .6) 49%, rgba(255, 240, 210, .75) 50%, transparent 51.5%),
    linear-gradient(112deg, transparent 78%, rgba(255, 226, 170, .6) 79%, rgba(255, 240, 210, .75) 80%, transparent 81.5%),
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(255, 214, 150, .65), transparent 70%),
    linear-gradient(180deg, #e7a95c, #c97734 45%, #a4561f 82%, #7c3f12);
  text-shadow: 0 1px 0 #5a2a0a, 0 2px 4px rgba(60, 25, 5, .55);
  --gs: inset 0 .14em .18em rgba(255, 236, 200, .55), inset 0 -.28em .4em rgba(90, 40, 10, .45), inset 0 0 0 1px rgba(255, 220, 160, .25);
  --gs-h: inset 0 .14em .18em rgba(255, 236, 200, .7), inset 0 -.28em .4em rgba(90, 40, 10, .45), inset 0 0 0 1px rgba(255, 220, 160, .35);
  --gs-a: inset 0 .25em .35em rgba(90, 40, 10, .45), inset 0 -.1em .2em rgba(255, 236, 200, .3);
  transform-origin: 50% 100%;
  transition: transform .4s cubic-bezier(.25, 1.7, .45, .85), box-shadow .2s ease, filter .2s ease;
}
/* la farine : quelques points blancs sur le dessus, et le nuage qui part quand on appuie */
.btn-roll.gen-bread::before { inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 22% 16%, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px), radial-gradient(circle at 63% 12%, rgba(255, 255, 255, .6) 0 1px, transparent 1.6px), radial-gradient(circle at 84% 22%, rgba(255, 255, 255, .55) 0 1px, transparent 1.6px), radial-gradient(circle at 40% 24%, rgba(255, 255, 255, .5) 0 .8px, transparent 1.4px); }
.btn-roll.gen-bread::after { left: 10%; right: 10%; top: -.4em; height: 1.2em; opacity: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 253, 245, .9), rgba(255, 253, 245, .4) 45%, transparent 70%); filter: blur(2px); }
.btn-roll.gen-bread:hover { transform: translateY(-1px) scale(1.01, .99); filter: none; }
.btn-roll.gen-bread:active { transform: translateY(.12em) scale(1.06, .86); transition: transform .06s ease-out, box-shadow .06s; filter: none; }
.btn-roll.gen-bread:active::after { animation: gen-br-flour .5s ease-out 1; }
@keyframes gen-br-flour { 0% { opacity: .95; transform: translateY(.2em) scale(.6, .5); } 100% { opacity: 0; transform: translateY(-.5em) scale(1.3, 1); } }
.btn-roll.gen-bread[data-bites="1"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.gen-bread[data-bites="2"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.gen-bread[data-bites="3"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.gen-bread[data-bites="4"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.12em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.12em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.gen-bread[data-bites="5"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.12em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + -0.10em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.12em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + -0.10em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.gen-bread[data-bites="6"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.12em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + -0.10em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + -0.32em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -1.40em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.59em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.59em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.40em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.78em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.49em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.30em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.56em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.71em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.52em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.34em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.93em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.74em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.12em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.15em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.96em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + -0.10em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.37em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + -0.32em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -1.40em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.59em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.59em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.40em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
/* « Roll again » (petit) : moins de marge autour du texte, des bouchées plus petites pour ne jamais toucher le N. */
.btn-roll.small.gen-bread[data-bites="1"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.small.gen-bread[data-bites="2"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.small.gen-bread[data-bites="3"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.small.gen-bread[data-bites="4"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.41em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.41em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.small.gen-bread[data-bites="5"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.41em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.25em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.41em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.25em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }
.btn-roll.small.gen-bread[data-bites="6"] { -webkit-mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.41em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.25em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.09em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.99em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.99em) calc(50% + 0.73em), #0000 94%, #000); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in; mask: radial-gradient(circle 1.3em at calc(100% + 0.89em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.38em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.19em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.73em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.54em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.35em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.57em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.70em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.51em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.41em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.86em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.67em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.25em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.02em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.83em) calc(50% + 0.73em), #0000 94%, #000), radial-gradient(circle 1.3em at calc(100% + 0.09em) 50%, #0000 98%, #000), radial-gradient(circle .15em at calc(100% + -0.99em) calc(50% + -0.73em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + -0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -1.18em) calc(50% + 0.27em), #0000 94%, #000), radial-gradient(circle .15em at calc(100% + -0.99em) calc(50% + 0.73em), #0000 94%, #000); mask-composite: intersect; }

/* Last Roll (idée de G8_floppa, 2026-11-01), assorti au fond Your Last Rolls : un petit boîtier en plastique sombre avec
   un écran LCD sous le texte, qui affiche ton nombre précédent (--last-roll, une chaîne posée sur la racine par
   js/app.js ; tirets tant que tu n'as jamais tiré). */
.btn-roll.gen-lastroll {
  border-radius: .55em; border: 2px solid #111827; color: #f3f4f6; letter-spacing: .14em;
  padding-bottom: 1.45em;
  background: radial-gradient(ellipse 70% 50% at 50% 0, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(180deg, #4b5563, #374151 50%, #1f2937);
  text-shadow: 0 1px 0 #000;
  --gs: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .2em 0 #0b0f17, 0 .45em .9em rgba(0, 0, 0, .45);
  --gs-h: inset 0 1px 0 rgba(255, 255, 255, .24), 0 .24em 0 #0b0f17, 0 .55em 1em rgba(0, 0, 0, .5);
  --gs-a: inset 0 .15em .3em rgba(0, 0, 0, .5), 0 .04em 0 #0b0f17;
  --edge: .2em;
}
.btn-roll.small.gen-lastroll { padding-bottom: 1.6em; }
.btn-roll.gen-lastroll::after { content: 'LAST ' var(--last-roll, '------'); z-index: 1; left: 50%; bottom: .28em; transform: translateX(-50%);
  white-space: nowrap; padding: .12em .5em; border-radius: .25em; font: 400 .48em/1 'Share Tech Mono', var(--font-mono); letter-spacing: .14em;
  color: #1c2518; text-shadow: .06em .06em 0 rgba(28, 37, 24, .18); background: linear-gradient(180deg, #c3d2a9, #a6b78c);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 1px #111827; }
.btn-roll.small.gen-lastroll::after { font-size: .62em; }
.btn-roll.gen-lastroll:hover::after { background: linear-gradient(180deg, #dcf0b4, #bfd79a); }
.btn-roll.gen-lastroll:active::after { filter: brightness(.9); }

/* Bubble Wrap (idée de Jguz01, 2026-11-01) : une feuille de papier bulle (deux rangées de bulles transparentes, reflet
   blanc, bord bleuté). À chaque appui, une bulle éclate : js/app.js passe sa variable --bN à 0 (la bulle s'aplatit en
   un rond froissé) et js/sound.js joue le « pop » ; quand tout a éclaté, une feuille neuve. */
.btn-roll.gen-bubblewrap {
  border-radius: .4em; border: 2px solid rgba(14, 116, 144, .55); color: #0c4a6e; letter-spacing: .12em;
  background:
    radial-gradient(circle .5em at 6.0% 30%, rgb(255 255 255 / calc(.85 * var(--b0, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b0, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b0, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b0, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b0, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 18.6% 30%, rgb(255 255 255 / calc(.85 * var(--b1, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b1, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b1, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b1, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b1, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 31.2% 30%, rgb(255 255 255 / calc(.85 * var(--b2, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b2, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b2, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b2, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b2, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 43.8% 30%, rgb(255 255 255 / calc(.85 * var(--b3, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b3, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b3, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b3, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b3, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 56.4% 30%, rgb(255 255 255 / calc(.85 * var(--b4, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b4, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b4, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b4, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b4, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 69.0% 30%, rgb(255 255 255 / calc(.85 * var(--b5, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b5, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b5, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b5, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b5, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 81.6% 30%, rgb(255 255 255 / calc(.85 * var(--b6, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b6, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b6, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b6, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b6, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 94.2% 30%, rgb(255 255 255 / calc(.85 * var(--b7, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b7, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b7, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b7, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b7, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 12.0% 72%, rgb(255 255 255 / calc(.85 * var(--b8, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b8, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b8, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b8, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b8, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 24.6% 72%, rgb(255 255 255 / calc(.85 * var(--b9, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b9, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b9, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b9, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b9, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 37.2% 72%, rgb(255 255 255 / calc(.85 * var(--b10, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b10, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b10, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b10, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b10, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 49.8% 72%, rgb(255 255 255 / calc(.85 * var(--b11, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b11, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b11, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b11, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b11, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 62.4% 72%, rgb(255 255 255 / calc(.85 * var(--b12, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b12, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b12, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b12, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b12, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 75.0% 72%, rgb(255 255 255 / calc(.85 * var(--b13, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b13, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b13, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b13, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b13, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 87.6% 72%, rgb(255 255 255 / calc(.85 * var(--b14, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b14, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b14, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b14, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b14, 1))) .2em .24em, transparent .47em),
    radial-gradient(circle .5em at 100.2% 72%, rgb(255 255 255 / calc(.85 * var(--b15, 1))) 0 .09em, rgb(224 242 254 / calc(.75 * var(--b15, 1))) .1em .26em, rgb(125 211 252 / calc(.08 + .5 * var(--b15, 1))) .3em .4em, rgb(14 116 144 / calc(.25 + .25 * var(--b15, 1))) .41em .46em, rgb(100 116 139 / calc(.45 - .45 * var(--b15, 1))) .2em .24em, transparent .47em),
    linear-gradient(180deg, rgba(240, 249, 255, .95), rgba(207, 232, 247, .95));
  text-shadow: 0 0 .25em #fff, 0 0 .5em #fff, 0 1px 0 #fff;
  --gs: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 .18em 0 rgba(14, 116, 144, .5), 0 .4em .8em rgba(12, 74, 110, .3);
  --gs-h: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 .22em 0 rgba(14, 116, 144, .5), 0 .5em .9em rgba(12, 74, 110, .35);
  --gs-a: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 .15em .3em rgba(12, 74, 110, .25), 0 .04em 0 rgba(14, 116, 144, .5);
  --edge: .18em;
}
/* le petit éclair blanc de la bulle qui vient d'éclater (data-pop : sa place, posée par js/app.js) */
.btn-roll.gen-bubblewrap::after { width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; left: var(--pop-x, 50%); top: var(--pop-y, 50%); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 255, 255, .6) 35%, transparent 70%); }
.btn-roll.gen-bubblewrap.bw-pop::after { animation: gen-bw-pop .32s ease-out 1; }
@keyframes gen-bw-pop { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.btn-roll.gen-bubblewrap:hover { filter: brightness(1.04); }
.btn-roll.gen-bubblewrap:active { transform: translateY(.14em) scale(.99, .96); filter: none; }

/* ==== Skins du 2026-11-01, lot B2 ==== boutons assortis */
/* Toaster (idée de xenon, 2026-11-01) : une tranche de pain de mie (coins du haut arrondis, croûte dorée), texte grillé. */
.btn-roll.gen-toaster { border: 2px solid #9a4f1c; border-radius: 1.6rem 1.6rem .55rem .55rem; color: #5c2a0a;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif;
  background: radial-gradient(circle, #e3bd80 0 1px, transparent 1.6px) 0 0 / 13px 11px, radial-gradient(ellipse 70% 80% at 50% 55%, #f2cf8f, #f8e3b3 70%, #fbe9c4);
  box-shadow: inset 0 0 0 .18em #d99b55, inset 0 0 .6em rgba(154, 74, 18, .3);
  text-shadow: 0 0 .06em #9a4a12, 0 0 .2em rgba(154, 74, 18, .45);
  --gs: 0 .3em 0 #64748b, 0 .5em 1em rgba(251, 146, 60, .3); --gs-h: 0 .34em 0 #64748b, 0 .7em 1.3em rgba(251, 146, 60, .45); --gs-a: 0 .06em 0 #64748b; }
.btn-roll.gen-toaster:hover { filter: brightness(1.05) saturate(1.1); }
/* Billiards (idée de Dylanrulez123, 2026-11-01) : le feutre vert dans sa bande de bois verni, texte blanc. */
.btn-roll.gen-billiards { border: .2em solid transparent; border-radius: .6rem; color: #f8fafc;
  background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(187, 247, 208, .3), transparent 72%) padding-box, linear-gradient(180deg, #16893f, #0a5427) padding-box, radial-gradient(circle, #fef3c7 0 1.5px, transparent 2px) 0 0 / 14% .2em repeat-x border-box, radial-gradient(circle, #fef3c7 0 1.5px, transparent 2px) 0 100% / 14% .2em repeat-x border-box, linear-gradient(180deg, #8a4b22, #5c2d10) border-box;
  text-shadow: 0 .06em 0 #052e16;
  --gs: 0 .3em 0 #3b1d0a, 0 .5em 1em rgba(34, 197, 94, .3); --gs-h: 0 .34em 0 #3b1d0a, 0 .7em 1.3em rgba(34, 197, 94, .45); --gs-a: 0 .06em 0 #3b1d0a; }
.btn-roll.gen-billiards:hover { filter: brightness(1.1); }
/* Pirate (idée de casmicgraything, 2026-11-01) : une planche de pont dans un cadre de cordage, lettres couleur os. */
.btn-roll.gen-pirate { border: .2em solid transparent; border-radius: .5rem; color: #fef3c7; font-family: Georgia, 'Times New Roman', serif; font-weight: 900;
  background: repeating-linear-gradient(180deg, #8a5426 0 .5em, #6b3f1c .5em .56em) padding-box, repeating-linear-gradient(45deg, #d6a35c 0 3px, #8a5a24 3px 5px, #b8843f 5px 7px) border-box;
  -webkit-text-stroke: .06em #2b1607; paint-order: stroke fill; text-shadow: .04em .07em 0 #082f49;
  --gs: 0 .3em 0 #0e7490, 0 .5em 1em rgba(14, 165, 183, .35); --gs-h: 0 .34em 0 #0e7490, 0 .7em 1.3em rgba(250, 204, 21, .4); --gs-a: 0 .06em 0 #0e7490; }
.btn-roll.gen-pirate:hover { filter: brightness(1.12); }
/* T-Rex (idée de tmanrex, 2026-11-01) : une dalle de pierre mouchetée, texte gravé. */
.btn-roll.gen-trex { border: 2px solid #44403c; border-radius: .7rem .9rem .6rem 1rem; color: #292524; font-family: 'Arial Black', Impact, system-ui, sans-serif;
  background: radial-gradient(circle, rgba(41, 37, 36, .3) 0 1px, transparent 1.6px) 0 0 / 9px 8px, radial-gradient(circle, rgba(255, 255, 255, .35) 0 1px, transparent 1.6px) 4px 3px / 11px 10px, linear-gradient(180deg, #e7e5e4, #a8a29e 60%, #78716c);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .25);
  --gs: 0 .3em 0 #7c2d12, 0 .5em 1em rgba(249, 115, 22, .35); --gs-h: 0 .34em 0 #7c2d12, 0 .7em 1.3em rgba(249, 115, 22, .5); --gs-a: 0 .06em 0 #7c2d12; }
.btn-roll.gen-trex:hover { filter: brightness(1.06); }
/* Birthday Cake (idée de sennybex1, 2026-11-01) : un glaçage rose qui coule sur le chocolat, des vermicelles. */
.btn-roll.gen-cake { border: 2px solid #3b1d0a; border-radius: .7rem; color: #fff; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='11'><path d='M0 0H24V4Q21 4 20.5 7Q20 9.6 18.6 9.6Q17.2 9.6 16.8 7Q16.4 4 13 4Q10 4 9.6 8.4Q9.2 11 7.8 11Q6.4 11 6 8.4Q5.6 4 3 4Q0 4 0 4Z' fill='%23f9a8d4'/></svg>") 0 0 / 30px 14px repeat-x, linear-gradient(180deg, transparent 70%, #fde68a 70% 76%, transparent 76%), linear-gradient(180deg, #7c4a2a, #5b3218);
  -webkit-text-stroke: .08em #db2777; paint-order: stroke fill;
  --gs: 0 .3em 0 #9d174d, 0 .5em 1em rgba(244, 114, 182, .35); --gs-h: 0 .34em 0 #9d174d, 0 .7em 1.3em rgba(244, 114, 182, .5); --gs-a: 0 .06em 0 #9d174d; }
.btn-roll.gen-cake:hover { filter: brightness(1.1); }
/* Carnival (idée de jia jun, 2026-11-01) : l'auvent rayé du stand, le fond bleu nuit, des lettres jaunes de fête foraine. */
.btn-roll.gen-carnival { border: 2px solid #78350f; border-radius: .45rem; color: #fde047; font-family: 'Rockwell Extra Bold', Rockwell, 'Arial Black', Impact, sans-serif; font-weight: 900;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='9'><path d='M0 0H10V5Q5 10 0 5Z' fill='%23dc2626'/><path d='M10 0H20V5Q15 10 10 5Z' fill='%23fef2f2'/></svg>") 0 0 / 26px 12px repeat-x, radial-gradient(ellipse 60% 70% at 50% 60%, rgba(253, 224, 71, .3), transparent 72%), linear-gradient(180deg, #1e3a8a, #172f6e);
  -webkit-text-stroke: .07em #b91c1c; paint-order: stroke fill; text-shadow: .05em .07em 0 #0f172a;
  --gs: 0 .3em 0 #7f1d1d, 0 .5em 1em rgba(250, 204, 21, .35); --gs-h: 0 .34em 0 #7f1d1d, 0 .7em 1.3em rgba(250, 204, 21, .5); --gs-a: 0 .06em 0 #7f1d1d; }
.btn-roll.gen-carnival:hover { filter: brightness(1.12); }

/* ==== Skins du 2026-11-01, lot A ==== boutons assortis */
/* Mini Golf (idée de Kj13 et Jguz01, 2026-11-01) : le green tondu en bandes, la lisse en bois, un trou à droite. */
.btn-roll.gen-golf { border: 3px solid #92400e; border-radius: .6rem; color: #fff; font-weight: 900;
  background: radial-gradient(ellipse .55em .22em at calc(100% - .9em) 70%, #022c12 0 60%, transparent 70%), radial-gradient(ellipse 70% 90% at 40% 0%, rgba(255, 255, 255, .25), transparent 60%), repeating-linear-gradient(90deg, #4ade80 0 1.1em, #22c55e 1.1em 2.2em);
  box-shadow: inset 0 0 0 2px #fbbf24; text-shadow: 0 2px 0 #14532d;
  --gs: inset 0 0 0 2px #fbbf24, 0 .3em 0 #713f12, 0 .5em 1em rgba(34, 197, 94, .3); --gs-h: inset 0 0 0 2px #fbbf24, 0 .34em 0 #713f12, 0 .7em 1.3em rgba(34, 197, 94, .45); --gs-a: inset 0 0 0 2px #fbbf24, 0 .06em 0 #713f12; }
.btn-roll.gen-golf:hover { filter: brightness(1.06); }
/* Soccer (idée de kingston, 2026-11-01) : le filet du but derrière, la barre blanche, la pelouse dessous. */
.btn-roll.gen-soccer { border: 3px solid #f8fafc; border-bottom-color: #15803d; border-radius: .35rem; color: #fff; font-family: 'Arial Black', Impact, system-ui, sans-serif;
  background: repeating-linear-gradient(45deg, rgba(248, 250, 252, .25) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(248, 250, 252, .25) 0 1px, transparent 1px 9px), linear-gradient(180deg, #0f172a, #1e3a5f 72%, #15803d 72%, #166534);
  text-shadow: 2px 2px 0 #052e16;
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(248, 250, 252, .2); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.3em rgba(248, 250, 252, .3); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-soccer:hover { filter: brightness(1.12); }
/* Basketball (idée de jjcoolcid1, 2026-11-01) : le cuir orange du ballon et ses coutures noires. */
.btn-roll.gen-basketball { border: 2px solid #1c1917; border-radius: 999px; color: #fff7ed; font-family: 'Arial Black', Impact, system-ui, sans-serif;
  background: linear-gradient(90deg, transparent calc(50% - 1.5px), #1c1917 calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)), radial-gradient(ellipse 30% 140% at -6% 50%, transparent 82%, #1c1917 84% 88%, transparent 90%), radial-gradient(ellipse 30% 140% at 106% 50%, transparent 82%, #1c1917 84% 88%, transparent 90%), radial-gradient(circle, rgba(124, 45, 18, .3) 0 1px, transparent 1.5px) 0 0 / 5px 5px, radial-gradient(ellipse 80% 120% at 35% 10%, #fdba74, #f97316 55%, #c2410c);
  text-shadow: 0 2px 0 #431407, 0 0 4px #431407;
  --gs: 0 .3em 0 #7c2d12, 0 .5em 1em rgba(249, 115, 22, .3); --gs-h: 0 .34em 0 #7c2d12, 0 .7em 1.3em rgba(249, 115, 22, .45); --gs-a: 0 .06em 0 #7c2d12; }
.btn-roll.gen-basketball:hover { filter: brightness(1.06); }
/* Safari (idée de dylanbuckleyisjewish, 2026-11-01) : le ciel du couchant, un acacia, des rayures de zèbre au bord. */
.btn-roll.gen-safari { border: 2px solid #431407; border-radius: .6rem; color: #fef3c7; font-family: 'Arial Black', Impact, system-ui, sans-serif;
  background: repeating-linear-gradient(105deg, #1c1917 0 5px, #fafaf9 5px 10px) 0 0 / .55em 100% no-repeat, repeating-linear-gradient(105deg, #1c1917 0 5px, #fafaf9 5px 10px) 100% 0 / .55em 100% no-repeat, linear-gradient(180deg, #9a3412, #c2410c 50%, #f97316 78%, #a16207 80%, #713f12);
  padding-inline: 1.7em; text-shadow: 0 2px 0 #431407;
  --gs: 0 .3em 0 #431407, 0 .5em 1em rgba(245, 158, 11, .3); --gs-h: 0 .34em 0 #431407, 0 .7em 1.3em rgba(245, 158, 11, .45); --gs-a: 0 .06em 0 #431407; }
.btn-roll.gen-safari:hover { filter: brightness(1.1); }
/* Mining (idée de number 1, 2026-11-01) : la roche sombre, des éclats de minerai, la lueur de la lampe à gauche. */
.btn-roll.gen-mining { border: 2px solid #0c0a09; border-radius: .45rem; color: #fde68a; font-family: 'Arial Black', Impact, system-ui, sans-serif;
  background: radial-gradient(circle at 18% 70%, #67e8f9 0 2px, transparent 3px), radial-gradient(circle at 82% 30%, #fbbf24 0 2px, transparent 3px), radial-gradient(circle at 66% 78%, #34d399 0 1.5px, transparent 2.5px), radial-gradient(circle at 34% 22%, #c084fc 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse 50% 120% at 0% 0%, rgba(251, 191, 36, .4), transparent 70%), linear-gradient(160deg, #44403c, #292524 60%, #1c1917);
  text-shadow: 0 -1px 0 #fff7ad, 0 2px 0 #000, 0 0 .4em rgba(251, 191, 36, .5);
  --gs: 0 .3em 0 #0c0a09, 0 .5em 1em rgba(251, 191, 36, .2); --gs-h: 0 .34em 0 #0c0a09, 0 .7em 1.3em rgba(251, 191, 36, .35); --gs-a: 0 .06em 0 #0c0a09; }
.btn-roll.gen-mining:hover { filter: brightness(1.15); }
/* Cat (idée de baby boy, 2026-11-01) : le coussin lavande capitonné, sa couture, et du texte en laine rose. */
.btn-roll.gen-cat { border: 2px solid #7c3aed; border-radius: 999px; color: #9d174d; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 900;
  background: radial-gradient(circle, #6d28d9 0 1.5px, transparent 2.5px) 10px 8px / 22px 18px, linear-gradient(180deg, #ede9fe, #c4b5fd 70%, #a78bfa);
  outline: 2px dashed rgba(255, 255, 255, .75); outline-offset: -6px; text-shadow: 0 1px 0 #fce7f3;
  --gs: 0 .3em 0 #5b21b6, 0 .5em 1em rgba(167, 139, 250, .35); --gs-h: 0 .34em 0 #5b21b6, 0 .7em 1.3em rgba(167, 139, 250, .5); --gs-a: 0 .06em 0 #5b21b6; }
.btn-roll.gen-cat:hover { filter: brightness(1.05); }

/* ==== Skins du 2026-11-05, lot 1 ==== boutons assortis */
/* Overture (promis à 0casmictechthing) : la laque noire d'un piano, un filet d'or, un rang de touches d'ivoire en bas. */
.btn-roll.gen-overture { border: 2px solid #b08d3c; border-radius: .55rem; color: #f3d27a;
  font-family: 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(90deg, transparent 0 calc(100% - 1px), #a8a29e 0) 0 100% / 12px .32em repeat-x, linear-gradient(#f6f1e3, #f6f1e3) 0 100% / 100% .32em no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 30%), linear-gradient(180deg, #1c1c22, #050507);
  text-shadow: 0 .05em 0 #5c3d0a, 0 0 .3em rgba(243, 210, 122, .45);
  --gs: 0 .3em 0 #27272a, 0 .5em 1em rgba(222, 184, 92, .25); --gs-h: 0 .34em 0 #27272a, 0 .7em 1.3em rgba(222, 184, 92, .4); --gs-a: 0 .06em 0 #27272a; }
.btn-roll.gen-overture:hover { filter: brightness(1.12); }
/* Cheese (idée de casmicgraything et casmictechthing) : un bloc d'emmental, ses trous, son texte imprimé au fer. */
.btn-roll.gen-cheese { border: 2px solid #b7791f; border-radius: .7rem; color: #7c3f00;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif;
  background: radial-gradient(ellipse 9px 8px at 12% 30%, #d49a0b 0 70%, transparent 75%), radial-gradient(ellipse 7px 6px at 88% 70%, #d49a0b 0 70%, transparent 75%), radial-gradient(circle 4px at 70% 20%, #d49a0b 0 70%, transparent 80%), radial-gradient(circle 5px at 30% 82%, #d49a0b 0 70%, transparent 80%), linear-gradient(180deg, #fff0a8, #fcd94a 30%, #eab308);
  text-shadow: 0 .05em 0 rgba(255, 246, 200, .8);
  --gs: 0 .3em 0 #a16207, 0 .5em 1em rgba(250, 204, 21, .3); --gs-h: 0 .34em 0 #a16207, 0 .7em 1.3em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #a16207; }
.btn-roll.gen-cheese:hover { filter: brightness(1.05) saturate(1.1); }
/* Archaeology (idée de casmicgraything et Alt) : une plaque de terre en couches, texte en os. */
.btn-roll.gen-dig { border: 2px solid #3f2a1a; border-radius: .45rem; color: #f3ead7;
  font-family: 'Arial Rounded MT Bold', 'Arial Black', system-ui, sans-serif; -webkit-text-stroke: .02em #3b2a1a;
  background: radial-gradient(circle at 14% 70%, #5c4a3a 0 3px, transparent 4px), radial-gradient(circle at 84% 34%, #8a7a66 0 2px, transparent 3px), linear-gradient(178deg, #4a3423 0 22%, #7b5534 22% 50%, #a07548 50% 54%, #8c6239 54% 80%, #6e4b2c 80%);
  text-shadow: 0 .06em 0 #3b2a1a;
  --gs: 0 .3em 0 #2a1a0e, 0 .5em 1em rgba(184, 141, 92, .3); --gs-h: 0 .34em 0 #2a1a0e, 0 .7em 1.3em rgba(184, 141, 92, .45); --gs-a: 0 .06em 0 #2a1a0e; }
.btn-roll.gen-dig:hover { filter: brightness(1.1); }
/* Angel (idée de qwertyuiop) : un ciel de crépuscule, une auréole d'or au-dessus du texte en lumière blanche. */
.btn-roll.gen-angel { border: 2px solid #e9c46a; border-radius: 999px; color: #fff;
  background: radial-gradient(ellipse 18% 16% at 50% 14%, transparent 55%, #fde68a 60% 75%, transparent 80%), radial-gradient(ellipse 60% 80% at 50% 60%, rgba(253, 230, 138, .45), transparent 70%), linear-gradient(180deg, #1b2452, #34478f 70%, #6e7fc4);
  text-shadow: 0 0 .05em #fff, 0 .04em .02em #8a6512, 0 0 .3em rgba(253, 230, 138, .9);
  --gs: 0 .3em 0 #b08d3c, 0 .5em 1.2em rgba(253, 230, 138, .45); --gs-h: 0 .34em 0 #b08d3c, 0 .7em 1.5em rgba(253, 230, 138, .6); --gs-a: 0 .06em 0 #b08d3c; }
.btn-roll.gen-angel:hover { filter: brightness(1.1); }
/* Demon (idée de qwertyuiop, avec l'ange déchu de Roanono) : obsidienne fendue de braise, texte marqué au fer rouge. */
.btn-roll.gen-demon { border: 2px solid #7f1d1d; border-radius: .55rem; color: #ff4d5e;
  background: linear-gradient(115deg, transparent 20%, rgba(220, 38, 38, .55) 21%, transparent 22.5%, transparent 70%, rgba(220, 38, 38, .45) 71%, transparent 72.5%), radial-gradient(ellipse 70% 60% at 50% 120%, rgba(220, 38, 38, .55), transparent 70%), linear-gradient(160deg, #1a0b10, #0b0507);
  text-shadow: 0 0 .04em #ffe4e6, 0 .05em .02em #000, 0 0 .3em rgba(244, 63, 94, .9);
  --gs: 0 .3em 0 #450a0a, 0 .5em 1.2em rgba(220, 38, 38, .45); --gs-h: 0 .34em 0 #450a0a, 0 .7em 1.5em rgba(220, 38, 38, .6); --gs-a: 0 .06em 0 #450a0a; }
.btn-roll.gen-demon:hover { filter: brightness(1.15); }

/* ==== Skins du 2026-11-05, lot 2 ==== boutons assortis */
/* Deep Sea (idées de finnnnn, Deadshot, YeeHao2 et LEVIATHAN) : l'abysse bleu nuit, la lumière de la surface, un texte bioluminescent. */
.btn-roll.gen-deepsea { border: 2px solid #0e4a63; border-radius: .7rem; color: #d9fdff;
  background: radial-gradient(circle, rgba(207, 250, 254, .5) 0 1px, transparent 1.6px) 0 0 / 17px 13px, radial-gradient(ellipse 30% 60% at 30% -20%, rgba(165, 243, 252, .35), transparent 70%), radial-gradient(ellipse 30% 60% at 75% -20%, rgba(165, 243, 252, .25), transparent 70%), linear-gradient(180deg, #0c4a6e, #041a2e 70%, #020c18);
  text-shadow: 0 0 .06em #fff, 0 0 .25em #22d3ee, 0 0 .5em rgba(34, 211, 238, .6);
  --gs: 0 .3em 0 #011524, 0 .5em 1em rgba(34, 211, 238, .3); --gs-h: 0 .34em 0 #011524, 0 .7em 1.3em rgba(34, 211, 238, .45); --gs-a: 0 .06em 0 #011524; }
.btn-roll.gen-deepsea:hover { filter: brightness(1.15); }
/* Bubble (idée de finnnnn) : une grosse bulle de savon pastel, film irisé, reflet en haut à gauche. */
.btn-roll.gen-bubble { border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; color: #312e81;
  background: radial-gradient(ellipse 12% 30% at 14% 28%, rgba(255, 255, 255, .95), transparent 70%), linear-gradient(100deg, rgba(244, 114, 182, .35), rgba(250, 204, 21, .3) 30%, rgba(74, 222, 128, .3) 55%, rgba(56, 189, 248, .35) 80%, rgba(167, 139, 250, .4)), linear-gradient(160deg, #c7e9ff, #e4d9ff 55%, #ffd9ef);
  text-shadow: 0 .05em 0 rgba(255, 255, 255, .9);
  --gs: 0 .3em 0 #a5b4fc, 0 .5em 1em rgba(165, 180, 252, .4); --gs-h: 0 .34em 0 #a5b4fc, 0 .7em 1.3em rgba(165, 180, 252, .55); --gs-a: 0 .06em 0 #a5b4fc; }
.btn-roll.gen-bubble:hover { filter: brightness(1.04) saturate(1.15); }
/* Yin and Yang (idées de kaz et JBearr12) : l'encre noire, un taiji de papier à chaque bout, le texte blanc (jamais du
   blanc sur blanc : le texte ne passe pas sur la moitié claire). */
.btn-roll.gen-yinyang { border: 2px solid #a8a29e; border-radius: .6rem; color: #fafaf9;
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  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='47' fill='%230c0a09' stroke='%23d6d3d1' stroke-width='5'/><path d='M50 3A47 47 0 0 1 50 97A23.5 23.5 0 0 1 50 50A23.5 23.5 0 0 0 50 3Z' fill='%23f5f5f4'/><circle cx='50' cy='26.5' r='7' fill='%230c0a09'/><circle cx='50' cy='73.5' r='7' fill='%23f5f5f4'/></svg>") .55em 50% / .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='47' fill='%230c0a09' stroke='%23d6d3d1' stroke-width='5'/><path d='M50 3A47 47 0 0 1 50 97A23.5 23.5 0 0 1 50 50A23.5 23.5 0 0 0 50 3Z' fill='%23f5f5f4'/><circle cx='50' cy='26.5' r='7' fill='%230c0a09'/><circle cx='50' cy='73.5' r='7' fill='%23f5f5f4'/></svg>") calc(100% - .55em) 50% / .8em .8em no-repeat, radial-gradient(ellipse 60% 80% at 50% 50%, rgba(120, 113, 108, .35), transparent 70%), #0c0a09;
  text-shadow: 0 0 .15em rgba(214, 211, 209, .45);
  --gs: 0 .3em 0 #44403c, 0 .5em 1em rgba(214, 211, 209, .3); --gs-h: 0 .34em 0 #44403c, 0 .7em 1.3em rgba(214, 211, 209, .45); --gs-a: 0 .06em 0 #44403c; }
.btn-roll.gen-yinyang:hover { filter: contrast(1.1); }
/* Frutiger Aero (promis à jia jun) : du verre bleu brillant, la colline verte, le grand reflet blanc. */
.btn-roll.gen-aero { border: 2px solid #38bdf8; border-radius: 999px; color: #fff; -webkit-text-stroke: .02em #0369a1;
  font-family: 'Segoe UI', 'Frutiger', 'Myriad Pro', 'Helvetica Neue', system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .2) 48%, transparent 49%), radial-gradient(ellipse 60% 40% at 25% 120%, #52c234 0 60%, transparent 62%), radial-gradient(ellipse 70% 45% at 85% 125%, #3fae2a 0 60%, transparent 62%), linear-gradient(180deg, #2ea7e8, #6fd0f7 60%, #c4f1ff);
  text-shadow: 0 .05em 0 #075985, 0 .08em .12em rgba(3, 105, 161, .5);
  --gs: 0 .3em 0 #0369a1, 0 .5em 1em rgba(56, 189, 248, .4); --gs-h: 0 .34em 0 #0369a1, 0 .7em 1.3em rgba(56, 189, 248, .55); --gs-a: 0 .06em 0 #0369a1; }
.btn-roll.gen-aero:hover { filter: brightness(1.06) saturate(1.1); }

/* ==== Skins du 2026-11-05, lot 3 ==== boutons assortis */
/* Blackout (promis à Mace_67) : noir mat, le texte allumé d'une lumière chaude, un liseré qui luit. */
.btn-roll.gen-blackout { border: 2px solid #f5ecd6; border-radius: .55rem; color: #fff8e7;
  font-family: 'DIN Alternate', 'Bahnschrift', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  background: radial-gradient(ellipse 70% 80% at 50% 60%, #0b0b0c, #020202 70%);
  text-shadow: 0 0 .06em #fff, 0 0 .3em rgba(255, 236, 190, .8), 0 0 .7em rgba(255, 214, 140, .4);
  --gs: 0 .3em 0 #1c1c1c, 0 0 1.2em rgba(255, 236, 190, .35); --gs-h: 0 .34em 0 #1c1c1c, 0 0 1.6em rgba(255, 236, 190, .55); --gs-a: 0 .06em 0 #1c1c1c; }
.btn-roll.gen-blackout:hover { filter: brightness(1.15); }
/* Prism (promis à Idkwhatnamemyself) : un cristal taillé à la couleur de la rareté du dernier tirage (--pr-*). */
.btn-roll.gen-prism { border: 2px solid var(--pr-b); border-radius: .7rem; color: #fff; -webkit-text-stroke: .02em var(--pr-c);
  background: linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, .5) 25%, transparent 27%, transparent 64%, rgba(255, 255, 255, .3) 65%, transparent 67%), conic-gradient(from 20deg, var(--pr-b), var(--pr-a) 12%, var(--pr-c) 24%, var(--pr-a) 37%, var(--pr-b) 50%, var(--pr-a) 62%, var(--pr-c) 75%, var(--pr-a) 88%, var(--pr-b));
  text-shadow: 0 .05em 0 var(--pr-c);
  --gs: 0 .3em 0 var(--pr-c), 0 .5em 1.2em color-mix(in srgb, var(--pr-a) 45%, transparent); --gs-h: 0 .34em 0 var(--pr-c), 0 .7em 1.5em color-mix(in srgb, var(--pr-a) 60%, transparent); --gs-a: 0 .06em 0 var(--pr-c);
  transition: border-color .4s, filter .2s; }
.btn-roll.gen-prism:hover { filter: brightness(1.1) saturate(1.1); }
/* Rainbow Paint (idée de finnnnn) : une toile en lin, un coup de pinceau arc-en-ciel derrière le texte. */
.btn-roll.gen-paint { border: .16em solid #a0703c; border-radius: .3rem; color: #1f2937;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif;
  background: linear-gradient(90deg, #e11d48, #ea580c, #ca8a04, #16a34a, #2563eb, #7c3aed) 50% 82% / 78% .3em no-repeat, repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), #f5efe2;
  text-shadow: 0 .04em 0 rgba(255, 255, 255, .8);
  --gs: 0 .3em 0 #6b4423, 0 .5em 1em rgba(234, 88, 12, .25); --gs-h: 0 .34em 0 #6b4423, 0 .7em 1.3em rgba(234, 88, 12, .4); --gs-a: 0 .06em 0 #6b4423; }
.btn-roll.gen-paint:hover { filter: saturate(1.2); }
/* Touch Grass (idée de finnnnn) : une pelouse tondue à bandes, le texte tondu dedans. */
.btn-roll.gen-grass { border: 2px solid #2f5e1a; border-radius: .6rem; color: #e7fbb0;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif;
  background: repeating-linear-gradient(92deg, rgba(20, 83, 45, .25) 0 1px, transparent 1px 3px), repeating-linear-gradient(115deg, rgba(255, 255, 255, .08) 0 14px, rgba(0, 0, 0, .08) 14px 28px), linear-gradient(180deg, #4d9a2c, #2f6a1b);
  text-shadow: 0 -.04em 0 #1f4d12, 0 .05em .06em rgba(20, 50, 10, .5);
  --gs: 0 .3em 0 #1f4d12, 0 .5em 1em rgba(132, 204, 22, .3); --gs-h: 0 .34em 0 #1f4d12, 0 .7em 1.3em rgba(132, 204, 22, .45); --gs-a: 0 .06em 0 #1f4d12; }
.btn-roll.gen-grass:hover { filter: brightness(1.08); }

/* ==== Skins du 2026-11-05, lot 4 ==== boutons assortis */
/* Obsidian (idée de finnnnn) : verre volcanique poli, reflet oblique, texte aux arêtes claires. */
.btn-roll.gen-obsidian { border: 2px solid #4c4370; border-radius: .45rem; color: #e9e4ff; -webkit-text-stroke: .015em #f5f3ff;
  background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, .18) 36%, transparent 42%), radial-gradient(ellipse 50% 80% at 20% 30%, rgba(139, 92, 246, .3), transparent 70%), linear-gradient(160deg, #15121e, #050407);
  text-shadow: 0 .05em 0 #0a0810, 0 0 .3em rgba(139, 92, 246, .55);
  --gs: 0 .3em 0 #1c1726, 0 .5em 1.2em rgba(139, 92, 246, .35); --gs-h: 0 .34em 0 #1c1726, 0 .7em 1.5em rgba(139, 92, 246, .5); --gs-a: 0 .06em 0 #1c1726; }
.btn-roll.gen-obsidian:hover { filter: brightness(1.2); }
/* Horse Stable (idée de R77) : une porte de grange rouge, cadre blanc, paille en bas. */
.btn-roll.gen-stable { border: .16em solid #f5efe0; border-radius: .25rem; color: #fbf7ee; font-family: 'Rockwell', 'Clarendon', 'Roboto Slab', Georgia, serif;
  background: linear-gradient(0deg, #e8c46a 0 .25em, transparent .25em), repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 14px), linear-gradient(180deg, #b3261e, #8f1d17);
  text-shadow: 0 .05em 0 #5c1a12;
  --gs: 0 .3em 0 #5c3b1e, 0 .5em 1em rgba(179, 38, 30, .3); --gs-h: 0 .34em 0 #5c3b1e, 0 .7em 1.3em rgba(179, 38, 30, .45); --gs-a: 0 .06em 0 #5c3b1e; }
.btn-roll.gen-stable:hover { filter: brightness(1.08); }
/* Crate Smash (idée de jjcoolcid1) : une caisse en bois cerclée, texte au pochoir jaune. */
.btn-roll.gen-crates { border: 2px solid #4a2e17; border-radius: .3rem; color: #facc15; font-family: 'Stencil', 'Impact', 'Arial Black', system-ui, sans-serif;
  background: linear-gradient(to top right, transparent calc(50% - 3px), rgba(107, 68, 35, .6) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .15) 0 1px, transparent 1px 12px), linear-gradient(180deg, #c58745, #a0602d);
  text-shadow: 0 .05em 0 #000, 0 0 .03em #000, 0 0 .03em #000;
  --gs: 0 .3em 0 #4a2e17, 0 .5em 1em rgba(250, 204, 21, .2); --gs-h: 0 .34em 0 #4a2e17, 0 .7em 1.3em rgba(250, 204, 21, .35); --gs-a: 0 .06em 0 #4a2e17; }
.btn-roll.gen-crates:hover { filter: brightness(1.08); }
/* Construction (idée de yukitsunodaiscool) : un panneau de chantier jaune et noir, texte brique. */
.btn-roll.gen-crane { border: 2px solid #111827; border-radius: .3rem; color: #b91c1c; -webkit-text-stroke: .02em #f5f5f4; font-family: 'Arial Black', system-ui, sans-serif;
  background: repeating-linear-gradient(-45deg, #facc15 0 10px, #111827 10px 20px) 0 0 / 100% .3em no-repeat, repeating-linear-gradient(-45deg, #facc15 0 10px, #111827 10px 20px) 0 100% / 100% .3em no-repeat, linear-gradient(180deg, #d6d3d1, #a8a29e);
  text-shadow: 0 .05em 0 #57130f;
  --gs: 0 .3em 0 #44403c, 0 .5em 1em rgba(250, 204, 21, .3); --gs-h: 0 .34em 0 #44403c, 0 .7em 1.3em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #44403c; }
.btn-roll.gen-crane:hover { filter: brightness(1.06); }

/* ==== Skins du 2026-11-05, lot 5 ==== boutons assortis */
/* Carousel (idée de KMC) : l'auvent rayé rouge et crème, une rangée d'ampoules, texte doré. */
.btn-roll.gen-carousel { border: 2px solid #ca8a04; border-radius: .6rem; color: #fde68a; font-family: 'Rockwell', 'Clarendon', Georgia, serif;
  background: radial-gradient(circle, #fff7c2 0 2px, #f59e0b 3px, transparent 4px) 0 .5em / 14px 10px repeat-x, repeating-linear-gradient(90deg, #dc2626 0 14px, #fef3c7 14px 28px) 0 0 / 100% .38em no-repeat, linear-gradient(180deg, #3b0764, #1e0838);
  text-shadow: 0 .05em 0 #7c2d12, 0 0 .3em rgba(250, 204, 21, .6);
  --gs: 0 .3em 0 #7c2d12, 0 .5em 1.2em rgba(250, 204, 21, .3); --gs-h: 0 .34em 0 #7c2d12, 0 .7em 1.5em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #7c2d12; }
.btn-roll.gen-carousel:hover { filter: brightness(1.12); }
/* Void Reaper (idée de Dylanrulez123) : le vide violet qui tourne, texte spectral. */
.btn-roll.gen-reaper { border: 2px solid #4c1d95; border-radius: .6rem; color: #e0f2fe; font-family: 'Copperplate', 'Optima', Georgia, serif;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(139, 92, 246, .12) 0 10deg, transparent 10deg 30deg), radial-gradient(ellipse 70% 90% at 50% 50%, #2e1065, #0b0618);
  text-shadow: 0 0 .06em #fff, 0 0 .3em rgba(125, 211, 252, .8);
  --gs: 0 .3em 0 #1e1b4b, 0 .5em 1.2em rgba(124, 58, 237, .4); --gs-h: 0 .34em 0 #1e1b4b, 0 .7em 1.5em rgba(124, 58, 237, .55); --gs-a: 0 .06em 0 #1e1b4b; }
.btn-roll.gen-reaper:hover { filter: brightness(1.15); }
/* Cyberpunk (idée de leo) : panneau sombre, liseré magenta et cyan, texte néon dédoublé. */
.btn-roll.gen-cyber { border: 2px solid #ec4899; border-radius: .2rem; color: #f0f9ff; font-family: 'Orbitron', 'Eurostile', 'Bank Gothic', 'Arial Narrow', system-ui, sans-serif;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(236, 72, 153, .3), transparent 35%, transparent 65%, rgba(34, 211, 238, .3)), linear-gradient(180deg, #120a24, #070512);
  text-shadow: -.05em 0 0 rgba(236, 72, 153, .9), .05em 0 0 rgba(34, 211, 238, .9);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .6);
  --gs: 0 .3em 0 #0e7490, 0 .5em 1.2em rgba(236, 72, 153, .4); --gs-h: 0 .34em 0 #0e7490, 0 .7em 1.5em rgba(236, 72, 153, .55); --gs-a: 0 .06em 0 #0e7490; }
.btn-roll.gen-cyber:hover { filter: brightness(1.15) saturate(1.2); }
/* Stage (idées de casmicgraything) : rideaux rouges sur les côtés, la rampe dorée, texte de marquise. */
.btn-roll.gen-stage { border: 2px solid #ca8a04; border-radius: .35rem; color: #fef3c7; font-family: 'Didot', 'Bodoni 72', Georgia, serif;
  background: repeating-linear-gradient(90deg, #7f1d1d 0 4px, #b91c1c 4px 8px) 0 0 / 1.1em 100% no-repeat, repeating-linear-gradient(90deg, #b91c1c 0 4px, #7f1d1d 4px 8px) 100% 0 / 1.1em 100% no-repeat, radial-gradient(ellipse 40% 90% at 50% 0%, rgba(254, 243, 199, .3), transparent 70%), linear-gradient(180deg, #1f1a17, #0a0807);
  text-shadow: 0 .05em 0 #451a03, 0 0 .3em rgba(253, 230, 138, .6);
  --gs: 0 .3em 0 #78350f, 0 .5em 1.2em rgba(250, 204, 21, .25); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.5em rgba(250, 204, 21, .4); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-stage:hover { filter: brightness(1.12); }

/* ==== Skins du 2026-11-05, lot 6 ==== boutons assortis */
/* Sticky Notes (idée de finnnnn) : une grande note jaune de travers, coin replié, texte au feutre. */
.btn-roll.gen-sticky { border: 0; border-radius: .1rem; color: #1e293b; font-family: 'Marker Felt', 'Chalkboard SE', 'Bradley Hand', cursive;
  background: linear-gradient(135deg, transparent 0 88%, rgba(0, 0, 0, .15) 88% 92%, transparent 92%), linear-gradient(180deg, #facc15 0 14%, #fde047 14%);
  transform: rotate(-1deg);
  --gs: 0 .3em 0 #ca8a04, 0 .5em 1em rgba(0, 0, 0, .25); --gs-h: 0 .34em 0 #ca8a04, 0 .7em 1.3em rgba(0, 0, 0, .3); --gs-a: 0 .06em 0 #ca8a04; }
.btn-roll.gen-sticky:hover { filter: brightness(1.04); }
/* Souvenir Coin (idée de finnnnn) : l'ovale de cuivre poli, texte frappé en relief. */
.btn-roll.gen-souvenir { border: 2px solid #7c3a17; border-radius: 50% / 50%; color: #5c220a; font-family: 'Rockwell', 'Times New Roman', serif;
  background: radial-gradient(ellipse 60% 50% at 35% 30%, rgba(255, 237, 213, .55), transparent 70%), linear-gradient(160deg, #e3a06a, #c2703d 45%, #a4552a 70%, #d08a55);
  text-shadow: 0 .04em 0 rgba(255, 237, 213, .75), 0 -.03em 0 #3a1404;
  --gs: 0 .3em 0 #7c3a17, 0 .5em 1em rgba(234, 140, 80, .3); --gs-h: 0 .34em 0 #7c3a17, 0 .7em 1.3em rgba(234, 140, 80, .45); --gs-a: 0 .06em 0 #7c3a17; }
.btn-roll.gen-souvenir:hover { filter: brightness(1.08); }
/* Duck Singularity (idée de Gray alt) : le disque d'accrétion doré autour d'un trou noir, texte or. */
.btn-roll.gen-ducksing { border: 2px solid #ca8a04; border-radius: .7rem; color: #fde68a; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(ellipse 14% 40% at 50% 50%, #000 0 60%, transparent 100%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(251, 191, 36, .4) 0 6deg, rgba(234, 88, 12, .2) 6deg 14deg, transparent 14deg 22deg), radial-gradient(ellipse 70% 80% at 50% 50%, #3b1d06, #0a0603);
  text-shadow: 0 0 .05em #fffbeb, 0 .05em 0 #78350f, 0 0 .3em rgba(251, 191, 36, .8);
  --gs: 0 .3em 0 #78350f, 0 .5em 1.2em rgba(251, 191, 36, .4); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.5em rgba(251, 191, 36, .55); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-ducksing:hover { filter: brightness(1.12); }
/* Centipede (idée de finnnnn) : les anneaux vernis d'un mille-pattes en rang, texte crème. */
.btn-roll.gen-centipede { border: 2px solid #431407; border-radius: 999px; color: #fef3c7; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(ellipse 14px 70% at 50% 50%, rgba(254, 215, 170, .25) 0 30%, transparent 32%) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #9a3412 0 26px, #431407 26px 28px), #9a3412;
  text-shadow: 0 .05em 0 #431407, 0 0 .1em #431407;
  --gs: 0 .3em 0 #431407, 0 .5em 1em rgba(180, 83, 9, .3); --gs-h: 0 .34em 0 #431407, 0 .7em 1.3em rgba(180, 83, 9, .45); --gs-a: 0 .06em 0 #431407; }
.btn-roll.gen-centipede:hover { filter: brightness(1.1); }

/* ==== Skins du 2026-11-05, lot 7 ==== boutons assortis */
/* Pencil (idée d'IXOLAF2) : un crayon jaune à pans, gomme rose à gauche, texte à la feuille d'or. */
.btn-roll.gen-pencil { border: 2px solid #78350f; border-radius: .4rem; color: #92400e; font-family: 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
  background: linear-gradient(90deg, #f9a8d4 0 .8em, #9ca3af .8em .95em, #e5e7eb .95em 1.1em, transparent 1.1em), linear-gradient(180deg, #fde047 0 30%, #facc15 30% 34%, #eab308 34% 66%, #ca8a04 66% 70%, #a16207 70%);
  text-shadow: 0 .04em 0 rgba(255, 255, 255, .6);
  --gs: 0 .3em 0 #78350f, 0 .5em 1em rgba(250, 204, 21, .3); --gs-h: 0 .34em 0 #78350f, 0 .7em 1.3em rgba(250, 204, 21, .45); --gs-a: 0 .06em 0 #78350f; }
.btn-roll.gen-pencil:hover { filter: brightness(1.05); }
/* Pomeranians (idée de DandoriNinja) : un pré pastel, des empreintes, texte caramel moelleux. */
.btn-roll.gen-pom { border: 2px solid #65a30d; border-radius: 999px; color: #d97706; -webkit-text-stroke: .02em #fffbeb; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(circle at 10% 30%, rgba(120, 80, 40, .2) 0 4px, transparent 5px), radial-gradient(circle at 90% 70%, rgba(120, 80, 40, .2) 0 4px, transparent 5px), linear-gradient(180deg, #d9f99d, #a3e635);
  text-shadow: 0 .05em 0 #92400e;
  --gs: 0 .3em 0 #4d7c0f, 0 .5em 1em rgba(251, 191, 36, .3); --gs-h: 0 .34em 0 #4d7c0f, 0 .7em 1.3em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #4d7c0f; }
.btn-roll.gen-pom:hover { filter: brightness(1.05); }
/* Atom (idée de finnnnn) : le tableau bleu nuit quadrillé, une orbite, texte noyau rouge. */
.btn-roll.gen-atom { border: 2px solid #3b82f6; border-radius: .6rem; color: #ef4444; -webkit-text-stroke: .02em #fecaca; font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse 46% 40% at 50% 50%, transparent 92%, rgba(147, 197, 253, .5) 94% 97%, transparent 99%), linear-gradient(90deg, rgba(147, 197, 253, .08) 1px, transparent 1px) 0 0 / 10px 10px, radial-gradient(ellipse 70% 90% at 50% 50%, #1e3a8a, #0b1430);
  text-shadow: 0 0 .3em rgba(96, 165, 250, .9);
  --gs: 0 .3em 0 #1e3a8a, 0 .5em 1.2em rgba(59, 130, 246, .35); --gs-h: 0 .34em 0 #1e3a8a, 0 .7em 1.5em rgba(59, 130, 246, .5); --gs-a: 0 .06em 0 #1e3a8a; }
.btn-roll.gen-atom:hover { filter: brightness(1.15); }
/* Witch (idée de mark) : la nuit violette, la pleine lune, texte en lumière de potion. */
.btn-roll.gen-witch { border: 2px solid #7e22ce; border-radius: .6rem; color: #d9f99d; font-family: 'Papyrus', 'Luminari', 'Copperplate', Georgia, serif;
  background: radial-gradient(circle at 88% 30%, #fef9c3 0 .35em, rgba(254, 249, 195, .2) .4em, transparent .6em), linear-gradient(180deg, #2e1065, #6b21a8);
  text-shadow: 0 0 .06em #fff, 0 0 .3em rgba(163, 230, 53, .9);
  --gs: 0 .3em 0 #3b0764, 0 .5em 1.2em rgba(163, 230, 53, .3); --gs-h: 0 .34em 0 #3b0764, 0 .7em 1.5em rgba(163, 230, 53, .45); --gs-a: 0 .06em 0 #3b0764; }
.btn-roll.gen-witch:hover { filter: brightness(1.15); }

/* ==== Skins du 2026-11-05, lot 8 ==== boutons assortis */
/* Black & White TV (idée de Jguz01) : un écran gris bombé à lignes de balayage, texte en phosphore. */
.btn-roll.gen-tv { border: .16em solid #2b2118; border-radius: 1rem / .8rem; color: #f5f5f5; font-family: 'Courier New', monospace;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), radial-gradient(ellipse 90% 90% at 50% 50%, #6b6b6b, #2a2a2a);
  text-shadow: 0 0 .06em #fff, 0 0 .3em rgba(255, 255, 255, .5);
  --gs: 0 .3em 0 #1c1610, 0 .5em 1em rgba(0, 0, 0, .35); --gs-h: 0 .34em 0 #1c1610, 0 .7em 1.3em rgba(255, 255, 255, .15); --gs-a: 0 .06em 0 #1c1610; }
.btn-roll.gen-tv:hover { filter: brightness(1.15); }
/* Checkers (idée de sennybex1) : un damier rouge et noir dans son cadre de bois, texte blanc. */
.btn-roll.gen-checkers { border: .16em solid #7c4a1e; border-radius: .35rem; color: #fff; font-family: Georgia, serif;
  background: conic-gradient(#b91c1c 0 25%, #18181b 0 50%, #b91c1c 0 75%, #18181b 0) 0 0 / 22px 22px;
  text-shadow: 0 .06em 0 #000, 0 0 .2em rgba(0, 0, 0, .8);
  --gs: 0 .3em 0 #4a2c11, 0 .5em 1em rgba(185, 28, 28, .3); --gs-h: 0 .34em 0 #4a2c11, 0 .7em 1.3em rgba(185, 28, 28, .45); --gs-a: 0 .06em 0 #4a2c11; }
.btn-roll.gen-checkers:hover { filter: brightness(1.12); }
/* My IQ (idée de G8_floppa) : une feuille de test quadrillée, marge rouge, texte au stylo bleu. */
.btn-roll.gen-iq { border: 1px solid #d6d3d1; border-radius: .25rem; color: #1d4ed8; font-family: 'Bradley Hand', 'Chalkboard SE', 'Segoe Print', cursive;
  background: linear-gradient(90deg, transparent .9em, rgba(239, 68, 68, .55) .9em calc(.9em + 1px), transparent calc(.9em + 1px)), repeating-linear-gradient(0deg, transparent 0 .45em, rgba(59, 130, 246, .2) .45em calc(.45em + 1px)), #fffdf7;
  --gs: 0 .3em 0 #a8a29e, 0 .5em 1em rgba(0, 0, 0, .2); --gs-h: 0 .34em 0 #a8a29e, 0 .7em 1.3em rgba(0, 0, 0, .25); --gs-a: 0 .06em 0 #a8a29e; }
.btn-roll.gen-iq:hover { filter: brightness(1.02); }
/* Pickle (idée de Dylanrulez123) : le skin cornichon, assorti au bouton Pickle (vert bosselé, texte chair de cornichon). */
.btn-roll.gen-dill { border: 2px solid #1a2e05; border-radius: 999px; color: #ecfccb; -webkit-text-stroke: .02em #1a2e05; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(circle at 15% 35%, #a3e635 0 3px, transparent 4px), radial-gradient(circle at 40% 75%, #a3e635 0 3px, transparent 4px), radial-gradient(circle at 70% 30%, #a3e635 0 3px, transparent 4px), radial-gradient(circle at 88% 70%, #a3e635 0 3px, transparent 4px), linear-gradient(180deg, rgba(255, 255, 255, .3) 0 18%, transparent 30%), linear-gradient(180deg, #65a30d, #365314);
  text-shadow: 0 .05em 0 #1a2e05;
  --gs: 0 .3em 0 #1a2e05, 0 .5em 1em rgba(132, 204, 22, .3); --gs-h: 0 .34em 0 #1a2e05, 0 .7em 1.3em rgba(132, 204, 22, .45); --gs-a: 0 .06em 0 #1a2e05; }
.btn-roll.gen-dill:hover { filter: brightness(1.08); }

/* ==== Skins du 2026-11-05, lot 9 ==== boutons assortis */
/* Menagerie (idée de kingston) : un pré vert avec une mare, texte en panneau de bois. */
.btn-roll.gen-menagerie { border: .14em solid #78350f; border-radius: .6rem; color: #fff7e6; -webkit-text-stroke: .02em #5c3a1e; font-family: 'Rockwell', 'Clarendon', Georgia, serif;
  background: radial-gradient(ellipse .7em .35em at 98% 100%, #60a5fa 0 60%, transparent 62%), radial-gradient(circle at 3% 18%, #166534 0 .2em, transparent .22em), radial-gradient(circle, rgba(255, 255, 255, .15) 0 1px, transparent 1.5px) 0 0 / 9px 9px, linear-gradient(180deg, #4ade80, #16a34a);
  text-shadow: 0 .06em 0 #5c3a1e;
  --gs: 0 .3em 0 #4a2c11, 0 .5em 1em rgba(34, 197, 94, .3); --gs-h: 0 .34em 0 #4a2c11, 0 .7em 1.3em rgba(34, 197, 94, .45); --gs-a: 0 .06em 0 #4a2c11; }
.btn-roll.gen-menagerie:hover { filter: brightness(1.08); }
/* Café (idée de 0casmictechthing) : une crème d'espresso dans une tasse blanche, texte en mousse. */
.btn-roll.gen-cafe { border: .16em solid #f5f5f4; border-radius: 999px; color: #fffaf0; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, #c08552, #9c5f33 50%, #6b3a1c);
  text-shadow: 0 0 .14em rgba(255, 237, 213, .8), 0 .05em .05em rgba(61, 31, 14, .7);
  --gs: 0 .3em 0 #a8a29e, 0 .5em 1em rgba(156, 95, 51, .35); --gs-h: 0 .34em 0 #a8a29e, 0 .7em 1.3em rgba(156, 95, 51, .5); --gs-a: 0 .06em 0 #a8a29e; }
.btn-roll.gen-cafe:hover { filter: brightness(1.08); }
/* Robot Sentinel (idée de costoroll) : le ciel rouille de Mars et son sol, texte vert gravé au laser. */
.btn-roll.gen-sentinel { border: 2px solid #451a03; border-radius: .4rem; color: #bbf7d0; font-family: 'Orbitron', 'Eurostile', 'DIN Alternate', 'Arial Narrow', system-ui, sans-serif;
  background: radial-gradient(circle at 88% 28%, #fde4cf 0 .25em, transparent .3em), linear-gradient(0deg, #7c2d12 0 26%, transparent 26%), linear-gradient(180deg, #431407, #c2410c);
  text-shadow: 0 0 .06em #fff, 0 0 .25em #22c55e;
  --gs: 0 .3em 0 #2a0f02, 0 .5em 1em rgba(74, 222, 128, .25); --gs-h: 0 .34em 0 #2a0f02, 0 .7em 1.3em rgba(74, 222, 128, .4); --gs-a: 0 .06em 0 #2a0f02; }
.btn-roll.gen-sentinel:hover { filter: brightness(1.15); }
/* Jigsaw (idée de number 1) : l'image du puzzle (ciel, soleil, collines) et le quadrillage des pièces, texte bleu nuit. */
.btn-roll.gen-jigsaw { border: .12em solid #78350f; border-radius: .35rem; color: #1e3a8a; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: linear-gradient(90deg, rgba(161, 98, 7, .35) 1px, transparent 1px) 0 0 / 1.6em 100%, radial-gradient(ellipse 60% 45% at 25% 115%, #22c55e 0 60%, transparent 61%), radial-gradient(circle at 85% 30%, #fde68a 0 .3em, transparent .34em), linear-gradient(180deg, #7dd3fc, #e0f2fe);
  text-shadow: 0 .05em 0 rgba(255, 255, 255, .85);
  --gs: 0 .3em 0 #4a2c11, 0 .5em 1em rgba(125, 211, 252, .35); --gs-h: 0 .34em 0 #4a2c11, 0 .7em 1.3em rgba(125, 211, 252, .5); --gs-a: 0 .06em 0 #4a2c11; }
.btn-roll.gen-jigsaw:hover { filter: brightness(1.06); }

/* ==== Skins du 2026-11-05, lot 10 ==== boutons assortis */
/* Night Market (idée de number 1) : laque rouge, filet d'or, texte doré. */
.btn-roll.gen-lunar { border: .14em solid #f59e0b; border-radius: .6rem; color: #fde68a; font-family: 'Songti SC', 'STSong', 'Baskerville', Georgia, serif;
  background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(251, 146, 60, .5), transparent 70%), linear-gradient(180deg, #dc2626, #991b1b);
  text-shadow: 0 0 .2em rgba(251, 191, 36, .7), 0 .05em 0 #450a0a;
  --gs: 0 .3em 0 #7f1d1d, 0 .5em 1em rgba(239, 68, 68, .35); --gs-h: 0 .34em 0 #7f1d1d, 0 .7em 1.3em rgba(239, 68, 68, .5); --gs-a: 0 .06em 0 #7f1d1d; }
.btn-roll.gen-lunar:hover { filter: brightness(1.1); }
/* Old Cinema (idée de number 1) : un intertitre de film muet, gris granuleux dans un cadre noir et or. */
.btn-roll.gen-cinema { border: .14em solid #0c0a09; border-radius: .3rem; color: #fafaf9; font-family: 'Didot', 'Bodoni 72', 'Bodoni MT', Georgia, serif;
  background: radial-gradient(circle, rgba(255, 255, 255, .12) 0 .5px, transparent 1px) 0 0 / 4px 4px, radial-gradient(ellipse 80% 90% at 50% 50%, #57534e, #1c1917);
  box-shadow: inset 0 0 0 .05em #a16207; text-shadow: 0 0 .2em rgba(255, 255, 255, .35);
  --gs: 0 .3em 0 #0c0a09, 0 .5em 1em rgba(0, 0, 0, .35); --gs-h: 0 .34em 0 #0c0a09, 0 .7em 1.3em rgba(250, 250, 249, .15); --gs-a: 0 .06em 0 #0c0a09; }
.btn-roll.gen-cinema:hover { filter: brightness(1.15); }
/* Plane (idée de casmicgraything) : un ciel bleu et sa traînée, texte blanc cerclé de bleu marine. */
.btn-roll.gen-plane { border: 2px solid #0369a1; border-radius: 999px; color: #fff; -webkit-text-stroke: .03em #1e3a8a; font-family: 'Futura', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  background: linear-gradient(174deg, transparent 30%, rgba(255, 255, 255, .6) 31% 34%, transparent 35%), linear-gradient(180deg, #38bdf8, #bae6fd);
  text-shadow: 0 .05em 0 #1e3a8a;
  --gs: 0 .3em 0 #075985, 0 .5em 1em rgba(56, 189, 248, .35); --gs-h: 0 .34em 0 #075985, 0 .7em 1.3em rgba(56, 189, 248, .5); --gs-a: 0 .06em 0 #075985; }
.btn-roll.gen-plane:hover { filter: brightness(1.06); }
/* Lightspeed (idée de casmicgraything) : l'espace et ses étoiles étirées, texte blanc bleuté en italique. */
.btn-roll.gen-warp { border: 2px solid #4338ca; border-radius: .5rem; color: #f0f9ff; font-style: italic; font-family: 'Avenir Next', 'Eurostile', 'DIN Alternate', system-ui, sans-serif;
  background: linear-gradient(90deg, transparent 0 10%, rgba(165, 180, 252, .55) 10% 16%, transparent 16% 60%, rgba(165, 180, 252, .4) 60% 64%, transparent 64%) 0 14% / 100% 2px no-repeat, linear-gradient(90deg, transparent 0 30%, rgba(165, 180, 252, .5) 30% 38%, transparent 38% 78%, rgba(165, 180, 252, .5) 78% 86%, transparent 86%) 0 88% / 100% 2px no-repeat, radial-gradient(ellipse 70% 80% at 50% 50%, #1e1b4b, #02030a);
  text-shadow: 0 0 .1em #fff, 0 0 .3em #7dd3fc;
  --gs: 0 .3em 0 #1e1b4b, 0 .5em 1em rgba(99, 102, 241, .35); --gs-h: 0 .34em 0 #1e1b4b, 0 .7em 1.3em rgba(99, 102, 241, .55); --gs-a: 0 .06em 0 #1e1b4b; }
.btn-roll.gen-warp:hover { filter: brightness(1.15); }

/* ==== Skins du 2026-11-05, lot 11 ==== boutons assortis */
/* Zodiac (idée de casmicgraything) : le ciel violet et ses étoiles, texte blanc d'étoile. */
.btn-roll.gen-zodiac { border: .12em solid #a78bfa; border-radius: .6rem; color: #f5f3ff; font-family: 'Optima', 'Candara', 'Trajan Pro', Georgia, serif;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 .8px, transparent 1.3px) 5px 7px / 37px 29px, radial-gradient(ellipse 60% 80% at 30% 40%, rgba(124, 58, 237, .45), transparent 70%), linear-gradient(180deg, #1e1b4b, #0f0a2e);
  text-shadow: 0 0 .2em rgba(196, 181, 253, .9);
  --gs: 0 .3em 0 #2e1065, 0 .5em 1em rgba(167, 139, 250, .35); --gs-h: 0 .34em 0 #2e1065, 0 .7em 1.3em rgba(167, 139, 250, .5); --gs-a: 0 .06em 0 #2e1065; }
.btn-roll.gen-zodiac:hover { filter: brightness(1.15); }
/* Chronos (idée de casmicgraything) : la galaxie dans un cadre de laiton, texte doré en Didot. */
.btn-roll.gen-chronos { border: .14em solid #a16207; border-radius: .55rem; color: #fde68a; font-family: 'Didot', 'Bodoni 72', 'Bodoni MT', Georgia, serif;
  background: radial-gradient(ellipse 45% 70% at 20% 30%, rgba(147, 51, 234, .55), transparent 70%), radial-gradient(ellipse 50% 70% at 82% 70%, rgba(37, 99, 235, .45), transparent 70%), #0c0a1f;
  box-shadow: inset 0 0 0 .04em #fbbf24; text-shadow: 0 .05em 0 #451a03, 0 0 .2em rgba(251, 191, 36, .6);
  --gs: 0 .3em 0 #451a03, 0 .5em 1em rgba(147, 51, 234, .35); --gs-h: 0 .34em 0 #451a03, 0 .7em 1.3em rgba(147, 51, 234, .5); --gs-a: 0 .06em 0 #451a03; }
.btn-roll.gen-chronos:hover { filter: brightness(1.15); }
/* Tile Sweeper (idée de costoroll) : une case grise en relief des vieux jeux, texte bleu. */
.btn-roll.gen-sweeper { border: .14em solid; border-color: #fff #7b7b7b #7b7b7b #fff; border-radius: 0; color: #1d4ed8; font-family: 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  background: #c0c0c0; text-shadow: none;
  --gs: 0 .3em 0 #4b4b4b, 0 .5em 1em rgba(0, 0, 0, .25); --gs-h: 0 .34em 0 #4b4b4b, 0 .7em 1.3em rgba(0, 0, 0, .3); --gs-a: 0 .06em 0 #4b4b4b; }
.btn-roll.gen-sweeper:hover { filter: brightness(1.05); }
.btn-roll.gen-sweeper:active { border-color: #7b7b7b #fff #fff #7b7b7b; }
/* Mimic (idée de costoroll) : le coffre au trésor, bois cerclé d'or et serrure, texte or vif. */
.btn-roll.gen-mimic { border: .14em solid #451a03; border-radius: .7rem .7rem .3rem .3rem; color: #fde047; font-family: Georgia, 'Times New Roman', serif;
  background: linear-gradient(90deg, transparent 8%, #fbbf24 8% 11%, transparent 11% 89%, #fbbf24 89% 92%, transparent 92%), linear-gradient(180deg, #a16207 0 8%, #92400e 8% 46%, #fbbf24 46% 50%, #7c4a2a 50%);
  text-shadow: 0 0 .15em #f59e0b, 0 .06em 0 #451a03;
  --gs: 0 .3em 0 #3f220e, 0 .5em 1em rgba(251, 191, 36, .3); --gs-h: 0 .34em 0 #3f220e, 0 .7em 1.3em rgba(251, 191, 36, .45); --gs-a: 0 .06em 0 #3f220e; }
.btn-roll.gen-mimic:hover { filter: brightness(1.1); }

/* ==== Skins du 2026-11-05, lot 12 ==== boutons assortis */
/* Fried Egg (idée de Gray alt) : un blanc d'œuf sur la poêle et son jaune, texte orange brûlé. */
.btn-roll.gen-egg { border: .16em solid #27272a; border-radius: 999px; color: #9a3412; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(circle at 82% 50%, #fcd34d 0 .55em, #f59e0b .7em, transparent .74em), radial-gradient(ellipse 60% 75% at 60% 50%, #fffdf7 0 85%, transparent 88%), #3f3f46;
  text-shadow: 0 .04em 0 rgba(255, 237, 213, .8);
  --gs: 0 .3em 0 #18181b, 0 .5em 1em rgba(0, 0, 0, .3); --gs-h: 0 .34em 0 #18181b, 0 .7em 1.3em rgba(251, 191, 36, .3); --gs-a: 0 .06em 0 #18181b; }
.btn-roll.gen-egg:hover { filter: brightness(1.06); }
/* Gridiron (idée de casmicgraything) : le gazon rayé et ses lignes blanches, texte en lettres de maillot. */
.btn-roll.gen-gridiron { border: .14em solid #fff; border-radius: .3rem; color: #fff; -webkit-text-stroke: .03em #14532d; font-family: 'Impact', 'Haettenschweiler', 'Arial Black', system-ui, sans-serif; letter-spacing: .06em;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 1.4em), repeating-linear-gradient(90deg, #15803d 0 1.4em, #16a34a 1.4em 2.8em);
  box-shadow: 0 0 0 .05em #14532d; text-shadow: 0 .06em 0 #14532d;
  --gs: 0 .3em 0 #14532d, 0 .5em 1em rgba(22, 163, 74, .3); --gs-h: 0 .34em 0 #14532d, 0 .7em 1.3em rgba(22, 163, 74, .45); --gs-a: 0 .06em 0 #14532d; }
.btn-roll.gen-gridiron:hover { filter: brightness(1.08); }
/* Earth (idée de casmicgraything) : l'espace et la Terre qui se lève sur le côté, texte blanc. */
.btn-roll.gen-earth { border: 2px solid #1e3a8a; border-radius: .6rem; color: #fff; -webkit-text-stroke: .02em #0b1229; font-family: 'Avenir Next', 'Futura', 'Century Gothic', system-ui, sans-serif;
  background: radial-gradient(circle at 90% 120%, #16a34a 0 .45em, transparent .46em), radial-gradient(circle at 92% 125%, #2563eb 0 1.4em, rgba(96, 165, 250, .4) 1.5em, transparent 1.7em), radial-gradient(circle, rgba(255, 255, 255, .7) 0 .7px, transparent 1.2px) 6px 4px / 29px 31px, linear-gradient(180deg, #020617, #0b1229);
  text-shadow: 0 0 .2em rgba(147, 197, 253, .7);
  --gs: 0 .3em 0 #020617, 0 .5em 1em rgba(59, 130, 246, .3); --gs-h: 0 .34em 0 #020617, 0 .7em 1.3em rgba(59, 130, 246, .45); --gs-a: 0 .06em 0 #020617; }
.btn-roll.gen-earth:hover { filter: brightness(1.15); }
/* Amethyst (idée de JAKECisthebest) : le cristal violet à facettes, texte lilas lumineux. */
.btn-roll.gen-amethyst { border: .14em solid #3b0764; border-radius: .9rem .5rem 1.1rem .6rem; color: #f3e8ff; font-family: 'Optima', 'Candara', Georgia, serif;
  background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0 18%, transparent 18% 40%, rgba(255, 255, 255, .1) 40% 52%, transparent 52%), conic-gradient(from 200deg at 38% 58%, #4c1d95, #7e22ce 12%, #a855f7 22%, #6b21a8 34%, #c084fc 46%, #581c87 58%, #9333ea 70%, #3b0764 84%, #4c1d95);
  text-shadow: 0 0 .2em rgba(216, 180, 254, .9), 0 .04em .05em #3b0764;
  --gs: 0 .3em 0 #2e1065, 0 .5em 1em rgba(168, 85, 247, .4); --gs-h: 0 .34em 0 #2e1065, 0 .7em 1.3em rgba(168, 85, 247, .55); --gs-a: 0 .06em 0 #2e1065; }
.btn-roll.gen-amethyst:hover { filter: brightness(1.12); }

/* ==== Skins du 2026-11-05, lot 13 ==== boutons assortis */
/* Water Balloon (idée de Niall) : un ballon d'eau rouge brillant, texte blanc. */
.btn-roll.gen-balloon { border: 2px solid #be123c; border-radius: 999px; color: #fff; font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(ellipse 30% 40% at 22% 28%, rgba(255, 255, 255, .65), transparent 70%), radial-gradient(circle at 85% 75%, rgba(56, 189, 248, .55) 0 .3em, transparent .32em), linear-gradient(180deg, #fb7185, #e11d48);
  text-shadow: 0 .05em 0 #9f1239;
  --gs: 0 .3em 0 #9f1239, 0 .5em 1em rgba(244, 63, 94, .35); --gs-h: 0 .34em 0 #9f1239, 0 .7em 1.3em rgba(244, 63, 94, .5); --gs-a: 0 .06em 0 #9f1239; }
.btn-roll.gen-balloon:hover { filter: brightness(1.08); }
/* Puzzle Cube (idée de Matthew) : une rangée de vignettes de couleur sur plastique noir, texte blanc cerclé de noir. */
.btn-roll.gen-cube { border: .14em solid #000; border-radius: .4rem; color: #fff; -webkit-text-stroke: .04em #111; font-family: 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  background: linear-gradient(90deg, #ef4444 0 16.6%, #111 16.6% 17.4%, #facc15 17.4% 33.2%, #111 33.2% 34%, #22c55e 34% 49.8%, #111 49.8% 50.6%, #3b82f6 50.6% 66.4%, #111 66.4% 67.2%, #fb923c 67.2% 83%, #111 83% 83.8%, #f8fafc 83.8%);
  text-shadow: 0 .06em 0 #111;
  --gs: 0 .3em 0 #000, 0 .5em 1em rgba(0, 0, 0, .3); --gs-h: 0 .34em 0 #000, 0 .7em 1.3em rgba(0, 0, 0, .35); --gs-a: 0 .06em 0 #000; }
.btn-roll.gen-cube:hover { filter: brightness(1.08); }