:root {
  --nuit: #0d0910;
  --papier: #f7e1a8;
  --papier-clair: #fff4d6;
  --ligne: #e3d5b8;
  --encre: #1a1220;
  --encre-douce: #4a2e35;
  --rouge: #a8383b;
  --corail: #cf5c4a;
  --ocre: #d9a441;
  --vert: #6b8a55;
  --bleu: #4e6a8f;
  --lueur: #aadce6;
  --carton: #7a4b2a;
  --ombre: rgba(13, 9, 16, 0.55);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #2e1f2b 0%, var(--nuit) 75%);
  color: var(--papier-clair);
  font-family: "Special Elite", "Courier New", monospace;
  line-height: 1.45;
  transition: background 0.6s;
  -webkit-tap-highlight-color: transparent;
}
body.dark { background: #050307; }

button, select, input { font: inherit; }
button { cursor: pointer; color: var(--encre); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }

/* --- La scène : le « tableau » de la maison, aussi grand que possible ------------------------- */

.stage {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  font-size: clamp(11px, 1.45cqw, 19px);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.7);
}
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(13, 9, 16, 0.55) 100%);
}

.hotspots { position: absolute; inset: 0; z-index: 1; }
.hotspot {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 2px;
}
.hotspot:focus-visible { outline: 2px dashed var(--papier-clair); outline-offset: 2px; }
.door-tag {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 0.05em 0.4em;
  font-family: "Caveat", cursive;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--encre);
  background: var(--papier);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--ombre);
  pointer-events: none;
}
.door-tag.door-w { transform: translate(0, 0) rotate(-3deg); }
.door-tag.door-e { transform: translate(-100%, 0) rotate(3deg); }
.door-tag.unknown { background: var(--encre); color: var(--papier); }
.chalk {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, 0);
  font-size: 0.8em;
  padding: 0 0.1em;
  border: 1px solid var(--papier);
  border-radius: 2px;
  background: rgba(26, 18, 32, 0.75);
  color: var(--papier-clair);
}
body.dark .door-tag, body.dark .chalk { opacity: 0.35; }

.room-label {
  position: absolute;
  z-index: 3;
  top: 2.5%;
  left: 1.5%;
  padding: 0.1em 0.6em 0.15em;
  font-family: "VT323", monospace;
  font-size: 1.9em;
  line-height: 1;
  color: var(--ocre);
  background: rgba(13, 9, 16, 0.7);
  border: 0;
  border-left: 4px solid var(--rouge);
  text-shadow: 2px 2px 0 var(--rouge);
}
.room-card {
  position: absolute;
  z-index: 3;
  top: 12%;
  left: 1.5%;
  max-width: 44%;
  padding: 0.7em 0.9em;
  color: var(--encre);
  background: var(--papier-clair);
  background-image: repeating-linear-gradient(transparent 0 1.45em, var(--ligne) 1.45em calc(1.45em + 1px));
  box-shadow: 3px 3px 0 var(--ombre);
  transform: rotate(-0.6deg);
  transform-origin: top left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: drop 0.35s ease-out;
}
.room-card:hover { transform: rotate(-0.6deg) scale(1.06); box-shadow: 5px 5px 0 var(--ombre); }
.room-card p { margin: 0; padding-right: 1.4em; }
.card-close {
  position: absolute;
  top: 0.15em;
  right: 0.25em;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  font-size: 1.1em;
  line-height: 1;
  color: var(--encre-douce);
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.card-close:hover { color: var(--papier-clair); background: var(--rouge); }
.card-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--ocre);
  transform-origin: left;
}
.room-card:hover .card-timer { animation-play-state: paused !important; }
.room-card.pinned .card-timer { display: none; }
@keyframes card-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.traces { margin: 0.4em 0 0; padding-left: 1.1em; color: var(--bleu); font-style: italic; }

.hud {
  position: absolute;
  z-index: 3;
  top: 2.5%;
  right: 1.5%;
  display: flex;
  gap: 0.4em;
}
.hud-button {
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  font-size: 1.15em;
  line-height: 1;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--encre);
}
.hud-button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--encre); }
.hud-button[aria-pressed="false"] { background: var(--encre-douce); }

.postit {
  position: absolute;
  z-index: 3;
  top: 13%;
  right: 1.5%;
  max-width: 26%;
  margin: 0;
  padding: 0.6em 0.7em;
  font-family: "Caveat", cursive;
  font-size: 1.25em;
  line-height: 1.15;
  color: var(--encre);
  background: #f0c674;
  box-shadow: 2px 3px 0 var(--ombre);
  transform: rotate(2deg);
}

.toasts {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 3%;
  width: min(70%, 40em);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  pointer-events: none;
}
.toast {
  margin: 0;
  padding: 0.5em 0.8em;
  color: var(--papier-clair);
  background: rgba(13, 9, 16, 0.85);
  border-left: 4px solid var(--ocre);
  pointer-events: auto;
  cursor: pointer;
  animation: drop 0.3s ease-out;
  transition: opacity 0.8s;
}
.toast.erreur { border-color: var(--corail); }
.toast.fade { opacity: 0; }

.popover {
  position: absolute;
  z-index: 5;
  min-width: 11em;
  max-width: 40%;
  padding: 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  box-shadow: 4px 4px 0 var(--ombre);
  animation: drop 0.2s ease-out;
}
.popover-title { margin: 0 0 0.2em; font-family: "VT323", monospace; font-size: 1.5em; line-height: 1; color: var(--rouge); }
.popover button {
  text-align: left;
  padding: 0.3em 0.6em;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 2px;
}
.popover button:hover { background: var(--ocre); }

.drawing {
  position: absolute;
  z-index: 3;
  right: 1.5%;
  bottom: 2%;
  margin: 0;
  font-family: "VT323", monospace;
  font-size: 1.2em;
  color: var(--lueur);
  animation: pulse 3s ease-in-out infinite;
}

.update {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 2.5%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0.5em 0.4em 0.9em;
  color: var(--encre);
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  box-shadow: 3px 3px 0 var(--ombre);
  animation: drop 0.3s ease-out;
}
.update p { margin: 0; }
.update button {
  padding: 0.2em 0.7em;
  color: var(--papier-clair);
  background: var(--corail);
  border: 2px solid var(--encre);
  border-radius: 3px;
}

@keyframes pulse { 50% { opacity: 0.3; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* --- Fenêtres de texte : des feuilles posées sur la scène --------------------------------------- */

dialog {
  max-width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 0;
  background: var(--papier);
  color: var(--encre);
  padding: 1.2rem 1.4rem;
  box-shadow: 6px 6px 0 var(--ombre);
}
dialog::backdrop { background: rgba(13, 9, 16, 0.6); }
dialog h2 { margin: 0 0 0.6rem; font-family: "VT323", monospace; font-size: 1.9rem; font-weight: normal; color: var(--rouge); }
dialog p { margin: 0 0 0.8rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
dialog .row { margin-top: 1rem; justify-content: flex-end; }
#dialog button {
  padding: 0.35rem 0.8rem;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--encre);
}
#dialog button.primary { background: var(--corail); color: var(--papier-clair); }
dialog.paper { background: var(--papier-clair); background-image: repeating-linear-gradient(transparent 0 27px, var(--ligne) 27px 28px); transform: rotate(-0.5deg); }
dialog.ending { background: var(--encre); color: var(--papier); box-shadow: 8px 8px 0 var(--lueur); }
dialog.ending h2 { color: var(--lueur); }
dialog.ending .next { color: var(--ocre); }
.letter { margin: 1rem 0 0; padding: 0.4rem 0 0.4rem 1rem; border-left: 3px solid var(--bleu); font-family: "Caveat", cursive; font-size: 1.45rem; line-height: 1.25; color: var(--bleu); }
.letter p { margin: 0 0 0.3rem; }
input.code {
  width: 100%;
  font-family: "VT323", monospace;
  font-size: 2rem;
  letter-spacing: 0.4rem;
  text-align: center;
  border: 3px solid var(--encre);
  background: var(--papier-clair);
  padding: 0.2rem;
}

/* --- Menu de pause ----------------------------------------------------------------------------------- */

.menu {
  width: min(360px, calc(100vw - 32px));
  padding: 1.2rem 1.4rem 1.4rem;
  text-align: center;
  background: var(--papier-clair);
  background-image: repeating-linear-gradient(transparent 0 27px, var(--ligne) 27px 28px);
  box-shadow: 6px 6px 0 var(--rouge);
}
.menu h2 { margin: 0; font-size: 2.4rem; text-shadow: 2px 2px 0 var(--ocre); }
.menu-subtitle { margin: 0.2rem 0 1rem; font-family: "Caveat", cursive; font-size: 1.3rem; color: var(--encre-douce); }
.menu-items { display: flex; flex-direction: column; gap: 0.5rem; }
.menu-items button {
  padding: 0.45rem 0.8rem;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--encre);
}
.menu-items button:hover { background: var(--ocre); }
.menu-items .primary { background: var(--corail); color: var(--papier-clair); }
.menu-items .danger { margin-top: 0.6rem; color: var(--rouge); border-color: var(--rouge); box-shadow: 2px 2px 0 var(--rouge); }
.controls { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.controls dt { font-family: "VT323", monospace; font-size: 1.3rem; color: var(--rouge); }
.controls dd { margin: 0; }

/* --- Le carnet à spirale ------------------------------------------------------------------------------ */

.carnet {
  width: min(calc(100vw - 4.5rem), 1100px);
  margin-left: max(0.5rem, calc((100vw - min(calc(100vw - 4.5rem), 1100px)) / 2 - 1.5rem));
  max-width: none;
  height: min(92dvh, 680px);
  max-height: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.carnet::backdrop { background: rgba(13, 9, 16, 0.75); }
.book {
  position: relative;
  height: 100%;
  padding: 1.2% 4% 1.2% 1.2%;
  background: var(--carton);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #5c3a21;
}
.spread {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 26px 1fr;
}
.page {
  min-height: 0;
  overflow: auto;
  padding: 1.2rem 1.4rem 1.4rem 2.2rem;
  color: var(--encre);
  background-color: var(--papier-clair);
  background-image:
    linear-gradient(90deg, transparent 1.4rem, rgba(168, 56, 59, 0.35) 1.4rem, rgba(168, 56, 59, 0.35) calc(1.4rem + 1px), transparent calc(1.4rem + 1px)),
    repeating-linear-gradient(transparent 0 27px, var(--ligne) 27px 28px);
  background-attachment: local;
  box-shadow: inset 0 0 30px rgba(122, 75, 42, 0.18);
}
.spread .page:first-child { border-radius: 4px 0 0 4px; }
.spread .page:last-child { border-radius: 0 4px 4px 0; }
.spiral {
  background:
    radial-gradient(circle at 50% 50%, #2e1f2b 0 4px, #c8c8c0 5px 7px, transparent 8px) center top / 26px 24px repeat-y,
    linear-gradient(90deg, #e8dcbc, #fff4d6 45%, #e8dcbc);
}
.page h2 { margin: 0 0 0.5rem; font-family: "Caveat", cursive; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--rouge); }
.page h2 span { font-size: 1.2rem; color: var(--encre-douce); }
.page h2:not(:first-child) { margin-top: 1rem; }
.note { margin: 0.6rem 0 0; font-family: "Caveat", cursive; font-size: 1.2rem; color: var(--encre-douce); }

.bookmarks {
  position: absolute;
  top: 8%;
  right: -2px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: translateX(60%);
}
.bookmarks button {
  writing-mode: vertical-rl;
  padding: 0.8rem 0.35rem;
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--papier-clair);
  border: 0;
  border-radius: 0 6px 6px 0;
  box-shadow: 2px 2px 0 var(--ombre);
  opacity: 0.75;
}
.bookmarks button[aria-current="true"] { opacity: 1; transform: translateX(6px); }
.mark-red { background: var(--rouge); }
.mark-blue { background: var(--bleu); }
.close-carnet {
  position: absolute;
  bottom: -2.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 1rem;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--encre);
}

.map svg { display: block; width: 100%; max-height: 72%; }
.map .link { stroke: var(--encre); stroke-width: 3; }
.map .link.open { stroke-dasharray: 3 3; stroke-width: 2; }
.map .room rect { fill: var(--papier); stroke: var(--encre); stroke-width: 2; }
.map .room.here rect { fill: var(--corail); }
.map .room text { font-family: "Caveat", cursive; font-size: 14px; font-weight: 700; text-anchor: middle; fill: var(--encre); }
.map .room.here text { fill: var(--papier-clair); }
.map .unknown { font-family: "Caveat", cursive; font-size: 22px; font-weight: 700; text-anchor: middle; fill: var(--bleu); }

.journal { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; font-family: "Caveat", cursive; font-size: 1.3rem; line-height: 1.2; }
.journal .note { color: var(--bleu); }
.journal .fragment { color: var(--vert); }
.journal .empty { list-style: none; color: var(--encre-douce); }

.keys, .inventory { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.keys li { font-family: "Caveat", cursive; font-size: 1.35rem; line-height: 1.1; }
.keys .missing { color: #b8a589; }
.inventory li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem; padding-bottom: 0.35rem; border-bottom: 1px dashed #b8a589; }
.item-name { font-family: "Caveat", cursive; font-size: 1.35rem; }
.inventory button, .debug button {
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 3px;
  box-shadow: 1px 1px 0 var(--encre);
}
.debug { margin-top: 1.2rem; padding-top: 0.6rem; border-top: 2px dashed var(--encre-douce); }

/* --- Téléphone à la verticale : on demande de le tourner ------------------------------------------- */

.rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
  background: var(--nuit);
  color: var(--papier);
  font-size: 1.2rem;
}
.phone {
  width: 54px;
  height: 92px;
  border: 4px solid var(--ocre);
  border-radius: 10px;
  animation: turn 2.4s ease-in-out infinite;
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

.install {
  max-width: 26rem;
  padding: 1rem 1.2rem;
  text-align: left;
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier-clair);
  box-shadow: 4px 4px 0 var(--ocre);
}
.install h2 { margin: 0 0 0.4rem; font-family: "Caveat", cursive; font-size: 1.6rem; line-height: 1; color: var(--rouge); }
.install p { margin: 0 0 0.6rem; }
.install-steps { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.install-button {
  padding: 0.4rem 1.2rem;
  background: var(--corail);
  color: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--encre);
}

@media (orientation: portrait) and (pointer: coarse) {
  .rotate { display: grid; }
}

/* Écrans bas (téléphone en paysage) : tout se resserre. */
@media (max-height: 480px) {
  .carnet { height: calc(100dvh - 3.2rem); margin-top: 0.4rem; }
  .page { padding: 0.6rem 0.8rem 0.8rem 1.8rem; }
  .page h2 { font-size: 1.5rem; }
  .spread { grid-template-columns: 1fr 18px 1fr; }
  .bookmarks button { font-size: 1.05rem; padding: 0.5rem 0.25rem; }
  .close-carnet { bottom: -2.2rem; }
  dialog { padding: 0.8rem 1rem; }
  dialog h2 { font-size: 1.5rem; }
  .menu { width: min(520px, calc(100vw - 32px)); }
  .menu h2 { font-size: 1.8rem; }
  .menu-subtitle { display: none; }
  .menu-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 0.5rem; }
  .menu-items button { padding: 0.3rem 0.5rem; }
  .menu-items .primary { grid-column: 1 / -1; }
  .menu-items .danger { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sauf la barre de la description : sans elle, la feuille ne s'effacerait jamais. */
  *:not(.card-timer), *::before, *::after { animation: none !important; transition: none !important; }
}