/* Retain the homepage illustration and its original icon coordinates. */
.homepage-scene { width: 100%; }
@media (pointer: coarse) {
 /* Enlarge the tappable bear/banana area without resizing the visible art. */
 .character-button::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
 .character-button img { transition: none; }
 .character-button:hover img, .character-button:focus-visible img { transform: none; }
}
.homepage-accessible-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* On portrait phones, stack the original left and right halves.
   Each panel retains the original artwork scale, without stretching.
   Desktop and landscape continue to use the original full illustration. */
.mobile-homepage { display: none; }
@media (max-width: 768px) and (orientation: portrait) {
 .homepage-scene { display: none; }
 .mobile-homepage { display: block; width: 100%; margin: 0; }
 .mobile-brand-panel, .mobile-destinations-panel { position: relative; width: 100%; aspect-ratio: 716.5 / 805; overflow: hidden; }
 .mobile-panel-art { position: absolute; top: 0; display: block; width: 200%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
 .mobile-brand-panel .mobile-panel-art { left: 0; }
 .mobile-destinations-panel .mobile-panel-art { left: -100%; }
 .mobile-destinations-panel .character-button { left: 70.2%; width: 13%; }
 /* Top positions retain the original 32.5% and 79.5% values. */
}