
/* Reference-inspired toy UI */
:root{--brown:#704b24;--cream:#f5f0d8;--gold:#edca65}
#shell.at-home #game{visibility:hidden}
#home{padding:0;background:url('assets/home.webp?v=267ddf5e237b68fb') center center/cover no-repeat;pointer-events:none}
.home-top{position:absolute;inset:6% 4% auto}.home-badge,.home-title{display:none}
.home-top button{margin-left:auto;background:linear-gradient(#70d4ff,#20a1e6);color:white;text-shadow:0 2px #177bac}
#coinWallet,#shell.at-home #coinWallet{top:6.7%;left:4%;height:32px;min-width:95px;padding:0 14px 0 33px;background:linear-gradient(#fff,#dfe8ff);border:0;border-radius:18px;color:#20597c;font-size:22px;box-shadow:0 3px #a5a4c2;pointer-events:auto;cursor:pointer;z-index:9}
.coin-icon{position:absolute;left:-9px;top:-7px;width:42px;height:42px;background:none;border:0;box-shadow:none}.coin-icon .art{width:47px;height:47px}
.art{display:inline-block;width:100px;height:100px;flex-shrink:0;background-image:url('assets/icons.webp?v=7189d0733a88a44d');background-size:300% 300%;background-repeat:no-repeat;vertical-align:middle;filter:drop-shadow(0 3px 2px #51331c24)}
.art-coins{background-position:0 0}.art-vip{background-position:50% 0}.art-jumble{background-position:100% 0}
.art-arrange{background-position:0 50%}.art-spot{background-position:50% 50%}.art-shop{background-position:100% 50%}
.art-supply{background-position:0 100%}.art-spin{background-position:50% 100%}.art-lock{background-position:100% 100%}
.art.tiny{width:29px;height:29px;margin-right:4px}
.home-side{position:absolute;top:17%;display:flex;flex-direction:column;gap:16px;width:23%;pointer-events:auto}.home-left{left:4%}.home-right{right:4%}
.home-side button{position:relative;background:none;padding:0;width:100%;height:88px;border-radius:30px;filter:drop-shadow(0 4px 1px #5f6c8540)}.home-side .art,.noads{width:74px;height:74px;border-radius:50%;background-color:#b8d6fa;outline:3px solid #f9f8ff;box-shadow:0 3px #9979c4}
.home-side b{position:absolute;bottom:-3px;left:-2%;width:104%;border-radius:13px;background:linear-gradient(#fff,#d4e5ff);padding:4px 0;color:#21587b;font-size:clamp(12px,4.5cqw,20px);text-shadow:0 1px #fff}
.home-side i{position:absolute;right:0;top:0;background:#ff5716;border:2px solid #ffe3a0;border-radius:50%;color:white;font-style:normal;width:20px;height:20px}
.noads{display:inline-grid;place-items:center;background:linear-gradient(#ff8660,#f33);color:white;font-size:25px;font-weight:900;text-decoration:line-through;text-decoration-thickness:4px}
#homeLevel{position:absolute;top:43%;left:38%;width:34%;text-align:center;background:none;color:#344451;font-size:clamp(15px,4.5cqw,25px);font-weight:900;text-shadow:0 1px #fff;padding:0}
#homeLevel small{display:block;font-size:clamp(10px,2.8cqw,16px);color:#ffd443;text-shadow:0 2px #66358c;margin-bottom:3px}
.home-bottom{bottom:11%;left:21%;right:21%}#play{font-family:Arial,sans-serif;font-size:clamp(32px,10cqw,58px);font-weight:900;font-style:normal;padding:13px 0;background:linear-gradient(#4bec22,#1dcc12);border:0;outline:5px solid #d9e2e7;border-radius:22px;box-shadow:0 7px #38900e,0 12px #b1bac1;color:#fff;-webkit-text-stroke:1.2px #285226;paint-order:stroke fill;text-shadow:0 2px #285226}
.home-nav{position:absolute;top:calc(100% + 20px);left:0;right:0;justify-content:center;margin:0}.home-nav span{display:none}.home-nav button{padding:6px 18px;background:#eef7ffdc}
#boosterBar{position:absolute;left:10%;right:10%;bottom:4.6%;display:flex;gap:9%;height:7.8%;z-index:3}
#boosterBar button{position:relative;flex:1;min-width:0;background:linear-gradient(#5ec9ff,#1b9de2);border:3px solid #d1e9ee;border-radius:19px;box-shadow:0 5px #7ca4b7,0 7px #fff7;color:white;padding:0}
#boosterBar .art{position:absolute;left:4%;top:-25%;width:92%;height:90%}
#boosterBar b{position:absolute;bottom:5%;left:0;right:0;font-size:clamp(12px,3.8cqw,20px);-webkit-text-stroke:1px #315773;paint-order:stroke fill}
#boosterBar .amount{position:absolute;right:-8px;top:-15px;min-width:23px;height:23px;border:2px solid #ffe0b0;border-radius:50%;background:#fb6a22;line-height:19px;font-size:14px}
#boosterBar .amount:empty{display:none}#boosterBar button.locked .art{left:20%;width:60%;height:65%}
footer{bottom:.5%;height:3%;left:9%;right:9%}footer #jumble{display:none}footer #hint{height:100%;width:38%;border:0;background:none;box-shadow:none;color:#426175;font-size:10px;padding:0}footer #hint span{display:none}footer div{display:none}
#overlay{background:#000b;backdrop-filter:none;z-index:10;padding:11%}
#overlay section{background:var(--gold);border:3px solid #ffdf7d;border-radius:30px;padding:16px 12px 22px;box-shadow:0 7px #a18432,inset 0 -5px #d6ac49;max-height:88%;overflow:auto}
#modalTitle{font-family:'Arial Rounded MT Bold','Arial Black',Arial,sans-serif;font-size:clamp(24px,7.5cqw,44px);font-style:normal;font-weight:900;color:white;-webkit-text-stroke:1.4px #6c361d;paint-order:stroke fill;text-shadow:0 2px #6c361d;margin:0 25px 18px;line-height:1.08}
#modalIcon{background:#eae3c8;border:8px solid #f7f2db;border-bottom:0;border-radius:22px 22px 0 0;margin:0 0 0;padding:10px 0 0;font-size:44px}
#modalIcon:empty{display:none}#modalIcon .art{width:145px;height:145px;max-width:55cqw;max-height:55cqw}
#modalText{margin:0 0 12px;background:#eae3c8;border:8px solid #f7f2db;border-top:0;border-radius:0 0 18px 18px;padding:12px 8px 17px;color:#76532e;font-weight:900;font-size:clamp(13px,4.2cqw,23px);line-height:1.18;white-space:pre-line}
#modalText:empty{display:none}
#primary,#secondary{display:inline-flex;align-items:center;justify-content:center;width:calc(50% - 7px);min-height:48px;font-size:clamp(17px,5.5cqw,29px);margin:4px 3px;padding:10px 4px;border-radius:16px;font-weight:900;color:#fff;-webkit-text-stroke:1px #385727;paint-order:stroke fill;text-shadow:0 2px #385727;border:1px solid #b8ef8d;box-shadow:0 5px #2fa51b,inset 0 -5px #26bd14}
#primary.green,#secondary.green,.green{background:linear-gradient(#51ef39,#24d314)}
#primary.orange,#secondary.orange,.orange{background:linear-gradient(#ffd820,#ffb300);border-color:#ffe58c;box-shadow:0 5px #d98e13,inset 0 -5px #f0a000;-webkit-text-stroke:1px #835226;text-shadow:0 2px #835226}
#primary:has(+ #secondary[hidden]),#primary[hidden]+#secondary{width:80%}
#modalClose,.round-close{background:linear-gradient(#ffac2e,#ff6c0c);color:white;width:32px;height:36px;border-radius:50%;font:900 28px Arial;border:1px solid #ffc871;box-shadow:0 3px #c66410;position:absolute;right:10px;top:10px;z-index:3;padding:0}
#featureBody{background:#f5f0da;border-radius:15px;color:#735029}
#featureBody:empty{display:none}
#toHome{font-size:16px;margin:12px auto 0;padding:9px;color:#735029;background:#fff6d9;box-shadow:0 3px #c4aa70}
#overlay .supplies{background:linear-gradient(#49b6ef,#a05af2);border:5px solid #70d3ff}
.supplies #modalTitle{color:#dffbff;-webkit-text-stroke:1px #3a4f8d}
.supplies #modalIcon{display:none}.supplies #modalText{background:none;border:0;color:white;padding:5px;font-size:16px}.supplies #featureBody{background:none}
.supply-row,.shop-row,.setting-row{display:flex;align-items:center;gap:8px;background:#ffffff28;padding:6px;border:1px solid #fff3;border-radius:14px;margin:6px 0}
.supply-row .art{width:57px;height:57px}.supply-row b{font-size:23px;color:white;flex:1;-webkit-text-stroke:1px #563e7d;paint-order:stroke fill}.supply-row button{width:40%;font-size:17px;padding:7px;margin:0;background:linear-gradient(#64ed39,#1bc917);box-shadow:0 4px #33a027}.supply-row button:disabled{background:#aaa;box-shadow:0 3px #888;opacity:.8}
.shop-row .art{width:58px;height:58px}.shop-row div{flex:1;text-align:left}.shop-row small{display:block;font:700 10px Arial;margin-top:5px}.shop-row button{width:30%;font-size:14px;padding:10px 3px;margin:0;background:#ffc62b;box-shadow:0 3px #cf951d;color:#6e4215}
.service-note{font-size:11px;padding:12px}.setting-row b{flex:1;text-align:left}.setting-row button{margin:0;width:64px;padding:7px;background:#b8ad93;box-shadow:none}.setting-row .on{background:#1dde20}.text-link{background:none!important;box-shadow:none!important;color:#79532c!important;text-decoration:underline;font-size:16px;padding:9px;margin:0}
#overlay .victory,#overlay .lucky{background:transparent;border:0;box-shadow:none;overflow:visible;padding:0}
.victory #modalIcon,.lucky #modalIcon{background:none;border:0;padding:0}
.mascot{width:80%;max-height:34dvh;object-fit:contain}
.victory #modalTitle{position:relative;z-index:1;font-size:clamp(29px,9.5cqw,48px);color:#ffdc39;-webkit-text-stroke:2px #9b501a;text-shadow:0 4px #33c5f2,3px 0 #33c5f2,-3px 0 #33c5f2;margin:0 -20px 15px;order:1}
.victory{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.victory #modalIcon{order:0;width:100%}.victory #modalTitle{order:1;width:100%}.victory #featureBody{order:2;width:100%;background:none}.victory #modalText{order:3;background:none;border:0;color:white;font:700 12px Arial;width:100%;padding:8px}.victory #primary,.victory #secondary{order:4;width:45%;margin:15px 4px}
.win-coins .art{width:120px;height:120px}.win-coins strong{display:block;color:#ffe548;font-size:36px;margin-top:-12px;-webkit-text-stroke:1px #b05b10;paint-order:stroke fill}
.lucky #modalTitle{color:#ffde42;-webkit-text-stroke:2px #9e5b23;text-shadow:0 4px #27bde7}.lucky #modalText{background:none;border:0;color:#fff;font-size:40px}.lucky #modalIcon .art{width:200px;height:200px;filter:drop-shadow(0 0 20px gold)}
.ad-preview{display:flex;align-items:center;flex-direction:column;padding:14px;background:linear-gradient(#abe7ff,#f8e8a9);border-radius:15px}.ad-preview span{font:700 11px Arial;margin:5px}.ad-preview .art{width:85px;height:85px}.ad-panel #modalText{font:700 12px Arial}
#spinScreen{position:absolute;inset:0;z-index:8;background:linear-gradient(#54357da6,#a5c3d580 28%,#7845b5dc 80%),url('assets/home.webp?v=267ddf5e237b68fb') center/cover;display:flex;align-items:center;flex-direction:column;padding-top:14%}
#spinScreen h1{background:linear-gradient(#e4ddf4,#b9aedb);border:7px solid #73549b;border-radius:28px;box-shadow:0 5px #583d79;color:#fff6ad;-webkit-text-stroke:1px #4f2b7c;paint-order:stroke fill;font-size:clamp(27px,8.7cqw,48px);padding:8px 25px;margin:0;width:84%;text-align:center}
.wheel-wrap{position:relative;width:95%;aspect-ratio:1;margin-top:5%}#wheelCanvas{width:100%;height:100%}.wheel-pointer{position:absolute;left:calc(50% - 15px);top:1%;width:30px;height:45px;background:linear-gradient(#ffea5c,#ffb825);clip-path:polygon(0 0,100% 0,70% 80%,50% 100%,30% 80%);z-index:1}
#spinInfo{color:#fff;font:900 17px Arial;text-shadow:0 2px #492b6e;margin:3px 0 10px}#spinProgress{width:72%;height:23px;accent-color:#24e5ed}#spinButton{position:relative;z-index:2;width:54%;margin-top:14px;padding:11px;border-radius:18px;border:2px solid #b1f2aa;font-size:27px;color:white;font-weight:900;box-shadow:0 4px #268e26}
.dashboard{position:absolute;bottom:-15%;height:35%;width:120%;border-radius:50% 50% 0 0;background:linear-gradient(#a875d2,#47236e);border:8px solid #c3a0e5;display:grid;place-items:start center;padding-top:25px}.steering{width:48%;aspect-ratio:1;border:22px solid #9762bb;border-radius:50%;box-shadow:0 0 0 5px #cea8df,inset 0 0 0 5px #744397;background:radial-gradient(circle,#95bd45 0 17%,#663e88 18% 26%,transparent 27%),conic-gradient(transparent 0deg 75deg,#a16ac8 76deg 105deg,transparent 106deg 250deg,#a16ac8 251deg 282deg,transparent 283deg)}
#boosterFx{position:absolute;left:15%;top:36%;width:70%;z-index:12;pointer-events:none;text-align:center;animation:fxpop .4s ease-out}
#boosterFx .art{display:block;margin:auto;width:170px;height:170px;filter:drop-shadow(0 0 20px #fff78d)}#boosterFx strong{color:#fff9a1;font-size:25px;-webkit-text-stroke:1px #71431d;paint-order:stroke fill;text-shadow:0 3px #6c3384}
.effect-vip{animation:flypickup 2.2s ease-in-out forwards!important}.effect-arrange{background:radial-gradient(ellipse,#ffffb077,transparent 70%)}
@keyframes fxpop{from{transform:scale(.4)}to{transform:scale(1)}}@keyframes flypickup{0%{transform:translate(-90px,220px) scale(.3)}35%{transform:translate(0,0) scale(1)}70%{transform:translate(0,0) scale(1)}100%{transform:translate(230px,-450px) scale(.4)}}
#cancelVip{position:absolute;bottom:15%;left:20%;width:60%;padding:12px;border-radius:18px;background:#ffcc44;color:#613b1b;z-index:5;font-weight:bold}
button:disabled{cursor:default;filter:grayscale(.7);opacity:.7}#levelGrid button{font-size:17px}#modalTitle{position:relative}#modalTitle::after{content:none}

#modalTitle{font-size:clamp(23px,6.8cqw,37px);margin:2px 18px 15px}#overlay section{scrollbar-width:thin}#overlay .supplies{padding:20px 10px 14px}.supplies #modalTitle{margin-bottom:20px;font-size:clamp(22px,6.6cqw,37px)}.supplies #modalText{font-size:15px;margin:12px 0 0}.supply-row{padding:5px;margin:5px 0}.supply-row .art{width:48px;height:48px}.supply-row b{font-size:22px}.supply-row button{font-size:17px}.shop #modalIcon{display:none}.shop #modalText{background:none;border:0;font-size:12px;padding:8px}#homeLevel{top:42.8%;color:#263c5d;text-shadow:none}#homeLevel small{margin:0 0 1px}

#spinScreen{padding-top:13dvh}.wheel-wrap{margin-top:3%}

.boost-pack{background:linear-gradient(#dc63fc,#8e3ed3);border:3px solid #c77ef1;border-radius:16px;padding:10px;color:white;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}.boost-pack strong,.boost-pack small{width:100%}.boost-pack>.art{width:65px;height:65px}.boost-pack>b{font-size:25px}.boost-pack small{font:700 11px Arial}.peek-map{background:transparent!important}.peek-map section{opacity:.04}.peek-map section #holdMap{opacity:1}

#spinHelp{position:absolute;left:5%;bottom:29%;border-radius:50%;background:#20b8f0;color:white;border:2px solid #b4e9ff;width:24px;height:24px;font:bold 17px Arial;z-index:2}

.art-arrange,.art-spot,.art-shop{clip-path:inset(0 0 7% 0)}.fail-cross{display:inline-block;width:80px;height:80px;position:relative;margin:20px}.fail-cross:before,.fail-cross:after{content:"";position:absolute;left:29px;top:0;width:25px;height:80px;border-radius:14px;background:linear-gradient(#ff9a19,#f46808);border:2px solid #c66518;box-shadow:2px 4px 2px #91541955;transform:rotate(45deg)}.fail-cross:after{transform:rotate(-45deg)}

#overlay .rescue{display:flex;flex-wrap:wrap;justify-content:center;padding:14px 12px}.rescue #modalTitle{order:0;width:100%;margin-bottom:6px}.rescue #modalIcon{order:1;width:100%}.rescue #modalIcon .art{width:100px;height:100px}.rescue #modalText{order:2;width:100%;padding:8px;margin:0;font-size:14px}.rescue #primary,.rescue #secondary{order:3;width:46%;margin:7px 3px;padding:10px;font-size:22px}.rescue #featureBody{order:4;width:100%}.rescue .boost-pack{padding:5px}.rescue .boost-pack>.art{width:40px;height:40px}.rescue .boost-pack strong{font-size:16px}.rescue .boost-pack>b{font-size:21px}.rescue .text-link{font-size:12px;padding:5px;margin:1px}.rescue #holdMap{width:100%}

.art-arrange,.art-spot,.art-shop{clip-path:inset(0 7% 7% 7%)}

.video-offer{display:block;font:700 13px Arial;color:#6c4925;padding:7px}#boosterBar .amount{min-width:24px;white-space:nowrap;font-size:12px}

/* v0.14.1: separate HUD controls and embossed home lettering */
#shell:not(.at-home) #coinWallet{
 top:calc(1.8% + env(safe-area-inset-top)/3 + 11.04cqw + 17px);
}
.home-side b{
 color:#fff8dd;font-weight:900;letter-spacing:.15px;
 -webkit-text-stroke:1.15px #1d5479;paint-order:stroke fill;
 text-shadow:0 1px 0 #286c97,0 2px 0 #17476b,0 3px 0 #103853,0 4px 3px #12355355;
 background:linear-gradient(180deg,#ffffff 0%,#eef8ff 48%,#c9e1f5 100%);
 border-top:1px solid #fff;box-shadow:inset 0 -2px 0 #93b9d4,0 2px 0 #7599b6;
 padding:5px 0 7px;
}
#homeLevel{top:42.2%;font-size:clamp(14px,4.4cqw,24px);line-height:1.1;color:#fff3ae;
 -webkit-text-stroke:1px #55317b;paint-order:stroke fill;
 text-shadow:0 1px #794599,0 2px #542c74,0 3px #361b51,0 4px 3px #3c225d55}
#homeLevel small{color:#ffe75b;font-size:clamp(9px,2.6cqw,14px);line-height:1.15;margin-bottom:3px;
 -webkit-text-stroke:.65px #9f591c;paint-order:stroke fill;
 text-shadow:0 1px #b87021,0 2px #713c19,0 3px 2px #50311a44}
#play{text-shadow:0 1px #376a21,0 2px #2b5719,0 3px #214512,0 4px 2px #183a2855;
 box-shadow:inset 0 2px 1px #b8ff81, inset 0 -4px 1px #20ae13,0 7px #38900e,0 12px #b1bac1}
footer #hint{width:30px;height:24px;min-width:30px;line-height:24px;font-size:18px;
 background:linear-gradient(#fff3a9,#ffd664);border:1px solid #fff5c9;border-radius:9px;
 color:#875515;box-shadow:0 2px #b38738;text-shadow:0 1px #fff8c6;margin:auto;padding:0}

footer{bottom:1%;height:26px}footer #hint{align-self:center}

/* Readable complementary lettering on pale blue and cream panels */
.home-side b{color:#16476b;-webkit-text-stroke:.5px #103651;paint-order:stroke fill;text-shadow:0 -1px 0 #ffffff,0 1px 0 #8fb3cf,0 2px 0 #527d9d,0 3px 2px #183c5c35;background:linear-gradient(180deg,#ffffff 0%,#edf7ff 48%,#cde4f6 100%)}
#homeLevel{color:#452764;-webkit-text-stroke:.45px #321b4d;text-shadow:0 -1px 0 #fff6dc,0 1px 0 #b18ba9,0 2px 0 #825b86,0 3px 2px #43284b35}
#homeLevel small{color:#92430e;-webkit-text-stroke:.3px #71320a;text-shadow:0 -1px 0 #fff2b9,0 1px 0 #e4ad64,0 2px 0 #bd7e3b}
.home-nav button{color:#16476b;text-shadow:0 1px #fff}

#toast.spot-notice{top:45.5%;bottom:auto;left:7%;width:86%;padding:7px 10px;border-radius:14px;background:rgba(238,247,255,.65);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid #ffffff70;box-shadow:0 3px 12px #25465a18;color:#264e65;font-size:clamp(11px,3.1cqw,15px);font-weight:700;text-shadow:0 1px #ffffff90;z-index:4;pointer-events:none}

.level-pages{display:flex;align-items:center;gap:6px;padding:6px}.level-pages button{flex:1;width:auto!important;font-size:13px!important;padding:9px 4px!important;margin:0!important}.level-pages b{font-size:13px;white-space:nowrap}.level-pages button:disabled{opacity:.35}#levelGrid{max-height:43dvh;overflow-y:auto;touch-action:pan-y}#levelGrid button{font-size:15px;min-height:42px}

.level-picker #modalIcon{display:none}.level-picker #modalTitle{font-size:24px;margin:5px 26px 16px 0}.level-picker #modalText{font-size:13px;margin-bottom:0;padding:10px 6px}.level-picker #levelGrid{margin-top:4px;max-height:43dvh}.level-picker #featureBody{margin-top:8px}

.online-announcement{position:absolute;left:8%;right:8%;top:10%;padding:12px 16px;border-radius:12px;background:#fffbebed;color:#513c20;font:600 14px/1.5 system-ui;z-index:12;pointer-events:auto;max-height:140px;overflow:auto;white-space:pre-wrap}.online-announcement~.online-announcement{display:none}

/* True deadlock recovery occupies the gap between bays and parked cars. */
#stuckRecovery{position:absolute;left:3%;right:3%;top:45.6%;z-index:5;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:12px;background:#fff8e9ed;backdrop-filter:blur(7px);border:1px solid #fff;box-shadow:0 3px 10px #213d5624;color:#73491d;font-size:clamp(10px,2.8cqw,14px);font-weight:900;line-height:1.2}#stuckRecovery[hidden]{display:none}#stuckRecovery span{flex:1}#stuckRecovery small{font-size:.78em;font-weight:700}#stuckRecovery button{flex:none;border:1px solid #fff8;background:linear-gradient(#47de5c,#15a63d);box-shadow:0 3px #08792a;border-radius:10px;padding:9px 7px;color:white;font:900 clamp(10px,2.9cqw,14px)/1.1 'Arial Rounded MT Bold',Arial,sans-serif;cursor:pointer}#stuckRecovery button:disabled{opacity:.4}#stuckRecovery #stuckOptions{background:#4c9fe6;box-shadow:0 3px #226cae;padding:7px;font-size:20px}.traffic-blocked #instruction,.traffic-blocked #progress{visibility:hidden}.rewind-note{font-size:12px;line-height:1.4;color:#756449;margin:8px 0}
