:root {
  --encre: #3B2A1E;
  --papier: #F3E7D3;
  --lavis: #C8A87C;
  --chaud: #C8873A;
  --nuit: #4A6E8A;
  --vivant: #6B8F47;
  --accent-chaud: #E8485F;
  --accent-froid: #27C4C8;
  --cible-min: 44px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.5 system-ui, sans-serif;
  overscroll-behavior: none;
}
#jeu { display: flex; flex-direction: column; height: 100dvh; }
#scene { flex: 1; min-height: 0; position: relative; }
#hud {
  flex: 0 0 auto;
  min-height: var(--cible-min);
  padding: 8px calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: color-mix(in srgb, var(--papier) 88%, var(--encre));
}
[hidden] { display: none !important; }

.scene-hote { width: 100%; height: 100%; }
.scene-hote svg { width: 100%; height: 100%; display: block; }
.zone { cursor: pointer; }
.zone:focus-visible { outline: 3px solid var(--chaud); outline-offset: 2px; }

/* Retour au toucher. Sur tablette il n'y a pas de survol : sans ça, le joueur
   tape et ne sait pas si ça a pris — le message du HUD est à l'autre bout de
   l'écran, et il peut dire la même chose deux fois de suite. */
.zone:active, .cible:active { filter: drop-shadow(0 0 10px var(--chaud)); }
.zone.touchee, .cible.touchee { animation: touche .32s ease-out; }
@keyframes touche {
  from { filter: drop-shadow(0 0 16px var(--chaud)); }
  to   { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zone.touchee, .cible.touchee { animation: none; }
}

/* Rendus de Regard : nettete, texte, mecanisme, vivant.
   Aucun ne repose sur la teinte seule — chacun ajoute netteté, lisibilité,
   contour ou mouvement. */
/* `opacity: 0` masque une forme, mais ne la retire PAS du chemin des clics :
   une couche invisible reste cliquable et avale le clic destine a la zone
   qu'elle recouvre. Le sac a dos de 2026 est dessine pile sur la zone « sac » :
   il la rendait definitivement inatteignable. Les couches sont purement
   decoratives — toute l'interaction passe par les formes de couche-medieval. */
svg .couche { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
svg.regard-nettete  .couche-2026     { opacity: 1; filter: saturate(1.6); }
svg.regard-nettete  .couche-medieval { opacity: .55; }
svg.regard-texte    .couche-texte    { opacity: 1; }
svg.regard-mecanisme .couche-mecanisme { opacity: 1; stroke-dasharray: 4 3; }
svg.regard-vivant   .couche-vivant   { opacity: 1; animation: respire 2.4s ease-in-out infinite; }
@keyframes respire { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  svg.regard-vivant .couche-vivant { animation: none; opacity: 1; }
}

.hud-regard, .hud-pascaline, .hud-carnet, .hud-oeil, .hud-cabinet, .hud-compte, .hud-son,
.hud-plein, .hud-plus,
.reglages button,
.choix-objets button, .carte-dialogue button, .carnet button, .cabinet button {
  /* Un bouton qui se comprime laisse son texte déborder sur le voisin : c'est
     exactement ce qui est arrivé à sept boutons sur une seule ligne. */
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: var(--cible-min);
  min-width: var(--cible-min);
  padding: 0 14px;
  border: 2px solid var(--encre);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
  cursor: pointer;
}
.hud-regard[disabled] { opacity: .55; cursor: default; }
/* L'inventaire et le message prennent chacun leur ligne : ils sont faits pour
   être lus, pas pour se battre contre sept boutons pour quelques pixels. */
.hud-inventaire { flex: 1 1 100%; min-width: 0; order: 2; }
.hud-but {
  margin: 0; flex: 1 1 100%; order: 1;
  font-weight: 700; color: var(--chaud);
}
.hud-message { margin: 0; flex: 1 1 100%; min-width: 0; order: 3; }
.hud-ligne { margin: 0 0 2px; }
.hud-ligne:not(:last-child) { opacity: .55; font-size: 14px; }
.hud-aide { color: var(--nuit); font-style: italic; }
/* Le moment ou ca marche doit se voir d un coup d oeil, meme en diagonale. */
.hud-reussite { color: var(--vivant); font-weight: 700; }
/* Sur grand ecran il y a la place : le tiroir est deja ouvert et « Plus » ne
   sert a rien. Le repli n'existe que la ou la place manque vraiment — c'est le
   telephone qui s'adapte au jeu de bureau, pas l'inverse. */
@media (min-width: 761px) and (min-height: 541px) {
  .hud-plus { display: none; }
  .hud-plus-groupe[hidden] { display: flex !important; }
}

/* Le tiroir des commandes rares : sa propre ligne, sous tout le reste. */
.hud-plus-groupe {
  flex: 1 1 100%; order: 5;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.table-joueurs { order: 4; }
.choix-objets {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 10px; border: 2px solid var(--encre); border-radius: 8px;
  background: var(--papier); max-width: calc(100% - 24px);
  /* Un inventaire de fin de partie tient quinze objets : sur un telephone
     couche, sans cette limite, les derniers sortent par le haut de la scene. */
  max-height: calc(100% - 24px); overflow-y: auto;
}
#dialogue {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--encre) 55%, transparent);
  padding: 16px;
}
.carte-dialogue {
  max-width: 34rem;
  /* Le dernier dialogue du jeu fait 405 caracteres. Sur 340 px de haut il
     depassait, et le bouton qui permet de continuer partait avec lui :
     impossible de finir le jeu sur un telephone. */
  max-height: 100%; overflow-y: auto;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 8px;
  padding: 16px;
}
.carte-qui { margin: 0 0 4px; font-weight: 700; color: var(--chaud); }
.carte-texte { margin: 0 0 12px; }
.carte-mode { margin: 6px 0 14px; font-size: 14px; opacity: .85; }
.carte-dialogue button { margin-top: 4px; }


.carnet {
  position: absolute; inset: 8px;
  overflow-y: auto;
  padding: 16px;
  border: 2px solid var(--encre);
  border-radius: 8px;
  background: var(--papier);
}
.carnet-titre { margin: 0 0 12px; font-weight: 700; }
.carnet-regard {
  margin: 14px 0 4px; font-weight: 700; color: var(--chaud);
  border-bottom: 2px solid var(--lavis);
}
.carnet-ligne { margin: 0 0 6px; }
.carnet-legende { font-size: 14px; opacity: .85; }

/* Repérage des zones.
   Deux niveaux, et aucun ne dit QUOI faire : le coup d'œil montre tout ce qui
   se regarde, le soulignement du mode Promenade ne garde que ce qui a encore
   quelque chose à donner. Sur tablette il n'y a pas de survol — sans ça,
   trouver une zone serait une chasse au pixel. */
.zone, .cible { transition: opacity .2s ease; }

svg.coup-d-oeil .zone,
svg.coup-d-oeil .cible {
  animation: battement 1.4s ease-in-out;
}
@keyframes battement {
  0%, 100% { stroke-width: inherit; filter: none; }
  25%, 75% { filter: drop-shadow(0 0 7px var(--chaud)); }
  50%      { filter: drop-shadow(0 0 14px var(--chaud)); }
}

.zone.utile { filter: drop-shadow(0 0 5px var(--chaud)); }

/* La zone que Pascaline vient de designer. Plus long et plus franc que le coup
   d'œil : c'est une reponse a « ou ca ? », il faut avoir le temps de la voir. */
.montree { animation: montree 2.6s ease-in-out; }
@keyframes montree {
  0%, 100% { filter: none; }
  10%, 90% { filter: drop-shadow(0 0 16px var(--accent-froid)); }
  50%      { filter: drop-shadow(0 0 26px var(--accent-froid)); }
}
@media (prefers-reduced-motion: reduce) {
  .montree { animation: none; filter: drop-shadow(0 0 16px var(--accent-froid)); }
}

@media (prefers-reduced-motion: reduce) {
  svg.coup-d-oeil .zone, svg.coup-d-oeil .cible {
    animation: none;
    filter: drop-shadow(0 0 9px var(--chaud));
  }
}

/* Multijoueur : qui est là, et ce que chacun montre du doigt. */
.table-joueurs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.table-joueur { margin: 0; font-size: 13px; opacity: .85; }
.table-joueur.moi { font-weight: 700; opacity: 1; }
.table-joueur.absent { opacity: .45; font-style: italic; }
.curseur-joueur, .pastille { pointer-events: none; }

/* Cabinet de curiosités */
.cabinet {
  position: absolute; inset: 8px; overflow-y: auto; padding: 16px;
  border: 2px solid var(--encre); border-radius: 8px; background: var(--papier);
}
.cabinet-titre { margin: 14px 0 4px; font-weight: 700; color: var(--chaud);
  border-bottom: 2px solid var(--lavis); }
.cabinet-avancement { margin: 0 0 12px; font-size: 14px; opacity: .85; }
.cabinet-objet { margin: 10px 0 2px; font-weight: 700; }
.cabinet-mot { margin: 0 0 4px; font-size: 14px; opacity: .9; }

/* Réglages du son */
.reglages {
  position: absolute; inset: auto 8px 8px 8px; max-height: 70%;
  overflow-y: auto; padding: 16px;
  border: 2px solid var(--encre); border-radius: 8px; background: var(--papier);
}
.reglages-titre { margin: 0 0 12px; font-weight: 700; color: var(--chaud); }
.reglages-ligne {
  margin: 0 0 10px; display: flex; align-items: center; gap: 12px;
}
.reglages-ligne label { flex: 0 0 7rem; }
.reglages-ligne input { flex: 1; min-height: var(--cible-min); }

/* Le jeu est pensé en paysage. En portrait sur un petit écran, on le dit au
   lieu de s'afficher de travers — et on laisse quand même passer : un joueur
   qui ne peut pas tourner son écran doit pouvoir continuer. */
#tourner { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  #tourner {
    display: grid; place-items: center; gap: 14px;
    position: fixed; inset: 0; z-index: 10;
    padding: 24px; text-align: center;
    background: var(--papier); color: var(--encre);
  }
  #tourner p { margin: 0; max-width: 24rem; }
  #tourner svg { width: 96px; height: 96px; }
  #tourner button {
    min-height: var(--cible-min); padding: 0 16px;
    border: 2px solid var(--encre); border-radius: 6px;
    background: var(--papier); color: var(--encre); font: inherit; cursor: pointer;
  }
  #tourner[hidden] { display: none; }
}

/* À plusieurs, les Regards qu'on porte s'affichent, ils ne se cliquent pas. */
.hud-mes-regards {
  margin: 0; padding: 0 14px;
  min-height: var(--cible-min);
  display: flex; align-items: center;
  flex: 0 0 auto; white-space: nowrap;
  font-weight: 700; color: var(--chaud);
  border: 2px dashed var(--lavis); border-radius: 6px;
}


/* Le telephone couche, mesure sur l'appareil : ~844x340 px une fois la barre
   du navigateur retiree. La scene est en 16:9 et donc limitee par la HAUTEUR :
   elle ne fait que 604 px de large et laisse ~240 px de vide sur les cotes.
   Mettre le HUD en bas, c'etait voler la seule dimension qui manquait pour
   remplir celle qui restait vide. Il passe donc a cote : la scene ne perd
   plus un pixel, et le HUD a enfin de quoi respirer. */
@media (orientation: landscape) and (max-height: 540px) {
  #jeu { flex-direction: row; }
  #hud {
    flex: 0 0 min(40vw, 236px);
    align-content: flex-start;
    overflow-y: auto;
    padding: 8px calc(8px + env(safe-area-inset-right, 0px))
             calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
  }
  .hud-but, .hud-inventaire, .hud-message, .hud-mes-regards { font-size: 14px; }
  /* Une seule ligne de message : dans une colonne etroite, trois lignes font
     un mur de texte que personne ne lit. La derniere est celle qui compte. */
  .hud-ligne:not(:last-child) { display: none; }
  /* Les boutons s'etalent sur la largeur de la colonne, deux par deux. */
  .hud-regard, .hud-pascaline, .hud-carnet, .hud-oeil, .hud-plus,
  .hud-cabinet, .hud-compte, .hud-son, .hud-plein {
    flex: 1 1 auto; padding: 0 10px;
  }
}