@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600&display=swap');
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#b9e7ef;color:#244c40;font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:none}button:focus-visible{outline:3px solid #ef9e28;outline-offset:4px}#world,canvas{position:fixed;inset:0;width:100%;height:100%;display:block}header{position:absolute;top:30px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;font:500 25px 'Fredoka',sans-serif}.brandmark{font-size:42px;color:#d99421}.brand small{display:block;font:700 10px 'DM Sans';letter-spacing:2.7px;margin-top:6px}.actions{display:flex;gap:10px}.actions button,#home{background:#ffffffb8;border:1px solid #fff9;border-radius:30px;padding:13px 18px;backdrop-filter:blur(8px)}.actions #pause{width:46px;padding:0}.friends{position:absolute;right:36px;top:111px;padding:20px 23px;background:#ffffffab;border:1px solid #fffc;border-radius:22px;backdrop-filter:blur(10px);text-align:center}.friends>span{font-size:10px;letter-spacing:2px;font-weight:700}#friendlist{display:flex;gap:13px;margin:15px 0 8px}#friendlist span{font-size:26px;filter:grayscale(1);opacity:.4;transition:.5s}#friendlist .met{filter:none;opacity:1;transform:scale(1.12)}.friends p{font-size:12px;margin:10px 0 0;color:#58776a}#place{position:absolute;left:36px;top:114px;font-size:13px;display:flex;align-items:center;gap:9px}.dot{width:7px;height:7px;border-radius:50%;background:#4b8870}#welcome{position:absolute;top:28%;left:7%;max-width:450px;transition:opacity .6s}.eyebrow{letter-spacing:2.8px;font-size:11px;font-weight:700}h1{font:500 clamp(40px,5vw,70px)/1.04 'Fredoka',sans-serif;letter-spacing:-1.5px;margin:19px 0 20px}#welcome p{font-size:18px;line-height:1.7;margin-bottom:28px}#start,#resume{background:#ffd365;box-shadow:0 5px 0 #d7a643;border:2px solid #ffe197;border-radius:40px;padding:17px 29px;font-weight:700;font-size:18px;min-width:190px}#start span{margin-left:20px}#welcome>small{display:block;margin-top:20px;font-size:12px;color:#537967}footer{position:absolute;bottom:27px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between}.hint{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 14px}.hint>kbd{text-align:center;grid-column:1}.hint>span{grid-column:1;display:flex;gap:4px}.hint p{grid-column:2;grid-row:1/3;font-size:13px;line-height:1.6;margin:0}.hint small{color:#537967}kbd{font:500 11px 'DM Sans';background:#ffffffae;border:1px solid white;border-bottom:3px solid #bdd7ca;border-radius:5px;padding:4px 8px;min-width:25px}.footer-note{font-family:'Fredoka';font-size:17px;letter-spacing:.3px}#greeting{position:absolute;bottom:115px;left:50%;transform:translateX(-50%);background:#fff8e8;box-shadow:0 8px 35px #234b3920;border:3px solid white;border-radius:25px;padding:20px 27px;display:flex;align-items:center;gap:20px;min-width:340px}#greeting[hidden],#paused[hidden]{display:none}#avatar{font-size:49px}#greeting small{font-size:10px;letter-spacing:2px;color:#937744}#greeting h2{font:500 24px 'Fredoka';margin:5px 0}#greeting p{margin:0;font-size:14px}#paused{position:absolute;inset:0;background:#c8e9e7b0;backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;justify-content:center}#paused h2{font:500 38px 'Fredoka'}.touch{display:none;position:absolute;bottom:100px;right:22px;text-align:center}.touch button{width:53px;height:53px;margin:3px;border-radius:18px;background:#ffffffb0;font-size:23px;user-select:none}body.playing #welcome{display:none}@media(max-width:700px){header{top:20px;left:20px;right:20px}.brand{font-size:19px}.brand small{font-size:8px}.brandmark{font-size:30px}.actions button{padding:11px;font-size:12px}.friends{right:18px;top:90px;padding:13px}.friends>span{font-size:8px}#friendlist{gap:8px;margin:10px 0}#friendlist span{font-size:22px}.friends p{display:none}#place{top:95px;left:20px;font-size:12px}#welcome{top:30%;left:8%}h1{font-size:46px}#welcome p{font-size:16px}footer{left:20px;right:20px;bottom:20px}.hint,.footer-note{display:none}.touch{display:block}body:not(.playing) .touch{display:none}#greeting{bottom:260px;min-width:280px;max-width:90%;padding:16px}#greeting h2{font-size:20px}#greeting p{font-size:13px}}

/* Twelve-picture checklist for the first adventure. */
.friends{width:255px;padding:17px;}#friendlist{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 4px;}#friendlist span{position:relative;display:flex;flex-direction:column;align-items:center;filter:none;opacity:.58;font-size:25px;}#friendlist b{font-weight:400;filter:grayscale(.65);}#friendlist small{font-size:10px;margin-top:3px;color:#244c40;}#friendlist .met{opacity:1;transform:none;}#friendlist .met b{filter:none;}#friendlist .met:after{content:'✓';position:absolute;top:-3px;right:0px;background:#398262;color:white;border:2px solid white;border-radius:50%;font-size:10px;width:15px;height:15px;line-height:12px;}#complete{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background:#fff8e8;border:4px solid white;box-shadow:0 15px 80px #325b5050;border-radius:30px;text-align:center;padding:32px;max-width:90%;width:460px;}#complete[hidden]{display:none}.celebration{font-size:49px;margin-bottom:20px;}#complete h2{font:500 35px 'Fredoka';margin:15px 0;}#complete p{line-height:1.5;}#explore{background:#ffd365;border:2px solid #ffe197;border-radius:30px;padding:15px 26px;margin-top:12px;font-weight:700;}@media(max-width:700px){.friends{width:174px;padding:10px;top:83px;}#friendlist{gap:7px 2px;margin:9px 0 0;}#friendlist span{font-size:20px;}#friendlist small{font-size:8px;}.friends>span{font-size:7px;letter-spacing:1px;}.friends p{display:block;font-size:10px;margin-top:8px;}#welcome{top:40%;}#welcome h1{font-size:38px;}#welcome p{font-size:14px;}#greeting{bottom:250px;}}@media(max-height:650px){#welcome{top:27%;}#welcome h1{font-size:36px;}#welcome p{margin:12px 0;}#welcome>small{margin-top:12px;}}

/* Language selector, collapsible friends, guide trail, and the mobile joystick. */
#lang{background:#ffffffb8;border:1px solid #fff9;border-radius:30px;padding:0 14px;height:46px;font:600 14px 'DM Sans',sans-serif;color:#244c40;backdrop-filter:blur(8px);-webkit-appearance:none;appearance:none;cursor:pointer;text-align:center}
.friends-head{display:flex;align-items:center;justify-content:center;gap:8px}
.friends-head span{font-size:10px;letter-spacing:2px;font-weight:700}
#friendstoggle{display:none;background:none;font-size:15px;line-height:1;color:#58776a;padding:2px 4px;transition:transform .3s}
.friends.collapsed #friendstoggle{transform:rotate(-90deg)}
#friendlist span{position:relative;cursor:pointer;transition:.25s}
#friendlist span.guided{outline:2px solid #ff8a3d;outline-offset:3px;border-radius:12px;background:#ff8a3d18}
#friendlist span.guided:after{content:'➜';position:absolute;top:-9px;right:-4px;background:#ff8a3d;color:#fff;border:2px solid #fff;border-radius:50%;width:16px;height:16px;line-height:13px;font-size:9px;filter:none;opacity:1}
.touch{display:none}
#stick{position:relative;width:132px;height:132px;border-radius:50%;background:#ffffff4d;border:2px solid #ffffffb0;backdrop-filter:blur(6px);touch-action:none;box-shadow:0 6px 22px #234b3922}
#knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:#ffd365d9;border:3px solid #fff;box-shadow:0 4px 12px #0003;touch-action:none;pointer-events:none}
@media(max-width:700px){
 #lang{height:38px;padding:0 9px;font-size:12px}
 #friendstoggle{display:inline-block}
 .friends{width:auto;min-width:150px}
 .friends.collapsed #friendlist,.friends.collapsed>p{display:none}
 .friends.collapsed{padding:11px 15px}
 .touch{display:block;left:20px;right:auto;bottom:26px;top:auto}
 body:not(.playing) .touch{display:none}
}