* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, sans-serif; color: #183a3a; background: #b9e1d9; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
button, a { font: inherit; font-weight: 750; color: inherit; min-height: 64px; border: 0; border-radius: 16px; padding: 12px 18px; background: #fffaf0; box-shadow: 0 4px 0 #163a3422; cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(2px); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 4px solid #f0b343; outline-offset: 3px; }
button:disabled { opacity: .65; cursor: default; }
button small { display: block; font-size: 12px; font-weight: 600; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #163a34; color: #fffaf0; flex-wrap: wrap; z-index: 2; }
header a { display: inline-flex; align-items: center; color: #163a34; text-decoration: none; }
h1 { font-size: 24px; margin: 0; }
#city-name { margin-left: auto; min-height: 48px; color: #163a34; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#money { font-size: 26px; font-weight: 900; color: #ffe092; }
#level { font-size: 14px; }
main { flex: 1; position: relative; min-height: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#mission { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 12px 18px; background: #fffaf0ed; border-radius: 14px; font-size: 17px; font-weight: 800; text-align: center; pointer-events: none; }
#hint { position: absolute; top: 68px; left: 0; right: 0; font-size: 13px; text-align: center; pointer-events: none; }
#notice { position: absolute; top: 94px; left: 50%; transform: translateX(-50%); background: #163a34ee; color: white; border-radius: 12px; padding: 10px 14px; max-width: calc(100% - 24px); text-align: center; pointer-events: none; }
#notice:empty { display: none; }
.actions { position: absolute; bottom: 44px; right: 20px; display: flex; gap: 8px; }
.primary { background: #f5bb49; color: #173a34; }
.pad { position: absolute; bottom: 44px; left: 20px; display: grid; grid-template-columns: repeat(3, 64px); gap: 5px; }
.pad button { width: 64px; height: 64px; padding: 0; font-size: 22px; touch-action: none; }
.pad button:first-child { grid-column: 2; }
.pad button:nth-child(2) { grid-column: 1; }
#placement { position: absolute; right: 20px; bottom: 122px; padding: 12px; border-radius: 18px; background: #fffaf0f5; max-width: min(430px, calc(100% - 40px)); }
#placement p { margin: 0 0 12px; }
#placement button { min-height: 64px; }
#confirm-build { background: #73cf9a; }
footer { font: 10px monospace; padding: 3px 8px; background: #163a34; color: #fff9; text-align: center; }
dialog { border: 0; border-radius: 24px; padding: 24px; width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; background: #fffaf0; color: #163a34; }
dialog::backdrop { background: #102b2ab8; }
h2 { margin: 0; font-size: 25px; }
dialog p { line-height: 1.5; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
#catalog button { border: 2px solid #183a3a22; text-align: left; min-height: 100px; }
#catalog .symbol { display: block; font-size: 32px; }
#catalog small { margin-top: 6px; }
label { display: block; margin: 18px 0 8px; font-weight: 700; }
input { width: 100%; min-height: 64px; font: inherit; font-size: 22px; border: 2px solid #44856c; border-radius: 12px; padding: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
@media (max-width: 760px) {
  header { gap: 8px; padding: 8px; }
  header a { min-height: 44px; padding: 8px; font-size: 13px; }
  h1 { font-size: 20px; }
  #city-name { max-width: 150px; font-size: 13px; padding: 8px; }
  #money { font-size: 22px; }
  .actions { bottom: 44px; left: 10px; right: 10px; justify-content: center; }
  .actions button { flex: 1; padding: 10px 6px; font-size: 14px; }
  .pad { bottom: 124px; left: 10px; }
  #placement { bottom: 264px; right: 10px; max-width: calc(100% - 20px); font-size: 14px; }
  #hint { font-size: 11px; }
}
@media (max-height: 540px) and (min-width: 761px) { header { padding: 4px 12px; } header a { min-height: 44px; } #hint { display: none; } #notice { top: 66px; } }

.guide { outline: 4px solid #f4bc44; outline-offset: 3px; }

#home-controls, #mayor-controls { position: absolute; right: 20px; top: 150px; display: flex; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 40px); }
#home-controls[hidden], #mayor-controls[hidden] { display: none; }
#economy-choices { display: grid; gap: 12px; margin-bottom: 20px; }
#economy-choices button { border: 2px solid #183a3a22; text-align: left; }
@media(max-width:760px) { #home-controls, #mayor-controls { top: 170px; right: 10px; } #home-controls button, #mayor-controls button { min-height: 64px; font-size: 13px; padding: 8px; } }

#mayor-controls { top: auto; bottom: 124px; }
@media(max-width:760px) { #mayor-controls { top: auto; bottom: 264px; } }