/* =============================================================================
   site.css — the public-facing "front door" refresh.

   LOADED ONLY BY THE MARKETING PAGES (the home page, the static info pages, and
   the server-rendered catalogue via pages.js shell()). It is NEVER linked by
   tv.html, host.html or play.html.

   That isolation is the whole point: because a TV browser (Tizen / webOS / Fire
   TV Silk) never fetches this file, it may use modern CSS that app.css cannot —
   clamp(), backdrop-filter, layered gradients, custom properties — with zero
   risk to the television, the theme system, or the measured-contrast palettes
   that app.css has to protect. Nothing here reaches an app surface.

   It is loaded AFTER the page's own inline <style>, so it elevates VISUAL
   properties (background, shadow, border, colour, transition) that a page sets.
   It deliberately touches NO layout property (grid, flex, padding, width,
   position, sizes) — the home page's mobile-first fold measurements live in its
   inline styles and must stay exactly where they are.
   ========================================================================== */

:root {
  --site-ink: #f4f6ff;
  --site-gold: #ffd977;
  --site-gold-deep: #e8b34b;
  --site-radius: 20px;
  /* One soft, layered elevation, reused so every raised surface feels like the
     same material rather than a grab-bag of shadows. */
  --site-elev: 0 24px 70px -28px rgba(0, 0, 0, 0.75), 0 4px 14px -6px rgba(0, 0, 0, 0.45);
  --site-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --site-line: rgba(255, 217, 119, 0.16);
}

/* ---- the ground: a lit stage, not a flat fill ------------------------------
   A fixed layer BEHIND all content (z-index:-1), so it stays put as long info
   pages scroll and never repaints during scroll. Three soft glows — a warm gold
   spill from the top where the wordmark sits, and two cool blue pools — over a
   deeper navy than the flat one, which is what reads as depth. pointer-events
   off so it can never intercept a tap. */
body {
  background-color: #070b22;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(255, 199, 88, 0.10), transparent 62%),
    radial-gradient(820px 520px at 92% 3%, rgba(74, 108, 255, 0.16), transparent 55%),
    radial-gradient(760px 640px at 6% 32%, rgba(46, 66, 196, 0.12), transparent 58%);
}

/* ---- the wordmark gets a little atmosphere ---------------------------------
   A soft gold bloom around the text shape. drop-shadow (not box-shadow) so it
   follows the letters of the background-clipped gradient, not a rectangle. */
.logo h1 {
  filter: drop-shadow(0 6px 34px rgba(255, 199, 88, 0.28));
}

/* ---- raised surfaces: glass, a hairline, one shared elevation --------------
   The three-column board panel and the demo box are the page's "cards". They
   were flat translucent panels; now they sit on the shared elevation with a
   faint top highlight and a light backdrop blur, which is what makes a dark
   translucent surface read as glass rather than as a hole. Only visual props —
   the panel's grid, widths and paddings stay in the inline styles. */
.choice,
.demo-box {
  box-shadow: var(--site-elev), var(--site-hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.demo-box {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--site-radius);
}

/* A gentle lift when a pointer is over one of the three cards — a transform and
   a warmer edge, KEEPING the card's own surface (an earlier version replaced
   the background and made the card go transparent on hover). Pointer-only, so a
   phone (no hover, and these hold the primary actions) is untouched. */
@media (hover: hover) {
  .choice {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .choice:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 217, 119, 0.42);
    box-shadow: 0 32px 84px -28px rgba(0, 0, 0, 0.82), var(--site-hairline);
  }
}

/* ---- buttons: the one place a refresh is felt most -------------------------
   app.css owns the base .btn shape (size, padding, radius) and the TV depends
   on it, so this only RESTYLES the surface on public pages: the accent button
   becomes a gold gradient with a soft cast shadow and a press, the secondary
   becomes glass with a gold-tinted hover border. Size and padding untouched, so
   nothing reflows. */
.btn,
.btn-accent {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.15s ease, filter 0.15s ease;
  will-change: transform;
}
.btn-accent {
  background: linear-gradient(180deg, #ffe093, #ecb44d);
  color: #1c1405; /* dark ink on gold — well above AA */
  border: none;
  box-shadow: 0 10px 26px -10px rgba(236, 180, 77, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-accent:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 32px -10px rgba(236, 180, 77, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-accent:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
/* The secondary button, and the pill links that also carry .btn (How to play,
   Pricing). Glass at rest, a gold-tinted edge and a hair of lift on hover. */
.btn:not(.btn-accent) {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--site-ink);
}
.btn:not(.btn-accent):hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 217, 119, 0.42);
}

/* ---- inputs: a warmer focus ------------------------------------------------
   The code and password fields on the home page. A gold focus ring that reads
   as the brand rather than the browser default. Kept as a SECOND rule so an
   engine that does not know :focus-visible still gets app.css's own :focus. */
.hero input:focus-visible {
  outline: none;
  border-color: rgba(255, 217, 119, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 217, 119, 0.18);
}

/* ---- footer links: legible, with a gold hover ------------------------------ */
footer a:hover,
#formats-line a:hover {
  color: var(--site-gold);
}

/* ---- honour the motion preference -----------------------------------------
   The lifts and fades are pleasant, not load-bearing. Someone who asked for
   less motion gets the same page holding still. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-accent,
  .choice {
    transition: none;
  }
  .btn-accent:hover,
  .btn:not(.btn-accent):hover,
  .choice:hover {
    transform: none;
  }
}