/* Taipei GTA — design tokens then layout then components.
   Rule enforced by tests/style.test.mjs: every colour is a token declared in one of the
   two theme blocks below; no hex or rgb() value appears anywhere else in this file.
   Contrast is also asserted there (body text AAA on the page colour, accent and focus
   ring AA), which is what keeps the dark default and the light option readable for
   low-vision readers rather than merely looking tasteful. */

:root {
  color-scheme: dark;

  /* Surfaces and text */
  --page: #1c1c1e;
  --surface: #232327;
  --surface-2: #2b2b31;
  --surface-3: #33333a;
  --ink: #f5f0e8;
  --ink-muted: #b9b3a8;
  --ink-inverse: #17161a;
  --line: #3a3a41;
  --line-strong: #4b4b53;

  /* Brand */
  --accent: #e85d4e;
  --accent-strong: #f4735f;
  --accent-soft: #3a2a28;
  --accent-text: #ff9d8c;
  --focus: #ffd479;

  /* Status */
  --tip: #7fd8a5;
  --warn: #ffcf7a;
  --info: #8fc7ff;

  /* Type */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, -apple-system, "Noto Sans TC", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.4375rem;
  --text-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  --text-3xl: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.7;

  /* Spacing: one 8px scale, no ad-hoc numbers */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 56px;
  --space-7: 80px;
  --space-8: 112px;

  /* Shape */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  --page-width: 1440px;
  --content-width: 1200px;
  --prose-width: 46rem;
  --header-height: 64px;
  --transition: 160ms ease;
}

[data-theme="light"] {
  color-scheme: light;
  --page: #f5f0e8;
  --surface: #fffdf9;
  --surface-2: #ece5da;
  --surface-3: #e2d9cb;
  --ink: #1c1c1e;
  --ink-muted: #55504a;
  --ink-inverse: #17161a;
  --line: #ded5c7;
  --line-strong: #c9bdab;
  --accent: #e85d4e;
  --accent-strong: #d94b3c;
  --accent-soft: #fbe3de;
  --accent-text: #a8341f;
  --focus: #a03d00;
  --tip: #1c6b42;
  --warn: #8a5600;
  --info: #1c4f8a;
  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.08);
  --shadow: 0 14px 30px rgba(28, 28, 30, 0.12);
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-2);
  text-wrap: pretty;
}

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

a:hover {
  color: var(--accent-strong);
}

img,
svg,
iframe {
  max-width: 100%;
}

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

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

kbd {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  white-space: nowrap;
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 60;
  background: var(--accent);
  color: var(--ink-inverse);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-2);
}

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

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-1) var(--space-3);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ink-inverse);
  font-size: var(--text-xs);
  font-weight: 800;
}

.site-nav ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-block;
  padding: var(--space-1) 10px;
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition), background var(--transition);
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-2);
  font-weight: 600;
}

.header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.language-form select {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-sm);
  min-height: 36px;
}

.theme-switcher {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.theme-option {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-xs);
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 30px;
}

.theme-option[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 600;
}

/* Below the desktop breakpoint the three header groups cannot share one row: without this
   the nav wraps into a vertical list and the language control is pushed off the right edge,
   which the page-level overflow check cannot see because the document still fits the
   viewport. Brand and controls share the first row, navigation takes the second. */
@media (max-width: 1023px) {
  /* The header stacks into two bands on a phone, and a 149px sticky band would pin a fifth
     of the screen for the whole session. It scrolls away instead. */
  .site-header {
    position: static;
  }

  .header-inner {
    flex-wrap: wrap;
    row-gap: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .brand {
    order: 1;
  }

  .header-tools {
    order: 2;
    gap: var(--space-1);
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    /* A flex item will not shrink below its content unless told to, and the nav band is
       deliberately wider than the screen: without this the whole page scrolls sideways. */
    min-width: 0;
  }

  /* One band of links that scrolls sideways, rather than three wrapped lines: the header
     stays short on a phone and every destination is still one tap away. */
  .site-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    gap: 4px;
  }

  .site-nav ul::-webkit-scrollbar {
    display: none;
  }

  .site-nav li {
    flex: 0 0 auto;
  }

  .site-nav a {
    padding: 7px 11px;
    border: 1px solid var(--line);
    white-space: nowrap;
  }

  .site-nav a[aria-current="page"] {
    border-color: transparent;
  }
}

@media (max-width: 460px) {
  .theme-option {
    padding: 6px 7px;
  }

  .language-form select {
    padding: 6px 8px;
  }
}

.header-extra {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  flex-wrap: wrap;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--line-strong);
}

.breadcrumb a {
  color: var(--ink-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Layout ---------- */

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.page-hero {
  max-width: var(--prose-width);
  margin: 0 0 var(--space-4);
}

.page-hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.home-hero h1 {
  font-size: var(--text-3xl);
}

.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .page-body {
    grid-template-columns: 15rem minmax(0, var(--prose-width));
    align-items: start;
  }
}

.page-toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  background: var(--surface);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .page-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
  }
}

.page-toc-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.page-toc ol {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 4px;
}

.page-toc a {
  color: var(--ink-muted);
  text-decoration: none;
}

.page-toc a:hover,
.page-toc a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.label {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 var(--space-1);
}

.lead {
  font-size: var(--text-lg);
  color: var(--ink);
  max-width: 60ch;
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

.prose > h2 {
  margin-top: var(--space-5);
  font-size: var(--text-2xl);
}

.prose > h3 {
  margin-top: var(--space-4);
  font-size: var(--text-xl);
}

.prose > * {
  max-width: var(--prose-width);
}

.prose > ul,
.prose > ol {
  padding-left: 1.15rem;
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-3);
}

.prose blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Hero ---------- */

.home-hero {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: var(--space-3) 0 0;
}

.hero-facts li {
  font-size: var(--text-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  color: var(--ink-muted);
}

/* ---------- Game embed ---------- */

.game-embed {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 414 / 896;
  max-height: 78vh;
}

@media (min-width: 720px) {
  .game-embed {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

.game-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.game-launch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 0;
  width: 100%;
  text-align: left;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.game-launch-art {
  flex: 0 0 42%;
  display: block;
}

.game-launch-art svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.game-launch-text {
  display: grid;
  gap: 6px;
}

.game-launch-text strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.game-launch-text small {
  color: var(--ink-muted);
}

.game-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-3);
  background: var(--surface);
  color: var(--ink);
}

.game-loading small {
  color: var(--ink-muted);
}

.loader {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.game-toolbar {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.game-status {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.button.primary {
  background: var(--accent);
  color: var(--ink-inverse);
}

.button.primary:hover {
  background: var(--accent-strong);
  color: var(--ink-inverse);
}

.button.secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.button.secondary:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface-2);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  min-height: 38px;
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
  font-weight: 600;
}

/* ---------- Cards ---------- */

.card-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  display: flex;
}

.card-link {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}

.card-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-text);
  font-weight: 700;
}

.card-link strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.card-link span:last-child {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* ---------- Notes, QA, steps ---------- */

.note {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--space-2);
  background: var(--surface);
  margin: var(--space-3) 0;
}

.note-tip {
  border-left-color: var(--tip);
}

.note-warning {
  border-left-color: var(--warn);
}

.note-info {
  border-left-color: var(--info);
}

.note p:last-child {
  margin-bottom: 0;
}

.qa-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0;
}

.qa-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-2);
}

.qa-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  list-style-position: outside;
}

.qa-answer {
  margin-top: var(--space-1);
}

.qa-answer p:last-child {
  margin-bottom: 0;
}

.step-list {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.15rem;
  margin: var(--space-3) 0;
}

.step-list li::marker {
  color: var(--accent-text);
  font-weight: 700;
}

.step-list p {
  margin: 4px 0 0;
  color: var(--ink-muted);
}

.link-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.link-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-2);
}

.link-list li span {
  display: block;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.block-cta {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  margin: var(--space-3) 0;
}

/* ---------- Tables ---------- */

.table-scroll {
  overflow-x: auto;
  margin: var(--space-3) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--text-sm);
}

caption {
  text-align: left;
  padding: var(--space-2) var(--space-2) 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

th,
td {
  text-align: left;
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  position: sticky;
  top: 0;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.control-table th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.keys-cell {
  white-space: nowrap;
}

.keys-cell kbd + kbd {
  margin-left: 4px;
}

.key-plus {
  color: var(--ink-muted);
  margin: 0 2px;
}

.when-cell {
  color: var(--ink-muted);
  min-width: 14rem;
}

.context-cell {
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ---------- Tools ---------- */

.tool {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.tool > h2 {
  margin-top: 0;
}

.tool-controls {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.field {
  display: grid;
  gap: 6px;
  max-width: 26rem;
}

.field label {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.field input {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--page);
  color: var(--ink);
  font: inherit;
}

.tool-status,
.tool-empty {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.tool-status:empty {
  display: none;
}

.drill-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--page);
  border: 1px solid var(--line);
}

.drill-progress,
.drill-score {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.drill-question {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}

.drill-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.drill-options .chip {
  min-width: 56px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.drill-options .chip.correct {
  background: var(--tip);
  border-color: var(--tip);
  color: var(--ink-inverse);
}

.drill-options .chip.wrong {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
}

.drill-feedback {
  margin: 0;
  min-height: 1.5rem;
}

.drill-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.checklist-items {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
  display: grid;
  gap: 6px;
}

.checklist-items label {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  padding: 10px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page);
  cursor: pointer;
}

.checklist-items input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.checklist-items input:checked + span {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* ---------- Consent ---------- */

.consent-banner {
  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 50;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-size: var(--text-sm);
}

.consent-banner p {
  margin: 0 0 var(--space-2);
}

.consent-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: var(--space-7);
}

.footer-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-3);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.footer-about p {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: 34rem;
}

.footer-column h2 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.footer-column a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-sm);
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-base {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.back-to-top {
  color: var(--ink-muted);
}

.content-figure {
  margin: var(--space-3) 0;
}

.content-figure figcaption {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

@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;
  }
}

/* The user agent's `[hidden] { display: none }` loses to any author rule that sets
   `display`, so a component that ships hidden (the loading overlay, the toolbar strip,
   secondary tool buttons, the iframe itself) would render anyway. This rule is last on
   purpose: equal specificity means source order decides. */
[hidden],
.game-embed iframe[hidden] {
  display: none;
}