/*!
 * PressWord Games — © 2026 Code Atlantic, LLC. All rights reserved.
 * Proprietary and confidential. Source is viewable but NOT open source and NOT
 * licensed for reuse, redistribution, or derivative works. See LICENSE.
 * https://pressword.games
 */
/* PressWord Games — Design System (ported from claude.ai/design project
 * "PressWord Games Design System", 576dca9e). Tokens + component classes,
 * faithful to tokens/*.css and components/*.jsx. The wp-admin heritage palette
 * is preserved; Space Grotesk (display) + Space Mono (metadata) carry the
 * elevation. Each game owns a hue via [data-game]. This file is the vanilla-CSS
 * equivalent of the DS's styles.css manifest + the React component styles. */

/* The hidden attribute must ALWAYS win. Component display rules (e.g.
 * .pwg-capsule{display:flex}) override the UA's [hidden]{display:none}, which
 * exposed gated beta capsules to everyone — the reveal script only ever
 * REMOVES hidden for staff; the hiding itself was silently defeated. */
[hidden] { display: none !important; }

/* ============================ TOKENS ============================ */
:root {
  /* heritage / wp-admin core */
  --pw-ink:#1d2327; --pw-ink-2:#101517; --pw-ink-3:#2c3338;
  --pw-blue:#2271b1; --pw-blue-dark:#135e96; --pw-blue-light:#72aee6;
  --pw-paper:#f6f7f7; --pw-paper-2:#f0f0f1; --pw-card:#ffffff;
  --pw-border:#c3c4c7; --pw-border-2:#e2e4e7; --pw-field:#8c8f94;
  /* text */
  --pw-text:#1d2327; --pw-muted:#50575e; --pw-muted-2:#646970; --pw-faint:#8c8f94;
  --pw-on-dark:#ffffff; --pw-on-dark-muted:#a7aaad; --pw-on-dark-faint:#787c82;
  /* semantic */
  --pw-green:#00a32a; --pw-amber:#dba617; --pw-red:#d63638; --pw-red-2:#ff6b6b;
  /* per-game brand hues */
  --game-clicker:#2271b1; --game-clicker-glow:#72aee6;
  --game-patch:#dba617;   --game-patch-glow:#f0c64b;
  --game-queue:#d63638;   --game-queue-glow:#ff6b6b;
  --game-eternal:#7c3aed; --game-eternal-glow:#a78bfa;
  /* semantic aliases */
  --surface-page:var(--pw-paper); --surface-card:var(--pw-card); --surface-sunken:var(--pw-paper-2);
  --surface-chrome:var(--pw-ink); --surface-chrome-2:var(--pw-ink-2);
  --text-strong:var(--pw-text); --text-body:var(--pw-muted); --text-faint:var(--pw-faint);
  --text-on-chrome:var(--pw-on-dark); --text-on-chrome-muted:var(--pw-on-dark-muted);
  --accent:var(--pw-blue); --accent-hover:var(--pw-blue-dark); --accent-on-chrome:var(--pw-blue-light);
  --border-hair:var(--pw-border); --border-soft:var(--pw-border-2);
  --game-accent:var(--pw-blue); --game-glow:var(--pw-blue-light);

  /* fonts */
  --font-display:"Space Grotesk",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono","IBM Plex Mono",Menlo,monospace;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* type scale */
  --fs-display:72px; --fs-h1:40px; --fs-h2:28px; --fs-h3:20px; --fs-title:17px;
  --fs-body:15px; --fs-sm:13px; --fs-xs:12px; --fs-micro:11px;
  --lh-tight:1.05; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.6;
  --ls-display:-0.02em; --ls-tight:-0.01em; --ls-normal:0; --ls-kicker:0.18em; --ls-label:0.04em;

  /* spacing (4px grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --container:960px; --container-narrow:680px; --gutter:20px; --grid-gap:18px; --capsule-min:280px;

  /* radii */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  /* borders */
  --bd:1px solid var(--pw-border); --bd-soft:1px solid var(--pw-border-2); --bd-accent:1px solid var(--pw-blue); --bd-top-accent:3px;
  /* shadows */
  --shadow-flat:0 1px 1px rgba(0,0,0,.04); --shadow-card:0 1px 2px rgba(16,21,23,.06);
  --shadow-hover:0 6px 20px rgba(16,21,23,.10); --shadow-pop:0 8px 28px rgba(16,21,23,.22);
  --shadow-modal:0 20px 60px rgba(16,21,23,.35); --shadow-press:0 2px 0 var(--pw-blue-dark);
  /* textures */
  --grid-line:rgba(255,255,255,.045);
  --texture-grid:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  --texture-grid-size:32px 32px;
  /* motion */
  --ease-out:cubic-bezier(.2,.7,.3,1); --ease-rise:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.15s; --dur-base:.25s; --dur-pop:.35s;
}
[data-game="install-clicker"]{ --game-accent:var(--game-clicker); --game-glow:var(--game-clicker-glow); }
[data-game="patch-23867"]    { --game-accent:var(--game-patch);   --game-glow:var(--game-patch-glow); }
[data-game="queue"]          { --game-accent:var(--game-queue);   --game-glow:var(--game-queue-glow); }
[data-game="patch-eternal"]  { --game-accent:var(--game-eternal); --game-glow:var(--game-eternal-glow); }

@keyframes pw-rise { from { opacity:0; transform:translateY(10px); } }
@keyframes pw-fade { from { opacity:0; } }
@keyframes pw-blink { 50% { opacity:0; } }

/* ============================ PRIMITIVES ============================ */
.pwg-kicker {            /* Tag kicker — tracked-out mono eyebrow */
  font:var(--fw-bold) var(--fs-micro)/1 var(--font-mono);
  text-transform:uppercase; letter-spacing:var(--ls-kicker); color:var(--game-accent);
}
.pwg-wordmark {
  font:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display);
  letter-spacing:var(--ls-display);
}
.pwg-wordmark .dot { color:var(--pw-blue-light); }

/* Button — radius r-sm; pill variant r-pill. Sizes sm/md/lg. */
.pwg-btn {
  font:var(--fw-semibold) 15px/1 var(--font-ui); padding:9px 18px;
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pwg-btn--sm { font-size:13px; padding:6px 12px; }
.pwg-btn--lg { font-size:17px; padding:13px 26px; }
.pwg-btn--primary { background:var(--accent); color:#fff; }
.pwg-btn--primary:hover { background:var(--accent-hover); }
.pwg-btn--primary.is-chunky { box-shadow:var(--shadow-press); }
.pwg-btn--primary.is-chunky:active { transform:translateY(1px); box-shadow:0 1px 0 var(--accent-hover); }
.pwg-btn--secondary { background:var(--surface-card); color:var(--accent); border-color:var(--accent); }
.pwg-btn--secondary:hover { background:var(--surface-sunken); }
.pwg-btn--ghost { background:transparent; color:var(--text-body); }
.pwg-btn--ghost:hover { background:var(--surface-sunken); }
.pwg-btn--pill { border-radius:var(--r-pill); background:var(--surface-card); color:var(--text-strong); border-color:var(--border-hair); }
.pwg-btn--pill:hover { border-color:var(--accent); background:var(--surface-sunken); }
/* ghost-on-dark: hero secondary actions over the ink chrome */
.pwg-btn--on-dark { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18); }
.pwg-btn--on-dark:hover { background:rgba(255,255,255,.14); }

/* ============================ SURFACES ============================ */
/* Panel — bordered content surface, r-lg; .is-dark = chrome panel. */
.pwg-panel {
  background:var(--surface-card); color:var(--text-strong);
  border:var(--bd); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.pwg-panel--dark {
  background:var(--surface-chrome); color:var(--text-on-chrome);
  border:1px solid var(--pw-ink-3); box-shadow:none;
}
.pwg-panel__head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; border-bottom:1px solid var(--border-soft); background:var(--surface-sunken);
  font:var(--fw-semibold) var(--fs-sm)/1.2 var(--font-ui);
}
.pwg-panel--dark .pwg-panel__head { border-bottom:1px solid var(--pw-ink-3); background:var(--surface-chrome-2); }
.pwg-panel__body { padding:16px 18px; }

/* GameCapsule — storefront card. Key art (16:9) at rest → screenshot on hover. */
.pwg-capsule {
  display:flex; flex-direction:column; background:var(--surface-card);
  border:var(--bd); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-card);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pwg-capsule:hover { border-color:var(--game-accent); box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.pwg-capsule__art { position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--pw-ink); overflow:hidden; }
/* hover-to-preview: capsule key art at rest, gameplay screenshot on hover (desktop intent) */
.pwg-capsule__shot { position:absolute; inset:0; background-size:cover; background-position:top center; opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .pwg-capsule:hover .pwg-capsule__shot { opacity:1; } }
.pwg-capsule__body { padding:14px 18px 16px; }
.pwg-capsule__titlerow { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.pwg-capsule__title { font:var(--fw-bold) var(--fs-title)/1.2 var(--font-display); color:var(--text-strong); }
.pwg-capsule__version { font:var(--fs-xs)/1 var(--font-mono); color:var(--text-faint); background:var(--surface-sunken); border:var(--bd-soft); border-radius:var(--r-xs); padding:2px 6px; }
/* Beta badge — amber pill over the art, top-left. Mono uppercase, brand status flag. */
.pwg-capsule__beta { position:absolute; top:10px; left:10px; z-index:2;
  font:var(--fw-bold) var(--fs-micro)/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--pw-ink); background:var(--pw-amber); border-radius:var(--r-pill); padding:5px 10px;
  box-shadow:0 1px 4px rgba(16,21,23,.35); }
.pwg-capsule__blurb { font:var(--fs-sm)/1.45 var(--font-ui); color:var(--text-body); min-height:40px; }
.pwg-capsule__cta { font:var(--fw-semibold) var(--fs-sm)/1 var(--font-ui); color:var(--game-accent); margin-top:10px; }

/* ============================ DATA DISPLAY ============================ */
/* StatCard tone="economy" — dark strip item: mono label, Space Grotesk value. */
.pwg-stat { display:flex; flex-direction:column; gap:3px; }
.pwg-stat__label { font:var(--fw-medium) var(--fs-micro)/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--pw-on-dark-muted); }
.pwg-stat__value { font:var(--fw-bold) 26px/1.05 var(--font-display); color:var(--pw-blue-light); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-tight); margin:3px 0 2px; }
/* light wp-admin stat card (admin / per-game) */
.pwg-stat--card { background:var(--surface-card); border:var(--bd); border-radius:var(--r-xs); padding:12px 16px; }
.pwg-stat--card .pwg-stat__label { color:var(--text-faint); }
.pwg-stat--card .pwg-stat__value { font-size:30px; line-height:1.1; color:var(--accent-hover); }

/* ============================ FORMS ============================ */
.pwg-input, .pwg-textarea, .pwg-select {
  width:100%; padding:10px 12px; border:1px solid var(--pw-field); border-radius:var(--r-sm);
  font:var(--fs-body)/1.4 var(--font-ui); color:var(--text-strong); background:var(--surface-card);
  outline:none; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pwg-input:focus, .pwg-textarea:focus, .pwg-select:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
/* invalid focus ring — matches Field.jsx useFocusRing(invalid): red instead of accent */
.pwg-input:focus:invalid, .pwg-textarea:focus:invalid { border-color:var(--pw-red); box-shadow:0 0 0 1px var(--pw-red); }
.pwg-input.is-invalid, .pwg-textarea.is-invalid, .pwg-select.is-invalid { border-color:var(--pw-red); }
.pwg-textarea { min-height:110px; resize:vertical; }
.pwg-label { display:block; font:var(--fw-semibold) var(--fs-sm)/1.3 var(--font-ui); color:var(--text-strong); margin:0 0 5px; }
.pwg-label__hint { font:var(--fw-regular) var(--fs-xs)/1 var(--font-mono); color:var(--text-faint); margin-left:8px; }
.pwg-check { display:inline-flex; align-items:center; gap:8px; font:var(--fs-xs)/1.4 var(--font-ui); color:var(--text-body); cursor:pointer; }
.pwg-check input { accent-color:var(--accent); width:15px; height:15px; margin:0; }
.pwg-status { font:var(--fw-regular) var(--fs-xs)/1.4 var(--font-ui); margin-top:6px; min-height:16px; }
.pwg-status--ok { color:var(--pw-green); }
.pwg-status--error { color:var(--pw-red); }
.pwg-status--info { color:var(--accent); }