/* Styles graphiques au choix (bouton 🎨) : Grimoire, Arcane, Épuré. Le style Classique correspond aux autres fichiers CSS sans modification. */

/* ===================== Grimoire : parchemin et encre ===================== */
:root[data-style="grimoire"]{
  --mat:#e9dcc0; --mat2:#f6eedb; --ui:#fcf7ea; --line:rgba(90,58,24,.28);
  --ink:#3a2817; --muted:#7a6248; --card:#fffaf0; --cardink:#2a2118; --edge:#a8895a;
  --brass:#8a4f1c; --life:#9b2d20; --poison:#4d6a1e; --focus:#8a4f1c;
  --serif:"Cinzel","Alegreya",Georgia,serif; --sans:"EB Garamond","Alegreya",Georgia,serif;
}
[data-style="grimoire"] body{
  font-size:17px;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #f6ecd3 0%, transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(140,95,40,.10), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(140,95,40,.08), transparent 35%),
    #e4d4b2;
  background-attachment:fixed;
}
:where([data-style="grimoire"]) :is(.panel,.opp,.me,.handwrap,.stack,.log,.focus,.sheet){border:3px double #a8895a}
[data-style="grimoire"] .topbar{background:rgba(233,220,192,.96);border-bottom:3px double #a8895a}
[data-style="grimoire"] .btn{background:linear-gradient(#fffaf0,#efe2c6);border-color:#b39466}
[data-style="grimoire"] .btn.pri{background:linear-gradient(#a3652d,#7a4417);border-color:#5e3210;color:#fff8ea}
[data-style="grimoire"] .seat.on,[data-style="grimoire"] .lore{color:#fff8ea}
[data-style="grimoire"] h1,[data-style="grimoire"] h2,[data-style="grimoire"] h3{letter-spacing:.03em}
[data-style="grimoire"] .life{font-family:"Cinzel",Georgia,serif;font-weight:700}
[data-style="grimoire"] .cd,[data-style="grimoire"] .bcard{font-family:"EB Garamond",Georgia,serif}
[data-style="grimoire"] .pile.lib{background:repeating-linear-gradient(135deg,#efe2c6 0 7px,#e4d4b2 7px 14px)}
[data-style="grimoire"] #modal{background:rgba(60,40,15,.45)}

/* ===================== Arcane : néon et nuit ===================== */
:root[data-style="arcane"]{
  --mat:#090b17; --mat2:#10142a; --ui:#171c38; --line:rgba(120,200,255,.18);
  --ink:#e4f0ff; --muted:#8fa3c8; --edge:#3a4a7a;
  --brass:#3fd0ff; --life:#ff5c93; --poison:#7dff9a; --focus:#c77dff;
  --serif:"Orbitron","Alegreya Sans",system-ui,sans-serif; --sans:"Rajdhani","Alegreya Sans",system-ui,sans-serif;
}
[data-style="arcane"] body{
  font-size:17px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(63,208,255,.14), transparent 70%),
    radial-gradient(800px 500px at 110% 20%, rgba(199,125,255,.14), transparent 70%),
    var(--mat);
  background-attachment:fixed;
}
:where([data-style="arcane"]) :is(.panel,.opp,.me,.handwrap,.stack,.log,.focus,.sheet){border-color:rgba(63,208,255,.28);box-shadow:0 0 22px rgba(63,208,255,.07)}
[data-style="arcane"] .topbar{background:rgba(9,11,23,.92);border-bottom-color:rgba(63,208,255,.3)}
[data-style="arcane"] .btn{background:rgba(23,28,56,.9);border-color:rgba(63,208,255,.28)}
[data-style="arcane"] .btn:hover{border-color:var(--brass);box-shadow:0 0 10px rgba(63,208,255,.35)}
[data-style="arcane"] .btn.pri{background:var(--brass);border-color:transparent;color:#04121c;box-shadow:0 0 14px rgba(63,208,255,.55)}
[data-style="arcane"] .seat.on{color:#04121c;box-shadow:0 0 12px rgba(63,208,255,.6)}
[data-style="arcane"] .life{text-shadow:0 0 14px rgba(255,92,147,.65);letter-spacing:.02em}
[data-style="arcane"] h1,[data-style="arcane"] h2{text-shadow:0 0 12px rgba(63,208,255,.45);letter-spacing:.04em}
[data-style="arcane"] .cd,[data-style="arcane"] .bcard{font-family:"Rajdhani","Alegreya Sans",sans-serif}
[data-style="arcane"] .pile.lib{background:repeating-linear-gradient(135deg,#10142a 0 7px,#171c38 7px 14px)}
[data-style="arcane"] .stk.top .cd{box-shadow:0 0 0 3px var(--brass),0 0 18px rgba(63,208,255,.7)}

/* ===================== Épuré : moderne et sobre ===================== */
:root[data-style="epure"]{
  --mat:#f4f4f5; --mat2:#ffffff; --ui:#ffffff; --line:#e4e4e7;
  --ink:#18181b; --muted:#71717a; --edge:#d4d4d8;
  --brass:#18181b; --life:#dc2626; --poison:#16a34a; --focus:#2563eb;
  --serif:"Inter",system-ui,-apple-system,sans-serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root[data-style="epure"]:not([data-theme="light"]){
    --mat:#09090b; --mat2:#18181b; --ui:#27272a; --line:#2e2e33;
    --ink:#fafafa; --muted:#a1a1aa; --edge:#3f3f46;
    --brass:#fafafa; --life:#f87171; --poison:#4ade80; --focus:#60a5fa;
  }
}
:root[data-style="epure"][data-theme="dark"]{
  --mat:#09090b; --mat2:#18181b; --ui:#27272a; --line:#2e2e33;
  --ink:#fafafa; --muted:#a1a1aa; --edge:#3f3f46;
  --brass:#fafafa; --life:#f87171; --poison:#4ade80; --focus:#60a5fa;
}
[data-style="epure"] body{font-size:15px}
:where([data-style="epure"]) :is(.panel,.opp,.me,.handwrap,.stack,.log,.focus){border-radius:10px}
[data-style="epure"] h1,[data-style="epure"] h2,[data-style="epure"] h3,[data-style="epure"] .life{font-weight:700;letter-spacing:-.02em}
:root[data-style="epure"]:not([data-x]) .btn.pri,:root[data-style="epure"]:not([data-x]) .seat.on{color:var(--mat2)}
[data-style="epure"] .btn{border-radius:6px}
[data-style="epure"] .cd,[data-style="epure"] .bcard{font-family:"Inter",system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;overflow-wrap:break-word;hyphens:auto}
[data-style="epure"] .cd{font-size:calc(11px * var(--k,1))}
:root[data-style="epure"]:not([data-x]) .lore{color:var(--mat2)}
[data-style="epure"] .pile.lib{background:repeating-linear-gradient(135deg,var(--mat) 0 6px,var(--mat2) 6px 12px)}

/* ===================== Sélecteur de style (fenêtre Affichage) ===================== */
.stitle{font-family:var(--serif);margin:1.1rem 0 .4rem;font-size:1.05rem}
.stitle:first-of-type{margin-top:.4rem}
.styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.stylecard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center;text-align:left;background:var(--ui);border:1px solid var(--line);border-radius:10px;padding:.5rem}
.stylecard[aria-pressed="true"]{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.stylecard .sprev{grid-row:1 / 3;width:52px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid var(--line);font-size:1.1rem;font-weight:700}
.stylecard .sprev i{position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-radius:50%}
.stylecard small{color:var(--muted);font-size:.8rem;line-height:1.25}
.mats[hidden]{display:none}