/* ============ SIDETRACKED — lit surfaces ============
   Loaded AFTER css/style.css (app) and site/site.css (site); both surfaces
   share it so the two stay in step.

   Companion to core/lookdev.js. Once every scene is lit from above with warm
   highlights and cool contact shadow, flat white chrome on hard grey shadow
   reads as a different product bolted to the side of it. This sheet applies
   the same three ideas to the UI:

     1. ONE LIGHT DIRECTION — everything is lit from the top. Surfaces get a
        highlight along their top edge fading to a soft occlusion at the base,
        which is the UI version of what the pass does to every flat fill.
     2. WARM SHADOWS — the old shadows were neutral grey (rgba(45,42,50,…)).
        On cream that reads as dirt. These are brown-tinted and layered:
        a tight contact shadow plus a wide ambient one.
     3. NOTHING GETS RECOLOURED — the sheen is a translucent overlay, so every
        element keeps its own background and its accent. Text colours, sizes,
        spacing and motion are untouched, so contrast, the big-text toggle and
        reduce-motion all behave exactly as before.

   To revert: delete this file and its two <link> tags. */

:root {
  /* layered warm elevation — contact shadow + ambient */
  --shadow:    0 1px 2px rgba(94,62,40,.07), 0 8px 22px rgba(94,62,40,.13);
  --shadow-sm: 0 1px 2px rgba(94,62,40,.06), 0 4px 12px rgba(94,62,40,.10);

  /* light from above: highlight at the top, occlusion pooling at the base */
  --sheen:     linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 46%, rgba(110,72,44,.055) 100%);
  /* stronger version for saturated fills (buttons, chips) so they read moulded */
  --sheen-btn: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.10) 100%);
  /* the lit top edge — the single pixel that sells a raised surface */
  --edge:      inset 0 1px 0 rgba(255,255,255,.85);

  /* warm neutral behind cover art and the scene frame, replacing #eee / #ddd */
  --well:      linear-gradient(160deg, #FFF1DE 0%, #EBDCC6 100%);
}

/* ---------- raised panels (app + site) ---------- *
   background-image only: each element keeps its own background-color, so
   tinted panels (hint boxes, clue cards, selected states) stay themselves. */
.pf-stat,
.game-card,
.hub-chip,
.inv-chip,
.clue-card,
.hint-box,
.choice-btn,
.pz-opt,
.hunch-chip,
.recap-chip,
.flyer-opt,
.loyalty-card,
#dialogue-panel,
#modal-card,
.case,
.idea-card,
.btn-ghost,
.demo-line {
  background-image: var(--sheen);
}

/* The top-edge highlight only belongs on things that sit ON the page.
   Inset children (options, chips inside a modal) get it too — they read as
   little raised keys, which is what they are. */
.pf-stat,
.game-card,
.hub-chip,
.inv-chip,
.choice-btn,
.pz-opt,
.hunch-chip,
.recap-chip,
#dialogue-panel,
.case,
.idea-card {
  box-shadow: var(--shadow), var(--edge);
}

/* ---------- filled buttons ----------
   The chunky offset shadow is the press affordance and stays exactly as it
   was; it just gains a soft contact shadow underneath and a moulded fill.
   Each rule re-states its own offset colour because CSS can't append to
   box-shadow. Pressed states keep their shorter offset. */
.big-btn,
.pz-go,
.heave-btn,
.card-cta,
.btn-primary,
.nav-cta,
.sm-play,
.dlg-chip,
.card-ribbon {
  background-image: var(--sheen-btn);
}

.big-btn        { box-shadow: 0 5px 0 var(--accent-deep), 0 9px 16px rgba(94,62,40,.20); }
.big-btn:active { box-shadow: 0 2px 0 var(--accent-deep), 0 4px 10px rgba(94,62,40,.18); }
.big-btn.secondary        { box-shadow: 0 5px 0 #1E7770, 0 9px 16px rgba(30,84,80,.22); }
.big-btn.secondary:active { box-shadow: 0 2px 0 #1E7770, 0 4px 10px rgba(30,84,80,.18); }
.pz-go          { box-shadow: 0 4px 0 var(--accent-deep), 0 8px 14px rgba(94,62,40,.20); }
.pz-go:active   { box-shadow: 0 2px 0 var(--accent-deep), 0 4px 10px rgba(94,62,40,.18); }
.heave-btn        { box-shadow: 0 6px 0 var(--accent-deep), 0 10px 18px rgba(94,62,40,.22); }
.heave-btn:active { box-shadow: 0 2px 0 var(--accent-deep), 0 4px 10px rgba(94,62,40,.18); }
.sm-play        { box-shadow: 0 4px 0 #5A4C96, 0 8px 14px rgba(60,48,110,.22); }
.sm-play:active { box-shadow: 0 2px 0 #5A4C96, 0 4px 10px rgba(60,48,110,.18); }
.card-cta       { box-shadow: 0 2px 0 rgba(0,0,0,.10), 0 4px 10px rgba(94,62,40,.16); }
.btn-primary        { box-shadow: 0 5px 0 var(--accent-deep), 0 9px 16px rgba(94,62,40,.20); }
.btn-primary:active { box-shadow: 0 2px 0 var(--accent-deep), 0 4px 10px rgba(94,62,40,.18); }
.btn-primary.btn-sm { box-shadow: 0 4px 0 var(--accent-deep), 0 8px 14px rgba(94,62,40,.18); }
.nav-cta        { box-shadow: 0 3px 0 var(--accent-deep), 0 6px 12px rgba(94,62,40,.18); }

/* ---------- art wells ----------
   Cover art is 4:3 and these slots are much wider, so the SVG is letterboxed.
   lookdev now emits covers with preserveAspectRatio="slice" so they fill, but
   the well still shows for untreated art and during load — warm, not grey. */
.card-cover,
.case-cover { background: var(--well); }

#scene-wrap {
  background: var(--well);
  /* seat the art in the frame instead of letting it float on a hard edge */
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(94,62,40,.10);
}

.title-art svg { box-shadow: 0 2px 6px rgba(94,62,40,.12), 0 14px 34px rgba(94,62,40,.22); }

/* ---------- modal backdrop ----------
   Neutral charcoal over warm art looked like a dead pixel layer. */
#modal-backdrop { background: rgba(46,30,22,.58); }

/* ---------- site: the fanned hero shelf ---------- */
.shelf-card { box-shadow: 0 2px 6px rgba(94,62,40,.14), 0 16px 38px rgba(94,62,40,.20); }
.shelf-card:hover { box-shadow: 0 4px 10px rgba(94,62,40,.16), 0 26px 54px rgba(94,62,40,.26); }
.demo-phone { box-shadow: 0 6px 18px rgba(94,62,40,.20), 0 30px 60px rgba(94,62,40,.26); }