/* RUIN OF BLADES — les retouches du 18/10/2026, après l'audit de l'interface.
   Chargé APRÈS css/passe.css : ce qui est ici l'emporte. Chaque règle dit pourquoi.
   (Rien n'est ajouté à interface.css ni à style.css : tout ce qui change est ici.) */

/* ── la confirmation d'achat (js/boutique.js confirmeAchat) : au-dessus de la boutique ── */
#confirme-achat { z-index: 27; }
#confirme-achat .panneau { width: min(420px, 92vw); }
#confirme-achat .note { font-size: .92rem; color: #f6e7c0; text-align: center; margin: 4px 0 8px; }
#confirme-achat .rangee { gap: 10px; }
#confirme-achat .rangee > button { flex: 1 1 0; }

/* ── les blocs « avec un compte » des missions et des statistiques (comme ceux du rang) ── */
#missions-sans-compte, #stats-sans-compte { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 4px; }
#missions-sans-compte[hidden], #stats-sans-compte[hidden], #missions-calendrier[hidden], #missions-liste[hidden], #stats .carte-rang[hidden], #stats-grille[hidden] { display: none !important; }

/* ── le profil d'un invité : l'appel au compte en tête de la colonne de droite ── */
#profil .profil-droite > #profil-sans-compte { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.22); border: 2px solid rgba(255,230,170,.25); text-align: center; }
#profil .profil-droite > #profil-sans-compte .note { margin: 0 0 8px; font-size: .82rem; }
#profil .profil-droite > #profil-sans-compte .gros { width: 100%; }
#profil .perso-ligne[hidden] { display: none !important; }
/* la croix collée en haut à droite passait sur « Compte et connexion » une fois le profil défilé :
   la colonne de droite lui laisse sa place */
@media (max-height: 600px) {
  #profil .profil-droite { padding-right: 34px; }
}

/* ── la note courte des pièces d'or : seulement là où la longue est cachée (téléphone) ── */
.panneau.achat-pieces .note.note-courte { display: none; }
@media (max-height: 600px) { .panneau.achat-pieces .note.note-courte { display: block !important; margin: 0; font-size: .74rem; text-align: center; } }

/* ── le cadre du duel : « ENTRAÎNEMENT » perdait son accent (ligne trop serrée, débord caché) ── */
.carton-hud small { line-height: 1.4; }

/* ── le passe : le type en tout petit sur chaque case (« La Foudre » aura ≠ « La Foudre » épée) ── */
#passe .palier .recompense { position: relative; }
#passe .palier .recompense .rec-type {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 1; max-width: calc(100% - 8px);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--gras); font-weight: 900; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  color: #fff; background: rgba(28,16,6,.82); border: 1px solid rgba(255,230,170,.45); pointer-events: none;
}

/* ── l'aide : la maquette du téléphone seulement sur un écran tactile (le clavier a sa section) ── */
body:not(.tactile-present) #aide .aide-tactile { display: none; }
.aide-objets h3 { margin: 0 0 8px; }
.aide-techniques .aide-note { margin: 0 0 8px; opacity: .85; font-size: .92em; }   /* (22/10/2026) */
.aide-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.aide-liste li { font-family: var(--corps); font-weight: 600; letter-spacing: 0; font-size: max(.72rem, var(--lisible, .72rem)); line-height: 1.35; color: var(--cr-encre2, #4a3420); padding: 6px 9px; border-radius: 10px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2, #ecd9ac)); border: 2px solid var(--cr-brun2, #6a4422); }
.aide-liste li b { display: block; font-family: var(--gras); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--cr-encre, #2b1d12); }
@media (max-width: 640px) { .aide-liste { grid-template-columns: 1fr; } }

/* ── le salon privé à 844×390 : le code tient sur une ligne, les places restent visibles,
   « Retour » ne passe plus par-dessus les cartes ni sur « Inviter un ami » ── */
@media (max-height: 500px) {
  #ligne .salon-code { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 5px 12px; }
  #ligne .salon-code > b { font-size: 1.5rem; }
  #ligne .salon-code > .cr-bouton { padding: 4px 12px; min-height: 0; }
  #ligne .place { min-height: 0; padding: 5px 4px; gap: 1px; }
  #ligne .place canvas, #ligne .place .plus { width: 40px; height: 40px; }
  #ligne .place .plus { font-size: 1.6rem; }
  #ligne .panneau.salon-prive { gap: 6px; }
  #ligne .panneau.salon-prive > #btn-ligne-retour { position: static; margin: 4px 0 0; box-shadow: 0 4px 0 rgba(0,0,0,.35); min-height: calc(40px / var(--ech, 1)); padding-block: 4px; }
  #ligne .etat-ligne:empty { display: none; }
}

/* ── le salon : la pièce du niveau débordait sur « Non classé » ── */
#menu .profil .avatar { margin-right: 11px; }

/* ── la pause : « Musique » et « Bruitages » lisibles ── */
#pause .reglage-son { grid-template-columns: minmax(120px, auto) 96px 1fr; }
#pause .reglage-son > span { font-size: max(1.1rem, var(--lisible, 0px)); letter-spacing: .05em; color: #fff4d6; }
#pause .reglage-son .pastille { font-size: max(.9rem, var(--lisible, 0px)); }

/* ── le choix de l'arène : la description illisible à 932×430, cachée comme sous 420 px ── */
@media (max-height: 500px) { .carte.arene .desc { display: none !important; } }

/* ── « Abandonner » touchait les bords de son bouton ── */
#abandon .rangee > button { padding-inline: 14px; letter-spacing: .02em; white-space: nowrap; }
@media (max-height: 600px) { #abandon .rangee > button { font-size: .92rem; } }

/* ── LES CIBLES AU DOIGT (iPhone) : 40 px de haut au moins. Les panneaux et le haut du salon
   sont zoomés (--ech) : on compense, comme le fait déjà interface.css ── */
@media (pointer: coarse) {
  #btn-pieces { min-height: calc(40px / var(--ech, 1)); padding-inline: 10px; }
  #menu #btn-annonces, #menu #btn-burger { width: calc(40px / var(--ech, 1)) !important; height: calc(40px / var(--ech, 1)) !important; min-height: calc(40px / var(--ech, 1)) !important; }
  .menu-burger button { min-height: calc(42px / var(--ech, 1)); }
  #perso .onglets button, #perso-filtres .pastille, #perso .teintes button, #perso .teinte { min-height: calc(40px / var(--ech, 1)); }
  #perso .teintes button, #perso .teinte { min-width: calc(40px / var(--ech, 1)); }
  .onglets-cl button { min-height: calc(40px / var(--ech, 1)); }
  #reglages .pastille, #pause .pastille { min-height: calc(40px / var(--ech, 1)); }
  #perso-pseudo { min-height: calc(40px / var(--ech, 1)); }
  #menu .bas-centre a, a.lien-confidentialite { display: inline-flex; align-items: center; min-height: calc(40px / var(--ech, 1)); padding: 0 8px; margin: calc(-12px / var(--ech, 1)) -8px; }
}

/* (18/10/2026) le pseudo du salon en capitales : « INVITÉ » perdait son accent (ligne trop serrée) */
#menu .profil-nom { line-height: 1.3; }
/* le profil d'un invité : la ligne du pseudo cachée, le cadre de l'identité vide ne se montre plus */
#profil .profil-identite:not(:has(> .perso-ligne:not([hidden]))) { display: none; }

/* ══ (18/10/2026) LES BOUTONS D'UNE MÊME RANGÉE, À LA MÊME TAILLE ══
   Dans un choix à deux (Connexion / Créer un compte, Valider / Plus tard, Retour / Combattre…),
   le bouton doré faisait 61 px de haut et son voisin 49 px, et pas la même largeur.
   Comme pour « Rester / Abandonner » : même hauteur, même largeur ; la couleur dit lequel compte. */
#compte .compte-boutons, #compte-suppression .rangee, #touches .rangee, #pseudo .rangee,
#tenues .rangee, #signaler .rangee, #rang .rangee, #ligne .salon-actions { align-items: stretch; }
#compte .compte-boutons > button, #compte-suppression .rangee > button, #touches .rangee > button, #pseudo .rangee > button,
#tenues .rangee > button, #signaler .rangee > button, #rang .rangee > button, #ligne .salon-actions > button { flex: 1 1 0; min-width: 0; padding-inline: 18px; }
/* (le doré a 22 px de marge sur les côtés, l'autre 18 : sans ça, 8 px d'écart de largeur restaient) */

/* la pause : « Reprendre » 61 px, « Touches » et « Quitter la partie » 49 px, empilés.
   Comme l'écran de fin (tous ses boutons à la même taille), ils prennent la mesure du bouton doré */
#pause .panneau > button:not(.gros):not(.btn-croix) { font-size: 1.25rem; letter-spacing: .06em; padding: 15px 22px; }


/* le salon sur PC : la pastille des pièces (42 px) plus basse que les deux boutons ronds voisins (46 px) */
@media not (pointer: coarse) {
  #menu .ronds > #btn-pieces { min-height: max(46px, calc(34px / var(--ech, 1))); }
}

/* au doigt : les petites pastilles qui restaient à 30-32 px alors que toutes les autres font 40 px
   (cadres et « Changer » du profil, raisons du signalement, barre « Revoir », « + Ajouter en ami »,
   « Créer un compte » de la boutique) ;
   « Signaler » et « Supprimer mon compte » restent des liens, mais avec une zone de 40 px */
@media (pointer: coarse) {
  #profil .pastille, #signaler .pastille, #fin-adversaire > button, button.discret.danger-texte, #btn-boutique-compte { min-height: calc(40px / var(--ech, 1)); }
  .revoir-barre .pastille { min-height: calc(40px / var(--ech, 1)); min-width: calc(40px / var(--ech, 1)); }
}
/* « + Ajouter en ami » s'étirait sur toute la rangée et poussait « Signaler » au bord : chacun sa taille */
#fin-adversaire > button { flex: 0 0 auto; }

/* ══ (18/10/2026, suite) LES PETITES AMÉLIORATIONS DEMANDÉES APRÈS LA REVUE DES BOUTONS ══ */

/* le salon en ligne sur téléphone : la croix ET un grand « Retour » pleine largeur, c'était deux fois
   la même sortie. « Retour » se cache (Échap et la croix le déclenchent toujours) ; « Annuler la
   recherche » (classe .recherche, posée par js/principal.js) reste, c'est une autre action */
@media (max-height: 500px) {
  #ligne #btn-ligne-retour.retour-double:not(.recherche) { display: none !important; }
}

/* la croix des panneaux : 36 px à l'écran, sous les 44 px d'un doigt. Une zone invisible autour */
@media (pointer: coarse) {
  .btn-croix::after { content: ''; position: absolute; inset: -8px; border-radius: 14px; }   /* (-8 depuis l'intérieur de la bordure de 3 px : ~44 px à l'écran) */
}

/* les boutons d'un choix à deux ont la même taille : le texte du bouton secondaire, resté à .9rem
   dans une case de 61 px, paraissait perdu. Un peu plus grand (le doré garde sa police plus forte) */
#compte .compte-boutons > button:not(.gros), #compte-suppression .rangee > button:not(.gros), #touches .rangee > button:not(.gros),
#pseudo .rangee > button:not(.gros), #tenues .rangee > button:not(.gros), #signaler .rangee > button:not(.gros),
#ligne .salon-actions > button:not(.gros) { font-size: 1.05rem; letter-spacing: .04em; white-space: normal; line-height: 1.1; }

/* l'écran de fin sur téléphone (deux colonnes) : « Retour au salon » seul sur sa ligne restait collé
   à gauche. Centré, à la largeur des autres */
@media (max-height: 600px) {
  .panneau.fin-panneau:has(> #fin-adversaire:not([hidden])) > #btn-fin-menu,
  .panneau.fin-panneau:not(:has(> #btn-fin-compte:not([hidden]))):not(:has(> #btn-rejouer:not([hidden]))):not(:has(> #btn-revoir:not([hidden]))) > #btn-fin-menu,
  .panneau.fin-panneau:has(> #btn-fin-compte:not([hidden])):has(> #btn-rejouer:not([hidden])):not(:has(> #btn-revoir:not([hidden]))) > #btn-fin-menu,
  .panneau.fin-panneau:has(> #btn-fin-compte:not([hidden])):not(:has(> #btn-rejouer:not([hidden]))):has(> #btn-revoir:not([hidden])) > #btn-fin-menu,
  .panneau.fin-panneau:not(:has(> #btn-fin-compte:not([hidden]))):has(> #btn-rejouer:not([hidden])):has(> #btn-revoir:not([hidden])) > #btn-fin-menu {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2);
  }
}

/* « Signaler » collé à « + Ajouter en ami » : un doigt qui vise l'un touchait l'autre.
   Sur un grand écran, il passe sous la pastille ; sur téléphone (peu de hauteur), il s'écarte,
   derrière un trait */
@media (min-height: 601px) {
  #fin-adversaire::after { content: ''; flex-basis: 100%; order: 1; }
  #fin-adversaire > #btn-fin-signaler { order: 2; margin-top: -4px; }
}
@media (max-height: 600px) {
  #fin-adversaire > #btn-fin-signaler { margin-left: 18px; position: relative; }
  #fin-adversaire > #btn-fin-signaler::before { content: ''; position: absolute; left: -15px; top: 20%; bottom: 20%; width: 2px; background: rgba(255,255,255,.25); }
}

/* la boutique : les boutons d'achat des offres de la semaine (37 px) touchaient presque le bas
   de la carte. 44 px et un peu d'air dessous (la grande carte « À la une » garde les siens) */
.cr-carte:not(.grande) { padding-bottom: 12px; }
.cr-carte:not(.grande) .cr-bouton { min-height: calc(44px / var(--ech, 1)); }

/* Paramètres : « Effacer mes données sur cet appareil » pesait autant que « Compte et connexion ».
   C'est un lien rouge, comme « Supprimer mon compte », avec 40 px à toucher ; au premier appui
   (« Sûr ? »), il redevient un vrai bouton rouge (classe .danger) */
#btn-effacer-local { min-height: calc(40px / var(--ech, 1)); align-self: center; }
#btn-effacer-local.danger-texte:not(.danger) { color: #ffb4a8 !important; }
#btn-effacer-local.danger { text-decoration: none; padding: 8px 16px; font-family: var(--gras); }
/* (« Créer un compte » passait sur deux lignes à 844×390 : une ligne, un rien plus serré) */
#compte .compte-boutons > button { padding-inline: 10px; }
#compte .compte-boutons > button:not(.gros) { font-size: 1rem; letter-spacing: .02em; white-space: nowrap; }
/* (« Signaler » en rouge foncé sur le violet se lisait mal : le même rouge clair que « Supprimer mon compte ») */
#btn-fin-signaler.danger-texte { color: #ffb4a8 !important; }

/* (18/10/2026) Paramètres sur téléphone, panneau défilé : la croix collée en haut à droite
   passait sur la dernière pastille d'une ligne (« Opaques »). Les lignes gardent la place de la croix. */
@media (max-height: 600px) {
  #reglages .reglage-ligne { padding-right: 46px; }
}

/* ═════════ (19/10/2026) LES RÈGLES DE LA COMMUNAUTÉ ═════════ */
#regles { z-index: 35; }
.panneau.regles { width: min(760px, 96vw); text-align: left; gap: 8px; }
.regles-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.regles-liste li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: rgba(10,5,22,.55); border: 2px solid rgba(255,216,74,.22); }
.regles-liste b { font-family: var(--gras); font-weight: 900; letter-spacing: .04em; color: #ffd84a; }
.regles-liste span { font-family: var(--corps); font-weight: 700; font-size: .8rem; line-height: 1.25; color: #f2ece0; }
.regles-pied { align-items: stretch; gap: 10px; flex-wrap: nowrap; }
.regles-pied .regles-coche { flex: 1 1 0; min-width: 0; font-size: .82rem; }
.regles-pied #btn-regles-ok { flex: 0 0 auto; margin: 0; }
@media (max-height: 520px) { .panneau.regles > .note:first-of-type { display: none; } .regles-liste li { padding: 4px 8px; } }
.regles-sanctions { font-size: .78rem !important; }
.regles-sanctions a, .reglages-groupe a.bouton-lien { color: #ffd84a; }
.regles-coche { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,216,74,.12); border: 2px solid #ffd84a; cursor: pointer; font-family: var(--corps); font-weight: 800; color: #fff; }
.regles-coche[hidden] { display: none; }
.regles-coche input { width: 26px; height: 26px; flex: none; accent-color: #ffd84a; }
.fiche-moderation { justify-content: center; gap: 18px; }
.chat-tete .discret { padding: 4px 8px; font-size: .78rem; }
a.bouton-lien { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 12px; border: 3px solid var(--da-contour, #0e0620); background: rgba(10,5,22,.6); font-family: var(--gras); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
/* le pied des règles reste collé en bas en défilant : un fond plein, pour que le texte ne passe pas dessous */
.voile > .panneau.regles > .regles-pied { background: #1d1236; box-shadow: 0 -10px 12px #1d1236; border-radius: 0 0 12px 12px; padding: 8px 0 4px; }
.regles-coche { background: #3a2a12 !important; }

/* (19/10/2026) l'année de naissance ; la confirmation d'achat (euros, renonciation, CGV) ; le petit « Jouer » des cartes de mode */
.panneau.naissance input, #compte-naissance { text-align: center; }
.confirme-euros { font-weight: 800; color: #ffd84a !important; }
.confirme-cgv { font-size: .74rem !important; margin: 0 !important; }
.confirme-cgv a, .regles-coche a { color: #ffd84a; }
.confirme-renonce { font-size: .8rem; }
.btn-carte-jouer { margin-top: 6px; padding: 4px 14px !important; min-height: 0 !important; font-size: .8rem !important; }

/* (19/10/2026) le choix de la langue */
#reglage-langue { font: inherit; font-weight: 800; padding: 6px 10px; border-radius: 10px; border: 3px solid var(--da-contour, #0e0620); background: #fff6e0; color: #2a1608; }

/* (19/10/2026) la date de naissance : le mois puis l'année, sur une ligne */
.naissance-ligne { display: flex; gap: 8px; width: 100%; }
.naissance-ligne select { flex: 0 0 auto; min-width: 8.5em; font: 700 16px "Segoe UI", system-ui, sans-serif; color: #2a1a0c; padding: 10px 12px; border-radius: 10px; border: 2px solid #0d0718; background: linear-gradient(#fff9e8, #efdfb6); box-shadow: inset 0 3px 0 rgba(0,0,0,.12); }
.naissance-ligne input { flex: 1 1 auto; min-width: 0; }

/* (20/10/2026) LE SIGNAL DE LAG : à celui dont la connexion lague, en duel en ligne (js/principal.js, signalLag) —
   trois barres comme le réseau d'un téléphone, et un mot ; orange : instable, rouge : très lente. Il ne prend jamais
   les doigts, et passe sous la flèche du sens du duel (en haut, au milieu). */
#signal-lag { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 58px); left: 50%; transform: translateX(-50%); z-index: 51;
  display: flex; align-items: flex-end; gap: 2px; padding: 4px 9px 4px 7px; border-radius: 8px; background: rgba(12, 8, 6, .72);
  border: 1px solid currentColor; font-family: var(--corps); font-weight: 700; font-size: .9rem; line-height: 1; pointer-events: none;
  zoom: var(--ech, 1); white-space: nowrap; }
#signal-lag[hidden] { display: none; }

/* (22/10/2026) LES TECHNIQUES AVANCÉES (js/techniques_ecran.js) : le nom qui claque en haut de l'écran, et le
   panneau des défis du dojo, en haut à gauche, sous le cartouche du joueur. Aucun des deux ne prend les doigts. */
#technique-pop { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 104px); left: 50%; transform: translateX(-50%); z-index: 52;
  font-family: var(--titre, var(--corps)); font-weight: 900; font-size: 1.15rem; letter-spacing: .08em; color: #fff;
  text-shadow: 0 0 6px rgba(120, 200, 255, .9), -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000; pointer-events: none; white-space: nowrap; zoom: var(--ech, 1); }
#technique-pop.fort { color: #ffe36a; text-shadow: 0 0 8px rgba(255, 200, 60, .95), 0 2px 0 #000; font-size: 1.35rem; }
#technique-pop[hidden] { display: none; }
#technique-pop.part { animation: technique-pop 1.4s ease-out both; }
@keyframes technique-pop { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 12% { opacity: 1; transform: translateX(-50%) scale(.95); }
  20% { transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
#dojo-defis { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 66px); left: calc(var(--marge-g, env(safe-area-inset-left, 0px)) + 8px); z-index: 50;
  max-width: 260px; padding: 6px 9px 7px; border-radius: 10px; background: rgba(10, 8, 14, .72); border: 1px solid rgba(255, 255, 255, .14);
  color: #e8e4f0; font-family: var(--corps); pointer-events: none; zoom: var(--ech, 1); }
#dojo-defis[hidden] { display: none; }
#dojo-defis h4 { margin: 0 0 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #ffd84a; }
#dojo-defis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
#dojo-defis li { display: grid; grid-template-columns: 30px 1fr; column-gap: 6px; align-items: baseline; }
#dojo-defis li i { grid-row: span 2; font-style: normal; font-weight: 800; font-size: .78rem; color: #9aa4b8; text-align: center; }
#dojo-defis li b { font-size: .8rem; line-height: 1.1; }
#dojo-defis li small { font-size: .66rem; line-height: 1.15; color: #a8a2b8; }
#dojo-defis li.fait i { color: #6aff8a; }
#dojo-defis li.fait b { color: #9affb0; }
#dojo-defis li.fait small { display: none; }   /* (un défi relevé : plus besoin du geste) */
#dojo-defis li.vient { animation: dojo-vient .9s ease-out; }
@keyframes dojo-vient { 0% { background: rgba(255, 216, 74, .45); } 100% { background: transparent; } }
#dojo-defis .dojo-fin { margin: 5px 0 0; font-size: .7rem; font-weight: 700; color: #ffd84a; }
@media (max-height: 420px) { #dojo-defis { top: calc(env(safe-area-inset-top, 0px) + 58px); max-width: 230px; } #dojo-defis li small { font-size: .62rem; } }
#signal-lag.orange { color: #f0a030; }
#signal-lag.rouge { color: #ff5a4e; animation: signal-lag-bat 1s ease-in-out infinite; }
#signal-lag i { display: block; width: 4px; background: currentColor; border-radius: 1px; opacity: .25; }
#signal-lag i:nth-child(1) { height: 5px; opacity: 1; }
#signal-lag i:nth-child(2) { height: 9px; }
#signal-lag i:nth-child(3) { height: 13px; }
#signal-lag.orange i:nth-child(2) { opacity: 1; }
#signal-lag span { margin-left: 5px; }
@keyframes signal-lag-bat { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #signal-lag.rouge { animation: none; } }

/* (20/10/2026) L'ONGLET « MODE » : collé au-dessus de la carte du mode, un peu à gauche (pas au bord), toujours là, pour qu'on voie que la carte
   sert à choisir le mode (index.html). Il ne prend pas les doigts : toucher la carte suffit. */
#menu .mode-enveloppe { position: relative; display: flex; }
#menu .mode-bulle { position: absolute; bottom: calc(100% - 3px); left: 16px; z-index: 0; pointer-events: none;
  padding: 5px 16px 6px; white-space: nowrap; font-family: var(--titre); font-size: 1.2rem; line-height: 1; letter-spacing: .08em;
  text-transform: uppercase; color: var(--da-contour); text-shadow: none;
  background: linear-gradient(180deg, #ffe680, #ffc531); border: 3px solid var(--da-contour); border-bottom: 0; border-radius: 10px 10px 0 0; }
#menu .mode-enveloppe .mode-carte { position: relative; z-index: 1; }

/* (20/10/2026) LES TENUES À DEUX : chaque joueur était collé à gauche de sa moitié (le joueur 1 au bord du
   panneau, le joueur 2 presque au milieu). Maintenant chacun est centré dans sa moitié : le titre, l'aperçu
   et ses tenues forment un bloc posé au milieu de sa colonne. */
.panneau.tenues .vitrine { align-items: center; }
.panneau.tenues .vitrine > h3 { align-self: stretch; text-align: center; }
.panneau.tenues .vitrine-corps { width: auto; max-width: 100%; justify-content: center; }
.panneau.tenues .vitrine-choix { flex: 0 1 190px; width: 190px; min-width: 0; }   /* (trois tenues par ligne, puis la grille défile) */

/* (20/10/2026) « RETIRER » : sur la place de l'invité, chez l'hôte d'une partie privée (js/principal.js, majSalonPrive) */
.place .retirer { margin-top: 2px; padding: 3px 10px; border-radius: 8px; border: 2px solid var(--da-contour); cursor: pointer;
  font-family: var(--titre); font-size: .72rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #e5544b, #b3261e); box-shadow: 0 2px 0 var(--da-contour); }
.place .retirer:active { transform: translateY(2px); box-shadow: none; }

/* (20/10/2026) « TES COFFRES » : tes coffres, puis ceux à acheter ; tout défile ensemble dans le panneau */
.coffres-panneau .coffres-defile { max-height: calc(64vh / var(--ech, 1)); overflow-y: auto; padding: 2px 4px; display: flex; flex-direction: column; gap: 10px; }
.coffres-panneau .coffres-defile .coffres-liste { max-height: none; overflow: visible; }
.coffres-panneau .coffres-boutique[hidden] { display: none; }

/* (20/10/2026) LE TUTO : Maître Kael parle dans une bulle de parchemin, en haut de l'écran, pendant le combat (js/tuto.js) */
#tuto { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 14;
  width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; zoom: var(--ech, 1); }
#tuto[hidden] { display: none; }
.tuto-bulle { pointer-events: auto; cursor: pointer; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px 9px 8px;
  background: linear-gradient(var(--cr-creme), var(--cr-creme2)); color: var(--cr-encre); border: 3px solid var(--cr-brun2); border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .35); animation: tuto-entre .25s ease-out; }
/* (23/10/2026) Kael vit : son portrait dodeline quand il parle, et saute de joie à chaque réussite */
.tuto-bulle.parle .tuto-portrait { animation: kael-parle .36s ease-in-out infinite alternate; }
.tuto-bulle.reussi .tuto-portrait { animation: kael-joie .5s ease-out 2; }
@keyframes kael-parle { from { transform: translateY(0) rotate(0); } to { transform: translateY(-2px) rotate(-2deg); } }
@keyframes kael-joie { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-7px) scale(1.08); } }
.tuto-bulle.reussi { border-color: #3f8a2c; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px #8fd16b; }
.tuto-portrait { flex: none; width: 56px; height: 56px; image-rendering: pixelated; background: rgba(63, 42, 18, .14); border: 2px solid var(--cr-brun); border-radius: 8px; }
.tuto-corps { flex: 1; min-width: 0; }
.tuto-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tuto-nom { font-family: var(--gras); font-size: 1rem; color: var(--cr-brun2); letter-spacing: .02em; }
.tuto-etape { font-family: var(--corps); font-weight: 700; font-size: .8rem; color: var(--cr-encre2); }
.tuto-bulle.reussi .tuto-etape::after { content: ' ✓'; color: #3f8a2c; }
.tuto-texte { margin: 2px 0 0; font-family: var(--corps); font-size: .95rem; line-height: 1.3; min-height: 2.6em; }
.tuto-fin { margin-top: 8px; }
.tuto-fin[hidden] { display: none; }
.tuto-passer { pointer-events: auto; padding: 4px 12px; font-size: .78rem; border-radius: 999px; background: rgba(12, 8, 6, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.tuto-passer[hidden] { display: none; }
/* (23/10/2026) « Passer » dans le coin en haut à droite (sous le carton du partenaire), loin des gestes du combat */
.tuto-coin { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 58px); right: calc(var(--marge-d, env(safe-area-inset-right, 0px)) + 12px); z-index: 15;
  padding: 6px 14px; font-size: .8rem; zoom: var(--ech, 1); }
/* (23/10/2026) pendant la visite, en haut au milieu : en haut à droite, il couvrait le menu ☰ (les Paramètres), qu'il
   fallait justement toucher */
/* (23/10/2026) le survol d'une ruine : une grande flèche à droite, qui pousse vers la suite ; le nom de la salle en bas */
.tuto-survol { position: fixed; inset: 0; z-index: 13; pointer-events: none; }
.tuto-survol[hidden] { display: none; }
.tuto-survol-fleche { position: absolute; right: calc(var(--marge-d, env(safe-area-inset-right, 0px)) + 18px); top: 50%; font-size: clamp(48px, 14vmin, 96px); color: #ffd36e;
  text-shadow: 0 3px 0 #6b4300, 0 0 18px rgba(255, 200, 80, .7); animation: survol-pousse .7s ease-in-out infinite alternate; }
.tuto-survol.bout .tuto-survol-fleche { display: none; }
.tuto-survol-salle { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); transform: translateX(-50%); padding: 6px 18px; border-radius: 999px;
  background: rgba(12, 8, 6, .7); color: #fff; font-family: var(--gras); font-size: 1rem; letter-spacing: .06em; white-space: nowrap; }
.tuto-survol.bout .tuto-survol-salle { background: linear-gradient(#ffe27a, #f0a81a); color: #3a2200; }
@keyframes survol-pousse { from { transform: translate(0, -50%); } to { transform: translate(12px, -50%); } }
.visite .tuto-coin { z-index: 26; right: auto; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 8px); }
@keyframes tuto-entre { from { opacity: 0; transform: translateY(-8px); } }
.tuto-offre { text-align: center; }
.tuto-offre .tuto-portrait { width: 72px; height: 72px; margin: 0 auto 4px; display: block; }
/* (21/10/2026) LA VISITE DU SALON : l'écran assombri, sauf le bouton montré (entouré d'or), et la bulle du maître du côté libre */
.visite { position: fixed; inset: 0; z-index: 25; cursor: pointer; }
.visite[hidden], .visite.en-attente { display: none; }
.visite-trou { position: fixed; border-radius: 14px; border: 3px solid #ffd36e; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(5, 4, 10, .78), 0 0 18px rgba(255, 211, 110, .85); transition: left .3s, top .3s, width .3s, height .3s; }
.visite-trou.vide { border-color: transparent; box-shadow: 0 0 0 200vmax rgba(5, 4, 10, .78); }
.visite-boite { position: fixed; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; zoom: var(--ech, 1); }
.visite-boite.en-bas { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
.visite-boite.en-haut { top: calc(env(safe-area-inset-top, 0px) + 10px); }
/* (22/10/2026) « quand Kael parle, que ce soit au milieu de l'écran » : la visite, et les consignes du tuto (le combat
   s'assombrit derrière ; la consigne lue, la bulle remonte en haut et le joueur a la main) */
.visite-boite.milieu { top: 50%; transform: translate(-50%, -50%); }
#tuto { transition: top .3s ease, transform .3s ease; }
#tuto.milieu { top: 50%; transform: translate(-50%, -50%); }
#tuto.milieu .tuto-bulle { box-shadow: 0 0 0 200vmax rgba(5, 4, 10, .45), 0 4px 0 rgba(0, 0, 0, .35); }
.visite-pied { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.visite-pied .visite-suite { padding: 6px 22px; min-height: 0; font-size: .9rem; }
.visite-pied [hidden], .visite-choix[hidden] { display: none; }
.visite-choix { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.visite-choix .gros { flex: 1 1 auto; padding: 8px 14px; font-size: .9rem; }
.aide-pied { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }