/* Colours are the app's (app/src/theme.ts). The page is dark only, like the game. */
:root {
  --bg: #0D0E10;
  --line: #24272C;
  --line-strong: #3A3E45;
  --fg: #ECEDEE;
  --fg2: #8A8F98;
  --accent: #8E7CFF;
  --accent-strong: #A898FF;
  color-scheme: dark;
}

@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  padding: 0 20px;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fg); }
a:hover { color: var(--accent-strong); }

/* Tracked mono caps, as the app labels STAGE, NEXT and BUFFER. */
.lbl {
  margin: 0 0 20px;
  font: 500 12px/1.4 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* Hero */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon {
  width: 96px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 22px;
}

.wm {
  margin: 36px 0 0;
  font-weight: 300;
  font-size: clamp(48px, 12vw, 72px);
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

.tagline {
  max-width: 22ch;
  margin: 28px 0 0;
  font-size: 24px;
  line-height: 1.35;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.play, .soon {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border-radius: 6px;
}

.play {
  padding: 0 24px;
  background: var(--accent);
  color: var(--bg);
  font: 500 13px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.play:hover { background: var(--accent-strong); color: var(--bg); }
.play:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.soon {
  padding: 0 20px;
  border: 1px solid var(--line);
  color: var(--fg2);
  font-size: 15px;
}

/* Screenshots: a fan, the middle one in front. */

.shots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  margin: 88px auto 0;
  overflow: hidden;
}

.shots img {
  flex: none;
  height: auto;
  border: 1px solid var(--line);
}
.shots .far { width: 200px; border-radius: 20px; opacity: 0.55; }
.shots .near { width: 230px; border-radius: 22px; opacity: 0.8; }
.shots .front { width: 270px; border-radius: 26px; border-color: var(--line-strong); }

/* Details */

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  max-width: 960px;
  margin: 104px auto 0;
}

.rules {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg2);
}
.rules li { padding-top: 18px; border-top: 1px solid var(--line); }
.rules strong { font-weight: 400; color: var(--fg); }

.specials {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  margin: 0;
}
.specials dt, .specials dd { padding: 12px 0; border-top: 1px solid var(--line); }
.specials dd { margin: 0; color: var(--fg2); }

.close {
  max-width: 640px;
  margin: 104px auto 0;
  text-align: center;
}
.close p { margin: 0; color: var(--fg2); }
.close .sign {
  margin-top: 56px;
  color: var(--fg);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.15;
}

/* Footer */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  max-width: 960px;
  margin: 120px auto 0;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
  font: 500 12px/1.4 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot a { color: var(--fg2); text-decoration: none; }
.foot a:hover { color: var(--fg); }

@media (max-width: 760px) {
  body { padding: 0 16px; }
  .hero { padding-top: 64px; }
  .tagline { font-size: 21px; }
  .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .play, .soon { justify-content: center; }

  .shots { margin-top: 56px; gap: 12px; }
  .shots .far { display: none; }
  .shots .near { width: 120px; border-radius: 14px; }
  .shots .front { width: 150px; border-radius: 16px; }

  .details { margin-top: 72px; gap: 48px; }
  .specials { column-gap: 16px; }
  .close { margin-top: 72px; }
  .close .sign { font-size: 30px; }
  .foot { margin-top: 80px; }
}