/* Background mascots flank a reserved text area at every breakpoint. */
.cat-theme { display: flow-root; background: #f1f2eb; }
.cat-theme .app-shell {
  margin-block: 24px;
  min-height: calc(100vh - 48px);
  min-height: calc(100svh - 48px);
  box-shadow: 0 24px 72px rgb(31 45 31 / 9%);
}
.cat-theme .screen { min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); }
.cat-theme .start-screen {
  isolation: isolate;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .8fr);
  gap: 8px;
  align-items: center;
  padding: 48px clamp(28px, 6vw, 120px);
  background: radial-gradient(ellipse at 19% 52%, #f5e5d7 0, transparent 42%),
              radial-gradient(ellipse at 82% 52%, #e5edc5 0, transparent 42%), #fcfbf5;
}
.hero-title-stage { position: static; }
.cat-cast { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cat-character {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 24%;
  height: min(660px, calc(100svh - 136px));
  transform: translateY(-50%);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgb(43 47 29 / 12%));
}
.cat-character-soft { left: 4%; }
.cat-character-tough { right: 4%; }
.cat-theme .hero-copy {
  position: static;
  grid-column: 2; grid-row: 1;
  width: 100%; max-width: 600px; min-width: 0;
  margin: auto; text-align: center;
}
.cat-road-sign {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 24px;
  border: 2px solid #17283c;
  border-radius: 11px;
  background: #d5f43e;
  transform: rotate(-12deg);
  box-shadow: 4px 4px 0 rgb(23 40 60 / 12%);
}
.cat-road-sign svg { width: 31px; height: 31px; fill: #17283c; transform: rotate(12deg); }
.cat-theme h1 { font-size: clamp(40px, 4.4vw, 72px); line-height: 1.1; letter-spacing: -.8px; margin-bottom: 24px; }
.cat-theme h1 em {
  display: inline;
  color: #62782e;
  background: linear-gradient(transparent 82%, #d5f43e80 82%, #d5f43e80 96%, transparent 96%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cat-theme .hero-text { max-width: 510px; margin: 0 auto 22px; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.7; color: #596570; }
.cat-theme .hero-meta { justify-content: center; margin-bottom: 24px; color: #697464; }
.cat-theme .meta-separator { color: #859a46; }
.cat-theme #startButton { width: auto; min-width: 210px; max-width: 100%; padding: 16px 30px; font-size: 16px; line-height: 1.5; border-radius: 16px; box-shadow: 0 5px 0 #acc926, 0 14px 26px #9cb33526; }
.cat-theme #startButton:active { transform: translateY(3px); box-shadow: 0 2px 0 #acc926; }
.road-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.road-scene path { fill: none; }
.road-edge { stroke: #bdc7ad; stroke-width: 91px; opacity: .24; }
.road-surface { stroke: #e8ebdc; stroke-width: 85px; opacity: .9; }
.road-dashes { stroke: #fff; stroke-width: 3px; stroke-dasharray: 20 18; opacity: .95; }
.paw-trail { fill: #879861; opacity: .12; }
.cat-theme .answer-option { border-radius: 18px; }
.cat-theme .answer-letter { border-radius: 50% 50% 44% 44%; background: #edf3da; }
.cat-theme .progress-track { background: #edf0e5; }
.cat-theme .progress-track > span { background: #b4cc48; }
.cat-theme .result-screen { padding-bottom: 40px; background: radial-gradient(ellipse at 85% 60%, #edf2d8, transparent 55%), #fcfbf7; }
.cat-theme .result-art img { object-position: center; }
.cat-theme .result-actions .restart-button { padding: 14px 24px; }
.road-fact { margin-top: 22px; border: 1px solid #dbe4ca; border-radius: 18px; background: #f6f8ee; color: #34445d; }
.road-fact[hidden] { display: none; }
.road-fact summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; line-height: 1.5; }
.road-fact summary::-webkit-details-marker { display: none; }
.road-fact summary:focus-visible { outline: 3px solid #78a6f5; outline-offset: 3px; border-radius: 18px; }
.fact-icon { color: #7b913b; font-size: 23px; flex: 0 0 auto; }
.fact-toggle { margin-left: auto; font-size: 25px; font-weight: 500; line-height: 1; transition: transform .18s ease; }
.road-fact[open] .fact-toggle { transform: rotate(45deg); }
.fact-content { padding: 0 20px 20px 55px; }
.fact-content h3 { margin: 0 0 10px; color: var(--navy); font-size: 17px; line-height: 1.4; }
.fact-content p { margin: 0 0 12px; font-size: 14px; line-height: 1.75; }
.fact-content a { display: inline-block; padding-block: 6px; color: #526b25; font-size: 12px; line-height: 1.5; text-underline-offset: 3px; }
.cat-theme .result-screen[data-role="driver"], .cat-theme .result-screen[data-role="roller"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.cat-theme .result-screen[data-role="driver"] .result-art, .cat-theme .result-screen[data-role="roller"] .result-art { height: clamp(300px, 65svh, 650px); }

@media (min-width: 761px) and (max-width: 1200px) {
  .cat-theme .start-screen { padding-inline: 28px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .8fr); }
  .cat-theme h1 { font-size: clamp(34px, 4.3vw, 52px); }
  .cat-theme .hero-text { font-size: 15px; line-height: 1.6; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .cat-theme .start-screen { padding-block: 30px; }
  .cat-road-sign { width: 40px; height: 40px; margin-bottom: 16px; }
  .cat-road-sign svg { width: 27px; height: 27px; }
  .cat-theme h1 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 60px); }
  .cat-theme .hero-text { margin-bottom: 16px; }
  .cat-theme .hero-meta { margin-bottom: 20px; }
}
@media (max-width: 760px) {
  .road-fact { margin-top: 18px; border-radius: 14px; }
  .road-fact summary { padding: 14px; gap: 10px; font-size: 13px; }
  .fact-content { padding: 0 16px 16px; }
  .fact-content h3 { font-size: 16px; }
  .cat-theme .result-screen[data-role="driver"], .cat-theme .result-screen[data-role="roller"] { grid-template-columns: minmax(0, 1fr); }
  .cat-theme .result-screen[data-role="driver"] .result-art, .cat-theme .result-screen[data-role="roller"] .result-art { height: clamp(220px, 38svh, 360px); }
  .cat-theme .app-shell { margin-block: 12px; min-height: calc(100svh - 24px); }
  .cat-theme .screen { min-height: calc(100svh - 24px); }
  .cat-theme .start-screen { grid-template-columns: minmax(0, 1fr); align-content: center; padding: 32px 22px; }
  .cat-theme .hero-copy { grid-column: 1; grid-row: 1; max-width: 600px; }
  .hero-title-stage { position: relative; min-height: 240px; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .cat-cast { inset: 0; overflow: visible; }
  .cat-character { width: 27%; height: 220px; object-fit: contain; object-position: center; filter: none; }
  .cat-character-soft { left: 0; }
  .cat-character-tough { right: 0; }
  .cat-theme h1 { position: relative; z-index: 2; width: 44%; font-size: clamp(24px, 6.8vw, 36px); letter-spacing: -.3px; margin: 0 auto; }
  .cat-road-sign { position: relative; z-index: 2; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 9px; }
  .cat-road-sign svg { width: 24px; height: 24px; }
  .cat-theme .hero-text { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
  .cat-theme .hero-meta { margin-bottom: 22px; }
  .cat-theme .result-screen { padding-bottom: 28px; }
  .road-scene { opacity: .7; }
}
@media (max-width: 374px) {
  .cat-theme .start-screen { padding-inline: 16px; }
  .hero-title-stage { min-height: 220px; }
  .cat-character { height: 200px; }
  .cat-theme h1 { font-size: 24px; }
}
@media (min-width: 620px) and (max-width: 900px) and (max-height: 500px) {
  .cat-theme .start-screen { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr) minmax(0, .75fr); gap: 10px; padding: 24px; }
  .cat-theme .hero-copy { grid-column: 2; grid-row: 1; }
  .hero-title-stage { position: static; display: block; min-height: 0; margin-bottom: 12px; }
  .cat-cast { inset: 0; overflow: hidden; }
  .cat-character { width: 22%; height: calc(100svh - 96px); object-fit: contain; }
  .cat-character-soft { left: 3%; }
  .cat-character-tough { right: 3%; }
  .cat-road-sign { display: none; }
  .cat-theme h1 { width: 100%; font-size: 32px; margin-bottom: 0; }
  .cat-theme .hero-text { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
  .cat-theme .hero-meta { margin-bottom: 14px; font-size: 11px; }
  .cat-theme #startButton { min-width: 180px; min-height: 48px; padding-block: 12px; }
}
/* Compact hero: the mascots flank the heading rather than the whole page. */
.cat-theme .start-screen { grid-template-columns: minmax(0, 1fr); padding: 28px 28px 38px; }
.cat-theme .hero-copy { position: relative; grid-column: 1; width: min(1100px, 100%); max-width: 1100px; }
.cat-theme .hero-title-stage { position: relative; min-height: 0; height: clamp(280px, 43svh, 410px); margin: 0 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cat-theme .cat-cast { inset: 0; overflow: visible; }
.cat-theme .cat-character { width: 29%; height: 100%; top: 50%; object-fit: contain; }
.cat-theme .cat-character-soft { left: 8%; --enter-x: -140px; }
.cat-theme .cat-character-tough { right: 7%; --enter-x: 140px; }
.cat-theme h1 { width: 48%; margin: 0 auto; position: relative; z-index: 2; font-size: clamp(34px, 4.2vw, 62px); }
.cat-theme .cat-road-sign { position: relative; z-index: 2; margin-bottom: 18px; }
.cat-theme .hero-text { max-width: 680px; margin-bottom: 18px; line-height: 1.6; }
.cat-theme .hero-meta { margin-bottom: 20px; }
.cat-theme .result-art { --enter-x: 140px; }

/* Compositor-only entrance; JavaScript starts it after the image is decoded. */
.swoosh { opacity: 0; }
.swoosh.is-ready { animation: cat-swoosh .62s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cat-swoosh {
  0% { opacity: 0; translate: var(--enter-x, 100px) 0; scale: .96; }
  68% { opacity: 1; translate: calc(var(--enter-x, 100px) * -.045) 0; scale: 1.008; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.fact-image { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin: 16px 0 10px; --enter-x: 85px; }
.fact-image[hidden] { display: none; }
.fact-content { overflow: hidden; }
.road-fact summary { position: relative; overflow: hidden; }
.road-fact:not(.is-seen) { animation: fact-glow 2.5s ease-in-out infinite; }
.road-fact:not(.is-seen) .fact-icon { animation: fact-spark 1.8s ease-in-out infinite; }
.road-fact:not(.is-seen) summary::after { content: ''; position: absolute; pointer-events: none; inset: 0; background: linear-gradient(110deg, transparent 25%, #fff9 48%, transparent 70%); translate: -120% 0; animation: fact-shimmer 4s ease-in-out infinite; }
@keyframes fact-glow { 50% { border-color: #9db943; box-shadow: 0 0 0 4px #d5f43e22; } }
@keyframes fact-spark { 50% { opacity: .45; scale: .85; } }
@keyframes fact-shimmer { 65%, 100% { translate: 120% 0; } }

@media (hover: hover) and (pointer: fine) {
  html, body, body *, button, a, summary { cursor: url('public/icons/paw-cursor.svg') 16 15, url('public/icons/paw-cursor.png') 16 15, auto; }
}
@media (max-width: 760px) {
  .cat-theme .start-screen { padding: 26px 18px 30px; }
  .cat-theme .hero-title-stage { height: clamp(215px, 35svh, 300px); margin-bottom: 10px; }
  .cat-theme .cat-character { width: 30%; height: 100%; }
  .cat-theme .cat-character-soft { left: -2%; --enter-x: -70px; }
  .cat-theme .cat-character-tough { right: -2%; --enter-x: 70px; }
  .cat-theme h1 { width: 48%; font-size: clamp(24px, 6.8vw, 38px); }
  .cat-theme .hero-text { max-width: 560px; font-size: 15px; }
  .cat-theme .cat-road-sign { width: 34px; height: 34px; margin-bottom: 12px; }
  .cat-theme .hero-meta { margin-bottom: 18px; }
  .road-fact { margin-top: 16px; }
}
@media (max-width: 374px) {
  .cat-theme .start-screen { padding-inline: 14px; }
  .cat-theme h1 { font-size: 23px; }
  .cat-theme .hero-text { font-size: 14px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .cat-theme .start-screen { padding-block: 20px 28px; }
  .cat-theme .hero-title-stage { height: 270px; }
  .cat-theme .hero-text { font-size: 15px; margin-bottom: 12px; }
}
@media (min-width: 620px) and (max-width: 900px) and (max-height: 500px) {
  .cat-theme .start-screen { padding: 18px 24px; }
  .cat-theme .hero-title-stage { height: 140px; }
  .cat-theme .cat-character { width: 22%; height: 170px; }
  .cat-theme .cat-character-soft { left: 7%; }
  .cat-theme .cat-character-tough { right: 7%; }
  .cat-theme h1 { width: 50%; font-size: 30px; }
  .cat-theme .hero-text { font-size: 13px; margin-bottom: 10px; }
  .cat-theme .hero-meta { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .swoosh.is-ready { opacity: 1; translate: none; scale: 1; animation: none !important; }
  .road-fact, .fact-icon, .road-fact summary::after { animation: none !important; }
}

/* A prominent, topic-specific invitation appears before the answers. */
.road-fact { margin: 0 0 22px; border: 2px solid #b4ca53; background: #f4f8df; box-shadow: 0 8px 24px #62782e14; }
.road-fact[data-theme="color"] { border-color: #6cbacb; background: linear-gradient(110deg, #eaf8fc, #fff0e9); }
.road-fact[data-theme="aroma"] { border-color: #e3a1a4; background: linear-gradient(110deg, #fff0f0, #f7f8e3); }
.road-fact summary { display: grid; grid-template-columns: 86px minmax(0, 1fr) 28px; gap: 18px; padding: 16px 20px; font-size: 16px; line-height: 1.5; }
.fact-art { display: block; width: 86px; height: 86px; align-self: center; border-radius: 24px; background: #ffffffb8; box-shadow: 0 4px 14px #17283c0c; }
.fact-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fact-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.fact-teaser { font-size: 10px; color: #5b712e; letter-spacing: .8px; font-weight: 800; }
.road-fact[data-theme="color"] .fact-teaser { color: #287e94; }
.road-fact[data-theme="aroma"] .fact-teaser { color: #ad4757; }
.fact-nudge { display: inline-flex; align-items: center; padding: 5px 12px; margin-top: 3px; border-radius: 30px; background: #d5f43e; color: #17283c; font-size: 12px; font-weight: 800; line-height: 1.5; }
.road-fact[data-theme="color"] .fact-nudge { background: #bee9f0; }
.road-fact[data-theme="aroma"] .fact-nudge { background: #ffd5d5; }
.road-fact .fact-toggle { font-size: 30px; }
.road-fact:not(.is-seen) { animation: fact-beacon 2s ease-in-out infinite; }
.road-fact:not(.is-seen) .theme-motion { transform-origin: 44px 48px; animation: topic-bounce 1.8s ease-in-out infinite; }
.road-fact:not(.is-seen) .scent-motion { animation: scent-rise 1.8s ease-in-out infinite; }
.road-fact[open] .fact-content { padding: 0 24px 24px; }
.fact-content a { padding: 7px 0 12px; font-size: 13px; font-weight: 700; }
.fact-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; margin-top: 7px; }
.fact-gallery[hidden] { display: none; }
.fact-gallery[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact-gallery figure { margin: 0; min-width: 0; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 4px 16px #17283c0d; }
.fact-gallery .fact-image { max-width: none; margin: 0; width: 100%; height: auto; aspect-ratio: auto; display: block; border-radius: 0; }
.fact-gallery[data-count="3"] .fact-image { height: 290px; object-fit: cover; }
.fact-gallery[data-count="3"] figure:first-child .fact-image { object-position: center 66%; }
.fact-gallery figcaption { padding: 11px 12px; color: #536473; font-size: 12px; font-weight: 700; line-height: 1.5; }
.result-reasoning { padding: 16px 18px; margin: 0 0 22px; border: 1px solid #dce6c8; border-radius: 16px; background: #f4f8ec; color: #465666; }
.result-reasoning[hidden] { display: none; }
.result-reasoning h3 { margin: 0 0 8px; color: #17283c; font-size: 16px; }
.result-reasoning p { margin: 0 0 10px; font-size: 13px; line-height: 1.65; }
.result-reasoning ul { margin: 0; padding-left: 19px; font-size: 13px; line-height: 1.6; }
.result-reasoning li + li { margin-top: 5px; }
@keyframes fact-beacon { 50% { box-shadow: 0 0 0 5px #d5f43e50, 0 9px 26px #62782e26; } }
@keyframes topic-bounce { 0%, 100% { transform: translateY(1px) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(5deg); } }
@keyframes scent-rise { 0%, 100% { opacity: .6; transform: translateY(1px); } 50% { opacity: 1; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) {
  :is(a[href], button:not(:disabled), summary, [role="button"]), :is(a[href], button:not(:disabled), summary, [role="button"]) * {
    cursor: url('public/icons/paw-pointer.svg') 18 10, url('public/icons/paw-pointer.png') 18 10, pointer;
  }
  button:disabled, button:disabled * { cursor: not-allowed; }
}
@media (max-width: 760px) {
  .road-fact { margin: 0 0 18px; }
  .road-fact summary { grid-template-columns: 58px minmax(0, 1fr) 18px; gap: 11px; padding: 14px 12px; font-size: 14px; }
  .fact-art { width: 58px; height: 68px; border-radius: 16px; }
  .fact-teaser { font-size: 8px; letter-spacing: .35px; }
  .fact-heading { gap: 4px; }
  .fact-nudge { font-size: 11px; padding: 4px 9px; }
  .road-fact .fact-toggle { font-size: 25px; }
  .road-fact[open] .fact-content { padding: 0 14px 16px; }
  .fact-gallery[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fact-gallery[data-count="3"] figure:first-child { grid-column: 1 / -1; }
  .fact-gallery[data-count="3"] .fact-image { height: 190px; }
  .fact-gallery[data-count="3"] figure:first-child .fact-image { height: 220px; object-position: center 76%; }
  .fact-gallery figcaption { padding: 9px; font-size: 11px; }
  .result-reasoning { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .road-fact, .road-fact .theme-motion, .road-fact .scent-motion { animation: none !important; }
}