:root{font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:#fff9dc;font-synthesis:none;background:#154b3a;--ink:#123e40;--blue:#0879e8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:none}button:focus-visible{outline:3px solid #fff3a1;outline-offset:3px}button:active{transform:translateY(2px);filter:brightness(1.13)}#game,canvas{image-rendering:pixelated}#game{position:absolute;inset:0}#game canvas{display:block;width:100%;height:100%}#hud{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px;pointer-events:none}#hud>*{pointer-events:auto}.brand{color:#ffef99;text-shadow:2px 2px #194a45;line-height:1;min-width:150px}.brand b{display:block;font-size:28px;font-style:italic;letter-spacing:2px}.brand span{font-size:8px;letter-spacing:2px;font-weight:800}.ring-pill,.speed-pill{border:1px solid #fcf6d52e;box-shadow:0 3px 0 #0c30314a;background:#123d3de8;border-radius:14px;height:53px;padding:9px 13px}.ring-pill{display:flex;align-items:center;gap:8px}.ring-pill i{display:block;width:19px;height:24px;border:4px solid #ffe66e;border-radius:50%;box-shadow:1px 1px #b77a28}.ring-pill strong{font-size:21px;font-variant-numeric:tabular-nums}.ring-pill>span{font-size:8px;align-self:flex-end;margin-bottom:6px;color:#c2d5a9}.speed-pill{min-width:112px}.speed-pill>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center}.speed-pill span{font-size:18px;font-weight:800}.speed-pill small{font-size:8px;color:#a4d8c5}.meter{height:4px;background:#235b55;margin-top:5px;border-radius:8px;overflow:hidden}.meter i{display:block;width:0;height:100%;background:#5ad5f8;transition:width .1s}.map-switch{display:flex;background:#103b3ee8;padding:5px;border:1px solid #f9f1d12c;border-radius:13px;margin-left:auto;gap:4px}.map-switch button{padding:12px 14px;border-radius:9px;background:transparent;font-weight:900;color:#bdd0ba}.map-switch button span{font-size:11px;padding-left:3px;font-weight:700}.map-switch button.selected{background:#f7e7a0;color:#184648;box-shadow:0 2px 0 #968e56}.square{font-size:24px;font-weight:900;line-height:1;background:#153f43eb;border:1px solid #ffffff35;width:51px;height:53px;border-radius:13px}#map-info{position:absolute;right:max(18px,env(safe-area-inset-right));top:86px;background:#123e3ede;border:1px solid #f4e8bb38;border-radius:12px;padding:8px;width:168px;pointer-events:none}#map-label{font-size:8px;letter-spacing:1px;display:block;margin-bottom:6px}#minimap{border-radius:5px;width:150px;height:95px}.checklist{font-size:10px;display:flex;justify-content:space-around;padding-top:5px;color:#e5e6a5}#tip{position:absolute;left:max(18px,env(safe-area-inset-left));top:83px;padding:8px 11px;border-radius:8px;background:#143d36c9;font-size:10px;max-width:330px;color:#efefc1;pointer-events:none}#debug{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font:10px ui-monospace,monospace;padding:5px 8px;border-radius:6px;background:#103f3bd6;color:#c3d9c4;white-space:nowrap;pointer-events:none}#joystick{position:absolute;bottom:max(27px,env(safe-area-inset-bottom));left:max(28px,env(safe-area-inset-left));height:154px;width:154px;background:#123e3b58;border:2px solid #f0f6dd68;border-radius:50%;box-shadow:inset 0 0 0 10px #16473d28,0 5px 20px #163c3530;touch-action:none}.joy-arrows{position:absolute;inset:5px;text-align:center;line-height:140px;color:#d5eac552;font-size:130px}#stick{position:absolute;left:46px;top:46px;width:58px;height:58px;border-radius:50%;border:2px solid #effbd9c9;background:#d6f1d47d;box-shadow:0 5px 0 #123e3e3b}#joystick>span{position:absolute;bottom:-18px;left:0;width:100%;text-align:center;font-size:9px;font-weight:800;letter-spacing:2px;color:#fff9dccc}#actions{position:absolute;right:max(25px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:15px}#actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:2px solid #ddf8ffa1;box-shadow:0 6px 0 #073c619e,0 9px 18px #0d385741;text-shadow:0 2px #103f6480}#actions small{font-size:10px;font-weight:900;letter-spacing:1px;margin-top:-6px}#boost{width:114px;height:114px;background:linear-gradient(#26b7ff,#0571e1);font-size:68px;font-weight:900}#jump{width:88px;height:88px;background:linear-gradient(#6ed5fb,#238fdf);font-size:43px;margin-bottom:8px}#spin{width:59px;height:59px;background:#164a44c9;font-size:30px;margin-bottom:5px}#spin small{font-size:8px}#actions button.held{filter:brightness(1.25);transform:translateY(4px);box-shadow:0 2px 0 #073c61}#routes{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:6px}#routes button{border:1px solid #fff3ca46;padding:10px 12px;background:#123d3de3;border-radius:10px;font-size:17px;color:#f4e4ab}#routes span{font-size:10px;font-weight:700;margin-left:3px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#092e2c91;backdrop-filter:blur(3px);padding:20px}.hidden{display:none!important}.welcome{max-width:640px;width:100%;background:#123f40f5;border:1px solid #d7e8b553;border-radius:26px;box-shadow:0 22px 80px #062e3290;padding:35px 44px;position:relative;overflow:hidden}.welcome:after{content:"";position:absolute;right:-50px;top:-40px;width:250px;height:250px;border:35px solid #e6d77c0c;border-radius:50%;pointer-events:none}.eyebrow{letter-spacing:2px;color:#c5dfad;font-size:9px;font-weight:800}h1{font-size:53px;letter-spacing:-2px;line-height:1.02;margin:20px 0 14px}h1 em{color:#fae599;font-style:normal}p{font-size:13px;color:#d3dfce;line-height:1.6}.style-cards{display:flex;gap:12px;margin:24px 0}.style-cards button{position:relative;z-index:1;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #f3e5b36b;border-radius:14px;padding:17px 13px;background:#f8e6a4;color:#174748;flex:1}.style-cards button:last-child{background:#226161;color:#f8e7b4}.style-cards strong{font-size:30px;font-style:italic}.style-cards b{font-size:13px;display:block}.style-cards small{font-size:8px;display:block;margin-top:5px;opacity:.75}.style-cards button>span{margin-left:auto;font-size:23px}.help{font-size:9px;color:#bccfbd;line-height:1.8}.help b{margin-left:9px;color:#fff0b4}.help b:first-child{margin-left:0}.welcome footer{margin-top:17px;font-size:8px;color:#a4c2b0}.pause-card{width:570px;max-height:94%;overflow:auto;touch-action:pan-y;padding:30px;border:1px solid #eee1aa73;background:#123f40;border-radius:23px}.pause-card h2{font-size:31px;margin:10px 0}.pause-buttons{display:flex;gap:10px;margin:20px 0}.pause-buttons button,#apply-update{padding:13px 17px;background:#f7e5a1;color:#174345;border-radius:9px;font-weight:800}.pause-buttons button:last-child{background:#2a6461;color:#dfebce}details{border-top:1px solid #e9e6c330;padding:16px 0;font-size:12px}details p{font-size:11px}summary{cursor:pointer}#offline-status{font-size:10px;color:#b7d0b7}#portrait{display:none}#loading{position:absolute;inset:0;background:#143e40;z-index:20;display:flex;align-items:center;justify-content:center;gap:16px;flex-direction:column}#loading small{color:#bcd5b7}.loading-ring{width:37px;height:46px;border:7px solid #f2d768;border-radius:50%;animation:loading .7s ease-in-out infinite alternate}@keyframes loading{to{transform:scaleX(.4)}}
@media(max-width:1000px){.brand{min-width:120px}.brand b{font-size:23px}.brand span{font-size:7px;letter-spacing:1px}#hud{gap:8px}.ring-pill{padding:8px}.ring-pill>span{display:none}.speed-pill{min-width:98px}.map-switch button{padding:10px}.map-switch button span{font-size:10px}#joystick{width:134px;height:134px;left:23px;bottom:27px}#stick{left:36px;top:36px}.joy-arrows{line-height:120px;font-size:110px}#actions{gap:10px;right:20px;bottom:27px}#boost{width:101px;height:101px}#jump{width:79px;height:79px}#spin{width:52px;height:52px}#routes{bottom:35px}#routes button{padding:9px}#routes span{font-size:9px}#map-info{width:138px;padding:6px}#minimap{width:124px;height:79px}#map-label{font-size:7px}.checklist{font-size:9px}}
@media(max-height:500px){#hud{top:max(8px,env(safe-area-inset-top));gap:7px}.brand{min-width:105px}.brand b{font-size:21px}.brand span{font-size:6px}.ring-pill,.speed-pill,.square{height:44px}.ring-pill strong{font-size:18px}.speed-pill{padding:5px 9px}.square{width:44px}.map-switch{padding:3px}.map-switch button{padding:9px}.map-switch button span{font-size:9px}#map-info{top:66px;width:118px}#minimap{width:104px;height:66px}#tip{top:62px;font-size:8px;max-width:280px;padding:6px 8px}#joystick{width:118px;height:118px;left:max(20px,env(safe-area-inset-left));bottom:23px}#stick{left:31px;top:31px;width:52px;height:52px}.joy-arrows{line-height:102px;font-size:94px}#boost{width:91px;height:91px;font-size:55px}#jump{width:73px;height:73px;font-size:36px}#spin{width:48px;height:48px}#actions small{font-size:9px}#routes{bottom:30px}#routes button{padding:7px}#routes span{font-size:8px}#debug{bottom:5px;font-size:8px}.welcome{max-width:600px;padding:22px 30px}.eyebrow{font-size:8px}h1{font-size:38px;margin:12px 0 10px}.welcome p{font-size:11px;margin:9px 0}.style-cards{margin:15px 0}.style-cards button{padding:12px}.welcome footer{margin-top:9px}.pause-card{padding:22px}#map-label{letter-spacing:.4px;font-size:6px}}
@media(max-width:750px){.brand{display:none}#routes span{display:none}#tip{max-width:235px}.map-switch button span{font-size:9px}.map-switch button{padding:9px 7px}}
@media(orientation:portrait){#portrait{position:absolute;z-index:50;inset:0;background:#143f40;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#portrait span{font-size:80px;color:#f8df91}#portrait b{font-size:23px}}

.square::before{content:"";display:block;width:14px;height:21px;border-left:5px solid currentColor;border-right:5px solid currentColor;margin:auto}.square.play::before{width:0;height:0;border:0;border-left:17px solid currentColor;border-top:11px solid transparent;border-bottom:11px solid transparent}