/* ============================================================
   CrazyViki — styles
   Layout : une appli plein écran, barre en haut, contenu scrollable,
   cartes larges et tactiles. Couleurs vives mais lisibles, deux thèmes.
   ============================================================ */
:root{
  --bg:#eef3f8; --bg2:#ffffff; --fg:#1d2430; --muted:#5f6b7a; --line:#d7dee8;
  --accent:#ff7a1a; --accent-fg:#ffffff; --accent2:#2b6fd6;
  --card:#fffdf7; --ink:#1d1c19;
  --ok:#2e9b5f; --warn:#d9a400; --danger:#d64545;
  --r-commune:#8a97a8; --r-inhabituel:#1fa863; --r-rare:#2b6fd6; --r-epique:#8e44ad; --r-legendaire:#e07a10; --r-mythique:#c4122a;
  --gold1:#f7d774; --gold2:#b8860b; --gold3:#fff2b8;
  --shadow:0 10px 30px rgba(20,30,50,.12);
  --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
  --radius:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#14171c; --bg2:#1e2229; --fg:#eceef2; --muted:#9aa4b2; --line:#2c333d;
  --card:#262a31; --ink:#f2f1ea; --shadow:0 10px 30px rgba(0,0,0,.4);
  --gold1:#e8c65a; --gold2:#8a6508; --gold3:#fff0a8; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#14171c; --bg2:#1e2229; --fg:#eceef2; --muted:#9aa4b2; --line:#2c333d;
  --card:#262a31; --ink:#f2f1ea; --shadow:0 10px 30px rgba(0,0,0,.4);
  --gold1:#e8c65a; --gold2:#8a6508; --gold3:#fff0a8; color-scheme:dark }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;
  -webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg2);z-index:10}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent2)}

/* ---------- structure ---------- */
.app{min-height:100%;display:flex;flex-direction:column}
.barre{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg2);border-bottom:1px solid var(--line);
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:12px}
.logo{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.logo .crazy{color:var(--accent)}
.barre .espace{flex:1}
.contenu{flex:1;padding-block:20px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  width:100%;max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* ---------- boutons ---------- */
.btn{border:0;border-radius:999px;padding:12px 20px;font-weight:800;font-size:1rem;background:var(--bg2);color:var(--fg);
  border:2px solid var(--line);display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:46px;transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn.primaire{background:var(--accent);color:var(--accent-fg);border-color:transparent}
.btn.secondaire{background:var(--accent2);color:#fff;border-color:transparent}
.btn.discret{background:transparent;border-color:transparent;color:var(--muted);padding:8px 12px;min-height:38px}
.btn.grand{font-size:1.25rem;padding:18px 32px;min-height:64px;font-family:var(--display)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn .badge{background:rgba(255,255,255,.25);border-radius:999px;padding:2px 10px;font-size:.9rem}
.icone{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--bg2);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}

/* ---------- panneaux & formulaires ---------- */
.panneau{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}
.panneau h2{font-size:1.4rem}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-weight:800;font-size:.9rem}
.champ input{font:inherit;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--fg);min-width:0}
.onglets{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:4px}
.onglets button{flex:1;border:0;background:transparent;border-radius:999px;padding:10px;font-weight:800;color:var(--muted)}
.onglets button[aria-selected="true"]{background:var(--bg2);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.erreur{color:var(--danger);font-weight:700;font-size:.95rem}
.info{color:var(--muted);font-size:.95rem}
.bandeau-demo{background:var(--warn);color:#1d1c19;border-radius:12px;padding:10px 14px;font-weight:800;font-size:.95rem;text-align:center}

/* ---------- accueil ---------- */
.hero{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding-block:10px}
.hero h1{font-size:clamp(2rem,6vw,3rem)}
.hero p{max-width:46ch;color:var(--muted);font-size:1.05rem}
.eventail{display:flex;justify-content:center;height:150px;margin:8px 0 4px}
.eventail .mini{width:95px;margin:0 -22px;transform-origin:50% 120%}
.eventail .mini:nth-child(1){transform:rotate(-18deg) translateY(10px)}
.eventail .mini:nth-child(2){transform:rotate(-6deg)}
.eventail .mini:nth-child(3){transform:rotate(6deg)}
.eventail .mini:nth-child(4){transform:rotate(18deg) translateY(10px)}

/* ---------- profils ---------- */
.grille-profils{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.profil{background:var(--bg2);border:2px solid var(--line);border-radius:var(--radius);padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:160px}
.profil:hover{border-color:var(--accent2)}
.profil .avatar{font-size:3rem;line-height:1}
.profil .pseudo{font-family:var(--display);font-weight:700;font-size:1.05rem}
.profil .pts{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.profil.ajout{border-style:dashed;color:var(--muted);justify-content:center}
.choix-avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:min(40vh,260px);overflow-y:auto;padding:2px}
.choix-avatars button{font-size:1.7rem;padding:8px 0;border-radius:12px;border:2px solid var(--line);background:var(--bg)}
.choix-avatars button[aria-pressed="true"]{border-color:var(--accent);background:var(--bg2)}
.av-img{width:1.1em;height:1.1em;object-fit:contain;display:inline-block;vertical-align:-.14em;pointer-events:none;-webkit-user-drag:none}
.choix-avatars button .av-img{width:1.25em;height:1.25em;vertical-align:middle}
.choix-avatars button{display:flex;align-items:center;justify-content:center;line-height:1}

.pseudo-apercu{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:10px 14px}
.pseudo-apercu b{flex:1;font-family:var(--display);font-size:1.25rem;font-weight:700}

/* ---------- jeu ---------- */
.joueur{display:flex;align-items:center;gap:10px;min-width:0}
.joueur .avatar{font-size:1.6rem}
.joueur .nom{font-family:var(--display);font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.joueur .pts{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.zone-booster{background:linear-gradient(135deg,var(--accent2),#6a3fd8);color:#fff;border-radius:var(--radius);padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:var(--shadow)}
.zone-booster h2{font-size:1.5rem}
.zone-booster .compte{font-variant-numeric:tabular-nums;opacity:.9}
.zone-booster .btn.primaire{box-shadow:0 6px 0 rgba(0,0,0,.2)}
.stock{display:flex;gap:6px}
.stock span{width:14px;height:20px;border-radius:4px;background:rgba(255,255,255,.3)}
.stock span.plein{background:#fff}

.nav-jeu{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px}
.nav-jeu button{flex:1 1 0;min-width:0;border:0;background:transparent;border-radius:999px;padding:10px 2px;font-weight:800;color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.nav-jeu button{font-size:.78rem;padding:10px 0}}
.nav-jeu button[aria-selected="true"]{background:var(--accent);color:var(--accent-fg)}

.filtres{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.puce{border:2px solid var(--line);background:var(--bg2);color:var(--fg);border-radius:999px;padding:7px 14px;font-weight:800;font-size:.9rem;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.puce[aria-pressed="true"]{border-color:var(--c,var(--accent));background:var(--c,var(--accent));color:#fff}
.compteur{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

.grille-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
@media (min-width:600px){.grille-cartes{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.vide{text-align:center;color:var(--muted);padding:40px 10px;display:flex;flex-direction:column;gap:8px;align-items:center}
.vide .gros{font-size:3rem}

/* ---------- voiles / modales ---------- */
.voile{position:fixed;inset:0;background:rgba(10,12,20,.78);z-index:20;display:flex;align-items:safe center;justify-content:center;overflow:auto;
  padding:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.voile .boite{background:var(--bg2);color:var(--fg);border-radius:20px;padding:20px;width:min(560px,100%);max-height:calc(100% - 32px);overflow:auto;display:flex;flex-direction:column;gap:14px}
.resume-booster{background:var(--bg2);color:var(--fg);border-radius:14px;padding:12px 16px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-weight:800}
.resume-booster b{font-family:var(--display);color:var(--accent)}

/* ---------- classement & pages ---------- */
.liste-classement{display:flex;flex-direction:column;gap:6px}
.ligne{display:grid;grid-template-columns:36px 44px 1fr auto;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.ligne .rang{font-family:var(--display);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ligne .av{font-size:1.5rem;display:flex;align-items:center;justify-content:center}
.ligne .nom{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .pts{font-variant-numeric:tabular-nums;font-weight:800}
.ligne.moi{border-color:var(--accent)}
.page-texte{display:flex;flex-direction:column;gap:12px;max-width:68ch}
.page-texte h2{font-size:1.5rem}
.page-texte h3{font-size:1.1rem;margin-top:6px}
.page-texte ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.pied-page{text-align:center;color:var(--muted);font-size:.85rem;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding-block:10px}
.pied-page button{background:none;border:0;color:inherit;text-decoration:underline;font:inherit}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:800;z-index:30;box-shadow:var(--shadow);max-width:calc(100% - 32px)}

/* ---------- intégration des cartes « taverne » dans l'appli ---------- */
.porte-carte{border:0;background:transparent;padding:0;font:inherit;cursor:pointer;display:block;width:100%;position:relative;text-align:left;transition:transform .12s}
.porte-carte:hover{transform:translateY(-4px)}
.porte-carte:focus-visible{outline:3px solid var(--accent2);outline-offset:4px;border-radius:12px}
.grille-cartes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
@media (min-width:600px){.grille-cartes{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.hs .qte{position:absolute;top:-8px;right:-8px;z-index:8;background:var(--fg);color:var(--bg);border-radius:999px;font-weight:800;font-size:.8rem;padding:3px 9px;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.hs .neuf{position:absolute;top:-10px;left:-8px;z-index:8;background:var(--ok);color:#fff;border-radius:999px;font-weight:800;font-size:.72rem;padding:3px 10px;transform:rotate(-8deg);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.hs .sans-image{font-size:12cqw;display:flex;align-items:center;justify-content:center;height:100%}
.eventail .mini .hs{filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.fiche-carte{width:min(360px,100%);margin:0 auto}
.fiche-infos{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;color:var(--fg);font-size:.9rem;background:var(--bg2);border-radius:12px;padding:10px 16px;width:min(360px,100%)}
.fiche-infos a{color:var(--accent2)}
.voile .boite.boite-carte{background:transparent;padding:0;gap:12px;align-items:center}
.voile .boite.boite-carte .btn:not(.secondaire){background:var(--bg2)}

/* ouverture de booster : plein écran sombre */
.voile.voile-booster{background:radial-gradient(1200px 700px at 50% 30%,#2a1f3d,#0e0b16 70%);padding-block:12px}
.voile-booster .table-booster{flex:none}
.voile-booster .ouverture{width:100%;max-width:1040px;color:#fff;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding-block:12px}
.voile-booster .ouverture h2{font-family:var(--display);font-size:1.3rem}
.voile-booster .attente{font-size:3rem;animation:tremble .6s ease-in-out infinite}
@keyframes tremble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.voile-booster .table-booster{border-color:#5b3a12}
.sous-table{display:flex;flex-direction:column;gap:10px;align-items:center}
.voile-booster .resume-booster{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.voile-booster .attente{animation:none}}

/* ---------- profils (gérer), onglet Profil, dos de cartes, badges, admin ---------- */
.profil-bloc{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.profil-bloc .profil{width:100%;height:100%}
.btn.petit{font-size:.85rem;min-height:32px;padding:4px 10px}
.profil-entete{flex-direction:row;align-items:center;gap:16px}
.avatar-grand{font-size:3.4rem;line-height:1;background:var(--bg);border-radius:50%;width:84px;height:84px;display:flex;align-items:center;justify-content:center;flex:none}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{border:2px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;background:var(--bg);opacity:.75}
.badge.ok{opacity:1;border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--bg2))}
.badge .emo{font-size:1.8rem}
.badge b{font-size:.85rem}
.badge .niv{color:var(--gold2);letter-spacing:.1em}
.badge .prog{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.galerie-dos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.dos-item{border:2px solid var(--line);border-radius:14px;padding:8px;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font:inherit;color:var(--fg);cursor:pointer}
.dos-item .dos{width:100%;aspect-ratio:63/88;border-radius:8px;overflow:hidden;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.dos-item .dos svg{width:100%;height:100%;display:block}
.dos-item b{font-size:.85rem}
.dos-item span{font-size:.72rem;color:var(--muted)}
.dos-item.verrou{cursor:not-allowed;opacity:.55}
.dos-item.verrou .dos{filter:grayscale(1) brightness(.6)}
.dos-item.actif{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.dos-item:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.liste-admin{display:flex;flex-direction:column;gap:10px}
.ligne-admin{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:12px;padding:10px;flex-wrap:wrap}
.ligne-admin .mini-carte{width:110px;flex:none}

.fiche-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.fiche-actions .btn{min-width:150px;text-decoration:none}
.lien-signaler{margin-top:22px;background:var(--bg2);border:0;border-radius:999px;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer;padding:8px 14px}
.lien-signaler:hover{color:var(--fg)}

/* ---------- booster de départ ---------- */
.panneau-depart{border:2px solid var(--gold2);background:linear-gradient(180deg,color-mix(in srgb,var(--gold3) 22%,var(--bg2)),var(--bg2));text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.panneau-depart h2{margin:0}
.page-texte .tableau-chances{overflow-x:auto}
.page-texte .tableau-chances table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:30em}
.page-texte .tableau-chances th,.page-texte .tableau-chances td{padding:5px 8px;text-align:right;border-bottom:1px solid rgba(128,128,128,.3);white-space:nowrap}
.page-texte .tableau-chances th:first-child,.page-texte .tableau-chances td:first-child{text-align:left}
.page-texte .tableau-chances th{font-weight:800}
.page-texte .tableau-chances tfoot td{font-weight:800;border-top:2px solid rgba(128,128,128,.5);border-bottom:0}
.saison-entete{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.saison-entete h3{font-size:1.15rem;margin:0}
.saison-passee h3{margin:0}
.saison-passee .podium{display:flex;flex-direction:column;gap:2px;font-weight:800}
.saison-detail{margin-top:6px}
.saison-detail[hidden]{display:none}

@media (max-width:520px){
  .ligne{grid-template-columns:30px 36px 1fr;row-gap:2px}
  .ligne .pts{grid-column:2 / -1;font-size:.85rem;font-weight:700;color:var(--muted)}
}

/* Création d'un joueur : animal puis adjectif */
.voile .boite.boite-large{width:min(1000px,100%)}
.np-corps{display:flex;flex-direction:column;gap:14px}
.np-grille{grid-template-columns:repeat(6,1fr);gap:6px;max-height:none;overflow:visible}
.np-grille button{font-size:1.7rem;padding:8px 0}
@media (min-width:640px){.np-grille{grid-template-columns:repeat(10,1fr)}.np-grille button{font-size:1.9rem}}
@media (min-width:900px){.np-grille{grid-template-columns:repeat(14,1fr)}}
.np-nom{display:inline-flex;align-items:center;gap:10px}
.np-nom:not(.choisi){font-size:1rem;font-weight:600;color:var(--muted)}
.np-nom .av-img{width:1.5em;height:1.5em}
.np-recap{font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.np-recap .np-nom{font-family:var(--display)}
.np-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.chip-adj{padding:10px 4px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--fg);font-weight:800;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-adj[aria-pressed="true"]{border-color:var(--accent);background:var(--bg2)}
.np-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:-20px;background:var(--bg2);padding:10px 0 20px;margin-bottom:-20px}
.np-actions .btn{padding:11px 16px}
@media (max-width:520px){.np-actions{gap:8px;flex-wrap:nowrap}.np-actions .btn{flex:1 1 0;padding:11px 8px;font-size:.88rem;white-space:nowrap}.chip-adj{font-size:.85rem;padding:10px 2px}.np-chips{grid-template-columns:repeat(3,1fr)}}

/* Couleur de fond des avatars (pastel) */
.av-fond{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.5em;height:1.5em;border-radius:50%;line-height:1;vertical-align:middle}
.av-fond .av-img{width:1.2em;height:1.2em;vertical-align:0}
.avatar-grand .av-fond{width:100%;height:100%}
.np-fonds{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.np-fonds-titre{font-size:.85rem;font-weight:700;color:var(--muted)}
.np-fonds-liste{display:flex;gap:6px;flex-wrap:wrap}
.pastille{width:32px;height:32px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer}
.pastille[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.pastille.aucune{background:#fff linear-gradient(135deg,transparent 46%,#c44 46%,#c44 54%,transparent 54%)}
@media (max-width:520px){.pastille{width:30px;height:30px}}

/* Cercle chromatique pastel (teinte libre) */
.np-fonds-roue{display:flex;align-items:center;gap:10px}
.np-fonds-aide{font-size:.8rem;color:var(--muted);max-width:11em;line-height:1.25}
.roue{position:relative;width:88px;height:88px;flex:none;border-radius:50%;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.roue::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--roue);-webkit-mask:radial-gradient(circle,transparent 0 26px,#000 27px);mask:radial-gradient(circle,transparent 0 26px,#000 27px)}
.roue-centre{position:absolute;left:24px;top:24px;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);background:#fff linear-gradient(135deg,transparent 46%,#c9ced6 46%,#c9ced6 54%,transparent 54%)}
.roue.active .roue-centre{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.roue.active .roue-centre{background-image:none}
.roue-curseur{position:absolute;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--accent),0 1px 4px rgba(0,0,0,.3);display:none;z-index:1;pointer-events:none}
.roue.active .roue-curseur{display:block}
.roue:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Fiche de carte : découvreur mondial (mis en valeur, en doré ; le cadre d'infos est clair) */
.fiche-decouvreur{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:6px 12px;border-radius:12px;background:linear-gradient(180deg,#fff0b8,#ffd96a);border:1px solid #d99a14;color:#4a3000;line-height:1.35;margin-bottom:2px;box-shadow:0 1px 6px rgba(217,154,20,.35)}
.fiche-decouvreur[hidden]{display:none}
.fiche-decouvreur .nom-decouvreur{color:#2b1a00;font-family:var(--display-carte,inherit)}

/* Téléphone : la fiche d'une carte (carte + infos + boutons) tient en hauteur, sans barre de défilement */
@media (max-width:720px){
  .voile:has(.boite-carte){padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));overflow:hidden}
  .voile .boite.boite-carte{width:100%;max-height:100%;overflow:visible;gap:8px}
  .boite-carte .fiche-infos{font-size:.76rem;line-height:1.3;gap:2px;padding:6px 10px}
  .boite-carte .fiche-decouvreur{font-size:.76rem;padding:4px 8px;gap:0 4px;margin-bottom:0}
  .boite-carte .fiche-actions{flex-wrap:nowrap;gap:8px;width:min(360px,100%);margin-top:0}
  .boite-carte .fiche-actions .btn{flex:1 1 0;min-width:0;padding:10px 6px;font-size:.86rem;white-space:nowrap}
  .boite-carte .lien-signaler{margin-top:0;padding:5px 12px;font-size:.72rem}
}

/* Téléphone en PAYSAGE : la carte seule à gauche (elle tient en entier dans la hauteur), toutes les infos et les boutons à droite */
@media (orientation:landscape) and (max-height:520px){
  .voile:has(.boite-carte){padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}
  .voile .boite.boite-carte{--hc:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto minmax(0,360px);grid-template-rows:1fr auto auto auto 1fr;column-gap:18px;row-gap:8px;width:auto;max-width:100%;max-height:100%;justify-content:center;align-items:center;overflow:visible}
  .boite-carte .fiche-carte{grid-column:1;grid-row:1/-1;width:calc(var(--hc) * .716) !important;max-width:46vw;margin:0}
  .boite-carte .fiche-infos{grid-column:2;grid-row:2;width:100%}
  .boite-carte .fiche-actions{grid-column:2;grid-row:3;width:100%}
  .boite-carte .lien-signaler{grid-column:2;grid-row:4;justify-self:center}
}

/* Téléphone : la collection reste toujours à 2 cartes par ligne (même sur un écran étroit de 320 px) */
@media (max-width:599px){.grille-cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}

/* Quand une fenêtre (fiche de carte, ouverture de booster…) est ouverte, la page derrière ne défile plus : plus de glissière à droite */
html:has(.voile),html:has(.voile) body{overflow:hidden}

/* ---- Règles du jeu : mise en page large sur ordinateur (scène 1080p), 3 colonnes de sections ---- */
.page-texte section{break-inside:avoid;margin:0 0 10px;padding:10px 14px;border-radius:12px;background:rgba(128,128,128,.08);border:1px solid rgba(128,128,128,.18)}
.page-texte section h3{margin:0 0 6px}
.page-texte section p,.page-texte section ul{margin:0}
.page-texte section p+ul{margin-top:6px}
.page-texte section.regle-duel{border-color:rgba(255,122,26,.45);background:rgba(255,160,74,.1)}
.voile .boite.boite-regles{width:min(1560px,100%)}
.boite-regles .page-texte{max-width:none}
.boite-regles .page-corps{columns:3;column-gap:16px;font-size:.93rem}
.boite-regles .page-texte section.large{column-span:all;margin-top:4px}
.boite-regles .page-texte section.large .tableau-chances table{min-width:0;font-size:.85rem}
.boite-regles .page-texte h3{font-size:1.05rem}

/* ---------- mode maintenance (« mise à jour en cours ») ---------- */
.maintenance{position:fixed;inset:0;z-index:100;background:radial-gradient(1200px 700px at 50% 30%,#2a1f3d,#0e0b16 70%);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.maintenance-boite{background:var(--bg2);color:var(--fg);border-radius:24px;padding:32px 28px;width:min(520px,100%);text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:var(--shadow)}
.maintenance-icone{font-size:3.4rem;animation:tremble .9s ease-in-out infinite}
.maintenance-boite h1{font-family:var(--display);font-size:1.7rem}
.maintenance-boite p{font-size:1.1rem}
.maintenance-boite .logo{margin-top:6px}
/* ---------- note de fin d'Alpha ---------- */
.note-alpha{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-inline:auto;text-align:left}
.note-alpha h2{font-family:var(--display)}
.note-alpha ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.note-alpha .btn{align-self:center;margin-top:6px}
.zone-perso{display:flex;flex-direction:column;gap:14px}