:root{--ink:#42384f;--paper:#fff3da;--gold:#ffcd62;--mint:#68b9ac;--berry:#ba7198}
body{color:var(--ink);background:radial-gradient(ellipse at 30% 10%,#c3e5e9 0,#8fa7bf 50%,#5f6d8b 100%);font-family:"Microsoft YaHei","PingFang SC",sans-serif}
#app{background:#b9dce1;box-shadow:0 0 100px #31465c5c}button{transition:transform .13s,filter .13s}button:hover{filter:brightness(1.05)}button:focus-visible{outline:3px solid #dc854e}button:disabled{filter:none;opacity:.7}.desktop-wordmark{color:#f7edd49c;text-shadow:0 4px 14px #34456020;transform:rotate(-5deg)}.desktop-wordmark span{color:#eef4e5bd}
.wallet{top:2.3%;left:4%;width:92%;height:5.4%;gap:8px}.wallet button{color:#605064;background:linear-gradient(#fff9e9,#edd7b7);border:2px solid #fff7e6;border-radius:17px;box-shadow:0 4px 0 #8e7e7866,inset 0 -2px #d6bfa1;padding:0 7px}.wallet button:first-child,.wallet button:last-child{background:linear-gradient(#fcf5e4,#e5d5bc);border-radius:15px}.wallet b{text-shadow:none;font-size:clamp(15px,2.2dvh,23px)}.wallet em{color:#7faa8a;font-size:15px}.wallet i{filter:drop-shadow(0 2px 0 #62435040)}
.journey{top:9%;left:19%;width:62%;height:5.7%;border:2px solid #f9e0aa;border-bottom:3px solid #a88c67;background:linear-gradient(#fff2bd,#eecf96);color:#6d5364;border-radius:16px;box-shadow:0 3px 7px #5d61783b;padding:4px 10px}.journey strong{font-size:clamp(10px,1.6dvh,16px)}.journey small{font-size:9px;color:#8f6b71;margin:3px 0}.journey-track{height:5px;border:0;background:#d2b293}.journey-track i{background:#9bb596}.journey>i{height:105%;width:17%}.journey>b{font-size:22px;color:#b0847a}
.graffiti-title{top:17%;left:13%;width:74%;transform:rotate(-4deg);filter:drop-shadow(0 5px 0 #806c7354)}.season-label{color:#fff4dc;font-size:clamp(9px,1.6dvh,15px);-webkit-text-stroke:0;text-shadow:none;background:linear-gradient(#b991be,#99719e);padding:4px 16px;border:2px solid #fff1d6;border-radius:16px;box-shadow:0 2px 0 #715d70;letter-spacing:2px}.graffiti-title h1{font-size:clamp(43px,7.5dvh,73px);letter-spacing:-4px;color:#fff0ae;-webkit-text-stroke:1px #b08059;text-shadow:1px 3px #d99553,2px 5px #916464,0 -2px #fffadb;margin:4px 0}.graffiti-title h1:before{-webkit-text-stroke:8px #fff7e5}.logo-sub{font-size:clamp(10px,1.6dvh,15px);color:#fff8df;background:linear-gradient(#72b9aa,#518e8a);border-color:#d5e9cf;letter-spacing:4px;padding:4px 15px;border-radius:8px;box-shadow:0 2px #476e76}.logo-splash{color:#ffe5a1;font-size:31px;right:-7%;-webkit-text-stroke:2px #fff5de}
.side-rail{top:33%;gap:2.6dvh;width:15%;z-index:4}.side-rail button{background:linear-gradient(145deg,#fff8e6ed,#e5ccb8ed);border:2px solid #fff5df;border-bottom:4px solid #a68b856b;border-radius:20px;padding:6px 2px;box-shadow:0 4px 10px #66718420;color:#664c65}.side-rail i{filter:drop-shadow(0 3px 1px #826a694a);width:83%;height:5.6dvh;margin:auto}.side-rail span{font-size:clamp(8px,1.4dvh,13px);text-shadow:none;margin-top:1px;font-weight:900}.left-rail{left:3%}.right-rail{right:3%}.badge{background:#d9939a;border:2px solid #fff0d6;box-shadow:0 2px #896d6c;font-size:10px}
.wardrobe-pill{position:absolute;top:65.5%;left:28%;width:44%;height:4.4%;border-radius:30px;display:flex;align-items:center;justify-content:center;gap:7px;background:#fff5dee8;border:2px solid #fff9eb;color:#7e6071;font-size:12px;font-weight:900;box-shadow:0 3px #9c8c7855;pointer-events:auto}.wardrobe-pill i{width:25px;height:25px}.wardrobe-pill b{font-size:19px;color:#b18483}
.start-dock{bottom:10%;left:16%;width:68%;filter:drop-shadow(0 5px 0 #8e715475)}.mode-ribbon{background:linear-gradient(#98b6cc,#7f9caf);border:2px solid #d2e8e5;border-bottom:3px solid #617d8d;border-radius:12px;color:#fff8e4;height:4.3dvh;transform:none}.mode-ribbon small{color:#e7f2e7;font-size:8px}.mode-ribbon>span{font-size:12px}.mode-ribbon i{width:32px;height:32px}.start-button{height:8.3dvh;background:linear-gradient(#fff29e 0%,#ffd575 55%,#edb856 100%);border:3px solid #fff4be;border-bottom:5px solid #bc8850;border-radius:18px;box-shadow:inset 0 3px #fffad1;color:#765348;text-shadow:0 2px #ffe8a7}.start-button span{font-size:clamp(22px,3.8dvh,39px);letter-spacing:4px}.start-button b{font-size:22px;color:#b17746}.start-dock p{font-size:9px;color:#4d6977;text-shadow:0 1px #fff4decc;margin-top:9px}
.bottom-nav{height:8.1%;bottom:0;left:0;width:100%;background:linear-gradient(#fdf5e2f5,#e9d9bfe8);border-top:3px solid #fff8e5;box-shadow:0 -5px 20px #4f667324;padding:4px 8px 7px;gap:5px}.bottom-nav button{color:#8b6d7c;border-radius:15px;text-shadow:none;flex:1}.bottom-nav i{height:4.7dvh;filter:drop-shadow(0 2px 0 #98755e45)}.bottom-nav span{font-size:clamp(10px,1.65dvh,14px);text-shadow:none;font-weight:900}.bottom-nav .selected{background:linear-gradient(#f6dfad,#eabf82);border:2px solid #fff0c3;border-radius:17px;box-shadow:0 3px #c1976b;transform:translateY(-4px)}
.dialog{color:#5e4a60;background:linear-gradient(135deg,#fff8e9,#f1dfc6);border:3px solid #fff5df;border-radius:25px;box-shadow:0 0 0 100vmax #354b697d,0 8px 0 #5e587137}.dialog-cap{background:linear-gradient(#92b1b9,#6a949d);border-color:#557e8d;color:#fff8df;text-shadow:0 2px #4b7084;font-size:18px}.dialog h2{color:#695169;font-size:23px}.primary{background:linear-gradient(#ffe99e,#efc274);border-color:#c29967;color:#78543f;box-shadow:inset 0 2px #fff7ca}.secondary,.small-button{background:linear-gradient(#a6cfc5,#6ca89d);border-color:#638b8c;color:#fff9e4;text-shadow:0 1px #688689}.field{border-color:#dcccbd}.field select{background:#fff9e9;border-color:#b2bfb7;color:#716276}.note{color:#9a8588!important}.setting-note{background:linear-gradient(120deg,#967ea5,#779bae)}.character-cards button{background:#e7ddd7;border-color:#c9b6b8;color:#6b566b}.character-cards .active{border-color:#d2a76d;background:#fbebc9}.character-cards img{height:135px}.mission,.record-row{background:#fff8e8;border-color:#dcc8ab}.record-row b{color:#6f9b9c}.obstacle-card{background:#e5e6dc;border-color:#c1cbbd}.guide-grid div{background:#dbe9e5;border-color:#a9c6c0;color:#739d9b}.guide-grid b{color:#6f6277}.top-score,.coin-stat{color:#fffbeb;background:linear-gradient(#5c788ace,#43566bdb);border:2px solid #dbede591;box-shadow:0 3px #263f5d25;text-shadow:0 2px #294762}.pause-button{background:linear-gradient(#b3d8ce,#78a9aa);border-color:#e9f0de;box-shadow:0 3px #63828c;color:#fff8de}.multiplier{color:#ffe19a}.zone-hud{color:#fff8e8;text-shadow:0 2px #668295}.zone-hud .track i{background:#e6c184}.bottom-left{color:#fff5d7;text-shadow:0 2px #5c5b6b}.speed-line b{color:#ffe3a8}.controls button{background:#f6e8ccbf;border:2px solid #fffaeac2;color:#70858d;border-radius:16px;backdrop-filter:blur(5px);box-shadow:0 3px #58758530}#toast{background:linear-gradient(#fff4c6,#f1d498);border:2px solid #fff7dd;color:#89613d;box-shadow:0 4px #a8897260;border-radius:18px;font-size:12px}.chase.warning{background:#cc869bd9;border-color:#f5cbb8}
#loading{color:#fff7df;background:radial-gradient(ellipse at 45% 25%,#91c5c6,#6587a2 65%,#716180)}#loading b{color:#fff0ab;text-shadow:0 3px #a38066}#loading small{color:#f3ecd9}.load-track{background:#5d7b9180;border-color:#d4e3d2}.load-track i{background:linear-gradient(90deg,#eac188,#ffeba9)}
#shop{position:absolute;inset:0;z-index:18;color:#66536d;pointer-events:none;background:linear-gradient(#fff5de1c 0%,transparent 28%,#c4dadd33 46%)}#shop button,#shop input{pointer-events:auto}.shop-header{position:absolute;top:2.4%;left:5%;width:90%;display:flex;align-items:center;gap:10px;height:44px}.shop-back{width:42px;height:42px;background:linear-gradient(#fff8e4,#e9d3b3);border:2px solid #fff8e8;border-radius:14px;box-shadow:0 3px #af9f8e;font-size:25px;color:#81738d}.shop-heading{flex:1}.shop-heading strong{font-size:21px;display:block;text-shadow:0 2px #fff6df}.shop-heading small{font-size:9px;color:#8c8192;letter-spacing:2px}.shop-wallet{padding:8px 12px;display:flex;align-items:center;gap:8px;background:#fff3d8e8;border:2px solid #fffbea;border-radius:15px;color:#987243;font-weight:900;box-shadow:0 3px #b3a392}.shop-wallet i{width:23px;height:23px}.shop-name{position:absolute;top:10%;width:100%;text-align:center}.shop-name small{background:#8b77a9;color:#fff7e0;border:1px solid #e3d1ed;padding:3px 13px;border-radius:30px;font-size:10px}.shop-name h2{font-size:22px;margin:8px 0 4px;color:#625275;text-shadow:0 2px #fff7e2}.shop-name p{font-size:10px;margin:0;color:#7d7788}.shop-rotate{position:absolute;top:41%;left:32%;width:36%;accent-color:#a082aa;height:12px}.shop-drawer{position:absolute;top:46%;left:0;right:0;bottom:0;border-radius:27px 27px 0 0;background:linear-gradient(#fff6e4,#f0e1cb);border:3px solid #fffaf0;box-shadow:0 -4px 30px #68768f26;padding:12px 12px 8px;display:flex;flex-direction:column;pointer-events:auto}.shop-selection{display:flex;justify-content:space-between;align-items:center;padding:0 4px;margin-bottom:9px;font-size:10px;color:#968895}.shop-selection strong{color:#ab8056}.shop-buy-row{display:flex;gap:8px;flex-shrink:0}.shop-buy-row button{border-radius:14px;padding:11px 8px;font-weight:900;font-size:13px}.shop-buy-row #shopBuy{flex:1;background:linear-gradient(#ffe8a8,#efc380);border:2px solid #fff2c6;border-bottom:4px solid #bf9a71;color:#856240;box-shadow:0 1px #a898853b}.shop-buy-row #shopBuy:disabled{background:#e4ddda;color:#9b9198;border-color:#f4ede7;border-bottom-color:#b7acad;opacity:1}.shop-buy-row #shopEarn{background:linear-gradient(#a8d6c3,#78b09d);color:#fff9e5;border:2px solid #ddf0d8;border-bottom:4px solid #6e918b;font-size:11px}.shop-filters{display:flex;gap:6px;flex-shrink:0;padding:12px 0 10px}.shop-filters button{flex:1;border-radius:20px;padding:6px;font-size:11px;color:#a18c99;background:#e9ded5;border:1px solid #ede1d7}.shop-filters .active{color:#fff7e3;background:linear-gradient(#a98fbd,#8e76a4);border-color:#c3add4;box-shadow:0 2px #81748c}.outfit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:auto;min-height:0;align-content:start;padding:4px 2px 16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.outfit-card{position:relative;background:radial-gradient(ellipse at 50% 20%,#fffaf0 0%,color-mix(in srgb,var(--outfit-color),#f7e6d8 78%) 100%);border:2px solid #e4d4c3;border-bottom:4px solid #c8b4b0;border-radius:17px;min-height:152px;padding:5px 4px 8px;color:#715a6e}.outfit-card.active{border-color:#af8eb3;box-shadow:0 0 0 2px #e8d1e0}.outfit-card img{width:100%;height:110px;object-fit:contain;display:block;filter:drop-shadow(0 4px 3px #a0919b30)}.outfit-card strong{display:block;font-size:11px;white-space:nowrap}.outfit-card small{font-size:10px;color:#ac825b;display:block;margin-top:4px}.outfit-state{position:absolute;right:4px;top:4px;z-index:2;background:#fff9e3d9;border-radius:8px;padding:3px 5px;font-size:8px;color:#9b8099}.outfit-card.active .outfit-state{background:#b698bd;color:#fff9eb}
[data-view=shop]>.top,[data-view=shop]>.zone-hud,[data-view=shop]>.bottom-left,[data-view=shop]>.controls,[data-view=shop]>.chase,[data-view=shop]>#powerHUD{display:none}
@media(max-height:700px){.shop-header{top:2%;height:36px}.shop-heading strong{font-size:17px}.shop-name{top:11%}.shop-name h2{font-size:18px}.shop-drawer{padding:8px}.shop-selection{margin-bottom:5px}.shop-buy-row button{padding:7px}.shop-filters{padding:8px 0}.outfit-card img{height:88px}.outfit-card{min-height:125px}.wardrobe-pill{font-size:10px}.side-rail{gap:1.8dvh}.character-cards img{height:92px}}

.shop-footnote{font-size:9px;color:#9a8b94;margin:5px 0 0;text-align:center;line-height:1.5;flex-shrink:0}.shop-rotate{font-size:9px;display:flex;flex-direction:column;align-items:center;gap:2px;top:42.3%;height:auto}.shop-rotate input{width:100%;height:8px}.wardrobe-pill b{font-size:11px}

.wardrobe-pill{top:68.5%}#shopMotion{position:absolute;right:5%;top:41.8%;padding:6px 9px;border:1px solid #fffaed;background:#fff2d9ce;border-radius:12px;color:#9c7d93;font-size:10px}

.release-settings{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 18px;font-size:12px;color:#807084}.release-settings button{font-size:11px;padding:7px 12px}#updateNotice{position:absolute;z-index:60;left:6%;right:6%;top:2%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:2px solid #fff3cb;border-radius:14px;background:#fff1d9;color:#756076;box-shadow:0 3px 14px #46556d40;font-size:12px}#updateNotice[hidden]{display:none}#applyUpdate{background:#839baf;color:#fff8e9;padding:8px 12px;border-radius:9px;font-weight:800}
