/* Shared theme for playqwtf.com subpages (spec 2026-07-12).
   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. */
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --ink:#0A1418; --panel:#0F1D23; --line:#1C333B; --gold:#D9A94E;
  --teal:#2E9FA3; --cyan:#46E6E6; --text:#CFE0E2; --dim:#7E959B;
}

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

.topbar { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding:1rem 1.4rem; border-bottom:1px solid var(--line); }
.topbar .wordmark { font-weight:600; letter-spacing:.08em; color:var(--gold); }
.topbar .pagename { color:var(--dim); font-size:.8rem; letter-spacing:.14em; }

.wrap { max-width:1100px; margin:0 auto; padding:0 1.2rem 4rem; }
.section { margin-top:3rem; }
.section > h2 { font-size:.85rem; letter-spacing:.16em; color:var(--teal);
  text-transform:uppercase; font-weight:600;
  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(--teal); border-color:var(--teal); }
.chip:hover:not(.on) { border-color:var(--teal); 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; }
}