/* Numstone site. Colours mirror the app (Palette.swift, World.swift, Theme.crystal) and DESIGN.md.
   Spacing stays on the 4/8/12/16/20/24/32/40/48/64 scale. */

:root {
  color-scheme: light dark;

  /* The game's night. The hero and the screens band wear it in both colour schemes. */
  --night: #07131f;
  --plate: #05080f;
  --panel: rgb(7 26 48 / 0.72);
  --tile: #3e6488;
  --tile-side: #0b2038;
  --chamfer: #b8ecff;
  --found: #10233a;
  --found-ink: #58799c;
  --aurora: #4fe0b0;
  --glow: #7c9bff;
  --red: #ef5a50;
  --gold: #f6c453;
  --muted-on-night: rgb(255 255 255 / 0.7);

  /* Adaptive surfaces: DESIGN.md light tokens. */
  --canvas: #f5f5f7;
  --canvas-2: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #333333;
  --hairline: #e0e0e0;
  --link: #0066cc;
  --focus: #0071e3;

  --display: ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #080d18;
    --canvas-2: #111a2e;
    --ink: #ffffff;
    --ink-2: rgb(255 255 255 / 0.7);
    --hairline: rgb(255 255 255 / 0.1);
    --link: #2997ff;
    --focus: #b8ecff;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.47 var(--text);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- header ---------- */

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.top-over {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  color: #fff;
  --focus: #b8ecff;
}

.top-line {
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: inherit;
  font: 800 20px/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
}

.top nav {
  display: flex;
  gap: 4px;
}

.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: inherit;
  font-size: 14px;
  opacity: 0.8;
  text-decoration: none;
}

.top nav a:hover,
.top nav a[aria-current] {
  opacity: 1;
  text-decoration: underline;
}

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  min-height: 100svh;
  padding-top: 64px;
  background: var(--night);
  color: #fff;
  --focus: #b8ecff;
  --link: #2997ff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/img/aurora.webp?v=1") center 16% / cover no-repeat;
  animation: drift 24s ease-in-out infinite alternate;
}

/* Fades the painting into the night below, as the app's menus do. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(7 19 31 / 0.5), rgb(7 19 31 / 0.1) 24%, rgb(7 19 31 / 0.25) 60%, var(--night));
  pointer-events: none;
}

@keyframes drift {
  to {
    transform: scale(1.06);
  }
}

.hero-in {
  display: grid;
  grid-template-areas: "h" "play" "cta" "lead";
  justify-items: center;
  align-content: center;
  row-gap: 12px;
  padding-block: 4px 32px;
  text-align: center;
}

.hero h1 {
  grid-area: h;
  font-size: clamp(28px, 7.6vw, 40px);
  line-height: 1.07;
  text-shadow: 0 2px 24px rgb(7 19 31 / 0.6);
}

.hero h1 span {
  display: block;
}

.play {
  grid-area: play;
  /* Leaves room for the header, headline, clock, status and the store pill on one phone screen. */
  --board: max(240px, min(100vw - 32px, 100svh - 304px, 520px));
  width: var(--board);
}

.hero-lead {
  grid-area: lead;
  max-width: 46ch;
  margin-top: 12px;
  color: rgb(255 255 255 / 0.82);
}

.cta {
  grid-area: cta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
}

@media (min-width: 900px) {
  .hero-in {
    grid-template-areas: ". play" "h play" "lead play" "cta play" ". play";
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 64px;
    row-gap: 20px;
    justify-items: start;
    padding-block: 16px 48px;
    text-align: left;
  }

  .hero h1 {
    font-size: clamp(44px, 5vw, 64px);
  }

  .play {
    --board: max(240px, min(520px, 100svh - 248px, 44vw));
    align-self: center;
  }

  .hero-lead {
    margin-top: 0;
    font-size: 21px;
    line-height: 1.38;
  }

  .hero .cta {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* ---------- the board ---------- */

.clock {
  position: relative;
  display: flex;
  justify-content: center;
  font: 800 44px/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-shadow: 0 0 24px rgb(124 155 255 / 0.6);
}

.penalty {
  position: absolute;
  left: calc(50% + 2.9em);
  top: 4px;
  color: var(--red);
  font-size: 20px;
  opacity: 0;
  text-shadow: none;
}

.penalty.show {
  animation: penalty 0.8s ease-out;
}

@keyframes penalty {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

.board {
  position: relative;
  margin-top: 8px;
  aspect-ratio: 1;
}

/* The plate with its three stacked rings of cold light, as around the app's board. */
.board::before {
  content: "";
  position: absolute;
  inset: 1.4%;
  border-radius: 50%;
  background: var(--plate);
  box-shadow: 0 0 0 2px rgb(184 236 255 / 0.9), 0 0 24px 4px rgb(124 155 255 / 0.6), 0 0 64px 8px rgb(143 211 240 / 0.25);
}

.board svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tile {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: arrive 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

.tile .side {
  fill: var(--tile-side);
}

.tile .face {
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.tile .top {
  fill: var(--tile);
  stroke: var(--chamfer);
  stroke-width: 3;
}

.tile .tex {
  pointer-events: none;
}

.tile text {
  fill: #fff;
  font-family: var(--display);
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgb(11 32 56 / 0.5);
  stroke-width: 8px;
  stroke-linejoin: round;
  pointer-events: none;
}

@media (hover: hover) {
  .tile:not(.found):hover .top {
    stroke-width: 6;
  }
}

.tile:active .face {
  transform: translateY(6px);
}

.tile:focus-visible .top {
  stroke: #fff;
  stroke-width: 8;
}

.tile.start .top {
  fill: var(--aurora);
  stroke: #eafff7;
}

.tile.start .tex {
  opacity: 0.3;
}

.tile.start text {
  fill: #06262b;
  stroke: none;
}

.tile.found {
  cursor: default;
}

.tile.found .face {
  transform: translateY(9px);
}

.tile.found .top {
  fill: var(--found);
  stroke: rgb(184 236 255 / 0.12);
}

.tile.found .tex {
  opacity: 0;
}

.tile.found text {
  fill: var(--found-ink);
  stroke: none;
}

.tile.wrong .top {
  fill: var(--red);
}

.tile.wrong .tex {
  opacity: 0.2;
}

.tile.wrong .face {
  animation: shake 0.3s;
}

@keyframes shake {
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

.halo {
  pointer-events: none;
}

.status {
  min-height: 22px;
  margin-top: 8px;
  color: var(--muted-on-night);
  font: 600 15px/22px var(--text);
  text-align: center;
}

/* ---------- result panel ---------- */

.result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(88%, 320px);
  padding: 24px;
  border: 1px solid rgb(184 236 255 / 0.35);
  border-radius: 24px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.5);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.result[hidden] {
  display: none;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

.result-label {
  color: var(--gold);
  font: 700 13px/1.2 var(--text);
  letter-spacing: 0.02em;
}

.result-time {
  margin-top: 4px;
  font: 800 48px/1.1 var(--display);
  font-variant-numeric: tabular-nums;
}

.stars {
  margin-top: 4px;
  color: rgb(255 255 255 / 0.22);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 4px;
}

.stars b {
  color: var(--gold);
  font-weight: 400;
}

.result-note {
  margin-top: 12px;
  color: var(--muted-on-night);
  font-size: 14px;
  line-height: 1.43;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- buttons and pills ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  font: 700 17px/1 var(--text);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s, background-color 0.2s;
}

.btn:active {
  transform: scale(0.97);
}

.btn-go {
  background: var(--aurora);
  color: #06262b;
}

.btn-go:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  color: #fff;
}

.btn-ghost:hover {
  background: rgb(255 255 255 / 0.12);
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 9999px;
  font: 600 17px/1 var(--text);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Before launch: a status, not a button. */
.pill-soon {
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent);
}

/* After launch: the app's Play Now gradient. */
.pill-cta {
  background: linear-gradient(90deg, #ff6a5e, #e860c8, #3d8bff, #35c8ff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45), 0 6px 20px rgb(232 96 200 / 0.45);
  color: #fff;
  transition: transform 0.2s, filter 0.2s;
}

.pill-cta:hover {
  filter: brightness(1.08);
}

.pill-cta:active {
  transform: scale(0.97);
}

.notify {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}

/* ---------- bands ---------- */

.band {
  padding-block: 48px;
}

.band h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}

.band-lead {
  max-width: 60ch;
  margin-top: 12px;
  color: var(--ink-2);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
}

@media (min-width: 720px) {
  .band {
    padding-block: 64px;
  }
}

/* real screens */

.shots {
  background: var(--night);
  color: #fff;
  --ink-2: rgb(255 255 255 / 0.7);
  --focus: #b8ecff;
  text-align: center;
}

.shots .band-lead {
  margin-inline: auto;
}

.phones {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(68%, 280px);
  gap: 16px;
  margin: 32px -16px 0;
  padding: 0 16px 16px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
}

.phones li {
  scroll-snap-align: start;
}

.phones figure {
  margin: 0;
}

.phone {
  padding: 2.2%;
  border-radius: 13.5% / 6.2%;
  background: #0b0f17;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 24px 48px rgb(0 0 0 / 0.5);
}

.phone img {
  width: 100%;
  aspect-ratio: 720 / 1564;
  border-radius: 11.6% / 5.3%;
}

.phones figcaption {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.43;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 720px) {
  .phones {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 280px));
    justify-content: center;
    gap: 32px;
    margin: 40px 0 0;
    padding: 0;
    overflow: visible;
  }
}

/* levels */

.levels .wrap {
  display: grid;
  gap: 40px;
}

.rules {
  display: grid;
  margin: 32px 0 0;
}

.rules div {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 16px;
  padding-block: 12px;
  border-top: 1px solid var(--hairline);
}

.rules dt {
  font-weight: 600;
}

.rules dd {
  margin: 0;
  color: var(--ink-2);
}

.ladder {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bar length is the board size: 50 numbers is half of 100. Colours are the level's world. */
.ladder li {
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--w);
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  background: linear-gradient(100deg, var(--w1), var(--w2) 55%, var(--w3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa) 45%, transparent);
  color: #fff;
}

.ladder b {
  font: 800 24px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.ladder span {
  font-size: 15px;
  font-weight: 600;
}

.ladder i {
  display: none;
  margin-left: auto;
  color: var(--wa);
  font-size: 13px;
  font-style: normal;
  white-space: nowrap;
}

.ladder em {
  padding: 4px 8px;
  border-radius: 9999px;
  background: var(--gold);
  color: #1b1c22;
  font: 700 12px/1 var(--text);
}

.w-frost {
  --w1: #122b4d;
  --w2: #173b60;
  --w3: #0a1628;
  --wa: #9ad8ff;
  --w: 50%;
}

.w-aurora {
  --w1: #06262b;
  --w2: #0b3b3a;
  --w3: #07131f;
  --wa: #4fe0b0;
  --w: 60%;
}

.w-dusk {
  --w1: #2a1650;
  --w2: #5a2152;
  --w3: #1a0e2e;
  --wa: #ffb347;
  --w: 70%;
}

.w-deep {
  --w1: #0a3a66;
  --w2: #06264a;
  --w3: #030f24;
  --wa: #4cc9f0;
  --w: 80%;
}

.w-ember {
  --w1: #2b0e12;
  --w2: #4a1414;
  --w3: #120608;
  --wa: #ff8a3d;
  --w: 90%;
}

.w-cosmos {
  --w1: #1b0f3f;
  --w2: #3b1668;
  --w3: #0b0620;
  --wa: #f6c453;
  --w: 100%;
}

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

@media (min-width: 900px) {
  .levels .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
}

/* pro */

.pro {
  background: var(--canvas-2);
  text-align: center;
}

/* break between sentences, never inside one */
.pro h2 span {
  white-space: nowrap;
}

.pro .band-lead {
  margin-inline: auto;
}

.pro .cta {
  margin-top: 32px;
}

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

.foot {
  padding-block: 32px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.43;
}

.foot .wrap {
  display: grid;
  gap: 12px;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}

.fine {
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* ---------- text pages ---------- */

.doc {
  padding-block: 40px 64px;
}

.doc article {
  max-width: 680px;
}

.doc h1 {
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1.07;
}

.doc .updated {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14px;
}

.doc h2 {
  margin-top: 40px;
  font-size: 22px;
  line-height: 1.2;
}

.doc p,
.doc ul {
  margin-top: 12px;
}

.doc ul {
  padding-left: 20px;
}

.doc li + li {
  margin-top: 8px;
}

.doc .summary {
  margin-top: 24px;
  padding: 20px;
  border-radius: 16px;
  background: var(--canvas-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.faq {
  margin-top: 16px;
  border-bottom: 1px solid var(--hairline);
}

.faq details {
  border-top: 1px solid var(--hairline);
}

.faq summary {
  padding-block: 16px;
  font-weight: 600;
  cursor: pointer;
}

.faq details p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

.missing {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
  min-height: 60svh;
}

.missing .pill {
  background: var(--ink);
  color: var(--canvas);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .tile,
  .result,
  .tile.wrong .face {
    animation: none;
  }

  .penalty.show {
    animation: none;
    opacity: 1;
  }

  .tile .face,
  .btn,
  .pill-cta {
    transition: none;
  }
}