:root {
  --bg: #0e1116;
  --panel: rgba(22, 26, 34, 0.92);
  --panel-2: rgba(29, 34, 43, 0.92);
  --line: rgba(255, 255, 255, 0.09);
  --text: #edf1f7;
  --muted: #9ba7b7;
  --soft: #c8d0dc;
  --gold: #d6aa4a;
  --gold-2: #ffcc66;
  --green: #7ad37d;
  --red: #ff7777;
  --blue: #7da9ff;
  --shadow: 0 22px 60px rgba(0,0,0,.35);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(214,170,74,.14), transparent 32rem),
    radial-gradient(circle at 85% 15%, rgba(125,169,255,.12), transparent 30rem),
    linear-gradient(135deg, #0b0d12 0%, #12151c 48%, #0b0d12 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 286px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: rgba(10, 12, 17, .72);
  backdrop-filter: blur(20px);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand img { width: 52px; height: 52px; filter: drop-shadow(0 10px 18px rgba(214,170,74,.25)); }
.brand strong { display: block; letter-spacing: .3px; font-size: 18px; }
.brand span { color: var(--gold-2); font-size: 13px; text-transform: uppercase; letter-spacing: 2.2px; }
.nav { display: grid; gap: 8px; }
.nav-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--soft);
  padding: 13px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  transition: .18s ease;
}
.nav-item:hover, .nav-item.active {
  background: linear-gradient(135deg, rgba(214,170,74,.18), rgba(255,255,255,.045));
  border-color: rgba(214,170,74,.22);
  color: white;
  transform: translateX(3px);
}
.sidebar-card {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
}
.sidebar-card p { margin: 7px 0 0; color: var(--muted); }
.mobile-close, .hamburger { display: none; }
.main { min-width: 0; padding: 22px 26px 38px; }
.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.eyebrow, .small-label { color: var(--gold-2); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
h1 { font-size: clamp(26px, 4vw, 46px); }
h2 { font-size: clamp(22px, 3vw, 34px); margin-top: 6px; }
h3 { font-size: 20px; }
p { color: var(--muted); line-height: 1.55; }
.resources { display: grid; grid-template-columns: repeat(4, minmax(95px,1fr)); gap: 10px; }
.resource {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 100px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.resource b { display: block; font-size: 20px; }
.resource span { color: var(--muted); font-size: 12px; }
.hero-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
  margin-bottom: 18px;
  border: 1px solid rgba(214,170,74,.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(214,170,74,.13), rgba(255,255,255,.045)),
    var(--panel);
  box-shadow: var(--shadow);
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(214,170,74,.1);
  right: -90px; top: -110px;
}
.hero-panel p { max-width: 760px; margin: 10px 0 0; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 2; }
.content-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.card {
  grid-column: span 4;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  padding: 18px;
  min-width: 0;
}
.card.wide { grid-column: span 8; }
.card.full { grid-column: 1 / -1; }
.card.slim { padding: 14px; }
.card-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 13px; }
.card-title { display: flex; gap: 12px; align-items: center; }
.card-title img { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); padding: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); color: var(--soft); background: rgba(255,255,255,.045); padding: 5px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.badge.good { color: #d9ffd8; border-color: rgba(122,211,125,.26); background: rgba(122,211,125,.08); }
.badge.warn { color: #ffdfaa; border-color: rgba(255,204,102,.25); background: rgba(255,204,102,.08); }
.badge.bad { color: #ffd1d1; border-color: rgba(255,119,119,.25); background: rgba(255,119,119,.08); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 12px 0; }
.stat { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.stat b { display: block; }
.stat span { color: var(--muted); font-size: 12px; }
.cost-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 11px 0; }
.cost { font-size: 12px; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.04); }
.progress {
  height: 9px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.progress > span { display:block; height:100%; width:0; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: inherit; transition: width .25s; }
.btn {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,.06);
  padding: 10px 13px;
  transition: .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  min-height: 42px;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.09); }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.btn-primary { color: #1b1205; border-color: rgba(255,204,102,.55); background: linear-gradient(135deg, var(--gold-2), var(--gold)); font-weight: 800; }
.btn-danger { background: rgba(255,119,119,.12); border-color: rgba(255,119,119,.26); color: #ffd4d4; }
.btn-row { display:flex; gap:8px; flex-wrap: wrap; }
.input, .select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.2);
  color: var(--text);
  padding: 12px 13px;
  outline: none;
}
.input:focus, .select:focus { border-color: rgba(214,170,74,.55); box-shadow: 0 0 0 4px rgba(214,170,74,.09); }
.list { display: grid; gap: 10px; }
.list-item { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); }
.list-item h4 { margin: 0 0 5px; }
.list-item p { margin: 0; }
.kingdom-visual {
  min-height: 330px;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(214,170,74,.16);
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(36,49,38,.95) 0 34%, transparent 34%),
    radial-gradient(circle at 50% 18%, rgba(255,204,102,.16), transparent 28%),
    linear-gradient(180deg, #18202c, #10141c 65%, #1e3023);
}
.kingdom-visual .sun { position:absolute; width:70px; height:70px; border-radius:50%; background: #ffd576; top: 38px; right: 80px; box-shadow: 0 0 70px rgba(255,213,118,.35); }
.kingdom-visual img { position:absolute; filter: drop-shadow(0 15px 20px rgba(0,0,0,.28)); }
.k-castle { width: 220px; left: 50%; transform: translateX(-50%); bottom: 70px; }
.k-farm { width: 116px; left: 42px; bottom: 38px; }
.k-lumber { width: 120px; right: 42px; bottom: 48px; }
.k-wall { width: 270px; left: 50%; transform: translateX(-50%); bottom: 30px; opacity:.9; }
.queue-item { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.queue-time { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.map-grid { display:grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap: 12px; }
.map-tile {
  min-height: 185px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.026));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.map-tile::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 15%, rgba(214,170,74,.12), transparent 58%); pointer-events:none; }
.map-tile img { width: 78px; height: 78px; object-fit: contain; align-self:center; margin-top: 8px; z-index:1; }
.map-tile.cleared { opacity: .7; border-color: rgba(122,211,125,.3); }
.map-tile > * { position:relative; z-index:1; }
.troop-row { display:grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; }
.troop-row img { width: 70px; height:70px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 6px; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toast-wrap { position: fixed; right: 18px; bottom: 18px; display:grid; gap:10px; z-index: 50; width: min(380px, calc(100vw - 36px)); }
.toast { padding: 14px 16px; border-radius: 16px; background: rgba(17,20,27,.96); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); animation: pop .2s ease; }
.toast strong { display:block; margin-bottom:3px; }
.toast p { margin:0; }
@keyframes pop { from { transform: translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.modal { border:0; padding:0; background: transparent; color: var(--text); width:min(460px, calc(100vw - 28px)); }
.modal::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(8px); }
.modal-card { background: #151922; border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top: 14px; }
.empty { padding: 24px; text-align:center; border: 1px dashed rgba(255,255,255,.16); border-radius: 18px; color: var(--muted); }
.kpi { display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi.six { grid-template-columns: repeat(6, 1fr); }
.kpi .stat { background: rgba(214,170,74,.055); }
.footer-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.import-zone { display:grid; gap:9px; }
textarea.input { min-height: 125px; resize: vertical; }
@media (max-width: 1160px) {
  .card { grid-column: span 6; }
  .card.wide { grid-column: 1 / -1; }
  .map-grid { grid-template-columns: repeat(3, 1fr); }
  .topbar { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; transform: translateX(-105%); transition: .22s ease; width: 286px; }
  .sidebar.open { transform: translateX(0); }
  .mobile-close, .hamburger { display:inline-flex; }
  .mobile-close { position:absolute; right:12px; top:12px; border:0; color:white; background:rgba(255,255,255,.08); width:38px; height:38px; border-radius:12px; align-items:center; justify-content:center; font-size:24px; }
  .hamburger { border:1px solid var(--line); color:white; background:var(--panel); border-radius:14px; padding:10px 12px; }
  .main { padding: 16px; }
  .topbar { grid-template-columns: auto 1fr; }
  .resources { grid-column: 1 / -1; grid-template-columns: repeat(2,1fr); }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-actions { justify-content:flex-start; }
  .card, .card.wide { grid-column: 1 / -1; }
  .split, .kpi { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .kingdom-visual { min-height: 270px; }
  .k-castle { width: 170px; }
  .k-wall { width: 220px; }
  .k-farm, .k-lumber { width: 90px; }
}
/* v2 systems */
.nav { max-height: calc(100vh - 220px); overflow: auto; padding-right: 3px; }
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
#seasonText { color: var(--muted); }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slim-empty { padding: 12px; }
.policy-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.policy-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.035); }
.policy-card.active { border-color: rgba(122,211,125,.35); background: rgba(122,211,125,.075); }
.hero-card .progress.static, .progress.static { margin-top: 8px; }
.province-line { font-size: 12px; margin: 7px 0; color: var(--soft); }
.card h4 { margin: 0; font-size: 15px; }
.report-battle { border-color: rgba(255,204,102,.18); }
.report-hero { border-color: rgba(125,169,255,.18); }
.report-diplomacy { border-color: rgba(122,211,125,.18); }
.kingdom-visual .cloud { position:absolute; width:120px; height:42px; border-radius: 999px; background: rgba(255,255,255,.12); filter: blur(.2px); }
.kingdom-visual .cloud::before, .kingdom-visual .cloud::after { content:""; position:absolute; border-radius:50%; background: inherit; }
.kingdom-visual .cloud::before { width:48px; height:48px; left:22px; top:-17px; }
.kingdom-visual .cloud::after { width:58px; height:58px; right:18px; top:-26px; }
.kingdom-visual .c1 { left: 40px; top: 46px; opacity:.42; }
.kingdom-visual .c2 { right: 150px; top: 98px; opacity:.26; transform: scale(.72); }
.k-market { width: 110px; left: 145px; bottom: 48px; }
@media (max-width: 1160px) {
  .stats.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .policy-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .stats.four, .policy-grid { grid-template-columns: 1fr; }
  .k-market { width: 80px; left: 105px; }
}


.city-overview-card { overflow: hidden; }
.city-header p { max-width: 760px; margin: 8px 0 0; }
.city-shell { display: grid; grid-template-columns: minmax(0, 1.5fr) 360px; gap: 16px; align-items: start; }
.city-stage {
  position: relative;
  min-height: 680px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(214,170,74,.18);
  background: linear-gradient(180deg, #6db4ff 0%, #bfe2ff 40%, #9fe293 40.01%, #4f9c48 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.24);
}
.city-stage.summer { filter: saturate(1.06); }
.city-stage.autumn { background: linear-gradient(180deg, #7cb8ff 0%, #d5eaff 40%, #c3d967 40.01%, #9b7c35 100%); }
.city-stage.winter { background: linear-gradient(180deg, #9cc8ff 0%, #edf5ff 42%, #d9e6f0 42.01%, #c7d3dd 100%); }
.city-sky { position:absolute; inset:0 0 42% 0; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); }
.city-sunmoon { position:absolute; top: 48px; right: 62px; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7d1, #ffd36c 70%, rgba(255,211,108,.2) 71%); box-shadow: 0 0 70px rgba(255,214,101,.45); }
.city-stage.winter .city-sunmoon { background: radial-gradient(circle at 35% 35%, #fff, #e6eef9 70%, rgba(230,238,249,.15) 71%); }
.city-cloud { position:absolute; background: rgba(255,255,255,.82); width: 150px; height: 44px; border-radius: 999px; filter: blur(.2px); opacity: .92; }
.city-cloud::before, .city-cloud::after { content:''; position:absolute; border-radius:50%; background: inherit; }
.city-cloud::before { width: 58px; height: 58px; left: 20px; top: -22px; }
.city-cloud::after { width: 72px; height: 72px; right: 18px; top: -30px; }
.cloud-a { top: 86px; left: 56px; animation: drift 18s linear infinite; }
.cloud-b { top: 140px; left: 280px; width: 125px; transform: scale(.9); animation: drift 24s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } 50% { transform: translateX(18px); } to { transform: translateX(0); } }
.city-mountain { position:absolute; bottom: 43%; background: linear-gradient(180deg, rgba(59,96,113,.95), rgba(44,69,82,.95)); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); opacity: .9; }
.mountain-a { left: -4%; width: 280px; height: 160px; }
.mountain-b { right: 4%; width: 360px; height: 200px; }
.city-ground-back { position:absolute; inset:auto 0 22% 0; height: 170px; background: linear-gradient(180deg, #7fc66e, #5ca14b); clip-path: polygon(0 36%, 18% 24%, 31% 30%, 48% 14%, 67% 31%, 82% 18%, 100% 31%, 100% 100%, 0 100%); }
.city-ground-front { position:absolute; inset:auto 0 0 0; height: 200px; background: linear-gradient(180deg, #4f9d44, #3b7d33); clip-path: polygon(0 12%, 12% 22%, 26% 16%, 42% 28%, 58% 19%, 73% 29%, 88% 18%, 100% 25%, 100% 100%, 0 100%); }
.city-road { position:absolute; background: linear-gradient(180deg, #c8b389, #a78959); opacity: .95; }
.road-main { left: 46%; bottom: 0; width: 130px; height: 280px; transform: translateX(-50%); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.road-side { left: 18%; bottom: 140px; width: 64%; height: 56px; border-radius: 999px; transform: rotate(-7deg); }
.city-river { position:absolute; right: -2%; bottom: 0; width: 24%; height: 45%; background: linear-gradient(180deg, rgba(142,208,255,.9), rgba(63,150,222,.95)); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 15% 70%, 30% 48%); opacity: .92; }
.city-banner { position:absolute; bottom: 255px; width: 14px; height: 110px; background: linear-gradient(180deg, #6b5433, #4b3720); }
.city-banner::after { content:''; position:absolute; top: 8px; left: 14px; width: 54px; height: 30px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 80%); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.city-banner.left { left: 40px; }
.city-banner.right { right: 40px; }
.city-banner.right::after { left: auto; right: 14px; transform: scaleX(-1); }
.city-villager { position:absolute; bottom: 112px; width: 16px; height: 24px; background: #523c22; border-radius: 6px 6px 4px 4px; z-index: 3; animation: bob 2.4s ease-in-out infinite; }
.city-villager::before { content:''; position:absolute; top:-10px; left:2px; width: 12px; height: 12px; border-radius:50%; background: #f6d3b4; }
.city-villager::after { content:''; position:absolute; top:7px; left:-4px; width: 24px; height: 9px; background: #7a90d8; border-radius: 8px; }
.v1 { left: 28%; animation-delay: .2s; }
.v2 { left: 50%; bottom: 126px; animation-delay: .8s; }
.v3 { left: 73%; animation-delay: 1.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.city-building { position:absolute; z-index: 5; }
.city-building .city-building-card { width: 180px; padding: 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(18,22,28,.82); box-shadow: 0 12px 28px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.city-building.lg .city-building-card { width: 220px; }
.city-building.md .city-building-card { width: 196px; }
.city-building img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0,0,0,.24)); }
.city-building-top { display:flex; gap:10px; align-items:center; }
.city-building-top strong { display:block; font-size: 15px; }
.city-building-top span { display:block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.city-building-meta { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.city-actions { display:flex; gap:8px; }
.city-costs { margin-top: 10px; display:flex; flex-wrap:wrap; gap:6px; }
.city-req { margin: 10px 0 0; font-size: 12px; color: #ffdfaa; }
.plot-sign { width: 84px; height: 84px; display:grid; place-items:center; border-radius: 18px; background: linear-gradient(180deg, #9a7e4c, #6e5534); color: #fff5db; font-weight: 700; border: 2px dashed rgba(255,255,255,.2); }
.city-building.keep { left: 50%; top: 39%; transform: translateX(-50%); }
.city-building.wall { left: 50%; top: 55%; transform: translateX(-50%); }
.city-building.market { left: 58%; top: 58%; }
.city-building.barracks { left: 20%; top: 52%; }
.city-building.stable { left: 8%; top: 67%; }
.city-building.farm { left: 2%; top: 72%; }
.city-building.lumber { left: 76%; top: 69%; }
.city-building.quarry { left: 72%; top: 52%; }
.city-building.mine { right: 3%; top: 43%; }
.city-building.warehouse { left: 34%; top: 63%; }
.city-building.academy { left: 34%; top: 40%; }
.city-building.workshop { left: 22%; top: 72%; }
.city-building.embassy { left: 58%; top: 42%; }
.city-building.infirmary { left: 48%; top: 74%; }
.city-building.locked .city-building-card { opacity: .86; border-color: rgba(255,204,102,.14); }
.city-hud { display:grid; gap:16px; }
.city-hud-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.city-legend { padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.city-legend h4 { margin: 0 0 8px; }
.city-mini-list { display:grid; gap:8px; }
.city-mini-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.16); }
.city-mini-item b, .city-mini-item span { display:block; }
.city-mini-item span { color: var(--muted); font-size: 12px; }
.compact.six .stat { min-height: 72px; }
@media (max-width: 1400px) {
  .city-shell { grid-template-columns: 1fr; }
  .city-hud { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .kpi.six { grid-template-columns: repeat(3, 1fr); }
  .city-stage { min-height: 1020px; }
  .city-building.keep { top: 31%; }
  .city-building.wall { top: 46%; }
  .city-building.market { top: 49%; }
  .city-building.barracks { top: 48%; }
  .city-building.stable { top: 61%; }
  .city-building.farm { top: 74%; }
  .city-building.lumber { top: 74%; }
  .city-building.quarry { top: 61%; }
  .city-building.mine { top: 35%; }
  .city-building.warehouse { top: 61%; }
  .city-building.academy { top: 35%; }
  .city-building.workshop { top: 76%; }
  .city-building.embassy { top: 37%; }
  .city-building.infirmary { top: 80%; }
}
@media (max-width: 760px) {
  .kpi.six { grid-template-columns: repeat(2, 1fr); }
  .city-hud { grid-template-columns: 1fr; }
  .city-stage { min-height: 1220px; }
  .city-building .city-building-card, .city-building.lg .city-building-card, .city-building.md .city-building-card { width: 170px; }
  .city-building.keep { left: 50%; top: 22%; transform: translateX(-50%); }
  .city-building.wall { left: 50%; top: 35%; transform: translateX(-50%); }
  .city-building.barracks { left: 4%; top: 48%; }
  .city-building.market { left: 54%; top: 48%; }
  .city-building.stable { left: 4%; top: 60%; }
  .city-building.quarry { left: 54%; top: 60%; }
  .city-building.farm { left: 4%; top: 72%; }
  .city-building.lumber { left: 54%; top: 72%; }
  .city-building.warehouse { left: 4%; top: 84%; }
  .city-building.workshop { left: 54%; top: 84%; }
  .city-building.academy { left: 4%; top: 96%; }
  .city-building.infirmary { left: 54%; top: 96%; }
  .city-building.embassy { left: 4%; top: 108%; }
  .city-building.mine { left: 54%; top: 108%; right: auto; }
  .city-villager { display:none; }
}


/* Crownforge Kingdoms v4 - coded premium city UI */
body {
  background:
    radial-gradient(circle at 40% -12%, rgba(214,170,74,.18), transparent 34rem),
    radial-gradient(circle at 90% 30%, rgba(61,108,154,.14), transparent 38rem),
    linear-gradient(135deg, #06090d 0%, #10141a 52%, #07090d 100%);
}
.app-shell { grid-template-columns: 286px 1fr; }
.sidebar {
  background: linear-gradient(180deg, rgba(5,10,14,.97), rgba(9,14,19,.94));
  border-right: 1px solid rgba(214,170,74,.28);
}
.brand strong {
  font-family: Georgia, "Times New Roman", serif;
  color: #ffd882;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.brand span { color: #d7a845; }
.nav-item {
  border-radius: 8px;
  padding: 14px 16px;
  color: #d8d3c7;
}
.nav-item:hover, .nav-item.active {
  background: linear-gradient(135deg, rgba(151,105,35,.38), rgba(255,214,106,.07));
  border-color: rgba(229,176,79,.6);
  color: #ffe4a3;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255,225,145,.06), 0 10px 26px rgba(0,0,0,.25);
}
.sidebar-card {
  border-color: rgba(218,159,57,.38);
  background: linear-gradient(180deg, rgba(17,24,31,.86), rgba(7,11,15,.82));
}
.main { padding: 0; overflow: hidden; }
.topbar, .hero-panel { display: none; }
.content-grid { display:block; padding:0; }
.v4-game-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 392px;
  gap: 0;
  background: #090d12;
}
.v4-city-wrap {
  position: relative;
  min-width: 0;
  border-right: 1px solid rgba(214,170,74,.28);
}
.v4-city-stage {
  position: relative;
  min-height: calc(100vh - 70px);
  height: min(900px, calc(100vh - 70px));
  overflow: hidden;
  isolation: isolate;
  background: #0c1117;
}
.v4-city-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 12%, transparent 82%, rgba(0,0,0,.18)),
    url("../img/city_v4_concept.jpg") center / cover no-repeat;
  transform: scale(1.012);
  filter: saturate(1.12) contrast(1.04) brightness(.92);
}
.v4-city-shade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 52% 57%, transparent 0 28%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.36) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.22));
  pointer-events:none;
  z-index:1;
}
.v4-birds { position:absolute; inset:0; z-index:2; pointer-events:none; }
.v4-birds i {
  position:absolute; width:18px; height:8px; border-top:2px solid rgba(27,26,23,.72); border-radius:50%;
  animation: bird 9s linear infinite;
}
.v4-birds i:nth-child(1){ top:9%; left:70%; animation-delay:-1s;}
.v4-birds i:nth-child(2){ top:13%; left:76%; animation-delay:-3s;}
.v4-birds i:nth-child(3){ top:11%; left:85%; animation-delay:-5s;}
.v4-birds i:nth-child(4){ top:18%; left:62%; animation-delay:-6s;}
.v4-birds i:nth-child(5){ top:7%; left:90%; animation-delay:-7s;}
@keyframes bird { from { transform: translateX(0) translateY(0); opacity:.2;} 35%{opacity:.85;} to { transform: translateX(-80px) translateY(15px); opacity:.05;} }
.v4-smoke {
  position:absolute;
  width: 18px; height: 18px; border-radius:50%;
  background: rgba(210,215,214,.42);
  filter: blur(3px);
  z-index:3;
  animation: smoke 4.8s ease-in-out infinite;
  pointer-events:none;
}
.v4-smoke::before, .v4-smoke::after {
  content:""; position:absolute; border-radius:50%; background: rgba(220,225,222,.32); filter: blur(2px);
}
.v4-smoke::before { width:24px; height:24px; left:-8px; top:-24px; }
.v4-smoke::after { width:32px; height:32px; left:5px; top:-52px; opacity:.5; }
.v4-smoke.s1 { left:78%; top:62%; }
.v4-smoke.s2 { left:31%; top:68%; animation-delay: -2s; }
@keyframes smoke { 0%{ transform: translateY(0) scale(.7); opacity:0;} 30%{opacity:.8;} 100%{ transform: translateY(-48px) scale(1.45); opacity:0;} }
.v4-cart, .v4-guard {
  position:absolute; z-index:4; pointer-events:none;
}
.v4-cart {
  left: 41%; top: 56%; width: 34px; height: 18px; border-radius:5px;
  background: linear-gradient(180deg, #8a5428, #4b2e18);
  box-shadow: 0 6px 10px rgba(0,0,0,.35);
  animation: cartmove 13s linear infinite;
}
.v4-cart::before, .v4-cart::after { content:""; position:absolute; bottom:-5px; width:8px; height:8px; border-radius:50%; background:#1b1712; }
.v4-cart::before { left:5px; } .v4-cart::after { right:5px; }
@keyframes cartmove { 0%{transform:translate(-70px,28px) scale(.85);} 50%{transform:translate(35px,0) scale(1);} 100%{transform:translate(110px,-30px) scale(.85);} }
.v4-guard {
  width: 11px; height: 22px; border-radius:5px 5px 3px 3px;
  background: linear-gradient(180deg, #d8b15c, #2e4872);
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
  animation: guardpatrol 6s ease-in-out infinite;
}
.v4-guard::before { content:""; position:absolute; top:-7px; left:2px; width:8px; height:8px; border-radius:50%; background:#d7b184; }
.v4-guard.g1 { left: 55%; top: 44%; }
.v4-guard.g2 { left: 63%; top: 74%; animation-delay:-2s; }
@keyframes guardpatrol { 0%,100%{ transform: translateX(-12px);} 50%{ transform: translateX(12px);} }
.v4-resource-pop {
  position:absolute; z-index:7;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8,12,17,.84);
  border: 1px solid rgba(255,206,94,.45);
  color: #ffe2a2;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(0,0,0,.35);
  pointer-events:none;
  animation: floatpop 3.4s ease-in-out infinite;
}
.pop-gold { left: 36%; top: 42%; }
.pop-food { left: 19%; top: 70%; animation-delay: -1.2s; }
.pop-wood { left: 83%; top: 60%; animation-delay: -2s; }
@keyframes floatpop { 0%{ transform:translateY(8px); opacity:0;} 20%,75%{opacity:1;} 100%{ transform:translateY(-18px); opacity:0;} }
.v4-marker {
  position:absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index:10;
  border:1px solid rgba(226,172,76,.58);
  background: linear-gradient(180deg, rgba(17,22,27,.94), rgba(7,10,13,.91));
  color: #f4efe2;
  border-radius: 8px;
  min-width: 158px;
  min-height: 48px;
  padding: 8px 43px 8px 12px;
  display:grid;
  grid-template-columns: 28px 1fr;
  gap:8px;
  align-items:center;
  text-align:left;
  box-shadow: 0 16px 30px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  backdrop-filter: blur(7px);
}
.v4-marker:hover, .v4-marker.selected {
  transform: translate(-50%, -50%) translateY(-3px);
  border-color: #ffce67;
  box-shadow: 0 0 0 2px rgba(255,206,103,.14), 0 20px 36px rgba(0,0,0,.5), 0 0 28px rgba(255,190,76,.28);
}
.v4-marker.selected::after {
  content:""; position:absolute; left:50%; top: calc(100% + 18px); width: 145px; height: 45px;
  transform: translateX(-50%);
  border: 3px solid rgba(255,211,104,.74);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(255,204,84,.5));
  pointer-events:none;
}
.v4-marker.locked { opacity:.72; filter:saturate(.65); }
.v4-marker-icon { font-size: 21px; line-height:1; }
.v4-marker-text b { display:block; font-size:14px; line-height:1.05; }
.v4-marker-text small { display:block; color:#c9bd9d; margin-top:3px; font-size:12px; }
.v4-marker-up {
  position:absolute;
  right:8px;
  top:8px;
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius: 7px;
  border:1px solid rgba(255,203,95,.45);
  background: linear-gradient(180deg, rgba(210,152,46,.28), rgba(100,65,22,.36));
  color:#ffd981;
  font-weight:900;
}
.v4-marker-up.ready { background: linear-gradient(180deg, rgba(94,188,66,.58), rgba(35,102,32,.58)); color:#e9ffe1; }
.v4-selected-card {
  position:absolute;
  left:50%;
  bottom: 20px;
  width:min(620px, calc(100% - 44px));
  transform:translateX(-50%);
  z-index:16;
  padding:14px;
  border:1px solid rgba(230,175,76,.48);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16,22,28,.96), rgba(8,11,15,.95));
  box-shadow: 0 28px 70px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.v4-selected-left {
  display:grid;
  grid-template-columns: 104px 1fr;
  gap:14px;
  align-items:start;
}
.v4-selected-left img {
  width:104px; height:82px; object-fit:contain;
  border-radius:10px;
  background: radial-gradient(circle at 50% 20%, rgba(255,217,118,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.09);
  padding:8px;
}
.v4-selected-left h3 { font-family: Georgia, "Times New Roman", serif; color:#ffe0a0; margin-top:3px; }
.v4-selected-left p { margin:2px 0 4px; color:#e2d5b4; }
.v4-selected-left small { color:#aeb6bf; line-height:1.35; display:block; }
.v4-progress-row { margin:12px 0; display:grid; grid-template-columns: 142px 1fr; align-items:center; gap:12px; color:#d8d0b8; font-size:13px; }
.v4-mini-progress { height:8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.v4-mini-progress i { display:block; height:100%; background:linear-gradient(90deg, #75d95e, #e5c35d); border-radius:inherit; }
.v4-selected-body { display:grid; grid-template-columns: 1fr 245px; gap:12px; }
.v4-selected-body h4 { margin:0 0 8px; color:#f2d897; }
.v4-selected-effects { grid-template-columns: repeat(2, minmax(0,1fr)); margin:0; }
.v4-upgrade-box {
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  padding:12px;
  background:rgba(255,255,255,.035);
}
.v4-upgrade-box .btn { width:100%; margin-top:8px; min-height:38px; }
.v4-time { margin:6px 0 0; color:#c8b88f; font-size:13px; }
.v4-selected-actions { display:flex; gap:8px; margin-top:10px; }
.v4-selected-actions .btn { min-height:36px; padding:8px 11px; }
.v4-right-panel {
  min-height:100vh;
  padding:18px 18px 20px;
  background: linear-gradient(180deg, rgba(6,11,15,.98), rgba(9,14,18,.98));
  box-shadow: inset 1px 0 0 rgba(255,255,255,.04);
}
.v4-stat-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.v4-stat {
  min-height:70px;
  border:1px solid rgba(226,172,76,.32);
  border-radius:8px;
  background: linear-gradient(180deg, rgba(23,30,37,.9), rgba(10,15,20,.9));
  display:grid;
  grid-template-columns:38px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap:8px;
  align-items:center;
  padding:10px;
}
.v4-stat span { grid-row: 1 / 3; font-size:27px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.v4-stat b { font-size:20px; line-height:1; color:#fff4d1; }
.v4-stat small { color:#b9c0c8; }
.v4-panel-box {
  border:1px solid rgba(226,172,76,.38);
  border-radius:10px;
  padding:16px;
  background: linear-gradient(180deg, rgba(19,27,34,.86), rgba(7,11,15,.88));
}
.v4-panel-title h3 {
  font-family: Georgia, "Times New Roman", serif;
  color:#f1d28a;
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:.5px;
}
.v4-panel-title p { margin:8px 0 14px; }
.v4-quick-list { display:grid; gap:9px; }
.v4-quick-row {
  display:grid;
  grid-template-columns: 1fr 52px;
  gap:8px;
  align-items:stretch;
}
.v4-quick-main {
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background: rgba(255,255,255,.035);
  color:var(--text);
  text-align:left;
  padding:9px 10px;
  display:grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
}
.v4-quick-row.active .v4-quick-main { border-color: rgba(255,209,105,.55); background: rgba(255,201,88,.07); }
.v4-quick-main i { grid-row:1 / 3; font-style:normal; font-size:25px; }
.v4-quick-main strong { font-size:16px; color:#f5efe4; }
.v4-quick-main small { color:#b8c0cb; }
.v4-quick-main span { grid-row: 1 / 3; grid-column: 3; color:#aeb6bf; font-size:12px; }
.v4-plus {
  border-radius:8px;
  border:1px solid rgba(255,201,88,.58);
  color:#ffe0a0;
  background: linear-gradient(180deg, rgba(205,145,44,.25), rgba(72,48,19,.45));
  font-weight:900;
  font-size:17px;
}
.v4-plus:disabled { opacity:.45; cursor:not-allowed; }
.v4-wide-btn { width:100%; margin-top:12px; }
.v4-event-bar {
  height:70px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border-top:1px solid rgba(226,172,76,.28);
  background: linear-gradient(180deg, rgba(7,10,14,.98), rgba(10,15,20,.98));
}
.v4-event {
  min-width:0;
  height:50px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  display:grid;
}
.v4-event b { color:#e9d090; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v4-event span { color:#aeb6bf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.v4-event.good b { color:#aee66f; }
.v4-event.danger b { color:#ff987f; }
.v4-lower-grid {
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:16px;
  padding:16px;
  background:#0e1218;
}
.v4-lower-grid .card { grid-column:auto; }
@media (max-width: 1300px) {
  .v4-game-screen { grid-template-columns: 1fr; }
  .v4-right-panel { min-height:auto; }
  .v4-city-stage { height: 780px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position:fixed; transform:translateX(-102%); }
  .sidebar.open { transform:translateX(0); }
  .hamburger { display:block; }
  .v4-city-stage { height: 720px; min-height:720px; }
  .v4-marker { min-width:130px; padding-right:38px; }
  .v4-marker-text b { font-size:12px; }
  .v4-selected-card { width: calc(100% - 20px); }
  .v4-selected-body { grid-template-columns:1fr; }
  .v4-event-bar { grid-template-columns:1fr; height:auto; }
  .v4-lower-grid { grid-template-columns:1fr; }
}


/* Crownforge Kingdoms v5 - modular city sprites, no single city wallpaper */
.v5-city-stage {
  background:
    linear-gradient(180deg, #8fc7f3 0%, #d8eef9 43%, #427736 43.2%, #1e4125 100%) !important;
}
.v5-city-stage .v4-city-art,
.v5-city-stage .v4-city-shade {
  display: none !important;
}
.v5-sky-layer {
  position:absolute;
  inset:0 0 43% 0;
  z-index:0;
  background:
    radial-gradient(circle at 64% 18%, rgba(255,220,128,.9) 0 3.6rem, rgba(255,220,128,.22) 3.8rem, transparent 11rem),
    linear-gradient(180deg, #83bff0, #d9eefb);
}
.v5-sun {
  position:absolute;
  right:10%;
  top:14%;
  width:82px;
  height:82px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff5c4, #ffd069);
  box-shadow:0 0 80px rgba(255,210,104,.42);
}
.v5-cloud {
  position:absolute;
  width:150px;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  filter:blur(.2px);
}
.v5-cloud:before,.v5-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.v5-cloud:before{width:65px;height:65px;left:24px;top:-25px}
.v5-cloud:after{width:78px;height:78px;right:18px;top:-34px}
.v5-cloud.c1{left:8%;top:18%;animation:drift 18s linear infinite}
.v5-cloud.c2{left:40%;top:12%;transform:scale(.75);animation:drift 23s linear infinite reverse}
.v5-cloud.c3{right:18%;top:27%;transform:scale(.62);animation:drift 27s linear infinite}
.v5-terrain {
  position:absolute;
  inset:auto;
  pointer-events:none;
  user-select:none;
}
.v5-terrain.mountains { left:0; right:0; top:10%; width:100%; height:32%; z-index:1; opacity:.95; }
.v5-terrain.grass { left:6%; top:29%; width:88%; height:66%; z-index:2; filter: drop-shadow(0 30px 30px rgba(0,0,0,.38)); }
.v5-terrain.river { right:0; top:35%; width:100%; height:65%; z-index:3; opacity:.92; }
.v5-terrain.roads { left:6%; top:31%; width:88%; height:62%; z-index:5; }
.v5-terrain.forest { left:6%; top:31%; width:88%; height:62%; z-index:8; }
.v5-terrain.walls { left:6%; top:31%; width:88%; height:62%; z-index:16; }
.v5-buildings-layer {
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
}
.v5-building-sprite {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  z-index:calc(20 + var(--z, 0));
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease;
}
.v5-building-sprite img {
  display:block;
  width:100%;
  height:auto;
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.45));
}
.v5-building-sprite:hover,
.v5-building-sprite.selected {
  transform:translate(-50%, -50%) translateY(-8px) scale(1.035);
  filter: drop-shadow(0 0 16px rgba(255,208,95,.35));
}
.v5-building-sprite.construction img {
  animation: buildpulse 1.7s ease-in-out infinite;
}
@keyframes buildpulse {
  0%,100%{filter:drop-shadow(0 18px 16px rgba(0,0,0,.45))}
  50%{filter:drop-shadow(0 18px 16px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,190,80,.38))}
}
.v5-selection-ring {
  position:absolute;
  left:50%;
  bottom:4%;
  width:86%;
  height:26%;
  transform:translateX(-50%);
  border:3px solid rgba(255,210,88,.82);
  border-radius:50%;
  box-shadow:0 0 18px rgba(255,205,84,.55), inset 0 0 14px rgba(255,205,84,.26);
  animation:ringbreath 1.8s ease-in-out infinite;
}
@keyframes ringbreath { 0%,100%{opacity:.65; transform:translateX(-50%) scale(.96)} 50%{opacity:1; transform:translateX(-50%) scale(1.04)} }
.v5-level-chip {
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  padding:3px 8px;
  border-radius:999px;
  background:rgba(7,10,14,.85);
  border:1px solid rgba(255,205,92,.45);
  color:#ffe0a0;
  font-size:11px;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.38);
}
.v5-marker {
  min-width: 142px;
  min-height: 43px;
  padding: 7px 38px 7px 10px;
  z-index:38;
}
.v5-marker.selected::after {
  display:none;
}
.v5-marker .v4-marker-icon { font-size:18px; }
.v5-marker .v4-marker-text b { font-size:13px; }
.v5-marker .v4-marker-text small { font-size:11px; }
.v5-selected-card {
  bottom: 12px;
  max-height: 42%;
  overflow:auto;
}
.v5-selected-card .v4-selected-left img {
  object-fit:contain;
  background:linear-gradient(180deg, rgba(255,206,103,.08), rgba(255,255,255,.03));
}
.v5-selected-card .btn-danger {
  width:100%;
  margin-top:8px;
}
.v4-resource-pop { z-index:42; }
.v4-cart, .v4-guard, .v4-smoke, .v4-birds { z-index:30; }
@media (max-width: 1300px) {
  .v5-city-stage { height: 820px; }
}
@media (max-width: 900px) {
  .v5-marker { min-width:112px; padding-right:32px; }
  .v5-marker .v4-marker-icon { display:none; }
  .v5-building-sprite { width: calc(var(--w) * .72); }
}


/* Crownforge Kingdoms v6 - cleaner playable city, no clutter */
.v6-city-stage {
  background:#0d1519 !important;
  min-height: calc(100vh - 70px);
  height: min(890px, calc(100vh - 70px));
}
.v6-board {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  user-select:none;
  pointer-events:none;
}
.v6-wall-layer,
.v6-props-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}
.v6-wall-layer { z-index: 16; }
.v6-props-layer { z-index: 24; }
.v6-buildings-layer { z-index: 14; }
.v6-building-sprite {
  width: var(--w);
  z-index: calc(20 + var(--z));
}
.v6-building-sprite img {
  filter: drop-shadow(0 20px 15px rgba(0,0,0,.46));
}
.v6-building-sprite:hover,
.v6-building-sprite.selected {
  transform: translate(-50%, -50%) translateY(-7px) scale(1.045);
}
.v6-building-sprite.blueprint {
  opacity: .72;
}
.v6-building-sprite.blueprint img {
  filter: drop-shadow(0 16px 13px rgba(0,0,0,.38)) saturate(.85);
}
.v6-pin {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%, -50%);
  z-index:60;
  min-width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,211,105,.52);
  background:rgba(8,12,17,.88);
  color:#ffe0a0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 9px;
  box-shadow:0 10px 23px rgba(0,0,0,.42);
  backdrop-filter: blur(7px);
  transition:.18s ease;
}
.v6-pin:hover,
.v6-pin.selected {
  min-width:120px;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(22,29,35,.96), rgba(8,12,17,.94));
  border-color:#ffd36b;
  box-shadow:0 0 0 2px rgba(255,211,105,.14), 0 16px 32px rgba(0,0,0,.5);
}
.v6-pin span { font-size:17px; }
.v6-pin b { display:none; font-size:13px; color:#fff1c7; white-space:nowrap; }
.v6-pin.selected b,
.v6-pin:hover b { display:inline; }
.v6-pin small {
  position:absolute;
  top:31px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:#fff;
  background:rgba(0,0,0,.55);
  border-radius:999px;
  padding:2px 6px;
  white-space:nowrap;
}
.v6-pin.ready:after {
  content:"+";
  position:absolute;
  right:-5px;
  top:-5px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#62c447;
  color:#071108;
  font-weight:900;
  font-size:13px;
}
.v6-selected-dock {
  position:absolute;
  left:24px;
  right:24px;
  bottom:14px;
  z-index:80;
  min-height:126px;
  display:grid;
  grid-template-columns: 310px minmax(220px,1fr) auto;
  gap:16px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(230,175,76,.46);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(13,19,25,.95), rgba(6,10,14,.94));
  box-shadow:0 24px 60px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
}
.v6-dock-head {
  display:grid;
  grid-template-columns:96px 1fr;
  gap:12px;
  align-items:center;
}
.v6-dock-head img {
  width:96px;
  height:76px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
}
.v6-dock-head h3 {
  font-family:Georgia,"Times New Roman",serif;
  color:#ffe0a0;
}
.v6-dock-head p {
  margin:4px 0 0;
  font-size:13px;
}
.v6-dock-desc {
  margin:0;
  max-width:470px;
}
.v6-dock-cost {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
}
.v6-dock-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  min-width:190px;
}
.v6-dock-actions .btn {
  min-height:38px;
  padding:8px 12px;
}
.v6-event-bar {
  height:70px;
}
.v4-resource-pop {
  font-size:13px;
  padding:5px 9px;
}
.pop-gold { left: 44%; top: 43%; }
.pop-food { left: 25%; top: 73%; }
.pop-wood { left: 73%; top: 70%; }
.v4-cart { left: 47%; top: 54%; }
.v4-guard.g1 { left: 54%; top: 39%; }
.v4-guard.g2 { left: 64%; top: 68%; }
.v4-smoke.s1 { left:78%; top:60%; }
.v4-smoke.s2 { left:36%; top:59%; }
@media (max-width: 1300px) {
  .v6-city-stage { height: 820px; }
  .v6-selected-dock {
    grid-template-columns: 1fr;
    align-items:stretch;
    max-height: 46%;
    overflow:auto;
  }
  .v6-dock-actions {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 900px) {
  .v6-building-sprite { width: calc(var(--w) * .72); }
  .v6-selected-dock { left:10px; right:10px; bottom:10px; }
  .v6-dock-actions { grid-template-columns:1fr; }
}


/* Crownforge Kingdoms v7 - buildable empty city map */
.v7-build-stage {
  position:relative;
  height:min(890px, calc(100vh - 70px));
  min-height:calc(100vh - 70px);
  overflow:hidden;
  background:#0c1418;
  isolation:isolate;
}
.v7-board {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  user-select:none;
  pointer-events:none;
}
.v7-grid-lines {
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.28;
  background-image:
    linear-gradient(30deg, transparent 47.5%, rgba(255,255,255,.12) 48%, transparent 49.5%),
    linear-gradient(-30deg, transparent 47.5%, rgba(255,255,255,.10) 48%, transparent 49.5%);
  background-size: 92px 52px;
  mask-image: radial-gradient(circle at 52% 60%, black 0 42%, transparent 68%);
  pointer-events:none;
}
.v7-slot {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%, -50%);
  width:128px;
  height:58px;
  z-index:8;
  border:2px dashed rgba(255,230,153,.22);
  border-radius:50%;
  background:rgba(0,0,0,.05);
  color:#ffe7a3;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:.42;
}
.v7-slot.wide { width:168px; height:70px; }
.v7-slot.large { width:190px; height:82px; }
.v7-build-stage.placing .v7-slot.can-place {
  pointer-events:auto;
  opacity:1;
  background:rgba(95,184,75,.16);
  border-color:rgba(142,239,101,.82);
  box-shadow:0 0 25px rgba(102,224,89,.26), inset 0 0 20px rgba(102,224,89,.14);
  cursor:pointer;
}
.v7-slot.occupied,
.v7-slot.locked {
  opacity:.12;
}
.v7-slot span {
  font-size:12px;
  font-weight:800;
  color:#efffd6;
  text-shadow:0 2px 6px rgba(0,0,0,.65);
}
.v7-building {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  z-index:30;
  transform:translate(-50%, -50%);
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  transition:.18s ease;
}
.v7-building img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.48));
}
.v7-building:hover,
.v7-building.selected {
  transform:translate(-50%, -50%) translateY(-7px) scale(1.045);
}
.v7-building-name {
  position:absolute;
  left:50%;
  top:-4px;
  transform:translate(-50%, -100%);
  min-width:150px;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid rgba(226,172,76,.55);
  background:linear-gradient(180deg, rgba(17,22,28,.95), rgba(7,10,13,.92));
  color:#fff0c4;
  box-shadow:0 14px 26px rgba(0,0,0,.44);
  opacity:0;
  pointer-events:none;
  transition:.16s ease;
}
.v7-building:hover .v7-building-name,
.v7-building.selected .v7-building-name {
  opacity:1;
}
.v7-building-name b,
.v7-building-name small {
  display:block;
}
.v7-building-name small {
  color:#c7b994;
  font-size:12px;
  margin-top:2px;
}
.v7-placement-hint {
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:90;
  width:min(560px, calc(100% - 40px));
  padding:12px 14px;
  border:1px solid rgba(142,239,101,.45);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(18,30,22,.96), rgba(7,12,9,.94));
  box-shadow:0 20px 50px rgba(0,0,0,.48), 0 0 22px rgba(96,224,94,.18);
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  align-items:center;
}
.v7-placement-hint b {
  color:#dfffbd;
}
.v7-placement-hint span {
  color:#bfcab6;
}
.v7-placement-hint .btn {
  grid-row:1 / span 2;
  grid-column:2;
}
.v7-dock {
  position:absolute;
  left:20px;
  right:20px;
  bottom:14px;
  z-index:85;
  display:grid;
  grid-template-columns:310px minmax(220px,1fr) minmax(250px,auto);
  gap:16px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(230,175,76,.46);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(13,19,25,.96), rgba(6,10,14,.94));
  box-shadow:0 24px 60px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}
.v7-dock-title {
  display:grid;
  grid-template-columns:100px 1fr;
  gap:12px;
  align-items:center;
}
.v7-dock-title img {
  width:100px;
  height:78px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
}
.v7-dock-title h3 {
  font-family:Georgia,"Times New Roman",serif;
  color:#ffe0a0;
}
.v7-dock-title p {
  margin:4px 0 0;
  font-size:13px;
}
.v7-dock > p {
  margin:0;
  color:#aeb8c2;
}
.v7-dock-costs {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}
.v7-dock-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.v7-dock-actions .btn {
  min-height:38px;
}
.v7-event-bar { height:70px; }
.v4-resource-pop { z-index:70; }
.pop-gold { left:46%; top:43%; }
.v4-cart { left:46%; top:52%; z-index:50; }
.v4-guard.g1 { left:54%; top:40%; z-index:50; }
.v4-guard.g2 { left:67%; top:66%; z-index:50; }
.v4-smoke.s1 { left:76%; top:57%; z-index:55; }
.v4-smoke.s2 { left:38%; top:58%; z-index:55; }
@media (max-width:1300px) {
  .v7-build-stage { height:820px; }
  .v7-dock {
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .v7-dock-actions {
    justify-content:flex-start;
  }
}
@media (max-width:900px) {
  .v7-building { width:calc(var(--w) * .72); }
  .v7-slot { width:96px; height:44px; }
  .v7-dock { left:10px; right:10px; }
  .v7-placement-hint { grid-template-columns:1fr; }
  .v7-placement-hint .btn { grid-row:auto; grid-column:auto; }
}


/* Crownforge Kingdoms v8 - premium asset pass */
.v7-build-stage {
  background:#0a1115;
}
.v7-board {
  filter: saturate(.96) contrast(1.08) brightness(.88);
}
.v7-grid-lines {
  opacity:.14;
  background-size: 112px 62px;
}
.v7-slot {
  border-color:rgba(255,230,153,.14);
  background:rgba(0,0,0,.03);
  opacity:.24;
}
.v7-build-stage.placing .v7-slot.can-place {
  background:rgba(120,191,77,.12);
  border-color:rgba(164,232,116,.7);
  box-shadow:0 0 32px rgba(102,224,89,.2), inset 0 0 20px rgba(102,224,89,.08);
}
.v7-building img {
  filter:drop-shadow(0 28px 18px rgba(0,0,0,.58)) saturate(.98) contrast(1.08);
}
.v7-building:hover,
.v7-building.selected {
  transform:translate(-50%, -50%) translateY(-9px) scale(1.055);
}
.v7-building-name {
  border-color:rgba(226,172,76,.7);
  background:linear-gradient(180deg, rgba(13,18,23,.98), rgba(4,7,10,.95));
  box-shadow:0 18px 35px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.05);
}
.v7-dock {
  background:linear-gradient(180deg, rgba(9,14,18,.97), rgba(3,6,9,.95));
  border-color:rgba(216,164,70,.62);
}
.v7-dock-title img {
  background:radial-gradient(circle at 50% 20%, rgba(255,208,93,.09), rgba(255,255,255,.025));
}
.v4-stat-grid .v4-stat,
.v4-stat,
.v4-panel-box,
.v4-quick-main {
  background:linear-gradient(180deg, rgba(12,18,24,.94), rgba(5,9,13,.92));
}
.v4-plus,
.v4-wide-btn,
.btn-primary {
  box-shadow:0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.sidebar {
  background:linear-gradient(180deg, rgba(2,7,10,.98), rgba(5,10,14,.96));
}
.brand img {
  filter:drop-shadow(0 8px 18px rgba(216,166,72,.28));
}
.v4-resource-pop {
  background:rgba(6,9,12,.86);
  border-color:rgba(229,178,76,.56);
}


/* Crownforge Kingdoms v9 - full visual rework */
:root {
  --bg:#05080b;
  --panel:rgba(7,12,16,.94);
  --panel-2:rgba(12,18,24,.94);
  --line:rgba(220,165,70,.24);
  --text:#f0eadc;
  --muted:#9fa9b3;
  --soft:#cfc7b5;
  --gold:#c79544;
  --gold-2:#f0c765;
  --green:#79c86b;
  --red:#da6a58;
}
body {
  background:
    radial-gradient(circle at 48% -10%, rgba(199,149,68,.15), transparent 34rem),
    linear-gradient(135deg,#030608,#0a1116 48%,#030608);
}
.sidebar {
  background:linear-gradient(180deg, rgba(2,6,9,.99), rgba(4,9,13,.97));
  border-right:1px solid rgba(199,149,68,.32);
}
.brand strong {
  color:#f0c765;
  text-shadow:0 0 16px rgba(240,199,101,.18);
}
.nav-item {
  border-radius:10px;
  color:#cfc7b5;
}
.nav-item:hover,
.nav-item.active {
  background:linear-gradient(135deg, rgba(130,89,37,.42), rgba(255,219,132,.07));
  border-color:rgba(240,199,101,.55);
  box-shadow:0 12px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
}
.v7-build-stage {
  background:#05090d;
  height:min(900px, calc(100vh - 70px));
  min-height:calc(100vh - 70px);
}
.v7-board {
  filter:saturate(.88) contrast(1.13) brightness(.73);
}
.v7-build-stage::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(circle at 52% 55%, transparent 0 34%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 16%, transparent 82%, rgba(0,0,0,.36));
}
.v7-grid-lines {
  opacity:.10;
  background-size:126px 70px;
  z-index:4;
}
.v7-slot {
  z-index:12;
  opacity:.18;
  border-color:rgba(240,199,101,.13);
}
.v7-build-stage.placing .v7-slot.can-place {
  opacity:1;
  background:rgba(104,168,77,.10);
  border-color:rgba(147,222,103,.72);
  box-shadow:0 0 34px rgba(94,212,78,.22), inset 0 0 22px rgba(94,212,78,.12);
}
.v7-building {
  z-index:35;
}
.v7-building img {
  filter:drop-shadow(0 36px 22px rgba(0,0,0,.66)) saturate(.95) contrast(1.1) brightness(.86);
}
.v7-building:hover,
.v7-building.selected {
  transform:translate(-50%, -50%) translateY(-10px) scale(1.06);
}
.v7-building.selected img {
  filter:drop-shadow(0 38px 24px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(240,199,101,.3)) saturate(1) contrast(1.12) brightness(.92);
}
.v5-selection-ring {
  border-color:rgba(240,199,101,.82);
  box-shadow:0 0 24px rgba(240,199,101,.5), inset 0 0 16px rgba(240,199,101,.22);
}
.v7-building-name {
  background:linear-gradient(180deg, rgba(9,14,18,.98), rgba(2,5,8,.96));
  border-color:rgba(240,199,101,.62);
  box-shadow:0 20px 44px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.045);
}
.v7-dock {
  background:linear-gradient(180deg, rgba(7,12,16,.97), rgba(2,5,8,.95));
  border-color:rgba(199,149,68,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
}
.v7-dock-title img {
  background:radial-gradient(circle at 50% 20%, rgba(240,199,101,.10), rgba(255,255,255,.025));
  border-color:rgba(240,199,101,.18);
}
.v7-dock-title h3 {
  color:#f0c765;
  text-shadow:0 0 12px rgba(240,199,101,.16);
}
.v4-right-panel {
  background:linear-gradient(180deg, rgba(3,8,12,.99), rgba(5,10,14,.98));
  border-left:1px solid rgba(199,149,68,.28);
}
.v4-stat,
.v4-panel-box,
.v4-quick-main,
.v4-event {
  background:linear-gradient(180deg, rgba(9,15,20,.95), rgba(3,7,10,.93));
  border-color:rgba(199,149,68,.24);
}
.v4-stat b,
.v4-panel-title h3,
.v4-quick-main strong {
  color:#f0eadc;
}
.v4-plus,
.v4-wide-btn,
.btn-primary {
  background:linear-gradient(180deg, #f0c765, #b87928);
  border-color:rgba(255,229,148,.62);
  color:#1a1004;
  box-shadow:0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn {
  border-radius:10px;
}
.btn:not(.btn-primary) {
  background:rgba(255,255,255,.045);
}
.v4-event-bar {
  background:linear-gradient(180deg, rgba(4,8,11,.98), rgba(2,5,7,.98));
  border-top-color:rgba(199,149,68,.28);
}
.v4-resource-pop {
  background:rgba(4,8,11,.9);
  border-color:rgba(240,199,101,.54);
  color:#f7d88a;
}
.v4-cart,
.v4-guard {
  filter:brightness(.75) saturate(.9);
}
.v4-smoke {
  opacity:.45;
}
@media (max-width:900px) {
  .v7-building { width:calc(var(--w) * .66); }
}


/* v10 city UI rework */
body, .sidebar, .main, .nav-item, .btn, .v10-side-panel, .v7-build-stage, .v7-dock, .v10-build-item, .v10-build-main {
  user-select: none;
}
input, textarea, select { user-select: text; }
.v10-kingdom-layout {
  display:grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap:18px;
  align-items:start;
}
.v10-stage-column { min-width:0; }
.v10-stage-header {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:14px;
  padding:16px 18px;
  border:1px solid rgba(199,149,68,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,13,18,.92), rgba(4,8,11,.9));
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.v10-stage-copy h3 { font-size:24px; color:#f0eadc; margin-top:5px; }
.v10-stage-copy p { margin:6px 0 0; max-width:760px; }
.v10-stage-kpis {
  display:grid;
  grid-template-columns:repeat(3, minmax(88px,1fr));
  gap:10px;
}
.v10-stage-kpis > div {
  min-width:88px;
  padding:10px 12px;
  border:1px solid rgba(199,149,68,.18);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.v10-stage-kpis b { display:block; color:#f0c765; font-size:20px; }
.v10-stage-kpis span { display:block; margin-top:2px; font-size:12px; color:#a7b2bc; }
.v7-build-stage {
  min-height:720px;
  height:min(76vh, 820px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(199,149,68,.22);
  box-shadow:0 26px 80px rgba(0,0,0,.48);
}
.v7-board {
  filter:saturate(.92) contrast(1.05) brightness(.88);
}
.v7-grid-lines { display:none; }
.v7-build-stage::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,0,0,.18) 68%, rgba(0,0,0,.46) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.2));
}
.v10-stage-callout {
  position:absolute;
  top:18px;
  left:18px;
  z-index:18;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(5,9,12,.84);
  border:1px solid rgba(199,149,68,.34);
  color:#f2e6c8;
  box-shadow:0 12px 24px rgba(0,0,0,.28);
  font-size:13px;
}
.v7-slot {
  width:130px;
  height:70px;
  opacity:1;
  border:1px dashed rgba(255,230,159,.55);
  background:radial-gradient(circle at 50% 50%, rgba(255,218,114,.16), rgba(255,218,114,.04));
  backdrop-filter:blur(4px);
}
.v7-slot.wide { width:164px; }
.v7-slot.large { width:176px; height:84px; }
.v7-slot span { font-size:12px; font-weight:700; color:#f7edcf; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.v7-slot.occupied, .v7-slot.locked { opacity:.4; }
.v7-building {
  transition:transform .18s ease, filter .18s ease;
}
.v7-building img {
  filter:drop-shadow(0 34px 22px rgba(0,0,0,.68)) saturate(.95) contrast(1.04);
}
.v7-building-name {
  bottom:-2px;
  transform:translateX(-50%);
  padding:8px 12px;
}
.v7-placement-hint {
  position:absolute;
  top:18px;
  right:18px;
  z-index:18;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:480px;
  padding:14px 16px;
  border:1px solid rgba(199,149,68,.4);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(6,11,15,.94), rgba(4,8,11,.92));
  box-shadow:0 20px 42px rgba(0,0,0,.35);
}
.v7-placement-hint b, .v7-placement-hint span { display:block; }
.v7-placement-hint span { color:#aeb7c0; font-size:13px; margin-top:3px; }
.v10-dock {
  left:16px;
  right:16px;
  bottom:14px;
  padding:14px 16px;
  border-radius:18px;
}
.v10-dock-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:end;
}
.v10-dock-copy p { margin:2px 0 10px; }
.v10-dock-actions {
  min-width:250px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.v7-dock-costs { gap:8px; }
.v10-side-panel {
  display:grid;
  gap:16px;
  position:sticky;
  top:18px;
}
.v10-side-stats {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.v10-panel-box {
  border:1px solid rgba(199,149,68,.32);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg, rgba(7,12,16,.96), rgba(3,6,9,.94));
  box-shadow:0 20px 44px rgba(0,0,0,.38);
}
.v10-panel-box.compact .queue-stack { max-height:320px; overflow:auto; padding-right:6px; }
.v10-panel-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}
.v10-panel-head h3 {
  font-size:18px;
  color:#f0c765;
}
.v10-panel-head p { margin:6px 0 0; font-size:13px; }
.v10-build-groups { display:grid; gap:14px; }
.v10-build-group {
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  padding:12px;
}
.v10-build-group-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.v10-build-group-head span { font-size:20px; }
.v10-build-group-head h4 { margin:0; font-size:15px; color:#f0eadc; }
.v10-build-list { display:grid; gap:10px; }
.v10-build-item {
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:8px;
}
.v10-build-item.active {
  border-color:rgba(240,199,101,.6);
  background:linear-gradient(180deg, rgba(240,199,101,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(240,199,101,.1);
}
.v10-build-main {
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:10px;
  align-items:center;
  padding:0;
  text-align:left;
}
.v10-build-main img {
  width:58px; height:58px; object-fit:contain;
  border-radius:12px;
  background:radial-gradient(circle at 50% 20%, rgba(240,199,101,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  padding:4px;
}
.v10-build-main strong { display:block; color:#f6efdf; }
.v10-build-main small { display:block; margin-top:4px; color:#aeb7c0; font-size:12px; line-height:1.35; }
.v10-build-cta { display:grid; gap:8px; margin-top:8px; }
.v10-build-costs { display:flex; gap:6px; flex-wrap:wrap; }
.v10-build-costs .cost { font-size:11px; }
.v10-lower-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  margin-top:16px;
}
.v10-event-bar {
  margin-top:12px;
  height:auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width: 1200px) {
  .v10-kingdom-layout, .v10-lower-grid { grid-template-columns:1fr; }
  .v10-side-panel { position:static; }
}
@media (max-width: 900px) {
  .v10-stage-header, .v10-dock-body, .v7-placement-hint { grid-template-columns:1fr; display:grid; }
  .v10-stage-header { gap:12px; }
  .v10-stage-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .v10-dock-actions { min-width:0; }
  .v7-build-stage { min-height:620px; height:70vh; }
}

/* v11 rendered PNG asset pass */
.v7-board{filter:saturate(.95) contrast(1.04) brightness(.98)!important}
.v7-build-stage::after{background:radial-gradient(circle at 52% 48%,transparent 0 48%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.32) 100%),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10))!important}
.v7-building img{filter:drop-shadow(0 42px 26px rgba(0,0,0,.72)) saturate(1.03) contrast(1.05) brightness(1.02)!important}
.v7-building.selected img{filter:drop-shadow(0 42px 28px rgba(0,0,0,.72)) drop-shadow(0 0 26px rgba(240,199,101,.34)) saturate(1.06) contrast(1.07) brightness(1.06)!important}
.v10-stage-header,.v10-panel-box,.v7-dock{background:linear-gradient(180deg,rgba(7,11,14,.94),rgba(2,5,7,.96)),radial-gradient(circle at 50% 0%,rgba(240,199,101,.08),transparent 50%)!important}
.v10-build-main img,.v7-dock-title img{object-fit:contain;background:radial-gradient(circle at 50% 34%,rgba(240,199,101,.10),rgba(255,255,255,.025))!important;border-color:rgba(240,199,101,.16)!important}
.v10-build-main img{width:68px!important;height:58px!important}.v10-build-main{grid-template-columns:68px 1fr!important}
.v10-build-item{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015))!important}
.v10-build-item.active{background:linear-gradient(180deg,rgba(240,199,101,.09),rgba(255,255,255,.025))!important}
.v7-slot{background:radial-gradient(circle at 50% 48%,rgba(120,200,95,.18),rgba(255,218,114,.04))!important}
.v10-stage-callout{opacity:.92}.v4-cart,.v4-guard{opacity:.75}

/* v12 premium png pass */
.brand img{width:42px;height:42px;object-fit:contain}
.v7-board{filter:saturate(.98) contrast(1.05) brightness(1.01)!important}
.v7-building img{filter:drop-shadow(0 46px 30px rgba(0,0,0,.75)) saturate(1.04) contrast(1.06) brightness(1.02)!important}
.v7-building-name{padding:7px 12px!important;background:linear-gradient(180deg,rgba(8,12,16,.90),rgba(3,6,9,.86))!important;border-color:rgba(223,180,86,.55)!important}
.v7-dock-title img{width:92px;height:72px;object-fit:contain}
.v10-build-main img{width:72px!important;height:62px!important;object-fit:contain}
.v10-build-main{grid-template-columns:72px 1fr!important}
.v7-build-stage{height:min(78vh,860px)!important}
.v7-build-stage::after{background:radial-gradient(circle at 52% 48%,transparent 0 50%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.08))!important}
.v10-stage-callout{background:rgba(5,9,12,.78)!important}

/* v13 visible visual overhaul */
.v7-board{filter:saturate(.98) contrast(1.07) brightness(1.02)!important}
.v7-build-stage{height:min(80vh,900px)!important;border-color:rgba(209,162,70,.28)!important;box-shadow:0 28px 90px rgba(0,0,0,.52)!important}
.v7-build-stage::after{background:radial-gradient(circle at 52% 42%,transparent 0 52%,rgba(0,0,0,.11) 73%,rgba(0,0,0,.25) 100%),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.08))!important}
.v7-building img{filter:drop-shadow(0 52px 34px rgba(0,0,0,.78)) saturate(1.05) contrast(1.08) brightness(1.02)!important}
.v7-building.selected img{filter:drop-shadow(0 52px 34px rgba(0,0,0,.78)) drop-shadow(0 0 20px rgba(240,199,101,.22)) saturate(1.08) contrast(1.08) brightness(1.04)!important}
.v7-building-name{padding:5px 10px!important;min-width:auto!important;bottom:2px!important;background:linear-gradient(180deg,rgba(8,12,16,.84),rgba(3,6,9,.82))!important;border-color:rgba(223,180,86,.44)!important}
.v7-building-name b{font-size:13px!important}.v7-building-name small{font-size:11px!important}
.v5-selection-ring{border-width:3px!important;opacity:.78!important}
.v10-stage-header,.v10-panel-box,.v7-dock{box-shadow:0 18px 48px rgba(0,0,0,.40)!important}
.v10-stage-callout{background:rgba(4,8,12,.72)!important;border-color:rgba(223,180,86,.22)!important}

/* v14 grounded map correction */
.v7-board{filter:saturate(.96) contrast(1.08) brightness(.98)!important}
.v7-build-stage::after{
  background:
    radial-gradient(circle at 52% 45%, transparent 0 54%, rgba(0,0,0,.09) 74%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08))!important;
}
.v7-building img{
  filter:drop-shadow(0 36px 24px rgba(0,0,0,.72)) saturate(1.02) contrast(1.07) brightness(.98)!important;
}
.v7-building.selected img{
  filter:drop-shadow(0 36px 24px rgba(0,0,0,.72)) drop-shadow(0 0 16px rgba(240,199,101,.20)) saturate(1.04) contrast(1.08) brightness(1.02)!important;
}
.v7-building-name{
  transform:translate(-50%,-110%)!important;
  bottom:auto!important;
  top:10px!important;
  background:linear-gradient(180deg,rgba(5,9,12,.82),rgba(2,5,7,.78))!important;
  border-color:rgba(223,180,86,.36)!important;
}
.v5-selection-ring{opacity:.45!important}
.v10-stage-callout{opacity:.82!important}
.v10-stage-header,.v10-panel-box,.v7-dock{border-color:rgba(199,149,68,.30)!important}

/* v15 clean alpha sprite fix */
.v7-building img{
  background:transparent!important;
  mix-blend-mode:normal!important;
}
.v7-building{
  background:transparent!important;
}
.v7-building.selected img{
  background:transparent!important;
}
.v7-building-name{
  box-shadow:0 12px 28px rgba(0,0,0,.45)!important;
}

/* ===== v16 premium UI integration ===== */
.sidebar-profile-card .profile-mini {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}
.sidebar-profile-card img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(214,170,74,.28);
  background: linear-gradient(135deg, rgba(214,170,74,.12), rgba(255,255,255,.04));
  padding: 6px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.premium-resources { min-width: 0; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-shop { min-width: 160px; }
.icon-btn {
  width: 46px;
  min-width: 46px;
  padding: 0;
}
.gem-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(214,170,74,.22);
  background: rgba(255,255,255,.04);
}
.premium-hero.collapsed { display: none; }
.premium-hero {
  border-color: rgba(214,170,74,.22);
  background: linear-gradient(180deg, rgba(12,14,18,.96), rgba(18,22,29,.92));
}
.v10-kingdom-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}
.v10-stage-column {
  display: grid;
  gap: 16px;
}
.v10-stage-header,
.v10-side-panel,
.v10-lower-grid .card,
.v10-panel-box,
.v7-dock {
  border: 1px solid rgba(214,170,74,.18);
  background: linear-gradient(180deg, rgba(10,12,16,.96), rgba(18,21,28,.94));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.v10-stage-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 22px;
}
.v10-stage-copy p { margin: 8px 0 0; }
.v10-stage-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
}
.v10-stage-kpis > div,
.map-mini-stats > div {
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(214,170,74,.14);
  background: rgba(255,255,255,.035);
}
.v10-stage-kpis b,
.map-mini-stats b { display: block; font-size: 22px; color: #ffe3a0; }
.v10-stage-kpis span,
.map-mini-stats span { color: var(--muted); font-size: 12px; }
.v7-build-stage {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(214,170,74,.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,128,.15), transparent 28%),
    linear-gradient(180deg, #0e1318 0%, #131a22 12%, #1c2718 44%, #151b18 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.3);
}
.v7-board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  filter: saturate(.88) contrast(1.05) brightness(.8);
}
.v7-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .12;
  mix-blend-mode: screen;
}
.v10-stage-callout {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 5;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(214,170,74,.18);
  background: rgba(13,16,20,.86);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  color: #f2e3ba;
}
.v7-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 138px;
  height: 82px;
  border-radius: 50%;
  border: 2px dashed rgba(247,220,138,.5);
  background: rgba(255,255,255,.035);
  color: transparent;
}
.v7-slot.can-place { box-shadow: 0 0 0 6px rgba(214,170,74,.08), 0 0 40px rgba(255,214,128,.2); }
.v7-slot.wide { width: 170px; }
.v7-slot.large { width: 190px; height: 100px; }
.v7-building {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(-50%, -66%);
  border: 0;
  background: transparent;
  padding: 0;
  z-index: 3;
}
.v7-building img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.36));
}
.v7-building.selected img { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 18px 24px rgba(0,0,0,.3)) drop-shadow(0 0 18px rgba(214,170,74,.32)); }
.v7-dock {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 8;
  padding: 18px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
}
.v10-dock-actions { display: grid; gap: 10px; min-width: 220px; }
.v10-side-panel { display: grid; gap: 16px; align-content: start; }
.v10-side-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.v4-stat {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,170,74,.14);
  background: rgba(255,255,255,.03);
}
.v4-stat b { display: block; font-size: 22px; margin-top: 8px; }
.v4-stat small { color: var(--muted); }
.v10-panel-box {
  padding: 18px;
  border-radius: 22px;
}
.v10-panel-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.v10-panel-head p { margin: 4px 0 0; }
.v10-build-groups { display: grid; gap: 12px; }
.v10-build-group {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,170,74,.12);
  background: rgba(255,255,255,.02);
}
.v10-build-group-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.v10-build-list { display: grid; gap: 10px; }
.v10-build-item {
  border: 1px solid rgba(214,170,74,.1);
  border-radius: 16px;
  padding: 10px;
  background: rgba(0,0,0,.16);
}
.v10-build-item.active { border-color: rgba(214,170,74,.28); box-shadow: 0 0 0 1px rgba(214,170,74,.18) inset; }
.v10-build-main {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 0;
  text-align: left;
}
.v10-build-main img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(214,170,74,.12);
  background: rgba(255,255,255,.03);
  padding: 4px;
}
.v10-build-main small { display:block; margin-top:4px; color: var(--muted); }
.v10-build-cta { display: grid; gap: 10px; margin-top: 10px; }
.v10-build-costs { display:flex; flex-wrap: wrap; gap: 6px; }
.v10-event-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.v4-event {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,170,74,.12);
  background: rgba(14,17,21,.92);
}
.v4-event b { display:block; margin-bottom:6px; }
.v10-lower-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 16px;
}

/* Premium world map */
.premium-map-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 18px;
}
.map-left-panel,
.map-right-panel {
  border: 1px solid rgba(214,170,74,.18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10,12,16,.96), rgba(17,21,28,.96));
  box-shadow: 0 20px 56px rgba(0,0,0,.3);
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.map-profile {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
}
.map-profile img {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(214,170,74,.24);
  background: rgba(255,255,255,.03);
  padding: 6px;
}
.map-profile p { margin: 4px 0 0; }
.map-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.map-legend-box {
  border: 1px solid rgba(214,170,74,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  padding: 14px;
}
.map-legend-box h4,
.target-card h4 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: #f2d18b; }
.map-legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.map-legend-list li { display: flex; align-items: center; gap: 10px; color: var(--soft); }
.dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}
.dot.player { background: #54a8ff; }
.dot.neutral { background: #d5aa5f; }
.dot.enemy { background: #cc5c47; }
.dot.cleared { background: #74c67a; }
.back-city { width: 100%; }
.premium-map-center {
  display: grid;
  gap: 14px;
}
.map-search-strip {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,170,74,.18);
  background: linear-gradient(180deg, rgba(11,13,18,.95), rgba(18,22,28,.9));
}
.map-search {
  display:flex; align-items:center; gap:10px; min-width: 260px; max-width: 360px; width:100%;
  border: 1px solid rgba(214,170,74,.16); border-radius: 14px; padding: 0 12px; background: rgba(255,255,255,.03);
}
.map-search input {
  width: 100%; height: 42px; background: transparent; border: 0; color: var(--text); outline: none;
}
.map-army-pill {
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214,170,74,.16);
  background: rgba(255,255,255,.03);
}
.premium-world {
  position: relative;
  min-height: 860px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(214,170,74,.22);
  background:
    radial-gradient(circle at 50% 50%, rgba(35,78,48,.5), rgba(20,36,27,.92) 58%),
    radial-gradient(circle at 20% 35%, rgba(38,77,44,.5), transparent 36%),
    radial-gradient(circle at 78% 30%, rgba(27,61,82,.35), transparent 30%),
    linear-gradient(180deg, #15241b 0%, #111a17 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 28px 70px rgba(0,0,0,.35);
}
.premium-world::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 62%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 45%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 80%, rgba(255,255,255,.12) 0 1px, transparent 2px);
  background-size: 240px 240px;
  pointer-events: none;
}
.world-rivers,
.world-roads {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.world-rivers {
  opacity: .5;
  background:
    radial-gradient(circle at 85% 26%, rgba(68,136,188,.42), transparent 10%),
    linear-gradient(115deg, transparent 0 54%, rgba(78,146,196,.34) 54% 56%, transparent 56% 100%),
    linear-gradient(77deg, transparent 0 43%, rgba(78,146,196,.28) 43% 45%, transparent 45% 100%),
    linear-gradient(155deg, transparent 0 62%, rgba(78,146,196,.26) 62% 64%, transparent 64% 100%);
}
.world-roads {
  opacity: .38;
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(187,156,97,.35) 49.4% 50.6%, transparent 51%),
    linear-gradient(120deg, transparent 49%, rgba(187,156,97,.25) 49.4% 50.6%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(187,156,97,.15) 49.4% 50.6%, transparent 51%);
  background-size: 280px 280px, 360px 360px, 520px 520px;
  background-position: 10% 20%, 35% 70%, center;
}
.world-home,
.world-node {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  padding: 0;
  z-index: 2;
  color: var(--text);
}
.world-home img,
.world-node img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.42));
}
.world-home span,
.world-node .node-label {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,170,74,.18);
  background: rgba(10,12,16,.9);
  box-shadow: 0 10px 20px rgba(0,0,0,.24);
}
.world-node small {
  position: absolute;
  top: 10px;
  right: 4px;
  min-width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  background: rgba(10,12,16,.92);
  border: 1px solid rgba(214,170,74,.18);
  font-weight: 700;
}
.world-home { z-index: 4; }
.world-home img { width: 160px; height: 160px; }
.world-node.active img,
.world-home.active img { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 18px 24px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(89,146,255,.32)); }
.world-node.cleared .node-label { border-color: rgba(122,211,125,.28); color: #d9ffd8; }
.world-node.fav .node-label { border-color: rgba(122,211,125,.28); }
.world-node.mid .node-label { border-color: rgba(255,204,102,.28); }
.world-node.danger .node-label { border-color: rgba(255,119,119,.24); }
.map-bottom-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
}
.map-bottom-nav button {
  min-height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(214,170,74,.16);
  background: linear-gradient(180deg, rgba(8,10,15,.98), rgba(16,19,25,.95));
  color: var(--soft);
}
.map-bottom-nav button.active {
  color: #f4dfa5;
  border-color: rgba(214,170,74,.28);
  box-shadow: inset 0 0 0 1px rgba(214,170,74,.12);
}
.map-coords {
  justify-self: end;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,170,74,.14);
  background: rgba(255,255,255,.03);
}
.target-card {
  border: 1px solid rgba(214,170,74,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
  padding: 16px;
}
.target-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin-bottom: 12px;
  border-radius: 18px;
  border: 1px solid rgba(214,170,74,.1);
  background: radial-gradient(circle at 50% 28%, rgba(214,170,74,.12), transparent 48%), rgba(0,0,0,.12);
}
.target-thumb img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.36));
}
.map-actions-col { display: grid; gap: 10px; margin-top: 12px; }
.quick-links { display: grid; gap: 10px; }
.quick-link {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(214,170,74,.1);
}
.quick-link span {
  width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: rgba(214,170,74,.08); font-size: 20px;
}
.quick-link small { color: var(--muted); }

@media (max-width: 1480px) {
  .premium-map-layout { grid-template-columns: 260px minmax(0,1fr) 300px; }
  .v10-kingdom-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr; }
  .topbar-right { justify-content: flex-start; }
  .v10-kingdom-layout,
  .premium-map-layout,
  .v10-lower-grid { grid-template-columns: 1fr; }
  .premium-world { min-height: 640px; }
}
@media (max-width: 760px) {
  .map-mini-stats,
  .v10-stage-kpis,
  .map-bottom-nav,
  .v10-event-bar { grid-template-columns: 1fr; }
  .v7-dock { position: static; margin: 16px; grid-template-columns: 1fr; }
  .v7-build-stage { min-height: 860px; }
}


/* ===== v20 premium continuation ===== */
.premium-resource-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
}
.resource-rich {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  border-radius: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(214,170,74,.18);
  background: linear-gradient(180deg, rgba(11,13,18,.98), rgba(19,22,28,.93));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 28px rgba(0,0,0,.18);
}
.resource-rich img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 38px; }
.resource-rich > div { display: grid; }
.resource-rich b { display:block; font-size: 25px; line-height: 1.05; color: #ffe8aa; }
.resource-rich span { color: var(--muted); font-size: 12px; }
.resource-rich small { color: #7fd074; font-size: 12px; margin-top: 3px; }
.resource-pop small { color: #a4caff; }
.gem-pill img { width: 24px; height: 24px; object-fit: contain; }
.icon-btn img { width: 22px; height: 22px; object-fit: contain; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; }
.v7-build-stage { min-height: 800px; }
.v7-board { opacity: .93; filter: saturate(.98) contrast(1.05) brightness(.88); }
.v7-grid-lines { opacity: .18; }
.v7-slot { background: rgba(255,255,255,.05); }
.v7-dock { background: linear-gradient(180deg, rgba(7,9,13,.95), rgba(14,18,24,.94)); }
.premium-world { min-height: 900px; background: linear-gradient(180deg, #141a1f 0%, #10151a 100%); }
.world-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; filter:saturate(.95) contrast(1.04) brightness(.78); }
.premium-world::before { opacity: .18; }
.world-rivers { opacity: .22; }
.world-roads { opacity: .52; }
.world-home img { width: 180px; height: 180px; }
.world-node img { width: 136px; height: 136px; }
.world-node .node-label, .world-home span { bottom: -14px; font-size: 15px; padding: 7px 14px; }
.world-node small { top: 8px; right: 0; }
.map-right-panel .target-thumb { border-radius: 18px; overflow:hidden; border: 1px solid rgba(214,170,74,.16); background: rgba(255,255,255,.03); }
.map-right-panel .target-thumb img { width: 100%; height: auto; display:block; }
.map-bottom-nav button { min-height: 64px; font-size: 15px; }
@media (max-width: 1500px) {
  .premium-resource-bar { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}
@media (max-width: 1100px) {
  .premium-resource-bar { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .resource-rich { min-height: 68px; }
}


/* ===== v21 continuation ===== */
.nav-item { display:flex; align-items:center; gap:12px; }
.nav-item .nav-icon { width:26px; height:26px; object-fit:contain; flex:0 0 26px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.24)); }
.nav-item .label { display:inline-block; }
.v21-kingdom-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
.v21-stage-column { min-width:0; }
.v21-side-panel { display:grid; gap:18px; }
.v21-panel-box { padding:18px; border-radius:22px; border:1px solid rgba(214,170,74,.16); background:linear-gradient(180deg, rgba(9,11,15,.96), rgba(17,20,26,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 34px rgba(0,0,0,.18); }
.v21-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v21-mini-stat { padding:12px; border-radius:16px; border:1px solid rgba(214,170,74,.12); background:rgba(255,255,255,.03); display:grid; gap:4px; }
.v21-mini-stat b { color:#ffe7aa; }
.v21-mini-stat span { color:var(--muted); font-size:12px; }
.v21-quick-select { display:grid; gap:10px; }
.v21-quick-select-btn { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(214,170,74,.12); background:rgba(255,255,255,.03); color:var(--text); text-align:left; }
.v21-quick-select-btn img { width:56px; height:56px; object-fit:contain; }
.v21-quick-select-btn.active { border-color: rgba(214,170,74,.28); background: linear-gradient(180deg, rgba(36,29,15,.56), rgba(18,17,13,.45)); }
.v21-build-tray { margin-top:18px; padding:18px 18px 14px; border-radius:24px; border:1px solid rgba(214,170,74,.16); background:linear-gradient(180deg, rgba(9,11,15,.96), rgba(16,19,24,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 34px rgba(0,0,0,.18); }
.v21-build-tray-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.v21-build-tray-head h3 { margin:4px 0 0; }
.v21-group-tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.v21-group-tab { min-height:42px; padding:0 16px; border-radius:999px; border:1px solid rgba(214,170,74,.16); background:rgba(255,255,255,.03); color:var(--soft); display:inline-flex; align-items:center; gap:8px; }
.v21-group-tab.active { background:linear-gradient(180deg, rgba(103,76,26,.62), rgba(45,33,11,.68)); color:#ffe8ad; border-color:rgba(214,170,74,.32); }
.v21-build-cards { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:14px; }
.v21-build-card { padding:12px; border-radius:20px; border:1px solid rgba(214,170,74,.14); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); display:grid; gap:12px; }
.v21-build-card.active { border-color: rgba(214,170,74,.3); box-shadow: inset 0 0 0 1px rgba(214,170,74,.08), 0 10px 22px rgba(0,0,0,.16); }
.v21-build-card-main { display:grid; gap:10px; background:transparent; border:0; padding:0; color:var(--text); text-align:left; }
.v21-build-card-main img { width:100%; max-width:124px; height:92px; object-fit:contain; justify-self:center; filter: drop-shadow(0 10px 14px rgba(0,0,0,.32)); }
.v21-build-card strong { display:block; color:#ffe8ad; }
.v21-build-card small { color:var(--muted); line-height:1.35; }
.v21-build-meta .cost-row { gap:6px; }
.v21-build-actions { display:flex; justify-content:flex-end; }
.v21-stage-tools { position:absolute; right:18px; bottom:190px; display:grid; gap:10px; z-index:4; }
.v21-stage-tool { width:94px; min-height:88px; padding:10px 8px; border-radius:18px; border:1px solid rgba(214,170,74,.15); background:linear-gradient(180deg, rgba(10,12,16,.96), rgba(18,21,27,.94)); color:var(--soft); display:grid; justify-items:center; align-content:center; gap:8px; box-shadow:0 12px 24px rgba(0,0,0,.18); }
.v21-stage-tool img { width:32px; height:32px; object-fit:contain; }
.v21-stage-tool span { font-size:12px; text-align:center; line-height:1.2; }
.v10-dock { padding-right: 230px; }
@media (max-width: 1600px) { .v21-build-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1280px) { .v21-kingdom-layout { grid-template-columns: 1fr; } .v21-stage-tools { position:static; grid-template-columns: repeat(5, minmax(0,1fr)); margin:14px 0; } .v10-dock { padding-right: 0; } }
@media (max-width: 900px) { .v21-build-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .v21-build-tray-head { flex-direction:column; align-items:flex-start; } }


/* ===== v22 refined cityboard ===== */
.v7-build-stage { min-height: 720px !important; height: min(74vh, 820px) !important; border-radius: 28px !important; overflow: hidden !important; border: 1px solid rgba(214,170,74,.20) !important; box-shadow: 0 26px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important; }
.v7-board { opacity: 1 !important; filter: saturate(1.02) contrast(1.03) brightness(.96) !important; object-fit: cover !important; object-position: center center !important; }
.v7-grid-lines { opacity: .17 !important; background-size: 74px 74px !important; background-image: linear-gradient(rgba(244,234,196,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(244,234,196,.17) 1px, transparent 1px) !important; mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%) !important; }
.v7-build-stage::after { background: linear-gradient(180deg, rgba(9,12,16,.10), rgba(4,6,10,.24)) !important; }
.v7-slot { width: 118px !important; height: 58px !important; border-radius: 16px !important; border: 1px dashed rgba(246,231,180,.55) !important; background: rgba(255,255,255,.04) !important; backdrop-filter: blur(2px); }
.v7-slot.wide { width: 138px !important; }
.v7-slot.large { width: 148px !important; height: 70px !important; }
.v7-slot.can-place { box-shadow: 0 0 0 5px rgba(139,210,94,.12), 0 0 26px rgba(139,210,94,.16) !important; background: rgba(104,178,73,.12) !important; }
.v7-slot span { font-size: 11px !important; }
.v7-building { transform: translate(-50%, -56%) !important; }
.v7-building img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 16px 18px rgba(0,0,0,.38)) !important; }
.v7-building.selected img { filter: drop-shadow(0 18px 20px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(214,170,74,.26)) !important; }
.v7-building-name { bottom: -8px !important; padding: 5px 9px !important; font-size: 12px !important; min-width: auto !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(7,10,14,.94), rgba(12,16,21,.90)) !important; border: 1px solid rgba(214,170,74,.18) !important; }
.v7-building-name b { font-size: 12px !important; }
.v7-building-name small { font-size: 10px !important; }
.v21-stage-tools { right: 18px !important; bottom: 176px !important; }
.v21-stage-tool { width: 86px !important; min-height: 76px !important; border-radius: 16px !important; }
.v21-stage-tool img { width: 28px !important; height: 28px !important; }
.v10-dock { padding-right: 0 !important; display:grid !important; grid-template-columns: 320px 1fr 260px !important; align-items:center !important; gap:18px !important; }
.v10-dock .v7-dock-title { margin-bottom: 0 !important; }
.v10-dock .v7-dock-title img { width: 92px !important; height: 92px !important; object-fit: contain; }
.v10-dock-body { display: contents !important; }
.v10-dock-copy { min-width: 0; }
.v10-dock-actions { justify-self:end; width: 100%; max-width: 260px; }
.v22-quest-card { display:grid; gap:10px; }
.v22-quest-card b { color: #ffe7aa; font-size: 17px; }
.v22-quest-card p { color: var(--muted); margin: 0; line-height: 1.45; }
.v22-quest-card small { color: #d2c394; }
.v22-quest-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.v21-build-card-main img { max-width: 110px !important; height: 84px !important; }
.v21-build-card { border-radius: 18px !important; }
.v21-quick-select-btn img { width: 48px !important; height: 48px !important; }
@media (max-width: 1420px) { .v10-dock { grid-template-columns: 1fr !important; } .v10-dock-actions { justify-self:stretch; max-width:none; } }
@media (max-width: 1280px) { .v21-stage-tools { position: static !important; grid-template-columns: repeat(5, minmax(0,1fr)); margin-top: 14px; } }


/* ===== v23 screenshot-driven layout polish ===== */
.content-grid {
  gap: 14px !important;
}

.v21-kingdom-layout {
  grid-template-columns: minmax(0, 1fr) 276px !important;
  gap: 14px !important;
  align-items: start !important;
}

.v21-stage-header {
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}

.v21-stage-header .v10-stage-copy p {
  margin-top: 4px !important;
}

.v21-stage-header .v10-stage-kpis {
  grid-template-columns: repeat(3, minmax(88px, 1fr)) !important;
}

.v7-build-stage {
  min-height: 640px !important;
  height: min(66vh, 720px) !important;
  border-radius: 22px !important;
  margin-top: 0 !important;
  background: #10150f !important;
}

.v7-board {
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  filter: saturate(1.04) contrast(1.04) brightness(.98) !important;
}

.v7-build-stage::after {
  background:
    linear-gradient(180deg, rgba(3,5,7,.04), rgba(3,5,7,.10) 56%, rgba(3,5,7,.18)) !important;
  pointer-events: none !important;
}

.v10-stage-callout {
  top: 10px !important;
  left: 14px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  opacity: .9 !important;
}

.v7-grid-lines {
  opacity: .08 !important;
}

.v7-building {
  transform: translate(-50%, -52%) !important;
}

.v7-building img {
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.36)) !important;
}

.v7-building-name {
  bottom: -12px !important;
  padding: 4px 8px !important;
  transform: translateX(-50%) scale(.92) !important;
  opacity: .92 !important;
}

.v5-selection-ring {
  opacity: .26 !important;
}

.v21-stage-tools {
  right: 12px !important;
  top: 76px !important;
  bottom: auto !important;
  gap: 8px !important;
}

.v21-stage-tool {
  width: 72px !important;
  min-height: 64px !important;
  padding: 7px 5px !important;
  border-radius: 14px !important;
}

.v21-stage-tool img {
  width: 23px !important;
  height: 23px !important;
}

.v21-stage-tool span {
  font-size: 11px !important;
}

/* Selected-building dock no longer hides the whole board */
.v7-dock {
  left: 18px !important;
  right: 18px !important;
  bottom: 14px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  grid-template-columns: 260px 1fr 220px !important;
  gap: 14px !important;
  min-height: 116px !important;
  background: linear-gradient(180deg, rgba(6,8,11,.94), rgba(10,13,17,.96)) !important;
  backdrop-filter: blur(10px) !important;
}

.v10-dock .v7-dock-title img {
  width: 76px !important;
  height: 76px !important;
}

.v7-dock-title h3 {
  font-size: 21px !important;
}

.v10-dock-copy p {
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.v7-dock-costs {
  gap: 6px !important;
}

.v10-dock-actions {
  max-width: 220px !important;
  gap: 8px !important;
}

.v10-dock-actions .btn {
  min-height: 38px !important;
  padding: 0 12px !important;
}

/* Bottom build tray compact; visible without becoming a giant block */
.v21-build-tray {
  margin-top: 12px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

.v21-build-tray-head {
  margin-bottom: 10px !important;
  align-items: center !important;
}

.v21-build-tray-head h3 {
  font-size: 20px !important;
}

.v21-group-tab {
  min-height: 36px !important;
  padding: 0 12px !important;
}

.v21-build-cards {
  grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  max-height: 212px !important;
  overflow: hidden !important;
}

.v21-build-card {
  padding: 10px !important;
  gap: 8px !important;
  min-height: 194px !important;
}

.v21-build-card-main {
  gap: 6px !important;
}

.v21-build-card-main img {
  height: 70px !important;
  max-width: 96px !important;
}

.v21-build-card strong {
  font-size: 14px !important;
}

.v21-build-card small {
  font-size: 11px !important;
}

.v21-build-meta .cost-row {
  transform: scale(.9);
  transform-origin: left center;
}

.v21-build-actions .btn {
  min-height: 34px !important;
  font-size: 12px !important;
}

/* Right panel should feel like a HUD, not a huge column */
.v21-side-panel {
  gap: 12px !important;
}

.v21-side-stats {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
}

.v4-stat {
  min-height: 70px !important;
  padding: 10px !important;
}

.v4-stat b {
  font-size: 19px !important;
}

.v21-panel-box {
  padding: 14px !important;
  border-radius: 18px !important;
}

.v10-panel-head {
  margin-bottom: 10px !important;
}

.v10-panel-head h3 {
  font-size: 18px !important;
}

.v21-mini-stats {
  gap: 8px !important;
}

.v21-mini-stat {
  padding: 10px !important;
  min-height: 58px !important;
}

.v22-quest-card p,
.v22-quest-card small {
  font-size: 12px !important;
}

.v21-quick-select {
  max-height: 250px !important;
  overflow: auto !important;
}

.v21-quick-select-btn {
  padding: 8px !important;
}

.v21-quick-select-btn img {
  width: 42px !important;
  height: 42px !important;
}

/* Event bar: only supporting info, not a big visual block */
.v10-event-bar {
  margin-top: 12px !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

.v4-event {
  padding: 10px 12px !important;
  min-height: 58px !important;
}

.v4-event span {
  font-size: 12px !important;
}

/* On medium screens keep game usable */
@media (max-width: 1500px) {
  .v21-kingdom-layout {
    grid-template-columns: minmax(0, 1fr) 260px !important;
  }
  .v21-build-cards {
    grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
    max-height: 430px !important;
    overflow: auto !important;
  }
}

@media (max-width: 1280px) {
  .v21-kingdom-layout {
    grid-template-columns: 1fr !important;
  }
  .v21-stage-tools {
    position: static !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    margin: 10px 0 !important;
  }
  .v7-dock {
    position: static !important;
    margin: 12px !important;
    grid-template-columns: 1fr !important;
  }
}


/* v24 single keep board fix */
.v7-board { object-fit: cover; }
.v21-build-card-main img, .v21-quick-select-btn img { object-fit: contain; background: rgba(8,10,16,.35); border-radius: 12px; }
.v10-dock-title img { object-fit: contain; }

/* v25 empty green board + no baked building fix */
.v7-build-stage{
  background:#6f9a43!important;
}
.v7-board{
  object-position:center center!important;
  filter:saturate(1.06) contrast(1.04) brightness(1.02)!important;
}
.v7-grid-lines{
  opacity:.11!important;
}
.v7-building{
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
}
.v7-building::before,
.v7-building::after{
  display:none!important;
}
.v7-building img{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.38))!important;
}
.v7-building.selected img{
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.38)) drop-shadow(0 0 14px rgba(255,215,98,.32))!important;
}
.v7-building-name{
  transform:translateX(-50%) scale(.86)!important;
  bottom:-10px!important;
  pointer-events:none!important;
  opacity:.9!important;
  background:rgba(10,12,14,.72)!important;
  border:1px solid rgba(224,178,78,.35)!important;
}
.v5-selection-ring{
  opacity:.18!important;
  border-width:2px!important;
}
.v10-stage-callout{
  display:none!important;
}
.v21-stage-tool[data-action="startPlacement"][data-id="keep"]{
  opacity:.45!important;
  pointer-events:none!important;
}

/* v26 visual audit fix: clean board, minimal overlay, better world map */
.v7-build-stage{
  background:#80aa4a!important;
}
.v7-board{
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:saturate(1.06) contrast(1.04) brightness(1.03)!important;
}
.v7-build-stage::after{
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08) 70%, rgba(0,0,0,.15))!important;
}
.v10-stage-callout{
  display:none!important;
}
.v7-building,
.v7-building.selected{
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
}
.v7-building::before,
.v7-building::after{
  display:none!important;
}
.v7-building img{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.38))!important;
}
.v7-building.selected img{
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.38)) drop-shadow(0 0 13px rgba(255,216,102,.30))!important;
}
.v5-selection-ring{
  opacity:.18!important;
  border-width:2px!important;
}
.v7-building-name{
  background:rgba(8,10,12,.72)!important;
  border:1px solid rgba(223,177,78,.35)!important;
  transform:translateX(-50%) scale(.82)!important;
  bottom:-12px!important;
  opacity:.88!important;
}
.v21-stage-tool[data-action="startPlacement"][data-id="keep"]{
  opacity:.40!important;
  pointer-events:none!important;
}
.v21-build-card-main img,
.v21-quick-select-btn img{
  object-fit:contain!important;
  background:rgba(8,10,16,.35)!important;
  border-radius:12px!important;
}

/* world map fix */
.premium-world{
  background:#6e9d45!important;
}
.world-backdrop{
  opacity:1!important;
  filter:saturate(1.06) contrast(1.04) brightness(.94)!important;
}
.world-rivers,
.world-roads{
  opacity:0!important;
}
.world-node img{
  width:106px!important;
  height:106px!important;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.38))!important;
}
.world-home img{
  width:142px!important;
  height:142px!important;
}
.world-node .node-label,
.world-home span{
  background:rgba(15,12,8,.88)!important;
  border-color:rgba(218,170,75,.42)!important;
  color:#ffe7ad!important;
}

/* v27 approved visual direction integration */
.v7-build-stage{
  background:#121a12!important;
  min-height:720px!important;
  height:min(72vh,820px)!important;
}
.v7-board{
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:saturate(1.02) contrast(1.03) brightness(.94)!important;
}
.v7-grid-lines{
  opacity:0!important;
}
.v7-build-stage::after{
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.14) 75%, rgba(0,0,0,.24))!important;
}
.v27-keep-hitbox{
  height:170px!important;
  background:transparent!important;
}
.v27-keep-hitbox img{
  display:none!important;
}
.v27-keep-hitbox .v5-selection-ring{
  width:150px!important;
  height:72px!important;
  bottom:2px!important;
  opacity:.16!important;
}
.v27-baked-label{
  bottom:auto!important;
  top:-42px!important;
  transform:translateX(-50%) scale(.9)!important;
}
.v7-building::before,
.v7-building::after{
  display:none!important;
}
.v7-building{
  background:transparent!important;
  box-shadow:none!important;
}
.v7-building img{
  background:transparent!important;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.42))!important;
}
.v7-slot{
  border:2px dashed rgba(250,236,176,.46)!important;
  background:rgba(255,255,255,.035)!important;
}
.v7-slot.can-place{
  background:rgba(101,180,58,.22)!important;
  border-color:rgba(157,230,94,.72)!important;
  box-shadow:0 0 0 4px rgba(83,190,70,.12), 0 0 28px rgba(119,214,72,.20)!important;
}
.v7-dock{
  background:linear-gradient(180deg, rgba(6,8,11,.92), rgba(10,13,17,.96))!important;
}
.v21-build-card-main img,
.v21-quick-select-btn img{
  object-fit:contain!important;
  background:rgba(8,10,16,.30)!important;
  border-radius:12px!important;
}

/* v27 approved map */
.premium-world{
  background:#172313!important;
}
.world-backdrop{
  opacity:1!important;
  filter:saturate(1.05) contrast(1.04) brightness(.90)!important;
}
.world-rivers,
.world-roads{
  opacity:0!important;
}
.world-node img{
  width:86px!important;
  height:86px!important;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))!important;
}
.world-home img{
  width:118px!important;
  height:118px!important;
}
.world-node .node-label,
.world-home span{
  background:linear-gradient(180deg, rgba(32,24,10,.96), rgba(10,9,7,.94))!important;
  border-color:rgba(222,174,78,.48)!important;
  color:#ffe5a8!important;
  box-shadow:0 10px 22px rgba(0,0,0,.28)!important;
}
.world-node small{
  background:#12100a!important;
  border-color:rgba(222,174,78,.45)!important;
  color:#ffdd84!important;
}