/* ==========================================================================
   PlayGraph styles
   Every color, type size, space and radius used anywhere lives in the token
   block below; the other stylesheets only refer to these names.

   The look is a game shelf, not a landing page. Cover art and real numbers
   carry the color; the chrome around them stays quiet. So: one solid orange
   for actions, links and stars, green only for verified hours, hairline rules
   instead of shadows, tight corners, no gradients except where art fades into
   the canvas. Headings are Archivo set narrow and heavy, like box art and
   scoreboards; reading text is Plex Sans; every number is Plex Mono.
   ========================================================================== */

@font-face { font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url("fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/plex-mono-500.woff2") format("woff2"); }

:root {
  /* Surfaces, lightest last. */
  --bg:#0f1317;
  --bg-rgb:15,19,23;            /* for art that fades into the canvas */
  --surface:#171d23;
  --surface-2:#20282f;
  --surface-3:#2b353e;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.16);
  --scrim:rgba(5,8,11,0.8);
  --badge:rgba(10,13,16,0.86);

  /* Text. White for titles and values, slate for running text, dusk for
     metadata. Muted is 5:1 on --bg, 4.6:1 on --surface. */
  --text:#ffffff;
  --text-body:#a3b4c2;
  --text-muted:#728a9c;

  /* Orange: primary actions, links, the active tab, rating stars. 7.4:1 on --bg. */
  --accent:#ff7a00;
  --accent-hover:#ff9433;
  --accent-soft:rgba(255,122,0,0.12);
  --on-accent:#0f1317;

  /* Meaning, not decoration. Green is verified Steam hours and nothing else. */
  --verified:#00e054;
  --verified-ink:#04210f;       /* text on a solid green hours block */
  --verified-line:rgba(0,224,84,0.4);
  --danger:#ff5c7a;
  --series:#00b4d8;
  --series-hover:#3cc8e6;

  /* Only things that really float get a shadow: covers, dialogs, menus. */
  --shadow-cover:0 1px 2px rgba(0,0,0,0.4),0 8px 18px -10px rgba(0,0,0,0.7);
  --shadow-float:0 24px 60px -20px rgba(0,0,0,0.85);

  --font-display:"Archivo","IBM Plex Sans",system-ui,sans-serif;
  --display-stretch:84%;        /* narrow headings: more words per line, more punch */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --text-xs:11px;
  --text-sm:12px;
  --text-ui:13px;
  --text-md:15px;
  --text-lg:18px;
  --text-xl:24px;
  --text-2xl:32px;
  --text-3xl:42px;
  --text-hero:clamp(40px,6vw,76px);
  --leading:1.45;
  --leading-tight:1.08;
  --tracking-tight:-0.01em;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --gutter:var(--space-5);
  --content-max:1200px;
  --header-h:56px;

  /* One control: every button, chip, select and toggle is this tall. */
  --control-h:34px;
  --control-pad:var(--space-3);
  --radius:4px;      /* buttons, inputs, chips */
  --radius-lg:6px;   /* panels, dialogs */
  --radius-sm:3px;   /* covers, badges, chart bars */
  --grid-gap:16px;

  --dur:140ms;
  --ease:ease-out;

  color-scheme:dark;
}

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

/* Scrollbars: a slim pill in the surface colors, so it sits back instead of
   the browser's light default. Chromium and Safari use the ::-webkit-scrollbar
   rules; the transparent border insets the thumb so it floats, and the track
   shows whatever surface is behind it, page or dialog. Firefox has no such
   pseudo-elements and gets the standard properties instead (Chromium would
   let those override the rules above). */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--surface-3) padding-box;
  border:3px solid transparent; border-radius:999px; min-height:48px;
}
::-webkit-scrollbar-thumb:hover { background:var(--text-muted) padding-box; border-width:2px; }
::-webkit-scrollbar-thumb:active { background:var(--text-body) padding-box; border-width:2px; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent; }
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--text-md);
  line-height:var(--leading);
  -webkit-font-smoothing:antialiased;
}

/* Layout lives on .shell, never on body. Browser extensions inject elements
   as body children and must not be able to push the app sideways. */
.shell { min-height:100vh; }

h1, h2, h3, h4 {
  margin:0; color:var(--text); font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800;
  letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); text-wrap:balance;
}
p { margin:0; }
img { max-width:100%; }
/* Form controls take the page's type and color instead of the UA's, so a
   bare <button> never renders as a grey system box. */
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

/* Digits only: hours, ratings, counts. Units and dates stay in the text face. */
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
.date { font-variant-numeric:tabular-nums; }

/* Verified Steam hours, the one number this site exists for. Green text on a
   green hairline wherever it appears, so the cover art stays the loudest thing. */
.hours-block {
  display:inline-block; font-weight:500; line-height:1.3;
  color:var(--verified); border:1px solid var(--verified-line); border-radius:var(--radius-sm); padding:0 6px; white-space:nowrap;
}

/* Any rule that sets a display value beats the UA stylesheet's [hidden] rule,
   so every element the app hides with .hidden = true would keep showing. The
   app toggles visibility with the hidden property throughout, so this has to
   win. */
[hidden] { display:none !important; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:var(--space-2); top:calc(var(--space-8) * -1); z-index:100;
  display:inline-flex; align-items:center; height:var(--control-h); padding:0 var(--control-pad);
  background:var(--accent); color:var(--on-accent); font-size:var(--text-ui); font-weight:600;
  border-radius:var(--radius);
}
.skip-link:focus { top:var(--space-2); }

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

/* ============================ HEADER ============================ */
/* One row: brand, sections, search, your counts, account. The active
   section is underlined in orange, flush with the header's bottom edge. */

.workspace { min-width:0; display:flex; flex-direction:column; }

.topbar { border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:20; }
.topbar-inner {
  display:flex; align-items:center; gap:var(--space-5);
  width:100%; max-width:calc(var(--content-max) + var(--gutter) * 2); margin:0 auto;
  height:var(--header-h); padding:0 var(--gutter);
}

.brand {
  display:flex; align-items:center; gap:var(--space-2); flex:none;
  font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-lg); letter-spacing:0;
  color:var(--text);
}
.brand:hover { text-decoration:none; }
.brand img { width:22px; height:22px; flex:none; }
.beta {
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; line-height:1; color:var(--text-muted);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:2px 4px; text-transform:lowercase;
}

.nav-item {
  display:flex; align-items:center; gap:var(--space-2); height:var(--control-h);
  background:none; border:0; border-radius:var(--radius);
  color:var(--text-body); font-size:var(--text-ui); font-weight:500;
  padding:0 var(--space-2); cursor:pointer; white-space:nowrap;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-item:hover { color:var(--text); }
.nav-item.active { color:var(--text); }
.nav-count { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); }
.topnav { display:flex; align-items:stretch; gap:var(--space-4); align-self:stretch; }
.topnav .nav-item { height:auto; padding:0 2px; border-radius:0; border-bottom:2px solid transparent; margin-bottom:-1px; }
.topnav .nav-item.active { border-bottom-color:var(--accent); }

/* Your counts. Only shown signed in, once the library has games. */
.backlog { display:flex; align-items:baseline; gap:var(--space-4); margin:0; font-size:var(--text-xs); flex:none; }
.backlog > div { display:flex; align-items:baseline; gap:var(--space-1); }
.backlog dt { color:var(--text-muted); }
.backlog dd { margin:0; color:var(--text); }
.backlog dd.played { color:var(--verified); }

.search {
  flex:1; max-width:300px; margin-left:auto; height:var(--control-h); display:flex; align-items:center; gap:var(--space-2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:0 var(--space-2) 0 var(--space-3);
  transition:border-color var(--dur) var(--ease);
}
.search:hover { border-color:var(--line-strong); }
/* The input drops its own outline; the whole field shows focus instead. */
.search:focus-within { border-color:var(--accent); outline:1px solid var(--accent); }
.search svg { width:16px; height:16px; stroke:var(--text-muted); fill:none; stroke-width:2; flex:none; }
.search input {
  flex:1; min-width:0; height:100%; background:none; border:0; outline:none; padding:0;
  color:var(--text); font-size:var(--text-ui);
}
.search input::placeholder { color:var(--text-muted); }
.search kbd {
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); line-height:1;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px 6px;
}
.account { display:flex; align-items:center; gap:var(--space-3); }
.account-manage { display:flex; align-items:center; gap:var(--space-2); color:var(--text); }
.account-manage:hover { text-decoration:none; }
.account-manage:hover .account-name { text-decoration:underline; text-underline-offset:3px; }
.account-name { font-size:var(--text-ui); font-weight:500; white-space:nowrap; }
.signout { white-space:nowrap; }
.avatar {
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--surface-3);
  display:grid; place-items:center;
  font-weight:600; font-size:var(--text-sm); color:var(--text);
}

/* ============================ BUTTONS AND LINKS ============================ */

.button {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--control-h); padding:0 var(--control-pad);
  font-size:var(--text-ui); font-weight:500; line-height:1; white-space:nowrap;
  border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text);
  cursor:pointer; text-decoration:none;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.button:hover { border-color:var(--text-muted); text-decoration:none; }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.button.large { --control-h:44px; padding:0 var(--space-5); font-size:var(--text-md); }
.button.secondary { background:transparent; }
.button.secondary:hover { background:var(--surface-2); }
.button:disabled { opacity:0.6; cursor:default; }

/* Actions that read as links: same color and hover as an <a>. */
.text-button, .signout {
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent); font-size:var(--text-ui); font-weight:500; text-align:left;
}
.text-button:hover, .signout:hover { text-decoration:underline; text-underline-offset:3px; }
.signout { color:var(--text-muted); }
.signout:hover { color:var(--text); }

/* ============================ MAIN ============================ */

.workspace > main {
  width:100%; max-width:calc(var(--content-max) + var(--gutter) * 2);
  margin:0 auto; padding:var(--space-6) var(--gutter) var(--space-8);
  display:flex; flex-direction:column; gap:var(--space-7); min-width:0;
}

.notice {
  border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface);
  border-radius:var(--radius); padding:var(--space-3) var(--space-4); font-size:var(--text-ui);
}
.notice.error { border-color:var(--line); border-left-color:var(--danger); color:var(--danger); }

/* ---- page heading ---- */
.page-heading { position:relative; display:flex; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap; }
.page-heading > div { flex:1 1 380px; min-width:0; }
.page-heading h1 { font-size:var(--text-3xl); }
.subtitle { margin-top:var(--space-2); font-size:var(--text-md); color:var(--text-body); max-width:62ch; text-wrap:pretty; }
.page-heading > button { margin-left:auto; }
/* Your most played game's wide art behind the heading. It fades to the
   canvas on the left and the bottom, so the title sits on calm, dark color. */
.page-heading.has-hero {
  isolation:isolate; overflow:hidden; min-height:240px;
  padding:var(--space-7) var(--space-6) var(--space-5); border-radius:var(--radius-lg); background:var(--surface);
}
.page-heading.has-hero .subtitle { color:var(--text); opacity:0.8; }
.hero-art { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-art.soft { filter:blur(28px) saturate(1.3); transform:scale(1.2); }
.page-heading.has-hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(var(--bg-rgb),0.94) 0%,rgba(var(--bg-rgb),0.6) 50%,rgba(var(--bg-rgb),0.1) 100%),
    linear-gradient(0deg,rgba(var(--bg-rgb),0.9) 0%,transparent 55%);
}

/* ---- summary numbers ----
   One strip split by hairlines: the dividers are the 1px gap showing the
   container's line color, and the tile count always divides the column
   count, so no row is left ragged. */
.summary {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line);
}
.stat { display:flex; flex-direction:column; gap:2px; padding:var(--space-4) var(--space-5) var(--space-4) 0; background:var(--bg); min-width:0; }
.stat + .stat { padding-left:var(--space-5); }
.stat-label { font-size:var(--text-sm); color:var(--text-muted); }
.stat-value { font-family:var(--font-mono); font-weight:500; font-size:var(--text-2xl); line-height:1.1; color:var(--text); letter-spacing:-0.02em; }
.stat-unit { font-family:var(--font-sans); font-weight:500; font-size:var(--text-ui); color:var(--text-muted); margin-left:var(--space-1); letter-spacing:0; }
.stat-note { font-size:var(--text-sm); color:var(--text-muted); }

/* ---- section heads: sentence case over a full-width rule ---- */
.section-heading {
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-bottom:var(--space-5); padding-bottom:var(--space-3); border-bottom:1px solid var(--line-strong);
}
.section-heading h2 { font-size:var(--text-xl); }
.heading-with-count { display:flex; align-items:baseline; gap:var(--space-2); }
.count-label { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-muted); }
.display-controls { margin-left:auto; display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.collection-note { margin:0 0 var(--space-4); font-size:var(--text-ui); color:var(--text-muted); }

/* ---- chips, selects, toggles: the same control as .button ---- */
.filters { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; margin-bottom:var(--space-5); }
.filter-chips { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; height:var(--control-h); padding:0 var(--control-pad);
  font-size:var(--text-ui); font-weight:500; white-space:nowrap;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text-body); cursor:pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { color:var(--text); border-color:var(--line-strong); }
.chip.selected { background:var(--text); border-color:var(--text); color:var(--bg); }
.chip:disabled { opacity:0.6; cursor:default; }

/* Platforms. PC is the only source today; the consoles say so instead of
   pretending to filter. aria-disabled keeps them focusable and announced. */
.platform-switch { display:flex; gap:var(--space-1); flex-wrap:wrap; }
.platform-switch .chip { gap:var(--space-2); }
.chip.in-dev { color:var(--text-muted); border-style:dashed; cursor:help; }
.chip.in-dev:hover { color:var(--text-body); border-color:var(--line-strong); }
.dev-tag { font-family:var(--font-mono); font-size:var(--text-xs); font-weight:400; line-height:1; color:var(--text-muted); }

/* Games / Software. Changes WHAT the shelf holds; the chips beside it filter
   what is already there. Different job, different control. */
.kind-switch { display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; flex:none; }
.kind-switch .nav-item {
  width:auto; height:calc(var(--control-h) - 2px); border-left:0; border-radius:0; padding:0 var(--control-pad);
}
.kind-switch .nav-item + .nav-item { border-left:1px solid var(--line); }
.kind-switch .nav-item.active { background:var(--surface-3); }

select {
  height:var(--control-h); padding:0 var(--space-3);
  font-size:var(--text-ui); font-weight:500; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); cursor:pointer;
}
select:hover { border-color:var(--line-strong); }
select:disabled { color:var(--text-muted); cursor:default; }
.view-toggle { display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.view-toggle button {
  width:var(--control-h); height:calc(var(--control-h) - 2px);
  background:none; border:0; color:var(--text-muted); cursor:pointer; font-size:var(--text-ui);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.view-toggle button + button { border-left:1px solid var(--line); }
.view-toggle button:hover { color:var(--text); }
.view-toggle button[aria-pressed="true"] { background:var(--surface-3); color:var(--text); }

/* ============================ THE GRID ============================ */
/* Covers sit on the bare canvas, no card around them. Hover lifts the cover
   a little and brightens the art; that's all. */

.game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--space-6) var(--grid-gap);
}

.game-card { min-width:0; }
.game-card > button {
  display:flex; flex-direction:column; gap:var(--space-2); width:100%;
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  color:inherit; border-radius:var(--radius);
}

.cover {
  position:relative; display:block; aspect-ratio:2/3;
  border-radius:var(--radius-sm); overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow-cover);
  transition:transform var(--dur) var(--ease);
}
.game-card > button:hover .cover, .game-card > button:focus-visible .cover { transform:translateY(-3px); }
.game-card > button:focus-visible { outline:none; }
.game-card > button:focus-visible .cover { outline:2px solid var(--accent); outline-offset:2px; }
/* A faint keyline drawn over the art so dark covers keep their edge. */
.cover::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; outline:1px solid var(--line); outline-offset:-1px; pointer-events:none; }
.cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:filter var(--dur) var(--ease); }
.game-card > button:hover .cover img, .game-card > button:focus-visible .cover img { filter:brightness(1.1); }
.cover img.header-fallback { object-position:center; }
/* No art at all: the title, set like a plain box spine. */
.cover-placeholder {
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding:var(--space-3); border-top:3px solid var(--surface-3);
  font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-md); line-height:var(--leading-tight); color:var(--text);
  background:var(--surface-2); overflow-wrap:anywhere;
}
.cover-badge {
  position:absolute; top:var(--space-2); left:var(--space-2); z-index:3;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; line-height:1;
  padding:3px 5px; border-radius:var(--radius-sm);
  background:var(--badge); color:var(--text);
}

/* Two lines are reserved whether or not the title needs them, so the hours
   line up across a row instead of stepping up and down. */
.game-name {
  font-weight:600; font-size:var(--text-ui); line-height:1.2; letter-spacing:0; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(var(--text-ui) * 1.2 * 2);
}
.game-meta {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-2); font-size:var(--text-xs); color:var(--text-muted);
}
.genre-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; }
.game-meta > .hours { flex:none; white-space:nowrap; }
.game-meta .played { color:var(--verified); }

/* ---- compact list view ---- */
.game-list { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.game-list .game-card { border-bottom:1px solid var(--line); }
.game-list .game-card > button { flex-direction:row; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-1); border-radius:0; }
.game-list .game-card > button:hover { background:var(--surface); }
.game-list .game-card > button:hover .cover { transform:none; }
.game-list .cover { width:40px; flex:none; }
.game-list .cover-badge, .game-list .cover-placeholder { display:none; }
.game-list .game-name { font-size:var(--text-md); -webkit-line-clamp:1; flex:1; min-height:0; }
.game-list .game-meta { flex:none; gap:var(--space-4); }

/* ---- empty + load more ---- */
.empty-message {
  grid-column:1/-1; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2);
  border-block:1px solid var(--line); padding:var(--space-6) 0; color:var(--text-muted); font-size:var(--text-md);
}
.empty-message strong { font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-xl); color:var(--text); }
.empty-message .button { margin-top:var(--space-2); }
.load-more { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); }
.helper { font-size:var(--text-sm); color:var(--text-muted); }
.muted { color:var(--text-muted); }

/* ============================ WELCOME ============================ */
/* The signed-out front door. A band of real covers runs across the top and
   fades into the canvas; the headline sits where the fade ends. Below it,
   the latest real reviews, because those show what the site is better than
   any feature list could. */

.welcome { display:flex; flex-direction:column; gap:var(--space-7); }
/* The front door: one row of covers, then the pitch and a single button. */
.welcome-hero { display:flex; flex-direction:column; gap:var(--space-6); }
.welcome-wall { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:var(--space-2); }
.wall-row { display:contents; }
.wall-row:nth-child(n+2) img { display:none; }
.wall-row img {
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; display:block;
  border-radius:var(--radius-sm); background:var(--surface);
}
.welcome-copy { max-width:720px; display:flex; flex-direction:column; align-items:flex-start; }
.welcome-copy h2 { font-size:var(--text-3xl); font-weight:800; line-height:var(--leading-tight); margin-bottom:var(--space-3); }
.welcome-copy > p { margin-bottom:var(--space-5); color:var(--text-body); font-size:var(--text-lg); max-width:52ch; text-wrap:pretty; }
.welcome-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.welcome .helper { display:block; margin-top:var(--space-4); }

/* Latest reviews on the front door: rows split by hairlines, like a diary. */
.front-reviews ol { list-style:none; margin:0; padding:0; }
.front-review {
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--space-4);
  padding:var(--space-4) 0; border-bottom:1px solid var(--line);
}
.front-review .cover { width:56px; }
.front-review > button { padding:0; border:0; background:none; cursor:pointer; align-self:start; border-radius:var(--radius-sm); }
.front-review-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-3); }
.front-review-title {
  font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-lg); line-height:var(--leading-tight);
  color:var(--text); background:none; border:0; padding:0; cursor:pointer; text-align:left;
}
.front-review-title:hover { color:var(--accent); }
.front-review-body {
  margin-top:var(--space-1); color:var(--text-body); max-width:72ch; overflow-wrap:anywhere; white-space:pre-wrap;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.front-review-by { margin-top:var(--space-1); font-size:var(--text-sm); color:var(--text-muted); }
.front-review .rating-star { --star:14px; }

/* ============================ FOOTER ============================ */

.workspace > main > footer {
  display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--space-5);
  font-size:var(--text-sm); color:var(--text-muted);
}
.footer-brand { display:flex; align-items:center; gap:var(--space-2); color:var(--text-body); font-weight:500; }
.footer-brand img { width:16px; height:16px; }
.legal-notice { flex-basis:100%; margin:0; font-size:var(--text-xs); color:var(--text-muted); }
.legal-notice a { color:inherit; }

.noscript {
  border:1px solid var(--danger); border-radius:var(--radius);
  padding:var(--space-3); margin:var(--space-5); color:var(--danger); font-size:var(--text-ui);
}

/* ============================ MOBILE TAB BAR ============================ */

.tabbar { display:none; }

/* ============================ RESPONSIVE ============================ */

@media (max-width:1100px) {
  .backlog { display:none; }
  .summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(odd) { padding-left:0; }
  .welcome-wall { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .wall-row img:nth-child(n+8) { display:none; }
}

@media (max-width:860px) {
  :root { --gutter:var(--space-4); }
  .topnav, .beta { display:none; }
  .topbar-inner { gap:var(--space-3); }
  .brand { font-size:0; gap:0; }
  .workspace > main { padding-bottom:calc(var(--space-8) + var(--space-7) + env(safe-area-inset-bottom,0px)); gap:var(--space-6); }
  .search { max-width:none; margin-left:0; }
  .search kbd { display:none; }
  .account-name { display:none; }
  .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4) var(--space-2); }
  .game-name { font-size:var(--text-sm); min-height:calc(var(--text-sm) * 1.2 * 2); }
  .genre-text { display:none; }
  .page-heading h1 { font-size:var(--text-2xl); }
  .stat-value { font-size:var(--text-xl); }
  .page-heading.has-hero { min-height:180px; padding:var(--space-6) var(--space-4) var(--space-4); }
  .welcome-copy h2 { font-size:var(--text-2xl); }
  .welcome-wall { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .wall-row img:nth-child(n+6) { display:none; }
  .welcome-copy > p { font-size:var(--text-md); }
  .display-controls { width:100%; margin-left:0; }

  .tabbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    border-top:1px solid var(--line); background:var(--bg);
    padding:0 var(--space-2) env(safe-area-inset-bottom,0px);
  }
  .tabbar .nav-item {
    flex:1; justify-content:center; height:var(--space-7); border-radius:0;
    border-left:0; border-top:2px solid transparent;
    font-size:var(--text-sm); text-align:center;
  }
  .tabbar .nav-item.active { color:var(--text); border-top-color:var(--accent); }
}

@media (max-width:420px) {
  .topbar-inner { gap:var(--space-2); }
  .account .button { padding:0 var(--space-3); }
}

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