:root {
  --ink: #07100f;
  --ink-2: #0b1715;
  --panel: rgba(11, 23, 21, .94);
  --panel-2: rgba(17, 34, 31, .94);
  --line: rgba(216, 168, 44, .24);
  --gold: #d8a82c;
  --gold-bright: #f3c651;
  --teal: #12b8a6;
  --teal-soft: #7ce1d6;
  --red: #db5d4b;
  --text: #f4f2ea;
  --muted: #9fa9a3;
  --shadow: 0 20px 60px rgba(0,0,0,.34);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--ink); color: var(--text); }
body { overflow: hidden; font-size: 16px; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(18,184,166,.55); outline-offset: 2px; }

body.auth-pending { overflow:hidden; }
body.auth-pending .app-shell { visibility:hidden; }
.auth-gate[hidden],.auth-gate [hidden] { display:none!important; }
.auth-gate {
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:auto;
  background:
    radial-gradient(circle at 50% 38%,rgba(184,132,30,.17),transparent 34%),
    linear-gradient(135deg,rgba(4,13,12,.92),rgba(15,10,6,.96)),
    url("./assets/city-steppe-sparse-v1.png") center/cover no-repeat;
}
.auth-gate::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(225,176,52,.08) 1px,transparent 1px),linear-gradient(rgba(225,176,52,.06) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle,#000 0%,transparent 74%);
}
.auth-card {
  position:relative;
  width:min(470px,100%);
  border:1px solid #a77d28;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(34,25,15,.985),rgba(12,9,7,.99));
  color:#eee2c8;
  box-shadow:0 30px 90px #000c,inset 0 1px #fff1;
  overflow:hidden;
}
.auth-card::after { content:""; position:absolute; inset:5px; border:1px solid #d3a83a22; border-radius:8px; pointer-events:none; }
.auth-card > header { display:grid; grid-template-columns:68px 1fr; gap:16px; align-items:center; padding:26px 28px 22px; border-bottom:1px solid #5e471f; background:linear-gradient(120deg,#2b1f10,#17110b); }
.auth-tamga { display:grid; place-items:center; width:66px; height:66px; border:2px solid #c99b2e; border-radius:50%; color:#f1c64b; background:#0d1917; box-shadow:0 0 0 5px #8c641522,0 0 28px #d39b2533; font:900 35px/1 Georgia,serif; }
.auth-card header small { color:#9e875d; font-size:10px; font-weight:900; letter-spacing:.18em; }
.auth-card header h1 { margin:3px 0 2px; color:#f1c544; font:800 31px/1 Georgia,serif; letter-spacing:.055em; }
.auth-card header p { margin:5px 0 0; color:#a99b83; font-size:12px; line-height:1.4; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin:18px 22px 0; border:1px solid #5f4923; border-radius:6px; background:#0f0b08; overflow:hidden; }
.auth-tabs button { min-height:43px; border:0; border-right:1px solid #5f4923; background:transparent; color:#8f836f; font-size:12px; font-weight:900; letter-spacing:.04em; cursor:pointer; }
.auth-tabs button:last-child { border-right:0; }
.auth-tabs button.active { color:#f2d279; background:linear-gradient(#493217,#28180b); box-shadow:inset 0 -2px #c99728; }
#authForm { display:grid; gap:13px; padding:20px 22px 22px; }
#authForm label { display:grid; gap:6px; }
#authForm label span { color:#cfc0a4; font-size:11px; font-weight:800; letter-spacing:.04em; }
#authForm input { width:100%; min-height:46px; padding:0 13px; border:1px solid #574322; border-radius:6px; background:#0e0b08; color:#f2eadc; font-size:14px; box-shadow:inset 0 2px 7px #0007; }
#authForm input::placeholder { color:#6f6659; }
.auth-message { min-height:19px; margin:0; color:#9d917c; font-size:11px; line-height:1.45; }
.auth-message[data-kind="error"] { color:#ff9d8e; }
.auth-message[data-kind="success"] { color:#8edaa7; }
.auth-submit { display:flex; align-items:center; justify-content:center; gap:12px; min-height:48px; border:1px solid #d3a033; border-radius:6px; background:linear-gradient(#5b421c,#33200d); color:#ffe4a2; box-shadow:inset 0 1px #fff2,0 7px 18px #0007; font-size:13px; font-weight:900; letter-spacing:.045em; cursor:pointer; }
.auth-submit b { color:#f3bf36; font-size:18px; }
.auth-submit:hover { filter:brightness(1.13); }
.auth-submit:disabled { cursor:wait; opacity:.62; }
.auth-card > footer { padding:12px 22px 15px; border-top:1px solid #3f311d; color:#776e61; background:#0c0907; font-size:10px; text-align:center; }
.auth-card > footer span { margin-right:5px; color:#b58b2f; }
.account-panel { display:grid; gap:12px; }
.account-panel > section { display:grid; grid-template-columns:54px 1fr; gap:13px; align-items:center; padding:15px; border:1px solid #5d4824; border-radius:8px; background:linear-gradient(135deg,#281c0f,#14100b); }
.account-panel > section > span { display:grid; place-items:center; width:52px; height:52px; border:1px solid #9d7627; border-radius:50%; color:#efc349; background:#0d1917; font-size:27px; }
.account-panel h3,.account-panel p { margin:2px 0; }
.account-panel h3 { color:#f0d17a; font:700 19px Georgia,serif; }
.account-panel small { display:block; color:#928672; font-size:10px; }
.account-panel > div { display:grid; gap:12px; padding:14px; border:1px solid #3e3221; border-radius:8px; background:#120e0a; }
.account-panel > div strong { display:block; color:#d9c9a9; }

.app-shell { min-height: 100dvh; display: grid; grid-template: 76px minmax(0,1fr) / 82px minmax(0,1fr) 320px; background: var(--ink); }
.topbar { grid-column: 1 / -1; display: grid; grid-template-columns: 240px 1fr auto; align-items: stretch; z-index: 20; background: rgba(7,16,15,.97); border-bottom: 1px solid var(--line); box-shadow: 0 10px 35px rgba(0,0,0,.22); }
.brand, .commander, .resource, .nav-item { border: 0; background: transparent; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 20px; text-align: left; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink); background: linear-gradient(145deg,var(--gold-bright),#9a6915); clip-path: polygon(50% 0,100% 25%,87% 82%,50% 100%,13% 82%,0 25%); font-family: Georgia, serif; font-size: 22px; font-weight: 900; }
.brand strong { display: block; font-family: Georgia, serif; letter-spacing: .14em; font-size: 18px; }
.brand small, .commander small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; }
.resources { display: flex; justify-content: center; overflow: hidden; }
.resource { min-width: 116px; display: grid; grid-template-columns: 28px auto; grid-template-rows: 1fr 1fr; column-gap: 5px; align-content: center; border-left: 1px solid rgba(255,255,255,.05); text-align: left; padding: 10px 14px; }
.resource:last-child { border-right: 1px solid rgba(255,255,255,.05); }
.resource > span { grid-row: 1 / 3; align-self: center; font-size: 20px; }
.resource-mini { width:26px; height:26px; background-image:url('assets/resource-atlas-v3.png'); background-repeat:no-repeat; background-size:300% 200%; filter:drop-shadow(0 2px 3px #000a); }
.resource-mini-grain { background-position:0 0; }
.resource-mini-wood { background-position:50% 0; }
.resource-mini-stone { background-position:100% 0; }
.resource-mini-iron { background-position:0 100%; }
.resource-mini-gold { background-position:50% 100%; }
.resource strong { font-size: 14px; }
.resource small { color: #7ed8a1; font-size: 11px; }
.commander { display: flex; align-items: center; gap: 10px; padding: 0 18px; text-align: left; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gold-bright); border: 1px solid var(--gold); background: #182a26; font-size: 13px; font-weight: 800; }

.sidebar { display: flex; flex-direction: column; justify-content: space-between; z-index: 15; background: rgba(7,16,15,.96); border-right: 1px solid var(--line); padding: 14px 10px; }
.sidebar nav { display: grid; gap: 7px; }
.nav-item { position: relative; width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; color: var(--muted); }
.nav-item span { font-size: 23px; line-height: 1; }
.nav-item em { font-size: 11px; font-style: normal; }
.nav-item:hover, .nav-item.active { background: linear-gradient(145deg,rgba(216,168,44,.2),rgba(216,168,44,.05)); color: var(--gold-bright); }
.nav-item.active::before { content: ""; position: absolute; left: -10px; height: 31px; width: 3px; border-radius: 0 4px 4px 0; background: var(--gold); }
.badge { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); font-size: 10px; }
.pulse { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(219,93,75,.16); }

.game-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .25s ease, transform .25s ease; }
.view.active { opacity: 1; visibility: visible; transform: scale(1); }
.map-canvas { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action:none; background:#657632; }
.map-world { position:absolute; inset:-1px; z-index:0; overflow:visible; background:#8da629 url("./assets/steppe-map-targun-v1.png") center / cover no-repeat; transform-origin:50% 50%; will-change:transform; }
.map-world::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 48%,transparent 25%,rgba(5,15,10,.22) 100%); }
.map-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,19,14,.25),transparent 28%,rgba(6,16,13,.18)); }
.map-head { position: absolute; top: 22px; left: 24px; right: 24px; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; text-shadow: 0 2px 12px #000; }
.map-head h1, .city-head h1 { margin: 2px 0 0; font-family: Georgia, serif; font-size: clamp(25px,3vw,38px); }
.map-head small, .city-head small { color: #d7dfd9; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.coordinates { padding: 8px 11px; border-radius: 8px; background: rgba(7,16,15,.7); border: 1px solid rgba(255,255,255,.12); color: #d8dfda; font-size: 12px; }

.filter-bar { position: absolute; z-index: 8; top: 86px; left: 24px; display: flex; gap: 7px; max-width: calc(100% - 48px); overflow-x: auto; touch-action:pan-x; scrollbar-width: none; padding: 4px; background: rgba(7,16,15,.78); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.filter-bar::-webkit-scrollbar { display:none; }
.filter { flex: 0 0 auto; min-height: 40px; border: 0; border-radius: 11px; padding: 0 13px; background: transparent; color: #dce2de; cursor: pointer; font-size: 13px; font-weight: 750; }
.filter span { color: var(--muted); margin-left: 4px; }
.filter:hover, .filter.active { background: var(--gold); color: #171206; }
.filter.active span { color: #49350a; }
.mobile-goal-pill { display:none; }

.map-marker { --scale: 1; position: absolute; z-index: 3; left: var(--x); top: var(--y); transform: translate(-50%,-50%) scale(var(--scale)); display: grid; justify-items: center; border: 0; background: transparent; cursor: pointer; transition: opacity .2s ease, filter .2s ease, transform .2s ease; text-shadow: 0 2px 5px rgba(0,0,0,.9); }
.map-marker:hover, .map-marker:focus-visible { --scale: 1.08; z-index: 6; }
.map-marker.filtered-out { opacity: .15; filter: grayscale(1); pointer-events: none; }
.marker-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px 14px 10px 10px; border: 2px solid #dfc671; background: linear-gradient(145deg,#25352b,#101713); box-shadow: 0 7px 16px rgba(0,0,0,.36); font-size: 24px; }
.map-marker > strong { position: relative; z-index: 2; margin-top: 4px; padding: 3px 7px; border-radius: 5px; background: rgba(4,10,8,.82); font-size: 12px; white-space: nowrap; }
.map-marker > small { position: relative; z-index: 2; color: #d3ded7; font-size: 10px; background: rgba(4,10,8,.72); padding: 1px 5px 3px; border-radius: 0 0 4px 4px; white-space: nowrap; }
.mine .marker-icon { width: 39px; height: 39px; border-color: rgba(255,255,255,.55); background: rgba(15,32,27,.88); font-size: 20px; }
.mine > strong { font-size: 11px; }
.owned .marker-icon { border-color: var(--teal-soft); box-shadow: 0 0 0 5px rgba(18,184,166,.18),0 8px 20px rgba(0,0,0,.4); }
.enemy .marker-icon { border-color: #e26a5a; }
.ally .marker-icon { border-color: #66b8e3; }
.range { position: absolute; z-index: 0; width: 160px; height: 160px; top: -57px; left: 50%; transform: translateX(-50%); border: 2px solid rgba(18,184,166,.38); border-radius: 50%; background: rgba(18,184,166,.07); pointer-events:none; }
.map-marker.mine { z-index:5; }
.enemy .range { border-color: rgba(219,93,75,.35); background: rgba(219,93,75,.05); }
.ally .range { border-color: rgba(102,184,227,.35); background: rgba(102,184,227,.05); }

.zoom-control { position: absolute; z-index: 8; right: 18px; bottom: 20px; display: grid; gap: 4px; }
.zoom-control button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(7,16,15,.88); cursor: pointer; font-size: 23px; }
.selection-card { position: absolute; z-index: 10; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(440px,calc(100% - 130px)); padding: 17px; border: 1px solid rgba(243,198,81,.55); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.selection-card.enemy-selected { border-color: rgba(219,93,75,.75); }
.selection-close { position: absolute; right: 9px; top: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 21px; }
.selection-type { color: var(--gold-bright); font-size: 10px; letter-spacing: .12em; font-weight: 900; }
.selection-main { display: flex; align-items: center; gap: 12px; margin: 9px 0 14px; }
.selection-icon { display: grid; place-items: center; width: 46px; height: 46px; background: rgba(216,168,44,.12); border-radius: 12px; font-size: 24px; }
.selection-main strong { display:block; font-size: 17px; }
.selection-main small { display:block; color:var(--muted); margin-top:3px; font-size:12px; }
.selection-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.selection-actions button, .goal-card button, .alert-card button { min-height: 42px; border-radius: 10px; cursor: pointer; font-weight: 800; }
.secondary { border: 1px solid rgba(255,255,255,.15); background: #152421; }
.primary { border: 0; background: var(--gold); color: #181206; }

.intel-rail { z-index: 14; overflow-y: auto; padding: 16px; background: rgba(7,16,15,.97); border-left: 1px solid var(--line); }
.goal-card, .movement-card, .alert-card { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.goal-card { padding: 17px; border-color: rgba(216,168,44,.34); }
.goal-title { display: flex; align-items: center; gap: 10px; }
.goal-title > span { font-size: 27px; }
.goal-title small { display:block; color:var(--gold); font-size:10px; letter-spacing:.11em; font-weight:900; }
.goal-title strong { display:block; font-family:Georgia,serif; font-size:19px; margin-top:3px; }
.progress { height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.09); }
.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.goal-progress { margin: 15px 0 9px; }
.goal-card p { margin:0 0 13px; color:var(--muted); font-size:13px; }
.goal-card p strong { color:var(--text); }
.goal-card button { width:100%; border:1px solid var(--line); background:#162521; color:var(--gold-bright); }
.movement-card { margin-top: 12px; padding: 8px; }
.card-heading { display:flex; align-items:center; justify-content:space-between; padding:7px 8px 11px; color:var(--muted); font-size:12px; font-weight:800; }
.card-heading button { border:0; background:transparent; color:var(--gold); cursor:pointer; font-size:12px; }
.movement-card article { display:grid; grid-template-columns:35px 1fr auto; gap:9px; align-items:center; padding:12px 8px; border-top:1px solid rgba(255,255,255,.07); }
.movement-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:rgba(219,93,75,.14); color:#ef7b6d; font-weight:900; }
.movement-icon.returning { color:var(--teal-soft); background:rgba(18,184,166,.14); }
.movement-card strong, .movement-card small { display:block; }
.movement-card strong { font-size:13px; }
.movement-card small { color:var(--muted); margin-top:3px; font-size:11px; }
.movement-card time { font-variant-numeric:tabular-nums; color:var(--gold-bright); font-size:13px; font-weight:800; }
.alert-card { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; margin-top:12px; padding:13px; }
.alert-icon { color:var(--teal); font-size:22px; }
.alert-card small, .alert-card strong { display:block; }
.alert-card small { color:var(--teal-soft); font-size:9px; letter-spacing:.08em; }
.alert-card strong { margin-top:4px; font-size:12px; }
.alert-card button { min-height:34px; padding:0 10px; border:1px solid rgba(18,184,166,.3); background:rgba(18,184,166,.1); color:var(--teal-soft); font-size:11px; }

.city-view { overflow:auto; background:#263f2f; }
.city-backdrop { position:absolute; inset:0; background: linear-gradient(rgba(7,16,15,.2),rgba(7,16,15,.68)), url("./assets/steppe-map.png") center / cover; filter:saturate(.72) blur(2px); transform:scale(1.02); }
.city-head { position:relative; z-index:2; display:grid; grid-template-columns:120px 1fr 140px; align-items:center; gap:14px; padding:23px 28px 14px; }
.city-head > div { text-align:center; }
.back-button, .city-switch { min-height:42px; border:1px solid rgba(255,255,255,.15); border-radius:11px; background:rgba(7,16,15,.74); cursor:pointer; }
.city-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:13px; max-width:910px; margin:0 auto; padding:18px 24px 130px; }
.building { display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; min-height:138px; padding:18px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(10,22,19,.9); backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.building.featured { grid-column:1 / -1; min-height:150px; border-color:rgba(216,168,44,.45); }
.building-art { display:grid; place-items:center; width:62px; height:62px; border-radius:17px; background:linear-gradient(145deg,rgba(216,168,44,.2),rgba(18,184,166,.08)); font-size:31px; }
.building small { color:var(--gold); font-size:9px; letter-spacing:.11em; font-weight:900; }
.building h2 { margin:4px 0; font:700 18px Georgia,serif; }
.building p { margin:0; color:var(--muted); font-size:12px; }
.upgrade { min-width:92px; min-height:52px; border:1px solid var(--line); border-radius:12px; background:#182923; color:var(--gold-bright); cursor:pointer; font-weight:900; }
.upgrade span { display:block; color:var(--muted); margin-top:3px; font-size:10px; }
.upgrade.queued { color:#8fe2a7; border-color:rgba(126,216,161,.3); }
.queue-card { position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%); width:min(500px,calc(100% - 48px)); padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:var(--shadow); }
.queue-head,.queue-item { display:flex; justify-content:space-between; align-items:center; }
.queue-head { color:var(--muted); font-size:11px; }
.queue-head strong { color:var(--gold); }
.queue-item { margin:9px 0; font-size:13px; }
.queue-item strong { font-variant-numeric:tabular-nums; color:var(--gold-bright); }

.mobile-nav { display:none; }
.overlay { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,8,7,.74); backdrop-filter:blur(9px); }
.overlay[hidden] { display:none; }

.region-overlay { position:fixed; z-index:90; inset:0; overflow:auto; padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:radial-gradient(circle at 50% 30%,#352413cc,#080705 66%),linear-gradient(135deg,#16100a,#030303); color:#eadcbf; }
.region-overlay[hidden] { display:none; }
.region-screen { width:min(1500px,100%); min-height:calc(100dvh - 40px); margin:auto; display:flex; flex-direction:column; justify-content:center; }
.region-screen > header { text-align:center; margin:0 auto 22px; max-width:720px; }
.region-screen > header small { color:#ad9b7f; font-size:11px; font-weight:900; letter-spacing:.18em; }
.region-screen > header h2 { margin:7px 0 5px; color:#e2bc55; font:500 clamp(34px,4vw,58px) Georgia,serif; letter-spacing:.045em; text-transform:uppercase; }
.region-screen > header p { margin:0; color:#bdb09a; font-size:13px; line-height:1.5; }
.region-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,22px); }
.region-card { position:relative; min-width:0; display:grid; grid-template-rows:minmax(250px,47vh) auto auto auto; gap:0; overflow:hidden; padding:0 0 15px; border:1px solid #806426; border-radius:11px; background:#100c09; color:#e6d8bb; text-align:left; box-shadow:0 20px 45px #000a; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.region-card:hover { transform:translateY(-4px); border-color:#c89a32; }
.region-card.selected { transform:translateY(-5px); border-color:#ffe2a0; box-shadow:0 0 0 3px #d4a83a88,0 22px 50px #000d; }
.region-card.selected::after { content:'SEÇİLDİ'; position:absolute; top:12px; right:12px; padding:7px 10px; border:1px solid #ffe2a0; border-radius:5px; background:#15100ddd; color:#ffe7ac; font-size:9px; font-weight:900; letter-spacing:.12em; }
.region-art { display:block; width:100%; height:100%; min-height:0; background-position:center; background-size:cover; border-bottom:1px solid #665020; }
.region-card.northwest .region-art { background-image:linear-gradient(transparent 72%,#100c09),url('assets/regions/northwest.webp'); }
.region-card.northeast .region-art { background-image:linear-gradient(transparent 72%,#100c09),url('assets/regions/northeast.webp'); }
.region-card.southwest .region-art { background-image:linear-gradient(transparent 72%,#100c09),url('assets/regions/southwest.webp'); }
.region-card.southeast .region-art { background-image:linear-gradient(transparent 72%,#100c09),url('assets/regions/southeast.webp'); }
.region-card > strong { padding:12px 15px 4px; color:#f4dc9d; font:600 clamp(19px,1.6vw,27px) Georgia,serif; text-transform:uppercase; letter-spacing:.04em; }
.region-card > small { min-height:47px; padding:0 15px; color:#c2b59f; font-size:12px; line-height:1.45; }
.region-card > em { margin:7px 15px 0; color:#d7ad45; font-size:9px; font-style:normal; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.region-screen > footer { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.region-screen > footer span { color:#a99d89; font-size:11px; }
.region-screen > footer button { min-width:280px; min-height:48px; padding:0 24px; border:1px solid #d4a42d; border-radius:6px; background:linear-gradient(#c99731,#7a5418); color:#fff0c3; font-weight:900; letter-spacing:.03em; cursor:pointer; box-shadow:0 8px 25px #0008; }
.region-screen > footer button:disabled { opacity:.42; cursor:not-allowed; filter:saturate(.4); }
.dialog { width:min(620px,100%); max-height:calc(100dvh - 40px); overflow:auto; border:1px solid rgba(216,168,44,.45); border-radius:20px; background:var(--panel); box-shadow:0 30px 100px rgba(0,0,0,.55); }
.dialog header { display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line); }
.dialog header small { color:var(--gold); font-size:10px; letter-spacing:.11em; font-weight:900; }
.dialog h2 { margin:4px 0 0; font-family:Georgia,serif; font-size:23px; }
.dialog-close { width:39px; height:39px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:#1b2825; cursor:pointer; font-size:23px; }
.mission-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:14px 18px 8px; }
.mission-tabs button { min-height:42px; border:1px solid rgba(255,255,255,.11); border-radius:10px; background:#14231f; color:var(--muted); cursor:pointer; font-weight:800; }
.mission-tabs button.active { border-color:var(--gold); background:rgba(216,168,44,.16); color:var(--gold-bright); }
.origin-row { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:8px 18px 14px; color:var(--muted); font-size:13px; }
.origin-row select { min-height:44px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#15241f; padding:0 12px; color:var(--text); }
.unit-list { padding:0 18px; }
.unit { display:grid; grid-template-columns:42px 1fr auto; gap:11px; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.08); }
.unit-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); }
.unit strong,.unit small { display:block; }
.unit small { color:var(--muted); margin-top:3px; font-size:11px; }
.stepper { display:grid; grid-template-columns:38px 70px 38px; gap:3px; }
.stepper button,.stepper input { height:40px; border:1px solid rgba(255,255,255,.11); background:#15241f; text-align:center; }
.stepper button { cursor:pointer; font-size:18px; }
.stepper button:first-child { border-radius:9px 0 0 9px; }
.stepper button:last-child { border-radius:0 9px 9px 0; }
.stepper input { width:70px; color:var(--text); }
.order-summary { display:grid; grid-template-columns:repeat(3,1fr); margin:12px 18px; padding:13px; border-radius:13px; background:rgba(255,255,255,.045); }
.order-summary div { text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.order-summary div:last-child { border:0; }
.order-summary small,.order-summary strong { display:block; }
.order-summary small { color:var(--muted); font-size:9px; letter-spacing:.09em; }
.order-summary strong { margin-top:4px; font-size:14px; }
.send-order { width:calc(100% - 36px); min-height:54px; margin:0 18px 18px; border:0; border-radius:13px; background:linear-gradient(135deg,var(--gold-bright),#b77c14); color:#1a1305; cursor:pointer; font-weight:900; }
.info-dialog { width:min(520px,100%); }
.info-dialog.army-mode { width:min(680px,100%); }
#infoContent { padding:20px 22px 25px; color:#dce4df; line-height:1.55; }
#infoContent ul { padding-left:20px; color:var(--muted); }
#infoContent strong { color:var(--gold-bright); }
.army-panel { display:grid; grid-template-columns:190px 1fr; gap:16px; }
.army-unit-list { display:grid; align-content:start; gap:8px; }
.army-unit-choice { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; min-height:58px; padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#14231f; cursor:pointer; text-align:left; }
.army-unit-choice span { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.06); font-size:20px; }
.army-unit-choice strong,.army-unit-choice small { display:block; }
.army-unit-choice small { margin-top:2px; color:var(--muted); font-size:10px; }
.army-unit-choice.active { border-color:var(--gold); background:rgba(216,168,44,.12); }
.unit-detail-card { padding:17px; border:1px solid var(--line); border-radius:15px; background:rgba(5,13,11,.58); }
.unit-detail-head { display:flex; align-items:center; gap:13px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08); }
.unit-detail-icon { display:grid; place-items:center; width:56px; height:56px; border:1px solid rgba(216,168,44,.45); border-radius:14px; background:rgba(216,168,44,.12); font-size:30px; }
.unit-detail-head h3 { margin:0; font:700 21px Georgia,serif; color:var(--gold-bright); }
.unit-detail-head small { color:var(--muted); }
.unit-costs { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0; }
.unit-costs span { padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.06); color:#d9e1dc; font-size:11px; font-weight:800; }
.unit-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
.unit-stats div { display:flex; justify-content:space-between; gap:10px; padding:8px 9px; border-radius:8px; background:rgba(255,255,255,.04); font-size:12px; }
.unit-stats dt { color:var(--muted); }
.unit-stats dd { margin:0; font-weight:900; }
.unit-count { display:flex; justify-content:space-between; align-items:center; margin:13px 0; padding:11px; border-radius:10px; background:rgba(18,184,166,.08); color:var(--teal-soft); font-size:12px; }
.unit-count strong { font-size:18px; }
.unit-lock { width:100%; min-height:44px; border:1px solid rgba(219,93,75,.5); border-radius:10px; background:rgba(219,93,75,.1); color:#f18a7c; font-weight:800; }
.toast { position:fixed; z-index:80; right:22px; bottom:22px; transform:translateY(120px); opacity:0; display:flex; align-items:center; gap:12px; min-width:300px; padding:14px 17px; border:1px solid rgba(18,184,166,.4); border-radius:14px; background:#10251f; box-shadow:var(--shadow); transition:.25s ease; }
.toast.show { transform:translateY(0); opacity:1; }
.toast > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--teal); color:#06201b; font-weight:900; }
.toast strong,.toast small { display:block; }
.toast small { color:var(--muted); margin-top:3px; font-size:11px; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns:76px minmax(0,1fr) 280px; }
  .topbar { grid-template-columns:210px 1fr auto; }
  .resource { min-width:102px; padding-inline:9px; }
  .commander-copy { display:none; }
}

@media (max-width: 900px) {
  body { overflow:hidden; }
  .app-shell { grid-template:64px minmax(0,1fr) 74px / 1fr; }
  .topbar { grid-column:1; grid-template-columns:142px 1fr auto; }
  .brand { padding:0 11px; gap:7px; }
  .brand-mark { width:35px; height:35px; font-size:18px; }
  .brand strong { font-size:14px; }
  .brand small { display:none; }
  .resources { justify-content:flex-start; }
  .resource { min-width:86px; padding:8px 5px; grid-template-columns:23px auto; }
  .resource > span { font-size:17px; }
  .resource strong { font-size:12px; }
  .resource small { font-size:9px; }
  .hide-mobile { display:none; }
  .commander { padding:0 10px 0 5px; }
  .avatar { width:35px; height:35px; }
  .sidebar,.intel-rail { display:none; }
  .game-stage { grid-row:2; }
  .mobile-nav { grid-row:3; display:grid; grid-template-columns:repeat(6,1fr); z-index:25; background:rgba(7,16,15,.98); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
  .mobile-nav button { position:relative; border:0; background:transparent; color:var(--muted); display:grid; place-items:center; align-content:center; gap:3px; font-size:10px; cursor:pointer; }
  .mobile-nav span { font-size:21px; }
  .mobile-nav button.active { color:var(--gold-bright); }
  .mobile-nav .nav-center { width:62px; height:62px; justify-self:center; align-self:center; margin-top:-22px; border-radius:50%; color:#151006; background:linear-gradient(145deg,var(--gold-bright),#ae7413); border:5px solid var(--ink); box-shadow:0 -6px 20px rgba(0,0,0,.35); }
  .mobile-nav .nav-center span { font-size:23px; }
  .map-head { top:14px; left:15px; right:15px; }
  .map-head h1 { font-size:24px; }
  .coordinates { font-size:10px; padding:7px; }
  .filter-bar { top:68px; left:12px; max-width:calc(100% - 24px); }
  .filter { min-height:38px; padding:0 12px; }
  .mobile-goal-pill { position:absolute; z-index:8; top:118px; left:12px; display:grid; grid-template-columns:30px auto 34px; align-items:center; gap:8px; min-height:47px; padding:6px 8px; border:1px solid rgba(216,168,44,.45); border-radius:13px; background:rgba(7,16,15,.86); box-shadow:var(--shadow); backdrop-filter:blur(12px); cursor:pointer; text-align:left; }
  .mobile-goal-pill > span:first-child { font-size:20px; }
  .mobile-goal-pill strong,.mobile-goal-pill small { display:block; }
  .mobile-goal-pill strong { font-size:12px; }
  .mobile-goal-pill small { margin-top:2px; color:var(--muted); font-size:10px; }
  .mobile-goal-pill i { position:relative; width:31px; height:5px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
  .mobile-goal-pill i::after { content:""; position:absolute; inset:0 9.5% 0 0; border-radius:inherit; background:var(--gold-bright); }
  .selection-card { left:12px; right:12px; bottom:12px; transform:none; width:auto; padding:14px; }
  .selection-main { margin:8px 0 11px; }
  .selection-icon { width:40px; height:40px; }
  .zoom-control { display:none; }
  .map-marker .range { width:125px; height:125px; top:-39px; }
  .marker-icon { width:42px; height:42px; font-size:21px; }
  .mine .marker-icon { width:36px; height:36px; }
  .city-head { grid-template-columns:auto 1fr auto; padding:14px 12px 8px; }
  .city-head h1 { font-size:23px; }
  .back-button,.city-switch { min-height:38px; padding:0 9px; font-size:11px; }
  .city-grid { grid-template-columns:1fr; gap:9px; padding:10px 12px 115px; }
  .building,.building.featured { grid-column:auto; min-height:116px; padding:14px; grid-template-columns:50px 1fr auto; }
  .building-art { width:50px; height:50px; font-size:25px; }
  .building h2 { font-size:16px; }
  .upgrade { min-width:74px; min-height:48px; font-size:12px; }
  .queue-card { bottom:10px; width:calc(100% - 24px); }
  .overlay { padding:0; align-items:end; }
  .dialog { width:100%; max-height:92dvh; border-radius:22px 22px 0 0; border-bottom:0; }
  .dialog header { padding:17px 16px; }
  .mission-tabs { overflow:visible; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding-inline:14px; }
  .mission-tabs button { min-width:0; padding:0 5px; font-size:12px; }
  .origin-row,.unit-list { padding-left:14px; padding-right:14px; }
  .unit { grid-template-columns:38px 1fr auto; }
  .stepper { grid-template-columns:34px 54px 34px; }
  .stepper input { width:54px; }
  .order-summary { margin-inline:14px; }
  .send-order { width:calc(100% - 28px); margin-inline:14px; }
  .toast { left:12px; right:12px; bottom:86px; min-width:0; }
  .army-panel { grid-template-columns:1fr; }
  .army-unit-list { display:flex; overflow-x:auto; scrollbar-width:none; }
  .army-unit-list::-webkit-scrollbar { display:none; }
  .army-unit-choice { flex:0 0 150px; }
}

@media (max-width: 430px) {
  .topbar { grid-template-columns:130px 1fr 48px; }
  .resource:nth-child(2) { display:none; }
  .resource { min-width:82px; }
  .selection-actions { grid-template-columns:1fr 1.2fr; }
  .map-marker.mine.wood[data-title="Kara Orman"] { --x:81% !important; }
  .city-switch { width:72px; }
}

/* Quiet map pass: keep the world readable and reveal detail only on demand. */
.map-head,
.mobile-goal-pill,
.map-shade { display:none!important; }
.map-world::after { background:radial-gradient(circle at 50% 48%,transparent 52%,rgba(18,25,9,.12) 100%); }
.filter-toggle {
  position:absolute;
  z-index:9;
  top:14px;
  left:14px;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(70,55,27,.72);
  border-radius:5px;
  background:rgba(20,15,9,.78);
  color:#d7c7a5;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  cursor:pointer;
  font-size:11px;
  font-weight:750;
}
.filter-toggle span { color:#c49a34; font-size:14px; }
.filter-toggle[aria-expanded="true"] { border-color:#a77f25; background:rgba(31,22,11,.94); color:#f0d887; }
.filter-bar {
  top:54px;
  left:14px;
  max-width:calc(100% - 28px);
  gap:2px;
  padding:3px;
  border-color:rgba(104,80,31,.5);
  border-radius:5px;
  background:rgba(18,13,8,.94);
  box-shadow:0 5px 16px rgba(0,0,0,.28);
  backdrop-filter:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(-5px);
  transition:opacity .14s ease,transform .14s ease;
}
.filter-bar.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.filter { min-height:31px; padding:0 9px; border-radius:3px; color:#bdb29d; font-size:10px; }
.filter:hover,.filter.active { background:#80601d; color:#fff1bd; }
.filter.active span { color:#d8c48d; }
.mine > strong,
.mine > small,
.village > small { display:none; }
.map-marker.in-city-range .marker-icon::before { display:none; }
.map-marker.outside-city-range:not(.selected) { filter:none; opacity:.88; }
.village.owned .range {
  border-width:1px;
  border-color:rgba(70,203,130,.52);
  background:rgba(70,203,130,.025);
  box-shadow:none;
}
.starting-resource .marker-icon { filter:drop-shadow(0 4px 4px rgba(34,28,12,.34)); }
.zoom-control { gap:3px; opacity:.68; }
.zoom-control:hover { opacity:1; }
.zoom-control small { display:none; }
.zoom-control button { border-color:rgba(91,72,36,.55); box-shadow:none; }
.selection-card { box-shadow:0 8px 25px rgba(0,0,0,.32); backdrop-filter:none; }

@media (max-width:900px) {
  .filter-toggle { top:10px; left:10px; min-height:32px; padding-inline:10px; }
  .filter-bar { top:48px; left:10px; max-width:calc(100% - 20px); }
  .filter { min-height:32px; padding-inline:10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; }
}

/* City v2 — familiar isometric playfield, modern responsive shell */
.city-view-v2 { background:#82952d; }
.city-scene {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#8c9e31 url("./assets/city-steppe-sparse-v1.png") center / cover no-repeat;
}
.city-scene::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 90px rgba(25,23,5,.32);
}
.city-scene-top {
  position:absolute;
  z-index:8;
  top:12px;
  left:14px;
  right:14px;
  display:grid;
  grid-template-columns:minmax(220px,310px) minmax(170px,230px) auto;
  align-items:center;
  justify-content:end;
  gap:8px;
  min-height:54px;
  padding:5px;
  border:1px solid rgba(176,133,42,.58);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(35,27,17,.97),rgba(13,10,7,.96));
  box-shadow:0 8px 24px rgba(0,0,0,.48),inset 0 1px rgba(255,239,185,.09);
  pointer-events:none;
}
.city-scene-top::before {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(222,177,49,.12);
  border-radius:5px;
  pointer-events:none;
}
.scene-back,.scene-city-picker,.scene-queue { pointer-events:auto; }
.scene-back,.scene-city-picker {
  min-height:42px;
  border:1px solid rgba(222,177,49,.38);
  border-radius:5px;
  background:linear-gradient(#2b2114,#15100b);
  color:#f1dfab;
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.scene-back {
  justify-self:end;
  min-width:150px;
  padding:0 16px;
  border-color:#b68b2d;
  background:linear-gradient(180deg,#4a3518,#25170c);
  color:#f7dda0;
  cursor:pointer;
  font:800 12px/1 system-ui,sans-serif;
  letter-spacing:.045em;
  text-transform:uppercase;
  transition:filter .18s ease,border-color .18s ease,transform .18s ease;
}
.scene-back span { margin-right:5px; color:#f0bc39; font-size:18px; vertical-align:-1px; }
.scene-back:hover { border-color:#efc44b; filter:brightness(1.14); transform:translateY(-1px); }
.scene-city-picker { display:grid; grid-template-columns:1fr auto; padding:7px 11px; text-align:left; cursor:pointer; }
.scene-city-picker span,.scene-city-picker small { display:block; }
.scene-city-picker span { color:#f4c744; font:700 17px Georgia,serif; }
.scene-city-picker small { margin-top:2px; color:#b9ad91; font-size:11px; }
.scene-city-picker b { grid-row:1/3; grid-column:2; align-self:center; font-size:18px; }
.scene-queue {
  width:auto;
  min-width:170px;
  padding:7px 10px 8px;
  border:1px solid rgba(222,177,49,.27);
  border-radius:5px;
  background:#100c08;
  color:#cfc5ad;
  font-size:11px;
}
.scene-queue span { display:inline-block; max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene-queue strong { float:right; color:#f4c744; font-variant-numeric:tabular-nums; }
.scene-queue i { clear:both; display:block; height:3px; margin-top:6px; border-radius:4px; background:#ffffff20; overflow:hidden; }
.scene-queue em { display:block; width:62%; height:100%; background:#d7ad32; }
.queue-section { margin-top:16px; padding-top:14px; border-top:1px solid #8b672c55; }
.queue-section h4 { margin:0 0 9px; color:#d9af3d; font-size:11px; letter-spacing:.08em; }
.queue-empty { margin:0; padding:12px; border:1px dashed #8a724a66; border-radius:9px; color:#9f927d; background:#08070555; font-size:12px; line-height:1.45; }
.production-queue { display:grid; gap:7px; }
.production-queue article { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 10px; border:1px solid #8d6a2b66; border-radius:9px; background:linear-gradient(90deg,#211708cc,#120e08cc); }
.production-queue article > span { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:#efc84b; background:#aa741d22; }
.production-queue article div { min-width:0; }
.production-queue strong,.production-queue small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.production-queue strong { color:#eee5d2; font-size:12px; }
.production-queue small { margin-top:2px; color:#91846f; font-size:10px; }
.production-queue time { color:#f1c343; font:700 12px/1.2 ui-monospace,monospace; }
.market-panel > p { margin:10px 0 14px; color:#a99d88; font-size:12px; line-height:1.5; }
.market-balance { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid #b78a2b88; border-radius:11px; background:linear-gradient(135deg,#39270e,#171006); }
.market-balance .resource-mini { width:38px; height:38px; }
.market-balance div { min-width:0; flex:1; }
.market-balance small,.market-balance strong { display:block; }
.market-balance small { color:#aa956d; font-size:10px; letter-spacing:.08em; }
.market-balance strong { margin-top:3px; color:#f0c94d; font-size:18px; }
.market-balance em { color:#d7cab0; font-size:11px; font-style:normal; }
.market-table { display:grid; gap:7px; }
.market-row { display:grid; grid-template-columns:32px minmax(120px,1fr) 84px 74px 58px; align-items:center; gap:8px; padding:9px 10px; border:1px solid #6f5a3866; border-radius:9px; background:#0d0b08bb; }
.market-row div strong,.market-row div small { display:block; }
.market-row div strong { color:#e9dfcb; }
.market-row div small { margin-top:2px; color:#8e826f; font-size:10px; }
.market-row > b { color:#c8bda9; font-size:12px; text-align:right; }
.market-row button { min-height:32px; border:1px solid #9a7425; border-radius:7px; color:#f2ce61; background:#3b2b0d; font-weight:800; cursor:pointer; }
.market-row button:last-child { border-color:#46633e; color:#bcd5a5; background:#193014; }
.building-pin {
  --px:50%; --py:50%;
  position:absolute;
  z-index:5;
  left:var(--px);
  top:var(--py);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:68px;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 2px 4px #000);
}
.building-pin span,.building-pin b {
  display:block;
  padding:3px 7px;
  border:1px solid #9d7c23;
  border-radius:5px;
  background:#100d08e8;
  color:#f7edcf;
  line-height:1;
  white-space:nowrap;
}
.building-pin span { font-size:12px; font-weight:800; }
.building-pin b { color:#f2c337; font-size:10px; }
.building-pin:hover span,.building-pin:focus-visible span { background:#4a3510; border-color:#f0c33e; }
.pin-center { --px:50%; --py:45%; z-index:7; min-width:150px; }
.pin-center::before {
  content:"";
  display:block;
  width:clamp(112px,10vw,158px);
  aspect-ratio:1;
  margin-bottom:-22px;
  background-image:url("./assets/city-marker-atlas-v2.png");
  background-repeat:no-repeat;
  background-size:300% 100%;
  background-position:0 0;
  filter:drop-shadow(0 8px 8px #27300077);
  pointer-events:none;
}
.pin-center span,.pin-center b { position:relative; z-index:1; }
.pin-wall { --px:17%; --py:77%; z-index:7; }
.building-lot {
  --lot-x:50%; --lot-y:50%;
  position:absolute;
  z-index:4;
  left:var(--lot-x);
  top:var(--lot-y);
  width:clamp(92px,11vw,174px);
  height:clamp(62px,7.2vw,112px);
  padding:8px;
  transform:translate(-50%,-50%) rotate(-1deg);
  border:2px solid rgba(232,199,91,.62);
  border-radius:18px 12px 18px 13px;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(218,191,83,.34),transparent 62%),
    linear-gradient(145deg,rgba(160,143,50,.86),rgba(113,102,29,.9));
  box-shadow:0 8px 17px rgba(45,35,4,.42),inset 0 0 0 4px rgba(68,60,20,.18),inset 0 1px rgba(255,239,153,.38);
  backdrop-filter:blur(2px) saturate(.62);
  color:#efe1ad;
  cursor:pointer;
  isolation:isolate;
}
.building-lot::before {
  content:"";
  position:absolute;
  inset:-10px;
  z-index:-1;
  border-radius:45%;
  background:rgba(192,163,60,.13);
  filter:blur(5px);
}
.building-lot::after {
  content:"+";
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin:auto;
  border:1px solid rgba(255,222,99,.72);
  border-radius:50%;
  background:rgba(44,36,12,.66);
  color:#f4d354;
  font:700 23px/1 Georgia,serif;
  box-shadow:0 3px 9px #0007;
}
.building-lot .lot-building-art {
  position:absolute;
  z-index:1;
  left:50%;
  bottom:16px;
  width:clamp(112px,12.5vw,192px);
  aspect-ratio:1;
  transform:translateX(-50%);
  background-image:url('./assets/building-atlas-steppe-v1.png');
  background-repeat:no-repeat;
  background-size:400% 400%;
  background-position:var(--building-position,0% 0%);
  filter:drop-shadow(0 9px 8px rgba(35,25,4,.58)) drop-shadow(0 1px 1px rgba(255,221,111,.32));
  pointer-events:none;
  transition:transform .18s ease,filter .18s ease;
}
.building-lot .lot-copy { position:absolute; z-index:2; left:50%; bottom:-5px; display:block; min-width:78%; max-width:112%; padding:4px 8px; transform:translateX(-50%); border:1px solid #a37923; border-radius:6px; background:linear-gradient(#17110eea,#090705f2); box-shadow:0 3px 9px #000b,inset 0 1px #f6d67d22; }
.building-lot .lot-copy strong,.building-lot .lot-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.building-lot .lot-copy strong { color:#f4ead1; font-size:11px; }
.building-lot .lot-copy small { margin-top:2px; color:#e5bb42; font-size:9px; }
.building-lot .lot-build-timer { display:block; margin-top:3px; color:#fff0a7; font:800 12px/1.15 ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; letter-spacing:.02em; text-shadow:0 1px 4px #000; }
.building-lot .lot-build-progress { display:block; height:3px; margin-top:4px; overflow:hidden; border-radius:5px; background:#ffffff20; }
.building-lot .lot-build-progress em { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d69d21,#ffe16b); box-shadow:0 0 7px #f8c53d99; transition:width .25s linear; }
.building-lot.constructing { border-color:#f2c641; box-shadow:0 8px 17px rgba(45,35,4,.42),0 0 20px rgba(244,195,55,.24),inset 0 0 0 4px rgba(68,60,20,.18),inset 0 1px rgba(255,239,153,.38); }
.building-lot.constructing .lot-building-art { animation:lot-build-pulse 1.4s ease-in-out infinite; filter:saturate(.72) drop-shadow(0 9px 8px rgba(35,25,4,.58)); }
@keyframes lot-build-pulse { 0%,100% { transform:translateX(-50%) translateY(0); filter:brightness(1); } 50% { transform:translateX(-50%) translateY(-3px); filter:brightness(1.35); } }
.building-lot.occupied { overflow:visible; border-color:transparent; background:radial-gradient(ellipse at 50% 72%,rgba(246,210,91,.34),rgba(92,74,20,.12) 49%,transparent 72%); box-shadow:none; backdrop-filter:none; }
.building-lot.occupied::after { content:none; }
.building-lot.occupied::before { inset:40% -8% -12%; background:radial-gradient(ellipse,rgba(82,60,11,.38),transparent 70%); filter:blur(7px); }
.building-lot.occupied:hover .lot-building-art,.building-lot.occupied:focus-visible .lot-building-art { transform:translateX(-50%) translateY(-4px) scale(1.04); filter:drop-shadow(0 12px 9px rgba(28,18,2,.68)) brightness(1.08); }
.building-lot.empty:hover,.building-lot.empty:focus-visible { border-color:#ffe27b; background:linear-gradient(145deg,rgba(190,157,51,.64),rgba(119,100,24,.68)); transform:translate(-50%,-50%) rotate(-1deg) scale(1.035); }
.building-lot.empty:hover::after,.building-lot.empty:focus-visible::after { background:#6d5111; color:#fff1a8; }
.lot-0 { --lot-x:27%; --lot-y:20%; }
.lot-1 { --lot-x:43%; --lot-y:18%; }
.lot-2 { --lot-x:60%; --lot-y:18%; }
.lot-3 { --lot-x:77%; --lot-y:24%; }
.lot-4 { --lot-x:82%; --lot-y:42%; }
.lot-5 { --lot-x:80%; --lot-y:61%; }
.lot-6 { --lot-x:68%; --lot-y:72%; }
.lot-7 { --lot-x:52%; --lot-y:73%; }
.lot-8 { --lot-x:36%; --lot-y:72%; }
.lot-9 { --lot-x:21%; --lot-y:61%; }
.lot-10 { --lot-x:18%; --lot-y:43%; }
.lot-11 { --lot-x:26%; --lot-y:34%; }
.lot-12 { --lot-x:69%; --lot-y:40%; }
.city-tools {
  position:absolute;
  z-index:7;
  left:14px;
  top:82px;
  display:grid;
  width:184px;
  gap:0;
  padding:5px;
  border:1px solid rgba(184,140,41,.56);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(31,23,14,.97),rgba(12,9,6,.96));
  box-shadow:0 10px 28px rgba(0,0,0,.46),inset 0 1px rgba(255,243,195,.08);
}
.city-tools-title {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px 8px;
  border-bottom:1px solid rgba(176,133,42,.42);
}
.city-tools-title small { color:#8f7b59; font-size:9px; font-weight:900; letter-spacing:.16em; }
.city-tools-title strong { color:#e9c65c; font:700 13px/1 Georgia,serif; }
.city-tools button {
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 9px;
  min-height:53px;
  padding:7px 9px;
  border:0;
  border-bottom:1px solid rgba(117,88,32,.42);
  border-radius:0;
  background:transparent;
  color:#d9ccb0;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,padding-left .16s ease;
}
.city-tools button:last-child { border-bottom:0; }
.city-tools button::after { content:"›"; position:absolute; right:8px; color:#725c2c; font-size:17px; }
.city-tools button span { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; border:1px solid #6d5523; border-radius:5px; background:#241a0d; color:#efc13a; font-size:17px; }
.city-tools button b { padding-right:14px; color:#eee2c8; font-size:12px; line-height:1.15; }
.city-tools button small { color:#8e826d; font-size:9px; line-height:1.2; }
.city-tools button:hover { padding-left:12px; background:linear-gradient(90deg,rgba(166,111,24,.25),transparent); color:#fff1c8; }
.city-tools button:hover::after { color:#efc13a; }
.economy-building-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.economy-building-list article { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:14px; border:1px solid #49371d; border-radius:9px; background:#17110ce8; }
.economy-building-list article>span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #73571e; border-radius:50%; background:#241a0d; color:#e0b538; font-size:20px; }
.economy-building-list small { color:#9e8e70; font-size:9px; font-weight:800; letter-spacing:.08em; }
.economy-building-list h3,.economy-building-list p { margin:2px 0; }
.economy-building-list p { color:#bdb19c; font-size:11px; }
.economy-building-list b { color:#e9c052; white-space:nowrap; }
.economy-building-list button { grid-column:2/4; min-height:34px; border:1px solid #8a681e; border-radius:6px; background:#2b1c0c; color:#efd271; font-weight:800; cursor:pointer; }
.info-dialog.build-mode { width:min(960px,100%); max-height:min(760px,calc(100dvh - 28px)); }
.info-dialog.build-mode #infoContent { padding:0; overflow:hidden; }
.build-chooser { display:grid; grid-template-columns:minmax(270px,.9fr) minmax(330px,1.15fr); min-height:520px; background:#15110d; }
.build-choice-list { min-width:0; border-right:1px solid #5b4522; background:#1d1813; }
.build-choice-list > header { display:grid; gap:3px; padding:14px 16px; border-bottom:1px solid #4b3920; }
.build-choice-list > header strong { color:#efc84a; font:700 16px Georgia,serif; }
.build-choice-list > header small { color:#938673; font-size:10px; }
.build-choice-list > div { max-height:458px; padding:8px; overflow-y:auto; scrollbar-color:#ad8426 #17120d; }
.build-choice { width:100%; display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:66px; padding:8px 10px; border:1px solid transparent; border-bottom-color:#30271d; border-radius:7px; background:transparent; color:#ddd1bc; text-align:left; cursor:pointer; }
.build-choice:hover,.build-choice.active { border-color:#715820; background:#292118; }
.build-choice.ready.active { border-color:#3e7a42; background:#172519; box-shadow:inset 3px 0 #5ca75d; }
.build-choice.locked { opacity:.58; }
.build-choice > span { display:grid; place-items:center; width:50px; height:48px; border:1px solid #514125; border-radius:7px; background:#100d09; color:#e8bd3d; font-size:25px; }
.build-choice strong,.build-choice small { display:block; }
.build-choice small { margin-top:4px; color:#9b8f7c; font-size:10px; }
.build-choice > b { max-width:102px; color:#c5b9a3; font-size:9px; text-align:right; }
.build-choice.ready > b { padding:6px 8px; border:1px solid #397744; border-radius:5px; background:#1d4c27; color:#b9e2b9; }
.build-choice-detail { min-width:0; padding:18px 20px; overflow-y:auto; }
.build-choice-detail > header { display:grid; grid-template-columns:76px 1fr; align-items:center; gap:14px; }
.build-choice-detail > header > span { display:grid; place-items:center; width:76px; height:68px; border:1px solid #5d4925; border-radius:9px; background:radial-gradient(circle,#4a3715,#17110b); color:#f0c448; font-size:38px; }
.build-choice-detail h3 { margin:0; color:#efc84a; font:800 22px Georgia,serif; }
.build-choice-detail header small { display:block; margin-top:6px; color:#9ead89; }
.build-choice-detail > p { margin:16px 0; padding:13px; border-radius:7px; background:#100d0a; color:#bfb39f; font-size:12px; line-height:1.55; }
.build-choice-detail h4 { margin:14px 0 8px; color:#a99b83; font-size:10px; letter-spacing:.08em; }
.build-choice-costs { display:flex; flex-wrap:wrap; gap:6px; }
.build-choice-costs span { padding:7px 9px; border:1px solid #5e4920; border-radius:5px; background:#292013; color:#e7d9bc; font-size:10px; }
.build-choice-costs span.missing { border-color:#7b352f; color:#ef958a; }
.build-choice-requirements { display:grid; gap:5px; }
.build-choice-requirements p { display:flex; justify-content:space-between; gap:12px; margin:0; padding:8px 9px; border:1px solid #3b4f36; border-radius:5px; background:#111a10; color:#aec7a7; font-size:10px; }
.build-choice-requirements p.locked { border-color:#74312d; background:#281311; color:#e8958b; }
.build-choice-requirements b { color:inherit; }
.build-choice-blocker { margin:10px 0; padding:9px 10px; border:1px solid #7d352e; border-radius:5px; background:#311512; color:#ef988e; font-size:10px; font-weight:800; }
.build-choice-detail .unit-lock { margin-top:15px; }
.build-confirm { box-sizing:border-box; width:min(560px,100%); min-height:520px; margin:auto; padding:42px 34px 30px; display:grid; justify-items:center; align-content:center; text-align:center; }
.build-confirm-icon { display:grid; place-items:center; width:86px; height:86px; border:2px solid #9b7421; border-radius:50%; background:radial-gradient(circle,#4f3712,#17100a 72%); box-shadow:0 0 24px #b7812440,inset 0 0 18px #d8a63425; color:#f1c84d; font-size:40px; }
.build-confirm > small { margin-top:15px; color:#d4aa37; font-size:10px; font-weight:900; letter-spacing:.16em; }
.build-confirm h3 { margin:7px 0 5px; color:#f0d67c; font:800 24px Georgia,serif; }
.build-confirm > p { max-width:430px; margin:8px 0; color:#bcae98; font-size:12px; line-height:1.6; }
.build-confirm-summary { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 12px; }
.build-confirm-summary > span { padding:11px; border:1px solid #4f3b1d; border-radius:6px; background:#100d0a; }
.build-confirm-summary small,.build-confirm-summary strong { display:block; }
.build-confirm-summary small { color:#8f826f; font-size:9px; letter-spacing:.08em; }
.build-confirm-summary strong { margin-top:4px; color:#ead9b9; font-size:14px; }
.build-confirm .build-choice-costs { justify-content:center; }
.build-confirm .build-choice-blocker { width:100%; box-sizing:border-box; }
.build-confirm-actions { width:100%; display:grid; grid-template-columns:1fr 1.45fr; gap:8px; margin-top:18px; }
.build-confirm-actions button:first-child { min-height:42px; border:1px solid #6b5130; border-radius:5px; background:#241a10; color:#cbbb9f; font-weight:800; cursor:pointer; }
.build-confirm-actions .unit-lock { margin:0; }
.build-success .build-confirm-icon { border-color:#4f8b50; background:radial-gradient(circle,#24552b,#101c12 72%); box-shadow:0 0 25px #4d9b5b42,inset 0 0 18px #8ee59525; color:#a8e8a9; }
.build-success > .unit-lock { width:100%; margin-top:18px; }
.troop-dock {
  position:absolute;
  z-index:9;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  max-width:calc(100% - 26px);
  padding:7px;
  border:2px solid #9e7922;
  border-radius:8px;
  background:linear-gradient(#20170ded,#090705f2);
  box-shadow:0 8px 25px #0009,inset 0 1px #ffe7a11f;
  overflow-x:auto;
  scrollbar-width:none;
}
.troop-dock::-webkit-scrollbar { display:none; }
.troop-dock button {
  position:relative;
  flex:0 0 72px;
  display:grid;
  grid-template-rows:62px auto auto;
  justify-items:center;
  min-height:98px;
  padding:5px 4px;
  border:1px solid #46391f;
  border-radius:5px;
  background:linear-gradient(#332819,#17110b);
  color:#d7ccb8;
  cursor:pointer;
}
.troop-dock button:hover { border-color:#e6b92e; }
.troop-dock button .unit-portrait { width:39px; height:62px; }
.troop-dock button small { max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.troop-dock button b { margin-top:2px; color:#fff; font-size:11px; }
.troop-dock button.unit-locked { opacity:.38; filter:grayscale(.92) saturate(.35); cursor:not-allowed; }
.troop-dock button.unit-locked::after { content:'🔒'; position:absolute; margin-top:24px; padding:3px 5px; border-radius:50%; background:#100d09e8; font-size:10px; }
.troop-dock button.unit-ready { border-color:#d3a727; background:linear-gradient(#493714,#1c1308); box-shadow:inset 0 0 14px #c6951b28,0 0 9px #ddac2824; }
.troop-dock button.unit-ready:hover { border-color:#ffe070; transform:translateY(-2px); }

.unit-portrait {
  display:block;
  background-image:url('assets/unit-atlas-v1.png');
  background-repeat:no-repeat;
  background-size:500% 200%;
  filter:drop-shadow(0 3px 4px #000b);
}
.unit-karabudun { background-position:0 0; }
.unit-kemankes { background-position:25% 0; }
.unit-tapukci { background-position:50% 0; }
.unit-mavikurt { background-position:75% 0; }
.unit-muhafiz { background-position:100% 0; }
.unit-maviatli { background-position:0 100%; }
.unit-kursad { background-position:25% 100%; }
.unit-mancinik { background-position:50% 100%; }
.unit-topcu { background-position:75% 100%; }
.unit-casus { background-position:100% 100%; }

@media (max-width: 900px) {
  .city-scene { background-position:center; }
  .city-scene-top { top:8px; left:8px; right:8px; grid-template-columns:minmax(150px,1fr) 82px auto; min-height:50px; padding:4px; }
  .scene-back { width:auto; min-width:94px; min-height:40px; padding:0 10px; font-size:9px; }
  .scene-back span { margin-right:2px; font-size:15px; }
  .scene-city-picker { min-height:42px; padding:5px 8px; }
  .scene-city-picker span { font-size:14px; }
  .scene-city-picker small { font-size:9px; }
  .scene-queue { width:82px; padding:6px 7px; }
  .scene-queue span { display:none; }
  .scene-queue strong { float:none; display:block; text-align:center; font-size:12px; }
  .city-tools { top:68px; left:8px; width:58px; padding:4px; }
  .city-tools-title { display:none; }
  .city-tools button { display:grid; grid-template:28px auto / 1fr; justify-items:center; gap:3px; min-height:53px; padding:5px 2px; text-align:center; }
  .city-tools button::after,.city-tools button small { display:none; }
  .city-tools button span { grid-row:auto; width:28px; height:28px; font-size:14px; }
  .city-tools button b { padding:0; font-size:8px; line-height:1.05; }
  .city-tools button:hover { padding-left:2px; }
  .building-pin span { font-size:10px; }
  .building-pin b { font-size:9px; }
  .pin-center { --py:44%; }
  .pin-wall { display:none; }
  .building-lot { width:clamp(78px,15vw,122px); height:clamp(52px,9vw,80px); border-radius:12px; }
  .building-lot .lot-building-art { bottom:12px; width:clamp(92px,18vw,142px); }
  .building-lot .lot-copy strong { font-size:9px; }
  .building-lot .lot-copy small { font-size:8px; }
  .troop-dock { left:8px; right:8px; bottom:8px; transform:none; max-width:none; padding:5px; }
  .troop-dock button { flex-basis:64px; min-height:86px; grid-template-rows:50px auto auto; }
  .troop-dock button .unit-portrait { width:32px; height:50px; }
}

@media (max-width: 560px) {
  .auth-gate { place-items:start center; padding:12px; }
  .auth-card > header { grid-template-columns:52px 1fr; gap:12px; padding:19px 18px 17px; }
  .auth-tamga { width:50px; height:50px; font-size:26px; }
  .auth-card header h1 { font-size:25px; }
  .auth-card header p { font-size:11px; }
  .auth-tabs { margin:14px 14px 0; }
  #authForm { padding:16px 14px 18px; }
  .city-scene { background-size:auto 100%; }
  .building-pin span { padding:3px 5px; }
  .pin-wall { display:none; }
  .pin-center { --px:51%; --py:45%; }
  .building-lot { width:72px; height:50px; padding:4px; }
  .building-lot .lot-building-art { bottom:10px; width:96px; }
  .building-lot::after { width:24px; height:24px; font-size:18px; }
  .lot-0 { --lot-x:26%; --lot-y:20%; }.lot-1 { --lot-x:47%; --lot-y:18%; }.lot-2 { --lot-x:70%; --lot-y:21%; }
  .lot-3 { --lot-x:82%; --lot-y:33%; }.lot-4 { --lot-x:82%; --lot-y:49%; }.lot-5 { --lot-x:77%; --lot-y:64%; }
  .lot-6 { --lot-x:62%; --lot-y:71%; }.lot-7 { --lot-x:43%; --lot-y:72%; }.lot-8 { --lot-x:25%; --lot-y:66%; }
  .lot-9 { --lot-x:18%; --lot-y:52%; }.lot-10 { --lot-x:18%; --lot-y:37%; }.lot-11 { --lot-x:32%; --lot-y:31%; }.lot-12 { --lot-x:67%; --lot-y:38%; }
}

/* Map resource language v3 */
.mine .marker-icon {
  position:relative;
  width:78px;
  height:78px;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:url("./assets/resource-atlas-v3.png");
  background-repeat:no-repeat;
  background-size:300% 200%;
  box-shadow:none;
  filter:drop-shadow(0 5px 4px rgba(39,29,8,.46));
  font-size:0;
  overflow:visible;
}
.mine.grain .marker-icon { background-position:0 0; }
.mine.wood .marker-icon { background-position:50% 0; }
.mine.stone .marker-icon { background-position:100% 0; }
.mine.iron .marker-icon { background-position:0 100%; }
.mine.gold .marker-icon { background-position:50% 100%; }
.mine .marker-icon::after {
  content:attr(data-yield);
  position:absolute;
  top:4px;
  right:2px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:2px solid #d7b73d;
  border-radius:50%;
  background:#123316;
  color:#fff8d6;
  font:800 11px/1 system-ui,sans-serif;
  box-shadow:0 2px 5px #0008;
}
.mine > strong,.mine > small {
  padding:3px 7px;
  border:1px solid #896b20;
  border-radius:4px;
  background:#151006e8;
  color:#f5eacb;
  line-height:1;
  box-shadow:0 2px 5px #0007;
}
.mine > strong { margin-top:-7px; font-size:11px; }
.mine > small { margin-top:2px; color:#d6bd77; font-size:9px; }
.mine:hover .marker-icon,.mine:focus-visible .marker-icon { transform:translateY(-3px) scale(1.05); }
.map-marker.filtered-out { opacity:.12; filter:grayscale(.8); pointer-events:none; }
.map-shade { background:rgba(105,144,38,.2); mix-blend-mode:color; }
.village .marker-icon {
  width:86px;
  height:86px;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:url("./assets/city-marker-atlas-v2.png");
  background-repeat:no-repeat;
  background-size:300% 100%;
  box-shadow:none;
  filter:drop-shadow(0 6px 5px rgba(29,19,7,.55));
  font-size:0;
}
.village.owned .marker-icon { background-position:0 0; }
.village.ally .marker-icon { background-position:50% 0; }
.village.enemy .marker-icon { background-position:100% 0; }
.village > strong,.village > small {
  position:relative;
  z-index:2;
  padding:3px 7px;
  border:1px solid #8d6d20;
  border-radius:4px;
  background:#130e08ea;
  box-shadow:0 2px 5px #0008;
}
.village > strong { margin-top:-10px; color:#fff2cf; font-size:11px; }
.village > small { margin-top:2px; color:#d8bf7c; font-size:9px; }
.village.enemy > strong { border-color:#a53b32; }
.village.owned > strong { border-color:#2fcf8b; }
.village:hover .marker-icon,.village:focus-visible .marker-icon { transform:translateY(-3px) scale(1.05); }
.selection-icon {
  background-repeat:no-repeat!important;
  background-color:#1d160e!important;
  border-color:#8e6e25!important;
}
.selection-icon[class*="icon-village-"] { background-image:url("./assets/city-marker-atlas-v2.png")!important; background-size:300% 100%!important; }
.selection-icon.icon-village-owned { background-position:0 0!important; }
.selection-icon.icon-village-ally { background-position:50% 0!important; }
.selection-icon.icon-village-enemy { background-position:100% 0!important; }
.selection-icon[class*="icon-resource-"] { background-image:url("./assets/resource-atlas-v3.png")!important; background-size:300% 200%!important; }
.selection-icon.icon-resource-grain { background-position:0 0!important; }
.selection-icon.icon-resource-wood { background-position:50% 0!important; }
.selection-icon.icon-resource-stone { background-position:100% 0!important; }
.selection-icon.icon-resource-iron { background-position:0 100%!important; }
.selection-icon.icon-resource-gold { background-position:50% 100%!important; }

/* Brown-gold strategy shell */
:root {
  --ink:#100b07;
  --ink-2:#1a120b;
  --panel:rgba(18,12,8,.96);
  --panel-2:rgba(35,24,15,.96);
  --line:rgba(222,177,49,.3);
  --gold:#d8aa2f;
  --gold-bright:#f0c84e;
  --teal:#48cf8a;
  --teal-soft:#9be6bd;
  --muted:#b5aa94;
}
.app-shell { grid-template:56px minmax(0,1fr) / 72px minmax(0,1fr) 258px; }
.topbar { grid-template-columns:210px 1fr auto; background:#100b07f5; }
.brand { padding-inline:14px; }
.brand-mark { width:36px; height:36px; border-radius:4px; clip-path:none; background:linear-gradient(145deg,#f0c84e,#9b6a12); }
.resources .resource { min-width:104px; padding:7px 10px; }
.sidebar { padding:10px 5px; background:#100b07f2; }
.nav-item { width:61px; height:58px; border-radius:6px; }
.intel-rail { background:#100b07f0; border-left-color:var(--line); }
.map-head h1 { font-size:27px; }
.filter-bar { top:82px; gap:5px; padding:5px; border-radius:8px; background:#130e08e8; border-color:#8c6b1f; }
.filter { min-height:34px; border-radius:5px; font-size:11px; }

/* Attack planner v2 */
.attack-dialog-v2 {
  width:min(940px,calc(100vw - 30px));
  max-height:min(760px,calc(100dvh - 30px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:2px solid #a87d1c;
  border-radius:10px;
  background:linear-gradient(180deg,#21170e,#100c08 38%,#0c0907);
}
.attack-dialog-v2 > header { flex:0 0 auto; padding:12px 15px; background:#090705a8; }
.send-title { display:flex; align-items:center; gap:10px; }
.send-title > span { color:#efc444; font-size:24px; }
.send-title h2 { margin:0; color:#f1e4c7; font:800 21px/1.1 system-ui,sans-serif; }
.send-title small { display:block; margin-top:4px; color:#a99a7d!important; letter-spacing:0!important; }
.attack-dialog-v2 .dialog-close { width:37px; height:37px; border:2px solid #d3a72e; background:#641717; color:#fff; }
.send-layout { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:230px minmax(0,1fr); overflow:hidden; }
.send-options { min-height:0; overflow-y:auto; padding:13px; border-right:1px solid #6d541c; background:#0a0806a8; }
.send-options fieldset { margin:0 0 16px; padding:0; border:0; }
.send-options legend,.send-section-title strong { color:#e5c45e; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.source-cities { display:grid; gap:6px; }
.source-cities legend,.mission-field legend { margin-bottom:8px; }
.source-cities label {
  display:grid;
  grid-template-columns:18px 1fr auto;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:7px 8px;
  border:1px solid #342a1c;
  border-radius:6px;
  background:#17120d;
  cursor:pointer;
}
.source-cities label.selected { border-color:#b78a22; background:#4c381266; }
.source-cities label[hidden] { display:none!important; }
.source-cities input { accent-color:#d2a527; }
.source-cities b,.source-cities small { display:block; }
.source-cities b { font-size:13px; }
.source-cities small { margin-top:2px; color:#9f937d; font-size:10px; }
.source-cities em { color:#e5bd42; font-style:normal; }
.mission-field .mission-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:0; }
.mission-field .mission-tabs button { min-height:38px; border-radius:5px; background:#18120d; font-size:11px; }
.send-main { min-height:0; overflow-y:auto; padding:13px 15px 16px; }
.target-card {
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:11px;
  padding:10px;
  border:1px solid #57431c;
  border-left:3px solid #bc3636;
  border-radius:7px;
  background:#080604a8;
}
.target-emblem { display:grid; place-items:center; width:42px; height:42px; border-radius:6px; background:#501717; color:#f0c34a; font-size:25px; }
.target-card small,.target-card strong,.target-card div > span { display:block; }
.target-card small { color:#baaa8d; font-size:9px; }
.target-card strong { margin:2px 0; font-size:16px; }
.target-card div > span { color:#a99d88; font-size:11px; }
.target-card.target-missing { border-color:#7a3b31; background:#21110e; }
.target-card.target-missing .target-emblem { background:#4a1c18; color:#e58f7d; }
.target-card.target-missing strong { color:#efaa9c; }
.target-card button { min-height:35px; border:1px solid #69521d; border-radius:5px; background:#241a0e; color:#d8bc6e; font-size:10px; cursor:pointer; }
.send-section-title { display:flex; align-items:center; gap:9px; margin:15px 0 8px; }
.send-section-title > span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#9b741a; color:#120d05; font-weight:900; }
.send-section-title strong,.send-section-title small { display:block; }
.send-section-title small { margin-top:2px; color:#9d917d; font-size:10px; }
.attack-unit-list { padding:0; border:1px solid #3d301d; border-radius:7px; overflow:hidden; }
.attack-unit-list { max-height:360px; overflow-y:auto; scrollbar-color:#8e6a20 #17110c; }
.attack-unit { min-height:62px; padding:8px 10px; border-top-color:#382c1c; }
.attack-unit:first-child { border-top:0; }
.attack-unit .unit-symbol { display:grid; place-items:center; width:43px; height:68px; border:1px solid #6e5520; border-radius:5px; background-color:#120c08; font-size:24px; }
.unit-copy strong,.unit-copy small { display:block; }
.unit-copy strong { font-size:13px; }
.unit-copy small { margin-top:3px; color:#a69a86; font-size:10px; }
.quick-stepper { display:grid; grid-template-columns:38px 42px 64px 42px 38px; gap:3px; }
.quick-stepper button,.quick-stepper input { min-height:38px; border:1px solid #57451e; border-radius:5px; background:#21180e; color:#e8dcc1; font-size:10px; font-weight:800; text-align:center; }
.quick-stepper button { cursor:pointer; }
.quick-stepper button:hover { border-color:#d5aa32; }
.quick-stepper input { width:64px; color:#f5ca42; font-size:14px; }
.attack-unit.unavailable { opacity:.48; }
.empty-unit { color:#9c917d; font-weight:900; }
.trip-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-top:11px; border:1px solid #58451c; border-radius:7px; background:#080604c7; }
.trip-summary div { padding:10px 7px; text-align:center; border-right:1px solid #3d301b; }
.trip-summary div:last-child { border-right:0; }
.trip-summary small,.trip-summary strong { display:block; }
.trip-summary small { color:#9f927d; font-size:9px; letter-spacing:.08em; }
.trip-summary strong { margin-top:4px; color:#eed06c; font-size:13px; font-variant-numeric:tabular-nums; }
.speed-boost { display:flex; align-items:center; gap:9px; margin-top:9px; padding:9px 10px; border:1px solid #352a1b; border-radius:6px; background:#17110c; cursor:pointer; }
.speed-boost input { width:18px; height:18px; accent-color:#d4a62a; }
.speed-boost b,.speed-boost small { display:block; }
.speed-boost b { font-size:11px; }
.speed-boost small { margin-top:2px; color:#a19582; font-size:9px; }
.send-footer { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid #6a501b; background:#090604e8; }
.cancel-order { width:auto!important; height:43px!important; padding:0 16px; border-radius:6px!important; background:#20160e!important; color:#c9bda6!important; font-size:12px!important; }
.send-footer-copy { margin-left:auto; text-align:right; }
.send-footer-copy small,.send-footer-copy strong { display:block; }
.send-footer-copy small { color:#9d917e; font-size:9px; }
.send-footer-copy strong { color:#f0c947; font-size:16px; }
.attack-dialog-v2 .send-order { display:flex; align-items:center; justify-content:space-between; gap:16px; width:210px; min-height:44px; margin:0; padding:0 15px; border-radius:6px; }
.attack-dialog-v2 .send-order:disabled { opacity:.45; cursor:not-allowed; }
.confirm-strip { display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid #98452e; background:#43170feb; color:#f3c7ab; }
.confirm-strip[hidden] { display:none; }
.confirm-strip p { margin:0; font-size:11px; }
.confirm-strip strong { margin-right:5px; color:#ffcf62; }

@media (max-width: 900px) {
  .app-shell { grid-template:64px minmax(0,1fr) 74px / 1fr; }
  .topbar { grid-template-columns:142px 1fr auto; }
  .attack-dialog-v2 { width:100%; max-height:calc(100dvh - 8px); border-radius:10px 10px 0 0; }
  .send-layout { display:block; overflow-y:auto; }
  .send-options { overflow:visible; padding:12px 13px 0; border-right:0; }
  .source-cities { display:block; }
  .source-cities label { display:none; }
  .source-cities label.selected { display:grid; }
  .mission-field .mission-tabs { grid-template-columns:repeat(5,1fr); }
  .mission-field .mission-tabs button { min-height:42px; padding-inline:2px; }
  .send-main { overflow:visible; padding:10px 13px 96px; }
  .target-card { grid-template-columns:42px 1fr; }
  .target-card > button { display:none; }
  .attack-unit { grid-template-columns:42px 1fr; }
  .quick-stepper { grid-column:1/-1; grid-template-columns:42px 45px minmax(64px,1fr) 45px 42px; width:100%; }
  .quick-stepper input { width:100%; }
  .attack-unit.unavailable { display:none; }
  .trip-summary { grid-template-columns:1fr 1fr; }
  .trip-summary div:nth-child(2) { border-right:0; }
  .trip-summary div:nth-child(-n+2) { border-bottom:1px solid #3d301b; }
  .send-footer { position:absolute; z-index:5; left:0; right:0; bottom:0; }
  .send-footer-copy { display:none; }
  .attack-dialog-v2 .send-order { flex:1; width:auto; }
  .confirm-strip { position:absolute; z-index:6; left:0; right:0; bottom:64px; }
}

@media (max-width: 430px) {
  .mine .marker-icon { width:66px; height:66px; }
  .village .marker-icon { width:74px; height:74px; }
  .filter-bar { top:64px; left:12px; width:calc(100% - 24px); max-width:none; gap:1px; padding:4px; overflow:visible; }
  .filter { flex:1 1 0; min-width:0; min-height:36px; padding:0 2px; font-size:9px; white-space:nowrap; }
  .filter span { display:none; }
  .filter:last-child { font-size:8px; white-space:normal; line-height:1.05; }
  .mobile-goal-pill { top:108px; }
  .quick-stepper { grid-template-columns:38px 43px minmax(56px,1fr) 43px 38px; }
  .quick-stepper button { padding-inline:2px; }
}

/* Three-nation visual system */
body[data-nation="gok"] { --nation:#39b9c8; --nation-deep:#123f50; --nation-glow:#62e0e9; }
body[data-nation="hun"] { --nation:#bd3b32; --nation-deep:#501817; --nation-glow:#ef765f; }
body[data-nation="sel"] { --nation:#2d9a68; --nation-deep:#123e2d; --nation-glow:#69d09a; }
body[data-nation="hun"] .brand-mark { background:linear-gradient(145deg,#e15a45,#681b19); color:#fff2e3; }
body[data-nation="sel"] .brand-mark { background:linear-gradient(145deg,#e4c771,#29734f); color:#0d261a; }
body[data-nation="hun"] .pin-center::before { background-position:100% 0; }
body[data-nation="sel"] .pin-center::before { background-position:50% 0; filter:hue-rotate(285deg) saturate(.9) drop-shadow(0 8px 8px #27300077); }
body[data-nation="hun"] .unit-portrait { background-image:url('assets/unit-atlas-hun-v1.png'); }
body[data-nation="sel"] .unit-portrait { background-image:url('assets/unit-atlas-selcuk-v1.png'); }
body[data-nation="hun"] .village.owned .marker-icon,
body[data-nation="hun"] .selection-icon.icon-village-owned { filter:hue-rotate(145deg) saturate(1.35) drop-shadow(0 4px 5px #0008); }
body[data-nation="sel"] .village.owned .marker-icon,
body[data-nation="sel"] .selection-icon.icon-village-owned { filter:hue-rotate(285deg) saturate(.95) drop-shadow(0 4px 5px #0008); }
body[data-nation] .nav-item.active { border-color:var(--nation); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nation) 38%,transparent),0 0 18px color-mix(in srgb,var(--nation) 20%,transparent); }
body[data-nation] .mobile-nav .active { color:var(--nation-glow); }
body[data-nation] .scene-city-picker { border-color:color-mix(in srgb,var(--nation) 55%,#73551d); }

.unit-slot-0,.unit-karabudun { background-position:0 0; }
.unit-slot-1,.unit-kemankes { background-position:25% 0; }
.unit-slot-2,.unit-tapukci { background-position:50% 0; }
.unit-slot-3,.unit-mavikurt { background-position:75% 0; }
.unit-slot-4,.unit-muhafiz { background-position:100% 0; }
.unit-slot-5,.unit-maviatli { background-position:0 100%; }
.unit-slot-6,.unit-kursad { background-position:25% 100%; }
.unit-slot-7,.unit-mancinik { background-position:50% 100%; }
.unit-slot-8,.unit-topcu { background-position:75% 100%; }
.unit-slot-9,.unit-casus { background-position:100% 100%; }

.info-dialog.nation-mode { width:min(1060px,100%); max-height:min(800px,calc(100dvh - 28px)); }
.info-dialog.nation-mode #infoContent { padding:14px; overflow-y:auto; }
.nation-intro { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:12px; }
.nation-intro p { max-width:700px; margin:0; color:#c7baa2; line-height:1.5; font-size:13px; }
.nation-intro span { color:#e4bd4c; font-size:11px; font-weight:900; letter-spacing:.12em; }
.nation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.nation-card { position:relative; min-width:0; overflow:hidden; border:1px solid #604a25; border-radius:10px; background:#100b07; box-shadow:0 13px 28px #0007; }
.nation-card.active { border-color:var(--card-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--card-accent) 34%,transparent),0 18px 36px #0009; }
.nation-card[data-nation-choice="hun"] { --card-accent:#d34b3d; }
.nation-card[data-nation-choice="gok"] { --card-accent:#4bbdce; }
.nation-card[data-nation-choice="sel"] { --card-accent:#55b581; }
.nation-leader { position:relative; height:210px; background-image:url('assets/nation-leaders-v1.png'); background-repeat:no-repeat; background-size:300% 100%; }
.nation-card[data-nation-choice="hun"] .nation-leader { background-position:0 0; }
.nation-card[data-nation-choice="gok"] .nation-leader { background-position:50% 0; }
.nation-card[data-nation-choice="sel"] .nation-leader { background-position:100% 0; }
.nation-leader::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,#100b07); }
.nation-card-copy { position:relative; margin-top:-35px; padding:0 14px 14px; }
.nation-card-copy > small { color:var(--card-accent); font-size:10px; font-weight:900; letter-spacing:.11em; }
.nation-card-copy h3 { margin:4px 0 3px; color:#fff0c2; font:800 24px Georgia,serif; }
.nation-card-copy > p { min-height:34px; margin:0 0 10px; color:#b9ac96; font-size:11px; line-height:1.45; }
.nation-bonuses { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:12px; }
.nation-bonuses span { min-height:34px; display:flex; align-items:center; padding:6px 7px; border:1px solid #3b3022; border-radius:5px; background:#1a130d; color:#d8cab0; font-size:9px; line-height:1.25; }
.nation-card button { width:100%; min-height:40px; border:1px solid var(--card-accent); border-radius:6px; background:color-mix(in srgb,var(--card-accent) 21%,#130d08); color:#fff0d0; font-weight:900; cursor:pointer; }
.nation-card.active button { background:var(--card-accent); color:#0d0906; }
.nation-unit-strip { display:flex; gap:3px; margin-top:9px; overflow:hidden; }
.nation-unit-strip .unit-portrait { width:20px; height:32px; flex:0 0 20px; }
.nation-card[data-nation-choice="hun"] .unit-portrait { background-image:url('assets/unit-atlas-hun-v1.png'); }
.nation-card[data-nation-choice="gok"] .unit-portrait { background-image:url('assets/unit-atlas-v1.png'); }
.nation-card[data-nation-choice="sel"] .unit-portrait { background-image:url('assets/unit-atlas-selcuk-v1.png'); }

.info-dialog.army-mode { width:min(980px,100%); max-height:min(800px,calc(100dvh - 28px)); }
.info-dialog.army-mode #infoContent { overflow-y:auto; }

/* Village-right progression and guaranteed starting resources */
.village.owned .range {
  width:330px;
  height:330px;
  top:-142px;
  border-color:rgba(72,207,138,.72);
  background:radial-gradient(circle,rgba(72,207,138,.11),rgba(72,207,138,.025) 68%,transparent 69%);
  box-shadow:inset 0 0 32px rgba(72,207,138,.08),0 0 18px rgba(72,207,138,.1);
}
.starting-resource { z-index:4; }
.starting-resource .marker-icon { filter:drop-shadow(0 5px 5px rgba(39,29,8,.55)) drop-shadow(0 0 5px rgba(72,207,138,.24)); }
.starting-resource > small { border-color:rgba(72,207,138,.55); color:#bcefd0; }
.map-marker.novice-protected .range { border-color:#61dc85; background:rgba(72,207,114,.08); box-shadow:0 0 18px rgba(72,207,114,.22),inset 0 0 18px rgba(72,207,114,.12); }
.map-marker.shield-protected .range { border-color:#5daeff; background:rgba(55,145,255,.1); box-shadow:0 0 22px rgba(55,145,255,.3),inset 0 0 20px rgba(55,145,255,.14); }

.goal-origin { display:flex; align-items:center; gap:6px; margin-top:14px; padding:7px 9px; border:1px solid rgba(72,207,138,.22); border-radius:8px; background:rgba(72,207,138,.07); color:#bcefd0; font-size:10px; font-weight:750; }
.goal-origin span { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#27774c; color:#eafff2; }
.village-roadmap { position:relative; display:grid; grid-template-columns:repeat(9,1fr); gap:4px; margin:14px 0 10px; }
.village-roadmap::before { content:""; position:absolute; z-index:0; top:50%; left:10px; right:10px; height:2px; background:#4a3820; transform:translateY(-50%); }
.village-roadmap span { position:relative; z-index:1; display:grid; place-items:center; aspect-ratio:1; min-width:0; border:1px solid #54432b; border-radius:50%; background:#17110b; color:#756a59; font-size:10px; font-weight:850; }
.village-roadmap span.done { border-color:#3f9b68; background:#183b29; color:#bcefd0; }
.village-roadmap span.current { border:2px solid var(--gold-bright); background:linear-gradient(145deg,#6b4a0d,#2d1d07); color:#fff0b0; box-shadow:0 0 0 3px rgba(216,170,47,.13),0 0 13px rgba(240,200,78,.25); }
.goal-meter-copy { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.goal-meter-copy strong { color:var(--gold-bright); }
.goal-progress { margin:7px 0 9px; }

.info-dialog.goal-mode { width:min(720px,100%); max-height:min(820px,calc(100dvh - 28px)); }
.info-dialog.goal-mode #infoContent { overflow-y:auto; }
.goal-detail { display:grid; gap:14px; }
.goal-detail-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px; border:1px solid rgba(216,170,47,.36); border-radius:13px; background:radial-gradient(circle at 95% 0,rgba(216,170,47,.18),transparent 38%),#171009; }
.goal-detail-hero small { color:var(--gold); font-size:10px; letter-spacing:.13em; font-weight:900; }
.goal-detail-hero h3 { margin:4px 0 6px; color:#fff1c8; font:700 25px/1.05 Georgia,serif; }
.goal-detail-hero p { margin:0; color:var(--muted); font-size:12px; }
.goal-detail-hero p b { color:var(--gold-bright); }
.goal-detail-hero > span { display:grid; place-items:center; flex:0 0 66px; width:66px; height:66px; border:5px solid var(--gold); border-radius:50%; background:#201507; color:#ffe59a; font:800 17px/1 system-ui,sans-serif; box-shadow:0 0 20px rgba(216,170,47,.18); }
.starting-rule { display:grid; grid-template-columns:43px 1fr; gap:11px; padding:13px; border:1px solid rgba(72,207,138,.27); border-radius:11px; background:rgba(72,207,138,.07); }
.starting-rule > span { display:grid; place-items:center; width:43px; height:43px; border-radius:10px; background:#173426; font-size:22px; }
.starting-rule strong { color:#bcefd0; }
.starting-rule p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.starting-rule p b { color:#e2f8ea; }
.goal-milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0; padding:0; list-style:none; }
.goal-milestone { display:grid; grid-template-columns:31px 1fr; gap:8px; align-items:center; min-height:61px; padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#15100c; }
.goal-milestone > span { grid-row:1 / 3; display:grid; place-items:center; width:31px; height:31px; border:1px solid #54432b; border-radius:50%; color:#82745e; font-size:11px; font-weight:900; }
.goal-milestone strong,.goal-milestone small { display:block; }
.goal-milestone strong { color:#d8cfbf; font-size:11px; }
.goal-milestone small { margin-top:2px; color:#7f7567; font-size:9px; }
.goal-milestone b { grid-column:2; color:#857968; font-size:9px; }
.goal-milestone.done { border-color:rgba(72,207,138,.22); }
.goal-milestone.done > span { border-color:#3f9b68; background:#183b29; color:#bcefd0; }
.goal-milestone.done b { color:#75c797; }
.goal-milestone.current { border-color:var(--gold); background:linear-gradient(145deg,#251a0b,#16100a); box-shadow:0 0 16px rgba(216,170,47,.09); }
.goal-milestone.current > span { border:2px solid var(--gold-bright); background:#503609; color:#ffe59a; }
.goal-milestone.current strong,.goal-milestone.current b { color:var(--gold-bright); }
.goal-earning { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:6px; align-items:center; padding:10px; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); font-size:10px; }
.goal-earning strong { color:#efe2c4; }
.goal-earning span { padding:7px 8px; border-radius:7px; background:#21170e; text-align:center; }

@media (max-width:900px) {
  .village.owned .range { width:230px; height:230px; top:-92px; }
  .goal-milestones { grid-template-columns:repeat(2,1fr); }
  .goal-earning { grid-template-columns:1fr; }
  .goal-detail-hero { padding:14px; }
  .goal-detail-hero h3 { font-size:21px; }
}

@media (min-width:901px) and (max-height:780px) {
  .hud-profile { min-height:70px; padding:11px 10px 8px; grid-template-columns:46px 1fr; }
  .hud-seal { width:42px; height:42px; font-size:21px; }
  .hud-profile::before,.hud-profile::after { height:7px; }
  .hud-section h2,.hud-events h2 { height:24px; }
  .resource-stack button { height:29px; margin:1px 6px; }
  .resource-stack .resource-mini,.resource-stack .stock-symbol { width:23px; height:23px; }
  .city-stack button { height:27px; margin:1px 6px; }
  .compact-goal { min-height:48px; margin:3px 6px; padding-block:5px; }
  .hud-events { padding-bottom:3px; }
  .hud-events button { width:40px; height:40px; min-height:40px; margin-top:3px; }
  .hud-events button span { font-size:15px; }
}

@media (max-width:430px) {
  .goal-milestones { grid-template-columns:1fr; }
  .goal-detail-hero > span { flex-basis:56px; width:56px; height:56px; border-width:4px; font-size:15px; }
}

/* Targun-faithful game shell: map first, tools left, economy and cities right */
body { background:#141006; }
.app-shell { height:100dvh; min-height:0; overflow:hidden; grid-template:60px minmax(0,1fr) / 74px minmax(0,1fr) 258px; }
.topbar { grid-column:1 / -1; grid-row:1; grid-template-columns:188px 290px 1fr; height:60px; padding-right:258px; background:linear-gradient(180deg,#17110beF,#0e0a07f5); border-bottom:1px solid #8c6b1f; box-shadow:0 5px 18px #0009; }
.brand { padding:7px 12px; gap:9px; border-right:1px solid #5d481c; }
.brand-mark { width:38px; height:38px; border:1px solid #e0b940; background:radial-gradient(circle at 35% 30%,#f4d469,#a66d0c 70%); box-shadow:0 0 13px #d6a72c33; font:900 20px/1 Georgia,serif; }
.brand strong { color:#f4d66f; font:700 17px/1 Georgia,serif; letter-spacing:.09em; }
.brand small { margin-top:4px; color:#9e927c; font-size:11px; }
.tp-status { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; padding:6px 14px; border:0; border-right:1px solid #5d481c; background:#100b07; text-align:left; cursor:pointer; }
.tp-crest { display:grid; place-items:center; width:36px; height:36px; border:1px solid #8d6b20; border-radius:4px; background:#241809; color:#e5b83c; font-size:20px; }
.tp-status small,.tp-status strong { display:block; }
.tp-status small { color:#a89b84; font-size:9px; letter-spacing:.08em; }
.tp-status strong { margin-top:1px; color:#f6ebce; font-size:14px; }
.tp-status > span:nth-child(2) i { display:block; width:100%; height:3px; margin-top:4px; background:#382b16; }
.tp-status > span:nth-child(2) i em { display:block; width:90.5%; height:100%; background:linear-gradient(90deg,#bb861a,#efca4d); }
.tp-status > b { align-self:end; padding-bottom:6px; color:#766c5c; font-size:10px; }
.quest-strip { display:flex; align-items:stretch; justify-content:flex-start; overflow:hidden; }
.quest-strip button { min-width:90px; padding:5px 12px; border:0; border-right:1px solid #3f321c; background:transparent; color:#b6aa93; cursor:pointer; font-size:11px; font-weight:750; }
.quest-strip button span { display:block; margin-bottom:3px; color:#d9ad35; font-size:16px; }

.sidebar { grid-row:2; z-index:15; justify-content:flex-start; gap:8px; padding:8px 5px; background:linear-gradient(90deg,#110c08fa,#171008f0); border-right:1px solid #765b20; box-shadow:6px 0 16px #0006; }
.rail-label { display:block; padding:5px 0 3px; color:#8f7b56; text-align:center; font-size:9px; letter-spacing:.15em; }
.sidebar nav { gap:4px; }
.nav-item { width:63px; min-height:51px; border-radius:4px; border:1px solid transparent; }
.nav-item span { color:#d8aa2f; font-size:19px; }
.nav-item em { color:#b8ad99; font-size:10px; }
.nav-item:hover,.nav-item.active { border-color:#856820; background:linear-gradient(180deg,#3a2a11,#1d150c); }
.nav-item.settings { margin-top:auto; }

.game-stage { grid-column:2; grid-row:2; min-width:0; }
.intel-rail { grid-column:3; grid-row:1 / 3; z-index:24; display:flex; flex-direction:column; gap:0; min-height:0; padding:0; overflow-y:auto; overflow-x:hidden; background:#0e0a07f7; border-left:1px solid #82641f; box-shadow:-8px 0 22px #0008; }
.hud-profile { position:relative; display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; min-height:112px; padding:18px 12px 12px; overflow:hidden; border:0; border-bottom:2px solid #8f6b23; background:radial-gradient(circle at 50% 5%,#6c4b1d77,transparent 37%),linear-gradient(145deg,#1b140f,#090706 72%); text-align:left; cursor:pointer; }
.hud-profile::before,.hud-profile::after { content:""; position:absolute; left:8px; right:8px; height:12px; border-top:1px solid #9f7a2f; border-bottom:1px solid #3f2c12; background:repeating-linear-gradient(135deg,transparent 0 8px,#6b4c1d55 8px 10px); pointer-events:none; }
.hud-profile::before { top:5px; }.hud-profile::after { bottom:4px; transform:scaleY(-1); }
.hud-seal { position:relative; z-index:1; display:grid; place-items:center; width:58px; height:58px; border:2px solid #d0a52d; border-radius:50%; background:radial-gradient(circle,#254b5d,#101a21 68%); color:#91dbf0; font:700 29px/1 Georgia,serif; box-shadow:0 0 0 4px #0a0705,0 0 18px #d3a53544; }
.hud-identity { position:relative; z-index:1; }
.hud-profile small,.hud-profile strong,.hud-profile em { display:block; }
.hud-profile small { color:#d3a733; font-size:9px; letter-spacing:.12em; }
.hud-profile strong { margin-top:2px; color:#f2e6c8; font-size:13px; }
.hud-profile em { margin-top:2px; color:#75b9da; font-size:10px; font-style:normal; }
.hud-section { border-bottom:1px solid #4d3a18; }
.hud-section h2,.hud-events h2 { display:flex; justify-content:center; align-items:center; gap:8px; height:30px; margin:0; padding:0 10px; border-top:1px solid #936b25; border-bottom:1px solid #523b16; background:linear-gradient(180deg,#4b3516,#1f160c 55%,#120d08); color:#f0d17a; font:700 10px/1 Georgia,serif; letter-spacing:.12em; text-shadow:0 1px #000; }
.hud-section h2 span { color:#68c387; font-size:9px; }
.resource-stack button { display:grid; grid-template-columns:29px 1fr auto; grid-template-rows:1fr 1fr; align-items:center; width:calc(100% - 12px); height:36px; margin:3px 6px; padding:3px 9px; border:1px solid #2c6a37; border-radius:18px; background:linear-gradient(90deg,#162315,#0d110d 70%); box-shadow:inset 0 0 0 1px #0008; cursor:pointer; text-align:left; }
.resource-stack button:nth-of-type(n+6) { border-color:#514226; background:linear-gradient(90deg,#201b13,#0e0c09 70%); }
.resource-stack button:hover { background:#2a1d0d; }
.resource-stack .resource-mini,.resource-stack .stock-symbol { grid-row:1 / 3; width:26px; height:26px; }
.stock-symbol { display:grid; place-items:center; color:#c8a64a; font-size:19px; }
.stock-symbol.gem { color:#59badd; }
.resource-stack em { align-self:end; color:#bfb39c; font-size:10px; font-style:normal; }
.resource-stack strong { grid-column:3; grid-row:1 / 3; color:#f1e6cd; font-size:12px; font-variant-numeric:tabular-nums; }
.resource-stack small { align-self:start; justify-self:start; padding:0 4px; border-radius:7px; background:#165a2b; color:#8cffa7; font-size:8px; }
.city-stack { min-height:0; }
.city-stack button { display:grid; grid-template-columns:26px 1fr auto; align-items:center; width:calc(100% - 12px); height:34px; margin:3px 6px; padding:3px 9px; border:1px solid #725428; border-radius:3px; background:linear-gradient(#b68b52,#8c6030); cursor:pointer; text-align:left; }
.city-stack button[hidden] { display:none!important; }
.city-stack button:hover,.city-stack button.active { border-color:#66b142; background:linear-gradient(#337b2a,#1f571d); box-shadow:0 0 8px #68c25433; }
.city-stack button.supporting { border-color:#947136; background:linear-gradient(#b98d52,#986733); }
.city-stack button.under-attack { border-color:#aa4437; background:linear-gradient(#6f2823,#431713); }
.city-stack button span { font-size:15px; }
.city-stack button strong { overflow:hidden; color:#16100a; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.city-stack button small { color:#2f1d10; font-size:9px; }.city-stack button.active strong,.city-stack button.active small,.city-stack button.under-attack strong,.city-stack button.under-attack small { color:#f5ead7; }
.hud-events { margin-top:auto; }
.hud-events { display:grid; grid-template-columns:repeat(4,1fr); }
.hud-events h2 { grid-column:1 / -1; }
.hud-events { padding-bottom:7px; background:#0d0907; }
.hud-events button { position:relative; justify-self:center; width:48px; height:48px; margin-top:7px; padding:5px 2px; border:1px solid #625538; border-radius:50%; background:radial-gradient(circle at 35% 25%,#46504f,#171918 68%); box-shadow:inset 0 0 0 2px #090706,0 3px 7px #000a; cursor:pointer; }
.hud-events button span,.hud-events button em { display:block; }
.hud-events button span { color:#d9ae39; font-size:18px; }
.hud-events button em { display:none; }
.hud-events button b { position:absolute; top:4px; right:7px; display:grid; place-items:center; min-width:14px; height:14px; border-radius:8px; background:#8e201d; color:white; font-size:8px; }
.compact-goal { display:grid; grid-template-columns:30px 1fr 42px; align-items:center; gap:7px; width:calc(100% - 12px); min-height:56px; margin:auto 6px 6px; padding:7px 8px; border:1px solid #9a7624; border-radius:5px; background:linear-gradient(135deg,#2d200d,#17100a); text-align:left; cursor:pointer; }
.compact-goal > span { font-size:22px; }
.compact-goal small,.compact-goal strong,.compact-goal em { display:block; }
.compact-goal small { color:#bb9430; font-size:8px; letter-spacing:.08em; }
.compact-goal strong { color:#f2e4bd; font:700 13px/1.2 Georgia,serif; }
.compact-goal em { margin-top:2px; color:#aaa08e; font-size:9px; font-style:normal; }
.compact-goal > i { position:relative; width:38px; height:5px; overflow:hidden; background:#443319; }
.compact-goal > i b { display:block; width:90.5%; height:100%; background:#dfb43b; }

.map-head { top:13px; left:14px; display:flex; align-items:center; gap:12px; padding:7px 10px; border:1px solid #846720; border-radius:3px; background:#130e08df; }
.map-head small { color:#a99b83; font-size:9px; }
.map-head h1 { margin:1px 0 0; color:#e3bd4b; font-size:13px; font-family:inherit; letter-spacing:.05em; }
.coordinates { padding:5px 7px; border-left:1px solid #5e491c; border-radius:0; background:transparent; color:#b7ab94; font-size:10px; }
.filter-bar { top:64px; left:14px; max-width:calc(100% - 28px); border-radius:4px; background:#130e08e8; }
.filter { min-height:31px; padding:0 9px; border-radius:3px; font-size:10px; }
.village .marker-icon { width:64px; height:64px; }
.mine .marker-icon { width:52px; height:52px; }
.mine .marker-icon::after { top:0; right:-1px; width:18px; height:18px; font-size:9px; }
.village > strong { margin-top:-7px; font-size:10px; }
.mine > strong { margin-top:-6px; }
.map-marker { transform:translate(-50%,-50%) scale(var(--scale)); }
.village.owned .range { width:270px; height:270px; top:-116px; }
.selection-card { left:16px; bottom:16px; transform:none; width:min(390px,calc(100% - 32px)); padding:12px; border-radius:6px; background:#120d08f2; }
.selection-main { margin:7px 0 10px; }
.selection-actions button { min-height:36px; border-radius:4px; }
.zoom-control { right:14px; bottom:16px; }
.zoom-control button { width:34px; height:34px; border-radius:3px; background:#130e08ed; }
.zoom-control small { display:grid; place-items:center; min-width:34px; min-height:19px; padding:2px 4px; border:1px solid #5f491b; border-radius:3px; background:#130e08ed; color:#c9b98e; font-size:8px; font-weight:800; }
.map-canvas.middle-dragging { cursor:grabbing; }
.map-marker.outside-city-range:not(.selected) { filter:saturate(.8) brightness(.9); }
.map-marker.in-city-range .marker-icon::before { content:"✓"; position:absolute; left:-4px; bottom:1px; z-index:3; display:grid; place-items:center; width:17px; height:17px; border:1px solid #68e19a; border-radius:50%; background:#0c4929; color:#d9ffe8; font:900 9px/1 system-ui; box-shadow:0 2px 5px #000a; }
.selection-card.range-locked { border-color:#8b3f2f; }
.selection-card.range-locked .selection-type { color:#ff8c73; }
.selection-actions button:disabled { cursor:not-allowed; opacity:.48; filter:grayscale(.4); }
.selection-card.village-selected { width:min(290px,calc(100% - 32px)); }
.selection-card.village-selected .selection-actions { grid-template-columns:1fr; }
.selection-card.village-selected .selection-actions .secondary { border-color:#ae7e19; background:linear-gradient(#9c6415,#70410d); color:#fff1be; }
.selection-card.village-selected .selection-actions .support-action { border-color:#2b9d58; background:linear-gradient(#148347,#0b5631); color:#e6fff0; }

.resource-assignment { display:grid; gap:12px; }
.resource-titlebar { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:52px; padding:9px 12px; border:1px solid #4f3d22; border-radius:8px; background:linear-gradient(180deg,#24180f,#160f0b); }
.resource-titlebar .resource-mini { width:32px; height:32px; }
.resource-titlebar > strong { color:#eee7dc; font-size:17px; }
.resource-titlebar > b { color:#c6b998; font-size:10px; font-weight:700; }
.resource-titlebar > b em { margin-left:7px; color:#ffd61e; font:900 18px/1 system-ui; font-style:normal; }
.resource-city-row { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:7px; min-height:45px; padding:8px 12px; border:1px solid #43331f; border-radius:7px; background:#17100b; }
.resource-city-row > span { color:#68b4e8; font-size:18px; }
.resource-city-row small { color:#b9ae9c; }
.resource-city-row strong { color:#f0c65b; font-size:14px; }
.resource-head { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; padding:14px; border:1px solid #74591f; border-radius:8px; background:linear-gradient(135deg,#251a0c,#120d08); }
.resource-head .resource-mini { width:68px; height:68px; }
.resource-head small { color:#d2aa3c; font-size:10px; letter-spacing:.08em; }
.resource-head h3 { margin:4px 0; color:#f4e6c5; font:700 22px/1.1 Georgia,serif; }
.resource-head p { margin:0; color:#a99f8d; font-size:12px; }
.worker-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.worker-stats p { margin:0; padding:12px; border:1px solid #3f311b; border-radius:6px; background:#15100b; }
.worker-stats span,.worker-stats strong { display:block; }
.worker-stats span { color:#8f8575; font-size:10px; }
.worker-stats strong { margin-top:4px; color:#e7c45b; font-size:17px; }
.worker-stats p { text-align:center; }
.worker-stats strong { color:#f3ede2; font-size:19px; }
.range-rule { display:grid; grid-template-columns:32px 1fr; align-items:center; gap:9px; padding:10px 12px; border:1px solid #345d42; border-radius:7px; background:#102219; }
.range-rule > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#1d7443; color:white; font-weight:900; }
.range-rule strong,.range-rule small { display:block; }
.range-rule strong { color:#c8f1d7; font-size:11px; }.range-rule small { margin-top:2px; color:#88aa94; font-size:9px; }
.range-rule.locked { grid-template-columns:1fr; justify-items:center; min-height:112px; padding:18px; border-color:#962f22; background:#34110d; text-align:center; }.range-rule.locked > span { width:auto; height:auto; background:transparent; color:#ffc34d; font-size:28px; }.range-rule.locked strong { color:#ff8275; }.range-rule.locked small { color:#cfa49c; }
.resource-economy { display:flex; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid #3d301e; border-radius:6px; background:#15100b; color:#9d927f; font-size:10px; }
.resource-economy strong { margin-left:5px; color:#e9c44f; }
.economy-safety { margin:10px 0; padding:11px; border:1px solid #514226; border-radius:8px; background:#120f0b; }
.economy-safety h3 { margin:0 0 8px; color:#d7b85a; font:800 10px/1.2 Arial,sans-serif; letter-spacing:.08em; }
.economy-safety > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.economy-safety article { display:grid; gap:3px; min-width:0; padding:8px 9px; border:1px solid #39332a; border-radius:6px; background:#191713; }
.economy-safety article.active { border-color:#356144; background:#112219; }
.economy-safety article.danger { border-color:#873e31; background:#27130f; }
.economy-safety article span { overflow:hidden; color:#8f887c; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.economy-safety article strong { color:#b8b0a2; font-size:11px; }
.economy-safety article.active strong { color:#9ee0b3; }
.economy-safety article.danger strong { color:#ff9a83; }
.economy-safety p { margin:8px 0 0; color:#8f887c; font-size:9px; line-height:1.4; }
.worker-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:7px; border:1px solid #4c3a20; border-radius:7px; background:#110b08; }
.worker-tabs button { min-height:38px; border:1px solid #73521e; border-radius:5px; background:#2a180d; color:#e8c65b; cursor:pointer; font-weight:900; }
.worker-tabs button.active { border-color:#e4b23d; background:#c99a5f; color:#2c1b0d; box-shadow:inset 0 1px #fff4c666; }
.worker-tabs button:disabled { cursor:not-allowed; opacity:.4; }
.worker-label { color:#b6a98f; font-size:10px; font-weight:800; }
.worker-stepper { display:grid; grid-template-columns:58px 48px 1fr 48px 58px; gap:6px; }
.worker-stepper button,.worker-stepper input { min-height:40px; border:1px solid #665020; border-radius:5px; background:#17110b; color:#e9dcbd; text-align:center; font-weight:800; }
.worker-stepper button { cursor:pointer; }
.worker-limit { margin-top:-6px; color:#9d927f; font-size:10px; }.worker-limit strong { color:#e5d8bd; }
.worker-actions { grid-template-columns:1fr; }
.worker-actions button { min-height:44px; border-radius:7px; font-weight:900; }
.worker-actions .assign-worker { border-color:#9b751d; background:linear-gradient(#684019,#42230f); color:#e9b92e; }
.worker-actions .worker-release { border:1px solid #91642d; background:linear-gradient(#50341d,#2c1c12); color:#f0ce8f; }
.worker-actions button:disabled { cursor:not-allowed; opacity:.45; }
.info-dialog.resource-mode { width:min(610px,100%); }
.info-dialog.bonus-mode { width:min(900px,100%); max-height:min(820px,calc(100dvh - 28px)); }
.info-dialog.bonus-mode #infoContent { overflow-y:auto; }
.simple-ranking p { display:grid; grid-template-columns:36px 1fr auto; gap:10px; margin:0; padding:12px; border-bottom:1px solid #ffffff12; }
.simple-ranking b { color:#d9ac32; }.simple-ranking span { color:#a69b88; }
.ranking-panel { display:grid; gap:10px; }
.ranking-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.ranking-tabs button,.profile-back { min-height:36px; border:1px solid #55421f; border-radius:5px; background:#1b150e; color:#afa38e; font-weight:700; }
.ranking-tabs button.active { border-color:#c99a2a; background:#5b4111; color:#ffe092; }
.ranking-row { width:100%; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; margin:0; padding:11px 12px; border:0; border-bottom:1px solid #ffffff12; background:transparent; color:#d8cdb9; text-align:left; }
.ranking-row:hover { background:#ffffff08; }.ranking-row > b { color:#d9ac32; }.ranking-row strong,.ranking-row small { display:block; }.ranking-row small { margin-top:2px; color:#807768; font-size:9px; }.ranking-row em { color:#c3b79e; font-style:normal; font-weight:700; white-space:nowrap; }
.player-profile { display:grid; gap:14px; }.player-profile > header { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid #5b4720; border-radius:8px; background:linear-gradient(135deg,#20180e,#0d0b09); }.player-profile > header > span { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; color:#f2cb57; background:#35260e; font-size:30px; }.player-profile h3 { margin:3px 0; color:#f2dfb2; font:700 24px Georgia,serif; }.player-profile header small,.player-profile header p { margin:0; color:#9d927f; }
.player-profile > section { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.player-profile > section article { display:grid; gap:4px; padding:12px; border:1px solid #33291c; border-radius:7px; background:#15110d; }.player-profile > section article > span { font-size:20px; }.player-profile > section small { color:#8e8475; }.player-profile > section strong { color:#e3c765; font-size:17px; }
.profile-cities { display:grid; gap:6px; }.profile-cities h4 { margin:0 0 3px; color:#c39327; }.profile-cities button { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #3d3121; border-radius:5px; background:#17120d; color:#ddd0b8; }.profile-cities button span { color:#8d8374; }
.production-overview { display:grid; gap:12px; }.production-overview > header { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:13px; border:1px solid #59451f; border-radius:7px; background:#17120c; }.production-overview h3 { margin:2px 0 0; color:#e6bd4a; }.production-overview header small,.production-overview header p { margin:0; color:#958b7a; font-size:10px; }.production-table-scroll { overflow:auto; border:1px solid #342a1d; border-radius:7px; }.production-overview table { width:100%; min-width:760px; border-collapse:collapse; }.production-overview th,.production-overview td { padding:9px; border-bottom:1px solid #30271d; text-align:right; }.production-overview thead th { color:#a99d88; background:#100d09; font-size:10px; }.production-overview thead th:first-child,.production-overview tbody th,.production-overview tfoot th { text-align:left; }.production-overview thead .resource-mini { width:22px; height:22px; margin:0 auto 3px; }.production-overview tbody th button { border:0; background:transparent; color:#e3d4b7; font-weight:800; }.production-overview tbody th small { display:block; margin-top:3px; color:#7e7568; font-size:9px; }.production-overview tbody td .resource-mini { display:none; }.production-overview tbody td b,.production-overview tfoot b { color:#83c77b; }.production-overview td.danger-rate b { color:#ef766b; }.production-overview tfoot { color:#d5aa3c; background:#1a140b; }
.search-panel { display:grid; gap:10px; }.search-panel label { display:grid; gap:5px; color:#aaa08e; font-size:12px; }.search-panel input { min-height:39px; padding:0 11px; border:1px solid #5b4720; border-radius:4px; background:#16100b; color:#efe6d4; }.search-panel > div { display:grid; grid-template-columns:1fr 1fr 70px; gap:7px; }.search-panel > div button { border:0; border-radius:4px; background:#98721d; font-weight:800; }
.inventory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.inventory-grid button { min-height:88px; border:1px solid #5c4820; border-radius:7px; background:#17110b; font-size:30px; }.inventory-grid b,.inventory-grid small { display:block; margin-top:4px; color:#dfb43a; font-size:10px; }
.bonus-shop { display:grid; gap:16px; color:#d8cdb9; }
.bonus-shop > header { display:flex; align-items:center; gap:16px; padding:14px; border:1px solid #5f4820; border-radius:8px; background:linear-gradient(135deg,#1b140d,#0d0b09); }
.bonus-shop > header div { flex:0 0 150px; padding-right:14px; border-right:1px solid #49371e; }
.bonus-shop > header small,.bonus-shop h3 { color:#b88b2a; font-size:11px; letter-spacing:.08em; }
.bonus-shop > header strong { display:block; margin-top:3px; color:#f0c345; font:700 22px Georgia,serif; }
.bonus-shop > header p,.shield-shop > p { margin:0; color:#a99e8d; font-size:12px; line-height:1.55; }
.bonus-shop section > h3 { margin:0 0 8px; }
.bonus-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.bonus-card { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:82px; padding:10px; border:1px solid #30271d; border-radius:7px; background:#15110d; }
.bonus-card.active { border-color:#8e6922; box-shadow:inset 3px 0 #c99b2b; }
.bonus-card > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#241c12; font-size:22px; }
.bonus-card h4 { margin:0; color:#eee3ce; font-size:13px; }
.bonus-card p { margin:3px 0; color:#d1a83d; font-size:12px; }
.bonus-card small { color:#847b6e; font-size:10px; line-height:1.35; }
.bonus-card button,.shield-shop button { min-height:36px; padding:7px 10px; border:1px solid #8b6824; border-radius:5px; background:#5b4314; color:#f2d986; font-weight:700; font-size:11px; }
.bonus-card button:disabled,.shield-shop button:disabled { border-color:#39332c; background:#24211d; color:#716a60; }
.active-bonus-strip > div { display:flex; flex-wrap:wrap; gap:7px; }
.active-bonus-strip article { display:flex; align-items:center; gap:8px; min-width:180px; padding:8px 10px; border:1px solid #4b3b21; border-radius:6px; background:#18130d; }
.active-bonus-strip article > span { font-size:20px; }.active-bonus-strip b,.active-bonus-strip small { display:block; }.active-bonus-strip b { color:#e3d6bf; font-size:11px; }.active-bonus-strip small { margin-top:2px; color:#cfaa49; font-size:10px; }
.shield-shop { padding:12px; border:1px solid #373028; border-radius:7px; background:#11100e; }
.shield-shop > em { display:block; margin:8px 0; color:#e19472; font-size:11px; font-style:normal; }
.shield-shop > div { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:10px; }
.shield-shop button b,.shield-shop button span,.shield-shop button small { display:block; }.shield-shop button span { margin:4px 0; color:#f1c64c; }.shield-shop button small { color:#9c9283; font-size:9px; font-weight:400; }
.city-picker-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.city-picker-panel button { display:grid; grid-template-columns:36px 1fr auto; align-items:center; min-height:56px; padding:9px; border:1px solid #4f3d1c; border-radius:6px; background:#17110b; text-align:left; }.city-picker-panel strong { color:#e9ddc2; }.city-picker-panel small { color:#968b79; }
.city-rename { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; margin-top:10px; padding:11px; border:1px solid #4f3d1c; border-radius:7px; background:#15110c; }
.city-rename label { display:grid; gap:5px; }
.city-rename label span { color:#a99e8c; font-size:10px; }
.city-rename input { min-width:0; height:38px; padding:0 10px; border:1px solid #5b4b33; border-radius:5px; background:#0f0d0a; color:#f0e2c6; }
.city-rename button { height:38px; padding:0 13px; border:1px solid #a77819; border-radius:5px; background:#5a3f10; color:#ffe5a2; font-weight:800; }
.mobile-resource-list { display:grid; gap:7px; }.mobile-resource-list button { display:grid; grid-template-columns:34px 1fr auto; align-items:center; min-height:50px; padding:8px 12px; border:1px solid #4c3b1b; border-radius:5px; background:#17110b; text-align:left; }.mobile-resource-list span { color:#bcb19c; }.mobile-resource-list strong { color:#eed774; }
.movement-list,.report-list { display:grid; gap:7px; }
.movement-list article,.report-list article { display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; min-height:62px; padding:10px 12px; border:1px solid #45361c; border-radius:6px; background:#15100b; }
.movement-list article > span,.report-list article > span { display:grid; place-items:center; width:34px; height:34px; border-radius:4px; background:#2d200e; color:#e2b640; font-size:18px; }
.movement-list strong,.movement-list small,.report-list strong { display:block; }.movement-list strong,.report-list strong { color:#eadfc7; }.movement-list small,.report-list p { margin:3px 0 0; color:#9f9583; font-size:11px; }.movement-list time,.report-list time { color:#e3bd4b; font-size:11px; font-variant-numeric:tabular-nums; }
.movement-target { max-width:100%; padding:0; border:0; background:transparent; color:#eadfc7; text-align:left; font:inherit; font-weight:800; text-decoration:underline; text-decoration-color:#8d6b27; text-underline-offset:2px; cursor:pointer; }
.movement-target:hover,.movement-target:focus-visible { color:#ffd86a; text-decoration-color:#ffd86a; outline:0; }
.report-locations { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:7px; }
.report-locations .movement-target { color:#d4ac43; font-size:10px; }
.building-panel { display:grid; gap:15px; }.building-panel > section { display:grid; grid-template-columns:54px 1fr; gap:12px; align-items:center; padding:14px; border:1px solid #675020; border-radius:7px; background:#17110b; }.building-panel > section > span { display:grid; place-items:center; width:52px; height:52px; border-radius:6px; background:#31220e; color:#e4b941; font-size:26px; }.building-panel small { color:#c59d32; font-size:9px; letter-spacing:.1em; }.building-panel h3 { margin:3px 0; color:#f0e2c0; font:700 22px/1.1 Georgia,serif; }.building-panel p { margin:0; color:#a79d8b; font-size:12px; }.building-levels { display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; text-align:center; }.building-levels b { padding:14px; border:1px solid #5a461d; border-radius:6px; background:#120d08; color:#e8c55a; font-size:22px; }.building-levels i { color:#79663e; font-style:normal; }.building-cost { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.building-cost span { padding:10px; border:1px solid #44351c; border-radius:5px; background:#15100b; color:#d9ceb7; text-align:center; font-size:11px; }
.targun-level { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:10px; padding:10px 12px; border:1px solid #73591d; border-radius:6px; background:linear-gradient(90deg,#241807,#14100a); }
.targun-level span { color:#bd9140; font:800 10px/1 Arial,sans-serif; letter-spacing:.16em; }.targun-level strong { display:grid; place-items:center; width:34px; height:34px; border:1px solid #bc8c29; border-radius:50%; color:#ffe29a; font:700 20px/1 Georgia,serif; }.targun-level small { color:#8f8575; text-align:right; }
.umay-requirement { display:grid; gap:5px; padding:12px 14px; border:1px solid #7a5220; border-radius:7px; background:linear-gradient(135deg,#28170b,#17100b); }
.umay-requirement strong { color:#f0c756; font:700 14px Georgia,serif; }.umay-requirement span { color:#e7d6b2; font-size:11px; }.umay-requirement small { color:#9e8d74; line-height:1.45; letter-spacing:0; }
.map-marker.umay-city .marker-icon { box-shadow:0 0 0 4px #d6a62c55,0 9px 22px #0008; }
.umay-map-flag { position:absolute; z-index:5; top:-20px; left:50%; color:#ffd75c; font-size:23px; filter:drop-shadow(0 2px 2px #000); transform:translateX(11px) rotate(-8deg); }

@media (max-width:1100px) and (min-width:901px) {
  .app-shell { grid-template-columns:68px minmax(0,1fr) 230px; }
  .topbar { padding-right:230px; grid-template-columns:172px 260px 1fr; }
  .quest-strip button { min-width:75px; padding-inline:7px; }
  .intel-rail { grid-column:3; }
}

@media (max-width:900px) {
  .app-shell { grid-template:58px minmax(0,1fr) 64px / minmax(0,1fr); }
  .topbar { grid-column:1; grid-row:1; grid-template-columns:128px minmax(0,1fr); height:58px; padding-right:0; }
  .brand { padding:6px 8px; }.brand-mark { width:34px; height:34px; }.brand strong { font-size:13px; }.brand small { display:block; font-size:8px; }
  .tp-status { grid-template-columns:30px 1fr auto; gap:7px; padding:5px 9px; }.tp-crest { width:28px; height:28px; font-size:15px; }.tp-status strong { font-size:12px; }.tp-status > b { font-size:8px; }
  .quest-strip,.sidebar,.intel-rail { display:none; }
  .game-stage { grid-column:1; grid-row:2; }
  .mobile-nav { grid-row:3; }
  .map-head { top:10px; left:10px; }.filter-bar { top:54px; left:10px; width:calc(100% - 20px); }
  .mobile-goal-pill { top:99px; left:10px; border-radius:5px; background:#120d08eF; }
  .selection-card { left:10px; right:10px; bottom:10px; width:auto; }
  .village .marker-icon { width:56px; height:56px; }.mine .marker-icon { width:46px; height:46px; }
  .village.owned .range { width:220px; height:220px; top:-93px; }
  .city-tools { right:10px; bottom:92px; }
  .troop-dock { bottom:10px; }
}
.army-panel { grid-template-columns:330px 1fr; }
.army-unit-list { grid-template-columns:1fr 1fr; }
.army-unit-choice { grid-template-columns:34px 1fr; min-width:0; border-radius:7px; background:#17110c; }
.army-unit-choice .unit-portrait { width:25px; height:40px; border-radius:0; background-color:transparent; }
.unit-detail-icon.unit-portrait { width:45px; height:70px; border-radius:6px; background-color:#100b07; }
.unit-production { margin-top:12px; padding-top:12px; border-top:1px solid #392d1e; }
.unit-production label { display:block; margin-bottom:6px; color:#b9ad97; font-size:10px; font-weight:800; letter-spacing:.06em; }
.production-stepper { display:grid; grid-template-columns:42px minmax(70px,1fr) 42px; gap:5px; }
.production-stepper button,.production-stepper input { min-height:38px; border:1px solid #5e471d; border-radius:5px; background:#21170d; color:#f0d892; text-align:center; font-weight:900; }
.production-stepper-v2 { grid-template-columns:54px 42px minmax(70px,1fr) 42px 54px; }
.production-stepper-v2 button:first-child { border-color:#8b3d31; background:#4e1d17; color:#f1a792; }
.production-stepper-v2 button:last-child { border-color:#4c408f; background:#24205a; color:#c7c2ff; }
.production-limit { display:block; margin-top:6px; color:#9e927e; font-size:9px; }
.production-total { margin-top:10px; padding:10px; border:1px solid #4b391e; border-radius:7px; background:#130e0a; }
.production-total > b { display:block; margin-bottom:7px; color:#d9ad37; text-align:center; font:700 10px/1 Georgia,serif; }
.production-total > div { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.production-total span { padding:6px 8px; border:1px solid #59451f; border-radius:5px; color:#ebdfc8; font-size:10px; }
.production-total small { margin-left:2px; color:#9b907d; }
.research-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.research-card { padding:13px; border:1px solid #4d3b1e; border-radius:8px; background:#130e09; }
.research-card header { display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; }
.research-card header > span { display:grid; place-items:center; width:34px; height:34px; border-radius:6px; background:#2d200f; color:#efc24c; }
.research-card header strong,.research-card header small { display:block; }
.research-card header small { margin-top:3px; color:#9e927e; font-size:10px; }
.research-card header > b { color:#f0ca58; }
.research-next { display:flex; justify-content:space-between; margin:12px 0 8px; padding:9px; border:1px solid #342a1c; border-radius:5px; color:#b9ad96; font-size:11px; }
.research-next strong { color:#90cf78; }
.research-cost { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.research-cost span { padding:6px 8px; border:1px solid #49381c; border-radius:5px; color:#ded2ba; background:#0d0906; font-size:10px; }
.garrison-panel > p { margin:0 0 12px; padding:12px; border-left:3px solid #bd932f; background:#17120d; color:#b8ad98; }
.garrison-summary { display:flex; justify-content:space-between; padding:12px; border:1px solid #425c37; border-radius:7px; background:#11190f; color:#d8d0bd; }
.garrison-summary strong { color:#94d27f; }
.garrison-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; }
.garrison-list article { display:grid; grid-template-columns:32px 1fr auto; gap:9px; align-items:center; min-height:54px; padding:8px; border:1px solid #40331e; border-radius:6px; background:#15100b; }
.garrison-list .unit-portrait { width:28px; height:42px; }
.garrison-list strong,.garrison-list small { display:block; }
.garrison-list small { color:#928774; font-size:9px; }
.garrison-list b { color:#e5c45e; }

@media (max-width: 760px) {
  .nation-grid { grid-template-columns:1fr; }
  .nation-card { display:grid; grid-template-columns:120px 1fr; min-height:210px; }
  .nation-leader { height:100%; min-height:210px; background-size:auto 100%; }
  .nation-card[data-nation-choice="hun"] .nation-leader { background-position:0 0; }
  .nation-card[data-nation-choice="gok"] .nation-leader { background-position:50% 0; }
  .nation-card[data-nation-choice="sel"] .nation-leader { background-position:100% 0; }
  .nation-leader::after { inset:0; background:linear-gradient(90deg,transparent 55%,#100b07); }
  .nation-card-copy { margin:0; padding:12px 10px; }
  .nation-card-copy h3 { font-size:20px; }
  .nation-bonuses { grid-template-columns:1fr; }
  .nation-bonuses span:nth-child(n+4) { display:none; }
  .army-panel { grid-template-columns:1fr; }
  .army-unit-list { display:flex; }
  .army-unit-choice { flex-basis:145px; }
  .research-grid,.garrison-list { grid-template-columns:1fr; }
  .info-dialog.build-mode #infoContent { overflow-y:auto; }
  .build-chooser { grid-template-columns:1fr; min-height:0; }
  .build-choice-list { border-right:0; border-bottom:1px solid #5b4522; }
  .build-choice-list > div { display:flex; max-height:none; overflow-x:auto; }
  .build-choice { flex:0 0 210px; }
}

@media (max-width:560px) {
  .production-stepper-v2 { grid-template-columns:48px 38px minmax(54px,1fr) 38px 48px; }
  .production-stepper-v2 button,.production-stepper-v2 input { min-width:0; padding-inline:3px; font-size:10px; }
  .resource-titlebar { grid-template-columns:32px 1fr; }
  .resource-titlebar > b { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; }
  .worker-stats { gap:5px; }.worker-stats p { padding:9px 4px; }.worker-stats span { font-size:8px; }.worker-stats strong { font-size:16px; }
}

/* Final quiet-map overrides must follow the game-shell rules above. */
.map-marker.in-city-range .marker-icon::before { display:none!important; content:none!important; }
.zoom-control small { display:none!important; }
.mine > strong,.mine > small,.village > small { display:none!important; }
.alliance-member-list { margin:14px 0; border-top:1px solid #5c4524; padding-top:10px; }
.alliance-member-list h4 { margin:0 0 8px; color:#d8b548; font-size:12px; }
.alliance-member-list article { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; padding:8px; border-bottom:1px solid #33291d; }
.alliance-member-list article div { display:grid; gap:2px; }
.alliance-member-list article small { color:#9b9283; }
.alliance-member-list article span { color:#d8b548; font-weight:800; }
.alliance-member-list article.umay-complete { background:#241b0c; box-shadow:inset 3px 0 #d5a72c; }
.alliance-member-list .member-progress { display:grid; gap:2px; min-width:92px; text-align:right; }
.alliance-member-list .member-progress em { color:#e8bf45; font-size:11px; font-style:normal; }.alliance-member-list .member-progress strong { color:#9c917e; font-size:9px; }
.alliance-season { display:grid; gap:10px; margin:14px 0; padding:13px; border:1px solid #5f4821; border-radius:8px; background:linear-gradient(145deg,#20160c,#100d09); }
.alliance-season.winner { border-color:#d0a22b; box-shadow:inset 0 0 28px #9c6f1a24; }
.alliance-season > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.alliance-season header small { color:#9c7b35; font-size:9px; letter-spacing:.12em; }.alliance-season header h4 { margin:3px 0 0; color:#f0d27a; font:700 18px Georgia,serif; }.alliance-season header > b { padding:6px 9px; border:1px solid #816323; border-radius:4px; color:#e4bb46; font-size:10px; }
.alliance-season > p { margin:0; color:#a99c88; font-size:11px; line-height:1.45; }.alliance-season > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.alliance-season article { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:7px; min-width:0; padding:9px; border:1px solid #3d3222; border-radius:6px; background:#15110c; }.alliance-season article.complete { border-color:#7c6426; background:#211a0d; }.alliance-season article > span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#2a2114; color:#e8bc41; }.alliance-season article strong,.alliance-season article small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.alliance-season article strong { color:#e5d9c2; font-size:11px; }.alliance-season article small { margin-top:2px; color:#81796d; font-size:9px; }.alliance-season article > b { color:#c89e36; font-size:10px; white-space:nowrap; }
.online-alliance-forms { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.online-alliance-forms > section,.alliance-applications { display:grid; gap:8px; padding:13px; border:1px solid #4f4028; border-radius:7px; background:#17130e; }
.online-alliance-forms h3,.alliance-applications h4,.alliance-outgoing h4 { margin:0 0 3px; color:#e2bd4d; font:800 13px/1.2 Georgia,serif; }
.online-alliance-forms input,.online-alliance-forms textarea { width:100%; min-height:40px; padding:9px 10px; border:1px solid #574421; border-radius:5px; background:#100c08; color:#eee4ce; resize:vertical; }
.online-alliance-forms textarea { min-height:72px; }
.online-alliance-forms .unit-lock { min-height:42px; }
.alliance-applications { margin-top:14px; }
.alliance-application { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid #3d321f; border-radius:6px; background:#110e0a; }
.alliance-application strong,.alliance-application small { display:block; }
.alliance-application small { margin-top:2px; color:#9d927f; font-size:10px; }
.alliance-application p { margin:6px 0 0; color:#b8ad98; font-size:11px; }
.alliance-application > span { display:flex; gap:6px; }
.alliance-application button { min-height:34px; padding:6px 9px; border:1px solid #7d621d; border-radius:5px; background:#493713; color:#f0d574; font-weight:800; }
.alliance-application button[data-reject-alliance] { border-color:#7b3028; background:#3b1713; color:#ee9e95; }
.alliance-outgoing { display:grid; gap:6px; margin-top:8px; padding-top:10px; border-top:1px solid #3f321e; }
.alliance-application-state { display:flex; justify-content:space-between; gap:8px; margin:0; padding:8px; border-radius:5px; background:#110e0a; }
.alliance-application-state span { color:#e0bc4e; font-size:11px; font-weight:800; }
.alliance-application-state span.approved { color:#6fd08b; }.alliance-application-state span.rejected { color:#de7970; }
@media (max-width:640px) {
  .online-alliance-forms { grid-template-columns:1fr; }
  .alliance-application { grid-template-columns:1fr; }
  .alliance-application > span { width:100%; }
  .alliance-application button { flex:1; min-height:42px; }
}
body[data-colony-placement="true"] .map-canvas { cursor:crosshair; }
.quest-list { display:grid; gap:8px; }
.quest-list article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #4f4028; border-radius:8px; background:#17130e; }
.quest-list article div { display:grid; gap:4px; }
.quest-list article small { color:#a9a092; }
.quest-list button { min-width:94px; padding:8px 10px; border:1px solid #b8861c; border-radius:6px; background:#765012; color:#fff0bd; font-weight:800; }
.quest-list button:disabled { opacity:.45; }
.report-tabs { display:flex; gap:6px; margin-bottom:10px; overflow:auto; }
.report-tabs button { padding:8px 12px; border:1px solid #4e4028; border-radius:6px; background:#1b1711; color:#b8ad99; font-weight:800; white-space:nowrap; }
.report-tabs button.active { border-color:#d4aa35; color:#ffe79a; background:#4d3810; }
.report-list article > button { align-self:center; padding:6px 9px; border:1px solid #9b741f; border-radius:5px; background:#251b0c; color:#e8ca72; }
.village.owned .range {
  width:var(--city-range-size,270px)!important;
  height:var(--city-range-size,270px)!important;
  top:calc(18px - var(--city-range-size,270px) / 2)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  border-width:1px;
  border-color:rgba(70,203,130,.66);
  background:rgba(70,203,130,.025);
  box-shadow:none;
  transition:width .45s ease,height .45s ease,top .45s ease;
}

.city-area-progress { display:grid; grid-template-columns:1fr 28px 1fr; gap:8px; align-items:center; padding:12px; border:1px solid #42633d; border-radius:7px; background:#101811; }
.city-area-progress > div { display:grid; gap:4px; text-align:center; }
.city-area-progress span { color:#91a38f; font-size:9px; font-weight:800; letter-spacing:.07em; }
.city-area-progress strong { color:#9fdb8b; font:800 23px/1 Georgia,serif; }
.city-area-progress > i { color:#6e8d69; font-style:normal; text-align:center; }
.city-area-progress > small { grid-column:1 / -1; padding-top:8px; border-top:1px solid #ffffff0d; color:#b8c8b5; font-size:10px; line-height:1.4; text-align:center; }

/* Beta mechanics: economy, prerequisites and local-save controls */
.rail-bottom { margin-top:auto; display:grid; gap:4px; }
.toast { pointer-events:none; }
.rail-bottom .nav-item.settings { margin-top:0; }
.danger-rate { color:#ff7a68 !important; }
.resource-mini-horse { display:grid; place-items:center; background:linear-gradient(145deg,#75491f,#2a170b); border-color:#b98238; }
.resource-mini-horse::after { content:'♞'; color:#f1c571; font-size:14px; }
.resource-assignment > *,.resource-head > *,.worker-stats > * { min-width:0; }
.worker-stepper { grid-template-columns:52px 44px minmax(0,1fr) 44px 54px; }
.worker-stepper input { width:100%; min-width:0; }
.economy-summary { display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px; padding:12px; border:1px solid #4f7b48; border-radius:8px; background:#112018; }
.economy-summary strong { width:100%; color:#9fdb8b; }
.economy-summary span { color:#c9c0ad; font-size:12px; }
.economy-summary.danger { border-color:#9d3d35; background:#281211; }
.economy-summary.danger strong { color:#ff7a68; }
.mobile-resource-list button { grid-template-columns:26px minmax(70px,1fr) auto auto; }
.mobile-resource-list button small { color:#80c983; font-size:10px; }
.mobile-bonus-link { width:100%; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; margin:0 0 12px; padding:11px 12px; border:1px solid #806022; border-radius:8px; background:linear-gradient(120deg,#281d0c,#17120d); color:#e5d7bc; text-align:left; }
.mobile-bonus-link > span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#ffd457; background:#3a2a0e; font-size:18px; }
.mobile-bonus-link strong,.mobile-bonus-link small { display:block; }.mobile-bonus-link strong { color:#f0c956; font-size:13px; }.mobile-bonus-link small { margin-top:3px; color:#9e9381; font-size:10px; }.mobile-bonus-link > b { color:#e1c46c; font-size:11px; }
.upkeep-note { display:flex; justify-content:space-between; gap:10px; margin:-2px 0 13px; padding:9px 11px; border:1px solid #4d3a22; border-radius:7px; color:#cabfa9; background:#17110c; font-size:11px; }
.worker-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.worker-actions .unit-lock { margin-top:0; }
.worker-release { min-height:42px; border:1px solid #65583d; border-radius:7px; color:#d9cfbd; background:#211b14; font-weight:700; cursor:pointer; }
.worker-release:disabled { opacity:.35; cursor:not-allowed; }
.mechanic-note { margin:12px 0 0; padding:11px; border-left:3px solid #b88b25; color:#c9bea9; background:#19140d; }
.requirement-line { display:flex; justify-content:space-between; align-items:center; margin:10px 0 4px; padding:8px 10px; border:1px solid #42633d; border-radius:6px; color:#d9d1bf; background:#101811; font-size:11px; }
.requirement-line b { color:#87cf79; }
.requirement-line.locked { border-color:#7d302d; background:#21100f; }
.requirement-line.locked b { color:#ff7a68; }
.build-speed-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.build-speed-options button { min-height:38px; padding:8px; border:1px solid #67511f; border-radius:6px; color:#e7c968; background:#241a0c; font-size:11px; font-weight:800; cursor:pointer; }
.build-speed-options button:disabled { opacity:.38; cursor:not-allowed; }
.settings-panel { display:grid; gap:12px; }
.settings-panel section { padding:14px; border:1px solid #4a4132; border-radius:9px; background:#17130f; }
.settings-panel section > strong { display:block; margin-bottom:10px; color:#e6bd4a; }
.settings-panel label { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid #342d23; }
.settings-panel label:first-of-type { border-top:0; }
.settings-panel label span { color:#e5ddcb; font-weight:700; }
.settings-panel label small { display:block; margin-top:3px; color:#928774; font-weight:400; }
.settings-panel p { color:#b7ac99; line-height:1.5; }
.reset-beta { width:100%; min-height:42px; margin-top:10px; border:1px solid #9f3d35; border-radius:7px; color:#ffd1cc; background:#4e1714; font-weight:800; cursor:pointer; }

@media (max-width: 900px) {
  .pin-workshop { display:none; }
  .worker-actions { grid-template-columns:1fr; }
  .mobile-resource-list button { grid-template-columns:26px minmax(62px,1fr) auto; }
  .mobile-resource-list button small { grid-column:2 / 4; text-align:right; }
  .resource-head { grid-template-columns:52px minmax(0,1fr); gap:10px; padding:11px; }
  .resource-head .resource-mini { width:50px; height:50px; }
  .resource-head h3 { font-size:18px; }
  .worker-stats { grid-template-columns:1fr; }
  .worker-stepper { grid-template-columns:44px 38px minmax(0,1fr) 38px 48px; gap:4px; }
  .worker-stepper button { font-size:10px; padding-inline:2px; }
  .upkeep-note { flex-wrap:wrap; }
}

@media (max-width:560px) {
  .city-picker-panel { grid-template-columns:1fr; }
  .city-rename { grid-template-columns:1fr; }
  .city-rename button { width:100%; }
  .info-dialog.resource-mode .worker-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .info-dialog.resource-mode .worker-stepper { grid-template-columns:42px 34px minmax(48px,1fr) 34px 46px; }
  .info-dialog.resource-mode .worker-stepper button { font-size:9px; }
  .resource-city-row { grid-template-columns:24px minmax(0,1fr) auto; }
  .resource-city-row small { font-size:9px; }
  .range-rule { padding:8px 9px; }
  .market-row { grid-template-columns:28px minmax(0,1fr) auto auto; gap:6px; padding:8px; }
  .market-row > b { grid-column:2 / 5; grid-row:2; text-align:left; color:#8f846f; }
  .market-row button { min-width:62px; padding-inline:7px; }
  .market-balance em { display:none; }
}

/* Closed-beta interaction polish */
.online-message.unread,.report-list article.unread { border-color:#b98b27; box-shadow:inset 3px 0 #d5aa3d; }
.online-message > span { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.online-message button,.alliance-wall button,.alliance-diplomacy button,.alliance-member-actions button { min-height:32px; padding:5px 9px; border:1px solid #6c5526; border-radius:5px; color:#e5c86d; background:#281d0c; }
.alliance-wall,.alliance-diplomacy { display:grid; gap:8px; margin-top:14px; padding:12px; border:1px solid #4f4028; border-radius:8px; background:#15110d; }
.alliance-wall h4,.alliance-diplomacy h4 { margin:0; color:#ddba4f; }
.alliance-wall textarea,.alliance-diplomacy input,.alliance-diplomacy select { width:100%; min-height:38px; padding:8px 10px; border:1px solid #554322; border-radius:5px; color:#eee2cb; background:#0e0b08; }
.alliance-post { padding:9px; border-bottom:1px solid #33291d; }
.alliance-post.announcement { border-left:3px solid #d6a92d; background:#241a0a; }
.alliance-post small { color:#908572; }.alliance-post p { margin:4px 0 0; }
.alliance-diplomacy > p { display:flex; justify-content:space-between; margin:0; padding:8px; background:#0f0c09; }
.alliance-diplomacy > div { display:grid; grid-template-columns:1fr 140px auto; gap:7px; }
.alliance-member-actions { grid-column:2 / -1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.market-row > input { width:72px; min-height:32px; padding:4px 7px; border:1px solid #5d4923; border-radius:5px; color:#eee4cf; background:#100c08; }
#onlineSearchResults { grid-template-columns:1fr; }
#onlineSearchResults > button { display:flex; justify-content:space-between; gap:12px; min-height:42px; padding:9px 11px; border:1px solid #4a3a20; border-radius:5px; color:#ded2bd; background:#15110d; text-align:left; }

@media (max-width:600px) {
  .bonus-shop > header { align-items:flex-start; flex-direction:column; }
  .bonus-shop > header div { width:100%; padding:0 0 9px; border-right:0; border-bottom:1px solid #49371e; }
  .bonus-grid { grid-template-columns:1fr; }
  .bonus-card { grid-template-columns:40px minmax(0,1fr); }
  .bonus-card button { grid-column:1 / -1; min-height:42px; }
  .shield-shop > div { grid-template-columns:repeat(2,1fr); }
  .shield-shop button:last-child { grid-column:1 / -1; }
  .region-overlay { padding:12px 0 max(14px,env(safe-area-inset-bottom)); }
  .region-screen { min-height:calc(100dvh - 26px); justify-content:flex-start; }
  .region-screen > header { padding:8px 18px 0; margin-bottom:13px; }
  .region-screen > header h2 { font-size:30px; }
  .region-screen > header p { font-size:11px; }
  .region-grid { display:flex; gap:10px; overflow-x:auto; padding:3px 18px 14px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .region-grid::-webkit-scrollbar { display:none; }
  .region-card { flex:0 0 78vw; max-width:310px; grid-template-rows:48vh auto auto auto; scroll-snap-align:center; }
  .region-card > strong { font-size:22px; }
  .region-screen > footer { position:sticky; bottom:0; flex-direction:column; gap:7px; margin-top:auto; padding:12px 18px max(4px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,#080705 22%); }
  .region-screen > footer button { width:100%; min-width:0; }
  .map-grid-lines,.map-river,.map-road,.ambient-cluster { opacity:.28; }
  .mine:not(.in-city-range) { opacity:.72; }
  .map-marker:not(.village) .marker-badge { transform:scale(.86); }
  .alliance-diplomacy > div { grid-template-columns:1fr; }
  .alliance-member-list article { grid-template-columns:24px minmax(0,1fr) auto; }
  .alliance-member-actions { grid-column:1 / -1; justify-content:stretch; }
  .alliance-member-actions button { flex:1; }
  .market-row > input { grid-column:3; width:64px; }
  .report-list article { grid-template-columns:34px minmax(0,1fr); }
  .report-list article > time,.report-list article > button { grid-column:2; justify-self:start; }
  .ranking-tabs { grid-template-columns:repeat(2,1fr); }
  .ranking-row { grid-template-columns:28px minmax(0,1fr); }
  .ranking-row > em { grid-column:2; justify-self:start; }
  .player-profile > header { align-items:flex-start; }.player-profile > header > span { width:48px; height:48px; font-size:24px; }.player-profile h3 { font-size:20px; }
  .player-profile > section { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .economy-building-list { grid-template-columns:1fr; }
  .build-speed-options { grid-template-columns:1fr; }
}