.island-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 62px;max-width:1120px;margin:54px auto 100px;padding:0 28px}
.island{position:relative;display:flex;align-items:center;flex-direction:column;appearance:none;width:100%;border:3px solid transparent;border-radius:38px;background:transparent;color:#493c36;font:inherit;padding:10px 10px 18px;isolation:isolate;transform-origin:50% 75%}
.island-art{display:block;width:100%;aspect-ratio:1;background-image:url('/assets/islands.webp');background-size:300% 300%;background-position:var(--island-x) var(--island-y);filter:drop-shadow(0 12px 9px #526e6630);pointer-events:none}
.island-name{font-weight:900;font-size:clamp(17px,1.7vw,25px);background:#fff9ed;border:2px solid #fff;border-radius:100px;padding:9px 25px;box-shadow:0 5px 0 #dbc6a6,0 8px 16px #647c7330;margin-top:-5px}
.island.is-active{cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s,transform .2s}
.island.is-active:focus-visible{outline:4px solid #176b83;outline-offset:6px;border-color:#ff8d77;transform:scale(1.055);background:#fff8e957}
@media(hover:hover) and (pointer:fine){.island.is-active:hover{border-color:#ff927a;background:#fff8e95c;box-shadow:0 0 0 5px #ffffff80,0 15px 30px #8b856827;transform:scale(1.055);animation:island-pop .58s cubic-bezier(.2,.8,.3,1) both}}
.island.is-active:active{transform:scale(.98);animation:none}
.island.is-soon{opacity:.74;cursor:default}
.island.is-soon .island-art{filter:saturate(.5) drop-shadow(0 10px 8px #526e6620)}
.coming-soon{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-7deg);white-space:nowrap;background:#fff9eb;color:#766458;font-size:clamp(12px,1.5vw,19px);font-weight:900;letter-spacing:.08em;border:3px solid #fff;border-radius:9px;padding:9px 15px;box-shadow:0 4px 0 #c6b797,0 8px 15px #493c3625}
@keyframes island-pop{0%{transform:scale(1) rotate(0)}32%{transform:scale(1.075) rotate(-2deg)}57%{transform:scale(1.055) rotate(1.5deg)}78%{transform:scale(1.055) rotate(-.65deg)}100%{transform:scale(1.055) rotate(0)}}
@media(max-width:650px){.island-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding:0 14px;margin-top:32px}.island{padding:5px 3px 13px;border-radius:25px}.island-name{padding:7px 17px}.coming-soon{font-size:11px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.island.is-active{transition:none}.island.is-active:hover{animation:none;transform:none}.island.is-active:focus-visible{transform:none}}
/* Highlight follows the transparent island silhouette, never the button box. */
.island.is-active:focus-visible{outline:none;border-color:transparent;background:transparent;box-shadow:none}
.island.is-active:focus-visible .island-art{filter:drop-shadow(1px 0 0 #fffbd4) drop-shadow(-1px 0 0 #fffbd4) drop-shadow(0 1px 0 #fffbd4) drop-shadow(0 -1px 0 #fffbd4) drop-shadow(0 0 5px #fff7a2) drop-shadow(0 0 13px #ffd574)}
@media(hover:hover) and (pointer:fine){.island.is-active:hover{border-color:transparent;background:transparent;box-shadow:none}.island.is-active:hover .island-art{filter:drop-shadow(1px 0 0 #fffbd4) drop-shadow(-1px 0 0 #fffbd4) drop-shadow(0 1px 0 #fffbd4) drop-shadow(0 -1px 0 #fffbd4) drop-shadow(0 0 5px #fff7a2) drop-shadow(0 0 13px #ffd574)}}
.island.is-active .island-art{transition:filter .18s ease}
@media(prefers-reduced-motion:reduce){.island.is-active .island-art{transition:none}}