*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#9ce9f0;color:#174c68;font:600 17px/1.4 ui-rounded,'Trebuchet MS',sans-serif}header{height:66px;padding:9px 16px;display:flex;gap:10px;align-items:center;background:linear-gradient(#e9ffff,#b5f1f3);position:relative;z-index:3}header .music-player{margin-left:auto}.pill{border:3px solid white;border-radius:30px;padding:10px 20px;min-height:44px;font:700 15px ui-rounded,'Trebuchet MS',sans-serif;color:#64376d;background:linear-gradient(#ffeff9,#f7b7df);box-shadow:0 3px 0 #679ca948;text-decoration:none;cursor:pointer}.primary{background:linear-gradient(#e5ffff,#5dd9e4);color:#14506a}main{width:100%;height:calc(100svh - 66px);display:grid;place-items:center}section{width:100%}.map-art,.reef{position:relative;aspect-ratio:1672/940;max-height:calc(100svh - 66px);width:min(100%,calc((100svh - 66px)*1672/940));margin:auto;overflow:hidden}.map-art>img{display:block;width:100%;height:100%}.island,.map-home{position:absolute;border:0;background:transparent;border-radius:60px;cursor:pointer}.island{width:23%;height:11%;left:16.2%}.mystery,.waterfalls{top:35.1%}.mermaid,.hardest{top:77.5%}.waterfalls,.hardest{left:64.4%}.map-home{left:.8%;top:1.4%;width:5%;height:9%}.island:hover{box-shadow:0 0 0 4px #fff9,0 0 20px #fff}.island:focus-visible,.map-home:focus-visible{outline:5px solid #8134a6;outline-offset:2px}.reef{background:#45bfd5}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:pointer}#hud{position:absolute;top:2%;left:3%;right:3%;display:flex;justify-content:space-between;gap:12px;pointer-events:none}#hud span,#hint{background:#efffffed;border:2px solid white;border-radius:28px;padding:8px 18px;box-shadow:0 3px 12px #0d8b9f25}#hint{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}#collected{position:absolute;right:2%;top:13%;display:flex;flex-direction:column;gap:4px;pointer-events:none}#collected img{width:42px;height:42px;object-fit:contain;border-radius:50%;background:#ffffffb8;padding:4px}.overlay{position:absolute;inset:0;background:#17778e30;display:grid;place-items:center}.panel,dialog{background:#effffbf5;border:4px solid white;border-radius:30px;padding:24px;text-align:center;box-shadow:0 16px 60px #164e6a44}.panel{max-width:470px;width:90%}.panel h1,dialog h2{color:#8551a2;font-size:28px;margin:0 0 12px}.panel p{margin:12px 0}.small{font-size:14px}.portrait-tip{display:none;text-align:center;padding:12px;color:#24596a}dialog{max-width:550px;width:92vw}dialog::backdrop{background:#174c6870}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:4px solid #8c4db9;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}[hidden]{display:none!important}@media(max-width:700px){header{height:58px;gap:5px;padding:7px}.pill{font-size:12px;padding:8px 12px}main{height:calc(100svh - 58px)}header .music-player{scale:.8;transform-origin:right center}#hud{font-size:12px}#hud span,#hint{padding:4px 9px}#hint{font-size:12px}#collected img{width:26px;height:26px}.panel{padding:12px}.panel h1{font-size:20px}.panel p{font-size:13px;margin:7px 0}.portrait-tip{display:block}@media(orientation:landscape){.portrait-tip{display:none}}}