/* funaudiogames.com: the one stylesheet every page links. Fonts, theme tokens, the top bar with its menu, buttons,
   the home page (what the games are, the Alien Customs demo in a phone, where to get the app, the games, the
   accessibility and the questions people ask), the text pages (accessibility, privacy, terms, support) and the footer.

   Themes. Every colour is a token. Dark (the brand's navy and gold) is the default; Light and High contrast (black,
   white and yellow) come from the device's settings (prefers-color-scheme, prefers-contrast), as do less motion
   (prefers-reduced-motion) and Windows' forced colours. Text sizes are in rem, so the browser's text size and zoom
   scale everything. In every theme, text keeps a contrast of at least 7:1 on --bg and --surface:
   test/pages.test.js checks --ink, --muted, --faint, --lilac, --accent and --accent-hover there, --accent-ink on
   --accent, --play-ink on --play (the demo's green Play button, yellow in high contrast), and every literal `color:`
   in this file. The purples (--purple, --purple-deep) are for surfaces and glows only, never for text. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- theme: dark (the default) ---------- */
:root {
  color-scheme: dark;
  --bg: #0b1430;
  --bg-deep: #070d22;
  --surface: #0f1a3d;
  --surface-2: #15214a;
  --ink: #f6f8ff;
  --muted: #c5cfee;
  --faint: #b3bee2;
  --accent: #ffd54f;
  --accent-hover: #ffe58a;
  --accent-ink: #241a00;
  --lilac: #cdb9ff;
  --on-purple: #ffffff;
  --purple: #7a4ce0;
  --purple-deep: #2c1263;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --card: rgba(255, 255, 255, 0.04);
  --card-hover: rgba(255, 255, 255, 0.075);
  --field: #081028;
  --bar: rgba(9, 16, 40, 0.86);
  --glow: rgba(122, 76, 224, 0.42);
  --glow-gold: rgba(255, 213, 79, 0.14);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --frame-1: #2b3466;
  --frame-2: #0a1029;
  --screen: #0a1129;
  --icon-1: #7a4ce0;
  --icon-2: #2c1263;
  --qr-frame: #ffffff;
  --play: #3ddc84;
  --play-hover: #6be7a3;
  --play-ink: #0b1430;
  --play-edge: #3ddc84;
  --play-glow: rgba(61, 220, 132, 0.45);
  --border-w: 1px;
  --ring: rgba(255, 213, 79, 0.17);
  --ring-glow: rgba(255, 213, 79, 0.10);
  --glass: rgba(12, 21, 50, 0.74);
  --glass-line: rgba(255, 255, 255, 0.11);
  --go: #ffd54f;
  --go-hover: #ffe27a;
  --go-ink: #1a1400;
  --go-glow: rgba(255, 213, 79, 0.34);
  --provider: #ffffff;
  --provider-hover: #e9edfa;
  --provider-ink: #0b1430;
  --provider-line: #ffffff;
  --quiet: rgba(255, 255, 255, 0.07);
  --quiet-hover: rgba(255, 255, 255, 0.13);
}

/* ---------- theme: light ---------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f5fb;
    --bg-deep: #ebe9f5;
    --surface: #ffffff;
    --surface-2: #f2f0fa;
    --ink: #0b1430;
    --muted: #323d5c;
    --faint: #3d4767;
    --accent: #47279a;
    --accent-hover: #351b7a;
    --accent-ink: #ffffff;
    --lilac: #47279a;
    --on-purple: #ffffff;
    --purple: #7a4ce0;
    --purple-deep: #4a2a9c;
    --line: rgba(11, 20, 48, 0.14);
    --line-strong: rgba(11, 20, 48, 0.3);
    --card: #ffffff;
    --card-hover: #fbfaff;
    --field: #ffffff;
    --bar: rgba(246, 245, 251, 0.9);
    --glow: rgba(122, 76, 224, 0.2);
    --glow-gold: rgba(255, 196, 0, 0.12);
    --shadow: 0 1px 2px rgba(11, 20, 48, 0.06), 0 18px 40px -26px rgba(11, 20, 48, 0.35);
    --shadow-lg: 0 40px 80px -36px rgba(11, 20, 48, 0.45);
    --frame-1: #2b3466;
    --frame-2: #0b1430;
    --screen: #ffffff;
    --icon-1: #7a4ce0;
    --icon-2: #4a2a9c;
    --qr-frame: #ffffff;
    --play: #3ddc84;
    --play-hover: #2fc874;
    --play-ink: #0b1430;
    --play-edge: #138a4a;
    --play-glow: rgba(19, 138, 74, 0.3);
    --border-w: 1px;
    --ring: rgba(71, 39, 154, 0.11);
    --ring-glow: rgba(122, 76, 224, 0.10);
    --glass: rgba(255, 255, 255, 0.8);
    --glass-line: rgba(11, 20, 48, 0.1);
    --go: #47279a;
    --go-hover: #351b7a;
    --go-ink: #ffffff;
    --go-glow: rgba(71, 39, 154, 0.3);
    --provider: #ffffff;
    --provider-hover: #f3f2fa;
    --provider-ink: #0b1430;
    --provider-line: rgba(11, 20, 48, 0.24);
    --quiet: rgba(11, 20, 48, 0.05);
    --quiet-hover: rgba(11, 20, 48, 0.09);
  }
}
/* ---------- theme: high contrast (black, white and yellow), also for prefers-contrast: more ---------- */
@media (prefers-contrast: more) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --bg-deep: #000000;
    --surface: #000000;
    --surface-2: #000000;
    --ink: #ffffff;
    --muted: #ffffff;
    --faint: #ffffff;
    --accent: #ffff00;
    --accent-hover: #ffff8c;
    --accent-ink: #000000;
    --lilac: #ffff00;
    --on-purple: #ffffff;
    --purple: #000000;
    --purple-deep: #000000;
    --line: #ffffff;
    --line-strong: #ffffff;
    --card: #000000;
    --card-hover: #000000;
    --field: #000000;
    --bar: #000000;
    --glow: transparent;
    --glow-gold: transparent;
    --shadow: none;
    --shadow-lg: none;
    --frame-1: #000000;
    --frame-2: #000000;
    --screen: #000000;
    --icon-1: #000000;
    --icon-2: #000000;
    --qr-frame: #ffffff;
    --play: #ffff00;
    --play-hover: #ffff8c;
    --play-ink: #000000;
    --play-edge: #ffffff;
    --play-glow: transparent;
    --border-w: 2px;
    --ring: transparent;
    --ring-glow: transparent;
    --glass: #000000;
    --glass-line: #ffffff;
    --go: #ffff00;
    --go-hover: #ffff8c;
    --go-ink: #000000;
    --go-glow: transparent;
    --provider: #000000;
    --provider-hover: #000000;
    --provider-ink: #ffffff;
    --provider-line: #ffffff;
    --quiet: #000000;
    --quiet-hover: #000000;
  }
}
/* ---------- sizes ---------- */
:root {
  --radius: 20px;
  --radius-sm: 14px;
  --gutter: 16px;
  --max: 1160px;
  --bar-h: 68px;
  --measure: 68ch;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 560px at 85% -160px, var(--glow), transparent 70%),
    radial-gradient(800px 480px at 0% -120px, var(--glow-gold), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

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

p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* the apps' keyboard focus ring: 3px, gold (yellow in high contrast, purple in light) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  text-decoration: underline;
  z-index: 100;
}
.skip:focus { left: var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: 999px;
  border: var(--border-w) solid transparent;
  font-family: var(--font);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-gold {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-gold:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* the main buttons: flat pills, lifted a little by a soft shadow of their own colour */
.btn-gold { box-shadow: 0 10px 26px -14px var(--accent); }

.btn-ghost {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--card-hover); border-color: var(--ink); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: var(--border-w) solid var(--line);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg); }
}

/* On a narrow or short screen (a phone, or a page zoomed in a long way) the top bar scrolls away with the page: there
   its links wrap onto more lines, and kept on screen it would cover a quarter of it, and what's under it */
@media (max-width: 599px), (max-height: 599px) {
  .topbar { position: static; }
  html { scroll-padding-top: 16px; }
}

.topbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: var(--bar-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: 12px;
}
.brand img { width: auto; height: 40px; flex: none; }

/* the logo in white on dark themes, navy on light: one of the pair is shown (and read) at a time */
.on-light { display: none; }
@media (prefers-color-scheme: light) {
  .on-dark { display: none; }
  .on-light { display: block; }
}
@media (prefers-contrast: more) {
  .on-dark { display: block; }
  .on-light { display: none; }
}

/* the site's links: plain words in a row beside the logo (Speak Balkan's way), on every screen, wrapping under the
   logo when there isn't room: no menu to open, nothing hidden. The current page in the accent colour, underlined. */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

@media (max-width: 600px) {
  .topbar-inner { padding-top: 6px; padding-bottom: 6px; }
  .site-nav { width: 100%; }
  .site-nav a { padding: 8px 10px; }
}

/* ---------- small parts ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card {
  border-radius: var(--radius);
  background: var(--card);
  border: var(--border-w) solid var(--line);
  box-shadow: var(--shadow);
  padding: 28px;
}

/* ---------- home. What it is (with the demo's Play near it), the demo in a phone, where to get the app, the games,
   the accessibility, the questions. On a wide screen the words on the left and the phone beside them, staying in view
   while the page scrolls (on a screen tall enough to show all of it); on a narrow one, one column in that order. ---------- */
.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  grid-template-areas: "intro demo" "get demo" "games demo" "access demo" "faq demo";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 48px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 16px;
}
.intro { grid-area: intro; }
.demo { grid-area: demo; }
.get { grid-area: get; }
.games-block { grid-area: games; }
.access { grid-area: access; }
.faq { grid-area: faq; }
@media (min-width: 901px) and (min-height: 720px) {
  .demo { position: sticky; top: calc(var(--bar-h) + 16px); }
}
.home h2:not(.demo-title) { font-size: clamp(1.45rem, 2.4vw, 1.8rem); }

/* ---------- home: what it is ---------- */
.intro h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; }
.intro-lede { margin-top: 16px; font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 700; line-height: 1.4; max-width: 36ch; }
.intro-who { margin-top: 10px; color: var(--muted); font-size: 1.08rem; max-width: 52ch; }
.intro-offer {
  margin-top: 18px;
  padding: 12px 16px;
  max-width: 60ch;
  border-left: 4px solid var(--accent);
  border-radius: 4px 14px 14px 4px;
  background: var(--card);
  font-weight: 700;
  line-height: 1.5;
}
.btn-play {
  background: var(--play);
  color: var(--play-ink);
  border: 2px solid var(--play-edge);
  box-shadow: 0 14px 34px -12px var(--play-glow);
}
.btn-play:hover { background: var(--play-hover); }
.btn-play svg { width: 22px; height: 22px; }
/* on a wide screen the phone's own Play is beside the words */
.intro-play { display: none; margin-top: 20px; min-height: 56px; font-size: 1.15rem; }
/* the four ways in, as Shout Out Games' splash has them: signed in, a guest, the demo; then the stores */
.intro-choices { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.intro-choices li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.intro-choices .btn { min-height: 56px; min-width: 15rem; font-size: 1.1rem; }
.intro-choices .intro-play { display: inline-flex; margin-top: 0; }
.choice-note { color: var(--muted); font-size: 0.95rem; max-width: 34ch; }
.status-title { margin-top: 22px; font-weight: 800; }

/* the sign-in and account pages */
.signin-choices { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.signin-choices .btn { min-width: 16rem; min-height: 56px; font-size: 1.1rem; }
.account-message {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: var(--border-w) solid var(--accent);
  font-weight: 700;
}
.account-message[hidden], .account-page section[hidden] { display: none; }
.account-page section { display: grid; gap: 12px; }
.account-page h3 { margin-top: 12px; }
.account-add { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.account-add a, .account-page section > p > a:not(.btn) { color: var(--accent); font-weight: 700; text-underline-offset: 4px; }
.account-page form { display: grid; gap: 10px; justify-items: start; }
/* Fun Audio Games Unlimited: get it, or manage it (the page's script shows the one that fits) */
.unlimited-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.unlimited-actions .btn[hidden], .shop-note[hidden] { display: none; }
.unlimited-actions .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
/* packs: what each is, whether it's yours, and its button (shown by the page's script to someone signed in) */
.pack-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pack { display: grid; gap: 8px; justify-items: start; }
.pack [hidden], .shop-note[hidden], #shop-signin[hidden] { display: none; }
.pack-owned { font-weight: 700; }
.pack-owned a, .shop-note a { color: var(--accent); font-weight: 700; text-underline-offset: 4px; }
.buy-form { display: grid; justify-items: start; }
.buy-form .btn { min-height: 48px; }
.end-actions .buy-form { display: inline-flex; }
.status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.97rem;
}
.status li { display: flex; align-items: flex-start; gap: 8px; }
.status a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.status a:hover { color: var(--accent-hover); }
.status-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.5em;
  border-radius: 50%;
  border: 2px solid var(--muted);
}
.status-dot.is-live { background: var(--play); border-color: var(--play-edge); }

/* ---------- home: the phone and the demo ---------- */
.phone {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  padding: 10px;
  border-radius: 54px;
  background: linear-gradient(150deg, var(--frame-1), var(--frame-2) 60%);
  border: var(--border-w) solid var(--line-strong);
  box-shadow: var(--shadow-lg), 0 0 120px -20px var(--glow);
}
.phone::before {
  /* the glow behind it */
  content: "";
  position: absolute;
  inset: 12% -8% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.phone-notch {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  border-radius: 20px;
  background: #02040c;
  box-shadow: inset 0 0 0 1px var(--line);
  z-index: 3;
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(560px, calc(100vh - 190px), 680px);
  border-radius: 43px;
  overflow: hidden;
  background: var(--screen);
  border: var(--border-w) solid var(--line);
}

/* the game's header bar, as the app's */
.demo-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 50px 18px 12px;
  background: var(--surface-2);
  border-bottom: var(--border-w) solid var(--line);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  color: var(--ink);
}

/* the start: the talking circle (the game's cover in its ring) and Play */
.demo-cover {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 0;
  padding: 20px 22px 36px;
  text-align: center;
}
.talk-circle {
  position: relative;
  width: 172px;
  height: 172px;
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 0 70px -12px var(--glow);
}
.talk-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--accent);
}
.talk-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  min-width: 200px;
  padding: 10px 38px 10px 30px;
  border-radius: 999px;
  border: 2px solid var(--play-edge);
  background: var(--play);
  color: var(--play-ink);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px var(--play-glow);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.play-button:hover { background: var(--play-hover); transform: translateY(-1px); }
.play-button svg { width: 1.25em; height: 1.25em; flex: none; }
.cover-how { font-size: 0.97rem; line-height: 1.45; max-width: 32ch; margin-top: -8px; }
.cover-note { color: var(--muted); font-size: 0.92rem; line-height: 1.45; max-width: 30ch; margin-top: -12px; }
.demo-cover[hidden], .player[hidden] { display: none; }
.demo-foot { margin: 12px auto 0; max-width: 44ch; color: var(--muted); font-size: 0.88rem; text-align: center; }

/* the player */
.player {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 12px 14px;
  gap: 8px;
}
.player-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 14px;
  border: var(--border-w) solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}
.tool svg { width: 1.55em; height: 1.55em; flex: none; }
.tool:hover:not([aria-disabled="true"]) { background: var(--card-hover); border-color: var(--line-strong); }
.tool[aria-disabled="true"] { cursor: default; color: var(--muted); border-style: dashed; }
.tool .i-play { display: none; }
.tool[data-paused] .i-play { display: block; }
.tool[data-paused] .i-pause { display: none; }
.tool[data-paused] { border-color: var(--accent); color: var(--accent); }

.player-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 24px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.player-state::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--muted);
}
.player-state[data-state="speaking"]::before { background: var(--lilac); animation: pulse 1.2s ease-in-out infinite; }
.player-state[data-state="turn"]::before, .player-state[data-state="listening"]::before { background: var(--accent); }
.player-state[data-state="listening"]::before { animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: 0.6; } }

.captions {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 6px 10px;
  border-radius: 16px;
  scroll-behavior: smooth;
}
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feed li { line-height: 1.45; font-size: 1rem; }
.feed .line { padding: 8px 12px; border-radius: 14px; border: var(--border-w) solid transparent; transition: background-color 0.2s ease; }
.feed .line.is-now { background: var(--card-hover); border-color: var(--line); }
.feed .who {
  display: block;
  color: var(--lilac);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.feed .reply {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.feed .note {
  align-self: center;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* the end: under the captions (which shrink to make room), where the answer box was, so it's always in view */
.end-panel {
  flex: none;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--line-strong);
  text-align: center;
}
.end-panel[hidden] { display: none; }
.end-panel h3 { font-size: 1.1rem; margin-bottom: 4px; }
.end-panel h3:focus { outline: none; }
.player[data-state="ended"] .answer-bar, .player[data-state="ended"] .mic-note { display: none; }
.end-panel p { color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.end-actions, .end-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.end-stores[hidden] { display: none; }
.end-stores + .end-actions { margin-top: 8px; }
.end-actions .btn, .store-mini { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; }
.store-mini {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: var(--border-w) solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  text-decoration: none;
}
.store-mini:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip {
  min-height: 44px;
  min-width: 64px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}
.chip:hover { background: var(--accent); color: var(--accent-ink); }

.answer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}
.answer-bar input {
  min-width: 0;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  border: var(--border-w) solid var(--line-strong);
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
}
.answer-bar input::placeholder { color: var(--faint); opacity: 1; }
.answer-bar input:focus-visible { outline-offset: 1px; }
.send, .mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  min-width: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  border: var(--border-w) solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}
.send { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mic svg { width: 1.3em; height: 1.3em; }
.mic[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mic[data-listening] { background: var(--accent); color: var(--accent-ink); }
.mic[hidden] { display: none; }
.mic-note { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.mic-note[hidden] { display: none; }
@media (max-width: 380px) {
  .mic span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- home: the games, each with what it's like, its story and what's free (not links: nothing to open) ---------- */
.games-lede { margin-top: 6px; color: var(--muted); }
.games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.game {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  border: var(--border-w) solid var(--line);
}
.game .cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 16px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--line-strong);
}
.game h3 { font-size: 1.05rem; line-height: 1.25; letter-spacing: 0; }
.game-type {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.game-about { margin-top: 8px; font-size: 0.95rem; line-height: 1.45; }
.game-free { margin-top: 8px; color: var(--muted); font-size: 0.88rem; font-weight: 700; line-height: 1.4; }

/* ---------- the games in the browser (/play/, made by scripts/build-play.js): the list, and each game's page with
   its stage (the demo's player, full size), its settings, and what more the app has ---------- */
.play-page { display: grid; gap: 22px; max-width: 860px; margin: 0 auto; padding-top: 28px; padding-bottom: 64px; }
.play-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.02em; }
.play-back a { color: var(--accent); font-weight: 700; text-underline-offset: 4px; }
.play-lede { font-size: 1.1rem; line-height: 1.5; max-width: 62ch; }
.play-page > .game-free { margin-top: -12px; }
.play-list { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.play-list .game { grid-template-columns: 120px minmax(0, 1fr); }
.play-list .game .cover { width: 120px; height: 120px; }
.play-list .game h2 { font-size: 1.3rem; line-height: 1.25; }
.play-list .btn { margin-top: 12px; }
.play-cover { width: min(100%, 420px); height: auto; border-radius: 20px; border: var(--border-w) solid var(--line-strong); }
.game-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(520px, calc(100vh - 220px), 720px);
  border-radius: 28px;
  overflow: hidden;
  background: var(--screen);
  border: var(--border-w) solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.game-cover {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 0;
  padding: 24px;
  text-align: center;
}
.game-cover[hidden] { display: none; }
.game-cover .cover { width: min(100%, 380px); height: auto; border-radius: 20px; border: var(--border-w) solid var(--line-strong); }
.game-cover .cover-note { margin-top: 0; max-width: 42ch; }
/* the hub, the home page (hub.html, made by scripts/build-pages.js): the same player, with the skill's games in it. Two
   phases, data-phase on .hub-page (main.js sets "playing" at Play). The cover: one card in the middle of the screen below
   the top bar, with the emblem, the heading, a line and the ways to start, and nothing else. Playing: the card is the
   player, filling the screen below the top bar, the heading kept for screen readers only. */
.hub-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100svh - var(--bar-h));
  padding-top: 20px;
  padding-bottom: 16px;
}
.stage-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.stage-head .hub-cover { width: 72px; height: 72px; }
.hub-page h1 { font-size: clamp(1.5rem, 3.6vw, 1.85rem); line-height: 1.15; max-width: 20ch; }
.stage-head .play-lede { font-size: 1rem; line-height: 1.5; color: var(--muted); max-width: 38ch; }
.hub-page[data-phase="playing"] .stage-head .hub-cover, .hub-page[data-phase="playing"] .stage-head .play-lede { display: none; }
.hub-page[data-phase="playing"] .stage-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* playing: the player takes the screen below the top bar (at the least, room for a few lines of captions), all of it in
   view, the answer bar too, without scrolling */
.hub-page[data-phase="playing"] .game-stage {
  flex: 1 1 0px;
  height: auto;
  min-height: min(22rem, calc(100vh - var(--bar-h) - 32px));
  min-height: min(22rem, calc(100svh - var(--bar-h) - 32px));
  scroll-margin-bottom: 16px;
}
/* on a narrow or short screen, where the top bar scrolls away, the player has the whole screen (Play brings it there) */
@media (max-width: 599px), (max-height: 599px) {
  .hub-page[data-phase="playing"] .game-stage { flex: none; height: calc(100vh - 32px); height: calc(100svh - 32px); min-height: 20rem; }
}
/* for limited vision: the captions a size up, the line being said marked with the accent, and the state in full ink */
.hub-page .player { padding: 12px 16px 16px; gap: 10px; }
.hub-page .feed { gap: 12px; }
.hub-page .feed li { font-size: 1.125rem; line-height: 1.5; }
.hub-page .feed .line { max-width: 62ch; }
.hub-page .feed .line.is-now { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
/* the state, and Skip and Stop beside it, in one row: the captions get the room */
.hub-page .player-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hub-page .player-state { justify-content: flex-start; font-size: 1rem; color: var(--ink); }
.hub-page .player-tools { display: flex; gap: 8px; margin-left: auto; }
.hub-page .tool { flex-direction: row; gap: 6px; min-height: 44px; padding: 6px 14px; font-size: 0.95rem; }
.hub-page .tool svg { width: 1.2em; height: 1.2em; }
/* Speak first, it's a talking game: filled with the accent, Send beside it plain; listening, its ring pulses */
.hub-page .mic { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hub-page .mic[data-listening] { background: var(--card); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); animation: listening 1.2s ease-in-out infinite; }
@keyframes listening { 50% { box-shadow: inset 0 0 0 4px var(--accent); } }
.hub-page .send { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.hub-page .chip, .hub-page .send, .hub-page .mic { font-weight: 700; }
.mic-note a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.player-state[data-state="paused"]::before { background: var(--accent); }
/* the cover: the card in the middle of the screen, a column of the ways to start, each as wide as the card. For a guest
   the two ways to sign in first, then Play without an account (nothing shown until it's known who's here, so nothing
   jumps); for someone signed in, just Play */
.hub-page[data-phase="cover"] { justify-content: center; align-items: center; }
.hub-page[data-phase="cover"] .game-stage {
  flex: none;
  width: min(100%, 32rem);
  height: auto;
  min-height: 0;
  padding: 24px 24px 18px;
  overflow: visible;
}
.hub-page[data-phase="cover"] .stage-bar { display: none; }
.hub-page .game-cover { flex: none; gap: 10px; padding: 18px 0 0; justify-content: flex-start; overflow: visible; }
.game-cover[data-who="unknown"] .cover-signin, .game-cover[data-who="unknown"] .play-button { visibility: hidden; }
.cover-signin { display: grid; gap: 10px; width: 100%; }
.cover-signin[hidden] { display: none; }
.cover-title { font-size: 1rem; line-height: 1.4; }
.cover-ways { display: grid; gap: 10px; }
.cover-ways .btn { width: 100%; min-width: 0; min-height: 52px; padding-left: 12px; padding-right: 12px; }
/* the two side by side where the card has room for them */
@media (min-width: 600px) {
  .cover-ways { grid-template-columns: 1fr 1fr; }
}
.hub-page .game-cover .cover-note { margin: 0; max-width: none; font-size: 0.9rem; }
.cover-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 700; }
.cover-or::before, .cover-or::after { content: ""; flex: 1; border-top: var(--border-w) solid var(--line); }
.hub-page .game-cover .play-button { width: 100%; min-width: 0; padding: 10px 20px; font-size: 1.25rem; }
/* on a short screen, a smaller emblem, then none, so the whole card is in view */
@media (max-height: 720px) {
  .stage-head .hub-cover { width: 52px; height: 52px; }
  .hub-page[data-phase="cover"] .game-stage { padding-top: 18px; }
}
@media (max-height: 620px) {
  .stage-head .hub-cover { display: none; }
}
@media (max-width: 599px) {
  .hub-page[data-phase="cover"] .game-stage { padding: 22px 18px 18px; }
}
/* the QR code, to play on a phone: folded away under the card's buttons, and not on a phone or a tablet, which can't
   scan its own screen */
.cover-phone { display: none; width: 100%; }
@media (min-width: 760px) and (pointer: fine), (min-width: 1025px) {
  .cover-phone { display: block; }
}
.cover-phone summary {
  width: fit-content;
  margin: 0 auto;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.cover-phone[open] summary { margin-bottom: 10px; }
.cover-qr { display: grid; justify-items: center; gap: 8px; margin: 0; }
.qr-code {
  display: block;
  width: 108px;
  height: 108px;
  padding: 4px;
  border-radius: 12px;
  background: var(--qr-frame);
  forced-color-adjust: none;
}
.cover-qr figcaption { color: var(--muted); font-size: 0.88rem; line-height: 1.35; text-align: center; }
/* on a phone, the four tools in a row of their own, each its icon over its word */
@media (max-width: 479px) {
  .hub-page .player-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-left: 0; }
  .hub-page .tool { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 4px; font-size: 0.8rem; }
}
/* above the game: the player's team (once they've one), and What can I say? and Settings */
.stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 12px 8px 16px;
  border-bottom: var(--border-w) solid var(--line);
  background: var(--surface);
}
.team-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.4;
  /* (a line that wraps starts without its dot: the dot before each part sits in the gap, out of sight at a line's start) */
  overflow: hidden;
}
.team-bar[hidden] { display: none; }
.team-bar li + li { margin-left: -1.25em; }
.team-bar li + li::before { content: "·"; content: "·" / ""; display: inline-block; width: 1.25em; text-align: center; color: var(--muted); }
.team-bar li:first-child::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--team, var(--accent));
  vertical-align: -0.05em;
}
.team-bar[data-team="fire"] { --team: #e4572e; }
.team-bar[data-team="water"] { --team: #2f7dd1; }
.team-bar[data-team="grass"] { --team: #3c9d4f; }
.team-bar[data-team="electric"] { --team: #e9b310; }
.stage-links { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.stage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 14px;
  border: var(--border-w) solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.stage-link:hover { background: var(--card-hover); border-color: var(--line-strong); }
.stage-link svg { width: 1.25em; height: 1.25em; flex: none; }
/* What can I say?, and Settings: dialogs over the page */
.game-dialog {
  width: min(34rem, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border-radius: 20px;
  border: var(--border-w) solid var(--line-strong);
  /* solid, in every theme: a dialog is read over the page, and dark's --card is nearly see-through */
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.game-dialog::backdrop { background: rgb(10 8 30 / 0.6); }
.dialog-body { display: grid; gap: 14px; padding: 24px; }
.dialog-body h2 { font-size: 1.4rem; }
.dialog-body h2:focus { outline: none; }
.dialog-body h3 { font-size: 1.1rem; margin-top: 4px; }
.say-list { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; line-height: 1.45; }
.setting { display: grid; gap: 8px; }
.setting > label { font-weight: 700; }
.volume-row { display: flex; align-items: center; gap: 12px; }
.volume-row input { flex: 1; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--accent); }
.volume-value { min-width: 3.5em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.check input { flex: none; width: 1.3em; height: 1.3em; margin: 0.05em 0 0; accent-color: var(--accent); }
.setting-note { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.dialog-body form { margin: 4px 0 0; }
.end-panel h2 { font-size: 1.1rem; margin-bottom: 4px; }
.end-panel h2:focus { outline: none; }
.game-settings, .play-more {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
}
.game-settings h2, .play-more h2 { font-size: 1.25rem; }
.settings-note { color: var(--muted); font-size: 0.92rem; }
.game-settings label { display: grid; gap: 6px; max-width: 22rem; font-weight: 700; }
.game-settings select {
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 12px;
  border: var(--border-w) solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.play-more .end-stores { justify-content: flex-start; margin-top: 0; }
@media (max-width: 600px) {
  .play-list .game { grid-template-columns: 64px minmax(0, 1fr); }
  .play-list .game .cover { width: 64px; height: 64px; }
  .game-stage { height: clamp(500px, calc(100vh - 140px), 680px); border-radius: 20px; }
}

/* ---------- home: accessibility and questions ---------- */
.access {
  padding: 24px;
  border-radius: 22px;
  background: var(--card);
  border: var(--border-w) solid var(--line);
  box-shadow: var(--shadow);
}
.access .checks { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.access-more { margin-top: 18px; color: var(--muted); }
.access-more a, .faq a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.access-more a:hover, .faq a:hover { color: var(--accent-hover); }
.faq h3 { margin: 22px 0 6px; font-size: 1.1rem; color: var(--lilac); }
.faq h2 + h3 { margin-top: 16px; }
.faq p { max-width: var(--measure); }

/* ---------- home: download ---------- */
.get {
  padding: 18px 22px;
  border-radius: 22px;
  background: var(--card);
  border: var(--border-w) solid var(--line);
  box-shadow: var(--shadow);
}
.get-lede { margin-top: 2px; color: var(--muted); font-size: 0.95rem; }
.get-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.get-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "qr store" "qr for";
  align-content: center;
  align-items: center;
  gap: 4px 14px;
}
.qr {
  grid-area: qr;
  display: block;
  width: 84px;
  height: 84px;
  padding: 4px;
  border-radius: 12px;
  background: var(--qr-frame);
  forced-color-adjust: none;
}
.store {
  grid-area: store;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 18px 6px 14px;
  border-radius: 14px;
  background: var(--ink);
  border: var(--border-w) solid var(--ink);
  color: var(--bg);
  text-decoration: none;
  line-height: 1.15;
  white-space: nowrap;
}
.store:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-size: 0.72rem; font-weight: 700; }
.store strong { display: block; font-size: 1.1rem; font-weight: 800; }
.get-for { grid-area: for; align-self: start; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.get-live { color: var(--ink); }

/* ---------- text pages ---------- */
.page-head { max-width: var(--measure); margin: 0 auto; padding: 64px 0 40px; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.5rem); margin: 14px 0; letter-spacing: -0.02em; }
.page-head p { color: var(--muted); font-size: 1.12rem; }
.page-head .eyebrow {
  padding: 6px 14px;
  border-radius: 999px;
  border: var(--border-w) solid var(--accent);
}

.doc { max-width: var(--measure); margin: 0 auto; }

.summary { margin-bottom: 44px; border-color: var(--line-strong); }
.summary h2 { font-size: 1.4rem; margin-bottom: 16px; color: var(--accent); }

.doc .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--icon-1), var(--icon-2));
  border: var(--border-w) solid var(--line-strong);
}
.checks li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2.5px solid var(--on-purple);
  border-bottom: 2.5px solid var(--on-purple);
  transform: rotate(-45deg);
}

.doc section { margin: 0 0 40px; padding-top: 4px; }
.doc section:last-child { margin-bottom: 0; }
.doc section + section { border-top: var(--border-w) solid var(--line); padding-top: 36px; }
.doc h2 { font-size: clamp(1.45rem, 3.6vw, 1.8rem); margin-bottom: 14px; }
.doc h3 { font-size: 1.15rem; margin: 26px 0 8px; color: var(--lilac); }
.doc p + p, .doc p + ul, .doc ul + p, .doc p + .table, .doc .table + p, .doc p + dl, .doc dl + p { margin-top: 12px; }
.doc section > p, .doc section > ul, .doc section > dl { color: var(--ink); }
.doc ul { padding-left: 22px; margin: 0; }
.doc ul li + li { margin-top: 8px; }
.doc ul li::marker { color: var(--lilac); }
.doc a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc a:hover { color: var(--accent-hover); }
.doc strong { color: var(--ink); }
.doc kbd {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  border: var(--border-w) solid var(--line-strong);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 700;
}
.doc dl { margin: 0; display: grid; gap: 10px; }
.doc dt { font-weight: 800; }
.doc dd { margin: 2px 0 0; color: var(--muted); }

.note { color: var(--muted); font-size: 0.97rem; }
main { padding-bottom: 32px; }

/* support */
.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-color: var(--line-strong);
}
.contact h2 { font-size: 1.4rem; margin-bottom: 6px; color: var(--accent); }
.contact p { color: var(--muted); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.doc .button, .doc .button:hover { color: var(--accent-ink); }
.button:hover { background: var(--accent-hover); }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 44px; }
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--card);
  border: var(--border-w) solid var(--line);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
}
.doc .toc a { color: var(--ink); }
.toc a:hover { background: var(--card-hover); border-color: var(--line-strong); text-decoration: underline; }

.table {
  margin: 14px 0;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--line);
  background: var(--card);
}
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 11px 14px; vertical-align: top; }
th { color: var(--accent); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
tbody tr { border-top: var(--border-w) solid var(--line); }
td small { display: block; color: var(--muted); font-size: 0.82rem; }
td:first-child { font-weight: 700; }

/* 404 */
.lost { text-align: center; padding: 96px 0 64px; }
.lost img { width: 160px; margin: 0 auto 24px; }
.lost h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 12px; }
.lost p { color: var(--muted); margin-bottom: 28px; }

/* ---------- footer (the same on every page) ---------- */
footer {
  margin-top: 48px;
  padding: 44px 0 32px;
  border-top: var(--border-w) solid var(--line);
  background: var(--bg-deep);
}
.foot-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
}
.foot-brand { display: flex; flex-direction: column; gap: 14px; flex: 1 1 420px; max-width: 72ch; }
.foot-hugo { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 6px 0; border-radius: 6px; }
.foot-hugo img { height: 28px; width: auto; filter: brightness(0) invert(1); }
@media (prefers-color-scheme: light) { .foot-hugo img { filter: brightness(0); } }
@media (prefers-contrast: more) { .foot-hugo img { filter: brightness(0) invert(1); } }
.copy { color: var(--faint); font-size: 0.86rem; line-height: 1.55; }
/* the apps, in their stores */
.foot-apps { display: grid; gap: 10px; }
.foot-apps-title { color: var(--ink); font-weight: 800; }
.foot-stores { display: flex; flex-wrap: wrap; gap: 8px; }

.foot-legal, .foot-help { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.foot-legal a, .foot-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.foot-legal a:hover, .foot-help a:hover { text-decoration: underline; text-underline-offset: 4px; background: var(--card-hover); }
.foot-legal { margin-right: -12px; }
.foot-help { margin-left: -12px; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: var(--border-w) solid var(--line);
}
.foot-sister { color: var(--faint); font-size: 0.9rem; }
.foot-sister a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }

/* ---------- the hub's look: sound spreading out at night ----------
   The brand's own art (Play's feature graphic, the social image): rings of sound, gold on night navy (lilac on pale in
   the light theme), spreading out from the middle of the screen, where the game is. The start and the player are one
   frosted panel over them; inside it, flat pills and quiet controls, and one bright button: Play (and, playing, Speak).
   None of it in high contrast, where the rings go and the panel is black with a white line. */
body:has(.hub-page) {
  background-image:
    radial-gradient(circle at 50% 46%, transparent 0, transparent 24vmax, var(--bg) 64vmax),
    repeating-radial-gradient(circle at 50% 46%, transparent 0, transparent 62px, var(--ring) 63px, var(--ring) 64.5px, transparent 66px, transparent 96px),
    radial-gradient(circle at 50% 46%, var(--ring-glow), transparent 40vmax);
  background-attachment: fixed;
}
body:has(.hub-page) .topbar { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: transparent; }
.hub-page .game-stage {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: var(--border-w) solid var(--glass-line);
  border-radius: 32px;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.75);
}
.hub-page h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.stage-head .hub-cover { filter: drop-shadow(0 12px 22px var(--go-glow)); }
.hub-page .cover-title { color: var(--muted); font-weight: 700; }
/* the ways in: white pills with each provider's mark, then the one bright button */
.btn-provider {
  background: var(--provider);
  color: var(--provider-ink);
  border: var(--border-w) solid var(--provider-line);
  font-weight: 700;
}
.btn-provider:hover { background: var(--provider-hover); }
.provider-mark { width: 20px; height: 20px; flex: none; }
.hub-page .game-cover .play-button {
  border: var(--border-w) solid var(--go);
  background: var(--go);
  color: var(--go-ink);
  box-shadow: 0 16px 40px -18px var(--go-glow);
}
.hub-page .game-cover .play-button:hover { background: var(--go-hover); border-color: var(--go-hover); }
/* playing: the controls quiet (no boxes), the line being said lit, the answer bar in pills */
.hub-page .stage-bar { background: transparent; border-bottom: var(--border-w) solid var(--glass-line); }
.hub-page .stage-link, .hub-page .tool, .hub-page .send {
  border-color: transparent;
  background: var(--quiet);
  border-radius: 999px;
}
.hub-page .stage-link:hover, .hub-page .tool:hover:not([aria-disabled="true"]), .hub-page .send:hover { background: var(--quiet-hover); border-color: transparent; }
.hub-page .tool[aria-disabled="true"] { border-style: solid; border-color: transparent; }
.hub-page .tool[data-paused] { background: var(--go); border-color: var(--go); color: var(--go-ink); }
.hub-page .feed .line { border-radius: 16px; }
.hub-page .feed .line.is-now { background: var(--quiet); border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
.hub-page .answer-bar { gap: 8px; }
.hub-page .answer-bar input { border-radius: 999px; padding: 8px 20px; }
.hub-page .mic { border-radius: 999px; border-color: var(--go); background: var(--go); color: var(--go-ink); padding: 8px 18px; }
.hub-page .mic:hover { background: var(--go-hover); border-color: var(--go-hover); }
.hub-page .mic[data-listening] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--go); }
.hub-page .chip { border-width: var(--border-w); border-color: var(--line-strong); background: var(--quiet); font-weight: 700; }
.hub-page .chip:hover { background: var(--go); border-color: var(--go); color: var(--go-ink); }
@media (prefers-contrast: more) {
  body:has(.hub-page) { background-image: none; }
  .hub-page .game-stage { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .hub-page .stage-link, .hub-page .tool, .hub-page .send, .hub-page .chip { border-color: #ffffff; }
  .stage-head .hub-cover { filter: none; }
}
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .get-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "qr" "store" "for"; align-content: start; }
  .get-card .qr { margin-bottom: 8px; }
  .games { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "demo" "get" "games" "access" "faq";
    row-gap: 40px;
    padding-top: 24px;
  }
  .intro-play { display: inline-flex; }
  /* before Play, the phone is only as tall as what's in it */
  .phone-screen:has(.player[hidden]) { height: auto; }
  .get-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qr store" "qr for"; align-content: center; }
  .get-card .qr { margin-bottom: 0; }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a phone can't scan its own screen: just the store buttons */
@media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) {
  .qr { display: none; }
  .get-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "store" "for"; }
}

@media (max-width: 760px) {
  .card { padding: 22px 20px; }
  .page-head { padding: 40px 0 28px; }
  .foot-legal { margin-right: 0; margin-left: -12px; }
}

@media (max-width: 600px) {
  .games { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .game { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .game .cover { width: 56px; height: 56px; border-radius: 14px; }
  .get, .access { padding: 18px 16px; }
  .get-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .store { justify-self: stretch; }
}

@media (max-width: 560px) {
  .contact .button { width: 100%; }
  th, td { padding: 9px 10px; }
  td:nth-child(2), td:nth-child(3) { white-space: nowrap; }
  td small { white-space: normal; }
}

@media (max-width: 440px) {
  .phone::before { inset: 10% 0; }
  .phone { padding: 8px; border-radius: 44px; }
  .phone-screen { border-radius: 36px; }
  .topbar-inner { gap: 8px; }
  .brand img { height: 34px; }
}
@media (max-width: 380px) {
  body { font-size: 1rem; }
  .player { padding: 0 8px 10px; }
  .tool { font-size: 0.72rem; }
}

/* ---------- less motion, from the device's setting ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .play-button:hover { transform: none; }
}
/* ---------- Windows high contrast and other forced colours ---------- */
@media (forced-colors: active) {
  .topbar, footer { border-color: CanvasText; }
  .btn, .store, .store-mini, .tool, .chip, .send, .mic, .play-button, .card,
  .get, .game, .access, .phone, .phone-screen, .end-panel, .answer-bar input, .stage-link { border: 1px solid ButtonText; }
  .game-dialog { border: 2px solid CanvasText; }
  .team-bar li:first-child::before { background: CanvasText; }
  .intro-offer { border-left-color: CanvasText; }
  .status-dot { border-color: CanvasText; }
  .status-dot.is-live, .player-state::before { background: CanvasText; }
  .talk-circle::after { border-color: CanvasText; }
  .phone::before { display: none; }
  .feed .reply { border: 1px solid CanvasText; }
  .feed .line.is-now { border-color: Highlight; }
  .mic[aria-pressed="true"] { border: 3px solid Highlight; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
}