/* =========================================================================
   samyu.studio — shared design system

   One stylesheet for the whole domain: the studio pages, the per-game pages,
   and the privacy/support pages the app stores link to. The legal pages are
   part of the brand here rather than an afterthought, because they are the
   pages Apple, Google and actual players are most likely to open first.

   Fonts are self-hosted (three files, 66 KB total). Luckiest Guy is the
   typeface the game itself renders in, so the site and the product speak in
   the same voice.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Luckiest Guy';
  src: url('../fonts/luckiest-guy.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700; /* variable: one file covers the range */
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  --ink: #0b0e14;
  --ink-2: #111725;
  --ink-3: #1a2133;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #e9eaf0;
  --muted: #949cb2;
  --gold: #f2c14e;
  --gold-hot: #ffd873;
  --red: #d63b31;
  --sky: #11a6fd;

  --display: 'Luckiest Guy', 'Arial Black', system-ui, sans-serif;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --shell: 1120px;
  --pad: clamp(20px, 5vw, 40px);
  --radius: 18px;
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--gold-hot);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 99;
  background: var(--gold);
  color: #000;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
}

/* --------------------------------------------------------------- type ---- */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
h1.display {
  font-size: clamp(2.9rem, 10vw, 6.1rem);
}
h2.display {
  font-size: clamp(2rem, 5.6vw, 3.4rem);
}
h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(1.03rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 54ch;
  margin: 0;
}
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 160px;
}
.gold {
  color: var(--gold);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--gold);
  color: #10131b;
}
.btn-primary:hover {
  background: var(--gold-hot);
  color: #10131b;
  transform: translateY(-2px);
}
.btn-ghost {
  border-color: var(--line-2);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 14, 20, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.wordmark:hover {
  color: var(--gold);
}
.mark {
  width: 22px;
  height: 22px;
  flex: none;
}
.nav-links {
  display: flex;
  gap: 24px;
  font-size: 0.9rem;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--text);
}
@media (max-width: 560px) {
  .nav-links {
    gap: 16px;
    font-size: 0.84rem;
  }
  .nav-links .hide-sm {
    display: none;
  }
}

/* -------------------------------------------------------------- sections -- */
section {
  padding-block: clamp(64px, 9vw, 116px);
  position: relative;
}
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------------------------------------------------------------- cards -- */
.card {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.card p {
  color: var(--muted);
  margin: 0;
  font-size: 0.97rem;
}
.grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.num {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 14px;
  opacity: 0.85;
}

/* --------------------------------------------------------------- footer -- */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 56px 44px;
  background: #080a10;
}
.foot-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 700px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
.foot h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 700;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.foot a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.93rem;
}
.foot a:hover {
  color: var(--gold);
  text-decoration: underline;
}
.fineprint {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #6b7386;
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 70ch;
}

/* ============================ legal + support pages ====================== */
/* Same shell as the rest of the site, tuned for long-form reading. The words
   inside are unchanged from what the store listings were reviewed against. */
.prose {
  max-width: 68ch;
  padding-block: clamp(48px, 7vw, 84px);
}
.prose h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1;
  margin: 0 0 10px;
}
.prose h2 {
  font-size: 1.16rem;
  margin: 2.4em 0 0.5em;
  letter-spacing: -0.01em;
}
.prose p {
  color: #c3c8d6;
  margin: 0 0 1.05em;
}
.prose strong {
  color: var(--text);
}
.prose .updated {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose code {
  background: var(--ink-3);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.85em;
}
.crumb {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 26px;
}
.crumb:hover {
  color: var(--gold);
}