/* =====================================================================
   MURDER HOTEL — la démo jouable.
   Elle emprunte les couleurs et les chemises de `app.css` ; tout ce qui
   suit est propre à la façade et à son animation.

   La façade est celle de la couverture : des fenêtres crème dans un mur
   sombre, une silhouette au chapeau derrière chacune, et une croix
   sarcelle tracée par-dessus. Celle qui survit s'allume en jaune.
   ===================================================================== */

.demo .page{max-width:720px}
/* `.bouton` est en inline-flex : sans cette ligne, [hidden] ne cache rien. */
.bouton[hidden]{display:none}
.accroche h1{margin-bottom:14px}

/* ------------------------------------------------------------------ *
   La plaque de l'hôtel, en tête de plan
 * ------------------------------------------------------------------ */
.plaque{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:3px solid var(--encre);padding-bottom:8px;margin-bottom:16px}
.plaque-nom{font-family:var(--deco);font-size:clamp(20px,5.4vw,27px);
  color:var(--encre);line-height:1}
.plaque-n{font-family:var(--etiq);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose);
  margin-left:auto}

/* ------------------------------------------------------------------ *
   Le plan : une grille de fenêtres dans un mur
 * ------------------------------------------------------------------ */
.facade-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:4px}
.facade-plan{
  display:grid;
  /* L'hôtel doit tenir en entier sur un écran de 320 px : une façade qu'il
     faut faire défiler pour voir la colonne F n'est plus une façade. */
  grid-template-columns:18px repeat(var(--W,6),minmax(36px,1fr));
  gap:4px;
}
.rep{font-family:var(--etiq);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;color:var(--encre-2);
  display:flex;align-items:center;justify-content:center}
.rep.col{padding-bottom:2px}

/* Une case : cadre sombre, vitre crème. */
.case{position:relative;aspect-ratio:1/1.16;padding:0;margin:0;
  border:2.5px solid var(--encre);border-radius:1px;
  background:var(--papier-vif);overflow:hidden;
  display:block;cursor:default;
  transform:scale(.7);opacity:0}
.case.entre{transform:scale(1);opacity:1;
  transition:transform .28s cubic-bezier(.2,1.5,.4,1),opacity .2s ease}
.case .marque{position:absolute;inset:0;width:100%;height:100%}
.case img{position:absolute;inset:12%;width:76%;height:76%;
  object-fit:contain}

/* Case porteuse d'un objet : on ne la raye pas, ce n'est pas une fenêtre. */
.case-objet{background:#EFE0DA}
.case-objet::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,
    rgba(45,29,51,.05) 0 3px,transparent 3px 6px)}

/* Case candidate : une fenêtre ordinaire de la façade, et de quoi la rayer. */
.case-chambre{cursor:pointer;-webkit-tap-highlight-color:transparent}
.case-chambre:hover{background:#fff}

.marque{pointer-events:none;fill:none;stroke-linecap:round}
.marque .x1,.marque .x2{stroke:var(--sarcelle);stroke-width:6;
  stroke-dasharray:64;stroke-dashoffset:64}
.marque .cercle{stroke:var(--sarcelle);stroke-width:4;
  stroke-dasharray:108;stroke-dashoffset:108;opacity:0}

.case.raye .marque .x1,.case.raye .marque .x2{stroke-dashoffset:0;
  transition:stroke-dashoffset .19s ease-out}
.case.raye .marque .x2{transition-delay:.11s}
.case.raye .fig{opacity:.4}

/* La chambre du tueur, quand elle est trouvée : le jaune de la couverture. */
.case.trouvee{background:var(--jaune);border-color:var(--encre)}
.case.trouvee .marque .cercle{stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset .6s ease-out,opacity .1s}
.case.trouvee .fig{opacity:1}

/* Celle qui reste, avant qu'on la touche : elle respire. */
.case.candidate-finale{animation:respire 1.5s ease-in-out infinite}
@keyframes respire{
  0%,100%{box-shadow:inset 0 0 0 0 rgba(250,215,53,0)}
  50%{box-shadow:inset 0 0 0 5px rgba(250,215,53,.85)}
}

/* Un refus : la case tremble, elle ne se raye pas. */
.case.refus{animation:tremble .32s}
@keyframes tremble{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)} 40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}
}
.case.refus{background:#FBE0E9}

/* Le doigt qui dit « touchez ici », tant qu'on n'a rien touché. */
.case.montre::before{content:"";position:absolute;inset:-3px;z-index:2;
  border:3px solid var(--rose);border-radius:2px;
  animation:pointe 1.1s ease-out infinite}
@keyframes pointe{
  0%{opacity:1;transform:scale(1)}
  70%{opacity:0;transform:scale(1.28)}
  100%{opacity:0;transform:scale(1.28)}
}

/* L'inventaire des reperes faisait trois lignes de capitales espacees.
   Les capitales sont pour l'etiquette ; la liste redevient une phrase. */
.legende-obj{margin:14px 0 0}
.legende-obj p{margin:4px 0 0;font-size:15.5px;line-height:1.45;
  color:var(--encre)}

/* ------------------------------------------------------------------ *
   Le pupitre : les trois indices
 * ------------------------------------------------------------------ */
.pupitre{margin-top:18px;border-top:3px solid var(--encre);padding-top:14px}

.pas-liste{display:flex;gap:8px;margin-bottom:12px}
.pas{flex:1;height:9px;border-radius:5px;background:var(--piste);
  box-shadow:inset 0 0 0 1.5px var(--piste-bord);overflow:hidden}
.pas i{display:block;height:100%;width:0;background:var(--sarcelle);
  transition:width .45s ease}
.pas.fait i{width:100%}
.pas.encours i{width:35%;background:var(--rose)}

.carte-indice{position:relative;background:var(--jaune);color:var(--encre);
  padding:14px 16px;min-height:96px;
  box-shadow:2px 3px 0 rgba(45,29,51,.2)}
.carte-indice.entre{animation:glisse .35s ease-out}
@keyframes glisse{
  from{opacity:0;transform:translateX(26px) rotate(2deg)}
  to{opacity:1;transform:none}
}
.carte-indice .num{font-family:var(--etiq);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.carte-indice .txt{font-size:17.5px;font-weight:500;margin-top:4px}
.carte-indice .reste{font-family:var(--etiq);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;margin-top:9px;
  color:var(--encre-2)}
.carte-indice.fini{background:var(--sarcelle);color:var(--papier)}
.carte-indice.fini .num,.carte-indice.fini .reste{color:rgba(251,236,232,.8)}

/* Le tampon « VÉRIFIÉ » qui tombe quand un indice est épuisé. */
.tampon{position:absolute;right:10px;top:8px;
  font-family:var(--deco);font-size:19px;letter-spacing:.04em;
  color:var(--rose);border:3px solid var(--rose);padding:2px 8px;
  transform:rotate(-11deg) scale(2.4);opacity:0}
.tampon.tombe{animation:tampon .42s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes tampon{
  from{transform:rotate(-11deg) scale(2.4);opacity:0}
  60%{opacity:1}
  to{transform:rotate(-11deg) scale(1);opacity:1}
}

.message{min-height:2.6em;margin:12px 0 0;font-weight:600}
.message.mauvais{color:var(--rose)}
.message.bon{color:var(--sarcelle)}

/* ------------------------------------------------------------------ *
   Le panneau de fin
 * ------------------------------------------------------------------ */
.gagne{animation:monte .5s ease-out}
@keyframes monte{from{opacity:0;transform:translateY(24px)}to{opacity:1}}
/* Quatre chiffres : deux par deux, puis en ligne. `auto-fit` laissait une
   case vide au milieu, et une case vide se lit comme un bogue. */
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);
  gap:2px;margin:16px 0 4px;background:rgba(45,29,51,.14)}
@media (min-width:480px){.chiffres{grid-template-columns:repeat(4,1fr)}}
.chiffres div{background:var(--papier);padding:12px 6px;text-align:center}
.chiffres b{display:block;font-family:var(--deco);font-size:25px;
  color:var(--encre);line-height:1}
.chiffres span{font-family:var(--etiq);font-weight:600;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2)}

@media (max-width:420px){
  .demo .chemise.jeu{padding-left:12px;padding-right:12px}
}
@media (min-width:560px){
  .facade-plan{grid-template-columns:26px repeat(var(--W,6),1fr);gap:7px}
}

/* Personne ne doit avoir mal au cœur pour trois indices. */
@media (prefers-reduced-motion:reduce){
  .case,.case.entre{transform:none;opacity:1;transition:none}
  .marque .x1,.marque .x2,.marque .cercle{stroke-dasharray:none;
    stroke-dashoffset:0;transition:none}
  .marque .x1,.marque .x2{opacity:0}
  .case.raye .marque .x1,.case.raye .marque .x2{opacity:1}
  .case.candidate-finale,.case.refus,.case.montre::before{animation:none}
  .case.montre::before{opacity:1}
  .carte-indice.entre,.gagne{animation:none}
  .tampon.tombe{animation:none;opacity:1;transform:rotate(-11deg)}
}

/* L'inventaire des repères, avec ses dessins. Le livre met le même encadré
   de vignettes en tête de chaque plan : c'est sous cette forme que l'œil
   les retrouve dans la grille, pas sous forme de liste de mots. */
/* En GRILLE, pas en ligne : « candlestick telephone » prenait une rangée à
   lui seul et les huit repères descendaient sur six lignes. Deux colonnes
   sur un téléphone, davantage au large — l'encadré du livre, en somme. */
.reperes{display:grid;gap:6px;margin-top:6px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.repere{display:flex;align-items:center;gap:7px;min-width:0;
  background:var(--papier-vif);border:2px solid var(--filet);
  border-radius:var(--r);padding:5px 8px 5px 5px;
  font-size:13.5px;line-height:1.15;color:var(--encre)}
.repere img{width:22px;height:22px;flex:0 0 22px;object-fit:contain}