@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-display: swap; src: url(assets/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --night: #12152b;
  --panel: #1b1a35;
  --violet: #3a2b57;
  --ink: #f3ede1;
  --muted: #b3a9c9;
  --suit: #ff5a36;
  --amber: #ffb547;
  --rose: #c2607a;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --body: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font: 500 1.25rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); }
img { display: block; max-width: 100%; height: auto; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--violet); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.logo { font: 900 1.6rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.logo span { color: var(--suit); }
.site-header nav { display: flex; gap: 24px; }
.site-header nav a { color: var(--muted); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--ink); }

/* Game feature */
.game {
  padding-block: 64px;
  background: radial-gradient(ellipse at 70% 0%, #3a2b57 0%, transparent 60%);
}
.game .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.game img { border-radius: 8px; border: 1px solid #5a4a3a; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.eyebrow { margin: 0; color: var(--amber); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .95rem; }
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; margin: 8px 0 16px; }
.game h2 {
  font-size: clamp(3.5rem, 10vw, 6rem);
  background: linear-gradient(#fff8e6, #ffd38a 42%, #ff5a36 50%, #ff7a3a 53%, #c2607a 78%, #5a2f6a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-size: 1.6rem; font-weight: 700; margin: 0 0 16px; }
.badge { display: inline-block; padding: 8px 18px; border: 2px solid var(--suit); border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; }

/* About */
.page { padding-block: 64px; }
.page h1 { font-size: clamp(3rem, 8vw, 4.5rem); }
.page h2 { font-size: 2rem; margin-top: 40px; color: var(--amber); }
.page p, .page ul { max-width: 40em; }

/* Footer */
.site-footer { border-top: 1px solid var(--violet); color: var(--muted); font-size: 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px; }

@media (max-width: 720px) {
  .game { padding-block: 40px; }
  .game .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .game img { max-width: min(100%, 420px); margin-inline: auto; }
  .site-header nav { gap: 16px; }
}