/* Base page styles. Theatre chrome (captions, cards, frame) lives in src/chrome/ui.css */
:root {
  --ink: #0c0806;
  --paper: #efe4cd;
  --gold: #d9a441;
  --gold-hi: #f6dc8c;
  --ember: #ff9a3c;
  --vermilion: #d8402c;
  --prussian: #1f3b6e;
  --stage-s: 1;
  --stage-bottom: 0px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #0b0705;
  color: var(--paper);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body { font-family: 'IM Fell English', Georgia, serif; }
#app { position: fixed; inset: 0; }
/* the house before the play: one candle while the first scene arrives, fading as the theatre appears */
#house { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 46%, #1c120b 0%, #0b0705 62%); transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
#house.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#house .h-candle { width: 26px; height: auto; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 160, 70, .75)); }
#house .h-flame { transform-origin: 12px 27px; animation: hflick 1.1s ease-in-out infinite alternate; }
#house p { margin: 0; font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 17px; letter-spacing: .02em; color: #cdb98f; opacity: .85; }
@keyframes hflick { 0% { transform: scale(1, 1) skewX(0); } 40% { transform: scale(.92, 1.08) skewX(-4deg); } 100% { transform: scale(1.05, .95) skewX(3deg); } }
@media (prefers-reduced-motion: reduce) { #house .h-flame { animation: none; } }
#stage {
  position: absolute;
  inset: 0;
  display: block;
  cursor: none;
  touch-action: none;
}
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 1.4rem; }

#rotate-hint {
  display: none;
  position: fixed; left: 50%; top: 18%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0.7em 1.2em;
  border: 1px solid rgba(217,164,65,0.6);
  border-radius: 4px;
  background: rgba(12,8,6,0.82);
  color: #f3e2c0;
  font: italic 15px/1.35 'IM Fell English', Georgia, serif;
  text-align: center;
  cursor: pointer;
  animation: rh-fade 0.8s ease-out both;
}
#rotate-hint small { opacity: 0.6; font-size: 12px; }
@media (orientation: portrait) and (max-width: 620px) {
  #rotate-hint:not(.gone) { display: block; }
}
@keyframes rh-fade { from { opacity: 0; } to { opacity: 1; } }