/* Photographic luggage and transparent native controls share one coordinate plane. */
.private-hub.luggage-hub{position:absolute;inset:0;width:auto;display:block;overflow:hidden;pointer-events:none}
.premium-airport>.airport-art-plane,.premium-airport .airport-flight-plane,.luggage-hub .luggage-map{position:absolute;inset:auto;width:max(100vw,150svh);height:max(66.6667vw,100svh);max-width:none;max-height:none;left:50%;top:min(50svh,calc(100svh - 90px - max(28vw,42svh)));transform:translate(-50%,-50%);transform-origin:50% 50%;object-fit:fill;object-position:center;display:block}
/* Each case owns its measured hit region; placement is not tied to a row/order. */
.luggage-choice{position:absolute;left:var(--case-x);top:var(--case-y);width:var(--case-width);height:var(--case-height);display:block;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:12px;background:none;box-shadow:none;pointer-events:none;touch-action:manipulation;color:#fff}
/* Only the hit surface is clipped; the native keyboard focus outline stays visible. */
.luggage-choice::before{content:'';position:absolute;inset:0;pointer-events:auto;clip-path:var(--case-shape,inset(0 round 12px))}
.luggage-choice[data-travel=values]{--case-x:43.5%;--case-y:49%;--case-width:14.5%;--case-height:39%}
.luggage-choice[data-travel=hobbies]{--case-x:59.5%;--case-y:71%;--case-width:22.5%;--case-height:21%;--case-shape:polygon(11.11% 0%,84.44% 7.14%,100% 14.29%,100% 100%,6.67% 90.48%,0% 73.81%,0% 16.67%);z-index:2}
.luggage-choice[data-travel=career]{--case-x:80.5%;--case-y:50%;--case-width:12%;--case-height:30%}
.luggage-choice:focus-visible{outline:2px solid #d2f1ff;outline-offset:5px}
@media(hover:hover){.luggage-choice:hover{outline:1px solid #d2f1ff80;outline-offset:5px}}
/* Labels are printed in the image. Native text also serves as the load-failure
   and high-contrast fallback, without duplicating signs on the normal scene. */
.luggage-label{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);display:block;width:max-content;max-width:100%;padding:10px 16px;border:1px solid #c5e9ff7d;border-radius:4px;background:#05192eee;color:#fff;font-size:18px;font-weight:600;line-height:1.5;text-align:center}
body:has(.premium-airport[data-ready=true]) .luggage-hub .luggage-label{width:1px;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-place=private] .screen-tone{background:linear-gradient(90deg,#021326c9,transparent 46%),linear-gradient(180deg,#03162950,transparent 25%),linear-gradient(0deg,#03162975,transparent 17%)}
body[data-place=private] .scene-copy{max-width:330px;top:18%;left:5vw}
body[data-place=private] .scene-copy h1{font-size:clamp(32px,3vw,46px)}
body[data-place=private] .scene-caption{max-width:260px;font-size:15px;line-height:1.8}
/* The v5 artwork's upper windows only: exclude the gate, steel mullions and
   sloping crossbars. The aircraft is a distant part of the apron view. */
.premium-airport .airport-sky{clip-path:polygon(39% 21%,100% 6%,100% 14%,39% 29%);mask-image:linear-gradient(90deg,transparent 39%,#000 39.2% 55.2%,transparent 55.3% 57.5%,#000 57.6% 85%,transparent 85.1% 87.4%,#000 87.5%);isolation:isolate}
.premium-airport .aircraft-flight{animation-name:haneda-distant-departure;animation-duration:48s;animation-delay:-18s;transform:translate(67%,15%)}
.premium-airport .aircraft-flight img{width:7%;height:auto;filter:saturate(.6) contrast(.84) blur(.2px)}
@keyframes haneda-distant-departure{0%{transform:translate(32%,24%);opacity:0}12%{opacity:.72}85%{opacity:.72}100%{transform:translate(103%,7%);opacity:0}}

@media(max-width:1100px) and (min-width:901px){body[data-place=private] .scene-copy{max-width:290px;left:4vw}}
@media(max-width:900px) and (orientation:portrait){
 /* Contain the whole portrait width so the outer cases remain selectable. */
 .premium-airport::before{content:'';position:absolute;inset:-18px;background:url('assets/haneda-character-staff-mobile-v5.webp') center/cover;filter:blur(15px) brightness(.65)}
 /* Bound the lowest case above the footer, moving artwork and hitmap together. */
 .premium-airport>.airport-art-plane,.premium-airport .airport-flight-plane,.luggage-hub .luggage-map{width:100vw;height:175vw;left:50%;top:min(50svh,calc(100svh - 154px - 67vw));transform:translate(-50%,-50%)}
 .premium-airport>.airport-art-plane{mask-image:linear-gradient(transparent,#000 7%,#000 91%,transparent)}
 .luggage-choice[data-travel=values]{--case-x:6.5%;--case-y:52.5%;--case-width:30%;--case-height:32%}
 .luggage-choice[data-travel=hobbies]{--case-x:36.5%;--case-y:69.5%;--case-width:46%;--case-height:18.5%;--case-shape:polygon(11.96% 2.7%,65.22% 4.32%,89.13% 11.89%,100% 23.24%,100% 83.78%,87.61% 94.59%,77.17% 100%,3.26% 78.38%,0% 24.32%)}
 .luggage-choice[data-travel=career]{--case-x:67.5%;--case-y:54.5%;--case-width:26%;--case-height:24.5%;--case-shape:polygon(0% 0%,100% 0%,100% 100%,59.62% 100%,59.62% 75.51%,50.77% 68.57%,28.08% 66.53%,0% 65.31%)}
 .luggage-label{padding:8px;font-size:16px}
 body[data-place=private] .screen-tone{background:linear-gradient(#031427a6,transparent 36%,transparent 82%,#03142766)}
 body[data-place=private] .scene-copy{top:94px;left:22px;right:22px;max-width:none}
 body[data-place=private] .scene-copy h1{font-size:32px}body[data-place=private] .scene-copy h1 br{display:none}body[data-place=private] .scene-copy h1 em{margin-left:.1em}
 body[data-place=private] .scene-caption{display:block;font-size:14px;max-width:none;margin-top:12px}
 .premium-airport .airport-sky{clip-path:polygon(9% 28.2%,97.4% 28.2%,97.4% 36.7%,9% 36.7%);mask-image:linear-gradient(90deg,transparent 9%,#000 9.2% 32.9%,transparent 33% 34.6%,#000 34.7% 67.1%,transparent 67.2% 68.7%,#000 68.8% 97.4%)}
 .premium-airport .aircraft-flight{animation-name:haneda-departure-portrait;animation-delay:-15s}.premium-airport .aircraft-flight img{width:12%}
}
@keyframes haneda-departure-portrait{0%{transform:translate(-13%,32%);opacity:0}12%{opacity:.72}85%{opacity:.72}100%{transform:translate(101%,29%);opacity:0}}
@media(max-width:600px) and (orientation:portrait){body[data-place=private] .scene-copy h1{font-size:clamp(23px,6.5vw,29px)}}
@media(max-width:600px) and (orientation:portrait) and (max-height:740px){
 body[data-place=private] .scene-copy{top:87px}
 body[data-place=private] .scene-footer{bottom:94px}
}
@media(max-width:900px) and (orientation:landscape){
 /* The taller luggage silhouettes stay above the fixed mobile navigation. */
 .premium-airport>.airport-art-plane,.premium-airport .airport-flight-plane,.luggage-hub .luggage-map{top:min(12svh,calc(100svh - 140px - 29vw))}
 body[data-place=private] .scene-copy{top:81px;left:24px;max-width:250px}
 body[data-place=private] .scene-copy h1{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.premium-airport .aircraft-flight{animation:none;transform:translate(68%,15%);opacity:.72}}
@media(prefers-reduced-motion:reduce) and (max-width:900px) and (orientation:portrait){.premium-airport .aircraft-flight{transform:translate(48%,31%)}}
@media(forced-colors:active){
 .luggage-choice{border:1px solid ButtonText}.luggage-choice:focus-visible{outline-color:Highlight}
 body:has(.premium-airport[data-ready=true]) .luggage-hub .luggage-label,.luggage-label{width:max-content;height:auto;max-width:100%;margin:0;padding:8px;border:1px solid ButtonText;overflow:visible;clip-path:none;white-space:normal;background:Canvas;color:CanvasText}
}