@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* ==========================================================================
   Slotometry design system
   --------------------------------------------------------------------------
   1. Tokens        design primitives, the only place raw values live
   2. Reset         box model and element defaults
   3. Base          typography and links
   4. Layout        container, header, footer, grids, sections
   5. Components    reusable UI, one block per partial in views/partials/ui
   6. Utilities     single-purpose helpers
   7. Responsive    breakpoints
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- neutral ramp: 0 darkest surface, 100 lightest text ---------------- */
  --n-0: #08090c;
  --n-5: #0b0d11;
  --n-10: #12151c;
  --n-15: #181c26;
  --n-20: #1f2430;
  --n-30: #2a3140;
  --n-40: #3a4356;
  --n-50: #5a6478;
  --n-60: #8b93a7;
  --n-70: #a8b0c2;
  --n-80: #c9ced8;
  --n-90: #e8eaef;
  --n-100: #ffffff;

  /* --- primary (gold) --------------------------------------------------- */
  --p-60: #8a7434;
  --p-70: #c2a44b;
  --p-80: #e6c35c;
  --p-90: #f2d783;
  --p-soft: rgba(230, 195, 92, 0.12);
  --p-ink: #1a1406; /* text on a primary fill */

  /* --- semantic --------------------------------------------------------- */
  --ok: #3dd68c;
  --ok-soft: rgba(61, 214, 140, 0.12);
  --warn: #f5a623;
  --warn-soft: rgba(245, 166, 35, 0.12);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.12);
  --info: #6aa6ff;
  --info-soft: rgba(106, 166, 255, 0.12);

  /* --- spacing: 4px grid ------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* --- type scale: size paired with line-height -------------------------- */
  --fs-11: 0.6875rem;  --lh-11: 1rem;
  --fs-12: 0.75rem;    --lh-12: 1.125rem;
  --fs-13: 0.8125rem;  --lh-13: 1.25rem;
  --fs-14: 0.875rem;   --lh-14: 1.375rem;
  --fs-16: 1rem;       --lh-16: 1.5rem;
  --fs-18: 1.125rem;   --lh-18: 1.625rem;
  --fs-20: 1.25rem;    --lh-20: 1.75rem;
  --fs-24: 1.5rem;     --lh-24: 2rem;
  --fs-32: 2rem;       --lh-32: 2.375rem;
  --fs-40: 2.5rem;     --lh-40: 2.875rem;

  /* --- weight ----------------------------------------------------------- */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* --- radii ------------------------------------------------------------ */
  --r-4: 4px;
  --r-8: 8px;
  --r-full: 999px;

  /* --- elevation -------------------------------------------------------- */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --e-3: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* --- layout ----------------------------------------------------------- */
  --max: 1280px;
  --max-prose: 42rem;
  --header-h: 56px;

  /* --- fonts ------------------------------------------------------------ */
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* --- aliases: kept so pre-Phase-1 rules keep resolving ---------------- */
  --bg: var(--n-5);
  --bg-2: var(--n-10);
  --bg-3: var(--n-15);
  --line: var(--n-30);
  --text: var(--n-90);
  --muted: var(--n-60);
  --gold: var(--p-80);
  --green: var(--ok);
  --red: var(--bad);
  --blue: var(--info);
  --radius: var(--r-4);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

/* ==========================================================================
   3. BASE
   ========================================================================== */

body {
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(230, 195, 92, 0.07), transparent 50%),
    var(--n-5);
  color: var(--n-90);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--p-80); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: var(--fw-600); letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: -0.03em; margin-bottom: var(--s-2); }
h2 { font-size: var(--fs-20); line-height: var(--lh-20); }
h3 { font-size: var(--fs-16); line-height: var(--lh-16); }
h4 { font-size: var(--fs-14); line-height: var(--lh-14); }

p { margin: 0 0 var(--s-3); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--n-15);
  border: 1px solid var(--n-30);
  padding: 1px var(--s-1);
  border-radius: var(--r-4);
}

hr { border: 0; border-top: 1px solid var(--n-30); margin: var(--s-8) 0; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrap { width: min(var(--max), calc(100% - var(--s-8))); margin: 0 auto; }
main.wrap { padding: var(--s-8) 0 var(--s-16); }

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(11, 13, 17, 0.88);
  border-bottom: 1px solid var(--n-30);
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--s-4);
}
.brand { display: flex; align-items: center; gap: var(--s-2); color: var(--n-90); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 16px;
  height: 16px;
  flex: none;
  background:
    linear-gradient(var(--p-80), var(--p-80)) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--p-80), var(--p-80)) 10px 0 / 6px 6px no-repeat,
    linear-gradient(var(--n-30), var(--n-30)) 0 10px / 6px 6px no-repeat,
    linear-gradient(var(--n-90), var(--n-90)) 10px 10px / 6px 6px no-repeat;
}
.brand-name {
  font-weight: var(--fw-700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-13);
}
.nav { display: flex; gap: var(--s-5); }
.nav a { color: var(--n-60); font-size: var(--fs-14); }
.nav a.is-on, .nav a:hover { color: var(--n-90); text-decoration: none; }

.hero, .page-head { margin-bottom: var(--s-8); }
.kicker {
  color: var(--p-80);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  font-weight: var(--fw-600);
  margin: 0 0 var(--s-2);
}
.lede {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--n-70);
  max-width: var(--max-prose);
  margin: 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-8) 0 var(--s-4);
  border-bottom: 1px solid var(--n-30);
  padding-bottom: var(--s-2);
}
.section-head p { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); }
.grid-main-side { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-6); align-items: start; }
.grid-side-main { display: grid; grid-template-columns: 340px 1fr; gap: var(--s-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-4 { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.foot { border-top: 1px solid var(--n-30); padding: var(--s-6) 0 var(--s-10); color: var(--n-60); font-size: var(--fs-13); }
.foot-inner { display: flex; justify-content: space-between; gap: var(--s-5); }
.foot-nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.foot-nav a { color: var(--n-60); }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- surface -------------------------------------------------------------- */
.surface {
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
}

/* --- badge ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-4);
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  font-weight: var(--fw-600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--n-20);
  color: var(--n-70);
  border: 1px solid transparent;
}
.badge--new { background: var(--info-soft); color: var(--info); }
.badge--exclusive { background: var(--p-80); color: var(--p-ink); }
.badge--verified { background: var(--ok-soft); color: var(--ok); }
.badge--recommended { background: transparent; color: var(--p-80); border-color: var(--p-60); }
.badge--accepted { background: var(--ok-soft); color: var(--ok); }
.badge--restricted { background: var(--bad-soft); color: var(--bad); }
.badge--expired { background: var(--n-20); color: var(--n-50); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }

/* --- pill (lowercase, non-semantic tag) ---------------------------------- */
.pill {
  display: inline-block;
  padding: 2px var(--s-2);
  border-radius: var(--r-4);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  background: var(--n-20);
  color: var(--n-70);
  text-transform: capitalize;
  white-space: nowrap;
}
.vol-high { color: var(--bad); background: var(--bad-soft); }
.vol-med { color: var(--warn); background: var(--warn-soft); }
.vol-low { color: var(--info); background: var(--info-soft); }
/* Feature flags in a dense table cell, where a full label will not fit. */
.pill--sm {
  padding: 1px var(--s-1);
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  font-family: var(--mono);
  text-transform: none;
}

/* --- score chip ----------------------------------------------------------- */
.score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  background: var(--n-15);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-1) var(--s-2);
  line-height: 1;
}
.score-val { font-size: var(--fs-16); font-weight: var(--fw-600); color: var(--n-90); }
.score-max { font-size: var(--fs-11); color: var(--n-50); }
.score--lg { padding: var(--s-2) var(--s-3); }
.score--lg .score-val { font-size: var(--fs-32); }
.score--lg .score-max { font-size: var(--fs-13); }
.score--sm { padding: 1px var(--s-1); }
.score--sm .score-val { font-size: var(--fs-13); }
.score--strong { border-color: var(--p-60); }
.score--strong .score-val { color: var(--p-80); }
.score--none .score-val { color: var(--n-50); }

.score-block { display: flex; gap: var(--s-5); align-items: start; flex-wrap: wrap; }
.score-bars { flex: 1 1 260px; min-width: 220px; margin: 0; }
.score-bars > div {
  display: grid;
  grid-template-columns: 96px 1fr 34px;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-2);
}
.score-bars dt { margin: 0; color: var(--n-60); font-size: var(--fs-12); }
.score-bars dd { margin: 0; }
.score-bars .bar { background: var(--n-20); height: 6px; border-radius: var(--r-full); overflow: hidden; }
.score-bars .bar span { display: block; height: 100%; background: var(--p-80); }
.score-bars .bar-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-12);
  color: var(--n-70);
  text-align: right;
}

/* --- stat tiles ----------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-2);
}
.tile {
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-3);
}
.tile-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-600);
  color: var(--n-90);
}
.tile-val.is-empty { color: var(--n-50); }
.tile-label {
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--n-60);
  margin-top: var(--s-1);
}

/* --- spec card ------------------------------------------------------------ */
.spec-card {
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  overflow: hidden;
}
.spec-card-head {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  justify-content: space-between;
  padding: var(--s-3);
  border-bottom: 1px solid var(--n-30);
  background: var(--n-15);
}
.spec-card-head h3 { font-size: var(--fs-16); }
.spec-card-sub { color: var(--n-60); font-size: var(--fs-12); margin: 2px 0 0; }
.spec-card-rows { margin: 0; }
.spec-card-row {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--n-30);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}
.spec-card-row:last-child { border-bottom: 0; }
.spec-card-row dt { margin: 0; color: var(--n-60); }
.spec-card-row dd { margin: 0; color: var(--n-90); }
.spec-card-row dd.is-empty { color: var(--n-50); }
.spec-card-foot { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--n-30); background: var(--n-15); }

/* --- data table ----------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  margin: var(--s-4) 0 var(--s-6);
}
table.data, table.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
table.data th, table.data td, table.spec th, table.spec td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--n-30);
  line-height: var(--lh-13);
}
table.data thead th {
  color: var(--n-60);
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--n-15);
  white-space: nowrap;
}
table.data tbody tr:hover { background: var(--n-10); }
table.data tr:last-child td, table.spec tr:last-child td { border-bottom: 0; }
table.data td.right, table.data th.right { text-align: right; }

table.spec { background: var(--n-10); border: 1px solid var(--n-30); border-radius: var(--r-4); overflow: hidden; margin: var(--s-5) 0; }
table.spec th { width: 180px; color: var(--n-60); font-weight: var(--fw-400); }

/* sortable column header */
.th-sort { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; }
.th-sort:hover { color: var(--n-90); text-decoration: none; }
.th-sort[aria-sort] { color: var(--p-80); }
.th-sort .caret { font-size: 0.7em; opacity: 0.8; }

/* --- entity cards --------------------------------------------------------- */
.ent {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-3);
}
.ent:hover { border-color: var(--n-40); }
.ent h3 { font-size: var(--fs-14); line-height: var(--lh-14); }
.ent h3 a { color: var(--n-90); }
.ent-meta { color: var(--n-60); font-size: var(--fs-12); line-height: var(--lh-12); margin: 2px 0 0; }
.ent-mark {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-4);
  background: var(--n-15);
  border: 1px solid var(--n-30);
  display: grid;
  place-items: center;
  font-weight: var(--fw-700);
  color: var(--p-80);
  font-size: var(--fs-14);
}
.ent-facts {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--n-70);
}
.ent-facts b {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-500);
  color: var(--n-90);
  font-size: var(--fs-13);
}
.ent-facts .is-empty { color: var(--n-50); }
.ent-badges { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.ent-cta { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-end; }
.ent-cta .btn { width: 100%; }
/* a chip is content-sized, never stretched by the grid it sits in */
.ent > .score { justify-self: start; }

.ent--slot { grid-template-columns: 1fr auto auto; }
.ent--casino { grid-template-columns: 28px 40px 1fr auto auto; }
.ent--casino .ent-rank {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--n-50);
  text-align: center;
  font-size: var(--fs-13);
}
.ent--bonus { grid-template-columns: 1fr 190px; align-items: start; }
.ent--bonus .ent-body { min-width: 0; }

/* bonus code chip */
.code-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
  letter-spacing: 0.06em;
  background: var(--n-15);
  border: 1px dashed var(--n-40);
  border-radius: var(--r-4);
  padding: var(--s-1) var(--s-2);
  color: var(--n-90);
}
.code-chip--none { border-style: solid; color: var(--n-60); letter-spacing: 0; font-family: var(--font); }

/* --- tab nav -------------------------------------------------------------- */
.tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  background: rgba(11, 13, 17, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--n-30);
  margin: 0 0 var(--s-6);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: var(--s-3) var(--s-3);
  font-size: var(--fs-13);
  color: var(--n-60);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--n-90); text-decoration: none; }
.tabs a.is-on { color: var(--p-80); border-bottom-color: var(--p-80); }

/* --- filter bar ----------------------------------------------------------- */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: end;
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}
.filterbar .field { display: flex; flex-direction: column; gap: var(--s-1); }
.filterbar label,
.filters label {
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--n-60);
}
.filterbar select,
.filterbar input,
.filters select {
  background: var(--n-15);
  color: var(--n-90);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-2) var(--s-2);
  font-family: inherit;
  font-size: var(--fs-13);
  min-width: 130px;
}
.filterbar select:focus,
.filterbar input:focus { outline: 2px solid var(--p-60); outline-offset: 0; }
.filterbar .spacer { flex: 1 1 auto; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; margin-bottom: var(--s-5); }
.filters label { display: flex; flex-direction: column; gap: var(--s-1); }

/* --- slots index ---------------------------------------------------------- */
/* Eleven facets do not fit on a flex row, so the panel is a grid that collapses
   to one column on a phone. Everything else here reuses .data, .pager,
   .result-count and .pill rather than restyling them. */
.sx-filters {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.sx-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3);
}
.sx-filter-grid label { display: flex; flex-direction: column; gap: var(--s-1); }
.sx-filter-grid select,
.sx-filter-grid input[type="text"] {
  background: var(--n-15);
  color: var(--n-90);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-2);
  font-family: inherit;
  font-size: var(--fs-13);
  width: 100%;
}
.sx-filter-grid select:focus,
.sx-filter-grid input:focus { outline: 2px solid var(--p-60); outline-offset: 0; }

.sx-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.sx-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--n-80);
  text-transform: none;
  letter-spacing: 0;
}
.sx-actions { margin-left: auto; display: flex; gap: var(--s-2); }

.sx-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.sx-summary .result-count { margin-bottom: var(--s-2); }
.sx-reverse { font-size: var(--fs-12); color: var(--n-60); }
.sx-reverse:hover { color: var(--p-80); }

/* Says which filters exclude part of the catalogue. Deliberately prominent: a
   silently shortened result set is the same dishonesty as a guessed value. */
.sx-note {
  font-size: var(--fs-12);
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--r-4);
  padding: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2);
}

.sx-table td { vertical-align: top; }
.sx-title { min-width: 14rem; }
.game-title--plain { color: var(--n-70); font-weight: var(--fw-500); }
.sx-noreview {
  margin-left: var(--s-2);
  color: var(--n-50);
  font-style: italic;
}
.sx-variants {
  display: inline-block;
  margin-left: var(--s-1);
  font-size: var(--fs-11);
  font-family: var(--mono);
  color: var(--warn);
  white-space: nowrap;
}
.sx-flags { white-space: nowrap; }
.sx-flags .pill--sm + .pill--sm { margin-left: 2px; }
.sx-date { white-space: nowrap; font-family: var(--mono); font-size: var(--fs-12); }

@media (max-width: 720px) {
  .sx-actions { margin-left: 0; width: 100%; }
  .sx-table-wrap { margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); }
}

.result-count { color: var(--n-60); font-size: var(--fs-13); margin: 0 0 var(--s-3); }
.result-count b { color: var(--n-90); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-500); }

/* --- pagination ----------------------------------------------------------- */
.pager { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; margin: var(--s-6) 0; }
.pager a, .pager span {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--s-2);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  font-size: var(--fs-13);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--n-70);
}
.pager a:hover { border-color: var(--n-40); color: var(--n-90); text-decoration: none; }
.pager .is-on { background: var(--p-80); border-color: var(--p-80); color: var(--p-ink); font-weight: var(--fw-600); }
.pager .is-off { color: var(--n-50); border-color: var(--n-20); }
.pager .gap { border: 0; color: var(--n-50); }

/* --- breadcrumb ----------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--n-60);
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
}
.crumbs a { color: var(--n-60); }
.crumbs a:hover { color: var(--n-90); }
.crumbs li::after { content: "/"; margin-left: var(--s-1); color: var(--n-40); }
.crumbs li:last-child::after { content: none; }
.crumbs li[aria-current] { color: var(--n-90); }

/* --- freshness stamp ------------------------------------------------------ */
.fresh {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  color: var(--n-60);
}
.fresh .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ok); flex: none; }
.fresh--stale .dot { background: var(--warn); }
.fresh--stale { color: var(--warn); }
.fresh--none .dot { background: var(--n-50); }

/* --- verdict -------------------------------------------------------------- */
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-5) 0; }
.verdict-col {
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-3);
}
.verdict-col h4 {
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}
.verdict-col--good { border-top: 2px solid var(--ok); }
.verdict-col--good h4 { color: var(--ok); }
.verdict-col--bad { border-top: 2px solid var(--bad); }
.verdict-col--bad h4 { color: var(--bad); }
.verdict-col ul { margin: 0; padding-left: var(--s-4); color: var(--n-80); font-size: var(--fs-13); line-height: var(--lh-14); }
.verdict-col li { margin-bottom: var(--s-1); }
.verdict-col .none { color: var(--n-50); font-size: var(--fs-13); margin: 0; }

/* --- empty state ---------------------------------------------------------- */
.empty {
  border: 1px dashed var(--n-40);
  border-radius: var(--r-4);
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--n-60);
}
.empty h3 { color: var(--n-70); margin-bottom: var(--s-1); }
.empty p { margin: 0 auto; max-width: 32rem; font-size: var(--fs-13); }
.empty .btn { margin-top: var(--s-4); }

/* --- disclosure ----------------------------------------------------------- */
.disclose {
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-12);
  line-height: var(--lh-13);
  color: var(--n-70);
}
.disclose + .disclose { margin-top: var(--s-2); }
.disclose > summary {
  cursor: pointer;
  color: var(--n-90);
  font-weight: var(--fw-500);
  font-size: var(--fs-13);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before {
  content: "+";
  font-family: var(--mono);
  color: var(--n-60);
  width: 12px;
}
.disclose[open] > summary::before { content: "\2212"; }
.disclose > summary:hover { color: var(--p-80); }
.disclose p { margin: var(--s-2) 0 0; }
.disclose p:last-child { margin-bottom: var(--s-1); }

/* --- button --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  background: var(--p-80);
  color: var(--p-ink);
  font-weight: var(--fw-600);
  font-size: var(--fs-13);
  border: 1px solid var(--p-80);
  border-radius: var(--r-4);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--n-90); border-color: var(--n-40); }
.btn--ghost:hover { border-color: var(--n-50); filter: none; }
.btn--sm { padding: var(--s-1) var(--s-2); font-size: var(--fs-12); }
.btn--block { width: 100%; }

/* --- callout / prose / list ---------------------------------------------- */
.callout {
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-left: 2px solid var(--p-80);
  padding: var(--s-3);
  border-radius: 0 var(--r-4) var(--r-4) 0;
  color: var(--n-70);
  font-size: var(--fs-13);
}
.callout strong { color: var(--n-90); }
.callout p:last-child { margin-bottom: 0; }

.prose { max-width: var(--max-prose); font-size: var(--fs-14); line-height: 1.65; }
.prose p { color: var(--n-80); }
.prose h2 { margin: var(--s-8) 0 var(--s-3); }
.prose h3 { margin: var(--s-6) 0 var(--s-2); }
.prose ul, .prose ol { color: var(--n-80); padding-left: var(--s-5); }

.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--n-30);
  font-size: var(--fs-13);
}
.plain-list li:last-child { border-bottom: 0; }
.plain-list a { color: var(--n-90); font-weight: var(--fw-500); }

/* --- slot page hero ------------------------------------------------------- */
.slot-hero {
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  background: var(--n-10);
  background-size: cover;
  background-position: center;
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.slot-hero-inner { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-5); }
/* Studio tiles ship at 427x575, i.e. 1:1.35 portrait. The casino lobby in this
   workspace frames them with `padding: 135% 0 0` and fills the frame
   absolutely; same ratio here via aspect-ratio. Matching the source means the
   art fills the box with no crop and no empty space — a landscape frame gives
   you one or the other. */
.game-tile {
  aspect-ratio: 1 / 1.35;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-4);
  border: 1px solid var(--n-30);
  background: var(--n-15);
  display: block;
}
.slot-hero-art { width: 180px; height: auto; flex: none; }
.slot-hero-body { min-width: 0; }
.slot-hero-body h1 { margin-bottom: var(--s-3); }

/* the subject column of a comparison table, so the reader keeps their place */
table.data th.th-current { color: var(--p-80); }
table.data td.td-current { background: var(--p-soft); }
table.data th[scope="row"] {
  color: var(--n-60);
  font-weight: var(--fw-400);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-13);
  background: transparent;
}

/* --- legacy scoreboard (pre-Phase-1, still used by casino page) ---------- */
.scoreboard {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-6);
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
.bars { margin: 0; }
.bars > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-2); align-items: center; margin: var(--s-2) 0; }
.bars dt { margin: 0; color: var(--n-60); font-size: var(--fs-13); }
.bars dd { margin: 0; background: var(--n-20); height: 6px; border-radius: var(--r-full); overflow: hidden; }
.bars dd span { display: block; height: 100%; background: var(--p-80); }

/* --- legacy casino card (replaced by .ent--casino) ---------------------- */
.casino-card {
  display: grid;
  grid-template-columns: 36px 40px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  background: var(--n-10);
  border: 1px solid var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-3);
}
.casino-card-rank { text-align: center; }
.casino-card-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-4);
  background: var(--n-15);
  display: grid;
  place-items: center;
  font-weight: var(--fw-700);
  color: var(--p-80);
}
.casino-card h3 a { color: var(--n-90); }
.score-row { margin-top: var(--s-1); font-size: var(--fs-13); }
.game-title { color: var(--n-90); font-weight: var(--fw-600); }

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

.muted { color: var(--n-60); }
.small { font-size: var(--fs-12); line-height: var(--lh-12); }
.tiny { font-size: var(--fs-11); line-height: var(--lh-11); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-empty { color: var(--n-50); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--n-90);
}
.num.big { font-size: var(--fs-32); line-height: var(--lh-32); }
.num--pos { color: var(--ok); }
.num--neg { color: var(--bad); }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .grid-main-side, .grid-side-main { grid-template-columns: 1fr; }
  .grid-side-main > *:first-child { order: 2; }
}

@media (max-width: 800px) {
  h1 { font-size: var(--fs-24); line-height: var(--lh-24); }
  .grid-2, .scoreboard, .casino-card { grid-template-columns: 1fr; }
  .casino-card { grid-template-columns: 40px 1fr auto; }
  .casino-card-rank { display: none; }
  .nav { gap: var(--s-3); font-size: var(--fs-13); }
  .plain-list li { flex-direction: column; }
  .verdict { grid-template-columns: 1fr; }
  .ent--slot, .ent--bonus { grid-template-columns: 1fr; }
  .ent--casino { grid-template-columns: 40px 1fr auto; }
  .ent--casino .ent-rank { display: none; }
  .ent-cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ent-cta .btn { width: auto; }
  .foot-inner { flex-direction: column; }
  /* Portrait art stays beside the title on mobile — full width would push the
     score and facts below the fold. */
  .slot-hero-inner { gap: var(--s-3); padding: var(--s-3); align-items: flex-start; }
  .slot-hero-art { width: 108px; }
}

@media (max-width: 560px) {
  .wrap { width: calc(100% - var(--s-4)); }
  main.wrap { padding: var(--s-5) 0 var(--s-10); }
  .spec-card-row { grid-template-columns: 1fr; gap: 0; }
  .spec-card-row dt { font-size: var(--fs-12); }
  .score-bars > div { grid-template-columns: 72px 1fr 30px; }
  .ent--casino { grid-template-columns: 1fr; }
  .ent-mark { display: none; }
}

/* ==========================================================================
   STYLEGUIDE (dev only)
   ========================================================================== */

.sg-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.sg-toc a { font-size: var(--fs-12); border: 1px solid var(--n-30); border-radius: var(--r-4); padding: var(--s-1) var(--s-2); color: var(--n-70); }
.sg-toc a:hover { color: var(--n-90); border-color: var(--n-40); text-decoration: none; }
.sg-sec { margin: 0 0 var(--s-16); scroll-margin-top: 80px; }
.sg-note { color: var(--n-60); font-size: var(--fs-13); max-width: var(--max-prose); margin: 0 0 var(--s-4); }
.sg-demo {
  border: 1px dashed var(--n-30);
  border-radius: var(--r-4);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.sg-demo--block { display: block; }
.sg-demo--dark { background: var(--n-0); }
.sg-label {
  font-family: var(--mono);
  font-size: var(--fs-11);
  color: var(--n-50);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--s-2);
}
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.sg-swatch { border: 1px solid var(--n-30); border-radius: var(--r-4); overflow: hidden; }
.sg-swatch .chip { height: 44px; }
.sg-swatch .meta { padding: var(--s-1) var(--s-2); font-family: var(--mono); font-size: var(--fs-11); color: var(--n-60); }
.sg-scale { display: flex; flex-direction: column; gap: var(--s-2); }
.sg-scale-row { display: flex; align-items: baseline; gap: var(--s-4); border-bottom: 1px solid var(--n-20); padding-bottom: var(--s-2); }
.sg-scale-row .sg-label { width: 96px; flex: none; margin: 0; }
.sg-space { display: flex; align-items: end; gap: var(--s-2); flex-wrap: wrap; }
.sg-space-item { text-align: center; }
.sg-space-item .bar { background: var(--p-60); width: 100%; }