/* ============ RUNEFALL — feuille de style ============ */

:root {
  --bg:            #0d0b14;
  --bg-2:          #16121f;
  --panel:         #1e1930;
  --panel-2:       #2a2340;
  --border:        #3d3358;
  --text:          #e8e3f5;
  --text-dim:      #9a90b8;
  --accent:        #c9a227;
  --accent-2:      #f0d264;
  --red:           #d4453f;
  --red-soft:      #ff7a72;
  --blue:          #4a86d4;
  --green:         #4fae6a;
  --purple:        #8b5cf6;
  --radius:        10px;
  --shadow:        0 8px 24px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 50% 0%, #241c38 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, #1a1228 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

#app { position: relative; width: 100vw; height: 100vh; }

/* ---------- écrans ---------- */
.screen { display: none; width: 100%; height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ---------- boutons ---------- */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
}
.btn:hover { background: #362c52; border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: #8a6f16;
  color: #241c05;
}
.btn-primary:hover { background: linear-gradient(180deg, #ffe488, var(--accent-2)); }
.btn-ghost { background: transparent; }
.btn-big { font-size: 18px; padding: 14px 40px; margin: 8px 0 24px; }

/* élément neutralisé le temps d'un aller-retour serveur (anti double-clic,
   voir UI.pendant) — vaut pour les <button> comme pour les <div> cliquables */
.occupe { pointer-events: none; opacity: .55; cursor: default; }

/* ------------------------------------------------------------
   UNE RANGÉE DE BOUTONS — TOUS À LA MÊME TAILLE
   ------------------------------------------------------------
   Un « btn-big » posé à côté d'un « btn » ordinaire donnait un
   couple bancal : 18 px de police et 14 px de rembourrage contre
   14 et 9. Le second paraissait rabougri, comme s'il avait été
   oublié.

   La rangée impose une taille unique à ses boutons ; la hiérarchie
   entre l'action principale et la secondaire se lit à la COULEUR
   (le doré de btn-primary), pas à la taille. Les sélecteurs
   d'enfant l'emportent sur .btn-big — (0,1,1) contre (0,1,0) —
   quel que soit l'ordre dans le fichier.
   ------------------------------------------------------------ */
.btn-rangee,
.arene-entree {
  display: flex; gap: 12px; align-items: stretch;
  justify-content: center; flex-wrap: wrap;
  margin: 22px 0;
}
.btn-rangee > .btn,
.arene-entree > .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 16px; padding: 13px 26px; margin: 0;
}

/* ---------- menu / boîtes centrées ----------
   Tout écran bâti autour d'une .menu-box est centré. Régler la liste
   par identifiants faisait oublier chaque nouvel écran : la règle
   s'applique désormais d'après le contenu. */
/* justify-content: safe center — CENTRÉ tant que le contenu tient, mais dès
   qu'il dépasse la hauteur de l'écran on retombe sur « start » AU LIEU de
   rogner le haut ET le bas. Couplé à overflow-y: auto, l'écran défile alors
   au lieu de couper les cartes (bug de l'ouverture de booster). */
.screen:has(> .menu-box) {
  align-items: center; justify-content: safe center; overflow-y: auto;
}
/* repli pour les navigateurs sans :has() */
#screen-menu, #screen-reward, #screen-rest, #screen-end,
#screen-duel-end, #screen-lobby, #screen-pack {
  align-items: center; justify-content: safe center; overflow-y: auto;
}
.menu-box {
  text-align: center;
  max-width: 760px;
  padding: 32px;
}
.logo {
  font-size: 68px;
  letter-spacing: 10px;
  font-weight: 800;
  background: linear-gradient(180deg, #fff6d0, var(--accent) 60%, #7a5f10);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(201,162,39,.25);
}
/* badge « TCG » accolé au logo, en petite PASTILLE dorée. Le logo découpe
   un dégradé DANS le texte (background-clip:text + couleur transparente) :
   on réinitialise le remplissage et le clip, sinon le badge hériterait de
   cette transparence et disparaîtrait. */
.logo-tcg {
  display: inline-block; vertical-align: middle; position: relative; top: -.12em;
  font-size: .42em; letter-spacing: 2px; font-weight: 800;
  margin-left: 10px; padding: .18em .45em;
  color: #241c05; -webkit-text-fill-color: #241c05;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  -webkit-background-clip: border-box; background-clip: border-box;
  border-radius: 6px; text-shadow: none;
}
/* dans la barre de nav, le logo est petit : on garantit une taille lisible */
.nav-logo .logo-tcg { font-size: 11px; letter-spacing: 1.5px; top: -1px; }
.tagline { color: var(--text-dim); margin: 10px 0 8px; font-size: 15px; }
.menu-help {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 24px;
}
.menu-help h3 { color: var(--accent); font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.menu-help ul { list-style: none; }
.menu-help li { color: var(--text-dim); font-size: 14px; padding: 5px 0 5px 18px; position: relative; }
.menu-help li::before { content: "◆"; position: absolute; left: 0; color: var(--accent); font-size: 9px; top: 8px; }
.menu-help b { color: var(--text); }

/* ---------- barre du haut ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 22px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid var(--border);
}
.stat { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; }
.stat .ico { font-size: 17px; color: var(--accent); }
.spacer { flex: 1; }

/* ---------- carte du monde ---------- */
.map-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 22px; padding: 20px; overflow-y: auto; }
#map-title { font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.relic-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 10px; }
.relic {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 20px; padding: 5px 14px; font-size: 13px;
}
.relic .r-ico { font-size: 16px; }

.map-choices { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.node {
  width: 230px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.node:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); }
.node .n-ico { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.node-face {
  display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.18); box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.node-face .art-svg { width: 100%; height: 100%; }
.ui-icon { display: block; }
.r-ico, .i-ico { display: inline-flex; vertical-align: -3px; }
.mode-ico { display: flex; justify-content: center; margin-bottom: 12px; color: var(--accent-2); }
.rest-ico { display: flex; justify-content: center; }
.offer-ico { display: flex; justify-content: center; margin-bottom: 10px; }
.offer-price, .single-buy, .gem-amount { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Huit boosters : deux échelles séparées, quatre par rangée.
   Mélangés dans une seule grille, ils ne se comparaient plus. */
/* #shop-packs contient désormais deux SECTIONS, pas des cartes.
   La disposition en rangée héritée de « .offers » les plaçait côte à
   côte — titres compris — d'où les deux colonnes et les intitulés
   perdus au milieu. */
#shop-packs { display: block; }

.offer-groupe {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 12px; text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--accent); margin: 26px 0 14px;
}
.offer-groupe span {
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
  color: var(--text-dim);
}
.offer-rangee {
  display: grid; gap: 16px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
}
.w-item { display: inline-flex; align-items: center; gap: 6px; }
.node .n-name { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.node .n-desc { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.node.elite { border-color: #a2402c; }
.node.elite:hover { border-color: var(--red-soft); }
.node.boss { border-color: var(--purple); }
.node.rest { border-color: #3f7a4c; }
.node.treasure { border-color: #b98a2e; }
.node.event { border-color: #6a5ba8; }
.node .node-emoji { font-size: 44px; line-height: 52px; }
/* « ce qu'on gagne » : un badge de récompense sur chaque nœud de la carte */
.node .n-reward {
  margin-top: 10px; display: inline-block;
  font-size: 12px; font-weight: 700; color: var(--accent-2);
  background: rgba(201,162,39,.12); border: 1px solid rgba(201,162,39,.35);
  border-radius: 999px; padding: 3px 11px;
}
.node .n-reward .nr-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 700; margin-right: 4px;
}

/* ---------- combat ---------- */
#screen-combat { position: relative; }
.combat-field {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 44px;
  padding: 26px 30px 0; min-height: 0;
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 50% 96%, rgba(201,162,39,.13), transparent 72%),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,92,246,.14), transparent 70%);
}
.enemies-row {
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center;
  gap: 52px; min-height: 200px;
}

/* ombre portée sous chaque combattant */
.avatar { position: relative; }
.avatar::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 66px; height: 13px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 72%);
}

.enemy {
  width: 190px; text-align: center; cursor: default;
  padding: 10px; border-radius: 12px; border: 2px solid transparent;
  transition: transform .15s, border-color .15s, background .15s;
}
.enemy.targetable { cursor: crosshair; }
.enemy.targetable:hover { border-color: var(--red-soft); background: rgba(212,69,63,.12); transform: scale(1.04); }
.enemy.dead { opacity: .25; filter: grayscale(1); pointer-events: none; }
.enemy.hit, .player-side.hit { animation: shake .3s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  75% { transform: translateX(9px); }
}

/* INTENTION = le « coup » que l'IA s'apprête à jouer, télégraphié en clair */
.intent {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; margin-bottom: 8px;
  color: var(--text-dim); min-height: 24px;
  background: rgba(0,0,0,.4); border: 1px solid var(--border);
  border-radius: 12px; padding: 3px 12px;
}
.intent:empty { display: none; }
.intent .i-ico { display: inline-flex; vertical-align: -2px; }
.intent .i-lbl { font-weight: 700; }
.intent .i-val { font-size: 16px; font-weight: 900; }
.intent .i-mult { font-size: 11px; font-weight: 700; opacity: .85; margin-left: 1px; }
/* couleur selon la nature du coup */
.intent.i-atk   { color: var(--red-soft); border-color: rgba(212,69,63,.6);  background: rgba(212,69,63,.16); }
.intent.i-def   { color: #9dc4f5;         border-color: var(--blue);         background: rgba(74,134,212,.16); }
.intent.i-spell { color: #c4a9ff;         border-color: var(--purple);       background: rgba(139,92,246,.16); }
.intent.i-buff  { color: var(--accent-2); border-color: var(--accent);       background: rgba(201,162,39,.16); }
/* une attaque imminente pulse pour attirer l'œil */
.intent.i-atk { animation: intentPulse 1.4s ease-in-out infinite; }
@keyframes intentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,69,63,0); }
  50%      { box-shadow: 0 0 12px 1px rgba(212,69,63,.55); }
}
/* portraits d'unités : illustration ronde */
.avatar {
  width: 92px; height: 92px; margin: 0 auto;
  border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.5);
}
.hero-face {
  position: absolute; inset: 3px; border-radius: 50%; overflow: hidden;
  display: block;
}
.hero-face .art-svg { width: 100%; height: 100%; }
.unit-name { font-weight: 700; margin: 6px 0 5px; font-size: 15px; }

.hpbar {
  position: relative; height: 20px; border-radius: 10px;
  background: #2a1a1e; border: 1px solid #4a2b30; overflow: hidden;
}
.hpfill { height: 100%; background: linear-gradient(180deg, #e05a52, #a5302b); transition: width .3s; }
.hpbar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000;
}

.badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; min-height: 24px; }
.badge {
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.badge.block { background: rgba(74,134,212,.2); border-color: var(--blue); color: #9dc4f5; }
.badge.vulnerable { background: rgba(212,69,63,.2); border-color: var(--red); color: var(--red-soft); }
.badge.faiblesse { background: rgba(139,92,246,.2); border-color: var(--purple); color: #c4a9ff; }
.badge.poison { background: rgba(79,174,106,.2); border-color: var(--green); color: #8fdda3; }
.badge.force { background: rgba(201,162,39,.2); border-color: var(--accent); color: var(--accent-2); }
.badge.dexterite { background: rgba(79,174,106,.2); border-color: var(--green); color: #8fdda3; }
.badge.regeneration { background: rgba(79,174,106,.2); border-color: var(--green); color: #8fdda3; }

.combat-center { display: flex; align-items: flex-end; justify-content: center; gap: 60px; padding-bottom: 4px; }
.player-side { width: 200px; text-align: center; }
.energy-orb {
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe488, var(--accent) 55%, #6b520d);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #241c05; font-weight: 800; box-shadow: 0 0 26px rgba(201,162,39,.45);
  flex-shrink: 0;
}
.energy-orb span { font-size: 22px; line-height: 1; }
.energy-orb small { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- main / cartes ---------- */
.hand-area {
  display: flex; align-items: flex-end; justify-content: center; gap: 26px;
  padding: 0 30px 16px; height: 268px;
}
.pile { text-align: center; width: 74px; flex-shrink: 0; }
.pile-count {
  width: 58px; height: 74px; margin: 0 auto 6px;
  border-radius: 8px; border: 2px solid var(--border); background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
}
.pile-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

.hand { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
/* ============================================================
   CARTES — cadre type « Magic : l'Assemblée »
   ------------------------------------------------------------
   Structure :
     .card > .card-inner (bordure noire)
             > .mtg-frame (fond de couleur)
               > .mtg-titlebar  nom + coût de mana
               > .mtg-art       illustration paysage
               > .mtg-typebar   ligne de type + symbole de rareté
               > .mtg-textbox   règles + texte d'ambiance
               > .mtg-footer    mention de bas de carte
           > .mtg-pt            force/endurance (créatures)
   Couleurs pilotées par --e1/--e2 (élément).
   ============================================================ */

.card {
  --e1: #6c6a8a; --e2: #3a3552;
  width: 168px; height: 234px;
  margin: 0 -6px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  perspective: 800px;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), filter .16s;
}
.card:hover    { transform: translateY(-42px) scale(1.08); z-index: 20; }
.card.selected { transform: translateY(-52px) scale(1.12); z-index: 25; }
.card.unplayable { filter: grayscale(.72) brightness(.6); }
.card.unplayable:hover { transform: translateY(-10px); }

/* --- bordure noire cartonnée --- */
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 12px;
  padding: 7px 6px 9px;
  background: linear-gradient(158deg, #2b2732 0%, #100d16 42%, #05040a 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.16);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .12s ease-out, box-shadow .2s;
  overflow: hidden;
}
.card:hover .card-inner { box-shadow: 0 18px 34px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.22); }
.card.selected .card-inner { box-shadow: 0 0 30px rgba(240,210,100,.7), inset 0 0 0 2px var(--accent-2); }

/* --- fond de carte teinté par l'élément --- */
.mtg-frame {
  position: relative; z-index: 2;
  height: 100%;
  border-radius: 4px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 3px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(172deg, var(--e1) 0%, var(--e2) 65%, #14101c 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.28);
}

/* --- bandeau de titre --- */
.mtg-titlebar {
  display: flex; align-items: center; gap: 3px;
  height: 20px; flex-shrink: 0;
  padding: 0 4px 0 6px;
  border-radius: 12px / 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(230,224,210,.34));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
}
.mtg-name {
  flex: 1; min-width: 0;
  font-size: 9px; font-weight: 800; letter-spacing: .1px;
  color: #171208;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Une vingtaine de cartes portent un nom que la barre de titre ne peut
   pas contenir : il finissait coupé par des points de suspension.
   On resserre légèrement pour ces noms-là — le reste ne bouge pas. */
.mtg-name.long { font-size: 8px; letter-spacing: -.2px; }

/* ============================================================
   ÉCRAN DE DÉMARRAGE
   ------------------------------------------------------------
   Il couvre tout tant qu'on ignore si une session est encore
   valide. La classe est posée dans le HTML, donc active avant le
   premier affichage : un rechargement ne laisse plus entrevoir le
   panneau du compte avant de basculer sur l'accueil.
   ============================================================ */
#demarrage {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg);
}
body.demarrage #demarrage { display: flex; }
body.demarrage #app,
body.demarrage #topnav { visibility: hidden; }

.dem-logo {
  font-weight: 800; letter-spacing: 8px; font-size: 26px;
  background: linear-gradient(180deg, #fff6d0, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dem-txt { font-size: 12.5px; color: var(--text-dim); letter-spacing: 1px; }

/* ============================================================
   PORTE D'ENTRÉE — tant qu'aucun compte n'est ouvert
   ------------------------------------------------------------
   Inutile de montrer des onglets qui renverraient tous au même
   écran : on ne propose que ce qui est réellement accessible.
   La navigation est aussi neutralisée côté JavaScript (Nav.go),
   le masquage n'est donc pas la seule barrière.
   ============================================================ */
body.sans-compte #topnav .nav-links,
body.sans-compte #topnav .wallet { display: none; }
body.sans-compte #topnav { justify-content: center; }
body.sans-compte .nav-logo { font-size: 20px; letter-spacing: 6px; }

.page-sub.dim { opacity: .72; }
.mtg-mana { display: flex; gap: 2px; flex-shrink: 0; }
.pip {
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; font-style: normal;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.5);
}
.pip.generic { background: linear-gradient(180deg, #ded6c6, #b3a894); color: #241c10; }
.pip.elem    { background: linear-gradient(180deg, #fff, #ded8ca); }
.pip.elem .elem-svg { display: block; }

/* --- illustration : proportions proches d'une vraie carte --- */
.mtg-art {
  height: 96px; flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.65);
  box-shadow: inset 0 0 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(200deg, var(--e1), var(--e2));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* l'illustration remplit toute la fenêtre */
.art-wrap { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.art-svg { display: block; width: 100%; height: 100%; }
/* image personnalisée déposée dans assets/art/ : elle recouvre le dessin.
   Le cadrage privilégie le haut du sujet (visage, tête) plutôt que le centre. */
.art-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  display: block;
  /* fondu à l'arrivée : l'image ne remplace plus le fond d'un coup sec.
     Le class « chargee » est posé par l'attribut onload de la balise. */
  opacity: 0; transition: opacity .28s ease;
}
.art-photo.chargee { opacity: 1; }
/* carte sans règles : plus grande illustration, la boîte ne garde que l'ambiance */
.card.art-big .mtg-art { height: 120px; }
.card.art-big .mtg-textbox { justify-content: center; }
.card.art-big .mtg-flavor { border-top: none; margin-top: 0; padding-top: 0; font-size: 8px; }

/* --- ligne de type --- */
.mtg-typebar {
  display: flex; align-items: center; gap: 4px;
  height: 15px; flex-shrink: 0;
  padding: 0 5px;
  border-radius: 10px / 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(230,224,210,.28));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
}
.mtg-type {
  flex: 1; min-width: 0;
  font-size: 7.5px; font-weight: 700; letter-spacing: .2px;
  color: #1d1710; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mtg-set { font-size: 9px; line-height: 1; flex-shrink: 0; }

/* --- boîte de règles, papier ivoire --- */
.mtg-textbox {
  flex: 1; min-height: 0;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.45);
  background: linear-gradient(180deg, #f6efdc, #e5dcc4);
  padding: 3px 5px;
  font-size: 8.5px; line-height: 1.25;
  color: #241d12;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.mtg-rules { text-align: center; }
.mtg-rules b { color: #6d4a00; font-weight: 800; }
.mtg-flavor {
  font-style: italic; font-size: 7.5px; line-height: 1.25;
  color: #5f5644; text-align: center;
  margin-top: 3px; padding-top: 3px;
  border-top: 1px solid rgba(0,0,0,.18);
}

/* --- bas de carte --- */
.mtg-footer {
  flex-shrink: 0; height: 9px;
  font-size: 6px; letter-spacing: .6px;
  color: rgba(255,255,255,.72); text-shadow: 0 1px 1px rgba(0,0,0,.8);
  display: flex; justify-content: space-between; padding: 0 3px;
}

/* --- cartouche force / endurance --- */
.mtg-pt {
  position: absolute; right: 3px; bottom: 2px; z-index: 6;
  min-width: 40px; padding: 1px 7px;
  border-radius: 9px / 50%;
  background: linear-gradient(180deg, #efe7d4, #bdb29c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.6);
  font-size: 12px; font-weight: 800; color: #1a1409;
  text-align: center; letter-spacing: -.3px;
}
.mtg-pt.buffed { background: linear-gradient(180deg, #d6f5c8, #7fc169); color: #10300a; }

/* --- reflet suivant la souris --- */
.card-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 6px; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.5), rgba(255,255,255,.08) 38%, transparent 60%);
  mix-blend-mode: soft-light;
}
.card:hover .card-shine { opacity: 1; }

/* --- voile holographique (rares et mieux) ---
   LE TRAIT JAUNE. Ce voile était un dégradé RÉPÉTITIF à arrêts francs
   — #ff2fd0, #00ffe0, #ffe600, #46ff7a — mélangé en « color-dodge ».
   Ce mode de fusion éclaircit à outrance : posée sur le cadre doré
   d'une légendaire, la bande #ffe600 saturait jusqu'au blanc et se
   lisait comme un TRAIT JAUNE net en travers de la carte, au lieu
   d'un reflet.

   Deux corrections : des couleurs translucides qui se fondent l'une
   dans l'autre plutôt que des bandes tranchées, et « overlay » à la
   place de « color-dodge » — il nuance au lieu de brûler. L'effet
   irisé demeure ; le trait disparaît. */
.card-holo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 6px; opacity: 0;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(115deg,
      rgba(255,110,205,.50)  0%,
      rgba(120,225,255,.50)  7%,
      rgba(190,235,255,.38) 13%,
      rgba(255,235,190,.34) 18%,
      rgba(150,255,200,.46) 25%,
      rgba(255,110,205,.50) 32%);
  background-size: 300% 300%;
  animation: holoShift 5s linear infinite;
  transition: opacity .25s;
}
@keyframes holoShift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

/* ============================================================
   RARETÉS — TROIS MATIÈRES DIFFÉRENTES
   ------------------------------------------------------------
   Les trois raretés partageaient le MÊME voile irisé, à trois
   opacités près. On ne distinguait donc pas une épique d'une
   légendaire autrement qu'en plissant les yeux, et l'effet ne
   racontait rien.

   Chacune a désormais sa propre matière :
     • RARE       un reflet de verre, une bande claire qui balaie
     • ÉPIQUE     une poussière d'étoiles violette, granuleuse
     • LÉGENDAIRE l'irisation complète, plus un halo doré qui tourne

   Rien n'est importé : tout est fait de dégradés CSS.
   ============================================================ */

/* ---------- RARE : un reflet de verre ----------
   Pas de couleur, une seule bande claire qui traverse lentement.
   Discret, et il suffit à dire « ce n'est pas une commune ». */
.card.rar-rare .card-holo {
  opacity: .5;
  mix-blend-mode: soft-light;
  background: linear-gradient(105deg,
      transparent 34%,
      rgba(200,230,255,.55) 45%,
      rgba(255,255,255,.95) 50%,
      rgba(200,230,255,.55) 55%,
      transparent 66%);
  background-size: 260% 100%;
  animation: rareBalayage 7s ease-in-out infinite;
}
.card.rar-rare:hover .card-holo { opacity: .82; animation-duration: 2.6s; }
@keyframes rareBalayage {
  0%, 62% { background-position: 150% 0; }
  100%    { background-position: -50% 0; }
}
.card.rar-rare .card-inner { box-shadow: 0 6px 16px rgba(0,0,0,.65), inset 0 0 0 1px rgba(200,220,240,.35); }

/* ---------- ÉPIQUE : une poussière d'étoiles ----------
   Des points lumineux plutôt qu'une bande : la matière est
   granuleuse. Ils respirent et dérivent doucement. */
.card.rar-epique .card-holo {
  opacity: .85;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(226,180,255,.95) 0, transparent 1.7px),
    radial-gradient(circle at 63% 14%, rgba(255,255,255,.85) 0, transparent 1.3px),
    radial-gradient(circle at 84% 41%, rgba(214,150,255,.90) 0, transparent 1.9px),
    radial-gradient(circle at 31% 58%, rgba(255,240,255,.80) 0, transparent 1.2px),
    radial-gradient(circle at 72% 73%, rgba(200,140,255,.95) 0, transparent 1.8px),
    radial-gradient(circle at 12% 86%, rgba(240,210,255,.85) 0, transparent 1.4px),
    radial-gradient(circle at 47% 34%, rgba(190,120,255,.70) 0, transparent 1.1px),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,.75) 0, transparent 1.3px);
  background-size: 100% 100%;
  animation: epiquePoussiere 6.5s ease-in-out infinite;
}
.card.rar-epique:hover .card-holo { animation-duration: 3.2s; }
@keyframes epiquePoussiere {
  0%, 100% { opacity: .5; transform: translateY(0) scale(1); }
  50%      { opacity: 1;  transform: translateY(-3px) scale(1.05); }
}
.card.rar-epique .card-inner { box-shadow: 0 0 18px rgba(170,90,255,.35), 0 6px 16px rgba(0,0,0,.65), inset 0 0 0 1px rgba(190,130,255,.55); }

/* ---------- LÉGENDAIRE : irisation + halo tournant ----------
   Elle garde le voile irisé — c'est elle qui le mérite — et reçoit
   en plus un balayage doré qui tourne lentement autour de la carte. */
.card.rar-legendaire .card-holo { opacity: .38; overflow: hidden; }
.card.rar-legendaire:hover .card-holo { opacity: .58; }
.card.rar-legendaire .card-holo::after {
  content: ""; position: absolute; inset: -40%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
      transparent 0deg,   rgba(255,226,150,.40) 26deg,
      transparent 62deg,  transparent 180deg,
      rgba(255,240,190,.28) 208deg, transparent 246deg, transparent 360deg);
  mix-blend-mode: overlay;
  animation: legHalo 9s linear infinite;
}
@keyframes legHalo { to { transform: rotate(360deg); } }
.card.rar-legendaire .card-inner {
  background: linear-gradient(158deg, #4a3c17 0%, #171208 45%, #07050a 100%);
  box-shadow: 0 0 24px rgba(240,210,100,.5), 0 6px 16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,228,136,.55);
}
/* au survol la légendaire gagne à la fois le relief (que la règle
   .card:hover .card-inner ne lui appliquait plus, à cause de l'ordre des
   règles) et une auréole dorée plus large : c'est elle qui remplace le
   clignotement supprimé plus bas */
.card.rar-legendaire:hover .card-inner {
  box-shadow: 0 0 34px rgba(255,215,110,.7), 0 18px 34px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,236,160,.65);
}
.card.rar-legendaire .mtg-titlebar {
  background: linear-gradient(180deg, #fff3c9, #d9c07a);
  box-shadow: inset 0 0 0 1px rgba(90,66,0,.7), 0 1px 2px rgba(0,0,0,.4);
}
/* Aura dorée de la légendaire.
   Elle est volontairement placée SOUS le voile holographique (z-index 1,
   contre 3 pour .card-holo) : le dégradé arc-en-ciel la traverse et s'en
   trouve réchauffé, au lieu d'être tranché par un liseré posé par-dessus.
   Plus de bordure nette de 2 px : deux lueurs floues qui se fondent dans
   le pourtour. .mtg-frame (z-index 2) masque le centre, il ne reste donc
   que le halo sur la tranche de la carte. */
.card.rar-legendaire .card-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 12px;
  box-shadow:
    inset 0 0 9px 1px rgba(255,208,110,.42),
    inset 0 0 22px 5px rgba(255,170,50,.18);
  animation: legPulse 3.6s ease-in-out infinite;
}
/* respiration lente et de faible amplitude : la carte reste vivante
   sans clignoter */
@keyframes legPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* Le séparateur entre les règles et le texte d'ambiance est un trait sombre
   (voir .mtg-flavor). Mais .card-holo passe PAR-DESSUS la boîte de texte en
   mix-blend-mode: color-dodge, qui éclaircit : sur une légendaire, dont le
   voile est le plus dense (.24 au repos contre .08 pour une rare), ce trait
   vire au doré et coupe la carte en deux. On l'atténue pour cette seule
   rareté — l'espacement suffit à séparer les deux blocs. */
.card.rar-legendaire .mtg-flavor { border-top-color: rgba(0,0,0,.07); }

/* carte exclusive (achetée en gemmes) */
.card.premium .mtg-footer { color: #ffd9a0; }

.btn-endturn { position: absolute; right: 34px; bottom: 120px; }

.combat-log {
  position: absolute; left: 20px; top: 80px;
  width: 250px; max-height: 220px; overflow: hidden;
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
  pointer-events: none;
}
.combat-log div { opacity: .85; }
.combat-log div:first-child { color: var(--text); opacity: 1; }

.targeting-hint {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(212,69,63,.15); border: 1px solid var(--red);
  padding: 7px 20px; border-radius: 20px; font-size: 13px; font-weight: 600;
  display: none;
}
.targeting-hint.show { display: block; }
.cancel-hint { color: var(--text-dim); font-weight: 400; }

/* ---------- récompense ---------- */
.reward-cards { display: flex; gap: 20px; justify-content: center; margin: 26px 0; }
.reward-cards .card { margin: 0; }
.reward-cards .card:hover { transform: translateY(-14px) scale(1.05); }

/* ---------- repos ---------- */
.rest-options { display: flex; gap: 22px; justify-content: center; margin-top: 24px; }
.rest-opt {
  font-family: inherit; color: var(--text);
  width: 240px; padding: 26px 18px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: transform .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.rest-opt:hover { transform: translateY(-5px); border-color: var(--accent); }
/* .rest-ico : centrage défini plus haut. Le font-size qui traînait ici
   datait des emojis et n'avait plus d'effet sur un SVG. */
.rest-opt b { font-size: 16px; }
.rest-opt small { font-size: 12px; color: var(--text-dim); }

/* ---------- overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,3,10,.88);
  display: none; align-items: center; justify-content: center;
}
.overlay.show { display: flex; }
.overlay-box {
  width: min(1080px, 92vw); max-height: 88vh;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; text-align: center;
  display: flex; flex-direction: column; gap: 18px;
}
.card-grid {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  overflow-y: auto; padding: 6px;
}
.card-grid .card { margin: 0; }
.card-grid .card:hover { transform: translateY(-8px) scale(1.04); }

/* ---------- carte agrandie ---------- */
.card-zoom {
  position: fixed; inset: 0; z-index: 220;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 30px;
  background: rgba(5, 3, 10, .9);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.card-zoom.show { display: flex; animation: zoomIn .18s ease-out; }
@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }

.cz-inner { display: flex; align-items: center; gap: 52px; flex-wrap: wrap; justify-content: center; }

/* la carte est agrandie telle quelle : mêmes proportions, mêmes détails */
.cz-card { width: 378px; height: 526px; display: flex; align-items: center; justify-content: center; }
.cz-card .card {
  margin: 0; cursor: zoom-out;
  transform: scale(2.25); transform-origin: center;
}
.cz-card .card:hover { transform: scale(2.25); }
.cz-card .card .mtg-flavor { display: block; }

.cz-info { width: 360px; max-width: 92vw; }
.cz-info h3 { font-size: 26px; margin-bottom: 10px; color: var(--accent-2); }
.cz-line { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cz-line span {
  font-size: 12px; padding: 3px 11px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
}
.cz-rar.rar-legendaire { color: #ffd76b; border-color: #ffd76b; }
.cz-rar.rar-epique     { color: #c88cff; border-color: #c88cff; }
.cz-rar.rar-rare       { color: #9fd0ff; border-color: #9fd0ff; }
.cz-excl { color: #d5b8ff; border-color: #7b2ea8 !important; }
.cz-rules {
  font-size: 15px; line-height: 1.6; margin-bottom: 16px;
  background: rgba(0,0,0,.3); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 12px 14px;
}
.cz-rules b { color: var(--accent-2); }
.cz-keys { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.cz-keys .tip-key { font-size: 12.5px; }
.cz-keys .tip-key + .tip-key { margin-top: 0; padding-top: 9px; }
.cz-flavor { font-style: italic; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.cz-close { font-size: 12px; color: var(--text-dim); }

/* ---------- aide au survol d'une carte ---------- */
.card-tip {
  position: fixed; z-index: 210; pointer-events: none;
  width: 250px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(24,19,38,.98), rgba(14,11,24,.98));
  border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s;
}
.card-tip.show { opacity: 1; transform: translateY(0); }
.tip-key { font-size: 11.5px; line-height: 1.45; }
.tip-key + .tip-key { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(61,51,88,.6); }
.tip-key b { display: block; color: var(--accent-2); font-size: 12px; margin-bottom: 1px; }
.tip-key span { color: var(--text-dim); }

/* ---------- toast ---------- */
.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: var(--panel-2); border: 1px solid var(--accent);
  padding: 11px 26px; border-radius: 24px; font-weight: 600; font-size: 14px;
  opacity: 0; transition: transform .3s, opacity .3s; z-index: 200; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- nombres flottants ---------- */
.floater {
  position: fixed; font-size: 32px; font-weight: 900;
  pointer-events: none; z-index: 150;
  text-shadow: 0 2px 6px #000, 0 0 2px #000;
  -webkit-text-stroke: 1px rgba(0,0,0,.45);
  animation: floatUp 1s ease-out forwards;
}
.floater.dmg  { color: #ff5a4d; font-size: 40px; text-shadow: 0 0 14px rgba(255,60,48,.85), 0 2px 6px #000; }
.floater.heal { color: #8fdda3; text-shadow: 0 0 13px rgba(90,220,130,.7), 0 2px 6px #000; }
.floater.blk  { color: #9dc4f5; text-shadow: 0 0 12px rgba(120,170,240,.6), 0 2px 6px #000; }
/* rebond marqué : le chiffre « claque » puis remonte */
@keyframes floatUp {
  0%   { transform: translateY(6px) scale(.45); opacity: 0; }
  18%  { transform: translateY(-16px) scale(1.4);  opacity: 1; }
  32%  { transform: translateY(-22px) scale(.98); opacity: 1; }
  100% { transform: translateY(-74px) scale(1);   opacity: 0; }
}

/* ============================================================
   EFFETS DE JEU — impacts, particules, invocation légendaire
   ============================================================ */

/* fantôme de la carte jouée : elle s'envole et se dissout */
.card-ghost {
  position: fixed; z-index: 160; pointer-events: none;
  transform-origin: center;
  animation: castCard .55s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes castCard {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
  45%  { transform: translate(var(--dx), calc(var(--dy) * .5)) scale(1.22) rotate(-4deg); opacity: 1; filter: brightness(1.7); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.35) rotate(6deg); opacity: 0; filter: brightness(2.6); }
}

/* --- impacts --- */
.fx { position: fixed; pointer-events: none; z-index: 155; }

.fx-slash {
  width: 130px; height: 130px; margin: -65px 0 0 -65px;
  animation: fxFade .45s ease-out forwards;
}
.fx-slash i {
  position: absolute; left: 8%; top: 50%;
  width: 84%; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff, var(--fx, #ff6b6b), transparent);
  box-shadow: 0 0 14px var(--fx, #ff6b6b);
  transform-origin: center;
}
.fx-slash i:nth-child(1) { transform: rotate(-38deg) scaleX(0); animation: slash .3s ease-out forwards; }
.fx-slash i:nth-child(2) { transform: rotate(28deg) scaleX(0);  animation: slash .3s .07s ease-out forwards; }
.fx-slash i:nth-child(3) { transform: rotate(-8deg) scaleX(0);  animation: slash .3s .14s ease-out forwards; }
@keyframes slash { 40% { opacity: 1; } to { transform: rotate(var(--r,0)) scaleX(1); opacity: 0; } }
@keyframes fxFade { to { opacity: 0; } }

.fx-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 3px solid var(--fx, #9dc4f5);
  box-shadow: 0 0 22px var(--fx, #9dc4f5), inset 0 0 18px var(--fx, #9dc4f5);
  animation: ringOut .6s ease-out forwards;
}
@keyframes ringOut {
  0%   { transform: scale(.3); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

.spark {
  position: fixed; width: 7px; height: 7px; border-radius: 50%;
  pointer-events: none; z-index: 156;
  background: var(--fx, #ffd76b);
  box-shadow: 0 0 10px var(--fx, #ffd76b);
  animation: sparkOut .65s ease-out forwards;
}
@keyframes sparkOut {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
}

/* projectile d'attaque en duel */
.fx-bolt {
  position: fixed; z-index: 158; pointer-events: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--fx, #ffd76b) 65%, transparent);
  box-shadow: 0 0 18px var(--fx, #ffd76b), 0 0 40px var(--fx, #ffd76b);
  transition: transform .26s cubic-bezier(.45,0,.55,1);
}

/* apparition d'une créature */
.minion.summoned { animation: summonPop .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes summonPop {
  0%   { transform: translateY(26px) scale(.4); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.hero-portrait.hit { animation: shake .3s; }
/* créature frappée : tremblement + éclat rouge, on SENT le coup */
.minion.hit { animation: shake .3s, hitFlash .34s; }
@keyframes hitFlash {
  0%, 100% { box-shadow: 0 5px 12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.22); }
  30%      { box-shadow: 0 0 22px 5px rgba(255,70,55,.95), inset 0 0 26px rgba(255,60,45,.9); }
}
/* créature qui meurt : elle se disloque avant que le rendu ne la retire */
.minion.dying { animation: minionDie .45s ease-in forwards; pointer-events: none; z-index: 1; }
@keyframes minionDie {
  0%   { transform: scale(1) rotate(0); opacity: 1; filter: none; }
  100% { transform: scale(.55) rotate(10deg) translateY(14px); opacity: 0; filter: grayscale(1) brightness(.35); }
}
/* éclat blanc d'impact d'une attaque */
.fx-impact {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 32%, transparent 68%);
  animation: impactPop .4s ease-out forwards;
}
@keyframes impactPop {
  0%   { transform: scale(.3); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* flash plein écran */
.screen-flash {
  position: fixed; inset: 0; z-index: 140; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, var(--fx, #fff) 0%, transparent 65%);
  animation: flashOut .5s ease-out forwards;
}
@keyframes flashOut { from { opacity: .75; } to { opacity: 0; } }

/* --- bannière d'invocation d'une carte légendaire --- */
.legend-banner {
  position: fixed; inset: 0; z-index: 170; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  animation: bannerOut 1.5s ease-out forwards;
}
.legend-banner .lb-bar {
  width: 100%; padding: 22px 0; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.88) 18%, rgba(0,0,0,.88) 82%, transparent);
  border-top: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  box-shadow: 0 0 44px rgba(240,210,100,.55);
  animation: bannerIn .45s cubic-bezier(.2,1.4,.4,1);
}
.legend-banner .lb-name {
  font-size: 38px; font-weight: 800; letter-spacing: 5px;
  background: linear-gradient(180deg, #fff8dc, var(--accent-2) 55%, #9b7a1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(240,210,100,.5);
}
.legend-banner .lb-sub {
  font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--accent);
  margin-top: 4px;
}
@keyframes bannerIn { from { transform: scaleX(.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes bannerOut { 0%,72% { opacity: 1; } 100% { opacity: 0; } }

/* ============================================================
   BARRE DE NAVIGATION
   ============================================================ */
#topnav {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 90;
  display: flex; align-items: center; gap: 24px; padding: 0 22px;
  background: linear-gradient(180deg, rgba(20,16,32,.98), rgba(20,16,32,.9));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
#topnav.hidden { display: none; }
body.with-nav .screen { padding-top: 52px; height: 100vh; }

.nav-logo {
  font-weight: 800; letter-spacing: 4px; font-size: 16px;
  background: linear-gradient(180deg, #fff6d0, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-links { display: flex; gap: 6px; flex: 1; }
.navbtn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-dim); background: transparent; border: 1px solid transparent;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all .15s;
}
.navbtn:hover { color: var(--text); background: var(--panel); border-color: var(--border); }
.navbtn.shop { color: var(--accent-2); }
.wallet { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.w-item { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 4px 13px; }
.w-item.gem { border-color: #6b4fa8; color: #d5b8ff; }
.w-item.dust { border-color: #5a4d8a; color: #c8b6ff; }
.w-item b { color: var(--accent-2); }
.w-item.gem b { color: #d5b8ff; }
.w-item.dust b { color: #c8b6ff; }

/* Le compte vit à DROITE, avec l'or et les gemmes : ce sont les trois
   choses qui appartiennent au joueur, par opposition aux onglets de
   gauche qui mènent aux écrans du jeu.
   Il prend la forme d'une pastille comme ses voisines, et le pseudo
   est borné : dix-huit caractères sont permis, et sans limite ils
   repousseraient la bourse hors de la barre. */
.navbtn.w-compte {
  border-radius: 16px; padding: 5px 14px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbtn.w-compte:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   ACCUEIL
   ============================================================ */
#screen-home { align-items: center; justify-content: center; }
/* assez large pour aligner les quatre modes sur une seule ligne */
#screen-home { align-items: center; justify-content: safe center; overflow-y: auto; }
.home-wrap { text-align: center; max-width: 1200px; padding: 20px; }
.logo.small { font-size: 40px; letter-spacing: 8px; }

.modes { display: flex; gap: 18px; justify-content: center; margin: 32px 0 26px; flex-wrap: wrap; }
.mode-card {
  width: 268px; max-width: calc(50% - 12px); padding: 26px 20px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border); border-radius: 16px;
  cursor: pointer; transition: transform .16s, border-color .16s, box-shadow .16s;
}
.mode-card:hover { transform: translateY(-7px); border-color: var(--accent); box-shadow: var(--shadow); }
/* .mode-ico est centré plus haut (display:flex). Cette règle imposait
   « display: block », ce qui décalait l'icône à gauche : un SVG porte
   .ui-icon { display: block } et un bloc ignore le text-align du parent.
   Le font-size était un reste de l'époque où les icônes étaient des
   emojis — il ne sert plus à rien, les SVG ont leur taille en attribut. */
.mode-card h3 { font-size: 18px; margin-bottom: 8px; }
.mode-card p { font-size: 13px; color: var(--text-dim); line-height: 1.5; min-height: 58px; }
.mode-go {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--accent-2); letter-spacing: 1px; text-transform: uppercase;
}

.home-stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.hs { display: flex; flex-direction: column; }
.hs b { font-size: 22px; color: var(--accent-2); }
.hs span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   SALON DE DUEL
   ============================================================ */
#screen-lobby { align-items: center; justify-content: center; }
.lobby-cols { display: flex; gap: 26px; justify-content: center; margin: 24px 0; }
.lobby-col {
  width: 320px; padding: 22px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.lobby-col h3 { font-size: 15px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.diff-row { display: flex; gap: 8px; }

/* sélecteur du deck actif, avant de lancer la partie */
.lobby-deck { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.lobby-deck label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
#lobby-deck-sel {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 220px;
}
#lobby-deck-sel:hover { border-color: var(--accent); }
/* pseudo NON modifiable : il vient du compte du joueur */
.lobby-pseudo-row { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lobby-pseudo-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.lobby-pseudo {
  font-size: 16px; font-weight: 800; color: var(--accent-2);
  background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 16px; min-width: 120px; text-align: center;
}
.hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.warn { color: var(--red-soft); }
.lobby-status { font-size: 12px; color: var(--text-dim); min-height: 34px; line-height: 1.5; }
.lobby-status.error { color: var(--red-soft); }
.lobby-status code { background: rgba(0,0,0,.4); padding: 1px 5px; border-radius: 4px; color: var(--accent-2); }
.rules-mini {
  font-size: 12px; color: var(--text-dim); line-height: 1.7; text-align: left;
  background: rgba(0,0,0,.25); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; margin-top: 10px;
}
.rules-mini b { color: var(--text); }

input[type=text], select {
  font-family: inherit; font-size: 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
  width: 100%;
}
input[type=text]:focus, select:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   LA LISTE DÉROULÉE D'UN <select>
   ------------------------------------------------------------
   AUCUNE règle ne visait « option ». Le navigateur déduisait donc
   l'apparence de la liste à partir du champ — et il n'en déduisait
   pas la même chose partout : le menu « Pays » sortait en gris sur
   gris, illisible, quand celui des éléments sortait en sombre sur
   blanc.

   On ne laisse plus deviner. La liste est déclarée ici, une fois,
   pour TOUS les sélecteurs du jeu : fond sombre du thème, texte
   clair, ligne survolée en doré. Ils se ressemblent enfin, et se
   lisent.

   « color-scheme: dark » complète le tableau : il indique au
   navigateur que la page est sombre, ce qui corrige au passage
   l'ascenseur du menu et le sélecteur de date.
   ============================================================ */
/* Le champ lui-même : même habillage partout, déclaré ICI et nulle
   part ailleurs. Certains sélecteurs gardaient la flèche native du
   système — grise, différente d'un navigateur à l'autre — pendant
   que d'autres avaient un chevron dessiné. Les conteneurs ne règlent
   plus que la largeur et la taille du texte. */
/* Le navigateur dessine lui-même certaines pièces — ascenseurs, menus
   déroulés, sélecteurs de date. Sans cette déclaration il les fait en
   clair, et elles jurent au milieu d'une page sombre. */
:root { color-scheme: dark; }

select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:hover { border-color: var(--accent-2); }

select option {
  background-color: #1d1730;
  color: #ece7f6;
  padding: 6px 10px;
}
select option:checked,
select option:hover {
  background-color: #3a2c5e;
  color: #fff3c9;
}
/* l'entrée « Choisis ton pays » n'est pas un choix : on la grise */
select option[value=""] { color: #8f86a6; }

.spinner { width: 26px; height: 26px; display: none; }
.spinner.show { display: block; }
.spinner::after {
  content: ""; display: block; width: 100%; height: 100%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PLATEAU DE DUEL
   ============================================================ */
/* le décor couvre tout l'écran ; seul le plateau est borné en largeur */
#screen-duel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 40% at 50% 50%, rgba(201,162,39,.09), transparent 72%),
    linear-gradient(180deg, rgba(139,92,246,.12), transparent 32%, transparent 68%, rgba(201,162,39,.09));
}
.duel-wrap {
  flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;
  /* sur grand écran, le plateau reste groupé et centré au lieu de s'étirer */
  width: 100%; max-width: 1480px; margin: 0 auto;
}

.duel-side {
  display: flex; align-items: center; justify-content: center; gap: 70px;
  padding: 16px 26px 8px; flex: 0 0 auto;
}
.foe-hand { flex: 0 0 auto; }
.duel-side.me { flex-direction: column; align-items: center; gap: 0; padding: 6px 26px 0; }

.hero-block { display: flex; align-items: center; gap: 12px; }
.hero-portrait {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--panel-2), #120e1e);
  border: 3px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; flex-shrink: 0; transition: all .15s;
}
.hero-portrait.targetable {
  border-color: var(--red-soft); cursor: crosshair;
  box-shadow: 0 0 20px rgba(255,122,114,.6); transform: scale(1.06);
}
.hero-hp {
  position: absolute; bottom: -6px; right: -6px;
  min-width: 28px; height: 28px; padding: 0 5px; border-radius: 14px;
  background: linear-gradient(180deg, #e05a52, #a5302b);
  border: 2px solid #0d0b14;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
/* pastille d'armure, au-dessus des PV */
.hero-armor {
  position: absolute; top: -4px; right: -6px;
  min-width: 26px; height: 26px; padding: 0 5px; border-radius: 13px;
  background: linear-gradient(180deg, #9dc4f5, #3d6494);
  border: 2px solid #0d0b14; color: #06101f;
  display: none; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.hero-armor.show { display: flex; }

/* bouton du pouvoir de héros */
.power-btn {
  font-family: inherit; color: var(--text);
  width: 74px; min-height: 52px; padding: 5px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 2px solid var(--border); border-radius: 10px;
  cursor: not-allowed; opacity: .55; flex-shrink: 0;
  transition: transform .14s, border-color .14s, box-shadow .14s, opacity .14s;
}
.power-btn .pw-name { font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; }
.power-btn .pw-cost {
  width: 19px; height: 19px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9fe0ff, #2b7fd4);
  color: #04203c; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.power-btn.ready {
  opacity: 1; cursor: pointer;
  border-color: var(--accent); box-shadow: 0 0 14px rgba(201,162,39,.35);
}
.power-btn.ready:hover { transform: translateY(-3px); border-color: var(--accent-2); }
.power-btn.selected {
  border-color: var(--accent-2); box-shadow: 0 0 22px rgba(240,210,100,.7);
  transform: translateY(-3px);
}
.power-btn.used .pw-name { text-decoration: line-through; }

.hero-info { min-width: 190px; }
.hero-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.hero-mull { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; min-height: 0; }
.hero-mull:empty { display: none; }
.hero-mull b { color: var(--accent-2); }
.hpbar.small { height: 8px; margin-bottom: 6px; }
.mana { display: flex; align-items: center; gap: 2px; font-size: 11px; }
.mana b { margin-left: 6px; color: #8fd0ff; font-size: 12px; }
.crystal {
  width: 11px; height: 13px; border-radius: 3px; display: inline-block;
  clip-path: polygon(50% 0, 100% 35%, 78% 100%, 22% 100%, 0 35%);
}
.crystal.full  { background: linear-gradient(180deg, #9fe0ff, #2b7fd4); box-shadow: 0 0 6px rgba(70,160,255,.7); }
.crystal.empty { background: #2a3550; }
.crystal.none  { background: #1a1a26; opacity: .4; }

.deck-pile {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font-weight: 700; font-size: 13px;
}

/* main adverse : dos de cartes */
.foe-hand { display: flex; flex: 0 0 auto; justify-content: center; align-items: center; }
.cardback {
  width: 40px; height: 58px; margin: 0 -7px; flex-shrink: 0;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, #5b4a86, #2b2140);
  border: 2px solid #6d5aa0;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
  transform: rotate(calc(var(--i, 0) * 2deg - 6deg));
}
.cardback.big {
  width: 162px; height: 232px; margin: 0; border-radius: 13px; transform: none;
  border-width: 4px;
  display: flex; align-items: center; justify-content: center;
}
.cardback.big::after { content: "🜁"; font-size: 46px; opacity: .5; }

/* terrains */
/* les terrains occupent l'espace restant mais sans s'étirer à l'infini */
.board {
  flex: 1 1 auto; min-height: 150px; max-height: 230px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 26px;
}
.board-empty { color: var(--text-dim); font-size: 12px; font-style: italic; opacity: .5; }
.board-mid {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 6px 26px; flex-shrink: 0; height: 56px;
  border-top: 1px solid rgba(201,162,39,.18);
  border-bottom: 1px solid rgba(201,162,39,.18);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 12%, rgba(0,0,0,.35) 88%, transparent);
}
.duel-status { flex: 1; font-size: 13px; color: var(--text-dim); text-align: right; }
#btn-duel-end.waiting { opacity: .45; }
#btn-duel-end:disabled { cursor: default; }

/* créature sur le plateau */
.minion {
  position: relative;
  width: 110px; height: 130px; flex-shrink: 0;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(170deg, var(--e1), var(--e2) 75%, #14101c);
  border: 3px solid #0a0810;
  box-shadow: 0 5px 12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.22);
  position: relative; overflow: visible;
  cursor: default;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.minion:hover { transform: translateY(-4px); }
/* l'illustration occupe toute la vignette, le nom passe par-dessus */
.minion .m-art {
  position: absolute; inset: 0;
  border-radius: 7px; overflow: hidden;
}
.minion .m-namebar {
  position: absolute; left: 24px; right: 24px; bottom: 2px; z-index: 3;
  font-size: 8px; font-weight: 800; text-align: center; line-height: 1.15;
  color: #191308;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(228,220,200,.7));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
  border-radius: 8px / 50%; padding: 1px 4px;
  max-height: 20px; overflow: hidden;
}
.minion .m-keys {
  position: absolute; top: 3px; right: 3px; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
}
.mk {
  display: flex; width: 15px; height: 15px; align-items: center; justify-content: center;
  background: rgba(8,6,16,.75); border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%; filter: drop-shadow(0 1px 2px #000);
}
/* Attaque (gauche, ambre) et Points de vie (droite, rouge) : deux pastilles
   distinctes et grosses, lisibles d'un coup d'œil — l'ancien « 3/2 » combiné
   ne laissait pas voir ce qui était l'attaque et ce qui était la vie. */
.minion .m-atk, .minion .m-hp {
  position: absolute; bottom: -7px; z-index: 5;
  width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; line-height: 1;
  border-radius: 50%; border: 2px solid #0a0810;
  box-shadow: 0 2px 5px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.minion .m-atk { left: -7px;  background: radial-gradient(circle at 38% 28%, #ffe488, #d99a12); color: #3a2600; }
.minion .m-hp  { right: -7px; background: radial-gradient(circle at 38% 28%, #ff9a8f, #c9291c); color: #fff; }
/* attaque ou vie max augmentée : vert ; vie entamée : rouge vif */
.minion .m-atk.up  { background: radial-gradient(circle at 38% 28%, #c6f5a8, #4aa855); color: #0a2e08; }
.minion .m-hp.up   { background: radial-gradient(circle at 38% 28%, #c6f5a8, #4aa855); color: #0a2e08; }
.minion .m-hp.hurt { background: radial-gradient(circle at 38% 28%, #ff8272, #9e140a); color: #fff; }

.minion.ready { cursor: pointer; border-color: rgba(255,235,150,.9); box-shadow: 0 0 16px rgba(240,210,100,.5), 0 5px 12px rgba(0,0,0,.55); }
.minion.selected { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 26px rgba(240,210,100,.9); }
.minion.taunted::before {
  content: ""; position: absolute; inset: -5px; border-radius: 13px;
  border: 2px dashed rgba(160,190,255,.75); pointer-events: none;
}
.minion.shielded { box-shadow: 0 0 0 3px rgba(255,240,180,.85), 0 5px 12px rgba(0,0,0,.55); }
.minion.stealthy { opacity: .74; }
.minion.stealthy::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(180,200,255,.18) 0 6px, transparent 6px 12px);
}
.minion.targetable { cursor: crosshair; border-color: var(--red-soft); }
.minion.targetable:hover { transform: scale(1.08); box-shadow: 0 0 22px rgba(255,122,114,.75); }

/* main du joueur en duel : cartes légèrement réduites, sans chevauchement */
.duel-hand { height: 214px; align-items: flex-end; padding-bottom: 10px; }
.duel-hand .card { width: 150px; height: 208px; margin: 0 5px; }
.duel-hand .card .mtg-art { height: 62px; }
.duel-hand .card .mtg-art span { font-size: 33px; }
.duel-hand .card .mtg-textbox { font-size: 8.5px; }
/* on masque l'ambiance quand la carte a déjà des règles à afficher,
   mais on la garde sur les cartes vanille pour ne pas laisser de boîte vide */
.duel-hand .card:not(.art-big) .mtg-flavor { display: none; }

.duel-quit { position: absolute; top: 12px; right: 16px; z-index: 5; font-size: 12px; }

/* journal : intégré à la barre centrale, il ne recouvre plus rien */
#duel-log {
  position: static; width: 300px; flex-shrink: 0;
  max-height: 42px; overflow: hidden;
  font-size: 11px; line-height: 1.35; text-align: left;
}

/* ============================================================
   PAGES (boutique / collection / deck)
   ============================================================ */
.screen.scroll { display: none; overflow-y: auto; }
.screen.scroll.active { display: block; }
/* les pages de contenu sont centrées, titres compris : sans cela le contenu
   paraissait collé à gauche dès que la fenêtre était large */
.page { max-width: 1400px; margin: 0 auto; padding: 26px 30px 60px; text-align: center; }
.page-title { font-size: 28px; letter-spacing: 2px; margin-bottom: 4px; }
.page-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; }
/* « 2 decks déjà acquis » : un rappel, pas une offre — il ne doit pas
   attirer l'œil autant que ce qui reste à acheter */
.page-sub.acquis { font-size: 12px; font-style: italic; opacity: .8; }
.page-sub.acquis:empty { display: none; margin: 0; }
/* le constructeur garde son alignement à gauche : c'est un outil, pas une vitrine */
.deckpage, .deckpage .sect-title { text-align: left; }
.deckpage .coll-grid { justify-content: flex-start; }
.sect-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 3px; color: var(--accent);
  border-bottom: 1px solid var(--border); padding-bottom: 8px; margin: 28px 0 16px;
}
.tag-premium {
  font-size: 10px; background: linear-gradient(90deg, #7b2ea8, #b45cff);
  color: #fff; padding: 2px 8px; border-radius: 10px; letter-spacing: 1px; margin-left: 8px;
}
.empty-msg { color: var(--text-dim); font-style: italic; padding: 20px; }

/* --- offres de boosters --- */
.offers { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.offer {
  position: relative; width: 250px; padding: 22px 18px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: center; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.offer:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); }
.offer.premium { border-color: #7b2ea8; background: linear-gradient(170deg, #2e2046, #1d1630); }
.offer.premium:hover { border-color: #c88cff; box-shadow: 0 10px 30px rgba(150,80,255,.3); }
.offer.poor { opacity: .5; }
/* même cas que .mode-ico : le centrage est défini plus haut, cette
   règle le cassait en repassant l'icône en bloc */
.offer-name { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.offer-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; min-height: 54px; }
.offer-price {
  margin-top: 12px; font-size: 18px; font-weight: 800; color: var(--accent-2);
}
.badge-premium {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #7b2ea8, #b45cff);
  font-size: 9px; letter-spacing: 2px; padding: 3px 12px; border-radius: 10px;
}

/* --- atelier dans la carte agrandie --- */
.cz-atelier { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cz-atelier-etat { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }
.cz-atelier-etat b { color: var(--text); }
.cz-atelier-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.marche-item.attente { opacity: .55; }

/* --- Arène --- */
/* .arene-entree est réglée plus haut, avec .btn-rangee : deux jeux de
   règles pour la même chose finissent toujours par diverger. */
/* ============================================================
   Arène — refonte visuelle
   L'ancien tableau + gros chiffres est remplacé par : un héros
   d'entrée, une échelle de récompenses, et en course des pastilles
   de progression avec la difficulté annoncée du prochain duel.
   ============================================================ */

/* -- entrée : héros + rampe de difficulté -- */
.ar-hero { text-align: center; max-width: 640px; margin: 0 auto; }
.ar-hero-ico { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.ar-intro { color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 10px auto 16px; }
.ar-intro b { color: var(--text); font-weight: 600; }

.ar-rampe {
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
.ar-fleche { color: var(--text-dim); font-size: 13px; }

/* pastille de difficulté, réutilisée en course */
.ar-diff {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 11px; border-radius: 999px; border: 1px solid transparent;
}
.ar-diff.facile    { color: #7ee0a0;        background: rgba(79,174,106,.14);  border-color: rgba(79,174,106,.4); }
.ar-diff.normal    { color: var(--accent-2); background: rgba(240,210,100,.12); border-color: rgba(201,162,39,.45); }
.ar-diff.difficile { color: var(--red-soft); background: rgba(255,122,114,.12); border-color: rgba(255,122,114,.4); }

/* -- échelle de récompenses -- */
.ar-echelle { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 5px; }
.ar-palier {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
}
.ar-palier.zero { opacity: .5; }
.ar-palier.jalon {
  background: linear-gradient(90deg, rgba(201,162,39,.14), var(--panel) 70%);
  border-color: var(--accent);
}
.ar-pv { flex: none; width: 44px; text-align: center; font-size: 20px; font-weight: 800; color: var(--text-dim); }
.ar-palier.jalon .ar-pv { color: var(--accent-2); }
.ar-pv small { font-size: 11px; font-weight: 700; opacity: .7; margin-left: 1px; }
.ar-pr { font-size: 14px; color: var(--text); }

/* les pictogrammes sont des <svg class="ui-icon"> en display:block : dans un
   texte de récompense (« 50 ● · 10 ◆ · 1 booster ») ça casserait chaque icône
   sur sa propre ligne. On les repasse en ligne partout où l'Arène les inline. */
.ar-pr .ui-icon,
.ar-recomp-bloc .ui-icon,
.ar-bilan-gain .ui-icon { display: inline-block; vertical-align: -2px; }

/* -- course : pastilles de progression -- */
/* width:max-content réduit le bloc à la largeur de sa rangée la plus large
   (les victoires) : margin auto le centre alors vraiment, au lieu de le caler
   à gauche d'un conteneur de 480px plus large que son contenu. */
.ar-jauge { width: max-content; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ar-jauge-l { display: flex; align-items: center; gap: 14px; }
.ar-jauge-lbl {
  flex: none; width: 74px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim); text-align: right;
}
.ar-pips { display: flex; gap: 6px; flex-wrap: wrap; }
.ar-pip {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-2);
}
.ar-pip.win.on {
  background: radial-gradient(circle at 35% 30%, #ffe488, var(--accent));
  border-color: var(--accent-2); box-shadow: 0 0 8px rgba(240,210,100,.5);
}
.ar-pip.life.on {
  background: radial-gradient(circle at 35% 30%, #ff9a92, var(--red-soft));
  border-color: var(--red-soft);
}
.ar-pip.life:not(.on) { opacity: .3; }

.ar-next { text-align: center; margin: 22px 0 4px; font-size: 14px; color: var(--text-dim); }
.ar-next .ar-diff { margin-left: 6px; vertical-align: 1px; }

/* -- course : les deux récompenses -- */
.ar-recomp {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin: 16px auto 2px; max-width: 480px;
}
.ar-recomp-bloc {
  flex: 1 1 0; min-width: 150px; text-align: center;
  padding: 13px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border);
}
.ar-recomp-bloc span {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); margin-bottom: 5px;
}
.ar-recomp-bloc b { font-size: 15px; color: var(--text); font-weight: 700; }
.ar-recomp-bloc.gain {
  background: linear-gradient(180deg, rgba(201,162,39,.16), var(--panel));
  border-color: var(--accent);
}
.ar-recomp-bloc.gain b { color: var(--accent-2); }

/* -- bilan -- */
.ar-bilan {
  max-width: 420px; margin: 0 auto; text-align: center;
  padding: 30px 24px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--border);
}
.ar-bilan.parfait { border-color: var(--accent); background: linear-gradient(180deg, rgba(201,162,39,.16), var(--panel)); }
.ar-bilan-ico { font-size: 52px; line-height: 1; }
.ar-bilan-num { font-size: 68px; font-weight: 800; line-height: 1; color: var(--accent-2); margin-top: 6px; }
.ar-bilan-lbl { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
.ar-bilan-titre { margin: 14px 0 6px; color: var(--text); font-size: 20px; }
.ar-bilan-gain { color: var(--text-dim); font-size: 15px; }
.ar-bilan-note { margin-top: 8px; font-size: 13px; color: var(--accent-2); }

/* --- détail d'un deck signature --- */
.shopdeck-voir { font-size: 10px; font-weight: 400; color: var(--text-dim); margin-top: 3px; }

/* Le panneau est déclaré APRÈS #card-zoom dans le HTML : à z-index égal il
   passerait devant. Or on agrandit une carte DEPUIS ce panneau — la carte
   doit donc rester au-dessus. */
#deck-zoom { z-index: 215; }

.dz-panneau {
  position: relative; z-index: 1;
  width: min(880px, 94vw); max-height: 86vh; overflow-y: auto;
  padding: 22px 26px; border-radius: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.dz-entete { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.dz-titre { margin: 0; font-size: 24px; color: var(--accent); }
.dz-sous { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.dz-prix {
  margin-left: auto; flex-shrink: 0; font-weight: 800; font-size: 18px; color: #f0d264;
  display: flex; align-items: center; gap: 5px;
}
.dz-heros {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border);
}
.dz-pouvoir { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.dz-pouvoir b { color: var(--accent-2); }

.dz-colonnes { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.dz-sect {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.dz-barres { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.dz-barre { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.dz-tige {
  background: linear-gradient(180deg, var(--accent-2), rgba(120,200,255,.25));
  border-radius: 3px 3px 0 0; min-height: 2px;
}
.dz-cout { font-size: 10px; text-align: center; color: var(--text-dim); margin-top: 4px; }
.dz-nb { font-size: 10px; text-align: center; font-weight: 700; }
.dz-raretes { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-rar {
  font-size: 11px; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.dz-rar.rar-rare { color: #9fd0ff; border-color: #9fd0ff; }
.dz-rar.rar-epique { color: #c88cff; border-color: #c88cff; }
.dz-rar.rar-legendaire { color: #ffd76b; border-color: #ffd76b; }

.dz-liste { min-width: 0; }
.dz-ligne {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; font-size: 13px;
  border-left: 3px solid var(--border);
}
.dz-ligne:hover { background: rgba(255,255,255,.06); }
.dz-ligne.rar-rare { border-left-color: #9fd0ff; }
.dz-ligne.rar-epique { border-left-color: #c88cff; }
.dz-ligne.rar-legendaire { border-left-color: #ffd76b; }
.dz-mana {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--accent));
  color: #241c05; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.dz-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-type { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.dz-deja { font-size: 10px; color: var(--accent-2); flex-shrink: 0; min-width: 52px; text-align: right; }
.dz-x { font-weight: 700; flex-shrink: 0; min-width: 24px; text-align: right; }
.dz-pied { margin-top: 20px; text-align: center; }

@media (max-width: 720px) {
  .dz-colonnes { grid-template-columns: 1fr; }
}

/* --- place de marché --- */
.marche-onglets { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.marche-onglets .navbtn.actif {
  color: var(--accent-2); border-color: var(--accent-2);
  background: rgba(120,200,255,.10);
}
.marche-recherche {
  display: block; margin: 0 auto 20px; width: min(420px, 100%);
  padding: 9px 12px; font-size: 14px; font-family: inherit;
  color: var(--text); background: rgba(0,0,0,.35);
  border: 1px solid var(--border); border-radius: 8px;
}
.marche-recherche:focus { outline: none; border-color: var(--accent-2); }
/* « auto-fit » et non « auto-fill » : auto-fill crée des colonnes VIDES
   qui occupent toute la largeur, si bien qu'une annonce seule se
   retrouvait plaquée à gauche pendant que le reste de la page était
   centré. auto-fit replie les colonnes vides, et le centrage s'applique
   aux cartes réellement présentes. */
.marche-grille {
  display: grid; gap: 22px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(160px, 170px));
}
.marche-item {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.marche-item .card { margin: 0 auto 10px; }

/* Les pictogrammes sont des <svg class="ui-icon"> en display:block.
   Posés à côté d'un nombre dans un conteneur ordinaire, ils passent à
   la ligne et se collent à gauche — c'est ce qui décalait le prix.
   Le conteneur doit donc être un flex. */
.marche-prix {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-weight: 800; color: #d5b8ff; font-size: 15px;
  margin-bottom: 2px;
}
.marche-vendeur { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }

/* ------------------------------------------------------------
   BARRE DE RECHERCHE DU MARCHÉ
   ------------------------------------------------------------
   Il n'y avait qu'un champ texte : les filtres par élément et par
   rareté existaient côté serveur mais n'avaient aucune commande.
   ------------------------------------------------------------ */
/* Un seul bloc, pas six lignes empilées. Le piège : la règle globale
   « input[type=text], select { width: 100% } » étire chaque liste sur
   toute la largeur — d'où l'empilement. On la neutralise ici. */
/* width:100% + box-sizing : sans cela le panneau gardait 900 px dans une
   fenêtre plus étroite, la ligne de filtres ne se repliait jamais et la
   page débordait vers la droite. */
.marche-filtres {
  width: 100%; max-width: 900px; box-sizing: border-box;
  margin: 0 auto 24px; padding: 16px 18px 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border); border-radius: 12px;
}
.marche-filtres .marche-recherche { margin: 0 auto 12px; }

.mf-ligne {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center;
}
/* « background-color » et non « background » : le raccourci effacerait
   le chevron dessiné par la règle « select » commune. */
.mf-ligne select,
.mf-prix input {
  font-family: inherit; font-size: 12.5px;
  color: var(--text); background-color: rgba(0,0,0,.35);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 28px 7px 11px;
}
.mf-ligne select { width: auto; }        /* annule le width:100% global */
#mf-elem, #mf-rarete, #mf-tri { min-width: 148px; }
#mf-cout { min-width: 112px; }

.mf-ligne select:focus,
.mf-prix input:focus { outline: none; border-color: var(--accent-2); }

.mf-prix {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.35); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 10px 0 4px;
}
.mf-prix input {
  width: 58px; border: 0; background: transparent; padding: 7px 2px; text-align: center;
}
.mf-prix input::-webkit-outer-spin-button,
.mf-prix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mf-prix input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.mf-tiret { color: var(--text-dim); font-size: 12px; }
.mf-unite { display: inline-flex; opacity: .8; }

#mf-reset { margin-left: 4px; }

.mf-resume {
  margin-top: 11px; text-align: center;
  font-size: 11.5px; color: var(--text-dim); min-height: 15px;
}

/* Fenêtre étroite : deux colonnes plutôt qu'une pile.
   Le seuil est à 960 px et non 720 : la ligne complète mesure environ
   810 px, elle déborde donc bien avant 720. */
@media (max-width: 960px) {
  .mf-ligne { gap: 7px; }
  #mf-elem, #mf-rarete, #mf-tri, #mf-cout { min-width: 0; flex: 1 1 46%; }
  .mf-prix { flex: 1 1 46%; justify-content: center; }
  #mf-reset { flex: 1 1 100%; margin-left: 0; }
}

/* ------------------------------------------------------------
   METTRE EN VENTE — le pied de chaque carte
   ------------------------------------------------------------
   Tout ce bloc tient dans 170 px de large. Il était composé de
   fragments empilés : un compteur, un champ à flèches natives, un
   bouton, puis une phrase qui se coupait au milieu d'une
   parenthèse et faisait sauter la hauteur d'une ligne à l'autre.
   On en fait un pied de carte homogène, à hauteur fixe.
   ------------------------------------------------------------ */
.marche-dispo {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-dim);
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  border-radius: 10px; padding: 2px 9px; margin-bottom: 8px;
}

/* La cote, sous la carte : ce qu'elle s'est vendue et ce qu'on en
   demande aujourd'hui. Sans ce repère, le vendeur tapait un prix au
   hasard et sa carte dormait quatorze jours. */
.marche-cote {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px;
  font-size: 10.5px; line-height: 1.35; color: var(--text-dim);
  min-height: 26px; margin-bottom: 6px;
}
.marche-cote b { color: #d5b8ff; font-size: 11.5px; }
.marche-cote.vide { opacity: .5; font-style: italic; }

/* la demande : ce qu'un acheteur a déjà mis de côté pour cette carte */
.marche-demande {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 10.5px; color: #7fd67f; margin-bottom: 4px;
}

.marche-actions {
  display: flex; gap: 5px; justify-content: center; align-items: stretch; flex-wrap: wrap;
}
.marche-actions > .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; padding: 6px 12px; margin: 0;
}

/* un montant avec son pictogramme, au fil du texte */
.ps-gemmes {
  display: inline-flex; align-items: center; gap: 4px;
  color: #d5b8ff; font-weight: 700;
}
.marche-retour { text-align: left; margin-bottom: 10px; }

/* ------------------------------------------------------------
   ÉCHANGE DIRECT — carte contre carte
   ------------------------------------------------------------ */
.ech-nouveau {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin: 4px 0 16px;
}
.ech-filtre {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.ech-filtre input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* aperçu des deux cartes dans le formulaire : choisir dans une liste
   de noms revient à échanger à l'aveugle */
.ech-apercu {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 18px 0 4px;
}
.ech-apercu-cote { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ------------------------------------------------------------
   HISTORIQUE DES OPÉRATIONS
   ------------------------------------------------------------ */
.hist-bilan {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  margin: 6px 0 22px;
}
.hist-bloc { display: flex; flex-direction: column; align-items: center; }
.hist-bloc b { font-size: 24px; font-weight: 800; color: var(--text); }
.hist-bloc span { font-size: 11px; color: var(--text-dim); letter-spacing: .5px; }
.hist-bloc.gain b { color: #7fd67f; }
.hist-bloc.perte b { color: var(--red-soft); }

.hist-liste { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 2px; }
.hist-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center; text-align: left;
  padding: 9px 14px; font-size: 12.5px;
  background: rgba(0,0,0,.22); border-radius: 7px;
  border-left: 3px solid var(--border);
}
.hist-ligne.vente { border-left-color: #7fd67f; }
.hist-ligne.achat { border-left-color: #9fd0ff; }
.hist-ligne.echange { border-left-color: var(--accent-2); }
.hist-carte { font-weight: 700; }
.hist-quoi { color: var(--text-dim); }
.hist-detail { color: var(--text-dim); font-size: 11px; }
.hist-montant {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; white-space: nowrap;
}
.hist-montant.plus { color: #7fd67f; }
.hist-montant.moins { color: var(--red-soft); }
.hist-quand { color: var(--text-dim); font-size: 11px; white-space: nowrap; }

@media (max-width: 760px) {
  .hist-ligne { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .hist-quoi, .hist-detail { grid-column: 1 / -1; }
  .hist-quand { grid-column: 1 / -1; }
}
.ech-form {
  max-width: 640px; margin: 0 auto 22px; padding: 16px 18px;
  background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 12px;
}
.ech-form-champs {
  display: flex; align-items: flex-end; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.ech-form-champs label {
  flex: 1 1 240px; text-align: left; font-size: 12.5px; color: var(--text-dim);
}
/* « background-color » et non le raccourci : celui-ci effacerait le
   chevron dessiné par la règle « select » commune, et ce champ se
   retrouverait seul avec la flèche native du système. */
.ech-form-champs select {
  width: 100%; margin-top: 5px; box-sizing: border-box;
  padding: 8px 32px 8px 10px; font-size: 13px; font-family: inherit;
  color: var(--text); background-color: rgba(0,0,0,.35);
  border: 1px solid var(--border); border-radius: 8px;
}
.ech-form-champs select:focus { outline: none; border-color: var(--accent-2); }
.ech-form-fleche { display: flex; align-items: center; padding-bottom: 8px; }
.ech-form-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

.ech-liste {
  display: grid; gap: 16px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
}
.ech-offre {
  padding: 14px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(0,0,0,.22);
}
.ech-offre.hors-portee { opacity: .5; }
.ech-paire { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ech-cote { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ech-etiq {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-dim);
}
/* les cartes sont réduites : deux côte à côte dans 340 px */
.ech-carte { transform: scale(.62); transform-origin: top center; height: 150px; }
.ech-fleche { display: flex; align-items: center; padding-bottom: 30px; }
.ech-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border);
}
.ech-qui { font-size: 11px; color: var(--text-dim); }
.ech-manque { font-size: 10.5px; color: var(--text-dim); font-style: italic; }
.ech-pied .btn.mini { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------------
   FIL DES VENTES RÉCENTES
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   VITRINE EN DEUX COLONNES
   ------------------------------------------------------------
   Le fil des ventes à GAUCHE, les cartes à droite. Sans cette
   règle, le HTML avait beau déclarer deux colonnes, les deux blocs
   s'empilaient et le fil se retrouvait AU-DESSUS des cartes.
   ------------------------------------------------------------ */
.marche-colonnes {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  text-align: left;
}
.marche-colonnes .marche-grille { justify-content: flex-start; }
/* le fil suit la lecture pendant qu'on fait défiler les cartes */
.marche-cote-gauche { position: sticky; top: 68px; }

/* écran étroit : le fil repasse dessous, pas au-dessus — on ne
   veut pas d'un mur de texte avant les cartes */
@media (max-width: 900px) {
  .marche-colonnes { grid-template-columns: 1fr; }
  .marche-cote-gauche { position: static; order: 2; }
  .marche-colonnes .marche-grille { order: 1; justify-content: center; }
}

.fil-ventes { margin: 0; }
/* .marche-colonnes aligne sa colonne à gauche : on recentre le titre */
.fil-ventes .sect-title { margin-top: 0; text-align: center; }
.fil-liste { display: flex; flex-direction: column; gap: 1px; }
/* colonne étroite : le nom sur une ligne, prix et date en dessous */
.fil-ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 7px 10px; font-size: 12px;
  background: rgba(0,0,0,.2); border-radius: 6px;
}
.fil-nom { grid-column: 1 / -1; text-align: left; font-weight: 600; line-height: 1.25; }
.fil-prix { display: inline-flex; align-items: center; gap: 4px; color: #d5b8ff; font-weight: 700; }
.fil-quand { color: var(--text-dim); font-size: 10.5px; text-align: right; }

/* ------------------------------------------------------------
   PASTILLE DE NOTIFICATION SUR UN ONGLET
   ------------------------------------------------------------ */
.navbtn[data-pastille] { position: relative; }
.navbtn[data-pastille]::after {
  content: attr(data-pastille);
  position: absolute; top: 1px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  color: #1a1024; background: var(--accent);
  border-radius: 8px;
}

/* « vendre tout de suite » : une action franche, pas un lien discret */
.btn.mini.mv-ordre {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 6px; font-size: 11px;
  border-color: #3f7a4c; color: #9fe0a5;
}
.btn.mini.mv-ordre:hover { border-color: #7fd67f; color: #c8f0cb; }

.marche-vente { display: flex; gap: 6px; align-items: stretch; justify-content: center; }

/* le champ et son unité forment une seule pastille */
.mv-champ {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0 8px 0 2px;
}
.mv-champ:focus-within { border-color: var(--accent-2); }
.mv-unite { display: inline-flex; opacity: .8; }

.marche-vente input {
  width: 52px; padding: 6px 2px; font-size: 13px; font-family: inherit; font-weight: 700;
  color: var(--text); background: transparent; border: 0; text-align: right;
}
.marche-vente input:focus { outline: none; }
/* les flèches natives sont larges, grises et hors du thème */
.marche-vente input::-webkit-outer-spin-button,
.marche-vente input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.marche-vente input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* deux lignes courtes, de hauteur fixe : plus de saut de mise en page */
.marche-net {
  margin-top: 7px; min-height: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 11px; color: var(--text-dim); line-height: 1.25;
}
.marche-net .mn-ligne { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.marche-net .mn-ligne b { color: #d5b8ff; font-size: 12.5px; }
.marche-net .mn-com { font-size: 10px; opacity: .62; white-space: nowrap; }
.marche-net.bas .mn-ligne { color: var(--red-soft); }

.btn.mini { padding: 5px 10px; font-size: 12px; }

/* ------------------------------------------------------------
   PAGES LÉGALES (legal/*.html)
   ------------------------------------------------------------
   Des pages de texte, ouvertes dans un onglet à part : elles
   n'utilisent rien de l'interface du jeu.
   ------------------------------------------------------------ */
body.legal-page { overflow: auto; height: auto; }
.legal {
  max-width: 760px; margin: 0 auto; padding: 40px 24px 80px;
  line-height: 1.65; color: var(--text);
}
.legal h1 { font-size: 26px; margin: 0 0 6px; color: var(--accent); }
.legal h2 { font-size: 16px; margin: 34px 0 10px; color: var(--accent-2); }
.legal p, .legal li { font-size: 14px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--accent-2); }
.legal code { font-size: 12.5px; background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 4px; }
.legal-date { color: var(--text-dim); font-size: 12.5px; margin-bottom: 8px; }
.legal-avertissement {
  background: rgba(224,139,58,.12); border: 1px solid #a2662c;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 26px;
  font-size: 13px; line-height: 1.55;
}
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 12.5px; }
.legal-table th, .legal-table td {
  border: 1px solid var(--border); padding: 7px 9px; text-align: left; vertical-align: top;
}
.legal-table th { background: rgba(255,255,255,.04); color: var(--accent-2); }

/* ------------------------------------------------------------
   FORMULAIRE D'INSCRIPTION
   ------------------------------------------------------------
   Neuf champs : en une seule colonne étroite, la page devient un
   couloir interminable. On regroupe ce qui va ensemble (pays et
   date, prénom et nom) et on élargit la colonne.
   ------------------------------------------------------------ */
/* Le titre se retrouvait au ras de la barre de navigation fixe :
   26 px de marge haute ne suffisent pas sous une barre de 52 px. */
#screen-compte .page { padding-top: 44px; }

.compte-form.large { max-width: 560px; gap: 12px; }
.cf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .cf-duo { grid-template-columns: 1fr; } }

.compte-form .cf-aide {
  display: block; margin-top: 5px; font-size: 11px;
  color: var(--text-dim); line-height: 1.4;
}

/* champ signalé par la validation */
.compte-form .fautif { border-color: var(--red-soft); }

/* jauge de force du mot de passe */
.compte-form .cf-force {
  display: flex; align-items: center; gap: 10px; margin: -6px 0 0;
}
.compte-form .cf-jauge {
  flex: 1; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.compte-form .cf-jauge span {
  display: block; height: 100%; width: 0;
  transition: width .2s, background .2s;
}
.cf-jauge .niveau-0 { background: var(--red-soft); }
.cf-jauge .niveau-1 { background: #e08b3a; }
.cf-jauge .niveau-2 { background: #d8c04a; }
.cf-jauge .niveau-3 { background: #7fd67f; }
.cf-jauge .niveau-4 { background: #4fd0a8; }
#ins-force { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* Cases à cocher : la case à GAUCHE, le texte à côté.
   Les sélecteurs sont préfixés par .compte-form pour passer devant
   « .compte-form label { display:block } » et « .compte-form input
   { display:block; width:100% } », déclarés plus bas et de
   spécificité supérieure. Sans ce préfixe, la case s'étirait sur
   toute la largeur et le texte passait en dessous. */
.compte-form .cf-case {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; font-size: 12px; line-height: 1.45;
  color: var(--text-dim); cursor: pointer;
}
.compte-form .cf-case input {
  display: block;
  width: 16px; height: 16px; min-width: 16px;   /* et non les 44 px des autres champs */
  margin: 2px 0 0; padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* .compte-form aligne à gauche : on repasse ce bloc au centre */
.compte-form .cf-legal {
  text-align: center;
  font-size: 11px; line-height: 1.7; color: var(--text-dim);
  border-top: 1px solid var(--border); padding-top: 14px; margin: 6px 0 0;
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.compte-form .cf-legal a { color: var(--accent-2); white-space: nowrap; }

/* --- écran du compte --- */
.compte-form {
  max-width: 380px; margin: 0 auto; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
}
.compte-form label { display: block; font-size: 13px; color: var(--text-dim); }
/* ------------------------------------------------------------
   LES CHAMPS DU FORMULAIRE — TOUS LE MÊME GABARIT
   ------------------------------------------------------------
   Le <select> « Pays » était plus haut et plus petit que le champ
   « Date de naissance » posé à côté : il ne recevait pas ce style
   mais la règle globale « input[type=text], select », avec un
   rembourrage plus faible et AUCUNE marge haute. Les deux colonnes
   ne s'alignaient donc pas.

   D'où la hauteur imposée : un <input type="date"> et un <select>
   ne se mesurent pas pareil d'un navigateur à l'autre, même à
   rembourrage égal. On fixe la boîte plutôt que d'espérer.
   ------------------------------------------------------------ */
.compte-form input,
.compte-form select {
  display: block; box-sizing: border-box;
  width: 100%; height: 44px; margin-top: 6px;
  padding: 0 12px; font-size: 15px; font-family: inherit; line-height: 1.2;
  /* « background-color » et non le raccourci « background » : celui-ci
     effacerait le chevron dessiné par la règle « select » commune */
  color: var(--text); background-color: rgba(0,0,0,.35);
  border: 1px solid var(--border); border-radius: 8px;
}
.compte-form input:focus,
.compte-form select:focus { outline: none; border-color: var(--accent-2); }

/* Le chevron dessiné vient de la règle « select » commune, plus haut.
   Il était redéclaré ici et dans les filtres du marché : trois copies
   du même dessin, qui finissaient par ne plus se ressembler. */

/* Date de naissance : trois listes côte à côte. Le jour et l'année
   sont courts, le mois porte un nom — d'où les largeurs inégales. */
.cf-date {
  /* colonnes PROPORTIONNELLES (jour:mois:année = 3:4:3) et non largeurs
     fixes : à 84px + 96px fixes, dans une cellule étroite, la colonne du
     mois (le reste) s'effondrait presque à zéro. En proportions, les trois
     rétrécissent ensemble et le mois reste le plus large. */
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 8px; margin-top: 6px;
}
.compte-form .cf-date select { margin-top: 0; padding: 0 26px 0 10px; font-size: 14px; }
@media (max-width: 480px) {
  .cf-date { grid-template-columns: 1fr 1fr; }
  .cf-date select:last-child { grid-column: 1 / -1; }
}
.compte-actions { display: flex; gap: 10px; align-items: stretch; }
/* même taille pour les deux, comme toute rangée de boutons */
.compte-actions > .btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; padding: 11px 16px; margin: 0;
}
.compte-msg { min-height: 20px; font-size: 13px; text-align: center; }
.compte-msg.erreur { color: var(--red-soft); }
.compte-msg.ok { color: var(--accent-2); }
.compte-carte {
  max-width: 420px; margin: 0 auto 20px; padding: 18px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.compte-qui { font-size: 17px; margin-bottom: 4px; }
.compte-note { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }

/* --- niveau de compte (badge de la barre + aperçu déroulant) --- */
.w-item.niveau { color: var(--accent-2); }
.w-item.niveau b { color: var(--accent-2); }
.niv-rond {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #241c05; font-weight: 800; font-size: 20px;
  box-shadow: 0 0 18px rgba(201,162,39,.35);
}
.niv-titre { font-size: 15px; font-weight: 700; }
.niv-sous { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.niv-barre {
  height: 10px; border-radius: 6px; background: rgba(0,0,0,.4);
  border: 1px solid var(--border); overflow: hidden;
}
.niv-barre > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s ease;
}
.niv-recompense { font-size: 12px; color: var(--text-dim); margin-top: 10px; text-align: center; }
.niv-recompense b { color: var(--accent-2); }

/* le badge « Niv X » de la barre est cliquable */
.w-item.niveau { cursor: pointer; }
.w-item.niveau:hover { border-color: var(--accent-2); }

/* fenêtre d'aperçu ouverte sous le badge */
.niv-popup {
  position: fixed; z-index: 60; width: 260px; padding: 16px;
  background: var(--panel); border: 1px solid var(--accent-2); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.niv-pop-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.niv-rond.small { width: 38px; height: 38px; font-size: 16px; }
.niv-pop-tete .niv-titre { font-size: 13px; font-weight: 700; }
.niv-pop-tete .niv-sous { margin-top: 2px; }

/* --- fiche personnelle --- */
/* Une fiche se lit en colonnes : le libellé à gauche, la valeur à
   droite, sur la même ligne de base. Empilés, six champs donnaient
   une liste indistincte où l'œil ne trouvait plus la réponse. */
.compte-carte.profil { max-width: 480px; text-align: left; }
/* La fiche À COMPLÉTER contient le formulaire complet (mêmes trois listes
   de date que l'inscription). À 480px, la cellule « Date de naissance » du
   duo devenait si étroite que la colonne du mois s'effondrait presque à
   zéro. On lui donne la largeur du formulaire d'inscription (560px), où
   cette disposition tient déjà. */
#compte-profil-vide { max-width: 560px; }
.profil-titre {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); margin: 0 0 12px; text-align: center;
}
.profil-liste + .profil-titre { margin-top: 22px; }
/* le titre « Communications » vient après la note de confidentialité :
   sans marge, il se collait au paragraphe. Un trait et de l'air séparent
   nettement « tes informations » de « communications ». */
.profil-note + .profil-titre {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}
.profil-liste { margin: 0; }
.profil-liste > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid rgba(61,51,88,.4);
}
.profil-liste > div:last-child { border-bottom: none; }
.profil-liste dt { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }
.profil-liste dd {
  margin: 0; font-size: 14px; color: var(--text); font-weight: 600;
  text-align: right; word-break: break-word; min-width: 0;
}
.profil-note {
  font-size: 11px; line-height: 1.6; color: var(--text-dim);
  margin: 12px 0 0; text-align: center;
}
/* mêmes cases que le formulaire d'inscription, qui les stylait via
   .compte-form — ce bloc n'en fait pas partie */
.compte-carte.profil .cf-case {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
  cursor: pointer; margin-bottom: 10px;
}
.compte-carte.profil .cf-case input {
  width: 16px; height: 16px; min-width: 16px;
  margin: 2px 0 0; padding: 0; accent-color: var(--accent); cursor: pointer;
}
.compte-carte.profil .cf-legal {
  text-align: center; font-size: 11px; line-height: 1.7; color: var(--text-dim);
  border-top: 1px solid var(--border); padding-top: 14px; margin: 14px 0 0;
}
.compte-carte.profil .cf-legal a { color: var(--accent-2); white-space: nowrap; }
.compte-carte.profil .compte-actions { justify-content: center; margin-top: 14px; }

/* --- decks signature --- */
/* Flex et non grille : une grille aligne la dernière rangée à gauche
   quand elle est incomplète — sept decks sur trois colonnes laissaient
   la dernière paire décalée. En flex, chaque rangée se centre. */
.shopdecks {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.shopdecks > * { flex: 0 1 340px; min-width: 300px; }
.shopdeck {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); transition: border-color .15s, transform .15s;
  text-align: left;
}
.shopdeck:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.shopdeck-art { flex: 0 0 auto; line-height: 0; }
.shopdeck-body { flex: 1 1 auto; min-width: 0; }
.shopdeck-name { font-weight: 700; }
.shopdeck-note { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.shopdeck-buy {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #f0d264;
  border: 1px solid #7a6320; background: rgba(240,210,100,.12);
  border-radius: 8px; padding: 6px 10px; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center;
}
/* le chiffre et la pièce forment UN prix : un SVG en ligne se cale sur
   la ligne de base et flotte au-dessus du texte */
.shopdeck-prix { display: flex; align-items: center; gap: 5px; }
.shopdeck.owned { cursor: default; opacity: .65; }
.shopdeck.owned:hover { border-color: var(--border); transform: none; }
.shopdeck.owned .shopdeck-buy {
  color: var(--text-dim); border-color: var(--border); background: transparent;
}

/* --- cartes exclusives --- */
/* ------------------------------------------------------------
   CARROUSEL DES EXCLUSIVES — UNE PAGE PAR SEMAINE
   ------------------------------------------------------------
   Chaque page montre les TROIS exclusives d'une semaine : la semaine
   en cours (achetables), puis on fait glisser pour découvrir celles
   des semaines à venir (aperçu grisé). Défilement natif à aimant
   (scroll-snap) : glisser au doigt, à la molette ou aux flèches, et la
   page se cale au centre — aucun calcul de transformation. */
.exclu-slider {
  position: relative; display: flex; align-items: center; gap: 8px;
  max-width: 700px; margin: 0 auto;
}
.singles {
  display: flex; gap: 0; flex: 1; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* overflow-x:auto force overflow-y:auto : le survol d'une carte déborderait
     vers le haut et se ferait couper. On réserve de la gouttière verticale
     pour que la carte agrandie tienne dans la boîte. */
  padding: 24px 0 14px; scrollbar-width: none;
}
.singles::-webkit-scrollbar { display: none; }
.singles .empty-msg { flex: 1 0 100%; text-align: center; }

/* une page = une semaine, pleine largeur du carrousel */
.exclu-page { flex: 0 0 100%; scroll-snap-align: center; }
.exclu-page-titre {
  text-align: center; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent-2); margin-bottom: 12px;
}
.exclu-page.apercu { opacity: .8; }
.exclu-page.apercu .exclu-page-titre { color: var(--text-dim); }
.exclu-page-cartes { display: flex; gap: 14px; justify-content: center; align-items: flex-start; }

.single { text-align: center; cursor: pointer; flex: 0 1 auto; }
.single.verrou { cursor: default; }
.single .card { margin: 0 auto 8px; }
/* survol MODÉRÉ dans le carrousel : le grand bond de -42px de la collection
   dépassait du slider (borné par l'overflow) et se faisait couper. */
.single .card:hover { transform: translateY(-12px) scale(1.06); z-index: 20; }
/* une carte d'aperçu ne réagit pas au survol comme une carte à acheter */
.single.verrou .card:hover { transform: none; z-index: auto; }
.single.verrou .card:hover .card-inner { box-shadow: none; }

/* flèches de navigation */
.slider-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, border-color .15s;
}
.slider-arrow:hover { border-color: var(--accent-2); background: #362c52; transform: translateY(-1px); }
.slider-arrow:disabled { opacity: .3; cursor: default; }

/* pastilles */
.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.slider-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.slider-dot.on { background: var(--accent-2); border-color: var(--accent-2); }
.single-buy {
  font-size: 13px; font-weight: 700; color: #d5b8ff;
  background: rgba(123,46,168,.25); border: 1px solid #7b2ea8;
  border-radius: 8px; padding: 6px 8px;
}
.single.owned .single-buy,
.single.verrou .single-buy {
  color: var(--text-dim); border-color: var(--border); background: transparent;
  font-weight: 600;
}

/* --- gemmes --- */
.warn-box {
  background: rgba(212,69,63,.12); border: 1px solid rgba(212,69,63,.5);
  border-radius: 10px; padding: 14px 18px; font-size: 13px; line-height: 1.6;
  color: #ffc9c5; margin-bottom: 18px;
}
.warn-box b { color: #fff; }
.warn-box code { background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 4px; color: var(--accent-2); }
.home-warn { max-width: 720px; margin: 26px auto 0; text-align: left; }
.gempacks { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.gempack {
  width: 180px; padding: 20px; text-align: center; cursor: pointer;
  background: linear-gradient(170deg, #2e2046, #1d1630);
  border: 1px solid #6b4fa8; border-radius: 14px; transition: transform .15s, border-color .15s;
}
.gempack:hover { transform: translateY(-5px); border-color: #c88cff; }
.gem-amount { font-size: 22px; font-weight: 800; color: #d5b8ff; }
.gem-price { font-size: 15px; margin-top: 6px; color: var(--text); }
.gem-note { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* ============================================================
   OUVERTURE DE BOOSTER
   ============================================================ */
/* le menu-box du pack est élargi pour tenir QUATRE cartes de 168 px par
   rangée (4×168 + 3×16 de gouttière + 64 de rembourrage ≈ 780 px). */
#screen-pack > .menu-box { max-width: min(96vw, 800px); }
/* flex-wrap plutôt que grid : une grille cale les orphelins de la dernière
   rangée À GAUCHE de leurs colonnes, alors que flex centre CHAQUE rangée
   indépendamment — dernière comprise. Le menu-box élargi (800 px) tient
   4 cartes de 168 px par rangée ; il enveloppe seul à 3 puis 2 quand la
   fenêtre rétrécit, sans media query. La gouttière verticale (40 px)
   laisse la place au badge sous chaque carte. */
.pack-cards {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 40px 16px; margin: 26px auto;
  /* le badge de la DERNIÈRE rangée déborde de 30 px sous sa carte : sans
     cette réserve il chevaucherait les boutons (les marges fusionnent à 26). */
  padding-bottom: 30px;
}
.pack-slot { position: relative; cursor: pointer; transition: transform .15s; }
.pack-slot:hover { transform: translateY(-6px); }
.pack-slot .card { margin: 0; animation: revealCard .45s cubic-bezier(.2,1.3,.4,1); }
@keyframes revealCard {
  from { transform: rotateY(90deg) scale(.8); opacity: 0; }
  to   { transform: rotateY(0) scale(1); opacity: 1; }
}
/* mention (doublon, stock plein) : un vrai badge-pilule centré SOUS la carte,
   dans la gouttière, au lieu d'un texte qui chevauchait la rangée suivante.
   inline-flex garde le pictogramme d'or en ligne — voir .marche-prix. */
.dup-note {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--accent-2);
}
.dup-note .ui-icon { display: inline-block; vertical-align: -2px; }
.pack-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }

/* ============================================================
   COLLECTION
   ============================================================ */
.coll-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px; font-size: 13px; color: var(--text-dim);
}
.coll-bar select { width: auto; min-width: 170px; }
.chk { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.coll-grid { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
/* La Collection affiche près de 600 cartes d'un seul tenant.
   « content-visibility: auto » dit au navigateur de ne pas calculer ni
   peindre ce qui est hors de l'écran ; la taille annoncée juste après
   lui évite de faire sauter la barre de défilement. Combiné au
   loading="lazy" des illustrations (js/art.js), l'écran s'ouvre sans
   attendre le chargement de tout le catalogue. */
.coll-item {
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: 168px 262px;
  position: relative;
}
/* AU SURVOL, on lève le confinement de content-visibility. C'est lui,
   et lui seul, qui distinguait la collection du marché : son « contain:
   paint » DÉCOUPAIT la carte agrandie qui déborde de sa case. Le marché
   n'a pas cette optimisation, donc pas ce défaut. En repassant la case
   survolée en « visible » (et au-dessus de ses voisines), la carte
   s'agrandit exactement comme au marché — sans rien perdre de
   l'optimisation sur les centaines de cartes hors écran. */
.coll-item:hover { content-visibility: visible; z-index: 30; }
.coll-item .card { margin: 0; }
.coll-item.locked .card { filter: grayscale(1) brightness(.45); }
.coll-count { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.coll-item.locked .coll-count { color: #6b6280; }

/* ============================================================
   CONSTRUCTEUR DE DECK
   ============================================================ */
.deck-layout { display: flex; gap: 26px; align-items: flex-start; }
.deck-pool-col { flex: 1; min-width: 0; }

/* barre de recherche + filtres du pool « Tes cartes » : elle REPREND le design
   de la place de marché (.marche-filtres / .marche-recherche / .mf-ligne, posés
   sur les mêmes éléments en HTML). Il ne reste qu'à caler la largeur mini des
   sélecteurs propres au deck. */
.deck-pool-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.deck-pool-count { font-size: 12px; color: var(--text-dim); }
.deck-filters { margin-top: 4px; }
#deck-f-elem, #deck-f-rarity, #deck-f-type, #deck-f-sort { min-width: 150px; }

/* ============================================================
   CMS — éditeur de campagnes solo
   ============================================================ */
.cms-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#cms-root { max-width: 900px; margin: 12px auto 0; }
/* on annule le width:100% global : ici les champs vivent dans des rangées flex */
#cms-root input[type=text], #cms-root select { width: auto; }
#cms-root input[type=number] {
  width: 56px; font-family: inherit; font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px;
}
#cms-root input:focus, #cms-root select:focus, #cms-root textarea:focus {
  outline: none; border-color: var(--accent);
}

.cms-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
}
.cms-camp { min-width: 190px; }
.cms-grow { flex: 1; min-width: 80px; }
.cms-small { font-size: 12px; padding: 6px 11px; }
.cms-x { color: var(--red-soft); padding: 4px 10px; }
.cms-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.cms-errors {
  background: rgba(212,69,63,.12); border: 1px solid rgba(212,69,63,.4);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: var(--red-soft);
}
.cms-errors ul { margin: 6px 0 0 18px; }
.cms-ok { color: #7ee0a0; font-size: 13px; margin-bottom: 12px; }

.cms-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.cms-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.cms-meta input { min-width: 200px; }

.cms-enemy, .cms-floor {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; margin-bottom: 10px;
}
.cms-enemy-head, .cms-floor-head, .cms-node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cms-enemy-head { margin-bottom: 8px; }
.cms-moves { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.cms-move {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
}
.cms-move-i { width: 16px; text-align: center; color: var(--text-dim); font-weight: 700; font-size: 12px; }
.cms-pattern { display: flex; flex-direction: column; gap: 4px; }
.cms-pattern input { max-width: 240px; }

.cms-nodes { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cms-node { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.cms-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cms-pick {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; cursor: pointer;
}
.cms-pick.on { border-color: var(--accent); color: var(--accent-2); }
.cms-reward { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }

.cms-io {
  width: 100%; min-height: 90px; box-sizing: border-box; margin-top: 4px;
  background: rgba(0,0,0,.35); color: var(--text); font-family: monospace; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; resize: vertical;
}
.deck-side {
  width: 330px; flex-shrink: 0; position: sticky; top: 70px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.deck-head { display: flex; gap: 8px; }
.deck-head select { flex: 1; }
.deck-btns { display: flex; gap: 4px; }
.deck-btns .btn { padding: 8px 11px; }
/* choix du héros dans le constructeur de deck */
.hero-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hero-opt {
  --e1: #6c6a8a; --e2: #3a3552;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 5px; cursor: pointer;
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
  border: 1px solid var(--border); border-radius: 9px;
  transition: transform .13s, border-color .13s, box-shadow .13s;
}
.hero-opt:hover { transform: translateY(-2px); border-color: var(--accent); }
.hero-opt.on {
  border-color: var(--accent-2);
  background: linear-gradient(170deg, var(--e1), var(--e2));
  box-shadow: 0 0 14px rgba(240,210,100,.35);
}
.ho-face {
  display: block; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.25);
}
.ho-face .art-svg { width: 100%; height: 100%; }
.ho-name { font-size: 9.5px; font-weight: 700; text-align: center; line-height: 1.15; }
.ho-power { font-size: 9px; color: var(--accent-2); font-weight: 700; }
.ho-text { font-size: 8.5px; color: var(--text-dim); text-align: center; line-height: 1.25; }
.hero-opt.on .ho-text { color: rgba(255,255,255,.85); }
.hero-opt.on .ho-name { color: #fff; }

/* héros non débloqué */
.hero-opt.locked { opacity: .82; }
.hero-opt.locked .ho-face { filter: grayscale(1) brightness(.6); }
.hero-opt.locked .ho-name, .hero-opt.locked .ho-power { color: var(--text-dim); }

/* niveau du pouvoir */
.ho-lv {
  display: inline-block; margin-left: 3px; padding: 0 4px;
  background: var(--accent); color: #241c05; border-radius: 4px; font-size: 8px;
}

/* boutons d'achat et d'amélioration */
.ho-buy, .ho-up, .ho-max {
  display: block; margin-top: 4px; padding: 3px 6px;
  font-size: 8.5px; font-weight: 700; border-radius: 6px; text-align: center;
}
.ho-buy {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #241c05; cursor: pointer;
}
.ho-up {
  background: rgba(201,162,39,.18); border: 1px solid var(--accent);
  color: var(--accent-2); cursor: pointer;
}
.ho-buy:hover, .ho-up:hover { filter: brightness(1.2); }
.ho-max { color: var(--green); font-size: 8px; }

.deck-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
#deck-count { font-weight: 800; font-size: 16px; color: var(--red-soft); }
#deck-count.ok { color: var(--green); }
#deck-ready .ok { color: var(--green); font-size: 12px; }
#deck-ready .ko { color: var(--text-dim); font-size: 12px; }

.deck-curve { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.cbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cbar-fill { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 3px 3px 0 0; min-height: 2px; }
.cbar span { font-size: 9px; text-align: center; color: var(--text-dim); margin-top: 2px; }

.deck-list { max-height: 330px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.deck-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: linear-gradient(90deg, var(--e2), rgba(0,0,0,.5));
  border-left: 3px solid var(--e1);
  border-radius: 5px; padding: 5px 8px; font-size: 12px;
  transition: transform .1s, filter .1s;
}
.deck-row:hover { transform: translateX(4px); filter: brightness(1.25); }
.deck-row.rar-legendaire { box-shadow: inset 0 0 0 1px rgba(255,228,136,.55); }
.dr-cost {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--accent));
  color: #241c05; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.dr-art { font-size: 14px; }
.dr-name { flex: 1; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dr-n { color: var(--accent-2); font-weight: 800; }
.deck-actions { display: flex; gap: 8px; }
.deck-actions .btn { flex: 1; font-size: 12px; padding: 7px 0; }

.coll-grid.small { gap: 16px; }
.pool-item { position: relative; cursor: pointer; }
.pool-item .card { margin: 0; }
.pool-item.exhausted .card { filter: grayscale(.8) brightness(.55); }
.pool-count {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  background: rgba(0,0,0,.8); border: 1px solid var(--accent);
  border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700;
}

/* ============================================================
   MULLIGAN — choix de la main de départ
   ============================================================ */
.mulligan {
  position: absolute; inset: 0; z-index: 60;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 30px;
  background: rgba(8, 5, 16, .93);
  backdrop-filter: blur(3px);
}
.mulligan.show { display: flex; }
.mulligan h2 { font-size: 26px; letter-spacing: 2px; }
.mulligan .tagline { max-width: 620px; text-align: center; }

.mull-cards { display: flex; gap: 26px; justify-content: center; margin: 22px 0 6px; flex-wrap: wrap; }
.mull-slot { position: relative; cursor: pointer; text-align: center; transition: transform .15s; }
.mull-slot .card { margin: 0; transition: filter .15s, opacity .15s; }
.mull-slot:hover { transform: translateY(-10px); }
.mull-slot.rejected .card { filter: grayscale(1) brightness(.5); opacity: .75; }
.mull-slot.rejected::before {
  content: "×"; position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  font-size: 90px; font-weight: 800; color: var(--red-soft);
  text-shadow: 0 2px 10px #000; pointer-events: none;
}
.mull-tag {
  margin-top: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--green);
}
.mull-slot.rejected .mull-tag { color: var(--red-soft); }
.mull-actions { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 6px; }
/* taille imposée par le conteneur, comme .btn-rangee / .arene-entree : les deux
   boutons ont le même gabarit, seul le doré du primary distingue l'action. */
.mull-actions > .btn { font-size: 18px; padding: 14px 40px; margin: 0; }
#mull-wait { min-height: 22px; font-size: 14px; }

/* ============================================================
   DRAFT
   ============================================================ */
#screen-draft { align-items: center; justify-content: center; }
.draft-wrap {
  display: flex; gap: 30px; align-items: flex-start;
  max-width: 1300px; width: 100%; padding: 20px 30px;
}
.draft-side {
  width: 300px; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.draft-side .sect-title { margin: 0 0 4px; }
.draft-side .deck-list { max-height: 330px; }
.draft-main { flex: 1; text-align: center; }
.draft-offer { display: flex; gap: 22px; justify-content: center; margin-top: 20px; }

/* ---------- un lot ----------
   Trois lots de trois cartes tiennent dans la hauteur d'un écran à
   condition de réduire les cartes : à taille normale, la troisième
   passait sous la ligne de flottaison et le joueur choisissait sans
   l'avoir vue. */
.draft-lot {
  cursor: pointer; flex: 0 1 auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 14px 16px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255,255,255,.02);
  transition: transform .15s, border-color .15s, background .15s;
}
.draft-lot:hover {
  transform: translateY(-6px);
  border-color: rgba(240,210,100,.65); background: rgba(240,210,100,.07);
}
.draft-lot-tete { display: flex; align-items: center; gap: 8px; }
.draft-lot-num {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(240,210,100,.14); border: 1px solid #7a6320;
  color: #f0d264; font-size: 12px; font-weight: 800;
}
.draft-lot-note { font-size: 11px; color: var(--text-dim); }
.draft-lot-cartes { display: flex; flex-direction: column; gap: 6px; }

/* transform: scale() rétrécit le dessin mais PAS la place réservée :
   sans une taille explicite, chaque carte laisserait sous elle le
   vide de ce qu'elle ne remplit plus. 168 × 234 réduits de 28 %. */
.draft-pick { width: 121px; height: 168px; transition: transform .15s; }
.draft-pick .card { margin: 0; transform: scale(.72); transform-origin: top left; }
.draft-lot:hover .draft-pick .card { filter: drop-shadow(0 0 14px rgba(240,210,100,.45)); }

/* trois cartes empilées dépassent la hauteur d'un petit écran :
   mieux vaut pouvoir défiler que choisir un lot sans l'avoir vu */
#screen-draft .draft-wrap { max-height: 100%; overflow-y: auto; }

/* ============================================================
   CLASSEMENT
   ============================================================ */
/* le titre et le sous-titre sont centrés : un tableau plafonné à 780px
   et collé à gauche dans une page bien plus large cassait cet axe */
table.rank {
  width: 100%; max-width: 780px; margin: 0 auto; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
#rank-table { display: flex; justify-content: center; }
#btn-rank-refresh { display: block; margin-left: auto; margin-right: auto; }
table.rank th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
table.rank td { padding: 9px 14px; font-size: 14px; border-bottom: 1px solid rgba(61,51,88,.4); }
table.rank tr:last-child td { border-bottom: none; }
table.rank tr:hover td { background: rgba(255,255,255,.03); }
table.rank tr.me td { background: rgba(201,162,39,.12); color: var(--accent-2); font-weight: 700; }
table.rank .pos { color: var(--text-dim); width: 40px; }
table.rank .pts { color: var(--accent-2); font-weight: 800; }
table.rank tr:nth-child(1) .pos { color: #ffd76b; font-weight: 800; }
table.rank tr:nth-child(2) .pos { color: #dbe7f5; font-weight: 800; }
table.rank tr:nth-child(3) .pos { color: #d9a066; font-weight: 800; }
#rank-table code { background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 4px; color: var(--accent-2); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }