/* The landing (`/`): the game's own theme (shared/theme.css), keys and card (shared/design-system.css), laid out as a page.
   No colour or font name here — only the theme's variables. */
/* the game shell pins html/body to the viewport (design-system.css); a page scrolls and its text is selectable */
html, body { height: auto; min-height: 100%; overflow: visible; overflow-x: hidden; user-select: text; }
html { background: var(--wg); }
body { margin: 0; min-height: 100dvh; color: var(--wy); font: 500 var(--fs-body)/1.5 var(--ui); -webkit-font-smoothing: antialiased;
  background: repeating-linear-gradient(180deg, transparent 0 88px, color-mix(in srgb, var(--ink) 22%, transparent) 88px 176px), radial-gradient(120% 60% at 50% 0, var(--panel) 0, transparent 70%), var(--wg); }
.land { width: min(100%, 880px); margin: 0 auto; padding: var(--s6, 32px) var(--s4) var(--s5); display: grid; gap: 56px; }
.land a:not(.key) { color: var(--wo); }
.land-hero { display: grid; justify-items: center; gap: var(--s4); padding-top: var(--s5); text-align: center; }
.land .logo { margin: 0; font-size: clamp(88px, 26vw, 152px); }
.land .logo span { display: block; color: var(--gold); }
.land-tag { max-width: 30ch; margin: 0; font-size: var(--fs-lead); color: var(--soft); }
.land-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); width: 100%; }
.land-cta .key { flex: 1 1 200px; max-width: 320px; text-decoration: none; }
.land-note { margin: 0; font-size: var(--fs-small); color: var(--dim); }
.land-sec { display: grid; gap: var(--s4); justify-items: center; }
.land-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-align: center; }
.land-cards { display: flex; justify-content: center; gap: var(--s3); }
.land-cards .pc-w { width: min(132px, calc((100vw - 2 * var(--s4) - 3 * var(--s3)) / 4)); }   /* four across, even on a phone */
.land-cap { max-width: 56ch; margin: 0; text-align: center; color: var(--dim); }
.land-steps { display: grid; gap: var(--s3); width: 100%; margin: 0; padding: 0; list-style: none; }
.land-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border: var(--outline); border-radius: var(--r-md); background: var(--panel); }
.land-n { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--gold); color: var(--ink); font-family: var(--num); font-size: 32px; line-height: 1; }
.land-steps h3 { margin: 0 0 var(--s1, 4px); font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: .02em; text-transform: uppercase; }
.land-steps p { margin: 0; color: var(--dim); }
.land-foot { display: flex; justify-content: center; gap: var(--s5); padding-bottom: var(--s4); font-size: var(--fs-small); }
.land-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); }
@media (min-width: 720px) { .land-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.key:focus-visible, .land a:focus-visible { outline: 3px solid var(--win); outline-offset: 3px; }