/* home.css — the Fuzzy Sports LANDING PAGE, and only that (2026-09-07).

   ⚠ IT LOADS AFTER /base.css AND ASSUMES IT. The palette, the document base, `.skip`, `.sr-only`
   and the focus ring all live there, shared with the legal pages and the game. Everything here is
   specific to choosing a game, which is why the file is short — if a rule in it would be wanted by
   a second game or by /privacy, it belongs in base.css instead.

   ⚠ IT DOES NOT REUSE THE GAME'S STYLESHEET. `/football-exchange/app.css` is a trading UI: dense
   rows, tabular numerals, up/down semantics. Coupling the front door to one game's layout is
   exactly the shape this whole restructure exists to remove.

   No inline <style> and no on*= handlers, same as everywhere else: the CSP forbids both, and the
   exemption is what makes a CSP stop being worth having. */

/* The landing page is a full-height column so the footer sits at the bottom of a short page
   rather than floating under two cards. Base sets the colours and family; this sets the layout. */
body { font-size:15px; line-height:1.55; display:flex; flex-direction:column; min-height:100vh; }

/* Base's header is the game's chrome (centred, 16px gap). The landing page has no controls in it,
   so the wordmark and the tagline sit on a shared baseline instead. */
header { align-items:baseline; gap:12px; padding:14px 22px; }
header .brand { font-size:16px; font-weight:700; letter-spacing:.2px; }
header .tag { font-size:12px; color:var(--dim); }

main { flex:1; width:100%; max-width:780px; margin:0 auto; padding:40px 22px 56px; }

.lede { font-size:20px; line-height:1.4; margin:0 0 8px; font-weight:600; }
.sub  { color:var(--dim); margin:0 0 36px; max-width:60ch; }

h2 { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--dim);
     margin:0 0 14px; font-weight:600; }

/* The game list. A card is a LINK when the game is playable and a plain block when it is not —
   an anchor that goes nowhere is a promise the page cannot keep, and screen readers announce it
   as actionable regardless of how it looks. */
.games { display:grid; gap:14px; margin:0 0 40px; }

.game {
  display:block; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); padding:18px 20px; color:inherit; text-decoration:none;
}
a.game:hover, a.game:focus-visible { border-color:var(--accent); }
.game .family { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--dim); }
.game h3 { margin:4px 0 6px; font-size:17px; font-weight:650; }
.game p { margin:0; color:var(--dim); font-size:14px; max-width:58ch; }

.game.soon { opacity:.62; }
.game.soon h3 { color:var(--dim); }

.pill {
  display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  border:1px solid var(--line); border-radius:999px; padding:2px 9px; margin-left:8px;
  vertical-align:2px; color:var(--dim); font-weight:600;
}
.pill.open { color:var(--up); border-color:var(--up); }

footer {
  border-top:1px solid var(--line); padding:18px 22px; color:var(--dim); font-size:13px;
  display:flex; gap:16px; flex-wrap:wrap;
}
footer a { color:var(--dim); }
footer a:hover { color:var(--accent); }
footer .spacer { flex:1; }