/* ============================================================
   CrazyViki — styles du jeu (option « Style du jeu » : Profil > Options, ou lien « 🎨 Style » en bas de page)
     (aucun attribut) = Classique, le style d'origine
     A = Aventure dorée   (ciel bleu, or et orange : l'esprit de la boîte du jeu)
     B = Carnet d'explorateur (parchemin, cuir, coutures)
     C = Nuit étoilée     (bleu nuit, étoiles, filets d'or)
   Le style est posé sur <html data-style="A|B|C">. Les cartes elles-mêmes ne changent JAMAIS (rendu validé).
   Les variables sont redéclarées avec « html[...]:root » pour l'emporter sur le thème sombre automatique du navigateur.
   ============================================================ */
#app{position:relative;z-index:1}

/* ---------- sélecteur de style (options + fenêtre) ---------- */
.styles-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;width:100%}
.style-tuile{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;border:3px solid var(--line);border-radius:16px;padding:12px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}
.style-tuile b{font-family:var(--display);font-size:1.05rem}
.style-tuile span.desc{font-size:.85rem;color:var(--muted)}
.style-tuile .pal{display:flex;gap:4px}
.style-tuile .pal i{width:26px;height:26px;border-radius:8px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.style-tuile[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.style-tuile:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}

/* ============================================================
   A — AVENTURE DORÉE (jour)
   ============================================================ */
html[data-style="A"]:root{
  --bg:#e6f2ff; --bg2:#fff8e0; --fg:#1b2a5c; --muted:#5a6a99; --line:#e8d08c;
  --accent:#ff7a1a; --accent-fg:#fff; --accent2:#2b6fd6; --card:#fffdf7; --ink:#1b2a5c;
  --shadow:0 8px 0 rgba(150,100,0,.22); --radius:20px; color-scheme:light;
}
html[data-style="A"] body{background:#7cc4ff}
html[data-style="A"] #scene{background:linear-gradient(180deg,#2f8dff 0,#7cc4ff 280px,#cfeaff 620px,#ffe7ad 100%)}
html.scene-pc[data-style="A"] #scene::before{display:none}
html[data-style="A"] #scene::before{content:"";position:absolute;left:0;right:0;top:0;height:560px;pointer-events:none;z-index:0;background:url(themes/a-ciel.webp) center top/100% auto no-repeat;opacity:.9}
html.scene-pc[data-style="A"] #scene{
  background:url(themes/a-heros.webp) right bottom/auto 780px no-repeat,url(themes/a-faune.webp) left bottom/auto 720px no-repeat,
             linear-gradient(180deg,#2f8dff 0,#7cc4ff 280px,#cfeaff 620px,#ffe7ad 100%)}
html[data-style="A"] .barre{background:linear-gradient(#fff9e6,#ffeeb8);border-bottom:3px solid #b8860b;box-shadow:0 4px 0 rgba(184,134,11,.35)}
html[data-style="A"] .logo{color:#1b2a5c}
html[data-style="A"] .joueur .pts{color:#6a5a2a}
html[data-style="A"] .icone{background:#fff;border:2px solid #b8860b}
html[data-style="A"] .hero h1{color:#13214f;text-shadow:0 2px 0 rgba(255,255,255,.6)}
html[data-style="A"] .hero p{color:#1b2a5c}
html[data-style="A"] .panneau,html[data-style="A"] .profil,html[data-style="A"] .ligne,html[data-style="A"] .badge,html[data-style="A"] .dos-item,html[data-style="A"] .fiche-infos,html[data-style="A"] .resume-booster{
  background:linear-gradient(#fffdf2,#fff3cf);border:3px solid #d9ae3e;box-shadow:inset 0 0 0 3px #fff6d0,0 5px 0 rgba(150,100,0,.25)}
html[data-style="A"] .ligne,html[data-style="A"] .badge,html[data-style="A"] .dos-item{border-width:2px;box-shadow:inset 0 0 0 2px #fff6d0,0 3px 0 rgba(150,100,0,.2)}
html[data-style="A"] .ligne.moi{border-color:#ff7a1a}
html[data-style="A"] .badge.ok{background:color-mix(in srgb,var(--c) 14%,#fffdf2)}
html[data-style="A"] .nav-jeu,html[data-style="A"] .onglets{background:rgba(255,255,255,.65);border:2px solid #fff;box-shadow:0 3px 0 rgba(184,134,11,.25)}
html[data-style="A"] .nav-jeu button[aria-selected="true"],html[data-style="A"] .onglets button[aria-selected="true"]{background:linear-gradient(#ffa04a,#ff6f0f);color:#fff;box-shadow:0 2px 0 #b84a00}
html[data-style="A"] .nav-jeu button{color:#3b4a7d}
html[data-style="A"] .btn{background:#fff8e0;border:2px solid #d9ae3e;color:#1b2a5c;box-shadow:0 3px 0 rgba(150,100,0,.3)}
html[data-style="A"] .btn.primaire{background:linear-gradient(#ffa04a,#ff6a00);border:3px solid #ffd67a;color:#fff;box-shadow:0 5px 0 #a84300,0 8px 14px rgba(0,0,0,.2);text-shadow:0 1px 0 rgba(0,0,0,.25)}
html[data-style="A"] .btn.secondaire{background:linear-gradient(#4f93f0,#2257b8);border:3px solid #ffd67a;color:#fff;box-shadow:0 5px 0 #173a80}
html[data-style="A"] .btn.discret{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
html[data-style="A"] .btn:active{transform:translateY(2px)}
html[data-style="A"] .puce{background:#fffdf2;border-color:#e8d08c;color:#1b2a5c}
html[data-style="A"] .zone-booster{background:radial-gradient(120% 90% at 50% 0,#2a3f9e 0,#101a55 70%);border:3px solid #d9ae3e;box-shadow:inset 0 0 0 3px rgba(247,215,116,.35),0 6px 0 rgba(0,0,40,.35)}
html[data-style="A"] .stock span{background:rgba(255,255,255,.25)}
html[data-style="A"] .stock span.plein{background:linear-gradient(#ffe7a0,#e8b020);box-shadow:0 0 6px rgba(255,210,90,.7)}
html[data-style="A"] .panneau-depart{background:linear-gradient(#fff9e3,#ffeab0)}
html[data-style="A"] .pied-page{color:#1b2a5c}
html[data-style="A"] .voile .boite{background:linear-gradient(#fffdf2,#fff3cf);border:3px solid #d9ae3e}
html[data-style="A"] .toast{background:#1b2a5c;color:#fff8e0}
html[data-style="A"] .arene{
  --ar-tapis-bg:rgba(18,26,85,.78); --ar-tapis-bord:#d9ae3e; --ar-plaque-bg:#fff6d6; --ar-plaque-fg:#1b2a5c; --ar-plaque-bord:#b8860b; --ar-plaque-sec:#6a5a2a;
  --ar-or:#a8590a; --ar-voile:linear-gradient(180deg,rgba(20,30,90,.2),rgba(20,30,90,.42)); --ar-bouton-bg:#fff6d6; --ar-bouton-fg:#1b2a5c; --ar-gagne:#2e9b5f; --ar-perd:#d64545; --ar-egal:#a87400}
html[data-style="A"] .arene{--ar-cpt:#ffe08a}
html[data-style="A"] .arene .tapis{--ar-gagne:#7dffb2;--ar-perd:#ff9a9a;--ar-egal:#ffe08a}
html[data-style="A"] .arene .verdict{--ar-gagne:#7dffb2;--ar-perd:#ff9a9a;--ar-egal:#ffe08a}
html[data-style="A"] .arene .fin-boite{--ar-gagne:#2e9b5f}

/* ============================================================
   B — CARNET D'EXPLORATEUR
   ============================================================ */
html[data-style="B"]:root{
  --bg:#efe0bb; --bg2:#fbf0d4; --fg:#4a3320; --muted:#7a5c3c; --line:#c89a5a;
  --accent:#d65a10; --accent-fg:#fff; --accent2:#2c3a66; --card:#fbf0d4; --ink:#4a3320;
  --shadow:0 5px 0 rgba(90,58,34,.25); --radius:12px; color-scheme:light;
}
html[data-style="B"] body{background:#e3d0a0}
html[data-style="B"] #scene{background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(120,80,30,.28) 100%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .3 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),#efe0bb}
html.scene-pc[data-style="B"] #scene{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%238a6234' stroke-width='2'><circle cx='100' cy='100' r='92'/><circle cx='100' cy='100' r='72' stroke-dasharray='4 6'/><circle cx='100' cy='100' r='12'/></g><path d='M100 4 L112 100 L100 196 L88 100Z M4 100 L100 88 L196 100 L100 112Z' fill='%238a6234' opacity='.8'/><path d='M100 28 L108 100 L100 172 L92 100Z' fill='%23c89a5a'/><text x='100' y='-2' font-size='14' text-anchor='middle' fill='%238a6234'>N</text></svg>") right 60px bottom 40px/260px 260px no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'><path d='M5 100 C60 10 110 110 160 50 S250 10 290 60' fill='none' stroke='%23a33a12' stroke-width='3' stroke-dasharray='8 8'/><g stroke='%23a33a12' stroke-width='4' stroke-linecap='round'><path d='M278 48 L296 68 M296 48 L278 68'/></g></svg>") left 30px bottom 120px/280px 112px no-repeat,
  radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(120,80,30,.28) 100%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .3 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),#efe0bb}
html[data-style="B"] .barre{background:#5a3a22;color:#fbe9c7;border-bottom:4px dashed #c89a5a}
html[data-style="B"] .logo{color:#fbe9c7}
html[data-style="B"] .joueur .pts{color:#e0c9a0}
html[data-style="B"] .joueur .nom{color:#fbe9c7}
html[data-style="B"] .icone{background:#f3e3bd;border:2px solid #c89a5a;color:#4a3320}
html[data-style="B"] .btn.discret{color:#fbe9c7}
html[data-style="B"] .contenu .btn.discret{color:var(--muted)}
html[data-style="B"] .panneau,html[data-style="B"] .profil,html[data-style="B"] .fiche-infos,html[data-style="B"] .resume-booster{background:#fbf0d4;border:2px dashed #8a6234;border-radius:10px;box-shadow:0 5px 0 rgba(90,58,34,.22)}
html[data-style="B"] .ligne,html[data-style="B"] .badge,html[data-style="B"] .dos-item{background:#fbf0d4;border:2px dashed #b8905a;border-radius:8px}
html[data-style="B"] .badge.ok{background:color-mix(in srgb,var(--c) 14%,#fbf0d4);border-style:solid}
html[data-style="B"] .ligne.moi{border-color:#d65a10;border-style:solid}
html[data-style="B"] .nav-jeu,html[data-style="B"] .onglets{background:#d9c08d;border:2px dashed #8a6234}
html[data-style="B"] .nav-jeu button,html[data-style="B"] .onglets button{color:#6b4a2a}
html[data-style="B"] .nav-jeu button[aria-selected="true"],html[data-style="B"] .onglets button[aria-selected="true"]{background:#5a3a22;color:#fbe9c7;box-shadow:none}
html[data-style="B"] .btn{background:#fbf0d4;border:2px solid #8a6234;border-radius:12px;color:#4a3320;box-shadow:0 3px 0 rgba(90,58,34,.35)}
html[data-style="B"] .btn.primaire{background:#d65a10;border:2px solid #7a2f00;color:#fff;box-shadow:0 4px 0 #7a2f00}
html[data-style="B"] .btn.secondaire{background:#2c3a66;border:2px solid #14204a;color:#fbe9c7;box-shadow:0 4px 0 #14204a}
html[data-style="B"] .btn.discret{background:transparent;border-color:transparent;box-shadow:none}
html[data-style="B"] .btn:active{transform:translateY(2px)}
html[data-style="B"] .puce{background:#fbf0d4;border:2px dashed #8a6234;border-radius:8px;color:#4a3320}
html[data-style="B"] .puce[aria-pressed="true"]{border-style:solid}
html[data-style="B"] .zone-booster{position:relative;background:#2c3a66;border:3px solid #c89a5a;color:#fbe9c7;border-radius:12px;box-shadow:0 5px 0 rgba(0,0,0,.3)}
html[data-style="B"] .zone-booster::after{content:"";position:absolute;right:22px;top:-16px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff5a4a,#a01510);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 0 0 4px rgba(255,255,255,.12)}
html[data-style="B"] .stock span{background:rgba(251,233,199,.3);border:1px solid #c89a5a}
html[data-style="B"] .stock span.plein{background:#fbe9c7}
html[data-style="B"] .panneau-depart{background:#fbf0d4;border:2px dashed #8a6234}
html[data-style="B"] .panneau-depart::before{content:"📎";position:absolute;margin:-30px 0 0 -6px;font-size:26px}
html[data-style="B"] .panneau-depart{position:relative}
html[data-style="B"] .voile .boite{background:#fbf0d4;border:3px dashed #8a6234}
html[data-style="B"] .toast{background:#4a3320;color:#fbe9c7}
html[data-style="B"] .hero h1{color:#4a3320}
html[data-style="B"] .hero p{color:#6b4a2a}
html[data-style="B"] a{color:#2c3a66}
html[data-style="B"] .arene{
  --ar-tapis-bg:rgba(52,86,56,.9); --ar-tapis-bord:#5a3a22; --ar-plaque-bg:#5a3a22; --ar-plaque-fg:#fbe9c7; --ar-plaque-bord:#c89a5a; --ar-plaque-sec:#e0c9a0;
  --ar-or:#f7d774; --ar-voile:linear-gradient(180deg,rgba(50,30,12,.38),rgba(50,30,12,.62)); --ar-bouton-bg:#5a3a22; --ar-bouton-fg:#fbe9c7}
html[data-style="B"] .arene{--ar-cpt:#f7d774}
html[data-style="B"] .arene-fond{filter:sepia(.65) blur(2px)}
html[data-style="B"] .arene .tapis{border-style:solid;border-width:8px;border-radius:20px;box-shadow:inset 0 0 70px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.4)}
html[data-style="B"] .arene .plaque,html[data-style="B"] .arene .fin-boite{border-style:dashed}

/* ============================================================
   C — NUIT ÉTOILÉE
   ============================================================ */
html[data-style="C"]:root{
  --bg:#0a0f33; --bg2:#141a4d; --fg:#eef1ff; --muted:#aab6ec; --line:rgba(247,215,116,.38);
  --accent:#ff7a1a; --accent-fg:#fff; --accent2:#8da0ff; --card:#1a2160; --ink:#eef1ff;
  --shadow:0 0 26px rgba(120,100,255,.3); --radius:18px; color-scheme:dark;
}
html[data-style="C"] body{background:#070a24}
html[data-style="C"] #scene{
  background:radial-gradient(100% 60% at 85% 0,rgba(98,64,200,.55) 0,transparent 60%),radial-gradient(90% 50% at 0 35%,rgba(20,90,190,.45) 0,transparent 60%),
  radial-gradient(70% 40% at 60% 100%,rgba(120,60,180,.3) 0,transparent 70%),#0a0f33}
html[data-style="C"] #scene::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.95;
  background-image:radial-gradient(1.6px 1.6px at 30px 40px,#fff 50%,transparent),radial-gradient(1px 1px at 110px 90px,#fff 50%,transparent),radial-gradient(1.8px 1.8px at 190px 25px,#ffe9a8 50%,transparent),
                   radial-gradient(1px 1px at 270px 130px,#fff 50%,transparent),radial-gradient(1.6px 1.6px at 340px 70px,#ffe9a8 50%,transparent),radial-gradient(1px 1px at 60px 150px,#cfd8ff 50%,transparent);
  background-size:380px 180px}
@media (prefers-reduced-motion:no-preference){html[data-style="C"] #scene::before{animation:cv-scintille 7s ease-in-out infinite alternate}}
@keyframes cv-scintille{from{opacity:.55}to{opacity:1}}
html.scene-pc[data-style="C"] #scene::after{content:"";position:absolute;left:-120px;right:-120px;top:520px;height:380px;border-radius:50%;border-top:3px solid rgba(247,215,116,.45);transform:rotate(-7deg);filter:blur(1px);pointer-events:none;z-index:0}
html[data-style="C"] .barre{background:rgba(255,255,255,.05);border-bottom:1px solid rgba(247,215,116,.55);backdrop-filter:blur(8px)}
html[data-style="C"] .logo{color:#fff}
html[data-style="C"] .icone{background:rgba(255,255,255,.1);border:2px solid #f7d774;color:#fff}
html[data-style="C"] .panneau,html[data-style="C"] .profil,html[data-style="C"] .fiche-infos,html[data-style="C"] .resume-booster{
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.03));border:1.5px solid rgba(247,215,116,.5);box-shadow:0 0 24px rgba(120,100,255,.2);backdrop-filter:blur(5px)}
html[data-style="C"] .ligne,html[data-style="C"] .badge,html[data-style="C"] .dos-item{background:rgba(255,255,255,.06);border:1px solid rgba(247,215,116,.38)}
html[data-style="C"] .badge.ok{background:color-mix(in srgb,var(--c) 22%,rgba(255,255,255,.04))}
html[data-style="C"] .ligne.moi{border-color:#ff9a40}
html[data-style="C"] .nav-jeu,html[data-style="C"] .onglets{background:rgba(255,255,255,.07);border:1px solid rgba(247,215,116,.4)}
html[data-style="C"] .nav-jeu button,html[data-style="C"] .onglets button{color:#b7c2f0}
html[data-style="C"] .nav-jeu button[aria-selected="true"],html[data-style="C"] .onglets button[aria-selected="true"]{background:linear-gradient(#ff9a40,#ff6a00);color:#fff;box-shadow:0 0 16px rgba(255,140,40,.6)}
html[data-style="C"] .btn{background:rgba(255,255,255,.08);border:1.5px solid rgba(247,215,116,.55);color:#eef1ff}
html[data-style="C"] .btn.primaire{background:linear-gradient(#ffa04a,#ff6a00);border-color:transparent;color:#fff;box-shadow:0 0 20px rgba(255,130,30,.6),0 4px 0 #a84300}
html[data-style="C"] .btn.secondaire{background:linear-gradient(#6f7fff,#3a46d6);border-color:transparent;color:#fff;box-shadow:0 0 18px rgba(110,120,255,.5)}
html[data-style="C"] .btn.discret{background:transparent;border-color:transparent;color:var(--muted)}
html[data-style="C"] .puce{background:rgba(255,255,255,.08);border-color:rgba(247,215,116,.4);color:#e9edff}
html[data-style="C"] .zone-booster{background:linear-gradient(rgba(120,100,255,.32),rgba(40,60,200,.22));border:1.5px solid rgba(247,215,116,.7);box-shadow:0 0 28px rgba(120,100,255,.35)}
html[data-style="C"] .stock span{background:rgba(255,255,255,.25)}
html[data-style="C"] .stock span.plein{background:linear-gradient(#ffe7a0,#e8b020);box-shadow:0 0 8px rgba(255,210,90,.8)}
html[data-style="C"] .panneau-depart{background:linear-gradient(rgba(247,215,116,.2),rgba(247,215,116,.06));border:1.5px solid #f7d774;box-shadow:0 0 24px rgba(247,215,116,.2)}
html[data-style="C"] .voile .boite{background:#141a4d;border:1.5px solid rgba(247,215,116,.6)}
html[data-style="C"] .champ input{background:rgba(255,255,255,.08);color:#fff}
html[data-style="C"] .toast{background:#eef1ff;color:#0a0f33}
html[data-style="C"] a{color:#a9b8ff}
html[data-style="C"] .style-tuile,html[data-style="C"] .chip-adj,html[data-style="C"] .choix-avatars button{background:rgba(255,255,255,.07)}
html[data-style="C"] .arene{
  --ar-tapis-bg:radial-gradient(closest-side,rgba(120,100,255,.28),rgba(14,20,80,.55)); --ar-tapis-bord:rgba(247,215,116,.75); --ar-plaque-bg:rgba(20,26,90,.7); --ar-plaque-fg:#fff;
  --ar-plaque-bord:#f7d774; --ar-plaque-sec:#cdd6ff; --ar-voile:linear-gradient(180deg,rgba(8,12,45,.55),rgba(8,12,45,.78)); --ar-or:#f7d774}
html[data-style="C"] .arene .tapis{box-shadow:0 0 50px rgba(120,100,255,.4),inset 0 0 60px rgba(120,100,255,.25)}

html[data-style="A"] .btn .badge,html[data-style="B"] .btn .badge{background:rgba(0,0,0,.28);color:#fff;border:0;box-shadow:none;border-radius:999px}

/* En jeu, les cartes gardent toujours leur ombre et leurs auras : aucun style ne touche à .hs */