/* Wheel Block site: the game's look (sky blue, navy ink, gold, Lilita One). */
@font-face {
  font-family: "Lilita One";
  src: url("/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --sky-top: #5cbcff;
  --sky-bottom: #2465d8;
  --ink: #1d1446;
  --gold: #ffd23f;
  --panel: #2f6fe0;
  --soft: #cfe6ff;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { background: var(--sky-bottom); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%) fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

a { color: var(--gold); }

h1, h2, .title, .button, nav a {
  font-family: "Lilita One", "Arial Rounded MT Bold", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* The wordmark: WHEEL in gold, BLOCK in white, with the game's navy outline. */
.title {
  margin: 8px 0 4px;
  font-size: clamp(44px, 12vw, 76px);
  line-height: 1.05;
  text-align: center;
  -webkit-text-stroke: 0.08em var(--ink);
  paint-order: stroke fill;
}
.title .gold { color: var(--gold); }

.hero { text-align: center; padding-top: 16px; }
.hero img { width: min(300px, 70vw); height: auto; }
.tagline { font-size: 20px; color: var(--soft); margin: 6px 0 24px; }

.card {
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 28px;
  padding: 20px 22px;
  margin: 20px 0;
  box-shadow: 0 8px 0 rgba(13, 32, 90, 0.35);
}
.card h2 { margin: 0 0 8px; font-size: 26px; }
.card p { margin: 8px 0; }

.button {
  display: inline-block;
  padding: 12px 26px;
  margin: 6px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: #3ddc84;
  color: var(--white);
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 5px 0 rgba(13, 32, 90, 0.45);
  max-width: 100%; /* Wraps on narrow phones instead of overflowing the page. */
  white-space: normal;
}
.button.soon { background: #6b6f86; cursor: default; }

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 32px;
}
nav a { color: var(--white); font-size: 19px; text-decoration: none; }
nav a:hover { color: var(--gold); }

.doc h1 { font-size: 40px; margin: 8px 0; -webkit-text-stroke: 0.06em var(--ink); paint-order: stroke fill; }
.doc h2 { font-size: 24px; margin-top: 28px; }
.doc .meta { color: var(--soft); }
.doc ul { padding-left: 22px; }

footer { text-align: center; color: var(--soft); font-size: 14px; margin-top: 28px; }