*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,sans-serif;background:#101b28;color:#e8f1fa}body{display:flex;flex-direction:column}button,select,input{font:inherit}button,select{color:inherit;background:#26394b;border:1px solid #466078;border-radius:7px;padding:8px 11px;cursor:pointer}button:hover{background:#375269}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #6ef0cd;outline-offset:2px}header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid #304154;gap:12px}header a{color:#a5b8cd;font-size:14px;text-decoration:none}h1{font-size:26px;letter-spacing:-1px;margin:0}h1 span{color:#65e3bd}.time{display:flex;gap:10px;align-items:center;font-size:14px}.stats{display:flex;justify-content:space-around;padding:12px;background:#1b2a3a;gap:12px}.stats div{font-size:13px;color:#b4c6da}.stats strong{display:block;font-size:22px;color:white;margin-top:3px}main{display:grid;grid-template-columns:218px 1fr;flex:1;min-height:0}aside{padding:16px;background:#172535;overflow:auto;border-right:1px solid #304154}h2{font-size:14px;margin:16px 0 9px;color:#b4c6da;font-weight:600}.mode label{display:block;font-size:14px;margin-bottom:7px}.mode select{width:100%}#tools{display:grid;gap:6px}.tool{display:flex;justify-content:space-between;align-items:center;text-align:left;border-left:4px solid var(--color);font-size:14px}.tool small{color:#b4c6da}.tool[aria-pressed=true]{background:#315c65;border-color:#6ee1c0;color:white}#toolHelp{font-size:14px;line-height:1.5;color:#b4c6da;min-height:65px}.tax{font-size:14px;display:block;margin:18px 0}.tax output{float:right}input[type=range]{width:100%;accent-color:#65e3bd}.workspace{display:flex;flex-direction:column;min-width:0;min-height:0}.mapbar{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}.mapbar span{color:#b4c6da}.mapbar button{padding:5px 9px}canvas{display:block;width:100%;flex:1;min-height:220px;touch-action:none;background:#6fa96c}.status{background:#20384a;padding:10px 16px;font-size:14px;min-height:40px}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 16px 10px}.bottom p{font-size:14px;line-height:1.45;margin:0;color:#d0dfeb}.bottom h2{margin:10px 0 4px}dialog{background:#1b2a3a;color:white;border:1px solid #52738c;border-radius:12px;max-width:350px}dialog::backdrop{background:#0008}@media(max-width:760px){header{padding:10px;flex-wrap:wrap}header a{display:none}.stats{padding:8px;gap:5px}.stats div{font-size:12px}.stats strong{font-size:17px}main{grid-template-columns:150px 1fr}aside{padding:9px}.tool{font-size:13px;padding:7px}.tool small{font-size:12px}.mapbar span{display:none}.mapbar{flex-wrap:wrap;padding:7px}.bottom{grid-template-columns:1fr;gap:0}.bottom p{font-size:13px}.time{gap:5px}#toolHelp{font-size:13px}.workspace{min-height:530px}body{height:auto;min-height:100dvh}}@media(min-width:761px){body{height:100dvh;overflow:hidden}}

button:disabled{opacity:.45;cursor:default}.savecontrols{display:grid;grid-template-columns:1fr 1fr;gap:6px}.savecontrols button{font-size:14px;padding:8px 5px}.savecontrols #new{grid-column:1/-1}#saveInfo{font-size:13px;line-height:1.4;color:#b4c6da}#inspect{font-size:14px;line-height:1.35;max-height:160px;overflow:auto}#inspect strong{color:#65e3bd}#inspect p{margin:4px 0}.bottom{grid-template-columns:minmax(160px,1fr) minmax(230px,1.4fr)}.bottom>div{min-width:0}.mapbar{flex-wrap:wrap}#pan[aria-pressed=true]{background:#315c65;border-color:#6ee1c0}@media(max-width:760px){.bottom{grid-template-columns:1fr}.mapbar strong{display:none}.savecontrols{grid-template-columns:1fr}.savecontrols #new{grid-column:auto}}@media(min-width:761px) and (max-height:720px){header{padding:8px 20px}.stats{padding:7px}.stats strong{font-size:19px}.bottom{max-height:160px;overflow:auto}canvas{min-height:180px}}
@media(min-width:761px){.bottom{height:184px;flex-shrink:0;overflow:auto}#inspect{max-height:145px}.bottom p{font-size:14px}}@media(min-width:761px) and (max-height:720px){.bottom{height:160px}#inspect{max-height:125px}}

.stats #budgetOpen{background:transparent;border-color:#486e80;text-align:left;padding:4px 10px;font-size:13px;color:#b4c6da}.stats #budgetOpen:hover{background:#26394b}.mapbar .layer-label{display:flex;gap:8px;align-items:center}.layer-label select{padding:5px 8px;font-size:14px}.mapbar strong{display:none}.mapbar>div{display:flex;gap:4px}.mapbar{justify-content:flex-start;gap:8px}.mapbar>div{margin-left:auto}#readiness{margin-top:7px}#readiness p{font-size:13px;margin:2px 0}#layerLegend{font-size:13px;color:#9fc9dd;margin-top:8px}#budgetDialog{max-width:470px;width:calc(100% - 32px)}#budgetDialog table{width:100%;border-collapse:collapse;font-size:14px}#budgetDialog th,#budgetDialog td{padding:8px 4px;text-align:left;border-bottom:1px solid #375269}#budgetDialog td:last-child{text-align:right}#budgetDialog p{font-size:14px;line-height:1.5}#budgetTotals p:last-child{font-weight:700;color:#65e3bd}@media(max-width:760px){.mapbar .layer-label{font-size:13px}.stats #budgetOpen{font-size:12px;padding:3px}.mapbar>div{margin-left:0;flex-wrap:wrap}.mapbar{gap:5px}}

main{grid-template-columns:252px 1fr}.tool{gap:7px;padding:7px 8px;min-height:45px}.tool .tool-icon{width:36px;height:28px;min-height:0;flex:0 0 36px;background:transparent}.tool-label{flex:1;min-width:0}.tool-label small{display:block;font-size:12px;font-weight:400;line-height:1.2;margin-top:3px}.tool>small{font-size:12px;flex-shrink:0}.tool-label{font-size:14px}#toolHelp{min-height:76px}@media(max-width:760px){main{grid-template-columns:174px 1fr}.tool{gap:4px;padding:6px 4px}.tool .tool-icon{width:25px;flex-basis:25px}.tool>small{display:none}.tool-label{font-size:13px}.tool-label small{font-size:12px}}

.milestone-card{margin-top:15px;padding:12px;background:#20394a;border:1px solid #446875;border-radius:9px}.goal-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.goal-heading button{padding:4px 7px;font-size:12px}.milestone-card progress{width:100%;height:9px;margin-top:10px;accent-color:#65e3bd}.milestone-card p{font-size:12px;color:#b4c6da;line-height:1.4;margin:5px 0 0}.tool.locked{opacity:.6;border-left-style:dashed}.citizens{padding:9px 16px;background:#182d3b;flex-shrink:0;border-bottom:1px solid #375269}#citizenRequests{display:flex;gap:16px}.citizen-card{position:relative;flex:1;min-width:0;padding-right:66px}.citizen-card strong{font-size:13px;color:#e7dfb9}.citizen-card p{margin:4px 0 0;font-size:12px;line-height:1.4;color:#b4c6da}.citizen-card button{position:absolute;right:0;top:4px;font-size:12px;padding:5px}#milestoneNotice{background:#315d4f;color:#edffe5;padding:9px 16px;font-size:14px}#goalsDialog{max-width:480px}#goalsDialog p,#goalList{font-size:14px;line-height:1.6}#goalList{padding-left:22px}#goalList li{margin:10px 0;color:#a5b8cd}#goalList li.earned{color:#65e3bd}@media(max-width:760px){#citizenRequests{flex-direction:column;gap:10px}.citizens{padding:9px}.citizen-card{padding-right:58px}}@media(min-width:761px) and (max-height:720px){.bottom{height:132px}.citizen-card p{font-size:11px}.citizens{padding-top:6px;padding-bottom:6px}canvas{min-height:150px}}
#neighborhoodCard[hidden]{display:none}#neighborhoodTitle{font-size:13px}#neighborhoodList{padding-left:22px;font-size:14px;line-height:1.5}#neighborhoodList li{margin:16px 0;color:#b4c6da}#neighborhoodList li.earned{color:#65e3bd}#neighborhoodList p{margin:5px 0}#goalsDialog{max-height:85vh;overflow:auto}
#cityDetails{flex-shrink:0;border-top:1px solid #375269;background:#172b39}#cityDetails summary{padding:9px 14px;font-size:13px;color:#b4c6da;cursor:pointer}#cityDetails[open]{max-height:42%;overflow:auto}#cityDetails .bottom{height:auto;max-height:none;overflow:visible;padding-bottom:12px}#cityDetails #inspect{max-height:none}#cityDetails .citizens{padding:9px 14px}#cityDetails summary:focus-visible{outline:3px solid #6ef0cd;outline-offset:-3px}
header{padding:8px 18px}h1{font-size:23px}.stats{padding:6px 14px;align-items:center}.stats div{display:flex;align-items:center;gap:8px}.stats strong{display:inline;font-size:18px;margin:0}.stats #budgetOpen{padding:4px 8px}.stats #budgetOpen strong{margin-left:8px}.mapbar{padding:7px 10px;gap:6px}.mapbar button,.mapbar select{font-size:13px}.status{padding:7px 12px;min-height:32px;font-size:13px}main{grid-template-columns:220px minmax(0,1fr)}aside{padding:12px}.tool{padding:6px;min-height:42px}
body.map-expanded main{grid-template-columns:minmax(0,1fr)}body.map-expanded aside,body.map-expanded .stats,body.map-expanded #cityDetails{display:none}#expandMap[aria-pressed=true]{background:#315c65;border-color:#6ee1c0}
@media(min-width:761px){#map{min-height:240px}#cityDetails[open]{max-height:38%}.stats{min-height:40px}}
@media(max-width:760px){main{grid-template-columns:148px minmax(0,1fr)}.stats div{display:block;text-align:center;font-size:11px}.stats strong{display:block;font-size:16px}.stats #budgetOpen strong{display:block;margin:0}.stats #budgetOpen{font-size:11px}.mapbar>div{margin-left:0}#cityDetails[open]{max-height:330px}.tool-label{font-size:12px}.tool-label small{font-size:10px}.tool .tool-icon{width:22px;flex-basis:22px}body.map-expanded .workspace{min-height:calc(100dvh - 65px)}}
#cursor[aria-pressed=true]{background:#315c65;border-color:#6ee1c0}#map.cursor-mode{cursor:default}#map.is-dragging{cursor:grabbing}
.growth-card{font-size:13px}.growth-card #growthOutlook p{margin:7px 0}.growth-card summary{cursor:pointer;padding:6px 0}.growth-card #growthRows section{margin:12px 0;padding-top:8px;border-top:1px solid #466078}.growth-card #growthRows p{line-height:1.45;margin:6px 0}.growth-card #growthRows button{display:block;width:100%;text-align:left;white-space:normal;font-size:12px;line-height:1.45;margin:6px 0}

#playMenu{width:min(680px,calc(100vw - 40px));max-width:680px;max-height:85dvh;overflow:auto} .play-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.play-options button{text-align:left;padding:18px;min-height:140px}.play-options strong,.play-options span{display:block}.play-options strong{font-size:18px;margin-bottom:10px}.play-options span{line-height:1.5}.play-options button[aria-pressed="true"]{outline:2px solid #5ce0ba}#continueCity{width:100%;padding:14px}#startChoices label,#startChoices select{display:block;margin:10px 0;width:100%}#startChoices [hidden],#playMenu [hidden]{display:none}#playCard p{line-height:1.5} @media(max-width:600px){.play-options{grid-template-columns:1fr;gap:8px}.play-options button{min-height:0;padding:12px}.play-options strong{margin-bottom:4px}}