/* MiniTown — cozy warm UI. Cream paper + terracotta + leaf green. No purple. */
:root {
  --paper: #f7efdd;
  --paper-2: #efe3c8;
  --ink: #3c3125;
  --ink-soft: #6d5f4b;
  --terra: #d96f3c;
  --terra-deep: #b9552a;
  --leaf: #5f9e4d;
  --leaf-deep: #477a3a;
  --sun: #f2b53c;
  --shadow: rgba(60, 40, 20, 0.22);
  --font-px: "Press Start 2P", "Courier New", monospace;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  background: #20301f;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; }
#game.panning { cursor: grabbing; }
#game.building { cursor: crosshair; }
#game.bulldozing { cursor: not-allowed; }

#vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(30, 22, 12, 0.28) 100%);
}

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #fbf4e4, #f3e7cd);
  border: 2px solid #d8c49a;
  border-radius: 14px;
  box-shadow: 0 4px 0 #c9b384, 0 10px 24px var(--shadow);
  z-index: 20;
  max-width: calc(100vw - 16px);
  flex-wrap: wrap;
  justify-content: center;
}
.brand {
  font-family: var(--font-px);
  font-size: 13px;
  color: var(--terra-deep);
  letter-spacing: 1px;
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.brand-mark { color: var(--leaf-deep); }

.clock {
  display: flex; align-items: center; gap: 8px;
  background: #fffaf0;
  border: 2px solid #e2d2ac;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: var(--font-px);
  font-size: 10px;
  white-space: nowrap;
}
.day-pill {
  font-family: var(--font-body);
  font-weight: 800; font-size: 11px;
  background: var(--leaf); color: #fff;
  border-radius: 999px; padding: 2px 8px;
}

.modes { display: flex; align-items: center; gap: 6px; }
.divider { width: 2px; height: 22px; background: #d8c49a; border-radius: 2px; }

.mode-btn {
  font-family: var(--font-body);
  font-weight: 800; font-size: 12.5px;
  color: var(--ink);
  background: #fffaf0;
  border: 2px solid #dcc89e;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .12s;
  white-space: nowrap;
}
.mode-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #c9b384; }
.mode-btn:active { transform: translateY(1px); box-shadow: none; }
.mode-btn.active {
  background: var(--terra);
  border-color: var(--terra-deep);
  color: #fff;
  box-shadow: 0 3px 0 var(--terra-deep);
}
.mode-btn.zone-r.active { background: var(--leaf); border-color: var(--leaf-deep); box-shadow: 0 3px 0 var(--leaf-deep); }
.mode-btn.zone-s.active { background: var(--sun); border-color: #c98f1e; box-shadow: 0 3px 0 #c98f1e; color: #4a3410; }
.mode-btn.zone-w.active { background: #5b7fa6; border-color: #45648a; box-shadow: 0 3px 0 #45648a; }
.mode-btn.zone-x.active { background: #a04434; border-color: #7c3125; box-shadow: 0 3px 0 #7c3125; }

.hud-right { display: flex; align-items: center; gap: 6px; }
.hud-btn {
  font-family: var(--font-body); font-weight: 800; font-size: 12.5px;
  min-width: 34px;
  background: #fffaf0; color: var(--ink);
  border: 2px solid #dcc89e; border-radius: 10px;
  padding: 6px 9px; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.hud-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #c9b384; }
.hud-btn.danger:hover { background: #f3d9c8; border-color: #b9552a; }
.zoom-group { display: flex; gap: 4px; }

/* ---------- stats bar ---------- */
#statsbar {
  position: fixed; left: 12px; bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
  z-index: 15;
  max-width: min(720px, calc(100vw - 24px));
}
.stat {
  background: rgba(247, 239, 221, 0.94);
  border: 2px solid #d8c49a;
  border-radius: 10px;
  padding: 6px 11px;
  font-weight: 800; font-size: 12.5px;
  box-shadow: 0 3px 0 rgba(60, 40, 20, 0.15);
  white-space: nowrap;
}
.stat.hint { font-weight: 700; color: var(--ink-soft); font-style: italic; }

/* ---------- tooltip ---------- */
#tooltip {
  position: fixed; z-index: 30;
  pointer-events: none;
  max-width: 260px;
  background: rgba(247, 239, 221, 0.97);
  border: 2px solid #c9b384;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px var(--shadow);
  font-size: 12.5px;
  line-height: 1.45;
}
#tooltip h3 { font-size: 13px; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
#tooltip .sub { color: var(--ink-soft); font-size: 11.5px; }
#tooltip .names { margin-top: 4px; }
#tooltip .names b { font-weight: 800; }
#tooltip .bar { height: 7px; background: #e6d7b4; border-radius: 99px; overflow: hidden; margin-top: 5px; }
#tooltip .bar i { display: block; height: 100%; background: var(--terra); border-radius: 99px; }
#tooltip .pinned-note { margin-top: 5px; font-size: 10.5px; color: var(--ink-soft); font-style: italic; }

/* ---------- toasts ---------- */
#toasts {
  position: fixed; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 25; pointer-events: none;
}
.toast {
  background: rgba(247, 239, 221, 0.97);
  border: 2px solid #c9b384;
  border-left: 6px solid var(--leaf);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700; font-size: 12.5px;
  box-shadow: 0 6px 18px var(--shadow);
  animation: toast-in .25s ease-out, toast-out .4s ease-in 3.6s forwards;
  max-width: 300px;
}
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(30px); opacity: 0; } }

/* ---------- overlays ---------- */
.overlay[hidden] { display: none; }

.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(38, 30, 18, 0.55);
  backdrop-filter: blur(3px);
  padding: 16px;
}
.panel {
  background: linear-gradient(180deg, #fbf4e4, #f1e4c6);
  border: 3px solid #c9b384;
  border-radius: 18px;
  box-shadow: 0 8px 0 #a98f5e, 0 24px 60px rgba(0,0,0,0.4);
  padding: 28px 30px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.panel h1 {
  font-family: var(--font-px);
  font-size: 22px;
  color: var(--terra-deep);
  margin-bottom: 8px;
}
.panel h2 { font-size: 18px; margin-bottom: 10px; color: var(--terra-deep); }
.tagline { color: var(--ink-soft); font-weight: 700; margin-bottom: 16px; }
.howto { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.howto li { font-size: 13.5px; line-height: 1.5; padding-left: 4px; }
.howto b { color: var(--terra-deep); }
kbd {
  font-family: var(--font-px); font-size: 9px;
  background: #fffaf0; border: 2px solid #c9b384; border-bottom-width: 4px;
  border-radius: 6px; padding: 3px 6px;
}
.big-btn {
  display: block; width: 100%;
  font-family: var(--font-body); font-weight: 800; font-size: 15px;
  color: #fff; background: var(--terra);
  border: none; border-radius: 12px;
  padding: 13px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--terra-deep);
  transition: transform .08s, box-shadow .08s;
}
.big-btn:hover { transform: translateY(-1px); }
.big-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--terra-deep); }
.big-btn.ghost {
  margin-top: 10px;
  background: transparent; color: var(--terra-deep);
  border: 2px solid var(--terra-deep);
  box-shadow: none;
}

@media (max-width: 900px) {
  .brand { font-size: 11px; }
  .mode-btn { font-size: 11px; padding: 5px 7px; }
  #topbar { gap: 8px; padding: 6px 8px; }
  .clock { font-size: 9px; }
}