/* ==========================================================================
   Pixel skin — the Pokémon-style game look (mirrored token-for-token in
   all22-games/pixel.css; change both together).

   This file is an override layer: it loads AFTER assets/css/site.css, which
   stays the structural layer (reset, layout, components). Nothing here changes
   a layout contract, a behaviour or a class name — it only re-skins.

   Two typefaces by design: Silkscreen for display/UI labels, Inter for body
   copy. Pixel faces are lovely at 20px+ and unreadable below it, so prose —
   blog posts, legal pages and FAQ answers — stays in a humanist sans, exactly
   as the reference sites do it.

   Every colour is a token; components only ever reference var(--px-*).
   tools/check-contrast.mjs verifies the rendered pairs.
   ========================================================================== */

:root {
  /* Surfaces */
  --px-bg: #0a0a12;
  --px-bg-grid: rgb(255 255 255 / 3.5%);
  --px-panel: #1e40af;        /* royal blue card */
  --px-panel-2: #16307d;      /* inset / sunken card */
  --px-panel-3: #12266a;      /* deepest inset */
  --px-ink: #0a0a0a;          /* black plates and bars */

  /* Lines */
  --px-line: #93c5fd;         /* light blue border */
  --px-line-soft: rgb(147 197 253 / 45%);
  --px-line-dark: rgb(0 0 0 / 45%);

  /* Text */
  --px-text: #f8fafc;
  --px-muted: #dbeafe;
  --px-muted-2: #c7d2fe;
  --px-on-gold: #1a1206;

  /* Accents */
  --px-gold: #fbbf24;
  --px-gold-2: #fcd34d;
  --px-blue: #2563eb;
  --px-green: #4ade80;
  --px-red: #f87171;

  /* Field */
  --px-field: #3d8b3d;
  --px-field-2: #357c35;
  --px-field-line: #e7f5e7;
  --px-field-dark: #2a6b2a;

  /* Type */
  --px-display: "Silkscreen", "Courier New", monospace;
  --px-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bevels: the chunky 3-4px offset that makes a flat UI read as pixel art */
  --px-bevel: 0 4px 0 var(--px-line-dark);
  --px-bevel-sm: 0 3px 0 var(--px-line-dark);
  --px-radius: 8px;
  --px-radius-lg: 12px;

  --px-s1: 4px;
  --px-s2: 8px;
  --px-s3: 12px;
  --px-s4: 16px;
  --px-s5: 24px;
  --px-s6: 32px;

  /* ---- Design-system aliases -------------------------------------------
     site.css keeps its token names because templates and tool.js reference
     them from inline styles (`var(--accent)`, `var(--fg-subtle)`,
     `var(--font-display)`). The skin re-points those names at the pixel
     palette instead of forking the site, so no component can fall off-palette.
     --------------------------------------------------------------------- */
  --bg: var(--px-bg);
  --bg-elevated: var(--px-panel-3);
  --surface: var(--px-panel);
  --surface-2: var(--px-panel-2);
  --border: var(--px-line-soft);
  --border-strong: var(--px-line);

  --fg: var(--px-text);
  --fg-muted: var(--px-muted);
  --fg-subtle: var(--px-muted-2);

  --accent: var(--px-gold);
  --accent-hover: var(--px-gold-2);
  --accent-press: var(--px-gold-2);
  --on-accent: var(--px-on-gold);
  --success: var(--px-green);
  --warning: var(--px-gold);
  --danger: var(--px-red);
  --focus-ring: var(--px-gold-2);

  /* Raw palette names that components and the share-card canvas read. */
  --coral-300: var(--px-gold-2);
  --coral-400: var(--px-gold);
  --coral-500: var(--px-gold);
  --coral-550: var(--px-gold-2);
  --ink-900: var(--px-ink);
  --ink-850: var(--px-panel-3);
  --ink-800: var(--px-panel);
  --ink-700: var(--px-panel-2);
  --ink-600: var(--px-panel-2);
  --paper-50: var(--px-text);
  --field-500: var(--px-green);
  --gold-500: var(--px-gold);
  --sky-500: var(--px-line);

  --font-display: var(--px-display);
  --font-body: var(--px-body);

  --radius-sm: 6px;
  --radius: var(--px-radius);
  --radius-md: var(--px-radius);
  --radius-lg: var(--px-radius-lg);
  --radius-pill: var(--px-radius);

  --shadow-sm: var(--px-bevel-sm);
  --shadow: var(--px-bevel);
  --shadow-lg: var(--px-bevel);
  --transition: 120ms steps(2);
}

/* ---- Backdrop ------------------------------------------------------------ */
body {
  background-color: var(--px-bg);
  /* Faint 32px graph paper, like the reference sites' backdrop. */
  background-image:
    linear-gradient(var(--px-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: var(--px-body);
}

/* Sprites must stay crisp at any zoom. */
img[src*="pokemon"], .sprite { image-rendering: pixelated; }

:where(a, button, [tabindex], summary, input, select):focus-visible {
  outline: 3px solid var(--px-gold-2);
  outline-offset: 2px;
  border-radius: var(--px-radius);
}

::selection { background: var(--px-gold); color: var(--px-on-gold); }

/* ---- Type ---------------------------------------------------------------- */
/* Display type only: headings, labels, navigation and plates. Body copy keeps
   the Inter body face from site.css. */
h1, h2, h3, h4, .eyebrow, .brand, .card__meta {
  font-family: var(--px-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
h1, h2 { color: var(--px-gold); }
h3, h4 { color: var(--px-text); }

h1 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.2; }
h2 { font-size: clamp(1.15rem, 2.6vw, 1.7rem); line-height: 1.25; }
h3 { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.3; }
h4 { font-size: 0.9375rem; line-height: 1.3; }

.eyebrow { font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--px-gold-2); }
.card__meta { font-size: 0.625rem; letter-spacing: 0.08em; color: var(--px-muted-2); }

/* FAQ questions are long-form prose at 17px: they stay in the body face. */
.faq summary { font-family: var(--px-body); font-weight: 600; }
.faq summary::after { color: var(--px-gold); }

/* ---- Chrome -------------------------------------------------------------- */
.site-header {
  background: var(--px-ink);
  backdrop-filter: none;
  border-bottom: 3px solid var(--px-line);
}
.brand { font-size: 0.9375rem; color: var(--px-gold); letter-spacing: 0; }
.brand__name { font-size: 0.9375rem; }
.brand__mark { width: 28px; height: 28px; }

/* Silkscreen is a wide face: keep every label on one line and let the bar wrap
   between items instead of squeezing a label into two lines. */
.nav { flex-wrap: wrap; row-gap: 0; }
.nav__link { font-family: var(--px-display); font-size: 0.6875rem; color: var(--px-text); white-space: nowrap; padding: var(--px-s1) 0; }
.nav .btn { white-space: nowrap; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--px-gold); }
.nav-toggle {
  background: var(--px-ink); border: 3px solid var(--px-line);
  border-radius: var(--px-radius); color: var(--px-text);
}

@media (max-width: 900px) {
  .nav { background: var(--px-panel-3); border-bottom: 3px solid var(--px-line); }
  .nav__link { border-bottom: 2px solid var(--px-line-soft); }
}

.site-footer {
  background: var(--px-ink);
  border-top: 3px solid var(--px-line);
  margin-top: var(--px-s6);
  padding-block: var(--px-s5);
  color: var(--px-muted-2);
}
.site-footer h4 { font-family: var(--px-display); font-size: 0.6875rem; color: var(--px-gold); }
.site-footer a { font-size: 0.875rem; }
.site-footer__legal { border-top: 2px solid var(--px-line-soft); }

/* ---- Panels -------------------------------------------------------------- */
.panel {
  background: var(--px-panel);
  border: 3px solid var(--px-line);
  border-radius: var(--px-radius-lg);
  box-shadow: var(--px-bevel);
}
.card {
  background: var(--px-panel);
  border: 3px solid var(--px-line);
  border-radius: var(--px-radius-lg);
  box-shadow: var(--px-bevel);
}
.callout {
  background: var(--px-panel-2);
  border: 3px solid var(--px-line-soft);
  border-left: 8px solid var(--px-gold);
  border-radius: var(--px-radius);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  font-family: var(--px-display); font-size: 0.8125rem; font-weight: 700;
  border: 3px solid var(--px-ink);
  border-radius: var(--px-radius);
  padding: 12px 18px;
  box-shadow: var(--px-bevel-sm);
  transition: transform 90ms steps(2), background 90ms;
}
.btn:active, .btn--primary:active { transform: translateY(3px); box-shadow: none; }
.btn--primary { background: var(--px-gold); color: var(--px-on-gold); }
.btn--primary:hover { background: var(--px-gold-2); color: var(--px-on-gold); }
.btn--secondary { background: var(--px-text); border-color: var(--px-ink); color: var(--px-ink); }
.btn--secondary:hover { background: var(--px-muted); border-color: var(--px-ink); color: var(--px-ink); }
.btn--lg { padding: 14px 22px; font-size: 0.875rem; }
.btn--sm { padding: 8px 12px; font-size: 0.6875rem; }

.skip-link { background: var(--px-gold); color: var(--px-on-gold); border: 3px solid var(--px-ink); }

/* ---- Data ---------------------------------------------------------------- */
.stat { background: var(--px-ink); border: 2px solid var(--px-line-soft); border-radius: var(--px-radius); }
.stat__value { font-family: var(--px-display); font-size: 1.375rem; color: var(--px-gold); letter-spacing: 0; }
.stat__label { font-family: var(--px-display); font-size: 0.625rem; color: var(--px-muted-2); }

.tag {
  background: var(--px-panel-3); border: 2px solid var(--px-line-soft);
  border-radius: 6px; font-family: var(--px-display); font-size: 0.6875rem;
  color: var(--px-muted-2); letter-spacing: 0.04em;
}
.type-chip { border-radius: 6px; font-family: var(--px-display); letter-spacing: 0.04em; }

.table-scroll { border: 3px solid var(--px-line-soft); border-radius: var(--px-radius); }
th, td { border-bottom: 2px solid var(--px-line-soft); }
th {
  background: var(--px-panel-2); color: var(--px-gold);
  font-family: var(--px-display); font-size: 0.6875rem; letter-spacing: 0.04em;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--px-panel-2); }
caption { color: var(--px-muted-2); }

input[type="search"], input[type="text"], select {
  background: var(--px-panel-3); border: 3px solid var(--px-line-soft);
  border-radius: var(--px-radius); color: var(--px-text);
}
input[type="search"]::placeholder, ::placeholder { color: var(--px-muted-2); }

/* ---- Tool: roster board -------------------------------------------------- */
.tool {
  background: var(--px-panel-3);
  border: 3px solid var(--px-line);
  border-radius: var(--px-radius-lg);
  box-shadow: var(--px-bevel);
}
.tool__bar { background: var(--px-panel-2); border-bottom: 3px solid var(--px-line-soft); }
.tool__side { background: var(--px-panel-3); border-left: 3px solid var(--px-line-soft); }
@media (max-width: 980px) { .tool__side { border-left: 0; border-top: 3px solid var(--px-line-soft); } }

/* The green field with white yard lines behind the 22 slots. */
.field-grid {
  background-color: var(--px-field);
  background-image:
    repeating-linear-gradient(90deg, var(--px-field-line) 0 3px, transparent 3px 80px),
    repeating-linear-gradient(180deg, var(--px-field-line) 0 2px, transparent 2px 80px);
  padding: var(--px-s4);
  border-bottom: 3px solid var(--px-ink);
  /* Narrower slots than site.css so phones still get two ranks per row. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 116px), 1fr));
  gap: var(--px-s2);
}

/* One slot = a sprite with a black position plate under it. */
.slot {
  /* Fixed height + overflow hidden: a wrapping name used to push the name,
     grade and type chips over the next row. Nothing inside a slot may escape
     its own cell, so the field stays a field and not a pile of text. */
  display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center;
  gap: 3px; height: 116px; overflow: hidden;
  background: transparent; border: 3px solid transparent; border-radius: var(--px-radius);
  padding: var(--px-s2); text-align: center;
  transition: transform 90ms steps(2), background 90ms;
}
/* site.css tints filled slots with a color-mix border. In the flat pixel skin the
   sprite and the plate carry that state, so the outline is reserved for the
   selection, which tool.js paints inline from --accent. */
.slot[data-filled="true"],
.slot[data-empty="true"] { border-color: transparent; border-style: solid; }
.slot > div:last-child { display: grid; justify-items: center; gap: 2px; }
.slot:hover { background: var(--px-field-dark); }
.slot[aria-pressed="true"] { background: var(--px-field-dark); }
.slot__art { width: 64px; height: 64px; background: none; border: 0; border-radius: 0; }
.slot__art img { width: 64px; height: 64px; }
.slot__art .fallback { font-family: var(--px-display); font-weight: 700; font-size: 1.5rem; color: var(--px-field-line); }
/* .plate is the shared black-plate primitive (mirrored from all22-games/pixel.css);
   .slot__pos is that same plate inside a roster slot. */
.plate,
.slot__pos {
  display: inline-block; background: var(--px-ink); color: var(--px-text);
  border-radius: 6px; padding: 3px 8px;
  font-family: var(--px-display); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.slot[data-filled="false"] .slot__pos { background: var(--px-panel-2); color: var(--px-muted-2); }
.slot:hover .slot__pos { background: var(--px-gold); color: var(--px-on-gold); }
.slot[aria-pressed="true"] .slot__pos { background: var(--px-blue); color: var(--px-text); }
.slot__name {
  font-family: var(--px-body); font-size: 0.75rem; color: var(--px-text); line-height: 1.2;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot__rating { font-family: var(--px-body); font-size: 0.625rem; color: var(--px-muted-2); white-space: nowrap; }
/* Type chips do not fit a field cell; typing is shown in the pool list and the
   detail panel instead of overflowing the slot. */
.slot .type-chip { display: none; }

.pool-item {
  background: var(--px-panel-2); border: 2px solid var(--px-line-soft);
  border-radius: var(--px-radius); box-shadow: var(--px-bevel-sm);
}
.pool-item:hover { background: var(--px-panel); border-color: var(--px-line); }
.pool-item__name { color: var(--px-text); }
.pool-item__sub { font-family: var(--px-display); font-size: 0.6875rem; color: var(--px-muted-2); }

.scoreboard__cell { background: var(--px-ink); border: 2px solid var(--px-line-soft); border-radius: var(--px-radius); }
.scoreboard__n { font-family: var(--px-display); font-size: 1.25rem; color: var(--px-gold); letter-spacing: 0; }
.scoreboard__l { font-family: var(--px-display); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--px-muted-2); }

.schedule li { border-bottom: 2px solid var(--px-line-soft); }
.schedule__res { font-family: var(--px-display); }
.schedule li[data-result="W"] .schedule__res { color: var(--px-green); }
.schedule li[data-result="L"] .schedule__res { color: var(--px-red); }

.lineup-card {
  background: var(--px-panel-2); border: 3px solid var(--px-line-soft);
  border-radius: var(--px-radius); box-shadow: var(--px-bevel-sm);
}
.lineup-card__name { font-family: var(--px-display); font-size: 0.8125rem; color: var(--px-text); }
.lineup-card__record { font-family: var(--px-display); font-size: 0.6875rem; color: var(--px-muted-2); }
.lineup-card__row img { background: var(--px-panel-3); border-radius: 4px; }

.compare { border: 3px solid var(--px-line-soft); border-radius: var(--px-radius); }
.compare > div:nth-child(odd) { background: var(--px-panel); border-right: 3px solid var(--px-line-soft); }
.compare > div:nth-child(even) { background: var(--px-panel-3); }

/* ---- Decoration ---------------------------------------------------------- */
/* Flat pixel art: no soft radial glow behind the hero. */
.hero::before { content: none; }