/* Deckla — site styles.
   Colours, radii and type are lifted from the app's design tokens
   (GameCore/DesignSystem/Tokens.swift) so the site and the app agree.
   Like the app, this commits to one dark look: a card table reads as a table. */

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --ink: #070a16;
  --ink-sunken: #0b1024;
  --surface: #0f1226;
  --surface-raised: #121935;
  --surface-active: #26305a;

  --border: #222c4e;
  --border-subtle: #1f2a4d;
  --border-strong: #33406f;

  --text-primary: #eef1f8;
  --text-secondary: #8a93b2;
  --text-tertiary: #5c6790;
  --text-muted: #7b85a8;

  --accent: #ff4d8d;
  --accent-hover: #ff7aa8;
  --on-accent: #070a16;
  --accent-soft: rgba(255, 77, 141, 0.12);
  --accent-soft-border: rgba(255, 77, 141, 0.3);
  --accent-soft-text: #ffb0cb;

  --jade: #3ddc9a;
  --amber: #ffb020;

  --radius-chip: 6px;
  --radius-control: 11px;
  --radius-field: 14px;
  --radius-button: 16px;
  --radius-panel: 20px;
  --radius-pill: 999px;

  --shell: 1080px;
  --gutter: clamp(20px, 5vw, 40px);

  --font: "Sora", ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
    "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- reset */

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

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-color: rgba(255, 77, 141, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 12px; }

/* ------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(56px, 9vw, 96px); }
section + section { border-top: 1px solid var(--border-subtle); }

/* --------------------------------------------------------------- type */

h1, h2, h3, h4 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; font-weight: 700; }

h1 { font-size: clamp(40px, 7.5vw, 62px); }
h2 { font-size: clamp(28px, 4.2vw, 38px); }
h3 { font-size: clamp(19px, 2.4vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 16px; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--text-secondary);
  max-width: 62ch;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.muted { color: var(--text-secondary); }
.fine { font-size: 13px; color: var(--text-muted); max-width: 70ch; }

/* A panel can be full-bleed; its prose should not be. */
.panel .lede,
.panel > p { max-width: 74ch; }

.section-head { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--text-secondary); margin-top: 12px; }

/* ------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 22, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar .shell {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
}

.wordmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
.wordmark img { width: 28px; height: 28px; border-radius: 8px; }

.topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
}
.topnav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.topnav a:hover { color: var(--text-primary); }
.topnav a[aria-current="page"] { color: var(--accent); }
.topnav a { white-space: nowrap; }

/* Below this the wordmark and three links stop fitting on one line. The
   dropped link is a same-page anchor, still reachable by scrolling. */
@media (max-width: 460px) {
  .topnav { gap: 16px; }
  .topnav a { font-size: 13px; }
  .topnav a.optional { display: none; }
}
@media (max-width: 360px) {
  .topbar .shell { gap: 12px; }
  .wordmark { font-size: 16px; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 10vw, 108px) clamp(56px, 9vw, 96px);
  border-bottom: 1px solid var(--border-subtle);
}

/* The table: a pool of light under the middle of the board. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 900px;
  background: radial-gradient(
    ellipse 60% 50% at 50% 42%,
    #16305c 0%,
    rgba(11, 16, 36, 0.75) 55%,
    rgba(8, 12, 28, 0) 100%
  );
  pointer-events: none;
}

.hero .shell { position: relative; }

.hero-grid {
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero h1 { margin-bottom: 20px; }
.hero .lede { margin-bottom: 28px; }

.hero-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(4, 7, 18, 0.6);
}

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(15, 18, 38, 0.6);
}
.chip.accent {
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}

.hero-shot {
  justify-self: center;
  max-width: 296px;
  width: 100%;
}

/* --------------------------------------------------- coming-soon page
   What `index.html` is until the App Store listing exists: one centred
   column, no nav, nothing below the fold to scroll to. */

.solo {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 42px);    /* what the slim footer below leaves */
  min-height: calc(100svh - 42px);
  border-bottom: 0;
  padding-block: clamp(48px, 9vw, 96px);
  text-align: center;
}

.solo .eyebrow { color: var(--accent-soft-text); }
.solo h1 { margin-bottom: 20px; }
.solo .lede { margin-inline: auto; max-width: 52ch; }
.solo .badge-row { justify-content: center; margin-top: 30px; }

.solo-icon {
  width: clamp(96px, 20vw, 120px);
  height: auto;
  margin: 0 auto 34px;
  border-radius: 26px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(4, 7, 18, 0.7);
}

/* ----------------------------------------------------------- buttons */

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------ panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 3vw, 28px);
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }

/* Game cards ------------------------------------------------------- */

.game-card { display: flex; flex-direction: column; gap: 14px; }

.game-head { display: flex; align-items: center; gap: 14px; }

.game-mark {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-field);
  color: var(--on-accent);
}
.game-mark svg { width: 22px; height: 22px; fill: currentColor; }
.game-mark.ember { background: var(--accent); }
.game-mark.jade { background: var(--jade); }

.game-head h3 { margin: 0; }
.game-head .tagline { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; }

.game-card .blurb { color: var(--text-secondary); font-size: 15px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* Feature cards ---------------------------------------------------- */

.feature h3 { margin-bottom: 8px; font-size: 17px; }
.feature p { color: var(--text-secondary); font-size: 14.5px; margin: 0; }

.feature-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--surface-active);
  color: var(--accent-soft-text);
  margin-bottom: 16px;
}
.feature-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature-mark.jade { color: var(--jade); }

/* ------------------------------------------------------- screenshots */

.shots {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

figure { margin: 0; }

.shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
  border: 1px solid var(--border);
  background: var(--ink-sunken);
  box-shadow: 0 24px 50px rgba(4, 7, 18, 0.55);
}

.shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.shots-wide { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ------------------------------------------------------------ tables */

.rules-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rules-table th,
.rules-table td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.rules-table tr:last-child th,
.rules-table tr:last-child td { border-bottom: 0; }
.rules-table th { font-weight: 500; color: var(--text-muted); width: 42%; padding-right: 18px; }
.rules-table td { color: var(--text-primary); }

/* -------------------------------------------------------- steps list */

ol.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 22px;
  color: var(--text-secondary);
  font-size: 15px;
}
ol.steps > li:last-child { margin-bottom: 0; }

ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-active);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

ol.steps > li strong { color: var(--text-primary); font-weight: 600; }

ul.plain { margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14.5px; }
ul.plain li { margin-bottom: 8px; }
ul.plain li:last-child { margin-bottom: 0; }
ul.plain strong { color: var(--text-primary); font-weight: 600; }

kbd, .ui {
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-chip);
  background: var(--surface-active);
  color: var(--text-primary);
  white-space: nowrap;
}

/* ----------------------------------------------------- troubleshoot */

.faq { border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); overflow: hidden; }

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

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px clamp(18px, 3vw, 26px);
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.faq details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq summary:hover { background: var(--surface-raised); }

.faq .answer {
  padding: 0 clamp(18px, 3vw, 26px) 22px;
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 84ch;
}
.faq .answer > :first-child { margin-top: 0; }

/* ------------------------------------------------------------- misc */

.callout {
  border-radius: var(--radius-field);
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  padding: 16px 20px;
  color: var(--accent-soft-text);
  font-size: 14.5px;
}
.callout strong { color: #fff; }

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.toc a {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--ink-sunken);
}
.toc a:hover { color: var(--text-primary); border-color: var(--border-strong); }

.stack > * + * { margin-top: 18px; }
/* Element+class selectors above set `margin: 0`, which out-specifies the rule
   above. Restate it at matching specificity. */
.stack > * + ol.steps,
.stack > * + ul.plain { margin-top: 18px; }

/* Anchored headings clear the sticky bar. */
[id] { scroll-margin-top: 84px; }

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

.footer {
  border-top: 1px solid var(--border-subtle);
  padding-block: 44px 56px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.footer .shell { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* Collapsed, for the coming-soon page: with the nav gone there is one line of
   text down there, and it only needs enough room not to touch the rule above
   it. The page is one centred column, so the line is centred too. */
.footer-slim { padding-block: 10px; text-align: center; }
.footer-slim .shell { justify-content: center; }
.footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--text-primary); }

/* ------------------------------------------------------ spacing utilities
   Used instead of inline `style` attributes so `_headers` can keep
   `style-src 'self'` without `'unsafe-inline'`. */

.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 18px; }
.mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 14px; }

/* Sub-heading that groups several FAQ panels. */
.faq-group-heading { margin: 34px 0 14px; }