@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap');
:root{font-family:"DM Sans",system-ui,sans-serif;color:#143348;--cream:#fff6dc;--navy:#143348;--gold:#ffcc64}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#168bc5}main{position:relative;height:100dvh;min-height:290px;overflow:hidden}#world{position:absolute;width:100%;height:100%;touch-action:none}button{font:inherit;cursor:pointer;color:inherit;border:0;background:#fff5df;border-radius:12px;font-weight:800}button:hover{filter:brightness(1.06)}button:focus-visible{outline:3px solid #ee745b;outline-offset:3px}button:active{transform:translateY(2px)}[hidden]{display:none!important}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:9px;padding:18px 24px;background:linear-gradient(#103c5cb8,transparent);pointer-events:none;color:#fff6df}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;margin-right:auto;font:800 24px/1 'Bricolage Grotesque',system-ui;text-shadow:0 2px #174e69}.brand span:not(.sun){color:#ffcf76}.brand small{display:block;font:800 8px/1.5 'DM Sans',sans-serif;letter-spacing:.32em;margin-top:4px}.sun{display:grid;place-items:center;background:var(--gold);color:#a84b32;border-radius:50%;width:38px;height:38px;font-size:30px;text-shadow:none}header button{width:37px;height:37px}.wallet{display:flex;gap:14px;background:#163b53;color:#ffda84;border:1px solid #ffedb46b;border-radius:11px;padding:8px 13px;font-size:14px}.wallet b{color:white}.wallet small{color:#c4e1e4}#welcome{position:absolute;left:clamp(24px,5vw,78px);top:30%;color:var(--cream);width:260px;text-shadow:0 2px 10px #135a88}.tag{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;font-weight:800;background:#114260db;padding:7px 10px;border-radius:8px}.tag i{width:6px;height:6px;border-radius:50%;background:#99e6ad}h1{font:800 clamp(46px,6vw,100px)/.85 'Bricolage Grotesque',system-ui;margin:14px 0 16px;letter-spacing:-.07em}h1 em{font-style:normal;color:#ffcd6d}#welcome p{font-size:15px;font-weight:700;max-width:220px}.primary{background:var(--gold);padding:12px 16px;box-shadow:0 3px #b67138;color:#19354b}.primary span{margin-left:12px}#map{position:absolute;right:24px;top:77px;width:156px;padding:7px;background:#fff3db;border-radius:15px;box-shadow:0 4px 0 #124d73a3}.maphead{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:0 2px 3px}.maphead button{background:#e5e9d6;width:25px;height:23px}#mini{width:100%;display:block;border-radius:8px;cursor:pointer}#zoom{position:absolute;right:24px;top:267px;display:grid;gap:5px}#zoom button{width:34px;height:32px;font-size:20px}nav{position:absolute;bottom:24px;right:24px;display:flex;gap:7px}nav button,#exit{padding:10px 12px;box-shadow:0 3px #14597a}#hint,#zone,#toast{position:absolute;color:white;background:#143348e8;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:700}#hint{bottom:25px;left:24px}#zone{left:24px;top:76px}#toast{top:17%;left:50%;transform:translateX(-50%);text-align:center;max-width:80%;pointer-events:none}#toast:empty{display:none}#near{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;border-radius:15px;background:var(--cream);padding:10px 12px;white-space:nowrap;box-shadow:0 4px #124d7380}#near small{display:block;color:#66604d;font-size:10px}#rideHud{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);background:var(--cream);border-radius:16px;padding:11px;display:flex;align-items:center;gap:12px;white-space:nowrap}#score{font-size:12px}#joystick{position:absolute;bottom:34px;left:19px;width:78px;height:78px;border:4px solid #fff3db;border-radius:50%;background:#153b5480;touch-action:none}#joystick div{position:absolute;left:21px;top:21px;width:28px;height:28px;border-radius:50%;background:#ffbe64;pointer-events:none}dialog{color:var(--navy);background:var(--cream);border:0;border-radius:20px;padding:18px;width:min(480px,calc(100% - 30px));max-height:80dvh;box-shadow:0 10px 45px #09283d77}dialog::backdrop{background:#102e4b90}.dialogtop{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialogtop h2{font:800 30px 'Bricolage Grotesque',system-ui;margin:0}.dialogtop button{font-size:25px;background:#ede4c9;width:34px;height:34px}.guide-zone{font-size:12px;margin:13px 0 4px}.guide-ride{display:flex;width:100%;justify-content:space-between;background:#eee6cc;margin:4px 0;padding:8px 12px;text-align:left}.swatches{display:flex;gap:10px;margin:15px 0}.swatches button{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #283a46}.swatches button[aria-pressed=true]{box-shadow:0 0 0 3px #283a46}input{font:inherit;padding:9px;border:1px solid #998;max-width:100%;border-radius:8px}
@media(pointer:coarse){#hint{display:none}}
@media(max-width:700px){header{padding:12px;gap:5px}.brand{font-size:19px;gap:5px}.sun{width:29px;height:29px;font-size:23px}header button{width:30px;height:32px}.wallet{padding:6px 8px;gap:8px;font-size:12px}#map{right:12px;top:64px;width:100px}#zoom{right:12px;top:181px}#zoom button{width:30px;height:28px}#welcome{top:auto;left:16px;bottom:85px;width:auto}#welcome p{margin:7px 0 10px}h1{font-size:55px;margin:8px 0}h1 br{display:none}h1 em:before{content:' '}nav{right:10px;bottom:13px;gap:4px}nav button{padding:8px;font-size:12px}#zone{top:65px;left:12px}#near{bottom:53px;left:auto;right:10px;transform:none;gap:7px;padding:7px;font-size:13px}#near .primary{padding:8px}#rideHud{bottom:58px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:94%}#collect{padding:8px 12px}#hint{bottom:14px;left:9px;font-size:10px}}

header button{color:var(--navy)}
#sea,#scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#world{inset:0}
header button,#map,#zoom button,nav button{border:2px solid #fff2ca;box-shadow:0 3px 0 #183c5980,inset 0 -3px #e9d6a8}
.primary{border:2px solid #ffe8a3;background:linear-gradient(#ffdc7f,#ffbf56)}
#welcome{text-shadow:0 3px #1c628b,0 6px 26px #0d4a7d}
h1{color:#fff6d7}
@media(max-width:700px){#welcome{bottom:83px}.tag{background:#134762}}