:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6rem; padding: 2rem;
  font-family: -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #eef3f7;
  /* Note: the 2nd colour #0d2c46 was a 7-digit invalid value (#0d2c466) on the live site — fixed here.
     To match the old look exactly, revert to #16456e 0%, #0d2c466 0%, ... */
  background: radial-gradient(120% 120% at 50% 0%, #16456e 0%, #0d2c46 30%, #0b1e33 60%, #081627 100%);
}
h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: .04em; font-weight: 800; }
.sub { margin: 0; opacity: .7; font-size: .95rem; }
.games { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; width: 100%; max-width: 720px; }
a.card {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit;
  width: 320px; max-width: 100%; padding: 1.3rem 1.4rem; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
a.card:hover, a.card:active {
  transform: translateY(-3px); border-color: rgba(140,200,255,.7);
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
}
.card .name { font-size: 1.35rem; font-weight: 800; }
.card .desc { font-size: .92rem; opacity: .82; line-height: 1.5; }
.card .play { margin-top: .4rem; font-weight: 700; color: #8fd0ff; }
footer { opacity: .5; font-size: .8rem; }
footer a { color: inherit; }

/* content pages (privacy, about, …) — top-aligned readable column */
body.page { justify-content: flex-start; }
.prose { width: 100%; max-width: 720px; text-align: left; line-height: 1.7; }
.prose h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 0 0 .3rem; }
.prose h2 { font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
.prose a { color: #8fd0ff; }
.prose p, .prose li { opacity: .9; }
.prose .updated { opacity: .6; font-size: .85rem; margin-top: 0; }
.prose address { font-style: normal; opacity: .9; margin: 0 0 .9rem; }