/* Port-only environment replacement guided by the original top-left reference.
   Street instead of a gorge; village at left; moored ship in middle distance.
   Portrait asset matches the iPhone ratio to avoid the old large horizontal crop.
   Actor models, their placement and all game controls remain in their existing layers. */
body[data-view=home] #app#app{background-image:url('/assets/port-composition/harbor-detail-v4.webp');background-position:center center;background-size:cover;background-repeat:no-repeat}
/* Scene hotspots share the exact cover transform of the 851 × 1848 painting,
   so the painted objects remain clickable at both iPhone aspect ratios. */
body[data-view=home] .harbor-interactions,body[data-view=home] .harbor-atmosphere{inset:auto;left:50%;top:50%;width:max(100%,46.0498dvh);height:max(100%,217.1563vw);transform:translate(-50%,-50%)}
body[data-view=home] .harbor-prop-boosters{left:0;top:45%;right:auto;bottom:auto;width:25%;height:20%;transform:none}
body[data-view=home] .harbor-prop-loot{left:70%;top:57%;right:auto;bottom:auto;width:20%;height:9%;transform:none}
body[data-view=home] .harbor-prop-quests{left:85%;top:47%;right:auto;bottom:auto;width:14%;height:10%;transform:none}
body[data-view=home] .harbor-prop-music{left:78%;top:65%;right:auto;bottom:auto;width:21%;height:11%;transform:rotate(2deg)}
body[data-view=home] .harbor-prop:is(.harbor-prop-boosters,.harbor-prop-loot,.harbor-prop-quests) .harbor-prop-art{visibility:hidden}
body[data-view=home] .harbor-prop:is(.harbor-prop-boosters,.harbor-prop-loot,.harbor-prop-quests)::before{display:none}
body[data-view=home] .harbor-prop-label{opacity:0;transition:opacity .12s}
body[data-view=home] .harbor-prop:is(:hover,:focus-visible) .harbor-prop-label{opacity:1}
body[data-view=home] .harbor-prop-quests .harbor-prop-label{opacity:1;left:15%;top:22%;bottom:auto;width:70%;height:57%;transform:none;display:grid;place-items:center;background:#101a25;color:#f5d88b;border:0;border-radius:2px;box-shadow:none;padding:2px;font-size:11px;white-space:normal}
body[data-view=home] .harbor-stock{left:20%;top:60%;width:22%;height:20%}
body[data-view=home] .harbor-stock .real-pack-art.cropped img{position:absolute;width:var(--art-w);height:var(--art-h);left:var(--art-x);top:var(--art-y);object-fit:fill}
body[data-view=home] .harbor-water-light{left:39%;top:47%;width:17%;height:8%;opacity:.28}
body.reduced[data-view=home] .harbor-prop-label{transition:none}
@media(prefers-reduced-motion:reduce){body[data-view=home] .harbor-prop-label{transition:none}}

/* Detail pass: the piano stays a physical object at the right edge, with a
   full-size touch target; its artwork no longer dominates the foreground. */
body[data-view=home] .harbor-prop-music .harbor-prop-art{width:72%;height:72%;margin-left:auto;margin-top:28%}
/* Compact camera: reveal more sky/mast, remove excess foreground pavement.
   Apply the same translation to all scenery-bound interactions. No stretching. */
@media(max-height:710px) and (orientation:portrait){
 body[data-view=home] #app#app{background-position:center 34%}
 body[data-view=home] .harbor-interactions,body[data-view=home] .harbor-atmosphere{top:calc(50% + (217.1563vw - 100dvh)*.16)}
 body[data-view=home] .harbor-prop-music{top:62%;width:17%;height:9%;left:82%}
}