/* Shared tokens and base styles. Scene-specific styles live in envelope.css / home.css / player.css. */
:root {
  --paper: #fbf8f3;        /* home page background (off-white, as in the approved reference) */
  --envelope-bg: #ffffff;  /* envelope scene: pure white, matches the envelope images */
  --ink: #3e5f86;          /* watercolor deep blue: titles */
  --ink-soft: #4f5f7a;     /* body / subtitle text */
  --coral: #e86a5a;        /* buttons */
  --coral-deep: #d4543f;
  --butter: #fbeec2;       /* subtitle brush band */
  --peach: #fbe6dc;
  --sage: #e8eedc;
  --lavender: #ece6f3;
  --white: #ffffff;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --tap-min: 56px;
  --radius-pill: 999px;
  --ease-gentle: cubic-bezier(.33, .0, .2, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* Scenes fill the screen; only one is active at a time. */
.scene {
  min-height: 100%;
  min-height: 100svh;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
}
#scene-envelope { background: var(--envelope-bg); position: relative; overflow: hidden; }
#scene-home { background: var(--paper); }

.scene.is-entering { animation: scene-fade-in 900ms var(--ease-gentle) both; }
@keyframes scene-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Skip: always visible, easy to hit, quiet looking. */
.skip {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 20;
  min-height: var(--tap-min);
  min-width: 96px;
  padding: 0 22px;
  border: 2px solid #c9d3e0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .scene.is-entering { animation-duration: 1ms; }
}