/* The bottom rotation row is a sibling of the map, never over its parcels. */
.sunny-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:7px 10px;background:#faf4df;border-block:1px solid #d3d9b6;color:#425f49;font:600 12px/1.3 system-ui,sans-serif;flex:0 0 auto}
.sunny-controls label{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.sunny-controls select,.sunny-controls button{font:inherit;min-height:40px;min-width:40px;border:1px solid #b7c5a0;border-radius:10px;background:#fffbed;color:#3d624d;padding:6px 9px;touch-action:manipulation;cursor:pointer;margin:0}
.sunny-controls button[aria-pressed=true]{background:#507d59;color:#fff;border-color:#507d59}
.sunny-controls :disabled{opacity:.5;cursor:default}
.sunny-controls :focus-visible,.sunny-rotation input:focus-visible{outline:3px solid #bc9545;outline-offset:2px}
.sunny-quality-label{margin-left:auto}
#sunnyStatus{flex-basis:100%;font-size:11px;line-height:1.3;min-height:15px}
.sunny-rotation{box-sizing:border-box;flex:0 0 auto;position:relative;z-index:4;padding:7px 16px 6px;background:#faf5e2;border-top:1px solid #c6d0ae;color:#456249;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.sunny-rotation[hidden]{display:none!important}
.sunny-rotation-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font:650 12px/1.2 system-ui,sans-serif}
.sunny-rotation-heading label{font:inherit;margin:0;cursor:pointer}
#sunnyAngle{min-width:42px;text-align:right;color:#94713f;font-variant-numeric:tabular-nums;font-weight:800}
#sunnyRotation{--rotation-fill:12.5%;display:block;box-sizing:border-box;width:100%;height:30px;min-height:30px;padding:0;margin:0;appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:ew-resize;touch-action:pan-y;box-shadow:none}
#sunnyRotation::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,#729369 var(--rotation-fill),#d8dec2 var(--rotation-fill));border-radius:10px}
#sunnyRotation::-moz-range-track{height:6px;background:#d8dec2;border-radius:10px}
#sunnyRotation::-moz-range-progress{height:6px;background:#729369;border-radius:10px}
#sunnyRotation::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border:3px solid #fffae7;border-radius:50%;background:#64895c;box-shadow:0 1px 5px #425c4844}
#sunnyRotation::-moz-range-thumb{width:18px;height:18px;border:3px solid #fffae7;border-radius:50%;background:#64895c;box-shadow:0 1px 5px #425c4844}
#sunnyRotation:active::-webkit-slider-thumb{background:#bb9049}
.sunny-rotation-scale{display:flex;justify-content:space-between;padding-inline:7px;font:10px/1.1 system-ui,sans-serif;color:#7c8b70;pointer-events:none}
.sunny-3d-active #mapWorld,.sunny-3d-active #livingCityLayer,.sunny-3d-active .living-road-layer{display:none!important}
.sunny-3d-active .city .map{position:relative!important;isolation:isolate;background:#d4dfba!important}
.sunny-3d-active #livingQuality,.sunny-3d-active .living-settings>label,.sunny-3d-active #livingQualityHint,.sunny-3d-active .compact-map-controls{display:none!important}
.sunny-help h2{color:#5a744b}
.sunny-identity-svg{display:block;width:100%;height:100%;max-width:100%;aspect-ratio:420/270;object-fit:contain;overflow:visible}
html[data-world=home] .completion-art .sunny-identity-svg,html[data-world=home] #upgradePreview .sunny-identity-svg,html[data-world=home] #quickBuildingArt .sunny-identity-svg,html[data-world=home] #previewArt .sunny-identity-svg{width:100%!important;height:100%!important;max-height:100%;object-fit:contain}
.project-art .sunny-identity-svg{width:100%!important;height:auto!important;max-height:122px;object-fit:contain}
.sunny-tier-mini{display:block;width:100%;height:61px;overflow:hidden;pointer-events:none}
.sunny-tier-mini .sunny-identity-svg{width:100%!important;height:100%!important;object-fit:contain}
.sunny-housing-mini{display:block;width:100%;height:68px;pointer-events:none}
.sunny-housing-mini .sunny-identity-svg{width:100%;height:100%;object-fit:contain}
.sunny-housing-mini svg text,.type-art .sunny-identity-svg text{display:none}
html[data-world=home] .housing-option:has(.sunny-housing-mini){display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;min-height:92px}
html[data-world=home] .wonder-card .wonder-icon:has(.sunny-identity-svg){width:100%;height:132px;font-size:0}
#upgradeTiers:has(.sunny-tier-mini) .tier-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;white-space:normal;min-height:95px;line-height:1.15;text-align:center}
@media(max-width:700px){
 .sunny-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px 38px;gap:4px;padding:5px 8px}
 .sunny-view-label{grid-column:1/3;font-size:11px}
 .sunny-view-label select{margin-left:auto;min-width:65px}
 .sunny-controls .sunny-quality-label{grid-column:3/5;margin:0}
 .sunny-quality-label>span{display:none}
 .sunny-quality-label select{width:100%;font-size:11px;padding:4px}
 .sunny-controls button{min-width:0;padding:4px;font-size:11px;min-height:35px}
 .sunny-controls #sunnyFocusBuilt{grid-column:1}
 .sunny-controls #sunnyLots{grid-column:2}
 .sunny-controls #sunnyFpsHud{grid-column:3}
 .sunny-controls #sunnyHelp{grid-column:4}
 #sunnyStatus{grid-column:1/-1;font-size:10px;min-height:13px}
 .sunny-rotation{padding:5px 12px 5px}
 .sunny-rotation-heading{font-size:11px}
 .sunny-rotation-scale{font-size:9px}
 .sunny-tier-mini{height:42px}
 .sunny-housing-mini{height:48px}
 html[data-world=home] .housing-option:has(.sunny-housing-mini){min-height:73px}
 #upgradeTiers:has(.sunny-tier-mini) .tier-option{min-height:78px;font-size:11px;padding:4px 2px}
 /* The flex map takes remaining height; this row always follows it above the nav. */
 html.gesture-map-ui body.mobile-game[data-mobile-tab=city] .city.card>.sunny-controls{order:-2!important}
 html.gesture-map-ui body.mobile-game[data-mobile-tab=city] .city.card>.sunny-rotation{order:1!important}
 html.gesture-map-ui body.mobile-game[data-mobile-tab=city] .city.card>.map-hint{order:2!important}
}
@media(min-width:701px){
 .sunny-3d-active.gesture-map-ui .city .map{height:clamp(340px,calc(100dvh - 580px),640px)!important;min-height:340px!important;flex:0 0 auto!important}
 .sunny-rotation{margin:0}
}