/* The island chooser mirrors the app's intro: a large island over the wordmark, round side arrows, dots and a caption. */
.island-explorer{--control:#29383fcc;--control-hover:#3b4d55;position:relative;z-index:1;width:100%;flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--title-size) * -.42)}
.island-stage{position:relative;width:100%;flex:1 1 0;min-height:240px;container-type:size;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.island-stage .island{--u:min(calc(100cqh / 286), calc((100cqw - 176px) / 420), 3.2px);width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));max-width:none;object-fit:contain;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 18px 34px #0000004d)}
.island-explorer .island-arrow{position:absolute;top:50%;z-index:2;width:clamp(44px,3.9vw,56px);height:clamp(44px,3.9vw,56px);min-height:0;padding:0;border:1px solid #ffffff14;border-radius:50%;background:var(--control);color:var(--ink);display:flex;align-items:center;justify-content:center;transform:translateY(-50%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .16s ease-out,transform .16s ease-out}
.island-explorer .island-arrow:hover{background:var(--control-hover)}
.island-explorer .island-arrow:active{transform:translateY(-50%) scale(.94)}
.island-arrow.previous{left:max(0px,calc(50% - min(36vw,540px)))}
.island-arrow.next{right:max(0px,calc(50% - min(36vw,540px)))}
.island-arrow svg{width:22px;height:22px}
.island-selection{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-4px;padding-bottom:6px;text-align:center}
.landscapes{display:flex;align-items:center;height:24px}
.landscapes .landscape{position:relative;width:16px;height:24px;min-height:0;padding:0;border:0;border-radius:6px;background:transparent}
.landscapes .landscape::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:4px;background:#697980;transform:translate(-50%,-50%);transition:width .2s ease-out,background .2s}
.landscapes .landscape.selected::after{width:12px;background:var(--accent)}
.landscapes .landscape:hover:not(:disabled){background:transparent}
.landscapes .landscape:hover::after{background:var(--ink)}
.island-error{color:var(--muted);font-size:12px;line-height:1.5;text-align:center;max-width:300px;padding-bottom:8px}
@media(max-width:700px){
  .island-explorer{flex:none;margin-top:calc(var(--title-size) * -.2)}
  .island-stage{flex:none;height:clamp(230px,62vw,380px);min-height:0}
  .island-stage .island{--u:min(calc(100cqh / 300), calc(100cqw / 420))}
  .island-explorer .island-arrow{top:84%;width:44px;height:44px}
  .island-arrow.previous{left:-6px}.island-arrow.next{right:-6px}
  .island-arrow svg{width:20px;height:20px}
    }
@media(max-width:700px) and (max-height:740px){.island-stage{height:clamp(200px,54vw,300px)}}
@media(prefers-reduced-motion:reduce){.island-explorer .island-arrow,.landscapes .landscape::after{transition:none}}
@media(min-width:701px) and (max-height:820px){.island-selection{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:14px;max-width:560px}.landscapes{flex-basis:100%;justify-content:center}}