:root {
  --bg:#0b1220;
  --card:#111a2e;
  --border:#223055;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --btn:#162343;
  --btnb:#2c3e69;
}
*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Arial;margin:0;background:var(--bg);color:var(--text)}
a{color:#93c5fd;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:14px 0}
.btn{display:inline-block;padding:10px 12px;border-radius:12px;border:1px solid var(--btnb);background:var(--btn);color:var(--text);cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--btnb);background:#0f1830}
small{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#0f1830;border:1px solid var(--border);border-radius:14px;padding:12px}
input{width:100%;padding:10px;border-radius:12px;border:1px solid var(--btnb);background:#0f1830;color:var(--text)}
label{display:block;margin:8px 0 6px}
hr{border:none;border-top:1px solid var(--border);margin:14px 0}

.village-stage {
  width: 100%;
  overflow-x: auto;
}
.village {
  position: relative;
  width: 1400px;
  height: 900px;
  background: url('/assets/vila.png') no-repeat center;
  background-size: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.building {
  position:absolute;
  width:120px;
  height:120px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.building:hover{filter:brightness(1.12)}
.building img{width:120px;height:120px;display:block}
.level {
  position:absolute;
  right:-10px;
  bottom:-10px;
  background:#0b1220;
  border:1px solid var(--btnb);
  border-radius: 10px;
  padding:3px 8px;
  font-weight:700;
  font-size:12px;
}
/* positions (match generated background spots) */
.pos-lumber   { left:320px; top:220px; }
.pos-claypit  { left:280px; top:470px; }
.pos-ironmine { left:400px; top:630px; }
.pos-farm     { left:890px; top:630px; }
.pos-warehouse{ left:1000px; top:450px; }
.pos-granary  { left:940px; top:210px; }
.pos-barracks { left:600px; top:140px; }