/* Num Null website · the app's look, on the web.
   Cream graph paper with faint numbers, sticker cards with hard plum shadows,
   chunky lipped buttons, candy mode cards. Day and night palettes follow the
   app's (prefers-color-scheme). Fredoka for display, Nunito for body. */

/* Self-hosted fonts (no requests to Google's CDN). */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/fredoka-500.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/fredoka-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/nunito-900.woff2") format("woff2"); }

/* ---------- tokens (NumNullPalette.light + AppColors) ---------- */

:root {
  color-scheme: light;
  --bg: #FFF6E5;
  --sand: #FFE9C9;
  --card: #FFFFFF;
  --ink: #2B2340;
  --ink-soft: #7D7394;
  --outline: #2B2340;
  --shadow: rgba(43, 35, 64, 0.35);   /* hard drop shadow: the ink, softened */
  --disabled: #E4DFEA;
  --prose: #4A4260;

  /* Candy hues: the same by day and night. */
  --sky: #4DB2FF;  --sky-deep: #2683E0;
  --mint: #2FD38A; --mint-deep: #14A866;
  --sun: #FFC83D;  --sun-deep: #E89B00;
  --grape: #8E6BFF; --grape-deep: #6243E0;
  --berry: #F2649E; --berry-deep: #C93A76;
  --coral: #FF6B6B; --coral-deep: #E04848;
  --danger: #FF4F5E;
  --gold: #FFC23A; --silver: #BFC6D4; --bronze: #E0915A;

  /* Pale tints behind chips and icons. */
  --sky-soft: #CDEBFF; --mint-soft: #C4F5DD; --sun-soft: #FFF0C4;
  --grape-soft: #E5DCFF; --berry-soft: #FFDCEA; --coral-soft: #FFDADA;

  /* Game pieces keep their faces in both modes, so their ink stays dark. */
  --tile-ink: #2B2340;
  --tile-lip: #D9D2C3;
  --slate: #3D4263; --slate-lip: #232740;
  --board: #6F55E6; --board-deep: #5339CF;

  /* Graph paper. */
  --wash: #F3F3F0;                      /* skySoft mixed 30% into the cream */
  --grid-minor: rgba(77, 178, 255, 0.11);
  --grid-major: rgba(77, 178, 255, 0.21);
  --digit-alpha: 0.26;

  --stroke: 2.5px;
  --depth: 5px;
  --radius: 22px;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1120px;
  --gutter: 20px;
  --nav-h: 76px;
}

/* Night palette: Day is the default (as in the app); Night when chosen, or
   with Auto when the system is dark. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #17122A;
    --sand: #221B38;
    --card: #2A2245;
    --ink: #F4EEFF;
    --ink-soft: #A89EC4;
    --outline: #0C0916;
    --shadow: rgba(12, 9, 22, 0.55);
    --disabled: #3A3154;
    --prose: #D9D1EC;
    --sky-soft: #1C3A58; --mint-soft: #17483A; --sun-soft: #3B3150;
    --grape-soft: #352B5E; --berry-soft: #4A2240; --coral-soft: #4C2630;
    --wash: #1A1A33;
    --grid-minor: rgba(77, 178, 255, 0.09);
    --grid-major: rgba(77, 178, 255, 0.16);
    --digit-alpha: 0.2;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17122A;
  --sand: #221B38;
  --card: #2A2245;
  --ink: #F4EEFF;
  --ink-soft: #A89EC4;
  --outline: #0C0916;
  --shadow: rgba(12, 9, 22, 0.55);
  --disabled: #3A3154;
  --prose: #D9D1EC;
  --sky-soft: #1C3A58; --mint-soft: #17483A; --sun-soft: #3B3150;
  --grape-soft: #352B5E; --berry-soft: #4A2240; --coral-soft: #4C2630;
  --wash: #1A1A33;
  --grid-minor: rgba(77, 178, 255, 0.09);
  --grid-major: rgba(77, 178, 255, 0.16);
  --digit-alpha: 0.2;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  background: transparent;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
body > main { flex: 1 0 auto; width: 100%; }

/* The playfield: a touch of sky at the top, cream below, and the grid.
   Fixed layers, so it never scrolls and iOS never repaints a huge image. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--grid-major) 1.2px, transparent 1.2px) center top / 120px 120px,
    linear-gradient(0deg, var(--grid-major) 1.2px, transparent 1.2px) center top / 120px 120px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) center top / 24px 24px,
    linear-gradient(0deg, var(--grid-minor) 1px, transparent 1px) center top / 24px 24px,
    linear-gradient(180deg, var(--wash) 0, var(--bg) 60vh);
}
/* Faint, tilted digits in the game's own font (placed by script.js). */
.backdrop { position: fixed; top: 0; left: 0; right: 0; height: 130vh; z-index: -1; pointer-events: none; overflow: hidden; will-change: transform; }
.backdrop span {
  position: absolute;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  opacity: var(--digit-alpha);
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  user-select: none;
}

img { max-width: 100%; display: block; }
a { color: var(--sky-deep); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; color: var(--ink); }
p { margin: 0; }
strong { font-weight: 800; color: var(--ink); }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .tile:focus-visible { border-radius: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- sticker surfaces ---------- */

.card {
  background: var(--card);
  border: var(--stroke) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 0 var(--depth) 0 var(--shadow);
}

/* Outlined pill with a small hard shadow: chips, counters, tags. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow);
  background: var(--card);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip-sun { background: var(--sun-soft); }
.chip-sky { background: var(--sky-soft); }
.chip-mint { background: var(--mint-soft); }
.chip-grape { background: var(--grape-soft); }
.chip-coral { background: var(--coral-soft); }
.chip-berry { background: var(--berry-soft); }
.chip-flat { box-shadow: none; }

/* Tiny all-caps tag in ink, like HEAD TO HEAD on the Compete card. */
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--outline);
  color: #fff;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.tag-coral { background: var(--coral); }

/* Outlined circle with a hard shadow: avatars and icon badges. */
.badge {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 2.2px solid var(--outline);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--shadow);
  background: var(--card);
  color: var(--tile-ink);
  flex: none;
}
.badge svg { width: 22px; height: 22px; }
.badge-sq { border-radius: 13px; }
.badge-sun { background: var(--sun); }
.badge-sky { background: var(--sky); color: #fff; }
.badge-mint { background: var(--mint); color: #fff; }
.badge-grape { background: var(--grape); color: #fff; }
.badge-berry { background: var(--berry); color: #fff; }
.badge-coral { background: var(--coral); color: #fff; }
.badge-soft-sun { background: var(--sun-soft); color: var(--ink); }
.badge-soft-sky { background: var(--sky-soft); color: var(--ink); }
.badge-soft-mint { background: var(--mint-soft); color: var(--ink); }
.badge-soft-grape { background: var(--grape-soft); color: var(--ink); }
.badge-soft-coral { background: var(--coral-soft); color: var(--ink); }

/* Icons are stroked line art, like the app's. */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- chunky game buttons ---------- */

.btn {
  --lip: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px calc(12px + var(--lip));
  border: var(--stroke) solid var(--outline);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  /* The darker lip sits inside the face, like ChunkyBorder in the app. */
  box-shadow: inset 0 calc(-1 * var(--lip)) 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.08s ease, box-shadow 0.08s ease, padding 0.08s ease;
  overflow: hidden;
  isolation: isolate;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  top: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.btn::before { left: 14px; width: 30px; height: 5px; }
.btn::after { left: 50px; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); }
.btn:hover { transform: translateY(-1px); }
.btn:active {
  --lip: 1.5px;
  transform: translateY(3px);
}
.btn svg { width: 20px; height: 20px; }
.btn-mint { background: var(--mint); color: #fff; }
.btn-sun { background: var(--sun); color: var(--tile-ink); }
.btn-sky { background: var(--sky); color: #fff; }
.btn-grape { background: var(--grape); color: #fff; }
.btn-white { background: var(--card); color: var(--ink); }
.btn-small { font-size: 15px; padding: 8px 16px calc(8px + var(--lip)); border-radius: 14px; }
.btn-small::before { top: 5px; left: 11px; width: 20px; height: 4px; }
.btn-small::after { top: 5px; left: 35px; width: 4px; height: 4px; }
.btn-wide { width: 100%; }

/* Sticker-outlined display text, like the Compete title and "NULL!". */
.outlined {
  color: #fff;
  -webkit-text-stroke: 5px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--outline);
}

/* ---------- brand ---------- */

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; }
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1;
  -webkit-text-stroke: 5px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--outline);
  white-space: nowrap;
}
.wordmark .num { color: var(--sky); }
.wordmark .null { color: var(--mint); }
/* Trademark (application pending): plain ink, no outline. Use ® only once registered. */
.wordmark .tm {
  margin-left: 0.1em;
  font-family: var(--body);
  font-size: 0.34em;
  font-weight: 900;
  vertical-align: super;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* ---------- top nav (HomeTopNav) ---------- */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px var(--gutter) 0;
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 14px;
  border-radius: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a:not(.btn) {
  display: block;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nav-links a:not(.btn):hover { color: var(--ink); background: var(--sand); }
/* The candy bubble follows the section in view (set by script.js). */
.nav-links a[aria-current]:not(.btn) {
  color: var(--ink);
  background: var(--mint-soft);
  border-color: var(--outline);
  box-shadow: 0 3px 0 var(--shadow);
}
.nav-links .btn { margin-left: 6px; }
/* Auto / Day / Night, like the app's theme picker (script.js cycles it). */
.theme-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin-left: 4px;
  padding: 0;
  border: 2px solid var(--outline);
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--shadow);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease;
}
.theme-btn:hover { transform: translateY(-1px); }
.theme-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.theme-btn .icon { display: none; width: 20px; height: 20px; }
html:not([data-theme]) .theme-btn .t-light,
html[data-theme="light"] .theme-btn .t-light,
html[data-theme="dark"] .theme-btn .t-dark,
html[data-theme="auto"] .theme-btn .t-auto { display: block; }
html[data-theme="dark"] .theme-btn { background: var(--grape-soft); }

/* ---------- bottom tab bar (HomeNavBar), phones only ---------- */

.tabbar {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30;
  padding: 5px;
  border-radius: 24px;
}
.tabbar ul {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0; padding: 0;
  list-style: none;
}
.tabbar a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: 16px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tabbar a .icon { width: 22px; height: 22px; }
.tabbar a[aria-current] { color: var(--tile-ink); }
.tabbar .bubble {
  position: absolute;
  top: 0; bottom: 3px;
  left: var(--x, 0);
  width: var(--w, 20%);
  border: 2px solid var(--outline);
  border-radius: 16px;
  background: var(--sun);
  box-shadow: 0 3px 0 var(--shadow);
  opacity: 0;
}
/* Placed first, then it slides between tabs. */
.tabbar.ready .bubble { transition: left 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease; }
.tabbar .play a { color: #fff; }
.tabbar .play a span { color: var(--mint-deep); }
.tabbar .play .icon { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--mint); border: 2px solid var(--outline); box-shadow: 0 2px 0 var(--shadow); }

/* ---------- section scaffolding ---------- */

main { padding: 0 var(--gutter); }
.section { max-width: var(--max); margin: 0 auto; padding: 64px 0 24px; scroll-margin-top: calc(var(--nav-h) + 8px); }
.section.narrow { max-width: 820px; }

/* App-style header: chunky title, soft subtitle, optional badge on the right. */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sec-head h2 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.3px; }
.sec-head p { margin-top: 6px; color: var(--ink-soft); font-size: 17px; font-weight: 700; }
.sec-head .chip { margin-bottom: 6px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 14px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--sun-soft);
  box-shadow: 0 3px 0 var(--shadow);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--outline); }

/* ---------- hero ---------- */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}
.hero h1 { font-size: clamp(42px, 6.2vw, 72px); letter-spacing: -0.5px; margin-bottom: 16px; }
.hero h1 .hl {
  color: var(--mint);
  -webkit-text-stroke: 6px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--outline);
}
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-soft); font-weight: 700; max-width: 36ch; margin-bottom: 24px; }
.lead strong { color: var(--grape); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store-badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform 0.12s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:active { transform: translateY(1px); }
.store-badge img { height: 50px; width: auto; }
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.perks .chip { font-family: var(--body); font-weight: 800; font-size: 13px; }

/* ---------- the game screen (hero demo) ---------- */

.demo { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 26px; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-top h2 { font-size: 20px; }
.demo-top p { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.demo-id { display: flex; align-items: center; gap: 10px; }

/* Timer · nulls · moves · score, like the bar above the board in a game. */
.hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--shadow);
}
.hud div {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--ink);
}
.hud div + div { border-left: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.hud svg { width: 16px; height: 16px; }
.hud .t-timer svg { color: var(--sun-deep); }
.hud .t-nulls svg { color: var(--mint-deep); }
.hud .t-moves svg { color: var(--sky-deep); }
.hud .t-score svg { color: var(--sun-deep); }

/* The sun pill above the board: the last move, spelled out. */
.status {
  align-self: center;
  min-height: 34px;
  padding: 5px 16px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--shadow);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: background 0.2s ease;
}
.status.null { background: var(--sun); color: var(--tile-ink); }
.status.win { background: var(--mint); color: #fff; }

.board-wrap { position: relative; align-self: center; width: min(100%, 360px); }
.board {
  --gap: 9px;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  border: var(--stroke) solid var(--outline);
  border-radius: 24px;
  background: linear-gradient(160deg, #7B63EE, var(--board) 45%, var(--board-deep));
  box-shadow: 0 var(--depth) 0 var(--shadow), inset 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.tile {
  position: relative;
  padding: 0;
  border: 2.2px solid var(--outline);
  border-radius: 16px;
  background: #fff;
  color: var(--tile-ink);
  box-shadow: 0 5px 0 var(--tile-lip);
  font-family: var(--display);
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(.3,1.6,.5,1), box-shadow 0.15s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile.neg { background: var(--slate); color: #fff; box-shadow: 0 5px 0 var(--slate-lip); }
.tile.selected {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 5px 0 var(--tile-lip), 0 0 0 4px #C9BFA8;
  animation: bob 1.6s ease-in-out infinite;
  z-index: 1;
}
.tile.neg.selected { box-shadow: 0 5px 0 var(--slate-lip), 0 0 0 4px #9AA0CC; }
@keyframes bob { 0%, 100% { transform: translateY(-4px) scale(1.05); } 50% { transform: translateY(-7px) scale(1.05); } }
/* Spent: a soft lavender disc that can't move again. */
.tile.spent {
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
  color: transparent;
  cursor: default;
}
/* Null: a dashed hollow that any neighbour can swap into. */
.tile.empty {
  background: rgba(20, 10, 70, 0.28);
  border: 2.2px dashed rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  font-size: clamp(22px, 6vw, 32px);
}
.tile.empty.selected { box-shadow: 0 0 0 4px var(--sun); }
.tile.pop { animation: pop 0.45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(0.55); } 100% { transform: scale(1); } }
/* What this neighbour would become, shown while a tile is picked up. */
.tile .pv {
  position: absolute;
  top: -9px; right: -7px;
  min-width: 26px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--card);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  animation: pop 0.3s cubic-bezier(.3,1.6,.5,1);
  pointer-events: none;
}
.tile .pv.add { background: var(--mint-deep); }
.tile .pv.sub { background: var(--danger); }
.tile .pv.null { background: var(--sun-deep); }
.tile .pv.move { background: var(--grape-deep); }
/* NULL! bursts over the board. */
.burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.burst span {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  color: var(--sun);
  -webkit-text-stroke: 7px var(--tile-ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--tile-ink);
  letter-spacing: 1px;
}
.burst.go { animation: burst 0.9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes burst {
  0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  25% { opacity: 1; transform: scale(1.15) rotate(3deg); }
  70% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.1) translateY(-10px); }
}
.demo-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.demo-actions .hint { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.demo-actions .btn { white-space: nowrap; flex: none; }

/* ---------- how to play ---------- */

.lessons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lesson { position: relative; padding: 24px 18px 20px; }
.lesson h3 { font-size: 20px; margin: 14px 0 6px; }
.lesson p { color: var(--ink-soft); font-size: 15px; }
.lesson-no {
  position: absolute;
  top: -15px; left: 16px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 2px solid var(--outline);
  border-radius: 11px;
  box-shadow: 0 3px 0 var(--shadow);
  background: var(--sun);
  color: var(--tile-ink);
  font-family: var(--display);
  font-weight: 700;
}
.lesson-no.mint { background: var(--mint); color: #fff; }
.lesson-no.coral { background: var(--coral); color: #fff; }
.lesson-no.grape { background: var(--grape); color: #fff; }

/* Little board strips drawn in the real tile style. */
.mini { display: flex; align-items: center; gap: 8px; min-height: 52px; flex-wrap: wrap; }
.t {
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px;
  padding: 0 6px;
  border: 2px solid var(--outline);
  border-radius: 12px;
  background: #fff;
  color: var(--tile-ink);
  box-shadow: 0 4px 0 var(--tile-lip);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}
.t.neg { background: var(--slate); color: #fff; box-shadow: 0 4px 0 var(--slate-lip); }
.t.sel { box-shadow: 0 4px 0 var(--tile-lip), 0 0 0 3px #C9BFA8; transform: translateY(-2px); }
.t.null { background: var(--board); color: #fff; border-style: dashed; border-color: rgba(255,255,255,.8); box-shadow: 0 4px 0 var(--board-deep); }
.t.spent { border: 0; border-radius: 50%; background: var(--grape-soft); box-shadow: none; }
.arrow { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink-soft); }
.eq { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); }
.eq.add { color: var(--mint-deep); }
.eq.sub { color: var(--danger); }

.how-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; margin-top: 18px; }
.compass { display: flex; align-items: center; gap: 22px; padding: 22px 24px; }
.compass svg { width: 150px; height: 150px; flex: none; }
.compass h3 { font-size: 22px; margin-bottom: 6px; }
.compass p { color: var(--ink-soft); }
.compass b.add { color: var(--mint-deep); }
.compass b.sub { color: var(--danger); }
.score-note { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: var(--sun-soft); }
.score-note h3 { font-size: 22px; margin-bottom: 6px; }
.score-note p { color: var(--prose); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); -webkit-text-stroke: 2.5px var(--tile-ink); paint-order: stroke fill; font-size: 26px; letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: color-mix(in srgb, var(--card) 70%, var(--sand)); }

/* ---------- mode cards (HomeModeCard) ---------- */

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mode {
  position: relative;
  overflow: hidden;
  border: var(--stroke) solid var(--outline);
  border-radius: 24px;
  box-shadow: 0 var(--depth) 0 var(--shadow);
  color: var(--tile-ink);
  text-decoration: none;
  display: flex;
  isolation: isolate;
  transition: transform 0.15s cubic-bezier(.3,1.6,.5,1);
}
.mode:hover { transform: translateY(-3px); }
.mode:active { transform: scale(0.98); }
.mode-compete { grid-column: 1 / -1; background: linear-gradient(135deg, #45DE9C, var(--mint) 55%, var(--mint-deep)); color: #fff; }
.mode-casual { background: linear-gradient(135deg, #A6DBFF, var(--sky)); }
.mode-custom { background: linear-gradient(135deg, #F6CC6B, var(--sun-deep)); }
/* Tilted grid of tile outlines with a few marks, fading in to the right. */
.mode .pat { position: absolute; inset: -30%; width: 160%; height: 160%; z-index: 0; pointer-events: none; }
.mode .pat rect { fill: url(#tiles); }
.mode .pat { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,1)); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,1)); }
.mode .mark { position: absolute; z-index: 0; font-family: var(--display); font-weight: 700; color: rgba(255,255,255,.26); pointer-events: none; }
.mode-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; flex: 1; }
.mode h3 { font-size: 24px; line-height: 1; color: inherit; }
.mode-compete h3 { font-size: 36px; }
.mode p { font-size: 14px; font-weight: 800; line-height: 1.3; color: inherit; opacity: 0.92; }
.mode .note { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 14px; font-weight: 600; color: inherit; }
.mode .note svg { width: 16px; height: 16px; }
.play-pill {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 6px;
  padding: 7px 14px 8px 10px;
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow);
  background: #fff;
  color: var(--tile-ink);
  font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
}
.play-pill svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.mode-compete .play-pill { background: var(--sun); }
.mode-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 20px 18px 0; }
.mode-art { width: 88px; height: 88px; }
.mode-casual .mode-art, .mode-custom .mode-art { width: 52px; height: 52px; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 600;
}
.mode-chip svg { width: 14px; height: 14px; }

/* ---------- scoring (the results sheet) ---------- */

.score-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; align-items: start; }
.sheet {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  border-radius: 26px;
}
.sheet .pat { position: absolute; inset: -30%; width: 160%; height: 160%; z-index: 0; opacity: 0.55; pointer-events: none; }
.sheet .pat rect { fill: url(#tiles-ink); }
.sheet > :not(.pat) { position: relative; z-index: 1; }
.sheet .avatar { width: 52px; height: 52px; border-color: var(--mint); background: var(--coral); box-shadow: none; }
.sheet .who { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.sheet h3 { font-size: 26px; color: var(--ink-soft); margin-top: 4px; }
.sheet .label { font-family: var(--body); font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--mint-deep); margin-top: 8px; }
.sheet .big { font-family: var(--display); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.sheet .stars { font-size: 24px; margin-top: 4px; }
.sheet .rank { margin-top: 6px; padding: 4px 16px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-deep); font-family: var(--body); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; }
.sheet .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 10px; }
.sheet .stat { padding: 10px 6px 8px; border-radius: 14px; background: var(--sun-soft); }
.sheet .stat small { display: block; font-family: var(--body); font-size: 10px; font-weight: 900; letter-spacing: 0.14em; color: var(--ink-soft); }
.sheet .stat b { display: block; font-family: var(--display); font-size: 18px; font-weight: 700; margin-top: 2px; }
.sheet .xp { width: 100%; margin-bottom: 4px; padding: 9px; border-radius: 12px; background: var(--sky-soft); color: var(--sky-deep); font-family: var(--display); font-weight: 600; font-size: 15px; }
.rules { display: grid; gap: 14px; }
.rule { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; }
.rule h3 { font-size: 19px; margin-bottom: 4px; }
.rule p { color: var(--prose); font-size: 15px; }
.rule .badge { margin-top: 2px; }

/* ---------- features (little mock-ups of the app) ---------- */

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.feature h3 { font-size: 20px; margin-bottom: 4px; }
.feature p { color: var(--ink-soft); font-size: 15px; }
.mock { pointer-events: none; }

/* Daily reward banner. */
.mock-reward { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--outline); border-radius: 16px; background: var(--sun-soft); box-shadow: 0 3px 0 var(--shadow); }
.mock-reward .chest { width: 36px; height: 36px; flex: none; }
.mock-reward b { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; }
.mock-reward small { display: block; font-size: 12px; font-weight: 800; color: var(--sun-deep); }
.mock-reward .claim { margin-left: auto; padding: 7px 12px 9px; border: 2px solid var(--outline); border-radius: 12px; background: var(--mint); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 700; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); white-space: nowrap; }

/* Leaderboard podium. */
.mock-podium { position: relative; overflow: hidden; height: 132px; border: 2px solid var(--outline); border-radius: 16px; background: linear-gradient(135deg, #5A42C9, #4A32B4); box-shadow: 0 3px 0 var(--shadow); isolation: isolate; }
.mock-podium .pat { position: absolute; inset: -40%; width: 180%; height: 180%; opacity: 0.6; }
.mock-podium .pat rect { fill: url(#tiles); }
.mock-podium .pod {
  position: absolute; bottom: -6px;
  width: 74px; padding: 24px 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 2px solid var(--outline); border-radius: 12px 12px 0 0;
  background: var(--card); text-align: center;
  font-family: var(--display); font-size: 12px; font-weight: 600;
}
.mock-podium .pod::before { content: attr(data-n); position: absolute; top: 0; left: 0; right: 0; height: 18px; line-height: 18px; color: var(--tile-ink); font-size: 12px; font-weight: 700; }
.mock-podium .pod.p1 { left: 50%; transform: translateX(-50%); bottom: 2px; width: 78px; }
.mock-podium .pod.p1::before { background: var(--gold); }
.mock-podium .pod.p2 { left: calc(50% - 104px); transform: rotate(-6deg); }
.mock-podium .pod.p2::before { background: var(--silver); }
.mock-podium .pod.p3 { left: calc(50% + 30px); transform: rotate(6deg); }
.mock-podium .pod.p3::before { background: var(--bronze); }
.mock-podium .face { width: 28px; height: 28px; margin: 4px auto 4px; border: 2px solid var(--outline); border-radius: 50%; }
.mock-podium .crown { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 26px; height: 20px; color: var(--sun); }

/* Store: Undo and Flip. */
.mock-store { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mock-store .item { overflow: hidden; border: 2px solid var(--outline); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--shadow); text-align: center; }
.mock-store .top { position: relative; height: 56px; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.mock-store .top::before { content: ""; position: absolute; inset: -60%; z-index: -1; }
.mock-store .undo .top::before { background: repeating-conic-gradient(from 0deg, #FFA3C8 0 15deg, var(--berry) 15deg 30deg); }
.mock-store .flip .top::before { background: repeating-conic-gradient(from 0deg, #A6DBFF 0 15deg, var(--sky) 15deg 30deg); }
.mock-store .top .badge { width: 34px; height: 34px; }
.mock-store .top .badge svg { width: 18px; height: 18px; }
.mock-store .top .x { position: absolute; left: calc(50% + 8px); top: 30px; padding: 1px 6px; border: 2px solid var(--outline); border-radius: 999px; background: var(--sun); font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--tile-ink); }
.mock-store b { display: block; padding: 6px 4px 2px; font-family: var(--display); font-size: 13px; font-weight: 700; }
.mock-store .price { display: inline-block; margin: 2px 0 8px; padding: 2px 10px; border: 2px solid var(--outline); border-radius: 999px; background: var(--sun); color: var(--tile-ink); font-family: var(--display); font-size: 12px; font-weight: 700; }

/* Stats hero. */
.mock-stats { position: relative; overflow: hidden; padding: 12px 12px 10px; border: 2px solid var(--outline); border-radius: 16px; background: linear-gradient(135deg, #6CC1FF, var(--sky) 55%, var(--sky-deep)); color: #fff; box-shadow: 0 3px 0 var(--shadow); isolation: isolate; }
.mock-stats .pat { position: absolute; inset: -40%; width: 180%; height: 180%; opacity: 0.7; z-index: 0; }
.mock-stats .pat rect { fill: url(#tiles); }
.mock-stats > :not(.pat) { position: relative; z-index: 1; }
.mock-stats small { display: block; font-size: 11px; font-weight: 900; opacity: 0.9; }
.mock-stats .xp { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; -webkit-text-stroke: 4px var(--tile-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tile-ink); }
.mock-stats .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.mock-stats .st { padding: 6px 8px; border: 1.5px solid var(--outline); border-radius: 10px; background: rgba(255,255,255,.78); color: var(--tile-ink); font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1.1; }
.mock-stats .st i { display: block; font-style: normal; font-family: var(--body); font-size: 10px; font-weight: 800; color: #7D7394; }

/* Sounds: a mute toggle and some pops. */
.mock-sound { display: flex; align-items: center; gap: 10px; }
.mock-sound .pops { display: flex; gap: 6px; flex: 1; }
.mock-sound .pops span { flex: 1; padding: 6px 0; border: 2px solid var(--outline); border-radius: 999px; background: var(--coral-soft); font-family: var(--display); font-size: 12px; font-weight: 600; text-align: center; }
.mock-sound .pops span:last-child { background: var(--sun-soft); }

/* Play anywhere. */
.mock-devices { display: flex; gap: 8px; }
.mock-devices span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: 2px solid var(--outline); border-radius: 14px; background: var(--sky-soft); font-family: var(--display); font-size: 12px; font-weight: 600; box-shadow: 0 3px 0 var(--shadow); }
.mock-devices svg { width: 24px; height: 24px; }

/* ---------- gallery of real screens ---------- */

.gallery {
  display: flex;
  gap: 22px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 14px var(--gutter) 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Soft edges, like the app's scroll fades. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.gallery::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 auto; width: 236px; scroll-snap-align: center; text-align: center; }
.shot figcaption { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink-soft); }
.device {
  padding: 8px;
  border: var(--stroke) solid var(--outline);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 6px 0 var(--shadow);
  aspect-ratio: 9 / 16;
}
.device img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }
.gallery-nav { display: flex; justify-content: center; gap: 8px; }
.gallery-nav button {
  width: 40px; height: 40px;
  border: 2px solid var(--outline); border-radius: 50%;
  background: var(--card); color: var(--ink);
  box-shadow: 0 3px 0 var(--shadow);
  cursor: pointer; display: grid; place-items: center;
}
.gallery-nav button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.gallery-nav .icon { width: 18px; height: 18px; }

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 0; box-shadow: 0 4px 0 var(--shadow); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 56px 16px 20px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 2px solid var(--outline);
  border-radius: 10px;
  background: var(--mint-soft);
  box-shadow: 0 2px 0 var(--shadow);
  font-weight: 700;
  color: var(--ink);
}
.faq details[open] summary::after { content: "−"; background: var(--sun); color: var(--tile-ink); }
.faq details p { padding: 0 20px 18px; color: var(--prose); }

/* ---------- final call to action ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px 34px;
  background: linear-gradient(120deg, var(--sky-soft), var(--mint-soft));
  isolation: isolate;
}
.cta-band .pat { position: absolute; inset: -30%; width: 160%; height: 160%; z-index: 0; opacity: 0.5; pointer-events: none; }
.cta-band .pat rect { fill: url(#tiles-ink); }
.cta-band > :not(.pat) { position: relative; z-index: 1; }
.cta-band .ring {
  flex: none;
  width: 110px; height: 110px;
  display: grid; place-items: center;
  border: 3px solid var(--mint);
  border-radius: 50%;
}
.cta-band .ring img { width: 74px; height: 74px; }
.cta-band > div { flex: 1; }
.cta-band h2 { font-size: clamp(26px, 3vw, 34px); }
.cta-band p { margin: 6px 0 14px; color: var(--ink-soft); font-size: 17px; font-weight: 700; }

/* ---------- footer ---------- */

.footer { padding: 40px var(--gutter) 28px; }
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 28px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 24px;
  align-items: center;
}
.footer .byline { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.footer .byline a { color: var(--ink); }
.socials { display: flex; gap: 10px; justify-self: end; }
.socials a { width: 44px; height: 44px; background: #fff; transition: transform 0.12s ease; }
.socials a:hover { transform: translateY(-2px); }
.socials img { width: 22px; height: 22px; }
.footer .legal { grid-column: 1 / -1; color: var(--ink-soft); font-size: 14px; line-height: 1.9; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.footer .legal a { color: var(--ink); text-decoration: none; }
.footer .legal a:hover { text-decoration: underline; }
.footer .trademark { grid-column: 1 / -1; color: var(--ink-soft); font-size: 12px; }

/* ---------- coming-soon dialog (PulseDialog) ---------- */

.coming-soon { max-width: 400px; width: calc(100% - 32px); margin: auto; padding: 26px 24px 22px; text-align: center; border-radius: 26px; color: var(--ink); }
.coming-soon::backdrop { background: rgba(30, 24, 48, 0.6); }
.coming-soon .badge { margin: 0 auto 12px; width: 56px; height: 56px; }
.coming-soon h2 { margin: 0 0 8px; font-size: 24px; }
.coming-soon p { margin: 0 0 18px; color: var(--prose); }

/* ---------- 404 ---------- */

.nf { display: grid; place-items: center; padding: 56px 0 24px; max-width: var(--max); margin: 0 auto; }
.nf-card { width: min(100%, 560px); padding: 36px 32px 32px; text-align: center; }
.nf-board { width: min(100%, 300px); aspect-ratio: 3 / 1; grid-template-columns: repeat(3, 1fr); margin: 0 auto 24px; }
.nf-board .tile { display: grid; place-items: center; cursor: default; }
.nf-board .tile:hover { transform: none; }
.nf h1 { font-size: clamp(32px, 5vw, 46px); margin: 6px 0 12px; }
.nf h1 .hl { color: var(--mint); -webkit-text-stroke: 5px var(--outline); paint-order: stroke fill; text-shadow: 0 4px 0 var(--outline); }
.nf-lead { margin: 0 auto 26px; max-width: 38ch; font-size: 17px; color: var(--ink-soft); }
.nf-actions { justify-content: center; margin-bottom: 0; }

/* ---------- motion ---------- */

.reveal { opacity: 0; transform: translateY(18px) scale(0.94); transition: opacity 0.45s ease, transform 0.75s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
/* script.js adds .enter once the page is up, so the hero is never stuck hidden. */
.enter .hero-copy > *, .enter .hero .demo { animation: rise 0.7s cubic-bezier(.34,1.56,.64,1) backwards; }
.enter .hero-copy > :nth-child(2) { animation-delay: 0.07s; }
.enter .hero-copy > :nth-child(3) { animation-delay: 0.14s; }
.enter .hero-copy > :nth-child(4) { animation-delay: 0.21s; }
.enter .hero-copy > :nth-child(5) { animation-delay: 0.28s; }
.enter .hero-copy > :nth-child(6) { animation-delay: 0.35s; }
.enter .hero .demo { animation-delay: 0.18s; }

/* ---------- responsive ---------- */

@media (min-width: 1600px) {
  :root { --max: 1200px; }
}

@media (max-width: 1000px) {
  .lessons { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .features { grid-template-columns: 1fr 1fr; }
  .score-grid { grid-template-columns: 1fr; }
  .sheet { max-width: 420px; margin: 0 auto; width: 100%; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; gap: 32px; }
  .hero-copy { text-align: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .cta-row, .stores, .perks { justify-content: center; }
  .demo { width: 100%; max-width: 480px; justify-self: center; }
  .how-row { grid-template-columns: 1fr; }
}

/* Phones and small tablets: the app's bottom tab bar replaces the links. */
@media (max-width: 860px) {
  :root { --nav-h: 68px; }
  body { padding-bottom: 92px; }
  .nav-links li:not(.play):not(.theme) { display: none; }
  .nav-links .btn { margin-left: 0; }
  .tabbar { display: block; }
  .tabbar.card { box-shadow: 0 var(--depth) 0 var(--shadow), 0 -10px 30px rgba(0,0,0,.08); }
  .footer { padding-bottom: 8px; }
}

@media (max-width: 720px) {
  .modes, .features, .lessons { grid-template-columns: 1fr; }
  .mode-compete .mode-art { width: 70px; height: 70px; }
  .cta-band { flex-direction: column; text-align: center; padding: 26px 22px; }
  .cta-band .stores { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .socials { justify-self: start; }
  .compass { flex-direction: column; text-align: center; }
  .score-note { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .nav-wrap { padding: 10px var(--gutter) 0; }
  .nav { padding: 7px 8px 7px 12px; }
  .wordmark { font-size: 23px; -webkit-text-stroke-width: 4px; }
  .brand img { width: 36px; height: 36px; }
  .hero { padding: 28px 0 20px; gap: 26px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .lead { font-size: 17px; }
  .cta-row .btn { flex: 1 1 100%; }
  .store-badge img { height: 44px; }
  .demo { padding: 12px; }
  .hud div { font-size: 13px; gap: 4px; }
  .hud svg { width: 14px; height: 14px; }
  .section { padding: 48px 0 16px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .sec-head .chip { margin: 0; }
  .lesson { padding: 22px 16px 18px; }
  .mode-body { padding: 16px; }
  .mode-side { padding: 16px 16px 16px 0; }
  .mode-compete h3 { font-size: 30px; }
  .faq summary { font-size: 17px; padding: 14px 54px 14px 16px; }
  .faq details p { padding: 0 16px 16px; }
  .cta-band .btn { width: 100%; }
  .footer-inner { padding: 22px 18px 18px; }
  .shot { width: 210px; }
  .burst span { font-size: 44px; }
}

@media (max-width: 360px) {
  .wordmark { font-size: 20px; }
  .t { min-width: 38px; height: 38px; font-size: 18px; }
  .store-badge img { height: 40px; }
  .tabbar a { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .enter .hero-copy > *, .enter .hero .demo { animation: none; }
  .btn, .tile, .mode, .tabbar .bubble, .store-badge { transition: none; }
  .tile.selected, .tile.pop, .burst.go, .tile .pv, .tile.enter, .tile.gulp, .tile.selected::after, .rays, .board.win,
  .mode-art, .mode .pat, .play-pill, .brand img, .tabbar .icon, .mock-reward .chest, .mock-podium .crown,
  .mock-sound .pops span, .mock-store .top::before, .cta-band .ring, .sheet .stars i, .hud .bump, .status { animation: none !important; }
  .backdrop { transform: none !important; }
  .device, .shot:hover .device { transform: none; }
  .burst.go { opacity: 1; }
}

/* Short landscape phones: don't pin the header over the little height there is. */
@media (max-height: 480px) and (orientation: landscape) {
  .nav-wrap { position: static; }
  .tabbar { display: none; }
  body { padding-bottom: 0; }
}

@media print {
  body::before, .backdrop, .nav-wrap, .tabbar, .socials, .mock, .pat { display: none !important; }
  .card { box-shadow: none; }
}

/* ---------- things the CSP won't allow inline ---------- */

.defs { position: absolute; width: 0; height: 0; }
.icon-fill { fill: currentColor; stroke: none; }
.mode-compete .m1 { right: 38%; top: 14%; font-size: 26px; transform: rotate(-12deg); }
.mode-compete .m2 { right: 26%; top: 62%; font-size: 22px; transform: rotate(10deg); }
.mode-compete .m3 { right: 16%; top: 8%; font-size: 28px; transform: rotate(14deg); }
.mode-casual .m1 { right: 30%; top: 18%; font-size: 24px; transform: rotate(8deg); }
.mode-casual .m2 { right: 12%; top: 56%; font-size: 26px; transform: rotate(-10deg); }
.mode-custom .m1 { right: 34%; top: 16%; font-size: 26px; transform: rotate(-8deg); }
.mode-custom .m2 { right: 14%; top: 60%; font-size: 24px; transform: rotate(12deg); }
.face-grape { background: #8E6BFF; }
.face-sun { background: #FFC83D; }
.face-lilac { background: #B98CFF; }

/* ---------- motion, borrowed from the app (Bouncy, PopIn, the NULL burst) ---------- */

@keyframes spring { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes jelly { 0% { transform: scale(1); } 30% { transform: scale(1.22, 0.82); } 50% { transform: scale(0.9, 1.14); } 70% { transform: scale(1.06, 0.96); } 100% { transform: scale(1); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wobble { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.05); } 100% { transform: rotate(0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(4deg); } }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-6px) scale(1.15); } 100% { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nudge { 0%, 78%, 100% { transform: rotate(0); } 83% { transform: rotate(-9deg); } 88% { transform: rotate(8deg); } 94% { transform: rotate(-4deg); } }

/* Brand mark wobbles when hovered. */
.brand:hover img { animation: wobble 0.6s ease; }

/* Tab bar icon hops onto the bubble. */
.tabbar a[aria-current] .icon { animation: hop 0.5s cubic-bezier(.34,1.56,.64,1); }

/* Mode art floats (Casual, Custom) or pulses (Compete); the tile pattern drifts. */
.mode-casual .mode-art, .mode-custom .mode-art { animation: floaty 4s ease-in-out infinite; }
.mode-custom .mode-art { animation-delay: -2s; }
.mode-compete .mode-art { animation: pulse 2.6s ease-in-out infinite; }
@keyframes drift { to { transform: translate(-31.3px, 6.65px); } }
.mode .pat { animation: drift 7s linear infinite; }
.mode:hover .play-pill { animation: wiggle 0.5s ease; }

/* Board: tiles spring in, the picked-up tile rings, merges gulp, values jelly. */
.tile.enter { animation: spring 0.55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--d, 0) * 45ms); }
.tile.selected::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 3px solid #C9BFA8;
  animation: halo 1.6s ease-out infinite;
  pointer-events: none;
}
.tile.neg.selected::after { border-color: #9AA0CC; }
@keyframes halo { 0% { opacity: 0.9; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.35); } }
.tile.gulp {
  z-index: 3;
  pointer-events: none;
  animation: gulp 0.26s cubic-bezier(.4,0,.8,1) forwards;
}
@keyframes gulp { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.25); opacity: 0.15; } }
.tile.pop { animation: jelly 0.6s cubic-bezier(.2,.8,.3,1); }
.board.win { animation: shimmy 0.6s ease; }
@keyframes shimmy { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }

/* Sun rays and confetti burst out of a fresh Null (positioned by script.js). */
.rays {
  position: absolute;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 61, 0.55) 0 9deg, transparent 9deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.rays.go { animation: rays 0.9s ease-out both; }
@keyframes rays { 0% { opacity: 0; transform: scale(0.3) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(40deg); } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
  position: absolute;
  left: var(--px, 50%); top: var(--py, 50%);
  width: 8px; height: 12px;
  border-radius: 2px;
  background: var(--c, var(--sun));
  animation: fly var(--t, 0.9s) cubic-bezier(.2,.8,.3,1) forwards;
}
.confetti i.round { border-radius: 50%; width: 9px; height: 9px; }
@keyframes fly { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.7); opacity: 0; } }

/* HUD numbers bump when they change; the status pill jellies on a Null. */
.hud .bump { display: inline-block; animation: bump 0.45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 50% { transform: scale(1.4); } }
.status.null, .status.win { animation: jelly 0.55s ease; }

/* Results sheet: stars light up in turn once it scrolls in. */
.sheet .stars i { display: inline-block; font-style: normal; }
.sheet.in .stars i:not(.off) { animation: spring 0.5s cubic-bezier(.34,1.56,.64,1) both; }
.sheet.in .stars i:nth-child(2) { animation-delay: 0.15s; }
.sheet.in .stars i:nth-child(3) { animation-delay: 0.3s; }

/* Feature mock-ups: the chest nudges, the crown floats, the pops pulse, the store rays spin. */
.mock-reward .chest { animation: nudge 4s ease-in-out infinite; transform-origin: 50% 85%; }
.mock-podium .crown { animation: floaty 3s ease-in-out infinite; }
.mock-sound .pops span { animation: pulse 1.8s ease-in-out infinite; }
.mock-sound .pops span:nth-child(2) { animation-delay: 0.3s; }
.mock-sound .pops span:nth-child(3) { animation-delay: 0.6s; }
.mock-store .top::before { animation: spin 16s linear infinite; }

/* Gallery phones lift and catch a shine when hovered. */
.device { position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; }
.device::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
  opacity: 0;
}
.shot:hover .device { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 0 10px 0 var(--shadow); }
.shot:hover .device::after { animation: shine 0.9s ease; }
@keyframes shine { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* Call-to-action ring breathes. */
.cta-band .ring { animation: ring 2.6s ease-in-out infinite; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 211, 138, 0.45); } 60% { box-shadow: 0 0 0 16px rgba(47, 211, 138, 0); } }

/* Cards squash a little when pressed, like Bouncy. */
.lesson:active, .feature:active, .rule:active, .legal-card:active { transform: scale(0.98); }
.lesson, .feature, .rule { transition: transform 0.15s cubic-bezier(.3,1.6,.5,1); }