/**
 * HeroBrowser — shared web shell (landing + wiki).
 *
 * Palette/typography derived from src/ui/theme.ts (PALETTE, CSS, rarityColorNum) —
 * the game's locked "TBH-style" dark metal + gold filigree look, warm wells in
 * cool frames. Native system-sans stack, matching the game's UI font (no webfonts).
 * Mobile-first responsive.
 */

/* Display face for h1/h2 only — Cinzel (SIL OFL 1.1, self-hosted, see
 * public/web/fonts/Cinzel-OFL.txt + public/assets/CREDITS.md). Body text
 * stays system-sans (--font below). */
@font-face {
  font-family: 'Cinzel';
  src: url('/web/fonts/Cinzel-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('/web/fonts/Cinzel-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sticky header height (logotype + nav padding + border). The landing hero's
   * min-height subtracts this so it never runs past the fold. Overridden at the
   * mobile breakpoint where the logo/nav padding shrink. */
  --header-h: 86px;
  /* Cool metal frame tones — src/ui/theme.ts PALETTE.bg/panel/metal* */
  --bg: #0e0f15;
  --bg-deep: #05060a;
  --panel: #191c26;
  --panel-light: #232838;
  --metal: #20242f;
  --metal-dark: #141821;
  --metal-light: #2c3242;
  --border: #3a4256;
  --border-hi: #6b7796;

  /* Warm "content well" tones — PALETTE.well/wellLight/wellEdge */
  --well: #2b2118;
  --well-light: #3a2c1e;
  --well-edge: #b8923a;

  /* Text — CSS.text/muted/faint */
  --ink: #e8e8ee;
  --ink-dim: #9aa0b0;
  --ink-faint: #6b7282;

  /* Accents — CSS.accent/gold, PALETTE.filigree/filigreeHi */
  --accent: #6ad0ff;
  --gold: #f4c542;
  --filigree: #b8923a;
  --good: #5bd66b;
  --bad: #ff6b6b;

  /* Rarity ladder — src/ui/theme.ts rarityColorNum() */
  --rarity-common: #b8c0c8;
  --rarity-uncommon: #5bd66b;
  --rarity-rare: #4aa3ff;
  --rarity-epic: #c061ff;
  --rarity-legendary: #ffb020;
  --rarity-mythic: #ff2d55;
  --rarity-cursed: #d6174a;
  --rarity-divine: #fff4d6;
  /* WCAG AA text-only variants of mythic/cursed: the saturated tokens above
   * read as low as 2.49:1 (cursed) / 3.51:1 (mythic) against the framed-panel
   * background (--metal-light #2c3242, the worst case among the panel/chip
   * backgrounds these appear on). These lighter tints clear >=4.5:1 against
   * every background they're used as TEXT on (page --bg, --metal-light,
   * --metal): cursed-text 5.30:1 vs --metal-light (~7.9:1 vs --bg, ~6.4:1 vs
   * --metal); mythic-text 4.70:1 vs --metal-light (7.03:1 vs --bg, 5.70:1 vs
   * --metal). Cursed leans magenta so the two apex tiers read as distinct
   * colors side by side in the chip row, not just distinct labels. Use ONLY
   * for text — borders/glows/fills keep the saturated
   * --rarity-mythic/--rarity-cursed above. */
  --rarity-mythic-text: #ff6b89;
  --rarity-cursed-text: #ff7bb0;

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --radius: 10px;
  --shadow-deep: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Nine-slice gold-filigree frame — public/assets/ui/ui_frame.png (128x128).
   * Pixel-measured: 7px transparent gutter + 27px ornate border band per
   * edge = 34px opaque zone; center is transparent (our own background
   * shows through). Reused everywhere a box needs "carved game chrome". */
  --frame-slice: 34;
  --frame-width: 22px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Smooth in-page jumps (scroll-cue chevron, anchor nav) — motion, so gated.
 * scroll-padding-top keeps anchored targets clear of the fixed header. */
html {
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* The header overlays the top of the page (position: absolute), so reserve
   * its height by default. The landing page overrides this to 0 so its hero
   * fills the space behind the transparent nav (see landing.css). */
  padding-top: var(--header-h);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  font-weight: 700;
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: 0.015em;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── header / nav ─────────────────────────────────────────────────────── */

/* Transparent, non-sticky header (RagnarokX menu): the header has NO
 * background of its own — the page/hero art shows straight through — and it is
 * NOT fixed, so it scrolls away with the page. position: absolute lays it over
 * the top of the content; on the landing the hero fills the viewport behind it,
 * on other pages body padding-top (below) reserves the space. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}

/* Three-zone header (RagnarokX structure): logo left, nav centered in the
 * viewport, right zone free. The outer 1fr tracks are equal, so the middle
 * (auto) nav sits dead-center regardless of the logo's width. */
.site-nav {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* Logotype brand mark, top-left of every page. It's an anchor, so zero its
 * inherited nav-link padding and keep it from shrinking. */
.site-nav .brand {
  grid-column: 1;
  justify-self: start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  padding: 0;
}

/* Game logotype as the site brand mark (ui_title.png). Pixel art: crisp,
 * never smoothed. Height drives the header height (see --header-h below). */
.site-nav .brand-logo {
  height: 60px;
  width: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* Centered nav (RagnarokX structure). On desktop it's the middle grid track;
 * on mobile it collapses behind the hamburger (pure-CSS checkbox toggle below)
 * so the logotype never fights the links for width. */
.nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Hamburger toggle — hidden on desktop, revealed at the mobile breakpoint. */
.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  /* Own drop-shadow so the gold bars stay visible even over bright hero art,
   * independent of any background scrim. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--gold);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Checked (menu open): morph the bars into an X. */
.nav-menu-cb:checked ~ .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-menu-cb:checked ~ .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.nav-menu-cb:checked ~ .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* The toggle state lives in a checkbox (pure-CSS, so the static wiki needs no
 * JS). Hidden visually but kept focusable so keyboard users can open the menu;
 * the label click still drives pointer/touch. */
.nav-menu-cb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nav-menu-cb:focus-visible ~ .nav-toggle {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-nav a {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 4px;
  /* No header background now, so the links carry their own legibility halo for
   * where they sit over bright hero art (the god's light shaft). */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 9px rgba(0, 0, 0, 0.75);
}

/* Current page indicator, RagnarokX-style: gold with a soft glow and a small
 * filigree flourish flanking the label. */
.site-nav a.active {
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(244, 197, 66, 0.5);
}
.site-nav .nav-links a.active::before,
.site-nav .nav-links a.active::after {
  content: '\2726'; /* ✦ */
  color: var(--filigree);
  font-size: 0.62em;
  vertical-align: middle;
  opacity: 0.85;
}
.site-nav .nav-links a.active::before {
  margin-right: 8px;
}
.site-nav .nav-links a.active::after {
  margin-left: 8px;
}


.site-nav a:hover {
  color: var(--gold);
  text-decoration: none;
}

.site-nav .cta {
  padding: 8px 16px;
  font-size: 0.9rem;
}

/* ── footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--metal-dark);
  /* --ink-dim (not --ink-faint) clears WCAG AA on --metal-dark. */
  color: var(--ink-dim);
  padding: 24px 20px;
  font-size: 0.85rem;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.site-footer a {
  color: var(--ink-dim);
  /* Links must read as links without hover (touch has no hover) — the note
   * text shares this exact color, so the underline is the affordance. */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Unified footer arrangement: full-width link row, then the small-print
 * note, then the copyright line — the width:100% children stack inside the
 * existing flex-wrap .container without disturbing pages that still lay a
 * note and a link side by side. */
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: 100%;
}

.site-footer .footer-copyright {
  display: block;
  width: 100%;
  font-size: 0.8rem;
}

/* ── framed chrome (nine-slice ui_frame.png) ─────────────────────────────
 * One frame language reused everywhere a box needs to read as carved game
 * chrome instead of a flat panel: feature cards, class cards, phone frames,
 * the wiki sidebar, infoboxes. `border-image` scales the corners/edges from
 * the source PNG while the flat transparent center lets our own background
 * gradient show through — image-rendering keeps the pixel edges crisp even
 * as the frame is stretched to fit each box. */
.framed {
  position: relative;
  border-style: solid;
  border-width: var(--frame-width);
  border-image-source: url('/assets/ui/ui_frame.png');
  border-image-slice: var(--frame-slice) fill;
  border-image-width: var(--frame-width);
  border-image-repeat: round;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: linear-gradient(to bottom, var(--metal-light), var(--metal)) padding-box;
  border-radius: 6px;
}

/* ── scroll reveals (pattern 9) ───────────────────────────────────────────
 * Content is fully visible with JS disabled: the html.js class is only set
 * by the inline bootstrap script in index.html, so [data-reveal] elements
 * start hidden ONLY once we know JS (and therefore the IntersectionObserver
 * that un-hides them) is actually running. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* CSS-only progressive enhancement: scroll-linked heading reveal via the
 * View Timeline API. No-op (headings just render normally) on browsers
 * without support (Safari, older Firefox). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section h2 {
      animation: view-fade-slide linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

@keyframes view-fade-slide {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── pill (trust-signal chip, pattern 1) ─────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(20, 24, 33, 0.65);
  border: 1px solid var(--filigree);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(6px);
}

/* ── shared buttons ───────────────────────────────────────────────────── */

.btn {
  /* Flex-centered: the CTA row mixes <a> and <button> elements, which
   * align text differently (baseline vs UA centering) and buttons don't
   * inherit the font — this centers every label identically. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  line-height: 1.2;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid var(--border-hi);
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: linear-gradient(to bottom, var(--gold), var(--filigree));
  color: var(--bg-deep);
  border-color: var(--filigree);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 24px rgba(244, 197, 66, 0.25);
}

.btn-primary:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

.btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--border);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}

/* ── CTA material (pattern 6) ─────────────────────────────────────────────
 * "Play now" is the ONE undisputed primary action on the whole property —
 * a molten amber/ember gem bevel used nowhere else (headings/badges still
 * use the flatter --gold/--filigree two-stop gradient, so this reads as its
 * own reserved material). Repeated top (sticky nav), mid (hero), and end
 * (closing band) — same class, same material, every time. `.site-nav .cta`
 * is the existing class wikigen's shared header template already emits, so
 * it gets the material for free without touching wikigen markup. */
.btn-cta,
.site-nav .cta {
  background: linear-gradient(180deg, #ffe9a8 0%, #f4b93c 24%, #d97f1f 58%, #a5490f 100%);
  border: 2px solid #3a1a06;
  color: #2a1204;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(70, 20, 0, 0.5),
    0 3px 0 #5c2607, 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 150, 40, 0.3);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-cta:hover,
.site-nav .cta:hover {
  filter: brightness(1.08);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-cta:active,
.site-nav .cta:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(70, 20, 0, 0.5),
    0 1px 0 #5c2607;
}

.btn-cta.btn-lg {
  padding: 16px 34px;
  font-size: 1.15rem;
  border-radius: 10px;
  border-width: 3px;
}

@media (max-width: 600px) {
  :root {
    --header-h: 68px;
  }

  .site-nav {
    gap: 12px;
    padding: 10px 14px;
  }

  .site-nav .brand-logo {
    height: 46px;
  }

  /* Reveal the hamburger; the links are now a dropdown panel. */
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Reset the desktop grid placement (grid-column:2; justify-self:center):
     * without this, the item's containing block for the abs-positioned
     * left:0/right:0 above stays the narrow middle grid track instead of the
     * full nav row, so the open dropdown only covers roughly the right half
     * of the header instead of being full-bleed. */
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 6px 14px 14px;
    background: linear-gradient(to bottom, var(--metal), var(--metal-dark));
    border-bottom: 2px solid var(--filigree);
    box-shadow: var(--shadow-deep);
  }

  /* Open state (checkbox hack — no JS, so it works on the static wiki too). */
  .nav-menu-cb:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a {
    padding: 12px 6px;
    border-top: 1px solid var(--border);
  }

  .nav-links .cta {
    margin-top: 10px;
    text-align: center;
    border-top: 0;
  }
}