/* ================================================================
   EPIC CHESS : STYLE PRINCIPAL
   ================================================================
   Structure de ce fichier (recherchez les tags [SECTION] pour naviguer) :
     [THEME]        variables CSS clair/sombre + reset
     [COMMON]       boutons, notifications, typographie partagée
     [INTRO]        parchemin d'accueil (première visite)
     [ACCOUNTS]     page de connexion, liste comptes, modal mot de passe, cab (barre compte)
     [AI-LEVEL]     modal de choix d'instructeur IA
     [BUILDER]      page de composition d'armée (filtres, cartes de pièces, slots)
     [SETTINGS]     bouton + panneau réglages (thème, volume)
     [ARMIES]       pages "Mes armées" / "Armées IA"
     [COMBAT-INTRO] page d'intro combat (VS, présentation armées)
     [GAME]         page de jeu : plateau, sidebars, historique, drag&drop
     [MODALS-GAME]  promotion, primordiale
     [VOIE]         page "Voie des Victoires" (ELO, rangs, jalons)
     [TOURNOI]      page tournoi + modal d'analyse replay
     [ADMIN]        badge mode administrateur
     [SEO]          bloc de contenu indexable sous la carte de connexion
   Si vous ne modifiez qu'une page, cherchez son tag pour cibler la zone
   à éditer sans tout relire. Les variables de thème (:root / body.light)
   sont utilisées PARTOUT : ne pas les renommer sans grep global.
   ================================================================ */

/* [THEME] ======================================================= */
/* Identité visuelle : laboratoire d'alchimie abandonné. --gold/--gold2
   deviennent des tons laiton/cuivre (instruments d'apothicaire) plutôt que
   de l'or de trésor ; --accent/--accent2 basculent vers une encre violette
   arcanique. --potion (nouveau) sert aux touches de lueur toxique/phosphorescente
   (fioles, éclaboussures) dans les zones ajoutées pour ce thème. Les couleurs
   de classe de pièce (--monarque/--general/etc.) restent inchangées : elles
   distinguent des catégories de jeu, pas l'ambiance générale. */
:root{
  /* Palette éclaircie (v2) : le labo reste sombre et ambré, mais les fonds
     n'écrasent plus le texte, luminosité et contraste relevés partout pour
     ne plus forcer les yeux en usage normal. */
  --bg:#1d1a10;--surface:#2a2417;--surface2:#342d1c;--border:#584d31;--border2:#7a6c44;
  --text:#ecdfbb;--muted:#a89f7c;--accent:#5c2f6b;--accent2:#8d4b96;--gold:#bd9548;--gold2:#e0bc63;
  --success:#5fae4a;--danger:#b6394a;
  --potion:#6fae44;--potion-glow:rgba(111,174,68,.28);--potion-dark:#2f5c28;
  --monarque:#3b6ea5;--monarque-bg:rgba(59,110,165,0.14);
  --general:#c9752e;--general-bg:rgba(201,117,46,0.14);
  --primordiale:#3f7d4a;--primordiale-bg:rgba(63,125,74,0.14);
  --sorcier:#9d3f7d;--sorcier-bg:rgba(157,63,125,0.14);
  --brute:#a23a3a;--brute-bg:rgba(162,58,58,0.14);
  --parchment-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
body.light{
  --bg:#ece6ce;--surface:#f7f0d8;--surface2:#f0e8ca;--border:#c7b98c;--border2:#a8996699;
  --text:#221d0d;--muted:#655c39;--accent:#4a2456;--accent2:#7a3f82;--gold:#82661f;--gold2:#a17c1c;
  --success:#3f7a30;--potion:#4d8a35;--potion-glow:rgba(77,138,53,.18);
  --monarque-bg:rgba(59,110,165,.10);--general-bg:rgba(201,117,46,.10);
  --primordiale-bg:rgba(63,125,74,.10);--sorcier-bg:rgba(157,63,125,.10);--brute-bg:rgba(162,58,58,.10);
}
*{box-sizing:border-box;margin:0;padding:0;transition:background-color .45s ease,border-color .45s ease,color .45s ease,box-shadow .45s ease,fill .45s ease;}
html{scroll-behavior:auto;scrollbar-gutter:stable}
html,body{min-height:100%;color:var(--text);overflow-x:hidden;font-family:'Crimson Pro',Georgia,serif;transition:background .5s ease,color .5s ease}
body{
  background-color:var(--bg);
  /* Lueur toxique en coin (fiole hors-champ) + voile de vignette + grain
     parchemin, en plus du dégradé doré d'origine, pour une ambiance labo abandonné. */
  background-image:var(--parchment-noise),radial-gradient(ellipse at 8% 108%,var(--potion-glow),transparent 45%),radial-gradient(ellipse at 50% -10%,rgba(168,130,58,.14),transparent 60%),radial-gradient(ellipse at 50% 110%,rgba(0,0,0,.24),transparent 55%);
  background-blend-mode:overlay,normal,normal,normal;
  background-attachment:fixed;
  background-size:180px 180px,100% 100%,100% 100%,100% 100%;
}
::selection{background:var(--gold);color:#140f06}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.page{display:none}
.page.active{display:block;animation:pageFadeIn .32s ease both}
#page-combat.active,#page-game.active{animation:pageFadeIn .4s ease both}
/* Fade + léger glissement, sans scale/blur (qui déformaient la page). */
@keyframes pageFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cinzel{font-family:'Cinzel',serif}
.glow-text{background:linear-gradient(135deg,var(--gold),var(--gold2),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* [COMMON] ======================================================= */
.btn{padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;border:none;font-size:13px;transition:all .2s;font-family:'Cinzel',serif;letter-spacing:.5px;text-transform:uppercase;position:relative}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}.btn-ghost:hover{border-color:var(--accent2);color:var(--accent2)}
.btn-primary{background:var(--accent2);color:#f4e8d8;box-shadow:0 2px 0 rgba(0,0,0,.35) inset;border:1px solid rgba(0,0,0,.25)}.btn-primary:hover{background:var(--accent)}
.btn-gold{background:var(--gold);color:#241a10;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.3) inset;border:1px solid rgba(0,0,0,.25)}.btn-gold:hover{background:var(--gold2)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.25)}.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none!important}
@keyframes nIn{from{transform:translate(-50%,-50px);opacity:0}to{transform:translateX(-50%);opacity:1}}

/* --- FIOLE D'ALCHIMISTE : icône décorative dessinée en CSS pur (pas
   d'émoji) : col + ballon avec un fond de liquide et un léger bouillonnement.
   Réutilisée pour les états vides et les emplacements de face du cube.
   Tailles via .vial-lg (grande, faces du cube) / défaut = petite. --- */
.vial{position:relative;width:40px;height:56px;margin:0 auto;display:block}
.vial::before{content:'';position:absolute;left:50%;top:0;width:12px;height:20px;margin-left:-6px;border:3px solid var(--gold2);border-bottom:none;border-radius:3px 3px 0 0}
.vial::after{content:'';position:absolute;left:50%;bottom:0;width:36px;height:34px;margin-left:-18px;border:3px solid var(--gold2);border-top:none;border-radius:2px 2px 18px 18px;background:linear-gradient(180deg,transparent 0 45%,var(--potion) 45%);overflow:hidden}
.vial-bubble{position:absolute;left:50%;bottom:8px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--potion-glow);animation:vialBubble 2.6s ease-in infinite}
.vial-lg{width:64px;height:90px}
.vial-lg::before{width:18px;height:30px;margin-left:-9px;border-width:4px}
.vial-lg::after{width:58px;height:56px;margin-left:-29px;border-width:4px}
/* Teinte différente par face du cube : chaque fiole de laboratoire a son propre mélange. */
.vial-missions::before,.vial-missions::after{border-color:var(--accent2)}
.vial-missions::after{background:linear-gradient(180deg,transparent 0 45%,var(--accent2) 45%)}
.vial-variantes::before,.vial-variantes::after{border-color:var(--danger)}
.vial-variantes::after{background:linear-gradient(180deg,transparent 0 45%,var(--danger) 45%)}
@keyframes vialBubble{0%{transform:translateY(0);opacity:.9}90%{opacity:.5}100%{transform:translateY(-30px);opacity:0}}

/* --- BULLES AMBIANTES : quelques bulles de potion qui montent lentement en
   arrière-plan, pour ne pas laisser les faces/pages peu remplies totalement
   figées. Une seule couche de particules réutilisable. --- */
.ambient-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ambient-bubbles span{position:absolute;bottom:-10%;border-radius:50%;background:var(--potion-glow);opacity:0;animation:ambientRise linear infinite}
.ambient-bubbles span:nth-child(1){left:12%;width:6px;height:6px;animation-duration:11s;animation-delay:0s}
.ambient-bubbles span:nth-child(2){left:28%;width:4px;height:4px;animation-duration:8s;animation-delay:1.5s}
.ambient-bubbles span:nth-child(3){left:47%;width:8px;height:8px;animation-duration:14s;animation-delay:3s}
.ambient-bubbles span:nth-child(4){left:66%;width:5px;height:5px;animation-duration:9.5s;animation-delay:.7s}
.ambient-bubbles span:nth-child(5){left:82%;width:7px;height:7px;animation-duration:12.5s;animation-delay:2.2s}
.ambient-bubbles span:nth-child(6){left:93%;width:4px;height:4px;animation-duration:10s;animation-delay:4s}
@keyframes ambientRise{0%{transform:translateY(0);opacity:0}8%{opacity:.7}92%{opacity:.3}100%{transform:translateY(-115vh);opacity:0}}

/* [INTRO] ========================================================= */
/* Parchemin d'accueil, affiché une seule fois (voir showIntroModal() dans
   js/main.js). Volontairement indépendant du thème clair/sombre : un
   vieux parchemin reste un vieux parchemin, jour ou nuit. */
.intro-modal{position:fixed;inset:0;background:rgba(8,6,2,.86);display:flex;
  align-items:center;justify-content:center;z-index:9500;padding:20px;
  animation:introFadeIn .3s ease both}
@keyframes introFadeIn{from{opacity:0}to{opacity:1}}
.intro-parchment{position:relative;max-width:620px;width:100%;max-height:88vh;overflow-y:auto;
  border-radius:6px 16px 8px 20px/16px 6px 20px 8px;
  background:
    var(--parchment-noise),
    radial-gradient(ellipse at 15% 8%,rgba(139,105,46,.25),transparent 55%),
    radial-gradient(ellipse at 88% 95%,rgba(90,60,20,.3),transparent 55%),
    linear-gradient(160deg,#e8d8ad,#d9c491);
  background-blend-mode:overlay,normal,normal,normal;
  box-shadow:0 0 0 1px #7a5f2e,0 0 0 7px #dccc9c,0 0 0 8px #7a5f2e,0 20px 60px rgba(0,0,0,.55);
  animation:introPop .35s cubic-bezier(.22,.61,.36,1) both}
@keyframes introPop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.intro-parchment-inner{padding:34px 32px 30px;text-align:center;color:#3a2c14}
.intro-seal{margin:0 auto 12px}
.intro-seal::before,.intro-seal::after{border-color:#6b4f1e!important}
.intro-title{font-family:'Cinzel Decorative','Cinzel',serif;font-weight:900;
  font-size:clamp(20px,4.4vw,27px);color:#6b4f1e;margin-bottom:16px;letter-spacing:.5px}
.intro-p{font-family:'Crimson Pro',Georgia,serif;font-size:15px;line-height:1.65;
  text-align:left;margin-bottom:16px;color:#3a2c14}
.intro-list{text-align:left;list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
.intro-list li{font-family:'Crimson Pro',Georgia,serif;font-size:14px;line-height:1.55;
  padding:10px 14px;border-left:3px solid #8a6a26;background:rgba(122,95,46,.09);border-radius:0 8px 8px 0}
.intro-list li strong{font-family:'Cinzel',serif;color:#6b4f1e;font-weight:700}
.intro-close{width:100%;font-size:13px;padding:14px 20px}

/* [ACCOUNTS] ======================================================= */
/* La page de connexion porte désormais le bloc de contenu SEO (.lore) sous
   la carte, donc elle dépasse la hauteur de l'écran. `align-items:center`
   sur un conteneur qui déborde rend le haut du contenu inatteignable au
   scroll ; `margin-block:auto` sur l'enfant centre quand il y a de la place
   et retombe proprement en haut quand il n'y en a plus. */
#page-login{min-height:100vh;align-items:flex-start;justify-content:center;padding:20px;background:var(--bg)}
#page-login.active{display:flex}
.login-wrap{width:100%;max-width:480px;margin-block:auto}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo h1{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(28px,7vw,48px);background:linear-gradient(135deg,var(--gold),var(--gold2),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.login-logo p{font-size:13px;color:var(--muted);margin-top:6px;font-style:italic}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.lbl{font-family:'Cinzel',serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px}
.acc-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--bg);margin-bottom:7px;cursor:pointer;transition:all .18s}
.acc-item:hover{border-color:var(--accent2);background:rgba(122,31,43,.06)}
.acc-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:800;font-size:16px;color:#fff;flex-shrink:0}
.acc-info{flex:1}.acc-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700}.acc-meta{font-size:11px;color:var(--muted);margin-top:2px}
.acc-del{width:28px;height:28px;border-radius:6px;background:transparent;border:none;cursor:pointer;color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.acc-del:hover{background:rgba(239,68,68,.15);color:var(--danger)}
.ldiv{border:none;border-top:1px solid var(--border);margin:16px 0}
.iform{display:flex;flex-direction:column;gap:10px}
.linput{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'Crimson Pro',serif;outline:none;transition:border-color .2s;width:100%}
.linput:focus{border-color:var(--accent2)}.linput::placeholder{color:var(--muted)}
.pw-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:9000;visibility:hidden}
.pw-modal.show{visibility:visible}
.pw-box{background:var(--surface2);border:1px solid var(--border2);border-radius:14px;padding:28px;min-width:300px;max-width:380px;text-align:center}
.cab{position:fixed;top:0;left:0;right:0;height:50px;background:linear-gradient(180deg,var(--surface2),var(--surface));border-bottom:2px solid var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.4);display:flex;align-items:center;padding:0 58px 0 18px;gap:14px;z-index:500;font-family:'Cinzel',serif;font-size:13px}
.cab-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 0 0 2px var(--gold),0 2px 6px rgba(0,0,0,.5)}
#cab-name{font-size:15px;font-weight:800;letter-spacing:.5px}
#cab-elo{font-size:13px!important;font-weight:800;padding:5px 14px;border-radius:8px;background:rgba(201,162,39,.14);border:1px solid var(--gold);color:var(--gold)!important;letter-spacing:.5px}
#cab-elo.admin-elo{background:rgba(201,162,39,.24);border-color:var(--gold2)}
.cab-sw{padding:8px 18px;font-size:12px;font-weight:700;border:1px solid rgba(230,90,100,.65)!important;border-radius:8px;background:rgba(230,90,100,.2);color:#f2b8bd!important;cursor:pointer;font-family:'Cinzel',serif;transition:all .15s;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.cab-sw:hover{border-color:#f2b8bd!important;background:rgba(230,90,100,.35);color:#fff!important;transform:translateY(-1px)}
/* Pas de logo/titre sur la page builder (retiré) : juste la clearance de la
   barre de compte + un petit espace de respiration, la page remonte. */
body.has-acc #page-builder{padding-top:calc(50px + 14px)}
body.has-acc #page-armies,body.has-acc #page-ai-armies,body.has-acc #page-voie{padding-top:calc(50px + 32px)}
body.has-acc #page-combat{padding-top:50px}
body.has-acc .game-wrap{height:calc(100vh - 50px);margin-top:50px}

/* [AI-LEVEL] ======================================================= */
.ai-lvl-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:4500;visibility:hidden}
.ai-lvl-modal.show{visibility:visible}
.ai-lvl-box{background:var(--surface2);border:1px solid var(--border2);border-radius:18px;padding:28px;max-width:640px;width:93%;position:relative;overflow:hidden;max-height:90vh;overflow-y:auto}
.ai-lvl-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.ai-lvl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:14px 0}
.ai-lvl-card{background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s}
.ai-lvl-card:hover:not(.lvl-locked){transform:translateY(-3px);border-color:var(--gold)}
.ai-lvl-card.lvl-locked{opacity:.35;cursor:not-allowed;filter:grayscale(.6)}
.lvl-name{font-family:'Cinzel',serif;font-size:11px;font-weight:700;margin-bottom:3px}
.lvl-info{font-size:10px;color:var(--muted);margin-bottom:4px}
.lvl-ok{font-size:9px;color:var(--success);font-family:'Cinzel',serif}
.lvl-lock{font-size:9px;color:var(--danger);font-family:'Cinzel',serif}

/* [CONFIRM MODAL] : remplace window.confirm() ================== */
.confirm-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:8500;visibility:hidden;opacity:0;transition:opacity .15s ease}
.confirm-modal.show{visibility:visible;opacity:1}
.confirm-box{background:var(--surface2);border:1px solid var(--border2);border-radius:16px;padding:26px 28px;max-width:380px;width:90%;position:relative;overflow:hidden;text-align:center}
.confirm-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.confirm-msg{font-family:'Cinzel',serif;font-size:15px;margin-bottom:20px;line-height:1.5}

/* [BUILDER] ======================================================= */
#page-builder{padding:clamp(16px,3vw,32px) clamp(12px,2vw,20px)}
.builder-inner{max-width:1400px;margin:0 auto}
.builder-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.theme-btn{padding:7px 14px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-size:12px;font-family:'Cinzel',serif;transition:all .2s;display:flex;align-items:center;gap:6px}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
/* Topbar (boutons + valeur) et "Votre armée" fusionnés en UN seul panneau
   compact (.army-box) plutôt que deux blocs empilés, voir markup dans
   index.html. .builder-panel-top est juste la rangée boutons/valeur à
   l'intérieur de ce panneau, sans fond ni bordure propres. */
.builder-panel-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.topbar-btns{display:flex;gap:8px;flex-wrap:wrap}
.topbar-stats{display:flex;gap:10px;margin-left:auto}
.stat-pill{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:6px 14px;text-align:center;min-width:80px;transition:background .3s}
.stat-pill .sp-label{font-size:9px;color:var(--muted);text-transform:uppercase;font-family:'Cinzel',serif;letter-spacing:1px;margin-bottom:2px}
.stat-pill .sp-val{font-size:16px;font-weight:700;font-family:'Cinzel',serif;color:var(--text)}
.army-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:18px;position:relative;overflow:hidden;transition:background .3s}
.army-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);opacity:.5}
.army-box-title{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:var(--gold);margin-bottom:10px;letter-spacing:1px}
.comp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.comp-slot{background:var(--bg);border:2px dashed var(--border);border-radius:12px;padding:20px 14px;min-height:186px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .2s}
.comp-slot.filled{border-style:solid}
.comp-slot.draggable-slot{cursor:grab}
.comp-slot.draggable-slot::before{content:'⠿';position:absolute;top:6px;left:8px;font-size:12px;color:var(--muted);opacity:.5;letter-spacing:-2px}
.comp-slot.draggable-slot:active{cursor:grabbing}
.comp-slot.slot-dragging{opacity:.4}
.comp-slot.slot-over{outline:2px dashed var(--gold);outline-offset:2px}
.comp-slot .cs-label{font-size:11px;color:var(--muted);text-transform:uppercase;font-family:'Cinzel',serif;letter-spacing:.8px;margin-bottom:10px}
.comp-slot .cs-emoji{font-size:42px;margin-bottom:10px;display:block;line-height:1}
.comp-slot .cs-name{font-size:15px;font-weight:700;margin-bottom:7px;text-align:center;line-height:1.3}
.comp-slot .cs-val{font-size:13px;padding:4px 11px;background:rgba(255,255,255,.06);border-radius:6px;font-family:'Cinzel',serif;font-weight:700}
.comp-slot .cs-rm{position:absolute;top:6px;right:6px;width:22px;height:22px;cursor:pointer;opacity:.35;transition:all .15s;display:flex;align-items:center;justify-content:center;border-radius:4px}
.comp-slot .cs-rm:hover{opacity:1;background:rgba(239,68,68,.2)}
.comp-slot .cs-rm svg{width:11px;height:11px;stroke:white;stroke-width:2.5;stroke-linecap:round}
.comp-slot.Monarque.filled{background:var(--monarque-bg);border-color:var(--monarque)}.comp-slot.Monarque .cs-val{color:var(--monarque)}
.comp-slot.Général.filled{background:var(--general-bg);border-color:var(--general)}.comp-slot.Général .cs-val{color:var(--general)}
.comp-slot.Primordiale.filled{background:var(--primordiale-bg);border-color:var(--primordiale)}.comp-slot.Primordiale .cs-val{color:var(--primordiale)}

.comp-slot.Sorcier.filled{background:var(--sorcier-bg);border-color:var(--sorcier)}.comp-slot.Sorcier .cs-val{color:var(--sorcier)}
.comp-slot.Brute.filled{background:var(--brute-bg);border-color:var(--brute)}.comp-slot.Brute .cs-val{color:var(--brute)}

/* Le "slot" de catégorie englobe TOUTE la section (titre + toutes ses
   cartes), pas seulement le bandeau de titre. Accent de couleur à gauche ET
   fond LÉGÈREMENT teinté de la couleur de la catégorie autour des cartes :
   assez pour identifier la section d'un coup d'œil, assez discret pour ne
   pas rendre la page criarde (les cartes gardent leur propre fond). */
.class-sec{margin-bottom:20px;border-radius:4px 12px 12px 4px;
  padding:14px 16px 16px;border:1px solid var(--border);border-left-width:4px;background:var(--surface)}
/* Le lavis de couleur est posé PAR-DESSUS --surface (dégradé plat d'une
   couleur translucide) : le panneau reste opaque, seules les cartes gardent
   leur fond neutre et ressortent donc du fond teinté. */
.class-sec.Monarque{border-left-color:var(--monarque);background:linear-gradient(var(--monarque-bg),var(--monarque-bg)),var(--surface)}
.class-sec.Général{border-left-color:var(--general);background:linear-gradient(var(--general-bg),var(--general-bg)),var(--surface)}
.class-sec.Primordiale{border-left-color:var(--primordiale);background:linear-gradient(var(--primordiale-bg),var(--primordiale-bg)),var(--surface)}
.class-sec.Brute{border-left-color:var(--brute);background:linear-gradient(var(--brute-bg),var(--brute-bg)),var(--surface)}
.class-sec.Sorcier{border-left-color:var(--sorcier);background:linear-gradient(var(--sorcier-bg),var(--sorcier-bg)),var(--surface)}
.class-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.class-hdr-name{font-family:'Cinzel',serif;font-size:16px;font-weight:700}
.class-hdr-name.Monarque{color:var(--monarque)}.class-hdr-name.Général{color:var(--general)}.class-hdr-name.Primordiale{color:var(--primordiale)}.class-hdr-name.Brute{color:var(--brute)}.class-hdr-name.Sorcier{color:var(--sorcier)}
/* 3 cartes par rangée, toujours (voir equalizeCardHeights() dans builder.js
   pour la mise à niveau des hauteurs) : colonnes fixes plutôt qu'auto-fill,
   pour garantir la disposition même si le contenu des cartes est court. */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.piece-card{border:1px solid var(--border);border-radius:14px;padding:20px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;background:var(--surface)}
.piece-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1);transform-origin:left}
.piece-card.Monarque{background:var(--surface);border-color:var(--border)}.piece-card.Monarque::after{background:var(--monarque)}
.piece-card.Général{background:var(--surface);border-color:var(--border)}.piece-card.Général::after{background:var(--general)}
.piece-card.Primordiale{background:var(--surface);border-color:var(--border)}.piece-card.Primordiale::after{background:var(--primordiale)}
.piece-card.Sorcier{background:var(--surface);border-color:var(--border)}.piece-card.Sorcier::after{background:var(--sorcier)}
.piece-card.Brute{background:var(--surface);border-color:var(--border)}.piece-card.Brute::after{background:var(--brute)}

.piece-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.piece-card:hover::after{transform:scaleX(1)}
.piece-card.sel{opacity:.4;transform:scale(.94);filter:grayscale(.4);cursor:default}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:6px}
.pc-name{font-size:15px;font-weight:700;font-family:'Cinzel',serif;flex:1;line-height:1.25}
.pc-val{padding:5px 11px;border-radius:8px;font-size:13px;font-weight:800;font-family:'Cinzel',serif;border:1px solid transparent}
.pc-val.Monarque{background:var(--monarque-bg);color:var(--monarque);border-color:rgba(59,130,246,.3)}
.pc-val.Général{background:var(--general-bg);color:var(--general);border-color:rgba(249,115,22,.3)}
.pc-val.Primordiale{background:var(--primordiale-bg);color:var(--primordiale);border-color:rgba(16,185,129,.3)}

.pc-val.Sorcier{background:var(--sorcier-bg);color:var(--sorcier);border-color:rgba(236,72,153,.3)}
.pc-val.Brute{background:var(--brute-bg);color:var(--brute);border-color:rgba(239,68,68,.3)}

.pc-emoji{font-size:36px;margin-bottom:10px;display:block;line-height:1}
/* .pc-class : utilisé par voie.js (jalons) et game-flow.js (déblocage),
   pas seulement par les cartes de pièces du builder (qui n'affichent plus
   ce badge, jugé redondant avec l'en-tête de section). */
.pc-class{font-size:9px;text-transform:uppercase;font-family:'Cinzel',serif;letter-spacing:.8px;margin-bottom:10px;padding:3px 8px;border-radius:5px;display:inline-block;font-weight:700}
.pc-class.Monarque{background:var(--monarque-bg);color:var(--monarque);border:1px solid rgba(59,130,246,.25)}
.pc-class.Général{background:var(--general-bg);color:var(--general);border:1px solid rgba(249,115,22,.25)}
.pc-class.Primordiale{background:var(--primordiale-bg);color:var(--primordiale);border:1px solid rgba(16,185,129,.25)}
.pc-class.Sorcier{background:var(--sorcier-bg);color:var(--sorcier);border:1px solid rgba(236,72,153,.25)}
.pc-class.Brute{background:var(--brute-bg);color:var(--brute);border:1px solid rgba(239,68,68,.25)}
.pc-mvt{font-size:11.5px;margin-bottom:6px;display:flex;align-items:center;gap:5px;color:var(--muted);background:rgba(255,255,255,.04);padding:5px 8px;border-radius:6px;font-family:'Cinzel',serif;line-height:1.4}
.pc-ability{font-size:12px;color:var(--text);line-height:1.5;padding:8px;background:var(--bg);border-radius:8px;border-left:2px solid var(--accent);margin-top:6px}
.piece-card.locked{cursor:not-allowed;position:relative;opacity:.5;filter:grayscale(.85) brightness(.5);background:rgba(0,0,0,.35);border-color:rgba(0,0,0,.4)}
.piece-card.locked .pc-emoji,.piece-card.locked .pc-name,.piece-card.locked .pc-ability,.piece-card.locked .pc-mvt,.piece-card.locked .pc-val{filter:blur(7px);pointer-events:none;user-select:none}
.locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:3;border-radius:16px;background:rgba(0,0,0,.55)}
/* Cadenas dessiné en CSS pur (pas d'émoji) : anse + corps. */
.locked-overlay .lock-icon{position:relative;width:20px;height:24px;filter:drop-shadow(0 0 6px rgba(0,0,0,.9));opacity:.9}
.locked-overlay .lock-icon::before{content:'';position:absolute;top:0;left:3px;width:14px;height:11px;box-sizing:border-box;border:3px solid var(--gold2);border-bottom:none;border-radius:8px 8px 0 0}
.locked-overlay .lock-icon::after{content:'';position:absolute;top:8px;left:0;width:20px;height:16px;background:var(--gold2);border-radius:3px}
.locked-overlay .lock-rank{font-family:'Cinzel',serif;font-size:10px;font-weight:700;color:var(--gold);background:rgba(0,0,0,.75);border-radius:6px;padding:3px 8px;letter-spacing:.5px}
.builder-mode-banner{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.4);border-radius:9px;padding:10px 16px;margin-bottom:14px;font-family:'Cinzel',serif;font-size:12px;color:var(--accent2);display:none}
.builder-mode-banner.show{display:block}
@media(max-width:760px){.comp-grid{grid-template-columns:repeat(3,1fr)}.cards-grid{grid-template-columns:repeat(2,1fr)}}

/* [SETTINGS] ======================================================= */
#settings-btn{position:fixed;top:8px;right:12px;z-index:8000;width:34px;height:34px;border-radius:8px;background:var(--surface);border:1px solid var(--border2);color:var(--text);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
#settings-btn svg{width:18px;height:18px}
#settings-btn:hover{border-color:var(--gold);color:var(--gold)}
#settings-panel{position:fixed;top:50px;right:12px;z-index:7999;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:14px 16px;min-width:220px;box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;animation:settingsPanelIn .18s ease}
#settings-panel.open{display:block}
/* Panneau ancré à droite : pas de translateX (nIn est fait pour un élément
   centré horizontalement, il décalait ce panneau vers la gauche). */
@keyframes settingsPanelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.sp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-family:'Cinzel',serif;font-size:11px;color:var(--text)}
.sp-row:last-child{margin-bottom:0}
.sp-label{font-size:11px;font-family:'Cinzel',serif;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.sp-toggle{width:36px;height:20px;border-radius:10px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;background:var(--border2)}
.sp-toggle.on{background:var(--accent)}
.sp-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.sp-toggle.on::after{left:19px}
.sp-slider{-webkit-appearance:none;appearance:none;width:100px;height:4px;border-radius:2px;background:var(--border2);outline:none;cursor:pointer}
.sp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent2);cursor:pointer}
.sp-divider{border:none;border-top:1px solid var(--border);margin:10px 0}

/* [ARMIES] ======================================================= */
#page-armies{padding:clamp(16px,3vw,32px) clamp(12px,3vw,20px);min-height:100vh;background:var(--bg)}
.armies-inner{max-width:980px;margin:0 auto}
.armies-hdr{display:flex;align-items:center;gap:12px;margin-bottom:28px;flex-wrap:wrap}
.armies-title{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(20px,4.5vw,26px);font-weight:900;flex:1}
.armies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.army-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all .22s;position:relative;overflow:hidden}
.army-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);opacity:.4}
.army-card:hover{border-color:var(--border2);box-shadow:0 6px 28px rgba(0,0,0,.5)}
.ac-name-row{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ac-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--gold);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-name-edit-btn{width:22px;height:22px;flex-shrink:0;border:1px solid var(--border2);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ac-name-edit-btn:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.1)}
.ac-name-btn{font-size:11px!important;padding:6px 12px!important;margin-bottom:10px;width:100%}
.ac-name-edit-row{display:flex;gap:6px;margin-bottom:10px}
.ac-name-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border2);border-radius:7px;padding:6px 10px;color:var(--text);font-size:12px;font-family:'Crimson Pro',serif;outline:none}
.ac-name-input:focus{border-color:var(--gold)}
.ac-pieces{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;font-size:24px}
.ac-names{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.ac-val{display:inline-flex;align-items:center;gap:5px;font-family:'Cinzel',serif;font-size:10px;color:var(--gold);background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.18);border-radius:5px;padding:3px 8px}
.ac-btns{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
/* Mode sélection d'armée (lancement d'un combat/tournoi depuis le menu) */
.armies-select-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-10px 0 22px;padding:12px 16px;border:1px solid rgba(201,162,39,.35);border-radius:12px;background:rgba(201,162,39,.07)}
.armies-select-banner .asb-txt{flex:1;font-family:'Cinzel',serif;font-size:13px;color:var(--gold)}
.army-card-selectable{cursor:pointer}
.army-card-selectable:hover{border-color:var(--gold);box-shadow:0 6px 28px rgba(201,162,39,.22);transform:translateY(-2px)}
.army-card-selectable::before{opacity:1}
.ac-name-none{opacity:.6}
.empty-armies{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted);font-size:15px;font-style:italic}
.empty-armies .vial{margin-bottom:14px;opacity:.4}
#page-ai-armies{padding:clamp(16px,3vw,32px) clamp(12px,3vw,20px);min-height:100vh;background:var(--bg)}

/* [COMBAT-INTRO] ======================================================= */
#page-combat{min-height:100vh;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
#page-combat.active{display:flex}
.cbg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#2a0f0a 0%,var(--bg) 68%);z-index:0}
.cparts{position:absolute;inset:0;z-index:1;pointer-events:none}
.cinner{position:relative;z-index:2;text-align:center;padding:20px;width:100%;max-width:820px;margin:0 auto}
.ctitle{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(26px,6vw,50px);font-weight:900;margin-bottom:10px;color:var(--gold)}
.csubt{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:28px}
.cvs{display:flex;align-items:center;gap:32px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.cside{text-align:center;min-width:140px}
.cside-lbl{font-family:'Cinzel',serif;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.cside-pieces{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:10px;font-size:26px}
.cside-name{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--text)}
.vs-div{font-family:'Cinzel',serif;font-size:44px;font-weight:900;color:var(--gold);text-shadow:0 0 24px rgba(201,168,76,.6);animation:vsp 1.6s ease-in-out infinite}
@keyframes vsp{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes rvl{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.rv{animation:rvl .55s ease both}.rv1{animation-delay:.1s}.rv2{animation-delay:.25s}.rv3{animation-delay:.4s}.rv4{animation-delay:.55s}.rv5{animation-delay:.7s}
@keyframes rise{0%{transform:translateY(0) scale(.5);opacity:0}10%{opacity:.8}90%{opacity:.3}100%{transform:translateY(-90vh) scale(2.5);opacity:0}}
.rise-particle{position:absolute;border-radius:50%;pointer-events:none;animation:rise linear infinite}

/* [GAME] ======================================================= */
#page-game{padding:0;min-height:100vh;background:var(--bg)}
#page-game.active{display:block}
.game-wrap{display:flex;height:100vh;overflow:hidden}
.game-sidebar-left{width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:10px;gap:8px;overflow-y:auto;transition:background .3s}
.game-main{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;min-width:0;overflow-y:auto;overflow-x:hidden}
.game-sidebar-right{width:250px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:10px;overflow:hidden;transition:background .3s}
.gsb-title{font-family:'Cinzel',serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.captured-row{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px;font-size:18px;min-height:26px}
/* Réserve verticale pour : barre de statut + labels de colonnes + le
   padding de .game-main. Les identifiants/horloges des joueurs sont
   maintenant dans la sidebar de droite, pas au-dessus/en-dessous du
   plateau, ils n'ont donc plus besoin d'espace ici. */
.game-board-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:min(calc(100vh - 100px),calc(100vw - 500px),600px)}
.game-player-bar{display:flex;flex-direction:column;gap:6px;width:100%;padding:10px;font-family:'Cinzel',serif;background:var(--bg);border:1px solid var(--border);border-radius:9px;margin-bottom:10px}
.gpb-top{display:flex;align-items:center;gap:8px;min-width:0}
.gpb-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.game-player-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.game-player-name{font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.game-player-elo{font-size:11px;color:var(--gold);font-weight:700}
.game-player-clock{font-family:'Cinzel',serif;font-size:14px;font-weight:800;padding:3px 10px;border-radius:7px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);min-width:52px;text-align:center;letter-spacing:.5px}
.game-player-clock.clock-active{border-color:var(--gold);color:var(--gold)}
.game-player-clock.clock-low{color:#fff;background:rgba(182,57,74,.75);border-color:var(--danger);animation:clockLowPulse 1s ease-in-out infinite}
@keyframes clockLowPulse{0%,100%{opacity:1}50%{opacity:.55}}
.game-board-outer{display:flex;align-items:stretch;width:100%}
.game-row-labels{display:flex;flex-direction:column;width:22px;flex-shrink:0}
.game-row-lbl{font-size:10px;color:var(--muted);font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-family:'Cinzel',serif}
.game-board-col{display:flex;flex-direction:column;flex:1;min-width:0}
.game-board{display:grid;grid-template-columns:repeat(8,1fr);border:2px solid #444;border-radius:4px;overflow:hidden;width:100%;aspect-ratio:1}
.game-col-labels{display:flex;margin-top:4px;width:100%}
.game-col-lbl{flex:1;text-align:center;font-size:10px;color:var(--muted);font-weight:700;font-family:'Cinzel',serif}
.gc{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,3.5vw,32px);cursor:pointer;user-select:none;position:relative;transition:background .15s,box-shadow .15s;-webkit-user-drag:none}
.gc.l{background:#c8a96a}.gc.d{background:#7a5330}
body.light .gc.l{background:#eddab0}body.light .gc.d{background:#8a5f38}
.gc.sel{background:rgba(201,162,39,.55)!important;box-shadow:inset 0 0 0 3px var(--gold)}
.gc.avail::before{content:'';position:absolute;width:30%;height:30%;background:radial-gradient(circle,var(--gold2) 0%,var(--gold) 70%);border-radius:50%;z-index:1;pointer-events:none;box-shadow:0 0 8px rgba(201,162,39,.6);animation:availPulse 1.6s ease-in-out infinite}
@keyframes availPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:1}}
.gc.avail-cap{box-shadow:inset 0 0 0 4px rgba(182,57,74,.75);animation:capPulse 1.1s ease-in-out infinite}
@keyframes capPulse{0%,100%{box-shadow:inset 0 0 0 4px rgba(182,57,74,.65)}50%{box-shadow:inset 0 0 0 4px rgba(182,57,74,.95)}}
.gc.last-move{background:rgba(201,162,39,.32)!important;box-shadow:inset 0 0 0 2px rgba(201,162,39,.55)}
.gc.cap-flash{animation:captureFlash .5s ease}
@keyframes captureFlash{0%{background:rgba(182,57,74,.75)!important;box-shadow:inset 0 0 0 5px rgba(255,220,180,.9)}100%{background:transparent!important;box-shadow:none}}
.gc-piece{width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:1;position:relative;cursor:grab;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.gc-piece.dragging{opacity:.4}.gc-piece:hover{transform:scale(1.1) translateY(-2px);filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))}
.status-bar{font-family:'Cinzel',serif;font-size:12px;padding:8px 12px;border-radius:7px;margin-bottom:8px;text-align:center;background:var(--surface2);border:1px solid var(--border)}
.status-bar.check{border-color:rgba(239,68,68,.5);color:var(--danger)}.status-bar.ok{border-color:rgba(16,185,129,.3);color:var(--success)}.status-bar.thinking{border-color:rgba(168,58,74,.4);color:var(--accent2)}.status-bar.mate{border-color:rgba(201,168,76,.6);color:var(--gold)}
.move-log{flex:1;overflow-y:auto;font-size:11px;font-family:'Cinzel',serif;line-height:2}
.move-log-item{display:flex;gap:6px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.move-log-num{color:var(--muted);min-width:22px}.move-log-w{flex:1;color:var(--text)}.move-log-b{flex:1;color:var(--muted)}
.game-btns{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.history-nav{display:flex;gap:5px;justify-content:center;margin-bottom:6px}
.history-nav button{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text);cursor:pointer;font-size:14px;padding:4px 10px;transition:all .15s}
.history-nav button:hover:not(:disabled){border-color:var(--accent2);color:var(--accent2)}.history-nav button:disabled{opacity:.3;cursor:not-allowed}
.history-badge{font-family:'Cinzel',serif;font-size:9px;color:var(--gold);text-align:center;margin-bottom:4px;min-height:14px}
.drag-ghost{position:fixed;pointer-events:none;z-index:9999;font-size:40px;transform:translate(-50%,-50%);opacity:.85;line-height:1;display:none}
.ctx-menu{position:fixed;background:var(--surface2);border:1px solid var(--border2);border-radius:12px;padding:16px;z-index:2000;min-width:240px;max-width:320px;box-shadow:0 12px 40px rgba(0,0,0,.7);display:none}
.ctx-menu.show{display:block;animation:nIn .18s ease}
.ctx-title{font-family:'Cinzel',serif;font-size:15px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.ctx-class{font-size:10px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;font-family:'Cinzel',serif}
.ctx-row{font-size:12px;margin-bottom:5px;line-height:1.5}.ctx-label{color:var(--muted);font-weight:600}
.ctx-power-btn{margin-top:10px;width:100%}
.ctx-close{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--muted);font-size:16px;line-height:1}.ctx-close:hover{color:var(--danger)}
.gc.amazone-repos{box-shadow:inset 0 0 0 3px rgba(249,115,22,.8)!important;background:rgba(249,115,22,.18)!important}
@media(max-width:760px){.game-wrap{flex-direction:column;height:auto}.game-sidebar-left{width:100%;max-height:140px}.game-sidebar-right{width:100%;max-height:none}.game-main{padding:8px}.game-board-container{max-width:100%}}

/* [MODALS-GAME] ======================================================= */
.promo-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;visibility:hidden}
.promo-modal.active{visibility:visible}
.promo-box{background:var(--surface2);border:1px solid var(--border2);border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px}
.promo-title{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--gold)}
.promo-pieces-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.promo-piece{font-size:54px;cursor:pointer;transition:transform .15s;padding:8px;border-radius:10px;border:2px solid transparent}
.promo-piece:hover{transform:scale(1.12);border-color:var(--accent2);background:rgba(168,58,74,.1)}
.primordiale-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:5000}
.primordiale-box{background:var(--surface2);border:1px solid var(--primordiale);border-radius:18px;padding:32px 28px;max-width:480px;width:92%;text-align:center;position:relative}
.primordiale-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primordiale),var(--gold));border-radius:18px 18px 0 0}
.primordiale-box h2{font-family:'Cinzel',serif;font-size:20px;font-weight:900;color:var(--primordiale);margin-bottom:8px}
.primordiale-box p{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.7}
.primordiale-choices{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.primordiale-choice-card{background:var(--bg);border:2px solid var(--primordiale);border-radius:14px;padding:18px 22px;cursor:pointer;transition:all .2s;min-width:130px;flex:1}
.primordiale-choice-card:hover{border-color:var(--gold);background:rgba(201,168,76,.08);transform:translateY(-3px)}
.primordiale-choice-card .pc-big-emoji{font-size:42px;margin-bottom:8px;display:block}
.primordiale-choice-card .pc-big-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.primordiale-choice-card .pc-big-mvt{font-size:11px;color:var(--muted)}
.result-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:3000;visibility:hidden}
.result-modal.active{visibility:visible}
.result-box{background:var(--surface2);border:1px solid var(--border2);border-radius:18px;padding:32px 28px 28px;max-width:440px;width:90%;text-align:center;position:relative;overflow:hidden}
#result-close-btn:hover{color:var(--danger)!important}
.result-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.result-box.win-result::before{background:linear-gradient(90deg,var(--success),var(--gold))}.result-box.loss-result::before{background:linear-gradient(90deg,var(--danger),var(--accent))}.result-box.draw-result::before{background:linear-gradient(90deg,var(--muted),var(--border2))}
.result-icon{font-size:54px;margin-bottom:10px;display:block;animation:resultBounce .6s cubic-bezier(.34,1.56,.64,1) both}
.result-box.win-result .result-icon{color:var(--success)}.result-box.loss-result .result-icon{color:var(--danger)}.result-box.draw-result .result-icon{color:var(--muted)}
.trb-icon{color:var(--gold2)}
@keyframes resultBounce{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.result-title{font-family:'Cinzel',serif;font-size:26px;font-weight:900;margin-bottom:6px}
.result-title.win-text{color:var(--gold)}.result-title.loss-text{color:var(--danger)}.result-title.draw-text{color:var(--muted)}
.result-elo-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0;font-family:'Cinzel',serif}
.result-elo-before{font-size:20px;color:var(--muted)}.result-elo-arrow{font-size:18px;color:var(--border2)}.result-elo-after{font-size:24px;font-weight:800;color:var(--text)}
.result-elo-delta{font-size:18px;font-weight:800;padding:3px 12px;border-radius:8px;font-family:'Cinzel',serif}
.result-elo-delta.pos{background:rgba(16,185,129,.15);color:var(--success)}.result-elo-delta.neg{background:rgba(239,68,68,.15);color:var(--danger)}.result-elo-delta.zero{background:rgba(122,117,144,.15);color:var(--muted)}
.result-rank-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 18px;font-family:'Cinzel',serif;font-size:13px;background:var(--bg);border-radius:8px;padding:8px 16px;border:1px solid var(--border)}
.result-rank-icon{font-size:22px}.result-rank-name{font-weight:700;color:var(--text)}
.unlock-section{margin-top:18px;padding:16px;border-radius:12px;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(122,31,43,.08));border:1px solid rgba(201,168,76,.3);animation:unlockGlow .8s ease both .3s}
@keyframes unlockGlow{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.unlock-title{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.unlock-piece-emoji{font-size:46px;display:block;margin-bottom:6px;animation:unlockSpin .7s cubic-bezier(.34,1.56,.64,1) both .5s}
@keyframes unlockSpin{from{transform:rotateY(90deg) scale(.5);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}
.unlock-piece-name{font-family:'Cinzel',serif;font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px}
.unlock-piece-class{font-size:10px;text-transform:uppercase;font-family:'Cinzel',serif;padding:2px 9px;border-radius:5px;margin-bottom:6px;display:inline-block}
.unlock-piece-ability{font-size:11px;color:var(--muted);line-height:1.6;max-width:300px;margin:0 auto}
.army-intro-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:4000;opacity:1;transition:opacity .6s ease}
.army-intro-overlay.hiding{opacity:0;pointer-events:none}
.army-intro-box{background:var(--surface2);border:1px solid var(--border2);border-radius:18px;padding:28px 32px;max-width:700px;width:92%;position:relative;max-height:88vh;overflow-y:auto}
.army-intro-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);border-radius:18px 18px 0 0}
.aio-close{position:absolute;top:12px;right:14px;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;transition:color .15s}.aio-close:hover{color:var(--danger)}
.aio-title{font-family:'Cinzel Decorative','Cinzel',serif;font-size:18px;font-weight:900;text-align:center;margin-bottom:20px;color:var(--gold)}
.aio-sides{display:flex;gap:20px;flex-wrap:wrap}
.aio-side{flex:1;min-width:240px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px}
.aio-side-title{font-family:'Cinzel',serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.aio-side-title.white{color:var(--gold)}.aio-side-title.black{color:var(--accent2)}
.aio-piece-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.aio-piece-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.aio-emoji{font-size:26px;flex-shrink:0;line-height:1}.aio-piece-info{flex:1}
.aio-piece-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;margin-bottom:2px}.aio-piece-mvt{font-size:11px;color:var(--muted);margin-bottom:3px}
.aio-piece-ability{font-size:11px;color:var(--text);line-height:1.5;padding:5px 8px;background:rgba(122,31,43,.08);border-radius:6px;border-left:2px solid var(--accent)}
.aio-timer{text-align:center;margin-top:16px;font-family:'Cinzel',serif;font-size:11px;color:var(--muted)}
.aio-timer-bar{height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.aio-timer-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:2px;transition:width 1s linear}

/* [VOIE] ======================================================= */
#page-voie{padding:clamp(14px,3vw,28px) clamp(12px,3vw,20px);min-height:100vh;background:var(--bg)}
.voie-inner{max-width:860px;margin:0 auto}
.voie-hdr{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.voie-title{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(20px,4.5vw,26px);font-weight:900;flex:1;color:var(--gold)}
.voie-elo-banner{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-bottom:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:relative;overflow:hidden}
.voie-elo-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);opacity:.5}
.veb-info{flex:1}
.veb-rank-name{font-family:'Cinzel',serif;font-size:18px;font-weight:800;margin-bottom:4px}
.veb-elo{font-family:'Cinzel',serif;font-size:28px;font-weight:900;color:var(--gold);margin-bottom:8px}
.veb-elo span{font-size:13px;color:var(--muted);font-weight:400}
.veb-progress-wrap{background:rgba(0,0,0,.25);border-radius:8px;height:10px;overflow:hidden;margin-bottom:4px}
.veb-progress-bar{height:100%;border-radius:8px;transition:width .7s cubic-bezier(.34,1.56,.64,1)}
.veb-progress-label{font-size:10px;color:var(--muted);font-family:'Cinzel',serif}
.veb-stats{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.veb-stat{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:8px 16px;text-align:center}
.veb-stat-label{font-size:9px;color:var(--muted);text-transform:uppercase;font-family:'Cinzel',serif;letter-spacing:.8px;margin-bottom:2px}
.veb-stat-val{font-size:18px;font-weight:700;font-family:'Cinzel',serif}
.voie-route{position:relative;padding:10px 0 30px}
.voie-route::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--accent),var(--gold),var(--accent2));transform:translateX(-50%);border-radius:2px;opacity:.35;z-index:0}
.voie-milestone{display:flex;align-items:center;gap:18px;margin-bottom:20px;position:relative;z-index:1}
.voie-milestone:nth-child(odd){flex-direction:row}.voie-milestone:nth-child(even){flex-direction:row-reverse}
.vm-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;flex:1;max-width:calc(50% - 40px);transition:all .25s;position:relative;overflow:hidden}
.vm-card.reached{border-color:var(--gold)}
.vm-card.reached::after{content:'✓';position:absolute;top:8px;right:10px;color:var(--success);font-size:15px;font-weight:900}
.vm-card.current-milestone{border-color:var(--accent2);box-shadow:0 0 18px rgba(168,58,74,.3);animation:vmPulse 2s ease-in-out infinite}
@keyframes vmPulse{0%,100%{box-shadow:0 0 14px rgba(168,58,74,.25)}50%{box-shadow:0 0 28px rgba(168,58,74,.55)}}
.vm-card.locked-milestone{opacity:.45;filter:grayscale(.5)}
.vm-center{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.vm-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border2);background:var(--surface2);transition:all .2s}
.vm-dot.reached{background:var(--gold);border-color:var(--gold)}
.vm-dot.current-milestone{background:var(--accent2);border-color:var(--accent2);animation:dotPulse 1.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.vm-elo-badge{font-family:'Cinzel',serif;font-size:9px;font-weight:700;color:var(--gold);background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);border-radius:5px;padding:2px 7px;white-space:nowrap}
.vm-piece-emoji{font-size:28px;margin-bottom:5px;display:block;line-height:1}
.vm-piece-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;margin-bottom:3px;line-height:1.3}
.vm-piece-class{font-size:9px;text-transform:uppercase;font-family:'Cinzel',serif;letter-spacing:.8px;margin-bottom:5px;padding:2px 7px;border-radius:4px;display:inline-block}
.vm-piece-ability{font-size:11px;color:var(--muted);line-height:1.5;margin-top:4px}
.vm-rank-section{margin:12px 0 6px;text-align:center;position:relative;z-index:1}
.vm-rank-bar{display:inline-flex;align-items:center;gap:10px;justify-content:center;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:8px 18px}
.vm-rank-label{font-family:'Cinzel',serif;font-size:13px;font-weight:700}
.vm-rank-range{font-size:10px;color:var(--muted);margin-left:4px;font-family:'Cinzel',serif}
.voie-history{margin-top:24px}
.vh-title{font-family:'Cinzel',serif;font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.vh-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;margin-bottom:5px;font-size:12px;background:var(--surface);border:1px solid var(--border)}
.vh-result{font-family:'Cinzel',serif;font-weight:700;min-width:70px}
.vh-result.win{color:var(--success)}.vh-result.loss{color:var(--danger)}.vh-result.draw{color:var(--muted)}
.vh-delta{font-family:'Cinzel',serif;font-weight:700;min-width:50px}
.vh-delta.pos{color:var(--success)}.vh-delta.neg{color:var(--danger)}.vh-delta.zero{color:var(--muted)}
.vh-elo{color:var(--gold);font-family:'Cinzel',serif}.vh-date{color:var(--muted);margin-left:auto;font-size:10px}

/* [TOURNOI] ======================================================= */
#page-tournoi{padding:clamp(16px,3vw,32px) clamp(12px,3vw,20px);min-height:100vh}
.tournoi-inner{max-width:700px;margin:0 auto}
.tournoi-hdr{display:flex;align-items:center;gap:12px;margin-bottom:28px;flex-wrap:wrap}
.tournoi-title{font-family:'Cinzel Decorative','Cinzel',serif;font-size:clamp(20px,5vw,32px);font-weight:900;color:var(--gold);flex:1}
.tournoi-progress-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-bottom:24px;position:relative;overflow:hidden}
.tournoi-progress-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.tournoi-prog-label{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.tournoi-prog-bar-outer{background:var(--bg);border-radius:8px;height:14px;overflow:hidden;border:1px solid var(--border)}
.tournoi-prog-bar-inner{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.tournoi-prog-count{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--gold);margin-top:8px;text-align:right}
.tournoi-rounds{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.tournoi-round{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;transition:all .3s}
.tournoi-round.round-active{border-color:var(--accent2);background:rgba(122,31,43,.07)}
.tournoi-round.round-win{border-color:var(--success);background:rgba(16,185,129,.07)}
.tournoi-round.round-loss{border-color:var(--danger);background:rgba(239,68,68,.07)}
.tournoi-round.round-draw{border-color:var(--gold);background:rgba(201,168,76,.07)}
.tr-num{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--muted);min-width:54px}
.tr-info{flex:1}
.tr-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.tr-elo{font-size:11px;color:var(--gold)}
.tr-status{font-family:'Cinzel',serif;font-size:13px;font-weight:700;min-width:90px;text-align:right}
.tr-status.pending{color:var(--muted)}
.tr-status.win{color:var(--success)}
.tr-status.loss{color:var(--danger)}
.tr-status.draw{color:var(--gold)}
.tournoi-result-banner{background:var(--surface);border:2px solid var(--gold);border-radius:16px;padding:28px 24px;text-align:center;display:none}
.tournoi-result-banner.show{display:block}
.trb-icon{font-size:52px;margin-bottom:10px}
.trb-title{font-family:'Cinzel',serif;font-size:22px;font-weight:900;color:var(--gold);margin-bottom:6px}
.trb-sub{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.tournoi-history{margin-top:28px}
.tournoi-history-title{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.th-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.th-date{font-size:11px;color:var(--muted);margin-left:auto}
.th-wins{font-family:'Cinzel',serif;font-size:12px;font-weight:700}
.th-wins.champion{color:var(--gold)}
.th-wins.normal{color:var(--muted)}
/* Mêmes couleurs de cases et même ombre portée que le plateau de jeu : sur
   les cases claires d'origine (#f0d9b5), les glyphes d'échecs blancs (qui
   sont des contours vides) devenaient tout bonnement invisibles. */
.ta-cell{display:flex;align-items:center;justify-content:center;font-size:18px;cursor:default;aspect-ratio:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.ta-cell.light{background:#c8a96a}
.ta-cell.dark{background:#7a5330}
body.light .ta-cell.light{background:#eddab0}
body.light .ta-cell.dark{background:#8a5f38}
.ta-cell.highlight{outline:3px solid var(--gold);outline-offset:-3px}
.ta-move-item{cursor:pointer;padding:2px 5px;border-radius:4px;transition:background .15s}
.ta-move-item:hover{background:rgba(122,31,43,.18)}
.ta-move-item.active{background:rgba(201,168,76,.22);color:var(--gold)}
.round-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:6000;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.round-overlay.show{visibility:visible;opacity:1}
.round-box{background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:36px 32px;max-width:420px;width:92%;text-align:center;position:relative;overflow:hidden}
.round-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
/* Rangée d'actions de fin de round : « Round suivant » + « Quitter le
   tournoi » (ce dernier masqué au dernier round, voir showRoundOverlay). */
.rb-actions{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.rb-actions .btn{white-space:nowrap}
.rb-round-label{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.rb-result-icon{font-size:54px;margin-bottom:10px;display:block}
.rb-result-text{font-family:'Cinzel',serif;font-size:22px;font-weight:900;margin-bottom:6px}
.rb-result-text.win{color:var(--success)}
.rb-result-text.loss{color:var(--danger)}
.rb-result-text.draw{color:var(--gold)}
.rb-elo-row{font-size:13px;color:var(--muted);margin-bottom:20px}
.rb-elo-delta{font-weight:700}
.rb-elo-delta.pos{color:var(--success)}
.rb-elo-delta.neg{color:var(--danger)}
.rb-elo-delta.zero{color:var(--muted)}
.rb-next-label{font-family:'Cinzel',serif;font-size:11px;color:var(--muted);margin-bottom:8px}
.rb-next-card{background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.rb-next-info{text-align:left}
.rb-next-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700}
.rb-next-elo{font-size:11px;color:var(--gold)}

/* [ADMIN] ======================================================= */
.admin-badge{position:fixed;bottom:14px;right:14px;z-index:8000;font-family:'Cinzel',serif;font-size:10px;padding:5px 10px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);border-radius:7px;color:var(--gold);cursor:pointer;transition:all .2s}
.admin-badge:hover{background:rgba(201,168,76,.3);border-color:var(--gold)}
.admin-badge.active-admin{background:rgba(201,168,76,.35);border-color:var(--gold);color:var(--gold2)}


/* [ORNAMENTS & CINEMATICS] ======================================================= */
.login-card,.ai-lvl-box,.army-box,.army-intro-box,.voie-elo-banner,.tournoi-progress-wrap,.round-box{
  position:relative;
}
/* Médaillon décoratif : une « perle d'alchimiste » dessinée en CSS pur (pas
   de glyphe/emoji) : un dégradé radial imitant une bille de verre/métal. */
.login-card::after,.ai-lvl-box::after,.army-box::after,.army-intro-box::after,.voie-elo-banner::after,.tournoi-progress-wrap::after,.round-box::after{
  content:'';position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,var(--gold2),var(--gold) 65%,#6b4f16 100%);
  width:16px;height:16px;border-radius:50%;
  box-shadow:0 0 8px rgba(201,162,39,.5);z-index:1;
}

/* Tension : le statut d'échec tremble légèrement */
.status-bar.check{animation:checkShake .4s ease}
@keyframes checkShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* Cinématique, intro des armées : bannière qui se déroule */
.army-intro-box{animation:bannerUnfurl .55s cubic-bezier(.22,.9,.34,1) both}
@keyframes bannerUnfurl{from{transform:scaleY(.3) translateY(-30px);opacity:0}to{transform:scaleY(1) translateY(0);opacity:1}}

/* Cinématique, résultat de partie : gloire ou cendres */
.result-box{animation:resultRise .5s cubic-bezier(.22,.9,.34,1) both}
@keyframes resultRise{from{transform:translateY(40px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.result-box.win-result{position:relative}
.result-box.win-result::after{
  content:'';position:absolute;top:-30%;left:50%;width:260px;height:260px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,162,39,.35) 0%,transparent 65%);z-index:0;
  animation:gloryBurst 1.4s ease-out both;pointer-events:none;
}
@keyframes gloryBurst{from{opacity:0;transform:translateX(-50%) scale(.4)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.result-box.loss-result .result-icon{animation:emberFall .9s ease both}
@keyframes emberFall{0%{transform:translateY(-14px) scale(.4);opacity:0;filter:brightness(1.6)}60%{transform:translateY(3px) scale(1.05);opacity:1}100%{transform:translateY(0) scale(1);filter:brightness(1)}}
.result-box>*{position:relative;z-index:1}

/* Cinématique, page combat : titre pulsant façon flamme de torche */
.vs-div{filter:drop-shadow(0 0 10px rgba(122,31,43,.5))}

/* [CUBE] ==========================================================
   Navigation principale par cube (illusion 3D CSS). Voir js/cube-nav.js.
   Le cube est une simple coquille visuelle : les vraies pages Mes armées /
   partie y sont déplacées à l'exécution. Chrome global (barre compte,
   modals, réglages) reste HORS du cube.
   ================================================================ */
#cube-stage{position:fixed;inset:0;overflow:hidden;z-index:10;display:none;
  perspective:2400px;perspective-origin:50% 50%}
body.cube-active #cube-stage{display:block}
/* Sous un overlay (page secondaire active), le cube est masqué ENTIÈREMENT
   (pas juste son chrome), sinon la face de repos (JOUER) apparaît en
   transparence pendant le fondu d'entrée de la page (.32s) qui se joue
   par-dessus, le temps d'un flash. */
body.nav-overlay #cube-stage{display:none}

/* Durée de rotation fluide, pensée pour pouvoir enchaîner deux rotations
   sans temps mort, voir js/cube-nav.js (ROTATE_MS) qui pilote la même
   durée en JS, et queuedKind pour l'enchaînement instantané. */
#cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  transform:translateZ(-50vmax) rotateX(0deg) rotateY(0deg)}

/* Chaque face : un grand carré (100vmax) centré sur l'écran, poussé d'un
   demi-cube le long de sa normale. Au repos, la face avant se retrouve
   exactement sur le plan de projection → nette, clics/drag au pixel près. */
.cube-face{position:absolute;width:100vmax;height:100vmax;left:50%;top:50%;
  margin-left:-50vmax;margin-top:-50vmax;backface-visibility:hidden;
  background:var(--bg);overflow:hidden;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.55)}
.cube-face.is-front{pointer-events:auto}
.cube-face[data-face="jouer"]    {transform:rotateY(0deg)    translateZ(50vmax)}
.cube-face[data-face="armees"]   {transform:rotateY(90deg)   translateZ(50vmax)}
.cube-face[data-face="magasin"]  {transform:rotateY(180deg)  translateZ(50vmax)}
.cube-face[data-face="missions"] {transform:rotateY(270deg)  translateZ(50vmax)}
.cube-face[data-face="game"]     {transform:rotateX(90deg)   translateZ(50vmax)}
.cube-face[data-face="variantes"]{transform:rotateX(-90deg)  translateZ(50vmax)}

/* Zone utile réelle d'une face = un rectangle plein écran (100vw×100vh)
   centré dans le grand carré (le reste du carré est masqué par #cube-stage). */
.face-viewport{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100vw;height:100vh;overflow:hidden}
#face-viewport-armees{overflow-y:auto}

/* Les pages réelles déplacées dans une face : toujours affichées (la
   visibilité est gérée par la rotation du cube, plus par .page/.active). */
.cube-embedded{display:block;min-height:100%}

/* --- Face JOUER (menu principal) : premium, minimaliste. Dégradé propre à
   chaque thème (pas de var() ici : le rendu voulu diffère trop entre les
   deux pour un simple changement de teinte). --- */
.cube-face[data-face="jouer"]{background:
  radial-gradient(ellipse at 50% 32%,rgba(201,162,39,.18),transparent 60%),
  radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.45),transparent 55%),
  linear-gradient(160deg,#2a2013,#180f07)}
body.light .cube-face[data-face="jouer"]{background:
  radial-gradient(ellipse at 50% 32%,rgba(130,102,31,.16),transparent 60%),
  radial-gradient(ellipse at 50% 120%,rgba(80,60,20,.12),transparent 55%),
  linear-gradient(160deg,#f4edd4,#e5d8a8)}
.jouer-menu{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:34px;text-align:center;padding:24px}
.jouer-logo{font-family:'Cinzel Decorative','Cinzel',serif;font-weight:900;
  font-size:clamp(34px,7vw,72px);letter-spacing:2px;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#8a6a1a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 24px rgba(201,162,39,.35))}
.jouer-btn{position:relative;cursor:pointer;border:none;
  font-family:'Cinzel',serif;font-weight:900;letter-spacing:6px;
  font-size:clamp(18px,3.4vw,34px);color:#1a1206;
  padding:clamp(14px,3vw,22px) clamp(36px,10vw,76px);border-radius:10px;
  background:var(--gold);
  box-shadow:0 3px 0 #6b4f16;
  transition:transform .15s ease,box-shadow .15s ease}
.jouer-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 #6b4f16}
.jouer-btn:active{transform:translateY(1px);box-shadow:0 2px 0 #6b4f16}
/* Bouton "Tournoi" sous JOUER : même colonne, mais gap resserré pour rester
   visuellement secondaire par rapport au gros bouton doré. */
.jouer-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.jouer-tournoi-btn{font-size:12px;padding:10px 26px}

/* --- Faces placeholder (Magasin / Missions / Variantes) --- */
.cube-face[data-face="magasin"],
.cube-face[data-face="missions"],
.cube-face[data-face="variantes"]{background:
  radial-gradient(ellipse at 50% 40%,rgba(107,77,44,.22),transparent 60%),
  linear-gradient(160deg,#28200f,#180f07)}
body.light .cube-face[data-face="magasin"],
body.light .cube-face[data-face="missions"],
body.light .cube-face[data-face="variantes"]{background:
  radial-gradient(ellipse at 50% 40%,rgba(130,102,31,.16),transparent 60%),
  linear-gradient(160deg,#f1e9cc,#e2d4a2)}
.face-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.fp-title{font-family:'Cinzel',serif;font-weight:900;letter-spacing:3px;
  font-size:clamp(26px,5vw,46px);color:var(--gold2);text-transform:uppercase}
.fp-sub{font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;
  color:var(--muted);text-transform:uppercase;opacity:.7}

/* --- Flèches de navigation (dans #cube-stage mais hors de #cube : pas
   soumises au transform 3D). Icônes en SVG (et non en glyphes unicode) pour
   un centrage pixel-parfait garanti, indépendant des métriques de police. --- */
.cube-arrow{position:fixed;z-index:400;cursor:pointer;border:1px solid var(--border2);
  background:rgba(36,26,16,.72);backdrop-filter:blur(6px);color:var(--gold2);
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:all .2s ease;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cube-arrow:hover{background:var(--surface2);border-color:var(--gold);color:#fff;
  box-shadow:0 8px 28px rgba(201,162,39,.35)}
.cube-arrow svg{display:block;width:55%;height:55%;pointer-events:none}
/* Flèches horizontales dans les coins bas : jamais en collision avec la
   barre de compte (haut). Le badge Admin (bottom-right) est remonté
   au-dessus d'elles (voir plus bas) pour ne jamais se chevaucher. */
.cube-arrow-side{bottom:22px;width:56px;height:56px;border-radius:15px}
#cube-arrow-left{left:22px}
#cube-arrow-right{right:22px}
.cube-arrow-vert{left:50%;transform:translateX(-50%);width:64px;height:40px;border-radius:12px}
#cube-arrow-down{bottom:22px}
#cube-arrow-up{top:62px}

/* --- Pages secondaires : overlays plein écran AU-DESSUS du cube ---
   (armées, voie, tournoi, combat, login). Restent pilotées par
   .page/.active comme avant, mais deviennent des couches opaques qui
   masquent le cube quand elles sont actives. */
.page.active{position:fixed;inset:0;z-index:200;overflow-y:auto;background:var(--bg)}

/* Le badge Admin (chrome préexistant, coin bas-droit) est remonté tant que
   le cube est actif, pour ne jamais chevaucher la flèche de rotation droite
   qui occupe le même coin. */
body.cube-active .admin-badge{bottom:90px}

/* [RESPONSIVE / MODE TÉLÉPHONE] ====================================
   Le cube (vmax) et la plupart des titres (clamp()) s'adaptent déjà en
   continu à la taille de l'écran. Ce bloc gère surtout les changements
   STRUCTURELS nécessaires sur petit écran : bandeau de compte compact,
   grilles à moins de colonnes, flèches de cube resserrées. */
@media(max-width:640px){
  .cab{padding:0 42px 0 10px;gap:8px;height:46px;font-size:11px}
  .cab-av{width:28px;height:28px;font-size:13px}
  #cab-name{font-size:12px}
  #cab-elo{font-size:10px!important;padding:4px 8px}
  .cab-sw{padding:6px 10px;font-size:10px}
  #settings-btn{width:28px;height:28px;top:6px;right:8px}
  body.has-acc #page-builder{padding-top:calc(46px + 10px)}
  body.has-acc #page-armies,body.has-acc #page-ai-armies,body.has-acc #page-voie,body.has-acc #page-tournoi{padding-top:calc(46px + 14px)}
  body.has-acc #page-combat{padding-top:46px}

  #page-builder{padding:14px}
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .comp-grid{grid-template-columns:repeat(2,1fr)}
  .army-box{padding:16px}
  .armies-hdr{flex-direction:column;align-items:stretch}
  .armies-hdr .btn{width:100%}

  .cube-arrow-side{width:44px;height:44px;bottom:12px;border-radius:12px}
  #cube-arrow-left{left:12px}
  #cube-arrow-right{right:12px}
  .cube-arrow-vert{width:52px;height:34px}
  #cube-arrow-down{bottom:12px}
  #cube-arrow-up{top:54px}
  body.cube-active .admin-badge{bottom:64px}
}
@media(max-width:420px){
  .cards-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .intro-parchment-inner{padding:24px 18px 22px}
  .intro-list li{font-size:13px;padding:8px 11px}
}

/* [SEO] ========================================================= */
/* Bloc de contenu indexable sous la carte de connexion (voir le
   commentaire dans index.html). Volontairement discret : texte en retrait,
   pas de fond plein, pour rester une note de bas de page et ne pas
   concurrencer visuellement le formulaire de connexion. */
.lore{margin-top:34px;padding-top:26px;border-top:1px solid var(--border);color:var(--muted);font-size:14px;line-height:1.65}
.lore p{margin:0 0 12px}
.lore strong{color:var(--text);font-weight:600}
.lore-h{font-family:'Cinzel',serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--gold);margin:0 0 14px}
.lore-h:not(:first-child){margin-top:28px}
.lore-list{list-style:none;padding:0;margin:0 0 16px}
.lore-list li{position:relative;padding-left:18px;margin-bottom:7px}
/* Puce « goutte de réactif » plutôt qu'un disque neutre, pour rester dans
   le registre alchimique du reste de l'interface. */
.lore-list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--potion);box-shadow:0 0 6px var(--potion-glow)}

.lore-faq{border-bottom:1px solid var(--border);padding:2px 0}
.lore-faq summary{cursor:pointer;padding:10px 0;font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--text);list-style:none;display:flex;align-items:center;gap:9px;transition:color .15s}
.lore-faq summary::-webkit-details-marker{display:none}
.lore-faq summary:hover{color:var(--gold2)}
/* Chevron dessiné en CSS (pas de glyphe : la police Cinzel n'en a pas). */
.lore-faq summary::before{content:'';flex-shrink:0;width:5px;height:5px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);transition:transform .2s}
.lore-faq[open] summary::before{transform:rotate(45deg)}
.lore-faq[open] summary{color:var(--gold2)}
.lore-faq p{padding:0 0 12px 14px;font-size:13.5px}

@media(prefers-reduced-motion:reduce){.lore-faq summary::before{transition:none}}

/* [MULTIJOUEUR] : modal de création/rejointe de partie en ligne ==== */
.mp-code{font-family:'Cinzel',serif;font-size:38px;font-weight:900;letter-spacing:8px;color:var(--gold);background:var(--bg);border:2px solid var(--border2);border-radius:12px;padding:14px 10px;margin-bottom:12px;user-select:all}
.mp-code-input{width:100%;box-sizing:border-box;font-family:'Cinzel',serif;font-size:26px;font-weight:900;letter-spacing:6px;text-align:center;text-transform:uppercase;color:var(--gold);background:var(--bg);border:2px solid var(--border2);border-radius:12px;padding:12px 10px;margin-bottom:12px;outline:none}
.mp-code-input:focus{border-color:var(--gold)}
.mp-status{font-size:12px;color:var(--muted);min-height:18px;margin-top:12px;line-height:1.5}
.mp-status.mp-err{color:var(--danger)}
.mp-status.mp-ok{color:var(--success)}
.mp-status.mp-wait::after{content:'';display:inline-block;width:10px;text-align:left;animation:mpDots 1.2s steps(4,end) infinite}
@keyframes mpDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}