* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #ffd9a0;
  font-family: system-ui, 'Segoe UI', sans-serif; color: #3b2f24; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 8px;
  padding: 8px; pointer-events: none; z-index: 5; }
.stat { background: rgba(53,42,30,0.82); color: #ffe9c4; border-radius: 12px;
  padding: 6px 12px; display: flex; flex-direction: column; min-width: 84px;
  border: 1px solid rgba(255,220,160,0.35); }
.stat .lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
#hud-money { font-weight: 700; font-size: 17px; }
#hud-money.low { color: #ff9a6a; }
#hud-income.neg { color: #ff8f66; }
#stat-pop { min-width: 130px; }
#popbar { height: 5px; background: rgba(255,255,255,0.18); border-radius: 3px; margin-top: 4px; }
#popbar-fill { height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #7ad4a0, #ffd166); transition: width 0.4s; }

#toast { position: fixed; top: 78px; left: 50%; transform: translateX(-50%);
  background: rgba(40,32,24,0.88); color: #ffe9c4; padding: 8px 16px; border-radius: 20px;
  font-size: 14px; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 8; }
#toast.show { opacity: 1; }

#toolbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px;
  display: flex; gap: 6px; z-index: 6; background: rgba(40,32,24,0.55);
  padding: 6px; border-radius: 16px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 52px; padding: 6px 4px; border-radius: 11px; border: 2px solid transparent;
  background: rgba(255,233,196,0.14); color: #ffe9c4; cursor: pointer; font: inherit; }
.tool .ic { font-size: 20px; line-height: 1; }
.tool .tl { font-size: 10px; opacity: 0.75; }
.tool .key { font-size: 9px; opacity: 0.5; }
.tool.on { border-color: #ffd166; background: rgba(255,209,102,0.3); }

#touchpad { position: fixed; right: 8px; bottom: 10px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 3px; }
#touchpad .dp-up { grid-area: 1 / 2; } #touchpad .dp-lf { grid-area: 2 / 1; }
#touchpad .dp-rt { grid-area: 2 / 3; } #touchpad .dp-dn { grid-area: 3 / 2; }
.tside { display: flex; gap: 5px; }
#touchpad button { width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255,220,160,0.4); background: rgba(53,42,30,0.6); color: #ffe9c4;
  font-size: 17px; cursor: pointer; touch-action: none; font-family: inherit; }
#touchpad .place-btn { width: 86px; height: 40px; font-size: 13px; border-radius: 20px;
  background: rgba(75,150,105,0.85); }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(30,22,14,0.55); z-index: 20; padding: 16px; }
.panel { max-width: 480px; width: 100%; background: #fff4df; border-radius: 20px;
  padding: 26px 24px; box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  border: 2px solid #d9a441; text-align: center; }
.panel h1 { font-size: 40px; letter-spacing: 0.06em; color: #b04a2f; margin-bottom: 4px; }
.panel .tag { font-style: italic; color: #7a6a52; margin-bottom: 14px; }
.howto { text-align: left; font-size: 14px; line-height: 1.5; margin: 0 0 12px 20px; color: #4a3c2c; }
.howto li { margin-bottom: 6px; }
.keys { font-size: 12.5px; color: #6b5a44; margin-bottom: 18px; }
.big-btn { font: inherit; font-size: 18px; font-weight: 700; color: #fff4df;
  background: linear-gradient(180deg, #d96a3f, #b04a2f); border: none; border-radius: 14px;
  padding: 12px 30px; cursor: pointer; box-shadow: 0 6px 18px rgba(176,74,47,0.4); }
.big-btn:active { transform: translateY(2px); }
@media (max-width: 520px) {
  .tool { min-width: 44px; }
  .panel h1 { font-size: 30px; }
  #touchpad { bottom: 74px; }
}