/* California poolside postcard: shared illustration treatment, independent of UI ink. */
.postcard-sprite { display: block; width: 100%; height: 100%; }
.postcard-sprite svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 #fffaf088); }
.sprite-lane .sprite-runner { top: 6px; height: 44px; }
.sprite-lane .postcard-sprite svg { height: 100%; overflow: hidden; }
.illustrated-backyard { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.illustrated-backyard img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; visibility: hidden; opacity: 0; }
.illustrated-backyard .plate-ready { visibility: visible; }
.illustrated-backyard [data-pool-plate="day"] { opacity: 1; }
.illustrated-backyard [data-pool-plate="golden"] { opacity: var(--scene-golden-opacity, 0); }
.illustrated-backyard [data-pool-plate="night"] { opacity: var(--scene-night-opacity, 0); }
:is(.weather-cloudy, .weather-rain, .weather-storm) .illustrated-backyard [data-pool-plate="cloudy"] { opacity: 1; }
body.theme-transitions-ready .illustrated-backyard img { transition: opacity 65s linear; }
body:not(.kite-mode) #mobileSpriteStage {
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  background: #44c7cf;
  margin-top: 14px;
}
body:not(.kite-mode) #mobileSpriteStage > :is(.sprite-stage-sun, .sprite-stage-water) { display: none; }
body.kite-mode .illustrated-backyard { display: none; }
body:not(.kite-mode) #mobileSpriteStage .stage-sprite { top: 54%; bottom: auto; }
body:not(.kite-mode) #mobileSpriteStage .surprise-sky { top: 12%; }
body:not(.kite-mode) #mobileSpriteStage .surprise-ground { top: 68%; }
.backyard-rain { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(108deg, transparent 0 38px, #bfeefa70 39px 40px, transparent 41px 78px); }
:is(.weather-rain, .weather-storm) .backyard-rain { opacity: .35; }
body:not(.kite-mode) #poolPersonality.illustrated-mood {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  margin: 0 0 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgb(var(--scene-surface, 255 250 240));
  color: rgb(var(--scene-ink, 23 33 43));
}
body:not(.kite-mode) #poolPersonality[hidden] { display: none; }
.illustrated-mood > div { padding: 4px 12px 4px 0; align-self: center; }
.illustrated-mood > div > span { display: block; margin-bottom: 4px; font-size: .65rem; font-weight: 700; color: rgb(var(--scene-muted, 80 90 99)); }
.illustrated-mood strong { display: block; font-size: .78rem; line-height: 1.45; font-weight: 600; color: inherit; }
.pool-mood-art { display: block; width: 80px; height: 80px; align-self: center; background: url('/assets/illustrations/pool-moods-v1.webp') 0 0 / 300% 200%; }
.pool-mood-art[data-mood="cool"] { background-position: 50% 0; }
.pool-mood-art[data-mood="golden"] { background-position: 100% 0; }
.pool-mood-art[data-mood="night"] { background-position: 0 100%; }
.pool-mood-art[data-mood="rain"] { background-position: 50% 100%; }
.pool-mood-art[data-mood="reading"] { background-position: 100% 100%; }
.collection-art { height: auto; aspect-ratio: 1; padding: 0; overflow: hidden; background: #b5e1ef; }
.collection-art .souvenir-art { width: 100%; max-width: none; height: 100%; }
.collection-item.is-collected .collection-art { box-shadow: inset 0 -3px 0 #72b78d; }
@media (max-width: 619px) {
  #interactivePoolFloat { width: 76px; height: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-transitions-ready .illustrated-backyard img { transition: none; }
}