/* ---------------------------------------------------------------
   Overflow Error – site styles
   A light, simple pixel look: hard 2px borders, offset block shadows,
   "Press Start 2P" for scores, labels and titles, Inter for reading.
   Colours come from the site logo (navy, slate blue, explosion orange).
   --------------------------------------------------------------- */

:root {
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-alt: #f6f8fb;
  --ink: #1f2540;
  --text: #2b3148;
  --muted: #5b6785;
  --line: #1f2540;
  --slate: #5d7398;
  --sky: #d5e0ee;
  --accent: #ff8a2b;
  --accent-soft: #ffe3cc;
  --spark: #ffd34d;
  --shadow: #1f2540;

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1080px;

  /* Scale of every score meter: 400 = full marks on the four 100-point categories.
     --range is the widest value a meter on the page has to fit; js/site.js sets it. */
  --scale: 400;
  --range: 700;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171c2e;
    --panel: #212842;
    --panel-alt: #1b2138;
    --ink: #eef2f8;
    --text: #dde3ee;
    --muted: #a3aec6;
    --line: #0d1020;
    --slate: #7f97bf;
    --sky: #2d3657;
    --accent: #ff9b45;
    --accent-soft: #4a3220;
    --spark: #ffd95c;
    --shadow: #0d1020;
  }
}

/* Lets the meter width animate when JS changes --v (Chromium, Safari, Firefox 128+). */
@property --v {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

*, *::before, *::after { box-sizing: border-box; }

/* the hidden attribute must win over display rules set on cards, images, tiers */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }
a:hover { color: var(--slate); }

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.pixel {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Hard-edged panel used for cards, score cards, hero art */
.panel {
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow);
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- header ---------- */

.site-header {
  background: var(--panel);
  border-bottom: 2px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.brand img {
  width: 36px;
  height: 36px;
  border: 2px solid var(--line);
}

.brand:hover { color: var(--ink); opacity: .8; }

.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

.site-nav a {
  font-family: var(--font-pixel);
  font-size: 10px;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 10px;
}

.site-nav a:hover { color: var(--ink); }

/* the pixel font has no arrow glyphs, so the external-link mark uses the body font */
.site-nav .ext { font-family: var(--font-body); font-size: 13px; margin-left: 4px; }
.site-nav a.is-active { color: var(--ink); border-bottom: 3px solid var(--accent); }

/* ---------- hero ---------- */

.hero {
  padding: 48px 0 32px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
}

.eyebrow {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--accent);
  margin: 0 0 16px;
}

.hero h1 {
  font-family: var(--font-pixel);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 20px;
}

.hero h1 .over {
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--ink);
}

.hero .lede {
  font-size: 18px;
  max-width: 560px;
  margin: 0 0 28px;
}

.hero-art {
  padding: 10px;
  background: var(--panel);
}

.hero-art img,
.hero-art canvas {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.hero-art canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* stat tiles */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.stat {
  min-width: 140px;
  padding: 12px 14px;
}

.stat .n {
  display: block;
  font-family: var(--font-pixel);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.2;
}

.stat .n.is-over { color: var(--accent); }

.stat .l {
  display: block;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- leaderboard ---------- */

.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 24px 0 18px;
}

.board-head h2 {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend li { display: flex; align-items: center; gap: 6px; }

.legend .swatch {
  width: 14px;
  height: 10px;
  border: 2px solid var(--line);
  background: var(--slate);
}

.legend .swatch.over { background: var(--accent); }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.filter-status {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  margin: -8px 0 20px;
}

/* chips: tags and filter buttons */
.tag {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1;
  text-decoration: none;
  color: var(--muted);
  background: var(--panel);
  border: 2px solid var(--line);
  padding: 6px 8px 5px;
  white-space: nowrap;
}

.tag:hover { color: var(--ink); background: var(--panel-alt); }

.tag.is-active {
  color: var(--ink);
  background: var(--spark);
  box-shadow: 2px 2px 0 var(--shadow);
}

.tag-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* tiers */
.board { list-style: none; margin: 0; padding: 0; }

.tier { margin: 0 0 32px; }

.tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding: 0 0 10px;
  border-bottom: 2px dashed var(--slate);
  margin-bottom: 16px;
}

.tier-name {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}

.tier-range {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  border: 2px solid var(--line);
  padding: 4px 6px 3px;
  background: var(--panel);
}

.tier-blurb {
  flex-basis: 100%;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.tier-overflow .tier-head { border-bottom-color: var(--accent); }

.tier-overflow .tier-name {
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--ink);
}

/* little pixel sparkles around the overflow tier label, like the ones in the logo */
.tier-overflow .tier-name::before,
.tier-overflow .tier-name::after {
  content: "\2726";
  color: var(--spark);
  text-shadow: none;
  font-size: 12px;
  margin: 0 8px;
  display: inline-block;
  animation: twinkle 2.4s steps(2) infinite;
}

.tier-overflow .tier-name::after { animation-delay: 1.2s; }

.tier-overflow .tier-range {
  color: var(--accent);
  border-color: var(--accent);
}

.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.tier-empty {
  border: 2px dashed var(--slate);
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 18px;
  text-align: center;
}

/* a game row */
.game {
  position: relative;
  display: grid;
  grid-template-columns: 44px 72px minmax(0, 1fr) auto;
  grid-template-areas:
    "rank icon head  total"
    "rank icon meter meter"
    "rank icon cats  cats";
  column-gap: 18px;
  row-gap: 10px;
  padding: 16px 18px 16px 16px;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}

.game:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow);
}

.game.is-over { border-color: var(--accent); }

.rank {
  grid-area: rank;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--muted);
  line-height: 1;
  padding-top: 6px;
}

.rank b { display: block; font-size: 20px; color: var(--ink); margin-top: 6px; font-weight: 400; }

.game.is-over .rank b { color: var(--accent); }

.game .icon {
  grid-area: icon;
  width: 72px;
  height: 72px;
  border: 2px solid var(--line);
  object-fit: cover;
  background: var(--panel-alt);
}

.game .head { grid-area: head; min-width: 0; }

.game h3 {
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
  color: var(--ink);
}

.game h3 a { text-decoration: none; }
.game h3 a::after { content: ""; position: absolute; inset: 0; }
.game h3 a:hover { color: var(--slate); }

.game .blurb {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.game .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.game .meta .tag { position: relative; z-index: 1; }

.game .total {
  grid-area: total;
  text-align: right;
  justify-self: end;
}

.total-num {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}

.total-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  margin-top: 8px;
}

.game.is-over .total-num {
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--ink);
  animation: glitch 7s steps(1) infinite;
}

.badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1;
  color: var(--panel);
  background: var(--accent);
  border: 2px solid var(--line);
  padding: 5px 6px 4px;
  margin-left: 8px;
  vertical-align: 3px;
}

@media (prefers-color-scheme: dark) { .badge { color: #1f2540; } }

.game .meter { grid-area: meter; }

.cats {
  grid-area: cats;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
}

.cats li { display: flex; gap: 6px; align-items: baseline; }
.cats b { font-weight: 400; color: var(--ink); }
.cats .over b { color: var(--accent); }

/* ---------- score meter ----------
   --scale is full marks (400 for totals, 100 for a category).
   --range is the largest value the meter has to fit (>= --scale).
   --v is the value. The track shows 0..scale; anything past it spills out
   in orange, so an overflow literally breaks the bar.                 */

.meter {
  position: relative;
  height: 16px;
  --scale: 400;
}

.meter .track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--scale) / var(--range) * 100%);
  border: 2px solid var(--line);
  background: var(--sky);
  overflow: hidden;
}

.meter .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(min(var(--v), var(--scale)) / var(--scale) * 100%);
  background: repeating-linear-gradient(90deg, var(--slate) 0 6px, transparent 6px 8px);
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}

.meter .over {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(var(--scale) / var(--range) * 100%);
  width: calc(max(var(--v) - var(--scale), 0) / var(--range) * 100%);
  border: 2px solid var(--line);
  border-left: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, var(--accent-soft) 6px 8px);
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
  animation: pulse 2.4s ease-in-out infinite;
}

.meter.is-over .track { border-right-style: dashed; }

/* ---------- animations ---------- */

@keyframes pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* A quick stutter in the first few frames, then still for the rest of the cycle. */
@keyframes glitch {
  0%   { transform: translate(0, 0);     text-shadow: 2px 2px 0 var(--ink); }
  1%   { transform: translate(-2px, 1px); text-shadow: 2px 0 var(--slate), -2px 0 var(--spark); }
  2%   { transform: translate(2px, -1px); text-shadow: -2px 0 var(--slate), 2px 0 var(--spark); }
  3%   { transform: translate(-1px, 0);   text-shadow: 2px 2px 0 var(--ink); }
  4%, 100% { transform: translate(0, 0); text-shadow: 2px 2px 0 var(--ink); }
}

.glitch-once { animation: glitch-once .45s steps(1) 1; }

@keyframes glitch-once {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3px, 2px); text-shadow: 3px 0 var(--slate), -3px 0 var(--spark); }
  40%  { transform: translate(3px, -2px); text-shadow: -3px 0 var(--slate), 3px 0 var(--spark); }
  60%  { transform: translate(-2px, -1px); text-shadow: 2px 0 var(--slate), -2px 0 var(--spark); }
  80%  { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- how-it-works strip (homepage) ---------- */

.how {
  margin: 8px 0 48px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 32px;
  align-items: center;
}

.how h2 {
  font-family: var(--font-pixel);
  font-size: 12px;
  margin: 0 0 10px;
  color: var(--ink);
}

.how p { margin: 0; color: var(--muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 12px 14px 11px;
  white-space: nowrap;
}

.btn:hover {
  color: var(--ink);
  background: var(--spark);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow);
}

.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }

.btn-primary { background: var(--accent); }

/* ---------- review page ---------- */

.page-title { margin: 40px 0 28px; }

.crumb {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 20px;
}

.crumb:hover { color: var(--ink); }

.page-title h1 {
  font-family: var(--font-pixel);
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
}

.page-title .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.page-title .meta > span:not(.tag-list) {
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 5px 7px 4px;
  border: 2px solid var(--slate);
  color: var(--slate);
}

.review-hero {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin: 0 0 40px;
}

.app-icon {
  width: 176px;
  height: 176px;
  padding: 10px;
  background: var(--panel);
}

.app-icon img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }

.app-icon.small-source img { image-rendering: pixelated; }

/* score card */
.scorecard { padding: 18px 20px 20px; }

.scorecard h2 {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--slate);
}

.scorecard table { width: 100%; border-collapse: collapse; }

.scorecard th,
.scorecard td { padding: 8px 0; text-align: left; vertical-align: middle; }

.scorecard th {
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
  width: 34%;
  padding-right: 12px;
}

.scorecard td.num {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--ink);
  width: 4ch;
  text-align: right;
  padding-right: 14px;
  font-variant-numeric: tabular-nums;
}

.scorecard tr.over td.num { color: var(--accent); }

.scorecard td.bar { width: auto; }
.scorecard td.bar .meter { --scale: 100; height: 14px; }

.scorecard tfoot th,
.scorecard tfoot td {
  border-top: 2px dashed var(--slate);
  padding-top: 14px;
}

.scorecard tfoot th { color: var(--ink); }

.scorecard tfoot td { text-align: left; width: auto; padding-right: 0; }

.scorecard tfoot .total-num { font-size: 28px; }

.scorecard tfoot .of {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--muted);
  margin-left: 6px;
}

.scorecard.is-over tfoot .total-num {
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--ink);
  animation: glitch 7s steps(1) infinite;
}

.scorecard .verdict {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* article body */
.post {
  display: grid;
  grid-template-columns: minmax(0, 720px);
}

.post-body h2 {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--ink);
  margin: 40px 0 12px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
  line-height: 1.6;
}

.post-body h2:first-child { margin-top: 0; }

.post-body p { margin: 0 0 1.1em; }
.post-body a { color: var(--slate); }
.post-body a:hover { color: var(--ink); }

.post-body figure { margin: 24px 0; }

.post-body figure img {
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow);
}

.post-body figcaption {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  margin-top: 12px;
}

/* phone screenshots: side by side, capped height */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0;
}

.shots figure { margin: 0; flex: 0 1 240px; }
.shots figure img { max-height: 520px; width: auto; }

.wide { margin: 24px 0; }

.embed { margin: 20px 0 28px; }
.embed iframe { display: block; width: 100%; border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }

sup.fn { font-size: 11px; line-height: 0; }
sup.fn a { text-decoration: none; color: var(--accent); padding: 0 2px; }

.footnotes {
  margin: 40px 0 0;
  padding: 16px 0 0 1.4em;
  border-top: 2px dashed var(--slate);
  font-size: 14px;
  color: var(--muted);
  word-break: break-word;
}

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
}

.store-links .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
}

.store-links img { width: 26px; height: 26px; }

.post-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 48px 0 56px;
  padding-top: 24px;
  border-top: 2px solid var(--line);
}

.note {
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 2px solid var(--line);
  margin: 0 0 24px;
  font-size: 15px;
}

/* methodology page */
.prose { max-width: 720px; margin-bottom: 56px; }

.prose h2 {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--ink);
  margin: 40px 0 12px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
  line-height: 1.6;
}

.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--slate); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
}

.cat-grid li { padding: 16px 18px; }

.cat-grid h3 {
  font-family: var(--font-pixel);
  font-size: 11px;
  margin: 0 0 10px;
  color: var(--ink);
}

.cat-grid p { margin: 0; font-size: 15px; color: var(--muted); }

.scale-demo { margin: 24px 0 8px; }
.scale-demo .meter { height: 18px; }

.scale-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--muted);
  margin-top: 8px;
}

/* 404 */
.oops { text-align: center; padding: 80px 0 100px; }
.oops .code {
  font-family: var(--font-pixel);
  font-size: clamp(40px, 10vw, 96px);
  color: var(--accent);
  text-shadow: 6px 6px 0 var(--ink);
  line-height: 1;
  margin: 0 0 24px;
  animation: glitch 7s steps(1) infinite;
}
.oops p { color: var(--muted); margin: 0 0 28px; }

/* ---------- footer ---------- */

main { flex: 1; }

.site-footer {
  border-top: 2px solid var(--line);
  background: var(--panel);
  margin-top: auto;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  min-height: 72px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 14px;
  color: var(--muted);
}

.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.footer-nav a {
  font-family: var(--font-pixel);
  font-size: 9px;
  text-decoration: none;
  color: var(--muted);
}

.footer-nav a:hover { color: var(--ink); }

/* dot between footer links so multi-word labels read as one item */
.footer-nav a + a::before {
  content: "\2022";
  color: var(--slate);
  margin-right: 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; gap: 28px; }
  .hero-art { max-width: 260px; }
  .how { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .site-header .container { flex-direction: column; align-items: flex-start; padding-top: 14px; padding-bottom: 10px; }
  .site-nav { justify-content: flex-start; margin-left: -10px; }
  .hero { padding-top: 32px; }

  .game {
    grid-template-columns: 32px 56px minmax(0, 1fr);
    grid-template-areas:
      "rank icon head"
      "total total total"
      "meter meter meter"
      "cats cats cats";
    column-gap: 12px;
    padding: 14px;
  }
  .game .icon { width: 56px; height: 56px; }
  .rank { font-size: 9px; }
  .rank b { font-size: 16px; }
  .game h3 { font-size: 12px; }
  .game .total { text-align: left; justify-self: start; display: flex; align-items: baseline; gap: 12px; }
  .total-label { margin-top: 0; }
  .total-num { font-size: 22px; text-align: left; }

  .footer-nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-nav a + a::before { content: none; }

  .review-hero { grid-template-columns: 1fr; gap: 24px; }
  .app-icon { width: 136px; height: 136px; }
  .scorecard th { width: 30%; font-size: 8px; }
  .shots { gap: 12px; }
  .shots figure { flex: 0 1 calc(50% - 6px); }
  .shots figure img { max-height: none; width: 100%; }
}