/* =====================================================================
   v9.82 — le système du HUD (Romain, 2026-10-12 : « une cohérence entre tous les HUD »).
   Chargée EN DERNIER : cette feuille fait foi sur les plus anciennes (style, pokemon, hud, ui, hud2…).
   • UNE police : la police pixel (plus de Georgia, de police système, ni d'italique).
   • DEUX matières :
       le PAPIER du Carnet (crème, liseré cuir) pour tout ce qui informe : quête, touches, pièces, lieu,
       notifications, dialogues, grands moments ;
       l'APPAREIL du Traducteur (acier bleu, écran vert) pour ce qui scanne : Traducteur, panneau
       Scanner, mots récents.
   • Une place par chose :
       haut gauche  menu (Échap), puis le nom du lieu
       haut centre  le Traducteur
       haut droite  la quête, puis les pastilles (badges, révisions, pièces)
       bas droite   les outils, une touche chacun (Scanner, Objectifs, Carnet, Trophées)
       bas gauche   toutes les notifications
       bas centre   l'invite, les mots récents, les dialogues
       centre       seulement les grands moments (nouvel outil, étape finie, nouvelle quête)
   ===================================================================== */

/* ------------------------------------------------------------- une police */
html:root:root:root:root {
  --serif: var(--pixel); --sans: var(--pixel); --mono: var(--pixel);
  /* l'ancien habillage « RPG de poche » (pokemon.css) prend le papier du Carnet */
  --pk-paper: var(--paper); --pk-ink: var(--ink); --pk-edge: var(--leather);
  --chip-h: 28px;
}
body, body * { font-style: normal !important; }
#ui { word-spacing: 0.15em; }

/* --------------------------------------------- le papier : un seul cadre */
.hud-esc, .keyrow, .hud-coins, .badge-count, .hud-due, .place-banner, .quest-track, .prompt {
  background: var(--card-bg, linear-gradient(180deg, var(--paper), var(--paper-2)));
  color: var(--ink);
  border: none !important;
  border-radius: var(--card-r, 9px);
  box-shadow: var(--card-frame);
  font-family: var(--pixel);
  backdrop-filter: none;
}

/* ------------------------------------------------------- haut gauche */
.hud-esc { top: 14px; left: 14px; bottom: auto; height: var(--chip-h); padding: 0 8px; gap: 6px; font-size: 0.85em; }
.hud-esc .gear { font-size: 1.05em; line-height: 1; }
.place-banner { top: 56px; left: 14px; padding: 6px 12px 6px 16px; }
.pb-main { font-size: 1em; }
.pb-sub { font-size: 0.72em; color: var(--ink-soft); }

/* ------------------------------------------------------- haut droite */
.hud-right { top: 14px; right: 14px; gap: 8px; }
.quest-track { width: 280px; padding: 10px 12px 10px 16px; }
/* l'en-tête de la fiche : « QUÊTE » ou l'étape, petit et en capitales */
.qt-kicker { font-size: 0.66em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.qt-label { font-size: 0.95em; line-height: 1.3; margin: 3px 0 5px; }
.qt-where, .qt-find, .qt-step, .qt-phrases { font-size: 0.72em; color: var(--ink-soft); line-height: 1.35; word-spacing: 0.1em; }
.qt-step { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(120, 85, 50, 0.3); }
/* les pastilles sous la quête : même hauteur, sur une ligne */
.badge-strip, .hud-coins, .hud-due { align-self: flex-end; }
.badge-count, .hud-coins, .hud-due { height: var(--chip-h); display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; margin: 0;
  font-size: 0.8em; animation: none; }
.hud-due { color: #2e1f14; background: linear-gradient(180deg, #fff6d0, #f6dc9a); }   /* v10.21 : encre fixe (en thème sombre, --ink est clair : texte invisible) */
.hud-due:hover { filter: brightness(1.04); }

/* --------------------------------------------- bas droite : les outils */
.hud-keys { right: 14px; bottom: 14px; gap: 7px; align-items: stretch; min-width: 170px; }
.keyrow, .keyrow[data-tool="book"], .zb-btn {
  height: 34px; padding: 0 10px 0 6px; gap: 8px; font-size: 0.9em; justify-content: flex-start;
}
.keyrow kbd { flex: none; min-width: 26px; text-align: center; }
.keyrow .kl { flex: 1; white-space: nowrap; }
.keyrow[data-tool="book"] .kl::before { content: none; }
.zb-btn .zb-btn-n, .keyrow .kn { font-size: 0.8em; color: var(--ink-soft); opacity: 1; }
.keyrow:hover { filter: brightness(1.04); }
.zb-btn.active, .keyrow.active { box-shadow: 0 0 0 3px var(--gold), 0 3px 0 3px var(--gold-d); }

/* ------------------------------------------------- bas centre : l'invite */
.prompt { padding: 6px 14px; border-radius: var(--card-r, 9px); }
.prompt .p-main { color: var(--ink); }
.prompt .p-sub { color: var(--ink-soft); }

/* --------------------------- bas gauche : les notifications (toutes ici) */
.feed { left: 14px; bottom: 14px; }
/* pendant un dialogue, juste au-dessus de la boîte (pas au milieu de l'écran) */
#ui:has(.dialogue:not(.hidden)) .feed { bottom: 196px; }
.feed-sub { font-size: 0.72em; }

/* ---------------------------------------- centre : les grands moments */
.moment-sub { font-size: 0.9em; }
.unlock-text { font-size: 0.92em; line-height: 1.5; }

/* -------------------------------------------- les petits textes d'appoint */
.qstep-where, .qstep-tip, .act-num, .qstud-time, .badge-stats, .toast-sub, .entry-num, .lesson-native, .order-hint, .phrase-native { word-spacing: 0.1em; }

/* tactile : les touches ne s'affichent pas, les outils restent de la même taille */
body.touch .hud-keys { min-width: 0; }
body.touch .keyrow, body.touch .zb-btn { height: 32px; }

/* le bandeau du mode test : en haut à gauche, à côté d'Échap (il cachait le Traducteur) */
#test-banner { left: 96px; top: 14px; transform: none; height: var(--chip-h); display: flex; align-items: center; border-radius: 8px; font-size: 11px; }
/* le panneau Scanner s'ouvre au-dessus des 4 outils, sans mordre sur les pastilles du haut */
.zonebook { bottom: 200px; max-height: min(calc(100vh - 200px - 250px), 540px); }

/* ------------------- v9.82 : qui donne la quête (visage + nom), et l'annonce d'une nouvelle quête */
.qt-who { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 5px; }
.qt-face { flex: none; width: 34px; height: 34px; border-radius: 7px; image-rendering: pixelated; object-fit: cover;
  background: color-mix(in srgb, var(--accent, #f0c04a) 35%, #fff6dc); box-shadow: 0 0 0 2px var(--leather); }
.qt-who-txt { flex: 1; min-width: 0; }
.qt-who-name { display: block; font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.qt-who .qt-label { margin: 1px 0 0; }
.quest-new {
  position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%); z-index: 7; pointer-events: none;
  width: min(380px, 86vw); padding: 12px 16px 12px 18px; border-radius: 12px; color: var(--ink); font-family: var(--pixel);
  background: var(--card-bg, linear-gradient(180deg, var(--paper), var(--paper-2)));
  box-shadow: inset 6px 0 0 var(--accent), var(--card-frame), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: qnIn 0.45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.quest-new .qt-face { width: 44px; height: 44px; }
.quest-new .qt-label { font-size: 1.1em; line-height: 1.3; color: var(--ink); max-width: none; text-transform: none; letter-spacing: 0; }
.quest-new .qt-where { font-size: 0.8em; }
.qn-kicker { font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
/* elle file vers la fiche de quête, en haut à droite */
.quest-new.out { transition: transform 0.6s ease-in, opacity 0.6s ease-in; transform: translate(calc(50vw - 50% - 40px), -26vh) scale(0.5); opacity: 0; }
@keyframes qnIn { from { opacity: 0; transform: translate(-50%, -40%) scale(0.85); } }
#ui.panel-open .quest-new { display: none; }

/* v10 : duel de rival (ville 2) — la bonne réponse s'allume après une erreur, les mots maîtrisés */
.quiz-screen .quiz-choice.right { border-color: #4caf50 !important; background: rgba(76, 175, 80, 0.25) !important; }
.res-learned { text-align: center; font-size: 1.05em; margin: 6px 0 2px; }

/* v10.12 : la chose visée — entourée de jaune dans le monde (engine/outline.js), son étiquette du Scanner en or */
.wtag.sel { background: rgba(58, 40, 6, 0.9); color: #ffe7a0; border-color: #f0c04a; box-shadow: 0 0 0 1px rgba(240, 192, 74, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35); z-index: 1; }

/* v10.17 : en haut à droite, UNE tâche (Romain : « juste des tâches une à une, en jaune, juste le texte, pas de fond,
   une animation de coche validée puis nouvelle quête ») — la liste complète est dans le carnet (Aventure) */
.quest-track.plain { width: auto; max-width: 360px; padding: 4px 0 0; background: none !important; box-shadow: none !important;
  display: flex; justify-content: flex-end; text-align: right; pointer-events: none; }
.quest-track.plain::before, .quest-track.plain::after { display: none; }
.qp-task { display: flex; align-items: center; gap: 7px; font-family: var(--pixel); font-weight: 700; font-size: 1.02em;
  line-height: 1.3; color: #ffd84a;
  text-shadow: 2px 0 #2a1a10, -2px 0 #2a1a10, 0 2px #2a1a10, 0 -2px #2a1a10, 2px 2px #2a1a10, -2px 2px #2a1a10, 2px -2px #2a1a10, -2px -2px #2a1a10; }
.quest-track.plain { flex-direction: column; align-items: flex-end; }
/* v10.20 : le lieu où aller, sous la tâche (même encre, plus petit) */
.qp-where { font-family: var(--pixel); font-weight: 700; font-size: 0.86em; color: #fff3c4; margin-top: 2px;
  text-shadow: 2px 0 #2a1a10, -2px 0 #2a1a10, 0 2px #2a1a10, 0 -2px #2a1a10, 2px 2px #2a1a10, -2px 2px #2a1a10, 2px -2px #2a1a10, -2px -2px #2a1a10; }
.qp-where.hidden { display: none; }
.qp-check { display: none; }
.qp-key { font-size: 0.78em; text-shadow: none; }
/* la tâche finie : la coche verte tombe, le texte se barre et s'efface */
.qp-task.done .qp-check { display: inline-block; color: #6be38e; font-size: 1.25em; animation: qpCheck 0.45s cubic-bezier(.2, 1.8, .4, 1) both; }
.qp-task.done .qp-txt { text-decoration: line-through; text-decoration-thickness: 3px; animation: qpOut 0.5s ease-in 0.8s both; }
.qp-task.done { animation: qpFade 0.35s ease-in 0.95s both; }
/* la nouvelle tâche arrive par la droite */
.qp-task.enter { animation: qpIn 0.45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes qpCheck { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } }
@keyframes qpOut { to { opacity: 0.4; } }
@keyframes qpFade { to { opacity: 0; transform: translateY(-6px); } }
@keyframes qpIn { from { opacity: 0; transform: translateX(40px); } }
#ui.panel-open .quest-track.plain { opacity: 0; }

/* v10.17 : la quête de la zone en entier, dans le carnet (Aventure) */
.bk-todo ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bk-todo li { display: flex; align-items: center; gap: 8px; font-size: 0.82em; color: var(--ink-soft); }
.bk-todo li b { margin-left: auto; font-size: 0.9em; }
.bk-box { flex: none; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 0.8em;
  box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.4); }
.bk-todo li.done { opacity: 0.6; }
.bk-todo li.done .bk-txt { text-decoration: line-through; }
.bk-todo li.done .bk-box { background: #3fae6a; color: #fff; box-shadow: none; }
.bk-todo li.cur { color: var(--ink); font-size: 0.92em; }
.bk-todo li.cur .bk-box { background: var(--accent, #f0c04a); color: #2a1a10; box-shadow: none; }
.bk-todo li.bonus { font-size: 0.74em; }

/* v10.14 : sur tout cadre du HUD, la souris redevient une flèche (le viseur du jeu ne passe plus dessous) */
.trad, .badge-strip, .hud-coins, .hud-due, .hud-request, .place-banner, .recent-words, .feed > * { pointer-events: auto; cursor: default; }

/* v10.14 : Collection › Lieux — les 27 lieux spéciaux (dessin, zone, page de grammaire) */
.places-wrap { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 6px; }
.pl-lead { margin: 0; font-size: 0.78em; color: var(--ink-soft); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pl-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 9px; text-align: center;
  background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.pl-frame { height: 78px; width: 100%; display: grid; place-items: end center; }
.pl-pic { max-height: 76px; max-width: 100%; image-rendering: pixelated; transform: scale(1.4); transform-origin: bottom center; }
.pl-zone { font-size: 0.66em; color: var(--ink-soft); letter-spacing: 0.04em; }
.pl-name { font-size: 0.72em; line-height: 1.25; color: var(--ink); }
.pl-state { font-size: 0.66em; color: var(--ink-soft); }
.pl-card.got { background: rgba(255, 246, 200, 0.75); box-shadow: inset 0 0 0 2px var(--gold, #e0a020); }
.pl-card.got .pl-state { color: #2f8a52; }
.pl-card.locked .pl-pic { filter: brightness(0) opacity(0.25); }
.pl-card.locked { opacity: 0.75; }
body.touch .quest-track.plain { max-width: 270px; }

/* v10.18 : aide des duels (scenes/masterDuel.js, ui/duelHelpText.js) — indice, réponse montrée, mots à revoir */
.m-answer { display: grid; align-self: end; gap: 0.5em; }
.m-answer > [hidden] { display: none !important; }
.m-help:empty { display: none; }
.m-help {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; padding: 6px 16px 8px;
  border-radius: 10px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink);
  box-shadow: 0 0 0 3px var(--leather), 0 4px 0 3px var(--leather-d); font-family: var(--pixel);
  animation: dhIn 0.25s cubic-bezier(.2, 1.6, .4, 1) both;
}
.m-help-k { font-size: 0.68em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.m-hint { font-size: 1.35em; font-weight: normal; letter-spacing: 0.12em; word-spacing: 0.15em; white-space: pre; color: var(--ink); }
.m-hint.rom { font-size: 0.95em; color: var(--ink-soft); }
.m-help.reveal { box-shadow: 0 0 0 3px #2f8a52, 0 4px 0 3px #17482a; }
.m-help.reveal .m-ans { font-size: 1.5em; font-weight: normal; color: #1f6a3c; }
.m-help.reveal .m-rom { font-size: 0.9em; color: var(--ink-soft); }
.m-help.reveal small { font-size: 0.7em; color: var(--ink-soft); }
@keyframes dhIn { from { opacity: 0; transform: scale(0.85); } }
.master-screen .quiz-choice.off { opacity: 0.38; filter: grayscale(1); cursor: default; transform: none; box-shadow: 0 0 0 3px #a03028, 0 4px 0 3px #5a140e; }
.master-screen .quiz-choice.right { background: #c8f0c0 !important; box-shadow: 0 0 0 3px #2f8a52, 0 4px 0 3px #17482a !important; }
/* défaite / fin du rival : les mots à revoir (toucher = les entendre) */
.dh-review { display: flex; flex-direction: column; align-items: center; max-width: 680px; }
.dh-review .res-learned { color: var(--paper); text-shadow: 0 2px 0 var(--leather-d); }
.dh-tiles { margin: 8px auto 2px; }
.dh-tile { font: inherit; color: var(--ink); cursor: pointer; background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.dh-tile:hover { transform: translateY(-2px); background: #fff3c8; }
.dh-tap { margin: 0; font-size: 0.72em; color: var(--paper); opacity: 0.8; }
.dh-easier { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dh-easier small { font-size: 0.72em; color: var(--paper); opacity: 0.8; }
.quiz-screen.result.lost .res-title { color: #ff9a8a; }