/* ============================================================
   Les Aventuriers de Rimd'Orël — Charte graphique commune
   ============================================================
   Feuille de style partagée par toutes les pages de menu du jeu
   (hub, collection, succès, boutique, quêtes, recherche de
   partie, grimoire). Le plateau de jeu et l'éditeur de cartes
   gardent leur propre feuille de style, plus spécifique.

   Principe : plus aucune image "posée" à la main (les anciennes
   affiches hub-poster-*.png) — uniquement de la couleur, de la
   typographie et des icônes vectorielles (SVG en ligne), pour que
   toutes les pages se ressemblent et restent cohérentes même
   quand le contenu change.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Thèmes — 5 palettes, choisies dans le menu Options.
   Un seul jeu de composants ; seuls ces jetons changent d'un thème
   à l'autre. Le thème actif est posé sur <html data-theme="...">.
   "actuel" (violet/or d'origine) est la valeur par défaut.

   PRINCIPE (refonte) : chaque thème est défini par QUATRE réglages,
   et TOUT ce qui était violet dans le jeu (fonds, bordures, lueurs,
   boutons, dégradés) en dérive — plus aucun violet ne reste figé :
     --th    teinte du thème, en degrés (252 = violet d'origine)
     --ts-n  saturation des tons sombres neutres (fonds, bordures)
     --ts-a  saturation de l'accent (boutons, lueurs, liens)
     --tl-a  décalage de clarté de l'accent (ex. -16% = plus sombre)
   Les couleurs « qui ont un sens » ne suivent PAS le thème : couleur
   de la classe Crépuscule, gemmes, reflets holographiques, rareté.
   ============================================================ */
:root{ --th:252; --ts-n:1; --ts-a:1; --tl-a:0%; }

[data-theme="emeraude"]{ --th:152; --ts-n:.78; --ts-a:.52; --tl-a:-16%; }
[data-theme="sangor"]{   --th:350; --ts-n:.92; --ts-a:.72; --tl-a:-14%; }
[data-theme="givre"]{    --th:205; --ts-n:.95; --ts-a:.78; --tl-a:-4%;  }

/* Jetons dérivés de la teinte (identiques en forme pour tous les thèmes) */
:root{
  --bg-void:hsl(var(--th) calc(var(--ts-n) * 29%) 5%);
  --bg-panel:hsl(var(--th) calc(var(--ts-n) * 32%) 11%);
  --bg-panel-2:hsl(var(--th) calc(var(--ts-n) * 30%) 15%);
  --bg-panel-3:hsl(var(--th) calc(var(--ts-n) * 29%) 17.5%);
  --bg-glow:radial-gradient(ellipse 90% 60% at 50% -10%, hsl(var(--th) calc(var(--ts-n) * 37%) 16%) 0%, transparent 60%);

  --arcane:hsl(var(--th) calc(var(--ts-a) * 100%) calc(68% + var(--tl-a)));
  --arcane-dim:hsl(var(--th) calc(var(--ts-a) * 53%) calc(51% + var(--tl-a)));

  --line:hsl(var(--th) calc(var(--ts-n) * 33%) 25%);
  --line-soft:hsl(var(--th) calc(var(--ts-n) * 29%) 17.5%);

  --parchment:#efe6c8;
  --parchment-dim:#b9ae8e;
  --ink:#1c1830;

  --gold:#d4af37;
  --gold-bright:#f2cf5a;
  --blood:#c23b3b;
  --frost:#4fb3d9;
  --green:#4a9d6b;

  --shadow-panel:0 14px 32px rgba(0,0,0,.45);
  --shadow-lift:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.18);
}

/* Violet / or d'origine : valeurs exactes conservées (aucun changement visible) */
[data-theme="actuel"], :root:not([data-theme]){
  --bg-void:#0b0a12;
  --bg-panel:#171325;
  --bg-panel-2:#1f1a30;
  --bg-panel-3:#241f38;
  --bg-glow:radial-gradient(ellipse 90% 60% at 50% -10%, #201a38 0%, transparent 60%);
  --arcane:#7c5cff;
  --arcane-dim:#5a41c4;
  --line:#332a54;
  --line-soft:#241f38;
}

/* Émeraude — forêt profonde, accent vert, or cuivré */
[data-theme="emeraude"]{
  --parchment:#e9e6d4;
  --parchment-dim:#a9b39f;
  --ink:#0f1a15;
  --gold:#c98a3e;
  --gold-bright:#e3ab5f;
  --green:#5cb37f;
  --shadow-lift:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(201,138,62,.2);
}

/* Sangor — pourpre et braise, accent cramoisi, or chaud */
[data-theme="sangor"]{
  --parchment:#f0e4d8;
  --parchment-dim:#bfa89c;
  --ink:#1e1112;
  --gold:#d9a63c;
  --gold-bright:#f0c15a;
  --blood:#e04b4b;
  --shadow-panel:0 14px 32px rgba(0,0,0,.5);
  --shadow-lift:0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(217,166,60,.2);
}

/* Givre — nuit glaciale, accent bleu glace, argent */
[data-theme="givre"]{
  --parchment:#e6eef5;
  --parchment-dim:#9db0c2;
  --ink:#0e1620;
  --gold:#9fb8c9;
  --gold-bright:#c3d7e3;
  --frost:#6fd0f0;
  --shadow-lift:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(159,184,201,.25);
}

/* Rayons communs (identiques quel que soit le thème) */
:root{
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;min-height:100%;
  background:var(--bg-glow), var(--bg-void);
  color:var(--parchment);
  font-family:'Inter',sans-serif;
  transition:background-color .25s ease, color .25s ease;
}

::selection{background:var(--arcane);color:#fff;}

/* ---------------- Typographie ---------------- */
.sc-h1, .sc-h2, .sc-h3{
  font-family:'Cinzel',serif;color:var(--gold);margin:0;letter-spacing:.3px;
}
.sc-h1{font-weight:900;font-size:clamp(20px,2.6vw,32px);text-shadow:0 2px 10px rgba(0,0,0,.6);}
.sc-h2{font-weight:700;font-size:clamp(15px,1.5vw,19px);}
.sc-h3{font-weight:700;font-size:14px;}
.sc-sub{color:var(--parchment-dim);font-size:13px;line-height:1.55;}

/* ---------------- Structure de page commune ---------------- */
.sc-page{
  min-height:100vh;width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:0 0 40px;
}

.sc-topbar{
  position:sticky;top:0;left:0;width:100%;z-index:30;
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
  background:linear-gradient(180deg, var(--bg-void) 0%, var(--bg-void) 60%, transparent 100%);
  backdrop-filter:blur(6px);
}
.sc-topbar-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--parchment-dim);text-decoration:none;font-size:13px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 10px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  background:var(--bg-panel);
}
.sc-topbar-back:hover{border-color:var(--gold);color:var(--gold);}
.sc-topbar-back svg{width:15px;height:15px;flex:none;}
.sc-topbar-title{
  font-family:'Cinzel',serif;font-weight:700;color:var(--gold);font-size:15px;letter-spacing:.4px;flex:1;
}
.sc-topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;}

.sc-container{
  width:100%;max-width:1180px;padding:26px 20px 0;
  display:flex;flex-direction:column;gap:22px;
}

.sc-header{
  display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;
  margin-bottom:4px;
}
.sc-header .sc-h1{margin-bottom:2px;}

/* ---------------- Panneaux ---------------- */
.sc-panel{
  background:linear-gradient(180deg, var(--bg-panel-2) 0%, var(--bg-panel) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);
  padding:20px;
}
.sc-panel-soft{
  background:var(--bg-panel);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  padding:16px;
}

/* ---------------- Boutons ---------------- */
.sc-btn{
  --btn-fg:var(--parchment);--btn-bg:var(--bg-panel-3);--btn-border:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--btn-fg);background:var(--btn-bg);border:1.5px solid var(--btn-border);
  border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;
  text-decoration:none;transition:transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  user-select:none;
}
.sc-btn:hover{border-color:var(--gold);transform:translateY(-1px);}
.sc-btn:active{transform:translateY(0);}
.sc-btn:disabled, .sc-btn.disabled{opacity:.45;cursor:default;pointer-events:none;}

.sc-btn-primary{--btn-bg:linear-gradient(180deg, hsl(calc(var(--th, 252) + 2.6) calc(var(--ts-a, 1) * 100%) calc(71% + var(--tl-a, 0%))) 0%, var(--arcane) 100%);--btn-border:hsl(calc(var(--th, 252) + 1.4) calc(var(--ts-a, 1) * 100%) calc(74.5% + var(--tl-a, 0%)));--btn-fg:#fff;background:var(--btn-bg);box-shadow:0 8px 20px hsl(calc(var(--th, 252) - 0.2) calc(var(--ts-a, 1) * 100%) calc(68% + var(--tl-a, 0%)) / .35);}
.sc-btn-primary:hover{box-shadow:0 10px 26px hsl(calc(var(--th, 252) - 0.2) calc(var(--ts-a, 1) * 100%) calc(68% + var(--tl-a, 0%)) / .5);}

.sc-btn-gold{--btn-bg:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);--btn-border:var(--gold-bright);--btn-fg:#241d0e;font-weight:700;}
.sc-btn-gold:hover{box-shadow:0 10px 24px rgba(212,175,55,.35);}

.sc-btn-ghost{--btn-bg:transparent;--btn-border:var(--line);}
.sc-btn-ghost:hover{background:var(--bg-panel-3);}

.sc-btn-sm{padding:6px 12px;font-size:12px;border-radius:7px;}
.sc-btn-icon{padding:9px;border-radius:999px;width:36px;height:36px;}

/* ---------------- Grille de navigation (tuiles du hub) ---------------- */
.sc-nav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:16px;
  width:100%;
}
/* La tuile "mise en avant" (ex : Jouer) prend toute la largeur, en
   bandeau horizontal ; les autres tuiles suivent en dessous dans une
   grille classique, sans case vide ni ligne bancale. */
.sc-nav-grid.sc-nav-grid-feature{
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}

.sc-tile{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(165deg, var(--bg-panel-2) 0%, var(--bg-panel) 65%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;text-decoration:none;color:inherit;cursor:pointer;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s ease, box-shadow .18s ease;
}
.sc-tile::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140px 90px at 85% -10%, rgba(212,175,55,.16), transparent 70%);
  opacity:0;transition:opacity .2s ease;
}
.sc-tile:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow-lift);}
.sc-tile:hover::before{opacity:1;}
.sc-tile-icon{
  width:44px;height:44px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--bg-panel-3);border:1px solid var(--line);
  color:var(--gold);
}
.sc-tile-icon svg{width:24px;height:24px;}
.sc-tile-title{font-family:'Cinzel',serif;font-weight:700;color:var(--parchment);font-size:16px;letter-spacing:.3px;}
.sc-tile-sub{color:var(--parchment-dim);font-size:12.5px;line-height:1.5;}
.sc-tile-badge{
  position:absolute;top:14px;right:14px;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--gold-bright);color:#241d0e;
  font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(242,207,90,.7);
}
.sc-tile-soon{cursor:default;}
.sc-tile-soon:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow-panel);}
.sc-tile-soon .sc-tile-icon{opacity:.5;}
.sc-tile-soon .sc-tile-title, .sc-tile-soon .sc-tile-sub{opacity:.55;}
.sc-ribbon{
  position:absolute;top:14px;right:-30px;transform:rotate(35deg);
  background:var(--blood);color:#fff;font-family:'Cinzel',serif;font-size:10px;font-weight:700;
  padding:3px 34px;letter-spacing:.5px;box-shadow:0 3px 8px rgba(0,0,0,.5);
}

/* Grande tuile "mise en avant" (ex : Jouer) : bandeau plein largeur,
   icône et texte côte à côte plutôt qu'empilés. */
.sc-tile-feature{
  grid-column:1 / -1;
  flex-direction:row;align-items:center;gap:20px;
  padding:24px 28px;
  background:
    radial-gradient(320px 160px at 88% 0%, hsl(calc(var(--th, 252) - 0.2) calc(var(--ts-a, 1) * 100%) calc(68% + var(--tl-a, 0%)) / .25), transparent 70%),
    linear-gradient(165deg, var(--bg-panel-2) 0%, var(--bg-panel) 70%);
}
.sc-tile-feature .sc-tile-icon{width:56px;height:56px;flex:none;}
.sc-tile-feature .sc-tile-icon svg{width:30px;height:30px;}
.sc-tile-feature .sc-tile-body{display:flex;flex-direction:column;gap:6px;}
.sc-tile-feature .sc-tile-title{font-size:20px;}
.sc-tile-feature .sc-tile-sub{font-size:13.5px;max-width:460px;}

@media (max-width:640px){
  .sc-tile-feature{flex-direction:column;align-items:flex-start;}
}

/* ---------------- Badges / pastilles d'état ---------------- */
.sc-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-panel-3);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:12px;color:var(--parchment-dim);font-weight:600;
}
.sc-pill-gold{color:var(--gold);border-color:rgba(212,175,55,.4);}

/* ---------------- Barre de progression ---------------- */
.sc-progress{width:100%;height:8px;border-radius:999px;background:var(--bg-panel-3);overflow:hidden;border:1px solid var(--line);}
.sc-progress-fill{height:100%;background:linear-gradient(90deg, var(--arcane-dim), var(--arcane));border-radius:999px;transition:width .3s ease;}

/* ---------------- Overlay / modale communs ---------------- */
.sc-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(6,5,10,.88);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px;
}
.sc-overlay.show{display:flex;}
.sc-modal{
  background:var(--bg-panel);border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 26px;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;position:relative;
  box-shadow:var(--shadow-lift);
}
.sc-modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;color:var(--parchment-dim);
  font-size:20px;cursor:pointer;line-height:1;
}
.sc-modal-close:hover{color:var(--gold);}

/* ---------------- Scrollbars (cohérence visuelle) ---------------- */
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--bg-panel-3);border-radius:999px;border:1px solid var(--line);}
*::-webkit-scrollbar-thumb:hover{background:var(--line);}

/* ============================================================
   Petits écrans / tactile (téléphone) — chantier mobile
   N'agit que sous 640 px de large ou sur écran sans survol, donc
   rien ne change sur ordinateur.
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
button,a,select,summary,[role=button]{touch-action:manipulation;}
@media (max-width:640px){
  .sc-page{padding-bottom:72px;} /* laisse la place au bouton Feedback flottant */
  .sc-topbar{padding:8px 12px;gap:8px;}
  .sc-topbar-back{padding:9px 11px;font-size:0;gap:0;} /* flèche seule : le titre garde la place */
  .sc-topbar-back svg{width:18px;height:18px;}
  .sc-topbar-right{min-width:0;flex-shrink:1;gap:6px;}
  .sc-topbar-title{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sc-container{padding:16px 12px 0;gap:16px;}
  .sc-panel{padding-left:14px;padding-right:14px;}
  .sc-btn{min-height:40px;}
  .sc-btn-sm{min-height:36px;}
  input,select,textarea{font-size:16px;} /* évite le zoom automatique d'iOS au clic dans un champ */
  table{display:block;overflow-x:auto;max-width:100%;}
}