/* Launcher in the same theme as the games: yellow handheld body, black bezel, LCD-green tiles. */
:root { --page:#009688; --body:#f2cb1c; --body-edge:#c9a21a; --ink:#1b2210; --mid:#5e6b47; --lcd:#9ead86; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { touch-action: manipulation; margin:0; background:var(--page); color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height:100vh; min-height:100dvh; }
main { max-width: 480px; margin: 0 auto; min-height:100vh; min-height:100dvh; padding: 18px 14px 28px;
  background:var(--body); box-shadow: inset 0 0 0 3px var(--body-edge); }
h1 { margin:6px 0 4px; text-align:center; font-size:1.05rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
h1::before, h1::after { content:"▪▪▪"; font-size:.7em; letter-spacing:.1em; margin:0 .5em; vertical-align:middle; }
p.sub { text-align:center; margin:0 0 16px; font-size:.85rem; color:#5a4a08; }
.grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card { display:block; padding:12px 14px; background:var(--lcd); border:5px solid #000; border-radius:4px;
  color:var(--ink); text-decoration:none; box-shadow: 0 0 0 3px var(--body), 0 0 0 5px #000; margin:5px; }
.card:active, .card:focus-visible { background:var(--ink); color:var(--lcd); outline:none; }
.card:active p, .card:focus-visible p, .card:active .hi, .card:focus-visible .hi { color:var(--lcd); }
.card h2 { margin:0 0 4px; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; }
.card p { margin:0 0 8px; color:var(--mid); font-size:.8rem; min-height:2.4em; }
.card .hi { color:var(--ink); font-size:.75rem; font-weight:700; }
footer { margin-top:22px; text-align:center; color:#5a4a08; font-size:.75rem; }
footer a { color:inherit; }

/* Computers: wider launcher */
@media (min-width: 760px) {
  main { max-width: 960px; padding: 24px 28px 36px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}