/* Etape E: Port only. The other seventeen screens keep their accepted layout. */
body[data-view=home] #app .home-air{isolation:isolate}
body[data-view=home] .harbor-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
body[data-view=home] .harbor-water-light{position:absolute;left:35%;top:42%;width:30%;height:16%;overflow:hidden;opacity:.45;transform:rotate(-5deg);mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.harbor-water-light i{position:absolute;left:10%;top:15%;width:65%;height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,#d3faff,transparent);box-shadow:0 8px #c6f1ff66,13px 17px #efffff44;animation:harbor-sun-flecks 5s ease-in-out infinite}
.harbor-water-light i:nth-child(2){top:40%;left:22%;animation-delay:-2s;transform:scaleX(.7)}.harbor-water-light i:nth-child(3){top:72%;left:2%;animation-delay:-3s;transform:scaleX(.8)}.harbor-water-light i:nth-child(4){top:87%;left:31%;animation-delay:-1s;transform:scaleX(.6)}
@keyframes harbor-sun-flecks{0%,100%{opacity:.15;translate:0 -2px}50%{opacity:.9;translate:4px 2px}}
body[data-view=home] .harbor-cloud-shadow{position:absolute;left:-35%;bottom:24%;width:130%;height:35%;background:linear-gradient(110deg,transparent 25%,#20415418 35%,transparent 45%,#fff4cb13 62%,transparent 74%);animation:harbor-cloud-passage 38s ease-in-out infinite alternate;mix-blend-mode:multiply;filter:blur(8px)}
@keyframes harbor-cloud-passage{to{transform:translateX(24%)}}
body[data-view=home] .harbor-saved-pennant{position:absolute;right:23%;top:29%;width:44px;height:34px;transform:rotate(-8deg);filter:drop-shadow(2px 3px 2px #12384c66)}
.harbor-saved-pennant>svg{position:absolute;width:43px;height:29px;left:3px;top:0;transform-origin:0 50%;animation:harbor-emblem-wind 4.2s ease-in-out infinite;clip-path:polygon(0 0,100% 6%,90% 50%,100% 97%,0 100%)}
.harbor-saved-pennant>span{position:absolute;width:3px;height:58px;top:-5px;left:0;background:linear-gradient(90deg,#715133,#c09b65,#694429);box-shadow:1px 1px 1px #18364b99}
@keyframes harbor-emblem-wind{0%,100%{transform:perspective(100px) rotateY(-8deg) skewY(2deg)}50%{transform:perspective(100px) rotateY(14deg) skewY(-3deg)}}
body[data-view=home] .harbor-villagers{position:absolute;left:5%;bottom:43%;width:103px;height:107px;filter:drop-shadow(1px 3px 1px #49341777);pointer-events:none}
.harbor-villagers img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
body[data-view=home] .harbor-lantern-light{position:absolute;right:2%;bottom:28%;width:28px;height:34px;pointer-events:none;background:radial-gradient(ellipse,#ffe4a62e,transparent 67%);animation:harbor-lamp-glow 6s ease-in-out infinite alternate}
@keyframes harbor-lamp-glow{to{opacity:.3;transform:scale(.8)}}
body[data-view=home] .harbor-interactions{position:absolute;inset:0;z-index:5;pointer-events:none}
body[data-view=home] .harbor-prop{position:absolute;display:block;min-width:44px;min-height:44px;border:0;border-radius:8px;padding:0;background:none;color:#fff5d7;pointer-events:auto;overflow:visible;isolation:isolate;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:filter .16s,transform .16s}
body[data-view=home] .harbor-prop::before{content:'';position:absolute;left:16%;right:12%;bottom:5%;height:9%;background:radial-gradient(ellipse,#2e2b1f91,transparent 70%);transform:rotate(-5deg);z-index:-1}
body[data-view=home] .harbor-prop-art{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;filter:drop-shadow(1px 2px 1px #46321b4d);pointer-events:none}
body[data-view=home] .harbor-prop-boosters{left:-3%;bottom:32%;width:126px;height:157px;transform:rotate(-1deg)}
body[data-view=home] .harbor-prop-music{right:7%;bottom:39%;width:93px;height:96px;transform:rotate(2deg)}
body[data-view=home] .harbor-prop-quests{left:2%;bottom:22%;width:74px;height:103px;transform:rotate(-3deg)}
body[data-view=home] .harbor-prop-loot{right:1%;bottom:22%;width:98px;height:91px;transform:rotate(2deg)}
body[data-view=home] .harbor-prop-label{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);display:block;max-width:130%;width:max-content;padding:3px 7px;border-radius:3px;background:linear-gradient(#f4e1b8ef,#c5a46bd9);border:1px solid #8b653d;color:#3f2b18;box-shadow:0 2px 3px #2c3b3b44;font:600 11px/1.2 'Carto Condensed',sans-serif;white-space:nowrap;pointer-events:none}
body[data-view=home] .harbor-prop-boosters .harbor-prop-label{left:57%;bottom:-2px}
body[data-view=home] .harbor-stock{position:absolute;left:41%;top:48%;width:24%;height:27%;pointer-events:none;filter:drop-shadow(0 2px 1px #39281588);transform:rotate(-3deg)}
.harbor-stock .real-pack-art{display:block;width:100%;height:100%;min-height:0;background:transparent;border:0;padding:0;overflow:hidden;box-shadow:none;border-radius:0}
.harbor-stock .real-pack-art img{width:100%;height:100%;object-fit:contain;position:static;display:block}
.harbor-stock .pack-art-fallback{display:none}
body[data-view=home] .harbor-touch-glint{position:absolute;right:9%;top:20%;height:7px;width:7px;pointer-events:none;border-radius:50%;background:#fff8d5;box-shadow:0 0 5px #fff9db,0 0 11px 2px #ffe6a777;animation:harbor-touch-hint 5s ease-in-out infinite}
.harbor-prop-music .harbor-touch-glint{animation-delay:-1s}.harbor-prop-quests .harbor-touch-glint{animation-delay:-2s}.harbor-prop-loot .harbor-touch-glint{animation-delay:-3s}
@keyframes harbor-touch-hint{0%,65%,100%{opacity:.2;scale:.7}80%{opacity:.95;scale:1.1}}
body[data-view=home] .harbor-prop:active{transform:translateY(2px);filter:brightness(1.09)}
body[data-view=home] .harbor-prop:focus-visible{outline:2px solid #e7fcff;outline-offset:3px;filter:drop-shadow(0 0 6px #b7e9ff)}
/* Match the small full-body figure on the quay, without replacing the saved avatar. */
body[data-view=home] #app>.home.layout .home-air>.port-pirate{width:128px;height:168px;left:calc(50% - 57px);bottom:calc(163px + env(safe-area-inset-bottom,0px));z-index:4;filter:drop-shadow(2px 4px 1px #69451f66)}
body[data-view=home] #app .port-pirate::after{left:27%;right:18%;bottom:4%;height:5%;background:radial-gradient(ellipse,#403122aa,transparent 75%);transform:scaleX(1.3)}
body[data-view=home] .port-companion{left:23%;bottom:calc(246px + env(safe-area-inset-bottom,0px));width:70px;height:98px;z-index:3;filter:drop-shadow(2px 3px 1px #69451f66)}
body[data-view=home] .port-companion-name{font-size:9px;padding:2px 4px;max-width:100px;background:#123044bb;box-shadow:0 1px 3px #1b2c3255}
body[data-view=home] #app .port-destination{bottom:calc(78px + env(safe-area-inset-bottom,0px));min-height:58px;padding:6px 9px;border-radius:7px;background:linear-gradient(110deg,#133951e8,#06263de8);box-shadow:inset 0 0 0 2px #e3c07844,inset 0 1px #fff5,0 4px 7px #26404766}
body[data-view=home] #app .port-destination strong{font:600 21px 'Carto Condensed',sans-serif}.port-destination em{font-size:10px}
body[data-view=home] #app .home-caption{display:none}
body[data-view=home] #app .home-profile{padding:5px 7px;max-width:52%;border-radius:6px;background:linear-gradient(#103d59ed,#082c46e8);box-shadow:inset 0 0 0 2px #ae8d5140,0 2px 6px #16354b55}
body[data-view=home] #app .home-profile strong{font:600 16px 'Carto Condensed',sans-serif}.home-profile small{font-size:10px}
@media(max-height:710px){body[data-view=home] #app>.home.layout .home-air>.port-pirate{width:116px;height:150px;bottom:calc(157px + env(safe-area-inset-bottom,0px))}body[data-view=home] .port-companion{width:61px;height:85px;bottom:calc(236px + env(safe-area-inset-bottom,0px));left:24%}body[data-view=home] .harbor-prop-boosters{width:111px;height:137px;bottom:31%;left:-2%}body[data-view=home] .harbor-prop-music{width:82px;height:87px;right:8%;bottom:39%}body[data-view=home] .harbor-prop-quests{width:68px;height:91px;bottom:23%}body[data-view=home] .harbor-prop-loot{width:86px;height:78px;bottom:23%}body[data-view=home] .harbor-villagers{width:85px;height:90px;left:7%;bottom:44%}body[data-view=home] .harbor-prop-label{font-size:10px}body[data-view=home] .harbor-saved-pennant{top:28%;right:21%;width:35px}}
@media(prefers-reduced-motion:reduce){body[data-view=home] .harbor-atmosphere *,body[data-view=home] .harbor-touch-glint{animation:none!important}body[data-view=home] .harbor-prop{transition:none}}
body.reduced[data-view=home] .harbor-atmosphere *,body.reduced[data-view=home] .harbor-touch-glint{animation:none!important}
/* Second visual pass: the supporting villagers stand behind the quay's actors,
   while the saved pennant belongs to a small mooring pole, not the painted sail. */
body[data-view=home] .harbor-villagers{left:33%;bottom:43%;width:94px;height:92px}
body[data-view=home] .harbor-saved-pennant{right:5%;top:auto;bottom:32%;width:30px;height:24px;transform:rotate(-5deg)}
body[data-view=home] .harbor-saved-pennant>svg{width:29px;height:20px}
body[data-view=home] .harbor-saved-pennant>span{height:48px;width:2px}
body[data-view=home] .harbor-prop-boosters::after{content:'';position:absolute;left:12%;top:41%;width:14%;height:19%;background:radial-gradient(ellipse,#fff0ae55,transparent 68%);pointer-events:none;animation:harbor-lamp-glow 4s ease-in-out infinite alternate}
@media(max-height:710px){body[data-view=home] .harbor-villagers{left:32%;bottom:44%;width:80px;height:79px}}
@media(prefers-reduced-motion:reduce){body[data-view=home] .harbor-prop-boosters::after{animation:none}}
body.reduced[data-view=home] .harbor-prop-boosters::after{animation:none}
body[data-view=home] .harbor-villagers{left:35%;bottom:36%;width:88px;height:83px}
@media(max-height:710px){body[data-view=home] .harbor-villagers{left:35%;bottom:36%;width:77px;height:73px}}
/* Keep the playable companion beside the captain and leave the market customers visible. */
body[data-view=home] .harbor-villagers{left:21%;bottom:36%;width:88px;height:83px}
body[data-view=home] .port-companion{left:61%;bottom:calc(205px + env(safe-area-inset-bottom,0px))}
body[data-view=home] .port-companion-name{opacity:0;transition:opacity .15s}
body[data-view=home] .port-companion:is(:hover,:focus-visible) .port-companion-name{opacity:1}
@media(max-height:710px){body[data-view=home] .harbor-villagers{left:21%;bottom:36%;width:77px;height:73px}body[data-view=home] .port-companion{left:61%;bottom:calc(194px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){body[data-view=home] .port-companion-name{transition:none}}
body.reduced[data-view=home] .port-companion-name{transition:none}
/* The old full-screen layer disabled pointer input on the avatar container. */
body[data-view=home] #app>.home.layout .home-air>.port-pirate{pointer-events:auto;touch-action:manipulation;cursor:pointer}
body[data-view=home] #app .port-pirate canvas{pointer-events:none}
body[data-view=home] #app .port-pirate:focus-visible{outline:2px solid #e6faff;outline-offset:1px;border-radius:35%}