:root {
  color-scheme: dark;
  --cream: #f8eeda;
  --soft: #dcc8a4;
  --gold: #f3c869;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #17100a; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

#room {
  position: fixed; inset: 0; overflow: hidden;
  background: #17100a url(art/table.webp) center / cover no-repeat;
}

/* the whole book is drawn on this one canvas, so there are no layers to come apart */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s; }
#stage.on { opacity: 1; }

#coverFront { position: fixed; cursor: pointer; }

/* book.js places this exactly over the painted pages */
#book { position: fixed; pointer-events: none; }

#spread { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; touch-action: none; }
#spread.on { visibility: visible; opacity: 1; transition: opacity .25s; pointer-events: auto; }
#spread.flame { cursor: none; }
#spread.reach { cursor: pointer; }
#spread canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; }

#corner {
  position: absolute; right: 0; bottom: 0; width: 6.5%; aspect-ratio: 1;
  cursor: pointer; opacity: 0; pointer-events: none;
  background: linear-gradient(315deg, #2c3142 0 49%, #f6edd8 50%, #d8c8a3 100%);
  box-shadow: -2px -2px 6px rgba(40, 20, 0, .3);
  transition: opacity .6s, width .3s;
}
#corner.on { opacity: 1; pointer-events: auto; }
#corner:hover { width: 8.5%; }

/* the story always sits in the same place, centered under the book */
#tale {
  position: fixed; z-index: 5; margin: 0; pointer-events: none;
  text-align: center; text-wrap: balance;
  color: var(--cream);
  font: 600 clamp(19px, 5vw, 23px)/1.32 'Cormorant Garamond', Georgia, serif;
  text-shadow: 0 1px 3px rgba(8, 12, 26, .95), 0 0 16px rgba(8, 12, 26, .85), 0 0 34px rgba(8, 12, 26, .55);
  opacity: 0; transition: opacity .9s;
}
#tale.on { opacity: 1; }
/* a phone held sideways puts it beside the book instead */
#tale.beside { transform: translateY(-50%); font-size: 18px; }

#bar {
  position: fixed; z-index: 6; left: 0; right: 0;
  bottom: max(1.4vh, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 28px;
  color: var(--soft);
  font: italic 500 clamp(16px, 2.2vh, 20px)/1.2 'Cormorant Garamond', Georgia, serif;
  text-shadow: 0 1px 6px #000;
}
#bar button { cursor: pointer; padding: 8px 10px; color: var(--cream); }
#bar button:hover { color: var(--gold); }
#prev, #next { opacity: 0; pointer-events: none; transition: opacity .6s; }
#prev.on, #next.on { opacity: 1; pointer-events: auto; }
#hint { transition: opacity .6s; text-align: center; }

#sound {
  position: fixed; z-index: 6; top: max(10px, env(safe-area-inset-top)); right: 14px;
  cursor: pointer; padding: 8px; color: var(--soft);
  font: italic 500 17px 'Cormorant Garamond', Georgia, serif; text-shadow: 0 1px 6px #000;
}
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  #bar { bottom: 0; font-size: 15px; }
  #sound { top: auto; right: auto; left: 12px; bottom: 0; }
}