/* Approved eight-island atoll. Functional controls remain separate from the art. */
.shell:has(.atoll-map){height:100dvh;min-height:0;overflow:hidden}
.menu:has(.atoll-map){height:100dvh;min-height:0;padding:0;overflow:hidden}
.menu:has(.atoll-map)>.menu-top{display:none}
#page.page-worlds:has(.atoll-map){position:absolute;inset:0;height:100%;padding:0;background:#c6e8f6;overflow:hidden}
.atoll-map{width:100%;height:100%;display:grid;place-items:center;background:#c6e8f6 url('/worlds-atoll.webp?v=dee8a11bc352e44b') center/cover no-repeat;isolation:isolate}
.atoll-stage{position:relative;width:min(100vw,177.6833dvh);aspect-ratio:1672/941;container-type:inline-size;flex:none;isolation:isolate}
.atoll-art{display:block;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.atoll-toolbar{position:absolute;inset:2.7% 1.5% auto;display:flex;justify-content:space-between;align-items:start;gap:12px;z-index:3}
.atoll-toolbar h1{position:absolute;left:50%;top:-.7cqw;transform:translateX(-50%);margin:0;border:2px solid #efffff;border-radius:4cqw;background:linear-gradient(#39d4ee,#079eca);color:#fff;font-size:clamp(19px,2.15cqw,36px);line-height:1.35;text-shadow:0 2px 2px #0b759e;width:24%;text-align:center;padding:.4cqw 1cqw;box-shadow:inset 0 0 0 2px #a7f4ff,0 3px 0 #0e97b8}
.atoll-account{display:flex;gap:.8cqw}.atoll-top-button{display:flex;align-items:center;justify-content:center;gap:.6cqw;padding:.7cqw 1.2cqw;background:linear-gradient(#4cdeef,#00a1c8);border:2px solid #fff;border-radius:1.5cqw;color:#fff;font:inherit;font-size:clamp(12px,1.1cqw,19px);font-weight:800;text-decoration:none;box-shadow:0 3px 0 #077f9a,inset 0 0 0 1px #a8f4ff;min-height:42px;white-space:nowrap}
.atoll-top-button svg{width:1.5em;height:1.5em}.atoll-store{margin-inline-start:auto}
.atoll-islands{position:absolute;inset:0;pointer-events:none}
.atoll-island{position:absolute;left:var(--map-x);top:var(--map-y);transform:translate(-50%,-2%);width:max-content;max-width:18%;display:flex;flex-direction:column;align-items:center;gap:.12cqw;background:none;border:0;padding:0;color:white;pointer-events:auto;font:inherit;cursor:pointer;opacity:1;transition:filter .15s;touch-action:manipulation}
.atoll-number{display:grid;place-items:center;width:3.3cqw;height:3.3cqw;min-width:34px;min-height:34px;margin-top:-1.65cqw;border-radius:50%;border:.2cqw solid #fff;background:#173952;color:#fff;font-size:clamp(23px,2.45cqw,42px);font-weight:900;line-height:1;box-shadow:0 2px 5px #15394770;direction:ltr}
.atoll-name{padding:.3cqw 1.3cqw;min-width:5.5cqw;max-width:100%;border:.15cqw solid #f5fcff;border-radius:2cqw;background:#677f8a;color:white;font-weight:800;font-size:clamp(12px,1.3cqw,22px);line-height:1.25;white-space:nowrap;box-shadow:0 3px 1px #3e6278,0 1px 7px #173d5650}
.atoll-island.is-owned .atoll-name{background:linear-gradient(#40d6e9,#03a8cd);box-shadow:0 0 0 .13cqw #a3fcff,0 0 1cqw #63efff}
.atoll-island.is-current .atoll-number{background:#039bc2;box-shadow:0 0 1cqw #35e6ff}
.atoll-purchase{margin-top:.35cqw;display:flex;align-items:center;justify-content:center;gap:.8cqw;min-width:7.4cqw;padding:.35cqw .7cqw;border:2px solid #efffff;border-radius:2cqw;background:linear-gradient(#3ed8ed,#04a5d2);font-size:clamp(12px,1.1cqw,19px);line-height:1.1;box-shadow:0 2px 3px #315b77}.atoll-purchase svg{width:1em;height:1em}
.atoll-island:hover{filter:brightness(1.13)}.atoll-island:focus-visible,.atoll-top-button:focus-visible{outline:3px solid #ffca62;outline-offset:6px}
.menu:has(.atoll-map) #nav{position:absolute;left:50%;right:auto;bottom:1.7dvh;transform:translateX(-50%);width:67%;max-width:1120px;height:auto;display:flex;gap:.7vw;padding:0;margin:0;background:none!important;border:0;box-shadow:none;backdrop-filter:none!important;z-index:5;border-radius:0}
.menu:has(.atoll-map) #nav::before,.menu:has(.atoll-map) #nav::after{display:none}
.menu:has(.atoll-map) #nav button{position:relative;flex:1;min-width:0;min-height:4vw;height:4vw;max-height:72px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.7vw;padding:8px 10px;border:2px solid #fff;border-radius:1.25vw;background:linear-gradient(#ecfeff,#c5f0fa);color:#0f5b7b;box-shadow:inset 0 0 0 1px #43cce8,0 3px 0 #078da9;transform:none;font-size:clamp(13px,.97vw,17px);font-weight:800}
.menu:has(.atoll-map) #nav button.active{background:linear-gradient(#38d4eb,#00a3ca);color:#fff}
.menu:has(.atoll-map) #nav button svg,.menu:has(.atoll-map) #nav button img{width:1.6em;height:1.6em;flex-shrink:0}
.nav button{position:relative}.season-nav-icon{width:28px;height:28px;object-fit:contain}.nav .season-ready{position:absolute;right:12%;top:12%;width:9px;height:9px;border-radius:50%;background:#e5a929;box-shadow:0 0 0 2px #fff}
@media(orientation:portrait){
 .atoll-map{background:#c9e8f6}.atoll-stage{width:100vw}.atoll-toolbar{top:-42%;left:3%;right:3%;flex-wrap:wrap}.atoll-toolbar h1{top:75px;width:65%;border-radius:25px;font-size:23px;padding:7px}.atoll-top-button{padding:8px 10px;border-radius:13px;font-size:12px}.atoll-account{gap:6px}.atoll-top-button svg{width:18px;height:18px}
 .atoll-island{max-width:28%}.atoll-number{width:30px;height:30px;min-width:30px;min-height:30px;margin-top:-15px;font-size:21px;border-width:2px}.atoll-name{font-size:12px;padding:4px 8px;border-width:1px;border-radius:13px}.atoll-purchase{font-size:12px;padding:5px 10px;border-radius:15px}
 .menu:has(.atoll-map) #nav{width:94%;bottom:max(16px,env(safe-area-inset-bottom));gap:6px;flex-wrap:wrap}.menu:has(.atoll-map) #nav button{flex:1 0 28%;height:48px;min-height:48px;border-radius:13px;font-size:14px}
}
@media(max-height:520px) and (orientation:landscape){.atoll-top-button{min-height:30px;padding:4px 9px;font-size:12px}.menu:has(.atoll-map) #nav{width:75%;bottom:2%}.menu:has(.atoll-map) #nav button{min-height:35px;padding:4px 6px;font-size:12px}.atoll-toolbar h1{font-size:20px}.atoll-number{min-width:28px;min-height:28px;font-size:21px}.atoll-name{font-size:12px}}
/* Fill the viewport with one continuous scene, with no repeated background bands. */
.atoll-map{background:#c6e8f6}
.atoll-stage{width:100%;height:100%;aspect-ratio:auto}
@media(orientation:portrait){.atoll-stage{width:100vw;height:auto;aspect-ratio:1672/941}}
@media(orientation:portrait){
 .atoll-stage{height:75vw;aspect-ratio:4/3}
 .atoll-toolbar{top:-110px}
 .atoll-toolbar h1{top:58px}
 .atoll-name{font-size:14px}
 .menu:has(.atoll-map) .floating-cart{bottom:132px}
}