/* =============================================================
   Styles communs à toutes les pages (le reste est en classes Tailwind).
   ============================================================= */

/* ---------- Couleur de la page (WUBRG + incolore) ----------
   Chaque page déclare <body data-page="…">.
   --acc-200 … --acc-600 : couleur d'accent (classes Tailwind « amber-… »).
   --ar-950 … --ar-border : fonds, panneaux et bordures teintés de la couleur (classes « arcanum-… »).
   Valeurs en triplets RVB. */
:root {                                            /* Valeurs par défaut (l'accueil a son propre thème clair plus bas) */
  --acc-200: 253 230 160; --acc-300: 250 210 110; --acc-400: 247 194 70; --acc-500: 245 184 46; --acc-600: 214 152 22;
  --ar-950: 7 14 10; --ar-900: 12 23 18; --ar-800: 19 36 28; --ar-700: 25 46 36; --ar-600: 32 56 44; --ar-border: 42 72 57;
  --line: rgb(var(--ar-border)); --ink: #eef2ea; --muted: #a3aca6;
}
/* Bandeau du haut en or sur toutes les pages : laiton brillant (jour), or profond (nuit) */
:root {
  --bar-bg: linear-gradient(90deg, #a47c2c 0%, #d9b762 35%, #e8cd85 50%, #d9b762 65%, #a47c2c 100%);
  --bar-fg: #14254a; --bar-muted: #2c3a58; --bar-line: rgb(20 37 74 / .45); --bar-hover: rgb(20 37 74 / .08); --bar-active-fg: #f3dfa6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bar-bg: linear-gradient(90deg, #6b4f17 0%, #9c7a2e 35%, #b48f3f 50%, #9c7a2e 65%, #6b4f17 100%);
    --bar-fg: #fff8e6; --bar-muted: #f1e3bd; --bar-line: rgb(255 248 230 / .5); --bar-hover: rgb(255 248 230 / .1); --bar-active-fg: #5b4315;
  }
}
body[data-page="decks"], body[data-page="deck"] {  /* Bleu — le savoir */
  --acc-200: 183 212 236; --acc-300: 141 187 226; --acc-400: 111 168 217; --acc-500: 91 155 208; --acc-600: 74 132 181;
  --ar-950: 18 21 24; --ar-900: 25 31 35; --ar-800: 34 41 45; --ar-700: 41 47 51; --ar-600: 49 55 60; --ar-border: 55 67 75; }
body[data-page="roulette"] {                       /* Rouge — le hasard : fonds anthracite neutres, rouge rubis en accent seulement */
  --acc-200: 249 200 194; --acc-300: 242 152 142; --acc-400: 232 102 92; --acc-500: 206 58 58; --acc-600: 168 40 46;
  --ar-950: 14 15 18; --ar-900: 20 21 25; --ar-800: 28 29 34; --ar-700: 36 37 43; --ar-600: 45 46 53; --ar-border: 58 59 68; }
/* Dégradés accentués rappelant la couleur de mana de la page (symbole du menu) */
body[data-page="decks"], body[data-page="deck"] { --tint: 20 38 60; }   /* bleu */
body[data-page="mana"] { --tint: 20 46 30; }                              /* vert */
body[data-page="compteur"] { --tint: 36 28 44; }                          /* noir */
body:is([data-page="decks"], [data-page="deck"], [data-page="mana"], [data-page="compteur"]) {
  background:
    radial-gradient(ellipse 75% 520px at 50% 0, rgb(var(--acc-500) / .26), transparent 72%) no-repeat,
    radial-gradient(circle 560px at 0% 55%, rgb(var(--acc-600) / .15), transparent 70%) no-repeat,
    radial-gradient(circle 560px at 100% 75%, rgb(var(--acc-600) / .13), transparent 70%) no-repeat,
    linear-gradient(180deg, rgb(var(--tint)) 0%, rgb(var(--ar-900)) 520px) no-repeat,
    rgb(var(--ar-900));
}
body[data-page="roulette"] {                       /* dégradé rouge accentué : lueur rubis en haut, braises discrètes sur les côtés */
  background:
    radial-gradient(ellipse 75% 520px at 50% 0, rgb(var(--acc-500) / .30), transparent 72%) no-repeat,
    radial-gradient(circle 560px at 0% 55%, rgb(var(--acc-600) / .16), transparent 70%) no-repeat,
    radial-gradient(circle 560px at 100% 75%, rgb(var(--acc-600) / .14), transparent 70%) no-repeat,
    linear-gradient(180deg, rgb(42 16 18) 0%, rgb(var(--ar-900)) 520px) no-repeat,
    rgb(var(--ar-900));
}
body[data-page="roulette"] main .bg-amber-500 { color: #fff !important; }          /* bouton rouge : texte blanc */
body[data-page="roulette"] .seat { border-color: rgb(var(--ar-border)) !important; } /* cartes de joueurs neutres… */
body[data-page="roulette"] /* Archenemy : révélation d'un plan (la carte se retourne) */
.scheme-reveal { animation: scheme-flip .7s cubic-bezier(.2,.8,.25,1) both; transform-origin: center; }
@keyframes scheme-flip {
  0%   { opacity: 0; transform: perspective(900px) rotateY(-90deg) scale(.85); filter: brightness(2); }
  60%  { opacity: 1; transform: perspective(900px) rotateY(8deg) scale(1.02); filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .scheme-reveal { animation: none; } }
.seat-first { outline-color: rgb(var(--acc-400)); }      /* …le rouge marque le premier joueur */
body[data-page="mana"] {                           /* Vert — la nature */
  --acc-200: 181 219 195; --acc-300: 140 198 162; --acc-400: 116 183 141; --acc-500: 95 167 122; --acc-600: 77 140 100;
  --ar-950: 18 22 18; --ar-900: 26 32 27; --ar-800: 34 42 35; --ar-700: 41 49 40; --ar-600: 49 57 48; --ar-border: 56 70 56; }
body[data-page="compteur"] {                       /* Noir — la vie et la mort */
  --acc-200: 217 207 228; --acc-300: 194 181 209; --acc-400: 178 163 196; --acc-500: 164 147 184; --acc-600: 138 122 158;
  --ar-950: 23 21 22; --ar-900: 33 30 33; --ar-800: 43 40 42; --ar-700: 50 46 48; --ar-600: 59 54 57; --ar-border: 71 65 70; }

body {
  font-family: 'Inter', sans-serif; color: var(--ink); overflow-x: hidden;
  /* fond teinté de la couleur de la page, un peu plus lumineux sous le bandeau */
  background: radial-gradient(ellipse 80% 420px at 50% 0, rgb(var(--acc-500) / .12), transparent 70%) no-repeat, rgb(var(--ar-900));
}
h1, h2, h3, .font-magic { font-family: 'Cinzel', serif; letter-spacing: 0.04em; }
:focus-visible { outline: 2px solid rgb(var(--acc-400)); outline-offset: 2px; }
::selection { background: rgb(var(--acc-500) / .45); color: #fff; }

/* ---------- Bandeau ---------- */
.site-bar { position: relative; }
.site-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--acc-500) / .45), transparent); }
.nav-link { position: relative; display: flex; align-items: center; gap: .5rem; height: 100%; padding-inline: .75rem;
  font-weight: 500; font-size: .875rem; letter-spacing: .01em;
  color: var(--muted); white-space: nowrap; transition: color .15s; }
.nav-link:hover { color: var(--ink); }
.nav-link img { width: 15px; height: 15px; opacity: .5; transition: opacity .15s; }
.nav-link:hover img, .nav-link[aria-current="page"] img { opacity: 1; }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: 2px; background: rgb(var(--acc-500)); }

/* ---------- Sur-titre de page (remplace les pastilles arrondies) ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgb(var(--acc-400)); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.eyebrow i { display: none; }

/* ---------- Champs de formulaire : un seul style réutilisé partout ---------- */
.field { padding: .5rem .875rem; border-radius: 4px; background: rgb(var(--ar-950)); border: 1px solid var(--line); color: var(--ink); font-size: .875rem; }
.field:focus { outline: none; border-color: rgb(var(--acc-400)); }
.label { display: block; font-size: .75rem; font-weight: 600; color: #d4dbd5; margin-bottom: .25rem; }

/* ---------- Carte 3D holographique ---------- */
.card-3d-wrapper { perspective: 1000px; }
.mtg-card-3d { transform-style: preserve-3d; transition: transform .15s ease-out; will-change: transform; position: relative; }
.foil-glare {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(135deg, rgba(255,0,150,.35) 0%, rgba(0,204,255,.35) 35%, rgba(255,255,255,.6) 50%, rgba(0,255,128,.35) 65%, rgba(255,102,0,.35) 100%);
  mix-blend-mode: color-dodge;
}
.mtg-card-3d:hover .foil-glare { opacity: .7; }

/* ---------- Boutons de mana actifs (Roue du mana) ---------- */
.mana-btn.active-W { background: rgba(230,220,192,.12)!important; border-color: #e6dcc0!important; color: #f4eedd!important; }
.mana-btn.active-U { background: rgba(91,155,208,.14)!important; border-color: #5b9bd0!important; color: #b7d4ec!important; }
.mana-btn.active-B { background: rgba(164,147,184,.14)!important; border-color: #a493b8!important; color: #d9cfe4!important; }
.mana-btn.active-R { background: rgba(216,100,76,.14)!important; border-color: #d8644c!important; color: #f2b9ac!important; }
.mana-btn.active-G { background: rgba(95,167,122,.14)!important; border-color: #5fa77a!important; color: #b5dbc3!important; }

/* ---------- Accueil + Formats : thème « élégant & chic » (clair OU nuit selon le réglage de l'ordinateur) ----------
   Gris clair · blanc · bleu marine · or/laiton. Le mode nuit garde les mêmes couleurs, inversées :
   fond bleu marine, cartes marine plus claires, texte blanc, accents or. Bandeau du haut en or dans les deux modes.
   Les autres pages restent sombres : les classes Tailwind « sombres » ne sont réajustées que sur l'accueil. */
:is(body[data-page="accueil"], body[data-page="formats"]) {
  /* --- mode jour --- */
  --acc-200: 233 216 168; --acc-300: 139 105 33; --acc-400: 156 120 42; --acc-500: 191 155 72; --acc-600: 160 126 50;  /* laiton */
  --ar-950: 255 255 255; --ar-900: 232 235 239; --ar-800: 255 255 255; --ar-700: 243 245 248; --ar-600: 225 229 235; --ar-border: 208 214 223;
  --line: rgb(var(--ar-border)); --ink: #14254a; --muted: #5d6779;
  --t-strong: #14254a; --t-body: #33405a; --t-soft: #5d6779; --t-hover: #1e3566; --check: #a07c2d;
  --btn-bg: #14254a; --btn-fg: #ffffff; --btn-hover: #1e3566;
  --card-shadow: 0 1px 2px rgb(20 37 74 / .06), 0 8px 24px -12px rgb(20 37 74 / .18);
  --gold-rule: linear-gradient(90deg, #8a6a24, #d9b866, #8a6a24);
  --page-bg:
    radial-gradient(ellipse 60% 420px at 50% 0, rgb(255 255 255 / .85), transparent 70%) no-repeat,
    radial-gradient(circle 520px at 92% 8%, rgb(191 155 72 / .10), transparent 70%) no-repeat,
    radial-gradient(circle 520px at 6% 30%, rgb(20 37 74 / .06), transparent 70%) no-repeat,
    rgb(var(--ar-900));
  color: var(--ink);
  background: var(--page-bg);
}
@media (prefers-color-scheme: dark) {
  :is(body[data-page="accueil"], body[data-page="formats"]) {
    /* --- mode nuit --- */
    color-scheme: dark;
    --acc-200: 240 222 170; --acc-300: 233 205 133; --acc-400: 214 178 94; --acc-500: 201 162 77; --acc-600: 170 134 58;  /* or */
    --ar-950: 10 19 38; --ar-900: 13 24 48; --ar-800: 21 36 70; --ar-700: 28 46 86; --ar-600: 35 55 99; --ar-border: 46 66 110;
    --ink: #f3f5f9; --muted: #aab3c5;
    --t-strong: #ffffff; --t-body: #d6dbe5; --t-soft: #aab3c5; --t-hover: #e9cd85; --check: #d6b25e;
    --btn-bg: #c9a24d; --btn-fg: #0d1830; --btn-hover: #ddb862;
    --card-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 28px -12px rgb(0 0 0 / .6);
    --page-bg:
      radial-gradient(ellipse 60% 420px at 50% 0, rgb(201 162 77 / .12), transparent 70%) no-repeat,
      radial-gradient(circle 520px at 92% 8%, rgb(201 162 77 / .07), transparent 70%) no-repeat,
      radial-gradient(circle 520px at 6% 30%, rgb(70 100 170 / .12), transparent 70%) no-repeat,
      rgb(var(--ar-900));
  }
}
:is(body[data-page="accueil"], body[data-page="formats"]) :is(.text-white, .text-slate-100, .text-slate-200) { color: var(--t-strong) !important; }
:is(body[data-page="accueil"], body[data-page="formats"]) :is(.text-slate-300) { color: var(--t-body) !important; }
:is(body[data-page="accueil"], body[data-page="formats"]) :is(.text-slate-400, .text-slate-500) { color: var(--t-soft) !important; }
:is(body[data-page="accueil"], body[data-page="formats"]) .hover\:text-white:hover { color: var(--t-hover) !important; }
body[data-page="accueil"] .text-emerald-400 { color: var(--check) !important; }          /* coches des fonctionnalités */
:is(body[data-page="accueil"], body[data-page="formats"]) .label { color: var(--t-body); }
/* boutons principaux : marine (jour) / or (nuit) */
:is(body[data-page="accueil"], body[data-page="formats"]) main .bg-amber-500,
:is(body[data-page="accueil"], body[data-page="formats"]) #auth-modal .bg-amber-500 { background: var(--btn-bg) !important; color: var(--btn-fg) !important; }
:is(body[data-page="accueil"], body[data-page="formats"]) main .bg-amber-500:hover,
:is(body[data-page="accueil"], body[data-page="formats"]) #auth-modal .bg-amber-500:hover { background: var(--btn-hover) !important; }
/* cartes avec une ombre douce plutôt que des bordures marquées */
:is(body[data-page="accueil"], body[data-page="formats"]) main .bg-arcanum-800 { box-shadow: var(--card-shadow); }
:is(body[data-page="accueil"], body[data-page="formats"]) ::selection { background: rgb(var(--acc-500) / .35); color: var(--t-strong); }

/* bandeau du haut en or — toutes les pages (couleurs --bar-… définies dans :root, plus foncées en mode nuit) */
body .site-bar { background: var(--bar-bg) !important; box-shadow: 0 2px 12px -4px rgb(0 0 0 / .25); }
body .site-bar::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent); }
body .site-bar .nav-link { color: var(--bar-muted); }
body .site-bar .nav-link:hover,
body .site-bar .nav-link[aria-current="page"] { color: var(--bar-fg); }
body .site-bar .nav-link[aria-current="page"] { font-weight: 600; }
body .site-bar .nav-link[aria-current="page"]::after { background: var(--bar-fg); }
body .site-bar .nav-link img { opacity: .85; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25)); }
body .site-bar :is(.text-amber-300, .text-slate-200, .text-slate-400, .text-slate-500) { color: var(--bar-fg) !important; }
body .site-bar .hover\:text-white:hover { color: var(--bar-fg) !important; text-decoration: underline; text-underline-offset: 3px; }
body .site-bar .border-amber-500\/50 { border-color: var(--bar-line) !important; }
body .site-bar .hover\:bg-amber-500\/10:hover { background: var(--bar-hover) !important; }
body .site-bar .border-arcanum-border\/60 { border-color: var(--bar-line) !important; }
/* sélecteur de langue FR | EN (bandeau) */
.lang-switch { display: inline-flex; border: 1px solid var(--bar-line); border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.lang-switch button { padding: 3px 7px; color: var(--bar-muted); transition: background .15s, color .15s; }
.lang-switch button:hover { background: var(--bar-hover); color: var(--bar-fg); }
.lang-switch button[aria-pressed="true"] { background: var(--bar-fg); color: var(--bar-active-fg, #f3dfa6); }

/* Formats : page du BLANC (comme sa couleur dans le menu) — toujours claire.
   Jour : blanc cassé. Nuit : blanc « éteint » (gris pierre chaud), plus doux pour les yeux, jamais bleu. */
body[data-page="formats"] {
  --ar-950: 255 254 250; --ar-900: 245 241 232; --ar-800: 255 253 248; --ar-700: 250 247 240; --ar-600: 236 231 220; --ar-border: 222 214 198;
  --page-bg:
    radial-gradient(ellipse 60% 420px at 50% 0, rgb(255 255 255 / .9), transparent 70%) no-repeat,
    radial-gradient(circle 520px at 90% 12%, rgb(191 155 72 / .09), transparent 70%) no-repeat,
    rgb(var(--ar-900));
}
@media (prefers-color-scheme: dark) {
  body[data-page="formats"] {
    color-scheme: light;
    /* on annule le mode nuit marine de l'accueil : texte marine, accents laiton, boutons marine */
    --acc-200: 233 216 168; --acc-300: 120 90 26; --acc-400: 134 102 32; --acc-500: 176 140 60; --acc-600: 140 108 40;
    --ink: #14254a; --muted: #4f5869;
    --t-strong: #14254a; --t-body: #2e3a52; --t-soft: #4f5869; --t-hover: #1e3566;
    --btn-bg: #14254a; --btn-fg: #ffffff; --btn-hover: #1e3566;
    --card-shadow: 0 1px 2px rgb(40 34 20 / .10), 0 10px 26px -12px rgb(40 34 20 / .30);
    /* blanc plus foncé */
    --ar-950: 226 222 213; --ar-900: 200 195 184; --ar-800: 220 215 205; --ar-700: 210 205 194; --ar-600: 192 186 174; --ar-border: 176 169 155;
    --page-bg:
      radial-gradient(ellipse 60% 420px at 50% 0, rgb(232 228 219 / .8), transparent 70%) no-repeat,
      radial-gradient(circle 520px at 90% 12%, rgb(176 140 60 / .10), transparent 70%) no-repeat,
      rgb(var(--ar-900));
  }
}
/* couleurs des cartes de format, assombries pour rester lisibles sur le blanc (jour et nuit) */
body[data-page="formats"] :is(.text-sky-300, .text-sky-400) { color: #0369a1 !important; }
body[data-page="formats"] :is(.text-emerald-300, .text-emerald-400) { color: #047857 !important; }
body[data-page="formats"] :is(.text-purple-300, .text-purple-400) { color: #7e22ce !important; }
body[data-page="formats"] :is(.text-rose-300, .text-rose-400) { color: #be123c !important; }
body[data-page="formats"] :is(.text-fuchsia-300, .text-fuchsia-400) { color: #a21caf !important; }
body[data-page="formats"] main .bg-arcanum-900 { background: rgb(var(--ar-700)) !important; }

/* Accueil = Incolore → palette « Eldrazi » :
   #CABFB4 #BCBCB2 #B6AEB4 #4A466B #7B6660 #928C92 #626479 #5E4642 #65515E #3F2D3D */
body[data-page="accueil"] {
  /* --- jour : pierre taupe, texte aubergine, accents indigo --- */
  --acc-200: 182 174 180; --acc-300: 63 45 61; --acc-400: 74 70 107; --acc-500: 98 100 121; --acc-600: 74 70 107;
  --ar-950: 236 231 226; --ar-900: 214 205 196; --ar-800: 238 233 228; --ar-700: 226 219 212; --ar-600: 188 188 178; --ar-border: 182 174 180;
  --ink: #3f2d3d; --muted: #65515e;
  --t-strong: #3f2d3d; --t-body: #5e4642; --t-soft: #65515e; --t-hover: #4a466b; --check: #4a466b;
  --btn-bg: #4a466b; --btn-fg: #ffffff; --btn-hover: #626479;
  --card-shadow: 0 1px 2px rgb(63 45 61 / .08), 0 10px 26px -12px rgb(63 45 61 / .30);
  --gold-rule: linear-gradient(90deg, #4a466b, #7b6660, #65515e);
  --page-bg:
    radial-gradient(ellipse 60% 420px at 50% 0, rgb(236 230 224 / .9), transparent 70%) no-repeat,
    radial-gradient(circle 560px at 4% 28%, rgb(182 174 180 / .70), transparent 70%) no-repeat,
    radial-gradient(circle 560px at 96% 18%, rgb(188 188 178 / .75), transparent 70%) no-repeat,
    radial-gradient(circle 700px at 50% 100%, rgb(146 140 146 / .35), transparent 70%) no-repeat,
    linear-gradient(180deg, rgb(214 205 196), rgb(202 191 180));
}
@media (prefers-color-scheme: dark) {
  body[data-page="accueil"] {
    /* --- nuit : aubergine profond, texte taupe clair, halos indigo et brun --- */
    --acc-200: 202 191 180; --acc-300: 202 191 180; --acc-400: 188 188 178; --acc-500: 146 140 146; --acc-600: 123 102 96;
    --ar-950: 34 24 33; --ar-900: 44 32 43; --ar-800: 63 45 61; --ar-700: 80 62 76; --ar-600: 101 81 94; --ar-border: 101 81 94;
    --ink: #efe9e3; --muted: #b6aeb4;
    --t-strong: #f4efea; --t-body: #cabfb4; --t-soft: #b6aeb4; --t-hover: #bcbcb2; --check: #bcbcb2;
    --btn-bg: #cabfb4; --btn-fg: #3f2d3d; --btn-hover: #bcbcb2;
    --card-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -12px rgb(0 0 0 / .6);
    --gold-rule: linear-gradient(90deg, #b6aeb4, #cabfb4, #bcbcb2);
    --page-bg:
      radial-gradient(ellipse 65% 460px at 50% 0, rgb(74 70 107 / .55), transparent 72%) no-repeat,
      radial-gradient(circle 560px at 0% 40%, rgb(94 70 66 / .45), transparent 70%) no-repeat,
      radial-gradient(circle 560px at 100% 70%, rgb(98 100 121 / .35), transparent 70%) no-repeat,
      rgb(var(--ar-900));
  }
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-text { animation: hero-rise .8s ease-out .1s both; }
.title-prism { color: var(--t-strong) !important; }
.title-prism::after { content: ""; display: block; width: 96px; height: 3px; margin: .9rem auto 0; border-radius: 2px;
  background: var(--gold-rule, linear-gradient(90deg, #8a6a24, #d9b866, #8a6a24)); }
.mana-float { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.75rem; }
.mana-float img { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .25)); animation: mana-bob 3.4s ease-in-out infinite; }
.mana-float img:nth-child(2) { animation-delay: -.7s; } .mana-float img:nth-child(3) { animation-delay: -1.4s; }
.mana-float img:nth-child(4) { animation-delay: -2.1s; } .mana-float img:nth-child(5) { animation-delay: -2.8s; }
@keyframes mana-bob { 50% { transform: translateY(-9px); } }

/* ---------- Tirage : D20 3D en résine marbrée pailletée + révélation ----------
   Les 20 faces sont placées par roulette.js (matrix3d) ; couleurs via --d1 (sombre), --d2 (vive), --d3 (reflet). */
.die-scene { width: 76px; height: 76px; margin: 2px auto 18px; perspective: 600px; position: relative; }
.die-scene::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 11px; border-radius: 50%;
  background: radial-gradient(rgb(0 0 0 / .6), transparent 70%); }
.die-toss { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.d20 { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.d20-face {
  position: absolute; left: 0; top: 0; width: 36px; height: 31.18px; transform-origin: 0 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 30% 70%, rgb(255 255 255 / .55) 0 .45px, transparent .9px) 0 0 / 7px 9px,    /* paillettes */
    radial-gradient(circle at 70% 20%, rgb(255 236 179 / .45) 0 .4px, transparent .8px) 3px 4px / 11px 7px,
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .35) 0 .35px, transparent .7px) 5px 1px / 13px 12px,
    radial-gradient(ellipse at var(--gx) var(--gy), var(--d3) 0 6%, transparent 38%),                    /* veine nacrée */
    linear-gradient(var(--ga), var(--d1) 0%, var(--d2) 48%, var(--d1) 100%);                              /* marbrure */
}
.d20-face span {
  position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%);
  font: 800 11px/1 'Inter', sans-serif; letter-spacing: -.02em;
  color: #f7c948; text-shadow: 0 1px 0 rgb(80 50 0 / .8), 0 0 4px rgb(0 0 0 / .45);
}
.die-waiting .die-toss { opacity: 0; }
.die-waiting .coin-toss { opacity: 0; }

/* ---------- D6 de JDR (même résine que le D20, points dorés) ---------- */
.d6-scene { width: 64px; height: 64px; }
.d6 { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.d6-face { --h: 32px; position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 9px; border-radius: 9px;
  background:
    radial-gradient(circle at 30% 70%, rgb(255 255 255 / .5) 0 .45px, transparent .9px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 20%, rgb(255 236 179 / .4) 0 .4px, transparent .8px) 3px 4px / 11px 7px,
    radial-gradient(ellipse at var(--gx) var(--gy), var(--d3) 0 6%, transparent 40%),
    linear-gradient(var(--ga), var(--d1) 0%, var(--d2) 50%, var(--d1) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset -4px -5px 10px rgb(0 0 0 / .35); }
.d6-pip { width: 9px; height: 9px; border-radius: 50%; place-self: center;
  background: radial-gradient(circle at 35% 35%, #fff1b8, #f7c948 45%, #8a5a00); box-shadow: 0 0 0 1px rgb(80 50 0 / .6); }
.d6-face.f1 .d6-pip { width: 15px; height: 15px; }
.d6-face.f1 { transform: translateZ(var(--h)); }
.d6-face.f2 { transform: rotateY(90deg) translateZ(var(--h)); }
.d6-face.f3 { transform: rotateX(90deg) translateZ(var(--h)); }
.d6-face.f4 { transform: rotateX(-90deg) translateZ(var(--h)); }
.d6-face.f5 { transform: rotateY(-90deg) translateZ(var(--h)); }
.d6-face.f6 { transform: rotateY(180deg) translateZ(var(--h)); }

/* ---------- Pièce de Trésor (pile ou face) ---------- */
.coin-scene { width: 96px; height: 96px; margin: 2px auto 18px; perspective: 700px; position: relative; }
.coin-scene::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -14px; height: 11px; border-radius: 50%; background: radial-gradient(rgb(0 0 0 / .6), transparent 70%); }
.coin-toss, .coin { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; overflow: hidden;
  border: 5px solid #d9a93a; box-shadow: inset 0 0 0 2px #fff1b8, inset 0 0 14px rgb(0 0 0 / .55), 0 0 0 1px #6b4a0e; }
.coin-heads { background-size: cover; background-position: center; transform: translateZ(3px); }
.coin-tails { transform: rotateX(180deg) translateZ(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f0c34f 35%, #b07c18 75%, #7a520b); color: #6b4510; font-size: 26px;
  text-shadow: 0 1px 0 rgb(255 240 190 / .7); }
.coin-label { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 800 9px/1 'Inter', sans-serif; letter-spacing: .14em;
  color: #fff6d8; text-shadow: 0 1px 2px #000; }
.coin-tails .coin-label { position: static; color: #6b4510; text-shadow: 0 1px 0 rgb(255 240 190 / .8); }
.coin-edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(#a8771a, #6b4a0e); transform: translateZ(0); }

/* ---------- Partie : animations des compteurs ---------- */
.life-wrap { position: relative; }
.bump-up { animation: bump-up .45s cubic-bezier(.2,.9,.3,1.4); }
.bump-down { animation: bump-down .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bump-up { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: #6ee7b7; text-shadow: 0 0 22px rgb(16 185 129 / .7); } 100% { transform: none; } }
@keyframes bump-down { 0% { transform: scale(1); } 35% { transform: scale(.86) translateX(-3px); color: #fda4af; text-shadow: 0 0 22px rgb(244 63 94 / .7); } 60% { transform: translateX(3px); } 100% { transform: none; } }
.flash-gain { animation: flash-gain .6s ease-out; }
.flash-loss { animation: flash-loss .6s ease-out; }
@keyframes flash-gain { 30% { box-shadow: 0 0 0 2px rgb(16 185 129 / .7), 0 0 36px rgb(16 185 129 / .35); } }
@keyframes flash-loss { 30% { box-shadow: 0 0 0 2px rgb(244 63 94 / .75), 0 0 36px rgb(244 63 94 / .4); } }
.shake { animation: shake .45s ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.delta-float { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font: 900 26px/1 'Cinzel', serif; pointer-events: none;
  animation: delta-float 1s ease-out forwards; }
.delta-float.up { color: #34d399; text-shadow: 0 0 12px rgb(16 185 129 / .6); }
.delta-float.down { color: #fb7185; text-shadow: 0 0 12px rgb(244 63 94 / .6); }
@keyframes delta-float { from { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -54px) scale(.9); } }
.delta-sum { position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: 999px; font: 800 13px/1.4 'Inter', sans-serif;
  transition: opacity .3s; }
.delta-sum.up { background: rgb(16 185 129 / .18); color: #6ee7b7; } .delta-sum.down { background: rgb(244 63 94 / .18); color: #fda4af; }
.pulse-poison { animation: pulse-poison .5s ease-out; }
@keyframes pulse-poison { 40% { transform: scale(1.5); color: #d8b4fe; text-shadow: 0 0 10px #a855f7; } }
.pulse-tax { animation: pulse-tax .5s ease-out; }
@keyframes pulse-tax { 40% { transform: scale(1.5); color: #fde68a; text-shadow: 0 0 10px #f59e0b; } }
.icon-wobble { display: inline-block; animation: icon-wobble .5s ease-in-out; }
@keyframes icon-wobble { 25% { transform: rotate(-18deg) scale(1.2); } 75% { transform: rotate(18deg) scale(1.2); } }
.icon-spin { display: inline-block; animation: icon-spin .6s ease-in-out; }
@keyframes icon-spin { to { transform: rotateY(360deg) scale(1.1); } }
.player-card { transition: filter .4s, opacity .4s; }
.player-card.is-defeated { filter: grayscale(.85) brightness(.75); }
.defeated-badge { position: absolute; inset: auto 0 45% 0; text-align: center; pointer-events: none; z-index: 2;
  font: 900 22px/1 'Cinzel', serif; color: #fecdd3; text-shadow: 0 2px 12px #000; letter-spacing: .1em; animation: hero-rise .5s ease-out both; }
.dice-result-pop { animation: reveal-pop .6s cubic-bezier(.2,.9,.3,1.3) both; }
@media (prefers-reduced-motion: reduce) {
  .bump-up, .bump-down, .flash-gain, .flash-loss, .shake, .delta-float, .pulse-poison, .pulse-tax, .icon-wobble, .icon-spin, .dice-result-pop { animation: none; }
}

.slot { position: relative; overflow: hidden; background: repeating-linear-gradient(45deg, rgb(var(--ar-950)), rgb(var(--ar-950)) 10px, rgb(var(--ar-800)) 10px, rgb(var(--ar-800)) 20px); }
.slot img { visibility: hidden; }
.seat.spinning .slot { box-shadow: 0 0 22px rgb(var(--acc-500) / .5); }
.seat.spinning .slot img { filter: blur(.6px) saturate(1.2); }
.reveal-pop { animation: reveal-pop .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes reveal-pop {
  0%   { transform: scale(.93); }
  40%  { transform: scale(1.05); box-shadow: 0 0 0 5px rgb(var(--acc-400) / .6), 0 0 44px rgb(var(--acc-500) / .55); }
  100% { transform: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .05), 0 12px 28px -14px rgb(0 0 0 / .7); }
}
.seat-first { outline: 2px solid rgb(var(--acc-300)); outline-offset: 3px; }
.banner-in { animation: hero-rise .5s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .hero-text, .mana-float img, .reveal-pop, .banner-in { animation: none; }
}

/* ---------- Menu du profil (en-tête) : toujours sombre, quelle que soit la page ---------- */
.user-menu-btn { border: 1px solid transparent; transition: background .15s, border-color .15s; }
.user-menu-btn:hover, .user-menu-btn[aria-expanded="true"] { background: var(--bar-hover); border-color: var(--bar-line); }
.user-menu { background: #161a24; border: 1px solid #2c3242; border-radius: 10px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6); }
.user-menu-item { white-space: nowrap; display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem 1rem; font-size: .875rem; color: #e2e6ee; text-align: left; text-decoration: none; transition: background .12s, color .12s; }
.user-menu-item:hover, .user-menu-item:focus-visible { background: #232938; color: #fff; outline: none; }
.user-menu-item i { width: 1rem; text-align: center; color: #d4a94a; }
.user-menu-danger, .user-menu-danger i { color: #fda4af; }
.user-menu-sep { border-top: 1px solid #2c3242; margin: .375rem 0; }

/* ---------- Page profil ---------- */
.color-bar { height: .5rem; border-radius: 999px; background: rgb(var(--ar-950)); overflow: hidden; }
.color-bar > span { display: block; height: 100%; border-radius: inherit; }