/* ============================================================
   TOKENS + PAGE BASE
   Paper-craft palette: cream paper, dark-brown ink (never black),
   solid offset shadows. --c1..--c8 are the Chromanotes lane colors.
   ============================================================ */
:root {
  --paper:        #ede0c0;
  --paper-light:  #f6ecd1;
  /* --paper-light as it actually renders once the grain overlay has
     multiplied over it. For surfaces the overlay can't reach — the iOS
     status strip sits outside the web view — so they match by eye. */
  --paper-light-grained: #e3d7ba;
  --paper-deep:   #d4c08a;
  --paper-edge:   #c4ad6f;
  --ink:          #3a2618;
  --ink-soft:     #6b513a;
  --ink-faint:    #9b8266;

  --c1: #e84a4a;
  --c2: #f08a3c;
  --c3: #f5cf3d;
  --c4: #6cb74a;
  --c5: #4ba3d4;
  --c6: #9866c4;
  --c7: #e870a8;
  --c8: #b83a3a;

  --wood:       #c8a06a;
  --wood-dark:  #a9743e;
  --wood-light: #d8b884;

  --sh-1: 0 3px 0 rgba(58, 38, 24, 0.22);
  --sh-2: 0 4px 0 rgba(58, 38, 24, 0.28);
  --sh-3: 0 6px 0 rgba(58, 38, 24, 0.18), 0 10px 22px rgba(58, 38, 24, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  /* iOS paints the status-bar strip from the body colour, and that strip is
     outside the web view so the grain never reaches it — plain --paper-light
     there reads noticeably lighter than the same cream inside the app.
     #app covers the viewport itself, so this shows only in that strip. */
  background: var(--paper-light-grained);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Paper grain over everything. Two scales, because real stock has two:
   fine fibre AND slow cloudy mottling. A single fine frequency is what a
   film-grain filter looks like — the eye reads it as noise laid on top of
   something smooth rather than as the surface itself. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
  opacity: 0.6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.06 0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.17 0 0 0 0 0.07 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-size: 240px 240px, 700px 700px;
}

/* The stage is capped by the backdrop's own shape rather than a flat pixel
   width. 150vh is exactly the landscape plate's 3:2, so on any ordinary
   desktop the stage matches the art and nothing is cropped — the sun and
   both curtains stay in frame. A fixed 1024 cap instead forced a boxy
   stage, which forced the portrait plate, which cropped the sun away.
   1600px stops it running away on very large displays.
   Drawers and the scrim are positioned against #app, so they come along. */
#app {
  position: relative;
  width: 100%;
  margin-inline: auto;
  height: 100vh;
  height: 100dvh;
  background: var(--paper);
  /* clip (not hidden): forbids ALL scrolling, including the sideways
     scroll browsers perform when focusing an element that's mid-slide
     off-screen — which shifted the whole app 420px left and looked
     like a broken page. hidden stays as the fallback for old engines. */
  overflow: hidden;
  overflow: clip;
}

/* The cap only makes sense on a window that's big because it's a desktop.
   A phone held sideways is short, not big — 150dvh there is about 585px, so
   the cap was letterboxing the app into the middle of an 844px screen and
   throwing away the landscape it just gained. Gate on height: phones in
   landscape top out around 430px, desktops start around 700px. */
@media (min-height: 600px) {
  #app {
    max-width: min(150vh, 1600px);
    max-width: min(150dvh, 1600px);
  }
}

/* Once there's room around it, the stage becomes a lit thing in a darkened
   house — the same instinct as the pause scrim. Flat paper out here read as
   an empty field competing with the stage; a dim warm surround lets the
   stage be the only bright object. The grain overlay is fixed to the
   viewport, so the surround keeps the same tooth. */
@media (min-width: 1025px) {
  body {
    background:
      radial-gradient(125% 95% at 50% 42%, #58402a 0%, #3d2a19 58%, #2b1d11 100%);
  }
  #app {
    border-left: 2.5px solid var(--ink);
    border-right: 2.5px solid var(--ink);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
  }
}