:root{--sky-ink:#25414b;--sky-cream:#fff9e8;--sky-gold:#ffd96e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;background:#61c9e8;color:var(--sky-ink)}button,a{font:inherit}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.sky-shell,.sky-world{width:100%;height:100svh;min-height:0;overflow:hidden}.sky-world{position:relative;isolation:isolate;background:#68cce9}.sky-scene{--scene-ratio:1.7777778;position:absolute;left:50%;top:50%;width:max(100%,calc(100svh * var(--scene-ratio)));aspect-ratio:16/9;transform:translate(-50%,-50%);overflow:clip;isolation:isolate}.sky-art{position:absolute;z-index:0;inset:0;background:var(--pw-sky-isles-bg,url('/peblet-sky-isles-storybook.webp')) center/100% 100% no-repeat;transform:scale(1.006);transition:filter .5s ease}.sky-wallet{position:absolute;z-index:15;right:2.1%;top:2.4%;min-width:88px;height:52px;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 15px;border:3px solid rgba(255,255,255,.86);border-radius:999px;background:rgba(255,250,231,.95);box-shadow:0 5px 0 rgba(76,92,72,.28),0 12px 26px rgba(40,82,91,.18);font-size:20px}.sky-wallet>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#f4c950;color:#6b5121;font-weight:1000}.island-hotspot,.sky-ferry-home,.sky-wonder{position:absolute;z-index:7;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation;text-decoration:none;color:white}.cloudberry-island{left:1.3%;top:19%;width:37%;height:47%;border-radius:48%}.wind-island{left:39.5%;top:5.5%;width:29%;height:51%;border-radius:48%}.weather-island{right:1.8%;top:13%;width:30.5%;height:54%;border-radius:48%}.island-hotspot::before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,162,0),transparent 68%);transition:background .2s,filter .2s}.island-hotspot:hover::before,.island-hotspot:focus-visible::before{background:radial-gradient(circle,rgba(255,239,153,.23),transparent 70%);filter:drop-shadow(0 0 18px rgba(255,225,112,.68))}.island-glow{position:absolute;left:50%;top:57%;width:18px;height:18px;border:3px solid rgba(255,245,188,.92);border-radius:50%;background:rgba(255,218,92,.22);box-shadow:0 0 9px 4px rgba(255,226,119,.36),0 0 24px rgba(255,225,109,.84);transform:translate(-50%,-50%);animation:islandPulse 2.8s ease-in-out infinite}.wind-island .island-glow{top:58%}.weather-island .island-glow{top:60%}.focus-name{position:absolute;left:50%;bottom:7%;width:max-content;max-width:190px;padding:7px 11px;border-radius:999px;background:rgba(38,66,72,.94);color:white;font-size:11px;font-weight:1000;text-align:center;opacity:0;transform:translate(-50%,7px);transition:.18s;pointer-events:none}.island-hotspot:focus-visible,.sky-ferry-home:focus-visible,.sky-wonder:focus-visible,.sky-player:focus-visible{outline:4px solid #fff3a6;outline-offset:-6px}.island-hotspot:hover .focus-name,.island-hotspot:focus-visible .focus-name,.sky-ferry-home:hover .focus-name,.sky-ferry-home:focus-visible .focus-name{opacity:1;transform:translate(-50%,0)}.sky-ferry-home{left:5%;bottom:1%;width:17%;height:32%;z-index:10}.sky-ferry-home img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 7px rgba(48,76,75,.25));transform-origin:50% 58%;animation:ferryFloat 4.6s ease-in-out infinite}.sky-ferry-home .focus-name{bottom:0}.sky-player{position:absolute;z-index:11;left:48%;bottom:1.8%;width:clamp(92px,9.2%,150px);height:clamp(112px,18%,176px);padding:0;border:0;background:transparent;filter:drop-shadow(0 9px 5px rgba(43,76,62,.3));cursor:pointer;touch-action:none}.sky-player-stack,.sky-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.sky-player img{object-position:50% 100%}.sky-speech{position:absolute;z-index:30;left:50%;bottom:22%;max-width:min(440px,62%);display:flex;align-items:flex-start;gap:10px;padding:15px 16px 15px 20px;border:3px solid #fff6d4;border-radius:25px;background:rgba(44,71,73,.96);box-shadow:0 8px 0 rgba(39,59,62,.28),0 20px 38px rgba(25,57,66,.24);color:white;font-size:clamp(15px,1.4vw,21px);font-weight:900;line-height:1.25;transform:translateX(-50%)}.sky-speech button{flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:#fff4c3;color:#39545b;font-size:23px;cursor:pointer}.sky-wonder{min-width:48px;min-height:48px;border-radius:50%}.chime-wonder{left:57%;top:9%}.whale-wonder{left:16%;top:8%}.falls-wonder{right:12%;top:38%}.sky-wonder::after{content:"";position:absolute;inset:15%;border-radius:50%;box-shadow:0 0 0 0 rgba(255,239,158,.8);animation:wonderBreathe 3.2s ease-out infinite}.sky-wonder[aria-pressed="true"]::after{box-shadow:0 0 14px 6px rgba(185,246,255,.7);animation-duration:7s}.sky-world[data-effect="wind"] .wind-island{animation:windTurn .9s ease}.sky-world[data-effect="weather"] .weather-island{animation:rainDance 1.15s ease}.sky-world[data-effect="rainbow-falls"] .sky-art{filter:saturate(1.2) brightness(1.06)}
@keyframes islandPulse{50%{opacity:.48;transform:translate(-50%,-50%) scale(1.45)}}@keyframes ferryFloat{50%{transform:translateY(-7px) rotate(1deg)}}@keyframes wonderBreathe{70%{box-shadow:0 0 0 0 rgba(255,239,158,.72)}100%{box-shadow:0 0 0 18px rgba(255,239,158,0)}}@keyframes windTurn{45%{transform:rotate(-1.5deg) scale(1.015)}}@keyframes rainDance{35%{transform:translateY(3px)}65%{transform:translateY(-3px)}}
@media(max-width:900px) and (orientation:portrait){.sky-scene{height:100%;width:calc(100svh * var(--scene-ratio));max-width:none}.sky-wallet{right:calc((100% - 100vw)/2 + 14px);top:calc(env(safe-area-inset-top) + 12px)}.sky-ferry-home{left:27%;bottom:1%;width:14%}.sky-player{left:49%;width:7.8%;height:15%}.focus-name{font-size:10px}.sky-speech{bottom:20%;max-width:min(500px,54%);font-size:16px}.island-glow{width:20px;height:20px}}
@media(max-width:700px) and (orientation:landscape){.sky-wallet{height:44px;font-size:17px}.sky-ferry-home{width:15%}.sky-player{height:17%}.sky-speech{bottom:21%;font-size:14px}}
@media(prefers-reduced-motion:reduce){.island-glow,.sky-ferry-home img,.sky-wonder::after{animation:none}.sky-art,.focus-name{transition:none}}
.sky-world{background:radial-gradient(circle at 50% 44%,#bff4ff 0,#77d5ec 52%,#48b6db 100%)}
.sky-scene{height:auto;width:min(100%,calc(100svh * var(--scene-ratio)));max-width:100%}
@media(max-width:900px) and (orientation:portrait){.sky-wallet{right:14px;top:12px}.sky-ferry-home{left:5%;bottom:1%;width:17%}.sky-player{left:49%;width:9%;height:17%}.sky-speech{max-width:min(500px,62%)}}

/* Sky interactions animate the painted world; only the welcome hint uses a panel. */
.sky-speech{max-width:min(520px,66%);padding:17px 16px 17px 22px;font-size:clamp(20px,1.55vw,25px);line-height:1.22}
.sky-speech button{flex-basis:46px;width:46px;height:46px;font-size:29px;font-weight:900}
.sky-speech button:focus-visible{outline:4px solid #fff3a6;outline-offset:3px}
.sky-speech[hidden]{display:none!important}
.sky-player:focus,.sky-player:focus-visible{outline:0!important;box-shadow:none!important}
.sky-player:focus-visible .sky-player-stack{filter:drop-shadow(0 0 10px #fff3a6)}
.island-hotspot:active{transform:scale(.99)}
.sky-world[data-effect="wind-chime"] .chime-wonder{animation:chimeRing 1.1s cubic-bezier(.2,.8,.25,1)}
.sky-world[data-effect="cloud-whale"] .whale-wonder{animation:whaleWake 1.25s cubic-bezier(.2,.75,.25,1)}
.sky-world[data-effect="rainbow-falls"] .falls-wonder{animation:fallsSparkle 1.3s ease}
.sky-world[data-effect="wind"] .wind-island .island-glow,.sky-world[data-effect="weather"] .weather-island .island-glow{animation:islandAnswer 1.15s ease}
@keyframes chimeRing{20%{transform:rotate(-13deg) scale(1.08)}45%{transform:rotate(11deg) scale(1.12)}70%{transform:rotate(-6deg) scale(1.05)}}
@keyframes whaleWake{35%{transform:translateY(-12px) rotate(-4deg) scale(1.2)}70%{transform:translateY(4px) rotate(3deg) scale(1.08)}}
@keyframes fallsSparkle{35%{filter:drop-shadow(0 0 18px white);transform:scale(1.2)}75%{filter:drop-shadow(0 0 26px #bff8ff)}}
@keyframes islandAnswer{45%{opacity:1;transform:translate(-50%,-50%) scale(2);box-shadow:0 0 20px 9px rgba(255,235,124,.78)}}
@media(max-width:900px) and (orientation:portrait){.sky-speech{max-width:68%;font-size:20px;bottom:19%}}
@media(max-width:700px) and (orientation:landscape){.sky-speech{font-size:18px;bottom:20%}}
html[data-motion="reduced"] .island-glow,html[data-motion="reduced"] .sky-ferry-home img,html[data-motion="reduced"] .sky-wonder::after,html[data-motion="reduced"] .sky-world[data-effect] .sky-wonder,html[data-motion="reduced"] .sky-world[data-effect] .island-hotspot{animation:none!important}
.sky-ferry-home.is-restored img{filter:drop-shadow(0 0 14px rgba(255,231,111,.95)) drop-shadow(0 12px 7px rgba(48,76,75,.3));animation-duration:3.3s}.sky-ferry-home.is-restored::after{content:"";position:absolute;inset:12%;border-radius:50%;box-shadow:0 0 20px 5px rgba(255,235,135,.55);animation:islandPulse 2.8s ease-in-out infinite;pointer-events:none}

/* Portrait iPads keep every island visible while using the full tall canvas. */
@media(orientation:portrait){
  .sky-scene{left:0;top:0;width:100%;height:100svh;max-width:none;aspect-ratio:auto;transform:none}
  .sky-art{background-size:100% auto;background-position:center 15%;background-repeat:no-repeat;transform:none}
  .sky-wallet{right:14px;top:calc(env(safe-area-inset-top) + 12px)}
  .cloudberry-island{left:1.3%;top:17%;width:37%;height:20%}.wind-island{left:39.5%;top:11%;width:29%;height:22%}.weather-island{right:1.8%;top:14%;width:30.5%;height:23%}
  .chime-wonder{left:57%;top:12%}.whale-wonder{left:16%;top:12%}.falls-wonder{right:12%;top:26%}
  .sky-ferry-home{left:4%;top:37%;bottom:auto;width:21%;height:15%}.sky-player{left:47%;top:41%;bottom:auto;width:clamp(104px,17%,146px);height:16%}
  .sky-speech{top:56%;bottom:auto;max-width:78%;font-size:clamp(20px,2.7vw,25px)}
}
.sky-village-return{position:absolute;z-index:18;left:2%;top:2.4%;display:flex;align-items:center;gap:7px;min-height:52px;border:3px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,250,231,.95);box-shadow:0 5px 0 rgba(63,80,64,.24);color:#365d58;padding:5px 16px 5px 12px;text-decoration:none;font-weight:1000;touch-action:manipulation}.sky-village-return span{font-size:32px;line-height:.7}.sky-village-return:focus-visible{outline:4px solid #fff3a6;outline-offset:4px}
.sky-skill-trail{position:absolute;z-index:16;left:2%;top:11%;display:flex;gap:7px}.sky-skill-trail button{position:relative;width:48px;height:48px;border:3px solid rgba(255,255,255,.92);border-radius:50%;background:rgba(54,83,92,.76);box-shadow:0 5px 0 rgba(54,75,70,.24);font-size:24px;cursor:pointer;touch-action:manipulation;filter:grayscale(1);opacity:.62}.sky-skill-trail button[data-unlocked="true"]{background:#fff3bd;filter:none;opacity:1;box-shadow:0 5px 0 rgba(104,82,37,.24),0 0 15px rgba(255,229,119,.72)}.sky-skill-trail button[data-unlocked="false"] span{opacity:.5}.sky-skill-trail button:focus-visible{outline:4px solid #fff3a6;outline-offset:3px}.sky-skill-trail button:active{transform:translateY(2px)}
@media(orientation:portrait){.sky-village-return{left:14px;top:calc(env(safe-area-inset-top) + 12px)}.sky-skill-trail{left:14px;top:calc(env(safe-area-inset-top) + 76px)}}

/* The restored ferry reveals an ember route without adding another instruction panel. */
.cinder-route{position:absolute;z-index:13;left:18%;bottom:8%;width:clamp(58px,6.6%,96px);aspect-ratio:1;border-radius:46% 54% 48% 52%;display:grid;place-items:center;color:#fff;text-decoration:none;filter:grayscale(.72) brightness(.72);opacity:.78;touch-action:manipulation}
.cinder-route[hidden]{display:none!important}.cinder-route-mark{width:100%;height:100%;display:grid;place-items:center;border:4px solid rgba(255,241,178,.86);border-radius:inherit;background:radial-gradient(circle at 48% 35%,#ffca65 0 13%,#bf5238 42%,#4e3340 72%);box-shadow:0 6px 0 rgba(54,66,73,.27),0 0 13px rgba(255,192,83,.55);font-size:clamp(28px,3vw,46px)}
.cinder-route.is-ready{filter:none;opacity:1;animation:cinderRouteGlow 2.8s ease-in-out infinite}.cinder-route .focus-name{bottom:-34%}.cinder-route:hover .focus-name,.cinder-route:focus-visible .focus-name{opacity:1;transform:translate(-50%,0)}.cinder-route:focus-visible{outline:4px solid #fff3a6;outline-offset:4px}.cinder-route:active{transform:translateY(3px) scale(.98)}
@keyframes cinderRouteGlow{50%{filter:drop-shadow(0 0 13px #ffcf6b);transform:translateY(-4px)}}
@media(orientation:portrait){.cinder-route{left:19%;top:42%;bottom:auto;width:10%}}
@media(prefers-reduced-motion:reduce){.cinder-route.is-ready{animation:none}}