/* Sunny, painted casual-game art direction. */
:root{--ink:#614645;--paper:#fff9ed;--mint:#1bc7c4;--berry:#b36bd8;--gold:#ffd25c}
html{overflow:hidden}body{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:linear-gradient(120deg,#b9e9ee,#ccebdc 52%,#ebd9f0);color:#614645;color:var(--ink)}
#app{overflow:hidden;background:#a9ddf1;box-shadow:0 10px 90px rgba(71,123,125,0.271)}
.desktop-wordmark{color:rgba(255,250,240,0.902);text-shadow:0 3px #8ebbb5;transform:rotate(-5deg)}
.desktop-wordmark small,.desktop-wordmark span{color:#587e84;text-shadow:none}
button:focus-visible{outline:3px solid #974eb9;outline-offset:4px}
.wallet{top:2.7%;height:5.2%;grid-gap:9px;gap:9px}
.wallet button{border:2px solid #fffcf3;border-radius:30px;background:linear-gradient(#fffefa,#ffeadd);color:#734f46;box-shadow:inset 0 2px #fff,0 4px 0 rgba(185,157,135,0.565),0 5px 10px rgba(86,100,76,0.145)}
.wallet button:first-child,.wallet button:last-child{border-radius:50%;background:linear-gradient(#8ef8ff,#17b2e2);border-color:#ccfbff;box-shadow:inset 0 2px rgba(255,255,255,0.533),0 4px #3d93ac}
.wallet i{filter:drop-shadow(0 2px 1px rgba(185,126,56,0.310));height:135%;width:38%}.wallet b{color:#795145;font-size:calc(1vh*2.5);font-size:calc(var(--vh,1vh)*2.5);font-size:clamp(16px,calc(1vh*2.5),25px);font-size:clamp(16px,calc(var(--vh,1vh)*2.5),25px)}.wallet em{background:#89d940;color:white;border:2px solid #d8f9a4;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;line-height:1;text-shadow:0 1px #559322;font-size:17px}.wallet button:nth-child(3) em{background:none;border:0;color:#aa9075;font-size:10px}
.journey{top:9.6%;left:22%;width:56%;height:4.6%;background:rgba(255,252,240,0.922);border:2px solid #fff;border-bottom:3px solid #d6bfa3;color:#83583d;border-radius:30px;box-shadow:0 4px 10px rgba(68,116,116,0.125)}
.journey strong{font-size:calc(1vh*1.35);font-size:calc(var(--vh,1vh)*1.35);font-size:clamp(9px,calc(1vh*1.35),14px);font-size:clamp(9px,calc(var(--vh,1vh)*1.35),14px)}.journey small{font-size:8px;color:#aa8264;margin:2px 0}.journey>i{filter:drop-shadow(0 2px rgba(185,120,117,0.314))}.journey-track{height:4px;background:#e5dac4}.journey-track i{background:linear-gradient(90deg,#8dd35c,#bdea68)}
.graffiti-title{top:16.1%;left:14%;width:72%;transform:rotate(-5deg);filter:drop-shadow(0 4px 0 rgba(140,104,94,0.271))}
.season-label{background:rgba(255,246,229,0.910);border:2px solid #fffaf1;box-shadow:0 2px rgba(187,163,126,0.459);color:#916a47;border-radius:20px;padding:3px 13px;font-size:calc(1vh*1.15);font-size:calc(var(--vh,1vh)*1.15);font-size:clamp(8px,calc(1vh*1.15),11px);font-size:clamp(8px,calc(var(--vh,1vh)*1.15),11px);letter-spacing:1px}
.graffiti-title h1{font-weight:900;font-size:calc(1vh*7.6);font-size:calc(var(--vh,1vh)*7.6);font-size:clamp(43px,calc(1vh*7.6),76px);font-size:clamp(43px,calc(var(--vh,1vh)*7.6),76px);color:#fff5ac;-webkit-text-stroke:1px #5c6b24;text-shadow:0 2px #6ea936,0 4px #53792f,1px 6px #704830;letter-spacing:-4px;margin:5px 0 2px}
.graffiti-title h1:before{color:#fff9e9;-webkit-text-stroke:8px #fffaf1;filter:drop-shadow(0 2px 0 #6b5538)}
.graffiti-title h1 .logo-green{background:linear-gradient(#efff89 12%,#badc36 45%,#75be35 70%,#e5f698 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px #789333);text-shadow:none;-webkit-text-stroke:0}
.graffiti-title h1 .logo-orange{background:linear-gradient(#fff7a2 12%,#ffc648 45%,#ef842c 74%,#ffcb65 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px #b96534);text-shadow:none;-webkit-text-stroke:0}
.logo-sub{background:linear-gradient(#51dfd3,#19a5bc);border:2px solid #e7ffeb;border-bottom:3px solid #4b9291;border-radius:18px;padding:4px 20px;color:#fffef0;letter-spacing:4px;font-size:10px;box-shadow:0 3px 8px rgba(39,84,84,0.145)}.logo-splash{display:none}
.side-rail{top:34%;width:15%;grid-gap:calc(1vh*2.6);grid-gap:calc(var(--vh,1vh)*2.6);gap:calc(1vh*2.6);gap:calc(var(--vh,1vh)*2.6)}.side-rail button{background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 4px;color:#765249}.side-rail i{height:calc(1vh*6.7);height:calc(var(--vh,1vh)*6.7);width:100%;filter:drop-shadow(0 3px 1px rgba(117,86,69,0.376))}.side-rail span{display:inline-block;max-width:100%;font-size:calc(1vh*1.35);font-size:calc(var(--vh,1vh)*1.35);font-size:clamp(8px,calc(1vh*1.35),13px);font-size:clamp(8px,calc(var(--vh,1vh)*1.35),13px);background:linear-gradient(#fffef6,#ffe6d1);padding:3px 5px;border:1px solid #fff8e7;border-radius:15px;box-shadow:0 2px rgba(194,160,133,0.533);white-space:nowrap}.badge{top:-3px;right:0;background:linear-gradient(#ffa879,#f27569);border-color:#fff6e5;border-radius:50%;color:white;box-shadow:0 2px rgba(198,113,96,0.349);min-width:19px;line-height:12px;text-shadow:0 1px #bc6245}
.wardrobe-pill{top:68.4%;background:linear-gradient(rgba(255,253,244,0.933),rgba(255,232,216,0.937));border:2px solid white;box-shadow:0 3px rgba(195,169,149,0.502);color:#926552;height:4.3%;font-size:10px}.wardrobe-pill b{color:#ac71cb;font-size:11px}
.start-dock{left:17%;width:66%;bottom:10.4%;filter:drop-shadow(0 4px 1px rgba(86,107,87,0.310))}
.mode-ribbon{border:2px solid #e9fff8;border-bottom:3px solid #4c9caa;background:linear-gradient(#81dee4,#51b9cb);color:white;border-radius:18px 18px 9px 9px;height:calc(1vh*4.4);height:calc(var(--vh,1vh)*4.4);box-shadow:inset 0 2px rgba(228,255,255,0.502)}.mode-ribbon small{color:#effffe}.mode-ribbon>span{text-shadow:0 1px #5195a5}.mode-ribbon>b{font-size:11px}
.start-button{border:3px solid #fbffe1;border-bottom:6px solid #2d9da0;border-radius:24px;background:linear-gradient(#8dffdf 0%,#34e3cd 33%,#13b6c1 75%,#32cbcc 100%);box-shadow:inset 0 3px #dcfff4,0 2px 0 #2a868c;color:#fffdf0;text-shadow:0 3px #229798;height:calc(1vh*8.2);height:calc(var(--vh,1vh)*8.2)}.start-button span{letter-spacing:3px;font-size:calc(1vh*3.7);font-size:calc(var(--vh,1vh)*3.7);font-size:clamp(23px,calc(1vh*3.7),37px);font-size:clamp(23px,calc(var(--vh,1vh)*3.7),37px)}.start-button b{color:#fffccb;text-shadow:0 2px #29aab0}.start-dock p{color:#547f81;text-shadow:0 1px #fffae6;font-size:8px}
.bottom-nav{height:8.2%;background:linear-gradient(rgba(255,254,244,0.961),rgba(255,233,212,0.961));border-top:3px solid white;box-shadow:0 -3px 20px rgba(141,151,135,0.169);grid-gap:3px;gap:3px}.bottom-nav button{color:#8f6757}.bottom-nav i{filter:drop-shadow(0 2px rgba(175,136,84,0.302));height:calc(1vh*4.8);height:calc(var(--vh,1vh)*4.8)}.bottom-nav span{font-size:11px}.bottom-nav .selected{background:linear-gradient(#ead5ff,#bf84e9);border:2px solid #fff6ff;border-bottom:4px solid #9867bb;border-radius:20px;box-shadow:0 3px rgba(147,102,165,0.220);color:#fffef1;transform:translateY(-7px)}
.dialog{background:linear-gradient(150deg,#fffdf4,#fff1df);border:4px solid #fffdf5;box-shadow:0 0 0 100vmax rgba(44,92,104,0.431),0 8px rgba(182,161,141,0.459);color:#755149;border-radius:29px}.dialog-cap{background:linear-gradient(#65d7e6,#31adc7);border-bottom:4px solid #3299af;color:#fffef1;text-shadow:0 2px #358fa4;font-size:20px}.dialog h2{color:#785545}.primary{background:linear-gradient(#91efce,#2ac6b8);color:#fffcef;border:2px solid #d6fff0;border-bottom:5px solid #41998e;border-radius:18px;text-shadow:0 2px #329e98;box-shadow:inset 0 2px #d9fff2}.secondary,.small-button{background:linear-gradient(#89e7f3,#33b7dc);border:2px solid #dcfbff;border-bottom:4px solid #4296b7;border-radius:17px;text-shadow:0 1px #3894b1;color:white}
.field{border-bottom:1px solid #ead9c6;color:#846454}.field select{background:#fffaf2;border:2px solid #bbddd9;border-radius:12px;color:#796355}.field input{accent-color:#34bbb8}.character-cards button{background:radial-gradient(ellipse at 50% 20%,#fffef5,#eee0fa);color:#88617c;border:2px solid #e4cdec;border-radius:18px}.character-cards .active{border-color:#bb83d8;background:radial-gradient(#fffcf0,#ebd1ff);box-shadow:0 0 0 2px #f7e8ff}.character-cards img{filter:drop-shadow(0 4px 3px rgba(173,136,183,0.220))}.model-note{font-size:11px;line-height:1.6;background:#e9f8ed;border-radius:13px;padding:10px;color:#58816f}.palette{display:none}
.setting-note{background:linear-gradient(130deg,#ba82d9,#65b7d0);border:2px solid #eed8fa;box-shadow:inset 0 2px rgba(255,255,255,0.439)}.record-row b{color:#1faebb}.mission,.record-row{border:2px solid #e6ceb4;background:#fffef7;border-radius:17px}.mission.done{background:#eef8ce;border-color:#a1cb7e}.obstacle-card{background:radial-gradient(#fffdf0,#ecdbba);border-color:#e0c497;border-radius:17px;color:#886844}.guide-grid div{background:#dff8f3;border-color:#a5d9ca;border-radius:17px;color:#23a7ae}.guide-grid b{color:#698479}
.top-score,.coin-stat{background:linear-gradient(rgba(255,253,242,0.961),rgba(255,232,217,0.922));border:2px solid #fffcf2;border-radius:27px;box-shadow:0 3px rgba(139,155,121,0.451);color:#78584d;text-shadow:none}.multiplier{color:#51b7a7;text-shadow:0 1px #fff}.top-score b,.coin-stat b{font-size:calc(1vh*2.8);font-size:calc(var(--vh,1vh)*2.8);font-size:clamp(17px,calc(1vh*2.8),26px);font-size:clamp(17px,calc(var(--vh,1vh)*2.8),26px);text-shadow:none}.top-score small{color:#9d7a61}.pause-button{background:linear-gradient(#8ef7ff,#25b1d6);border:3px solid #ecfffe;border-radius:18px;color:#fff;box-shadow:inset 0 2px white,0 4px #4b99ad}
.zone-hud{background:rgba(255,248,225,0.878);border:2px solid #fffdf0;border-radius:17px;padding:7px 10px 8px;color:#6b8277;text-shadow:none;box-shadow:0 3px rgba(157,185,166,0.349);font-size:13px;top:10.8%;left:3.5%;max-width:53%}.zone-hud strong{font-size:14px}.zone-hud b{font-size:11px;color:#b49b5e}.zone-hud small{font-size:9px;color:#8d9780;margin:3px 0 5px}.zone-hud .track{height:6px;background:#d9e5d2;border:0}.zone-hud .track i{background:linear-gradient(90deg,#87d94e,#d7ec60)}
.bottom-left{background:rgba(52,100,106,0.502);padding:8px 10px;border-radius:17px;text-shadow:0 2px #3a7577;color:#fffbed;bottom:10%;left:3.5%;width:48%;backdrop-filter:blur(4px)}.bottom-left>small{font-size:11px}.speed-line strong{font-size:28px}.speed-line b{font-size:10px;color:#dcf596}.speed-line span{font-size:12px}.bottom-left .track{height:5px;border:0;background:rgba(27,98,110,0.522)}.bottom-left .track i{background:linear-gradient(90deg,#86e8e1,#d3f289)}
.controls{bottom:1.8%;left:12%;width:76%;grid-gap:8px;gap:8px}.controls button{background:linear-gradient(rgba(255,255,255,0.871),rgba(229,247,236,0.722));border:2px solid white;border-bottom:4px solid rgba(136,185,179,0.671);border-radius:19px;color:#379da9;font-size:28px;box-shadow:0 3px rgba(99,134,123,0.231);backdrop-filter:blur(4px)}
#toast{background:linear-gradient(#fffdf3,#fff0d9);border:2px solid #fff;border-bottom:4px solid #d3b48e;color:#89704f;border-radius:20px}.chase.warning{background:linear-gradient(rgba(214,160,237,0.933),rgba(172,112,200,0.910));border:2px solid #fce5ff;color:white;border-radius:18px}.track{overflow:hidden}.chase{font-size:12px}
#shop{background:linear-gradient(rgba(182,232,240,0.200),transparent 30%,rgba(219,189,237,0.200))}.shop-back{background:linear-gradient(#8aedf3,#2eb5d0);border:2px solid #e1fffa;border-bottom:4px solid #429eac;border-radius:50%;color:white;box-shadow:0 2px #358697}.shop-heading strong{color:#756058;text-shadow:0 2px #fff6e8}.shop-heading small{color:#9c9080}.shop-wallet{background:linear-gradient(#fffff7,#ffeadd);color:#856044;border:2px solid #fff;border-radius:30px;box-shadow:0 3px #c3a78a}.shop-name small{background:linear-gradient(#dbb3f5,#ae73d3);border:2px solid #fff3ff;color:white}.shop-name h2{color:#6c524d}.shop-name p{color:#a18b6f}.shop-drawer{background:linear-gradient(#fffdf2,#fff0df);border:4px solid white;border-radius:32px 32px 0 0;box-shadow:0 -5px 24px rgba(136,143,119,0.161)}.shop-buy-row #shopBuy{background:linear-gradient(#92f2cf,#2ac4b9);border:2px solid #e7fff3;border-bottom:5px solid #4b9e95;color:white;text-shadow:0 2px #409d95;border-radius:20px}.shop-buy-row #shopEarn{background:linear-gradient(#ffe292,#ffbd53);border-color:#fff4bd;border-bottom-color:#cea264;color:#9b6a31}.shop-filters button{background:#f1e5dc;color:#ab8c78;border:1px solid #e7d4c6}.shop-filters .active{background:linear-gradient(#d8a9f0,#b17bd4);border:1px solid #f7e5ff;box-shadow:0 2px #9d6cbd;color:white}.outfit-card{background:radial-gradient(ellipse at 50% 12%,#fffefa,color-mix(in srgb,#f7e6d8,#f8eddc 77%));background:radial-gradient(ellipse at 50% 12%,#fffefa,color-mix(in srgb,var(--outfit-color),#f8eddc 77%));border:2px solid #f1dfc7;border-bottom:4px solid #ccbaa8;border-radius:21px;color:#826757}.outfit-card.active{border-color:#ae7bd1;box-shadow:0 0 0 2px #e8c7fa}.outfit-state{color:#ba8b50;background:rgba(255,252,240,0.929)}.outfit-card.active .outfit-state{background:#bd83de;color:white}.shop-footnote{color:#ad977e}
#workshop[data-panel=maps]{background:linear-gradient(#fffcf4,#fff0dc);border:4px solid #fff}.map-intro h2{color:#85634f}.map-intro small{color:#b57fb9}.map-card{background:#fffdf6;border:2px solid #e9d5bd;border-bottom:4px solid #c9b298;border-radius:21px;color:#825f4a}.map-card svg{border-bottom:1px solid #e8d3ba}.map-card.active{background:#fff2cb;border-color:#d8ad55;box-shadow:0 0 0 2px #ffeaab,0 4px rgba(186,160,115,0.314)}.map-card strong{color:#ae8b63}.map-card.active em{background:#9bd3a8;color:#467454}.map-country em{background:#eee5d8;color:#b1987c}.map-card>small{color:#ad9985}.map-selection{background:rgba(255,249,234,0.961);border-color:#ead8bc}.map-selection strong{color:#87674c}.map-selection>span{color:#a28e71}
#workshop[data-panel=maps] .dialog-cap{background:linear-gradient(#6ddbe6,#3baac4);border-bottom:4px solid #5099aa;color:#fffdf3;text-shadow:0 2px #3f91a4}
#loading{background:linear-gradient(0deg,rgba(47,141,157,0.322),transparent 30%),url('assets/storybook-loading.png?v=6.3.0') center/cover;display:block;padding:0;color:white}
#loading:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(151,216,235,0.000) 0%,transparent 66%,rgba(23,91,109,0.251) 100%);pointer-events:none}
#loading>b{position:absolute;top:13%;left:0;width:100%;font-size:calc(1vh*8);font-size:calc(var(--vh,1vh)*8);font-size:clamp(42px,calc(1vh*8),80px);font-size:clamp(42px,calc(var(--vh,1vh)*8),80px);color:#fff8b1;-webkit-text-stroke:1px #bc833e;text-shadow:0 3px #e3a13f,0 6px #956039,2px 8px rgba(255,255,255,0.612);transform:rotate(-6deg);letter-spacing:-4px}
#loading>b:after{content:'世 界 漫 游';display:block;width:max-content;margin:8px auto;background:linear-gradient(#55dac7,#1e9fb3);border:3px solid #f8ffde;border-radius:19px;padding:6px 18px;color:white;font-size:13px;letter-spacing:4px;text-shadow:0 2px #418e8a;-webkit-text-stroke:0;box-shadow:0 3px #438285}
.load-mascot{position:absolute;top:41%;left:27%;width:46%;height:32%;background:url('/play/kuaipao/assets/portrait-runner.png') center/contain no-repeat;filter:drop-shadow(0 15px 6px rgba(137,122,70,0.400));animation:hop 2s ease-in-out infinite}
#loadStatus{position:absolute;top:82%;left:7%;width:86%;font-size:12px;color:#fffefa;text-shadow:0 2px 4px #235b60;background:rgba(40,108,121,0.651);border:1px solid rgba(185,229,220,0.753);border-radius:20px;padding:9px}
.load-track{position:absolute;top:76%;left:10%;width:80%;height:26px;border:4px solid #fff9e8;border-radius:22px;box-shadow:0 4px rgba(107,127,117,0.459);background:#21677c;overflow:hidden}.load-track i{background:linear-gradient(#87ffe2,#24d6bf 55%,#0db4aa);border-radius:15px;box-shadow:inset 0 2px #ddffe8;height:100%}
#loading small{position:absolute;top:90%;left:0;width:100%;color:#fff8e9;text-shadow:0 1px 4px #296472;font-size:10px}#reloadGame{position:absolute;top:85%;left:25%;width:50%;background:linear-gradient(#fff3b0,#ffd163);border:3px solid #fff4ce;border-bottom:5px solid #bf9c58;border-radius:20px;color:#966938}
#updateNotice{background:#fff9e7;border:2px solid #fff;border-bottom:4px solid #c0ae8c;border-radius:20px;color:#816445}#applyUpdate{background:linear-gradient(#79ddd8,#2cafbb);border-radius:15px}
@media(max-height:700px){.side-rail{grid-gap:calc(1vh*2);grid-gap:calc(var(--vh,1vh)*2);gap:calc(1vh*2);gap:calc(var(--vh,1vh)*2)}.side-rail i{height:calc(1vh*6.5);height:calc(var(--vh,1vh)*6.5)}.side-rail span{font-size:8px;padding:2px 4px}.journey small{font-size:7px}.wallet b{font-size:16px}.wardrobe-pill{font-size:9px}.zone-hud{padding:5px 8px}.zone-hud strong{font-size:12px}.zone-hud small{font-size:8px}.bottom-left{padding:6px 9px}.speed-line strong{font-size:24px}.controls button{font-size:23px}.start-dock p{margin-top:6px;font-size:7px}}

.shop-name{top:8.6%}.shop-name h2{font-size:19px;margin:6px 0 3px}.shop-name p{font-size:9px}.shop-name small{padding:2px 12px;font-size:9px}

.map-illustration{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;background:radial-gradient(ellipse at 55% 40%,#fffdf4,#dcebf1);border-bottom:1px solid #e4d4bb}.map-card.active .map-illustration{background:radial-gradient(#ffffef,#e8edce)}
#workshop[data-panel=maps]{left:3%}.map-country{flex-wrap:wrap;white-space:nowrap}
.dialog{overflow-x:hidden}
.shop-rotate{left:5%;width:25%;top:41.8%}

.shop-search{display:flex;align-items:center;grid-gap:6px;gap:6px;margin:0 0 5px;flex-shrink:0}.shop-search input,.shop-search select{min-width:0;border:1px solid #d9c5b7;border-radius:12px;background:#fffefa;color:#73564b;padding:6px;font-size:11px}.shop-search input{width:42%}.shop-search select{width:36%}.shop-search span{font-size:9px;white-space:nowrap;color:#967f6c}.shop-search input{pointer-events:auto;user-select:text}#shop select{pointer-events:auto}#shopMotion{max-width:35%;font-size:9px}