@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f5f5df;background:#073f4b;font-synthesis:none;--yellow:#ffcd4e;--pink:#ffa6a0;--ink:#073f4b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 25%,#116474,transparent 60%),#073f4b}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:5px}button{touch-action:manipulation}[hidden]{display:none!important}.app{max-width:1260px;margin:auto;padding:0 42px}header{height:106px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff24}.brand{color:inherit;text-decoration:none;display:flex;gap:12px;align-items:center;font-family:Fredoka,sans-serif;font-size:23px;font-weight:500}.brand-star{color:var(--yellow);font-size:40px}.brand small{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:3px;margin-top:5px}.top-actions{display:flex;gap:10px}.quiet{color:inherit;background:transparent;border:1px solid #ffffff35;border-radius:30px;padding:10px 18px;font-size:14px}.quiet:hover{background:#ffffff15}.start{min-height:650px;display:grid;grid-template-columns:1.08fr 1fr;gap:60px;align-items:center;padding:42px 0}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:#92c7c8}h1{font:500 clamp(44px,5.7vw,76px)/1.06 Fredoka,sans-serif;letter-spacing:-2px;margin:25px 0}h1 em{font-style:normal;color:var(--yellow)}.intro p{max-width:410px;color:#c2d9d8;line-height:1.8;font-size:18px;margin:0 0 30px}.primary{border:0;background:var(--yellow);color:var(--ink);border-radius:16px;padding:17px 26px;font-size:19px;font-weight:700;box-shadow:0 5px 0 #c79126;transition:transform .15s}.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #c79126}.primary span{margin-left:32px}.start-detail{display:flex;gap:18px;font-size:13px;color:#a9cbcc;margin:24px 0 38px}.start-detail span+span:before{content:'·';margin-right:18px}.chapter-preview{display:flex;gap:35px;color:#8dbbbc;font-size:12px}.chapter-preview b{display:block;color:#ecf2dc;font-size:15px;font-weight:500;margin-top:4px}.cover-wrap{position:relative;max-width:400px;justify-self:center;transform:rotate(3deg)}.cover{display:block;width:100%;border-radius:10px;box-shadow:20px 23px 0 #032e3844,0 16px 60px #021d3a44}.cover-note{position:absolute;bottom:24px;right:-24px;background:#fff3ce;color:#483715;padding:11px 17px;font-size:13px;box-shadow:0 3px 9px #0003;transform:rotate(-6deg)}.page-footer{border-top:1px solid #ffffff24;padding:22px 0;display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#a9c8c8}.chapters{display:flex;gap:8px;margin:26px 0}.chapters button{border:1px solid #ffffff28;color:#a4c3c5;background:transparent;border-radius:24px;padding:9px 16px;font-size:14px}.chapters button.active{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:700}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.game-heading h1{font-size:38px;letter-spacing:-.6px;margin:8px 0}.score{font-family:Fredoka,sans-serif;font-size:22px;color:var(--yellow);white-space:nowrap}.instruction{font-size:16px;color:#c6dedc;margin:8px 0 20px;line-height:1.5}.stage{position:relative;height:440px;border:1px solid #74c9c85c;border-radius:24px;overflow:hidden;background:#0b5665;isolation:isolate}.game-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14px;color:#aacbcb;padding:15px 0 25px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 27%;z-index:-2;opacity:.35}.overlay{position:fixed;inset:0;z-index:20;background:#021f2be3;backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px}.dialog{width:min(480px,100%);text-align:center;background:#fff4d7;color:var(--ink);border-radius:28px;padding:36px;box-shadow:0 24px 100px #0004}.dialog h2{font:500 37px/1.1 Fredoka,sans-serif;margin:16px 0}.dialog p{font-size:17px;line-height:1.6}.dialog .eyebrow{color:#39757b}.dialog .reward{font-size:58px}.dialog .quiet{color:var(--ink);border-color:#073f4b44;margin:16px 10px 0}.dialog .primary{margin-top:12px}.star{position:absolute;border:0;background:transparent;color:var(--yellow);font-size:38px;filter:drop-shadow(0 0 9px #ffce4b88);transform:translate(-50%,-50%);padding:8px}.star:hover{scale:1.15}.swimmer{position:absolute;width:110px;height:88px;left:15%;top:50%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 7px #003c4788)}.avatar-fallback{position:absolute;width:72px;height:72px;left:15%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--pink);background:url('assets/cover.jpg') 72% 53%/320%;pointer-events:none}.ocean{background:linear-gradient(180deg,#19768a,#075368 70%,#073e51);touch-action:none}.ocean:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(105deg,transparent 0 110px,#e1ffe709 125px,transparent 220px);z-index:-1}.ocean .scene-art{width:38%;left:auto;object-fit:cover;object-position:center 25%;opacity:.42;mask-image:linear-gradient(90deg,transparent,black 55%)}.bubble{position:absolute;border:1px solid #b6f1ed50;border-radius:50%;pointer-events:none}.toast{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#fff3d9;color:var(--ink);border-radius:30px;padding:10px 20px;font-weight:600;font-size:15px;white-space:nowrap;z-index:3}.goal-friend{position:absolute;right:3%;top:40%;font-size:64px;filter:drop-shadow(0 5px 6px #002a39);border:0;background:none}.dpad{display:flex;gap:8px;align-items:center}.dpad button{height:42px;width:42px;background:#fff2d7;color:#073f4b;border:0;border-radius:12px;font-size:22px}.ocean-caption{position:absolute;bottom:15px;right:20px;font-size:13px;color:#e7efdc}.dance-layout{height:100%;display:grid;grid-template-columns:42% 58%;background:#633518}.art-panel{height:100%;overflow:hidden;position:relative}.art-panel img{width:100%;height:100%;object-fit:cover;object-position:center top}.dance-play{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:linear-gradient(140deg,#402531,#174d56)}.dance-cue{font:500 70px Fredoka,sans-serif;color:var(--yellow);min-height:90px}.dance-status{height:30px;color:#ffe9c1}.beat-track{width:210px;height:9px;background:#ffffff25;border-radius:10px;overflow:hidden;margin:13px 0 24px}.beat-fill{height:100%;background:var(--pink);width:0}.dance-buttons{display:flex;gap:12px}.dance-buttons button{width:66px;height:66px;font-size:30px;border-radius:16px;border:0;color:var(--ink);background:#fff2d7;box-shadow:0 5px 0 #bbae8e}.dance-buttons button.lit{background:var(--yellow);transform:translateY(4px);box-shadow:0 1px 0 #bd8b22}.mini-label{font-size:13px;color:#c9d6cd;margin-top:20px;text-align:center}.memory-layout{display:grid;grid-template-columns:36% 64%;height:100%;background:#efe0b6}.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:27px}.memory-card{border:2px solid #bf9959;border-radius:15px;background:#116578;color:#ffcd4e;min-width:0;font:500 42px Fredoka,sans-serif;position:relative;overflow:hidden;box-shadow:0 4px 0 #ba965e}.memory-card img{width:100%;height:100%;object-fit:cover;object-position:center top;position:absolute;inset:0}.memory-card.matched{border:4px solid #208071;box-shadow:none;opacity:.75}.memory-card .pair-label{position:absolute;bottom:0;left:0;right:0;background:#fff3dce8;color:#073f4b;padding:5px 0;font:600 12px 'DM Sans',sans-serif}.travel-layout{height:100%;display:grid;grid-template-columns:36% 64%;background:#126277}.travel-play{position:relative;padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center}.travel-route{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:22px 0}.destination{border:2px solid #9ecbc9;border-radius:18px;padding:17px 12px;background:#0e4c5b;color:#f3f2d8;min-width:110px;flex:1;max-width:145px}.destination strong{font:500 30px Fredoka,sans-serif;display:block;margin-bottom:6px}.destination.delivered{background:#237867;border-color:#89d2a1}.inventory{color:var(--yellow);font:500 27px Fredoka,sans-serif}.travel-message{min-height:48px;text-align:center;line-height:1.5}.ending{height:100%;display:grid;grid-template-columns:40% 60%;background:#eee2bd;color:var(--ink)}.ending-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:35px}.ending-copy h2{font:500 38px Fredoka,sans-serif;margin:0 0 14px}.ending-copy p{line-height:1.7;font-size:17px}.ending-copy .eyebrow{color:#37717b}.confetti{position:absolute;pointer-events:none;color:var(--yellow);font-size:24px;animation:fall 2s ease-out forwards}@keyframes fall{to{transform:translateY(370px) rotate(300deg);opacity:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:760px){.app{padding:0 20px}header{height:86px}.brand{font-size:18px}.brand small{font-size:9px;letter-spacing:1.5px}.brand-star{font-size:30px}.quiet{padding:9px 12px}.start{gap:24px;min-height:0;padding:32px 0 42px}.intro p{font-size:16px;line-height:1.6}.eyebrow{font-size:10px;letter-spacing:1.4px}h1{font-size:48px;letter-spacing:-1px}.cover-wrap{max-width:270px}.cover-note{display:none}.chapter-preview{gap:20px}.start-detail{display:block;font-size:12px}.start-detail span{display:block;margin-top:8px}.start-detail span+span:before{display:none}.page-footer{flex-direction:column;font-size:11px}.chapters{gap:5px}.chapters button{padding:8px 10px;font-size:12px;flex:1}.game-heading h1{font-size:29px}.score{font-size:18px}.stage{height:420px}.instruction{font-size:15px}.game-footer{font-size:12px}.dance-layout,.memory-layout,.travel-layout,.ending{grid-template-columns:32% 68%}.memory-board{gap:7px;padding:16px;grid-template-columns:repeat(3,1fr)}.memory-card{font-size:30px}.dance-buttons{gap:7px}.dance-buttons button{width:49px;height:55px}.travel-play{padding:14px}.destination{min-width:80px;padding:12px 8px;font-size:12px}.destination strong{font-size:24px}.ending-copy{padding:20px}.ending-copy h2{font-size:30px}.ending-copy p{font-size:15px}.ocean .scene-art{width:50%}}
@media(max-width:520px){.start{display:flex;flex-direction:column-reverse;gap:22px}.cover-wrap{width:min(62%,220px);align-self:center;margin:4px auto 0;opacity:1;transform:rotate(-2deg)}.intro{width:100%;padding-top:8px}.intro h1{font-size:52px}.intro p{max-width:300px;margin-top:27px}.intro .eyebrow{max-width:160px;line-height:1.7}.chapter-preview{gap:40px}.start-detail{display:flex;gap:15px;margin-bottom:26px}.top-actions{gap:5px}.stage{height:430px}.dance-layout,.memory-layout,.travel-layout{grid-template-columns:1fr}.dance-layout .art-panel,.memory-layout .art-panel,.travel-layout .art-panel{display:none}.dance-play{padding:15px}.dance-buttons button{width:60px}.memory-board{grid-template-columns:repeat(4,1fr);padding:16px}.memory-card{font-size:32px}.ending{grid-template-columns:1fr}.ending .art-panel{display:none}.ending-copy{padding:28px}.game-footer{flex-wrap:wrap}.game-footer #hint{flex:1}.ocean-caption{display:none}.dialog{padding:27px}.dialog h2{font-size:31px}}