/* ============================================================
   Pixel theme — the Legion Comps pixel design system
   (.claude/skills/legion-comps-design-system, "Dark crypt") mapped onto the
   site's semantic tokens, plus a small component layer at the end for what
   tokens alone cannot draw: notched frames, segmented meters, stepped motion.
   See docs/site-theming.md.
   ============================================================ */

/* Jersey 15 — SIL Open Font License 1.1 (fonts.google.com/specimen/Jersey+15).
   One weight only: never bold it (font-synthesis below stops faux bold).
   Digits and £ are clean, so prices, counts and countdowns go pixel too.
   size-adjust lifts Jersey's short caps (0.556em) to about Inter's (0.728em),
   so every heading sized by a Tailwind utility or an inline style reads at
   classic's size without a per-template override. */
@font-face {
  font-family: 'Jersey 15';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 125%;
  src: url('../../fonts/jersey-15-latin.woff2') format('woff2');
}

:root[data-theme="pixel"] {
  color-scheme: dark;
  font-synthesis-weight: none;
}

/* ---- Colour: "Dark crypt". Page and panel are both slate; a panel is the
   same ground as the page, set apart by its frame rather than a darker fill. ---- */
:root[data-theme="pixel"] {
  /* surfaces — page */
  --surface-page:    #101019;
  --surface-card:    #16161f;
  --surface-raised:  #23242f;
  --surface-sunken:  #0b0b12;
  --surface-inverse: #d49c21;
  --surface-overlay: rgba(5, 5, 8, 0.72);
  /* the design system's 16px gold grid backdrop (.lc-grid-bg) */
  --surface-page-texture:
    repeating-linear-gradient(0deg, rgba(212, 156, 33, 0.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(212, 156, 33, 0.05) 0 1px, transparent 1px 16px);
  /* surfaces — panel */
  --surface-dark:        #101019;
  --surface-dark-raised: #16161f;
  --surface-dark-card:   #16161f;
  --surface-dark-deep:   #0b0b12;
  --surface-dark-tint:   rgba(255, 255, 255, 0.05);
  --surface-scrim:       rgba(5, 5, 8, 0.72);

  /* borders — decorative edges are slate-700; control edges hold 3:1 */
  --border-soft:        #2e3040;
  --border-strong:      #70738c;
  --border-dark:        #2e3040;
  --border-dark-strong: #70738c;
  --border-dark-soft:   #23242f;
  --border-default:     #2e3040;

  /* text — page */
  --text-display:   #f3f5f8;
  --text-heading:   #f3f5f8;
  --text-strong:    #f3f5f8;
  --text-body:      #ced3db;
  --text-secondary: #9ea3ad;
  --text-muted:     #9ea3ad;
  --text-disabled:  #70738c;

  /* text — panel */
  --text-on-dark:       #f3f5f8;
  --text-on-dark-body:  #ced3db;
  --text-on-dark-muted: #9ea3ad;
  --text-on-dark-faint: #9ea3ad;
  --on-dark-body:       #ced3db;

  /* text — on a filled accent */
  --text-on-gold:    #191820;
  --text-on-inverse: #191820;
  --text-on-action:  #ffffff;
  --text-on-status:  #0b0b12;

  /* accent — gold: #d49c21 is a fill only; gold text is gold-400 */
  --accent-gold:              #d49c21;
  --accent-gold-strong:       #b8902f;
  --accent-gold-ink:          #e2c265;
  --accent-gold-ink-strong:   #efd58e;
  --accent-gold-on-dark:      #e2c265;
  --accent-gold-on-dark-soft: #efd58e;
  --accent-gold-bright:       #e2c265;
  --accent-gold-pale:         #efd58e;
  --accent-gold-fill:         #31291f;
  --accent-gold-tint:         rgba(212, 156, 33, 0.12);
  --accent-gold-border:       rgba(212, 156, 33, 0.40);
  --accent-gold-glow-border:  rgba(212, 156, 33, 0.65);

  /* accent — action: crimson fill, crimson-text for words */
  --accent-action:         #ae0017;
  --accent-action-hover:   #8a0012;
  --accent-action-ink:     #f07a89;
  --accent-action-deep:    #8a0012;
  --accent-action-on-dark: #f07a89;
  --accent-action-text:        #f07a89;
  --accent-action-text-strong: #f07a89;
  --accent-action-fill:    #35242e;
  --accent-action-tint:    rgba(240, 122, 137, 0.14);
  --accent-action-border:  rgba(240, 122, 137, 0.40);

  /* status */
  --status-success:         #57c489;
  --status-success-ink:     #57c489;
  --status-success-on-dark: #57c489;
  --status-success-tint:    rgba(87, 196, 137, 0.12);
  --status-success-fill:    #1f2e2e;
  --status-success-border:  rgba(87, 196, 137, 0.40);

  --status-warning:         #e8a94a;
  --status-warning-ink:     #e8a94a;
  --status-warning-on-dark: #e8a94a;
  --status-warning-tint:    rgba(232, 169, 74, 0.12);
  --status-warning-fill:    #332b25;
  --status-warning-border:  rgba(232, 169, 74, 0.40);
  --status-warning-strong:  #e8a94a;

  --status-danger:          #f07a89;
  --status-danger-ink:      #f07a89;
  --status-danger-on-dark:  #f07a89;
  --status-danger-tint:     rgba(240, 122, 137, 0.14);
  --status-danger-fill:     #35242e;
  --status-danger-border:   rgba(240, 122, 137, 0.40);

  /* arcane fills stay at arcane-text brightness: pixel's --text-on-status is
     dark, and #0b0b12 on #a99ce3 is 8:1 */
  --status-arcane:            #a99ce3;
  --status-arcane-ink:        #a99ce3;
  --status-arcane-on-dark:    #a99ce3;
  --status-arcane-tint:       rgba(169, 156, 227, 0.14);
  --status-arcane-fill:       #2b293a;
  --status-arcane-border:     rgba(169, 156, 227, 0.40);
  --status-arcane-dark-tint:  rgba(169, 156, 227, 0.22);
  --status-arcane-on-dark-hi: #a99ce3;

  /* off-palette accents; media overlays stay dark glass and keep classic values,
     except the Instant badge, whose fill goes bright like every pixel status fill */
  --media-badge-arcane:    rgba(169, 156, 227, 0.92);
  --status-instant:        #a99ce3;
  --status-info:           #a99ce3;
  --status-success-bright: #57c489;
  --status-success-soft:   #57c489;
  --status-live:           #57c489;
  --text-on-success:       #0b0b12;
  --text-on-dark-warm:     #f4efe4;
  --surface-dark-track:    #2e3040;
  --surface-avatar:        #9ea3ad;
  --accent-gold-glow:      #d49c21;
  --accent-gold-soft:      #31291f;
  --accent-action-glow:    #8a0012;
  --surface-backdrop:      #050508;

  --focus-ring:      #e2c265;
  --focus-ring-dark: #e2c265;

  /* pixel-only: the frame colours the component layer below draws with */
  --px-frame:     #3e4054;
  --px-frame-hi:  #4c4f66;
  --px-frame-lo:  #050508;
  --px-gold-edge: #836927;
}

/* ---- Shape & depth: corners notch, never round; shadows are hard 4px steps.
   The raw scales are re-pointed too because some components use them directly
   (and skins re-point --shadow-card to --shadow-sm). Circles (50%) stay round.
   A card's frame is four 4px box-shadows that leave the corners empty — the
   notch — plus a drop of frame-lo, exactly as the design system's .lc-frame. ---- */
:root[data-theme="pixel"] {
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-pill: 0;

  --shadow-xs:   0 4px 0 #050508;
  --shadow-sm:   4px 4px 0 #050508;
  --shadow-md:   4px 4px 0 #050508;
  --shadow-lg:   8px 8px 0 #050508;
  --shadow-xl:   8px 8px 0 #050508;
  --shadow-dark: 8px 8px 0 #050508;

  --ring-gold:      inset 0 0 0 2px #e2c265;
  --ring-crimson:   inset 0 0 0 2px #f07a89;
  --glow-legendary: 0 0 0 1px rgba(212, 156, 33, 0.6), 0 0 28px rgba(212, 156, 33, 0.45), 0 0 60px rgba(212, 156, 33, 0.2);

  --shadow-card:
    0 -4px 0 0 #3e4054, 0 4px 0 0 #3e4054, -4px 0 0 0 #3e4054, 4px 0 0 0 #3e4054,
    8px 12px 0 0 #050508;
  --shadow-card-hover:
    0 -4px 0 0 #4c4f66, 0 4px 0 0 #4c4f66, -4px 0 0 0 #4c4f66, 4px 0 0 0 #4c4f66,
    8px 12px 0 0 #050508;
  --shadow-btn:       4px 4px 0 0 #050508;
  --shadow-btn-hover: 4px 4px 0 0 #050508;
  --shadow-modal:
    0 -4px 0 0 #3e4054, 0 4px 0 0 #3e4054, -4px 0 0 0 #3e4054, 4px 0 0 0 #3e4054,
    8px 8px 0 0 #050508;
  --shadow-bar-up: 0 -4px 0 #3e4054;
  --bevel: 0 0 0 0 transparent;

  /* Motion snaps in steps, like a sprite, rather than easing. Every site
     transition reads these two curves, so this is the whole change. */
  --ease-out:     steps(3, end);
  --ease-in-out:  steps(4, end);
  --dur-fast:     80ms;
  --dur-base:     120ms;
  --dur-slow:     200ms;
  --dur-entrance: 240ms;
  --fa-animation-timing: steps(8, end);
}

/* ---- Type: Jersey 15 for display, labels, buttons, badges and digits; Inter
   keeps paragraphs, forms and compliance copy. The sizes below are the design
   system's px sizes divided by the 125% size-adjust, so they draw at its
   sizes: button 22 (17.6 here), card title 26, badge 16. Nothing in Jersey
   draws under 16px, i.e. no Jersey token under 12.8px. ---- */
:root[data-theme="pixel"] {
  --font-display: 'Jersey 15', 'Inter', system-ui, sans-serif;
  --font-label:   'Jersey 15', 'Inter', system-ui, sans-serif;
  --tracking-display: 0;
  --tracking-tight:   0;
  --tracking-wider:   0.04em;
  --tracking-widest:  0.06em;

  --text-fine:       12px;
  --text-kicker:     12px;
  --text-caption:    13px;
  --text-meta:       14px;
  --text-lead-sm:    16px;
  --text-card-title: 20.8px;
  --fw-card-title:   400;

  --hero-title-size:   clamp(2.25rem, 5.6vw, 4rem);
  --hero-title-weight: 400;

  --btn-font:     var(--font-label);
  --btn-weight:   400;
  --btn-case:     uppercase;
  --btn-tracking: 0.04em;
  --btn-size:     17.6px;
  --btn-size-sm:  14.4px;
  --btn-size-lg:  22.4px;

  --label-size:     14.4px;
  --label-weight:   400;
  --label-tracking: 0.08em;
  --statbar-label-size:     12.8px;
  --statbar-label-tracking: 0.08em;
  --chip-size:     16px;
  --chip-size-sm:  14.4px;
  --chip-weight:   400;
  --chip-case:     uppercase;
  --chip-tracking: 0.04em;
  --badge-size:     12.8px;
  --badge-tracking: 0.06em;
  --minicard-title-size:   17.6px;
  --minicard-title-weight: 400;

  --countdown-font:    var(--font-label);
  --countdown-size-sm: 14.4px;
  --countdown-size:    16px;
  --countdown-size-lg: 19.2px;
}
/* Keep the two hero buttons side by side on a phone. */
@media (max-width: 640px) {
  :root[data-theme="pixel"] {
    --btn-size-lg: 19.2px;
  }
}
@media (max-width: 480px) {
  :root[data-theme="pixel"] {
    --hero-cta-size: 17.6px;
    --hero-cta-pad-x: 1rem;
  }
}

/* ============================================================
   Component layer — ports of the design system's components onto the
   site's own classes. Every rule is wrapped in :where() so it carries the
   same weight as the base rule it replaces and wins only by loading later;
   a seasonal skin's .lc-skin-* rules still beat it and keep their own look.
   Colours come from the semantic tokens above, never raw hex.
   ============================================================ */

/* ---- Buttons: a 4px notched frame drawn inside the box (so the button
   takes no extra room and the focus outline is never clipped), a light top
   edge and dark bottom edge on the face, and a hard drop shadow. Pressing
   drops the button onto its shadow in two steps. ---- */
:where(:root[data-theme="pixel"]) .lc-btn {
  --pf-bg:   var(--surface-raised);
  --pf-fg:   var(--text-strong);
  --pf-edge: var(--border-strong);
  --pf-hi:   rgba(255, 255, 255, 0.18);
  --pf-lo:   rgba(0, 0, 0, 0.28);
  min-height: 44px;
  padding: 10px 24px;
  border: 0;
  border-radius: 0;
  color: var(--pf-fg);
  background:
    linear-gradient(var(--pf-hi), var(--pf-hi)) 4px 4px / calc(100% - 8px) 4px no-repeat,
    linear-gradient(var(--pf-lo), var(--pf-lo)) 4px calc(100% - 4px) / calc(100% - 8px) 4px no-repeat,
    linear-gradient(var(--pf-bg), var(--pf-bg)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
    linear-gradient(var(--pf-edge), var(--pf-edge)) 4px 0 / calc(100% - 8px) 100% no-repeat,
    linear-gradient(var(--pf-edge), var(--pf-edge)) 0 4px / 100% calc(100% - 8px) no-repeat;
  box-shadow: var(--shadow-btn);
  transition: transform 80ms steps(2, end);
}
:where(:root[data-theme="pixel"]) .lc-btn:hover {
  transform: none;
  box-shadow: var(--shadow-btn-hover);
}
:where(:root[data-theme="pixel"]) .lc-btn:active {
  transform: translateY(4px);
  box-shadow: none;
}
:where(:root[data-theme="pixel"]) .lc-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}
:where(:root[data-theme="pixel"]) .lc-btn-sm { min-height: 36px; padding: 6px 16px; }
:where(:root[data-theme="pixel"]) .lc-btn-lg { min-height: 56px; padding: 12px 32px; }

:where(:root[data-theme="pixel"]) .lc-btn-primary {
  --pf-bg: var(--accent-action); --pf-fg: var(--text-on-action); --pf-edge: var(--accent-action-hover);
}
:where(:root[data-theme="pixel"]) .lc-btn-primary:hover { --pf-bg: var(--accent-action-hover); }
:where(:root[data-theme="pixel"]) .lc-btn-gold {
  --pf-bg: var(--accent-gold); --pf-fg: var(--text-on-gold); --pf-edge: var(--px-gold-edge);
  --pf-hi: rgba(255, 255, 255, 0.35);
}
:where(:root[data-theme="pixel"]) .lc-btn-gold:hover { --pf-bg: var(--accent-gold-bright); }
:where(:root[data-theme="pixel"]) .lc-btn-secondary:hover { --pf-bg: var(--surface-card); }
:where(:root[data-theme="pixel"]) .lc-btn-dark {
  --pf-bg: var(--surface-dark-card); --pf-fg: var(--text-on-dark); --pf-edge: var(--border-dark-strong);
}
:where(:root[data-theme="pixel"]) .lc-btn-dark:hover { --pf-bg: var(--surface-raised); }
:where(:root[data-theme="pixel"]) .lc-btn-ghost {
  --pf-bg: transparent; --pf-fg: var(--accent-gold-ink);
  --pf-edge: transparent; --pf-hi: transparent; --pf-lo: transparent;
  box-shadow: none;
}
:where(:root[data-theme="pixel"]) .lc-btn-ghost:hover { --pf-bg: var(--surface-raised); box-shadow: none; }
:where(:root[data-theme="pixel"]) .lc-btn:disabled,
:where(:root[data-theme="pixel"]) .lc-btn[aria-disabled="true"] {
  --pf-bg: var(--surface-sunken); --pf-fg: var(--text-muted); --pf-edge: var(--border-default);
  --pf-hi: transparent; --pf-lo: transparent;
  opacity: 1;
  transform: none;
  box-shadow: none;
}
/* A skin paints its own button fill over the sunken one, so under a skin the
   disabled state falls back to the base fade. */
:where(:root[data-theme="pixel"]) body[class*="lc-skin-"] :is(.lc-btn:disabled, .lc-btn[aria-disabled="true"]) {
  opacity: 0.5;
}

/* ---- Ticket meter: the HUD bar. A notched frame round a 12px track, cut
   into 12px segments by an overlay, so a template's inline fill colour on
   the <span> still shows through. The fill snaps along in steps. ---- */
:where(:root[data-theme="pixel"]) .lc-progress {
  position: relative;
  height: 20px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--surface-dark-track), var(--surface-dark-track)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
    linear-gradient(var(--border-strong), var(--border-strong)) 4px 0 / calc(100% - 8px) 100% no-repeat,
    linear-gradient(var(--border-strong), var(--border-strong)) 0 4px / 100% calc(100% - 8px) no-repeat;
}
:where(:root[data-theme="pixel"]) .lc-progress::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--surface-sunken) 12px 16px);
  pointer-events: none;
}
:where(:root[data-theme="pixel"]) .lc-progress > span {
  border-radius: 0;
  background: var(--accent-gold);
  transition: width var(--dur-slow) steps(6, end);
}

/* ---- Badges: pixel caps in a 2px notched frame of the badge's own colour. ---- */
:where(:root[data-theme="pixel"]) .lc-badge {
  padding: 2px 8px;
  font-family: var(--font-label);
  font-weight: 400;
  line-height: 1;
  border: 0;
  border-radius: 0;
  box-shadow: 0 -2px 0 0 currentColor, 0 2px 0 0 currentColor, -2px 0 0 0 currentColor, 2px 0 0 0 currentColor;
}
:where(:root[data-theme="pixel"]) .lc-badge-legendary {
  box-shadow:
    0 -2px 0 0 currentColor, 0 2px 0 0 currentColor, -2px 0 0 0 currentColor, 2px 0 0 0 currentColor,
    0 0 28px rgba(212, 156, 33, 0.45);
}

/* ---- Fields: sunken well in a 2px notched frame of the control-edge colour;
   gold frame plus outline on focus. Text stays Inter. ---- */
:where(:root[data-theme="pixel"]) .lc-input {
  background-color: var(--surface-sunken);
  border-color: transparent;
  border-radius: 0;
  box-shadow: 0 -2px 0 0 var(--border-strong), 0 2px 0 0 var(--border-strong), -2px 0 0 0 var(--border-strong), 2px 0 0 0 var(--border-strong);
}
:where(:root[data-theme="pixel"]) .lc-input:focus {
  border-color: transparent;
  box-shadow: 0 -2px 0 0 var(--focus-ring), 0 2px 0 0 var(--focus-ring), -2px 0 0 0 var(--focus-ring), 2px 0 0 0 var(--focus-ring);
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

/* ---- Cards: the notched frame lives in --shadow-card, so the CSS border
   steps aside (kept at its width so layout doesn't move). The hover lift is
   a whole 4px step. ---- */
:where(:root[data-theme="pixel"]) .lc-card,
:where(:root[data-theme="pixel"]) .lc-compcard,
:where(:root[data-theme="pixel"]) .lc-compcard-dark {
  border-color: transparent;
}
:where(:root[data-theme="pixel"]) .lc-compcard-dark { box-shadow: var(--shadow-card); }
:where(:root[data-theme="pixel"]) .lc-card-hover:hover,
:where(:root[data-theme="pixel"]) .lc-compcard:hover {
  transform: translateY(-4px);
  border-color: transparent;
}
:where(:root[data-theme="pixel"]) .lc-compcard-dark:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 -4px 0 0 var(--accent-gold), 0 4px 0 0 var(--accent-gold), -4px 0 0 0 var(--accent-gold), 4px 0 0 0 var(--accent-gold),
    8px 12px 0 0 var(--px-frame-lo);
}
/* ...but a card's accent bar keeps its colour, hovered or not. */
:where(:root[data-theme="pixel"]) :is(.lc-accent-crimson, .lc-accent-crimson:hover) { border-top-color: var(--accent-action); }
:where(:root[data-theme="pixel"]) :is(.lc-accent-gold, .lc-accent-gold:hover)       { border-top-color: var(--accent-gold); }
:where(:root[data-theme="pixel"]) :is(.lc-accent-arcane, .lc-accent-arcane:hover)   { border-top-color: var(--status-arcane); }
:where(:root[data-theme="pixel"]) a.lc-compcard-dark:focus-visible {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

/* ---- Chips: the design system's quick-pick — raised, 2px notched frame;
   the selected one fills gold. ---- */
:where(:root[data-theme="pixel"]) .lc-chip {
  background: var(--surface-raised);
  color: var(--text-strong);
  border-color: transparent;
  box-shadow: 0 -2px 0 0 var(--border-strong), 0 2px 0 0 var(--border-strong), -2px 0 0 0 var(--border-strong), 2px 0 0 0 var(--border-strong);
}
:where(:root[data-theme="pixel"]) .lc-chip:hover { border-color: transparent; background: var(--surface-card); }
:where(:root[data-theme="pixel"]) .lc-chip-active,
:where(:root[data-theme="pixel"]) .lc-chip-active:hover {
  background: var(--accent-gold);
  color: var(--text-on-gold);
  border-color: transparent;
  box-shadow: 0 -2px 0 0 var(--px-gold-edge), 0 2px 0 0 var(--px-gold-edge), -2px 0 0 0 var(--px-gold-edge), 2px 0 0 0 var(--px-gold-edge);
}

/* ---- Nav: a frame-coloured 4px rule underneath; the current page gets the
   design system's gold underline. ---- */
:where(:root[data-theme="pixel"]) .lc-nav {
  border-bottom: 0;
  box-shadow: 0 4px 0 0 var(--px-frame);
}
:where(:root[data-theme="pixel"]) .lc-navlink-active {
  font-weight: 400;
  box-shadow: inset 0 -4px 0 0 var(--accent-gold);
}

/* The page-hero eyebrow and the basket dropdown's heading are sized from
   --text-2xs / text-xs, which Inter shares; give the pixel face the label size. */
:where(:root[data-theme="pixel"]) .lc-page-hero .lc-eyebrow-gold,
:where(:root[data-theme="pixel"]) .lc-basket-header .font-display {
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
}

/* ---- Dashboard menu: its page style (loaded later, raw 0.6rem radius) would
   round these, so the frame-never-rounds rule needs real specificity here.
   No skin styles them. ---- */
:root[data-theme="pixel"] .dash-action { border-radius: 0; }

/* ---- Art: the how-it-works warrior is a black silhouette that vanishes on the
   dark canvas, so pixel swaps in a lit sprite. It is 97x120 and drawn at exactly
   2x so every pixel stays square; no fade mask, or the sword tip would go. ---- */
:root[data-theme="pixel"] .lc-howitworks-warrior {
  background-image: url('../../images/warrior-pixel.webp');
  width: 194px;
  aspect-ratio: 97 / 120;
  left: 8px;
  opacity: 1;
  image-rendering: pixelated;
  mask-image: none;
  -webkit-mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(:root[data-theme="pixel"]) .lc-btn,
  :where(:root[data-theme="pixel"]) .lc-btn:active { transition: none; transform: none; }
}