:root {
  --paper: #f7ead0;
  --ink: #26150e;
  --sun: #e04b26;
  --sun-core: #f07338;
  --wall: #ec8566;
  --wall-light: #f7a483;
  --wall-shadow: #ce5c3d;
  --street: #ecca92;
  --tess: #14655c;
  --step: #e3d2ab;
  --cobalt: #2e56d4;
  --cobalt-dark: #2140ab;
  --door-gap: #241a10;
  --terracotta: #d1512c;
  --red: #c92f20;
  --purple: #5058d1;
  --teal: #0e9b88;
  --ochre: #f0a92d;
  --alley: #692c5b;
  --alley-deep: #511f46;
  --pot: #c25a32;
  --pot-dark: #a34524;
  --leaf: #2f9159;
  --leaf-dark: #1d7245;
  --palm-trunk: #3c4f3f;
  --wood: #9a5527;
  --wood-dark: #7a3f1a;
  --lantern: #eda12b;
  --lantern-glow: #ffe08a;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ar: "Aref Ruqaa", serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}

body.dusk {
  --paper: #f0d8ae;
  --sun: #c93a1e;
  --sun-core: #e04b26;
  --wall: #dd7458;
  --street: #dfb883;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- HUD ---------- */

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  pointer-events: none;
}

.hud__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: 0.02em;
  line-height: 1;
}

.hud__ar {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--terracotta);
}

.hud__counter {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
}

.hud__hint {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms ease;
}

.hud__hint.is-hidden {
  opacity: 0;
}

/* ---------- Stage ---------- */

.stage {
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.stage::-webkit-scrollbar {
  display: none;
}

#scene {
  display: block;
  height: 100svh;
  min-width: max(100vw, 640svh);
  margin: 0 auto;
}

/* Portrait: one tall facade you scroll down */
body.vertical .stage {
  overflow-x: hidden;
  overflow-y: auto;
}

body.vertical #scene {
  width: 100vw;
  min-width: 0;
  height: auto; /* viewBox 800x4400 → intrinsic 5.5x tall */
}

/* ---------- Nav arrows ---------- */

.nav {
  position: fixed;
  z-index: 15;
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  transition: transform 140ms var(--ease-out);
}

.nav:active {
  transform: scale(0.94);
}

.nav--prev {
  left: 14px;
  top: 50%;
  margin-top: -23px;
}

.nav--next {
  right: 14px;
  top: 50%;
  margin-top: -23px;
}

body.vertical .nav--prev {
  left: 50%;
  top: 64px;
  margin: 0 0 0 -23px;
  transform: rotate(90deg);
}

body.vertical .nav--next {
  right: auto;
  left: 50%;
  top: auto;
  bottom: 48px;
  margin: 0 0 0 -23px;
  transform: rotate(90deg);
}

body.vertical .nav--prev:active,
body.vertical .nav--next:active {
  transform: rotate(90deg) scale(0.94);
}

/* ---------- Scene furniture animations ---------- */

.gulls {
  animation: gulls-drift 46s linear infinite;
}

@keyframes gulls-drift {
  from {
    transform: translateX(-140px);
  }
  to {
    transform: translateX(1740px);
  }
}

.lantern__body {
  transform-box: fill-box;
  transform-origin: 50% -8%;
  animation: lantern-sway 5.6s ease-in-out infinite;
}

@keyframes lantern-sway {
  0%,
  100% {
    transform: rotate(-2.4deg);
  }
  50% {
    transform: rotate(2.4deg);
  }
}

/* ---------- Walkers ---------- */

.cat--walk {
  animation: walk-cross var(--walk-dur, 26s) linear infinite alternate;
}

@keyframes walk-cross {
  from {
    transform: translate(var(--from-x), var(--walk-y)) scale(0.95);
  }
  to {
    transform: translate(var(--to-x), var(--walk-y)) scale(0.95);
  }
}

/* Face the direction of travel: hold facing right for the outbound leg,
   flip for the return leg. */
.cat--walk .cat__flip {
  animation: walk-turn calc(var(--walk-dur, 26s) * 2) linear infinite;
}

@keyframes walk-turn {
  0%,
  49.9% {
    transform: scale(1, 1);
  }
  50%,
  100% {
    transform: scale(-1, 1);
  }
}

.cat__walkbody {
  transform-box: fill-box;
  transform-origin: center;
  animation: walk-bob 0.55s ease-in-out infinite alternate;
}

@keyframes walk-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-3px);
  }
}

.cat__leg {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: leg-swing 0.55s ease-in-out infinite alternate;
}

.cat__leg--b {
  animation-delay: -0.55s;
}

@keyframes leg-swing {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(14deg);
  }
}

.cat--paused,
.cat--paused .cat__walkbody,
.cat--paused .cat__leg,
.cat--paused .cat__tail {
  animation-play-state: paused;
}

/* ---------- Cats ---------- */

.cat {
  cursor: pointer;
}

/* Hide and seek: hiders hold perfectly still — motion would give them away.
   Only the walker moves, and a found cat gets its one celebration pop. */
.cat:not(.cat--walk) :is(.cat__tail, .cat__eyes, .cat__ear-l, .cat__breath, .cat__head, .cat__munch, .cat__wiggle, .cat__rock, .cat__groom, .cat__butt, .cat__paw, .cat__z) {
  animation: none;
}

/* Found cats stay fully painted — the counter tracks progress, and a small
   gold collar marks them as collected without fading them out. */
.cat__collar {
  display: none;
}

.cat--found .cat__collar {
  display: block;
}

.cat--celebrate .cat__pop {
  animation: celebrate 500ms var(--ease-pop);
}

/* ---------- Prop pokes and reveals ---------- */

[data-prop] {
  cursor: pointer;
}

.prop--poke {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: prop-poke 450ms var(--ease-pop);
}

@keyframes prop-poke {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(1.6deg) scale(1.012);
  }
  65% {
    transform: rotate(-1.2deg);
  }
}

.door__panels {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}

.door.prop--poke .door__panels {
  transform: translateX(-12px) scaleX(0.95);
}

/* Context-aware entrances: how a cat appears depends on where it hid. */

.cat--reveal-pop .cat__pop {
  animation: reveal-pop 430ms var(--ease-pop);
}

@keyframes reveal-pop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.55);
  }
  60% {
    opacity: 1;
    transform: translateY(-7px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slipping out of a dark doorway, low and cautious */
.cat--reveal-slink .cat__pop {
  animation: reveal-slink 640ms var(--ease-out);
}

@keyframes reveal-slink {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(1.1, 0.5);
  }
  45% {
    opacity: 1;
    transform: translateY(6px) scale(1.06, 0.72);
  }
  75% {
    transform: translateY(1px) scale(1.01, 0.94);
  }
  100% {
    transform: none;
  }
}

/* Tumbling down from laundry lines, rugs and palm fronds */
.cat--reveal-drop .cat__pop {
  animation: reveal-drop 560ms var(--ease-pop);
}

@keyframes reveal-drop {
  0% {
    opacity: 0;
    transform: translateY(-110px) rotate(-5deg);
  }
  55% {
    opacity: 1;
    transform: translateY(7px) scale(1.08, 0.85);
  }
  78% {
    transform: translateY(-4px) scale(0.98, 1.04);
  }
  100% {
    transform: none;
  }
}

/* Hauling itself up from behind a ledge, wall or gunwale */
.cat--reveal-rise .cat__pop {
  animation: reveal-rise 550ms var(--ease-pop);
}

@keyframes reveal-rise {
  0% {
    opacity: 0;
    transform: translateY(85px);
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translateY(-6px);
  }
  100% {
    transform: none;
  }
}

@keyframes celebrate {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.14) translateY(-8px);
  }
  100% {
    transform: scale(1);
  }
}

.cat__pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 200ms var(--ease-pop);
}

.cat:active .cat__pop {
  transform: scale(0.96);
}

.cat__tail {
  transform-box: fill-box;
  transform-origin: 10% 90%;
  animation: tail-sway 3.4s ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
}

@keyframes tail-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(9deg);
  }
}

.cat__eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.2s ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
}

@keyframes blink {
  0%,
  91%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.15);
  }
}

.cat__ear-l {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ear-twitch 9s ease-in-out infinite;
  animation-delay: var(--twitch-delay, 0s);
}

@keyframes ear-twitch {
  0%,
  86%,
  92%,
  100% {
    transform: rotate(0deg);
  }
  89% {
    transform: rotate(-12deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cat:hover .cat__pop {
    transform: translateY(-4px);
  }
}

/* ---------- Idle life ---------- */

.cat__breath {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: breath 3.1s ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}

@keyframes breath {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(1.022);
  }
}

.cat__breath--deep {
  animation-name: breath-deep;
  animation-duration: 2.3s;
}

@keyframes breath-deep {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(1.05);
  }
}

.cat__head {
  transform-box: fill-box;
  animation: head-look 11s ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
}

@keyframes head-look {
  0%,
  68%,
  96%,
  100% {
    transform: rotate(0deg);
  }
  74%,
  88% {
    transform: rotate(-6deg);
  }
}

.cat__munch {
  animation: munch 0.6s ease-in-out infinite alternate;
}

@keyframes munch {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(3.5px);
  }
}

.cat__wiggle {
  transform-box: fill-box;
  transform-origin: 50% 88%;
  animation: wiggle 2.9s ease-in-out infinite alternate;
}

@keyframes wiggle {
  from {
    transform: rotate(-1.6deg);
  }
  to {
    transform: rotate(1.6deg);
  }
}

.cat__paw {
  transform-box: fill-box;
  transform-origin: center;
  animation: paw-reach 1.5s ease-in-out infinite alternate;
}

.cat__paw--l {
  --paw-rot: 20deg;
}

.cat__paw--r {
  --paw-rot: -20deg;
  animation-delay: -0.75s;
}

@keyframes paw-reach {
  from {
    transform: rotate(var(--paw-rot, 0deg)) translateY(0);
  }
  to {
    transform: rotate(var(--paw-rot, 0deg)) translateY(-5px);
  }
}

.cat__z {
  opacity: 0;
  animation: zzz 3.6s ease-out infinite;
  animation-delay: var(--sway-delay, 0s);
}

.cat__z--2 {
  animation-delay: calc(var(--sway-delay, 0s) + 1.8s);
}

@keyframes zzz {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  30% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

/* Rocking into the play-bow stretch */
.cat__rock {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  animation: rock 3.6s ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}

@keyframes rock {
  from {
    transform: rotate(0deg) translateY(0);
  }
  to {
    transform: rotate(-1.8deg) translateY(1.5px);
  }
}

/* Grooming: head dips rhythmically to lick the chest */
.cat__groom {
  transform-box: fill-box;
  transform-origin: 50% 15%;
  animation: groom-bob 0.85s ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}

@keyframes groom-bob {
  from {
    transform: rotate(0deg) translateY(0);
  }
  to {
    transform: rotate(5deg) translateY(3px);
  }
}

/* Hunting crouch: stillness, then the pre-pounce butt wiggle */
.cat__butt {
  transform-box: fill-box;
  animation: butt-wiggle 5.5s ease-in-out infinite;
  animation-delay: var(--twitch-delay, 0s);
}

@keyframes butt-wiggle {
  0%,
  64%,
  94%,
  100% {
    transform: translateX(0);
  }
  68%,
  76%,
  84% {
    transform: translateX(-2.2px);
  }
  72%,
  80%,
  88% {
    transform: translateX(2.2px);
  }
}

/* Focused tail flicking, faster than the lazy sway */
.cat__tail--flick {
  animation-name: tail-flick;
  animation-duration: 1.1s;
}

@keyframes tail-flick {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

/* ---------- Photo card ---------- */

.card {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  opacity: 1;
  transition: opacity 200ms var(--ease-out);
}

.card[hidden] {
  display: none;
  transition: none;
}

.card__polaroid {
  margin: 0;
  background: var(--paper);
  padding: 14px 14px 16px;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 55%, transparent);
  max-width: min(86vw, 420px);
  transform: translateY(0) scale(1) rotate(-1.2deg);
  transition: transform 240ms var(--ease-pop);
}

@starting-style {
  .card:not([hidden]) {
    opacity: 0;
  }

  .card:not([hidden]) .card__polaroid {
    transform: translateY(26px) scale(0.94) rotate(-1.2deg);
  }
}

.card__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62svh;
  object-fit: cover;
}

.card__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

.card__name {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
}

.card__name .card__paw {
  font-size: 18px;
}

.card__name .card__arname {
  font-family: var(--font-ar);
  font-size: 24px;
  color: var(--terracotta);
}

.card__sub {
  font-size: 13px;
  font-style: italic;
  color: #6b6154;
  text-align: right;
  max-width: 55%;
  line-height: 1.4;
}

.card__close {
  position: absolute;
  top: 14px;
  right: 18px;
  appearance: none;
  border: none;
  background: none;
  color: var(--paper);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  transition: transform 120ms var(--ease-out);
}

.card__close:active {
  transform: scale(0.95);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .gulls,
  .lantern__body,
  .cat__tail,
  .cat__eyes,
  .cat__ear-l,
  .cat__breath,
  .cat__head,
  .cat__munch,
  .cat__wiggle,
  .cat__rock,
  .cat__groom,
  .cat__butt,
  .cat__paw,
  .cat__z,
  .cat__walkbody,
  .cat__leg {
    animation: none;
  }

  @starting-style {
    .card:not([hidden]) .card__polaroid {
      transform: translateY(0) scale(1) rotate(-1.2deg);
    }
  }

  .cat:hover .cat__pop,
  .cat:active .cat__pop {
    transform: none;
  }

  /* Reveals fade in without the movement */
  .cat--reveal .cat__pop {
    animation: reveal-fade 300ms var(--ease-out) !important;
  }

  @keyframes reveal-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ---------- Small screens: tighter chrome, gentler panning ---------- */

@media (max-width: 640px) {
  .hud {
    padding: 10px 12px;
  }

  .hud__counter {
    padding: 4px 10px;
    font-size: 11px;
  }

  .hud__hint {
    font-size: 11px;
    max-width: 92vw;
    text-align: center;
  }

  .nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .card__polaroid {
    max-width: 92vw;
    padding: 10px 10px 12px;
  }

  .card__name {
    font-size: 28px;
  }
}