html body #app.archipelago-shell>.device-install-tip{display:none!important}
html body #app.archipelago-shell .device-content{overflow:hidden!important}
.archipelago-home{width:100%;min-width:0;padding:0 4px;margin:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}
html body #app .archipelago-home .wm-title{align-self:flex-start;margin:0 0 8px!important;font-size:20px!important;line-height:1.4!important;padding:0!important;border:0!important}
.world-map{--map-ratio:1672/941;position:relative;isolation:isolate;flex:none;width:100%;aspect-ratio:var(--map-ratio);max-width:100%;margin:0 auto;border:1px solid #83bfd1;border-radius:12px;overflow:hidden;background:linear-gradient(#56a8e7,#087ab0);box-shadow:0 8px 24px #03162655;box-sizing:border-box}
.wm-background,.wm-background>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;pointer-events:none;user-select:none}.wm-background{z-index:0}
html body #app .world-map .wm-destination{position:absolute;z-index:5;left:var(--wide-x);top:var(--wide-y);transform:translate(-50%,-50%);width:clamp(98px,13vw,160px);min-height:44px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:5px 10px;margin:0;text-align:center;text-decoration:none!important;background:linear-gradient(#62472b,var(--plate,#352719))!important;border:3px double #d9b980!important;border-radius:7px!important;box-shadow:0 3px 0 #291c12,0 5px 10px #001c3b77!important;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%)!important;color:#fff7dd!important;line-height:1.2;font-family:inherit;cursor:pointer;transition:transform .2s ease,filter .2s ease!important;overflow:visible!important}
html body #app .world-map .wm-destination strong{font-size:clamp(13px,1.6vw,20px)!important;line-height:1.25!important;white-space:nowrap;color:inherit!important;text-shadow:1px 2px 1px #170c09;font-weight:900}
html body #app .world-map .wm-destination small{font-size:10px;line-height:1.1;color:#ebd6a0!important;white-space:nowrap}
html body #app .world-map .wm-destination:focus-visible{outline:3px solid #bce8ff!important;outline-offset:4px;filter:brightness(1.25)}
html body #app .world-map .wm-ice{--plate:#5a2422;color:#ffdfd9!important}
html body #app .world-map .wm-rainbow{--plate:#174b30;opacity:1!important;color:#edfff1!important;cursor:pointer}
html body #app .world-map .wm-hall{--plate:#544016}
.wm-roamer{position:absolute;z-index:3;left:var(--wide-x);top:var(--wide-y);width:clamp(40px,8%,100px);aspect-ratio:1;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 3px 2px #16404b44);contain:layout style}
.wm-roamer-facing,.wm-roamer-sprite{display:block;width:100%;height:100%}.wm-roamer-sprite{background-image:url('world-map-roamers-v1.png');background-size:400% 400%;background-repeat:no-repeat}
.wm-water-glint{position:absolute;z-index:1;left:40%;top:40%;width:22%;height:9%;pointer-events:none;background:repeating-linear-gradient(165deg,transparent 0 10px,#b8faff 12px,transparent 14px 24px);opacity:.1;mask-image:radial-gradient(ellipse,#000,transparent 70%);mix-blend-mode:screen}
.wm-cloud-belt{position:absolute;z-index:1;left:3%;top:4%;width:27%;height:9%;pointer-events:none;opacity:.1;background:radial-gradient(ellipse,#fff 10%,transparent 70%);filter:blur(5px)}
.wm-asset-status:empty{display:none}.wm-asset-status{font-size:13px}
@media(hover:hover) and (pointer:fine){html body #app .world-map .wm-destination:not(:disabled):hover{filter:brightness(1.18)}}
@media(max-width:700px){.world-map{--map-ratio:1;border-radius:9px}.archipelago-home{padding:0 2px}html body #app .archipelago-home .wm-title{font-size:18px!important;margin-bottom:6px!important}html body #app .world-map .wm-destination{left:var(--mobile-x);top:var(--mobile-y);width:clamp(92px,31vw,120px);padding:4px 7px;min-height:44px}html body #app .world-map .wm-destination strong{font-size:14px!important}.wm-roamer{left:var(--mobile-x);top:var(--mobile-y);width:14%;min-width:32px;max-width:64px}.wm-water-glint{left:32%;top:31%;width:35%;height:5%}}
@media(prefers-reduced-motion:reduce){html body #app .world-map .wm-destination{transition:none!important}}
.world-map{container-type:inline-size}
html body #app .world-map .wm-destination{width:clamp(92px,19%,160px)}
html body #app .world-map .wm-destination strong{font-size:clamp(12px,2cqw,20px)!important}
@media(max-width:700px){html body #app .world-map .wm-destination{width:clamp(92px,36%,120px)}html body #app .world-map .wm-destination strong{font-size:14px!important}}

html body #app .world-map .wm-ice strong{color:#ff8c85!important}
html body #app .world-map .wm-rainbow strong{color:#a8efb4!important}

/* Each painted coastline is a concave, source-pixel traced layer and hit target. */
.wm-clip-defs{position:absolute;width:0;height:0;pointer-events:none}
.wm-island-group,.wm-terrain-land,.wm-terrain-picture,.wm-terrain-picture>img,.wm-terrain-actors,.wm-terrain-target{position:absolute;inset:0;display:block}
.wm-island-group{z-index:2;pointer-events:none;transition:transform .24s ease,filter .24s ease}
.wm-terrain-picture>img{width:100%;height:100%;object-fit:fill;user-select:none}
.wm-terrain-target{z-index:4;cursor:pointer;background:transparent}
.wm-terrain-target.wm-preparing{cursor:default}
/* Very short windows keep readable targets; scroll inside the existing device instead of clipping islands. */
html body #app.archipelago-shell.wm-map-scroll .device-content{overflow-y:auto!important;overflow-x:hidden!important}

.world-map:has(.wm-hall:focus-visible) .wm-island-hall{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}
@media(hover:hover) and (pointer:fine){.world-map:not(:has(.wm-destination:focus-visible)):has(.wm-target-hall:hover,.wm-hall:hover) .wm-island-hall{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}}
.world-map:has(.wm-ice:focus-visible) .wm-island-ice{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}
@media(hover:hover) and (pointer:fine){.world-map:not(:has(.wm-destination:focus-visible)):has(.wm-target-ice:hover,.wm-ice:hover) .wm-island-ice{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}}
.world-map:has(.wm-history:focus-visible) .wm-island-history{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}
@media(hover:hover) and (pointer:fine){.world-map:not(:has(.wm-destination:focus-visible)):has(.wm-target-history:hover,.wm-history:hover) .wm-island-history{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}}
.world-map:has(.wm-toeic:focus-visible) .wm-island-toeic{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}
@media(hover:hover) and (pointer:fine){.world-map:not(:has(.wm-destination:focus-visible)):has(.wm-target-toeic:hover,.wm-toeic:hover) .wm-island-toeic{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}}
.world-map:has(.wm-rainbow:focus-visible) .wm-island-rainbow{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}
@media(hover:hover) and (pointer:fine){.world-map:not(:has(.wm-destination:focus-visible)):has(.wm-target-rainbow:hover,.wm-rainbow:hover) .wm-island-rainbow{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}}
.world-map:has(.wm-inquiry:focus-visible) .wm-island-inquiry{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}
@media(hover:hover) and (pointer:fine){.world-map:not(:has(.wm-destination:focus-visible)):has(.wm-target-inquiry:hover,.wm-inquiry:hover) .wm-island-inquiry{transform:translateY(-1%) scale(1.045);filter:brightness(1.07)}}
@media(prefers-reduced-motion:reduce){.world-map .wm-island-group{transform:none!important;transition:none!important}}

/* Full native map width, never shrink the artwork to compensate for chrome. */
html body #app.archipelago-shell{height:auto!important;max-height:calc(var(--study-viewport-height,100dvh) - var(--study-footer-height,80px) - 12px);padding-bottom:8px!important}
html body #app.archipelago-shell>.device-content{flex:0 1 auto;padding:0!important;overflow-y:auto!important}
html body #app.archipelago-shell .archipelago-home{padding:0}
html body #app.archipelago-shell .wm-title{position:absolute;width:1px;height:1px;padding:0!important;margin:-1px!important;clip-path:inset(50%);overflow:hidden}
html body #app.archipelago-shell #homeBrand{display:none!important}
html body #app.archipelago-shell>.topline{grid-template-columns:minmax(0,1fr)}
html body #app .world-map .wm-destination{width:max-content!important;max-width:43%;min-height:44px;padding:4px 8px;border-width:1px!important;border-radius:4px!important;clip-path:none!important;box-shadow:0 2px 5px #001c3b77!important}
@media(min-width:701px) and (hover:hover) and (pointer:fine){html body #app.archipelago-shell{max-height:calc(var(--study-viewport-height,100dvh) - 16px)}}
@media(max-width:700px){html body #app.archipelago-shell{width:100%!important;max-width:none!important;margin:0!important;padding:calc(6px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 4px max(8px,env(safe-area-inset-left,0px))!important;border-width:3px!important;border-top-width:7px!important;border-radius:26px!important}}
/* Overview shares the same single global bar as every island. */
html body #app.archipelago-shell{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,auto)}
html body #app.archipelago-shell>.device-content{grid-column:1;grid-row:2}
@media(max-width:700px){html body:has(#app.archipelago-shell) .world-global-nav{position:relative!important;inset:auto!important;margin-top:8px!important}}

/* On a tall phone, distribute intact native-scale islands through the available sea. */
/* The tall layout keeps the original island pixels over an edited sea-only
   derivative. Cover is proportional: no repeated/mirrored coast fragments and
   no vertical stretching of the original main islands. Original PNGs stay intact. */
html body #app .world-map.wm-portrait-fill{aspect-ratio:auto;background:#168dd0 url('world-map-portrait-sea-v1.png') center top / cover no-repeat!important}
/* A stationary native scene paints the original picture exactly once. Painting
   its clipped copy again can darken antialiased coastline pixels. The layers
   remain registered for native hover lifts, mobile relocation and click masks. */
.world-map:not(.wm-portrait-fill) .wm-terrain-land{visibility:hidden}

/* Native interaction never inverse-clips the baked original coastline. */

html body #app .world-map.wm-portrait-fill>.wm-background{visibility:hidden}
html body #app .world-map.wm-portrait-fill .wm-island-group,html body #app .world-map.wm-portrait-fill .wm-terrain-target{bottom:auto}
@media(max-width:1000px) and (pointer:coarse){
 html body.study-global-footer:has(#app.archipelago-shell){height:var(--study-viewport-height,100dvh)!important}
 html body #app.archipelago-shell{height:calc(var(--study-viewport-height,100dvh) - var(--study-footer-height,56px))!important;max-height:none!important;margin:0!important;min-height:0!important;border-radius:24px 24px 0 0!important;border-bottom:0!important;padding:calc(6px + var(--world-safe-top,env(safe-area-inset-top,0px))) max(8px,var(--world-safe-right,env(safe-area-inset-right,0px))) 4px max(8px,var(--world-safe-left,env(safe-area-inset-left,0px)))!important;grid-template-rows:auto minmax(0,1fr)}
 html body #app.archipelago-shell>.device-content{min-height:0;overflow:auto!important}
 html body #app.archipelago-shell .archipelago-home{height:100%;align-items:stretch}
 html body:has(#app.archipelago-shell) .world-global-nav{position:absolute!important;inset:auto 0 0!important;margin:0!important;box-sizing:border-box;border:3px solid var(--device-shell)!important;border-top:1px solid var(--device-shadow)!important;border-radius:0 0 22px 22px!important;padding:4px max(6px,var(--world-safe-right,env(safe-area-inset-right,0px))) calc(4px + var(--world-safe-bottom,env(safe-area-inset-bottom,0px))) max(6px,var(--world-safe-left,env(safe-area-inset-left,0px)))!important;gap:5px!important;box-shadow:inset 0 1px 0 #fff3!important}
 html body:has(#app.archipelago-shell) .world-global-nav a{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px!important;min-height:44px!important;padding:4px 6px!important;border-radius:6px!important}
 html body:has(#app.archipelago-shell) .world-global-nav a>span:first-child{font-size:19px!important;line-height:1!important}
 html body:has(#app.archipelago-shell) .world-global-nav a>span:last-child{font-size:13px!important;line-height:1.2!important}
 html body #app .world-map .wm-destination{min-height:32px;padding:3px 7px}
 html body #app .world-map .wm-destination::before{content:'';position:absolute;inset:-6px 0;pointer-events:auto}
 html body #app .world-map .wm-destination strong{font-size:12px!important}
}

/* The baked native picture stays intact during interaction too. Moving a
   clipped duplicate reveals a black inverse-mask gap below the coastline.
   Keep native terrain stationary; the existing plaques, focus ring, click
   contours and independently animated Digimon still provide feedback. */
.world-map:not(.wm-portrait-fill) .wm-island-group{transform:none!important;filter:none!important}