/* RNG∞ — styles. Tokens clair/sombre + styles de rareté. */

@property --ring-a { syntax: '<color>'; inherits: true; initial-value: #ec4899; }
@property --ring-b { syntax: '<color>'; inherits: true; initial-value: #a855f7; }

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --site-bg: #fafafa;
  --surface: #ffffff;
  --surface-dim: #f9fafb;
  --surface-raised: #f3f4f6;
  --outline: #e5e7eb;
  --outline-mid: #d1d5db;
  --outline-strong: #9ca3af;
  --prose: #111827;
  --prose-2: #4b5563;
  --prose-3: #9ca3af;
  --muted: #6b7280;
  --qmark: #c7c7c7;

  --ep-text: oklch(55.5% .163 48.998);
  --ep-surface: oklch(98.7% .022 95.277);
  --ep-outline: oklch(92.4% .12 95.746);

  --tier-trash: oklch(42.1% .095 57.708);
  --tier-common: oklch(44.6% .03 256.802);
  --tier-uncommon: oklch(52.7% .154 150.069);
  --tier-rare: oklch(48.8% .243 264.376);
  --tier-epic: oklch(49.6% .265 301.924);
  --tier-anomaly: oklch(55.3% .195 38.402);
  --tier-mythic: oklch(50.5% .213 27.518);

  --chart-trash: #a0773f;
  --chart-common: #6b7280;
  --chart-uncommon: #059669;
  --chart-rare: #2563eb;
  --chart-epic: #7c3aed;
  --chart-anomaly: #ea580c;
  --chart-mythic: #db2777;
  --chart-accent: #2563eb;
  --chart-grid: #eceef1;

  --danger: oklch(57.7% .245 27.325);
  --success: oklch(52.7% .154 150.069);
  --shadow-soft: 0 1px 2px rgba(17, 24, 39, .06);
}

.dark {
  --site-bg: oklch(17.8% .014 295);
  --surface: oklch(25.7% .014 295);
  --surface-dim: oklch(21.6% .014 295);
  --surface-raised: oklch(31.1% .014 295);
  --outline: oklch(39.5% .014 295);
  --outline-mid: oklch(43.8% .014 295);
  --outline-strong: oklch(49.9% .014 295);
  --prose: #f0f0f0;
  --prose-2: #c4c4c4;
  --prose-3: #9a9a9a;
  --muted: #9a9a9a;
  --qmark: #4a4755;

  --ep-text: oklch(82.8% .189 84.429);
  --ep-surface: oklch(27.9% .077 45.635 / .3);
  --ep-outline: oklch(47.3% .137 46.201 / .5);

  --tier-trash: oklch(87.9% .169 91.605);
  --tier-common: oklch(87.2% .01 258.338);
  --tier-uncommon: oklch(76.5% .177 163.223);
  --tier-rare: oklch(70.7% .165 254.624);
  --tier-epic: oklch(71.4% .203 305.504);
  --tier-anomaly: oklch(75% .183 55.934);
  --tier-mythic: oklch(70.4% .191 22.216);

  --chart-trash: #d9b36a;
  --chart-common: #a1a1aa;
  --chart-uncommon: #34d399;
  --chart-rare: #60a5fa;
  --chart-epic: #c084fc;
  --chart-anomaly: #fb923c;
  --chart-mythic: #f472b6;
  --chart-accent: #60a5fa;
  --chart-grid: oklch(31.1% .014 295);

  --danger: oklch(70.4% .191 22.216);
  --success: oklch(76.5% .177 163.223);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------------ rareté : variables par tier */
[data-tier="trash"] {
  --t-from: #fffbeb; --t-via: #ffffff; --t-to: #fffbeb; --t-border: #fcd34d; --t-glow: none;
  --t-text: #92400e; --t-pill-text: #78350f; --t-pill-bg: #fffbeb; --t-pill-border: #fde68a;
  --t-hl: #c8a87c; --t-hl-border: #7c5a2e; --t-accent: var(--tier-trash); --t-shimmer: 0;
}
[data-tier="common"] {
  --t-from: #f3f4f6; --t-via: #ffffff; --t-to: #f3f4f6; --t-border: #9ca3af; --t-glow: none;
  --t-text: #374151; --t-pill-text: #4b5563; --t-pill-bg: #f3f4f6; --t-pill-border: #d1d5db;
  --t-hl: #d1d5db; --t-hl-border: #6b7280; --t-accent: var(--tier-common); --t-shimmer: 0;
}
[data-tier="uncommon"] {
  --t-from: #d1fae5; --t-via: #f0fdf4; --t-to: #d1fae5; --t-border: #6ee7b7; --t-glow: 0 0 10px rgba(16, 185, 129, .2);
  --t-text: #065f46; --t-pill-text: #15803d; --t-pill-bg: #f0fdf4; --t-pill-border: #86efac;
  --t-hl: #6ee7b7; --t-hl-border: #059669; --t-accent: var(--tier-uncommon); --t-shimmer: 1;
}
[data-tier="rare"] {
  --t-from: #dbeafe; --t-via: #f0f9ff; --t-to: #dbeafe; --t-border: #93c5fd; --t-glow: 0 0 12px rgba(59, 130, 246, .25);
  --t-text: #1e40af; --t-pill-text: #1d4ed8; --t-pill-bg: #eff6ff; --t-pill-border: #93c5fd;
  --t-hl: #93c5fd; --t-hl-border: #2563eb; --t-accent: var(--tier-rare); --t-shimmer: 1;
}
[data-tier="epic"] {
  --t-from: #f3e8ff; --t-via: #fdf4ff; --t-to: #f3e8ff; --t-border: #d8b4fe; --t-glow: 0 0 15px rgba(168, 85, 247, .25);
  --t-text: #6b21a8; --t-pill-text: #7e22ce; --t-pill-bg: #faf5ff; --t-pill-border: #d8b4fe;
  --t-hl: #c4b5fd; --t-hl-border: #7c3aed; --t-accent: var(--tier-epic); --t-shimmer: 1;
}
[data-tier="anomaly"] {
  --t-from: #ffedd5; --t-via: #fffbeb; --t-to: #ffedd5; --t-border: #fdba74; --t-glow: 0 0 18px rgba(249, 115, 22, .25);
  --t-text: #9a3412; --t-pill-text: #c2410c; --t-pill-bg: #fff7ed; --t-pill-border: #fdba74;
  --t-hl: #fdba74; --t-hl-border: #ea580c; --t-accent: var(--tier-anomaly); --t-shimmer: 1;
}
[data-tier="mythic"] {
  --t-from: #ffe4e6; --t-via: #faf5ff; --t-to: #cffafe; --t-border: #f9a8d4;
  --t-glow: 0 0 16px rgba(236, 72, 153, .25), 0 0 28px rgba(168, 85, 247, .1);
  --t-text: #111827; --t-pill-text: #b91c1c; --t-pill-bg: #fef2f2; --t-pill-border: #f9a8d4;
  --t-hl: #f9a8d4; --t-hl-border: #db2777; --t-accent: var(--tier-mythic); --t-shimmer: 1;
}
.dark [data-tier="trash"] {
  --t-from: rgba(120, 53, 15, .6); --t-via: #27272a; --t-to: rgba(120, 53, 15, .6); --t-border: #92400e;
  --t-text: #fcd34d; --t-pill-text: #fcd34d; --t-pill-bg: rgba(69, 26, 3, .4); --t-pill-border: rgba(146, 64, 14, .6);
}
.dark [data-tier="common"] {
  --t-from: rgba(63, 63, 70, .5); --t-via: #27272a; --t-to: rgba(63, 63, 70, .5); --t-border: #52525b;
  --t-text: #d1d5db; --t-pill-text: #d1d5db; --t-pill-bg: #27272a; --t-pill-border: #52525b;
  --t-hl: #52525b; --t-hl-border: #a1a1aa;
}
.dark [data-tier="uncommon"] {
  --t-from: rgba(6, 78, 59, .6); --t-via: #27272a; --t-to: rgba(6, 78, 59, .6); --t-border: #065f46;
  --t-glow: 0 0 14px rgba(16, 185, 129, .35);
  --t-text: #34d399; --t-pill-text: #34d399; --t-pill-bg: rgba(2, 44, 34, .4); --t-pill-border: rgba(6, 95, 70, .6);
}
.dark [data-tier="rare"] {
  --t-from: rgba(30, 58, 138, .6); --t-via: #27272a; --t-to: rgba(30, 58, 138, .6); --t-border: #1e40af;
  --t-glow: 0 0 16px rgba(59, 130, 246, .4);
  --t-text: #60a5fa; --t-pill-text: #60a5fa; --t-pill-bg: rgba(23, 37, 84, .4); --t-pill-border: rgba(30, 64, 175, .6);
}
.dark [data-tier="epic"] {
  --t-from: rgba(88, 28, 135, .6); --t-via: #27272a; --t-to: rgba(88, 28, 135, .6); --t-border: #6b21a8;
  --t-glow: 0 0 16px rgba(168, 85, 247, .4);
  --t-text: #c084fc; --t-pill-text: #c084fc; --t-pill-bg: rgba(59, 7, 100, .4); --t-pill-border: rgba(107, 33, 168, .6);
}
.dark [data-tier="anomaly"] {
  --t-from: rgba(124, 45, 18, .6); --t-via: #27272a; --t-to: rgba(124, 45, 18, .6); --t-border: #9a3412;
  --t-glow: 0 0 18px rgba(249, 115, 22, .4);
  --t-text: #fb923c; --t-pill-text: #fb923c; --t-pill-bg: rgba(67, 20, 7, .4); --t-pill-border: rgba(154, 52, 18, .6);
}
.dark [data-tier="mythic"] {
  --t-from: rgba(136, 19, 55, .55); --t-via: rgba(88, 28, 135, .45); --t-to: rgba(22, 78, 99, .55); --t-border: #9d174d;
  --t-glow: 0 0 20px rgba(236, 72, 153, .4), 0 0 36px rgba(168, 85, 247, .2);
  --t-text: #f3f4f6; --t-pill-text: #f87171; --t-pill-bg: rgba(69, 10, 10, .4); --t-pill-border: rgba(157, 23, 77, .6);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
html.dark { color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--prose);
  background: var(--site-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, .035) 100%);
  z-index: 0;
}
.dark body::before { background: radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, .25) 100%); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.noscript { text-align: center; padding: 4rem 1rem; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 1rem;
  background: color-mix(in srgb, var(--site-bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.logo {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}
.icon-link { display: inline-flex; color: var(--prose-3); }
.icon-link:hover { color: var(--prose); }
.nav { display: flex; align-items: center; gap: .15rem; margin-left: .6rem; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .5rem;
  border-radius: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--prose);
}
.nav a:hover { background: var(--surface-raised); }
.nav a.active { background: var(--surface-raised); }
.theme-switch {
  display: inline-flex;
  border: 1px solid var(--outline);
  border-radius: .4rem;
  overflow: hidden;
  background: var(--surface);
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  background: transparent;
  color: var(--prose-2);
}
.theme-switch button[aria-checked="true"] { background: var(--prose); color: var(--site-bg); }
.player-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2rem;
  padding: 0 .7rem;
  border: 1px solid var(--outline);
  border-radius: .45rem;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  max-width: 11rem;
}
.player-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-btn:hover { border-color: var(--outline-strong); }

@media (max-width: 720px) {
  .nav a span { display: none; }
  .nav { margin-left: .2rem; }
  .theme-switch { display: none; }
}

/* ------------------------------------------------------------------ layout */
.app { position: relative; z-index: 1; padding: 0 1rem 5rem; }
.page { max-width: 46rem; margin: 0 auto; padding-top: 1.5rem; }
.page-wide { max-width: 60rem; }
.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; margin: .5rem 0 1rem; }
.section-title { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; text-align: center; margin: 0; }
.section-sub { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--prose-2); text-align: center; margin-top: .2rem; }
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prose-3); }
.muted { color: var(--prose-3); }

/* ------------------------------------------------------------------ home : hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 5.5vh; }
.qmarks { font-family: var(--font-mono); font-weight: 700; font-size: clamp(3rem, 12vw, 4.4rem); line-height: 1; color: var(--qmark); letter-spacing: .02em; user-select: none; }
.qmarks span { display: inline-block; animation: qfloat 3.2s ease-in-out infinite; }
.qmarks span:nth-child(2) { animation-delay: .15s; }
.qmarks span:nth-child(3) { animation-delay: .3s; }
.qmarks span:nth-child(4) { animation-delay: .45s; }
.qmarks span:nth-child(5) { animation-delay: .6s; }
.qmarks span:nth-child(6) { animation-delay: .75s; }
@keyframes qfloat { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-4px); opacity: .7; } }
.tagline { font-size: 1.05rem; color: var(--prose-2); margin: 1.4rem 0 2rem; }

.btn-roll {
  --ring-a: #ec4899;
  --ring-b: #a855f7;
  position: relative;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  padding: .95rem 3.2rem;
  border-radius: .4rem;
  border: 2px solid transparent;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) padding-box,
    linear-gradient(90deg, var(--ring-a), var(--ring-b)) border-box;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--ring-a) 45%, transparent),
    0 0 26px color-mix(in srgb, var(--ring-b) 22%, transparent);
  animation: ring-cycle 14s linear infinite;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-roll:hover { transform: translateY(-1px); box-shadow: 0 0 16px color-mix(in srgb, var(--ring-a) 60%, transparent), 0 0 34px color-mix(in srgb, var(--ring-b) 32%, transparent); }
.btn-roll:active { transform: scale(.98); }
.btn-roll:disabled { opacity: .5; cursor: default; animation-play-state: paused; }
.btn-roll.small { font-size: 1rem; padding: .6rem 1.6rem; }
@keyframes ring-cycle {
  0%, 100% { --ring-a: #ec4899; --ring-b: #a855f7; }
  20% { --ring-a: #a855f7; --ring-b: #3b82f6; }
  40% { --ring-a: #3b82f6; --ring-b: #10b981; }
  60% { --ring-a: #10b981; --ring-b: #f97316; }
  80% { --ring-a: #f97316; --ring-b: #ec4899; }
}
.hint { font-size: .72rem; color: var(--prose-2); margin-top: 1.1rem; }
.hint kbd, kbd {
  font-family: var(--font-mono);
  font-size: .68rem;
  border: 1px solid var(--outline-mid);
  border-bottom-width: 2px;
  border-radius: .25rem;
  padding: 0 .3rem;
  background: var(--surface);
}
.hint a { font-weight: 600; }

/* ------------------------------------------------------------------ carte "meilleur tirage" */
.feature-card {
  width: min(100%, 19rem);
  margin: 1.8rem auto 0;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--outline);
  border-radius: .6rem;
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.feature-card .eyebrow { margin-bottom: .8rem; }
.feature-meta { font-size: .72rem; color: var(--prose-3); margin: .5rem 0 .7rem; }
.pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.more { font-size: .7rem; color: var(--prose-3); align-self: center; }

.recent-strip { max-width: 34rem; margin: 1.6rem auto 0; text-align: center; }
.recent-strip .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .6rem; }

/* ------------------------------------------------------------------ carte numéro */
.num-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  padding: .55rem 1.4rem;
  border: 2px solid var(--t-border, var(--outline-strong));
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--t-from, var(--surface-raised)), var(--t-via, var(--surface)), var(--t-to, var(--surface-raised)));
  color: var(--t-text, var(--prose-2));
  box-shadow: var(--t-glow, none), inset 0 2px 4px rgba(0, 0, 0, .05), 0 6px 14px rgba(17, 24, 39, .08);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3.1rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s, color .4s;
}
.num-card.neutral { --t-from: var(--surface-raised); --t-via: var(--surface); --t-to: var(--surface-raised); --t-border: var(--outline-strong); --t-text: var(--prose-2); --t-glow: none; }
.num-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: calc(var(--t-shimmer, 0) * .55);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 66%);
  background-size: 250% 100%;
  animation: sheen 4.5s linear infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
@keyframes sheen { 0% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.num-card.sm { font-size: 1.05rem; min-width: 4.8rem; padding: .15rem .55rem; border-width: 1.5px; border-radius: .45rem; box-shadow: var(--t-glow, none); }
.num-card.md { font-size: 2.4rem; min-width: 7rem; padding: .35rem 1rem; }
.num-card.lg { font-size: clamp(2.4rem, 10vw, 3.4rem); }
.num-card.rolling { cursor: pointer; }
.slot { display: inline-block; width: .6em; text-align: center; transition: width .35s ease, opacity .35s ease, transform .2s ease; }
.slot.spinning { color: var(--prose-3); opacity: .55; }
.slot.revealed { animation: pop .28s ease-out; }
.slot.ghost { opacity: .18; }
.slot.collapsed { width: 0; opacity: 0; }
@keyframes pop { 0% { transform: translateY(-6px) scale(1.25); } 100% { transform: none; } }
.num-card.shake { animation: shake .5s ease; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }

/* ------------------------------------------------------------------ résultat */
.result { display: flex; flex-direction: column; align-items: center; padding-top: 1.2rem; }
.result-meta { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; min-height: 1.5rem; font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.result-meta .dot { color: var(--prose-3); }
.result-meta .top { color: var(--t-accent); }
.fade-in { animation: fadein .45s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ep-big {
  margin-top: .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--t-pill-border, var(--outline));
  background: var(--t-pill-bg, var(--surface));
  color: var(--t-pill-text, var(--prose-2));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--t-glow, none);
}
.ep-big.pending { --t-pill-border: var(--outline); --t-pill-bg: var(--surface-raised); --t-pill-text: var(--prose-2); --t-glow: none; }
.lifetime { margin-top: .5rem; text-align: center; }
.lifetime .v { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--prose-2); }
.lifetime .l { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--prose-3); }
.lifetime-row { position: relative; display: inline-block; }
.lifetime .delta { position: absolute; left: 100%; top: -.15rem; margin-left: .35rem; white-space: nowrap; font-family: var(--font-mono); font-size: .75rem; color: var(--success); }

/* séquence de révélation */
.invisible { visibility: hidden; opacity: 0; }
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
  background: radial-gradient(ellipse at 50% 28%, transparent 25%, rgba(17, 24, 39, .16) 100%);
}
.dark .vignette { background: radial-gradient(ellipse at 50% 28%, transparent 25%, rgba(0, 0, 0, .5) 100%); }
.vignette.on { opacity: 1; }
.num-card.charging { animation: charge 1.6s ease-in-out infinite; }
@keyframes charge {
  0%, 100% { box-shadow: 0 0 0 1px rgba(99, 102, 241, .12), 0 0 16px rgba(99, 102, 241, .14), 0 6px 14px rgba(17, 24, 39, .08); }
  50% { box-shadow: 0 0 0 1px rgba(99, 102, 241, .25), 0 0 30px rgba(99, 102, 241, .3), 0 6px 14px rgba(17, 24, 39, .08); }
}
.num-card.reveal-pulse { animation: popin .5s cubic-bezier(.34, 1.56, .64, 1); }
.pop-in { animation: popin .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes popin { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.float-up { animation: floatup 1.8s ease-out both; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.badge-group { display: flex; flex-direction: column; gap: .35rem; }
body.locked .topbar a, body.locked .topbar button { pointer-events: none; opacity: .45; }@media (prefers-reduced-motion: reduce) {
  .num-card.charging, .num-card.reveal-pulse, .pop-in, .float-up { animation: none; }
  .vignette { transition: none; }
}
.result-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.1rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border: 1px solid var(--outline-mid);
  border-radius: .45rem;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--prose-2);
}
.btn:hover { color: var(--prose); border-color: var(--outline-strong); }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.repeat-note { margin-top: .9rem; font-size: .75rem; color: var(--prose-2); text-align: center; }
.new-note { margin-top: .6rem; font-size: .78rem; font-weight: 700; color: var(--success); letter-spacing: .02em; }

/* ------------------------------------------------------------------ pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem .38rem;
  border-radius: .2rem;
  border: 1px solid var(--t-pill-border, var(--outline));
  background: var(--t-pill-bg, var(--surface));
  color: var(--t-pill-text, var(--prose-2));
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--t-pill-border, var(--outline));
  background: var(--t-pill-bg, var(--surface));
  color: var(--t-pill-text, var(--prose-2));
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
}
.ep-pill {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--ep-outline);
  background: var(--ep-surface);
  color: var(--ep-text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  white-space: nowrap;
}
.ep-pill.lg { font-size: .85rem; padding: .2rem .6rem; margin-top: .6rem; }
.new-tag { font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: .1rem .3rem; border-radius: .2rem; background: var(--success); color: #fff; }

/* ------------------------------------------------------------------ détail des badges */
.breakdown { width: 100%; max-width: 31rem; margin-top: 2rem; }
.breakdown .list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.badge-card {
  border: 1px solid var(--outline);
  border-radius: .5rem;
  padding: .6rem .75rem .55rem;
  background: var(--surface);
  box-shadow: var(--t-glow, none);
}
.badge-card.reveal { animation: cardin .45s ease-out both; }
@keyframes cardin { from { opacity: 0; transform: translateY(-20px) scale(.98); } to { opacity: 1; transform: none; } }
.badge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.badge-title { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.badge-title .emoji { font-size: 1rem; }
.badge-title .name { font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.badge-desc { margin: .3rem 0 .45rem; font-size: .66rem; letter-spacing: .03em; text-transform: uppercase; color: var(--prose-3); }
.badge-extra { font-size: .68rem; color: var(--prose-2); margin: -.2rem 0 .4rem; font-family: var(--font-mono); }
.digits { display: flex; gap: .28rem; padding-top: .45rem; border-top: 1px solid var(--outline); }
.dt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.35rem;
  border-radius: .22rem;
  border: 1px solid var(--outline);
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--prose-3);
}
.dt { transition-property: background-color, border-color, color; transition-duration: .2s; transition-timing-function: ease-out; }
.dt.hl { font-weight: 700; }
.dt.hl.lit { background: var(--hl-bg); border-color: var(--hl-bd); color: #000; animation: tilepop .35s ease-out both; }
@keyframes tilepop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.sub-badge { flex-wrap: wrap; }
.digits.mini { margin-left: auto; padding-top: 0; border-top: 0; gap: .18rem; }
.digits.mini .dt { width: .95rem; height: 1.1rem; font-size: .6rem; border-radius: .18rem; }
.sub-badge .digits.mini ~ .earned { margin-left: .5rem; }
@media (prefers-reduced-motion: reduce) { .dt.hl.lit { animation: none; } }
.dark [data-tier="common"] { --t-hl: #9ca3af; --t-hl-border: #e5e7eb; }

/* barres de distribution (une seule teinte, repère "attendu" en pointillé) */
.dist { display: flex; flex-direction: column; gap: .55rem; }
.dist-row { display: grid; grid-template-columns: 5.4rem 1fr 8.2rem; align-items: center; gap: .7rem; }
.dist-track { position: relative; height: .8rem; }
.dist-fill { height: 100%; background: var(--chart-accent); border-radius: 0 4px 4px 0; }
.dist-exp { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--prose-2); }
.dist-val { font-family: var(--font-mono); font-size: .72rem; color: var(--prose-2); text-align: right; white-space: nowrap; }
.dist-val small { color: var(--prose-3); }
@media (max-width: 560px) { .dist-row { grid-template-columns: 4.8rem 1fr; } .dist-val { grid-column: 1 / -1; text-align: left; margin-top: -.3rem; } }
.chart-wrap .hit { fill: transparent; }
.chart-wrap .hit:hover { fill: var(--prose); fill-opacity: .05; }
.chart-wrap .mark { pointer-events: none; }
.chart-wrap .halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.sub-badge {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 0 1rem;
  padding: .4rem .75rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  font-size: .7rem;
  color: var(--prose-3);
}
.sub-badge .earned { margin-left: auto; font-style: italic; }
.sub-badge .name { font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }

/* ------------------------------------------------------------------ historique */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.toolbar .grow { flex: 1 1 12rem; }
.input, .select {
  height: 2.1rem;
  padding: 0 .65rem;
  border: 1px solid var(--outline-mid);
  border-radius: .45rem;
  background: var(--surface);
  color: var(--prose);
  font: inherit;
  font-size: .82rem;
}
.input:focus, .select:focus { outline: 2px solid var(--outline-strong); outline-offset: 1px; }
.table-card { border: 1px solid var(--outline); border-radius: .6rem; background: var(--surface); overflow: hidden; }
.row {
  display: grid;
  grid-template-columns: 3.2rem 6rem 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .9rem;
  border-top: 1px solid var(--outline);
  cursor: pointer;
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-dim); }
.row .idx { font-family: var(--font-mono); font-size: .72rem; color: var(--prose-3); }
.row .mid { display: flex; align-items: center; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.row .emojis { font-size: .85rem; letter-spacing: .08em; white-space: nowrap; }
.row .right { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.row .when { font-size: .66rem; color: var(--prose-3); white-space: nowrap; }
@media (max-width: 560px) {
  .row { grid-template-columns: 2.4rem 5.2rem 1fr; }
  .row .right { grid-column: 2 / 4; flex-direction: row; justify-content: space-between; align-items: center; }
}
.empty { text-align: center; padding: 3rem 1rem; color: var(--prose-3); }
.load-more { display: flex; justify-content: center; padding: .8rem; border-top: 1px solid var(--outline); }
.count-line { font-size: .72rem; color: var(--prose-3); margin: -.4rem 0 .8rem; }

/* ------------------------------------------------------------------ stats */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.tile { border: 1px solid var(--outline); border-radius: .6rem; background: var(--surface); padding: .8rem .9rem; }
.tile .l { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--prose-3); }
.tile .v { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; margin-top: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .s { font-size: .7rem; color: var(--prose-2); margin-top: .15rem; }
.panel { border: 1px solid var(--outline); border-radius: .6rem; background: var(--surface); padding: 1rem 1.1rem; margin-top: .9rem; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.panel-title { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0; }
.panel-note { font-size: .7rem; color: var(--prose-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .9rem; }
.grid-2 .panel { margin-top: 0; }
.stats-sep { margin-top: .9rem; }
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-wrap text { font-family: var(--font-sans); font-size: 11px; fill: var(--prose-3); }
.chart-wrap .val { fill: var(--prose-2); font-family: var(--font-mono); font-size: 10.5px; }
.chart-wrap .lbl { fill: var(--prose-2); font-weight: 600; }
.chart-tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: .45rem .6rem;
  border: 1px solid var(--outline);
  border-radius: .45rem;
  background: var(--surface);
  color: var(--prose);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  font-size: .74rem;
  line-height: 1.45;
  max-width: 16rem;
}
.chart-tooltip b { font-family: var(--font-mono); }
.legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .7rem; color: var(--prose-2); margin-top: .5rem; }
.legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; margin-right: .3rem; vertical-align: -.08rem; }
.legend i.line { height: 0; border-top: 2px dashed var(--prose-3); border-radius: 0; vertical-align: .2rem; }
.records { display: flex; flex-direction: column; gap: .45rem; }
.record { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.record .rank { width: 1.4rem; font-family: var(--font-mono); font-size: .72rem; color: var(--prose-3); }
.record .grow { flex: 1; min-width: 0; font-size: .72rem; color: var(--prose-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; padding: .4rem 0; border-top: 1px solid var(--outline); }
.kv:first-child { border-top: 0; }
.kv .k { color: var(--prose-2); }
.kv .v { font-family: var(--font-mono); font-weight: 700; }

/* ------------------------------------------------------------------ collection */
.progress { height: .45rem; border-radius: 999px; background: var(--surface-raised); overflow: hidden; margin: .5rem 0 1rem; }
.progress > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #10b981, #3b82f6, #a855f7, #ec4899); }
.tier-block { margin-top: 1.4rem; }
.tier-block h3 { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .6rem; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .5rem; }
.coll {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .6rem .7rem;
  border: 1px solid var(--outline);
  border-radius: .5rem;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--t-glow, none);
}
.coll:hover { border-color: var(--outline-strong); }
.coll.missing { box-shadow: none; background: var(--surface-dim); }
.coll.missing .emoji { filter: grayscale(1); opacity: .35; }
.coll.missing .name { color: var(--prose-3); }
.coll .top { display: flex; align-items: center; gap: .4rem; }
.coll .emoji { font-size: 1.05rem; }
.coll .name { font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; flex: 1; min-width: 0; }
.coll .desc { font-size: .66rem; color: var(--prose-3); line-height: 1.35; }
.coll .foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .15rem; font-size: .66rem; color: var(--prose-2); }
.coll .count { font-family: var(--font-mono); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--outline-mid); border-radius: .45rem; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: .45rem .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--prose-2); }
.seg button + button { border-left: 1px solid var(--outline-mid); }
.seg button.on { background: var(--prose); color: var(--site-bg); }

/* ------------------------------------------------------------------ à propos / leaderboard */
.prose p { color: var(--prose-body, var(--prose-2)); line-height: 1.6; }
.steps { display: grid; gap: .6rem; margin: 1rem 0 1.4rem; }
.step { display: flex; gap: .8rem; align-items: baseline; }
.step .n { font-family: var(--font-mono); font-weight: 700; color: var(--prose-3); }
.step b { text-transform: uppercase; letter-spacing: .04em; }
.rarity-table { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; align-items: center; margin: .8rem 0 1.6rem; font-size: .8rem; color: var(--prose-2); }
.soon { text-align: center; padding: 2.4rem 1rem 1rem; }

/* classement en ligne */
#today-slot .feature-card { margin-top: 1.8rem; }
.lb-card { margin-top: 1.4rem; border: 1px solid var(--outline); border-radius: .6rem; background: var(--surface); overflow: hidden; }
.lb-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--outline); }
.lb-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: .85rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--prose-3);
}
.lb-tabs button.on { color: var(--prose); border-bottom-color: var(--prose); }
.lb-row { display: grid; grid-template-columns: 2.6rem 1fr 5.5rem auto 8rem; align-items: center; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--outline); cursor: pointer; }
.lb-row:first-child { border-top: 0; }
.lb-row:hover { background: var(--surface-dim); }
.lb-row.me { background: color-mix(in srgb, var(--chart-accent) 9%, transparent); }
.lb-rank { font-family: var(--font-mono); font-weight: 700; font-size: .85rem; color: var(--prose-2); }
.lb-name { font-weight: 800; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name .muted { font-weight: 500; text-transform: none; }
.lb-rolls { font-size: .78rem; color: var(--prose-2); text-align: right; white-space: nowrap; }

/* profil public : noms cliquables, page d'un joueur */
.lb-name { text-decoration: none; justify-self: start; max-width: 100%; }
.player-link { font-weight: 700; color: var(--prose); text-decoration: none; }
.lb-name:hover, .player-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-block; margin-top: .4rem; font-size: .75rem; color: var(--prose-3); text-decoration: none; }
.back-link:hover { color: var(--prose); }
.page-title .muted { font-size: .55em; font-weight: 500; text-transform: none; }
.profile-sub { margin: -.4rem 0 1rem; }
.record .when { font-size: .66rem; color: var(--prose-3); white-space: nowrap; }

.field-error { margin: .45rem 0 0; font-size: .74rem; color: var(--danger); }
.credit { margin-top: 2.4rem; font-size: .72rem; color: var(--prose-3); }
.credit a { color: var(--prose-2); }

/* connexion Google */
/* L'iframe de Google est en color-scheme clair : si la page est en sombre, le navigateur lui peint un fond blanc opaque.
   Déclarer le cadre en clair aligne les deux et rend le fond transparent (le bouton garde son thème sombre). */
.google-btn { min-height: 44px; display: flex; align-items: center; color-scheme: light; }
.google-btn iframe { color-scheme: light; }
.google-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .8rem; }
.or-google { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--outline); }
.lb-ep { font-size: .78rem; color: var(--prose-3); text-align: right; white-space: nowrap; }
.lb-gap { text-align: center; color: var(--prose-3); padding: .2rem; border-top: 1px solid var(--outline); }
@media (max-width: 560px) {
  .lb-row { grid-template-columns: 2.1rem 1fr auto auto; }
  .lb-ep { grid-column: 2 / 5; text-align: left; margin-top: -.45rem; }
}
.soon .big { font-size: 2.6rem; }

/* ------------------------------------------------------------------ modale / toast / effets */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
  background: color-mix(in srgb, var(--site-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  animation: fadein .2s ease both;
}
.modal {
  position: relative;
  width: min(100%, 34rem);
  border: 1px solid var(--outline);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  padding: 1.2rem 1.2rem 1.4rem;
}
.modal-close { position: absolute; top: .6rem; right: .6rem; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: var(--prose-3); padding: .3rem .5rem; }
.modal-close:hover { color: var(--prose); }
.modal h2 { margin: 0 0 .8rem; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--prose-2); }
.modal .actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }
.modal .danger-zone { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--outline); display: flex; flex-wrap: wrap; gap: .5rem; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  z-index: 70;
  transform: translateX(-50%);
  padding: .55rem .9rem;
  border-radius: .5rem;
  background: var(--prose);
  color: var(--site-bg);
  font-size: .8rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  animation: fadein .2s ease both;
}
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }
.flash { position: fixed; inset: 0; z-index: 39; pointer-events: none; animation: flash .9s ease-out forwards; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .btn-roll, .num-card::after, .qmarks span { animation: none; }
  .badge-card.reveal, .slot.revealed, .num-card.shake, .fade-in { animation: none; }
}

/* comparaison de deux joueurs (profil) */
.compare-score { font-size: .78rem; font-weight: 700; color: var(--prose-2); }
.compare-row { display: grid; grid-template-columns: minmax(7rem, 1.2fr) 1fr 1fr; gap: .6rem; align-items: center; padding: .42rem 0; border-top: 1px solid var(--outline); font-size: .8rem; }
.compare-row.head { border-top: 0; padding-top: 0; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--prose-3); }
.compare-row .k { color: var(--prose-2); }
.compare-row .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-row .v.win { font-weight: 700; color: var(--success); }
.compare-row .v.win::before { content: '▲ '; font-size: .6rem; }
.compare-top { margin-top: 1rem; }
.compare-top .eyebrow, .compare-badges .eyebrow { margin: .9rem 0 .5rem; }
.pill-row.left { justify-content: flex-start; }

/* duel en direct */
.duel-entry { margin: 1.4rem auto 0; max-width: 26rem; }
.duel-entry .eyebrow { margin-bottom: .5rem; }
.duel-entry-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.duel-join { display: flex; gap: .4rem; }
.duel-join .input { width: 6.5rem; text-align: center; text-transform: uppercase; letter-spacing: .2em; }
.room-code-box { text-align: center; border: 1px solid var(--outline); border-radius: .8rem; background: var(--surface); padding: 1.6rem 1rem; max-width: 26rem; margin: 0 auto; }
.room-code { font-size: 3rem; font-weight: 700; letter-spacing: .25em; margin: .3rem 0 .6rem; padding-left: .25em; }
.room-wait { text-align: center; color: var(--prose-3); margin: 1rem 0; animation: wait-pulse 1.6s ease-in-out infinite; }
@keyframes wait-pulse { 50% { opacity: .45; } }
.ready-chip { color: var(--success); font-weight: 700; }
.room-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.room-side { text-align: center; border: 1px solid var(--outline); border-radius: .8rem; background: var(--surface); padding: 1rem .6rem; min-width: 0; transition: box-shadow .3s ease, border-color .3s ease; }
.room-side.won { border-color: var(--ep-outline); box-shadow: 0 0 0 3px var(--ep-outline); }
.room-name { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .7rem; }
.room-meta { display: flex; gap: .35rem; justify-content: center; align-items: center; min-height: 1.6rem; margin: .7rem 0 .4rem; }
.room-vs { font-weight: 800; color: var(--prose-3); text-align: center; }
.room-actions { text-align: center; margin: 1.2rem 0 .4rem; }
.room-result { font-size: 1.3rem; font-weight: 800; margin-bottom: .8rem; }
.room-buttons { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.room-buttons a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.room-round { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--outline); font-size: .8rem; }
.room-round:first-child { border-top: 0; }
.room-round .rank { width: 1.4rem; font-family: var(--font-mono); font-size: .72rem; color: var(--prose-3); }
.room-round-mine { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--prose-3); }
.seg.wrap { display: flex; width: 100%; }
.seg.wrap button { flex: 1 1 0; min-width: 0; padding: .45rem .15rem; }
.room-seats { margin: .8rem 0 .2rem; }
.empty-seat { opacity: .45; }
.room-board { border: 1px solid var(--outline); border-radius: .8rem; background: var(--surface); padding: .3rem .9rem; margin-bottom: 1rem; }
.board-row { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; border-top: 1px solid var(--outline); font-size: .82rem; }
.board-row:first-child { border-top: 0; }
.board-row .rank { width: 1.2rem; font-family: var(--font-mono); font-size: .72rem; color: var(--prose-3); }
.board-row.me .player-link { color: var(--chart-accent); }
.board-metric { margin-left: auto; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.board-wins { font-weight: 700; }
.board-metric > .mono { min-width: 6.4rem; text-align: right; }
.board-metric > .board-wins { min-width: 3rem; }
.xp-bar { display: inline-block; width: clamp(4rem, 18vw, 9rem); height: .45rem; border-radius: 999px; background: var(--surface-raised); overflow: hidden; }
.xp-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #10b981, #3b82f6, #a855f7, #ec4899); transition: width .6s ease; }
.room-stage.many { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.room-stage.many .num-card.md { font-size: 1.55rem; min-width: 0; padding: .3rem .6rem; }
.room-stage.many .room-name { font-size: .78rem; }
.room-side.me { border-color: var(--outline-strong); }
@media (max-width: 560px) {
  .compare-row { grid-template-columns: 5.5rem 1fr 1fr; font-size: .74rem; }
  .room-stage { grid-template-columns: 1fr; gap: .5rem; }
  .room-stage.many { grid-template-columns: 1fr 1fr; }
  .room-stage.many .room-side { padding: .7rem .35rem; }
  .room-stage.many .num-card.md { font-size: 1.2rem; padding: .25rem .4rem; }
  .room-stage.many .pill-row { display: none; }
  .room-code { font-size: 2.3rem; }
}

/* titres et succès */
.title-pill { display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; padding: .08rem .45rem; border: 1px solid var(--ep-outline); border-radius: 999px; background: var(--ep-surface); color: var(--ep-text); font-size: .64rem; font-weight: 700; letter-spacing: .02em; text-transform: none; white-space: nowrap; vertical-align: middle; }
.page-title .title-pill { font-size: .9rem; letter-spacing: 0; }
/* Owner : texte rouge sans cadre, en petites capitales espacées, une couronne fine et un reflet discret toutes les 6 s. */
.title-owner {
  --owner-a: #9f1239; --owner-b: #e11d48; --owner-shine: #fecdd3;
  display: inline-flex; align-items: baseline; gap: .28em; margin-left: .45rem; vertical-align: middle; white-space: nowrap;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--owner-b);
  background: linear-gradient(100deg, var(--owner-a) 0%, var(--owner-b) 35%, var(--owner-shine) 50%, var(--owner-b) 65%, var(--owner-a) 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: owner-sheen 6s ease-in-out infinite;
}
.title-owner::before { content: '♛'; font-size: 1.05em; letter-spacing: 0; -webkit-text-fill-color: var(--owner-b); color: var(--owner-b); }
.dark .title-owner { --owner-a: #e11d48; --owner-b: #fb7185; --owner-shine: #fff1f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .title-owner { --owner-a: #e11d48; --owner-b: #fb7185; --owner-shine: #fff1f2; } }
:root[data-theme="dark"] .title-owner { --owner-a: #e11d48; --owner-b: #fb7185; --owner-shine: #fff1f2; }
.page-title .title-owner { font-size: .9rem; }
@keyframes owner-sheen { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.lb-who { display: flex; align-items: center; min-width: 0; }
.lb-who .lb-name { flex: 0 1 auto; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.ach { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--outline); border-radius: .6rem; background: var(--surface); }
.ach.locked { opacity: .5; }
.ach.equipped { border-color: var(--ep-outline); box-shadow: 0 0 0 2px var(--ep-outline); }
.ach-emoji { font-size: 1.4rem; }
.ach-text { display: flex; flex-direction: column; min-width: 0; font-size: .74rem; flex: 1; }
.ach-text span { color: var(--prose-3); font-size: .68rem; }
.ach-btn { padding: .3rem .6rem; font-size: .66rem; }

/* réactions en duel */
.room-arena { position: relative; }
.react-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.react-bubble { position: absolute; bottom: 8%; display: flex; flex-direction: column; align-items: center; font-size: 2rem; line-height: 1; transform-origin: 50% 100%; animation: react-float 2.8s ease-out forwards; }
.react-bubble .emote { width: 76px; height: 76px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.react-bubble small { margin-top: .2rem; padding: .05rem .35rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--outline); font-size: .58rem; font-weight: 700; color: var(--prose-2); }
@keyframes react-float { 0% { transform: translateY(0) scale(.2); opacity: 0; } 10% { transform: translateY(-14px) scale(1.18); opacity: 1; } 18% { transform: translateY(-8px) scale(.94); } 26% { transform: translateY(-10px) scale(1.04); } 34% { transform: translateY(-10px) scale(1); } 70% { transform: translateY(-40px) scale(1); opacity: 1; } 100% { transform: translateY(-150px) scale(.9); opacity: 0; } }
.room-reacts { display: flex; justify-content: center; gap: .35rem; margin-top: .8rem; }
.react-btn { border: 1px solid var(--outline); background: var(--surface); border-radius: .8rem; font-size: 1.25rem; line-height: 1; padding: .2rem; cursor: pointer; transition: transform .12s ease; }
.react-btn .emote { display: block; width: 46px; height: 46px; }
.react-btn:hover { transform: scale(1.15); }
.react-btn:active { transform: scale(.92); }
@media (max-width: 560px) {
  .lb-who .title-pill .t { display: none; }
  .react-btn .emote { width: 38px; height: 38px; }
  .react-bubble .emote { width: 60px; height: 60px; }
}
/* Animations réduites : la bulle apparaît en fondu, reste, puis s'efface, sans bouger. Le !important passe devant la
   règle générale qui accélère toutes les animations (sinon la bulle finissait invisible dès son apparition). */
@media (prefers-reduced-motion: reduce) { .react-bubble { animation: react-fade 2.6s linear forwards !important; } }
@keyframes react-fade { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* onglet Duel : parties en cours, boutique */
.live-row { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--outline); }
.live-row:first-child { border-top: 0; }
.live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--outline-strong); flex: none; }
.live-dot.on { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .25); animation: wait-pulse 1.4s ease-in-out infinite; }
.live-info { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .8rem; }
.live-players { font-size: .68rem; color: var(--prose-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-row .btn, .live-row .btn-roll { flex: none; text-decoration: none; }
.coins { font-weight: 700; font-size: .9rem; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; margin-top: .6rem; }
.skin-tile { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .9rem .6rem .8rem; border: 1px solid var(--outline); border-radius: .7rem; background: var(--surface-dim); text-align: center; }
.skin-tile.equipped { border-color: var(--ep-outline); box-shadow: 0 0 0 2px var(--ep-outline); }
.skin-tile .num-card.md { font-size: 1.7rem; min-width: 0; }
.skin-name { display: flex; flex-direction: column; font-size: .8rem; }
.skin-name span { font-size: .68rem; color: var(--prose-3); }
.skin-state { font-size: .7rem; font-weight: 700; color: var(--success); padding: .45rem 0; }
.btn.disabled { opacity: .5; }
.h2h { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding: .5rem .7rem; margin-bottom: .6rem; border-radius: .5rem; background: var(--surface-dim); font-size: .85rem; }
.h2h b { font-size: 1.2rem; }
.rival-row { display: flex; justify-content: space-between; padding: .35rem 0; border-top: 1px solid var(--outline); font-size: .8rem; }

/* skins du nombre tiré : ils remplacent l'apparence de la carte et de ses chiffres (.slot) */
.num-card.skin-neon { background: #0b0614; border-color: #ff4fd8; color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px #ff4fd8, 0 0 22px #ff4fd8; box-shadow: 0 0 14px rgba(255, 79, 216, .55), inset 0 0 12px rgba(255, 79, 216, .3); }
.num-card.skin-lcd { background: #9aa886; border: 3px solid #3d4636; border-radius: .4rem; color: #1f2a1b; box-shadow: inset 0 3px 7px rgba(0, 0, 0, .35); text-shadow: 2px 2px 0 rgba(0, 0, 0, .12); }
.num-card.skin-pixel { background: #1d2b53; border: 4px solid #29adff; border-radius: 0; color: #ffec27; box-shadow: 4px 4px 0 #000; }
.skin-pixel .slot { font-family: 'Press Start 2P', monospace; font-size: .6em; width: 1.05em; text-shadow: .12em .12em 0 #ff004d; }
.num-card.skin-jersey { background: repeating-linear-gradient(90deg, #d7263d 0 14px, #b81d31 14px 28px); border-color: #fff; color: #fff; text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111, 0 4px 6px rgba(0, 0, 0, .4); }
.skin-jersey .slot { font-family: 'Graduate', serif; font-weight: 400; width: .74em; }
.num-card.skin-slots { background: linear-gradient(180deg, #7f1d1d, #b91c1c 50%, #7f1d1d); border: 3px solid #fbbf24; box-shadow: 0 0 0 2px #78350f, 0 6px 14px rgba(0, 0, 0, .35), inset 0 2px 6px rgba(0, 0, 0, .4); }
.skin-slots .slot { font-size: .6em; width: 1.25em; height: 1.7em; margin: 0 .07em; display: inline-flex; align-items: center; justify-content: center; border-radius: .16em; color: #111827;
  background: linear-gradient(180deg, #9ca3af 0%, #f3f4f6 22%, #fff 50%, #f3f4f6 78%, #9ca3af 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 .35em .3em -.25em rgba(0, 0, 0, .3), inset 0 -.35em .3em -.25em rgba(0, 0, 0, .3); }
.skin-slots .slot.spinning { color: #374151; opacity: .85; filter: blur(.7px); }
.num-card.skin-dice { background: radial-gradient(ellipse at center, #15803d, #0f5132 75%); border-color: #92400e; }
.skin-dice .slot { font-size: .58em; width: 1.5em; height: 1.5em; margin: 0 .08em; display: inline-flex; align-items: center; justify-content: center; border-radius: .28em; color: #111; background: linear-gradient(145deg, #fff, #e5e7eb); box-shadow: 0 .12em 0 #9ca3af, 0 .22em .3em rgba(0, 0, 0, .3); }
.num-card.skin-gold { background: linear-gradient(135deg, #292524, #1c1917); border-color: #d4a017; box-shadow: 0 0 14px rgba(212, 160, 23, .4); }
.skin-gold .slot { background: linear-gradient(180deg, #fff7ae, #f5c542 45%, #b8860b 55%, #ffe27a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #7a5a00); }
.num-card.skin-fire { background: radial-gradient(ellipse at bottom, #7c2d12, #1c0a05 72%); border-color: #f97316; box-shadow: 0 0 18px rgba(249, 115, 22, .6); }
.skin-fire .slot { background: linear-gradient(0deg, #ef4444, #f97316 40%, #facc15 75%, #fff7ae); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fire-flicker 1.1s ease-in-out infinite alternate; }
@keyframes fire-flicker { to { background-position: 0 100%; } }
.num-card.skin-galaxy { background: radial-gradient(1px 1px at 18% 28%, #fff, transparent), radial-gradient(1px 1px at 72% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 42% 82%, #c4b5fd, transparent),
    radial-gradient(1px 1px at 86% 18%, #fff, transparent), radial-gradient(1px 1px at 8% 76%, #e0e7ff, transparent), radial-gradient(ellipse at 30% 40%, #4c1d95, #0b0624 72%); border-color: #8b5cf6; color: #fff; text-shadow: 0 0 8px #a78bfa, 0 0 18px #7c3aed; }
.num-card.skin-rainbow { background: #111; border-color: #a855f7; }
.skin-rainbow .slot { background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444); background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-slide 3s linear infinite; }
@keyframes rainbow-slide { to { background-position: 400% 0; } }
/* Scoreboard : chiffres en points LED (masque de points sur un chiffre épaissi), LED éteintes en fond */
.num-card.skin-scoreboard { background: radial-gradient(circle, #2b2416 38%, transparent 46%) 0 0 / .12em .12em, #0a0a0a; border: 3px solid #3f3f46; border-radius: .3rem; box-shadow: inset 0 0 12px #000, 0 6px 14px rgba(0, 0, 0, .35); }
.skin-scoreboard .slot { color: #ffb020; -webkit-text-stroke: .05em #ffb020;
  -webkit-mask-image: radial-gradient(circle, #000 44%, transparent 52%); -webkit-mask-size: .12em .12em; mask-image: radial-gradient(circle, #000 44%, transparent 52%); mask-size: .12em .12em; }
/* Chrome : métal poli, reflet qui passe */
.num-card.skin-chrome { background: linear-gradient(135deg, #1f2937, #0b0f17); border: 2px solid #cbd5e1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px rgba(0, 0, 0, .35); }
.skin-chrome .slot { background: linear-gradient(110deg, #6b7280 0%, #e5e7eb 20%, #fff 26%, #9ca3af 36%, #4b5563 50%, #d1d5db 70%, #6b7280 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: chrome-sheen 4s ease-in-out infinite; }
@keyframes chrome-sheen { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
/* Matrix : pluie de code (canvas ajouté par le site), chiffres qui se décryptent en défilant puis se figent en vert */
.num-card.skin-matrix { background: #000; border-color: #003b00; box-shadow: 0 0 16px rgba(0, 255, 65, .3), inset 0 0 18px rgba(0, 0, 0, .9); }
.matrix-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none; }
.skin-matrix .slot { position: relative; z-index: 1; font-family: 'Share Tech Mono', monospace; font-weight: 400; color: #00ff41;
  text-shadow: 0 0 2px #000, 0 0 8px #00ff41, 0 0 18px #008f11; background: radial-gradient(ellipse, rgba(0, 0, 0, .75) 30%, transparent 72%); }
.skin-matrix .slot.spinning { color: #7dffa0; opacity: .9; }
.skin-matrix .slot.revealed { animation: matrix-lock .7s ease-out; }
@keyframes matrix-lock { 0% { color: #fff; text-shadow: 0 0 10px #fff, 0 0 24px #00ff41, 0 0 40px #00ff41; transform: scale(1.3); } 60% { color: #caffd5; } 100% { color: #00ff41; transform: none; } }
.skin-slots .slot.collapsed, .skin-dice .slot.collapsed, .skin-pixel .slot.collapsed { width: 0; height: 0; margin: 0; box-shadow: none; background: none; }
@media (prefers-reduced-motion: reduce) { .skin-fire .slot, .skin-rainbow .slot, .skin-chrome .slot, .skin-matrix .slot.revealed { animation: none; } }
@media (max-width: 560px) { .live-row { flex-wrap: wrap; } .skin-grid { grid-template-columns: 1fr 1fr; } .skin-tile .num-card.md { font-size: 1.15rem; } }
.bot-name { font-weight: 700; color: var(--prose-2); }
.equipped-title { margin: 0 0 .6rem; }

/* ================================================================== animations (retravaillées le 2026-09-23) */
/* Pages : entrée douce à chaque changement d'onglet. */
.page { animation: page-in .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Grilles et listes : apparition en cascade (les 12 premiers éléments, puis tout le reste ensemble). */
.tiles > *, .ach-grid > *, .skin-grid > *, .records > *, .compare > .compare-row, .badge-grid > *, .grid-2 > .panel, .feature-card {
  animation: rise .42s cubic-bezier(.2, .8, .2, 1) both;
}
.tiles > *, .ach-grid > *, .skin-grid > *, .records > *, .compare > .compare-row, .badge-grid > * { animation-delay: .36s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(1) { animation-delay: 0s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(2) { animation-delay: .03s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(3) { animation-delay: .06s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(4) { animation-delay: .09s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(5) { animation-delay: .12s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(6) { animation-delay: .15s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(7) { animation-delay: .18s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(8) { animation-delay: .21s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(9) { animation-delay: .24s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(10) { animation-delay: .27s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(11) { animation-delay: .30s; }
:is(.tiles, .ach-grid, .skin-grid, .records, .compare, .badge-grid) > :nth-child(12) { animation-delay: .33s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Tirage : les chiffres défilent comme un rouleau, puis claquent en place ; la carte encaisse chaque chiffre. */
.slot.spinning { animation: reel .1s linear infinite; }
@keyframes reel { 0%, 100% { transform: translateY(-.06em); filter: blur(.5px); } 50% { transform: translateY(.06em); filter: blur(.2px); } }
.slot.revealed { animation: digit-lock .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes digit-lock {
  0% { transform: translateY(-.45em) scale(1.35); opacity: .3; filter: blur(1.2px) brightness(1.6); }
  60% { transform: translateY(.05em) scale(.97); opacity: 1; filter: none; }
  100% { transform: none; }
}
.card-stage { position: relative; display: inline-flex; justify-content: center; isolation: isolate; }
.result { overflow-x: clip; } /* les rayons qui tournent ne créent pas de défilement horizontal sur téléphone */
.card-stage.thump, .room-side.thump { animation: thump .24s ease-out; }
@keyframes thump { 40% { transform: scale(1.035) translateY(-1px); } 100% { transform: none; } }
/* Rayons de lumière derrière la carte à partir d'Epic, qui tournent lentement. */
.rays {
  position: absolute; left: 50%; top: 50%; width: min(24rem, 92vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1;
  pointer-events: none; opacity: 0; border-radius: 50%; transition: opacity .7s ease;
  background: repeating-conic-gradient(from 0deg, var(--t-accent, #a855f7) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 66%); mask-image: radial-gradient(circle, #000 10%, transparent 66%);
}
.card-stage.lit .rays { opacity: .32; animation: rays-spin 16s linear infinite; }
[data-tier="anomaly"] .card-stage.lit .rays { opacity: .4; animation-duration: 12s; }
[data-tier="mythic"] .card-stage.lit .rays { opacity: .5; animation-duration: 8s; }
@keyframes rays-spin { to { transform: rotate(360deg); } }
/* Onde de choc à la couleur de la rareté (ajoutée par le site au moment de la révélation). */
.shockwave {
  position: fixed; z-index: 38; pointer-events: none; border: 3px solid; border-radius: 1rem;
  transform: translate(-50%, -50%) scale(.9); opacity: .9; box-shadow: 0 0 18px currentColor, inset 0 0 12px currentColor;
  animation: shockwave 1s cubic-bezier(.15, .75, .3, 1) both;
}
@keyframes shockwave { to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; border-width: 1px; } }
/* Reflet qui balaie la pastille d'XP quand la rareté tombe. */
.ep-big { position: relative; overflow: hidden; }
.ep-big.glint::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  animation: sweep .9s .35s ease-out both;
}
@keyframes sweep { to { transform: translateX(120%); } }

/* Badges : chaque carte tombe avec un léger basculement, un reflet la traverse, sa pastille d'XP rebondit. */
.badge-card { position: relative; overflow: hidden; }
.badge-card.reveal { animation: badge-in .52s cubic-bezier(.2, .9, .25, 1.15) both; transform-origin: 50% 0; }
@keyframes badge-in {
  0% { opacity: 0; transform: perspective(600px) translateY(-24px) rotateX(22deg) scale(.96); }
  70% { opacity: 1; transform: perspective(600px) translateY(2px) rotateX(0) scale(1.01); }
  100% { transform: none; }
}
.badge-card.reveal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  animation: sweep .9s .15s ease-out both;
}
.dark .badge-card.reveal::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); }
.badge-card.reveal .ep-pill { animation: pill-pop .45s .2s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pill-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Duel : le gagnant de la manche se soulève, les autres s'estompent, le trophée tombe, sa ligne clignote au classement. */
.room-side { transition: box-shadow .3s ease, border-color .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease, filter .45s ease; }
.room-side.won { transform: translateY(-5px) scale(1.02); }
.room-side.lost { opacity: .7; filter: saturate(.55); }
.trophy-drop { display: inline-block; animation: trophy-drop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes trophy-drop { from { transform: translateY(-18px) scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.board-row.bump { animation: row-bump 1.2s ease-out; }
@keyframes row-bump { 0%, 20% { background: color-mix(in srgb, var(--ep-outline) 75%, transparent); } 100% { background: transparent; } }
.room-code { animation: code-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes code-in { from { letter-spacing: .6em; opacity: 0; } to { letter-spacing: .25em; opacity: 1; } }
.room-seats .badge-pill { animation: pill-pop .4s cubic-bezier(.34, 1.56, .64, 1) both; }

/* Fenêtres, notifications, boutons. */
.modal-backdrop { animation: backdrop-in .22s ease both; }
@keyframes backdrop-in { from { opacity: 0; } }
.modal { animation: modal-in .34s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.toast { animation: toast-in .36s cubic-bezier(.34, 1.56, .64, 1) both; }
.toast.out { animation: toast-out .22s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(.95); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 12px) scale(.97); } }
.toast.achv {
  overflow: hidden; padding: .75rem 1.15rem; border: 1px solid #d4a017; font-weight: 700; color: #fde68a;
  background: linear-gradient(135deg, #3b2a05, #1c1406); box-shadow: 0 0 0 1px rgba(212, 160, 23, .3), 0 12px 32px rgba(212, 160, 23, .35);
}
.toast.achv::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 170, .45) 50%, transparent 70%);
  animation: sweep 1.1s .3s ease-out both;
}
.btn:active, .btn-roll:active, .seg button:active, .react-btn:active, .ach-btn:active { transform: translateY(1px) scale(.97); }
.ach.equipped { animation: equip-glow 1s ease-out; }
@keyframes equip-glow { 0% { box-shadow: 0 0 0 2px var(--ep-outline), 0 0 26px var(--ep-outline); } 100% { box-shadow: 0 0 0 2px var(--ep-outline); } }
.skin-tile.equipped .num-card { animation: pill-pop .5s cubic-bezier(.34, 1.56, .64, 1); }

/* Animations réduites dans le système : tout apparaît directement, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rays, .shockwave { display: none !important; }
}

/* ================================================================== révélation propre à chaque skin (2026-09-23)
   .slot.spinning = chiffre qui tourne, .slot.revealed = chiffre qui se fige (Matrix a déjà la sienne plus haut). */
/* Neon : les tubes grésillent, puis s'allument en clignotant. */
.skin-neon .slot.spinning { animation: neon-buzz .18s steps(2) infinite; }
@keyframes neon-buzz { 50% { opacity: .2; text-shadow: none; } }
.skin-neon .slot.revealed { animation: neon-on .75s linear backwards; }
@keyframes neon-on { 0% { opacity: .1; text-shadow: none; } 10% { opacity: 1; } 16% { opacity: .15; text-shadow: none; } 26% { opacity: 1; } 32% { opacity: .3; } 46%, 100% { opacity: 1; } }
/* LCD : segments fantômes pendant que ça tourne, puis affichage par paliers, de haut en bas. */
.skin-lcd .slot.spinning { color: rgba(31, 42, 27, .16); animation: none; }
.skin-lcd .slot.revealed { animation: lcd-on .45s steps(4) backwards; }
@keyframes lcd-on { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }
/* Pixel : sautille en 8 bits, puis apparaît en gros pixels qui s'affinent. */
.skin-pixel .slot.spinning { animation: pixel-jitter .2s steps(2) infinite; }
@keyframes pixel-jitter { 50% { transform: translateY(-.1em); } }
.skin-pixel .slot.revealed { animation: pixel-in .5s steps(5) backwards; }
@keyframes pixel-in { 0% { transform: scale(1.7); filter: blur(3px) contrast(3); opacity: .3; } 60% { transform: translateY(-.25em); filter: none; opacity: 1; } 100% { transform: none; } }
/* Scoreboard : LED qui papillotent, puis s'allument en vague de gauche à droite. */
.skin-scoreboard .slot.spinning { animation: led-flicker .12s steps(2) infinite; }
@keyframes led-flicker { 0% { opacity: .35; } 50% { opacity: .15; } 100% { opacity: .35; } }
.skin-scoreboard .slot.revealed { animation: led-wave .6s steps(6) backwards; }
@keyframes led-wave { from { clip-path: inset(0 100% 0 0); filter: brightness(2); } to { clip-path: inset(0); filter: none; } }
/* Dice : chaque dé roule, puis atterrit en rebondissant. */
.skin-dice .slot.spinning { animation: dice-tumble .3s linear infinite; }
@keyframes dice-tumble { 25% { transform: rotate(90deg) translateY(.05em); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg) translateY(.05em); } 100% { transform: rotate(360deg); } }
.skin-dice .slot.revealed { animation: dice-land .6s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes dice-land { 0% { transform: translateY(-.6em) rotate(-200deg) scale(.7); } 60% { transform: translateY(.08em) rotate(10deg) scale(1.05); } 100% { transform: none; } }
/* Slots : les rouleaux défilent vite, puis s'arrêtent avec un rebond. */
.skin-slots .slot.spinning { animation: reel-spin .08s linear infinite; }
@keyframes reel-spin { 0% { background-position: 0 -.3em; } 100% { background-position: 0 .3em; } }
.skin-slots .slot.revealed { animation: reel-stop .55s cubic-bezier(.2, 1.8, .4, 1) backwards; }
@keyframes reel-stop { 0% { transform: translateY(-.28em); filter: blur(1.5px); } 55% { transform: translateY(.08em); filter: none; } 80% { transform: translateY(-.03em); } 100% { transform: none; } }
/* Jersey : le numéro se déplie comme un maillot qu'on retourne. */
.skin-jersey .slot.revealed { animation: jersey-flip .6s cubic-bezier(.2, .9, .3, 1.2) backwards; transform-origin: 50% 100%; }
@keyframes jersey-flip { 0% { transform: perspective(300px) rotateX(-90deg); opacity: 0; } 70% { transform: perspective(300px) rotateX(12deg); opacity: 1; } 100% { transform: none; } }
/* Gold : chaque chiffre est frappé comme une pièce, avec un éclat. */
.skin-gold .slot.revealed { animation: gold-strike .55s ease-out backwards; }
@keyframes gold-strike {
  0% { transform: scale(1.8) rotate(-8deg); filter: brightness(2.2) drop-shadow(0 0 8px #ffe27a); opacity: .2; }
  45% { transform: scale(.94); filter: brightness(1.5) drop-shadow(0 0 10px #ffe27a); opacity: 1; }
  100% { transform: none; filter: drop-shadow(0 1px 0 #7a5a00); }
}
/* Fire : chaque chiffre s'enflamme depuis le bas, puis continue de brûler. */
.skin-fire .slot.revealed { animation: fire-ignite .7s ease-out backwards, fire-flicker 1.1s .7s ease-in-out infinite alternate; }
@keyframes fire-ignite { from { clip-path: inset(100% 0 0 0); filter: brightness(2.2); } to { clip-path: inset(0); filter: none; } }
/* Galaxy : chaque chiffre arrive comme une étoile filante. */
.skin-galaxy .slot.revealed { animation: star-fall .6s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes star-fall {
  0% { transform: translate(.9em, -.9em) scale(.3); opacity: 0; text-shadow: -.4em .4em 6px #fff, 0 0 12px #fff; }
  60% { opacity: 1; }
  100% { transform: none; text-shadow: 0 0 8px #a78bfa, 0 0 18px #7c3aed; }
}
/* Chrome : un éclat métallique frappe chaque chiffre, puis le reflet reprend. */
.skin-chrome .slot.revealed { animation: chrome-strike .5s ease-out backwards, chrome-sheen 4s .5s ease-in-out infinite; }
@keyframes chrome-strike { 0% { transform: scale(1.5); filter: brightness(2.5); opacity: .3; } 50% { transform: scale(.96); filter: brightness(1.6); opacity: 1; } 100% { transform: none; filter: none; } }
/* Rainbow : chaque chiffre surgit en tournoyant, puis les couleurs défilent. */
.skin-rainbow .slot.revealed { animation: rainbow-pop .6s cubic-bezier(.34, 1.56, .64, 1) backwards, rainbow-slide 3s .6s linear infinite; }
@keyframes rainbow-pop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* Défilement propre aux skins qui utilisaient le rouleau commun (2026-09-23). */
/* Jersey : le numéro flotte comme un maillot au vent. */
.skin-jersey .slot.spinning { opacity: .8; animation: jersey-flutter .34s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes jersey-flutter { 0% { transform: skewX(-9deg) scaleY(.94); } 50% { transform: skewX(4deg) scaleY(1.03); } 100% { transform: skewX(9deg) scaleY(.96); } }
/* Gold : chaque chiffre tourne sur lui-même comme une pièce lancée. */
.skin-gold .slot.spinning { opacity: 1; animation: gold-coin .32s linear infinite; }
@keyframes gold-coin { 0% { transform: perspective(200px) rotateY(0); filter: brightness(1); } 25% { filter: brightness(1.7); } 50% { transform: perspective(200px) rotateY(180deg); filter: brightness(.7); } 100% { transform: perspective(200px) rotateY(360deg); filter: brightness(1); } }
/* Fire : les flammes lèchent le chiffre et le font trembler vers le haut. */
.skin-fire .slot.spinning { opacity: 1; transform-origin: 50% 100%; animation: fire-lick .16s ease-in-out infinite alternate, fire-flicker .4s linear infinite alternate; }
@keyframes fire-lick { 0% { transform: scaleY(.92) translateY(.03em) skewX(-3deg); filter: brightness(1); } 100% { transform: scaleY(1.1) translateY(-.05em) skewX(3deg); filter: brightness(1.5) drop-shadow(0 -2px 4px #f97316); } }
/* Galaxy : le chiffre scintille et gravite comme une étoile. */
.skin-galaxy .slot.spinning { opacity: 1; animation: star-twinkle .45s ease-in-out infinite; }
@keyframes star-twinkle {
  0%, 100% { transform: translate(0, 0) scale(.9); opacity: .45; text-shadow: 0 0 4px #a78bfa; }
  25% { transform: translate(.04em, -.04em); }
  50% { transform: translate(0, -.06em) scale(1.05); opacity: 1; text-shadow: 0 0 6px #fff, 0 0 16px #c4b5fd, .3em -.3em 2px rgba(255, 255, 255, .6); }
  75% { transform: translate(-.04em, -.03em); }
}
/* Chrome : des reflets balaient le métal à toute vitesse. */
.skin-chrome .slot.spinning { opacity: 1; animation: chrome-flash .5s linear infinite; }
@keyframes chrome-flash { 0% { background-position: 0 0; filter: brightness(.9); } 50% { filter: brightness(1.6); } 100% { background-position: 250% 0; filter: brightness(.9); } }
/* Rainbow : les couleurs tourbillonnent et le chiffre ondule. */
.skin-rainbow .slot.spinning { opacity: 1; animation: rainbow-slide .5s linear infinite, rainbow-wobble .3s ease-in-out infinite alternate; }
@keyframes rainbow-wobble { from { transform: rotate(-8deg) scale(.95); filter: hue-rotate(0deg) saturate(1.4); } to { transform: rotate(8deg) scale(1.05); filter: hue-rotate(180deg) saturate(1.4); } }
@media (prefers-reduced-motion: reduce) {
  [class*="skin-"] .slot.spinning, [class*="skin-"] .slot.revealed { animation: none; }
}

/* ================================================================== cadre du joueur en duel assorti à son skin (2026-09-23)
   .room-side.side-<skin> : teinte + motif en fond (translucides, lisibles en clair comme en sombre), bordure et halo,
   et deux petits décors dans les coins (::before en haut à gauche, ::after en bas à droite). */
.room-side[class*="side-"] { position: relative; overflow: hidden; isolation: isolate; border-color: var(--side-border); box-shadow: var(--side-glow); background: var(--side-bg), var(--surface); }
.room-side[class*="side-"]::before, .room-side[class*="side-"]::after {
  position: absolute; z-index: -1; pointer-events: none; font-size: .95rem; line-height: 1; letter-spacing: .15em; opacity: .75; white-space: pre;
  color: var(--side-ink); text-shadow: var(--side-ink-glow, none);
}
.room-side[class*="side-"]::before { content: var(--deco-a, ''); top: .5rem; left: .6rem; }
.room-side[class*="side-"]::after { content: var(--deco-b, ''); bottom: .5rem; right: .6rem; }
/* Le gagnant garde son anneau doré, par-dessus le halo du skin. */
.room-side.won[class*="side-"] { border-color: var(--ep-outline); box-shadow: 0 0 0 3px var(--ep-outline), var(--side-glow); }

.side-neon { --side-border: #ec4899; --side-glow: 0 0 14px rgba(236, 72, 153, .45), inset 0 0 18px rgba(34, 211, 238, .18); --side-ink: #f0abfc; --side-ink-glow: 0 0 6px #ec4899, 0 0 12px #ec4899;
  --side-bg: radial-gradient(120% 80% at 50% 0%, rgba(236, 72, 153, .16), transparent 60%), repeating-linear-gradient(0deg, rgba(34, 211, 238, .07) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(34, 211, 238, .07) 0 1px, transparent 1px 18px);
  --deco-a: '✦ OPEN'; --deco-b: '24/7 ✦'; }
.side-neon::before { animation: neon-sign 3.2s steps(1) infinite; }
@keyframes neon-sign { 0%, 38%, 42%, 100% { opacity: .8; } 40% { opacity: .15; } }

.side-lcd { --side-border: #8a9a5b; --side-glow: inset 0 0 0 3px rgba(138, 154, 91, .25); --side-ink: rgba(125, 150, 70, .9);
  --side-bg: linear-gradient(180deg, rgba(158, 178, 106, .2), rgba(120, 140, 70, .12)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px);
  --deco-a: '▮▮▮▯ M+'; --deco-b: 'SOLAR ◐'; }
.side-lcd::before, .side-lcd::after { font-family: 'Share Tech Mono', monospace; letter-spacing: .08em; }

.side-pixel { --side-border: #a855f7; --side-glow: 4px 4px 0 rgba(168, 85, 247, .45); border-radius: 0; --side-ink: #f43f5e;
  --side-bg: conic-gradient(rgba(168, 85, 247, .09) 25%, transparent 0 50%, rgba(168, 85, 247, .09) 0 75%, transparent 0) 0 0 / 16px 16px;
  --deco-a: '♥♥♥'; --deco-b: '1UP'; }
.side-pixel::before, .side-pixel::after { font-family: 'Press Start 2P', monospace; font-size: .55rem; }
.side-pixel::after { color: #22c55e; animation: pixel-blink 1s steps(1) infinite; }
@keyframes pixel-blink { 50% { opacity: 0; } }

.side-jersey { --side-border: #16a34a; --side-glow: none; --side-ink: #16a34a;
  --side-bg: repeating-linear-gradient(90deg, rgba(22, 163, 74, .13) 0 22px, transparent 22px 44px), radial-gradient(60% 40% at 50% 100%, rgba(255, 255, 255, .06), transparent);
  --deco-a: '⚽'; --deco-b: '★ ★'; }
.side-jersey::before { font-size: 1.2rem; animation: ball-bounce 1.4s ease-in-out infinite; }
@keyframes ball-bounce { 50% { transform: translateY(.35rem) rotate(180deg); } }

.side-slots { --side-border: #eab308; --side-glow: 0 0 0 2px rgba(220, 38, 38, .35); --side-ink: #eab308;
  --side-bg: radial-gradient(circle, rgba(250, 204, 21, .55) 0 2px, transparent 3px) 0 3px / 20px 8px repeat-x, radial-gradient(circle, rgba(250, 204, 21, .55) 0 2px, transparent 3px) 0 calc(100% - 3px) / 20px 8px repeat-x, linear-gradient(180deg, rgba(185, 28, 28, .16), rgba(127, 29, 29, .1));
  --deco-a: '🍒 🔔'; --deco-b: '7 7 7'; }
.side-slots::after { font-weight: 900; animation: jackpot 1.6s ease-in-out infinite; }
@keyframes jackpot { 50% { text-shadow: 0 0 8px #facc15; opacity: 1; } }

.side-scoreboard { --side-border: #f59e0b; --side-glow: inset 0 0 0 1px rgba(245, 158, 11, .3); --side-ink: #f59e0b; --side-ink-glow: 0 0 6px rgba(245, 158, 11, .7);
  --side-bg: radial-gradient(circle, rgba(245, 158, 11, .14) 0 1.2px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
  --deco-a: 'HOME'; --deco-b: 'Q4 · 00:12'; }
.side-scoreboard::before, .side-scoreboard::after { font-family: 'Share Tech Mono', monospace; font-size: .75rem; }

.side-dice { --side-border: #15803d; --side-glow: inset 0 0 22px rgba(21, 128, 61, .25); --side-ink: var(--prose-2);
  --side-bg: radial-gradient(90% 70% at 50% 45%, rgba(22, 163, 74, .2), rgba(20, 83, 45, .16)), repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px);
  --deco-a: '⚀ ⚃'; --deco-b: '⚅ ⚁'; }
.side-dice::before, .side-dice::after { font-size: 1.35rem; letter-spacing: .05em; }
.side-dice::before { animation: dice-idle 2.4s ease-in-out infinite; }
@keyframes dice-idle { 50% { transform: rotate(-12deg) translateY(2px); } }

.side-chrome { --side-border: #cbd5e1; --side-glow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 10px rgba(148, 163, 184, .25); --side-ink: #94a3b8;
  --side-bg: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .14) 45%, transparent 55%) 0 0 / 250% 100%, repeating-linear-gradient(90deg, rgba(148, 163, 184, .08) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(203, 213, 225, .12), rgba(100, 116, 139, .1));
  --deco-a: '◆'; --deco-b: '◇ ◆'; }
.side-chrome { animation: side-sheen 4.5s ease-in-out infinite; }
@keyframes side-sheen { 0%, 100% { background-position: 120% 0, 0 0, 0 0; } 50% { background-position: -20% 0, 0 0, 0 0; } }

.side-gold { --side-border: #d4a017; --side-glow: 0 0 16px rgba(234, 179, 8, .3); --side-ink: #eab308; --side-ink-glow: 0 0 6px rgba(250, 204, 21, .8);
  --side-bg: radial-gradient(100% 70% at 50% 0%, rgba(250, 204, 21, .18), transparent 65%), linear-gradient(180deg, transparent, rgba(180, 130, 10, .1));
  --deco-a: '✦'; --deco-b: '✧ ✦'; }
.side-gold::before, .side-gold::after { animation: gold-sparkle 1.8s ease-in-out infinite; }
.side-gold::after { animation-delay: .9s; }
@keyframes gold-sparkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .35; } 50% { transform: scale(1.25) rotate(45deg); opacity: 1; } }

.side-matrix { --side-border: #00c83a; --side-glow: 0 0 12px rgba(0, 255, 65, .25), inset 0 0 16px rgba(0, 255, 65, .1); --side-ink: #00ff41; --side-ink-glow: 0 0 6px #00ff41;
  --side-bg: repeating-linear-gradient(0deg, rgba(0, 255, 65, .05) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(0, 40, 10, .25), rgba(0, 20, 5, .15));
  --deco-a: 'ﾊ\A ｸ\A ﾐ'; --deco-b: 'ﾂ\A ﾓ\A ﾗ'; }
.side-matrix::before, .side-matrix::after { font-family: 'Share Tech Mono', monospace; line-height: 1.05; letter-spacing: 0; animation: code-drip 1.2s steps(3) infinite; }
.side-matrix::after { animation-delay: .6s; }
@keyframes code-drip { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: .2; transform: translateY(.6rem); } }

.side-fire { --side-border: #f97316; --side-glow: 0 0 16px rgba(249, 115, 22, .35); --side-ink: #fb923c;
  --side-bg: radial-gradient(90% 55% at 50% 110%, rgba(249, 115, 22, .3), rgba(239, 68, 68, .1) 55%, transparent 75%);
  --deco-a: '🔥'; --deco-b: '🔥'; }
.side-fire::before, .side-fire::after { top: auto; bottom: .45rem; font-size: 1.15rem; transform-origin: 50% 100%; animation: flame-dance .5s ease-in-out infinite alternate; }
.side-fire::before { left: .6rem; }
.side-fire::after { animation-delay: .25s; }
.side-fire { animation: embers 1.6s ease-in-out infinite alternate; }
@keyframes flame-dance { from { transform: scale(.9) rotate(-5deg); } to { transform: scale(1.12, 1.2) rotate(5deg); } }
@keyframes embers { to { box-shadow: 0 0 24px rgba(249, 115, 22, .55); } }

.side-galaxy { --side-border: #8b5cf6; --side-glow: 0 0 16px rgba(139, 92, 246, .35); --side-ink: #e9d5ff; --side-ink-glow: 0 0 6px #fff, 0 0 12px #a78bfa;
  --side-bg: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 78% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 80%, #e9d5ff, transparent), radial-gradient(1px 1px at 88% 75%, #fff, transparent), radial-gradient(1px 1px at 55% 12%, #fff, transparent), radial-gradient(1px 1px at 65% 60%, #c4b5fd, transparent),
    radial-gradient(70% 60% at 25% 30%, rgba(139, 92, 246, .22), transparent), radial-gradient(60% 50% at 80% 80%, rgba(236, 72, 153, .16), transparent), linear-gradient(rgba(30, 20, 70, .18), rgba(30, 20, 70, .18));
  --deco-a: '✦'; --deco-b: '🪐'; }
.side-galaxy::before { animation: gold-sparkle 2.2s ease-in-out infinite; }
.side-galaxy::after { font-size: 1.25rem; animation: orbit 6s linear infinite; }
@keyframes orbit { from { transform: rotate(0) translateX(3px) rotate(0); } to { transform: rotate(360deg) translateX(3px) rotate(-360deg); } }

.side-rainbow { --side-border: transparent; --side-glow: 0 0 14px rgba(168, 85, 247, .3); --side-ink: #fff;
  --side-bg: linear-gradient(135deg, rgba(239, 68, 68, .1), rgba(234, 179, 8, .1), rgba(34, 197, 94, .1), rgba(59, 130, 246, .1), rgba(168, 85, 247, .1));
  --deco-a: '🌈'; --deco-b: '✨'; }
.room-side.side-rainbow { border: 2px solid transparent; background: var(--side-bg) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
  linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444) border-box; background-size: auto, auto, 300% 100%; animation: side-rainbow 4s linear infinite; }
.room-side.won.side-rainbow { border-color: transparent; }
@keyframes side-rainbow { to { background-position: 0 0, 0 0, 300% 0; } }
.side-rainbow::before { font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .room-side[class*="side-"], .room-side[class*="side-"]::before, .room-side[class*="side-"]::after { animation: none !important; }
}

/* Classement Lifetime XP : le total est la valeur classée, mis en avant. */
.lb-ep.lifetime { color: var(--ep-text, var(--prose)); font-weight: 800; font-size: .86rem; }

/* ================================================================== Slots : manette de machine à sous (2026-09-23)
   Une tige chromée et sa boule rouge, fixées sur le flanc droit de la machine ; au lancement (.charging) elle s'abaisse
   vers le joueur (retournement vertical autour de son pivot), marque l'arrêt, puis remonte avec un petit rebond. */
.lever-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.slot-lever { position: absolute; left: 100%; bottom: 50%; width: .5em; height: 1.35em; margin-left: .04em; pointer-events: none; font-size: 1.9rem; z-index: 1; }
.card-stage > .slot-lever { font-size: 3.2rem; }
.skin-tile .slot-lever { font-size: 1.8rem; }
.slot-lever::before {
  content: ''; position: absolute; inset: 0; transform-origin: 50% 100%;
  background:
    radial-gradient(circle at 40% .19em, #fee2e2 0 .045em, #ef4444 .12em, #991b1b .24em, transparent .255em),
    linear-gradient(90deg, #4b5563, #f9fafb 40%, #9ca3af 70%, #4b5563) 50% .42em / .12em calc(100% - .42em) no-repeat;
  filter: drop-shadow(0 .05em .05em rgba(0, 0, 0, .35));
}
/* Le support vissé sur la machine (ne bouge pas). */
.slot-lever::after {
  content: ''; position: absolute; left: -.12em; bottom: -.17em; width: .42em; height: .34em;
  border-radius: .06em .17em .17em .06em; background: linear-gradient(180deg, #fde68a, #f59e0b 45%, #b45309);
  box-shadow: 0 0 0 .035em #78350f, inset 0 -.04em .05em rgba(0, 0, 0, .3);
}
.num-card.charging + .slot-lever::before, .skin-tile:hover .slot-lever::before { animation: lever-pull 1s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes lever-pull {
  0% { transform: scaleY(1); }
  32% { transform: scaleY(-1); }
  38% { transform: scaleY(-.9); }
  44%, 58% { transform: scaleY(-1); }
  88% { transform: scaleY(1.06); }
  100% { transform: scaleY(1); }
}
.room-stage.many .slot-lever { display: none; }

/* ================================================================== Fire en duel : braises qui flottent partout (2026-09-23)
   Deux nuées de braises (tailles, vitesses et dérives différentes) qui montent en zigzag derrière tout le cadre. */
.side-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.side-embers::before, .side-embers::after { content: ''; position: absolute; inset: 0; filter: drop-shadow(0 0 3px #f97316) drop-shadow(0 0 6px rgba(239, 68, 68, .6)); }
.side-embers::before {
  background-image:
    radial-gradient(circle at 12% 18%, #fde68a 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 38% 62%, #fb923c 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 71% 34%, #fef3c7 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 88% 80%, #f97316 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 55% 92%, #fdba74 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 24% 76%, #fde68a 0 1px, transparent 2px);
  background-size: 150px 170px;
  animation: ember-drift-a 7s linear infinite, ember-twinkle 1.3s ease-in-out infinite alternate;
}
.side-embers::after {
  background-image:
    radial-gradient(circle at 20% 40%, #fdba74 0 1.1px, transparent 2px),
    radial-gradient(circle at 64% 12%, #fde68a 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 82% 56%, #fb923c 0 1px, transparent 1.9px),
    radial-gradient(circle at 46% 84%, #fef3c7 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 8% 70%, #f97316 0 1.2px, transparent 2.1px);
  background-size: 110px 130px;
  animation: ember-drift-b 4.6s linear infinite, ember-twinkle 0.9s ease-in-out infinite alternate-reverse;
}
/* Montée en zigzag, en boucle sans à-coup (déplacement = multiple de la tuile). */
@keyframes ember-drift-a { 0% { background-position: 0 0; } 25% { background-position: 22px -85px; } 50% { background-position: -6px -170px; } 75% { background-position: -24px -255px; } 100% { background-position: 0 -340px; } }
@keyframes ember-drift-b { 0% { background-position: 0 0; } 25% { background-position: -16px -65px; } 50% { background-position: 10px -130px; } 75% { background-position: 18px -195px; } 100% { background-position: 0 -260px; } }
@keyframes ember-twinkle { from { opacity: .55; } to { opacity: 1; } }

/* Lien discret vers le dépôt GitHub, coin bas gauche. */
.gh-corner { position: fixed; left: 14px; bottom: 14px; z-index: 40; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--outline); background: var(--surface); color: var(--prose-2); opacity: .75; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); transition: opacity .2s, transform .2s, color .2s; }
.gh-corner:hover, .gh-corner:focus-visible { opacity: 1; color: var(--prose); transform: translateY(-2px) rotate(-8deg); }