/* 2012 Small Street: raised teal panels, gold controls and a roomy skyline. */
:root{--ink:#223c4c;--deep:#087d88;--teal:#089ba9;--cream:#f7f2dc;--gold:#ffd440;--line:#97a8ad;--building-width:320px;--building-height:426.667px}
body{background:#102e54}.game{min-height:0;background:#83cdef}.topbar{position:absolute;inset:12px 18px auto;height:54px;padding:0;gap:14px;background:none;box-shadow:none;z-index:20}.brand{min-width:190px;background:linear-gradient(#26c8dc,#058fa7 49%,#037086 51%,#1c9ead);border:3px solid #d2e5e8;outline:1px solid #335969;border-radius:13px;box-shadow:inset 0 2px 0 #b1f2ff,0 3px 2px #18394c80;text-align:center;padding:3px 14px}.brand-small{color:#c8f9ff;letter-spacing:2px;font:700 8px Arial;margin:0}.brand-name,.brand-name>span{font-size:23px;letter-spacing:0;color:#ffe739;text-shadow:0 2px 0 #81561b,-1px 0 #6b631d,1px 0 #6b631d}.brand-leaf{display:none}.level-badge{min-width:80px;height:47px;padding:0 9px 6px 5px;gap:4px;border-radius:10px;background:linear-gradient(#23b6c9,#066d84);border:2px solid #cbdce1;box-shadow:0 2px 0 #214954}.level-star{font-size:33px;color:#ffe453;text-shadow:0 2px 0 #a87811}.level-badge b{font-size:22px;color:#fff1a1;text-shadow:0 1px #214654}.level-badge small{display:none}.xp-track{bottom:3px;left:10px;width:58px;height:4px;background:#244a5c}.xp-track i{background:linear-gradient(#fff17a,#e6b018)}.resources{gap:11px;justify-content:flex-start;flex:1}.resource,.cards,.residents-stat{height:44px;background:linear-gradient(#2dc8d7 0%,#0ca4b4 44%,#047b90 47%,#128fa3 100%);border:3px solid #d0e3e6;outline:1px solid #4d7481;box-shadow:inset 0 2px 0 #9eeaf4,0 3px 2px #173c5280;min-width:170px;padding-left:7px;gap:7px}.resource b,.cards b{color:#ffe51a;font-size:23px;font-weight:900;text-shadow:0 2px #586b35;letter-spacing:0}.resource .icon{width:34px;height:34px;filter:saturate(1.5)}.resource>button{color:#ffef78;border:1px solid #7a9f84;background:linear-gradient(#fff393,#f5be29 45%,#e49208);font-weight:900;box-shadow:inset 0 1px #ffffbd}.cards{min-width:110px}.residents-stat{min-width:100px}.residents-stat small{color:#ddf6ed;font-weight:700}.buildings-stat{min-width:94px}.utilities{gap:7px;margin-left:auto}.round-button{width:39px;height:39px;border:2px solid #d0e3e9;border-radius:9px;background:linear-gradient(#54c8df,#137b9f 50%,#05627f);box-shadow:0 2px 1px #15384d}.round-button .icon{filter:brightness(1.3) saturate(1.8)}.round-button.active{background:linear-gradient(#8cdb46,#428f1f)}
.playfield{flex:1;min-height:0;height:100%;background:#7ec7ec}.sky{background:linear-gradient(#529dcc 0%,#8cd5ef 43%,#bceafa 70%,#6bc9e7 85%);transition:background 1s}.sun{left:72%;top:115px;width:68px;height:68px;background:radial-gradient(circle at 38% 33%,#fffdd2,#ffe479 67%,#efd353);box-shadow:0 0 45px 15px #fffaac50}.cloud{height:35px;width:218px;background:linear-gradient(#fff,#f0fcff 45%,#b4d6e8);box-shadow:inset 0 -3px 6px #c0dcea,0 4px 13px #367ba925;filter:blur(.3px);opacity:.94}.cloud:before{height:85px;width:100px;background:radial-gradient(circle at 42% 29%,white,#f3fbff 52%,#b9d9e9 90%)}.cloud:after{height:67px;width:84px;background:radial-gradient(circle at 42% 26%,white,#eef9fc 50%,#bad7e7 92%)}.c1{top:178px;left:19%;scale:1.2}.c2{top:285px;left:2%;scale:.9}.c3{top:254px;left:68%;scale:1.1}.c4{top:148px;left:86%;scale:1.4}.distant-city{bottom:210px;height:170px;opacity:.38;gap:17px}.distant-city span{background:linear-gradient(90deg,#578fae,#78adc5);border:0;border-radius:0}.distant-city span:nth-child(4n):before{content:'';position:absolute;left:50%;bottom:100%;height:30px;width:5px;background:#548fae}.distant-city span:after{background-image:repeating-linear-gradient(0deg,transparent 0 9px,#a6cad64d 9px 12px)}.sea{bottom:158px;height:69px;background:repeating-linear-gradient(0deg,#83d9ee 0 8px,#99e7f5 9px 10px,#7ad1e7 11px 17px);border-top:2px solid #cffaff}.distant-hills{display:none}.street-heading{top:82px;left:20px;right:24px}.street-ribbon{font-size:0;color:#fff;text-shadow:0 1px 2px #234b66}.street-ribbon>span:nth-child(2){font-size:13px;background:#1c6c8c7a;border:1px solid #b9e7f780;border-radius:5px;padding:5px 12px}.street-ribbon .icon,.street-ribbon>i{display:none}.weather{color:#eefaff;font-size:11px;text-shadow:0 1px 2px #234b66}.weather #weather-icon{color:#fff486}.weather #clock{font-size:15px}.quest-note{top:126px;left:20px;width:260px;border:2px solid #d1e1dd;border-radius:8px;background:linear-gradient(#217b95e6,#0c4e72e8);box-shadow:inset 0 1px #8bdeee,0 3px 4px #12395660;padding:10px 12px 10px 62px}.quest-note small{color:#9deefa;font-size:9px}.quest-note strong{color:#ffeb73;font-size:14px;text-shadow:0 1px #13405b}.quest-note div>span{color:#ecf9fa;font-size:9px;line-height:1.5;display:block;max-width:169px}.quest-chevron{color:#ffea41}.guide-avatar{height:62px;bottom:0;left:6px}.daily-note{top:128px;right:24px;border:2px solid #dfdcbc;border-radius:8px;background:linear-gradient(#fff794,#efb422 47%,#d69213 48%,#f4c13c);box-shadow:inset 0 1px white,0 3px #9a711b55;padding:7px 12px}.daily-note b{color:#73561a;text-shadow:0 1px #fff2ab}.daily-note small{color:#6d591e}.daily-note .icon{filter:saturate(1.5)}
.buildings{bottom:161px;left:125px}.building-art{background-image:url('assets/buildings-atlas-v2.png');filter:drop-shadow(4px 7px 3px #25324338)}.building-name{left:15.5%;width:62%;top:57.5%;font-size:18px;letter-spacing:.4px;line-height:1.6;color:#fff3aa;font-weight:900;text-shadow:1px 2px 1px #302721,-1px -1px #30302a}.building[data-art='6'] .building-name{color:#613914;text-shadow:0 1px #ffffad}.building-number{left:2.5%;bottom:9%;width:25px;height:31px;border:2px solid #ad9878;border-radius:7px 7px 3px 3px;background:linear-gradient(#fff9d7,#cabf9f);font-size:12px;color:#734b39;box-shadow:1px 2px #715a3c55}.building-actors{left:16%;width:60%;bottom:45%;height:77px;justify-content:center;gap:6px;align-items:flex-end}.building-actors svg{height:77px;width:53px;filter:drop-shadow(1px 2px 1px #221d2240)}.building-stars{top:70%;bottom:auto;left:17%;width:61%;font-size:11px;letter-spacing:1px;color:#ffd620;text-shadow:0 1px #714615;opacity:.9}.building-glow{display:none}.building-status{bottom:calc(100% + 0px);left:12%;translate:0;min-width:70%;border:2px solid #d1e6e3;background:linear-gradient(#22c4cd,#00828d);border-radius:7px;color:#fffde0;font-size:11px;box-shadow:0 3px #28475c80;padding:5px 9px;font-weight:800}.building-status:after{background:#078c95;border-color:#d1e6e3}.building-status.cash{background:linear-gradient(#ffe764,#e7a213);color:#6a4818;border-color:#fff2bf}.building-status.out{background:linear-gradient(#ff7152,#d8281a);color:#fff8c7;border-color:#ffe5c3}.building-status.ready{background:linear-gradient(#adf350,#52a419);color:#23491c;border-color:#edf7d3}.building-status .icon{filter:saturate(1.4)}.building-roof{position:absolute;left:14%;width:62%;bottom:92%;height:100px;filter:drop-shadow(2px 2px 2px #19344260);pointer-events:none}.building-roof svg{width:100%;height:100%}.empty-lot{border:3px dashed #98ba91;border-radius:8px;background:#d6e9ad45;color:#39583a;box-shadow:inset 0 1px #edffcd;margin-left:10px;margin-bottom:20px;width:250px;height:285px}.empty-lot b{color:#365838;font-size:17px}.empty-lot>span{color:#496742}.lot-plus{background:linear-gradient(#ffe15d,#eeb313);color:#614014;border:2px solid #fff1aa;border-radius:8px}.construction{background:repeating-linear-gradient(45deg,#f8d74880 0 12px,#6e674930 12px 24px),linear-gradient(#b7c5c9,#849495);border:5px solid #718a90;border-radius:3px;color:#263b42}
.back-fence{bottom:180px;left:0;height:55px;border-bottom:4px solid #b89055;background:repeating-linear-gradient(90deg,#efc67b 0 3px,transparent 3px 16px),linear-gradient(transparent 4px,#ffdc8b 4px 7px,transparent 7px 40px,#b5894f 40px 44px,transparent 44px)}.sidewalk{bottom:143px;height:27px;background:repeating-linear-gradient(90deg,#cac5b7 0 35px,#aaa79c 35px 37px);border-top:4px solid #eee8d7;border-bottom:5px solid #b7ab92;box-shadow:0 3px 2px #4e3d3955}.road{bottom:72px;height:74px;background:linear-gradient(#887985,#93868d);border-top:1px solid #6d6070}.road-lines{border-color:#f0bf4f;opacity:1;bottom:24px}.crosswalk{opacity:.5}.foreground{height:73px;background:linear-gradient(#675d69,#464753);border-top:4px solid #d1ba90}.prop{bottom:144px}.prop.tree{bottom:147px;height:160px;width:110px;filter:saturate(1.45) drop-shadow(2px 3px 1px #23342630)}.prop.lamp{bottom:145px;height:163px;width:55px;filter:saturate(1.3)}.prop.taxi-stop{bottom:144px;height:121px;width:94px;filter:saturate(1.7)}.person{bottom:151px;width:62px;height:89px}.person svg{height:100%;width:100%}.person{animation:street-walk .52s ease-in-out infinite alternate}.person.paused{animation:none}.person:hover:after{font-size:11px;background:#ffffdd;color:#2b454c;border:1px solid #56818c;border-radius:5px}.taxi-car{bottom:82px;width:155px;height:103px;left:8px;filter:drop-shadow(2px 3px 2px #3c2d3040)}.taxi-car.waiting:after{content:'TAXI';color:#713b17;background:linear-gradient(#fff68d,#ffb919);border:2px solid #fff2a3;border-radius:5px;font:900 11px Arial;position:absolute;right:0;top:0;padding:5px;animation:none}.scene-arrow{top:50%;width:40px;height:57px;border-radius:12px;border:3px solid #fff398;background:linear-gradient(#fff295,#ffdc31 46%,#ec9e09 49%,#ffd544);color:#945c12;font-size:47px;font-weight:900;text-shadow:0 1px #fff2ab;box-shadow:0 4px 0 #986923,0 5px 6px #2a3b5760}.scene-arrow.left{left:11px}.scene-arrow.right{right:11px}.scene-caption{left:24px;bottom:91px;color:#fff1d2;font-size:10px;text-shadow:0 1px #342d40}.street-position{bottom:93px;right:25px;color:#fff1ca}.street-position input{accent-color:#f6c634;width:125px}.scene-caption .online-dot{background:#d5f84c}
.bottom-panel{position:absolute;bottom:7px;left:15px;right:15px;height:69px;padding:0;background:none;border:0;box-shadow:none;z-index:20}.street-summary{position:absolute;bottom:84px;right:0;height:auto;border:0;padding:0;display:block}.street-summary>.street-sign,.street-summary>div{display:none}.collect-button{padding:9px 14px;border:2px solid #fff3c0;border-radius:8px;background:linear-gradient(#ffe870,#ffc320 48%,#e4970c 50%,#efb932);box-shadow:0 3px #7f571a;color:#765014;font-size:12px;font-weight:800}.collect-button b{font-size:15px;color:#604211}.collect-button .icon{filter:saturate(1.8)}.dock{height:66px;gap:8px;max-width:865px;margin:0 auto;padding:0;border:0}.dock>button,.dock>button.taxi-dock{height:61px;border:3px solid #d4e3e2;border-radius:9px;background:linear-gradient(#4cd6df,#139bb4 47%,#087891 49%,#188fa3);box-shadow:inset 0 2px #acecf8,0 3px #204b59;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:7px;padding:6px 13px;min-width:110px;color:#fffaf0;text-shadow:0 1px #315565}.dock>button>b{font-size:15px;color:#fffad6;white-space:nowrap}.dock>button>.icon{width:36px;height:36px;filter:saturate(1.7) brightness(1.08)}.dock>button>small{display:none}.dock>button.taxi-dock{min-width:135px;max-width:155px;background:linear-gradient(#fff47d,#ffd331 47%,#efa40c 49%,#fac42c);border-color:#fff2bf;color:#805115;text-shadow:0 1px #fff697}.taxi-dock>span>b{font-size:15px;color:#754814}.taxi-dock small{font-size:9px;color:#805414;margin-top:2px}.taxi-dock>span>.icon{filter:saturate(1.6)}.dock-divider{display:none}.notification,.taxi-dock i{width:12px;height:12px;right:2px;top:-5px;background:#f64c1e;border:2px solid #fffac1;box-shadow:0 1px 2px #5d381d}.stock-alert{position:absolute;right:0;bottom:141px;padding:8px 13px;border:3px solid #fff0ce;border-radius:8px;background:linear-gradient(#ff795b,#ed3524 50%,#c21a12);box-shadow:0 3px #7a2820;color:#fff335;font-size:12px;font-weight:900;text-shadow:0 1px #8d2916}.stock-alert b{font-size:16px;margin-left:7px}.stock-alert[disabled]{opacity:.6;pointer-events:none}
.modal-layer{background:#0d223b98;backdrop-filter:blur(2px)}.modal{border:4px solid #c8d6d9;outline:1px solid #32617a;border-radius:10px;background:linear-gradient(#fffced,#ecefdc);box-shadow:inset 0 0 0 2px #e8f9f5,0 9px 35px #0e263b90}.modal-head{background:linear-gradient(#27c3d3,#058a9f 50%,#066f85);border-bottom:3px solid #b2c6c8;padding:19px 24px}.modal-head h1{color:#ffe549;font-weight:900;text-shadow:0 2px #366f63;font-size:23px}.modal-head small{color:#c7f8ff;font-size:10px}.close-modal{background:linear-gradient(#fff383,#ffc528 50%,#e8a007);border:2px solid #fff2ac;color:#875816;border-radius:7px;box-shadow:0 2px #9b711e}.modal-intro{color:#496375;line-height:1.8}.section-label{color:#245065;font-size:13px;font-weight:800;border-color:#a9baba}.section-label small{color:#687c84}.btn,.card-button{background:linear-gradient(#3dcad5,#138fa5 47%,#08798e 49%,#1594a5);border:2px solid #b7d5d8;border-radius:6px;color:#fffdec;box-shadow:inset 0 1px #92e6f0,0 2px #48717e;text-shadow:0 1px #315b6a;font-weight:700}.btn.gold,.card-button:not(.locked){background:linear-gradient(#fff080,#ffd132 46%,#e8aa12 49%,#f3c343);color:#76521c;border-color:#ffe8a0;box-shadow:inset 0 1px #fff9c2,0 2px #aa812d;text-shadow:0 1px #fff3a0}.btn.secondary{background:linear-gradient(#eff5f1,#cbdedd);border-color:#a5bdc4;color:#376071;text-shadow:none;box-shadow:inset 0 1px white,0 2px #718992}.tabs{gap:7px}.tabs>button{border:1px solid #91b5bc;border-radius:6px;background:linear-gradient(#f7fcf6,#d3e5df);color:#3d6878;font-size:11px}.tabs>button.selected{background:linear-gradient(#40cbd4,#0b8192);border-color:#65a4ad;color:#fff9bc}.catalog-card,.resident-card,.product-row,.job-row,.staff-card,.mission-row,.taxi-destination,.shop-overview,.resident-detail,.economy-grid>div{border-color:#a9bec2;background:#f6f7e9;border-radius:7px;box-shadow:inset 0 1px white}.catalog-art{background:linear-gradient(#d9ecf1,#cbdadd);border-bottom:1px solid #bdced0}.catalog-card h3,.shop-info h2,.resident-card h3,.resident-detail h2,.product-description h3,.mission-row h3,.settings-row b,.taxi-overview h2{color:#294f67}.catalog-card>small,.shop-info p,.resident-card p,.resident-detail p,.product-description small,.staff-card small,.mission-row p,.settings-row small,.taxi-overview p,.taxi-destination small{color:#637986}.category-tag{background:#087d93;color:#fff6c7;border:1px solid #77bcc8;border-radius:4px}.stars-row{color:#eab708}.stock-track{background:#d4dfdf;border:1px solid #9caeae;border-radius:4px}.stock-track i{background:linear-gradient(#b1e858,#58a528);border-radius:3px}.skill{border:1px solid #a9c3c8;background:linear-gradient(#ecf7f3,#cfdfdc);border-radius:5px}.skill b{color:#07849a}.skill small{color:#5b7884;font-size:9px}.resident-status{background:#d7e5e0;color:#356b75;border-radius:4px}.resident-status.dream{background:#ffeba2;color:#9c6c17}.toast{background:linear-gradient(#eafaf1,#c9e1df);border:2px solid #88b7bf;border-radius:7px;color:#24516a;box-shadow:0 3px #346c8255}.toast.error{background:#fff3d2;color:#8b4a2b;border-color:#d69b65}.toasts{bottom:88px}.classic-build-link{background:linear-gradient(#e8f5ec,#d0e7df);border:1px solid #99bec1;color:#36677d}.classic-build-link small{color:#62808b}.settings-footer{color:#789099}.help-step{background:#e5eee3;border:1px solid #bdd1c6;border-radius:6px}.help-step b{color:#2a5260}.help-step p{color:#627a83}.help-step>span{background:#168c9b;border-radius:6px}.color-swatches button{border-color:#ecf4e6;box-shadow:0 0 0 1px #9ab7bc}.color-swatches button.selected{box-shadow:0 0 0 3px #04889b}.roof-preview{width:145px;height:100px;margin:15px auto 0}.roof-preview svg{width:100%;height:100%}.roof-summary{display:flex;align-items:center;gap:12px;background:#dcebe1;border:1px solid #a8c2bd;border-radius:6px;padding:10px;margin:15px 0}.roof-summary>svg{width:75px;height:48px}.roof-summary>div{flex:1;font-size:12px;color:#396473}.roof-summary small{display:block;font-size:10px;margin-top:4px;color:#697f85}.taxi-upgrade{padding:14px;border:1px solid #acbec1;background:#e4eee4;border-radius:7px;margin:15px 0;display:flex;gap:12px;align-items:center}.taxi-upgrade>div{flex:1;font-size:12px;color:#28596d}.taxi-upgrade small{display:block;font-size:10px;color:#627f87;margin-top:5px}.market-row{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #becfc9}.market-row>.icon{width:32px;height:32px}.market-row>div{flex:1}.market-row b{font-size:12px;color:#245065}.market-row small{font-size:10px;color:#687e83;display:block;margin-top:4px}.market-row .stock-track{width:100%;max-width:280px;margin-top:6px}.market-row>strong{font-size:18px;color:#088b9f}.daily-gift h2{color:#265c6c}.daily-gift p{color:#697e86}.job-row b,.staff-card b{color:#325a6c}.mission-row .reward-line{color:#9a721c}
.night .sky{background:linear-gradient(#071c47,#16315c 47%,#2b5378 78%,#4b7b93)}.night .moon{top:100px;left:73%;width:90px;height:90px;background:radial-gradient(circle at 34% 30%,#fff395,#ffe22b 65%,#efc318);box-shadow:0 0 38px 10px #e4d83625}.night .moon:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 66% 30%,#d9bf2450 0 8px,transparent 9px),radial-gradient(circle at 27% 57%,#e0c72740 0 11px,transparent 12px)}.night .stars{opacity:.9;background-image:radial-gradient(#fff8cc 1px,transparent 2px),radial-gradient(#d0eeff 1px,transparent 1.5px),radial-gradient(#fff4aa 2px,transparent 2.5px);background-size:81px 101px,137px 91px,251px 167px;background-position:15px 17px,49px 63px,75px 98px}.night .cloud{opacity:.15;filter:brightness(.75);box-shadow:none}.night .distant-city{opacity:.38}.night .distant-city span{background:#163955}.night .distant-city span:after{background-image:radial-gradient(#b8cfb680 1px,transparent 1px);background-size:10px 13px}.night .sea{background:repeating-linear-gradient(0deg,#296580 0 8px,#427a91 9px 10px,#255e79 11px 17px);border-color:#668f9f}.night .building-art{filter:drop-shadow(4px 7px 3px #05152f70) brightness(.9) saturate(1.08)}.night .foreground{filter:none;background:linear-gradient(#4d4859,#303847)}.night .road{background:linear-gradient(#62596d,#6b6376)}.night .sidewalk{filter:brightness(.78)}.night .building-actors{filter:brightness(.94)}
@keyframes street-walk{from{translate:0 0;rotate:-1deg}to{translate:0 -1.5px;rotate:1deg}}
@media(min-width:1600px){:root{--building-width:360px;--building-height:480px}.topbar{inset:15px 26px auto;gap:22px}.buildings{left:135px}.building-name{font-size:20px}.building-actors{height:86px}.building-actors svg{height:86px;width:59px}.building-roof{height:115px}}
@media(max-height:780px) and (min-width:800px){:root{--building-width:270px;--building-height:360px}.building-actors svg{height:67px;width:46px}.building-name{font-size:15px}.buildings{bottom:148px}.sidewalk{bottom:129px}.road{bottom:62px;height:68px}.foreground{height:63px}.person{bottom:137px;height:76px;width:53px}.prop{bottom:130px}.prop.tree{bottom:134px}.prop.lamp,.prop.taxi-stop{bottom:130px}.taxi-car{bottom:70px}.scene-caption{bottom:80px}.street-position{bottom:81px}.building-roof{height:82px}.quest-note{top:107px}.daily-note{top:108px}}
@media(max-width:1100px){.topbar{gap:9px;inset:10px 15px auto}.brand{min-width:165px}.brand-name,.brand-name>span{font-size:20px}.resources{gap:7px}.resource{min-width:140px;height:40px}.resource b{font-size:20px}.cards{min-width:91px}.residents-stat{min-width:87px}.buildings-stat{min-width:78px}.level-badge{min-width:70px}.utilities{gap:5px}.round-button{height:35px;width:35px}.dock{max-width:760px;gap:6px}.dock>button{min-width:94px;padding:5px 9px}.dock>button>b{font-size:13px}.dock>button.taxi-dock{min-width:125px}.dock>button>.icon{width:31px;height:31px}.collect-button{font-size:11px;padding:7px 10px}}
@media(max-width:799px){:root{--building-width:255px;--building-height:340px}.topbar{inset:10px 12px auto;height:86px;align-items:flex-start;padding:0;gap:12px}.brand{min-width:150px;height:40px;padding:3px 8px;align-self:auto}.brand-small{font-size:7px;letter-spacing:1px}.brand-name,.brand-name>span{font-size:18px}.level-badge{height:37px;margin-top:1px;min-width:57px;padding:0 5px 5px;gap:1px}.level-star{font-size:25px}.level-badge b{font-size:18px}.xp-track{width:40px;left:7px;bottom:2px;height:3px}.utilities{margin:2px 0 0 auto;gap:7px}.round-button{width:31px;height:31px;border-radius:7px}.round-button .icon{width:21px;height:21px}.resources{position:absolute;top:47px;bottom:auto;left:0;right:0;gap:7px;justify-content:space-between}.resource,.cards,.residents-stat{height:31px;min-width:0;flex:1;padding:0 3px 0 5px;gap:4px;border-width:2px}.resource b{font-size:15px}.resource .icon{width:23px;height:23px}.resource>button{width:19px;height:19px;line-height:15px;font-size:16px}.resource:not(.cards):not(.residents-stat):not(.buildings-stat){flex:1.5}.cards{flex:.8}.residents-stat,.buildings-stat{display:flex;flex:.75}.residents-stat small{font-size:8px}.buildings-stat small{display:none}.street-heading{top:100px;left:13px;right:13px}.street-ribbon>span:nth-child(2){font-size:10px;padding:4px 7px}.weather #clock{font-size:12px}.weather #weather-icon{font-size:19px}#weather-label{display:none}.quest-note{top:146px;left:13px;width:230px;padding:8px 12px 8px 53px}.guide-avatar{width:43px;height:56px;left:5px}.quest-note small{font-size:8px;letter-spacing:0}.quest-note strong{font-size:12px}.quest-note div>span{font-size:8px;max-width:158px}.daily-note{top:148px;right:13px;padding:7px;border-radius:7px}.daily-note div{display:none}.daily-note .icon{height:28px;width:28px}.sun{top:232px;left:73%;width:54px;height:54px}.night .moon{top:225px;left:70%;height:66px;width:66px}.c1{top:296px;left:2%;scale:.8}.c2{top:372px;left:58%;scale:.7}.c3{top:227px;left:80%;scale:.65}.c4{top:253px;left:15%;scale:.75}.buildings{bottom:173px;left:94px}.building-name{font-size:14px;top:57.5%;letter-spacing:0}.building-number{width:20px;height:26px;font-size:10px;left:3%}.building-actors{height:63px;gap:3px}.building-actors svg{width:43px;height:63px}.building-status{font-size:10px;padding:5px 7px;bottom:100%}.building-status .icon{height:18px;width:18px}.building-stars{font-size:9px}.building-roof{height:82px}.sidewalk{bottom:156px;height:23px}.road{bottom:87px;height:70px}.foreground{height:88px}.back-fence{bottom:191px}.sea{bottom:189px;height:57px}.distant-city{bottom:237px;height:155px}.person{bottom:167px;height:75px;width:52px}.taxi-car{bottom:103px;width:125px;height:83px}.prop{bottom:158px}.prop.tree{bottom:161px;height:133px;width:90px}.prop.lamp{bottom:158px;height:138px;width:46px}.prop.taxi-stop{bottom:157px;height:105px;width:79px}.empty-lot{height:230px;width:220px}.scene-arrow{width:28px;height:43px;font-size:33px;border-width:2px;border-radius:8px}.scene-arrow.left{left:5px}.scene-arrow.right{right:5px}.scene-caption{bottom:98px;left:12px;font-size:8px;max-width:210px}.street-position{bottom:97px;right:12px}.street-position input{width:66px}.bottom-panel{bottom:7px;left:9px;right:9px;height:75px;padding:0}.dock{height:75px;gap:5px}.dock>button,.dock>button.taxi-dock{flex:1;min-width:0!important;max-width:none;height:68px;flex-direction:column;padding:5px 3px;gap:3px;border-width:2px;border-radius:8px}.dock>button>.icon{height:29px;width:29px}.dock>button>b{font-size:10px}.taxi-dock>span>b{font-size:10px}.taxi-dock>span>.icon{width:34px;height:27px}.taxi-dock small{display:none}.dock>button.taxi-dock{margin:0}.street-summary{bottom:97px;right:2px}.collect-button{font-size:9px;padding:6px 9px;gap:4px}.collect-button .icon{height:19px;width:19px}.collect-button b{font-size:12px}.stock-alert{bottom:142px;padding:6px 9px;font-size:10px;border-width:2px}.stock-alert b{font-size:13px}.toasts{bottom:91px}.modal-layer{padding:13px}.modal{max-height:91dvh;border-radius:9px;border-width:3px}.modal-head{padding:15px 17px}.modal-head h1{font-size:19px}.modal-body{padding:17px}.catalog-art .building-name{font-size:6px;line-height:1.3}.shop-overview .building-name{font-size:6px;line-height:1.4}.roof-summary{gap:7px;padding:9px}.roof-summary .btn{font-size:9px;padding:7px}.taxi-upgrade{padding:11px;gap:8px}.taxi-upgrade .btn{font-size:10px;padding:8px}.skills .skill small{font-size:8px}.shop-actions{flex-wrap:wrap}.stock-track{max-width:100%}}
@media(max-width:480px){.brand{min-width:147px}.resident-grid{grid-template-columns:1fr}.quest-note{width:229px}.modal-head h1{font-size:18px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.building-name{font-size:14px}.shop-overview .building{width:92px;height:123px}.catalog-art .building{width:95px;height:126px}.modal-body .building-name{font-size:6px}.resources{gap:5px}.resource b{font-size:14px}.residents-stat{flex:.6}.residents-stat small{display:none}.buildings-stat{flex:.6}.resident-detail>svg{width:83px;height:120px}.resident-card>.resident-portrait{height:76px;width:54px}.resident-portrait svg{height:73px;width:50px}.tabs>button{font-size:10px}}
@media(max-height:740px) and (max-width:799px) and (orientation:portrait){:root{--building-width:221px;--building-height:294.667px}.buildings{bottom:157px}.sidewalk{bottom:141px}.road{bottom:79px;height:63px}.foreground{height:80px}.person{bottom:151px;height:66px;width:46px}.prop{bottom:142px}.prop.tree{bottom:145px;height:117px}.prop.lamp{bottom:142px;height:119px}.prop.taxi-stop{bottom:142px;height:90px}.taxi-car{bottom:90px}.building-actors svg{width:37px;height:55px}.building-name{font-size:12px}.building-roof{height:72px}.building-status{font-size:9px}.sun,.night .moon{top:217px}.c1{top:284px}.bottom-panel{height:69px}.dock{height:69px}.dock>button,.dock>button.taxi-dock{height:63px}.scene-caption,.street-position{bottom:88px}.street-summary{bottom:85px}.stock-alert{bottom:126px}}
@media(max-height:450px) and (orientation:landscape){:root{--building-width:157px;--building-height:209.333px}.topbar{inset:7px 13px auto;height:39px;align-items:center;gap:8px}.brand{min-width:146px;height:36px}.brand-name,.brand-name>span{font-size:17px}.brand-small{font-size:6px}.level-badge{height:33px;min-width:56px;margin:0}.level-star{font-size:25px}.level-badge b{font-size:17px}.xp-track{width:39px;left:8px}.resources{position:static;justify-content:center;flex:1;gap:6px}.resource,.cards,.residents-stat{min-width:0;height:32px;flex:1}.resource b{font-size:16px}.resource .icon{height:24px;width:24px}.resource>button{height:19px;width:19px;font-size:16px}.resource:not(.cards):not(.residents-stat):not(.buildings-stat){flex:1.5}.residents-stat small{display:none}.buildings-stat{flex:.7}.utilities{margin:0}.round-button{width:29px;height:29px}.street-heading{top:54px;left:15px;right:17px}.street-ribbon>span:nth-child(2){font-size:9px;padding:3px 6px}.weather #clock{font-size:10px}.quest-note,.daily-note{display:none}.sun{top:70px;width:41px;height:41px}.night .moon{top:58px;width:48px;height:48px}.c1{top:104px;scale:.7}.c2{top:158px;scale:.65}.c3{top:150px;scale:.7}.c4{top:85px;scale:.65}.buildings{left:85px;bottom:103px}.building-name{font-size:8px;top:57.5%}.building-actors{height:39px;gap:2px}.building-actors svg{width:27px;height:39px}.building-status{font-size:7px;padding:3px 5px;border-width:1px}.building-status .icon{height:13px;width:13px}.building-status:after{height:6px;width:6px;bottom:-4px}.building-number{width:14px;height:19px;font-size:8px;left:3%;bottom:8%}.building-stars{font-size:6px}.building-roof{height:51px}.sidewalk{bottom:91px;height:16px}.road{bottom:48px;height:44px}.foreground{height:49px}.back-fence{bottom:116px;height:27px}.sea{bottom:117px;height:34px}.distant-city{bottom:149px;height:95px}.person{bottom:99px;height:47px;width:33px}.prop{bottom:92px}.prop.tree{bottom:95px;height:90px;width:60px}.prop.lamp{bottom:92px;height:87px;width:31px}.prop.taxi-stop{bottom:92px;height:68px;width:51px}.prop.bench{width:55px;height:27px}.taxi-car{bottom:57px;height:57px;width:86px}.bottom-panel{bottom:4px;left:80px;right:80px;height:44px}.dock{height:44px;max-width:650px;gap:6px}.dock>button,.dock>button.taxi-dock{height:40px;min-width:0!important;max-width:none;border-width:2px;padding:3px 6px;flex-direction:row;gap:5px;flex:1}.dock>button>.icon{height:24px;width:24px}.dock>button>b,.taxi-dock>span>b{font-size:10px}.taxi-dock small{display:none}.dock>button.taxi-dock{margin:0}.taxi-dock>span>.icon{height:22px;width:28px}.street-summary{display:block;position:fixed;bottom:59px;right:15px}.collect-button{font-size:8px;padding:4px 7px;border-width:1px}.collect-button b{font-size:10px}.collect-button .icon{height:16px;width:16px}.stock-alert{position:fixed;bottom:96px;right:15px;padding:4px 7px;font-size:8px;border-width:1px}.stock-alert b{font-size:10px}.scene-caption{bottom:55px;left:14px;font-size:7px}.street-position{display:none}.scene-arrow{width:24px;height:33px;font-size:28px;border-width:2px}.empty-lot{height:142px;width:145px;margin-bottom:8px;gap:7px}.empty-lot b{font-size:11px}.empty-lot>span{font-size:8px}.empty-lot svg{height:42px;width:42px}.empty-lot .lot-plus{height:26px;width:26px;font-size:20px}.toasts{bottom:53px}.modal-layer{padding:9px}.modal{max-height:95dvh}.modal-head{padding:10px 17px}.modal-head h1{font-size:17px}.modal-body{padding:15px 20px}}
@media(prefers-reduced-motion:reduce){.person{animation:none}}
.building[data-art='4'] .building-name,.building[data-art='5'] .building-name,.building[data-art='6'] .building-name,.building[data-art='7'] .building-name{top:53.5%}
.building[data-art='4'] .building-actors,.building[data-art='5'] .building-actors,.building[data-art='6'] .building-actors,.building[data-art='7'] .building-actors{bottom:49%}
.modal-body .building-name{font-size:7px;line-height:1.5;letter-spacing:0}
.building-roof{bottom:80%;left:12%;width:67%;height:160px}
.building:has(.building-roof) .building-status{bottom:calc(100% + 105px)}
.roof-preview{height:110px;width:160px}
@media(max-width:799px){.building-roof{height:127px}.building:has(.building-roof) .building-status{bottom:calc(100% + 80px)}}
@media(max-height:740px) and (orientation:portrait){.building-roof{height:111px}}
@media(max-height:450px) and (orientation:landscape){.building-roof{height:78px}.building:has(.building-roof) .building-status{bottom:calc(100% + 42px)}}
@media(min-width:800px){.modal-intro{font-size:12px}.product-description h3{font-size:13px}.product-description small{font-size:11px}.resident-card h3{font-size:14px}.resident-card p{font-size:11px}.settings-row b{font-size:13px}.settings-row small{font-size:11px}.btn{font-size:12px}.mission-row h3{font-size:13px}.mission-row p{font-size:11px}}