/*
 * Herald — Splat Picker (public demo branch)
 * Loads alongside landing.css, which supplies the shared camera-corner
 * frame + three-layer background (.hl-bg-base/.hl-bg-image/.hl-bg-overlay/
 * .hl-frame) reused verbatim from the landing page. This file only adds
 * the picker-specific bar, heading, and card grid.
 */

/* Pins the Dark Pack notice to the viewport bottom on short pages (the
   card grid alone rarely fills the screen) while letting it fall out
   naturally below content on tall/narrow viewports where the stacked
   cards do exceed it. */
.sp-body { display: flex; flex-direction: column; min-height: 100vh; }

.sp-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 40px; position: relative;
}
.sp-brand {
  display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .28em;
  color: var(--text); text-decoration: none; font-weight: 700;
}
.sp-brand .dia { color: var(--htr-500); font-size: 11px; }
.sp-back {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-shell); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--gold-shell) 35%, transparent);
  padding: 8px 16px; transition: border-color var(--motion-slow, .3s), color var(--motion-slow, .3s);
}
.sp-back:hover, .sp-back:focus-visible { border-color: var(--htr-500); color: var(--gold-200); }
.sp-back .dia { color: var(--htr-500); }

.sp-main { flex: 1 0 auto; position: relative; z-index: 10; padding: 40px 24px 80px; max-width: 1100px; margin: 0 auto; text-align: center; }
.sp-heading {
  font-family: 'IM Fell English', Georgia, serif; font-weight: 500;
  font-size: clamp(32px, 5vw, 56px); color: var(--gold-200); margin-bottom: 48px;
}

.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Per-splat accent — the brighter *-300 step of each ramp, not the sheet
   chrome's own -500 base: Vampire wine and Werewolf camo are dark, muted
   hues that read as almost invisible borders/labels at -500 against this
   near-black background, while Hunter orange (-500) is already bright.
   Lighter-but-still-in-family keeps all three equally legible here. */
.sp-card[data-splat="htr"] { --accent: var(--htr-500); }
.sp-card[data-splat="vtm"] { --accent: var(--vtm-300); }
.sp-card[data-splat="wta"] { --accent: var(--wta-300); }

.sp-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 24px 32px;
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  text-decoration: none;
  transition: border-color var(--motion-slow, .3s), transform var(--motion-fast, .12s), background var(--motion-slow, .3s);
}
.sp-card:hover, .sp-card:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.sp-card:active { transform: scale(0.98); }

.sp-card-dia { color: var(--accent); font-size: 20px; }
.sp-card-name {
  font-family: 'IM Fell English', Georgia, serif; font-weight: 500;
  font-size: 28px; color: var(--gold-200); letter-spacing: .02em;
}
.sp-card-edition {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted);
}
.sp-card-hook {
  font-family: 'Crimson Text', Georgia, serif; font-style: italic;
  font-size: 15px; color: var(--text); opacity: .85; margin-top: 6px; line-height: 1.4;
}
.sp-card-enter {
  margin-top: 18px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}

@media (max-width: 760px) {
  .sp-bar { padding: 18px 20px; }
  .sp-cards { grid-template-columns: 1fr; gap: 20px; }
}