/* Masquerade — thèmes : palettes, bandeau illustré, animations, ambiance.
   Chargé après style.css : mêmes variables, redéfinies par thème (data-th). */

/* ---------- Palettes (toutes sombres) ---------- */
:root[data-th="senat"]{
  --bg:#080b12; --bg2:#0d1220; --surface:#121929; --surface2:#19223a; --line:#27324d;
  --fg:#e7ebf4; --muted:#93a0bb; --star:rgba(255,255,255,.55);
  --gold:#f0c24b; --gold-fill:#f0c24b; --gold-ink:#1b1405;
  --rebel:#62b6ff; --rebel-bg:#0e2640; --sith:#ff6166; --sith-bg:#3a1118; --ok:#4ade80;
  --sc1:#0a1030; --sc2:#04060f; --display:'Oxanium','Segoe UI',system-ui,sans-serif; color-scheme:dark;
}
:root[data-th="magie"]{
  --bg:#0d0814; --bg2:#150d20; --surface:#1a1128; --surface2:#241838; --line:#3b2a58;
  --fg:#f0e9fa; --muted:#a898c4; --star:rgba(255,214,120,.5);
  --gold:#e9c46a; --gold-fill:#e9c46a; --gold-ink:#1e1505;
  --rebel:#ff9d3c; --rebel-bg:#3a2108; --sith:#5ee08a; --sith-bg:#0e3320; --ok:#5ee08a;
  --sc1:#2a1450; --sc2:#0a0612; --display:'Cinzel','Trajan Pro',Georgia,serif; color-scheme:dark;
}
:root[data-th="anneau"]{
  --bg:#0a100b; --bg2:#101a12; --surface:#151f16; --surface2:#1d2a1f; --line:#304432;
  --fg:#ecf0e2; --muted:#9db09a; --star:rgba(255,255,220,.4);
  --gold:#e3b84a; --gold-fill:#e3b84a; --gold-ink:#1b1405;
  --rebel:#8fd16a; --rebel-bg:#16300f; --sith:#ff6a3d; --sith-bg:#3a1408; --ok:#8fd16a;
  --sc1:#14301c; --sc2:#060a07; --display:'IM Fell English SC','Palatino Linotype',Georgia,serif; color-scheme:dark;
}
:root[data-th="toile"]{
  --bg:#0a0b12; --bg2:#10121c; --surface:#151824; --surface2:#1d2132; --line:#2c3350;
  --fg:#eef0f8; --muted:#97a0bd; --star:rgba(255,255,255,.35);
  --gold:#ff3b4d; --gold-fill:#ff3b4d; --gold-ink:#ffffff;
  --rebel:#5aa9ff; --rebel-bg:#0d2442; --sith:#8be04a; --sith-bg:#18300a; --ok:#8be04a;
  --sc1:#1a1030; --sc2:#06060e; --display:'Bangers','Impact','Arial Narrow',sans-serif; color-scheme:dark;
}
:root[data-th="trones"]{
  --bg:#0d0a08; --bg2:#16110d; --surface:#1d1712; --surface2:#2a2119; --line:#473a2c;
  --fg:#f1e9dc; --muted:#b0a28d; --star:rgba(255,160,70,.4);
  --gold:#d9a441; --gold-fill:#d9a441; --gold-ink:#1b1204;
  --rebel:#6fa8dc; --rebel-bg:#122234; --sith:#e04b3a; --sith-bg:#3a110c; --ok:#8cc76a;
  --sc1:#3a1a0c; --sc2:#0a0705; --display:'MedievalSharp','Palatino Linotype',Georgia,serif; color-scheme:dark;
}
/* Les thèmes sont sombres : on neutralise le mode clair du système */
@media (prefers-color-scheme: light){
  :root[data-th]:not([data-theme="dark"]){ color-scheme:dark; }
}
body{ transition:background-color .6s ease; }
h1,h2,h3,.rolename{ font-family:var(--display); }
:root[data-th="toile"] h1{ letter-spacing:.06em; font-weight:400; }
:root[data-th="toile"] h2,:root[data-th="toile"] h3{ letter-spacing:.05em; font-weight:400; }
:root[data-th="magie"] h1,:root[data-th="anneau"] h1,:root[data-th="trones"] h1{ font-weight:600; letter-spacing:.04em; }

/* ---------- Bandeau illustré ---------- */
.scene{
  position:relative; height:112px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg2);
  box-shadow:0 8px 28px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03);
}
.scene svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 55%, var(--bg) 130%); pointer-events:none; }
@media (min-width:560px){ .scene{ height:140px; } }

/* ---------- Animations des scènes ---------- */
@keyframes tw{ 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes flick{ 0%,100%{transform:scale(1,1)} 25%{transform:scale(.88,1.12)} 50%{transform:scale(1.06,.9)} 75%{transform:scale(.94,1.08)} }
@keyframes spin{ to{transform:rotate(360deg)} }
@keyframes driftY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes comet{ 0%{transform:translate(0,0);opacity:0} 8%{opacity:.9} 40%{transform:translate(720px,150px);opacity:0} 100%{transform:translate(720px,150px);opacity:0} }
@keyframes fly{ from{transform:translateX(0)} to{transform:translateX(760px)} }
@keyframes flap{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fallLeaf{ 0%{transform:translate(0,-10px) rotate(0)} 100%{transform:translate(40px,150px) rotate(220deg)} }
@keyframes swingA{ 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(14deg)} }
@keyframes ripple{ 0%{transform:scale(.3);opacity:.9} 100%{transform:scale(2.2);opacity:0} }
@keyframes wand{ 0%,100%{opacity:.2} 50%{opacity:1} }
@keyframes candle{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.scene .tw{ animation:tw 3.2s ease-in-out infinite; }
.scene .d2{ animation-delay:-1.1s; } .scene .d3{ animation-delay:-2.2s; }
.scene .glow{ animation:pulse 3.6s ease-in-out infinite; }
.scene .fk{ animation:flick 1.3s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
.scene .ring{ animation:spin 40s linear infinite; }
.scene .orbit{ animation:spin 14s linear infinite; }
.scene .drift{ animation:driftY 8s ease-in-out infinite; }
.scene .comet{ animation:comet 9s ease-in infinite; }
.scene .bird{ animation:fly 22s linear infinite; }
.scene .bird.d2{ animation-duration:30s; animation-delay:-12s; }
.scene .leaf{ animation:fallLeaf 8s linear infinite; transform-box:fill-box; transform-origin:50% 50%; }
.scene .leaf.d2{ animation-delay:-3s; } .scene .leaf.d3{ animation-delay:-5.5s; }
.scene .swing{ animation:swingA 3.4s ease-in-out infinite; }
.scene .ripple{ animation:ripple 3s ease-out infinite; }
.scene .wand{ animation:wand 2.4s ease-in-out infinite; }
.scene .candle{ animation:candle 4s ease-in-out infinite; }
.scene .candle.d2{ animation-delay:-1.4s; } .scene .candle.d3{ animation-delay:-2.7s; }

/* ---------- Particules d'ambiance ---------- */
#amb{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
#amb i{
  position:absolute; left:var(--x); top:-12px; width:var(--s); height:var(--s); opacity:0;
  background:var(--pc,#fff); border-radius:50%;
  animation:var(--an,ambfall) var(--t) linear var(--dl) infinite;
}
@keyframes ambfall{ 0%{transform:translate(0,-10px);opacity:0} 10%{opacity:var(--o,.6)} 100%{transform:translate(var(--dx,0px),105vh);opacity:0} }
@keyframes ambrise{ 0%{transform:translate(0,0);opacity:0} 15%{opacity:var(--o,.7)} 100%{transform:translate(var(--dx,0px),-105vh);opacity:0} }
@keyframes ambtw{ 0%,100%{opacity:0;transform:scale(.4)} 50%{opacity:var(--o,.9);transform:scale(1)} }
#amb[data-k="stars"] i{ top:var(--y); --an:ambtw; animation-timing-function:ease-in-out; box-shadow:0 0 6px 1px rgba(255,255,255,.4); }
#amb[data-k="sparkles"] i{ top:var(--y); --an:ambtw; animation-timing-function:ease-in-out; --pc:#ffd878; border-radius:0; transform:rotate(45deg); box-shadow:0 0 8px 2px rgba(255,200,90,.45); }
#amb[data-k="leaves"] i{ --pc:#8fd16a; border-radius:0 100% 0 100%; height:calc(var(--s)*.6); --dx:70px; }
#amb[data-k="rain"] i{ --pc:rgba(150,170,255,.55); width:1.5px; height:calc(var(--s)*6); border-radius:1px; --dx:-30px; }
#amb[data-k="embers"] i{ --an:ambrise; --pc:#ffa24a; top:auto; bottom:-12px; --dx:30px; box-shadow:0 0 8px 2px rgba(255,140,40,.5); }
body::before{ opacity:.35; }

/* ---------- Galerie de thèmes (accueil) ---------- */
.themes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.theme-card{
  position:relative; padding:0; text-align:left; cursor:pointer; overflow:hidden;
  background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; font:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.theme-card:hover{ transform:translateY(-2px); }
.theme-card[aria-pressed="true"]{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 10px 24px -12px var(--gold); }
.theme-card .scene{ height:64px; border:0; border-radius:0; box-shadow:none; }
.theme-card .scene::after{ display:none; }
.theme-card .tc{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:2px; }
.theme-card .tc b{ font-family:var(--display); font-size:.98rem; line-height:1.15; }
.theme-card .tc span{ color:var(--muted); font-size:.8rem; line-height:1.3; }
.theme-card .scene svg *{ animation-play-state:paused; }
.theme-card:hover .scene svg *,.theme-card[aria-pressed="true"] .scene svg *{ animation-play-state:running; }
/* Chaque carte garde sa propre palette pour la miniature */
.theme-card[data-th="senat"]{ --sc1:#0a1030; --sc2:#04060f; --gold:#f0c24b; --rebel:#62b6ff; }
.theme-card[data-th="magie"]{ --sc1:#2a1450; --sc2:#0a0612; --gold:#e9c46a; --rebel:#ff9d3c; }
.theme-card[data-th="anneau"]{ --sc1:#14301c; --sc2:#060a07; --gold:#e3b84a; --rebel:#8fd16a; }
.theme-card[data-th="toile"]{ --sc1:#1a1030; --sc2:#06060e; --gold:#ff3b4d; --rebel:#ff3b4d; }
.theme-card[data-th="trones"]{ --sc1:#3a1a0c; --sc2:#0a0705; --gold:#d9a441; --rebel:#6fa8dc; }

/* ---------- Révélation du rôle ---------- */
@keyframes popin{ 0%{transform:scale(.6) rotate(-6deg);opacity:0} 60%{transform:scale(1.08) rotate(2deg);opacity:1} 100%{transform:scale(1) rotate(0)} }
@keyframes glowpulse{ 0%,100%{filter:drop-shadow(0 0 4px currentColor)} 50%{filter:drop-shadow(0 0 16px currentColor)} }
@keyframes risein{ from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }
.holdbox.on .reveal .glyph{ animation:popin .5s cubic-bezier(.2,.9,.3,1.2) both, glowpulse 2.4s ease-in-out .5s infinite; }
.holdbox.on .reveal .rolename{ animation:risein .35s ease .1s both; }
.holdbox.on .reveal p,.holdbox.on .reveal .known{ animation:risein .35s ease .25s both; }
.glyph{ width:84px; height:84px; display:block; margin:0 auto 6px; }

@media (prefers-reduced-motion: reduce){
  .scene svg *,#amb i,.holdbox .reveal *,.theme-card{ animation:none !important; transition:none !important; }
  #amb{ display:none; }
}