/* Discover ("choose your adventure") — a STANDALONE page that MATCHES the
   in-player select screen (styles.css .select-* / .journey-card) pixel-for-
   pixel. The kiosk welds that screen to a 1920×1080 stage and scales every
   unit with the viewport (html font-size = the letterbox fit); this page uses
   the SAME scaler and the SAME rem values, so text, buttons and cards render
   at identical size. A small floor keeps it legible on phones (the kiosk is
   never seen that small). */

@font-face {
  font-family: 'Gotham Rounded';
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/gothamrnd_medium.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham Rounded';
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/gothamrnd_bold.otf') format('opentype');
}

:root {
  --kohl:     #14141F;
  --aamras:   #FFA300;
  --ferozi:   #5CB8B2;      /* the four house hues — one per card, cycling */
  --gulabi:   #D0006F;
  --baingani: #500778;
  --ink-mute: #6b6b76;
  --stroke:   #E8E2D9;
  --paper:    #EFE6D4;      /* the landing/leave-veil cream */
  --frame:    #FFF8EE;
  --sh-card:  0 4rem 7rem rgba(0,0,0,.08);
  --sh-cta:   0 4rem 32rem rgba(0,0,0,.16);
  --display:  'Gotham Rounded', 'Nunito', system-ui, sans-serif;
  --body:     'DM Sans', system-ui, sans-serif;
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-boing: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:   180ms;
}

/* The kiosk scaler: 1rem = the 1920×1080 stage's fit into the viewport
   (min of width/1920 and height/1080). Identical to styles.css, so this page
   sizes exactly like the in-player select screen. The 0.62px floor stops it
   shrinking to unreadable on phones — the only place the raw formula would. */
html {
  font-size: max(0.62px, min(0.052083vw, 0.092593vh));
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body); font-size: 16rem;
  color: var(--kohl);
  /* WHITE base, exactly like the kiosk (paper-bg sits over a white
     screen-container). paper.jpg at .42 over white gives the light cream —
     over the old tan --paper it rendered a darker, warmer tone that killed
     the chip separator's contrast and made the whole page read heavier. */
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Paper texture — mirrors the kiosk's .paper-bg (paper.jpg at .42 over white). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/assets/img/paper.jpg') center / cover no-repeat;
  opacity: .42;
  pointer-events: none;
  z-index: 0;
}

/* Floating Home pill — the kiosk's .cta-back / .select-home, top-left, "top-
   left leaves this screen" as one learned gesture. White pill, kohl-ink
   hairline, a flipped-and-blackened arrow that nudges on hover. */
.dv-home {
  position: fixed;
  top: 22rem; left: 26rem;
  z-index: 5;
  display: inline-flex; align-items: center;
  background: #fff; color: var(--kohl); text-decoration: none;
  border: 2rem solid rgba(20, 20, 31, .7); border-radius: 24rem;
  padding: 12rem 22rem; box-shadow: var(--sh-cta);
  font-family: var(--display); font-weight: 700; font-size: 24rem; line-height: 1; letter-spacing: .3rem;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dv-home-inner { display: inline-flex; align-items: center; gap: 8rem; }
.dv-arrow { width: 34rem; height: 28rem; transform: scaleX(-1); transition: transform var(--t-fast) var(--ease); }
.dv-arrow img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0); }
.dv-home:hover { transform: translateY(-2rem) scale(1.03); box-shadow: 0 14rem 30rem rgba(0, 0, 0, .32); }
.dv-home:hover .dv-arrow { transform: scaleX(-1) translateX(2rem); }
.dv-home:focus-visible { outline: 3rem solid var(--kohl); outline-offset: 3rem; }

/* ── Head + controls ────────────────────────────────────────────────── */
.dv-main {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 32rem;
  padding: 20rem 48rem 64rem;
  text-align: center;
}

.dv-head { display: flex; flex-direction: column; align-items: center; gap: 10rem; }
.dv-title {
  /* 12rem bottom margin is the squiggle's clearance (it hangs below the word,
     out of flow), so the sub-line still gets daylight. */
  margin: 0 0 12rem;
  font-family: var(--display); font-weight: 700; font-size: 52rem;
  line-height: 1.1; color: var(--kohl);
}
.dv-title .adv { color: var(--aamras); position: relative; white-space: nowrap; }
.dv-title .adv .spark {
  position: absolute; top: -13rem; right: -30rem; width: 26rem; height: 26rem;
  color: var(--aamras); animation: dv-spark 2.6s ease-in-out infinite;
}
.dv-title .adv .spark svg { width: 100%; height: 100%; display: block; }
/* Hand-drawn underline beneath the word (stretches to fit it). */
.dv-title .adv .squig {
  position: absolute; left: 2rem; right: 2rem; bottom: -12rem; height: 14rem;
  color: var(--aamras);
}
.dv-title .adv .squig svg { width: 100%; height: 100%; display: block; }
@keyframes dv-spark {
  0%,100% { transform: scale(.7) rotate(-8deg); opacity: .5; }
  50%     { transform: scale(1.08) rotate(10deg); opacity: 1; }
}
.dv-sub {
  margin: 0;
  font-family: var(--display); font-weight: 500; font-size: 22rem;
  line-height: 1.3; color: var(--ink-mute);
}

/* The controls bar — search pill on the left, toggle on the right, one row.
   Mirrors the kiosk's .select-tools; wraps to stack on narrow screens. */
.dv-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24rem; flex-wrap: wrap;
  width: 100%; max-width: 1752rem;
}

/* Sliding-thumb toggle — a kohl thumb slides between two equal segments. */
.dv-toggle {
  position: relative; flex: none;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6rem;
  padding: 6rem;
  background: rgba(20, 20, 31, .08); border-radius: 999rem;
}
.dv-toggle-thumb {
  position: absolute; top: 6rem; bottom: 6rem; left: 6rem;
  width: calc(50% - 9rem);
  background: var(--kohl); border-radius: 999rem;
  box-shadow: 0 6rem 14rem rgba(20, 20, 31, .26);
  transition: transform .4s var(--ease-boing);
}
.dv-toggle.is-activity .dv-toggle-thumb { transform: translateX(calc(100% + 6rem)); }
.dv-toggle-btn {
  position: relative; z-index: 1;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10rem;
  /* Resting colour is a near-kohl mix, not the muted grey — the unselected
     tab must not read as disabled (kiosk is touch-only, never hovers). */
  color: color-mix(in srgb, var(--kohl) 70%, transparent);
  font-family: var(--display); font-weight: 700; font-size: 24rem;
  letter-spacing: .3rem; padding: 16rem 38rem; border-radius: 999rem;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dv-toggle-btn:hover { color: var(--kohl); }
.dv-toggle-btn:active { transform: scale(.96); }
.dv-toggle-btn[aria-selected="true"] { color: #FFF8EE; }
.dv-toggle-btn:focus-visible { outline: 3rem solid var(--kohl); outline-offset: 3rem; }
.stb-ico { width: 24rem; height: 24rem; flex: none; }
.stb-ico svg { width: 100%; height: 100%; display: block; }

/* Search — the left half of the tools row, matching the kiosk's wide pill:
   64rem height, icon in the left rail, wide type. */
.dv-search { position: relative; flex: none; width: min(560rem, 100%); }
/* Pink magnifier (icon-mag.svg is #D0006F) in the left rail, exactly like the
   kiosk's .ss-ico — not a grey stroke icon. */
.dv-ss-ico { position: absolute; left: 22rem; top: 50%; transform: translateY(-50%); width: 26rem; height: 26rem; pointer-events: none; opacity: .55; }
.dv-ss-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dv-search input {
  width: 100%; height: 64rem;
  font-family: var(--display); font-weight: 500; font-size: 22rem; color: var(--kohl);
  padding: 0 60rem 0 64rem;              /* icon left, ✕ right — rail widths */
  border: 2rem solid var(--stroke); border-radius: 999rem;
  background: #fff; box-shadow: var(--sh-card);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dv-search input::placeholder { color: var(--ink-mute); }
.dv-search input::-webkit-search-cancel-button { display: none; }   /* native ✕ too small */
.dv-search input:focus-visible { outline: none; border-color: var(--aamras); box-shadow: 0 0 0 4rem rgba(255, 163, 0, .18); }
/* Clear ✕ — the kiosk's .select-search-clear, shown only while typing. */
.dv-search-clear {
  position: absolute; right: 8rem; top: 50%; transform: translateY(-50%);
  width: 48rem; height: 48rem; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 20, 31, .08); color: var(--kohl);
  display: grid; place-items: center;
  transition: transform 120ms var(--ease);
}
.dv-search-clear[hidden] { display: none; }
.dv-search-clear svg { width: 20rem; height: 20rem; }
.dv-search-clear:active { transform: translateY(-50%) scale(.9); }
.dv-search-clear:focus-visible { outline: 3rem solid var(--kohl); outline-offset: 3rem; }

/* ── Grid + cards — the kiosk .journey-card, same rem values, so card size,
   tinted border, full-bleed cover mount, type sizes, amber Play pill and
   shadows all match the in-player select screen. ─────────────────────────── */
.dv-grid {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;
  align-content: flex-start;
  gap: 24rem; max-width: 1752rem; width: 100%;
}

/* The card: white body, a 2rem border washed with the card's own hue, one of
   four house hues per card (cycling every 4). padding:0 — the cover mount
   bleeds to the border and the body owns its gutter. */
.dv-card {
  --tint: var(--aamras);
  position: relative;
  width: 420rem; max-width: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  border: 2rem solid color-mix(in srgb, var(--tint) 62%, var(--stroke));
  border-radius: 20rem; padding: 0;
  text-align: left; text-decoration: none; color: inherit;
  box-shadow: var(--sh-card);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dv-card:nth-child(4n+2) { --tint: var(--ferozi); }
.dv-card:nth-child(4n+3) { --tint: var(--gulabi); }
.dv-card:nth-child(4n+4) { --tint: var(--baingani); }
/* Lazy reveal: cards start hidden and rise + fade in as they enter the
   viewport (discover.js, IntersectionObserver + Web Animations). Gated on
   .dv-js so a no-JS / reduced-motion page shows every card immediately. */
.dv-js .dv-card { opacity: 0; }
.dv-card:hover { transform: translateY(-8rem); border-color: var(--tint); }
.dv-card:active { transform: scale(.97); }
.dv-card:focus-visible { outline: 3rem solid var(--kohl); outline-offset: 3rem; }

/* The cover mount, bleeding to the card edges. 2:1, covers are contain (never
   cropped), so the card's hue washes the wall behind the art (20%) and a
   neutral mat line seats the plate. Top radii = card 20 − border 2. */
.dv-card-frame {
  position: relative;
  width: 100%; aspect-ratio: 2 / 1;
  background: color-mix(in srgb, var(--tint) 20%, var(--frame));
  border-radius: 18rem 18rem 0 0; overflow: hidden;
  display: grid; place-items: center;
}
.dv-card-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1.5rem solid rgba(0, 0, 0, .10); border-radius: inherit;
}
.dv-card-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dv-card-frame.is-empty { color: var(--ink-mute); }
.dv-card-noimg { display: flex; flex-direction: column; align-items: center; gap: 10rem; font-family: var(--display); font-weight: 500; font-size: 19rem; color: var(--ink-mute); }
.dv-card-noimg svg { width: 50rem; height: 50rem; opacity: .5; }

.dv-card-body { display: flex; flex-direction: column; gap: 8rem; flex: 1 1 auto; padding: 12rem 20rem 14rem; }
.dv-card-title {
  margin: 0;
  font-family: var(--display); font-weight: 700; font-size: 24rem; line-height: 1.2; color: var(--kohl);
  /* Clamp to 2 lines so a runaway title can't push Play off the card. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* Full width under the title, 3 lines then ellipsis. Near-kohl, not the muted
   grey (which read as texture at kiosk standing distance). */
.dv-card-blurb {
  margin: 0;
  font-family: var(--display); font-weight: 500; font-size: 20rem; line-height: 1.35;
  color: color-mix(in srgb, var(--kohl) 80%, #fff);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* Amber on EVERY card (the house action colour), kohl label + glyph, pinned
   to the card's bottom-right by the auto margins whether the blurb is three
   lines or none. */
.dv-card-play {
  margin-top: auto; margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 9rem;
  background: var(--aamras); color: var(--kohl); border-radius: 999rem;
  padding: 13rem 26rem; box-shadow: var(--sh-cta);
  font-family: var(--display); font-weight: 700; font-size: 22rem; line-height: 1; letter-spacing: .3rem;
}
.dv-card-play .ico { width: 24rem; height: 24rem; display: inline-flex; }
.dv-card-play .ico svg { width: 100%; height: 100%; fill: currentColor; }
.dv-card:hover .dv-card-play { animation: dv-boing 620ms var(--ease-boing); }
@keyframes dv-boing {
  0%,100% { transform: translateY(0) rotate(0) scale(1,1); }
  18%     { transform: translateY(3rem) rotate(-3deg) scale(1.06,.92); }
  42%     { transform: translateY(-12rem) rotate(5deg) scale(.96,1.08); }
  72%     { transform: translateY(-3rem) rotate(-3deg) scale(1.04,.98); }
}

/* Warm contact shadow on the paper below the card (matches the kiosk); lifts
   and softens on hover so the card reads as coming off the page. */
.dv-card::after {
  content: ''; position: absolute; top: 100%; left: 5%; right: 5%; height: 26rem;
  pointer-events: none; transform-origin: 50% 0;
  background: radial-gradient(50% 50% at 50% 26%, rgba(122, 76, 8, .22), rgba(122, 76, 8, 0) 72%);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.dv-card:hover::after { transform: translateY(7rem) scaleX(1.08); opacity: .62; }

/* ── Filter chips (artist + game) — left-aligned row under the tools bar ── */
.dv-chips {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 10rem; width: 100%; max-width: 1752rem;
}
.dv-chips-sep { flex: none; width: 2rem; height: 30rem; border-radius: 2rem; background: var(--stroke); margin: 0 8rem; }
.dv-chip {
  flex: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8rem;
  height: 52rem; padding: 0 26rem; border-radius: 999rem;
  font-family: var(--display); font-weight: 700; font-size: 20rem; line-height: 1; letter-spacing: .3rem;
  color: var(--kohl); background: #fff;
  border: 2rem solid var(--stroke); box-shadow: var(--sh-card);
  transition: transform 120ms var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dv-chip:hover { border-color: var(--aamras); }
.dv-chip:active { transform: scale(.94); }
/* Selected = kohl fill + warm white — the toggle's thumb vocabulary, so
   "picked" reads the same everywhere; amber stays reserved for actions. */
.dv-chip.is-active { background: var(--kohl); color: #FFF8EE; border-color: var(--kohl); }
.dv-chip:focus-visible { outline: 3rem solid var(--kohl); outline-offset: 3rem; }

/* "Show everything" — clears all filters from the no-match state. */
.dv-clear-all {
  margin-top: 18rem; appearance: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 20rem; letter-spacing: .3rem;
  color: #fff; background: var(--aamras); border: 0; border-radius: 999rem;
  padding: 14rem 30rem; box-shadow: var(--sh-cta);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.dv-clear-all:hover { transform: translateY(-2rem); filter: brightness(1.05); }
.dv-clear-all:active { transform: scale(.97); }
.dv-clear-all:focus-visible { outline: 3rem solid var(--kohl); outline-offset: 3rem; }

/* ── States ─────────────────────────────────────────────────────────── */
.dv-status { color: var(--ink-mute); padding: 24rem 0; font-family: var(--display); font-size: 20rem; }
.dv-empty { padding: 48rem 24rem; }
.dv-empty-emoji { font-size: 52rem; }
.dv-empty h2 { font-family: var(--display); font-weight: 700; font-size: 30rem; margin: 14rem 0 8rem; color: var(--kohl); }
.dv-empty p { font-family: var(--display); font-size: 20rem; color: var(--ink-mute); margin: 0; }
.dv-sentinel { height: 1rem; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dv-js .dv-card { opacity: 1; }          /* no rise-in; show at once */
  .dv-card:hover { transform: translateY(-4rem); }
  .dv-card:hover .dv-card-play { animation: none; }
  .dv-toggle-thumb { transition: none; }
  .dv-title .adv .spark { animation: none; }
}

/* When the tools row can't hold search + toggle side by side, stack them
   centred rather than leaving the toggle stranded hard-left. */
@media (max-width: 680px) {
  .dv-tools { justify-content: center; }
  .dv-search { width: 100%; }
}

/* On phones the scaler hits its floor and 420rem cards get wide relative to
   the viewport — drop to 1-up so they never overflow. */
@media (max-width: 560px) { .dv-card { width: 100%; } }