/* Plan : une scène plein écran. Chaque salle est une illustration posée au centre
   (en "contain", sans être coupée) sur un fond de la couleur du papier.
   Les zones cliquables sont des boutons placés en % de l'illustration. */

:root {
  --ink: #2b2a33;
  --paper: #e9e2d0;                       /* papier de secours ; chaque salle impose le sien */
  --old: #ecdcae;                         /* couleur "papier ancien" des textes de l'interface */
  --glow: #ffc857;                        /* surbrillance des zones cliquables */
  --font-hand: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', cursive;
  --cursor-go: pointer;                   /* remplacé par la flèche dessinée (voir main.js) */
}

/* Le château occupe TOUT l'écran (sous les barres du système) : pas de marge, fond sombre en cas de bord visible. */
:root { padding: 0; }
html, body {
  height: 100%;
  margin: 0;
  background: #100d0a;
  color: var(--ink);
  overflow: hidden;
}
body {
  padding-block: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));    /* (sans effet : le château est en position fixe) */
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#book {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}

/* ── Une salle ── */
.room {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  container-type: size;
  overflow: hidden;
  background: var(--room-bg, var(--paper));
}

.stage {
  position: relative;
  width: max(100cqw, calc(100cqh * var(--ar, 1.4)));   /* plein écran : l'image remplit tout, quitte à déborder un peu */
  aspect-ratio: var(--ar, 1.4);
  will-change: transform;
}

.art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Zones cliquables ── */
.hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: var(--cursor-go);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.hotspot.arch { border-radius: 999px 999px 6px 6px; }   /* une porte avec une arche */

.hotspot::after {
  content: '';
  position: absolute;
  inset: -3%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 200, 87, .34), rgba(255, 200, 87, .12) 70%, transparent);
  box-shadow: 0 0 0 2px rgba(255, 200, 87, .95), 0 0 22px 6px rgba(255, 200, 87, .5);
  transition: opacity .16s ease, transform .16s ease;
}
.hotspot:hover::after,
.hotspot:focus-visible::after,
.hotspot.flash::after { opacity: 1; transform: scale(1.025); }
.hotspot.pulse::after { animation: pulse 1.5s ease-in-out 1; }

@media (hover: none) {
  .hotspot:hover::after { opacity: 0; transform: none; }   /* pas de survol sur écran tactile */
}

@keyframes pulse { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }

/* Touche D : montre les zones cliquables en rouge (pour régler les hitbox) */
.debug .hotspot { outline: 2px solid #ff2a2a; background: rgba(255, 40, 40, .15); }

/* ── Interface : juste du texte, discret, couleur papier ancien (pas de boutons ni de cadres) ── */
.chip {
  position: absolute;
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--old);
  font: 25px/1 var(--font-hand);
  letter-spacing: .02em;
  opacity: .72;
  text-shadow: 0 1px 2px rgba(22, 15, 6, .75), 0 0 12px rgba(22, 15, 6, .5);
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { opacity: 1; transform: translateY(-1px); }
.chip:active { opacity: 1; transform: translateY(1px); }
.chip:focus-visible { outline: 1px dashed var(--old); outline-offset: 2px; }
.chip[hidden] { display: none; }

#btn-sound { top: calc(6px + env(safe-area-inset-top, 0px)); right: calc(6px + env(safe-area-inset-right, 0px)); }
#btn-hint  { top: calc(6px + env(safe-area-inset-top, 0px)); right: calc(78px + env(safe-area-inset-right, 0px)); }
#btn-back  { top: calc(6px + env(safe-area-inset-top, 0px)); left: calc(6px + env(safe-area-inset-left, 0px)); }
#btn-sound.off span { text-decoration: line-through; opacity: .7; }

/* ── Légende au survol : du texte posé sur l'image ── */
#caption {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding: 4px 12px;
  font: 28px/1.1 var(--font-hand);
  color: var(--old);
  text-shadow: 0 1px 3px rgba(22, 15, 6, .85), 0 0 14px rgba(22, 15, 6, .6);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
#caption.on { opacity: 1; transform: translate(-50%, 0); }

/* ── Effet "toc toc" ── */
.ripple {
  position: absolute;
  z-index: 20;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 3px solid var(--glow);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* ── Coin de page qui se tourne : un canvas par-dessus la salle (voir js/curl.js) ── */
.peel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

.hotspot.picked::after { opacity: 0 !important; transition: opacity .25s; }

/* ── Écrans d'attente ── */
#loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--paper);
  font: 26px var(--font-hand);
  transition: opacity .45s ease;
}
#loading.done { opacity: 0; pointer-events: none; }

#turn-phone {                       /* "tourne ton téléphone" : visible seulement en mode portrait sur petit écran */
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  box-sizing: border-box;
  background: var(--paper);
  text-align: center;
  font-family: var(--font-hand);
}
#turn-phone p { margin: 0; font-size: 30px; }
#turn-phone small { font-size: 20px; opacity: .75; }
#turn-phone svg { width: 96px; height: 96px; animation: turn 2.8s ease-in-out infinite; }
@keyframes turn { 0%, 15% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) and (pointer: coarse) { #turn-phone { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  #turn-phone svg, .hotspot.pulse::after { animation: none; }
  .hotspot::after { transition: none; }
}