/* 像素市长 · 外壳样式（Pad 优先：大按钮、左右两栏浮层、地图铺满） */
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #2b3a35 url('../images/dirtbg.png');
  font: 15px/1.45 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #1f2a2a; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
/* initialHidden 只会被 removeClass 去掉，可以 !important；hidden/awaitGeneration/#start 由 jQuery toggle 切换，不能 !important */
.initialHidden, .imageData, #tooSmall { display: none !important; }
.hidden, .awaitGeneration, #start { display: none; }

/* 地图层 */
#mapLayer { position: fixed; inset: 0; overflow: hidden; }
#canvasContainer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
#canvasContainer canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* UI 浮层：本身不吃事件，面板才吃 */
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }
#ui > #opaque { position: fixed; inset: 0; background: rgba(20, 30, 30, .55); z-index: 10; }

.panel {
  background: rgba(250, 255, 250, .95); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  padding: 10px 12px;
}
.centred { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

button, input[type=submit] {
  font: inherit; font-weight: 700; border: 0; border-radius: 10px; cursor: pointer;
  min-height: 40px; padding: 6px 12px; background: #e8efe9; color: #1f2a2a;
  touch-action: manipulation;
}
button:active, input[type=submit]:active { transform: scale(.96); }
button:disabled { background: #cfd6d2 !important; color: #8a948f !important; cursor: not-allowed; }
.big { display: block; width: 100%; min-height: 52px; font-size: 18px; margin: 8px 0; }
.go, .dialogOK { background: #22a55a; color: #fff; }
.blue { background: #2f80ed; color: #fff; }
.cancel { background: #51615c; color: #fff; }
.loadSave { background: #2a9d9a; color: #fff; }

#loadingBanner { font-size: 20px; padding: 18px 28px; }

/* 开始界面 */
#splash { width: min(640px, 94vw); padding: 18px 22px; }
#splash h2, #start h2 { font-size: 30px; text-align: center; color: #1b6b3a; letter-spacing: 2px; }
#splash .sub { text-align: center; margin: 4px 0 12px; color: #4a5a55; }
#splashRow { display: flex; gap: 18px; align-items: center; }
#splashContainer { width: 360px; height: 300px; flex: none; border-radius: 10px; overflow: hidden; background: #000; }
#splashContainer canvas { display: block; }
#splashButtons { flex: 1; }
#start { width: min(460px, 92vw); padding: 20px 24px; text-align: center; font-size: 17px; }
#start label[for=nameForm] { display: block; margin: 12px 0 6px; }
#nameForm { font: inherit; font-size: 20px; width: 100%; padding: 8px 12px; border: 2px solid #9fb5aa; border-radius: 10px; -webkit-user-select: text; user-select: text; }
.radioRow { margin: 12px 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.radioRow input[type=radio] { width: 22px; height: 22px; margin-left: 10px; accent-color: #22a55a; }
#playit { width: 100%; }

/* 左栏 */
#infobar { position: absolute; left: 12px; top: 12px; width: 176px; text-align: center; font-size: 15px; }
#infobar .cityName { font-weight: 800; font-size: 17px; color: #1b6b3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#miscButtons { position: absolute; left: 12px; top: 160px; width: 176px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#miscButtons button { min-height: 44px; padding: 4px; font-size: 14px; }
#pauseRequest { grid-column: 1 / 3; background: #51615c; color: #fff; }
#pauseRequest[data-state=paused] { background: #e67e22; }
#RCIContainer { position: absolute; left: 12px; top: 390px; width: 120px; height: 120px; padding: 0; overflow: hidden; }

/* 右栏工具 */
#controls { position: absolute; right: 12px; top: 12px; width: 236px; padding: 8px; max-height: calc(100% - 24px); overflow-y: auto; }
#toolInfo { text-align: center; font-weight: 700; margin-bottom: 6px; min-height: 22px; color: #b03a2e; }
#buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.toolButton {
  min-height: 46px; padding: 2px 4px 2px 34px; position: relative; text-align: left; font-size: 14px; line-height: 1.15;
  border: 3px solid transparent; background: #eef3ef;
}
.toolButton i { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 20px; pointer-events: none; }
.toolButton small { display: block; font-weight: 500; font-size: 12px; opacity: .75; pointer-events: none; }
.toolButton.selected { border-color: #1f2a2a; background: #fff6c2; box-shadow: 0 0 0 2px #f1c40f inset; }
#residentialButton { background: #c9f7c9; } #commercialButton { background: #cfe0ff; } #industrialButton { background: #fff4b0; }
#roadButton { background: #d7d7d7; } #wireButton { background: #f3ecc2; } #railButton { background: #ecd2c6; }
#coalButton, #nuclearButton { background: #e9e2e2; } #policeButton { background: #d4dcf5; } #fireButton { background: #ffd2cc; }
#parkButton { background: #cfe8cf; } #stadiumButton { background: #e2d6f3; } #portButton { background: #cfe9fb; }
#airportButton { background: #f6d8f6; } #bulldozerButton { background: #ffd8c4; } #queryButton { background: #cdf6f6; }
.toolButton.selected { background: #fff6c2 !important; }

/* 怪兽镜头 */
#monstertv { position: absolute; right: 260px; top: 12px; width: 200px; background: #c0392b; padding: 8px; }
#tvContainer { width: 177px; height: 128px; margin: 0 auto; }
#monsterTVForm input { width: 100%; margin-top: 6px; }

/* 通知条 */
#notifications {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: min(560px, 60vw);
  padding: 8px 18px; border-radius: 999px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.neutral { background: #f4fff6; color: #1f2a2a; }
.bad { background: #e74c3c; color: #fff8c4; }
.good { background: #7ee08f; color: #0f2f17; }
.pointer { cursor: pointer; }
.helpPointer { cursor: help; }
#zoomHint { position: absolute; left: 200px; bottom: 16px; font-size: 12px; color: #fff; opacity: .75; text-shadow: 0 1px 3px #000; pointer-events: none; }

/* 对话框 */
.modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;
  width: min(520px, 92vw); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.modal .mh { background: #2a9d9a; color: #fff; font-size: 20px; font-weight: 800; text-align: center; padding: 10px; border-radius: 16px 16px 0 0; }
.modal .mh.bad { background: #c0392b; } .modal .mh.good { background: #22a55a; color: #fff; }
.modal .mb { padding: 14px 18px; }
.modal h3 { font-size: 16px; margin: 8px 0 4px; color: #1b6b3a; }
.modal ol { padding-left: 24px; }
.btnRow { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.btnRow > * { min-width: 110px; }
.bigText { text-align: center; font-size: 20px; font-weight: 700; padding: 10px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.kv dt { font-weight: 700; color: #4a5a55; }
#budgetForm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
#budgetForm .budgetData { font-size: 14px; }
#budgetForm fieldset { border: 1px solid #cfd8d3; border-radius: 10px; padding: 6px 10px; }
#budgetForm legend { font-weight: 700; padding: 0 4px; }
#budgetForm input[type=range] { width: 100%; height: 34px; accent-color: #22a55a; }
#budgetForm .btnRow { grid-column: 1 / 3; }
#disasterLabel { display: block; margin-bottom: 10px; }
#disasterSelect { font: inherit; font-size: 18px; width: 100%; padding: 8px; border-radius: 10px; }

/* 小屏（手机横屏 / 小窗口）：缩窄两栏 */
@media (max-height: 640px) {
  #miscButtons { top: 140px; }
  #RCIContainer { display: none; }
  .toolButton { min-height: 38px; }
}
@media (max-width: 900px) {
  #infobar, #miscButtons { width: 150px; }
  #controls { width: 200px; }
  .toolButton { font-size: 12px; padding-left: 30px; }
  #notifications { max-width: 40vw; }
}