/* ============================================================
   PIXEL QUEST — the "Portfolio Game" design system.

   Everything in this file is scoped under [data-skin="pixel"],
   set on <html> of themed pages. FitTracker never loads this
   file and never carries the attribute, so tokens.css /
   base.css / components.css keep rendering it byte-identically.

   Load order on themed pages:
     tokens.css → base.css → components.css → pixel.css → page <style>

   Layers in this file:
     1. Raw pixel tokens (--px-*)
     2. Semantic token remap — dark ("Night Stage") + light
        ("Overworld Day") + no-JS system fallback
     3. Base treatments (radius zero, display type, backgrounds)
     4. Reskins of shared component classes
     5. .px-* component set (panel, btn, bar, dialog, stamp, …)
     6. Motion (steps() only) + reduced-motion
   ============================================================ */

/* ---------- 1 & 2. Tokens — Night Stage (dark default) ---------- */
[data-skin="pixel"] {
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-crt: "VT323", "SF Mono", monospace;

  /* secondary game palette — max ONE per screen beside the accent */
  --px-gold:   oklch(0.82 0.16 85);
  --px-gold-deep: oklch(0.66 0.15 75);
  --px-heart:  oklch(0.64 0.22 20);
  --px-xp:     oklch(0.80 0.20 145);
  --px-mana:   oklch(0.62 0.20 300);
  --px-sky:    oklch(0.70 0.12 250);

  --px-shadow: oklch(0.08 0.02 260);
  --px-edge-light: oklch(0.45 0.06 250);

  /* semantic remap — components.css classes pick these up automatically */
  --bg:          oklch(0.14 0.030 260);
  --bg-deep:     oklch(0.11 0.028 262);
  --bg-raised:   oklch(0.18 0.032 258);
  --surface:     oklch(0.19 0.032 258);
  --surface-2:   oklch(0.23 0.034 256);

  --text:        oklch(0.93 0.015 240);
  --text-muted:  oklch(0.74 0.020 245);
  --text-dim:    oklch(0.55 0.025 250);
  --text-faint:  oklch(0.38 0.028 255);

  --rule:        oklch(0.32 0.045 255);
  --rule-bright: oklch(0.44 0.055 252);

  --accent:      oklch(0.82 0.15 175);
  --accent-soft: oklch(0.30 0.07 200);
  --on-accent:   oklch(0.12 0.03 260);

  --spot:        var(--px-gold);
  --critical:    var(--px-heart);
  --positive:    var(--px-xp);

  --grid-line:   oklch(0.70 0.12 250 / 0.05);
  --shadow-md:   4px 4px 0 0 var(--px-shadow);

  /* pixels have no curves */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;

  /* pixel UIs snap — neutralize easing site-wide */
  --d-fast: 0ms;
  --d-base: 0ms;

  /* tiles (SVG data URIs, crisp squares) */
  --px-tile-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect x='10' y='14' width='2' height='2' fill='%23cfe3ff' opacity='.8'/%3E%3Crect x='52' y='6' width='2' height='2' fill='%2394f0dc' opacity='.6'/%3E%3Crect x='80' y='30' width='2' height='2' fill='%23cfe3ff' opacity='.45'/%3E%3Crect x='28' y='50' width='2' height='2' fill='%23ffd76a' opacity='.5'/%3E%3Crect x='66' y='70' width='2' height='2' fill='%23cfe3ff' opacity='.7'/%3E%3Crect x='6' y='82' width='2' height='2' fill='%2394f0dc' opacity='.4'/%3E%3Crect x='44' y='88' width='2' height='2' fill='%23cfe3ff' opacity='.35'/%3E%3Crect x='90' y='58' width='2' height='2' fill='%23cfe3ff' opacity='.5'/%3E%3C/svg%3E");
  --px-tile-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cg fill='%23ffffff' opacity='.5'%3E%3Crect x='12' y='18' width='24' height='6'/%3E%3Crect x='18' y='12' width='12' height='6'/%3E%3Crect x='72' y='60' width='30' height='6'/%3E%3Crect x='78' y='54' width='18' height='6'/%3E%3C/g%3E%3C/svg%3E");
  --px-ground-a: var(--px-xp);
  --px-ground-b: oklch(0.45 0.10 60);
}

/* ---------- Overworld Day (light) ---------- */
[data-skin="pixel"][data-theme="light"] {
  --px-shadow: oklch(0.55 0.04 165);
  --px-edge-light: oklch(0.99 0.005 105);

  --bg:          oklch(0.965 0.014 110);
  --bg-deep:     oklch(0.930 0.018 110);
  --bg-raised:   oklch(0.985 0.010 105);
  --surface:     oklch(0.965 0.014 110);
  --surface-2:   oklch(0.930 0.018 110);

  --text:        oklch(0.22 0.030 165);
  --text-muted:  oklch(0.42 0.025 170);
  --text-dim:    oklch(0.55 0.020 175);
  --text-faint:  oklch(0.72 0.014 175);

  --rule:        oklch(0.55 0.04 165);
  --rule-bright: oklch(0.40 0.05 170);

  --accent:      oklch(0.52 0.13 188);
  --accent-soft: oklch(0.90 0.05 195);
  --on-accent:   oklch(0.99 0.005 105);

  --spot:        var(--px-gold-deep);

  --grid-line:   oklch(0.40 0.10 175 / 0.08);
  --shadow-md:   4px 4px 0 0 var(--px-shadow);
}

/* No-JS fallback: theme-toggle.js normally stamps data-theme at boot;
   if scripts are blocked, honor the OS preference for the palette. */
@media (prefers-color-scheme: light) {
  [data-skin="pixel"]:not([data-theme]) {
    --px-shadow: oklch(0.55 0.04 165);
    --px-edge-light: oklch(0.99 0.005 105);
    --bg: oklch(0.965 0.014 110);
    --bg-deep: oklch(0.930 0.018 110);
    --bg-raised: oklch(0.985 0.010 105);
    --surface: oklch(0.965 0.014 110);
    --surface-2: oklch(0.930 0.018 110);
    --text: oklch(0.22 0.030 165);
    --text-muted: oklch(0.42 0.025 170);
    --text-dim: oklch(0.55 0.020 175);
    --text-faint: oklch(0.72 0.014 175);
    --rule: oklch(0.55 0.04 165);
    --rule-bright: oklch(0.40 0.05 170);
    --accent: oklch(0.52 0.13 188);
    --accent-soft: oklch(0.90 0.05 195);
    --on-accent: oklch(0.99 0.005 105);
    --spot: var(--px-gold-deep);
    --grid-line: oklch(0.40 0.10 175 / 0.08);
  }
}

/* ---------- 3. Base treatments ---------- */
[data-skin="pixel"] h1,
[data-skin="pixel"] h2 {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
}
[data-skin="pixel"] h1 { font-size: clamp(18px, 4vw, 32px); }
[data-skin="pixel"] h2 { font-size: clamp(14px, 2.2vw, 18px); }
[data-skin="pixel"] h3,
[data-skin="pixel"] h4 { letter-spacing: 0; }

[data-skin="pixel"] ::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* night sky / day sky behind everything — replaces the plain grid */
[data-skin="pixel"] .grid-bg::before {
  background-image:
    var(--px-tile-stars),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 96px 96px, 80px 80px, 80px 80px;
  image-rendering: pixelated;
}
[data-skin="pixel"][data-theme="light"] .grid-bg::before {
  background-image:
    var(--px-tile-clouds),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 120px 96px, 80px 80px, 80px 80px;
}

/* ---------- 4. Reskins of shared component classes ---------- */

/* Buttons → chunky press-effect blocks */
[data-skin="pixel"] .btn {
  font-family: var(--font-pixel);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.6;
  padding: 12px 16px;
  border: 3px solid var(--rule-bright);
  border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--px-shadow);
  transition: none;
}
[data-skin="pixel"] .btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--px-shadow);
}
[data-skin="pixel"] .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--px-shadow);
}
[data-skin="pixel"] .btn--primary {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 0 var(--px-shadow);
}
[data-skin="pixel"] .btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
[data-skin="pixel"] .btn--ghost {
  border-color: transparent;
  box-shadow: none;
}
[data-skin="pixel"] .btn--ghost:hover { transform: none; box-shadow: none; }
[data-skin="pixel"] .btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Tags → cartridge labels */
[data-skin="pixel"] .tag {
  border-width: 2px;
  border-radius: 0;
  font-size: 10px;
  padding: 4px 8px;
}

/* Now-bar → HUD strip */
[data-skin="pixel"] .now-bar {
  border-width: 2px;
  border-color: var(--rule-bright);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 var(--px-shadow);
}
[data-skin="pixel"] .now-bar__label {
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.8;
}

/* Topbar → HUD bar (opaque, hard edge — pixel UIs don't blur) */
[data-skin="pixel"] .topbar {
  background: var(--bg-deep);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 3px solid var(--rule-bright);
}
[data-skin="pixel"] .topbar__back,
[data-skin="pixel"] .topbar__product {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0;
  line-height: 1.8;
}
[data-skin="pixel"] .topbar__divider { width: 2px; background: var(--rule-bright); }

/* Theme toggle → square switch */
[data-skin="pixel"] .theme-toggle {
  border: 2px solid var(--rule-bright);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 var(--px-shadow);
  transition: none;
}
[data-skin="pixel"] .theme-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--px-shadow);
}

/* Inputs → terminal fields */
[data-skin="pixel"] .input {
  border: 3px solid var(--rule-bright);
  border-radius: 0;
  box-shadow: inset 3px 3px 0 0 oklch(0 0 0 / 0.15);
}
[data-skin="pixel"] .input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 0;
  border-color: var(--rule-bright);
}

/* Cards + terminal blocks pick up panel language */
[data-skin="pixel"] .card,
[data-skin="pixel"] .term {
  border: 3px solid var(--rule-bright);
  border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--px-shadow);
}

/* ============================================================
   Section headers v2 — "checkpoint flags".
   The old terminal motifs ([01] brackets, // hint prefixes) are
   deprecated: markup carries the bare number ("01") and bare
   label text ("BRIEFING"); this CSS supplies the game chrome.
   - number  → accent pennant flag (clipped tail, hard shadow)
   - hint    → bordered badge with a ◆ diamond prefix (::before)
   ============================================================ */
[data-skin="pixel"] .sec-h__num,
[data-skin="pixel"] .section-head__num,
[data-skin="pixel"] .posts-head__num,
[data-skin="pixel"] .post-h2__num,
[data-skin="pixel"] .post-card__num,
[data-skin="pixel"] .feats__num,
[data-skin="pixel"] .ballot__num,
[data-skin="pixel"] .basics__num,
[data-skin="pixel"] .measure__num,
[data-skin="pixel"] .px-num {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--on-accent);
  background: var(--accent);
  padding: 6px 14px 6px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
  min-width: 0;
}
/* the pennant clips box-shadow, so the flag "pole" is a border */
[data-skin="pixel"] .sec-h__num,
[data-skin="pixel"] .section-head__num,
[data-skin="pixel"] .posts-head__num,
[data-skin="pixel"] .post-h2__num {
  border-left: 3px solid var(--rule-bright);
}

[data-skin="pixel"] .sec-h__hint,
[data-skin="pixel"] .section-head__hint,
[data-skin="pixel"] .posts-head__hint,
[data-skin="pixel"] .px-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 2px solid var(--rule);
  padding: 4px 8px;
}
[data-skin="pixel"] .sec-h__hint::before,
[data-skin="pixel"] .section-head__hint::before,
[data-skin="pixel"] .posts-head__hint::before,
[data-skin="pixel"] .px-badge::before {
  content: "◆";
  margin-right: 7px;
  color: currentColor;
  font-size: 8px;
}
[data-skin="pixel"] .px-badge--spot { color: var(--spot); border-color: var(--spot); }
[data-skin="pixel"] .px-badge--accent { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
[data-skin="pixel"] .sec-h__title,
[data-skin="pixel"] .section-head__title {
  font-family: var(--font-pixel);
  font-size: clamp(13px, 2vw, 17px);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---------- 5. The .px-* component set ---------- */

/* Panel — the workhorse game window */
[data-skin="pixel"] .px-panel {
  position: relative;
  background: var(--surface);
  border: 3px solid var(--rule-bright);
  box-shadow: 6px 6px 0 0 var(--px-shadow);
  padding: var(--s-6);
}
/* raised — classic dialogue-window double bevel */
[data-skin="pixel"] .px-panel--raised {
  box-shadow:
    inset 0 0 0 2px var(--bg),
    inset 0 0 0 5px var(--px-edge-light),
    6px 6px 0 0 var(--px-shadow);
  padding: calc(var(--s-6) + 5px);
}
/* deep — inset screen (for terminal/readout content) */
[data-skin="pixel"] .px-panel--deep {
  background: var(--bg-deep);
  box-shadow: inset 4px 4px 0 0 oklch(0 0 0 / 0.25);
}

/* Panel title plate — sits on the top border */
[data-skin="pixel"] .px-plate {
  position: absolute;
  top: -14px;
  left: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 7px 10px;
  border: 3px solid var(--rule-bright);
  box-shadow: 3px 3px 0 0 var(--px-shadow);
}
[data-skin="pixel"] .px-plate--spot { background: var(--spot); }

/* Dedicated pixel button (for new markup; .btn reskin covers legacy) */
[data-skin="pixel"] .px-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 3px solid var(--rule-bright);
  box-shadow: 4px 4px 0 0 var(--px-shadow);
  padding: 12px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: none;
}
[data-skin="pixel"] .px-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--px-shadow);
}
[data-skin="pixel"] .px-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--px-shadow);
}
[data-skin="pixel"] .px-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
[data-skin="pixel"] .px-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
[data-skin="pixel"] .px-btn--primary:hover { color: var(--on-accent); }

/* HP/XP bar — metric visualization */
[data-skin="pixel"] .px-bar {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-pixel);
  font-size: 9px;
  text-transform: uppercase;
}
[data-skin="pixel"] .px-bar__label { color: var(--text-muted); }
[data-skin="pixel"] .px-bar__track {
  height: 16px;
  border: 2px solid var(--rule-bright);
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, oklch(0 0 0 / 0.12) 8px 10px),
    var(--bg-deep);
  padding: 2px;
}
[data-skin="pixel"] .px-bar__fill {
  height: 100%;
  width: var(--val, 60%);
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, oklch(1 0 0 / 0.15) 8px 10px),
    var(--accent);
  transform-origin: left center;
  animation: px-fill 800ms steps(10) both;
}
[data-skin="pixel"] .px-bar__value { color: var(--text-dim); font-family: var(--font-crt); font-size: 20px; text-transform: none; }
[data-skin="pixel"] .px-bar--gold .px-bar__fill { background-color: var(--px-gold); background-image: repeating-linear-gradient(90deg, transparent 0 8px, oklch(1 0 0 / 0.15) 8px 10px); }
[data-skin="pixel"] .px-bar--xp .px-bar__fill { background-color: var(--px-xp); background-image: repeating-linear-gradient(90deg, transparent 0 8px, oklch(1 0 0 / 0.15) 8px 10px); }
[data-skin="pixel"] .px-bar--heart .px-bar__fill { background-color: var(--px-heart); background-image: repeating-linear-gradient(90deg, transparent 0 8px, oklch(1 0 0 / 0.15) 8px 10px); }

/* Dialogue box */
[data-skin="pixel"] .px-dialog {
  position: relative;
  background: var(--surface);
  border: 3px solid var(--rule-bright);
  box-shadow:
    inset 0 0 0 2px var(--bg),
    inset 0 0 0 5px var(--px-edge-light),
    6px 6px 0 0 var(--px-shadow);
  padding: calc(var(--s-6) + 5px);
}
[data-skin="pixel"] .px-dialog__name {
  position: absolute;
  top: -14px;
  left: 14px;
  background: var(--bg-deep);
  color: var(--accent);
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 3px solid var(--rule-bright);
}
[data-skin="pixel"] .px-dialog__text {
  font-family: var(--font-crt);
  font-size: 22px;
  line-height: 1.35;
  color: var(--text);
}
[data-skin="pixel"] .px-dialog__advance {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  animation: px-blink 1s steps(1) infinite;
}

/* Rubber stamp */
[data-skin="pixel"] .px-stamp {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--positive);
  border: 3px double var(--positive);
  padding: 8px 10px;
  transform: rotate(-4deg);
  opacity: 0.9;
}
[data-skin="pixel"] .px-stamp--gold { color: var(--px-gold); border-color: var(--px-gold); }
[data-skin="pixel"] .px-stamp--heart { color: var(--px-heart); border-color: var(--px-heart); }

/* Dither texture — checkerboard wash for headers/transitions */
[data-skin="pixel"] .px-dither {
  background-image: repeating-conic-gradient(
    color-mix(in oklch, var(--accent) 12%, transparent) 0% 25%,
    transparent 0% 50%
  );
  background-size: 4px 4px;
}

/* Coin — inline gold square glyph */
[data-skin="pixel"] .px-coin {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--px-gold);
  box-shadow: inset -2px -2px 0 0 var(--px-gold-deep);
  vertical-align: -1px;
  margin-right: 4px;
}

/* Ground strip — "you are standing in a level" floor */
[data-skin="pixel"] .px-ground {
  height: 24px;
  border-top: 3px solid var(--rule-bright);
  background:
    repeating-linear-gradient(90deg,
      var(--px-ground-a) 0 12px,
      color-mix(in oklch, var(--px-ground-a) 80%, black) 12px 24px) top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg,
      var(--px-ground-b) 0 24px,
      color-mix(in oklch, var(--px-ground-b) 82%, black) 24px 48px);
  image-rendering: pixelated;
}

/* CRT scanline overlay — opt-in via .px-crt on <body>; static, a11y-safe */
[data-skin="pixel"] .px-crt::after,
[data-skin="pixel"] body.px-crt::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background: repeating-linear-gradient(
    0deg,
    oklch(0 0 0 / 0.07) 0 1px,
    transparent 1px 3px
  );
}
[data-skin="pixel"][data-theme="light"] .px-crt::after,
[data-skin="pixel"][data-theme="light"] body.px-crt::after { opacity: 0.35; }

/* Photo frame — real photography sits in pixel frames, never pixelated */
[data-skin="pixel"] .px-frame {
  border: 3px solid var(--rule-bright);
  box-shadow: 6px 6px 0 0 var(--px-shadow);
  background: var(--surface);
  padding: var(--s-2);
}
[data-skin="pixel"] .px-frame img { display: block; width: 100%; image-rendering: auto; }

/* Blinking prompt (PRESS START etc.) */
[data-skin="pixel"] .px-blink { animation: px-blink 1s steps(1) infinite; }

/* Pixel text helpers */
[data-skin="pixel"] .px-type { font-family: var(--font-pixel); font-size: 10px; line-height: 1.7; text-transform: uppercase; letter-spacing: 0; }
[data-skin="pixel"] .px-crt-type { font-family: var(--font-crt); font-size: 22px; line-height: 1.3; }

/* ---------- 6. Motion ---------- */
@keyframes px-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes px-blink { 50% { opacity: 0; } }
@keyframes px-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
[data-skin="pixel"] .px-shake { animation: px-shake 240ms steps(2) 2; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="pixel"] .px-bar__fill { animation: none; }
  [data-skin="pixel"] .px-blink,
  [data-skin="pixel"] .px-dialog__advance { animation: none; }
  [data-skin="pixel"] .px-shake { animation: none; }
  [data-skin="pixel"] .btn:hover,
  [data-skin="pixel"] .px-btn:hover { transform: none; }
}

/* ============================================================
   Motion & world layer v2 — "animated and flowing".
   Pixel-native rules: continuous slow pans for atmosphere,
   steps() for everything object-like. px-motion.js adds .px-js
   to <html>; entrance states only engage when JS is present so
   no-JS visitors see the full page. Reduced motion = static
   scene, final frames.
   ============================================================ */

/* Sky drift — opt-in via .px-flow on <body class="grid-bg"> */
@keyframes px-drift-night {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -960px 320px, 0 0, 0 0; }
}
@keyframes px-drift-day {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -1200px 0, 0 0, 0 0; }
}
[data-skin="pixel"] body.px-flow.grid-bg::before,
[data-skin="pixel"] .px-flow .grid-bg::before {
  animation: px-drift-night 240s linear infinite;
}
[data-skin="pixel"][data-theme="light"] body.px-flow.grid-bg::before,
[data-skin="pixel"][data-theme="light"] .px-flow .grid-bg::before {
  animation: px-drift-day 180s linear infinite;
}

/* Scroll entrances — the .fade-up replacement.
   Add .px-in to a block; px-motion.js flips it to .px-in--go on
   intersection. Stagger with style="--px-in-delay: N" (N * 90ms). */
html.px-js [data-skin="pixel"] .px-in,
[data-skin="pixel"].px-js .px-in {
  opacity: 0;
  transform: translateY(8px);
}
[data-skin="pixel"].px-js .px-in--go,
html.px-js [data-skin="pixel"] .px-in--go {
  animation: px-in 360ms steps(3) both;
  animation-delay: calc(var(--px-in-delay, 0) * 90ms);
}
@keyframes px-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Bars wait for their entrance, then fill */
[data-skin="pixel"].px-js .px-in .px-bar__fill { animation-play-state: paused; }
[data-skin="pixel"].px-js .px-in--go .px-bar__fill { animation-play-state: running; }

/* Sprite life */
@keyframes px-spinx {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.25); }
}
[data-skin="pixel"] .px-spin { animation: px-spinx 1.4s steps(4) infinite; display: inline-block; }

@keyframes px-wave {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(-6deg); }
}
[data-skin="pixel"] .px-wave { animation: px-wave 1.8s steps(3) infinite; display: inline-block; transform-origin: bottom left; }

/* Mascot patrol — walks its container's width and back.
   Wrap a [data-mascot] in .px-patrol; tune with --px-patrol-dist/-dur. */
@keyframes px-patrol {
  0%      { transform: translateX(0) scaleX(1); }
  49%     { transform: translateX(var(--px-patrol-dist, 70vw)) scaleX(1); }
  50%     { transform: translateX(var(--px-patrol-dist, 70vw)) scaleX(-1); }
  99%     { transform: translateX(0) scaleX(-1); }
  100%    { transform: translateX(0) scaleX(1); }
}
[data-skin="pixel"] .px-patrol {
  display: inline-block;
  animation: px-patrol var(--px-patrol-dur, 36s) steps(160) infinite;
}

/* HUD counter tick-up target (px-motion.js animates textContent) */
[data-skin="pixel"] [data-px-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="pixel"] body.px-flow.grid-bg::before,
  [data-skin="pixel"] .px-flow .grid-bg::before { animation: none; }
  html.px-js [data-skin="pixel"] .px-in,
  [data-skin="pixel"].px-js .px-in { opacity: 1; transform: none; }
  [data-skin="pixel"].px-js .px-in--go { animation: none; }
  [data-skin="pixel"] .px-spin,
  [data-skin="pixel"] .px-wave,
  [data-skin="pixel"] .px-patrol { animation: none; }
}

/* ============================================================
   PIXEL v3 — "the WORLD + full sweep" foundation.
   Ships in Phase A (feat/px3-foundation). Contents:
     v3.1  Canonical .sec-h layout (pages delete local copies
           in Phase C — this block is a superset of them)
     v3.2  .sec-h--lite variant (pennant + title, small rhythm)
     v3.3  .px-close — bare ✕ close button (replaces "[ X ]")
     v3.4  World palette tokens (--px-world-*) — night + day
           + no-JS system fallback
     v3.5  Generic world keyframes (pw-flicker / pw-drift /
           pw-glint) + reduced-motion story
   Normative spec: docs/pixel-v2-spec.md § "Pixel v3".
   ============================================================ */

/* ---------- v3.1 Canonical section header layout ----------
   The 7 pages that re-declare .sec-h locally (tally, clementine,
   5 case studies) delete their copies in Phase C; until then their
   page <style> loads after this file and wins, so this is a safe
   drop-in. Superset of the common local declarations (flex /
   baseline / gap / rule / rhythm / top margin / hint autoslot). */
[data-skin="pixel"] .sec-h {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-bottom: var(--s-4);
  border-bottom: 3px solid var(--rule-bright);
  margin-bottom: var(--s-7);
}
[data-skin="pixel"] .sec-h__title { margin: 0; }
[data-skin="pixel"] .sec-h__hint {
  margin-left: auto;
  text-align: right;
}
@media (max-width: 540px) {
  [data-skin="pixel"] .sec-h__hint { display: none; }
}

/* ---------- v3.2 Lite header — pennant + title only ----------
   For the headerless pages (voting, posts, gallery, password,
   404): smaller rhythm, badge optional. Works standalone
   (class="sec-h--lite") or as a modifier (class="sec-h sec-h--lite"):
   the full layout is restated so it never depends on .sec-h. */
[data-skin="pixel"] .sec-h--lite {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 3px solid var(--rule-bright);
  margin-bottom: var(--s-5);
}

/* ---------- v3.3 .px-close — bare ✕ close control ----------
   Replaces every "[ X ]" / "[ ✕ ]" bracket close (V8). Markup:
   <button class="px-close" aria-label="Close">✕</button> */
[data-skin="pixel"] .px-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface);
  border: 2px solid var(--rule-bright);
  box-shadow: 3px 3px 0 0 var(--px-shadow);
  cursor: pointer;
  transition: none;
}
[data-skin="pixel"] .px-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}
[data-skin="pixel"] .px-close:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--px-shadow);
}
[data-skin="pixel"] .px-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- v3.4 World palette tokens ----------
   The #px-world backdrop layers (Phase B) paint with these —
   fill="var(--px-world-*)" in inline SVG. Stepped values lighten
   toward the viewer so silhouettes read against --bg.
   Night Stage: navies over --bg oklch(0.14 …); glow = window/
   crystal gold. */
[data-skin="pixel"] {
  --px-world-sky-hi: oklch(0.19 0.034 262);
  --px-world-far:    oklch(0.225 0.038 258);
  --px-world-mid:    oklch(0.265 0.040 256);
  --px-world-near:   oklch(0.305 0.044 254);
  --px-world-glow:   var(--px-gold);
}
/* Overworld Day: soft greens/creams against the cream --bg;
   glow steps down to deep gold so lit pixels still read.
   Values stay light enough that content scrolling over the
   horizon keeps its contrast. */
[data-skin="pixel"][data-theme="light"] {
  --px-world-sky-hi: oklch(0.90 0.035 210);
  --px-world-far:    oklch(0.80 0.055 175);
  --px-world-mid:    oklch(0.70 0.075 165);
  --px-world-near:   oklch(0.62 0.080 155);
  --px-world-glow:   var(--px-gold-deep);
}
/* No-JS fallback — mirror of the semantic-token fallback above. */
@media (prefers-color-scheme: light) {
  [data-skin="pixel"]:not([data-theme]) {
    --px-world-sky-hi: oklch(0.90 0.035 210);
    --px-world-far:    oklch(0.80 0.055 175);
    --px-world-mid:    oklch(0.70 0.075 165);
    --px-world-near:   oklch(0.62 0.080 155);
    --px-world-glow:   var(--px-gold-deep);
  }
}

/* ---------- v3.5 Generic world keyframes ----------
   pw-flicker — lit-window flicker (steps(1), brief opacity dip);
   pw-drift   — cloud drift across the scene (pair with a long
                duration, e.g. 240s linear infinite);
   pw-glint   — 2-frame save-crystal glint. */
@keyframes pw-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%, 96%      { opacity: 0.25; }
}
@keyframes pw-drift {
  from { transform: translateX(var(--pw-drift-from, -20%)); }
  to   { transform: translateX(var(--pw-drift-to, 120%)); }
}
@keyframes pw-glint {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
[data-skin="pixel"] .pw-flicker { animation: pw-flicker 6s steps(1) infinite; }
[data-skin="pixel"] .pw-drift   { animation: pw-drift var(--pw-drift-dur, 240s) linear infinite; }
[data-skin="pixel"] .pw-glint   { animation: pw-glint 2.4s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="pixel"] .pw-flicker,
  [data-skin="pixel"] .pw-drift,
  [data-skin="pixel"] .pw-glint { animation: none; }
}
