/* Responsive refinements: preserve the original art and keep its central interactive area legible. */
html,
body {
  min-width: 0;
  overscroll-behavior: none;
}

.scene {
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

.answer {
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: #fff2cd66;
}

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

@media (hover: none) {
  .answer:hover:not(:active) { transform: none; }
}

@media (max-width: 650px) {
  .garden-telescope { left: 72%; top: 48%; width: 9%; height: 17%; min-width: 48px; min-height: 70px; }
  .garden-telescope span { font-size: 6px; }
  .world-overlay:has(.telescope-scene) { padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); }
  .world-overlay:has(.telescope-scene) .overlay-paper { width: 100%; max-height: 100%; padding: 8px 0; }
  .telescope-scene { gap: 12px; }
  .telescope-lens { width: min(66vw, 48vh, 390px); border-width: 8px; }
  .telescope-heading { max-width: 68vw; margin-top: 22px; font-size: clamp(.55rem, 2.8vw, .76rem); }
  .telescope-controls { width: 100%; gap: 8px; }
  .telescope-controls button { min-width: min(43vw, 172px); min-height: 48px; padding: 8px; font-size: clamp(.42rem, 2.2vw, .55rem); }
  .telescope-status { bottom: 10%; font-size: clamp(.4rem, 2vw, .52rem); }
  .telescope-special { bottom: 3%; font-size: clamp(.52rem, 2.6vw, .68rem); }
  .question-stage {
    width: min(560px, calc(100vw - 32px));
    top: 49%;
  }

  .question-card {
    padding-right: 9px;
    padding-left: 9px;
  }

  .question-card p {
    font-size: clamp(.67rem, 3.35vw, .95rem);
    line-height: 1.65;
  }

  .answer-area {
    width: 100%;
    height: 104px;
  }

  .answer {
    width: 46%;
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px;
    font-size: clamp(.65rem, 3.2vw, .82rem);
  }

  .yes { left: 0; }
  .no { left: 54%; }

  .scene-note {
    font-size: clamp(.95rem, 4.2vw, 1.2rem);
    line-height: 1.3;
  }

  .cat-pop {
    bottom: calc(8vh + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    white-space: normal;
    justify-content: center;
    text-align: center;
    line-height: 1.6;
  }

  /* Enlarge the room relative to portrait width. Its interactive center stays in frame,
     while the non-interactive outer wall can crop instead of shrinking every object. */
  .world-art {
    top: 45%;
    width: auto;
    height: min(72svh, 520px);
    max-height: 72svh;
    max-width: none;
    aspect-ratio: 3 / 2;
  }

  .hotspot-envelope {
    left: 35.5%;
    top: 62.5%;
    width: 8%;
    height: 9%;
  }

  .world-whisper {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 32px);
    max-width: 520px;
    line-height: 1.35;
  }

  .world-overlay {
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .overlay-paper {
    width: min(660px, calc(100vw - 28px));
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
    padding: clamp(18px, 5vw, 30px);
  }

  .overlay-paper:has(.cat-scrapbook) {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 10px;
  }

  .overlay-paper:has(.secret-note) {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 12px;
  }

  .secret-note-heading { margin-bottom: 10px; }
  .secret-note-letter { padding: 11px 12px; }
  .secret-note-letter p { margin-bottom: 8px; font-size: .95rem; line-height: 1.35; }

  .overlay-close {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    min-height: 44px;
    padding: 9px 10px;
    font-size: .48rem;
  }

  .overlay-paper.password-surface,
  .overlay-paper.memory-album-surface {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .password-panel {
    width: min(300px, calc(100vw - 32px));
  }

  .memory-album {
    width: min(680px, calc(100vw - 24px));
  }

  .memory-book-pages {
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
  }

  .memory-album-turns button,
  .memory-album-close,
  .scrapbook-turns button,
  .photo-secret-trigger {
    min-height: 44px;
    touch-action: manipulation;
  }
}

@media (max-width: 650px) and (max-height: 650px) {
  .telescope-lens { width: min(56vw, 52vh, 340px); }
  .telescope-scene { gap: 7px; }
  .telescope-heading { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .garden-telescope svg { transition: none; }
  .lens-stars i,.astro-moon,.astro-saturn,.astro-earth,.astro-nebula,.astro-libra path,.astro-heart path,.astro-libra circle,.astro-heart circle,.astro-meteors i,.astro-meteors b,.astro-shooting,.astro-ufo,.lens-discovery.is-heart:after,.telescope-special { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 360px) {
  .side-stamps { left: 8px; bottom: calc(8% + env(safe-area-inset-bottom)); }
  .side-stamps span { width: 30px; height: 30px; }
  .pixel-heart { width: 126px; height: 110px; }
  .question-card:before,
  .question-card:after { display: none; }
  .scrapbook-page { grid-template-columns: minmax(0, 1fr); }
  .cat-caption { text-align: center; }
}

@media (max-width: 650px) and (orientation: landscape) {
  .question-stage { top: 50%; width: min(560px, calc(100vw - 44px)); }
  .pixel-heart { width: 108px; height: 92px; margin-bottom: -28px; font-size: 2rem; }
  .question-card { padding-top: 10px; padding-bottom: 9px; }
  .answer-area { height: 72px; margin-top: 5px; }
  .answer { top: 8px; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
  .scene-note { min-height: 20px; font-size: .95rem; }
  .world-art { top: 44%; width: min(100vw, 150svh); height: auto; max-width: 100vw; max-height: 84svh; }
  .overlay-paper { max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 14px; }
  .overlay-close { min-height: 40px; }
  .memory-book-pages { min-height: 0; }
  .memory-spread { min-height: 150px; }
}

@media (max-width: 650px) and (orientation: portrait) {
  .mobile-garden-peek {
    position: absolute;
    z-index: 1;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    display: block;
    width: 100vw;
    max-height: 18svh;
    object-fit: contain;
    object-position: center bottom;
    image-rendering: pixelated;
    pointer-events: none;
  }
}

@media (min-width: 651px) {
  .world-overlay { padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
  .overlay-paper { max-height: calc(88dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

@media (max-width: 650px) {
  .memory-print img { max-height: 160px; }
}

@media (pointer: coarse), (max-width: 650px) and (any-pointer: coarse) {
  .birthday-world[data-house-state="outside"] {
    touch-action: none;
    overflow: hidden;
    clip-path: inset(0);
  }
  .birthday-world[data-house-state="outside"] .mobile-garden-peek { display: none !important; }
  .birthday-world[data-house-state="outside"] .world-art.outside-state { overflow: visible; }
  .birthday-world[data-house-state="outside"] .world-art.outside-state {
    clip-path: circle(var(--mobile-world-clip-radius, 72%) at 50% 50%);
  }
  .birthday-world[data-house-state="outside"] .garden-band {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: 20;
    overflow: visible;
  }
  .birthday-world[data-house-state="outside"] .garden-band-art { overflow: visible; }
  .birthday-world[data-house-state="outside"] .mobile-cosmos {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    overflow: hidden;
    background: inherit;
    pointer-events: none;
  }
  .birthday-world[data-house-state="outside"] .mobile-cosmos::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 48%, #20285a 0, #111a3d 44%, #080d25 100%);
    opacity: var(--mobile-space-progress, 0);
  }
  .mobile-cosmos-nebula {
    position: absolute;
    inset: -16%;
    background:
      radial-gradient(ellipse at 23% 37%, #7758a855 0 5%, transparent 24%),
      radial-gradient(ellipse at 77% 65%, #315b9b66 0 7%, transparent 28%),
      radial-gradient(ellipse at 48% 14%, #ba638044 0 4%, transparent 23%);
    image-rendering: pixelated;
    opacity: var(--mobile-space-progress, 0);
  }
  .mobile-cosmos-stars { position: absolute; inset: 0; opacity: var(--mobile-space-progress, 0); }
  .mobile-cosmos-stars i {
    position: absolute;
    display: block;
    width: 3px;
    height: 3px;
    background: #fff2c2;
    box-shadow: 3px 0 #fff2c288, 0 3px #b6d7ff88;
    opacity: .82;
  }
  .mobile-cosmos-stars i:nth-child(1){left:8%;top:16%}.mobile-cosmos-stars i:nth-child(2){left:18%;top:69%;width:2px;height:2px}
  .mobile-cosmos-stars i:nth-child(3){left:29%;top:27%}.mobile-cosmos-stars i:nth-child(4){left:38%;top:84%;width:2px;height:2px}
  .mobile-cosmos-stars i:nth-child(5){left:56%;top:13%;width:2px;height:2px}.mobile-cosmos-stars i:nth-child(6){left:68%;top:31%}
  .mobile-cosmos-stars i:nth-child(7){left:83%;top:19%;width:2px;height:2px}.mobile-cosmos-stars i:nth-child(8){left:91%;top:54%}
  .mobile-cosmos-stars i:nth-child(9){left:11%;top:88%;width:2px;height:2px}.mobile-cosmos-stars i:nth-child(10){left:31%;top:52%}
  .mobile-cosmos-stars i:nth-child(11){left:44%;top:7%;width:2px;height:2px}.mobile-cosmos-stars i:nth-child(12){left:76%;top:82%;width:2px;height:2px}
  .mobile-cosmos-stars i:nth-child(13){left:95%;top:91%}.mobile-cosmos-stars i:nth-child(14){left:5%;top:43%;width:2px;height:2px}
  .mobile-cosmos-stars i:nth-child(15){left:62%;top:91%;width:2px;height:2px}.mobile-cosmos-stars i:nth-child(16){left:87%;top:39%;width:2px;height:2px}
  .mobile-cosmos-atmosphere {
    position: absolute;
    left: var(--mobile-camera-center-x, 50%);
    top: var(--mobile-camera-center-y, 45%);
    width: min(92vw, 460px);
    aspect-ratio: 1;
    border: 2px solid #7bd7f088;
    border-radius: 50%;
    background: radial-gradient(circle, #70d3e322 0 42%, #367ac755 59%, #202a7566 71%, transparent 73%);
    box-shadow: 0 0 18px #66c9ed55, inset 0 0 15px #6bc9e633;
    opacity: var(--mobile-atmosphere-progress, 0);
    transform: translate(-50%,-50%) scale(var(--mobile-atmosphere-scale, .72));
  }
  .mobile-cosmos-sun,.mobile-cosmos-moon,.mobile-cosmos-distant-planet {
    position: absolute;
    display: block;
    image-rendering: pixelated;
    opacity: var(--mobile-space-progress, 0);
  }
  .mobile-cosmos-sun {
    top: 13%;right: 14%;width: 25px;height: 25px;
    background: #f7cf77;box-shadow: 0 0 0 4px #e9975966, 0 0 0 9px #db925144;
    clip-path: polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%);
  }
  .mobile-cosmos-moon {
    top: 24%;left: 12%;width: 23px;height: 23px;background: #e7e5d0;
    clip-path: polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%);
    box-shadow: inset -5px -3px #a3b2c0;
  }
  .mobile-cosmos-distant-planet.planet-one { top: 60%;left: 9%;width: 16px;height: 16px;background: #d58c76;box-shadow: 3px 3px #8a5874; }
  .mobile-cosmos-distant-planet.planet-two { right: 9%;bottom: 16%;width: 11px;height: 11px;background: #88a6c5;box-shadow: 3px 2px #56688f; }
  .mobile-cosmos-earth {
    position: absolute;
    left: var(--mobile-camera-center-x, 50%);
    top: var(--mobile-camera-center-y, 45%);
    width: clamp(132px, 46vw, 220px);
    aspect-ratio: 1;
    opacity: var(--mobile-planet-progress, 0);
    filter: drop-shadow(0 0 9px #73d5f088);
    transform: translate(-50%,-50%) scale(var(--mobile-planet-scale, .55));
  }
  .mobile-cosmos-earth svg { display: block;width: 100%;height: 100%; }
}