/* ==========================================================================
   Word Search — landing page
   --------------------------------------------------------------------------
   Every color, radius and motion value below is lifted from the game:
     lib/ui/theme/wordiano_tokens.dart   (WrdColors, WrdRadius)
     lib/ui/theme/app_theme.dart         (boardFoundWordPalette)
     lib/ui/theme/design_tokens.dart     (AppMotion)
     lib/ui/widgets/letter_grid.dart     (keycap board)
     lib/ui/screens/main_menu_screen.dart (3D title, PLAY button, W-O-R-D tiles)
     tools/generate_playstore_assets_v2.py (store-art background, chips, tiles)
   ========================================================================== */

/* ---------- Fonts (bundled with the game, licenses in assets/fonts) -------- */
@font-face {
  font-family: "Titan One";
  src: url("../assets/fonts/TitanOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Luckiest Guy";
  src: url("../assets/fonts/LuckiestGuy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces: WrdColors + the store art's gradient stops */
  --bg-void: #0e0928;
  --bg-night: #110a2e;
  --bg-ink: #1a0f44;
  --bg-deep: #1a0a4e;
  --bg-mid: #2b1b6b;
  --bg-card: #3a2580;
  --bg-card-light: #4b329a;
  --bg-border: #5a40b8;
  --bezel: #100a2a;

  /* Text */
  --text: #ffffff;
  --text-soft: #c2b8e6;   /* store-art subtitle lavender */
  --text-muted: #b9abff;  /* WrdColors.hudSubfg */

  /* Board keys */
  --key-face: #6b50d8;      /* keyFaceTop */
  --key-face-alt: #5f44c9;  /* lerp(keyFaceTop, keyFaceBottom, .35) */
  --key-edge: #2a1770;      /* keyEdge */
  --key-sheen: rgba(255, 255, 255, 0.2);
  --key-ink: #ffffff;
  --key-ink-bright: #140b26; /* boardInkOnBright */

  /* Live selection and hint: the action accent */
  --action-top: #4cd3ee;
  --action-bottom: #0e8fb4;
  --action-edge: #075c77;
  --action-on: #03303d;
  --select-face: #36bbda;   /* lerp(actionTop, actionBottom, .35) */
  --select-edge: #1f6c7e;

  /* boardFoundWordPalette, each with its lip (face darkened 42%) */
  --found-0: #3fbfb4; --found-0-edge: #256f68;
  --found-1: #f2874e; --found-1-edge: #8c4e2d;
  --found-2: #a585f0; --found-2-edge: #604d8b;
  --found-3: #e8538a; --found-3-edge: #873050;
  --found-4: #4f92e8; --found-4-edge: #2e5587;
  --found-5: #86c34a; --found-5-edge: #4e712b;
  --found-6: #f2b322; --found-6-edge: #8c6814;
  --found-7: #b2938a; --found-7-edge: #675550;

  /* Wallet gold */
  --gold: #ffd33a;
  --gold-dim: #f8a100;
  --gold-shadow: #c47000;

  /* Home screen: 3D title and PLAY button */
  --title-gold: #fbbf24;
  --title-gold-edge: #ea580c;
  --title-stroke: #4a3a87;
  --title-silver-edge: #9ca3af;
  --play-top: #ee4b94;
  --play-bottom: #d6246e;
  --play-edge: #9d174d;

  /* Store-art accents (one per screenshot) */
  --pink: #ff4e8a;
  --cyan: #48cae2;
  --green: #38ca78;
  --amber: #ffc83b;
  --orange: #ff922e;
  --blue: #4a90fa;
  --purple: #966cff;
  --magenta: #ff60c8;
  --teal: #6fe9dc;

  /* Default section accent */
  --accent: var(--amber);
  --accent-rgb: 255 200 59;

  /* Type */
  --font-display: "Titan One", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
  --font-tile: "Luckiest Guy", "Titan One", "Arial Black", system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape: WrdRadius */
  --r-btn: 18px;
  --r-card: 20px;
  --r-modal: 28px;
  --r-tile: 14px;
  --r-chip: 16px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 72px;

  /* Motion: AppMotion */
  --t-fast: 150ms;
  --t-med: 260ms;
  --t-slow: 440ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-night);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--action-top);
  outline-offset: 3px;
}

::selection {
  background: rgb(76 211 238 / 0.35);
}

/* ---------- Utilities ---------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-chip);
  background: var(--action-top);
  color: var(--action-on);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Headings size themselves to the column they sit in. */
.cq {
  container-type: inline-size;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Sections ----------------------------------------------------- */
.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  overflow: hidden;
}

/* Decorations may hang past the edges vertically, never sideways. */
@supports (overflow: clip) {
  .section {
    overflow: visible;
    overflow-x: clip;
  }
}

/* A soft wash of the section's accent, like each store screenshot's glow. */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 45% at var(--glow-x, 85%) var(--glow-y, 30%), rgb(var(--accent-rgb) / 0.14), transparent 70%),
    radial-gradient(45% 40% at var(--glow-x2, 10%) var(--glow-y2, 80%), rgb(96 62 190 / 0.3), transparent 70%);
}

.section-head {
  max-width: 760px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lead {
  margin-inline: auto;
}

/* Single-column grids may never grow wider than the screen; the wider
   layouts below override this at their breakpoints. */
.hero__inner,
.intro__grid,
.showcase__grid,
.feature-grid,
.steps,
.try__grid,
.experience__grid,
.cta-panel,
.people,
.footer__top {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Eyebrow (store-art chip with a glowing dot) ------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 12px;
  border: 2px solid rgb(var(--accent-rgb) / 0.75);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.9);
}

/* ---------- Two-tone headline (white line + accent line + bar) ----------- */
.headline {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.65rem, 1.05rem + 2.6vw, 3.1rem);
  font-size: clamp(1.65rem, 8.6cqi, 3.1rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.headline__line,
.headline__accent {
  display: block;
}

.headline__line {
  color: var(--text);
  text-shadow: 0 3px 0 rgb(20 10 60 / 0.55), 0 0 32px rgb(124 92 224 / 0.45);
}

.headline__accent {
  color: var(--accent);
  text-shadow: 0 3px 0 rgb(20 10 60 / 0.55), 0 0 36px rgb(var(--accent-rgb) / 0.5);
}

.headline::after {
  content: "";
  display: block;
  width: 84px;
  height: 8px;
  margin-top: 20px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 0.75);
}

.section-head--center .headline::after {
  margin-inline: auto;
}

.lead {
  max-width: 60ch;
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--text-soft);
}

/* ---------- 3D candy button (Wrd3dButton / home PLAY button) ------------- */
.btn {
  --face-top: var(--play-top);
  --face-bottom: var(--play-bottom);
  --edge: var(--play-edge);
  --ink: #ffffff;
  --lift: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--face-top), var(--face-bottom));
  box-shadow:
    0 var(--lift) 0 var(--edge),
    0 calc(var(--lift) + 12px) 26px -10px rgb(0 0 0 / 0.6),
    inset 0 2px 0 rgb(255 255 255 / 0.35);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    filter var(--t-fast) var(--ease-out);
}

/* Gloss across the upper half, as the game's foregroundDecoration does. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 52%);
}

/* The home screen's shine sweep, on hover only. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.32) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 120% 0;
  transition: background-position 700ms var(--ease-out);
}

.btn > * {
  position: relative;
}

.btn .icon {
  font-size: 1.25em;
}

@media (hover: hover) {
  .btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
      0 calc(var(--lift) + 1px) 0 var(--edge),
      0 calc(var(--lift) + 16px) 30px -10px rgb(0 0 0 / 0.65),
      inset 0 2px 0 rgb(255 255 255 / 0.35);
  }

  .btn:hover::after {
    background-position: -20% 0;
  }
}

.btn:active {
  transform: translateY(calc(var(--lift) - 2px));
  box-shadow:
    0 2px 0 var(--edge),
    0 6px 14px -6px rgb(0 0 0 / 0.5),
    inset 0 2px 0 rgb(255 255 255 / 0.3);
}

.btn:disabled {
  cursor: default;
  filter: saturate(0.2) brightness(0.8);
}

.btn--ghost {
  --face-top: rgb(255 255 255 / 0.13);
  --face-bottom: rgb(255 255 255 / 0.06);
  --edge: rgb(0 0 0 / 0.35);
  border: 1px solid rgb(255 255 255 / 0.3);
  text-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--cyan {
  --face-top: var(--action-top);
  --face-bottom: var(--action-bottom);
  --edge: var(--action-edge);
  --ink: var(--action-on);
  text-shadow: none;
}

.btn--linkedin {
  --face-top: #1f7ed8;
  --face-bottom: #0a66c2;
  --edge: #06427f;
}

.btn--lg {
  --lift: 7px;
  min-height: 62px;
  padding: 0 30px;
  border-radius: 22px;
  font-size: 1.2rem;
}

.btn--sm {
  --lift: 4px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 0.95rem;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color var(--t-fast), opacity var(--t-fast);
}

.icon-btn:hover {
  background: rgb(255 255 255 / 0.18);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Store-art chips (outlined pill + dot or arrow) --------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  --chip-rgb: var(--accent-rgb);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 16px 6px 12px;
  border: 2px solid rgb(var(--chip-rgb) / 0.75);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.chip::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: rgb(var(--chip-rgb));
  box-shadow: 0 0 10px rgb(var(--chip-rgb) / 0.8);
}

.chip--arrow::before {
  display: none;
}

.chip .icon {
  font-size: 1.15rem;
  color: rgb(var(--chip-rgb));
}

.rot-90 { transform: rotate(90deg); }
.rot-45 { transform: rotate(45deg); }
.rot-180 { transform: rotate(180deg); }

/* ---------- 3D letter tile (store art + home W-O-R-D row) ---------------- */
.tile {
  --size: 64px;
  --c: #ff4e8a;
  --c-top: #ff83ad;
  --c-edge: #942d50;
  --c-glow: rgb(255 78 138 / 0.5);
  --rot: 0deg;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 26%;
  background: linear-gradient(180deg, var(--c-top), var(--c) 85%);
  box-shadow:
    0 calc(var(--size) * 0.11) 0 var(--c-edge),
    0 calc(var(--size) * 0.11 + 10px) 24px -6px rgb(0 0 0 / 0.55),
    0 0 calc(var(--size) * 0.45) calc(var(--size) * -0.05) var(--c-glow);
  color: #ffffff;
  font-family: var(--font-tile);
  font-size: calc(var(--size) * 0.56);
  line-height: 1;
  text-shadow: 0 calc(var(--size) * 0.06) 0 rgb(0 0 0 / 0.3);
  transform: rotate(var(--rot));
  pointer-events: none;
  user-select: none;
}

.tile::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 14%;
  right: 14%;
  height: 24%;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.2);
}

.tile > span {
  position: relative;
  transform: translateY(0.1em);
}

.tile--pink    { --c: #ff4e8a; --c-top: #ff83ad; --c-edge: #942d50; --c-glow: rgb(255 78 138 / 0.5); }
.tile--gold    { --c: #ffc83b; --c-top: #ffd976; --c-edge: #947422; --c-glow: rgb(255 200 59 / 0.45); }
.tile--green   { --c: #38ca78; --c-top: #74daa1; --c-edge: #207546; --c-glow: rgb(56 202 120 / 0.45); }
.tile--cyan    { --c: #48cae2; --c-top: #7fdaeb; --c-edge: #2a7583; --c-glow: rgb(72 202 226 / 0.45); }
.tile--blue    { --c: #3b82f6; --c-top: #76a8f9; --c-edge: #224b8f; --c-glow: rgb(59 130 246 / 0.5); }
.tile--purple  { --c: #9333ea; --c-top: #b470f0; --c-edge: #551e88; --c-glow: rgb(147 51 234 / 0.5); }
.tile--red     { --c: #ef4444; --c-top: #f47c7c; --c-edge: #8b2727; --c-glow: rgb(239 68 68 / 0.45); }
.tile--orange  { --c: #f97316; --c-top: #fb9d5c; --c-edge: #90430d; --c-glow: rgb(249 115 22 / 0.45); }
.tile--violet  { --c: #966cff; --c-top: #b698ff; --c-edge: #573f94; --c-glow: rgb(150 108 255 / 0.5); }

/* ---------- Sparkle (store-art four-point star) -------------------------- */
.sparkle {
  position: absolute;
  width: var(--s, 22px);
  height: var(--s, 22px);
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.7));
  pointer-events: none;
}

.sparkle--gold {
  color: var(--amber);
  filter: drop-shadow(0 0 6px rgb(255 200 59 / 0.8));
}

/* ---------- Device frame (the store art's card: bezel + ring + hairline) - */
.device {
  --glow-rgb: 124 92 255;
  position: relative;
  padding: 7px;
  border-radius: 30px;
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.3),
    0 32px 60px -20px rgb(0 0 0 / 0.8),
    0 0 72px -10px rgb(var(--glow-rgb) / 0.55);
}

.device img {
  width: 100%;
  border-radius: 23px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
}

.device--sm {
  padding: 5px;
  border-radius: 22px;
}

.device--sm img {
  border-radius: 17px;
}

/* Tag hanging off a device (figcaption) */
.device-tag {
  position: absolute;
  left: 50%;
  bottom: -16px;
  translate: -50% 0;
  padding: 5px 14px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--r-pill);
  background: rgb(25 14 60 / 0.92);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.8);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgb(14 9 40 / 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition:
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: rgb(90 64 184 / 0.35);
  background: rgb(14 9 40 / 0.88);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.8);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 10px rgb(80 60 220 / 0.5));
}

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav {
  display: none;
}

.nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.nav a:hover {
  color: var(--text);
  background: rgb(255 255 255 / 0.08);
}

.header__cta .icon {
  display: none;
}

@media (min-width: 480px) {
  .header__cta .icon {
    display: block;
  }
}

@media (min-width: 1100px) {
  .nav {
    display: block;
  }
}

@media (max-width: 359px) {
  .brand__name {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  --accent: var(--amber);
  --accent-rgb: 255 200 59;
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 6vw, 88px) 0 var(--section-y);
  overflow: hidden;
}

@supports (overflow: clip) {
  .hero {
    overflow: visible;
    overflow-x: clip;
  }
}

/* The store art's background: violet bloom, pink and cyan glows. */
.hero::before {
  content: "";
  position: absolute;
  inset: calc(var(--header-h) * -1) 0 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgb(96 62 190 / 0.6), transparent 70%),
    radial-gradient(38% 45% at 78% 52%, rgb(255 78 138 / 0.22), transparent 70%),
    radial-gradient(30% 35% at 96% 4%, rgb(86 196 224 / 0.2), transparent 70%),
    linear-gradient(180deg, var(--bg-void) 0%, #1c1152 55%, var(--bg-night) 100%);
}

/* Star field, twinkling gently (opacity only). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 24px 36px, rgb(255 255 255 / 0.9), transparent),
    radial-gradient(1px 1px at 92px 128px, rgb(255 255 255 / 0.8), transparent),
    radial-gradient(2px 2px at 168px 64px, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(1px 1px at 210px 190px, rgb(255 255 255 / 0.8), transparent),
    radial-gradient(1.5px 1.5px at 56px 214px, rgb(185 171 255 / 0.9), transparent);
  background-size: 240px 240px;
  opacity: 0.35;
  animation: twinkle 7s ease-in-out infinite alternate;
}

/* Whisper-faint letter-tile texture, as in the store screenshots. */
.tile-texture {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Crect x='7' y='7' width='78' height='78' rx='20' fill='%23ffffff' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: 92px 92px;
}

.hero__texture {
  top: 0;
  left: 0;
  width: 46%;
  height: 70%;
  -webkit-mask-image: radial-gradient(75% 75% at 0% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(75% 75% at 0% 0%, #000 20%, transparent 75%);
}

.hero__inner {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 40px;
  }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2rem, 1rem + 3.4vw, 3.7rem);
  font-size: clamp(2rem, 10.6cqi, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* The eyebrow pill is the H1's first line (its kicker). It stays block-level
   so the title's large line height doesn't stretch it. */
.hero__kicker {
  display: flex;
  width: fit-content;
  margin-bottom: 22px;
}

.hero__headline {
  display: block;
}

/* The home screen's extruded title: stroke + stacked edge + drop shadow. */
.title-3d {
  display: block;
  -webkit-text-stroke: 2px var(--title-stroke);
  paint-order: stroke fill;
}

.title-3d--white {
  color: #ffffff;
  text-shadow:
    0 0.017em 0 var(--title-silver-edge),
    0 0.034em 0 var(--title-silver-edge),
    0 0.051em 0 var(--title-silver-edge),
    0 0.068em 0 var(--title-silver-edge),
    0 0.085em 0 var(--title-silver-edge),
    0 0.1em 0 var(--title-silver-edge),
    0 0.16em 0.28em rgb(0 0 0 / 0.6);
}

.title-3d--gold {
  margin-top: 0.08em;
  color: var(--title-gold);
  text-shadow:
    0 0.017em 0 var(--title-gold-edge),
    0 0.034em 0 var(--title-gold-edge),
    0 0.051em 0 var(--title-gold-edge),
    0 0.068em 0 var(--title-gold-edge),
    0 0.085em 0 var(--title-gold-edge),
    0 0.1em 0 var(--title-gold-edge),
    0 0.16em 0.28em rgb(0 0 0 / 0.6),
    0 0 0.6em rgb(251 191 36 / 0.25);
}

.hero .lead {
  margin-top: 26px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
  margin-top: 34px;
}

.hero .chips {
  margin-top: 30px;
}

/* ---------- Hero artwork: tilted solved board + Daily phone + tiles ------ */
.hero-art {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 1;
  container-type: inline-size;
}

.hero-art__board {
  position: absolute;
  top: 3%;
  right: 1%;
  width: 76%;
  padding: 8px;
  border-radius: 30px;
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.3),
    0 44px 80px -24px rgb(0 0 0 / 0.85),
    0 0 110px -8px rgb(72 202 226 / 0.5);
  transform: rotate(-6deg);
}

.hero-art__board img {
  width: 100%;
  border-radius: 23px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
}

.hero-art__phone {
  --glow-rgb: 255 200 59;
  position: absolute;
  left: 0;
  bottom: 1%;
  z-index: 2;
  width: 37%;
  transform: rotate(5deg);
}

.hero-art .tile {
  z-index: 3;
  --size: 60px;
}

@supports (width: 1cqi) {
  .hero-art .tile {
    --size: 11cqi;
  }
}

.hero-art .t-1 { top: 0; left: 5%; --rot: -12deg; }
.hero-art .t-2 { top: -3%; right: -1%; --rot: 10deg; }
.hero-art .t-3 { bottom: 6%; right: 3%; --rot: -8deg; }
.hero-art .t-4 { bottom: 1%; left: 45%; --rot: 12deg; }

.hero-art .sparkle.s-1 { top: 10%; left: 26%; --s: 20px; }
.hero-art .sparkle.s-2 { top: 19%; left: 3%; --s: 16px; }
.hero-art .sparkle.s-3 { bottom: 20%; right: 0; --s: 18px; }

/* ==========================================================================
   Game introduction
   ========================================================================== */
.intro {
  --accent: var(--pink);
  --accent-rgb: 255 78 138;
  --glow-x: 90%;
  --glow-y: 50%;
  --glow-x2: 0%;
  --glow-y2: 20%;
}

.intro__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }
}

.intro__text p + p {
  margin-top: 16px;
}

/* Facts as board keys: violet faces, two of them "found". */
.fact-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact-key {
  --face: var(--key-face);
  --edge: var(--key-edge);
  --ink: #ffffff;
  --ink-soft: rgb(255 255 255 / 0.86);
  position: relative;
  padding: clamp(18px, 3vw, 26px) clamp(16px, 2.6vw, 24px) clamp(20px, 3vw, 28px);
  border-radius: 22px;
  background: var(--face);
  box-shadow:
    0 7px 0 var(--edge),
    0 22px 34px -16px rgb(0 0 0 / 0.7);
  color: var(--ink);
}

.fact-key::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 12%;
  right: 12%;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--key-sheen);
}

.fact-key:nth-child(2) {
  --face: var(--found-0);
  --edge: var(--found-0-edge);
  --ink: var(--key-ink-bright);
  --ink-soft: rgb(20 11 38 / 0.85);
}

.fact-key:nth-child(3) {
  --face: var(--key-face-alt);
}

.fact-key:nth-child(4) {
  --face: var(--found-3);
  --edge: var(--found-3-edge);
  --ink: var(--key-ink-bright);
  --ink-soft: rgb(20 11 38 / 0.85);
}

.fact-key__value {
  position: relative;
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.08;
  text-wrap: balance;
}

/* Titan One has no arrow glyph, so the arrow is the icon sprite's. */
.fact-key__value .icon {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-inline: 0.04em;
  vertical-align: -0.06em;
}

.fact-key__label {
  position: relative;
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ==========================================================================
   Gameplay showcase
   ========================================================================== */
.showcase {
  --accent: var(--cyan);
  --accent-rgb: 72 202 226;
  --glow-x: 70%;
  --glow-y: 50%;
  --glow-x2: 5%;
  --glow-y2: 90%;
}

.showcase__grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 1024px) {
  .showcase__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }
}

.showcase .chips {
  margin-top: 30px;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  aspect-ratio: 0.9;
}

@media (min-width: 640px) {
  .stage {
    aspect-ratio: 1.05;
  }
}

/* A swipe lane running behind the phones, like the icon's highlight. */
.stage__lane {
  position: absolute;
  top: 44%;
  left: -6%;
  width: 112%;
  height: 12%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgb(76 211 238 / 0), rgb(76 211 238 / 0.32) 30%, rgb(76 211 238 / 0.32) 70%, rgb(76 211 238 / 0));
  box-shadow: 0 0 60px rgb(76 211 238 / 0.25);
  transform: rotate(-24deg);
  pointer-events: none;
}

.stage__phone {
  position: absolute;
}

.stage__phone--main {
  --glow-rgb: 72 202 226;
  top: 2%;
  left: 22%;
  z-index: 3;
  width: 56%;
}

.stage__phone--left,
.stage__phone--right {
  top: 14%;
  z-index: 1;
  width: 40%;
}

.stage__phone--left {
  --glow-rgb: 56 202 120;
  left: -4%;
  transform: rotate(-7deg);
}

.stage__phone--right {
  --glow-rgb: 255 146 46;
  right: -4%;
  transform: rotate(7deg);
}

@media (min-width: 640px) {
  .stage__phone--main {
    top: 3%;
    left: 28%;
    width: 44%;
  }

  .stage__phone--left,
  .stage__phone--right {
    width: 34%;
  }

  .stage__phone--left {
    top: 15%;
    left: 1%;
  }

  .stage__phone--right {
    top: 17%;
    right: 1%;
  }
}

.stage .tile {
  z-index: 4;
  --size: 52px;
}

.stage .t-1 { top: 0; left: 12%; --rot: -10deg; }
.stage .t-2 { bottom: 6%; right: 8%; --rot: 9deg; }

/* ==========================================================================
   Features
   ========================================================================== */
.features {
  --accent: var(--green);
  --accent-rgb: 56 202 120;
  --glow-x: 15%;
  --glow-y: 15%;
  --glow-x2: 95%;
  --glow-y2: 85%;
  background: linear-gradient(180deg, transparent, rgb(43 27 107 / 0.35) 20%, rgb(43 27 107 / 0.35) 80%, transparent);
}

.feature-grid {
  display: grid;
  gap: 20px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

/* The in-game Statistics cards: tinted panel, colored rim, gradient disc. */
.feature {
  --f: 59 130 246;
  --f1: #3b82f6;
  --f2: #1d4ed8;
  --f-ink: #ffffff;
  position: relative;
  height: 100%;
  padding: 28px 26px 30px;
  border: 1.5px solid rgb(var(--f) / 0.45);
  border-radius: var(--r-card);
  background:
    linear-gradient(160deg, rgb(var(--f) / 0.2), rgb(var(--f) / 0.05) 60%),
    rgb(26 15 68 / 0.8);
  box-shadow: 0 24px 44px -28px rgb(0 0 0 / 0.8);
  transition:
    transform var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
}

@media (hover: hover) {
  .feature:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--f) / 0.85);
  }
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--f1), var(--f2));
  box-shadow:
    0 10px 20px -8px rgb(var(--f) / 0.8),
    inset 0 2px 0 rgb(255 255 255 / 0.3);
  color: var(--f-ink);
  font-size: 28px;
}

.feature h3 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
}

.feature p {
  margin-top: 8px;
  color: var(--text-soft);
}

.feature--pink   { --f: 236 72 153;  --f1: #ec4899; --f2: #be185d; }
.feature--green  { --f: 16 185 129;  --f1: #10b981; --f2: #047857; }
.feature--gold   { --f: 255 211 58;  --f1: #ffd33a; --f2: #f8a100; --f-ink: #3f2800; }
.feature--cyan   { --f: 76 211 238;  --f1: #4cd3ee; --f2: #0e8fb4; --f-ink: #03303d; }
.feature--orange { --f: 245 158 11;  --f1: #f59e0b; --f2: #b45309; }
.feature--blue   { --f: 59 130 246;  --f1: #3b82f6; --f2: #1d4ed8; }

.extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.extras li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 18px 8px 10px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.06);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.95rem;
}

.extras .icon {
  box-sizing: content-box;
  padding: 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--text);
  font-size: 1.1rem;
}

/* ==========================================================================
   How to play
   ========================================================================== */
.how {
  --accent: var(--amber);
  --accent-rgb: 255 200 59;
  --glow-x: 85%;
  --glow-y: 20%;
  --glow-x2: 5%;
  --glow-y2: 70%;
}

.steps {
  display: grid;
  gap: 22px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

.step {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 24px;
  background: rgb(26 15 68 / 0.85);
  box-shadow: 0 26px 50px -30px rgb(0 0 0 / 0.85);
}

/* The game screen's own stage: indigo gradient with the lit centre. */
.step__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(90% 80% at 50% 60%, rgb(58 37 150 / 0.55), rgb(58 37 150 / 0) 70%),
    linear-gradient(180deg, #1a0b4e 0%, #241361 45%, #2d1a73 100%);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.step__media picture,
.step__pair {
  position: absolute;
  inset: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__media img {
  width: auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow:
    0 14px 28px -14px rgb(0 0 0 / 0.8),
    0 0 0 1px rgb(255 255 255 / 0.12);
}

.step__pair {
  gap: 18px;
}

.step__pair picture {
  position: static;
  display: block;
}

.step__pair img {
  width: 100%;
}

.step__pair .coins {
  width: 42%;
  max-width: 156px;
}

.step__pair .hint {
  width: 30%;
  max-width: 126px;
}

.step__body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 24px 28px;
}

/* Step number on a small board key. */
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--key-face);
  box-shadow: 0 4px 0 var(--key-edge);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1;
}

.step__num::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 12%;
  right: 12%;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--key-sheen);
}

.step__num span {
  position: relative;
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
}

.step p {
  margin-top: 6px;
  color: var(--text-soft);
}

/* ==========================================================================
   Try a puzzle (the playable board)
   ========================================================================== */
.try {
  --accent: var(--cyan);
  --accent-rgb: 72 202 226;
  --glow-x: 30%;
  --glow-y: 55%;
  --glow-x2: 95%;
  --glow-y2: 20%;
}

.try__grid {
  display: grid;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
}

@media (min-width: 1024px) {
  .try__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
  }
}

/* The game screen, framed like the store art's device card. */
.game {
  --size: 8;
  --gap: 5px;
  position: relative;
  width: calc(100% - 24px);
  max-width: 500px;
  margin: 12px auto;
  padding: 16px clamp(12px, 3vw, 20px) 22px;
  border-radius: var(--r-modal);
  background:
    radial-gradient(95% 60% at 50% 62%, rgb(58 37 150 / 0.55), rgb(58 37 150 / 0) 72%),
    linear-gradient(180deg, #1a0b4e 0%, #241361 38%, #2d1a73 62%, #2b1a6e 78%, #1e1148 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 0 0 10px var(--bezel),
    0 0 0 12px rgb(255 255 255 / 0.28),
    0 44px 80px -24px rgb(0 0 0 / 0.85),
    0 0 110px -6px rgb(72 202 226 / 0.4);
}

.game__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid rgb(255 255 255 / 0.19);
  border-radius: var(--r-pill);
  background: rgb(0 0 0 / 0.31);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.hud-pill .icon {
  color: rgb(255 255 255 / 0.8);
  font-size: 1.1rem;
}

.hud-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.hud-stat .icon {
  color: var(--teal);
  font-size: 1.2rem;
}

.game__count {
  margin-top: 14px;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.2px;
}

.word-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
  min-height: 72px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.word-list li {
  display: flex;
  align-items: center;
  height: 36px;
}

.word-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

/* Found words recede: no fill, dimmed ink, a glyph as the marker. */
.word-chip.is-found {
  padding-inline: 4px;
  background: none;
  color: rgb(255 255 255 / 0.55);
}

.word-chip .icon {
  font-size: 16px;
}

button.word-chip {
  min-height: 36px;
  cursor: pointer;
}

button.word-chip:hover {
  color: rgb(255 255 255 / 0.85);
}

.board-wrap {
  position: relative;
  margin-top: 16px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.board {
  display: grid;
  gap: var(--gap);
  padding: calc(var(--gap) / 2);
  container-type: inline-size;
  cursor: pointer;
}

.board:focus-within {
  outline: none;
}

.board__row {
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  gap: var(--gap);
}

/* A raised keycap: lit face, hard lip beneath, gloss across the top. */
.key {
  --face: var(--key-face);
  --edge: var(--key-edge);
  --ink: var(--key-ink);
  --lip: 3px;
  --drop: 0px;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 18%;
  background: var(--face);
  box-shadow: 0 var(--lip) 0 var(--edge);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(15px, 5vw, 26px);
  font-size: calc(100cqi / var(--size) * 0.5);
  line-height: 1;
  transform: translateY(var(--drop));
}

.board__row:nth-child(odd) .key:nth-child(even),
.board__row:nth-child(even) .key:nth-child(odd) {
  --face: var(--key-face-alt);
}

.key::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 12%;
  width: 76%;
  height: 30%;
  border-radius: var(--r-pill);
  background: var(--key-sheen);
  pointer-events: none;
}

.key > span {
  position: relative;
  pointer-events: none;
}

.key:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 1px;
  z-index: 3;
}

.key.is-selected {
  --face: var(--select-face);
  --edge: var(--select-edge);
  --ink: var(--action-on);
}

/* The key under the finger drops into its own lip. */
.key.is-lead {
  --lip: 1px;
  --drop: 2px;
}

.key[data-found] {
  --ink: var(--key-ink-bright);
}

.key[data-found="0"] { --face: var(--found-0); --edge: var(--found-0-edge); }
.key[data-found="1"] { --face: var(--found-1); --edge: var(--found-1-edge); }
.key[data-found="2"] { --face: var(--found-2); --edge: var(--found-2-edge); }
.key[data-found="3"] { --face: var(--found-3); --edge: var(--found-3-edge); }
.key[data-found="4"] { --face: var(--found-4); --edge: var(--found-4-edge); }
.key[data-found="5"] { --face: var(--found-5); --edge: var(--found-5-edge); }
.key[data-found="6"] { --face: var(--found-6); --edge: var(--found-6-edge); }
.key[data-found="7"] { --face: var(--found-7); --edge: var(--found-7-edge); }

.key.is-hint {
  box-shadow:
    0 var(--lip) 0 var(--edge),
    inset 0 0 0 3px var(--action-top);
}

@supports (width: 1cqi) {
  .key.is-hint {
    box-shadow:
      0 var(--lip) 0 var(--edge),
      inset 0 0 0 calc(100cqi / var(--size) * 0.08) var(--action-top);
  }
}

.key.is-popping {
  animation: key-pop 380ms var(--ease-back) both;
  animation-delay: calc(var(--k, 0) * 40ms);
}

.board.is-waiting .key {
  opacity: 0;
}

.board.is-entering .key {
  animation: key-in 460ms var(--ease-back) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}

/* The swipe lane: action cyan at 24% between first and last key. */
.board-lane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: var(--r-pill);
  background: rgb(76 211 238 / 0.24);
  opacity: 0;
  pointer-events: none;
}

.board-lane.is-on {
  opacity: 1;
}

.cheer {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 5;
  padding: 10px 20px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--r-pill);
  background: rgb(25 14 60 / 0.9);
  box-shadow: 0 16px 30px -12px rgb(0 0 0 / 0.8), 0 0 30px -6px rgb(72 202 226 / 0.6);
  font-family: var(--font-display);
  font-size: 1.3rem;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 0;
  pointer-events: none;
}

.cheer.is-on {
  animation: cheer 1100ms var(--ease-out) both;
}

.game__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 22px;
}

/* The in-game hint button: cyan keycap with a bulb. */
.hint-btn {
  --lift: 5px;
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--action-top), var(--action-bottom));
  box-shadow:
    0 var(--lift) 0 var(--action-edge),
    0 14px 24px -10px rgb(0 0 0 / 0.7);
  color: var(--action-on);
  font-size: 34px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.hint-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 55%);
  pointer-events: none;
}

.hint-btn .icon {
  position: relative;
}

.hint-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--action-edge), 0 8px 14px -8px rgb(0 0 0 / 0.6);
}

.hint-btn:disabled {
  cursor: default;
  filter: saturate(0.2) brightness(0.75);
}

.hint-label {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Completion card, laid over the board like the game's Level Complete. */
.game__done {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: inherit;
  background: rgb(14 9 40 / 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in var(--t-slow) var(--ease-out) both;
}

.done-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 22px 26px;
  border: 1.5px solid rgb(124 92 255 / 0.7);
  border-radius: 24px;
  background: linear-gradient(180deg, #2b1b6b, #1a0a4e);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.9), 0 0 60px -10px rgb(124 92 255 / 0.7);
  text-align: center;
  animation: pop-in 520ms var(--ease-back) both;
}

.done-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--title-gold);
  text-shadow: 0 3px 0 var(--title-gold-edge), 0 8px 18px rgb(0 0 0 / 0.5);
}

.done-card__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.done-card__time .icon {
  color: var(--teal);
  font-size: 1.15rem;
}

.done-card p {
  margin-top: 14px;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.done-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
  margin-top: 22px;
}

/* Tips beside the board */
.tips {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tips li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.tips__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--tip-1, #4cd3ee), var(--tip-2, #0e8fb4));
  box-shadow: 0 4px 0 var(--tip-edge, #075c77);
  color: var(--tip-ink, #03303d);
  font-size: 24px;
}

.tips h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
}

.tips p {
  margin-top: 4px;
  color: var(--text-soft);
}

.tips kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.85em;
  font-weight: 700;
  text-align: center;
}

.try__aside .btn {
  margin-top: 34px;
}

/* ==========================================================================
   Puzzle experience
   ========================================================================== */
.experience {
  --accent: var(--purple);
  --accent-rgb: 150 108 255;
  --glow-x: 20%;
  --glow-y: 50%;
  --glow-x2: 90%;
  --glow-y2: 90%;
}

.experience__grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 1024px) {
  .experience__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }

  .experience__art {
    order: -1;
  }
}

.duo {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1;
}

.duo__stats {
  --glow-rgb: 74 144 250;
  position: absolute;
  top: 2%;
  left: 4%;
  z-index: 1;
  width: 44%;
  transform: rotate(-5deg);
}

.duo__best {
  --glow-rgb: 150 108 255;
  position: absolute;
  top: 29%;
  right: 2%;
  z-index: 2;
  width: 53%;
  transform: rotate(4deg);
}

.duo .tile {
  z-index: 3;
  --size: 54px;
}

.duo .t-1 { bottom: 6%; left: 6%; --rot: -10deg; }
.duo .t-2 { top: 4%; right: 10%; --rot: 12deg; }
.duo .sparkle.s-1 { top: 22%; right: 2%; --s: 18px; }
.duo .sparkle.s-2 { bottom: 26%; left: 0; --s: 14px; }

.moments {
  display: grid;
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.moments li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 18px;
  background: rgb(58 37 128 / 0.3);
}

.moments__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--m1), var(--m2));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.3);
  color: #ffffff;
  font-size: 22px;
}

.moments h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
}

.moments p {
  margin-top: 4px;
  color: var(--text-soft);
}

/* ==========================================================================
   Screenshot gallery
   ========================================================================== */
.gallery {
  --accent: var(--blue);
  --accent-rgb: 74 144 250;
  --glow-x: 80%;
  --glow-y: 40%;
  --glow-x2: 10%;
  --glow-y2: 60%;
  background: linear-gradient(180deg, transparent, rgb(43 27 107 / 0.3) 25%, rgb(43 27 107 / 0.3) 75%, transparent);
}

/* Desktop: one featured screenshot + a staggered set to pick from. */
.gallery__desk {
  display: none;
}

@media (min-width: 768px) {
  .gallery__desk {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    margin-top: 56px;
  }

  .gallery__rail {
    display: none;
  }
}

.gallery__stage {
  position: relative;
}

.gallery__stage picture {
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

.gallery__stage.is-fading picture {
  opacity: 0;
  transform: scale(0.98);
}

.gallery__stage img {
  width: 100%;
  border-radius: 26px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.18),
    0 40px 80px -30px rgb(0 0 0 / 0.9),
    0 0 90px -20px rgb(74 144 250 / 0.6);
}

.gallery__stage figcaption {
  margin-top: 20px;
  text-align: center;
}

.gallery__stage-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.gallery__stage-text {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 0 28px;
  list-style: none;
}

.thumbs li:nth-child(3n + 2) {
  transform: translateY(28px);
}

.thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: pointer;
}

.thumb img {
  width: 100%;
  border-radius: 16px;
  opacity: 0.62;
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.9);
  transition:
    opacity var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}

.thumb:hover img,
.thumb:focus-visible img {
  opacity: 1;
  transform: translateY(-4px);
}

.thumb[aria-pressed="true"] img {
  opacity: 1;
  box-shadow:
    0 0 0 3px var(--action-top),
    0 18px 34px -14px rgb(76 211 238 / 0.6);
}

/* Mobile: a swipeable rail of full screenshots. */
.gallery__rail {
  margin-top: 40px;
}

.rail {
  display: flex;
  gap: 16px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 8px var(--gutter) 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  list-style: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail li {
  flex: 0 0 min(76vw, 320px);
  scroll-snap-align: start;
}

.rail img {
  width: 100%;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.16),
    0 24px 40px -22px rgb(0 0 0 / 0.9);
}

.rail figcaption {
  margin-top: 12px;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.rail__controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

/* ==========================================================================
   FAQ (native <details> accordion: keyboard and screen-reader support built in)
   ========================================================================== */
.faq {
  --accent: var(--magenta);
  --accent-rgb: 255 96 200;
  --glow-x: 88%;
  --glow-y: 25%;
  --glow-x2: 8%;
  --glow-y2: 80%;
}

.faq__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 1040px;
  margin: 48px auto 0;
}

/* Two independent columns, so opening an answer never gaps the other side. */
@media (min-width: 1024px) {
  .faq__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
}

.faq__list {
  display: grid;
  gap: 12px;
}

.faq__item {
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 18px;
  background: rgb(26 15 68 / 0.85);
  box-shadow: 0 18px 36px -28px rgb(0 0 0 / 0.85);
  transition:
    border-color var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-out);
}

.faq__item[open] {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(43 27 107 / 0.6);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 16px 12px 20px;
  border-radius: 18px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:focus-visible {
  outline-offset: 2px;
}

.faq__question h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.faq__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--text-muted);
  font-size: 1.25rem;
  transition:
    transform var(--t-med) var(--ease-out),
    background-color var(--t-fast),
    color var(--t-fast);
}

.faq__question:hover .faq__toggle {
  background: rgb(255 255 255 / 0.14);
}

.faq__item[open] .faq__toggle {
  transform: rotate(90deg);
  background: rgb(var(--accent-rgb) / 0.18);
  color: var(--accent);
}

.faq__answer {
  padding: 0 20px 18px;
  color: var(--text-soft);
}

.faq__answer p + p {
  margin-top: 10px;
}

.faq__answer a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgb(var(--accent-rgb) / 0.6);
  text-underline-offset: 3px;
}

.faq__answer a:hover {
  text-decoration-color: var(--accent);
}

/* ==========================================================================
   Download call to action
   ========================================================================== */
.download {
  --accent: var(--amber);
  --accent-rgb: 255 200 59;
}

.download::before {
  display: none;
}

.cta-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 48px;
  align-items: center;
  padding: clamp(28px, 5.5vw, 72px);
  overflow: hidden;
  border: 1.5px solid rgb(255 255 255 / 0.14);
  border-radius: 32px;
  background:
    radial-gradient(60% 80% at 88% 40%, rgb(255 78 138 / 0.32), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgb(96 62 190 / 0.65), transparent 70%),
    radial-gradient(40% 50% at 100% 0%, rgb(86 196 224 / 0.2), transparent 70%),
    linear-gradient(135deg, #2b1b6b 0%, #1a0a4e 55%, #140b3a 100%);
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / 0.95);
}

@media (min-width: 1024px) {
  .cta-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
}

.cta-panel__texture {
  inset: 0;
  -webkit-mask-image: radial-gradient(70% 90% at 100% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(70% 90% at 100% 100%, #000 10%, transparent 70%);
}

.app-mark {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-mark img {
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 10px 20px rgb(80 60 220 / 0.6));
}

.app-mark__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}

.app-mark__meta {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
}

.cta-panel .headline {
  margin-top: 28px;
}

.cta-panel .btn {
  margin-top: 34px;
}

.cta-note {
  margin-top: 22px;
  color: var(--text-soft);
  font-size: 0.925rem;
}

.cta-art {
  position: relative;
  padding: 24px 8px 40px;
}

.cta-art__banner {
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.2),
    0 40px 70px -30px rgb(0 0 0 / 0.9),
    0 0 90px -20px rgb(255 78 138 / 0.6);
  transform: rotate(-4deg);
}

.cta-art .tile {
  z-index: 2;
  --size: 58px;
}

.cta-art .t-1 { top: -2%; left: 0; --rot: -12deg; }
.cta-art .t-2 { bottom: 0; right: 4%; --rot: 10deg; }
.cta-art .t-3 { bottom: 4%; left: 18%; --rot: -6deg; --size: 44px; }
.cta-art .sparkle.s-1 { top: 2%; right: 12%; --s: 22px; }

/* ==========================================================================
   Company & developer
   ========================================================================== */
.developer {
  --accent: var(--purple);
  --accent-rgb: 150 108 255;
  --glow-x: 50%;
  --glow-y: 60%;
}

.people {
  display: grid;
  gap: 22px;
  max-width: 980px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

/* The in-game Settings rows: violet panel, violet rim. */
.person {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  height: 100%;
  padding: clamp(22px, 3vw, 30px);
  border: 1.5px solid rgb(90 64 184 / 0.8);
  border-radius: var(--r-card);
  background: linear-gradient(160deg, rgb(75 50 154 / 0.55), rgb(58 37 128 / 0.35));
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.9);
}

.person__mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--key-face);
  box-shadow: 0 5px 0 var(--key-edge);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
}

.person__mark::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 12%;
  right: 12%;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--key-sheen);
}

.person__mark > * {
  position: relative;
}

.person__mark--studio {
  background: linear-gradient(180deg, var(--found-0), #2fa89e);
  box-shadow: 0 5px 0 var(--found-0-edge);
  color: var(--key-ink-bright);
  font-size: 32px;
}

.person__role {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.person__name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.15;
}

.person__text {
  margin-top: 8px;
  color: var(--text-soft);
}

.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 4px;
  word-break: break-word;
}

.text-link:hover {
  text-decoration-color: var(--action-top);
}

.text-link .icon {
  color: var(--teal);
  font-size: 1.25rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  padding: 56px 0 32px;
  border-top: 1px solid rgb(90 64 184 / 0.35);
  background: linear-gradient(180deg, rgb(26 15 68 / 0.5), var(--bg-void));
}

.footer__top {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.footer__brand p {
  max-width: 44ch;
  margin-top: 14px;
  color: var(--text-soft);
}

.footer__nav h2 {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 2px 32px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-soft);
  font-weight: 600;
  text-decoration: none;
}

.footer__nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__nav .icon {
  font-size: 1rem;
  opacity: 0.8;
}


/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes twinkle {
  from { opacity: 0.22; }
  to { opacity: 0.45; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes art-in {
  from { opacity: 0; scale: 0.94; }
  to { opacity: 1; scale: 1; }
}

@keyframes key-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes key-pop {
  0% { transform: translateY(var(--drop)) scale(1); }
  45% { transform: translateY(var(--drop)) scale(1.14); }
  100% { transform: translateY(var(--drop)) scale(1); }
}

@keyframes cheer {
  0% { opacity: 0; transform: translateY(10px) scale(0.6); }
  18% { opacity: 1; transform: translateY(0) scale(1.06); }
  30% { transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.96); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.rise {
  animation: rise 700ms var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 90ms + 60ms);
}

.hero-art {
  animation: art-in 900ms var(--ease-out) 240ms both;
}

.floaty {
  animation: float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}

/* Scroll reveal: only armed once main.js has run (html.reveal-ready). */
.reveal-ready .reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 700ms var(--ease-out),
    translate 700ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .reveal-ready .reveal {
    opacity: 1;
    translate: none;
  }
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 639px) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero-art .t-2 {
    right: 2%;
  }

  .step__body {
    padding: 20px 18px 24px;
    gap: 14px;
  }

  .step__num {
    width: 46px;
    height: 46px;
  }

  .person {
    flex-direction: column;
  }

  .cta-panel .btn {
    width: 100%;
  }

  .footer__nav ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  .game {
    --gap: 4px;
  }

  .hud-pill {
    padding: 0 12px 0 10px;
    font-size: 0.9rem;
  }
}