/* Reading settings for the landing pages. Defaults add no attributes, so each
   page keeps the look it already has until someone changes a control. */

/* Default page look stays in the landing HTML. These tokens are the Dark
   column, used by the cookie banner and Reading settings until a mode is chosen. */
html[data-landing-voice='zombie'] {
  --a11y-bg: #273029;
  --a11y-ink: #F6F4EE;
  --a11y-mute: #AEB8AE;
  --a11y-accent: #79CC94;
  --a11y-on: #0E1F14;
  --a11y-line: #3C4A40;
  --a11y-soft: #232D25;
  --a11y-radius: 0px;
  --a11y-shadow: 4px 4px 0 #000;
  --a11y-font: "Atkinson Hyperlegible", "Lexend Deca", sans-serif;
  --a11y-selected: #C9B0E6;
  --a11y-selected-ink: #2A2040;
  --a11y-toggle-on: #79CC94;
  --a11y-toggle-off: #4A5A50;
  --a11y-knob: #FFFFFF;
  --a11y-knob-line: #0E1F14;
  --zj-bg: #1A211C;
  --zj-card: #273029;
  --zj-deep: #232D25;
  --zj-line: #3C4A40;
  --zj-ink: #F6F4EE;
  --zj-mute: #AEB8AE;
  --zj-heading: #8FD4A8;
  --zj-link: #79CC94;
  --zj-btn-fill: #79CC94;
  --zj-btn-on: #0E1F14;
  --zj-btn-line: #4A5A50;
  --zj-btn-text: #F6F4EE;
  --zj-banner-bg: #273029;
  --zj-banner-line: #3C4A40;
}

html[data-landing-voice='mindycards'] {
  --a11y-bg: var(--surface, #fff);
  --a11y-ink: var(--ink, #2a352f);
  --a11y-mute: var(--mute, #5a6560);
  --a11y-accent: var(--accent, #6b4d7d);
  --a11y-on: var(--on-accent, #fff);
  --a11y-line: var(--border, #ded8ce);
  --a11y-soft: var(--bg, #f6f4ee);
  --a11y-radius: 999px;
  --a11y-shadow: var(--shadow-sm, none);
  --a11y-font: var(--font-body, "Atkinson Hyperlegible", sans-serif);
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("/mindyplay/landing/mindycards/assets/fonts/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

.a11y-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* While Reading settings is open: only the sheet body may scroll. */
html[data-a11y-sheet-open],
html[data-a11y-sheet-open] body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.a11y-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
  background: transparent;
  /* Do not set height: 100dvh here — it can exceed the fixed inset box and
     push the sheet (and Reset) under the OS taskbar / browser chrome. */
}

.a11y-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.a11y-overlay[hidden] { display: none; }

.a11y-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  /* Full-panel scrollbar (header → footer), not a short middle track. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background: var(--a11y-bg);
  color: var(--a11y-ink);
  font-family: var(--a11y-font);
  box-shadow: var(--a11y-shadow);
  border-left: 3px solid var(--a11y-line);
}

@keyframes landingSheetIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes landingSheetOut {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes landingScrimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes landingScrimOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

html:not([data-reduce-motion]) .a11y-overlay.is-open::before {
  animation: landingScrimIn 0.3s ease-out forwards;
}

html:not([data-reduce-motion]) .a11y-overlay.is-open .a11y-sheet {
  animation: landingSheetIn 0.3s ease-out forwards;
}

html:not([data-reduce-motion]) .a11y-overlay.is-closing::before {
  animation: landingScrimOut 0.3s ease-in forwards;
}

html:not([data-reduce-motion]) .a11y-overlay.is-closing .a11y-sheet {
  animation: landingSheetOut 0.3s ease-in forwards;
}

.a11y-sheet header,
.a11y-sheet footer {
  flex: 0 0 auto;
  padding: 16px 18px;
  border-color: var(--a11y-line);
  background: var(--a11y-bg);
}

.a11y-sheet header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--a11y-line);
}

.a11y-sheet header h2 {
  margin: 0;
  font-size: 1.35rem;
  font-family: inherit;
}

.a11y-sheet footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  border-top: 3px solid var(--a11y-line);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.a11y-body {
  flex: 1 0 auto;
  min-height: min-content;
  overflow: visible;
  padding: 16px 18px 28px;
}

.a11y-intro {
  margin: 0 0 18px;
  color: var(--a11y-mute);
  line-height: 1.5;
}

.a11y-block { margin: 0 0 22px; }
.a11y-block h3 {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a11y-mute);
}

.a11y-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.a11y-pill,
.a11y-text,
.a11y-reset {
  font: inherit;
  cursor: pointer;
  color: var(--a11y-ink);
  background: var(--a11y-soft);
  border: 2px solid var(--a11y-line);
  border-radius: var(--a11y-radius);
}

.a11y-pill { padding: 8px 14px; }
.a11y-pill[aria-pressed='true'] {
  background: var(--a11y-selected, var(--a11y-accent));
  color: var(--a11y-selected-ink, var(--a11y-on));
  border-color: var(--a11y-selected, var(--a11y-accent));
}

.a11y-preview {
  margin: 10px 0 0;
  color: var(--a11y-mute);
  line-height: 1.5;
}

.a11y-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--a11y-line);
}

.a11y-row p { margin: 0; }
.a11y-row .a11y-desc { margin-top: 4px; color: var(--a11y-mute); font-size: 0.92rem; line-height: 1.45; }

.a11y-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
}
.a11y-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.a11y-switch span {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--a11y-toggle-off, var(--a11y-line));
  border: 2px solid var(--a11y-toggle-off, var(--a11y-line));
}
.a11y-switch span::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: var(--a11y-knob, var(--a11y-bg));
}
html[data-landing-voice='zombie'] .a11y-switch span::after {
  box-sizing: border-box;
  border: 2px solid var(--a11y-knob-line);
}
.a11y-switch input:checked + span {
  background: var(--a11y-toggle-on, var(--a11y-accent));
  border-color: var(--a11y-toggle-on, var(--a11y-accent));
}
.a11y-switch input:checked + span::after { transform: translateX(18px); }
.a11y-switch input:focus-visible + span { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }

.a11y-text,
.a11y-reset {
  padding: 8px 12px;
}
.a11y-reset { width: 100%; font-weight: 700; padding: 12px 16px; }
.a11y-close {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

html[data-landing-voice='zombie'] .a11y-close,
html[data-landing-voice='zombie'] .a11y-pill,
html[data-landing-voice='zombie'] .a11y-reset {
  box-shadow: 3px 3px 0 #000;
}

.a11y-page-bits label { display: block; margin: 0 0 8px; color: var(--a11y-accent); font-weight: 700; }
.a11y-page-bits select {
  width: 100%;
  margin: 0 0 16px;
  padding: 8px;
  font: inherit;
  color: var(--a11y-ink);
  background: var(--a11y-soft);
  border: 2px solid var(--a11y-line);
}

/* Applied choices. Missing attributes mean "leave the page alone". */
html[data-a11y-size='s'] { font-size: 16px; }
html[data-a11y-size='m'] { font-size: 18px; }
html[data-a11y-size='l'] { font-size: 21px; }
html[data-a11y-size='xl'] { font-size: 24px; }
html[data-a11y-size] body { font-size: 1rem; }

html[data-a11y-leading='tight'] { --a11y-leading: 1.4; }
html[data-a11y-leading='normal'] { --a11y-leading: 1.65; }
html[data-a11y-leading='comf'] { --a11y-leading: 1.8; }
html[data-a11y-leading='wide'] { --a11y-leading: 2; }
html[data-a11y-leading] body { line-height: var(--a11y-leading); }

html[data-a11y-tracking='wide'] { --a11y-tracking: 0.03em; --a11y-word: 0.05em; }
html[data-a11y-tracking='wider'] { --a11y-tracking: 0.06em; --a11y-word: 0.1em; }
html[data-a11y-tracking] body {
  letter-spacing: var(--a11y-tracking);
  word-spacing: var(--a11y-word);
}

html[data-a11y-font='lexend'] body { font-family: "Lexend", "Lexend Deca", sans-serif; }
html[data-a11y-font='opendyslexic'] body { font-family: "OpenDyslexic", sans-serif; }
html[data-a11y-font='andika'] body { font-family: Andika, "Comic Sans MS", cursive, sans-serif; }
html[data-a11y-font='system'] body { font-family: system-ui, sans-serif; }
html[data-a11y-font] :is(h1, h2, h3) { font-family: inherit; }
html[data-a11y-font] .game-title { font-family: "Creepster", cursive; }

html[data-a11y-density='compact'] :is(.section, .hero, .about, .zj-faq, .cta) {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

html[data-reduce-motion] *,
html[data-reduce-motion] *::before,
html[data-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

html[data-highlight-links='on'] a:not(.btn, .brand, .store-btn, .cta-button, .store-link, .social-link) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 3px;
}
html[data-highlight-links='on'] .a11y-sheet a {
  background: none;
  text-decoration: none;
}

html[data-essentials] [data-secondary] { display: none !important; }

.a11y-banner {
  position: fixed;
  z-index: 80;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(34rem, calc(100% - 24px));
  padding: 8px 8px 8px 14px;
  border-radius: var(--a11y-radius);
  background: var(--a11y-accent);
  color: var(--a11y-on);
  border: 2px solid var(--a11y-line);
}
.a11y-banner[hidden] { display: none; }
.a11y-banner button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

html[data-focus-mode] :is(main, body) > section { position: relative; }
html[data-focus-mode] :is(main, body) > section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
}
html[data-focus-mode] :is(main, body) > section:not([data-reading-active])::after { opacity: 1; }

.a11y-ruler {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.a11y-ruler[hidden] { display: none; }
.a11y-ruler i {
  position: absolute;
  left: 0;
  right: 0;
  background: rgb(0 0 0 / 0.45);
}
.a11y-ruler button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  width: 56px;
  height: 22px;
  border: 2px solid var(--a11y-line);
  background: var(--a11y-bg);
  color: var(--a11y-ink);
  cursor: ns-resize;
}

/* Colours. "page" sets nothing, so the landing palette stays. */
html[data-landing-voice='mindycards'][data-a11y-theme='calm'] {
  --bg: #e7f0ea; --bg-tint: #dce8e1; --surface: #f4faf6; --ink: #24352c; --mute: #4d6256;
  --accent: #3f6b56; --accent-deep: #2f5342; --accent-soft: #d5e6db; --on-accent: #fff;
  --border: #c5d5cb; --header-bg: rgba(231, 240, 234, 0.9);
}
html[data-landing-voice='mindycards'][data-a11y-theme='sepia'] {
  --bg: #f4ecd8; --bg-tint: #efe4c8; --surface: #fbf6e9; --ink: #5b4a33; --mute: #6f5c42;
  --accent: #6f5212; --accent-deep: #5a4210; --accent-soft: #efe2c4; --on-accent: #fff;
  --border: #e0d2b4; --header-bg: rgba(244, 236, 216, 0.9);
}
html[data-landing-voice='mindycards'][data-a11y-theme='contrast'] {
  --bg: #000; --bg-tint: #000; --surface: #000; --ink: #fff; --mute: #fff;
  --accent: #ffe14a; --accent-deep: #fff; --accent-soft: #1a1a1a; --on-accent: #000;
  --border: #fff; --header-bg: #000;
}

/* Zombie Jumper colour system. Light / dark / calm / contrast / sepia
   override only these variables. Page, cookie banner, and Reading settings read them. */
html[data-landing-voice='zombie'][data-a11y-theme='light'] {
  --zj-bg: #F4F1E9; --zj-card: #FFFFFF; --zj-deep: #ECE8DC; --zj-line: #D4CFC0;
  --zj-ink: #1E2620; --zj-mute: #55605A; --zj-heading: #2F7A50; --zj-link: #1F6B40;
  --zj-btn-fill: #1F6B40; --zj-btn-on: #FFFFFF; --zj-btn-line: #C9C2B0; --zj-btn-text: #1E2620;
  --zj-banner-bg: #FFFFFF; --zj-banner-line: #D4CFC0;
  --a11y-bg: #FFFFFF; --a11y-ink: #1E2620; --a11y-mute: #55605A; --a11y-line: #D4CFC0; --a11y-soft: #ECE8DC;
  --a11y-accent: #1F6B40; --a11y-on: #FFFFFF;
  --a11y-selected: #6A5CB9; --a11y-selected-ink: #FFFFFF;
  --a11y-toggle-on: #1F6B40; --a11y-toggle-off: #C9C2B0; --a11y-knob: #FFFFFF; --a11y-knob-line: #55605A;
  --a11y-shadow: none;
  --bg: #F4F1E9; --surface: #FFFFFF; --ink: #1E2620; --mute: #55605A; --border: #D4CFC0;
}
html[data-landing-voice='zombie'][data-a11y-theme='dark'] {
  --zj-bg: #1A211C; --zj-card: #273029; --zj-deep: #232D25; --zj-line: #3C4A40;
  --zj-ink: #F6F4EE; --zj-mute: #AEB8AE; --zj-heading: #8FD4A8; --zj-link: #79CC94;
  --zj-btn-fill: #79CC94; --zj-btn-on: #0E1F14; --zj-btn-line: #4A5A50; --zj-btn-text: #F6F4EE;
  --zj-banner-bg: #273029; --zj-banner-line: #3C4A40;
  --a11y-bg: #273029; --a11y-ink: #F6F4EE; --a11y-mute: #AEB8AE; --a11y-line: #3C4A40; --a11y-soft: #232D25;
  --a11y-accent: #79CC94; --a11y-on: #0E1F14;
  --a11y-selected: #C9B0E6; --a11y-selected-ink: #2A2040;
  --a11y-toggle-on: #79CC94; --a11y-toggle-off: #4A5A50; --a11y-knob: #FFFFFF; --a11y-knob-line: #0E1F14;
  --a11y-shadow: none;
  --bg: #1A211C; --surface: #273029; --ink: #F6F4EE; --mute: #AEB8AE; --border: #3C4A40;
}
html[data-landing-voice='zombie'][data-a11y-theme='calm'] {
  --zj-bg: #20302A; --zj-card: #2A3A33; --zj-deep: #243833; --zj-line: #3C5247;
  --zj-ink: #EAEFE8; --zj-mute: #B4C0B6; --zj-heading: #A9D8BC; --zj-link: #9ED0B2;
  --zj-btn-fill: #88C6A3; --zj-btn-on: #16261D; --zj-btn-line: #3C5247; --zj-btn-text: #EAEFE8;
  --zj-banner-bg: #2A3A33; --zj-banner-line: #3C5247;
  --a11y-bg: #2A3A33; --a11y-ink: #EAEFE8; --a11y-mute: #B4C0B6; --a11y-line: #3C5247; --a11y-soft: #243833;
  --a11y-accent: #88C6A3; --a11y-on: #16261D;
  --a11y-selected: #C7B0DC; --a11y-selected-ink: #2E2742;
  --a11y-toggle-on: #88C6A3; --a11y-toggle-off: #3C5247; --a11y-knob: #FFFFFF; --a11y-knob-line: #16261D;
  --a11y-shadow: none;
  --bg: #20302A; --surface: #2A3A33; --ink: #EAEFE8; --mute: #B4C0B6; --border: #3C5247;
}
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] {
  --zj-bg: #000000; --zj-card: #0A0F0C; --zj-deep: #060606; --zj-line: #FFFFFF;
  --zj-ink: #FFFFFF; --zj-mute: #E6E6E6; --zj-heading: #7DF5AC; --zj-link: #8CFFB8;
  --zj-btn-fill: #7DF5AC; --zj-btn-on: #000000; --zj-btn-line: #FFFFFF; --zj-btn-text: #FFFFFF;
  --zj-banner-bg: #0A0F0C; --zj-banner-line: #FFFFFF;
  --a11y-bg: #0A0F0C; --a11y-ink: #FFFFFF; --a11y-mute: #E6E6E6; --a11y-line: #FFFFFF; --a11y-soft: #060606;
  --a11y-accent: #7DF5AC; --a11y-on: #000000;
  --a11y-selected: #E7CCFF; --a11y-selected-ink: #060606;
  --a11y-toggle-on: #7DF5AC; --a11y-toggle-off: #FFFFFF; --a11y-knob: #060606; --a11y-knob-line: #060606;
  --a11y-shadow: none;
  --bg: #000000; --surface: #0A0F0C; --ink: #FFFFFF; --mute: #E6E6E6; --border: #FFFFFF;
}
html[data-landing-voice='zombie'][data-a11y-theme='sepia'] {
  --zj-bg: #EFE6D4; --zj-card: #F7F0E1; --zj-deep: #E8DAC4; --zj-line: #CBBF9E;
  --zj-ink: #2A2418; --zj-mute: #5E5540; --zj-heading: #5A4A2E; --zj-link: #6A4E1E;
  --zj-btn-fill: #4E6B45; --zj-btn-on: #FFFFFF; --zj-btn-line: #CBBF9E; --zj-btn-text: #2A2418;
  --zj-banner-bg: #F7F0E1; --zj-banner-line: #CBBF9E;
  --a11y-bg: #F7F0E1; --a11y-ink: #2A2418; --a11y-mute: #5E5540; --a11y-line: #CBBF9E; --a11y-soft: #E0DAC2;
  --a11y-accent: #4E6B45; --a11y-on: #FFFFFF;
  --a11y-selected: #7A5AA9; --a11y-selected-ink: #FFFFFF;
  --a11y-toggle-on: #4E6B45; --a11y-toggle-off: #CBBF9E; --a11y-knob: #FFFFFF; --a11y-knob-line: #5E5540;
  --a11y-shadow: none;
  --bg: #EFE6D4; --surface: #F7F0E1; --ink: #2A2418; --mute: #5E5540; --border: #CBBF9E;
}

/* Same header controls as the main site: globe language menu, accessibility icon. */
.nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border, #c9c3b8);
  background: var(--surface, #fff);
  color: var(--ink, #1c1915);
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.nav-chip:hover { background: var(--bg, #f6f4ee); }
.lang-globe { width: 1rem; height: 1rem; display: block; flex: none; color: #5b8bb0; }
.lang-chevron { font-size: 0.75rem; color: var(--mute, #6b6560); }
.a11y-nav-icon { width: 1rem; height: 1rem; display: block; flex: none; }
.a11y-nav-icon circle { fill: currentColor; stroke: none; }
.lang-menu { position: relative; }
.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: max-content;
  min-width: 14rem;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--border, #c9c3b8);
  background: var(--surface, #fff);
  color: var(--ink, #1c1915);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.lang-list button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

/* Phone and tablet: the language button is not at the right edge, so a
   right-aligned menu runs off the screen and clips the first letters.
   Span the header instead. Desktop keeps the dropdown under the button. */
@media (max-width: 1100px) {
  .lang-menu {
    position: static;
  }
  .lang-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(70vh, 22rem);
    overflow: auto;
  }
  .lang-list button {
    white-space: normal;
  }
}
.lang-list button:hover { background: var(--bg, #f6f4ee); }
.lang-list button[aria-selected="true"] { color: var(--accent, #5b8bb0); font-weight: 700; }

/* A chosen mode repaints the page from the tokens above. The default
   (no data-a11y-theme) keeps the landing's own look. */
html[data-landing-voice='zombie'][data-a11y-theme] {
  --accent: var(--zj-link);
  --on-accent: var(--zj-btn-on);
  --voice-highlight-bg: var(--zj-btn-fill);
  --voice-highlight-fg: var(--zj-btn-on);
  --voice-highlight-ring: var(--zj-link);
}
html[data-landing-voice='zombie'][data-a11y-theme] img.voice-reading-active {
  outline-color: var(--zj-link);
}

html[data-landing-voice='zombie'][data-a11y-theme] :is(body, .hero, .hero.carousel-enabled, .about, .zj-faq) {
  background: var(--zj-bg);
  color: var(--zj-ink);
}
html[data-landing-voice='zombie'][data-a11y-theme] .footer {
  background: var(--zj-deep);
  color: var(--zj-ink);
  border-top-color: var(--zj-line);
}
html[data-landing-voice='zombie'][data-a11y-theme] .hero-overlay {
  background: color-mix(in srgb, var(--zj-bg) 62%, transparent);
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(
  .game-title, .tagline, .about h2, .zj-faq h2, .zj-brand, .feature h3
) {
  text-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.game-title, .zj-brand, .about h2, .zj-faq h2, .feature h3) {
  color: var(--zj-heading);
}
html[data-landing-voice='zombie'][data-a11y-theme='sepia'] :is(.game-title, .zj-brand),
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] :is(.game-title, .zj-brand) {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.about p, .feature p, .zj-faq-intro, .zj-faq details p, .footer p, .tagline) {
  color: var(--zj-mute);
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.zj-faq summary, .zj-faq details p strong, .zj-back) {
  color: var(--zj-ink);
}
html[data-landing-voice='zombie'][data-a11y-theme] .zj-faq summary::after {
  border-color: var(--zj-heading);
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.legal-link, .social-link) {
  color: var(--zj-link);
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.zj-brand-name, .zj-brand-tag) {
  color: var(--zj-ink);
}
html[data-landing-voice='zombie'][data-a11y-theme] .zj-header {
  background: color-mix(in srgb, var(--zj-card) 94%, transparent);
  border-bottom-color: var(--zj-line);
  color: var(--zj-ink);
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.feature, .zj-faq details, .hero-image) {
  background: var(--zj-card);
  border-color: var(--zj-line);
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.zj-a11y, .zj-section-listen) {
  background: var(--zj-card);
  color: var(--zj-heading);
  border-color: var(--zj-line);
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(.cta-button, .notify-button, .hero:not(.carousel-enabled) .cta-button) {
  background: var(--zj-btn-fill);
  color: var(--zj-btn-on);
  border-color: transparent;
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme] .notify-form input {
  background: var(--zj-card);
  color: var(--zj-ink);
  border-color: var(--zj-line);
}

/* Light lockup on light pages. Calm is a dark green, so it keeps the dark brain. */
html[data-landing-voice='zombie'][data-a11y-theme='light'] .zj-brand-brain--light,
html[data-landing-voice='zombie'][data-a11y-theme='sepia'] .zj-brand-brain--light {
  opacity: 1;
  pointer-events: auto;
}
html[data-landing-voice='zombie'][data-a11y-theme='light'] .zj-brand-brain--dark,
html[data-landing-voice='zombie'][data-a11y-theme='sepia'] .zj-brand-brain--dark {
  opacity: 0;
  pointer-events: none;
}
html[data-landing-voice='zombie'][data-a11y-theme='dark'] .zj-brand-brain--dark,
html[data-landing-voice='zombie'][data-a11y-theme='calm'] .zj-brand-brain--dark,
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] .zj-brand-brain--dark {
  opacity: 1;
  pointer-events: auto;
}
html[data-landing-voice='zombie'][data-a11y-theme='dark'] .zj-brand-brain--light,
html[data-landing-voice='zombie'][data-a11y-theme='calm'] .zj-brand-brain--light,
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] .zj-brand-brain--light {
  opacity: 0;
  pointer-events: none;
}

html[data-landing-voice='zombie'][data-a11y-theme] :is(.a11y-close, .a11y-pill, .a11y-reset) {
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] .a11y-sheet {
  border-left-width: 2px;
}
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] :is(.a11y-pill, .a11y-reset, .a11y-text) {
  border-width: 2px;
}

html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-panel,
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'][data-menu-open] .zj-header-inner {
  background: var(--zj-card);
  color: var(--zj-ink);
}
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-panel__section {
  color: var(--zj-mute);
}
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-row,
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-panel .lang-menu > .nav-chip {
  background: var(--zj-deep);
  color: var(--zj-ink);
  border-color: var(--zj-line);
}
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-row-meta,
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-panel .lang-menu > .nav-chip .landing-nav-row-meta,
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-panel .lang-menu > .nav-chip .lang-chevron {
  color: var(--zj-link);
}
html[data-landing-voice='zombie'][data-a11y-theme] [data-landing-nav='zombie'] .landing-nav-store--primary {
  background: var(--zj-btn-fill);
  color: var(--zj-btn-on);
}

html[data-landing-voice='zombie'][data-a11y-theme] .voice-reader-bar {
  background: var(--zj-banner-bg);
  color: var(--zj-ink);
  border-top: 1px solid var(--zj-banner-line);
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme] :is(
  .voice-reader-status, .voice-reader-section, .voice-reader-voice-label, .voice-reader-speed-label
) {
  color: var(--zj-mute);
}
html[data-landing-voice='zombie'][data-a11y-theme] .voice-reader-progress { background: var(--zj-deep); }
html[data-landing-voice='zombie'][data-a11y-theme] .voice-reader-progress > div { background: var(--zj-btn-fill); }
html[data-landing-voice='zombie'][data-a11y-theme] :is(.voice-reader-btn-icon, .voice-reader-btn-outline) {
  background: transparent;
  color: var(--zj-btn-text);
  border: 1px solid var(--zj-btn-line);
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme] .voice-reader-btn-primary,
html[data-landing-voice='zombie'][data-a11y-theme] .voice-segment button[aria-pressed='true'] {
  background: var(--zj-btn-fill);
  color: var(--zj-btn-on);
  border-color: transparent;
  box-shadow: none;
}
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] .voice-reader-bar,
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] :is(.voice-reader-btn-icon, .voice-reader-btn-outline) {
  border-width: 2px;
}

/* Full-width bar on the Zombie Jumper landing, flush to the viewport like mindycore.com.
   Clearance lives on the footer so the green background continues behind the banner.
   Body padding would show the blue page background in that gap. */
html[data-landing-voice='zombie'] body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
html[data-landing-voice='zombie'] .footer {
  flex: 1 0 auto;
}
html[data-landing-voice='zombie'][data-zj-cookie='open'] .footer {
  padding-bottom: calc(40px + var(--zj-cookie-h, 0px));
}
html[data-landing-voice='zombie'][data-zj-cookie='open'] body:has(.voice-reader-bar:not([hidden])) .footer {
  padding-bottom: calc(40px + var(--zj-cookie-h, 0px) + var(--voice-reader-bar-height, 0px));
}
html[data-landing-voice='zombie'] .zj-cookie {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  max-height: min(70dvh, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid var(--zj-banner-line);
  border-radius: 0;
  background: var(--zj-banner-bg);
  color: var(--zj-ink);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.zj-cookie[hidden] { display: none; }
html[data-landing-voice='zombie'] body:has(.voice-reader-bar:not([hidden])) .zj-cookie {
  bottom: var(--voice-reader-bar-height, 0px);
  padding-bottom: 0;
}
@keyframes zjCookieIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
html:not([data-reduce-motion]) .zj-cookie { animation: zjCookieIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.zj-cookie-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 16px 18px;
}
.zj-cookie-prefs[hidden],
.zj-cookie-divider[hidden],
.zj-cookie-save[hidden] { display: none; }
.zj-cookie-prefs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.zj-cookie-prefs h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--zj-ink);
}
.zj-cookie-prefs-intro {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--zj-mute);
}
.zj-cookie-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--zj-btn-line);
  background: transparent;
  color: var(--zj-btn-text);
  cursor: pointer;
}
.zj-cookie-close svg { width: 16px; height: 16px; }
.zj-cookie-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.zj-cookie-card {
  border: 1px solid var(--zj-line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--zj-card);
}
.zj-cookie-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.zj-cookie-card-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--zj-ink);
}
.zj-cookie-always {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--zj-link);
}
.zj-cookie-card p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--zj-mute);
}
.zj-cookie .a11y-switch { margin: 0; }
.zj-cookie-divider {
  margin: 16px 0;
  border-top: 1px solid var(--zj-line);
}
.zj-cookie-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 12px;
  align-items: start;
}
.zj-cookie.is-prefs .zj-cookie-bar { row-gap: 16px; }
.zj-cookie-intro { grid-column: 1; grid-row: 1; min-width: 0; }
.zj-cookie-listen { grid-column: 2; grid-row: 1; justify-self: end; }
.zj-cookie-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.zj-cookie-head {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--zj-ink);
}
.zj-cookie-body {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--zj-mute);
}
.zj-cookie-policy {
  display: inline-block;
  margin-top: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--zj-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--zj-line);
}
.zj-cookie-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--zj-btn-line);
  background: var(--zj-card);
  color: var(--zj-btn-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.zj-cookie-listen-icon { display: inline-flex; }
.zj-cookie-listen-icon svg { width: 15px; height: 15px; display: block; }
.zj-cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.zj-cookie-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
}
.zj-cookie-btn-primary {
  border: 0;
  background: var(--zj-btn-fill);
  color: var(--zj-btn-on);
}
.zj-cookie-btn-ghost {
  border: 1px solid var(--zj-btn-line);
  background: transparent;
  color: var(--zj-btn-text);
}
@media (max-width: 639px) {
  html[data-landing-voice='zombie'] .zj-cookie-inner { padding: 12px 12px 10px; }
  html[data-landing-voice='zombie'] .zj-cookie-bar { row-gap: 8px; column-gap: 10px; }
  html[data-landing-voice='zombie'] .zj-cookie-head { font-size: 1rem; line-height: 1.25; }
  html[data-landing-voice='zombie'] .zj-cookie-body { font-size: 0.82rem; line-height: 1.4; }
  html[data-landing-voice='zombie'] .zj-cookie-listen {
    height: 36px;
    padding: 0 12px;
    font-size: 0.78rem;
  }
  html[data-landing-voice='zombie'] .zj-cookie-policy { font-size: 0.82rem; }
  html[data-landing-voice='zombie'] .zj-cookie-foot { gap: 10px; align-items: stretch; }
  html[data-landing-voice='zombie'] .zj-cookie-actions { width: 100%; }
  html[data-landing-voice='zombie'] .zj-cookie-btn { min-height: 42px; font-size: 0.85rem; padding: 8px 10px; }
  html[data-landing-voice='zombie'][data-zj-cookie='open'] .hero-image {
    max-height: min(220px, 34dvh);
    margin-top: 16px;
    margin-bottom: 12px;
  }
  /* Open choices: one sheet, same as the main site on a phone.
     Intro, Listen, and the policy link drop out; the four actions stack. */
  html[data-landing-voice='zombie'] .zj-cookie.is-prefs {
    top: max(10px, env(safe-area-inset-top));
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  html[data-landing-voice='zombie'] .zj-cookie.is-prefs .zj-cookie-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  html[data-landing-voice='zombie'] .zj-cookie.is-prefs .zj-cookie-bar { margin-top: auto; row-gap: 0; }
  .zj-cookie.is-prefs .zj-cookie-intro,
  .zj-cookie.is-prefs .zj-cookie-listen,
  .zj-cookie.is-prefs .zj-cookie-policy { display: none; }
  .zj-cookie.is-prefs .zj-cookie-divider { margin: 12px 0 0; }
  .zj-cookie-actions.is-expanded { gap: 6px; }
  .zj-cookie-actions.is-expanded .zj-cookie-btn {
    width: 100%;
    min-height: 38px;
    font-size: 0.78rem;
    padding: 8px 10px;
    line-height: 1.15;
  }
  .zj-cookie-actions:not(.is-expanded) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .zj-cookie-actions:not(.is-expanded) > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .zj-cookie-actions:not(.is-expanded) {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: auto;
    margin-left: auto;
    gap: 10px;
  }
  .zj-cookie-actions:not(.is-expanded) .zj-cookie-btn { width: auto; }
}
@media (min-width: 900px) {
  .zj-cookie-actions.is-expanded {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] :is(.zj-cookie, .zj-cookie-listen, .zj-cookie-btn-ghost, .zj-cookie-close, .zj-cookie-card) {
  border-width: 2px;
}
html[data-landing-voice='zombie'][data-a11y-theme='contrast'] .zj-cookie {
  border-width: 2px 0 0;
}

/* Full-width bar on the MindyCards landing, flush to the viewport like mindycore.com. */
html[data-landing-voice='mindycards'][data-mc-cookie='open'] body {
  padding-bottom: var(--mc-cookie-h, 0px);
}
html[data-landing-voice='mindycards'][data-mc-cookie='open'] body:has(.voice-reader-bar:not([hidden])) {
  padding-bottom: calc(var(--mc-cookie-h, 0px) + var(--voice-reader-bar-height, 0px));
}
html[data-landing-voice='mindycards'] .mc-cookie {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  max-height: min(78dvh, 100%);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border-top: 1px solid var(--border, #ded8ce);
  border-radius: 0;
  background: var(--surface, #fff);
  color: var(--ink, #2a352f);
  box-shadow: 0 -8px 32px rgba(26, 37, 54, .12);
  font-family: var(--font-body, "Atkinson Hyperlegible", system-ui, sans-serif);
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
html[data-landing-voice='mindycards'] body:has(.voice-reader-bar:not([hidden])) .mc-cookie {
  bottom: var(--voice-reader-bar-height, 0px);
  padding-bottom: 0;
}
.mc-cookie[hidden] { display: none; }
.mc-cookie-card {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 22px 24px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.mc-cookie-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mc-cookie-views { flex: 1; min-width: 0; }
.mc-cookie-title {
  margin: 0;
  font-family: var(--font-head, Lexend, system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #2a352f);
}
.mc-cookie-copy,
.mc-cookie-lede {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink, #2a352f);
}
.mc-cookie-lede { color: var(--mute, #5a6560); }
.mc-cookie-policy {
  color: var(--accent, #6b4d7d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mc-cookie-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-firm, #c9c1d2);
  background: var(--surface, #fff);
  color: var(--ink, #2a352f);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.mc-cookie-listen-icon svg { width: 15px; height: 15px; display: block; }
.mc-cookie-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.mc-cookie-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-cookie-row-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #2a352f);
}
.mc-cookie-row-aside {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.mc-cookie-always {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mute, #5a6560);
}
.mc-cookie-row-desc {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mute, #5a6560);
}
.mc-cookie .a11y-switch { margin: 0; }
.mc-cookie-switch-lock { pointer-events: none; }
.mc-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
}
.mc-cookie-actions[hidden] { display: none; }
.mc-cookie-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.mc-cookie-btn-primary {
  border: 0;
  background: var(--accent, #6b4d7d);
  color: var(--on-accent, #fff);
}
.mc-cookie-btn-ghost {
  border: 1px solid var(--border-firm, #c9c1d2);
  background: var(--surface, #fff);
  color: var(--ink, #2a352f);
}
.mc-cookie-text {
  border: 0;
  background: none;
  padding: 8px 2px;
  color: var(--accent, #6b4d7d);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.mc-cookie-btn:focus-visible,
.mc-cookie-text:focus-visible,
.mc-cookie-listen:focus-visible,
.mc-cookie-policy:focus-visible {
  outline: 3px solid var(--accent, #6b4d7d);
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .mc-cookie-card { padding: 16px 16px 14px; }
  .mc-cookie-title { font-size: 1.05rem; }
  .mc-cookie-copy, .mc-cookie-lede, .mc-cookie-row-desc { font-size: 0.88rem; }
  .mc-cookie-actions { gap: 8px 12px; }
  .mc-cookie-btn { min-height: 40px; font-size: 0.88rem; padding: 8px 14px; }
}