.home-stage{width:100vw;height:100vh;position:relative;overflow:hidden;margin:0}
.home-stage .home-el{position:absolute;pointer-events:none;user-select:none}
.home-stage .home-plane{top:30%;left:0;height:32vh;max-height:380px;min-height:200px;width:auto}
.home-stage .home-train{bottom:0;left:0;height:38vh;max-height:460px;min-height:240px;width:auto}
.home-stage .home-palms{top:14%;right:0;height:70vh;max-height:800px;min-height:380px;width:auto}
.home-stage .home-car{bottom:4%;right:0;height:28vh;max-height:320px;min-height:180px;width:auto}
.home-stage .home-logo{top:1.5%;left:50%;transform:translateX(-50%);width:50vw;max-width:720px;min-width:480px;height:auto;z-index:5}
.home-stage .home-globe{position:absolute;top:3%;left:50%;transform:translateX(-50%);height:100vh;aspect-ratio:6/5;width:auto;z-index:10;pointer-events:none;touch-action:none;cursor:grab;background:transparent;display:block}
.home-stage .home-globe:active{cursor:grabbing}
.home-stage .albums_btn{position:absolute;top:2%;left:10%;z-index:6;pointer-events:auto;padding:0;height:auto;margin:0}
.home-stage .albums_btn img{height:34vh;max-height:340px;min-height:200px;width:auto;transition:transform .2s ease}
.home-stage .albums_btn:hover img{transform:scale(1.08)}
.home-stage .trips_btn{position:absolute;top:2%;right:10%;z-index:6;pointer-events:auto;padding:0;height:auto;margin:0}
.home-stage .trips_btn img{height:34vh;max-height:340px;min-height:200px;width:auto;transition:transform .2s ease}
.home-stage .trips_btn:hover img{transform:scale(1.08)}
/* pin tooltip (rendered by home-globe.js) */
#pin-tooltip{position:fixed;z-index:50;display:none;max-width:220px;padding:8px 10px;border-radius:var(--r-md);
  background:rgba(14,10,31,.92);border:1px solid rgba(243,201,105,.4);box-shadow:var(--shadow-glass);color:rgba(var(--cream),.92)}
#pin-tooltip img{max-width:100%;border-radius:var(--r-sm);display:block;margin-bottom:6px}
#pin-tooltip-title{font-family:var(--serif);font-weight:500;font-size:14px;color:var(--gold-bright)}
#pin-tooltip-meta{font-size:11px;color:rgba(var(--cream),.7)}

/* desktop "Get the app" QR affordance */
.home-getapp{position:fixed;right:18px;bottom:18px;z-index:11;display:flex;flex-direction:column;gap:8px;align-items:center}
.home-getapp__codes{display:flex;gap:8px}
.home-getapp__codes img{width:84px;height:84px;border-radius:var(--r-sm);background:#fff;padding:4px}
@media (max-width:900px){.home-getapp{display:none}}   /* desktop-only; phones go to /m */

/* Landing top-right control: Log in (signed out) or the initials chip (signed in). Fixed to the viewport
   corner, above the WebGL globe, roughly matching the shared header's right-control inset. The chip reuses
   the drawer-avatar gold look; being id="menu-toggle" lets the already-loaded drawer.js open the drawer. */
.home-topright { position: fixed; top: clamp(14px, 2.2vh, 22px); right: clamp(14px, 2.4vw, 26px); z-index: 30; }
.home-avatar {
    width: clamp(42px, 5.4vh, 52px); height: clamp(42px, 5.4vh, 52px); border-radius: 999px;
    display: grid; place-items: center; border: 0; cursor: pointer;
    background: var(--grad-gold-cta); color: var(--ink-on-gold);
    font-family: var(--sans); font-weight: 600; font-size: clamp(15px, 2vh, 18px);
    box-shadow: 0 0 16px rgba(243, 201, 105, .35);
}
.home-avatar:hover { filter: brightness(1.05); }
.home-avatar:focus-visible { outline: 2px solid #f3c969; outline-offset: 2px; }

/* Task 6 — first-run onboarding empty state, anchored over the globe (self-healing: gone once an album exists) */
.home-onboard {
    position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
    width: min(90vw, 340px); text-align: center; padding: 1.4em 1.5em;
    z-index: 12;   /* above the globe canvas (z-index:10) — the card is meant to sit OVER the globe */
}
.home-onboard__title { font-family: var(--serif); color: var(--gold-bright); font-size: 1.35em; margin: .35em 0 .45em; }
.home-onboard__body { font-family: var(--sans); color: rgba(var(--cream), .82); font-size: .9em; margin: 0 0 1.1em; }
.home-onboard__cta { margin: 0 0 .65em; }
.home-onboard__cta .btn-gold { width: 100%; }
.home-onboard__secondary { font-family: var(--sans); font-size: .82em; color: var(--gold); }
.home-onboard__secondary:hover { color: var(--gold-bright); }