/* =========================================================================
   Blockstellar — site styles
   Palette is lifted directly from the game's "Nebula" theme (game/js/data.js)
   so the site and the app read as one product.
   ========================================================================= */

:root {
  --void:      #06040f;
  --panel:     #120c2e;
  --panel-2:   #1a1140;
  --line:      rgba(140, 120, 255, 0.18);
  --amethyst:  #7c4dff;
  --cyan:      #00e5ff;
  --gold:      #ffd700;
  --mist:      #b9b3e8;
  --dim:       #7d76ab;
  --white:     #ffffff;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Nunito", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);
}

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

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

body {
  background: var(--void);
  color: var(--mist);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient nebula wash — two soft radials, no image payload. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vw at 12% -6%,  rgba(124, 77, 255, 0.20), transparent 62%),
    radial-gradient(50vw 44vw at 92% 12%,  rgba(0, 188, 212, 0.13),  transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(171, 71, 188, 0.12), transparent 64%);
}

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--white); }

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

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

/* ---------- grid-coordinate section markers -------------------------------
   An 8x8 board has coordinates, so the page uses them instead of 01/02/03.
   ------------------------------------------------------------------------- */
.coord {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  color: var(--dim); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.coord::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6, 4, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 62px;
}
.brand {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em; color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
}
.brand:hover { color: var(--white); }
.brand-mark {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  background: linear-gradient(150deg, var(--cyan), var(--amethyst));
  box-shadow: 0 0 14px rgba(124, 77, 255, 0.85);
}
.site-nav { display: flex; gap: clamp(14px, 3vw, 30px); }
.site-nav a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist); text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cyan); }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 7vw, 88px); }
.hero .wrap {
  display: grid; gap: clamp(34px, 6vw, 72px); align-items: center;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}
.wordmark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 8.5vw, 88px); line-height: 0.88;
  letter-spacing: -0.035em; color: var(--white);
}
.wordmark span {
  display: block;
  background: linear-gradient(96deg, var(--cyan), var(--amethyst) 78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tagline {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cyan); margin-top: 22px;
}
.hero p.lede {
  font-size: clamp(16px, 1.9vw, 18.5px); max-width: 44ch; margin-top: 16px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 800; font-size: 15px;
  padding: 13px 24px; border-radius: 13px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform 0.14s ease, filter 0.14s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--amethyst), #3d5afe);
  color: var(--white);
  box-shadow: 0 8px 26px rgba(83, 45, 196, 0.5), inset 0 1px 0 rgba(255,255,255,0.32);
}
.btn-primary:hover { color: var(--white); filter: brightness(1.1); }
.btn-ghost { border-color: var(--line); color: var(--mist); }
.btn-ghost:hover { color: var(--white); border-color: rgba(140,120,255,0.45); }
.btn-note { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: 0.06em; margin-top: 16px; }

/* ---------- signature: the self-playing board ---------- */
.board-frame {
  position: relative;
  padding: clamp(12px, 2.4vw, 20px);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(30, 20, 74, 0.92), rgba(10, 6, 32, 0.92));
  border: 1px solid var(--line);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(3px, 0.7vw, 6px);
  aspect-ratio: 1;
}
.cell {
  border-radius: clamp(4px, 1vw, 8px);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  position: relative;
}
.cell.on {
  background: linear-gradient(180deg, var(--gem-hi), var(--gem) 46%, var(--gem-lo));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.28),
    0 3px 9px rgba(0, 0, 0, 0.42);
  animation: gemIn 0.26s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.cell.flash {
  background: var(--white);
  box-shadow: 0 0 22px 5px rgba(255, 255, 255, 0.75);
  animation: none;
}
.cell.clearing { animation: gemOut 0.3s cubic-bezier(0.5, 0, 0.75, 0) both; }

@keyframes gemIn  { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gemOut { to { transform: scale(0); opacity: 0; } }

.board-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim); margin-top: 14px; padding: 0 2px;
}
.board-cap b { color: var(--cyan); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- content sections ---------- */
.section { padding: clamp(46px, 7vw, 86px) 0; border-top: 1px solid var(--line); }
.section h2 {
  font-family: var(--display); font-weight: 700; color: var(--white);
  font-size: clamp(25px, 3.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em;
}
.section > .wrap > p { max-width: var(--measure); margin-top: 14px; }

.cards { display: grid; gap: 16px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card {
  background: linear-gradient(165deg, rgba(26, 17, 64, 0.72), rgba(12, 8, 34, 0.72));
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px;
}
.card h3 {
  font-family: var(--display); font-weight: 700; font-size: 17.5px;
  color: var(--white); margin-bottom: 7px; letter-spacing: -0.01em;
}
.card p { font-size: 14.5px; line-height: 1.6; }
.card .tick {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amethyst); display: block; margin-bottom: 10px;
}

/* the one gold moment on the page */
.deluxe {
  margin-top: 34px; padding: 24px 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(56, 40, 14, 0.5), rgba(14, 9, 34, 0.72));
  border: 1px solid rgba(255, 215, 0, 0.32);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.deluxe h3 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--gold); letter-spacing: 0.01em; margin-bottom: 6px;
}
.deluxe p { font-size: 14.5px; max-width: 58ch; }

/* ---------- document pages ---------- */
.doc { padding: clamp(40px, 6vw, 74px) 0 clamp(56px, 8vw, 96px); }
.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 34px; }
.doc h1 {
  font-family: var(--display); font-weight: 700; color: var(--white);
  font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.025em;
}
.doc .updated { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 12px; }
.doc-body { max-width: var(--measure); }
.doc-body h2 {
  font-family: var(--display); font-weight: 700; color: var(--white);
  font-size: 21px; letter-spacing: -0.012em; margin: 40px 0 12px;
  scroll-margin-top: 80px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-family: var(--display); font-weight: 700; color: var(--white); font-size: 16.5px; margin: 24px 0 8px; }
.doc-body p, .doc-body li { font-size: 15.5px; }
.doc-body p + p { margin-top: 14px; }
.doc-body ul { margin: 12px 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.doc-body li::marker { color: var(--amethyst); }
.doc-body strong { color: var(--white); font-weight: 800; }
.doc-body .callout {
  margin-top: 18px; padding: 16px 18px; border-radius: 13px;
  background: rgba(124, 77, 255, 0.09); border: 1px solid var(--line);
  border-left: 3px solid var(--amethyst);
  font-size: 14.5px;
}
.doc-body table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.doc-body th, .doc-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-body th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.doc-body td:first-child { color: var(--white); font-weight: 700; }
.table-scroll { overflow-x: auto; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.toc a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px;
  color: var(--mist); text-decoration: none;
}
.toc a:hover { color: var(--cyan); border-color: rgba(0, 229, 255, 0.4); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 52px; margin-top: 20px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot a { font-size: 14px; color: var(--mist); text-decoration: none; }
.site-foot a:hover { color: var(--cyan); }
.foot-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--dim); line-height: 1.9; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* Single column, headline first — the board is tall enough that leading with
     it would push the name and the pitch below the fold. */
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .board-frame,
  .hero .board-cap { max-width: 430px; margin-inline: auto; }
  .site-head .wrap { height: 56px; }
  .deluxe { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .site-nav { gap: 13px; }
  .site-nav a { font-size: 11px; }
  .brand { font-size: 15px; }
}

/* Brand + three nav items stop fitting around here (small Androids, 320px). */
@media (max-width: 400px) {
  :root { --gutter: 14px; }
  .site-head .wrap { gap: 12px; }
  .brand { font-size: 14px; gap: 7px; }
  .site-nav { gap: 11px; }
  .site-nav a { font-size: 10.5px; letter-spacing: 0.06em; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}