/* polytrack reskin — "Clean Canvas, Loud Play".
   Loaded AFTER webgame tailwind.css via the theme overrideCss hook
   (theme.json config.overrideCss -> app.locals.themeOverrideCss -> header.ejs).
   Strategy: webgame design is token-driven (@theme -> :root vars), so we
   redefine the same vars here (later :root wins at equal specificity) and
   re-declare the few bake-hard classes (.app-bg/.glass/.brand-grad/.btn-primary/
   .noise) whose gradient/blur/shadow are set on concrete properties, not vars.
   Result: flat blue-on-white chrome + one loud orange Play CTA, isolated to
   polytrack (this file only links when active_theme=polytrack). Keep lean. */

/* ============================================================
   1. Design tokens — redefine the webgame @theme vars
   ============================================================ */
:root {
  /* Typography — map the webgame font tokens to self-hosted Inter. The
     @font-face is declared ONCE in critical.css (single source, with the
     __ASSETS_V__ -> ?v= substitution); declaring it here would ship a static
     link whose src never gets the version token, double-fetching every font.
     "Inter Fallback" is the metric-compatible Arial face (critical.css) that
     renders during the swap window so the font swap causes no reflow (CLS). */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-nunito: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;

  /* Text — ink/pencil scale (replaces slate-900/600) */
  --color-custom-text: #1e2532;
  --color-custom-muted: #656e83;
  --color-custom-bg: #ffffff;

  /* Navigation / brand — Signal Blue replaces violet */
  --color-accent: #1a91f0;        /* signal-blue: link, nav active, focus */
  --color-accent-ink: #016fd0;    /* deep-signal: hover/pressed, link text */
  --color-active: #1a91f0;
  --color-main: #1a91f0;
  --color-anchor: #016fd0;        /* article body links (readable on white) */

  /* Surfaces — solid white, chalk hairline borders (no translucency) */
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-border-soft: #d9deeb;   /* chalk */

  /* Rating stars — amber */
  --color-rating: #f59e0b;
  --color-star: #f59e0b;

  /* New named tokens (dual-accent + states) */
  --color-signal-blue: #1a91f0;
  --color-deep-signal: #016fd0;
  --color-blue-wash: #eaf4fe;
  --color-play: #F2640A;          /* Play CTA — the only "loud" color */
  --color-play-press: #D6540A;
  --color-play-wash: #fff0e8;
  --color-success: #16a34a;
  --color-mist: #f7f9fc;

  /* Neutralize the original glass/gradient/glow effects */
  --gradient-brand: #1a91f0;      /* solid blue replaces violet->pink gradient */
  --glass-blur: none;
  --shadow-1: none;
  /* Single soft card-lift shadow drives the one allowed energy moment
     (game-card hover via .hover-lift) — chrome stays flat otherwise. */
  --shadow-lift: 0 8px 20px -12px rgba(15, 20, 30, .18);
  --color-glow: #1a91f0;          /* focus ring stays clearly visible */
  --radius-card: 16px;

  /* Genre chip tints — pastel on white, dark ink text.
     Only the 6 variants chipVariant() actually emits exist as classes
     (action/puzzle/racing/kids/rpg/open); arcade/sports are folded into
     action/racing upstream, so no rule for them. */
  --chip-action: #fff1d6;
  --chip-puzzle: #f3e8ff;
  --chip-racing: #dcfce7;
  --chip-kids:   #fce7f3;
  --chip-rpg:    #fef3c7;
  --chip-open:   #cffafe;
}

/* ============================================================
   2. Re-declare bake-hard classes (concrete props, not vars)
   ============================================================ */

/* Page background — flat paper->mist, drop the radial violet/mint glow. */
.app-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}
/* Remove the noise grain layer entirely (header renders a fixed .noise div). */
.noise {
  display: none;
}

/* Glass primitives -> flat white card: 1px chalk border, no backdrop blur,
   no glow shadow. Layered depth comes from color + border, not blur. */
.glass,
.glass-strong {
  border: 1px solid var(--color-border-soft);
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Review-layout panels bake backdrop-blur-xl + heavy arbitrary shadow as
   utilities (not vars) — flatten them so detail/review pages read flat. */
.main-content,
.main-aside,
.main-below {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  background: #ffffff;
}

/* Brand gradient surfaces -> solid signal-blue. */
.brand-grad {
  background: var(--color-signal-blue);
}

/* Secondary/primary blue button — flat, no gradient, no heavy shadow. */
.btn-primary {
  background: var(--color-signal-blue);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--color-deep-signal);
  filter: none;
}

/* ============================================================
   3. Play CTA — the one loud orange action (new class)
   ============================================================ */
.btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 36px;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  background: var(--color-play);
  box-shadow: 0 8px 18px -10px rgba(242, 100, 10, .55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-play:hover {
  background: var(--color-play-press);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(242, 100, 10, .65);
}
.btn-play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-signal-blue);
}

/* ============================================================
   4. Chips — genre tint (via vars above) + active = solid blue
   ============================================================ */
/* Active/selected filter chip overrides the static tint: solid signal-blue,
   white text, no inset ring (replaces the violet inset-ring active style). */
.chip.on {
  background: var(--color-signal-blue);
  color: #ffffff;
  box-shadow: none;
}

/* ============================================================
   5. Nav / footer flat reskin (CSS-only; no view edits this phase)
   ============================================================ */
/* Sticky header: white, single chalk bottom border (not an all-round glass
   card), no blur/shadow. Overrides the shared .glass border on #siteHeader. */
#siteHeader.glass {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: none;
}
/* Search pill -> mist fill so it reads as an input well on the white nav. */
#siteHeader .header-search input[type="text"] {
  background: var(--color-mist);
}
/* Desktop header: balance + category spacing that holds at every width.
   The shared markup (1) pins the nav to a fixed right-aligned block
   (lg:w-[70%] / xl:w-[calc(100%-327px)] + justify-between) so the menu floats
   mid-row detached from the logo, and (2) gives the category links gap-1
   (~6px) + zero horizontal padding so the labels run together as one string.

   Fix, all in one self-balancing rule set (overrides the utilities via #id
   specificity):
   - #navbar-dropdown fills the row -> the menu hugs the logo (left cluster)
     while ms-auto keeps search + language as the right cluster.
   - category links get horizontal padding + a wider gap (breathing room and a
     larger pointer target).
   - only the SEARCH may flex-shrink; the menu list and language control are
     pinned (flex 0 0 auto) so they never compress. In the 1024-1279 zone the
     root font is already clamped to its 22px max (clamp hits the cap at ~857px
     wide) so there is no fluid-shrink relief and the full-padding row would
     overflow — instead the ms-auto gap collapses first, then the search field
     narrows from its 380px ideal down to whatever fits (~180px at 1024). No
     overflow at any width, and the search re-widens as the viewport grows. */
@media (min-width: 1024px) {
  #siteHeader #navbar-dropdown {
    flex: 1 1 auto;
    width: auto;
  }
  #siteHeader #navbar-dropdown > ul {
    flex: 0 0 auto;
    column-gap: 0.5rem;
  }
  #siteHeader #navbar-dropdown > ul a {
    padding-inline: 0.5rem;
  }
  #siteHeader #navbar-dropdown > .language {
    flex: 0 0 auto;
  }
  #siteHeader #navbar-dropdown > .header-search {
    flex: 0 1 380px;
    width: auto;
    min-width: 0;
  }
  #siteHeader #navbar-dropdown > .header-search form {
    width: 100%;
    max-width: 380px;
    min-width: 0;
  }
  #siteHeader #navbar-dropdown > .header-search input {
    min-width: 0;
  }
}
/* Mobile dropdown (below lg): keep it space-efficient. The stacked category
   rows sit flush — drop the gap-1 inter-row spacing — so the open menu eats
   less of the viewport. Each link keeps its py-1 hit area (rows still ~36-39px,
   comfortable to tap), and the search + language controls below are untouched.
   Scoped to the collapsed layout only; the desktop row is handled above. */
@media (max-width: 1023.98px) {
  #siteHeader #navbar-dropdown > ul {
    row-gap: 0;
  }
}

/* Footer: top chalk hairline, flat (re-uses .glass; pin to footer scope). */
footer.glass {
  background: var(--color-mist);
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  box-shadow: none;
}

/* ============================================================
   6. Content body tweaks (token-driven links already blue)
   ============================================================ */
/* Blockquote accent: blue rule + faint blue wash (replaces the pink literal). */
.content blockquote {
  border-inline-start-color: var(--color-signal-blue);
  background: var(--color-blue-wash);
}

/* ============================================================
   7. Reduced motion — disable the hover-lift / Play transform
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .hover-lift:hover {
    transform: none;
  }
  .btn-play,
  .btn-play:hover {
    transform: none;
  }
}