/* Shared theme for playqwtf.com subpages (spec 2026-07-12, re-skinned for the
   Slipgate system 2026-10-30; see docs/DESIGN.md).
   Cache: referenced with ?v=<content-hash> stamped by scripts/asset_versions.py.
   Page-specific styling stays inline in each page; this file owns the palette
   tokens, type, topbar, and the primitives shared by the family. Token names
   are the originals so every inline rule keeps working. */

:root {
  --ink:#15110e; --panel:#1c1613; --line:#3a2e26; --gold:#e2b24c;
  --teal:#c4601a; --cyan:#ff7a1f; --text:#f2e9d8; --dim:#9a8c78;
  --display:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --sans:'Atkinson Hyperlegible', system-ui, sans-serif;
  --mono:'Chivo Mono', ui-monospace, Menlo, monospace;
}

html, body { margin:0; background:var(--ink); color:var(--text);
  font:400 0.9rem/1.6 var(--mono); }
* { box-sizing:border-box; }
a { color:var(--cyan); text-decoration:none; }
a:hover, a:focus-visible { text-decoration:underline; text-underline-offset:.18em; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }

.topbar.subbar { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding:.9rem 1.4rem; border-bottom:1px solid var(--line);
  background:rgba(21,17,14,.9); position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); }
.topbar.subbar .wordmark { font:800 1.3rem var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.topbar.subbar .wordmark:hover { text-decoration:none; color:var(--cyan); }
.topbar.subbar .pagename { color:var(--dim); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }

.wrap { max-width:1100px; margin:0 auto; padding:0 1.2rem 4rem; }
.section { margin-top:3rem; }
.section > h2 { font:800 1.3rem var(--display); letter-spacing:.08em; color:var(--cyan);
  text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:.5rem; }
.section-note { color:var(--dim); font-size:.78rem; }

.card { background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:1rem; }
.cards { display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }

.chip { display:inline-block; background:none; border:1px solid var(--line);
  border-radius:999px; padding:.15rem .7rem; font:inherit; font-size:.75rem;
  color:var(--dim); cursor:pointer; }
.chip.on { color:var(--ink); background:var(--cyan); border-color:var(--cyan); }
.chip:hover:not(.on) { border-color:var(--cyan); color:var(--text); }

.table { width:100%; border-collapse:collapse; font-size:.82rem; }
.table th { text-align:left; color:var(--dim); font-weight:600;
  border-bottom:1px solid var(--line); padding:.45rem .5rem;
  white-space:nowrap; }
.table th[data-key] { cursor:pointer; }
.table th[data-key]:hover { color:var(--text); }
.table td { border-bottom:1px solid var(--line); padding:.45rem .5rem; }
.table tbody tr:hover { background:var(--panel); }

.tier { font-weight:600; padding:.05rem .45rem; border-radius:3px;
  font-size:.72rem; }
.tier-S { background:var(--gold); color:var(--ink); }
.tier-A { background:var(--cyan); color:var(--ink); }
.tier-B { background:var(--teal); color:var(--ink); }
.tier-C, .tier-D { background:var(--line); color:var(--text); }

.statline { color:var(--dim); font-size:.78rem; }
.scroll-x { overflow-x:auto; }
.num { font-variant-numeric:tabular-nums; }
.empty { color:var(--dim); font-size:.82rem; border:1px dashed var(--line);
  border-radius:4px; padding:1rem; }

@media (max-width:768px) {
  .wrap { padding:0 .8rem 3rem; }
  .section { margin-top:2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}