/* RUIN OF BLADES — habillage de la page et commandes tactiles */

/* ═════════ LA FEUILLE DE BASE, RÉUNIE (18/10/2026) ═════════
   Jusqu'ici onze feuilles se recouvraient : style.css, puis social.css et ui2.css … ui10.css,
   chacune réécrivant des règles des précédentes (souvent à coups de !important). Pour chaque
   règle, on n'a gardé que ce qui s'affichait vraiment :
     · les déclarations toujours écrasées plus loin sont parties (même sélecteur, ou un
       sélecteur plus large qui gagne à coup sûr) ;
     · les règles dont les classes n'existent plus nulle part (index.html, js/) aussi ;
     · une retouche faite plus loin sur le même sélecteur est revenue ici, dans la règle
       d'origine, quand aucune règle entre les deux ne pouvait la contredire.
   La suite est dans interface.css, chargée APRÈS celle-ci : à précision égale, la règle la
   plus bas l'emporte. Vérifié écran par écran (styles calculés et captures, téléphone en
   paysage et en portrait, PC) : rien n'a bougé à l'affichage. */

/* Notre police, la même que celle que le jeu dessine à l'écran. Elle est
   fabriquée à partir de js/donnees/police.js par tests/genere_police.mjs, et
   posée dans le projet : rien n'est chargé depuis un serveur extérieur. */
@font-face {
  font-family: "Ruin of Blades";
  src: url("../assets/ruin-of-blades.ttf") format("truetype");
  font-weight: 400 700;
  font-display: block;
}

:root {
  --nuit:    #0b0d11;
  --nuit2:   #171c23;
  --encre:   #222a33;
  --cyan:    #ffff19;   /* joueur 1 : os */
  --cyan-s:  #7a7a10;
  --ambre:   #19ffff;   /* joueur 2 : rouille */
  --ambre-s: #0e7a7a;
  --rose:    #d81f26;   /* alerte */
  --blanc:   #f2ece0;
  --gris:    #7e8894;
  --pixel:   "Ruin of Blades", ui-monospace, monospace;
  --titre:   "Ruin of Blades", ui-monospace, monospace;
  --corps:   "Segoe UI", system-ui, sans-serif;   /* les pavés de texte : lisibles */
  /* le verre des menus (13/10/2026, refonte « moderne ») */
  --verre:   rgba(14, 17, 23, .72);
  --bord:    rgba(255, 255, 255, .09);
  --bord2:   rgba(255, 255, 255, .16);
  --cr-bleu1: #9aa3ae; --cr-bleu2: #5f6873; --cr-bleu3: #3b434c; --cr-nuit: #1b1f24; --cr-nuit2: #0d0f12;     /* le fer */
  --cr-vert1: #ffe27a; --cr-vert2: #d9a12e; --cr-vert3: #6b4408;                                              /* le bronze poli */
  --cr-or1: #ffe96a; --cr-or2: #e0a827; --cr-or3: #6b4408;
  --cr-rouge1: #e0453a; --cr-rouge2: #9c1a14; --cr-rouge3: #4a0806;
  --cr-creme: #efdfb6; --cr-creme2: #d9c48f; --cr-brun: #7a5a2e; --cr-brun2: #3f2a12; --cr-encre: #2a1a0c; --cr-encre2: #6a5030;
  --bois1: #6b4423; --bois2: #4a2d14; --bois3: #2e1a0a; --cramoisi1: #a8242a; --cramoisi2: #5e0f12;
  --gemme1: #6e44b8; --gemme2: #3c2274; --gemme3: #1e0f3a; --gemme-bord: #0e0620; --gemme-clair: #8a5ad8;
  --gras: "Ruin of Blades Gras", "Arial Narrow", "Segoe UI Black", sans-serif;
  --da-contour: #0d0718;
  /* violet : la gemme */
  --da-v1: #9a6ae6; --da-v2: #6b3fc0; --da-v3: #4a2690; --da-v-tranche: #2c1462;
  /* or */
  --da-o1: #fff1a0; --da-o2: #ffcf3a; --da-o3: #f09a12; --da-o-tranche: #9a5200;
  /* vert, rouge */
  --da-g1: #9ef070; --da-g2: #4cc02c; --da-g3: #2a8a1a; --da-g-tranche: #145a0c;
  --da-r1: #ff7a68; --da-r2: #e0322a; --da-r3: #a8160e; --da-r-tranche: #5e0804;
  /* la nuit des fenêtres */
  --da-nuit1: #2c1c54; --da-nuit2: #1c1238; --da-nuit3: #120a26; --da-liseret: rgba(255,207,58,.55);
  --da-texte-contour: 0 2px 0 var(--da-contour), 1.5px 0 0 var(--da-contour), -1.5px 0 0 var(--da-contour), 0 -1.5px 0 var(--da-contour),
                      1px 1px 0 var(--da-contour), -1px 1px 0 var(--da-contour), 1px -1px 0 var(--da-contour), -1px -1px 0 var(--da-contour);
  --da-reflet: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 44%, rgba(255,255,255,0) 46%);
  --lisible: calc(11px / var(--ech, 1));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--nuit);
  font-family: var(--titre); color: var(--blanc);
  touch-action: none; overscroll-behavior: none;
}
[hidden] { display: none !important; }

#ecran {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  background: var(--nuit);
}
/* la toile des effets de coups : mêmes bords que l'écran, traits lisses, laisse passer les doigts */
#effets {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 5; background: transparent;
}

/* ═════════ voiles (menu, aide, pause, fin) ═════════ */
.voile {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  justify-content: safe center; overflow-y: auto;
  gap: 22px;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}

/* ═════════ titre ═════════ */
.titre { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.titre .sur {
  font-family: var(--corps); font-weight: 600; font-size: .72rem; letter-spacing: .45em;
  color: var(--gris); text-transform: uppercase; margin: 0 0 0 .45em;
}
.titre h1 {
  margin: 0; font-family: var(--titre); font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5rem); line-height: .95; letter-spacing: .06em;
  display: flex; justify-content: center; gap: .35em; flex-wrap: wrap;
}
.titre .n1 { color: var(--cyan);  text-shadow: 0 0 22px rgba(255,255,25,.35), 0 0 60px rgba(255,255,25,.15); }
.titre .n2 { color: var(--ambre); text-shadow: 0 0 22px rgba(25,255,255,.35), 0 0 60px rgba(25,255,255,.15); }
.titre .sous { font-family: var(--corps); font-size: .92rem; color: #aab3bd; letter-spacing: .02em; margin: 2px 0 0; }
.pied { margin: 0; font-family: var(--corps); font-size: .68rem; letter-spacing: .14em; color: var(--gris); text-transform: uppercase; }
.pied.droits { opacity: .5; }

/* ═════════ le salon (l'écran d'accueil) ═════════ */
#menu.salon {
  justify-content: space-between; padding: 12px 18px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  position: fixed; isolation: isolate;
  gap: 8px;
}
.haut { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.profil {
  display: flex; gap: 10px; align-items: center;
  background: rgba(10,12,18,.8); border: 2px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 5px 16px 5px 5px; box-shadow: 0 4px 0 rgba(0,0,0,.55);
}
.profil canvas { width: 46px; height: 46px; background: #2a2e38; image-rendering: pixelated; }
.profil-nom { font-family: var(--gras); font-weight: 900; font-size: .95rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.profil-stat { font-family: var(--corps); font-weight: 600; font-size: .74rem; }
.logo { font-family: var(--titre); display: flex; gap: .35em; }
.ronds { display: flex; gap: 8px; }
.rond-menu {
  padding: 0; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  height: max(46px, calc(34px / var(--ech, 1))) !important;
}
.milieu { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; flex: 1; gap: 10px; min-height: 0; }
.gauche { display: flex; flex-direction: column; gap: 10px; }
/* les pavés bleus, penchés comme des étiquettes */
#heros { image-rendering: pixelated; height: clamp(170px, 52vh, 320px); margin-bottom: 0; filter: drop-shadow(0 10px 8px rgba(0,0,0,.7)); width: calc(1.5 * clamp(170px, 52vh, 320px)); margin-inline: calc(-0.25 * clamp(170px, 52vh, 320px)); position: relative; z-index: 1; pointer-events: none; }
.droite { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 196px; }
.mode-carte {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 6px 8px;
  text-transform: none; letter-spacing: 0;
}
.mode-carte canvas { width: 100%; height: auto; border-radius: 10px; image-rendering: pixelated; }
.mode-nom { margin-top: 4px; font-family: var(--gras); font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.mode-desc { font-family: var(--corps); font-size: .72rem; }
/* le gros bouton jaune */
.jouer {
  font-family: var(--gras); font-weight: 900; font-size: 1.55rem; letter-spacing: .06em; text-transform: uppercase;
}
.jouer > span { display: block; transform: none; }
#menu.salon .pied { align-self: flex-end; opacity: .4; }

/* le choix du mode */
.panneau.modes { text-align: center; }
.cartes { gap: 14px; justify-content: center; flex-wrap: wrap; }
.carte {
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 196px; padding: 12px 12px 14px;
  font-family: var(--corps); text-transform: none; letter-spacing: 0;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.carte:focus-visible {
  transform: translateY(-3px); border-color: rgba(255,255,25,.55); color: var(--blanc);
  background: linear-gradient(160deg, rgba(255,255,25,.10), rgba(255,255,255,.03));
  box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,25,.25), 0 0 28px rgba(255,255,25,.14);
}
@media (hover: hover) { .carte:hover {
  transform: translateY(-3px); border-color: rgba(255,255,25,.55); color: var(--blanc);
  background: linear-gradient(160deg, rgba(255,255,25,.10), rgba(255,255,255,.03));
  box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,25,.25), 0 0 28px rgba(255,255,25,.14);
} }
.carte canvas {
  width: 160px; height: 90px; border-radius: 10px; image-rendering: pixelated;
}
.carte .nom { margin-top: 6px; font-family: var(--gras); font-weight: 900; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.carte .desc { font-size: .78rem; }
.carte .difficulte { margin-top: 8px; gap: 4px; flex-wrap: wrap; justify-content: center; }
.carte .difficulte button { letter-spacing: .03em; min-height: 36px; min-width: 64px; font-size: .74rem !important; padding: 6px 10px !important; }
.barre { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* un écran bas (téléphone en paysage) : tout se serre */
@media (max-height: 600px) {
  #menu.salon { padding: 8px 14px calc(6px + env(safe-area-inset-bottom)); }
  .profil canvas { width: 38px; height: 38px; }
  .profil-nom { font-size: .85rem; }
  .droite { width: 176px; }
  .jouer { font-size: 1.3rem; }
  #menu.salon .pied { display: none; }
  .panneau.modes h2 { font-size: 1.1rem; }
  .carte { width: 170px; padding: 8px 8px 10px; gap: 2px; }
  .carte canvas { width: 140px; height: 79px; }
  .carte .nom { font-size: .82rem; margin-top: 3px; }
  .carte .desc { font-size: .7rem; }
  .carte .difficulte { margin-top: 4px; }
}

/* ═════════ boutons ═════════ */
.boutons { display: flex; flex-direction: column; gap: 11px; width: min(330px, 84vw); }
button {
  font-size: .9rem;
  padding: 13px 18px; cursor: pointer;
}
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* le bouton principal : plein, lumineux */
button.gros {
  padding: 15px 22px;
}

/* ═════════ panneaux (aide, pause, fin) ═════════ */
.panneau {
  width: min(860px, 94vw); max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column;
  --lisible: calc(10.5px / var(--ech, 1));
}
.panneau.court { width: min(360px, 88vw); text-align: center; align-items: stretch; }
.panneau h3 {
  margin: 0 0 6px;
  text-transform: uppercase;
  color: var(--cr-or1); font-family: var(--gras); font-size: .74rem; letter-spacing: .12em;
}
.panneau p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; }
.panneau b { color: var(--blanc); }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 26px; }
.panneau table { border-collapse: collapse; font-size: .82rem; width: 100%; }
.panneau th { text-align: left; font-family: var(--pixel); font-size: 8px; letter-spacing: .1em; color: var(--gris); padding: 4px 8px 4px 0; text-transform: uppercase; }
.panneau td { font-family: var(--corps); padding: 4px 8px 4px 0; color: #c2c9d1; border-top: 1px solid rgba(126,136,148,.18); }
kbd {
  font-family: var(--pixel); font-size: 9px; background: rgba(255,255,25,.1);
  border: 1px solid rgba(255,255,25,.35); border-radius: 2px; padding: 2px 5px; color: var(--cyan);
}
#fin-titre.j1 { color: var(--cyan);  }
#fin-titre.j2 { color: var(--ambre);  }
#fin-texte { font-family: var(--gras); font-weight: 900; font-size: .9rem; letter-spacing: .06em; color: #dbe8ff; text-transform: none; }

/* ═════════ configuration des touches ═════════ */
.note { font-family: var(--corps); font-size: .85rem; color: #98a1ac; margin: -6px 0 2px; }
.touches-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; }
.colonne-j h3 { margin-bottom: 10px; }
.colonne-j.j1 h3 { color: var(--cyan); }
.colonne-j.j2 h3 { color: var(--ambre); }
.ligne-touche {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid rgba(126,136,148,.15);
}
.ligne-touche span { font-family: var(--corps); font-size: .9rem; color: #c2c9d1; }
.ligne-touche button {
  min-width: 96px; padding: 6px 10px; font-family: var(--pixel); font-size: 10px;
  letter-spacing: .06em; text-transform: none; color: var(--blanc);
  border-color: rgba(126,136,148,.4); background: rgba(16,20,25,.7);
}
@media (hover: hover) { .colonne-j.j1 .ligne-touche button:hover { border-color: var(--cyan); color: var(--cyan); } }
@media (hover: hover) { .colonne-j.j2 .ligne-touche button:hover { border-color: var(--ambre); color: var(--ambre); } }
.ligne-touche button.attend {
  border-color: var(--rose); color: var(--rose);
  
  animation: clignote .7s steps(2) infinite;
}
.ligne-touche button.vide { color: var(--rose); border-color: rgba(216,31,38,.5); }
@keyframes clignote { 50% { opacity: .45; } }
.rangee { display: flex; gap: 12px; align-items: center; }
.rangee button { flex: 1; }

/* ═════════ le choix des tenues ═════════ */
.panneau.tenues { text-align: center; align-items: center; gap: 10px; }
.panneau.tenues .note { margin: 0; }
.panneau.tenues .rangee { width: min(360px, 100%); }
.vitrines { display: flex; gap: 18px; justify-content: center; width: 100%; }
.vitrine { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vitrine h3 { margin: 0 0 2px; }
.vitrine.j1 h3 { color: var(--cyan); }
.vitrine.j2 h3 { color: var(--ambre); }
.cadre { display: flex; align-items: center; gap: 8px; }
.cadre canvas {
  width: 120px; height: 120px; image-rendering: pixelated; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: #2a2e38;
}
.fleche { border-radius: 50%; width: 42px; height: 42px; padding: 0 !important; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }
.vitrine.j1 .cadre canvas { box-shadow: 0 0 0 1px rgba(255,255,25,.25); }
.vitrine.j2 .cadre canvas { box-shadow: 0 0 0 1px rgba(25,255,255,.25); }
.titre-tenue { margin: 4px 0 0 !important; font-family: var(--titre); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blanc) !important; }
.note-tenue { margin: 0 !important; font-size: .8rem !important; min-height: 2.6em; }
.points { margin: 0 !important; font-family: var(--pixel); font-size: 9px; letter-spacing: .25em; color: var(--gris) !important; }
.points b { color: var(--blanc); }
/* en ligne, la vitrine de l'autre se regarde sans se toucher */
.vitrine.verrou .fleche { visibility: hidden; }
.vitrine.verrou canvas { cursor: default; }
.difficulte { display: flex; gap: 6px; margin-top: 6px; }
.difficulte button { letter-spacing: .06em; }
#tenues-attente { color: var(--cyan); }

/* ═════════ en ligne ═════════ */
#code-salon {
  flex: 1; min-width: 0; background: rgba(11,13,17,.8); color: var(--blanc); border: 1px solid var(--bord2);
  border-radius: 12px; padding: 12px; font-family: var(--titre); font-size: 1.2rem; letter-spacing: .3em;
  text-transform: uppercase; text-align: center; user-select: text; -webkit-user-select: text;
}
#code-salon:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.etat-ligne { font-family: var(--corps); font-size: .9rem; color: #c2c9d1; margin: 0; min-height: 1.4em; line-height: 1.5; }
.etat-ligne b { font-family: var(--titre); font-size: 1.6rem; letter-spacing: .3em; color: var(--cyan); }

@media (max-height: 470px) {
  .panneau.tenues { gap: 6px; padding: 12px 16px; }
  .panneau.tenues h2 { font-size: 1.1rem; }
  .panneau.tenues .note, .note-tenue { display: none; }
  .cadre canvas { width: 88px; height: 88px; }
}

/* ═════════ bouton pause en jeu ═════════ */
/* en bas au centre : le haut de l'écran est pris par la flèche et la progression */
#btn-pause {
  position: fixed; bottom: calc(8px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 15;
  border-color: rgba(126,136,148,.3);
  width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: .8rem; letter-spacing: -1px; opacity: .85; display: flex; align-items: center; justify-content: center;
  background: rgba(11,13,17,.7); border: 2px solid rgba(255,255,255,.4); color: #fff;
}

/* ═════════ commandes tactiles ═════════ */
/* Tout part d'une seule mesure, --d : la taille d'un bouton de la croix,
   calculée d'après l'écran (jamais moins de 48 px, le minimum pour un
   pouce). Les autres boutons en découlent. */
#tactile {
  --f: calc(var(--tactile-k, 1) * clamp(120px, 40vmin, 170px));        /* le stick, à deux sur l'écran */
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(10px + var(--marge-g, env(safe-area-inset-left, 0px))) calc(10px + env(safe-area-inset-bottom)) calc(10px + var(--marge-d, env(safe-area-inset-right, 0px)));
  --d: calc(var(--tactile-k, 1) * clamp(44px, 13vmin, 60px));
  opacity: var(--tactile-a, .55);
}
.bloc { display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.croix {
  /* le stick : un disque, et le pouce qui glisse dedans. Pousser vers la
     gauche ou la droite déplace, vers le haut ou le bas change la garde ;
     en diagonale, les deux à la fois. */
  position: relative; width: var(--f); height: var(--f); flex: none;
  pointer-events: auto; touch-action: none; border-radius: 50%;
}
.croix::before {
  /* les quatre repères, discrets */
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 6%,  rgba(234,246,255,.35) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 94%, rgba(234,246,255,.35) 0 4px, transparent 5px),
    radial-gradient(circle at 6% 50%,  rgba(234,246,255,.35) 0 4px, transparent 5px),
    radial-gradient(circle at 94% 50%, rgba(234,246,255,.35) 0 4px, transparent 5px);
}
.pouce {
  position: absolute; left: 50%; top: 50%; width: 44%; height: 44%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  transition: transform .08s;
}
.croix.appui .pouce { transition: none; }
.j1 .croix.appui .pouce { background: rgba(255,255,25,.35); border-color: var(--cyan); box-shadow: 0 0 16px rgba(255,255,25,.4); }
.j2 .croix.appui .pouce { background: rgba(25,255,255,.35); border-color: var(--ambre); box-shadow: 0 0 16px rgba(25,255,255,.4); }
.rond {
  pointer-events: auto; position: absolute; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel); font-size: 16px; padding: 0;
  border-radius: 50%;
  transition: none;
}
.actions { position: relative; width: calc(var(--d) * 2.8); height: calc(var(--d) * 2.8); pointer-events: none; flex: none; }
.rond { width: calc(var(--d) * 1.35); height: calc(var(--d) * 1.35); }
.saut   { bottom: 0;  left: 0; }
/* le petit bouton accroupi, sous l'attaque et à droite du saut :
   s'accroupir, ou glisser en courant */
.accroupi { width: var(--d); height: var(--d); bottom: 0; right: 0; font-size: 14px; }
.frappe { bottom: calc(var(--d) * 1.1); right: 0; width: calc(var(--d) * 1.7); height: calc(var(--d) * 1.7); font-size: 22px; }

/* seul sur cet écran (contre l'ordinateur, en ligne) : la croix à gauche,
   les deux boutons à droite, et tout va au même duelliste */
#tactile.solo .j1 .actions, #tactile.solo .j2 .croix { display: none; }
#tactile.solo { --f: calc(var(--tactile-k, 1) * clamp(110px, 36vmin, 170px)); }

/* ═════════ invitation à tourner l'écran ═════════ */
#rotation {
  position: fixed; inset: 0; z-index: 40; background: var(--nuit);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
#rotation span { font-size: 4rem; color: var(--cyan); animation: pivote 2.2s ease-in-out infinite; }
#rotation p { font-family: var(--pixel); font-size: 10px; letter-spacing: .16em; color: var(--gris); text-align: center; text-transform: uppercase; }
@keyframes pivote { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* écran de chargement des planches graphiques */
#chargement {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: #000; color: var(--gris); font-family: var(--pixel); font-size: 12px; letter-spacing: .2em;
  flex-direction: column; gap: 10px;
}
#chargement[hidden] { display: none !important; }
/* ═════════ l'écran partagé : à deux, téléphone à la verticale ═════════ */
/* Deux moitiés, chacune une vue qui suit son duelliste et ses boutons à son
   bord. Celle du haut est retournée : les joueurs se font face, et chacun
   lit son écran à l'endroit. */
#partage {
  position: fixed; inset: 0; z-index: 6; background: var(--nuit);
  --d: clamp(44px, 14vmin, 60px);
  --f: calc(var(--tactile-k, 1) * clamp(110px, 36vmin, 150px));
}
.moitie { position: absolute; left: 0; width: 100%; height: calc(50% - 5px); display: flex; flex-direction: column; }
.moitie.dessous { bottom: 0; }
.moitie.dessus  { top: 0; transform: rotate(180deg); }
.moitie .vue { flex: 1; position: relative; overflow: hidden; background: var(--nuit); }
.moitie .vue canvas { position: absolute; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.moitie .vue .effets { pointer-events: none; background: transparent; }
.moitie .pad {
  flex: none; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 8px calc(10px + var(--marge-d, env(safe-area-inset-right, 0px))) calc(8px + env(safe-area-inset-bottom)) calc(10px + var(--marge-g, env(safe-area-inset-left, 0px)));
}
.moitie.dessus .pad { padding-bottom: calc(8px + env(safe-area-inset-top)); }
/* en écran partagé, la pause se pose sur la ligne de partage, à droite */
#partage:not([hidden]) ~ #btn-pause { bottom: auto; top: 50%; left: auto; right: 8px; transform: translateY(-50%); }
/* la barre de séparation entre les deux moitiés */
#partage::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 10px; transform: translateY(-50%); z-index: 2;
  background: linear-gradient(#3a4050, #1c2029 50%, #3a4050);
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22);
}
/* fenêtre en paysage : le partage est couché, tourné d'un quart de tour. Il
   est juste quand on tient le téléphone debout, sans attendre que l'écran
   suive. (Les tailles sont permutées : la hauteur de la fenêtre devient
   la largeur du partage.) */
#partage.couche {
  top: 0; left: 0;                 /* (largeur et hauteur posées en pixels par principal.js) */
  transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}

/* ═════════ le salon, version 2 : profil, passe, personnage (14/10/2026) ═════════ */
button.profil {
  padding: 5px 16px 5px 5px; min-width: 210px; text-align: left; cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: none;
}
@media (hover: hover) { button.profil:hover { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,25,.25); } }
.profil .avatar { position: relative; display: block; flex: none; }
.profil .avatar canvas { display: block; border: 3px solid var(--cr-nuit); border-radius: 12px; }
.profil-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profil-titre { font-family: var(--corps); font-weight: 600; font-size: .7rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.profil-xp { display: block; width: 140px; overflow: hidden; }
.profil-xp i { display: block; height: 100%; width: 0; transition: width .4s; background: linear-gradient(180deg, var(--cr-or1), var(--cr-or2)); box-shadow: none; }
.profil-xp.grande { width: min(300px, 50vw); height: 10px; border-radius: 5px; }
.scene-heros { position: relative; display: flex; flex-direction: column; align-items: center; }
.scene-heros .socle {
  position: absolute; left: 50%; width: 62%; height: 18px; transform: translateX(-50%);
  border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(25,255,255,.28), rgba(25,255,255,0) 70%); bottom: 22px;
}
.bas { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 14px; }
.bas .saison { font-family: var(--gras); font-weight: 900; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.bas .droits { font-family: var(--corps); font-size: .66rem; letter-spacing: .12em; color: var(--gris); text-transform: uppercase; opacity: .5; }
@media (max-height: 600px) { .bas .droits { display: none; } button.profil { min-width: 190px; } .profil-xp { width: 120px; } }

/* ─── le compte ─── */
.panneau.compte input, .panneau.perso input {
  font-family: var(--corps); font-size: 1rem; padding: 10px 14px;
  outline: none;
}
#compte-deconnecte, #compte-connecte, #compte-suppression { display: flex; flex-direction: column; gap: 10px; }
#compte-suppression { padding: 10px; border: 3px solid var(--cr-rouge3); border-radius: 12px; border-color: var(--cr-rouge3); background: rgba(156,26,20,.2); }
#compte-suppression .note { margin: 0; }
button.danger { color: #fff !important;
  background: var(--da-reflet), linear-gradient(180deg, var(--da-r1), var(--da-r2) 50%, var(--da-r3)) !important; border-color: var(--da-contour) !important;
  box-shadow: inset 0 -5px 0 var(--da-r-tranche), inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--da-contour) !important;
}
.lien-confidentialite { display: block; margin-top: 8px; color: var(--gris); text-align: center; text-decoration: underline; }
.bas .droits a { color: inherit; text-decoration: underline; }
.ou { display: flex; align-items: center; gap: 10px; color: var(--gris); font-family: var(--corps); font-size: .8rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--bord2); }
button.google { display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: .95rem; background: #fff; border-color: #c9ced6; box-shadow: 0 5px 0 #b5bcc7, inset 0 2px 0 #fff; color: #1f1f1f; text-shadow: none; }
@media (hover: hover) { button.google:hover { background: #f4f6f8; color: #1f1f1f; border-color: #c9ced6; filter: none; } }
button.google i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%);
}
#google-bouton { display: flex; justify-content: center; min-height: 44px; }
#google-bouton:empty:not(.attente) { display: none; }
/* (19/10/2026) la place qui attend le vrai bouton de Google : sa forme, sans faux logo */
#google-bouton.attente { position: relative; }
#google-bouton.attente::before { content: ""; position: absolute; inset: 0; margin: 0 auto; max-width: 400px; border-radius: 999px; background: linear-gradient(90deg, #202124, #2d2f33, #202124); background-size: 200% 100%; animation: google-attente 1.2s linear infinite; }
#google-bouton.attente > * { position: relative; z-index: 1; }
@keyframes google-attente { from { background-position: 100% 0; } to { background-position: -100% 0; } }
#compte-deconnecte.sans-google .ou { display: none; }

/* ─── le personnage ─── */
.perso-corps { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.cadre-avatar {
  align-self: center; width: 180px; height: 180px; border-radius: 18px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  box-shadow: 0 4px 0 var(--cr-brun2);
}
.cadre-avatar canvas { width: 176px; height: 176px; image-rendering: pixelated; }
.perso-ligne { display: flex; flex-direction: column; gap: 6px; }
.perso-ligne > span { font-family: var(--gras); font-weight: 900; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille:disabled { cursor: not-allowed; }
.pastille.cadre i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.perso-droite { gap: 12px; min-width: 0; }
.onglets { display: flex; gap: 6px; }
.grille-tenues { display: grid; overflow: auto; padding: 2px; grid-auto-rows: max-content; align-content: start; }
.carte-tenue {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-transform: none; letter-spacing: 0;
}
.carte-tenue canvas { image-rendering: pixelated; margin-top: 4px; }
.carte-tenue .nom { font-family: var(--gras); font-weight: 900; font-size: .72rem; }
.carte-tenue small { font-family: var(--corps); font-size: .66rem; }
.carte-tenue.verrou { opacity: 1; }
#perso-compose { display: flex; flex-direction: column; gap: 10px; overflow: auto; padding: 2px; }
.teintes { display: flex; flex-wrap: wrap; gap: 6px; }
.teinte { width: 30px; height: 30px; border-radius: 8px; padding: 0; }
@media (max-width: 700px), (max-height: 600px) {
   /* sur un petit écran, les onglets d'abord, le pseudo et les titres en dessous */
  .perso-apercu { flex-wrap: wrap; }
  .perso-apercu input { flex: 1; min-width: 140px; }
  .perso-apercu .perso-ligne { flex-basis: 100%; }
}

/* ─── le passe de combat ─── */
.panneau.passe { width: min(980px, 96vw); }
.passe-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.passe-tete .sur { font-family: var(--gras); font-weight: 900; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.passe-tete h2 { margin: 2px 0 0; }
.passe-progres { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.passe-progres b { font-family: var(--gras); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.passe-progres small { font-family: var(--corps); font-size: .74rem; }
.paliers { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.palier {
  flex: none; display: flex; flex-direction: column; align-items: center;
  scroll-snap-align: center; text-align: center;
}
.palier b { font-family: var(--gras); font-weight: 900; font-size: .7rem; letter-spacing: .08em; }
.palier canvas { image-rendering: pixelated; }
.palier span { font-family: var(--corps); font-weight: 600; font-size: .68rem; line-height: 1.2; }
.palier.verrou canvas { filter: none; }
.palier.verrou span { color: #8c95a0; }
.verrou-icone { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: .7rem; opacity: .8; }
.fin-xp { margin: -6px 0 0; font-size: .9rem; min-height: 0; }

/* ═════════ le salon, version 3 : moderne, à lui (15/10/2026) ═════════
   Un fond de nuit profonde (plus la ruine du jeu : un dégradé bleu nuit →
   violet, et des braises qui montent, dessinées par js/principal.js dans
   #fond-menu), des onglets de verre à gauche (casier, passe, boutique, stats,
   arène), le héros au milieu sur un halo, le mode et JOUER à droite. */
#menu.salon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 75%);
  display: none;
}
#fond-menu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; object-fit: cover; object-position: center bottom; }
#menu.salon .haut, #menu.salon .milieu, #menu.salon .bas { position: relative; z-index: 1; }

/* le bandeau du haut */
.profil canvas { border-radius: 12px; }
.logo { font-size: 1.65rem; letter-spacing: .14em; }
.ronds { align-items: center; }

/* les pièces */
.pieces {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 8px;
  border: 1px solid rgba(255,213,74,.45);
  font-family: var(--gras); font-weight: 900; letter-spacing: .02em; text-transform: none;
}
.pieces svg { width: 22px; height: 22px; fill: #fff7c0; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.pieces.grand { height: 44px; font-size: 1.05rem; color: #3a2300; }
.pieces.grand b { margin-right: 2px; }

/* les onglets de gauche */
.onglets-salon { display: flex; flex-direction: column; }
.onglet-salon {
  display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; text-align: left;
  -webkit-backdrop-filter: blur(10px);
}
.onglet-salon svg { grid-row: 1 / 3; width: 24px; height: 24px; }
.onglet-salon span { font-family: var(--gras); font-weight: 900; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.onglet-salon small { font-family: var(--corps); font-weight: 600; font-size: .68rem; line-height: 1.1; text-shadow: 0 1px 0 rgba(0,0,0,.4); }

/* le héros */
.scene-heros .halo {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: -1; border-radius: 50%; pointer-events: none;
  bottom: -10px; height: 200px; background: radial-gradient(ellipse at 50% 80%, rgba(255,170,60,.18), rgba(255,233,90,.06) 40%, transparent 70%); filter: blur(4px);
}
.heros-nom {
  font-family: var(--gras); font-weight: 900; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  margin-top: 2px;
}
.heros-nom:empty { display: none; }

/* la droite : le mode et JOUER */
.mode-carte {
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 5px 0 var(--cr-brun2), 0 10px 18px rgba(0,0,0,.4), inset 0 2px 0 #fff;
}
@media (hover: hover) { .mode-carte:hover { filter: brightness(1.03); border-color: var(--cr-brun2); } }
.jouer {
  transform: none; border: none;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
@media (hover: hover) { .jouer:hover { box-shadow: 0 14px 36px rgba(255,176,32,.45), 0 0 0 1px rgba(255,233,90,.6), inset 0 1px 0 rgba(255,255,255,.55); } }
@media (max-height: 600px) {
  .onglet-salon { column-gap: 9px; }
  .onglet-salon svg { width: 20px; height: 20px; }
  .onglet-salon span { font-size: .78rem; } .onglet-salon small { font-size: .62rem; }
 .pieces svg { width: 18px; height: 18px; }
  .logo { font-size: 1.3rem; }
  .heros-nom { font-size: .62rem; padding: 3px 10px; }
}
@media (max-width: 760px) { .onglet-salon small { display: none; } .onglet-salon { grid-template-rows: auto; } }

/* ─── le passe à deux voies ─── */
.passe-voies { display: grid; grid-template-columns: 56px 1fr; gap: 6px; align-items: stretch; }
.voie-etiquettes { display: flex; flex-direction: column; justify-content: space-around; padding: 30px 0 14px; }
.voie-etiquettes span { text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; border-radius: 8px; }
.palier .recompense { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.palier .recompense.payant { border-color: var(--cr-or2); }
.palier .recompense.verrou canvas { filter: grayscale(.6) brightness(.8); }
.palier .recompense.gagne.payant { border-color: rgba(255,233,90,.6); }
.palier .recompense .verrou-icone { top: 4px; right: 6px; }
.palier .recompense.payant .verrou-icone { color: #8a5200; }
.palier.verrou .recompense.verrou canvas { filter: grayscale(1) brightness(.55); }
.passe-pied { display: flex; flex-direction: column; gap: 10px; }
.passe-pied .rangee { justify-content: space-between; }
.panneau.passe #passe-etat:empty { display: none; }

/* ─── la boutique ─── */
.promo-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promo-texte b { font-family: var(--gras); font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.promo-texte span { font-family: var(--corps); font-size: .78rem; }
i.piece { display: inline-block; width: 14px; height: 14px; }
.panneau.boutique .rangee { justify-content: space-between; align-items: center; }
.panneau.boutique #boutique-etat:empty { display: none; }

/* ─── les statistiques ─── */
.panneau.stats { width: min(820px, 96vw); align-items: stretch; }
.panneau.stats h2 { text-align: center; }
.grille-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-carte {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; text-align: center;
}
.stat-carte b { font-family: var(--gras); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.stat-carte span { font-family: var(--corps); font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.stat-carte.or b { text-shadow: 0 0 16px rgba(255,233,90,.4); }
.panneau.stats > button { align-self: center; width: min(300px, 100%); }
@media (max-width: 700px), (max-height: 600px) {
  .grille-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat-carte { padding: 8px 4px 7px; } .stat-carte b { font-size: 1.15rem; } .stat-carte span { font-size: .56rem; }
  .panneau.stats { padding: 12px 14px; gap: 10px; } .panneau.stats h2 { font-size: 1.1rem; }
  .panneau.boutique { padding: 12px 14px; }
 .promo-texte > span { display: none; }
  .passe-pied .note { display: none; }
  .passe-voies { grid-template-columns: 40px 1fr; }
}

/* ═════════ VERSUS, juste avant le combat (15/10/2026) ═════════ */
#versus { position: fixed; inset: 0; z-index: 30; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; background: #06070b; }
#versus .vs-fond {
  position: absolute; inset: -20%; z-index: 0;
  background: linear-gradient(104deg, #3a0c12 0 49.6%, #fff 49.6% 50.4%, #0a1a3a 50.4% 100%);
  transform: translateX(-110%);
}
#versus.entre .vs-fond { animation: vs-fond .45s cubic-bezier(.2,.9,.25,1) forwards; }
#versus .vs-fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(216,31,38,.35), transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(25,255,255,.22), transparent 50%); }
.vs-cote { z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 34vw; max-width: 380px; opacity: 0; }
.vs-cote canvas { width: min(36vh, 32vw); height: min(36vh, 32vw); image-rendering: pixelated; filter: drop-shadow(0 14px 14px rgba(0,0,0,.6)); }
.vs-carton { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vs-carton b { font-family: var(--gras); font-weight: 900; font-size: clamp(1rem, 3.2vh, 1.5rem); letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.vs-carton span { font-family: var(--corps); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #ffe95a; min-height: 1em; }
.vs-cote.gauche .vs-carton b { text-shadow: 0 0 18px rgba(255,80,80,.6); }
.vs-cote.droite .vs-carton b { text-shadow: 0 0 18px rgba(25,255,255,.6); }
#versus.entre .vs-cote.gauche { animation: vs-gauche .55s .15s cubic-bezier(.2,.9,.3,1.15) forwards; }
#versus.entre .vs-cote.droite { animation: vs-droite .55s .15s cubic-bezier(.2,.9,.3,1.15) forwards; }
.vs-logo { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) scale(4); opacity: 0; }
.vs-logo span {
  display: block; font-family: var(--gras); font-weight: 900; font-size: clamp(5rem, 22vh, 9rem); line-height: 1; letter-spacing: -.04em; font-style: italic;
  color: #fff; -webkit-text-stroke: 3px #0b0d11;
  text-shadow: 6px 6px 0 #d81f26, -6px -6px 0 #19ffff, 0 0 40px rgba(255,255,255,.5);
}
#versus.claque .vs-logo { animation: vs-logo .35s cubic-bezier(.1,1.4,.3,1) forwards, vs-tremble .4s .3s ease-out; }
#versus.claque .vs-cote { animation: vs-tremble .4s ease-out; opacity: 1; }
.vs-eclair { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
#versus.claque .vs-eclair { animation: vs-eclair .5s ease-out forwards; }
#versus.sort { animation: vs-sort .3s ease-in forwards; }
@keyframes vs-fond { to { transform: translateX(0); } }
@keyframes vs-gauche { from { opacity: 0; transform: translateX(-60vw) skewX(-8deg); } to { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes vs-droite { from { opacity: 0; transform: translateX(60vw) skewX(8deg); } to { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes vs-logo { from { opacity: 0; transform: translate(-50%, -50%) scale(4) rotate(-12deg); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.9) rotate(-8deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
@keyframes vs-tremble { 0% { translate: 0 0; } 20% { translate: -6px 4px; } 40% { translate: 5px -5px; } 60% { translate: -4px 2px; } 80% { translate: 3px -2px; } 100% { translate: 0 0; } }
@keyframes vs-eclair { from { opacity: .9; } to { opacity: 0; } }
@keyframes vs-sort { to { opacity: 0; transform: scale(1.08); } }

/* ═════════ le salon, version 4 : le bas de la falaise (15/10/2026) ═════════ */
#menu.salon {
  padding: 12px 18px calc(10px + env(safe-area-inset-bottom));
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(18px, var(--marge-g, env(safe-area-inset-left, 0px)));
  padding-right: max(18px, var(--marge-d, env(safe-area-inset-right, 0px)));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #07090f;
}
.scene-heros { align-self: flex-end; margin-bottom: -6px; }
.scene-heros .halo { width: 340px; }
.scene-heros .socle { display: none; }
.heros-nom { box-shadow: inset 0 0 0 1px var(--cr-or2); }
.bas { padding-top: 4px; }
@media (max-height: 600px) { #heros { height: clamp(150px, 46vh, 260px); width: calc(1.5 * clamp(150px, 46vh, 260px)); margin-inline: calc(-0.25 * clamp(150px, 46vh, 260px)); } .scene-heros .halo { height: 140px; width: 240px; } }

/* ═════════ les réglages du son : deux voies (15/10/2026) ═════════ */
.reglages-son { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; }
.reglage-son { display: grid; grid-template-columns: 76px 84px 1fr; align-items: center; gap: 8px; text-align: left; }
.reglage-son .pastille { padding: 6px 8px; font-size: .68rem; }
.reglage-son .pastille.coupe { opacity: .55; text-decoration: line-through; }
.reglage-son input[type=range] { width: 100%; cursor: pointer; accent-color: var(--cr-or2); height: calc(30px / var(--ech, 1)); }

/* ── le texte « gravé » des titres et des boutons ── */
.panneau h2, .onglet-salon span, .jouer > span, .mode-nom, .profil-nom, .logo .n1, .logo .n2, .bas .saison, .vs-carton b {
  -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6);
}

/* ── les panneaux ── */
.panneau {
  backdrop-filter: none; -webkit-backdrop-filter: none; gap: 14px; padding: 18px 20px 20px;
}
.panneau h2, .panneau > h2 {
  border-bottom: 3px solid var(--cr-nuit2);
  text-align: center;
}
.panneau .note, .panneau p { font-family: var(--corps); }
.panneau .etat-ligne { font-weight: 700; }
.panneau .note b { color: var(--cr-or1); }
.panneau input, .panneau.compte input, .panneau.perso input {
  font-weight: 700;
  box-shadow: inset 0 3px 0 rgba(0,0,0,.12);
  background: linear-gradient(180deg, #fff9e8, #efdfb6); color: var(--cr-encre);
}
.panneau input:focus, .panneau.compte input:focus, .panneau.perso input:focus { border-color: var(--cr-or2); box-shadow: 0 0 0 3px rgba(255,181,42,.35), inset 0 3px 0 rgba(0,0,0,.12); }
.panneau input::placeholder { color: #9a8c78; }

/* ── les boutons 3D ── */
button:focus-visible { outline: 3px solid var(--cr-or1); outline-offset: 2px; }
@media (hover: hover) { button.gros:hover { box-shadow: 0 6px 0 var(--cr-vert3), 0 12px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.5); } }
button.gros:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--cr-or3), inset 0 2px 0 rgba(255,255,255,.7); }
button.discret { font-size: .8rem; }

/* les petites pastilles : crème, choisie = or */
.pastille {
  padding: 8px 14px; font-size: .76rem;
}
.onglets button { flex: 1; padding: 10px 8px; font-size: .78rem; }

/* ── le salon ── */
.profil .avatar b {
  position: absolute; right: -7px; bottom: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  font-family: var(--gras); font-weight: 900; font-size: .72rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--cr-or1), var(--cr-or2)); border: 2px solid var(--cr-or3);
  color: #3a2300;
}
.profil-xp { border: 2px solid var(--cr-nuit); height: 10px; border-radius: 6px; }
.pieces { height: 42px; border-radius: 999px; border-width: 3px; font-size: 1rem; }
.onglets-salon { width: 190px; gap: 8px; }
.onglet-salon {
  backdrop-filter: none; padding: 7px 12px 7px 10px;
}
@media (hover: hover) { .onglet-salon:hover { transform: translateX(3px); } }
.onglet-salon.passe span, .onglet-salon.passe svg { text-shadow: 0 1px 0 rgba(255,255,255,.45); filter: none; }
.mode-carte {
  border: 3px solid var(--cr-brun2); border-radius: 16px;
  backdrop-filter: none;
  background: linear-gradient(180deg, #fff6dc, var(--cr-creme) 60%, var(--cr-creme2));
}
.mode-carte:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cr-brun2); }
.mode-carte canvas { border: 2px solid var(--cr-brun); background: #1a1d25; }
.mode-nom { color: var(--cr-encre); text-shadow: none; }
.jouer { border-width: 3px; border-radius: 16px; padding: 15px 20px; }
@media (hover: hover) { .jouer:hover { transform: none; } }
.jouer:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--cr-or3); }
.heros-nom { background: linear-gradient(180deg, var(--cramoisi1), var(--cramoisi2)); }
 .profil-stat b { color: var(--cr-or1); }

/* ── les cartes crème (casier, boutique, passe, stats) ── */
.carte-tenue, .stat-carte, .palier, .carte {
  border-radius: 14px;
  color: var(--cr-encre);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(120,80,20,.18), transparent 50%),
    linear-gradient(180deg, #fbf1d6, var(--cr-creme) 60%, var(--cr-creme2)); box-shadow: 0 4px 0 var(--cr-brun2), 0 8px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.5);
}
.carte-tenue { padding: 8px 6px 7px; overflow: hidden; }
.carte:focus-visible { filter: brightness(1.03); border-color: var(--cr-brun2); background: linear-gradient(180deg, #fff, var(--cr-creme)); transform: none; box-shadow: 0 4px 0 var(--cr-brun2), 0 8px 14px rgba(0,0,0,.3), inset 0 2px 0 #fff; color: var(--cr-encre); }
@media (hover: hover) { .carte-tenue:hover, .carte:hover { filter: brightness(1.03); border-color: var(--cr-brun2); background: linear-gradient(180deg, #fff, var(--cr-creme)); transform: none; box-shadow: 0 4px 0 var(--cr-brun2), 0 8px 14px rgba(0,0,0,.3), inset 0 2px 0 #fff; color: var(--cr-encre); } }
.carte-tenue:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cr-brun2); }
.carte-tenue canvas, .palier canvas { border: 2px solid var(--cr-brun); border-radius: 10px; }
.carte-tenue .nom, .carte .nom { color: var(--cr-encre); text-shadow: none; }
.carte-tenue small, .carte .desc, .palier span, .stat-carte span { color: var(--cr-encre2); }
.carte-tenue.portee, .carte.choisie { border-color: var(--cr-or3); box-shadow: 0 4px 0 var(--cr-or3), 0 0 0 3px var(--cr-or2), 0 8px 14px rgba(0,0,0,.3), inset 0 2px 0 #fff; }
.carte-tenue.verrou { filter: none; }
.stat-carte b { color: var(--cr-encre); text-shadow: none; }
.stat-carte.or b { color: #b06a00; } .stat-carte.rouge b { text-shadow: 0 0 16px rgba(255,90,74,.35); color: var(--cr-rouge2); }
.palier b { color: var(--cr-encre2); }
.palier.gagne { border-color: var(--cr-or3); box-shadow: 0 4px 0 var(--cr-or3), 0 8px 14px rgba(0,0,0,.3), inset 0 2px 0 #fff; }
.palier.gagne b { color: #8a5200; }
.promo-texte b { color: var(--cr-or1); }.cadre-avatar { border: 3px solid var(--cr-brun2); background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); }
.teinte { border: 3px solid var(--cr-brun2); box-shadow: 0 3px 0 var(--cr-brun2); }
.teinte.choisie { border-color: var(--cr-or3); box-shadow: 0 3px 0 var(--cr-or3), 0 0 0 3px var(--cr-or2); }
.reglages-son { border: 2px solid var(--cr-nuit); background: rgba(0,0,0,.25); }
.reglage-son > span { font-family: var(--gras); font-weight: 900; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.carte canvas { border: 2px solid var(--cr-brun); }

/* la fin de partie et la pause restent sombres, mais prennent les boutons */
.fin-xp { color: var(--cr-or1); }
@media (max-height: 600px) {
  .panneau { padding: 12px 14px 14px; gap: 10px; }
  .onglets-salon { width: 168px; gap: 6px; }
}

/* ── les panneaux de chêne cerclés de fer ── */
.panneau::before, .panneau::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 2;
  box-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.panneau::before { top: 8px; left: 8px; box-shadow: calc(100% + 0px) 0 0 0 transparent, 0 1px 0 rgba(0,0,0,.6); }
.panneau::after { bottom: 8px; right: 8px; }
/* les titres : une bannière cramoisie, pointe en bas, liseré d'or */
.panneau h2, .panneau > h2, .panneau.court h2 {
  margin: -18px auto 4px; padding: 10px 34px 14px; width: max-content; max-width: 90%; border-radius: 0 0 6px 6px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}

/* ── les boutons : fer, bronze, sang ── */
button.gros, button.gros.dore, .jouer, .pieces, .onglet-salon.passe {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
@media (hover: hover) { button.gros:hover, button.gros.dore:hover, .jouer:hover, .pieces:hover { filter: none; } }

/* ── le salon ── */
.mode-carte { border-color: var(--cr-brun2); }
@media (hover: hover) { .mode-carte:hover { background: linear-gradient(180deg, #fff6dc, var(--cr-creme) 60%, var(--cr-creme2)); } }
.heros-nom { border: 2px solid var(--cr-or3); color: var(--cr-or1); }
.bas .saison { color: var(--cr-or1); }
.profil-stat { color: #e8e2d2; }
/* ── les cartes de parchemin ── */
.carte-tenue, .stat-carte, .palier, .carte {
  border: 3px solid var(--cr-brun2);
}
.carte:focus-visible { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.45), transparent 60%), linear-gradient(180deg, #fff6dc, var(--cr-creme) 60%, var(--cr-creme2)); }
@media (hover: hover) { .carte-tenue:hover, .carte:hover { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.45), transparent 60%), linear-gradient(180deg, #fff6dc, var(--cr-creme) 60%, var(--cr-creme2)); } }
.carte-tenue canvas, .palier canvas, .carte canvas { background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); border-color: var(--cr-brun); }
.palier.gagne { background: linear-gradient(180deg, #fff2bd, #f1d27a); }
.palier.prochain { border-color: var(--cramoisi1); box-shadow: 0 4px 0 var(--cramoisi2), 0 0 0 3px var(--cr-or2), 0 8px 14px rgba(0,0,0,.35); }
.promo-texte span { color: #f6e7c0; }
.cadre-avatar { border-color: var(--cr-brun2); }
.perso-ligne > span, .passe-tete .sur, .voie-etiquettes .payant { color: var(--cr-or1); }
.voie-etiquettes span { color: #e8e2d2; }.teinte { border-color: var(--cr-brun2); }
.reglages-son { border-color: var(--cr-nuit); }

/* ── les arènes ── */
.panneau.arenes { width: min(1000px, 96vw); }
.cartes.arenes-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; width: 100%; }
.carte.arene { width: auto; padding: 8px 8px 10px; gap: 3px; }
.carte.arene canvas { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.carte.arene .mode { font-family: var(--gras); font-weight: 900; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cramoisi1); }
.carte.arene .desc { font-size: .72rem; line-height: 1.25; color: var(--cr-encre2); }
.carte.arene.choisie { border-color: var(--cr-or3); box-shadow: 0 4px 0 var(--cr-or3), 0 0 0 3px var(--cr-or2), 0 8px 14px rgba(0,0,0,.35); }
@media (max-height: 600px) {
  .panneau h2, .panneau > h2, .panneau.court h2 { margin: -12px auto 2px; padding: 7px 22px 11px; }
  .carte.arene .desc { display: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .6rem; line-height: 1.25; }
}

/* ═════════ la rareté (15/10/2026) ═════════ */
.carte-tenue .rarete { position: absolute; top: 0; left: 0; right: 0; font-style: normal; font-size: 0; }
.carte-tenue[data-rarete=commun] .rarete { background: #8e97a3; }
.carte-tenue[data-rarete=rare] .rarete { background: linear-gradient(90deg, #3a8ae8, #5ab0ff); }
.carte-tenue[data-rarete=epique] .rarete { background: linear-gradient(90deg, #8a3ae8, #c070ff); }
.carte-tenue[data-rarete=legendaire] .rarete { background: linear-gradient(90deg, #ff9a1a, #ffe06a, #ff9a1a); }
.carte-tenue[data-rarete=rare] { border-color: #2a5fb0; box-shadow: 0 4px 0 #2a5fb0, 0 8px 14px rgba(0,0,0,.35); }
.carte-tenue[data-rarete=epique] { border-color: #6a2ab0; box-shadow: 0 4px 0 #6a2ab0, 0 8px 14px rgba(0,0,0,.35); }
.carte-tenue[data-rarete=legendaire] { border-color: #b06a00; box-shadow: 0 4px 0 #b06a00, 0 0 12px rgba(255,200,80,.45), 0 8px 14px rgba(0,0,0,.35); }
.carte-tenue.portee[data-rarete] { box-shadow: 0 4px 0 var(--cr-or3), 0 0 0 3px var(--cr-or2), 0 8px 14px rgba(0,0,0,.35); }
.carte-tenue[data-rarete]::after { position: absolute; top: 8px; right: 6px; font-family: var(--gras); font-weight: 900; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 2px 5px; border-radius: 6px; background: rgba(0,0,0,.55); }
.carte-tenue[data-rarete=legendaire]::after { background: linear-gradient(180deg, #ffd24a, #d9951e); color: #3a2300; }
.carte-tenue[data-rarete=epique]::after { background: linear-gradient(180deg, #a060ff, #6a2ab0); }
.carte-tenue[data-rarete=rare]::after { background: linear-gradient(180deg, #5ab0ff, #2a5fb0); }
.compose-tete { flex-direction: row !important; justify-content: space-between; align-items: center !important; }
.compose-tete > span { font-size: .8rem; color: var(--cr-or1); }

/* ═════════ VERSUS v2 : lignes de vitesse, niveau, éclat ; et le COMPTE À REBOURS (15/10/2026) ═════════ */
.vs-lignes { position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(104deg, transparent 0 18px, rgba(255,255,255,.07) 18px 20px, transparent 20px 46px); }
#versus.entre .vs-lignes { animation: vs-lignes .9s .2s linear infinite, vs-lignes-in .3s .2s forwards; }
@keyframes vs-lignes { from { background-position: 0 0; } to { background-position: 140px 0; } }
@keyframes vs-lignes-in { to { opacity: 1; } }
.vs-carton { position: relative; overflow: hidden; border: 3px solid var(--cr-or3, #6b4408); background: linear-gradient(180deg, rgba(60,30,10,.85), rgba(20,10,4,.9)); box-shadow: inset 0 0 0 2px var(--cr-or2, #e0a827), 0 8px 0 rgba(0,0,0,.5); padding: 8px 26px; }
.vs-carton::after { content: ""; position: absolute; top: -60%; left: -40%; width: 40%; height: 220%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); opacity: 0; }
#versus.claque .vs-carton::after { animation: vs-brille .7s .25s ease-out forwards; }
@keyframes vs-brille { from { left: -40%; opacity: 1; } to { left: 120%; opacity: 0; } }
.vs-niveau { font-style: normal; font-family: var(--gras); font-weight: 900; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #3a2300; background: linear-gradient(180deg, #ffe96a, #e0a827); border-radius: 999px; padding: 2px 10px; margin-bottom: 2px; }
.vs-niveau:empty { display: none; }
#versus .vs-cote canvas { width: min(40vh, 34vw); height: min(40vh, 34vw); }
#compte-rebours { position: fixed; inset: 0; z-index: 29; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#compte-rebours b {
  font-family: var(--gras); font-weight: 900; font-size: clamp(6rem, 30vh, 14rem); line-height: 1; letter-spacing: -.02em; color: #ffe96a;
  -webkit-text-stroke: 4px #3a2300; text-shadow: 0 8px 0 #3a2300, 0 0 40px rgba(255,200,60,.6), 0 0 90px rgba(255,120,30,.45);
  opacity: 0;
}
#compte-rebours.pop b { animation: cr-pop .7s linear forwards; will-change: transform, opacity; }
#compte-rebours.cri b { font-size: clamp(3rem, 16vh, 8rem); color: #fff; -webkit-text-stroke: 4px #8a1010; text-shadow: 0 6px 0 #4a0808, 0 0 40px rgba(255,60,40,.8); letter-spacing: .04em; }
#compte-rebours.cri.pop b { animation: cr-cri .7s linear forwards; }
#compte-rebours::before { content: ""; position: absolute; width: 36vh; height: 36vh; border-radius: 50%; border: 6px solid rgba(255,233,106,.7); opacity: 0; }
#compte-rebours.pop::before { animation: cr-onde .7s ease-out forwards; }
@keyframes cr-cri { 0% { opacity: 0; transform: scale(2.4); } 30% { opacity: 1; transform: scale(.95); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes cr-onde { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }

/* ═════════ les rangs et le classement (15/10/2026) ═════════ */
.profil-rang { --rang: #b87333; display: inline-flex; align-items: center; gap: 5px; width: max-content; font-family: var(--gras); font-weight: 900; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rang); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.profil-rang::before { content: ""; width: 9px; height: 11px; background: var(--rang); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.carte-rang { grid-template-columns: 56px 1fr auto; }
.rang-ecu { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.rang-ecu i { width: 40px; height: 48px; background: linear-gradient(180deg, #ffe96a, #e0a827); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); }
.rang-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rang-texte b { font-family: var(--gras); font-weight: 900; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.rang-texte small { font-family: var(--corps); font-size: .74rem; color: #efe2c4; }
.rang-texte .profil-xp.grande { width: 100%; max-width: 320px; }
.carte-rang button { padding: 10px 16px; font-size: .8rem; }
.classement-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: auto; text-align: left; }
.classement-liste li { display: grid; align-items: center; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); font-family: var(--corps); font-weight: 700; cursor: pointer; grid-template-columns: 30px 30px 1fr auto 40px 56px; padding: 4px 10px 4px 6px; gap: 8px; border-radius: 9px; font-size: .8rem; min-height: 0; }
.classement-liste li.note { display: block; background: none; border: none; color: #efe2c4; font-weight: 500; text-align: center; }
.classement-liste li.moi { border-color: var(--cr-or3); box-shadow: 0 0 0 2px var(--cr-or2); }
.classement-liste .place { font-family: var(--gras); font-weight: 900; color: var(--cr-encre2); }
.classement-liste li:nth-child(1) .place { color: #c08a00; } .classement-liste li:nth-child(2) .place { color: #7c8390; } .classement-liste li:nth-child(3) .place { color: #a0622c; }
.classement-liste .pseudo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement-liste .rang { font-family: var(--gras); font-weight: 900; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.classement-liste .pts { text-align: right; font-family: var(--gras); font-weight: 900; color: var(--cr-encre2); }
.vs-rang { font-style: normal; font-family: var(--gras); font-weight: 900; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.6); margin-top: 2px; }
.vs-rang:empty { display: none; }
/* le chiffre du compte à rebours touche à 30 % : c'est là que le tic part */
@keyframes cr-pop { 0% { opacity: 0; transform: scale(3) rotate(-10deg); } 30% { opacity: 1; transform: scale(.92) rotate(2deg); } 50% { opacity: 1; transform: scale(1) rotate(0); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@media (max-height: 600px) { .rang-ecu { width: 40px; height: 40px; } .rang-ecu i { width: 30px; height: 36px; } .rang-texte b { font-size: .95rem; } }

/* ═════════ le classement mondial et les fiches (15/10/2026) ═════════ */
.classement-moi { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.25); border: 2px solid var(--cr-nuit); font-family: var(--corps); font-size: .84rem; color: #efe2c4; text-align: center; }
.classement-moi:empty { display: none; }
.classement-moi b { color: var(--cr-or1); font-family: var(--gras); }
@media (hover: hover) { .classement-liste li:hover { filter: brightness(1.04); } }
.panneau.fiche { width: min(560px, 94vw); }
.fiche-rang { font-family: var(--gras); font-weight: 900; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.fiche-titre { font-family: var(--corps); font-size: .78rem; color: #efe2c4; }
.fiche-grille { grid-template-columns: repeat(4, 1fr); }
.fiche-grille .note { grid-column: 1 / -1; }

/* le classement et la fiche passent devant les stats */
#classement { z-index: 22; }
#fiche { z-index: 23; }
#pseudo { z-index: 24; }
.panneau.pseudo input { font-family: var(--corps); font-size: 1.05rem; padding: 10px 14px; border-radius: 10px; }

/* ═════════ le profil, le rang près du héros (15/10/2026) ═════════ */
#profil { z-index: 21; }
.profil-p-titre { font-family: var(--corps); font-weight: 600; font-size: .82rem; color: var(--cr-or1); }
.profil-p-niveau { font-family: var(--corps); font-size: .8rem; color: #efe2c4; }
.profil-p-rang { font-family: var(--gras); font-weight: 900; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.6); margin-top: 4px; }
 .profil-boutons button { flex: 1; min-width: 120px; font-size: .78rem; padding: 10px 8px; }
.heros-rang { --rang: #b87333; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; border-radius: 999px; background: rgba(0,0,0,.55); border: 2px solid var(--rang); font-family: var(--gras); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--rang); text-shadow: 0 1px 0 rgba(0,0,0,.6); -webkit-appearance: none; appearance: none; }
.heros-rang::before { content: ""; width: 9px; height: 11px; background: var(--rang); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.heros-rang:empty { display: none; }

/* ═════════ textes propres sur les fonds clairs (plus d'ombre sale), le salon privé (15/10/2026) ═════════ */
.mode-carte, .mode-carte *, .pastille, .pastille *, .carte-tenue, .carte-tenue *, .carte, .carte *, .stat-carte, .stat-carte *, .palier, .palier *, .classement-liste li, .classement-liste li *, .place, .place * { text-shadow: none; }
.mode-desc { color: var(--cr-encre2); font-weight: 700; }
.panneau.salon-prive { width: min(820px, 96vw); align-items: stretch; }
.salon-code { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(180deg, var(--cramoisi1), var(--cramoisi2)); border: 3px solid var(--cr-or3); box-shadow: inset 0 0 0 2px var(--cr-or2); }
.salon-code > span { font-family: var(--gras); font-weight: 900; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #f6e7c0; }
.salon-code > b { font-family: var(--gras); font-weight: 900; font-size: 2.4rem; letter-spacing: .3em; margin-left: .3em; color: var(--cr-or1); text-shadow: 0 3px 0 #3a0608; line-height: 1.1; }
.salon-code > small { font-family: var(--corps); font-size: .72rem; color: #f6e7c0; text-align: center; }
.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.place { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 14px; min-height: 120px; justify-content: center;
  background: linear-gradient(180deg, #fbf1d6, var(--cr-creme) 60%, var(--cr-creme2)); border: 3px solid var(--cr-brun2); box-shadow: 0 4px 0 var(--cr-brun2), 0 8px 14px rgba(0,0,0,.35); color: var(--cr-encre); }
.place canvas { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); border: 2px solid var(--cr-brun); }
.place b { font-family: var(--gras); font-weight: 900; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.place small { font-family: var(--gras); font-weight: 900; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-encre2); }
.place.moi { border-color: var(--cr-or3); box-shadow: 0 4px 0 var(--cr-or3), 0 0 0 3px var(--cr-or2), 0 8px 14px rgba(0,0,0,.35); }
.place.libre { background: rgba(255,255,255,.06); border: 3px dashed rgba(255,230,170,.4); box-shadow: none; color: #efe2c4; }
.place.libre canvas { background: rgba(0,0,0,.2); border-color: rgba(255,230,170,.25); }
.place.libre small { color: #d9c48f; }
.place.bientot { background: rgba(0,0,0,.25); border: 3px solid rgba(0,0,0,.35); box-shadow: none; color: #9a8c78; }
.place.bientot canvas { background: rgba(0,0,0,.25); border-color: rgba(0,0,0,.3); opacity: .5; }
.place.bientot small { color: #9a8c78; }
.salon-actions { align-items: stretch; }
.salon-actions input { flex: 1; min-width: 90px; text-align: center; font-family: var(--gras); font-weight: 900; font-size: 1.1rem; letter-spacing: .3em; text-transform: uppercase; }
#abandon { z-index: 26; }
@media (max-height: 600px) { .place { min-height: 96px; padding: 6px 4px 6px; } .place canvas { width: 48px; height: 48px; } .salon-code > b { font-size: 1.7rem; } .salon-code > small { display: none; } .panneau.salon-prive { gap: 8px; } }
/* la place du joueur : parchemin doré, texte sombre ; quatre modes sur une rangée */
.place.moi { background: linear-gradient(180deg, #fff2bd, #f1d27a); color: var(--cr-encre); }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); width: 100%; }
.panneau.modes .carte { width: auto; }
@media (max-height: 600px) { .cartes { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

/* le salon blanc : des textes sombres */
#menu[data-ambiance=blanc] .logo .n1 { color: #2a2a35; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
#menu[data-ambiance=blanc] .logo .n2 { color: #b8860b; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
#menu[data-ambiance=blanc] .profil-stat, #menu[data-ambiance=blanc] .bas .droits, #menu[data-ambiance=blanc] .bas .droits a { color: #4a5060; opacity: 1; }
#menu[data-ambiance=blanc] .profil-stat b, #menu[data-ambiance=blanc] .bas .saison { color: #b8860b; }

/* ═════════ les modes, par familles (15/10/2026) ═════════ */
.panneau.modes { align-items: stretch; }
.carte.classe { border-color: var(--cr-or3); box-shadow: 0 4px 0 var(--cr-or3), 0 0 0 3px rgba(224,168,39,.35), 0 8px 14px rgba(0,0,0,.35); }
.carte.classe .nom { color: #8a5200; }
.panneau.modes > button { align-self: center; width: min(300px, 100%); }
@media (max-height: 600px) { .panneau.modes { gap: 6px; padding: 10px 14px; } .panneau.modes .carte { width: 138px; padding: 6px 6px 8px; gap: 2px; } .panneau.modes .carte canvas { aspect-ratio: 16 / 9; width: 100%; height: auto; } .carte .desc { display: none; } }

/* ═════════ prêt en vert, arène du salon, missions et récompense du jour (15/10/2026) ═════════ */
.place.pret { border-color: #1f6e28; box-shadow: 0 4px 0 #1f6e28, 0 0 0 3px #6fd43f, 0 8px 14px rgba(0,0,0,.35); background: linear-gradient(180deg, #e9ffd6, #bfeea0); }
.place.pret small { color: #1f6e28; }
#btn-salon-pret { background: linear-gradient(180deg, #ffe27a, #d9a12e 55%, #b07a10); border-color: #6b4408; color: #3a2300; }
#btn-salon-pret.actif { background: linear-gradient(180deg, #9ff06a, #4cbf2a 55%, #35982a); border-color: #22741a; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); box-shadow: 0 6px 0 #22741a, 0 12px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.5); }
.salon-regle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 2px solid var(--cr-nuit); font-family: var(--corps); font-size: .84rem; color: #efe2c4; }
.salon-regle b { font-family: var(--gras); }
.panneau.missions { width: min(640px, 94vw); align-items: stretch; }
.missions-liste { display: flex; flex-direction: column; gap: 8px; }
.mission { display: grid; grid-template-columns: 1fr 140px 56px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 3px solid var(--cr-brun2); color: var(--cr-encre); }
.mission-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mission-texte b { font-family: var(--gras); font-weight: 900; font-size: .88rem; }
.mission-texte small { font-family: var(--corps); font-size: .72rem; color: var(--cr-encre2); }
.mission-barre { height: 10px; border-radius: 5px; background: rgba(0,0,0,.18); overflow: hidden; border: 1px solid rgba(0,0,0,.25); }
.mission-barre i { display: block; height: 100%; background: linear-gradient(180deg, #ffe96a, #e0a827); }
.mission-n { font-family: var(--gras); font-weight: 900; font-size: .84rem; text-align: right; }
.mission.faite { background: linear-gradient(180deg, #e9ffd6, #bfeea0); border-color: #1f6e28; }
.mission.faite .mission-barre i { background: linear-gradient(180deg, #9ff06a, #4cbf2a); }
.mission.faite .mission-n { color: #1f6e28; }
.calendrier-cadre { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 2px solid var(--cr-nuit); }
.calendrier-cadre .sur { font-family: var(--gras); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-or1); }
.calendrier-cadre small { font-family: var(--corps); font-size: .76rem; color: #efe2c4; }
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendrier .jour { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 10px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); }
.calendrier .jour b { font-family: var(--gras); font-size: .66rem; letter-spacing: .08em; }
.calendrier .jour span { font-family: var(--gras); font-weight: 900; font-size: .8rem; color: #6b4408; }
.calendrier .jour.pris { background: linear-gradient(180deg, #e9ffd6, #bfeea0); border-color: #1f6e28; }
.calendrier .jour.pris span::after { content: " ✓"; color: #1f6e28; }
.calendrier .jour.courant { border-color: var(--cr-or3); box-shadow: 0 0 0 3px var(--cr-or2); }
.panneau.quotidien { align-items: center; width: min(560px, 94vw); }
.quotidien-jour { font-family: var(--gras); font-weight: 900; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-or1); }
.quotidien-pieces { display: flex; align-items: center; gap: 8px; font-family: var(--gras); font-weight: 900; font-size: 2rem; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.quotidien-pieces i.piece { width: 28px; height: 28px; }
.quotidien-pieces b { color: var(--cr-or1); }
#quotidien { z-index: 25; }
#missions { z-index: 21; }
@media (max-height: 600px) { .mission { grid-template-columns: 1fr 100px 48px; padding: 5px 10px; } .mission-texte b { font-size: .76rem; } .calendrier .jour { padding: 3px 2px; } .calendrier .jour span { font-size: .66rem; } .panneau.missions { gap: 8px; } }

.mission-texte b, .calendrier .jour b, .salon-regle b { color: var(--cr-encre); }
.salon-regle b { color: var(--cr-or1); }
#quotidien-semaine { width: 100%; }
#quotidien-semaine .jour.courant { background: linear-gradient(180deg, #fff2bd, #f1d27a); transform: scale(1.08); }

/* ═════════ LA REVUE DES MENUS (15/10/2026 au soir) ═════════ */
/* une croix pour fermer, qui reste visible quand le panneau défile */
.panneau { position: relative; }
.croix-cadre { position: sticky; top: 4px; height: 0; z-index: 8; overflow: visible; align-self: stretch; margin: 0 0 -14px; pointer-events: none; }
.btn-croix {
  pointer-events: auto; position: absolute; right: -12px; top: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1; letter-spacing: 0;
  height: max(38px, calc(32px / var(--ech, 1))) !important;
}
@media (hover: hover) { .btn-croix:hover { filter: brightness(1.1); } }
.btn-croix:active { transform: translateY(2px); }
@media (max-height: 600px) { .btn-croix { right: -10px; } }

/* le son : deux voies suffisent, plus de gros bouton en doublon ; les touches seulement au clavier */
#btn-son-salon, #btn-son { display: none !important; }
@media (pointer: coarse) { .clavier-seulement { display: none !important; } }

/* le salon : la carte du mode se touche */
.mode-changer { display: block; margin-top: 4px; font-family: var(--gras); font-weight: 900; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cramoisi1); }
@media (max-height: 600px) { .mode-changer { font-size: .54rem; margin-top: 2px; } }

/* le passe et la boutique : un ruban en haut, un grand titre à côté de la barre */
.passe-grand { display: block; font-family: var(--gras); font-weight: 900; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.palier { position: relative; }
.palier .etiquette { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: linear-gradient(180deg, var(--cramoisi1), var(--cramoisi2)); border: 2px solid var(--cr-or3); color: var(--cr-or1); font-family: var(--gras); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; z-index: 2; }
.palier .recompense.gagne::after { content: "✓"; position: absolute; top: 2px; right: 6px; color: #1f6e28; font-family: var(--gras); font-weight: 900; font-size: .78rem; }
.paliers { padding-top: 14px; }

/* le compte : Google d'abord, deux boutons égaux */
.compte-boutons button { flex: 1; white-space: nowrap; padding: 10px 6px; font-size: .78rem; letter-spacing: .04em; }

/* le casier : filtres, compteur, l'aperçu à côté de la grille même sur un téléphone */
.filtres { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtres .compteur { margin-left: auto; font-family: var(--gras); font-weight: 900; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-or1); }
.perso-porte { font-weight: 700; line-height: 1.3; }
.carte-tenue { position: relative; }
.badge-portee { position: absolute; padding: 2px 7px; border-radius: 999px 0 0 999px; background: linear-gradient(180deg, #fff0a0, #ffd24a 40%, #d9951e); border: 2px solid var(--cr-or3); border-right: none; color: #3a2300; font-style: normal; font-family: var(--gras); font-weight: 900; font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 2px 0 var(--cr-or3); top: auto; right: -4px; bottom: 46px; display: none !important; }
@media (max-width: 700px), (max-height: 600px) {
  .perso-droite { order: 0; gap: 6px; }
  .onglets button { padding: 7px 4px; font-size: .64rem; }
  .filtres .pastille { padding: 4px 9px; font-size: .62rem; }
  .filtres .compteur { font-size: .6rem; }
}
.profil-identite .perso-ligne { flex-direction: row; flex-wrap: wrap; }
.profil-identite .perso-ligne > span { min-width: 56px; }
.profil-identite input { flex: 1; min-width: 140px; max-width: 260px; }

/* le choix du mode : sur un téléphone, les groupes côte à côte, tout tient sur l'écran */
@media (max-height: 600px) {
  .panneau.modes .carte .nom { font-size: .68rem; margin-top: 2px; }
  .panneau.modes .carte .desc { display: none; }
  .panneau.modes .carte .difficulte { margin-top: 3px; flex-wrap: nowrap; gap: 2px; }
  .panneau.modes .carte .difficulte button { letter-spacing: 0; }
  .panneau.modes h3 { margin-bottom: 4px; }
}

/* l'aide : six points, une image chacun */
.panneau.aide { width: min(900px, 96vw); }
.aide-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aide-point { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto 1fr; gap: 2px 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 3px solid var(--cr-brun2); box-shadow: 0 3px 0 var(--cr-brun2); color: var(--cr-encre); text-align: left; }
.aide-point canvas { grid-row: 1 / 3; width: 54px; height: 54px; image-rendering: pixelated; border-radius: 8px; background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); border: 2px solid var(--cr-brun); }
.aide-point > b { font-family: var(--gras); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--cr-encre); }
.aide-point p { margin: 0; line-height: 1.35; color: var(--cr-encre2); }
.aide-point p b { color: var(--cramoisi1); }
.aide-clavier h3 { margin: 0 0 4px; }
@media (max-height: 600px) {
  .aide-points { gap: 6px; }
  .aide-point { padding: 6px 8px; grid-template-columns: 44px 1fr; gap: 1px 8px; }
  .aide-point canvas { width: 44px; height: 44px; }
 .aide-point p { line-height: 1.3; }
}
@media (max-width: 640px) { .aide-points { grid-template-columns: 1fr 1fr; } }

/* les tenues à deux : la grille du casier dans chaque vitrine */
.panneau.tenues { width: min(960px, 96vw); }
.vitrine { align-items: stretch; }
.vitrine-corps { display: flex; gap: 10px; align-items: flex-start; width: 100%; }
.vitrine .cadre { flex: 0 0 auto; }
.vitrine-choix { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vitrine .titre-tenue { text-align: left; }
.vitrine .note-tenue { text-align: left; }
.grille-tenues.mini { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; max-height: 132px; padding: 4px; }
.carte-mini { position: relative; padding: 3px 2px 2px; border-radius: 8px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); box-shadow: 0 2px 0 var(--cr-brun2); cursor: pointer; }
.carte-mini canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.carte-mini::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 5px 5px 0 0; background: #8e97a3; }
.carte-mini[data-rarete=rare]::before { background: linear-gradient(90deg, #3a8ae8, #5ab0ff); }
.carte-mini[data-rarete=epique]::before { background: linear-gradient(90deg, #8a3ae8, #c070ff); }
.carte-mini[data-rarete=legendaire]::before { background: linear-gradient(90deg, #ff9a1a, #ffe06a, #ff9a1a); }
.carte-mini.portee { border-color: var(--cr-or3); box-shadow: 0 0 0 3px var(--cr-or2), 0 2px 0 var(--cr-or3); }
.carte-mini.prise { opacity: .35; cursor: not-allowed; }
@media (hover: hover) { .carte-mini:hover { filter: brightness(1.05); } }
@media (max-height: 600px) {
  .panneau.tenues { gap: 6px; padding: 12px 16px; }
  .vitrine .cadre canvas { width: 72px; height: 72px; }
  .vitrine .note-tenue { display: none; }
  .vitrines { gap: 12px; }
}

/* le salon privé : ma place est dorée, son texte est sombre */
.place.moi small { color: #6b4408 !important; }

/* les arènes : cinq cartes sur une ligne, et un mot sur chacune */
@media (max-height: 600px) {
  .cartes.arenes-cartes { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
  .carte.arene .nom { font-size: .74rem; }
}

/* les missions : le cadeau se prend d'ici */
#btn-missions-prendre { align-self: center; width: min(360px, 100%); }
#calendrier-etat { color: #bfeea0; font-weight: 700; }
#calendrier-etat:empty { display: none; }

/* retouches après captures */
@media (max-height: 600px) {
  .grille-tenues.mini { max-height: 128px; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
}
.filtres { padding-right: 26px; }
@media (pointer: coarse) { .vitrine .fleche { display: none; } }

/* ═════════ le casier lisible, l'économie, le vrai bois (15/10 au soir, bis) ═════════ */
/* une tenue qu'on n'a pas encore se voit quand même en couleur : on sait pour quoi on joue */
.carte-tenue.verrou canvas { filter: none; opacity: .92; }
.carte-tenue.verrou::after { position: absolute; padding: 0; line-height: 1; opacity: .85; }
.carte-tenue.verrou { background: linear-gradient(180deg, #e4dac2, #cdbf9f); }

/* le vrai bois : une image fabriquée au démarrage (js/bois.js), en planches, avec le fil, les nœuds et les clous */
.panneau svg, .panneau img { image-rendering: auto; }

/* ═════════ la DA du salon : cuir, bronze et or (15/10 au soir, ter) ═════════ */
.logo .n1, .logo .n2 { color: var(--cr-or1); text-shadow: 0 2px 0 #3a0608, 0 0 2px #000, 0 6px 12px rgba(0,0,0,.7); }

/* le classement, à gauche de JOUER */
.classement-salon { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 66px !important;
}
@media (hover: hover) { .classement-salon:hover { background: linear-gradient(180deg, #f0c470, #c0842e 55%, #8a5416); border-color: #3a2208; color: #2a1604; } }
.classement-salon:active { transform: translateY(3px); box-shadow: 0 2px 0 #3a2208; }
.classement-salon svg { width: 24px; height: 24px; }
.classement-salon span { font-family: var(--gras); font-weight: 900; text-transform: uppercase; line-height: 1.1; }
.classement-salon small { font-family: var(--corps); font-weight: 700; color: #4a2a08; line-height: 1.1; }
@media (max-height: 600px) { .classement-salon svg { width: 20px; height: 20px; } }
/* la recherche d'un adversaire */
.salon-recherche { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.28); border: 2px solid var(--cr-nuit); color: #efe2c4; }
.salon-recherche b { display: block; font-family: var(--gras); font-weight: 900; font-size: .9rem; color: var(--cr-or1); }
.salon-recherche small { font-family: var(--corps); font-weight: 700; font-size: .78rem; color: #efe2c4; }
.sablier { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 4px solid rgba(255,230,170,.25); border-top-color: var(--cr-or1); animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.classement-salon { padding: 4px 1px; }

/* ═════════ casier, passe, modes, réglages (16/10/2026) ═════════ */
/* le casier : de grandes cartes, la tenue entière */
.grille-tenues { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
.carte-tenue canvas { width: 92px; height: 92px; }
.carte-tenue.regardee { border-color: var(--cr-bleu2); box-shadow: 0 0 0 3px var(--cr-bleu1), 0 4px 0 var(--cr-bleu3); }
.perso-apercu-note { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.3); border: 2px solid var(--cr-bleu3); }
.perso-apercu-note b { font-family: var(--gras); font-weight: 900; font-size: .74rem; color: #cfe3ff; }
.perso-apercu-note small { font-family: var(--corps); font-weight: 700; font-size: .66rem; color: var(--cr-or1); }
.perso-apercu-note .pastille { padding: 5px 10px; font-size: .62rem; }
.teinte.verrou { cursor: pointer; opacity: .55; position: relative; }
.teinte.verrou::after { content: "🔒"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .6rem; filter: grayscale(1); }
@media (hover: hover) { .teinte.verrou:hover { opacity: .85; } }

/* le passe : lisible, moins enfantin */
.passe-tete .sur { color: var(--cr-or1); }
.passe-progres b { color: #fff; font-size: 1.1rem; }
.passe-progres small { color: #efe2c4; font-weight: 700; }
.voie-etiquettes span { font-family: var(--gras); font-weight: 900; letter-spacing: .16em; }
.voie-etiquettes .gratuit { background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); color: var(--cr-encre); border: 2px solid var(--cr-brun2); }
.voie-etiquettes .payant { background: linear-gradient(180deg, #fff0a0, #ffd24a 40%, #d9951e); color: #3a2300; border: 2px solid var(--cr-or3); }
.palier { width: 124px; gap: 6px; padding: 10px 6px 8px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 3px solid var(--cr-brun2); box-shadow: 0 4px 0 var(--cr-brun2), 0 8px 14px rgba(0,0,0,.3); }
.palier > b { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cr-encre); color: #fff0c8; font-size: .76rem; letter-spacing: 0; }
.palier.gagne > b { background: #1f6e28; }
.palier.prochain > b { background: var(--cramoisi1); }
.palier canvas { width: 60px; height: 60px; border-radius: 8px; }
.palier .recompense { padding: 6px 2px 5px; border-radius: 9px; }
.palier .recompense span { font-size: .7rem; line-height: 1.2; color: var(--cr-encre); font-weight: 700; }
.palier .recompense.verrou span { color: var(--cr-encre2); }
.palier .recompense.gratuit { background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12); }
.palier .recompense.payant { background: linear-gradient(180deg, rgba(255,213,74,.35), rgba(255,213,74,.1)); border: 1px solid rgba(160,110,20,.45); }
.palier .verrou-icone { font-size: .74rem; opacity: 1; }
@media (max-width: 700px), (max-height: 600px) { .palier { width: 104px; } .palier canvas { width: 46px; height: 46px; } .palier .recompense span { font-size: .62rem; } }

/* les modes : cinq cartes sur une ligne, une étiquette chacune */
.panneau.modes { width: min(1040px, 97vw); }
.modes-ligne { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; padding-top: 8px; }
.modes-ligne .carte { position: relative; width: auto; padding: 10px 10px 12px; gap: 4px; }
.modes-ligne .carte canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.modes-ligne .carte .nom { font-size: .92rem; }
.modes-ligne .carte .desc { font-size: .72rem; line-height: 1.3; min-height: 2.6em; flex: 1; }
.modes-ligne .etiquette { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; font-style: normal; font-family: var(--gras); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; z-index: 2; border: 2px solid var(--cr-or3); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.modes-ligne .etiquette.classe { background: linear-gradient(180deg, var(--cramoisi1), var(--cramoisi2)); color: var(--cr-or1); }
.modes-ligne .etiquette.fun { background: linear-gradient(180deg, #2d6fd3, #1c4fa8); color: #fff; border-color: var(--cr-nuit); }
.modes-ligne .etiquette.dojo { background: linear-gradient(180deg, #4cbf2a, #1f6e28); color: #fff; border-color: #0f4a16; }
.modes-ligne .carte.classe { background: linear-gradient(180deg, #fff6dc, #f6e5b8 60%, #ecd49a); }
.modes-ligne .carte.choisie { transform: translateY(-4px); }
@media (max-height: 600px) {
  .modes-ligne { gap: 8px; }
  .modes-ligne .carte { padding: 6px 6px 8px; gap: 2px; }
  .modes-ligne .carte .nom { font-size: .7rem; }
  .modes-ligne .carte .desc { display: none; }
}

/* les réglages */
.panneau.reglages { width: min(560px, 94vw); align-items: stretch; }
.reglages-groupe { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 12px; background: rgba(0,0,0,.22); border: 2px solid var(--cr-nuit); }
.reglages-groupe h3 { margin: 0; }
.reglages-groupe .reglages-son { padding: 0; border: none; background: none; }
.reglage-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reglage-ligne > span { font-family: var(--gras); font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #efe2c4; }
.reglage-ligne .pastille { padding: 6px 12px; font-size: .68rem; min-width: 64px; }
.reglage-ligne .pastilles { gap: 4px; }
.reglages-groupe .rangee button { flex: 1; }
#reglages-etat:empty { display: none; }
.tactile-seulement { display: none; }
body.tactile-present .tactile-seulement { display: flex; }
#fps { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 50; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #9ff06a; font-family: var(--corps); font-weight: 700; font-size: .72rem; pointer-events: none; }

.modes-ligne .carte .difficulte { flex-wrap: nowrap; gap: 3px; margin-top: 6px; }
.modes-ligne .carte .difficulte button { letter-spacing: .02em; }

.profil-compte { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.22); border: 2px solid var(--cr-nuit); display: flex; flex-direction: column; gap: 8px; }
.profil-compte .note { margin: 0; }
.profil-compte .gros { align-self: center; width: min(420px, 100%); }

/* ═════════ le casier élastique (16/10) : la grille prend la place qui reste, jamais une rangée coupée ═════════ */
.panneau.perso { overflow: hidden; }
.grille-tenues, #perso-compose { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 700px), (max-height: 600px) {
  .panneau.perso { padding: 10px 12px 10px; gap: 8px; }
  .grille-tenues { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: none; }
  .carte-tenue { padding: 8px 4px 6px; gap: 2px; }
  .carte-tenue canvas { width: 62px; height: 62px; }
  .carte-tenue .nom { font-size: .64rem; line-height: 1.1; }
  .carte-tenue small { font-size: .58rem; }
  .badge-portee { bottom: 34px; font-size: .46rem; padding: 1px 5px; }
  .carte-tenue .rarete { font-size: 0; }
  .perso-corps { grid-template-columns: 96px 1fr; gap: 8px; }
  .cadre-avatar { width: 92px; height: 92px; } .cadre-avatar canvas { width: 88px; height: 88px; }
  .panneau.perso .rangee .gros { padding: 9px 12px; font-size: .85rem; }
}

/* une grille à hauteur bornée : les rangées gardent leur taille de contenu (sinon elles s'écrasent) */
@media (max-height: 600px) { #btn-perso-retour { display: none; } .panneau.perso > .rangee { display: none; } }

/* ═════════ l'échelle du menu (16/10/2026) : voir regleEchelle() dans js/principal.js ═════════ */
#menu .haut, #menu .milieu, #menu .bas, .voile > .panneau, #versus .vs-carton, #fps { zoom: var(--ech, 1); }
/* le zoom réduit les vh : on les compense, le panneau garde 90 % de l'écran réel */
.voile > .panneau { max-height: calc(90vh / var(--ech, 1)); }
.voile { padding: calc(22px * var(--ech, 1)); }

/* les packs de pièces d'or */
.panneau.achat-pieces { width: min(760px, 96vw); }
.pack-bonus { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; font-style: normal; font-family: var(--gras); font-weight: 900; font-size: .6rem; letter-spacing: .06em; background: linear-gradient(180deg, var(--cramoisi1), var(--cramoisi2)); color: var(--cr-or1); border: 2px solid var(--cr-or3); }
@media (max-height: 600px) { .panneau.achat-pieces .note { display: none; } }

/* (19/10/2026) les champs */
/* le jeu interdit la sélection partout (les doigts) ; dans un champ, il faut pouvoir sélectionner et coller (un mot
   de passe, un pseudo) — iPhone compris */
input, textarea { -webkit-user-select: text; user-select: text; }

/* ═════════ (23/10/2026) L'ENCOCHE DE LA CAMÉRA, COMME SUR BRAWL STARS (js/encoche.js) ═════════
   Couché, s'il y a une encoche d'un côté, le corps de la page devient le cadre du jeu : il s'arrête à l'encoche, et le
   fond noir de la page fait une bande noire du haut en bas de ce côté-là. Son transform recale sur lui tout ce qui est
   en position fixe. Les marges d'encoche du reste du CSS tombent à zéro (--marge-g / --marge-d) : le cadre s'en charge. */
:root {
  /* (le navigateur ; Capacitor ; et la mesure faite côté Android, MainActivity.java : --cutout-g / --cutout-d) */
  --encoche-g: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px), var(--cutout-g, 0px));
  --encoche-d: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px), var(--cutout-d, 0px));
  /* (23/10/2026) hors du duel, pas de bande : les menus s'écartent eux-mêmes de la caméra */
  --marge-g: var(--encoche-g); --marge-d: var(--encoche-d);
}
html { background: #000; }
body.encoche {
  position: fixed; top: 0; bottom: 0; left: var(--bande-g, 0px); right: var(--bande-d, 0px);
  width: auto; height: auto; margin: 0; overflow: hidden; transform: translateZ(0);
  --marge-g: 0px; --marge-d: 0px;
}