/* Per-mode identity layer. Selectors come from the existing app markup. */

/* Dog Atlas: keep the real breed photograph prominent and keep its quiz image
   static, borderless, and unframed. The page surface carries the warm atlas cue. */
body:not(.is-animal-view):not(.is-plant-view):not(.is-microbe-view):not(.is-mbti-view):not(.is-zodiac-elements-view):not(.is-relationship-view) #app > .home-hero,
body:not(.is-animal-view):not(.is-plant-view):not(.is-microbe-view):not(.is-mbti-view):not(.is-zodiac-elements-view):not(.is-relationship-view) #app > .quiz-shell,
body:not(.is-animal-view):not(.is-plant-view):not(.is-microbe-view):not(.is-mbti-view):not(.is-zodiac-elements-view):not(.is-relationship-view) #app > .result-shell {
  --identity-ink: #263a43;
  --identity-line: rgba(69, 63, 49, 0.16);
}

#app > .home-hero {
  border: 1px solid var(--identity-line);
  border-radius: 30px 30px 12px 30px;
  color: var(--identity-ink);
  background: linear-gradient(135deg, #fff8eb 0%, #f3dfc2 72%, #efd2b1 100%);
}

#app > .quiz-shell {
  border: 1px solid var(--identity-line);
  border-radius: 30px 30px 12px 30px;
  padding-inline: clamp(18px, 3.2vw, 40px);
  color: var(--identity-ink);
  background: linear-gradient(132deg, #fff8ed 0%, #f6e4cb 58%, #f1dcc1 100%);
}

#app > .quiz-shell .progress-track { background: rgba(38, 55, 70, 0.14); }
#app > .quiz-shell .progress-fill { background: linear-gradient(90deg, #a74f3d, #829866); }
#app > .quiz-shell .quiz-dog-visual,
#app > .quiz-shell .quiz-dog-visual-image { border: 0; outline: 0; box-shadow: none; filter: none; animation: none; }

#app > .result-shell {
  border: 1px solid var(--identity-line);
  border-radius: 30px 30px 12px 30px;
  color: var(--identity-ink);
  background: linear-gradient(145deg, rgba(255, 249, 239, 0.76), rgba(241, 224, 201, 0.5));
}

/* Wild animals: a quiet sand-field with contour lines across the page surface. */
body.is-animal-view {
  --animal-ink: #3e332a;
  --animal-muted: #5d5144;
  --animal-soft: #776653;
  --animal-coral: #925c3e;
  color: var(--animal-ink);
  background: linear-gradient(145deg, #f3eddf 0%, #e9e0cf 58%, #e2d9c6 100%);
}

body.is-animal-view::before {
  background-image: repeating-linear-gradient(163deg, transparent 0 27px, rgba(111, 104, 77, 0.055) 28px, transparent 29px 62px);
  animation: none;
}

body.is-animal-view::after { display: none; animation: none; }

body.is-animal-view #app > .animal-home-hero {
  border-radius: 4px 34px 4px 34px;
  background:
    repeating-linear-gradient(163deg, transparent 0 47px, rgba(111, 104, 77, 0.055) 48px, transparent 49px 96px),
    linear-gradient(135deg, rgba(247, 241, 225, 0.78), rgba(226, 216, 193, 0.68));
}

body.is-animal-view #app > .animal-quiz-shell {
  border: 1px solid rgba(88, 82, 61, 0.13);
  border-radius: 30px 30px 8px 30px;
  background:
    repeating-linear-gradient(164deg, transparent 0 34px, rgba(111, 104, 77, 0.045) 35px, transparent 36px 74px),
    linear-gradient(135deg, #f5efdf, #e9dfca 58%, #e4d8bf);
  box-shadow: 0 18px 42px rgba(84, 74, 54, 0.07);
}

body.is-animal-view #app .animal-quiz-shell::after { display: none; content: none; }

body.is-animal-view #app .animal-quiz-shell::before,
body.is-animal-view #app .animal-quiz-shell::after { animation: none; }

body.is-animal-view #app > .animal-result-shell {
  border-radius: 30px 30px 8px 30px;
  background: repeating-linear-gradient(164deg, transparent 0 54px, rgba(111, 104, 77, 0.035) 55px, transparent 56px 110px);
}

/* Plants: greenhouse divisions and long daylight bands belong to the page,
   leaving specimen imagery clear of added frames. */
body.is-plant-view {
  background: linear-gradient(145deg, #f7f9e9 0%, #edf4df 54%, #e1edcf 100%);
}

body.is-plant-view::before {
  background-image:
    linear-gradient(112deg, transparent 0 37%, rgba(255, 255, 232, 0.2) 38%, transparent 52%),
    repeating-linear-gradient(90deg, transparent 0 104px, rgba(93, 128, 82, 0.06) 105px, transparent 107px 184px);
  animation: none;
}

body.is-plant-view::after { display: none; animation: none; }

body.is-plant-view #app > .plant-home-hero {
  border-radius: 4px 34px 4px 34px;
  background:
    repeating-linear-gradient(90deg, transparent 0 138px, rgba(82, 128, 77, 0.06) 139px, transparent 141px 276px),
    linear-gradient(138deg, #f7f9e9, #e8f0d7 68%, #e2edcf);
}

body.is-plant-view #app .plant-home-copy h1,
body.is-plant-view #app .plant-question-card h1,
body.is-plant-view #app .plant-result-summary h1 { color: #284631; }

body.is-plant-view #app .plant-home-copy .hero-action { background: #537b4d; box-shadow: 5px 5px 0 rgba(104, 139, 89, 0.16); }
body.is-plant-view #app .plant-home-copy .hero-action:hover { background: #426c47; box-shadow: 7px 7px 0 rgba(104, 139, 89, 0.16); }

body.is-plant-view #app > .plant-quiz-shell {
  border: 1px solid rgba(82, 128, 77, 0.17);
  border-radius: 32px 32px 10px 32px;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(82, 128, 77, 0.045) 119px, transparent 121px 238px),
    linear-gradient(140deg, #f7f9e9, #e7efd8 63%, #e0ebce);
  box-shadow: 0 18px 42px rgba(67, 95, 64, 0.07);
}

body.is-plant-view #app > .plant-result-shell {
  border-radius: 30px 30px 10px 30px;
  background: repeating-linear-gradient(90deg, transparent 0 158px, rgba(82, 128, 77, 0.04) 159px, transparent 161px 316px);
}

body.is-plant-view #app .plant-question-card,
body.is-plant-view #app .plant-result-summary,
body.is-plant-view #app .plant-result-reading { color: #344e39; }

body.is-plant-view #app .plant-hero-image,
body.is-plant-view #app .plant-quiz-visual,
body.is-plant-view #app .plant-quiz-visual-image { animation: none; }

body.is-plant-view #app :is(.plant-scenario-choice, .plant-tradeoff-choice, .plant-short-response-choice).selected {
  color: #fffdf3;
  background-color: #537b4d;
}

/* Microbes: cool microscope blue, violet, and a fine culture-grid field. */
body.is-microbe-view {
  background: linear-gradient(145deg, #f1f2ff 0%, #e3e7fa 55%, #d7dcf3 100%);
}

body.is-microbe-view::before {
  background-image: radial-gradient(rgba(91, 96, 164, 0.13) 1px, transparent 1.3px);
  background-size: 22px 22px;
  animation: none;
}

body.is-microbe-view::after { display: none; animation: none; }

body.is-microbe-view #app > .microbe-home-hero {
  border-radius: 4px 34px 4px 34px;
  background:
    radial-gradient(rgba(91, 96, 164, 0.09) 1px, transparent 1.3px),
    linear-gradient(140deg, #f0f2ff, #dfe5fa 65%, #d7def5);
  background-size: 23px 23px, 100% 100%;
}

body.is-microbe-view #app .microbe-home-copy h1,
body.is-microbe-view #app .microbe-question-card h1,
body.is-microbe-view #app .microbe-result-summary h1 { color: #292d56; }

body.is-microbe-view #app .microbe-home-copy .hero-action { color: #fff; background: #4c4c8d; box-shadow: 5px 5px 0 rgba(106, 101, 190, 0.16); }
body.is-microbe-view #app .microbe-home-copy .hero-action:hover { background: #393d79; box-shadow: 7px 7px 0 rgba(106, 101, 190, 0.16); }

body.is-microbe-view #app .microbe-hero-art::before,
body.is-microbe-view #app .microbe-hero-art::after { display: none; animation: none; }

body.is-microbe-view #app > .microbe-quiz-shell {
  border: 1px solid rgba(92, 93, 161, 0.19);
  border-radius: 34px 34px 10px 34px;
  background:
    radial-gradient(rgba(91, 96, 164, 0.1) 1px, transparent 1.3px),
    linear-gradient(140deg, #f3f4ff, #e4e8fa 65%, #dce1f5);
  background-size: 22px 22px, 100% 100%;
  box-shadow: 0 18px 42px rgba(63, 65, 121, 0.08);
}

body.is-microbe-view #app .microbe-quiz-visual,
body.is-microbe-view #app .microbe-hero-image,
body.is-microbe-view #app .microbe-quiz-visual-image,
body.is-microbe-view #app .microbe-result-image { animation: none; }

body.is-microbe-view #app > .microbe-result-shell {
  border-radius: 34px 34px 10px 34px;
  background: radial-gradient(rgba(91, 96, 164, 0.07) 1px, transparent 1.3px);
  background-size: 24px 24px;
}

/* MBTI: explicit x/y coordinates and four type-letter hues. */
body.is-mbti-view {
  --mode-ink: #26344c;
  --mode-paper: #f8faff;
  --mode-muted: #46536b;
  --mode-soft: #5d6b84;
  --mode-line: rgba(58, 73, 106, 0.22);
  --mode-accent: #526da0;
  --mode-accent-strong: #c88455;
  --mode-panel: rgba(255, 255, 255, 0.94);
  color: var(--mode-ink);
  background: linear-gradient(145deg, #f4f5fb 0%, #e9edf7 54%, #e1e8f4 100%);
}

body.is-mbti-view::before {
  background-image:
    linear-gradient(rgba(80, 103, 143, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 103, 143, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: none;
}

body.is-mbti-view::after { display: none; animation: none; }

body.is-mbti-view #app > .mode-home.mbti-home {
  border-radius: 4px 30px 4px 30px;
  background: linear-gradient(120deg, rgba(248, 249, 253, 0.86), rgba(225, 233, 246, 0.72));
}

body.is-mbti-view #app .mbti-home-art {
  border: 1px solid rgba(76, 94, 135, 0.3);
  border-radius: 8px 30px 8px 30px;
  background-color: #e4eaf6;
  background-image:
    linear-gradient(rgba(72, 90, 132, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 90, 132, 0.11) 1px, transparent 1px);
  background-size: 32px 32px;
  box-shadow: 8px 8px 0 rgba(79, 94, 137, 0.12);
}

body.is-mbti-view #app .mbti-home-art::after {
  z-index: 0;
  inset: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(68, 87, 132, 0.18) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(68, 87, 132, 0.18) 50%, transparent calc(50% + 0.5px));
  box-shadow: none;
  animation: none;
  transform: none;
}

body.is-mbti-view #app .mbti-home-art .mbti-art-stage,
body.is-mbti-view #app .mbti-home-art .mbti-axis-list,
body.is-mbti-view #app .mbti-home-art .mode-home-art-note { z-index: 1; }

body.is-mbti-view #app .mbti-home-art .mbti-axis-list strong {
  color: #81502f;
  font-size: 0.76rem;
}

body.is-mbti-view #app .mbti-home-art .mbti-axis-list li { border-bottom-color: rgba(52, 66, 91, 0.28); }

body.is-mbti-view #app .mbti-home-art .mbti-axis-list span {
  color: #34425b;
  font-size: 0.78rem;
  line-height: 1.45;
}

body.is-mbti-view #app .mbti-home-art .mode-home-art-note span { color: #81502f; }
body.is-mbti-view #app .mbti-home-art .mode-home-art-note strong { color: #26344c; }
body.is-mbti-view #app .mbti-home-art .mode-home-art-note small { color: #46536b; }

body.is-mbti-view #app > .mbti-quiz-shell {
  border: 1px solid rgba(76, 94, 135, 0.2);
  border-radius: 30px 30px 8px 30px;
  padding-inline: clamp(18px, 3vw, 34px);
  background:
    linear-gradient(rgba(80, 103, 143, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 103, 143, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, #f5f6fb, #e8edf7);
  background-size: 36px 36px, 36px 36px, 100% 100%;
}

body.is-mbti-view #app .mbti-quiz-shell .special-question-card,
body.is-mbti-view #app .mbti-result-shell .special-result-intro { border-color: rgba(76, 94, 135, 0.2); background: rgba(250, 251, 255, 0.96); }

body.is-mbti-view #app .mbti-option { border-color: rgba(76, 94, 135, 0.2); color: #46536b; background: rgba(255, 255, 255, 0.82); }
body.is-mbti-view #app .mbti-option.selected { border-color: #52689a; color: #fff; background: #52689a; }
body.is-mbti-view #app .mbti-side-letters i:nth-child(1) { color: #4d74a6; }
body.is-mbti-view #app .mbti-side-letters i:nth-child(2) { color: #7166a7; }
body.is-mbti-view #app .mbti-side-letters i:nth-child(3) { color: #a95654; }
body.is-mbti-view #app .mbti-side-letters i:nth-child(4) { color: #547b62; }

/* Zodiac: a readable twilight palette; the star field sits in the existing
   element art and side rail, with fire, earth, air, and water still distinct. */
body.is-zodiac-elements-view {
  --mode-ink: #29344f;
  --mode-paper: #f8f9ff;
  --mode-muted: #49546d;
  --mode-soft: #66718a;
  --mode-line: rgba(62, 76, 116, 0.2);
  --mode-accent: #915a42;
  --mode-accent-strong: #9a753c;
  --mode-panel: rgba(250, 250, 253, 0.96);
  color: var(--mode-ink);
  background: linear-gradient(145deg, #f0f2fa 0%, #e7eaf5 55%, #dfe5f1 100%);
}

body.is-zodiac-elements-view::before {
  background-image:
    radial-gradient(rgba(77, 92, 141, 0.24) 0.8px, transparent 1.2px),
    linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.25));
  background-size: 37px 37px, 100% 100%;
  animation: none;
}

body.is-zodiac-elements-view::after { display: none; animation: none; }

body.is-zodiac-elements-view #app > .zodiac-elements-home {
  border-radius: 4px 30px 4px 30px;
  background: linear-gradient(120deg, rgba(248, 249, 253, 0.9), rgba(229, 233, 245, 0.78));
}

body.is-zodiac-elements-view #app .zodiac-elements-art {
  border: 1px solid rgba(213, 219, 241, 0.28);
  border-radius: 8px 30px 8px 30px;
  color: #f7f4e9;
  background-color: #252d49;
  background-image:
    radial-gradient(rgba(255, 246, 211, 0.8) 0.8px, transparent 1.2px),
    linear-gradient(145deg, #252d49, #333a61);
  background-size: 31px 31px, 100% 100%;
  box-shadow: 8px 8px 0 rgba(59, 69, 109, 0.13);
}

body.is-zodiac-elements-view #app .zodiac-elements-art .mode-home-art-note strong,
body.is-zodiac-elements-view #app .zodiac-elements-art .mode-home-art-note small { color: #fff8e8; }
body.is-zodiac-elements-view #app .zodiac-elements-art .mode-home-art-note span { color: #f3d28f; }
body.is-zodiac-elements-view #app .zodiac-elements-art .element-chip { background: rgba(250, 248, 237, 0.96); }

body.is-zodiac-elements-view #app > .zodiac-elements-quiz-shell {
  border: 1px solid rgba(88, 101, 151, 0.19);
  border-radius: 30px 30px 8px 30px;
  padding-inline: clamp(18px, 3vw, 34px);
  background:
    radial-gradient(rgba(95, 110, 164, 0.12) 0.8px, transparent 1.2px),
    linear-gradient(145deg, #f5f5fa, #e9edf7 70%, #e2e8f4);
  background-size: 40px 40px, 100% 100%;
}

body.is-zodiac-elements-view #app .zodiac-elements-quiz-shell .special-question-card { background: rgba(250, 250, 253, 0.96); }
body.is-zodiac-elements-view #app .zodiac-elements-side {
  border: 1px solid rgba(221, 226, 244, 0.22);
  border-radius: 8px 28px 8px 28px;
  padding: 24px;
  color: #fff8e8;
  background:
    radial-gradient(rgba(255, 246, 211, 0.72) 0.8px, transparent 1.2px),
    linear-gradient(145deg, #252d49, #333a61);
  background-size: 30px 30px, 100% 100%;
}

body.is-zodiac-elements-view #app .zodiac-elements-side > strong,
body.is-zodiac-elements-view #app .zodiac-elements-side > p { color: #fff8e8; }
body.is-zodiac-elements-view #app .zodiac-elements-side > span { color: #f3d28f; }
body.is-zodiac-elements-view #app > .zodiac-elements-result-shell { border-radius: 30px 30px 8px 30px; }

/* Relationships: retain the shared deep-page palette. Local paper surfaces
   below use explicit ink colors so shared navigation and share panels keep
   their existing contrast. */
body.is-relationship-view::before {
  background-image: linear-gradient(145deg, transparent 0 48%, rgba(209, 145, 160, 0.05) 48.1% 48.4%, transparent 48.5%);
  animation: none;
}

body.is-relationship-view::after { display: none; animation: none; }

body.is-relationship-view #app > .relationship-home-hero {
  border-radius: 4px 30px 4px 30px;
  background: linear-gradient(120deg, rgba(255, 250, 247, 0.9), rgba(244, 230, 237, 0.78));
}

body.is-relationship-view #app .relationship-hero-art {
  border-color: rgba(125, 82, 104, 0.22);
  border-radius: 8px 30px 8px 30px;
  background: linear-gradient(145deg, #fff7f1, #f0d6dc 58%, #e7d7eb);
  box-shadow: 8px 8px 0 rgba(174, 103, 128, 0.12);
  transform: none;
}

body.is-relationship-view #app .relationship-home-copy h1 { color: #392d3c; }
body.is-relationship-view #app .relationship-home-copy h1 span { color: #80536e; }
body.is-relationship-view #app .relationship-home-copy h1 em { color: #9c526f; }
body.is-relationship-view #app .relationship-home-copy .hero-copy,
body.is-relationship-view #app .relationship-home-copy .hero-meta { color: #625564; }
body.is-relationship-view #app .relationship-home-copy .eyebrow { color: #80536e; }
body.is-relationship-view #app .relationship-hero-caption { color: #493847; }
body.is-relationship-view #app .relationship-hero-caption span { color: #625564; }

body.is-relationship-view #app > .relationship-quiz-shell {
  border: 1px solid rgba(125, 82, 104, 0.18);
  border-radius: 30px 30px 8px 30px;
  padding: clamp(28px, 4.5vw, 54px) clamp(18px, 3vw, 34px) clamp(40px, 6vw, 72px);
  background: linear-gradient(145deg, #fff8f4, #f3e8ed 68%, #eee7f2);
  box-shadow: 0 18px 42px rgba(91, 55, 74, 0.07);
}

body.is-relationship-view #app .relationship-quiz-topline { color: #625564; }
body.is-relationship-view #app .relationship-quiz-topline strong { color: #765325; }
body.is-relationship-view #app .relationship-dimension-name { color: #8d4a66; }
body.is-relationship-view #app .relationship-quiz-shell .result-index { color: #625564; }

body.is-relationship-view #app .relationship-question-card {
  border-color: rgba(125, 82, 104, 0.18);
  border-radius: 28px 28px 28px 6px;
  background: rgba(255, 252, 249, 0.96);
}

body.is-relationship-view #app .relationship-question-card h1 { color: #392d3c; }
body.is-relationship-view #app .relationship-question-kicker,
body.is-relationship-view #app .relationship-question-side > span { color: #8d4a66; }
body.is-relationship-view #app .relationship-question-kicker small,
body.is-relationship-view #app .relationship-quiz-hint,
body.is-relationship-view #app .relationship-question-side > p { color: #625564; }
body.is-relationship-view #app .relationship-question-side { border-left-color: rgba(125, 82, 104, 0.22); }
body.is-relationship-view #app .relationship-question-side > strong { color: #493847; }

body.is-relationship-view #app .relationship-choice {
  border-color: rgba(125, 82, 104, 0.2);
  border-radius: 23px 23px 23px 6px;
  color: #514454;
  background: rgba(255, 252, 249, 0.96);
}

body.is-relationship-view #app .relationship-choice:nth-child(even) {
  border-radius: 23px 23px 6px 23px;
  background: #f4e5eb;
}

body.is-relationship-view #app .relationship-choice:hover { border-color: #8d4a66; color: #493847; background: #fffdfb; }
body.is-relationship-view #app .relationship-choice.selected { border-color: #80506d; color: #fffaf6; background: #80506d; }
body.is-relationship-view #app .relationship-choice.selected .relationship-choice-index,
body.is-relationship-view #app .relationship-choice.selected .relationship-choice-mark { color: #fff0d7; }

body.is-relationship-view #app > .relationship-result-shell {
  border-radius: 30px 30px 8px 30px;
}

body.is-relationship-view #app .relationship-result-intro,
body.is-relationship-view #app .relationship-result-side,
body.is-relationship-view #app .relationship-reading-card,
body.is-relationship-view #app .relationship-profile-row {
  border-color: rgba(125, 82, 104, 0.18);
  color: #514454;
  background: rgba(255, 251, 248, 0.92);
}

body.is-relationship-view #app .relationship-result-intro h1,
body.is-relationship-view #app .relationship-result-intro h2,
body.is-relationship-view #app .relationship-reading-card h2,
body.is-relationship-view #app .relationship-profile-row-head,
body.is-relationship-view #app .relationship-result-stamp strong,
body.is-relationship-view #app .relationship-secondary-note strong { color: #392d3c; }

body.is-relationship-view #app .relationship-result-intro p,
body.is-relationship-view #app .relationship-reading-card p,
body.is-relationship-view #app .relationship-profile-row p { color: #625564; }

body.is-relationship-view #app .relationship-result-intro h1 span,
body.is-relationship-view #app .relationship-result-label { color: #8d4a66; }
body.is-relationship-view #app .relationship-reading-card > span { color: #8d4a66; }
body.is-relationship-view #app .relationship-reading-card--watchout > span { color: #765325; }
body.is-relationship-view #app .relationship-result-stamp span,
body.is-relationship-view #app .relationship-secondary-note small { color: #8d4a66; }
body.is-relationship-view #app .relationship-result-side { border-color: rgba(125, 82, 104, 0.22); }
body.is-relationship-view #app .relationship-result-side > span { color: #8d4a66; }
body.is-relationship-view #app .relationship-result-side > strong,
body.is-relationship-view #app .relationship-result-side > p,
body.is-relationship-view #app .relationship-result-side .relationship-secondary-note strong { color: #392d3c; }
body.is-relationship-view #app .relationship-profile-row-head strong { color: #765325; }
body.is-relationship-view #app .relationship-result-disclaimer { color: #bd9d9a; }

/* The shared directory uses a dark green active surface on this route. Keep
   its active title and caption light even when category-specific rules load. */
body.is-relationship-view .game-directory .category-tab--atlas:not(.is-active) {
  color: #31434a;
  background: #fffaf2;
}

body.is-relationship-view .game-directory .category-tab--atlas:not(.is-active) .category-tab-copy strong { color: #31434a; }
body.is-relationship-view .game-directory .category-tab--atlas:not(.is-active) .category-tab-copy small { color: #53616a; }

body.is-relationship-view .game-directory .category-tab--atlas.is-active {
  border-color: #294a40;
  color: #fffaf0;
  background: #294a40;
}

body.is-relationship-view .game-directory .category-tab--atlas.is-active .category-tab-copy strong { color: #fffaf0; }
body.is-relationship-view .game-directory .category-tab--atlas.is-active .category-tab-copy small { color: #efe1c8; }
body.is-relationship-view .game-directory .category-tab--atlas.is-active:hover { background: #244238; }

/* The four axis names already label the coordinate panel. */
@media (min-width: 901px) {
  body.is-mbti-view #app .mbti-home-art .mode-home-art-note { display: none; }
}

/* Shared usability details: preserve the existing button layout while giving
   keyboard users a strong, consistent focus indicator. */
#app :is(.home-hero, .animal-home-hero, .plant-home-hero, .microbe-home-hero, .mode-home, .relationship-home-hero) .hero-action:focus-visible,
#app :is(.quiz-shell, .animal-quiz-shell, .plant-quiz-shell, .microbe-quiz-shell, .special-quiz-shell, .relationship-quiz-shell) [data-answer]:focus-visible,
#app :is(.quiz-shell, .animal-quiz-shell, .plant-quiz-shell, .microbe-quiz-shell, .special-quiz-shell, .relationship-quiz-shell) .quiz-back:focus-visible,
#app :is(.result-shell, .animal-result-shell, .plant-result-shell, .microbe-result-shell, .special-result-shell, .relationship-result-shell) .result-actions .primary-action:focus-visible,
#app :is(.result-shell, .animal-result-shell, .plant-result-shell, .microbe-result-shell, .special-result-shell, .relationship-result-shell) .result-share-shortcut:focus-visible {
  outline: 3px solid #283f65;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  body.is-mbti-view #app .mbti-home-art { background-size: 26px 26px; }
  body.is-zodiac-elements-view #app .zodiac-elements-art { background-size: 27px 27px, 100% 100%; }
  body.is-relationship-view #app .relationship-rhythm-choice .relationship-choice { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  #app .animal-quiz-shell::before,
  #app .animal-quiz-shell::after,
  #app .plant-quiz-shell::before,
  #app .plant-quiz-shell::after,
  #app .microbe-quiz-shell::before,
  #app .microbe-quiz-shell::after,
  #app .mbti-home-art::after,
  #app .plant-hero-image,
  #app .plant-quiz-visual-image,
  #app .microbe-hero-art::before,
  #app .microbe-hero-art::after,
  #app .microbe-hero-image,
  #app .microbe-quiz-visual,
  #app .microbe-quiz-visual-image,
  #app .microbe-result-image,
  #app .animal-question-card,
  #app .plant-question-card,
  #app .microbe-question-card,
  #app .relationship-question-card {
    animation: none;
    transition: none;
  }

  #app .animal-choice,
  #app :is(.plant-scenario-choice, .plant-tradeoff-choice, .plant-short-response-choice),
  #app :is(.microbe-scenario-choice, .microbe-tradeoff-choice, .microbe-dialogue-choice),
  #app .mbti-option,
  #app .zodiac-element-option,
  #app .relationship-choice { transition: none; }
}

/* Desktop landing panels are compact enough to keep the start action in view.
   Each existing illustration keeps its own subject and mode-specific layout. */
@media (min-width: 901px) {
  #app > .home-hero,
  #app > .animal-home-hero,
  #app > .plant-home-hero,
  #app > .microbe-home-hero,
  #app > .mode-home,
  #app > .relationship-home-hero {
    min-height: auto;
    padding-block: 32px;
  }

  #app > .home-hero h1,
  #app > .animal-home-hero .animal-home-copy h1,
  #app > .plant-home-hero .plant-home-copy h1,
  #app > .microbe-home-hero .microbe-home-copy h1,
  #app > .mode-home .mode-home-copy h1,
  #app > .relationship-home-hero .relationship-home-copy h1 {
    font-size: clamp(44px, 5vw, 72px);
  }

  #app > .home-hero { gap: clamp(28px, 4vw, 54px); }
  #app .hero-art-image { height: clamp(320px, 30vw, 390px); min-height: 0; }

  #app > .animal-home-hero { gap: clamp(28px, 4vw, 56px); }
  #app .animal-hero-image-wrap,
  #app .animal-hero-image { height: clamp(320px, 30vw, 390px); min-height: 0; }

  #app > .plant-home-hero { gap: clamp(28px, 4vw, 56px); }
  #app .plant-hero-image-wrap { height: clamp(320px, 30vw, 390px); min-height: 0; }

  #app > .microbe-home-hero { gap: clamp(28px, 4vw, 56px); }
  #app .microbe-hero-image-wrap { height: clamp(320px, 30vw, 390px); min-height: 0; }

  #app > .mode-home { gap: clamp(28px, 4vw, 56px); }
  #app .mode-home-art { align-self: center; height: 400px; min-height: 0; }
  #app .mode-home-copy h1 { margin-block: 12px 16px; }

  #app .mbti-home-art {
    grid-template-rows: 152px auto auto;
    grid-template-areas: 'stage' 'content' 'note';
    gap: 12px;
    align-content: start;
    padding: 20px 24px;
  }

  #app .mbti-home-art .mbti-art-stage {
    position: static;
    grid-area: stage;
    height: 152px;
    min-height: 152px;
    place-items: center end;
  }

  #app .mbti-home-art .mbti-letter-stack {
    position: relative;
    inset: auto;
    width: 142px;
    margin: 0 0 0 auto;
    transform: none;
  }

  #app .mbti-home-art .mbti-letter-stack span:nth-child(2) { transform: translateY(10px); }
  #app .mbti-home-art .mbti-letter-stack span:nth-child(3) { transform: translateX(6px); }
  #app .mbti-home-art .mbti-letter-stack span:nth-child(4) { transform: translate(14px, 10px); }

  #app .mbti-home-art .mode-home-art-note {
    position: static;
    inset: auto;
    grid-area: note;
    width: auto;
    margin: 0;
  }

  #app .mbti-home-art .mbti-axis-list {
    position: static;
    inset: auto;
    grid-area: content;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    gap: 8px 16px;
    width: auto;
    margin: 0;
  }

  #app .mbti-home-art .mbti-axis-list li { grid-template-columns: minmax(0, 70px) minmax(0, 1fr); gap: 8px; }

  #app .zodiac-elements-art {
    grid-template-rows: 140px auto auto;
    grid-template-areas: 'stage' 'content' 'note';
    gap: 10px;
    align-content: start;
    padding: 20px 24px;
  }

  #app .zodiac-elements-art .element-art-stage {
    position: static;
    grid-area: stage;
    height: 140px;
    min-height: 140px;
    place-items: center;
  }

  #app .zodiac-elements-art .element-wheel {
    position: relative;
    inset: auto;
    width: 136px;
    margin: 0 auto;
  }

  #app .zodiac-elements-art .mode-home-art-note {
    position: static;
    inset: auto;
    grid-area: note;
    width: auto;
    margin: 0;
  }

  #app .zodiac-elements-art .element-chip-list {
    position: static;
    inset: auto;
    grid-area: content;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    width: auto;
    gap: 8px;
    margin: 0;
  }

  #app .zodiac-elements-art .element-chip { min-height: 64px; padding: 9px 11px; }

  #app > .relationship-home-hero { gap: clamp(28px, 4vw, 56px); }
  #app .relationship-home-copy h1 { margin-block: 12px 16px; }
  #app .relationship-hero-art { min-height: 400px; }
  #app .relationship-hero-art > .relationship-visual { inset: 56px 48px 82px; }
}