@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');
@font-face {
  font-family: "JDRBot Merienda";
  src: url("./fonts/merienda/merienda-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JDRBot Merienda";
  src: url("./fonts/merienda/merienda-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JDRBot Merienda";
  src: url("./fonts/merienda/merienda-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JDRBot Merienda";
  src: url("./fonts/merienda/merienda-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ==================== JDR-Bot Web - style.css ==================== */
/* 3 thèmes (Sombre / Neutre / Clair) via CSS variables.             */
/* Couleurs identiques à adapters/gui/themes.py                      */
/* ================================================================== */


/* Dialogues enrichis et séquences narratives */
.narrative-has-background {
  position: relative;
  isolation: isolate;
}
.narrative-has-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--narrative-background-image);
  background-position: var(--narrative-background-position, center);
  background-repeat: var(--narrative-background-repeat, no-repeat);
  background-size: var(--narrative-background-size, cover);
  transform: translateY(var(--narrative-background-scroll, 0px));
}
.narrative-background-stretch {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateY(var(--narrative-background-scroll, 0px));
}
.narrative-flow-entry {
  position: relative;
  z-index: 1;
  width: 100%;
}
.narrative-sequence {
  position: relative;
  width: min(100%, 78rem);
  margin: 0 auto 0.7rem;
  cursor: pointer;
}
.narrative-sequence-static { cursor: default; }
.narrative-sequence:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white);
  outline-offset: 4px;
  border-radius: 0.75rem;
}
.narrative-next-indicator {
  position: absolute;
  right: 2rem;
  bottom: 0.3rem;
  z-index: 4;
  color: var(--accent);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  animation: narrative-next-pulse 1.3s ease-in-out infinite;
}
.narrative-next-indicator--spent {
  visibility: hidden;
  animation: none;
}
.narrative-dialogue:has(> .narrative-next-indicator) .narrative-content {
  padding-right: 2.8rem;
}
.narrative-reply {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.45rem, 1.5vw, 1.2rem);
  width: 100%;
  min-width: 0;
}
.narrative-reply.narrative-portrait-right { flex-direction: row-reverse; }
.narrative-dialogue {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border: 2px solid color-mix(in srgb, var(--accent) 65%, var(--border));
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--bg2) 90%, transparent);
  color: var(--fg);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
}
.narrative-custom-frame {
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
}
.narrative-image-frame-layer {
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--narrative-image-frame-width) minmax(0, 1fr) var(--narrative-image-frame-width);
  grid-template-rows: var(--narrative-image-frame-width) minmax(0, 1fr) var(--narrative-image-frame-width);
  pointer-events: none;
  overflow: hidden;
}
.narrative-image-frame-layer > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.narrative-speaker {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 2rem);
  padding: 0.2rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
  border-radius: 0.45rem;
  background: var(--bg2);
  color: var(--fg);
  font-weight: 700;
  line-height: 1.25;
  transform: translateY(-50%);
}
.narrative-speaker[data-position^="haut"],
.narrative-speaker[data-position^="top"] { top: 0; }
.narrative-speaker[data-position^="bas"],
.narrative-speaker[data-position^="bottom"] { top: 100%; }
.narrative-speaker[data-position^="centre"],
.narrative-speaker[data-position^="center"] { top: 50%; }
.narrative-speaker[data-position$="gauche"],
.narrative-speaker[data-position$="left"] { left: 1.75rem; }
.narrative-speaker[data-position$="droite"],
.narrative-speaker[data-position$="right"] { right: 1.75rem; }
.narrative-speaker[data-position$="centre"],
.narrative-speaker[data-position$="center"] { left: 50%; transform: translate(-50%, -50%); }
.narrative-content { min-width: 0; }
.narrative-content > :last-child { margin-bottom: 0; }
.narrative-dialogue.narrative-auto-contrast {
  color: var(--narrative-auto-fg, var(--fg));
  text-shadow: var(--narrative-auto-shadow, none);
}
.narrative-dialogue.narrative-auto-contrast .narrative-content,
.narrative-dialogue.narrative-auto-contrast .narrative-content * {
  color: inherit;
}
.narrative-speaker.narrative-auto-contrast {
  color: var(--narrative-auto-fg, var(--fg));
  text-shadow: var(--narrative-auto-shadow, none);
}
.narrative-dialogue.narrative-auto-contrast .narrative-next-indicator { color: inherit; }
.narrative-portrait-shell {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: var(--narrative-portrait-width, auto);
  height: var(--narrative-portrait-size, 32%);
  aspect-ratio: var(--narrative-portrait-ratio, 2 / 3);
  max-width: none;
  max-height: 100%;
  align-self: flex-end;
  box-sizing: content-box;
  margin-right: calc(-1 * var(--narrative-portrait-overlap, 0px));
  translate: var(--narrative-portrait-offset-x, 0px) var(--narrative-portrait-offset-y, 0px);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.narrative-portrait-right .narrative-portrait-shell {
  margin-right: 0;
  margin-left: calc(-1 * var(--narrative-portrait-overlap, 0px));
}
.narrative-portrait-shell.narrative-custom-portrait-frame:not(.narrative-generated-frame) {
  border-width: var(--narrative-portrait-frame-width, 7px) !important;
  border-image-width: var(--narrative-portrait-frame-width, 7px) !important;
  z-index: 2;
}
.narrative-portrait-shell img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.narrative-portrait-sprite {
  min-height: 0;
  aspect-ratio: var(--narrative-portrait-ratio, 2 / 3);
}
.narrative-inline-image,
.narrative-inline-video { max-width: 100%; }
.narrative-transition-fade {
  animation: narrative-fade-in var(--narrative-transition-duration, 250ms) ease both;
}
.narrative-transition-slide {
  animation: narrative-slide-in var(--narrative-transition-duration, 250ms) ease both;
}
.narrative-transition-slide[data-transition-direction="droite"],
.narrative-transition-slide[data-transition-direction="right"] { --narrative-slide-x: 1.5rem; }
.narrative-transition-slide[data-transition-direction="haut"],
.narrative-transition-slide[data-transition-direction="up"] { --narrative-slide-x: 0; --narrative-slide-y: -1.2rem; }
.narrative-transition-slide[data-transition-direction="bas"],
.narrative-transition-slide[data-transition-direction="down"] { --narrative-slide-x: 0; --narrative-slide-y: 1.2rem; }
@keyframes narrative-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes narrative-slide-in {
  from { opacity: 0; transform: translate(var(--narrative-slide-x, -1.5rem), var(--narrative-slide-y, 0)); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes narrative-next-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.65; }
  50% { transform: translateX(0.22rem); opacity: 1; }
}
#game-area.narrative-controls-hidden > #choix-panel,
#game-area.narrative-controls-hidden #saisie-input,
#game-area.narrative-controls-hidden #saisie-send,
#game-area.narrative-controls-hidden .deck-edge-arrow {
  visibility: hidden;
  pointer-events: none;
}
[data-ui="deck"] .deck-card-body .narrative-sequence {
  width: 100%;
  margin: 0;
}
[data-ui="deck"] .deck-card-body .narrative-dialogue {
  padding: 0.75rem;
  border-radius: 0.45rem;
  box-shadow: none;
}
[data-ui="deck"] .deck-card-body:has(.narrative-sequence) {
  max-height: 46%;
  padding: 10px 12px;
}
[data-ui="deck"] .deck-card-body .narrative-reply {
  gap: 0.35rem;
}
[data-ui="deck"] .deck-card-body .narrative-custom-portrait-frame:not(.narrative-generated-frame) {
  border-width: 3px !important;
  border-image-width: 3px !important;
}
[data-ui="phone"][data-phone-screen="conversation"] .narrative-sequence,
[data-ui="phone"][data-phone-screen="messages"] .narrative-sequence {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
[data-ui="phone"] .narrative-phone-bubble {
  justify-content: flex-start;
  align-items: flex-end;
  max-width: 88%;
}
[data-ui="phone"] .narrative-phone-bubble.narrative-phone-sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-dialogue {
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--ph-surface-2);
  box-shadow: none;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble.narrative-phone-sent .narrative-dialogue {
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: color-mix(in srgb, var(--ph-accent) 24%, var(--ph-surface-2));
}
[data-ui="phone"] .narrative-phone-bubble .narrative-portrait-shell {
  flex-basis: 2.3rem;
  width: 2.3rem;
  min-width: 2.3rem;
  height: 2.3rem;
  align-self: flex-end;
}
[data-ui="phone"] .narrative-phone-bubble .narrative-speaker {
  position: static;
  display: block;
  max-width: none;
  margin: -0.1rem 0 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ph-muted);
  font-size: 0.78rem;
  transform: none;
}
[data-ui="phone"] .narrative-phone-bubble .narrative-speaker.narrative-custom-frame {
  margin-top: 0.1rem;
  padding: 0.2rem 0.55rem;
}
.hud-encadre.hud-has-narrative .hud-flow-has-narrative {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.hud-encadre.hud-has-narrative .narrative-sequence {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  min-width: 0;
}
.hud-encadre.hud-has-narrative > .narrative-sequence {
  --narrative-frame-max-width: clamp(2px, 1vmin, 10px);
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1rem 0.25rem 0.5rem;
  box-sizing: border-box;
}
.hud-encadre.hud-has-narrative > .narrative-sequence > .narrative-reply {
  max-height: 100%;
  padding-inline: clamp(0.75rem, 1.2vw, 1.25rem);
  box-sizing: border-box;
}
.hud-encadre.hud-has-narrative .narrative-dialogue {
  padding: clamp(0.55rem, 1.4vw, 1rem);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
}
.hud-haut.hud-has-narrative,
.hud-bas.hud-has-narrative {
  min-height: clamp(6rem, 16vh, 11rem);
}
.hud-encadre.hud-has-narrative .narrative-custom-frame:not(.narrative-generated-frame) {
  border-width: clamp(6px, 1.2vmin, 14px) !important;
  border-image-width: clamp(6px, 1.2vmin, 14px) !important;
}
@media (max-width: 640px) {
  .narrative-reply { gap: 0.35rem; }
  .narrative-dialogue { padding: 0.9rem; }
  .narrative-portrait-shell { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .narrative-transition-fade,
  .narrative-transition-slide { animation: none !important; }
}
/* ── Thème Sombre (défaut) ─────────────────────────────────── */
:root, [data-theme="sombre"] {
  --bg:          #0d0d14;
  --bg2:         #13131f;
  --bg3:         #090910;
  --fg:          #d8d8e8;
  --fg2:         #7878a0;
  --accent:      #e8b84b;
  --accent2:     #b88828;
  --btn-bg:      #1e1e30;
  --btn-hover:   #2a2a44;
  --btn-fg:      #e8b84b;
  --block-bg:    #1a1a0a;
  --block-fg:    #f5d878;
  --error-fg:    #ff5555;
  --embed-title: #e8b84b;
  --embed-field: #7898c8;
  --entry-bg:    #13131f;
  --entry-fg:    #d8d8e8;
  --font-text:   Georgia, serif;
  --font-mono:   Consolas, monospace;
  --font-ui:     'Segoe UI', system-ui, sans-serif;
  --scrollbar-thumb: #2a2a44;
  --ui-role-action:        var(--accent2);
  --ui-role-action-deep:   color-mix(in srgb, var(--accent2) 78%, black 22%);
  --ui-role-positive:      var(--accent);
  --ui-role-positive-deep: color-mix(in srgb, var(--accent) 76%, black 24%);
  --ui-role-favorite:      var(--accent);
  --ui-role-story:         var(--accent);
  --ui-role-dream:         var(--embed-field);
  --ui-role-attention:     var(--error-fg);
  --ui-role-spot-1:        var(--ui-role-story);
  --ui-role-spot-2:        var(--ui-role-story);
  --ui-role-spot-3:        var(--ui-role-story);
  --ui-role-spot-4:        var(--ui-role-story);
  --ui-role-spot-5:        var(--ui-role-story);
  --ui-role-spot-6:        var(--ui-role-story);
  --ui-role-on-story:      var(--bg);
  --ui-role-on-action:     var(--bg);
  --ui-role-on-positive:   var(--bg);
  --ui-role-on-favorite:   var(--bg);
  --ui-role-on-dream:      var(--bg);
  --ui-role-on-attention:  var(--bg);
  --ui-role-favorite-text: var(--fg);
  --ui-role-paper-edge:    var(--btn-bg);
  --ui-palette-game-bg:    linear-gradient(180deg, var(--bg) 0%, var(--bg3) 100%);
  --ui-palette-text-bg:    var(--bg3);
}

/* ── Thème Neutre ──────────────────────────────────────────── */
[data-theme="neutre"] {
  --bg:          #1c1c1c;
  --bg2:         #252525;
  --bg3:         #141414;
  --fg:          #ececec;
  --fg2:         #888888;
  --accent:      #4d9ff5;
  --accent2:     #2a7dd8;
  --btn-bg:      #2e2e2e;
  --btn-hover:   #3a3a3a;
  --btn-fg:      #7ec0ff;
  --block-bg:    #1e2a38;
  --block-fg:    #a8d0ff;
  --error-fg:    #ff6060;
  --embed-title: #4d9ff5;
  --embed-field: #80aacc;
  --entry-bg:    #252525;
  --entry-fg:    #ececec;
  --scrollbar-thumb: #3a3a3a;
}

/* ── Thème Clair ───────────────────────────────────────────── */
[data-theme="clair"] {
  --bg:          #f8f6f1;
  --bg2:         #ede9e0;
  --bg3:         #ffffff;
  --fg:          #1a1410;
  --fg2:         #6a6460;
  --accent:      #8b2252;
  --accent2:     #6a1840;
  --btn-bg:      #e8ddd0;
  --btn-hover:   #d4c8b8;
  --btn-fg:      #8b2252;
  --block-bg:    #f0e8d8;
  --block-fg:    #5a1a38;
  --error-fg:    #c0200e;
  --embed-title: #8b2252;
  --embed-field: #445588;
  --entry-bg:    #ffffff;
  --entry-fg:    #1a1410;
  --scrollbar-thumb: #d4c8b8;
}

/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

/* Scrollbars */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ── Layout général ────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Android/iOS : exclut la barre d'adresse du navigateur */
}

/* ── Topbar ────────────────────────────────────────────────── */
#topbar {
  background: var(--bg2);
  padding: 6px 14px 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--btn-bg);
}

/* ══ Mode immersion (bouton ⛶, tous les modes UI) ═══════════════
   Masque le chrome du site pour ne garder que le jeu. La toolbar du jeu
   (Abandonner + options du scenario) reste visible : c'est le seul moyen de
   sortir de la partie, et les options (Accueil, liens) doivent rester joignables. */
body.immersion #topbar {
  display: none;
}

/* Dans le flux de la barre de saisie, a DROITE d'Envoyer. En absolute, il se
   superposait au bouton ; au-dessus de la barre, il flottait bizarrement. */
#btn-immersion {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--btn-bg);
  background: var(--bg2);
  color: var(--fg);
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}


#btn-immersion:hover,
#btn-immersion:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

/* En immersion, le bouton flotte au-dessus de la scene : on le rend discret
   pour ne pas parasiter l'image, lisible au survol. Il suit la palette. */
body.immersion #btn-immersion {
  background: var(--ui-surface-topbar, var(--bg2));
  border-color: var(--ui-border-subtle, var(--btn-bg));
  opacity: 0.35;
  backdrop-filter: var(--ui-backdrop, none);
}

body.immersion #btn-immersion:hover,
body.immersion #btn-immersion:focus-visible {
  opacity: 1;
}

/* Le bouton n'a de sens que pendant une partie. */
#btn-immersion { display: none; }
#screen-jeu.active #btn-immersion { display: flex; }

#topbar-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

#topbar-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
#topbar-title:hover { opacity: 0.8; }

#topbar-author {
  font-size: 13px;
  color: var(--fg2);
}

#topbar-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.topbar-link {
  padding: 4px 10px;
  border: 1px solid var(--btn-bg);
  border-radius: 4px;
  color: var(--fg2);
  font-size: 13px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.topbar-link:hover { background: var(--btn-hover); }

/* Le style Terminal passe toute l'interface en monospace : à taille égale, ses
   libellés sont nettement plus larges et la barre déborde là où les autres
   styles tiennent. On resserre la police et les marges des seuls contrôles de
   l'en-tête, sans toucher à l'identité du style ailleurs. */
[data-style="terminal"] .topbar-link {
  font-size: 12px;
  padding: 4px 7px;
}
[data-style="terminal"] #theme-select,
[data-style="terminal"] #style-select {
  font-size: 12px;
  padding: 3px 5px;
}
[data-style="terminal"] #theme-label,
[data-style="terminal"] #style-label { font-size: 12px; }

/* Le monospace coûte environ 150 px sur la barre : ses libellés de sélecteur
   s'effacent plus tôt que pour les autres styles. */
@media (max-width: 1800px) {
  [data-style="terminal"] #theme-label,
  [data-style="terminal"] #style-label { display: none; }
  [data-style="terminal"] #theme-select,
  [data-style="terminal"] #style-select { width: 112px; }
}

/* Écarteur compressible : il pousse les contrôles à droite tant qu'il reste de
   la place, mais se réduit à zéro plutôt que de renvoyer le sélecteur de langue
   à la ligne suivante (flex-basis 0 + shrink autorisé). */
#topbar-spacer,
.topbar-flex-spacer { flex: 1 1 0; min-width: 0; }

.header-lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-dl {
  font-size: 12px;
  opacity: 0.75;
}
.topbar-dl:hover { opacity: 1; }

#volume-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Le conteneur doit pouvoir rétrécir pour que le curseur cède sa largeur. */
  min-width: 0;
  flex-shrink: 1;
}
#btn-mute {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
}
#volume-slider {
  width: 80px;
  /* Compressible jusqu'à 44 px : le curseur cède un peu de largeur avant que
     la barre ne se replie sur deux lignes. */
  min-width: 44px;
  flex-shrink: 1;
  accent-color: var(--accent);
  cursor: pointer;
}

#theme-label, #style-label { font-size: 13px; color: var(--fg2); }

#theme-select, #style-select {
  background: var(--btn-bg);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  /* Largeur confortable par défaut, mais compressible : un nom d'option long
     ne doit pas imposer sa largeur intrinsèque au point de renvoyer le
     sélecteur de langue à la ligne suivante. */
  width: 138px;
  min-width: 0;
  flex-shrink: 1;
}

/* Sous 1500 px, la barre unique déborderait et se replierait en plusieurs
   lignes : on compacte les éléments les moins porteurs d'information (les
   deux libellés de sélecteur, dont le contenu est déjà explicite) avant de
   laisser le retour à la ligne se produire. */
@media (max-width: 1500px) {
  #theme-label, #style-label { display: none; }
  #theme-select, #style-select { width: 116px; }
  #topbar-row2 { gap: 6px; }
}

@media (max-width: 1180px) {
  #volume-ctrl #volume-slider { width: 64px; }
  #theme-select, #style-select { width: 104px; font-size: 12px; }
}

/* ── Markdown inline ───────────────────────────────────────── */
.md-bold        { font-weight: bold; }
.md-italic      { font-style: italic; font-weight: normal; }
.md-bold-italic { font-weight: bold; font-style: italic; }
.md-underline   { text-decoration: underline; }
.md-strike      { text-decoration: line-through; }
.md-code        { font-family: var(--font-mono); font-size: 0.95em;
                  background: var(--block-bg); color: var(--block-fg);
                  padding: 1px 5px; border-radius: 3px; }
.md-spoiler          { background: var(--fg2); color: var(--fg2);
                       border-radius: 3px; padding: 0 3px; cursor: pointer;
                       transition: background 0.15s, color 0.15s; }
.md-spoiler.revealed { background: transparent; color: var(--fg); cursor: default; }

/* ── Écrans ────────────────────────────────────────────────── */
.screen { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; }

/* ══════════════════════════════════════════════════════════════
   ÉCRAN ACCUEIL
══════════════════════════════════════════════════════════════ */

#screen-accueil { background: var(--bg); }

#accueil-header {
  background: var(--bg2);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#accueil-header h2 {
  font-size: 17px;
  color: var(--accent);
  flex: 1;
}

.lang-btn {
  padding: 4px 12px;
  border: 1px solid var(--btn-bg);
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.lang-btn:hover, .lang-btn.active { background: var(--accent); color: var(--bg); }

/* Onglets catégories */
#cats-bar {
  background: var(--bg2);
  padding: 6px 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  border-bottom: 1px solid var(--btn-bg);
}

/* Sépare les sélections (Tous, Mis en avant, Favoris, Enfants) des catégories
   de scénario, qui se lisaient jusqu'ici comme une seule liste indifférenciée. */
.cat-sep {
  width: 1px;
  align-self: stretch;
  min-height: 18px;
  margin: 0 4px;
  background: color-mix(in srgb, var(--fg2) 34%, transparent);
}

.cat-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.cat-btn:hover { background: var(--btn-hover); }
.cat-btn.active { background: var(--accent); color: var(--bg); font-weight: bold; }

/* Barre de recherche */
#search-bar {
  padding: 6px 12px 4px;
  background: var(--bg2);
  border-bottom: 1px solid var(--btn-bg);
  flex-shrink: 0;
}
#scenario-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--btn-bg);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  outline: none;
}
#scenario-search:focus { border-color: var(--accent); }

/* Badges */
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.card-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.card-badge.nouveau      { background: color-mix(in srgb, var(--ui-role-positive) 80%, black 8%); color: var(--ui-role-on-positive); }
.card-badge.mis-en-avant { background: color-mix(in srgb, var(--ui-role-favorite) 82%, white 6%); color: var(--ui-role-on-favorite); }
.card-badge.partenaire   { background: color-mix(in srgb, var(--ui-role-story) 78%, black 6%); color: var(--ui-role-on-story); }
.card-badge.sponsorise   { background: color-mix(in srgb, var(--ui-role-dream) 80%, black 6%); color: var(--ui-role-on-dream); }
.card-badge.kids         { background: color-mix(in srgb, var(--ui-role-action) 80%, black 4%); color: var(--ui-role-on-action); }

/* Grille de scénarios */
#scenario-grid-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 4px;
}

#scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  /* stretch : toutes les cartes d'une ligne adoptent la hauteur de la plus
     grande, quelles que soient la longueur de description et la présence de
     badges. */
  align-items: stretch;
}

/* Paliers de largeur : 3 colonnes sur écran confortable, puis 2 et 1.
   Le seuil haut est volontairement large pour éviter des cartes étirées. */
@media (max-width: 1080px) { #scenario-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #scenario-grid { grid-template-columns: 1fr; } }

.scenario-card {
  background: var(--bg2);
  border-radius: 10px;
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: 1px solid transparent;
  transition: border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.scenario-card:hover { border-color: var(--accent); }

/* Vignette 16/9 sans plafond arbitraire : la grille limite elle-même la largeur
   des cartes sur écran ultralarge. L'image reste entière, quel que soit son
   ratio (carré, portrait ou panoramique). */
.card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg) 60%, var(--bg2));
  border-bottom: 1px solid var(--ui-border-subtle, transparent);
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Repli sans illustration : la teinte de la catégorie (--thumb-hue, posée par
   le JS) est mélangée aux surfaces de la palette active. Sur un thème clair la
   vignette reste claire et sur un thème sombre elle reste sombre, au lieu d'un
   aplat figé qui détonnerait. */
.card-thumb.is-fallback {
  --thumb-teinte: hsl(var(--thumb-hue, 210) 46% 52%);
  --thumb-dose: 26%;
  --thumb-dose-2: 13%;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--thumb-teinte) var(--thumb-dose), var(--bg2)),
    color-mix(in srgb, var(--thumb-teinte) var(--thumb-dose-2), var(--bg2))
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sur les palettes sombres, la surface est presque noire : il faut une dose de
   teinte plus forte pour que la vignette se détache de la carte. */
[data-theme="sombre"] .card-thumb.is-fallback,
[data-theme="neutre"] .card-thumb.is-fallback {
  --thumb-dose: 46%;
  --thumb-dose-2: 26%;
}

.card-thumb-glyph {
  font-size: 40px;
  line-height: 1;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
  user-select: none;
}

.card-corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 0;
  flex: 1;
}

/* Description complète : la carte s'adapte, on ne tronque pas. La taille est
   légèrement réduite pour garder une page sans défilement sur grand écran. */
.card-desc {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--fg2);
  text-align: center;
  margin: 2px 0 6px;
  overflow-wrap: anywhere;
}
.card-desc-chemin {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 11.5px;
  opacity: 0.75;
}

.card-play-btn { margin-top: auto; }

.card-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--fg2);
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, border-color 0.12s, color 0.12s, background 0.12s;
}
.card-fav-btn:hover {
  transform: scale(1.06);
  border-color: var(--accent);
  color: var(--accent);
}
.card-fav-btn.is-favorite {
  color: var(--ui-role-favorite-text);
  border-color: var(--ui-role-favorite);
  background: color-mix(in srgb, var(--ui-role-favorite) 18%, var(--bg2));
}

.card-nom {
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  /* Plus de hauteur réservée : l'alignement des cartes est assuré par la
     grille (align-items: stretch) et non par des minimums empilés. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  padding-right: 26px;
}

/* Icônes et catégorie sont des métadonnées : volontairement discrètes pour
   que le nom et la description portent la carte. */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  min-height: 0;
}

.card-icones {
  font-size: 12px;
  color: var(--fg2);
  min-height: 0;
  opacity: 0.85;
  line-height: 1.2;
}

.card-cat {
  font-size: 10.5px;
  color: var(--fg2);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-play-btn {
  margin-top: auto;
  width: 100%;
  padding: 6px 0;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}
.card-play-btn:hover { background: var(--accent2); }

/* Tooltip */
.card-tooltip {
  display: none;
  position: fixed;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--fg);
  max-width: 260px;
  z-index: 1000;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: auto;
}

/* Chargement */
#loading-msg {
  grid-column: 1 / -1;
  color: var(--fg2);
  font-size: 14px;
  padding: 40px 20px;
  text-align: center;
}

/* Footer pagination */
#accueil-footer {
  background: var(--bg2);
  border-top: 1px solid var(--btn-bg);
  padding: 8px 14px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.footer-local-actions,
.footer-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-local-actions { flex-wrap: wrap; }
.footer-pagination { margin-left: auto; }

.page-btn {
  padding: 5px 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.page-btn:hover:not(:disabled) { background: var(--btn-hover); }
.page-btn:disabled { opacity: 0.4; cursor: default; }

#page-lbl { font-size: 13px; color: var(--fg2); }

/* ══════════════════════════════════════════════════════════════
   ÉCRAN JEU
══════════════════════════════════════════════════════════════ */

#screen-jeu {
  display: none;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}
#screen-jeu.active { display: flex; }

/* Toolbar jeu */
#jeu-toolbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--btn-bg);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

#jeu-options-bar {
  display: contents;
}

.game-resume-dialog {
  position: fixed; inset: 0;
  width: min(31rem, calc(100vw - 2rem)); max-width: none; margin: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--btn-bg));
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg2) 94%, var(--accent) 6%), var(--bg2));
  color: var(--fg); font-family: var(--font-ui);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .55), inset 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.game-resume-dialog::backdrop { background: color-mix(in srgb, var(--bg3) 72%, transparent); backdrop-filter: blur(3px); }
.game-resume-dialog h2 { margin: 0 0 .55rem; color: var(--accent); font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.25; }
.game-resume-detail { margin: 0 0 1.35rem; color: var(--fg2); line-height: 1.5; }
.game-replace-option { display: flex; align-items: center; gap: .55rem; margin: .25rem 0 1.25rem; color: var(--fg2); cursor: pointer; }
.game-replace-option input { width: 1rem; height: 1rem; accent-color: var(--accent); }
.game-resume-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.game-resume-action {
  min-height: 2.5rem; padding: .6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--fg2) 42%, transparent); border-radius: 8px;
  background: var(--btn-bg); color: var(--btn-fg); font: 600 .88rem/1 var(--font-ui); cursor: pointer;
}
.game-resume-action:hover { background: var(--btn-hover); }
.game-resume-action.primary { border-color: var(--accent); background: var(--accent2); color: var(--ui-role-on-action); }
.game-resume-action.danger { color: var(--error-fg); }
.game-resume-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .game-resume-actions { display: grid; grid-template-columns: 1fr 1fr; } }

.toolbar-btn {
  padding: 5px 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.toolbar-btn:hover { background: var(--btn-hover); }
.toolbar-btn.danger { color: var(--error-fg); }
.toolbar-btn.home   { color: var(--accent); }

#toolbar-spacer { flex: 1; }

/* ─── HUD encadrés persistants ─────────────────────────────────────────────── */
#game-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#hud-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* ── Encadré : boîte positionnée, overflow:hidden, contenu en blocs naturels ── */
.hud-encadre {
  position: absolute;
  background: var(--hud-bg, rgba(0, 0, 0, 0.78));
  color: var(--hud-fg, #eee);
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  line-height: 1.5;
  word-break: break-word;
  pointer-events: auto;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 10;
  border: 1px solid var(--hud-border, rgba(255, 255, 255, 0.18));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ── HUD redimensionnable ───────────────────────────────────────────── */
.hud-encadre[data-resizable="1"] .hud-resize-handle {
  position: absolute;
  z-index: 20;
}

.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="s"] { bottom: 0; left: 6px; right: 6px; height: 6px; cursor: s-resize; }
.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="n"] { top: 0;    left: 6px; right: 6px; height: 6px; cursor: n-resize; }
.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="e"] { right: 0;  top: 6px; bottom: 6px; width: 6px;  cursor: e-resize; }
.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="w"] { left: 0;   top: 6px; bottom: 6px; width: 6px;  cursor: w-resize; }

.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="se"] { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="sw"] { bottom: 0; left:  0; width: 10px; height: 10px; cursor: sw-resize; }
.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="ne"] { top: 0;    right: 0; width: 10px; height: 10px; cursor: ne-resize; }
.hud-encadre[data-resizable="1"] .hud-resize-handle[data-dir="nw"] { top: 0;    left:  0; width: 10px; height: 10px; cursor: nw-resize; }

/* ── inner : remplit le cadre, scrollable ── */
.hud-encadre-inner {
  width: 100%;
  height: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

/* Bandes haut/bas : inner en flex pour que flow-row prenne toute la hauteur */
.hud-haut .hud-encadre-inner,
.hud-bas  .hud-encadre-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Panneaux gauche/droite : padding interne géré par le inner, overflow scroll */
.hud-gauche .hud-encadre-inner,
.hud-droite .hud-encadre-inner {
  padding: 8px 10px;
}
/* Coins : hauteur auto → inner en flux normal, pas de height: 100% */
.hud-haut-gauche .hud-encadre-inner,
.hud-haut-droite .hud-encadre-inner,
.hud-bas-gauche  .hud-encadre-inner,
.hud-bas-droite  .hud-encadre-inner {
  height: auto;
  overflow-y: visible;
}

/* ── Row (bandes haut/bas) : flex-row qui s'étire dans le flex-column du inner ── */
.hud-encadre-flow-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Column (panneaux, coins) : blocs empilés ── */
.hud-encadre-flow-column {
  display: block;
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
}

.hud-haut .hud-encadre-inner > .hud-flow-has-imagemap,
.hud-bas  .hud-encadre-inner > .hud-flow-has-imagemap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.hud-haut .hud-encadre-inner > .hud-flow-has-media.hud-encadre-flow-column,
.hud-bas  .hud-encadre-inner > .hud-flow-has-media.hud-encadre-flow-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Image ── */
.hud-encadre-image {
  display: block;
  border-radius: 3px;
  object-fit: contain;
}

.hud-encadre-video {
  display: block;
  border-radius: 3px;
  object-fit: contain;
  background: #000;
  max-width: 100%;
  max-height: calc(var(--hud-frame-h, 160px) - 12px);
  pointer-events: auto;
}

/* Row (bandes haut/bas) : image contrainte par --hud-frame-h injectée par JS */
.hud-encadre-flow-row .hud-encadre-image {
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--hud-frame-h, 80px) - 12px);
  max-height: calc(var(--hud-frame-h, 80px) - 12px); /* - padding vertical */
  max-width: min(56%, calc((var(--hud-frame-h, 80px) - 12px) * 2.4));
  object-fit: contain;
}

/* Panneaux gauche/droite : image contrainte par la largeur du panneau */
.hud-gauche .hud-encadre-flow-column .hud-encadre-image,
.hud-droite .hud-encadre-flow-column .hud-encadre-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--hud-frame-w, 200px) * 0.75);
  margin-bottom: 5px;
}

/* Column générique (panneaux) : image pleine largeur */
.hud-encadre-flow-column .hud-encadre-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 45dvh;
  margin-bottom: 5px;
}

.hud-haut .hud-flow-has-media.hud-encadre-flow-column .hud-encadre-image,
.hud-bas  .hud-flow-has-media.hud-encadre-flow-column .hud-encadre-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: max(1px, calc(var(--hud-frame-h, 200px) - 20px));
  object-fit: contain;
  margin: 0 auto;
}

/* Coins : image pleine largeur, hauteur auto → le cadre s'adapte au contenu */
.hud-haut-gauche .hud-encadre-flow-column .hud-encadre-image,
.hud-haut-droite .hud-encadre-flow-column .hud-encadre-image,
.hud-bas-gauche  .hud-encadre-flow-column .hud-encadre-image,
.hud-bas-droite  .hud-encadre-flow-column .hud-encadre-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin-bottom: 0;
}

/* ── Imagemap dans HUD ── */
/* Le wrap msg-imagemap devient block pleine largeur dans le flow */
.hud-encadre-imagemap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
/* L'image à l'intérieur s'adapte à la largeur disponible */
.hud-encadre-imagemap img.msg-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--hud-frame-h, 200px) - 8px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.hud-haut .hud-flow-has-imagemap .hud-encadre-imagemap img.msg-image,
.hud-bas  .hud-flow-has-imagemap .hud-encadre-imagemap img.msg-image {
  width: auto;
  height: max(1px, calc(var(--hud-frame-h, 200px) - 20px));
  max-width: 100%;
  max-height: max(1px, calc(var(--hud-frame-h, 200px) - 20px));
}
/* Dans un flow-row (haut/bas + texte), l'imagemap prend toute la largeur */
.hud-encadre-flow-row .hud-encadre-imagemap {
  flex: 1 1 100%;
  min-width: 0;
}
/* Dans un flow-column (haut/bas seul), l'imagemap remplit le frame */
.hud-encadre-flow-column .hud-encadre-imagemap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.hud-haut .hud-flow-has-imagemap .hud-encadre-imagemap,
.hud-bas  .hud-flow-has-imagemap .hud-encadre-imagemap {
  height: 100%;
}
.hud-encadre-flow-column .hud-encadre-imagemap img.msg-image {
  max-height: calc(var(--hud-frame-h, 200px) - 8px);
}
/* Le canvas overlay suit la taille de l'image */
.hud-encadre-imagemap canvas {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* ── Texte ── */
.hud-encadre-flow-row .hud-encadre-text {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  align-self: flex-start;
}

.hud-encadre-flow-column .hud-encadre-text {
  overflow-wrap: anywhere;
}

/* ── Split : zones côte à côte (row) ou empilées (column) ── */
.hud-encadre-split {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 100%;
  gap: 0;
}

.hud-encadre-split.hud-split-row  { flex-direction: row; }
.hud-encadre-split.hud-split-column { flex-direction: column; }

.hud-encadre-zone {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* flow-row dans une zone : prend toute la place disponible */
.hud-encadre-zone .hud-encadre-flow-row {
  flex: 1 1 0;
  align-self: stretch;
  padding: 6px 10px;
}

/* flow-column dans une zone : s'aligne à gauche, padding propre */
.hud-encadre-zone .hud-encadre-flow-column {
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
}

.hud-haut .hud-encadre-split.hud-split-row > .hud-encadre-zone.hud-zone-image-only .hud-encadre-flow-column,
.hud-bas .hud-encadre-split.hud-split-row > .hud-encadre-zone.hud-zone-image-only .hud-encadre-flow-column {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
}

.hud-haut .hud-encadre-split.hud-split-row > .hud-encadre-zone.hud-zone-image-only .hud-encadre-flow-column .hud-encadre-image,
.hud-bas .hud-encadre-split.hud-split-row > .hud-encadre-zone.hud-zone-image-only .hud-encadre-flow-column .hud-encadre-image {
  width: auto;
  height: calc(var(--hud-frame-h, 80px) - 12px);
  max-height: calc(var(--hud-frame-h, 80px) - 12px);
  max-width: 100%;
  margin-bottom: 0;
}

.hud-haut .hud-encadre-split.hud-split-row.hud-split-has-image-only > .hud-encadre-zone.hud-zone-image-only,
.hud-bas .hud-encadre-split.hud-split-row.hud-split-has-image-only > .hud-encadre-zone.hud-zone-image-only {
  min-width: 0;
}

.hud-encadre-split.hud-split-row > .hud-encadre-zone:first-child .hud-encadre-flow-row,
.hud-encadre-split.hud-split-row > .hud-encadre-zone:first-child .hud-encadre-flow-column {
  padding-right: 2px;
}

.hud-encadre-split.hud-split-row > .hud-encadre-zone:last-child .hud-encadre-flow-row,
.hud-encadre-split.hud-split-row > .hud-encadre-zone:last-child .hud-encadre-flow-column {
  padding-left: 2px;
}

/* Image dans flow-column d'une zone split : contrainte par la hauteur du cadre */
.hud-encadre-zone .hud-encadre-flow-column .hud-encadre-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(calc(var(--hud-frame-h, 160px) * 0.42), calc(var(--hud-frame-w, 220px) * 0.82));
  margin-bottom: 0;
}

/* Quand split est actif, inner cède marge et défilement aux zones (:has avec classe JS de repli). */
.hud-encadre-inner:has(> .hud-encadre-split),
.hud-encadre-inner.hud-has-split {
  padding: 0;
  overflow: hidden;
}

.hud-encadre-split-sep {
  flex: 0 0 1px;
  background: var(--hud-border, rgba(255, 255, 255, 0.2));
  align-self: stretch;
}

.hud-encadre .msg-text,
.hud-encadre .hud-encadre-text,
.hud-encadre .embed-field-val,
.hud-encadre .embed-desc,
.hud-encadre .msg-error {
  color: inherit;
}

.hud-encadre .msg-info,
.hud-encadre .msg-sep,
.hud-encadre .embed-sep,
.hud-encadre .md-quote {
  color: var(--hud-muted, currentColor);
}

.hud-encadre .md-quote {
  border-left-color: var(--hud-border, currentColor);
}

.hud-encadre .msg-block,
.hud-encadre .md-code {
  background: var(--hud-code-bg, transparent);
  color: inherit;
  border-radius: 4px;
}

.hud-encadre .md-spoiler {
  background: var(--hud-spoiler-bg, rgba(255,255,255,0.25));
  color: var(--hud-spoiler-bg, rgba(255,255,255,0.25));
}

.hud-encadre .md-spoiler.revealed {
  color: inherit;
}

.hud-encadre .msg-embed {
  background: var(--hud-panel-bg, rgba(255,255,255,0.06));
  border-left-color: var(--hud-border, currentColor);
}

.hud-encadre .embed-title,
.hud-encadre .embed-field-key {
  color: var(--hud-accent, currentColor);
}

/* ── Positions ── */
/* Bandes : left+right (ou top+bottom) fixent déjà les 2 côtés → JS donne height (ou width) */
.hud-haut  { top: 0; left: 0; right: 0; border-radius: 0 0 6px 6px; }
.hud-bas   { bottom: 0; left: 0; right: 0; border-radius: 6px 6px 0 0; }
/* Panneaux : top+bottom fixés → JS donne width. inner scrollable verticalement */
.hud-gauche { top: 0; bottom: 0; left: 0; border-radius: 0 6px 6px 0; }
.hud-droite { top: 0; bottom: 0; right: 0; border-radius: 6px 0 0 6px; }
/* Coins : un seul coin ancré, taille libre → hauteur auto (contenu), largeur fixée par JS */
.hud-haut-gauche { top: 0; left: 0; border-radius: 0 0 6px 0; }
.hud-haut-droite { top: 0; right: 0; border-radius: 0 0 0 6px; }
.hud-bas-gauche  { bottom: 0; left: 0; border-radius: 0 6px 0 0; }
.hud-bas-droite  { bottom: 0; right: 0; border-radius: 6px 0 0 0; }

/* Valeurs de repli statiques ; le JavaScript écrit ensuite les mesures réelles. */
#game-area.hud-has-top    #text-zone-wrap { padding-top: 46px; }
#game-area.hud-has-bottom #text-zone-wrap { padding-bottom: 46px; }
#game-area.hud-has-left   #text-zone-wrap { padding-left: 196px; }
#game-area.hud-has-right  #text-zone-wrap { padding-right: 196px; }

/* Mobile : gauche/droite → repliés en haut/bas */
@media (max-width: 600px) {
  .hud-gauche { top: 0; bottom: auto; left: 0; right: 0; max-width: none; border-radius: 0 0 6px 6px; }
  .hud-droite { bottom: 0; top: auto; left: 0; right: 0; max-width: none; border-radius: 6px 6px 0 0; }
  #game-area.hud-has-left  #text-zone-wrap { padding-left:  10px; padding-top: 46px; }
  #game-area.hud-has-right #text-zone-wrap { padding-right: 10px; padding-bottom: 46px; }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* Zone de texte */
#text-zone-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 10px 14px 6px;
  background: var(--bg3);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg);
  user-select: text;
  -webkit-user-select: text;
  position: relative;
}

.text-excl-top-spacer,
.text-excl-bottom-spacer,
.text-excl-clear {
  display: block;
  width: 100%;
  clear: both;
  pointer-events: none;
}

.text-excl-top-spacer,
.text-excl-bottom-spacer,
.text-excl-clear,
.text-flow-footer-marker {
  height: 0;
}

.text-excl-float {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

.text-excl-left {
  float: left;
  margin: 0 12px 8px 0;
}

.text-excl-right {
  float: right;
  margin: 0 0 8px 12px;
}

/* Éléments dans la zone texte */
.msg-text   { color: var(--fg); margin-bottom: 2px; min-height: 1em; word-break: break-word; }
.msg-bold   { font-weight: bold; }
.msg-block  {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: transparent;
  color: var(--block-fg);
  padding: 0;
  margin: 1px 0;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-block-story {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: transparent;
  color: var(--block-fg);
  padding: 0;
  margin: 1px 0;
  border-radius: 0;
  white-space: normal;
  word-break: break-word;
}

/* Le parseur conserve les retours qui entourent un bloc Markdown. Une seule
   coupure crée alors deux lignes vides techniques, une de chaque côté. On les
   réduit de moitié sans toucher aux lignes vides voulues au milieu d'un texte. */
.msg-block + .msg-text:empty,
.msg-text:empty:has(+ .msg-block) {
  min-height: 0.5em;
  line-height: 0.85;
  margin-bottom: 1px;
}
.msg-block-story .msg-text,
.msg-block-story .msg-info,
.msg-block-story .msg-error,
.msg-block-story .msg-sep {
  color: inherit;
}
.msg-block-story .md-quote {
  color: color-mix(in srgb, var(--block-fg) 78%, var(--fg2));
  border-left-color: color-mix(in srgb, var(--block-fg) 35%, var(--accent));
}
.msg-block-story .md-code {
  color: inherit;
  background: color-mix(in srgb, var(--bg2) 76%, transparent);
}
.msg-block-semantic {
  position: relative;
  overflow: visible;
  padding: 14px 16px;
}
.msg-block-semantic-head {
  display: none;
}
.msg-block-semantic-body {
  position: relative;
  z-index: 1;
}
.msg-block-semantic-body > :last-child {
  margin-bottom: 0;
}
.msg-block--story {
  border-left: 4px solid color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--ui-surface-overlay) 92%, transparent);
}
.msg-block--narration {
  border-left: none;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle) 70%, var(--accent) 18%);
  border-radius: calc(var(--ui-radius-lg) + 2px);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 94%, white 6%), color-mix(in srgb, var(--ui-surface-overlay) 100%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    var(--ui-shadow-button);
  padding: 16px 20px 18px;
}
.msg-block--narration .msg-block-semantic-body {
  line-height: 1.72;
  letter-spacing: 0.01em;
  font-size: 1.02em;
  color: color-mix(in srgb, var(--fg) 96%, var(--fg2));
}
.msg-block--dialogue {
  border-left: 6px solid color-mix(in srgb, var(--accent2) 78%, var(--accent));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-overlay) 82%, var(--accent) 18%), color-mix(in srgb, var(--ui-surface-overlay) 96%, transparent));
  border-radius: calc(var(--ui-radius-lg) + 2px) var(--ui-radius-lg) var(--ui-radius-lg) calc(var(--ui-radius-lg) + 2px);
  padding: 16px 24px 20px 26px;
  box-shadow: var(--ui-shadow-card);
}
.msg-block--dialogue::before {
  content: '\201C';
  position: absolute;
  top: -2px;
  left: 8px;
  font-size: 46px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent2) 26%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.msg-block--dialogue .msg-block-semantic-body {
  padding-left: 8px;
  padding-right: 10px;
}
.msg-block--dialogue::after {
  content: '\201D';
  position: absolute;
  right: 8px;
  bottom: -18px;
  font-size: 46px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent2) 26%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.msg-block--pensee {
  margin-left: 18px;
  margin-right: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, transparent);
  border-left: 3px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-overlay) 94%, white 6%), color-mix(in srgb, var(--ui-surface-overlay) 100%, transparent));
  border-radius: calc(var(--ui-radius-lg) + 6px);
  padding-left: 18px;
}
.msg-block--pensee .msg-block-semantic-body {
  font-style: italic;
  color: color-mix(in srgb, var(--fg) 92%, var(--fg2));
}
.msg-block--pensee::before {
  content: '\2026';
  position: absolute;
  top: 6px;
  right: 14px;
  font-size: 28px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 34%, transparent);
  pointer-events: none;
}
.msg-block--systeme {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--ui-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-panel) 84%, var(--accent) 16%), color-mix(in srgb, var(--ui-surface-overlay) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
    var(--ui-shadow-button);
  border-radius: var(--ui-radius-md);
}
.msg-block--systeme::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), color-mix(in srgb, var(--accent2) 84%, transparent));
}
.msg-block--systeme .msg-block-semantic-body {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.msg-block--journal {
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle) 72%, var(--accent) 28%);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--ui-surface-overlay) 92%, white 8%), color-mix(in srgb, var(--ui-surface-overlay) 98%, transparent)),
    repeating-linear-gradient(to bottom, transparent 0 22px, color-mix(in srgb, var(--ui-border-subtle) 18%, transparent) 22px 23px);
  padding-left: 50px;
}
.msg-block--journal::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--accent2) 28%, transparent);
  opacity: 0.9;
}
.msg-block--journal .msg-block-semantic-body {
  padding-left: 10px;
}
/* Labels de langage masqués - on veut juste la coloration, pas de boîte visible */
.msg-block[data-lang]::before { display: none; }
/* highlight.js s'applique sur le <code> interne - fond transparent */
.msg-block .hljs { background: transparent; padding: 0; }
/* Blockquote markdown (> texte) */
.md-quote {
  border-left: 3px solid var(--accent);
  margin: 4px 0;
  padding: 2px 10px;
  color: var(--fg2);
  font-style: italic;
}
.msg-error  { color: var(--error-fg); font-weight: bold; margin: 4px 0; }
.msg-info   { color: var(--fg2); font-size: 0.92em; margin: 2px 0; font-style: italic; }
.msg-sep    { color: var(--fg2); font-family: var(--font-mono); font-size: 0.78em; margin: 6px 0; }
.msg-image-link { display: inline-block; margin: 8px 0; }
.msg-image  { max-width: 560px; max-height: 360px; border-radius: 6px; display: block; }
.msg-tilemap-grid { display: grid; margin: 8px 0; width: fit-content; max-width: 100%; image-rendering: pixelated; }
.msg-tilemap-grid .tilemap-cell-img { display: block; width: 100%; height: auto; }
.msg-tilemap-sprite {
  /* Sprite de texte : affiché à sa TAILLE RÉELLE, posée en inline par le JS.
     Le CSS ne fait que borner une tuile trop grande pour la zone de texte ;
     il n'agrandit jamais une petite tuile, ce que l'auteur n'a pas demandé. */
  display: block; margin: 8px 0; image-rendering: pixelated;
  max-height: 60vh;
  max-width: 100%;
}
.msg-tilemap-sprite.is-zoomable { cursor: zoom-in; }
.tilemap-sprite { display: inline-block; }
.hud-encadre-tilemap-grid { display: grid; width: 100%; image-rendering: pixelated; }
.hud-encadre-tilemap-grid .tilemap-cell-img { display: block; width: 100%; height: auto; }
.hud-encadre-tilemap-sprite { display: block; width: 100%; image-rendering: pixelated; }

/* ── Tooltip interactif jdr-tooltip ────────────────────────── */
.jdr-tooltip {
  position: relative;
  display: inline;
  cursor: help;
  border-bottom: 1px dashed var(--accent, #8a6fff);
  color: var(--accent, #8a6fff);
}
.jdr-tooltip--disabled {
  cursor: not-allowed;
  border-bottom-color: var(--muted, #6c7086);
  color: var(--muted, #6c7086);
  filter: grayscale(0.65);
  opacity: 0.58;
}

/* ── Élément cliquable jdr-clickable ────────────────────────── */
.jdr-clickable {
  position: relative;
  display: inline;
  cursor: pointer;
  border-bottom: 2px solid var(--success, #a6e3a1);
  color: var(--success, #a6e3a1);
  transition: opacity 0.15s;
}
.jdr-clickable:hover { opacity: 0.75; }
.jdr-clickable--disabled {
  cursor: not-allowed;
  border-bottom-color: var(--muted, #6c7086);
  color: var(--muted, #6c7086);
  filter: grayscale(0.65);
  opacity: 0.58;
}
.jdr-clickable--disabled:hover { opacity: 0.58; }

/* Dans un bandeau plein écran, une action de navigation doit rester aussi
   visible qu'un bouton, même lorsque le panneau de choix est masqué. */
[data-ui="fullscreen"] .hud-bas .jdr-clickable {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--success, #a6e3a1);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  text-decoration: none;
  font-weight: 700;
}

/* Un bandeau bas de hauteur fixe ne doit pas empiler son action sous le texte :
   l'action reste à droite et la consigne utilise l'espace restant. */
[data-ui="fullscreen"] .hud-bas .hud-flow-has-clickable {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
[data-ui="fullscreen"] .hud-bas .hud-flow-has-clickable > .hud-encadre-text,
[data-ui="fullscreen"] .hud-bas .hud-flow-has-clickable > .msg-text {
  min-width: 0;
}
[data-ui="fullscreen"] .hud-bas .hud-flow-has-clickable > .msg-text:last-child {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ── Éléments drag&drop ────────────────────────────────────────── */
/* Source et cible ont le même style par défaut : l'auteur ne révèle pas les rôles. */
.jdr-interactive {
  position: relative;
  display: inline;
  cursor: pointer;
  border-bottom: 2px dashed var(--accent, #e8b84b);
  color: inherit;
  transition: opacity 0.15s, outline 0.1s;
  user-select: text;
  -webkit-user-select: text;
}
/* État sélectionné (tap mobile ou clic - source active) */
.jdr-interactive.jdr-selected {
  outline: 2px solid var(--accent, #e8b84b);
  outline-offset: 2px;
  border-bottom-style: solid;
  opacity: 0.85;
}
.jdr-interactive:hover:not(.jdr-draggable--disabled) { opacity: 0.8; }
.jdr-draggable--disabled {
  cursor: not-allowed;
  border-bottom-color: var(--muted, #6c7086);
  color: var(--muted, #6c7086);
  filter: grayscale(0.65);
  opacity: 0.55;
}
.jdr-draggable--disabled:hover { opacity: 0.55; }
/* montrer-type: true - différenciation visuelle source vs cible (opt-in) */
.jdr-interactive.jdr-show-source { cursor: grab; border-bottom-style: solid; }
.jdr-interactive.jdr-show-target { cursor: crosshair; border-bottom-style: dotted; }
.jdr-interactive.jdr-show-both   { cursor: grab; border-bottom: none; text-decoration: underline double var(--accent, #e8b84b) 2px; text-underline-offset: 3px; }
/* Cibles potentielles mises en évidence pendant un drag/une sélection.
   Déclaré APRÈS .jdr-show-* pour rester visible quand montrer-type est actif. */
.jdr-interactive.jdr-highlighted:not(.jdr-selected) {
  background: color-mix(in srgb, var(--accent, #e8b84b) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #e8b84b) 45%, transparent);
  border-radius: 4px;
}

.jdr-tooltip-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  max-width: 280px;
  background: var(--bg2, #1e1e2e);
  color: var(--fg, #cdd6f4);
  border: 1px solid var(--accent, #8a6fff);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85em;
  line-height: 1.4;
  z-index: 100;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.jdr-tooltip-media-img {
  display: block;
  max-width: 220px;
  max-height: 150px;
  width: auto;
  height: auto;
  margin: 6px 0;
  border-radius: 6px;
}
.jdr-tooltip-media-video {
  display: block;
  width: min(260px, 70vw);
  max-height: 170px;
  margin: 6px 0;
  border-radius: 6px;
  background: #000;
}
.jdr-tooltip-sound-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  min-height: 1.6em;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--accent, #8a6fff);
  color: var(--bg, #111);
  font-weight: 700;
}
.jdr-tooltip-bubble--visible { display: block; }
/* petite flèche en bas de la bulle */
.jdr-tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--accent, #8a6fff);
}

/* ── Image map ──────────────────────────────────────────────── */
.msg-imagemap { display: block; margin: 8px 0; line-height: 0; }
.msg-imagemap img { max-width: 560px; max-height: 480px; border-radius: 6px; display: block; cursor: default; }
.jdr-imagemap-tooltip {
  display: none;
  position: fixed;
  z-index: 2147483647;
  max-width: 260px;
  padding: 6px 10px;
  background: var(--bg2, #1e1e2e);
  color: var(--fg, #d8d8e8);
  border: 1px solid var(--accent, #8a6fff);
  border-radius: 6px;
  font-size: 0.88em;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.msg-video  { display: block; width: min(100%, 720px); max-height: 420px; margin: 10px 0; border-radius: 8px; background: #000; box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
/* Vidéo hébergée : une iframe n'a pas de dimension intrinsèque, contrairement
   à une balise video. Le conteneur impose donc le ratio 16/9 pour garder la
   même apparence qu'une vidéo ordinaire, sans casser la mise en page. */
.msg-video-embed { aspect-ratio: 16 / 9; height: auto; max-height: 420px; overflow: hidden; padding: 0; }
.msg-video-embed iframe { width: 100%; height: 100%; display: block; border: 0; }
.msg-embed  {
  background: var(--bg2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 8px 0;
}
.embed-title { font-size: 1.05em; font-weight: bold; color: var(--embed-title); margin-bottom: 4px; }
.embed-sep   { color: var(--fg2); font-family: var(--font-mono); font-size: 0.78em; }
.embed-desc  { color: var(--fg2); font-size: 0.92em; margin: 4px 0; white-space: pre-wrap; }
.embed-fields { margin-top: 6px; }
.embed-field-key { color: var(--embed-field); font-weight: bold; font-size: 0.92em; }
.embed-field-examine { cursor: pointer; }
.embed-field-examine:hover { text-decoration: underline; }
.embed-field-val { color: var(--fg); font-size: 0.92em; margin-left: 16px; margin-bottom: 4px; }

/* Panneau de choix */
#choix-panel {
  background: var(--bg2);
  border: 1px solid var(--btn-bg);
  border-radius: 8px;
  margin: 4px 8px;
  padding: 6px 8px 8px;
  flex-shrink: 0;
}
#choix-panel.hidden { display: none; }
#choix-label { font-size: 10px; color: var(--fg2); margin-bottom: 4px; }
#choix-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

/* Android : boutons sur 2 lignes max avec scroll horizontal */
body.android #choix-buttons {
  flex-wrap: wrap;
  flex-direction: column;
  max-height: calc(2 * 38px + 6px);
  overflow-x: auto;
  overflow-y: hidden;
  align-content: flex-start;
  padding-bottom: 4px;
}

.choix-btn {
  padding: 7px 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  max-width: 300px;
  text-align: left;
  word-break: break-word;
}
.choix-btn:hover:not(:disabled) { background: var(--btn-hover); }
.choix-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--btn-bg);
  filter: grayscale(0.15);
}

[data-ui="cards"] #choix-panel {
  /* En flux normal (pas position:fixed) : le texte au-dessus garde sa place
     et reprend toute la hauteur quand il n'y a pas de carte (panel masqué). */
  flex-shrink: 0;
  padding: 0 clamp(12px, 4vw, 72px) 6px;
  background: transparent;
  border: 0;
  margin: 0;
  z-index: 40;
}

[data-ui="cards"] #choix-label {
  display: none;
}

[data-ui="cards"] #choix-buttons {
  display: block;
}

.cards-choice-wrap {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.cards-rail-track {
  display: flex;
  flex-flow: row nowrap;
  /* safe center : centre les cartes quand elles tiennent dans la largeur,
     sans rogner le début quand elles débordent (le scroll prend le relais). */
  justify-content: safe center;
  gap: clamp(12px, 1.5vw, 22px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 18px 4px 20px;
  cursor: grab;
}

.cards-rail-track > .choice-card {
  /* Taille pilotée par la HAUTEUR de la fenêtre (--card-h) : les cartes occupent
     une part CONSTANTE de la hauteur quel que soit l'écran - fini l'effet
     « énormes sur petit écran, petites sur widescreen ». La largeur en découle
     (ratio 2/3). Bornes px pour rester lisibles sans être démesurées. On fixe
     largeur ET hauteur explicitement (pas de dépendance à aspect-ratio en flex,
     capricieux). */
  --card-h: clamp(150px, 30vh, 240px);
  flex: 0 0 auto;
  height: var(--card-h);
  width: calc(var(--card-h) * 2 / 3);
}

.cards-rail-track::-webkit-scrollbar { display: none; }

.cards-rail-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.cards-rail-arrow {
  width: 40px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(6px);
}

.cards-rail-arrow:hover { background: color-mix(in srgb, var(--btn-hover) 82%, transparent); }
.cards-rail-arrow.is-hidden { visibility: hidden; }

.choice-card {
  --card-accent: var(--accent);
  position: relative;
  aspect-ratio: 2 / 3;
  min-height: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  padding: 0;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  perspective: 1100px;
  transition: transform 0.16s ease;
}

.choice-card:hover:not(:disabled) {
  transform: translateY(-10px) rotate(-1deg);
}

.choice-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

/* Conteneur 3D : porte les deux faces et exécute le retournement. */
.choice-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.05, 0.2, 1);
}

.choice-card.is-flipping .choice-card-inner {
  transform: rotateY(180deg);
}

.choice-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* La face reste plate : ses enfants (image, texte) sont aplatis dans son
     plan et donc masqués avec elle quand c'est son dos qui fait face. */
  transform-style: flat;
  border: 2px solid color-mix(in srgb, var(--card-accent) 72%, #fff 8%);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 48%),
    var(--bg);
  box-shadow: 0 22px 38px rgba(0, 0, 0, 0.48);
}

.choice-card-face--back {
  transform: rotateY(180deg);
}

/* Sécurité multi-navigateurs : le texte/l'image ne doivent jamais transparaître
   en miroir à travers le dos de leur face (z-index/stacking qui échapperait au
   backface culling). On masque aussi leur propre dos. */
.choice-card-face .choice-card-art,
.choice-card-face .choice-card-body {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.choice-card:hover:not(:disabled) .choice-card-face {
  border-color: var(--card-accent);
  box-shadow: 0 30px 52px rgba(0, 0, 0, 0.58);
}

.choice-card-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--card-accent) 35%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #000), color-mix(in srgb, var(--bg2) 78%, #fff));
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.choice-card-art.has-image {
  background-size: cover;
  background-position: center;
}

.choice-card-art.is-hidden-art:not(.has-image) {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--card-accent) 18%, var(--bg)), color-mix(in srgb, var(--card-accent) 18%, var(--bg)) 10px, var(--bg2) 10px, var(--bg2) 20px);
  background-size: cover;
  background-position: center;
}

.choice-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 38%;
  padding: 44px 12px 13px;
  display: grid;
  align-content: end;
  justify-items: center;
  text-align: center;
  gap: 4px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.62) 58%, transparent);
}

.choice-card-title {
  font-weight: 700;
  font-size: clamp(14px, 1.02vw, 18px);
  line-height: 1.2;
  word-break: break-word;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

.choice-card-subtitle {
  color: color-mix(in srgb, #fff 78%, var(--card-accent));
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.25;
  word-break: break-word;
  text-shadow: 0 1px 3px #000;
}

.choice-card[data-rarity="rare"] .choice-card-face,
.choice-card[data-rarity="epique"] .choice-card-face,
.choice-card[data-rarity="epic"] .choice-card-face {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent) 38%, transparent), 0 14px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 720px) {
  [data-ui="cards"] #choix-panel { padding-inline: 4px; }
  .cards-choice-wrap { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 4px; }
  /* Sur petite largeur : borner AUSSI par la largeur (la largeur d'une carte =
     --card-h * 2/3 doit tenir ~3 cartes dans l'écran). On réduit --card-h en
     tenant compte de vw pour que 3 cartes + flèches rentrent. */
  .cards-rail-track > .choice-card { --card-h: min(clamp(150px, 30vh, 240px), 42vw); }
  .cards-rail-arrow { width: 30px; height: 48px; font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   UI deck - vraie pile de cartes facon Reigns.
   La pile (.deck-stack) vit dans #game-area ; #text-zone-wrap n'est pas utilise.
   --------------------------------------------------------------------------- */
[data-ui="deck"] #game-area {
  --deck-card-w: clamp(280px, 30vw, 430px);
  --deck-card-h: min(66vh, 640px);
  /* Overlay dérivé de la palette (surface sombre de la teinte de fond + texte). */
  --deck-overlay-bg: color-mix(in srgb, var(--bg) 30%, black 70%);
  --deck-overlay-fg: color-mix(in srgb, white 88%, var(--accent));
  position: relative;
  overflow: hidden;
  /* Ambiance "table de jeu" DÉRIVÉE de la palette : dégradé assombri de la
     teinte de fond (--bg) vers un fond profond, + deux halos d'accent
     (accent principal & secondaire) à faible opacité. Reste sombre/immersif
     mais prend la teinte de la palette active (au lieu d'un bleu codé en dur). */
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 28%),
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 24%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 52%, black 48%) 0%,
      color-mix(in srgb, var(--bg) 30%, black 70%) 48%,
      color-mix(in srgb, var(--bg) 14%, black 86%) 100%);
}

/* La zone texte classique n'a aucun rôle en deck. */
[data-ui="deck"] #text-zone-wrap { display: none; }

/* Conteneur de pile, centré dans l'écran de jeu. */
[data-ui="deck"] .deck-stack {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
}

/* Carte (fond + top). Les cartes fantômes donnent la profondeur de pile. */
[data-ui="deck"] .deck-card {
  position: absolute;
  width: var(--deck-card-w);
  height: var(--deck-card-h);
  border-radius: 14px;
  overflow: hidden;
  /* Matière de carte dérivée de la palette (surface sombre + bordure d'accent). */
  background: color-mix(in srgb, var(--bg2) 55%, black 45%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

/* Cartes de fond : décalées/réduites selon la profondeur (1 = juste dessous). */
[data-ui="deck"] .deck-card--ghost {
  transform: translateY(calc(var(--deck-depth) * 10px)) scale(calc(1 - var(--deck-depth) * 0.035));
  filter: brightness(calc(1 - var(--deck-depth) * 0.14));
  background: color-mix(in srgb, var(--bg2) 45%, black 55%);
  pointer-events: none;
}

/* Carte du dessus : interactive, suit le pointeur. */
[data-ui="deck"] .deck-card--top {
  pointer-events: auto;
  cursor: grab;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-ui="deck"] .deck-card--dragging { cursor: grabbing; transition: none; }
[data-ui="deck"] .deck-card--snapback { transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Arrivée de la carte du dessus (dépose sur la pile). */
[data-ui="deck"] .deck-card--top.deck-card--enter {
  transform: translateY(-18px) scale(0.94);
  opacity: 0;
}
[data-ui="deck"] .deck-card--top {
  opacity: 1;
}

/* Départ de la carte validée, dans la direction choisie. */
[data-ui="deck"] .deck-card--leaving {
  transition: transform 0.26s ease, opacity 0.26s ease;
  pointer-events: none;
}
[data-ui="deck"] .deck-card--leaving.deck-leave-left  { transform: translateX(-72vw) rotate(-18deg); opacity: 0; }
[data-ui="deck"] .deck-card--leaving.deck-leave-right { transform: translateX(72vw) rotate(18deg); opacity: 0; }
[data-ui="deck"] .deck-card--leaving.deck-leave-up    { transform: translateY(-80vh) rotate(6deg); opacity: 0; }
[data-ui="deck"] .deck-card--leaving.deck-leave-down  { transform: translateY(80vh) rotate(-6deg); opacity: 0; }

/* Illustration plein cadre. */
[data-ui="deck"] .deck-card-art {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg2) 40%, black 60%), color-mix(in srgb, var(--bg) 20%, black 80%));
  background-size: cover;
  background-position: center;
}
[data-ui="deck"] .deck-card--has-image .deck-card-art { background-size: cover; }
/* Tuile (sprite) en illustration de carte deck : centrée, à taille raisonnable,
   sans déformation (aspect-ratio posé en inline). Ex. le perso d'un labyrinthe. */
[data-ui="deck"] .deck-card-art--has-sprite {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
[data-ui="deck"] .deck-card-art-sprite {
  height: min(58%, 220px); width: auto; max-width: 80%;
  background-repeat: no-repeat; image-rendering: pixelated;
}

/* Encadré texte narratif, en bas de la carte, lisible sur l'illustration. */
[data-ui="deck"] .deck-card-body {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 52px;            /* laisse la place à la flèche « bas » sous l'encadré */
  max-height: 40%;
  overflow: auto;
  padding: 12px 15px;
  border-radius: 8px;
  background: var(--deck-overlay-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--deck-overlay-fg);
  text-align: center;
  font-size: min(var(--ui-text-size, 15px), 14.5px);
  line-height: 1.4;
  backdrop-filter: blur(4px);
  z-index: 2;
}
[data-ui="deck"] .deck-card-body .msg-text,
[data-ui="deck"] .deck-card-body .msg-block,
[data-ui="deck"] .deck-card-body .msg-block-story,
[data-ui="deck"] .deck-card-body .msg-block-semantic,
[data-ui="deck"] .deck-card-body .md-quote {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  padding: 0;
  margin: 0 0 6px;
  max-width: none;
}
[data-ui="deck"] .deck-card-body > :last-child { margin-bottom: 0; }

/* Aperçu directionnel pendant le glisser : liseré du côté visé. */
[data-ui="deck"] .deck-card.deck-hint-left  { box-shadow: -14px 0 0 -8px var(--accent), 0 24px 52px rgba(0,0,0,0.5); }
[data-ui="deck"] .deck-card.deck-hint-right { box-shadow: 14px 0 0 -8px var(--accent), 0 24px 52px rgba(0,0,0,0.5); }
[data-ui="deck"] .deck-card.deck-hint-up    { box-shadow: 0 -14px 0 -8px var(--accent), 0 24px 52px rgba(0,0,0,0.5); }
[data-ui="deck"] .deck-card.deck-hint-down  { box-shadow: 0 14px 0 -8px var(--accent), 0 24px 52px rgba(0,0,0,0.5); }

/* Flèches directionnelles ancrées sur les bords de la carte. */
[data-ui="deck"] .deck-edge-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(var(--deck-card-w) - 24px);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--bg) 26%, black 74%);
  color: color-mix(in srgb, white 84%, var(--accent));
  font-family: var(--font-text, inherit);
  letter-spacing: var(--ui-letter, normal);
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 5;
}
[data-ui="deck"] .deck-edge-arrow:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 30%, black 55%); }
[data-ui="deck"] .deck-edge-arrow:disabled { opacity: 0.32; cursor: not-allowed; }
[data-ui="deck"] .deck-edge-glyph { flex: 0 0 auto; font-size: 15px; line-height: 1; }
[data-ui="deck"] .deck-edge-label {
  min-width: 0;
  /* Libellé long : passe sur plusieurs lignes (3 max) au lieu de s'étirer en largeur. */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  max-width: 40vw;
}

/* gauche/droite : centrées verticalement, débordant vers l'extérieur du bord. */
[data-ui="deck"] .deck-edge-left  { left: 8px; top: 38%; transform: translateY(-50%); flex-direction: row-reverse; }
[data-ui="deck"] .deck-edge-right { right: 8px; top: 38%; transform: translateY(-50%); }
/* Chaque pastille latérale reste dans sa moitié de carte : jamais de collision au centre. */
[data-ui="deck"] .deck-edge-left,
[data-ui="deck"] .deck-edge-right { max-width: calc(var(--deck-card-w) / 2 - 18px); }
/* haut/bas : centrées horizontalement sur le bord de la carte. */
[data-ui="deck"] .deck-edge-up    { top: 8px; left: 50%; transform: translateX(-50%); }
[data-ui="deck"] .deck-edge-down  { bottom: 8px; left: 50%; transform: translateX(-50%); }
[data-ui="deck"] .deck-edge-up .deck-edge-label,
[data-ui="deck"] .deck-edge-down .deck-edge-label { max-width: calc(var(--deck-card-w) - 60px); }

/* HUD : coins ancrés à l'écran ; haut/bas centrés largeur carte. */
[data-ui="deck"] .hud-haut,
[data-ui="deck"] .hud-bas {
  left: 50%;
  right: auto;
  width: var(--deck-card-w);
  transform: translateX(-50%);
}
[data-ui="deck"] .hud-haut-gauche,
[data-ui="deck"] .hud-haut-droite,
[data-ui="deck"] .hud-bas-gauche,
[data-ui="deck"] .hud-bas-droite { max-width: min(24vw, 220px); min-width: fit-content; }

/* Fenêtres basses : compacter la carte (pas de chevauchement ni de défilement). */
@media (max-height: 720px) {
  [data-ui="deck"] .deck-card-body {
    max-height: 34%;
    bottom: 46px;
    padding: 8px 10px;
    font-size: min(var(--ui-text-size, 15px), 13px);
  }
  [data-ui="deck"] .deck-edge-arrow { padding: 5px 9px; font-size: 11.5px; }
  /* Cards : rail plus compact et cartes plus courtes pour laisser voir le texte. */
  .cards-rail-track { padding: 8px 4px 10px; }
  .cards-rail-track > .choice-card { --card-h: clamp(130px, 26vh, 190px); }
}
@media (max-height: 520px) {
  .cards-rail-track > .choice-card { --card-h: clamp(110px, 24vh, 160px); }
}

@media (max-width: 760px) {
  [data-ui="deck"] #game-area {
    --deck-card-w: min(84vw, 380px);
    --deck-card-h: min(62vh, 580px);
  }
  [data-ui="deck"] .deck-edge-arrow { padding: 6px 9px; font-size: 11.5px; }
  [data-ui="deck"] .deck-edge-label { display: none; }
  [data-ui="deck"] .deck-edge-glyph { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui="deck"] .deck-card--top,
  [data-ui="deck"] .deck-card--leaving,
  [data-ui="deck"] .deck-card--snapback { transition: opacity 0.12s ease; }
  [data-ui="deck"] .deck-card--leaving.deck-leave-left,
  [data-ui="deck"] .deck-card--leaving.deck-leave-right,
  [data-ui="deck"] .deck-card--leaving.deck-leave-up,
  [data-ui="deck"] .deck-card--leaving.deck-leave-down { transform: none; opacity: 0; }
}


/* Interface plein écran : scène point & clic sans choix ni boutons de repli. */
/* UI phone : smartphone narratif multi-apps.
   Le châssis DÉRIVE de la palette active (--bg/--fg/--accent) et se
   "smartphone-ise" : le fond reprend le fond de palette, le texte reprend
   --fg (donc toujours contrasté), les surfaces sont des mélanges légers vers
   --fg. Résultat : téléphone clair sur palette claire, sombre sur palette
   sombre, jamais illisible. */
[data-ui="phone"] #game-area {
  /* Le téléphone reprend l'ÉQUILIBRE de la palette :
     - fond = --bg (teinte principale, ex. bleu-vert de Rêverie) ;
     - surfaces (bulles, boutons, icônes) = --bg2/--bg3 (2e teinte de la
       palette, ex. sable/beige de Rêverie) → restaure le contraste bleu/sable
       présent en UI classique, au lieu d'un dégradé monochrome. */
  --ph-bg: var(--bg);
  --ph-fg: var(--fg);
  --ph-fg-soft: color-mix(in srgb, var(--fg) 62%, var(--bg));
  /* IMPORTANT : capturer les teintes de palette dans des variables --ph-*
     AVANT de neutraliser --bg3 plus bas (sinon --bg3 vaut transparent quand on
     s'en sert → le corps devenait transparent et laissait voir le bleu du
     conteneur). --ph-body = crème/2e teinte ; surfaces = 1re teinte adoucie. */
  --ph-body: var(--bg3);
  --ph-body-2: var(--bg2);
  --ph-surface: color-mix(in srgb, var(--bg) 70%, var(--bg3));
  --ph-surface-2: color-mix(in srgb, var(--bg) 82%, var(--bg3));
  --ph-border: color-mix(in srgb, var(--fg) 14%, transparent);
  --ph-accent: var(--accent);
  /* neutralise les surfaces/vignette de style hérités.
     NB : on NE réassigne PAS --bg3 ici (les vars --ph-* et le fond du corps
     en dépendent, résolues à l'usage) ; la zone de texte est rendue
     transparente par sa propre règle plus bas. */
  --block-fg: var(--ph-fg);
  --fg2: var(--ph-fg-soft);
  --ui-surface-overlay: var(--ph-surface);
  --ui-surface-game: transparent;
  --ui-game-vignette: transparent;
}
[data-ui="phone"] #screen-jeu { background: color-mix(in srgb, var(--bg) 82%, black 18%); }
[data-ui="phone"] #jeu-toolbar { z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--ph-border); }
[data-ui="phone"] #game-area {
  /* Portrait : ratio 9:16. La hauteur pilote, la largeur en découle (9/16).
     --ph-h borné par la hauteur ET la largeur dispo (pour ne jamais déborder).
     width/height explicites (pas d'aspect-ratio) → transition fiable.
     flex: none : sortir du flex-stretch du parent (#screen-jeu en colonne),
     sinon flex:1 étire le châssis en hauteur et écrase la height (le paysage
     restait "haut" = portrait). */
  flex: 0 0 auto;
  align-self: center;
  --phone-hud-top-space: 0px;
  --phone-hud-bottom-space: 0px;
  --phone-available-height: calc(100dvh - 150px);
  --ph-border-w: 10px;
  --ph-h: min(
    760px,
    max(0px, calc(var(--phone-available-height) - 20px - var(--phone-hud-top-space) - var(--phone-hud-bottom-space))),
    calc((100vw - 24px) * 16 / 9)
  );
  height: var(--ph-h);
  width: calc(var(--ph-h) * 9 / 16);
  box-sizing: border-box;
  margin:
    calc(10px + var(--phone-hud-top-space))
    auto
    calc(10px + var(--phone-hud-bottom-space));
  border: var(--ph-border-w) solid color-mix(in srgb, var(--bg) 55%, black 45%);
  border-radius: 34px;
  /* Corps du téléphone = 2e teinte de la palette (--bg3/--bg2, le sable/crème)
     comme fond DOMINANT - exactement comme la grande zone de texte en UI
     classique. La teinte principale --bg (souvent l'accent-fond, ex. bleu) est
     réservée aux barres (statut/nav), pas au corps → l'écran n'est plus
     monochrome bleu, l'équilibre bicolore est rétabli. */
  background:
    linear-gradient(160deg,
      var(--ph-body),
      color-mix(in srgb, var(--ph-body) 82%, var(--ph-body-2)));
  box-shadow: 0 28px 80px rgba(0,0,0,0.45), inset 0 0 0 1px var(--ph-border);
  /* Les HUD sont enfants de #game-area mais se placent autour du châssis.
     hidden les découpait entièrement. Les contenus internes sont déjà bornés
     par leurs propres zones et restent dans le cadre du téléphone. */
  overflow: visible;
  position: relative;
  /* Transition animée entre les formes : width/height explicites → le téléphone
     "s'étire" de façon fluide (justification fictionnelle du pliable). */
  transition: width 0.42s cubic-bezier(0.22, 0.68, 0.28, 1),
              height 0.42s cubic-bezier(0.22, 0.68, 0.28, 1),
              border-radius 0.42s ease, border-width 0.42s ease;
}
/* Paysage : MÊME appareil pivoté à 90° → ratio 16:9 (l'inverse du portrait).
   La largeur pilote, la hauteur en découle (9/16). Bornée pour tenir dans la
   hauteur ET la largeur dispo → proportion exacte, quitte à ne pas tout remplir. */
[data-ui="phone"][data-phone-forme="landscape"] #game-area {
  --ph-w: min(
    760px,
    calc(100vw - 24px),
    calc(max(0px, calc(var(--phone-available-height) - 20px - var(--phone-hud-top-space) - var(--phone-hud-bottom-space))) * 16 / 9)
  );
  width: var(--ph-w);
  height: calc(var(--ph-w) * 9 / 16);
}
/* Tablette : ratio 4:3. La hauteur pilote, la largeur en découle (4/3). Bornée
   par la hauteur ET la largeur dispo → s'étend tant qu'il y a la place, tout en
   gardant la même réserve verticale que les autres formes (150px) pour que la
   barre nav reste visible. */
[data-ui="phone"][data-phone-forme="tablet"] #game-area {
  --ph-border-w: 8px;
  --ph-h: min(
    max(0px, calc(var(--phone-available-height) - 20px - var(--phone-hud-top-space) - var(--phone-hud-bottom-space))),
    calc((100vw - 24px) * 3 / 4)
  );
  height: var(--ph-h);
  width: calc(var(--ph-h) * 4 / 3);
  border-radius: 22px;
}
[data-ui="phone"] #phone-chrome { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 25; }
#phone-chrome.hidden { display: none; }
[data-ui="phone"] #phone-statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; padding: 7px 16px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  color: var(--ph-fg); font: 700 12px/1 var(--font-ui);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ph-bg) 82%, transparent), transparent);
}
[data-ui="phone"] #phone-status-icons { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
[data-ui="phone"] #phone-battery { min-width: 42px; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--ph-fg) 70%, transparent); border-radius: 5px; text-align: center; }
[data-ui="phone"] #phone-battery.charging { color: #2ec27e; border-color: color-mix(in srgb, #2ec27e 80%, transparent); }
/* Bannière de notification : pilule compacte glissant sous la barre de statut,
   au-dessus du titre. Dérivée de la palette (surface contrastée), lisible en
   clair comme en sombre. */
[data-ui="phone"] #phone-notification {
  position: absolute; top: 40px; left: 16px; right: 16px; z-index: 4;
  padding: 7px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--ph-surface) 90%, var(--ph-fg) 4%);
  color: var(--ph-fg);
  border: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  font: 600 13px/1.3 var(--font-ui); text-align: center;
  max-height: 42px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  pointer-events: none;
  animation: phone-notif-in 0.28s ease;
}
/* Quand la notification occupe le header, on masque le titre d'app (même zone). */
[data-ui="phone"] #phone-chrome.notif-active #phone-app-title { opacity: 0; }
@keyframes phone-notif-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-ui="phone"] #phone-notification.hidden { display: none; }
[data-ui="phone"] #phone-app-title {
  position: absolute; top: 38px; left: 18px; right: 18px; height: 28px;
  color: var(--ph-fg); font: 750 18px/1.2 var(--font-ui); text-align: center;
}
[data-ui="phone"] #phone-nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 34px;
  background: color-mix(in srgb, var(--ph-bg) 78%, transparent); border-top: 1px solid var(--ph-border); pointer-events: auto;
}
[data-ui="phone"] #phone-nav button {
  width: 46px; height: 34px; border: 0; border-radius: 18px; background: var(--ph-surface-2);
  color: var(--ph-fg); font-size: 24px; line-height: 1; cursor: pointer;
}
[data-ui="phone"] #game-area::before { display: none; }
/* HUD en mode phone : le châssis EST #game-area. Tous les panneaux sont donc
   sortis de son rectangle pour ne jamais se mélanger à la barre de statut,
   aux notifications, aux applications ou à la navigation du téléphone. */
[data-ui="phone"] .hud-haut,
[data-ui="phone"] .hud-bas {
  left: 0; right: 0; margin: 0 auto; border-radius: 6px;
}
[data-ui="phone"] .hud-haut { top: auto; bottom: 100%; margin-bottom: calc(var(--ph-border-w) + 8px); }
[data-ui="phone"] .hud-bas { bottom: auto; top: 100%; margin-top: calc(var(--ph-border-w) + 8px); }
[data-ui="phone"] .hud-haut-gauche,
[data-ui="phone"] .hud-haut-droite {
  top: auto; bottom: 100%; margin-bottom: calc(var(--ph-border-w) + 8px);
}
[data-ui="phone"] .hud-bas-gauche,
[data-ui="phone"] .hud-bas-droite {
  bottom: auto; top: 100%; margin-top: calc(var(--ph-border-w) + 8px);
}

/* Sur écran assez large, les panneaux latéraux restent verticaux et prennent
   place de part et d'autre du téléphone. */
@media (min-width: 601px) {
  [data-ui="phone"] .hud-gauche {
    left: auto; right: 100%; margin-right: calc(var(--ph-border-w) + 8px);
    border-radius: 6px;
  }
  [data-ui="phone"] .hud-droite {
    right: auto; left: 100%; margin-left: calc(var(--ph-border-w) + 8px);
    border-radius: 6px;
  }
}

/* Sur petit écran, les panneaux latéraux sont déjà transformés en bandes par
   les règles HUD communes : on les place dans les réserves haute et basse. */
@media (max-width: 600px) {
  /* Les coins deviennent des bandes centrees hors du chassis. Leur largeur est
     calculee par le JS sur l'ecran de jeu, pas sur le telephone etroit. */
  [data-ui="phone"] .hud-haut-gauche,
  [data-ui="phone"] .hud-haut-droite,
  [data-ui="phone"] .hud-bas-gauche,
  [data-ui="phone"] .hud-bas-droite {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  [data-ui="phone"] .hud-gauche {
    top: auto; bottom: 100%; margin-bottom: calc(var(--ph-border-w) + 8px);
  }
  [data-ui="phone"] .hud-droite {
    bottom: auto; top: 100%; margin-top: calc(var(--ph-border-w) + 8px);
  }
}
[data-ui="phone"] #text-zone-wrap .msg-block,
[data-ui="phone"] #text-zone-wrap .msg-block-story,
[data-ui="phone"] #text-zone-wrap .msg-text,
[data-ui="phone"] #text-zone-wrap .msg-info { color: var(--ph-fg); }
/* Le STYLE (Bonbons, RPG…) décore .msg-block/.msg-block-story avec un encadré
   (fond, bordure, ombre). Dans le téléphone, le texte de salle brut ne doit PAS
   être encadré : on neutralise. Les bulles phone (.msg-block--message, etc.) et
   les blocs sémantiques ont leurs propres règles ci-dessous et restent intacts. */
[data-ui="phone"] #text-zone-wrap .msg-block:not(.msg-block-semantic),
[data-ui="phone"] #text-zone-wrap .msg-block-story {
  background: transparent; border: 0; box-shadow: none;
  border-radius: 0; padding: 2px 0; margin: 4px 0;
}
/* Blocs sémantiques story génériques (narration/dialogue/story) : pas d'encadré
   clair de palette. Les bulles phone gardent leur style dédié (défini plus bas). */
[data-ui="phone"] #text-zone-wrap .msg-block--story,
[data-ui="phone"] #text-zone-wrap .msg-block--narration,
[data-ui="phone"] #text-zone-wrap .msg-block--dialogue {
  background: transparent; border: 0; border-left: 0; box-shadow: none; padding: 2px 0;
}
[data-ui="phone"] #text-zone-wrap .msg-block--dialogue::before,
[data-ui="phone"] #text-zone-wrap .msg-block--dialogue::after { display: none; }
/* Écho de choix "> label" superflu dans le téléphone (les bulles/apps suffisent). */
[data-ui="phone"] #text-zone-wrap .msg-info { display: none; }
/* Le panneau de choix est en position: absolute (il flotte au-dessus du texte) :
   il ne reserve aucune place. Sans --ph-choix-h (mesuree par le JS), une reponse
   rapide « Abandonner » recouvrait les dernieres lignes de la conversation. */
[data-ui="phone"] #game-area { --ph-choix-h: 0px; }
[data-ui="phone"] #text-zone-wrap {
  position: absolute; top: 68px; left: 0; right: 0;
  bottom: calc(var(--ph-bottom-h) + var(--ph-choix-h, 0px));
  padding: 14px 16px 18px;
  background: transparent; border: 0; overflow: auto;
}
/* Écrans « app » : le texte de salle n'a pas sa place au milieu des icônes
   (le titre/ambiance passe par la notification). On masque la zone texte pour
   laisser toute la place à la grille d'apps. */
[data-ui="phone"][data-phone-screen="home"] #text-zone-wrap,
[data-ui="phone"][data-phone-screen="folder"] #text-zone-wrap,
[data-ui="phone"][data-phone-screen="contacts"] #text-zone-wrap,
[data-ui="phone"][data-phone-screen="gallery"] #text-zone-wrap {
  display: none;
}
/* #choix-panel est reparenté DANS #game-area par le JS en mode phone.
   Par défaut (conversation, appel, photo…) il est docké en bas, juste
   au-dessus de la barre de nav (54px), façon réponses rapides. */
/* Barre de saisie intégrée au châssis (quand visible) : reparentée dans
   #game-area par le JS, docké juste au-dessus de la barre de nav (54px), façon
   barre de messagerie. --ph-bottom-h = hauteur réservée en bas (nav seule, ou
   nav + saisie) : les choix et le texte s'y adaptent. */
[data-ui="phone"] #game-area { --ph-bottom-h: 54px; }
/* data-ui et hide-input sont tous deux sur <body> : saisie visible → réserver
   la hauteur nav + saisie. Saisie masquée → nav seule. */
body[data-ui="phone"]:not(.hide-input) #game-area { --ph-bottom-h: 104px; }
/* Saisie masquée : la barre reparentée reste cachée dans le châssis. Le bouton
   plein écran, lui, est en position: fixed (voir plus bas) : il reste visible
   même si sa barre parente est masquée. */
body.hide-input[data-ui="phone"] #game-area > #saisie-bar {
  visibility: hidden;
}
body.hide-input[data-ui="phone"] #game-area > #saisie-bar #btn-immersion {
  visibility: visible;
}

/* Le bouton plein écran n'a rien à faire DANS le châssis du téléphone : on
   l'ancre sur l'écran réel, en bas à droite, quel que soit son parent. */
[data-ui="phone"] #btn-immersion {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60;
}
[data-ui="phone"] #game-area > #saisie-bar {
  position: absolute; left: 0; right: 0; bottom: 54px; margin: 0; z-index: 27;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--ph-bg) 82%, transparent);
  border: 0; border-top: 1px solid var(--ph-border);
}
[data-ui="phone"] #game-area > #saisie-bar #saisie-input {
  flex: 1; min-width: 0; border-radius: 999px;
  border: 1px solid var(--ph-border);
  background: color-mix(in srgb, var(--ph-body) 90%, var(--ph-fg) 4%);
  color: var(--ph-fg); padding: 8px 14px; font-size: 13.5px;
}
[data-ui="phone"] #game-area > #saisie-bar #saisie-input::placeholder { color: var(--ph-fg-soft); }
[data-ui="phone"] #game-area > #saisie-bar #saisie-send {
  flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ph-accent); color: color-mix(in srgb, var(--ph-bg) 92%, white);
  padding: 8px 14px; font: 600 13px/1 var(--font-ui);
}
[data-ui="phone"] #game-area > #choix-panel {
  position: absolute; left: 0; right: 0; bottom: var(--ph-bottom-h); margin: 0;
  max-height: calc(100% - var(--ph-bottom-h) - 68px); overflow-y: auto;
  padding: 6px 16px 10px; background: transparent; border: 0; z-index: 26;
}
/* Écrans « app » (accueil, dossier, contacts, galerie) : les choix sont le
   contenu principal (grille d'icônes) → occuper le corps de l'écran, sous le
   titre, au-dessus de la nav, aligné en haut. */
[data-ui="phone"][data-phone-screen="home"] #game-area > #choix-panel,
[data-ui="phone"][data-phone-screen="folder"] #game-area > #choix-panel,
[data-ui="phone"][data-phone-screen="contacts"] #game-area > #choix-panel,
[data-ui="phone"][data-phone-screen="gallery"] #game-area > #choix-panel {
  top: 78px; bottom: var(--ph-bottom-h); max-height: none; padding: 16px 16px 12px;
}
[data-ui="phone"] #choix-label { display: none; }
/* Réponses rapides (conversation, photo, notes, mail…) : rangée de pilules
   alignées à droite façon messagerie, qui passent à la ligne si besoin. */
[data-ui="phone"] .phone-choice-wrap {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 8px; padding: 8px 0;
}
[data-ui="phone"] .phone-choice-wrap--home,
[data-ui="phone"] .phone-choice-wrap--folder,
[data-ui="phone"] .phone-choice-wrap--contacts,
[data-ui="phone"] .phone-choice-wrap--gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow: visible; }
/* Formes larges (paysage/tablette) : la grille d'apps profite de la largeur. */
[data-ui="phone"][data-phone-forme="landscape"] .phone-choice-wrap--home,
[data-ui="phone"][data-phone-forme="landscape"] .phone-choice-wrap--folder,
[data-ui="phone"][data-phone-forme="landscape"] .phone-choice-wrap--contacts,
[data-ui="phone"][data-phone-forme="landscape"] .phone-choice-wrap--gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice-wrap--home,
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice-wrap--folder,
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice-wrap--contacts,
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice-wrap--gallery { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Tablette : le grand châssis 4:3 mérite des contenus légèrement plus grands
   (texte, bulles, pilules, icônes d'apps, nav) - ~+12-15%, ambiance vraie tablette. */
[data-ui="phone"][data-phone-forme="tablet"] #text-zone-wrap {
  font-size: calc(var(--ui-text-size, 15px) * 1.14);
}
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice {
  font-size: 15px; min-height: 44px; padding: 9px 18px;
}
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice-icon-emoji,
[data-ui="phone"][data-phone-forme="tablet"] .phone-choice-icon-img {
  width: 58px; height: 58px; border-radius: 16px; font-size: 32px;
}
[data-ui="phone"][data-phone-forme="tablet"] #phone-nav button {
  width: 52px; height: 38px; font-size: 27px;
}
[data-ui="phone"][data-phone-forme="tablet"] #game-area > #saisie-bar #saisie-input {
  font-size: 15px; padding: 9px 16px;
}
[data-ui="phone"] .phone-choice {
  border: 1px solid var(--ph-border); border-radius: 999px;
  background: color-mix(in srgb, var(--ph-surface-2) 78%, var(--ph-body));
  color: var(--ph-fg); min-height: 40px;
  padding: 8px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13.5px/1.15 var(--font-ui); cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  transition: transform 0.08s ease, background 0.15s ease;
}
[data-ui="phone"] .phone-choice:hover:not(.is-disabled) { background: var(--ph-surface-2); }
[data-ui="phone"] .phone-choice:active:not(.is-disabled) { transform: scale(0.97); }
[data-ui="phone"] .phone-choice--app,
[data-ui="phone"] .phone-choice--thumb { min-height: 82px; flex-direction: column; padding: 8px 6px; background: transparent; border: 0; border-radius: 14px; box-shadow: none; color: var(--ph-fg); }
/* Icônes d'apps : fond NEUTRE dérivé de la palette (surface), pas l'accent -
   sinon tout l'écran devient monochrome de la couleur d'accent. L'accent ne
   sert que pour de fins détails (voir bulle envoyée). L'auteur peut colorer une
   icône via une vraie image [[url]] dans le label. */
[data-ui="phone"] .phone-choice-icon-emoji,
[data-ui="phone"] .phone-choice-icon-img {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-border);
  color: var(--ph-fg); font-size: 26px; object-fit: cover;
}
/* Une image fournie remplit l'icône sans cadre/surface. */
[data-ui="phone"] .phone-choice-icon-img { border: 0; background: transparent; }
[data-ui="phone"] .phone-choice--round .phone-choice-icon-emoji,
[data-ui="phone"] .phone-choice--round .phone-choice-icon-img { border-radius: 50%; }
/* Dans une pilule de réponse rapide (ni app ni miniature), l'icône image/emoji
   est petite et inline, à gauche du texte. */
[data-ui="phone"] .phone-choice:not(.phone-choice--app):not(.phone-choice--thumb) .phone-choice-icon-img,
[data-ui="phone"] .phone-choice:not(.phone-choice--app):not(.phone-choice--thumb) .phone-choice-icon-emoji {
  width: 22px; height: 22px; border-radius: 6px; font-size: 16px; flex: 0 0 auto;
}
[data-ui="phone"] .phone-choice--wide { grid-column: span 2; }
[data-ui="phone"] .phone-choice-label { max-width: 100%; overflow-wrap: anywhere; text-align: center; color: var(--ph-fg); }
[data-ui="phone"] .phone-choice--accept { background: #24c46b; color: white; }
[data-ui="phone"] .phone-choice--decline { background: #e84f4f; color: white; }
[data-ui="phone"] .phone-choice.is-disabled { opacity: 0.42; filter: grayscale(0.8); cursor: not-allowed; }
/* Bulles de conversation dérivées de la palette : bulle reçue = surface neutre,
   bulle envoyée = accent de palette (texte contrasté auto). */
[data-ui="phone"] .msg-block--message,
[data-ui="phone"] .msg-block--message-envoye {
  width: fit-content; max-width: 82%; margin: 7px 0; border: 0;
  background: var(--ph-surface-2); color: var(--ph-fg);
  border-radius: 17px 17px 17px 5px; padding: 0;
}
[data-ui="phone"] .msg-block--message-envoye {
  margin-left: auto; background: var(--ph-accent);
  color: color-mix(in srgb, var(--ph-bg) 92%, white);
  border-radius: 17px 17px 5px 17px;
}
[data-ui="phone"] .phone-typing .msg-block-semantic-body { display: flex; gap: 4px; align-items: center; padding: 12px 16px; }
[data-ui="phone"] .phone-typing-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ph-fg-soft);
  animation: phone-typing-blink 1.2s infinite ease-in-out both;
}
[data-ui="phone"] .phone-typing-dot:nth-child(2) { animation-delay: 0.2s; }
[data-ui="phone"] .phone-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes phone-typing-blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
[data-ui="phone"] .msg-block--systeme {
  max-width: 88%; margin: 8px auto; text-align: center; opacity: 0.76; background: var(--ph-surface); border: 0; border-radius: 14px;
}
[data-ui="phone"] .msg-block--appel { border-radius: 20px; background: rgba(36,196,107,0.16); border-color: rgba(36,196,107,0.4); }
[data-ui="phone"][data-phone-screen="photo"] #text-zone-wrap img.msg-image { width: 100%; max-height: 420px; object-fit: contain; border-radius: 16px; }
@media (max-width: 560px) {
  /* Sur petit écran, le portrait remplit la fenêtre (bord à bord). Les formes
     paysage/tablette gardent leur ratio calculé (déjà borné par la largeur). */
  [data-ui="phone"]:not([data-phone-forme="landscape"]):not([data-phone-forme="tablet"]) #game-area {
    width: 100vw;
    height: max(0px, calc(var(--phone-available-height) - var(--phone-hud-top-space) - var(--phone-hud-bottom-space)));
    margin: var(--phone-hud-top-space) 0 var(--phone-hud-bottom-space);
    --ph-border-w: 0px;
    border-radius: 0;
  }
}

/* Le fullscreen suit la palette et le style comme le reste de l'app : pas de noir
   en dur, sinon la scene flotte sur un fond qui ignore le theme choisi. */
[data-ui="fullscreen"] #game-area {
  background: var(--ui-surface-game, var(--bg));
}

/* La toolbar reste VISIBLE en fullscreen : elle prend peu de place, et elle porte
   Abandonner + les options du scenario (Accueil, liens...). La masquer donnait
   l'impression d'etre coince dans la salle. Pour un vrai plein ecran, voir le
   bouton d'immersion (#btn-immersion) qui masque le chrome du site.
   Elle reste DANS LE FLUX (pas de position: absolute) : en flottant par-dessus,
   elle masquait le haut de la scene. */
[data-ui="fullscreen"] #jeu-toolbar {
  background: var(--ui-surface-topbar, var(--bg2));
  border-bottom-color: var(--ui-border-subtle, var(--btn-bg));
  backdrop-filter: var(--ui-backdrop, none);
}

[data-ui="fullscreen"] #text-zone-wrap {
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-game, var(--bg));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

[data-ui="fullscreen"] #text-zone-wrap.narrative-has-background::before {
  z-index: 0;
  inset: 0;
}

/* En fullscreen, SEULE l'imagemap vit dans le flux : la scene occupe l'ecran et
   le narratif part dans le HUD bas. On masque donc TOUT le reste plutot que
   d'enumerer les types de message - sinon un residu de la salle precedente
   (image, carte, tilemap, video...) reste affiche derriere la scene quand on
   revient en fullscreen depuis un autre mode. */
[data-ui="fullscreen"] #text-zone-wrap > *:not(.msg-imagemap):not(.narrative-background-stretch) {
  display: none;
}

[data-ui="fullscreen"] #text-zone-wrap .msg-imagemap {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* La scène (imagemap) ne va pas sous les HUD haut/bas : elle se réduit pour que
   rien ne soit masqué. Les hauteurs des HUD sont exposées par le JS
   (--fs-hud-top-h / --fs-hud-bot-h) sur #game-area. Les HUD s'ancrent en bandes
   pleines haut/bas, la limite de l'image coïncide avec leur bord. */
[data-ui="fullscreen"] #game-area { --fs-hud-top-h: 0px; --fs-hud-bot-h: 0px; }
[data-ui="fullscreen"] #text-zone-wrap .msg-imagemap {
  top: var(--fs-hud-top-h, 0px);
  bottom: var(--fs-hud-bot-h, 0px);
  inset: auto 0 auto 0;
  height: auto;
  transition: top 0.2s ease, bottom 0.2s ease;
}
[data-ui="fullscreen"] .hud-haut {
  top: 0; left: 0; right: 0; margin: 0; border-radius: 0;
}
[data-ui="fullscreen"] .hud-bas {
  bottom: 0; left: 0; right: 0; margin: 0; border-radius: 0;
}

[data-ui="fullscreen"] #text-zone-wrap .msg-text,
[data-ui="fullscreen"] #text-zone-wrap .msg-block,
[data-ui="fullscreen"] #text-zone-wrap .msg-block-story,
[data-ui="fullscreen"] #text-zone-wrap .msg-block-semantic,
[data-ui="fullscreen"] #text-zone-wrap .msg-info,
[data-ui="fullscreen"] #text-zone-wrap .msg-error,
[data-ui="fullscreen"] #text-zone-wrap .msg-sep {
  position: static;
}

[data-ui="fullscreen"] #text-zone-wrap .msg-imagemap img.msg-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

[data-ui="fullscreen"] #choix-panel {
  display: none;
}

/* Le HUD bas narratif suit la palette (pas de noir en dur) : sinon il jure avec
   le theme choisi et avec le reste de la scene. */
[data-ui="fullscreen"] .hud-bas {
  background: var(--ui-surface-overlay, var(--bg2));
  backdrop-filter: var(--ui-backdrop, none);
}

[data-ui="fullscreen"] .hud-bas .hud-encadre-inner {
  padding: 0;
}

[data-ui="fullscreen"] .hud-bas .hud-encadre-flow-column,
[data-ui="fullscreen"] .hud-bas .hud-encadre-flow-row {
  padding: 10px 14px;
}


/* Barre de saisie */
#saisie-bar {
  background: var(--bg2);
  border-top: 1px solid var(--btn-bg);
  padding: 7px 10px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Masquage immersif de la saisie (option masquer_saisie:). La toolbar haut
   (Abandonner / Accueil) reste visible pour pouvoir quitter la partie.
   La barre n'est PAS retiree : elle porte le bouton plein ecran, qui doit rester
   joignable. On masque seulement son champ et son bouton Envoyer - il ne reste
   que ⛶, aligne a droite, sans fond ni bordure. */
body.hide-input #saisie-input,
body.hide-input #saisie-send { display: none; }

body.hide-input #saisie-bar {
  background: none;
  border-top: none;
  justify-content: flex-end;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  pointer-events: none;   /* la bande vide ne capte pas les clics */
}
body.hide-input #saisie-bar #btn-immersion { pointer-events: auto; }

#saisie-input {
  flex: 1;
  /* Sans min-width:0, un champ flex garde sa largeur intrinseque et refuse de
     retrecir : sur un ecran Android etroit (320-360px) il poussait le bouton
     plein ecran hors de la barre, donc hors de l'ecran. */
  min-width: 0;
  background: var(--entry-bg);
  color: var(--entry-fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 16px;
  font-family: var(--font-ui);
  outline: none;
}
#saisie-input::placeholder { color: var(--fg2); }
#saisie-input:focus { border-color: var(--accent2); }

#saisie-send {
  padding: 7px 18px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}
#saisie-send:hover { background: var(--accent2); }

/* Boutons fin de partie */
#fin-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
#fin-buttons.hidden { display: none; }

.fin-btn {
  padding: 9px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid var(--accent);
  transition: background 0.15s;
}
.fin-btn.secondary {
  background: var(--btn-bg);
  color: var(--accent);
}
.fin-btn.secondary:hover { background: var(--btn-hover); }
.fin-btn.primary {
  background: var(--accent);
  color: var(--bg);
}
.fin-btn.primary:hover { background: var(--accent2); }

/* Connexion indicator */
#conn-status {
  font-size: 11px;
  color: var(--fg2);
  padding: 2px 8px;
}
#conn-status.ok   { color: #44cc66; }
#conn-status.err  { color: var(--error-fg); }

/* ── Mobile topbar ───────────────────────────────────────── */
#topbar-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--btn-bg);
  border-radius: 4px;
  color: var(--fg);
  font-size: 16px;
  padding: 2px 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
  #topbar-toggle { display: block; }
  #topbar-author { display: none; }
  #conn-status   { display: none; }
  #topbar-row2   { display: none; }
  #topbar.menu-open #topbar-author { display: inline !important; }
  #topbar.menu-open #conn-status   { display: inline !important; }
  #topbar.menu-open #topbar-row2   { display: flex; }
}

/* ── Modal "Proposer un scénario" ─────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--btn-bg);
  border-radius: 10px; padding: 24px 28px; max-width: 480px; width: 90%;
}
.modal-box h3 { margin: 0 0 10px; color: var(--accent); }
.modal-box p  { margin: 0 0 10px; font-size: 0.9rem; color: var(--fg); }
.modal-box textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--btn-bg); border-radius: 6px;
  padding: 8px; font-family: monospace; font-size: 0.82rem;
  resize: none;
}
.modal-actions { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }
.modal-actions button {
  padding: 6px 16px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 0.88rem;
}
.modal-actions button:last-child {
  background: var(--btn-bg); color: var(--fg);
}
/* ==================================================================
   Styles UI (palette + skin)
   ================================================================== */

:root, [data-style="classique"] {
  --ui-font-display: var(--font-ui);
  --ui-surface-topbar: var(--bg2);
  --ui-surface-toolbar: var(--bg2);
  --ui-surface-panel: var(--bg2);
  --ui-surface-card: var(--bg2);
  --ui-surface-card-hover: color-mix(in srgb, var(--bg2) 76%, var(--btn-hover));
  --ui-surface-game: var(--ui-palette-game-bg);
  --ui-surface-text: var(--ui-palette-text-bg);
  --ui-surface-choice: color-mix(in srgb, var(--bg2) 88%, var(--bg3));
  --ui-surface-input: var(--entry-bg);
  --ui-surface-overlay: color-mix(in srgb, var(--bg2) 84%, transparent);
  --ui-border-subtle: color-mix(in srgb, var(--btn-bg) 70%, transparent);
  --ui-border-strong: color-mix(in srgb, var(--accent) 36%, var(--btn-bg));
  --ui-shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.12);
  --ui-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.10);
  --ui-shadow-button: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --ui-backdrop: none;
  --ui-radius-sm: 4px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-xl: 16px;
  --ui-text-size: 15px;
  --ui-text-line: 1.7;
  --ui-letter: normal;
  --ui-title-transform: none;
  --ui-message-width: 74ch;
  --ui-button-bg: var(--btn-bg);
  --ui-button-hover: var(--btn-hover);
  --ui-button-fg: var(--btn-fg);
  --ui-choice-gap: 6px;
  --ui-choice-radius: 8px;
  --ui-inline-code-radius: 4px;
  --ui-hud-radius: 8px;
  --ui-hud-border-style: solid;
  --ui-hud-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  --ui-hud-backdrop: none;
  --ui-game-vignette: none;
  --ui-title-track: 0;
}

[data-style="rpg"] {
  --font-ui: "Trebuchet MS", "Lucida Sans Unicode", sans-serif;
  --font-text: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: "Courier New", "Lucida Console", monospace;
  --ui-font-display: "Trebuchet MS", "Palatino Linotype", serif;
  --ui-surface-topbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 90%, var(--accent) 10%), color-mix(in srgb, var(--bg3) 92%, var(--bg2)));
  --ui-surface-toolbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 84%, var(--accent) 8%), color-mix(in srgb, var(--bg3) 92%, var(--bg2)));
  --ui-surface-panel: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 92%, var(--accent) 8%), color-mix(in srgb, var(--bg3) 88%, var(--bg2)));
  --ui-surface-card: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 94%, var(--accent) 6%), color-mix(in srgb, var(--bg3) 92%, var(--bg2)));
  --ui-surface-card-hover: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 84%, var(--accent) 16%), color-mix(in srgb, var(--bg3) 84%, var(--bg2)));
  --ui-surface-game: var(--ui-palette-game-bg);
  --ui-surface-text: var(--ui-palette-text-bg);
  --ui-surface-choice: color-mix(in srgb, var(--bg2) 76%, var(--accent) 10%);
  --ui-surface-input: color-mix(in srgb, var(--entry-bg) 85%, var(--bg3));
  --ui-surface-overlay: color-mix(in srgb, var(--bg2) 78%, var(--accent) 10%);
  --ui-border-subtle: color-mix(in srgb, var(--accent) 22%, var(--btn-bg));
  --ui-border-strong: color-mix(in srgb, var(--accent) 54%, var(--bg2));
  --ui-shadow-panel: 0 18px 36px rgba(0, 0, 0, 0.25), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
  --ui-shadow-card: 0 18px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  --ui-shadow-button: 0 1px 0 color-mix(in srgb, white 10%, transparent) inset, 0 10px 20px rgba(0, 0, 0, 0.16);
  --ui-backdrop: blur(6px) saturate(1.08);
  --ui-radius-sm: 3px;
  --ui-radius-md: 9px;
  --ui-radius-lg: 14px;
  --ui-radius-xl: 20px;
  --ui-text-size: 16px;
  --ui-text-line: 1.78;
  --ui-letter: 0.01em;
  --ui-title-transform: uppercase;
  --ui-message-width: 76ch;
  --ui-button-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 78%, var(--accent) 12%), color-mix(in srgb, var(--bg3) 78%, var(--btn-bg)));
  --ui-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--btn-hover) 78%, var(--accent) 18%), color-mix(in srgb, var(--bg2) 80%, var(--btn-hover)));
  --ui-button-fg: color-mix(in srgb, var(--accent) 62%, var(--fg));
  --ui-choice-gap: 10px;
  --ui-choice-radius: 999px;
  --ui-inline-code-radius: 999px;
  --ui-hud-radius: 14px;
  --ui-hud-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
  --ui-hud-backdrop: blur(7px) saturate(1.08);
  --ui-game-vignette: radial-gradient(circle at center, transparent 54%, rgba(0, 0, 0, 0.20) 100%);
  --ui-title-track: 0.04em;
}

[data-style="terminal"] {
  --font-ui: "Consolas", "Cascadia Mono", "Courier New", monospace;
  --font-text: "Consolas", "Cascadia Mono", "Courier New", monospace;
  --font-mono: "Consolas", "Cascadia Mono", "Courier New", monospace;
  --ui-font-display: "Consolas", "Cascadia Mono", "Courier New", monospace;
  --ui-surface-topbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 90%, black 10%), color-mix(in srgb, var(--bg3) 96%, black));
  --ui-surface-toolbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 86%, black 14%), color-mix(in srgb, var(--bg3) 95%, black));
  --ui-surface-panel: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 90%, black 10%), color-mix(in srgb, var(--bg3) 96%, black));
  --ui-surface-card: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 88%, black 12%), color-mix(in srgb, var(--bg3) 97%, black));
  --ui-surface-card-hover: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 72%, var(--accent) 12%), color-mix(in srgb, var(--bg3) 90%, black));
  --ui-surface-game: var(--ui-palette-game-bg);
  --ui-surface-text: var(--ui-palette-text-bg);
  --ui-surface-choice: color-mix(in srgb, var(--bg2) 86%, black 14%);
  --ui-surface-input: color-mix(in srgb, var(--entry-bg) 82%, black 18%);
  --ui-surface-overlay: color-mix(in srgb, var(--bg2) 84%, black 16%);
  --ui-border-subtle: color-mix(in srgb, var(--accent) 24%, transparent);
  --ui-border-strong: color-mix(in srgb, var(--accent) 54%, transparent);
  --ui-shadow-panel: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent);
  --ui-shadow-card: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 6%, transparent);
  --ui-shadow-button: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  --ui-radius-sm: 0px;
  --ui-radius-md: 2px;
  --ui-radius-lg: 4px;
  --ui-radius-xl: 6px;
  --ui-text-size: 14px;
  --ui-text-line: 1.8;
  --ui-letter: 0.03em;
  --ui-title-transform: uppercase;
  --ui-message-width: 82ch;
  --ui-button-bg: color-mix(in srgb, var(--btn-bg) 70%, black 30%);
  --ui-button-hover: color-mix(in srgb, var(--btn-hover) 72%, var(--accent) 10%);
  --ui-button-fg: color-mix(in srgb, var(--accent) 55%, var(--fg));
  --ui-choice-gap: 8px;
  --ui-choice-radius: 2px;
  --ui-inline-code-radius: 2px;
  --ui-hud-radius: 4px;
  --ui-hud-border-style: solid;
  --ui-hud-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
  --ui-hud-backdrop: none;
  --ui-game-vignette: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px);
  --ui-title-track: 0.12em;
}

[data-style="aventure"] {
  --font-ui: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  --font-text: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: "Consolas", "Courier New", monospace;
  --ui-font-display: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --ui-surface-topbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 84%, var(--accent) 8%), color-mix(in srgb, var(--bg3) 82%, var(--bg2)));
  --ui-surface-toolbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 84%, white 6%), color-mix(in srgb, var(--bg3) 82%, var(--bg2)));
  --ui-surface-panel: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 90%, white 7%), color-mix(in srgb, var(--bg3) 84%, var(--bg2)));
  --ui-surface-card: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 88%, white 8%), color-mix(in srgb, var(--bg3) 92%, var(--bg2)));
  --ui-surface-card-hover: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 80%, white 10%), color-mix(in srgb, var(--bg3) 84%, var(--accent) 5%));
  --ui-surface-game: var(--ui-palette-game-bg);
  --ui-surface-text: var(--ui-palette-text-bg);
  --ui-surface-choice: color-mix(in srgb, var(--bg2) 82%, white 10%);
  --ui-surface-input: color-mix(in srgb, var(--entry-bg) 90%, white 10%);
  --ui-surface-overlay: color-mix(in srgb, var(--bg2) 88%, white 10%);
  --ui-border-subtle: color-mix(in srgb, var(--accent) 16%, var(--btn-bg));
  --ui-border-strong: color-mix(in srgb, var(--accent) 38%, var(--bg2));
  --ui-shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.16);
  --ui-shadow-card: 0 20px 34px rgba(0, 0, 0, 0.14);
  --ui-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.10), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
  --ui-backdrop: blur(10px) saturate(1.08);
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-radius-xl: 28px;
  --ui-text-size: 16px;
  --ui-text-line: 1.84;
  --ui-letter: 0.004em;
  --ui-title-transform: none;
  --ui-message-width: 72ch;
  --ui-button-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 80%, white 10%), color-mix(in srgb, var(--bg3) 90%, var(--btn-bg)));
  --ui-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--btn-hover) 84%, white 10%), color-mix(in srgb, var(--bg2) 86%, var(--btn-hover)));
  --ui-button-fg: color-mix(in srgb, var(--accent) 48%, var(--fg));
  --ui-choice-gap: 10px;
  --ui-choice-radius: 14px;
  --ui-inline-code-radius: 10px;
  --ui-hud-radius: 18px;
  --ui-hud-shadow: 0 18px 36px rgba(0, 0, 0, 0.20);
  --ui-hud-backdrop: blur(8px) saturate(1.08);
  --ui-game-vignette: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 60%);
  --ui-title-track: 0.02em;
}

#screen-accueil,
#screen-jeu {
  background: var(--ui-surface-game);
}

#game-area {
  background: var(--ui-surface-game);
  isolation: isolate;
}

#game-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ui-game-vignette);
  pointer-events: none;
  z-index: 0;
}

#text-zone-wrap,
#choix-panel,
#fin-buttons,
#saisie-bar,
#jeu-toolbar,
#accueil-header,
#cats-bar,
#search-bar,
#accueil-footer {
  position: relative;
  z-index: 1;
}

#topbar {
  background: var(--ui-surface-topbar);
  border-bottom-color: var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-panel);
  backdrop-filter: var(--ui-backdrop);
}

#accueil-header,
#cats-bar,
#search-bar,
#accueil-footer,
#jeu-toolbar,
#saisie-bar,
#choix-panel,
.modal-box {
  background: var(--ui-surface-panel);
  border-color: var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-panel);
  backdrop-filter: var(--ui-backdrop);
}

#screen-accueil,
#screen-jeu,
#scenario-grid-wrap {
  background: transparent;
}

#topbar-title,
#accueil-header h2,
.card-nom,
.embed-title {
  font-family: var(--ui-font-display);
  text-transform: var(--ui-title-transform);
  letter-spacing: var(--ui-title-track);
}

.topbar-link,
.lang-btn,
.cat-btn,
.page-btn,
.toolbar-btn,
.choix-btn,
.fin-btn,
#theme-select,
#style-select {
  background: var(--ui-button-bg);
  color: var(--ui-button-fg);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-button);
}

.topbar-link:hover,
.lang-btn:hover,
.cat-btn:hover,
.page-btn:hover:not(:disabled),
.toolbar-btn:hover,
.choix-btn:hover:not(:disabled),
.fin-btn:hover,
#theme-select:hover,
#style-select:hover {
  background: var(--ui-button-hover);
}

.cat-btn.active,
.lang-btn.active,
.card-play-btn,
#saisie-send,
.fin-btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-role-action) 84%, white 8%), var(--ui-role-action-deep));
  color: var(--ui-role-on-action);
  border: 1px solid color-mix(in srgb, var(--ui-role-action) 66%, var(--bg2));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ui-role-action) 20%, transparent);
}

.cat-btn.active,
.lang-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-role-positive) 84%, white 8%), var(--ui-role-positive-deep));
  color: var(--ui-role-on-positive);
  border-color: color-mix(in srgb, var(--ui-role-positive) 66%, var(--bg2));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ui-role-positive) 18%, transparent);
}

#saisie-send:hover,
.card-play-btn:hover,
.fin-btn.primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-role-action) 74%, white 10%), var(--ui-role-action));
}

.cat-btn.active:hover,
.lang-btn.active:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-role-positive) 74%, white 10%), var(--ui-role-positive));
}

.scenario-card,
.card-tooltip {
  background: var(--ui-surface-card);
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-card);
  overflow: hidden;
  backdrop-filter: var(--ui-backdrop);
}

.scenario-card:hover {
  background: var(--ui-surface-card-hover);
  border-color: var(--ui-border-strong);
  transform: translateY(-2px);
}

#scenario-grid {
  gap: 16px;
}

#scenario-search,
#saisie-input {
  background: var(--ui-surface-input);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

#text-zone-wrap {
  background: var(--ui-surface-text);
  font-size: var(--ui-text-size);
  line-height: var(--ui-text-line);
  letter-spacing: var(--ui-letter);
}

.msg-text,
.msg-block,
.msg-block-story,
.msg-embed,
.md-quote,
.msg-info,
.msg-error,
.msg-sep {
  max-width: 100%;
}

#text-zone-wrap .msg-block {
  background: var(--ui-surface-overlay);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-md);
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: var(--ui-shadow-button);
}

#text-zone-wrap .msg-block-story {
  background: var(--ui-surface-overlay);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-md);
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: var(--ui-shadow-button);
}

#text-zone-wrap .msg-block-semantic {
  box-shadow: var(--ui-shadow-button);
}

[data-style="rpg"] .msg-block-semantic {
  border-radius: calc(var(--ui-radius-md) + 4px);
}
[data-style="rpg"] .msg-block--narration {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 80%, var(--accent2) 8%), color-mix(in srgb, var(--ui-surface-overlay) 98%, transparent));
}
[data-style="rpg"] .msg-block--dialogue {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-overlay) 88%, var(--accent) 12%), color-mix(in srgb, var(--ui-surface-overlay) 94%, transparent));
}
[data-style="rpg"] .msg-block--systeme {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--ui-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-panel) 78%, var(--accent2) 14%), color-mix(in srgb, var(--ui-surface-overlay) 96%, transparent));
}
[data-style="rpg"] .msg-block--journal {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 82%, var(--accent2) 18%), color-mix(in srgb, var(--ui-surface-overlay) 96%, transparent)),
    repeating-linear-gradient(to bottom, transparent 0 23px, color-mix(in srgb, var(--ui-border-subtle) 20%, transparent) 23px 24px);
}

[data-style="terminal"] .msg-block-semantic {
  border-radius: 0;
  box-shadow: var(--ui-shadow-panel);
}
[data-style="terminal"] .msg-block--narration {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 86%, transparent), color-mix(in srgb, var(--ui-surface-overlay) 100%, transparent)),
    repeating-linear-gradient(to bottom, transparent 0 18px, color-mix(in srgb, var(--accent) 8%, transparent) 18px 19px);
}
[data-style="terminal"] .msg-block--dialogue {
  background: color-mix(in srgb, var(--ui-surface-overlay) 90%, var(--accent) 10%);
}
[data-style="terminal"] .msg-block--dialogue::before {
  content: '\201C';
  top: -4px;
  left: 8px;
  right: auto;
  font-size: 38px;
  color: color-mix(in srgb, var(--accent) 65%, transparent);
  font-family: Georgia, "Times New Roman", serif;
}
[data-style="terminal"] .msg-block--systeme {
  background: color-mix(in srgb, var(--ui-surface-overlay) 82%, var(--accent) 18%);
}
[data-style="terminal"] .msg-block--systeme::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, color-mix(in srgb, var(--accent) 4%, transparent) 3px 4px);
  pointer-events: none;
  opacity: 0.7;
}

[data-style="aventure"] .msg-block-semantic {
  border-radius: calc(var(--ui-radius-lg) + 2px);
}
[data-style="aventure"] .msg-block--narration,
[data-style="aventure"] .msg-block--journal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 90%, white 10%), color-mix(in srgb, var(--ui-surface-overlay) 98%, transparent));
}
[data-style="aventure"] .msg-block--dialogue {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-panel) 90%, var(--accent) 10%), color-mix(in srgb, var(--ui-surface-overlay) 100%, transparent));
}
[data-style="aventure"] .msg-block--pensee {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-overlay) 88%, white 12%), color-mix(in srgb, var(--ui-surface-overlay) 100%, transparent));
}

#text-zone-wrap .md-code {
  border-radius: var(--ui-inline-code-radius);
}

#text-zone-wrap .md-quote {
  background: color-mix(in srgb, var(--ui-surface-overlay) 70%, transparent);
  border-left-width: 4px;
  border-left-color: var(--accent);
  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
  padding: 8px 12px;
  margin: 10px 0;
}

#text-zone-wrap .msg-embed {
  background: color-mix(in srgb, var(--ui-surface-panel) 88%, transparent);
  border-radius: var(--ui-radius-lg);
  border-left-width: 4px;
  box-shadow: var(--ui-shadow-card);
}

.msg-image {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-card);
  max-width: min(640px, 100%);
}

#choix-panel {
  background: var(--ui-surface-choice);
  border-radius: var(--ui-radius-lg);
}

#choix-buttons {
  gap: var(--ui-choice-gap);
}

.choix-btn {
  border-radius: var(--ui-choice-radius);
}

#saisie-bar {
  gap: 10px;
}

.hud-encadre {
  border-radius: var(--ui-hud-radius);
  border-style: var(--ui-hud-border-style);
  box-shadow: var(--ui-hud-shadow);
  backdrop-filter: var(--ui-hud-backdrop);
}

.hud-haut { border-radius: 0 0 var(--ui-hud-radius) var(--ui-hud-radius); }
.hud-bas { border-radius: var(--ui-hud-radius) var(--ui-hud-radius) 0 0; }
.hud-gauche { border-radius: 0 var(--ui-hud-radius) var(--ui-hud-radius) 0; }
.hud-droite { border-radius: var(--ui-hud-radius) 0 0 var(--ui-hud-radius); }
.hud-haut-gauche { border-radius: 0 0 var(--ui-hud-radius) 0; }
.hud-haut-droite { border-radius: 0 0 0 var(--ui-hud-radius); }
.hud-bas-gauche { border-radius: 0 var(--ui-hud-radius) 0 0; }
.hud-bas-droite { border-radius: var(--ui-hud-radius) 0 0 0; }

[data-style="rpg"] #topbar-title,
[data-style="rpg"] #accueil-header h2,
[data-style="rpg"] .card-nom {
  font-variant: small-caps;
}

[data-style="rpg"] .toolbar-btn,
[data-style="rpg"] .choix-btn,
[data-style="rpg"] .page-btn,
[data-style="rpg"] .topbar-link,
[data-style="rpg"] .lang-btn,
[data-style="rpg"] .cat-btn {
  letter-spacing: 0.03em;
}

[data-style="terminal"] #topbar,
[data-style="terminal"] #accueil-header,
[data-style="terminal"] #cats-bar,
[data-style="terminal"] #search-bar,
[data-style="terminal"] #accueil-footer,
[data-style="terminal"] #jeu-toolbar,
[data-style="terminal"] #saisie-bar,
[data-style="terminal"] #choix-panel,
[data-style="terminal"] .scenario-card,
[data-style="terminal"] .card-tooltip,
[data-style="terminal"] .msg-embed,
[data-style="terminal"] #text-zone-wrap .msg-block,
[data-style="terminal"] #text-zone-wrap .msg-block-story {
  box-shadow: var(--ui-shadow-panel);
}

[data-style="terminal"] #topbar-title,
[data-style="terminal"] #accueil-header h2,
[data-style="terminal"] .card-nom,
[data-style="terminal"] #choix-label {
  text-transform: uppercase;
}

[data-style="terminal"] .msg-text,
[data-style="terminal"] .msg-info,
[data-style="terminal"] .msg-error,
[data-style="terminal"] .msg-sep,
[data-style="terminal"] .embed-desc,
[data-style="terminal"] .embed-field-val {
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent);
}

[data-style="aventure"] #topbar,
[data-style="aventure"] #accueil-header,
[data-style="aventure"] #cats-bar,
[data-style="aventure"] #search-bar,
[data-style="aventure"] #accueil-footer,
[data-style="aventure"] #jeu-toolbar,
[data-style="aventure"] #saisie-bar,
[data-style="aventure"] #choix-panel,
[data-style="aventure"] .scenario-card,
[data-style="aventure"] .card-tooltip,
[data-style="aventure"] .msg-embed {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

[data-style="aventure"] .scenario-card,
[data-style="aventure"] .msg-embed,
[data-style="aventure"] #choix-panel {
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.14);
}

[data-style="aventure"] #text-zone-wrap .msg-text {
  font-size: 1.02em;
}

/* ==================================================================
   Reverie - soft child-friendly palette and playful storybook skin
   ================================================================== */

[data-theme="reverie"] {
  --bg:          #c3e1e3;
  --bg2:         #e7dfd0;
  --bg3:         #f6ecdc;
  --fg:          #2f3b49;
  --fg2:         #72808a;
  --accent:      #4c9fa9;
  --accent2:     #b48ac8;
  --btn-bg:      #d5e9e8;
  --btn-hover:   #c7e1e3;
  --btn-fg:      #315f69;
  --block-bg:    #eadfb6;
  --block-fg:    #635838;
  --error-fg:    #b45664;
  --embed-title: #4fa6b0;
  --embed-field: #8b78b7;
  --entry-bg:    #fff8ee;
  --entry-fg:    #273743;
  --reverie-kid-pink:    #d783a5;
  --reverie-kid-green:   #86b976;
  --reverie-kid-red:     #c56b76;
  --reverie-kid-yellow:  #ddc766;
  --reverie-kid-lavender:#b48ac8;
  --ui-role-action:        var(--reverie-kid-pink);
  --ui-role-action-deep:   #b85f86;
  --ui-role-positive:      var(--reverie-kid-green);
  --ui-role-positive-deep: #5e8f55;
  --ui-role-favorite:      var(--reverie-kid-yellow);
  --ui-role-story:         var(--accent);
  --ui-role-dream:         var(--reverie-kid-lavender);
  --ui-role-attention:     var(--reverie-kid-red);
  --ui-role-spot-1:        var(--ui-role-story);
  --ui-role-spot-2:        var(--ui-role-action);
  --ui-role-spot-3:        var(--ui-role-positive);
  --ui-role-spot-4:        var(--ui-role-favorite);
  --ui-role-spot-5:        var(--ui-role-dream);
  --ui-role-spot-6:        var(--ui-role-attention);
  --ui-role-on-story:      #f7ffff;
  --ui-role-on-action:      #fffdf5;
  --ui-role-on-positive:    #fffdf5;
  --ui-role-on-favorite:    #604d12;
  --ui-role-on-dream:       #fff8ff;
  --ui-role-on-attention:   #fff7f8;
  --ui-role-favorite-text:  #8a6b11;
  --ui-role-paper-edge:     #e5d1ac;
  --ui-palette-game-bg:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--bg3) 82%, var(--ui-role-action) 4%) 0%, color-mix(in srgb, var(--bg3) 46%, transparent) 34%, transparent 62%),
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--ui-role-dream) 9%, transparent) 0%, transparent 30%),
    radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--ui-role-positive) 6%, transparent) 0%, transparent 25%),
    radial-gradient(circle at 58% 82%, color-mix(in srgb, var(--ui-role-favorite) 6%, transparent) 0%, transparent 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 84%, var(--accent) 4%) 0%, color-mix(in srgb, var(--bg3) 90%, var(--ui-role-action) 3%) 50%, color-mix(in srgb, var(--bg) 84%, var(--accent) 4%) 100%);
  --ui-palette-text-bg: var(--ui-palette-game-bg);
  --scrollbar-thumb: #8bc3c7;
}

/* Polices de la palette reverie : seulement si aucun Style dédié n'impose
   les siennes - le Style choisi par le joueur prime sur la palette. */
:root[data-theme="reverie"]:not([data-style]),
:root[data-theme="reverie"][data-style="classique"] {
  --font-text:   "Segoe UI", "Trebuchet MS", Georgia, serif;
  --font-mono:   "Cascadia Mono", Consolas, monospace;
  --font-ui:     "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
}

[data-style="reverie-s"] {
  --font-ui: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --font-text: "Trebuchet MS", "Segoe UI", Georgia, serif;
  --font-mono: "Cascadia Mono", Consolas, monospace;
  --ui-font-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --ui-surface-topbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 96%, white 4%), color-mix(in srgb, var(--bg2) 94%, var(--bg) 6%));
  --ui-surface-toolbar: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 94%, white 6%), color-mix(in srgb, var(--bg2) 92%, var(--accent) 3%));
  --ui-surface-panel: linear-gradient(180deg, color-mix(in srgb, var(--bg3) 90%, var(--bg2) 10%), color-mix(in srgb, var(--bg2) 94%, var(--accent) 2%));
  --ui-surface-card: linear-gradient(180deg, color-mix(in srgb, var(--bg3) 90%, var(--bg) 10%), color-mix(in srgb, var(--bg2) 86%, var(--bg) 14%));
  --ui-surface-card-hover: linear-gradient(180deg, color-mix(in srgb, var(--bg3) 84%, var(--accent) 4%), color-mix(in srgb, var(--bg2) 86%, var(--bg) 14%));
  --ui-surface-game: var(--ui-palette-game-bg);
  --ui-surface-text: var(--ui-palette-text-bg);
  --ui-surface-choice: linear-gradient(180deg, color-mix(in srgb, var(--bg3) 72%, var(--accent) 7%), color-mix(in srgb, var(--bg2) 92%, white 8%));
  --ui-surface-input: var(--entry-bg);
  --ui-surface-overlay: color-mix(in srgb, var(--bg3) 86%, var(--accent) 4%);
  --ui-border-subtle: color-mix(in srgb, var(--accent) 15%, var(--bg2));
  --ui-border-strong: color-mix(in srgb, var(--accent) 42%, var(--accent2) 8%);
  --ui-shadow-panel: 0 10px 22px rgba(52, 84, 91, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --ui-shadow-card: 0 14px 24px rgba(52, 84, 91, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --ui-shadow-button: 0 3px 0 color-mix(in srgb, var(--accent) 16%, var(--bg2)), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --ui-backdrop: none;
  --ui-radius-sm: 8px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 26px;
  --ui-text-size: 16px;
  --ui-text-line: 1.76;
  --ui-letter: 0;
  --ui-title-transform: none;
  --ui-message-width: 70ch;
  --ui-button-bg: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 86%, white 14%), color-mix(in srgb, var(--btn-bg) 92%, var(--accent) 4%));
  --ui-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--btn-hover) 84%, white 16%), color-mix(in srgb, var(--btn-hover) 90%, var(--accent2) 4%));
  --ui-button-fg: var(--btn-fg);
  --ui-choice-gap: 12px;
  --ui-choice-radius: 16px 22px 16px 22px;
  --ui-inline-code-radius: 8px;
  --ui-hud-radius: 16px;
  --ui-hud-border-style: solid;
  --ui-hud-shadow: 0 12px 24px rgba(56, 91, 92, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --ui-hud-backdrop: none;
  --ui-game-vignette: none;
  --ui-title-track: 0;
}

[data-style="reverie-s"] #topbar {
  border-bottom-width: 3px;
  padding: 7px 10px 8px;
  gap: 8px 12px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 9%, transparent);
}

[data-style="reverie-s"] #jeu-toolbar,
[data-style="reverie-s"] #saisie-bar {
  border-width: 2px 0;
}

[data-style="reverie-s"] #topbar-title,
[data-style="reverie-s"] #accueil-header h2,
[data-style="reverie-s"] .card-nom,
[data-style="reverie-s"] #choix-label {
  font-weight: 800;
}

[data-style="reverie-s"] #accueil-header h2 {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0;
}

[data-style="reverie-s"] #topbar-title {
  font-size: 19px;
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 16px 20px 16px 20px;
  background: color-mix(in srgb, var(--bg3) 64%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
}

[data-style="reverie-s"] #accueil-header {
  border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-sm);
  background: var(--bg2) !important;
  background-image: none !important;
  border-bottom-color: color-mix(in srgb, var(--ui-border-subtle) 58%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

[data-style="reverie-s"] #cats-bar,
[data-style="reverie-s"] #search-bar {
  background: var(--bg2) !important;
  background-image: none !important;
  border-top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle) 68%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

[data-style="reverie-s"] #scenario-grid-wrap {
  padding: 12px 12px 8px;
}

[data-style="reverie-s"] .topbar-link,
[data-style="reverie-s"] .toolbar-btn,
[data-style="reverie-s"] .cat-btn,
[data-style="reverie-s"] .lang-btn,
[data-style="reverie-s"] .page-btn,
[data-style="reverie-s"] .choix-btn,
[data-style="reverie-s"] .fin-btn,
[data-style="reverie-s"] #btn-tester-local {
  border-radius: 14px 18px 14px 18px;
  font-weight: 750;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

[data-style="reverie-s"] .topbar-link:hover,
[data-style="reverie-s"] .toolbar-btn:hover,
[data-style="reverie-s"] .cat-btn:hover,
[data-style="reverie-s"] .lang-btn:hover,
[data-style="reverie-s"] .page-btn:hover:not(:disabled),
[data-style="reverie-s"] .choix-btn:hover:not(:disabled),
[data-style="reverie-s"] .fin-btn:hover,
[data-style="reverie-s"] #btn-tester-local:hover {
  transform: translateY(-2px);
}

[data-style="reverie-s"] .cat-btn.active,
[data-style="reverie-s"] .lang-btn.active,
[data-style="reverie-s"] .fin-btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-role-positive) 82%, white 10%), color-mix(in srgb, var(--ui-role-positive) 86%, var(--ui-role-positive-deep) 14%));
  color: var(--ui-role-on-positive);
  border-color: color-mix(in srgb, var(--ui-role-positive) 58%, var(--bg2));
  box-shadow: 0 8px 14px color-mix(in srgb, var(--ui-role-positive) 16%, transparent);
}

[data-style="reverie-s"] .topbar-link,
[data-style="reverie-s"] .toolbar-btn,
[data-style="reverie-s"] #theme-select,
[data-style="reverie-s"] #style-select {
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 86%, white 14%), color-mix(in srgb, var(--accent) 12%, var(--btn-bg)));
  color: var(--btn-fg);
  box-shadow: var(--ui-shadow-button);
}

[data-style="reverie-s"] .lang-btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-role-dream) 18%, var(--bg3)), color-mix(in srgb, var(--ui-role-dream) 10%, var(--bg2)));
}

[data-style="reverie-s"] .card-play-btn,
[data-style="reverie-s"] #saisie-send,
[data-style="reverie-s"] .fin-btn.primary {
  background: var(--ui-role-action);
  background-image: none;
  color: var(--ui-role-on-action);
  border: 0;
  box-shadow: none;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

[data-style="reverie-s"] .card-play-btn:hover,
[data-style="reverie-s"] #saisie-send:hover,
[data-style="reverie-s"] .fin-btn.primary:hover {
  background: color-mix(in srgb, var(--ui-role-action) 88%, white 12%);
  background-image: none;
}

[data-style="reverie-s"] .card-play-btn:active,
[data-style="reverie-s"] #saisie-send:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-role-action) 9%, transparent);
}

[data-style="reverie-s"] .cat-btn:nth-child(3n + 1) {
  border-color: color-mix(in srgb, var(--ui-role-positive) 38%, var(--bg2));
}

[data-style="reverie-s"] .cat-btn:nth-child(3n + 2) {
  border-color: color-mix(in srgb, var(--ui-role-dream) 38%, var(--bg2));
}

[data-style="reverie-s"] .cat-btn:nth-child(3n) {
  border-color: color-mix(in srgb, var(--ui-role-favorite) 42%, var(--bg2));
}

[data-style="reverie-s"] .scenario-card {
  border-radius: 24px 16px 22px 16px;
  border-width: 2px;
  /* La vignette occupe toute la largeur : le retrait du thème passe sur le
     corps de la carte, sinon l'image se décollerait des bords arrondis. */
  padding: 0 0 13px;
  transform-origin: center bottom;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

[data-style="reverie-s"] .card-corps {
  padding: 14px 14px 0 18px;
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 1) {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-role-spot-1) 10%, transparent) 0%, transparent 36%),
    var(--ui-surface-card);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 2) {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-role-spot-2) 10%, transparent) 0%, transparent 36%),
    var(--ui-surface-card);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 3) {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-role-spot-3) 10%, transparent) 0%, transparent 36%),
    var(--ui-surface-card);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 4) {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-role-spot-4) 10%, transparent) 0%, transparent 36%),
    var(--ui-surface-card);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 5) {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-role-spot-5) 10%, transparent) 0%, transparent 36%),
    var(--ui-surface-card);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n) {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-role-spot-6) 10%, transparent) 0%, transparent 36%),
    var(--ui-surface-card);
}

[data-style="reverie-s"] .scenario-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 5px;
  border-radius: 0 8px 8px 0;
  background: var(--ui-role-spot-1);
  opacity: 0.65;
  /* Le liseré longe aussi la vignette, qui est opaque et en flux normal. */
  z-index: 1;
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 2)::before {
  background: var(--ui-role-spot-2);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 3)::before {
  background: var(--ui-role-spot-3);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 4)::before {
  background: var(--ui-role-spot-4);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n + 5)::before {
  background: var(--ui-role-spot-5);
}

[data-style="reverie-s"] .scenario-card:nth-child(6n)::before {
  background: var(--ui-role-spot-6);
}

[data-style="reverie-s"] .scenario-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--ui-role-dream) 12%);
  filter: saturate(1.03) brightness(1.015);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
    0 16px 28px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 76%, transparent);
}

[data-style="reverie-s"] .card-fav-btn {
  border-width: 2px;
  background: color-mix(in srgb, var(--bg3) 84%, transparent);
}

[data-style="reverie-s"] .card-fav-btn:hover,
[data-style="reverie-s"] .card-fav-btn.is-favorite {
  color: var(--ui-role-favorite-text);
  border-color: var(--ui-role-favorite);
  background: color-mix(in srgb, var(--ui-role-favorite) 20%, var(--bg3));
}

[data-style="reverie-s"] .card-badge {
  border-radius: 8px 12px 8px 12px;
  text-transform: none;
  letter-spacing: 0;
}

[data-style="reverie-s"] .card-badge.nouveau {
  background: color-mix(in srgb, var(--ui-role-positive) 78%, white 8%);
  color: var(--ui-role-on-positive);
}

[data-style="reverie-s"] .card-badge.mis-en-avant {
  background: color-mix(in srgb, var(--ui-role-favorite) 82%, white 8%);
  color: var(--ui-role-on-favorite);
}

[data-style="reverie-s"] .card-badge.kids {
  background: color-mix(in srgb, var(--ui-role-action) 82%, white 8%);
  color: var(--ui-role-on-action);
}

[data-style="reverie-s"] .card-badge.partenaire {
  background: color-mix(in srgb, var(--accent) 74%, white 12%);
  color: var(--ui-role-on-story);
}

[data-style="reverie-s"] .card-badge.sponsorise {
  background: color-mix(in srgb, var(--ui-role-dream) 78%, white 8%);
  color: var(--ui-role-on-dream);
}

[data-style="reverie-s"] #scenario-search,
[data-style="reverie-s"] #saisie-input,
[data-style="reverie-s"] #theme-select,
[data-style="reverie-s"] #style-select {
  border-width: 2px;
  border-radius: 14px 18px 14px 18px;
}

[data-style="reverie-s"] #text-zone-wrap {
  border-top: 3px solid color-mix(in srgb, var(--ui-role-dream) 34%, transparent);
  padding-top: 16px;
  padding-bottom: 10px;
}

[data-style="reverie-s"] #text-zone-wrap .msg-block,
[data-style="reverie-s"] #text-zone-wrap .msg-block-story,
[data-style="reverie-s"] .msg-embed {
  border-width: 2px;
  border-radius: 18px 12px 18px 12px;
}

[data-style="reverie-s"] .msg-block--dialogue {
  border-color: color-mix(in srgb, var(--ui-role-story) 28%, var(--ui-border-subtle));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-overlay) 84%, var(--ui-role-story) 7%), color-mix(in srgb, var(--bg3) 92%, var(--ui-role-dream) 5%));
}

[data-style="reverie-s"] .msg-block--pensee,
[data-style="reverie-s"] .msg-block--journal {
  border-color: color-mix(in srgb, var(--ui-role-dream) 30%, var(--ui-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 88%, var(--ui-role-dream) 6%), color-mix(in srgb, var(--bg3) 94%, transparent));
}

[data-style="reverie-s"] .msg-block--systeme {
  border-color: color-mix(in srgb, var(--ui-role-attention) 32%, var(--ui-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-overlay) 90%, var(--ui-role-attention) 5%), color-mix(in srgb, var(--bg3) 95%, transparent));
}

[data-style="reverie-s"] #choix-panel {
  border-width: 2px;
  border-radius: var(--ui-radius-xl) var(--ui-radius-md) 0 0;
  padding: 10px 12px;
}

[data-style="reverie-s"] .choix-btn {
  min-height: 42px;
  padding: 9px 14px;
  text-align: left;
  border-width: 2px;
}

[data-style="reverie-s"] .card-play-btn,
[data-style="reverie-s"] #saisie-send {
  border-radius: 14px;
  font-weight: 800;
}

[data-style="reverie-s"] .card-play-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 0;
  line-height: 1.15;
  border-radius: 15px;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background-clip: padding-box;
  box-shadow: none !important;
  transform: none;
}

[data-style="reverie-s"] .card-play-btn:hover {
  border-radius: 15px;
  filter: brightness(1.03);
  box-shadow: none !important;
}

[data-style="reverie-s"] .card-play-btn:active {
  border-radius: 15px;
  transform: none;
  box-shadow: none !important;
}

[data-style="reverie-s"] .msg-image {
  border-width: 2px;
  border-radius: var(--ui-radius-lg) var(--ui-radius-sm) var(--ui-radius-lg) var(--ui-radius-sm);
}

[data-style="reverie-s"] :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent2) 62%, transparent);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  [data-style="reverie-s"] #text-zone-wrap {
    padding-left: 14px;
  }

  [data-style="reverie-s"] .scenario-card:hover {
    transform: translateY(-3px);
  }
}

/* ══════════════════════════════════════════════════════════════
   PALETTE bonbons
   Ambiance "livre illustré" : fond crème, 6 couleurs vives
   distinctes sur fond neutre - pensé pour 4-10 ans
   ══════════════════════════════════════════════════════════════ */
[data-theme="bonbons"] {
  --bg:          #F2EEE7;   /* creme doux, tres calme */
  --bg2:         #E7DED2;   /* sable doux desature */
  --bg3:         #F8F6F0;   /* ivoire repose */
  --fg:          #38271A;
  --fg2:         #8C7054;
  /* accent = rouge fraise vif - bouton principal, titres actifs */
  --accent:      #D63A3A;
  --accent2:     #A82020;
  /* boutons neutres : sable crème, pas coloré */
  --btn-bg:      #E2D8C9;
  --btn-hover:   #D6C8B8;
  --btn-fg:      #6B3A12;
  --block-bg:    #E6F4EA;
  --block-fg:    #2D6B38;
  --error-fg:    #B52A2A;
  --embed-title: #3A8BC8;
  --embed-field: #4A9A42;
  --entry-bg:    #F8F6F0;
  --entry-fg:    #38271A;
  --scrollbar-thumb: #D4A87A;

  /* ── 6 couleurs kid franchement distinctes ───────────────── */
  --kid-red:     #D63A3A;   /* action principale, bouton jouer */
  --kid-blue:    #3A8BC8;   /* navigation, liens, histoire */
  --kid-green:   #3AAA52;   /* succès, positif */
  --kid-yellow:  #E8B832;   /* favori, attention */
  --kid-purple:  #8A5DC8;   /* magie, rêve */
  --kid-teal:    #1AAF9A;   /* exploration, eau */

  --kid-red-deep:    #A01A1A;
  --kid-blue-deep:   #236090;
  --kid-green-deep:  #267838;
  --kid-yellow-text: #6A4200;
  --kid-purple-deep: #5E3A9A;
  --kid-teal-deep:   #0E7A6A;

  --kid-on-red:    #FFF2F2;
  --kid-on-blue:   #F0F6FF;
  --kid-on-green:  #F0FFF2;
  --kid-on-yellow: #3A2000;
  --kid-on-purple: #FAF0FF;
  --kid-on-teal:   #F0FFFC;

  /* ── Variables de rôle pour le style bonbons-s ───────── */
  --kid-title-color: #D63A3A;   /* titre topbar : rouge fraise */
  --kid-active-bg:   #3AAA52;   /* cat active : vert */
  --kid-active-fg:   #F0FFF2;
  /* Bouton jouer : vert */
  --kid-play-bg:   #3AAA52;
  --kid-play-deep: #267838;
  --kid-play-fg:   #F0FFF2;
  /* Bouton envoyer : bleu */
  --kid-send-bg:   #3A8BC8;
  --kid-send-deep: #236090;
  --kid-send-fg:   #F0F6FF;
  /* Blocs sémantiques - fonds et bordures */
  --kid-block-narration-bg:     rgba(240, 246, 255, 0.95);
  --kid-block-narration-border: rgba(58, 139, 200, 0.45);
  --kid-block-dialogue-bar:     #1AAF9A;
  --kid-block-dialogue-bg:      rgba(26, 175, 154, 0.07);
  --kid-block-pensee-border:    rgba(138, 93, 200, 0.45);
  --kid-block-pensee-bg:        rgba(250, 240, 255, 0.95);
  --kid-block-journal-border:   rgba(232, 184, 50, 0.45);
  --kid-block-journal-bg:       rgba(255, 252, 235, 0.95);
  --kid-block-systeme-border:   rgba(58, 170, 82, 0.40);
  --kid-block-systeme-bg:       rgba(235, 255, 238, 0.95);
  --kid-block-systeme-bar:      #3AAA52;
  --ui-role-action:        var(--kid-play-bg);
  --ui-role-action-deep:   var(--kid-play-deep);
  --ui-role-positive:      var(--kid-active-bg);
  --ui-role-positive-deep: var(--kid-green-deep);
  --ui-role-story:         var(--kid-send-bg);
  --ui-role-story-deep:    var(--kid-send-deep);
  --ui-role-on-action:     var(--kid-play-fg);
  --ui-role-on-positive:   var(--kid-active-fg);
  --ui-role-on-story:      var(--kid-send-fg);
  --ui-role-spot-1:        var(--kid-red);
  --ui-role-spot-2:        var(--kid-blue);
  --ui-role-spot-3:        var(--kid-green);
  --ui-role-spot-4:        var(--kid-yellow);
  --ui-role-spot-5:        var(--kid-purple);
  --ui-role-spot-6:        var(--kid-teal);

  /* Fond de jeu - un halo par couleur kid, positions décalées */
  --ui-palette-game-bg:
    radial-gradient(circle at  8% 14%, rgba( 58, 139, 200, 0.052) 0%, transparent 36%),
    radial-gradient(circle at 92% 12%, rgba( 58, 170,  82, 0.040) 0%, transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(138,  93, 200, 0.040) 0%, transparent 32%),
    radial-gradient(circle at 90% 86%, rgba(232, 184,  50, 0.026) 0%, transparent 32%),
    radial-gradient(circle at 50% 48%, rgba( 26, 175, 154, 0.032) 0%, transparent 40%),
    linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--bg3) 99%, #D63A3A 0.5%) 50%, var(--bg) 100%);
  --ui-palette-text-bg: var(--ui-palette-game-bg);
}

/* Polices de la palette bonbons : seulement si aucun Style dédié n'impose
   les siennes - le Style choisi par le joueur prime sur la palette. */
:root[data-theme="bonbons"]:not([data-style]),
:root[data-theme="bonbons"][data-style="classique"] {
  --font-text:   'Nunito', Georgia, serif;
  --font-mono:   'Nunito', Consolas, monospace;
  --font-ui:     'Nunito', 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   STYLE bonbons-s
   "Jouet en bois peint" : ronds uniformes, couleurs franches,
   pastilles de coin sur les cartes, pas d'asymétrie
   ══════════════════════════════════════════════════════════════ */
[data-style="bonbons-s"] {
  --font-ui:     'Nunito', 'Segoe UI', sans-serif;
  --font-text:   'Nunito', Georgia, serif;
  --font-mono:   'Nunito', Consolas, monospace;
  --ui-font-display: 'Fredoka One', 'Nunito', sans-serif;
  --ui-text-size: 16px;
  --ui-text-line: 1.78;
  --ui-letter:    0;
  --ui-title-transform: none;
  --ui-title-track: 0.01em;
  --ui-message-width: 70ch;

  /* Rayons uniformément généreux */
  --ui-radius-sm:  12px;
  --ui-radius-md:  18px;
  --ui-radius-lg:  24px;
  --ui-radius-xl:  32px;

  /* Ombres chaudes, sans noir pur */
  --ui-shadow-panel:
    0 6px 18px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
  --ui-shadow-card:
    0 8px 20px color-mix(in srgb, var(--accent) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  --ui-shadow-button:
    0 3px 0 color-mix(in srgb, var(--accent) 16%, var(--btn-bg)),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* Surfaces */
  --ui-surface-topbar:   linear-gradient(180deg, color-mix(in srgb, var(--bg2) 92%, white 8%), color-mix(in srgb, var(--bg2) 94%, var(--bg) 6%));
  --ui-surface-toolbar:  linear-gradient(180deg, color-mix(in srgb, var(--bg2) 90%, white 10%), color-mix(in srgb, var(--bg2) 92%, var(--accent) 3%));
  --ui-surface-panel:    linear-gradient(180deg, color-mix(in srgb, var(--bg3) 86%, var(--bg2) 14%), color-mix(in srgb, var(--bg2) 90%, var(--accent) 3%));
  --ui-surface-card:     linear-gradient(180deg, color-mix(in srgb, var(--bg3) 90%, var(--bg) 10%), color-mix(in srgb, var(--bg2) 86%, var(--bg) 14%));
  --ui-surface-card-hover: linear-gradient(180deg, color-mix(in srgb, var(--bg3) 84%, var(--accent) 5%), color-mix(in srgb, var(--bg2) 86%, var(--bg) 14%));
  --ui-surface-game:     var(--ui-palette-game-bg, var(--bg));
  --ui-surface-text:     var(--ui-palette-text-bg, var(--bg3));
  --ui-surface-choice:   linear-gradient(180deg, color-mix(in srgb, var(--bg3) 76%, var(--accent) 5%), color-mix(in srgb, var(--bg2) 88%, white 12%));
  --ui-surface-input:    var(--entry-bg);
  --ui-surface-overlay:  color-mix(in srgb, var(--bg3) 90%, var(--accent) 3%);

  /* Bordures */
  --ui-border-subtle: color-mix(in srgb, var(--accent) 14%, var(--bg2));
  --ui-border-strong: color-mix(in srgb, var(--accent) 38%, var(--bg2));

  --ui-backdrop: none;

  /* Boutons */
  --ui-button-bg:   linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 82%, white 18%), color-mix(in srgb, var(--btn-bg) 90%, var(--accent) 4%));
  --ui-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--btn-hover) 80%, white 20%), color-mix(in srgb, var(--btn-hover) 88%, var(--accent) 6%));
  --ui-button-fg:   var(--btn-fg);

  /* Choix - pleinement ronds, contrairement à Reverie */
  --ui-choice-gap:    10px;
  --ui-choice-radius: 999px;

  --ui-inline-code-radius: 10px;

  /* HUD */
  --ui-hud-radius:       20px;
  --ui-hud-border-style: solid;
  --ui-hud-shadow:       0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,0.52);
  --ui-hud-backdrop:     none;
  --ui-game-vignette:    none;
}

/* ── Topbar ───────────────────────────────────────────────── */
[data-style="bonbons-s"] #topbar {
  border-bottom-width: 3px;
  padding: 7px 12px 8px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-style="bonbons-s"] #topbar-title {
  font-family: var(--ui-font-display);
  font-size: 20px;
  letter-spacing: 0.03em;
  padding: 3px 12px;
  border-radius: var(--ui-radius-md);
  color: var(--kid-title-color, var(--accent));
}

[data-style="bonbons-s"] #topbar-title,
[data-style="bonbons-s"] #accueil-header h2,
[data-style="bonbons-s"] .card-nom,
[data-style="bonbons-s"] #choix-label {
  font-weight: 800;
}

/* ── Toolbar + saisie ─────────────────────────────────────── */
[data-style="bonbons-s"] #jeu-toolbar,
[data-style="bonbons-s"] #saisie-bar {
  border-width: 2px 0;
}

/* ── Barres accueil ───────────────────────────────────────── */
[data-style="bonbons-s"] #cats-bar,
[data-style="bonbons-s"] #search-bar {
  background: var(--ui-surface-panel);
  border-bottom-color: var(--ui-border-subtle);
}

[data-style="bonbons-s"] #scenario-grid-wrap {
  padding: 14px 14px 8px;
}

/* ── Tous les boutons - ronds uniformes, relief doux ─────── */
[data-style="bonbons-s"] .topbar-link,
[data-style="bonbons-s"] .toolbar-btn,
[data-style="bonbons-s"] .cat-btn,
[data-style="bonbons-s"] .lang-btn,
[data-style="bonbons-s"] .page-btn,
[data-style="bonbons-s"] .choix-btn,
[data-style="bonbons-s"] .fin-btn,
[data-style="bonbons-s"] #btn-tester-local {
  border-radius: var(--ui-radius-md);
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

[data-style="bonbons-s"] .topbar-link:hover,
[data-style="bonbons-s"] .toolbar-btn:hover,
[data-style="bonbons-s"] .cat-btn:hover,
[data-style="bonbons-s"] .lang-btn:hover,
[data-style="bonbons-s"] .page-btn:hover:not(:disabled),
[data-style="bonbons-s"] .choix-btn:hover:not(:disabled),
[data-style="bonbons-s"] .fin-btn:hover,
[data-style="bonbons-s"] #btn-tester-local:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* ── Catégories - pastille de couleur via border-top ─────── */
[data-style="bonbons-s"] .cat-btn {
  border-top-width: 3px;
  border-top-style: solid;
}
[data-style="bonbons-s"] .cat-btn:nth-child(6n + 1) { border-top-color: var(--kid-red,    var(--accent)); }
[data-style="bonbons-s"] .cat-btn:nth-child(6n + 2) { border-top-color: var(--kid-blue,   var(--accent)); }
[data-style="bonbons-s"] .cat-btn:nth-child(6n + 3) { border-top-color: var(--kid-green,  var(--accent)); }
[data-style="bonbons-s"] .cat-btn:nth-child(6n + 4) { border-top-color: var(--kid-yellow, var(--accent)); }
[data-style="bonbons-s"] .cat-btn:nth-child(6n + 5) { border-top-color: var(--kid-purple, var(--accent)); }
[data-style="bonbons-s"] .cat-btn:nth-child(6n)     { border-top-color: var(--kid-teal,   var(--accent)); }

[data-style="bonbons-s"] .cat-btn.active,
[data-style="bonbons-s"] .lang-btn.active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kid-active-bg, var(--kid-green, var(--accent))) 80%, white 20%),
    var(--kid-active-bg, var(--kid-green, var(--accent))));
  color: var(--kid-active-fg, var(--kid-on-green, #fff));
  border-color: var(--kid-active-bg, var(--kid-green, var(--accent)));
  border-top-color: var(--kid-active-bg, var(--kid-green, var(--accent)));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kid-active-bg, var(--kid-green, var(--accent))) 22%, transparent);
}

/* ── Topbar links + toolbar ───────────────────────────────── */
[data-style="bonbons-s"] .topbar-link,
[data-style="bonbons-s"] .toolbar-btn,
[data-style="bonbons-s"] #theme-select,
[data-style="bonbons-s"] #style-select {
  background: var(--ui-button-bg);
  color: var(--btn-fg);
  box-shadow: var(--ui-shadow-button);
}

/* ── Bouton Jouer, Envoyer, Fin - couleurs via palette uniquement ── */
[data-style="bonbons-s"] .card-play-btn {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-role-action) 80%, white 20%),
    var(--ui-role-action));
  color: var(--ui-role-on-action);
  border: 0;
  border-radius: var(--ui-radius-md);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--ui-role-action-deep),
              0 6px 14px color-mix(in srgb, var(--ui-role-action) 22%, transparent);
  transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
[data-style="bonbons-s"] .card-play-btn:hover  { filter: brightness(1.07); transform: translateY(-1px); }
[data-style="bonbons-s"] .card-play-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ui-role-action-deep),
              0 2px 6px color-mix(in srgb, var(--ui-role-action) 14%, transparent);
}

[data-style="bonbons-s"] #saisie-send {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-role-story) 80%, white 20%),
    var(--ui-role-story));
  color: var(--ui-role-on-story);
  border: 0;
  border-radius: var(--ui-radius-md);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--ui-role-story-deep, var(--accent2)),
              0 6px 14px color-mix(in srgb, var(--ui-role-story) 22%, transparent);
  transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
[data-style="bonbons-s"] #saisie-send:hover  { filter: brightness(1.07); transform: translateY(-1px); }
[data-style="bonbons-s"] #saisie-send:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ui-role-story-deep, var(--accent2)),
              0 2px 6px color-mix(in srgb, var(--ui-role-story) 14%, transparent);
}

[data-style="bonbons-s"] .fin-btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-role-action) 80%, white 20%),
    var(--ui-role-action));
  color: var(--ui-role-on-action);
  border: 0;
  border-radius: var(--ui-radius-md);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--ui-role-action-deep),
              0 6px 14px color-mix(in srgb, var(--ui-role-action) 22%, transparent);
  transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
[data-style="bonbons-s"] .fin-btn.primary:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ── Cartes scénarios ─────────────────────────────────────── */
[data-style="bonbons-s"] .scenario-card {
  border-radius: var(--ui-radius-lg);
  border-width: 2px;
  padding: 18px 14px 14px 16px;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Pastille de couleur en coin haut-gauche - signature "bonbons" */
[data-style="bonbons-s"] .scenario-card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-role-spot-2);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-2) 35%, transparent);
  border: 3px solid var(--bg3);
}
[data-style="bonbons-s"] .scenario-card:nth-child(6n + 1)::before { background: var(--ui-role-spot-1); box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-1) 32%, transparent); }
[data-style="bonbons-s"] .scenario-card:nth-child(6n + 2)::before { background: var(--ui-role-spot-2); box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-2) 32%, transparent); }
[data-style="bonbons-s"] .scenario-card:nth-child(6n + 3)::before { background: var(--ui-role-spot-3); box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-3) 32%, transparent); }
[data-style="bonbons-s"] .scenario-card:nth-child(6n + 4)::before { background: var(--ui-role-spot-4); box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-4) 32%, transparent); }
[data-style="bonbons-s"] .scenario-card:nth-child(6n + 5)::before { background: var(--ui-role-spot-5); box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-5) 32%, transparent); }
[data-style="bonbons-s"] .scenario-card:nth-child(6n)::before     { background: var(--ui-role-spot-6); box-shadow: 0 3px 8px color-mix(in srgb, var(--ui-role-spot-6) 32%, transparent); }

[data-style="bonbons-s"] .scenario-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--bg2));
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* ── Favori ───────────────────────────────────────────────── */
[data-style="bonbons-s"] .card-fav-btn {
  border-width: 2px;
}
[data-style="bonbons-s"] .card-fav-btn:hover,
[data-style="bonbons-s"] .card-fav-btn.is-favorite {
  color: var(--kid-yellow-text, var(--fg));
  border-color: var(--kid-yellow, var(--accent));
  background: color-mix(in srgb, var(--kid-yellow, var(--accent)) 16%, var(--bg3));
}

/* ── Badges ───────────────────────────────────────────────── */
[data-style="bonbons-s"] .card-badge {
  border-radius: var(--ui-radius-sm);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  padding: 3px 9px;
}
[data-style="bonbons-s"] .card-badge.nouveau      { background: color-mix(in srgb, var(--kid-green,  var(--accent)) 80%, white 10%); color: var(--kid-on-green,  var(--fg)); }
[data-style="bonbons-s"] .card-badge.mis-en-avant { background: color-mix(in srgb, var(--kid-yellow, var(--accent)) 82%, white 8%);  color: var(--kid-on-yellow, var(--fg)); }
[data-style="bonbons-s"] .card-badge.kids         { background: color-mix(in srgb, var(--kid-red,    var(--accent)) 78%, white 12%); color: var(--kid-on-red,    var(--fg)); }
[data-style="bonbons-s"] .card-badge.partenaire   { background: color-mix(in srgb, var(--kid-blue,   var(--accent)) 78%, white 12%); color: var(--kid-on-blue,   var(--fg)); }
[data-style="bonbons-s"] .card-badge.sponsorise   { background: color-mix(in srgb, var(--kid-purple, var(--accent)) 80%, white 8%);  color: var(--kid-on-purple, var(--fg)); }

/* ── Champs et sélecteurs ─────────────────────────────────── */
[data-style="bonbons-s"] #scenario-search,
[data-style="bonbons-s"] #saisie-input,
[data-style="bonbons-s"] #theme-select,
[data-style="bonbons-s"] #style-select {
  border-width: 2px;
  border-radius: var(--ui-radius-md);
}

/* ── Zone de texte ────────────────────────────────────────── */
[data-style="bonbons-s"] #text-zone-wrap {
  border-top: 3px solid color-mix(in srgb, var(--kid-teal, var(--accent)) 28%, transparent);
  padding-top: 16px;
  padding-bottom: 10px;
}

/* ── Panel de choix ───────────────────────────────────────── */
[data-style="bonbons-s"] #choix-panel {
  border-width: 2px;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
  padding: 10px 12px;
}

[data-style="bonbons-s"] .choix-btn {
  min-height: 42px;
  padding: 9px 18px;
  border-width: 2px;
  border-radius: 999px;
  font-size: 15px;
}

/* Boutons de choix - couleur de bordure en rotation */
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(6n + 1) { border-color: color-mix(in srgb, var(--kid-red,    var(--accent)) 40%, var(--btn-bg)); }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(6n + 2) { border-color: color-mix(in srgb, var(--kid-blue,   var(--accent)) 40%, var(--btn-bg)); }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(6n + 3) { border-color: color-mix(in srgb, var(--kid-green,  var(--accent)) 40%, var(--btn-bg)); }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(6n + 4) { border-color: color-mix(in srgb, var(--kid-yellow, var(--accent)) 40%, var(--btn-bg)); }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(6n + 5) { border-color: color-mix(in srgb, var(--kid-purple, var(--accent)) 40%, var(--btn-bg)); }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(6n)     { border-color: color-mix(in srgb, var(--kid-teal,   var(--accent)) 40%, var(--btn-bg)); }

/* ── Blocs sémantiques - via variables palette, aucune couleur fixe ── */

[data-style="bonbons-s"] .msg-block--narration {
  border: 2px solid var(--kid-block-narration-border, color-mix(in srgb, var(--kid-blue, var(--accent)) 45%, transparent));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--kid-blue, var(--accent)) 10%, transparent), transparent 42%),
    linear-gradient(180deg, var(--kid-block-narration-bg, var(--bg3)), color-mix(in srgb, var(--kid-block-narration-bg, var(--bg3)) 82%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kid-blue, var(--accent)) 12%, transparent), var(--ui-shadow-button);
}

[data-style="bonbons-s"] .msg-block--dialogue {
  border-left: 6px solid var(--kid-block-dialogue-bar, var(--kid-teal, var(--accent)));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kid-teal, var(--accent)) 9%, var(--ui-surface-overlay)),
    color-mix(in srgb, var(--kid-teal, var(--accent)) 3%, var(--ui-surface-overlay)));
}
[data-style="bonbons-s"] .msg-block--dialogue::before,
[data-style="bonbons-s"] .msg-block--dialogue::after {
  color: color-mix(in srgb, var(--kid-teal, var(--accent)) 35%, transparent);
}

[data-style="bonbons-s"] .msg-block--pensee {
  border: 1px dashed var(--kid-block-pensee-border, color-mix(in srgb, var(--kid-purple, var(--accent)) 45%, transparent));
  border-left: 3px dashed color-mix(in srgb, var(--kid-purple, var(--accent)) 60%, transparent);
  background: linear-gradient(135deg,
    var(--kid-block-pensee-bg, var(--bg3)),
    color-mix(in srgb, var(--kid-block-pensee-bg, var(--bg3)) 82%, transparent));
}
[data-style="bonbons-s"] .msg-block--pensee::before {
  color: color-mix(in srgb, var(--kid-purple, var(--accent)) 40%, transparent);
}

[data-style="bonbons-s"] .msg-block--journal {
  border: 1px solid var(--kid-block-journal-border, color-mix(in srgb, var(--kid-yellow, var(--accent)) 45%, transparent));
  background:
    linear-gradient(180deg, var(--kid-block-journal-bg, var(--bg3)), color-mix(in srgb, var(--kid-block-journal-bg, var(--bg3)) 84%, transparent)),
    repeating-linear-gradient(180deg, transparent 0 22px, color-mix(in srgb, var(--kid-yellow, var(--accent)) 14%, transparent) 22px 23px);
}
[data-style="bonbons-s"] .msg-block--journal::before {
  background: color-mix(in srgb, var(--kid-yellow, var(--accent)) 70%, transparent);
}

[data-style="bonbons-s"] .msg-block--systeme {
  border: 1px solid var(--kid-block-systeme-border, color-mix(in srgb, var(--kid-green, var(--accent)) 40%, transparent));
  background: linear-gradient(180deg,
    var(--kid-block-systeme-bg, var(--bg3)),
    color-mix(in srgb, var(--kid-block-systeme-bg, var(--bg3)) 84%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--ui-shadow-button);
}
[data-style="bonbons-s"] .msg-block--systeme::before {
  background: linear-gradient(180deg, var(--kid-block-systeme-bar, #3AAA52), color-mix(in srgb, var(--kid-block-systeme-bar, #3AAA52) 60%, transparent));
}

/* ── Scrollbar ────────────────────────────────────────────── */
[data-style="bonbons-s"] ::-webkit-scrollbar       { width: 8px; }
[data-style="bonbons-s"] ::-webkit-scrollbar-track { border-radius: 999px; }
[data-style="bonbons-s"] ::-webkit-scrollbar-thumb { border-radius: 999px; }

/* ── Focus ────────────────────────────────────────────────── */
[data-style="bonbons-s"] :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kid-blue, var(--accent)) 55%, transparent);
  outline-offset: 2px;
}

/* ── Animation entrée choix ───────────────────────────────── */
@keyframes kidFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-style="bonbons-s"] #choix-buttons .choix-btn { animation: kidFadeUp 0.22s ease both; }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(2) { animation-delay: 0.04s; }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(3) { animation-delay: 0.08s; }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(4) { animation-delay: 0.12s; }
[data-style="bonbons-s"] #choix-buttons .choix-btn:nth-child(5) { animation-delay: 0.16s; }

/* Mobile */
@media (max-width: 620px) {
  [data-style="bonbons-s"] #text-zone-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── Easter eggs ──────────────────────────────────────────── */

@keyframes barrelRoll {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(calc(var(--egg-roll-turns, 1) * 360deg)); }
}
#game-area.barrel-rolling {
  animation: barrelRoll 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

@keyframes eggShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(calc(-8px * var(--egg-intensity, 1)), calc(3px * var(--egg-intensity, 1))) rotate(-1deg); }
  30% { transform: translate(calc(7px * var(--egg-intensity, 1)), calc(-5px * var(--egg-intensity, 1))) rotate(1deg); }
  45% { transform: translate(calc(-6px * var(--egg-intensity, 1)), calc(5px * var(--egg-intensity, 1))) rotate(-1deg); }
  60% { transform: translate(calc(6px * var(--egg-intensity, 1)), calc(2px * var(--egg-intensity, 1))) rotate(1deg); }
  75% { transform: translate(calc(-3px * var(--egg-intensity, 1)), calc(-4px * var(--egg-intensity, 1))) rotate(0deg); }
}
#game-area.egg-shake { animation: eggShake 0.55s linear 3; }
#game-area.egg-invert { filter: invert(1) hue-rotate(180deg); transition: filter 0.18s ease; }
@keyframes eggGlitch {
  0%, 100% { filter: none; transform: translate(0); }
  20% { filter: hue-rotate(90deg) contrast(calc(1 + 0.6 * var(--egg-intensity, 1))); transform: translate(calc(-3px * var(--egg-intensity, 1)), calc(2px * var(--egg-intensity, 1))); }
  40% { filter: saturate(calc(1 + 1.2 * var(--egg-intensity, 1))); transform: translate(calc(4px * var(--egg-intensity, 1)), -1px); }
  60% { filter: hue-rotate(-80deg) contrast(calc(1 + 0.8 * var(--egg-intensity, 1))); transform: translate(calc(-2px * var(--egg-intensity, 1)), calc(-2px * var(--egg-intensity, 1))); }
  80% { filter: saturate(calc(max(0, 1.8 - 1.4 * var(--egg-intensity, 1)))) contrast(calc(1 + 0.4 * var(--egg-intensity, 1))); transform: translate(calc(3px * var(--egg-intensity, 1)), 1px); }
}
#game-area.egg-glitch { animation: eggGlitch 0.22s steps(2, end) 8; }

.egg-confetti-layer,
.egg-matrix-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
}
.egg-confetti-layer i {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: eggConfettiFall 2.2s cubic-bezier(.2,.7,.25,1) forwards;
}
@keyframes eggConfettiFall {
  to { transform: translate(var(--egg-x), 110vh) rotate(var(--egg-r)); opacity: 0.9; }
}
.egg-matrix-layer {
  background: rgba(0, 0, 0, 0.72);
  color: #4dff7a;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 16px;
  line-height: 1.1;
  text-shadow: 0 0 8px #1dff57;
}
.egg-matrix-layer span {
  position: absolute;
  top: -120%;
  white-space: pre;
  opacity: 0.85;
  animation: eggMatrixRain 2.7s linear infinite;
}
@keyframes eggMatrixRain {
  to { transform: translateY(230%); }
}

#konami-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#konami-overlay.hidden { display: none; }

#konami-box {
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--accent, #7c6af7);
  border-radius: 10px;
  padding: 28px 36px;
  max-width: 420px;
  font-family: monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg, #e0e0e0);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  animation: kidFadeUp 0.3s ease both;
}
#konami-box .konami-line { display: block; }
#konami-box .konami-line.accent { color: var(--accent, #7c6af7); font-weight: bold; }

#logo-toast {
  display: none;
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--accent, #7c6af7);
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 0.95rem;
  color: var(--fg, #e0e0e0);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  max-width: 480px;
  text-align: center;
  animation: kidFadeUp 0.25s ease both;
}
#logo-toast.logo-toast-show { display: block; }

[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-dialogue {
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--ph-surface-2);
  box-shadow: none;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble.narrative-phone-sent .narrative-dialogue {
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: color-mix(in srgb, var(--ph-accent) 24%, var(--ph-surface-2));
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-dialogue::before,
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-dialogue::after { display: none; }
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-dialogue.narrative-custom-frame {
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble {
  width: fit-content;
  min-width: 0;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-dialogue {
  line-height: 1.45;
  overflow-wrap: anywhere;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble.narrative-phone-sent .narrative-dialogue {
  background: color-mix(in srgb, var(--ph-accent) 42%, var(--ph-surface-2));
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble.narrative-phone-sent .narrative-speaker {
  text-align: right;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-custom-portrait-frame:not(.narrative-generated-frame) {
  border: 0 !important;
  border-image: none !important;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-custom-portrait-frame:not(.narrative-generated-frame)::after {
  display: none;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-custom-portrait-frame:not(.narrative-generated-frame) > .narrative-image-frame-layer {
  inset: -2px !important;
  z-index: 2;
  --narrative-image-frame-width: 4px !important;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-portrait-shell {
  flex-basis: 2.65rem;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-portrait-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-custom-portrait-frame:not(.narrative-generated-frame) img {
  width: calc(100% - 0.55rem);
  height: calc(100% - 0.55rem);
  margin: 0.275rem auto;
}
[data-ui="phone"] #text-zone-wrap .narrative-phone-bubble .narrative-custom-portrait-frame.narrative-generated-frame img {
  width: calc(100% - 0.3rem);
  height: calc(100% - 0.3rem);
  margin: 0.15rem auto;
}


/* ─────────────────────────────────────────────────────────────────────────
   Écrans tactiles (Android, iOS, Web mobile, TWA)

   Sur un pointeur grossier, une cible de 27-32px est trop petite : Android
   recommande 48dp, WCAG 2.5.8 exige au moins 24px et conseille 44px. Les
   commandes de l'app étaient à 27-32px de haut, donc difficiles à viser sans
   zoomer. On agrandit la HAUTEUR de frappe sans toucher aux polices ni à la
   mise en page desktop (souris = pointeur fin, règles non appliquées).

   Volontairement exclus : les modes UI de scénario (cards/deck/phone/
   fullscreen), qui ont leurs propres dimensions voulues par l'auteur.
   ──────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  #btn-abandonner,
  #btn-accueil,
  #topbar-title,
  body:not([data-ui]) #btn-prev,
  body:not([data-ui]) #btn-next,
  body:not([data-ui]) #btn-open-file,
  body:not([data-ui]) #btn-open-folder,
  body:not([data-ui]) .cat-btn,
  body:not([data-ui]) .card-play-btn,
  body:not([data-ui]) #saisie-send,
  body:not([data-ui]) #saisie-input {
    min-height: 44px;
  }
  #topbar-toggle,
  #btn-immersion,
  body:not([data-ui]) .card-fav-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Le champ de recherche du catalogue reste confortable au doigt. */
  body:not([data-ui]) #scenario-search {
    min-height: 40px;
  }
  /* Barre du haut : liens, sélecteurs et contrôles de son. Elle est dépliée
     sur les écrans larges (tablette, téléphone en paysage), où ses commandes
     restaient à 24-27px. */
  .topbar-link,
  #theme-select,
  #style-select,
  #lang-fr,
  #lang-en {
    min-height: 44px;
  }
  #lang-fr,
  #lang-en {
    min-width: 44px;
  }
  #btn-mute {
    min-width: 44px;
    min-height: 44px;
  }
  /* Un curseur de volume se manipule mal au doigt s'il est fin. */
  #volume-slider {
    min-height: 32px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   Encoches et barres système (viewport-fit=cover)

   index.html demande viewport-fit=cover : la page occupe donc TOUTE la dalle,
   encoche comprise. Le bas était déjà géré, mais en PAYSAGE l'encoche et la
   barre de gestes passent sur les CÔTÉS : les bandes pleine largeur (barre du
   haut, barre de saisie, pied du catalogue) passaient dessous.
   On ajoute l'inset latéral au padding existant, sans rien changer quand les
   insets valent 0 (écran sans encoche, Desktop, navigateur classique).
   ──────────────────────────────────────────────────────────────────────── */
#topbar {
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
}
body:not([data-ui="phone"]) #saisie-bar {
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-right: calc(10px + env(safe-area-inset-right));
}
body.hide-input:not([data-ui="phone"]) #saisie-bar {
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
}
/* La barre du mode phone vit dans un châssis centré : les insets de l'écran
   physique ne doivent ni la comprimer, ni remplacer ses espacements propres. */
body[data-ui="phone"] #game-area > #saisie-bar {
  padding: 8px 12px;
}
#accueil-footer {
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
}

/* ══ Succès ═══════════════════════════════════════════════════ */
#search-bar {
  position: relative;
}
.achievements-home-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel, var(--bg2)) 88%, var(--accent) 12%);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.achievements-home-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel, var(--bg2)) 76%, var(--accent) 24%);
}
.achievements-screen {
  position: fixed;
  inset: 0;
  z-index: 10010;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 5vh, 48px) clamp(12px, 5vw, 64px);
  overflow: hidden;
  background: rgba(3, 7, 12, .68);
  backdrop-filter: blur(5px) saturate(.8);
  -webkit-backdrop-filter: blur(5px) saturate(.8);
}
.achievements-shell {
  box-sizing: border-box;
  width: min(1120px, 90vw);
  height: min(900px, 90vh);
  height: min(900px, 90dvh);
  margin: 0;
  padding: 28px 30px 42px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--text) 10%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34rem),
    linear-gradient(155deg, color-mix(in srgb, var(--bg) 94%, #07111c 6%), var(--bg));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
}
.achievements-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.achievements-kicker {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .22em;
}
.achievements-header h1 {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 2.45rem);
  letter-spacing: -.035em;
}
.achievements-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  justify-self: end;
  padding: 0 0 3px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel, var(--bg2)) 88%, transparent);
  color: var(--text-muted, var(--text2));
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.achievements-close:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel, var(--bg2)) 74%, var(--accent) 26%);
}
.achievements-score {
  display: grid;
  gap: 2px;
  justify-self: end;
  padding: 9px 14px;
  border-radius: 999px;
  color: #f8cc64;
  background: rgba(248, 190, 62, .10);
  border: 1px solid rgba(248, 190, 62, .25);
  font-size: .88rem;
  font-weight: 750;
  text-align: right;
}
.achievements-score strong { font: inherit; }
.achievements-score small { color: var(--text-muted, var(--text2)); font-size: .68rem; font-weight: 650; }
.achievements-summary {
  width: min(620px, 100%);
  margin: 0 auto 34px;
  text-align: center;
  color: var(--text-muted, var(--text2));
  font-size: .86rem;
}
.achievements-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 26px;
}
.achievements-nav.hidden { display: none; }
.achievements-tab,
.achievements-scenario-select {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel, var(--bg2)) 90%, transparent);
  color: var(--text-muted, var(--text2));
  font: inherit;
}
.achievements-tab {
  padding: 8px 14px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
}
.achievements-tab:hover,
.achievements-tab.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--panel, var(--bg2)) 76%, var(--accent) 24%);
}
.achievements-scenario-select {
  max-width: min(360px, 76vw);
  padding: 7px 34px 7px 11px;
  cursor: pointer;
}
.achievements-scenario-select.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--panel, var(--bg2)) 76%, var(--accent) 24%);
}
.achievements-progress {
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.achievements-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #68b7ff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width .35s ease;
}
.achievement-group { margin-top: 32px; }
.achievement-group h2 {
  margin: 0 0 13px;
  font-size: .9rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text2));
}
.achievement-status-group + .achievement-status-group { margin-top: 25px; }
.achievement-status-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.achievement-status-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: .84rem;
  font-weight: 750;
}
.achievement-status-heading span {
  min-width: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text-muted, var(--text2));
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
}
.achievement-status-group.is-unlocked .achievement-status-heading {
  border-bottom-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.achievement-status-group.is-unlocked .achievement-status-heading h3,
.achievement-status-group.is-unlocked .achievement-status-heading span { color: var(--accent); }
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.achievement-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 15px;
  min-height: 104px;
  padding: 15px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--panel, var(--bg2)) 95%, white 5%), var(--panel, var(--bg2)));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transition: transform .16s ease, border-color .16s ease;
}
.achievement-card:hover { transform: translateY(-1px); }
.achievement-card.is-unlocked {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: inset 3px 0 0 var(--accent), 0 8px 24px rgba(0, 0, 0, .14);
}
.achievement-card.is-locked { filter: saturate(.48); }
.achievement-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 23%, var(--bg)), color-mix(in srgb, var(--bg) 92%, black));
  color: #f5cb68;
  font-size: 2rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 9%, transparent);
}
.achievement-icon img { width: 100%; height: 100%; object-fit: cover; }
.achievement-icon.is-secret { color: var(--text-muted, var(--text2)); font-size: 1.35rem; }
.achievement-card-body { min-width: 0; }
.achievement-card-top { display: flex; align-items: baseline; gap: 12px; }
.achievement-card h3 {
  flex: 1;
  min-width: 0;
  margin: 1px 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}
.achievement-card-top > span {
  color: #f3c55e;
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}
.achievement-card p {
  margin: 0;
  color: var(--text-muted, var(--text2));
  font-size: .82rem;
  line-height: 1.38;
}
.achievement-card-status {
  margin-top: 9px;
  color: color-mix(in srgb, var(--text) 47%, transparent);
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.achievement-card.is-unlocked .achievement-card-status { color: var(--accent); }
.achievements-empty {
  padding: 60px 18px;
  text-align: center;
  color: var(--text-muted, var(--text2));
}
.achievements-clear {
  color: #e8c875;
  border-color: rgba(232, 200, 117, .28);
}
.achievement-toasts {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10020;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.achievement-toast {
  width: min(340px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(127, 174, 216, .28);
  border-radius: 11px;
  background: linear-gradient(110deg, rgba(16, 26, 36, .97), rgba(27, 43, 57, .97));
  color: #edf5fb;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .38);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.achievement-toast.show { opacity: 1; transform: translateY(0); }
.achievement-toast .achievement-icon { width: 54px; height: 54px; font-size: 1.55rem; }
.achievement-toast > div:last-child { display: grid; gap: 2px; }
.achievement-toast-label {
  color: #77b8e6;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.achievement-toast strong { font-size: .92rem; }
.achievement-toast-points { color: #efc35c; font-size: .7rem; font-weight: 700; }

@media (max-width: 720px) {
  .achievements-screen { padding: 3vh 2vw; }
  .achievements-shell { width: 96vw; height: 94vh; height: 94dvh; padding: 18px 14px 30px; border-radius: 14px; }
  .achievements-header { grid-template-columns: minmax(0, 1fr) auto 42px; gap: 8px; }
  .achievements-score { padding: 7px 9px; font-size: .72rem; }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-card { grid-template-columns: 58px minmax(0, 1fr); min-height: 90px; padding: 12px; gap: 12px; }
  .achievement-icon { width: 58px; height: 58px; font-size: 1.7rem; }
  .achievements-clear { max-width: 42px; overflow: hidden; white-space: nowrap; color: transparent; }
  .achievements-clear::first-letter { color: #e8c875; }
}