/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · ONE design system for every surface
   (arcade · PREDICT · SPIRE SIEGE · wager · PXL launch)

   Rules every page follows:
   · Colours come ONLY from these tokens. Surfaces are SOLID (no see-through
     panels over textured backgrounds) so every contrast ratio is fixed:
     body text ≥ 7:1, secondary ≥ 4.5:1, large numbers ≥ 4.5:1.
   · The house look stays: heavy ink outlines, hard offset shadows, neon
     accents, Inter 900 headings. Polish comes from spacing, rhythm and
     restraint — not from more effects.
   · Spacing on a 4px grid; type on one scale; radius and shadow on one scale.
   · Every interactive thing: visible focus ring, ≥ 44px touch target on
     phones, hover + active + disabled states.
   Load order: pu-design.css FIRST, then the surface's own stylesheet, which
   may only use these tokens (and add components), never redefine them.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* surfaces · darkest → lightest */
  --pu-bg:#0d0a16;          /* page */
  --pu-surface:#1a1430;     /* cards, panels */
  --pu-surface-2:#241c40;   /* rows inside cards, inputs on dark */
  --pu-surface-3:#2f2552;   /* hover, selected rows */
  --pu-bar:#120d20;         /* top bar, nav, footer */
  --pu-line:#4b3d78;        /* quiet borders on dark (decorative) */
  --pu-ink:#0b0710;         /* outlines, text on light fills */
  --pu-paper:#fdf8ee;       /* light chips / inputs */
  --pu-paper-2:#f3ecdc;

  /* text on dark surfaces */
  --pu-text:#f7f3ff;        /* primary   ≥ 13:1 on surface */
  --pu-text-2:#d6cbef;      /* secondary ≥ 9:1  */
  --pu-text-3:#b3a6d6;      /* tertiary  ≥ 6:1  */

  /* accents — readable as TEXT on dark and as FILL under ink text */
  --pu-hot:#ff6b9d;  --pu-cool:#4fe8ff; --pu-sun:#ffd84d;
  --pu-slime:#93f07a; --pu-violet:#b994ff; --pu-orange:#ffad5c;
  --pu-yes:#a3e386;  --pu-no:#ffa3b3;   /* PREDICT pair */
  --pu-danger:#ff8a8a; --pu-ok:#93f07a; --pu-warn:#ffd84d;
  --pu-focus:#ffd84d;

  /* type */
  --pu-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pu-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pu-fs-xs:12px; --pu-fs-sm:13.5px; --pu-fs-md:15px; --pu-fs-lg:18px;
  --pu-fs-xl:22px; --pu-fs-2xl:28px; --pu-fs-3xl:36px;
  --pu-lh:1.55; --pu-lh-tight:1.15;

  /* rhythm */
  --pu-1:4px; --pu-2:8px; --pu-3:12px; --pu-4:16px; --pu-5:20px; --pu-6:24px; --pu-8:32px; --pu-10:40px; --pu-12:48px;
  --pu-r-sm:8px; --pu-r:12px; --pu-r-lg:16px; --pu-r-xl:20px; --pu-r-pill:999px;
  --pu-pop-0:2px 2px 0 var(--pu-ink); --pu-pop-1:4px 4px 0 var(--pu-ink); --pu-pop-2:6px 6px 0 var(--pu-ink);
  --pu-border:3px solid var(--pu-ink);
  --pu-gut:16px; --pu-max:1400px; --pu-top-h:60px;
  --pu-ease:cubic-bezier(.2,.8,.2,1); --pu-t:.16s;
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pu{margin:0;background:var(--pu-bg);color:var(--pu-text);font:var(--pu-fs-md)/var(--pu-lh) var(--pu-font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.pu h1,.pu h2,.pu h3{font-weight:900;letter-spacing:-.02em;line-height:var(--pu-lh-tight);color:var(--pu-text);margin:0 0 var(--pu-3)}
.pu h1{font-size:var(--pu-fs-2xl)} .pu h2{font-size:var(--pu-fs-xl)} .pu h3{font-size:var(--pu-fs-lg)}
.pu p{margin:0 0 var(--pu-3);color:var(--pu-text-2)}
/* :where() keeps this at element specificity so a surface's own .card / .chip link colours win */
:where(.pu) a{color:var(--pu-sun);text-underline-offset:3px}
.pu small{font-size:var(--pu-fs-xs)}
.pu :focus-visible{outline:3px solid var(--pu-focus);outline-offset:2px;border-radius:4px}
.pu ::selection{background:var(--pu-violet);color:var(--pu-ink)}
.pu-wrap{max-width:var(--pu-max);margin:0 auto;padding:0 var(--pu-gut)}
.pu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pu-skip{position:absolute;left:var(--pu-2);top:-60px;z-index:1000;background:var(--pu-sun);color:var(--pu-ink);
  font-weight:900;padding:var(--pu-2) var(--pu-4);border:var(--pu-border);border-radius:var(--pu-r-sm)}
.pu-skip:focus{top:var(--pu-2)}

/* ── components ── */
.pu-card{background:var(--pu-surface);border:var(--pu-border);border-radius:var(--pu-r-lg);box-shadow:var(--pu-pop-1);padding:var(--pu-4)}
.pu-card--flat{box-shadow:none}
.pu-row{background:var(--pu-surface-2);border-radius:var(--pu-r);padding:var(--pu-3)}
.pu-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--pu-2);min-height:40px;padding:0 var(--pu-4);
  font:900 var(--pu-fs-sm)/1 var(--pu-font);letter-spacing:.02em;color:var(--pu-ink);background:var(--pu-paper-2);
  border:var(--pu-border);border-radius:var(--pu-r);box-shadow:var(--pu-pop-0);cursor:pointer;text-decoration:none;
  transition:transform var(--pu-t) var(--pu-ease),box-shadow var(--pu-t) var(--pu-ease)}
.pu-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--pu-pop-1)}
.pu-btn:active{transform:translate(1px,1px);box-shadow:none}
.pu-btn[disabled],.pu-btn[aria-disabled=true]{background:#6e6880;color:#f1edf8;box-shadow:none;transform:none;cursor:not-allowed}
.pu-btn--primary{background:var(--pu-sun)} .pu-btn--hot{background:var(--pu-hot)} .pu-btn--cool{background:var(--pu-cool)}
.pu-btn--ok{background:var(--pu-slime)} .pu-btn--ghost{background:transparent;color:var(--pu-text);border-color:var(--pu-line);box-shadow:none}
.pu-btn--sm{min-height:32px;padding:0 var(--pu-3);font-size:var(--pu-fs-xs)}
.pu-btn--lg{min-height:48px;padding:0 var(--pu-6);font-size:var(--pu-fs-md)}
.pu-chip{display:inline-flex;align-items:center;gap:var(--pu-1);min-height:32px;padding:0 var(--pu-3);border-radius:var(--pu-r-pill);
  font:800 var(--pu-fs-xs)/1 var(--pu-font);color:var(--pu-text);background:var(--pu-surface);border:2px solid var(--pu-line);cursor:pointer}
.pu-chip[aria-pressed=true],.pu-chip.is-on{background:var(--pu-sun);color:var(--pu-ink);border-color:var(--pu-ink)}
.pu-badge{display:inline-block;padding:2px var(--pu-2);border-radius:var(--pu-r-sm);font:900 11px/1.4 var(--pu-font);letter-spacing:.04em;
  text-transform:uppercase;color:var(--pu-ink);background:var(--pu-cool);border:2px solid var(--pu-ink)}
.pu-input,.pu select,.pu textarea{min-height:40px;padding:0 var(--pu-3);font:600 var(--pu-fs-md) var(--pu-font);color:var(--pu-ink);
  background:var(--pu-paper);border:2.5px solid var(--pu-ink);border-radius:var(--pu-r)}
.pu textarea{padding:var(--pu-2) var(--pu-3)}
.pu-label{display:block;font:800 var(--pu-fs-sm)/1.3 var(--pu-font);color:var(--pu-text-2);margin-bottom:var(--pu-1)}
.pu-help{font-size:var(--pu-fs-xs);color:var(--pu-text-3)}
.pu-note{border:2px dashed var(--pu-warn);border-radius:var(--pu-r);padding:var(--pu-3) var(--pu-4);background:#2a2412;color:var(--pu-text)}
.pu-error{color:var(--pu-danger);font-weight:700}
.pu-empty{padding:var(--pu-8) var(--pu-4);text-align:center;color:var(--pu-text-3);font-weight:700}
.pu-skel{background:linear-gradient(90deg,var(--pu-surface-2),var(--pu-surface-3),var(--pu-surface-2));background-size:200% 100%;
  animation:puSkel 1.2s linear infinite;border-radius:var(--pu-r-sm)}
@keyframes puSkel{to{background-position:-200% 0}}

/* ── the ONE site bar (rendered by pu-nav.js) ── */
.pu-sitebar{position:sticky;top:0;z-index:300;background:var(--pu-bar);border-bottom:3px solid var(--pu-ink);
  box-shadow:0 3px 0 rgba(0,0,0,.35)}
.pu-sitebar-in{display:flex;align-items:center;gap:var(--pu-3);height:44px;max-width:var(--pu-max);margin:0 auto;padding:0 var(--pu-gut);
  overflow-x:auto;scrollbar-width:none}
.pu-sitebar-in::-webkit-scrollbar{display:none}
.pu-sitebar a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--pu-3);border-radius:var(--pu-r-pill);
  color:var(--pu-text-2);font:800 var(--pu-fs-sm)/1 var(--pu-font);text-decoration:none;border:2px solid transparent}
.pu-sitebar a:hover{color:var(--pu-text);background:var(--pu-surface)}
.pu-sitebar a[aria-current=page]{color:var(--pu-ink);background:var(--pu-sun);border-color:var(--pu-ink);box-shadow:var(--pu-pop-0)}
.pu-sitebar .pu-brand{color:var(--pu-text);font-weight:900;letter-spacing:-.02em;margin-right:var(--pu-2)}
.pu-sitebar .pu-brand b{color:var(--pu-hot)}

@media (max-width:640px){
  :root{--pu-gut:12px}
  .pu .pu-btn,.pu .pu-chip,.pu-sitebar a{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .pu *,.pu *::before,.pu *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}