:root {
  --bg: #1d1a16;
  --panel: #2a2520;
  --panel-2: #353029;
  --line: #4a4237;
  --text: #f1e8d8;
  --muted: #b5a891;
  --accent: #e0902f;
  --good: #7fbf5a;
  --bad: #e2574c;
  --navh: calc(58px + env(safe-area-inset-bottom));
  --chath: 30px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
h2 { margin: 0 0 6px; font-size: 18px; }
h3 { margin: 6px 0; font-size: 15px; }
h2 small, h3 small { color: var(--muted); font-weight: 400; font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.warn { color: var(--bad); }
.good { color: var(--good); }
.mid { color: #e8c35a; }

/* ------------------------------------------------------------- top bar */
#topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top));
  background: rgba(29, 26, 22, .9); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.resrow { display: flex; gap: 5px; }
.res {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 7px; font-size: 13px; white-space: nowrap; overflow: hidden;
}
.res .val { font-weight: 700; }
.res .rate { color: var(--good); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.res.full .val { color: var(--accent); }
.res.coins { flex: .8; border-color: #8a6a22; }
.subrow { display: flex; gap: 6px; align-items: center; min-height: 26px; }
.chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; white-space: nowrap;
}
#profile span { margin-left: 6px; }
#raidBanner {
  flex: 1; min-width: 0; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: #5a1f1a; border: 1px solid var(--bad); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: pulse 1.6s infinite;
}
#raidBanner.ok { background: #24401a; border-color: var(--good); animation: none; }
@keyframes pulse { 50% { opacity: .65; } }

/* ---------------------------------------------------------------- views */
.view { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#baseView { background: #4d4232; }
#worldView { background: #3a3226; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
body:not(.ready) #world { visibility: hidden; }
#ground, #sprites { position: absolute; left: 0; top: 0; }
#overlay { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
canvas.chunk { position: absolute; }
#sprites { z-index: 2; pointer-events: none; }
#worldCanvas { display: block; }

#overlay .sel { fill: rgba(255, 211, 107, .18); stroke: #ffd36b; stroke-width: 4; }
#overlay .ghost.ok { fill: rgba(127, 191, 90, .3); stroke: #9be07a; stroke-width: 4; }
#overlay .ghost.bad { fill: rgba(226, 87, 76, .3); stroke: #ff7a6b; stroke-width: 4; }

.building { position: absolute; }
.building img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.building img.part { position: absolute; left: 0; top: 0; will-change: transform; }
.building img.dish { position: absolute; will-change: transform; }
.beacon {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 8px 4px rgba(255, 70, 50, .75);
  animation: beacon 1.6s steps(1, end) infinite;
}
@keyframes beacon { 0% { opacity: 1; } 55% { opacity: .12; } }
.searchbeam {
  position: absolute; width: 330px; height: 120px; margin-top: -60px; transform-origin: 0 50%;
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  background:
    radial-gradient(ellipse 22% 48% at 86% 50%, rgba(255, 246, 200, .55), rgba(255, 246, 200, 0) 100%),
    linear-gradient(to right, rgba(255, 240, 170, .55), rgba(255, 240, 170, .08) 85%, rgba(255, 240, 170, 0));
  mix-blend-mode: screen; filter: blur(1.5px); pointer-events: none; will-change: transform;
}
.lamp {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 35%, #ffd66b 60%, rgba(255, 214, 107, 0) 72%);
  box-shadow: 0 0 10px 4px rgba(255, 230, 150, .7);
}
.wall { position: absolute; pointer-events: none; }

/* rally point */
#overlay .rally-ground { fill: rgba(120, 95, 60, .45); stroke: rgba(240, 215, 160, .75); stroke-width: 3; stroke-dasharray: 16 8; }
#overlay .rally-ground.sel { stroke: #ffd36b; stroke-width: 4; stroke-dasharray: none; fill: rgba(255, 211, 107, .2); }
.rally-flag { position: absolute; pointer-events: none; }
.rally-flag svg { display: block; overflow: visible; }
.rally-flag .cloth { transform-origin: 10px 24px; animation: flutter 1.4s ease-in-out infinite alternate; }
@keyframes flutter { from { transform: skewY(-4deg) scaleX(1); } to { transform: skewY(5deg) scaleX(.9); } }
.rally-count {
  position: absolute; left: 8px; top: -6px; transform: translate(-50%, -100%); white-space: nowrap;
  background: rgba(25, 22, 18, .88); border: 2px solid #b8392b; border-radius: 999px;
  padding: 2px 10px; font-size: 14px; font-weight: 700; color: #ffe1c4;
}
.expand-sign.locked { border-color: #8a7a60; color: #cdbf9f; font-size: 17px; }
.building.selected img { filter: drop-shadow(0 0 6px #ffd36b) brightness(1.08); }
.building.constructing img { opacity: .55; filter: grayscale(.6); }
.ghost-sprite { position: absolute; opacity: .7; pointer-events: none; }

.lvbadge {
  position: absolute; transform: translate(-50%, 0);
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: rgba(25, 22, 18, .88); border: 2px solid var(--accent);
  color: #ffd9a3; font-weight: 800; font-size: 14px; line-height: 22px; text-align: center;
}
.status {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  border-radius: 999px; padding: 3px 10px; font-size: 15px; font-weight: 700;
  background: rgba(25, 22, 18, .9); border: 2px solid var(--line);
}
.status.timer { border-color: var(--accent); font-size: 14px; }
.status.up { background: #2f6a1f; border-color: #9be07a; color: #e9ffd9; padding: 2px 9px; animation: bob 1.2s ease-in-out infinite; }
.status.warn { background: #6a2a1f; border-color: #ff9b8f; color: #ffe1dc; padding: 2px 10px; }
@keyframes bob { 50% { transform: translate(-50%, calc(-100% - 6px)); } }

.expand-sign {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  background: rgba(25, 22, 18, .8); border: 2px dashed #e0c08a; border-radius: 12px;
  padding: 8px 16px; font-size: 20px; color: #ffe6b8; z-index: 5;
}

/* workers */
.worker { position: absolute; left: 0; top: 0; transform-origin: 11px 34px; will-change: transform; }
.worker svg { display: block; overflow: visible; }
.worker .tool { opacity: 0; transform-origin: 15.8px 20px; }
.worker.walking .leg.l { animation: legA .32s ease-in-out infinite alternate; }
.worker.walking .leg.r { animation: legB .32s ease-in-out infinite alternate; }
.worker.working .tool { opacity: 1; animation: hammer .45s ease-in-out infinite alternate; }
.worker.working svg { animation: work .45s ease-in-out infinite alternate; }
@keyframes legA { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes legB { from { transform: translateY(-2.5px); } to { transform: translateY(0); } }
@keyframes hammer { from { transform: rotate(-35deg); } to { transform: rotate(25deg); } }
@keyframes work { to { transform: translateY(1.5px); } }

/* ------------------------------------------------------------ toolbars */
.toolbar {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--navh) + var(--chath) + 8px); z-index: 15;
  display: flex; gap: 8px; align-items: flex-end; justify-content: space-between; pointer-events: none;
}
.toolbar > * { pointer-events: auto; }
.toolbar.col { flex-direction: column; align-items: stretch; }
.btnrow { display: flex; gap: 8px; }
.tool {
  background: rgba(29, 26, 22, .92); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; font-size: 14px; white-space: nowrap;
}
.tool.on { border-color: var(--accent); background: #4a3416; }
.tool.done { margin-left: auto; background: #2f5a1f; border-color: var(--good); }
#roadHint {
  background: rgba(29, 26, 22, .92); border: 1px solid var(--accent); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; text-align: center;
}
#builders { display: flex; gap: 6px; }
.bslot {
  width: 54px; height: 50px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(29, 26, 22, .92); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1.1; padding: 0;
}
.bslot small { font-size: 10px; color: var(--muted); }
.bslot.busy { border-color: var(--accent); }
.bslot.busy small { color: #ffd9a3; }
.bslot.locked { opacity: .75; border-style: dashed; }
/* armies that are out: stacked at the top-left */
#armyDock { position: fixed; left: 8px; top: 84px; z-index: 18; display: flex; flex-direction: column; gap: 6px; width: 176px; }
.army-card {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(29, 26, 22, .92); border: 1px solid var(--line); border-left: 4px solid #9ee07a;
  border-radius: 10px; padding: 5px 6px 5px 6px;
}
.army-card.attack { border-left-color: #ff7a6b; }
.army-card.back { border-left-color: #7fb8ff; }
.army-ico {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel-2); border: 2px solid currentColor; color: #9ee07a;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.army-ico.pic { background-size: 88%; background-position: center 60%; background-repeat: no-repeat; width: 42px; height: 42px; }
.army-card.attack .army-ico { color: #ff7a6b; }
.army-card.back .army-ico { color: #7fb8ff; }
.army-ico i {
  position: absolute; right: -5px; bottom: -4px; font-style: normal; font-size: 11px;
  background: #15130f; border: 1px solid currentColor; border-radius: 50%; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.army-info { flex: 1; min-width: 0; font-size: 12px; line-height: 1.25; }
.army-info .al { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.army-info b { font-size: 13px; }
.mini-bar { height: 4px; background: var(--panel-2); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; width: 0; background: currentColor; color: #9ee07a; background-color: #9ee07a; }
.army-card.attack .mini-bar i { background-color: #ff7a6b; }
.army-card.back .mini-bar i { background-color: #7fb8ff; }
.army-card .recall {
  flex: none; width: 28px; height: 28px; border-radius: 8px; padding: 0;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 14px;
}
.army-slots { font-size: 11px; color: var(--muted); padding-left: 4px; }
.army-card.idle { border-left-color: #e0c07a; padding-top: 3px; padding-bottom: 3px; }
.army-card.idle .army-ico { color: #e0c07a; }
.army-card.idle b.ready { color: #e0c07a; font-size: 12px; }

/* first-time guide */
#guide {
  position: fixed; z-index: 19; left: 50%; transform: translateX(-50%); top: 84px;
  width: min(440px, calc(100vw - 16px));
  background: rgba(32, 28, 22, .96); border: 2px solid #e0c07a; border-radius: 14px;
  padding: 10px 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
#guide .g-head { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; font-size: 15px; color: #ffe6b8; }
#guide .g-head button { background: none; border: 0; color: var(--muted); font-size: 16px; padding: 0 2px; }
#guide p { margin: 6px 0 8px; font-size: 13px; line-height: 1.55; color: var(--text); }
#guide .g-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
#guide .g-foot .btn { flex: none; min-width: 120px; padding: 8px 14px; }
#guide .dots { display: flex; gap: 5px; }
#guide .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
#guide .dots i.done { background: var(--good); }
#guide .dots i.on { background: var(--accent); box-shadow: 0 0 0 2px rgba(224, 144, 47, .35); }
#nav button.pulse { color: #ffd9a3; animation: navpulse 1s ease-in-out infinite; }
@keyframes navpulse { 50% { background: rgba(224, 144, 47, .28); } }

/* squad detail */
.sq-total { background: var(--panel-2); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 8px 0; }
.slot-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.slot-card.match { border-color: #e0c07a; box-shadow: inset 0 0 0 1px rgba(224, 192, 122, .35); }
.slot-card.empty { display: flex; gap: 10px; align-items: center; opacity: .85; }
.slot-head { display: flex; gap: 10px; align-items: flex-start; }
.slot-head .hero-slot { padding: 2px; flex: none; }
.unit-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.unit-pick button { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; font-size: 12px; color: var(--text); }
.unit-pick button.on { border-color: var(--accent); background: #4a3416; }
.star { color: #f3c969; font-size: 11px; white-space: nowrap; }
.note.spec { color: #f3c969; }

/* city figures and parked units (art from tools/city_art.py) */
.worker { width: 22px; height: 40px; transform-origin: 11px 40px; }
.worker img { position: absolute; left: 0; bottom: 0; height: 40px; width: auto; max-width: none; transform: translateX(calc(11px - 50%)); }
.worker .shadow { position: absolute; left: 3px; bottom: -3px; width: 16px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.worker.walking img { animation: stride .32s ease-in-out infinite alternate; }
.worker.working img { animation: hammerbob .45s ease-in-out infinite alternate; }
@keyframes stride { from { margin-bottom: 0; } to { margin-bottom: 2px; } }
@keyframes hammerbob { from { margin-bottom: 0; transform: translateX(calc(11px - 50%)) rotate(-4deg); } to { margin-bottom: 1px; transform: translateX(calc(11px - 50%)) rotate(5deg); } }
.parked { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.parked img { display: block; width: 100%; height: auto; transform-origin: 50% 70%; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); }
.parked .shadow { position: absolute; left: 12%; bottom: -4px; width: 76%; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.parked.air .shadow { bottom: -2px; height: 12px; }
.building img.parked-plane { position: absolute; left: 48%; top: 62%; width: 46%; height: auto; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }
.wall.tower, .wall.gate { pointer-events: none; }

/* ------------------------------------------------------------------ nav */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: var(--navh);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: #15130f; border-top: 1px solid var(--line);
}
#nav button {
  flex: 1; background: none; border: 0; color: var(--muted); font-size: 11px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
}
#nav button span { font-size: 20px; line-height: 1.1; }
#nav button.on { color: #ffd9a3; }
.badge {
  position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-style: normal; line-height: 18px; padding: 0 4px;
}

/* ---------------------------------------------------------------- panel */
#panel {
  position: fixed; left: 0; right: 0; bottom: var(--navh); z-index: 30;
  max-height: calc(100vh - var(--navh) - 96px); overflow: auto; overscroll-behavior: contain;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0; padding: 14px 16px 16px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
}
@media (min-width: 760px) {
  #panel { left: auto; right: 12px; width: 420px; bottom: calc(var(--navh) + 12px); border-radius: 14px; border: 1px solid var(--line); }
}
#panelClose { position: absolute; right: 10px; top: 8px; background: none; border: 0; font-size: 18px; color: var(--muted); z-index: 1; }
.ph { display: flex; gap: 12px; align-items: center; padding-right: 24px; }
.ph img { width: 80px; height: 80px; object-fit: contain; background: var(--panel-2); border-radius: 10px; padding: 4px; flex: none; }
.ph h2 { margin: 0 0 2px; }
.ph p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
.stat { background: var(--panel-2); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.stat b { display: block; font-size: 15px; color: var(--text); }
.stat .next { color: var(--good); }
.jobline { margin-top: 10px; font-size: 14px; }
.cost { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; font-size: 14px; }
.cost span.lack { color: var(--bad); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.actions.sub { margin-top: 16px; }
.btn {
  flex: 1; min-width: 120px; padding: 11px 12px; border-radius: 10px; border: 0;
  background: var(--accent); color: #2a1a05; font-weight: 700;
}
.btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.btn.danger { border-color: #7a3229; color: #ffb3a8; }
.btn:disabled, .mini:disabled { opacity: .4; cursor: not-allowed; }
.mini { background: var(--accent); color: #2a1a05; border: 0; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.note { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.note.warn, .note .warn { color: var(--bad); }
.progress { height: 10px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.progress i { display: block; height: 100%; background: var(--accent); }

.reqs { background: #24301c; border: 1px solid #4c6a35; border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.reqs.bad { background: #3a1f1a; border-color: #8a3a2f; }
.reqtitle { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.req { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; color: #ffb3a8; }
.req.ok { color: #b8e6a0; }
.req .have { color: var(--muted); font-size: 12px; margin-left: auto; }

.choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.choice button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; font-size: 13px; }
.choice button.dim { opacity: .55; }
.choice img { width: 100%; height: 64px; object-fit: contain; display: block; margin-bottom: 4px; }
.choice small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.choice .count { color: var(--accent); font-size: 11px; }
.roadicon { height: 64px; margin: 0 auto 4px; width: 80px; background: linear-gradient(135deg, transparent 38%, #5d5952 38%, #5d5952 62%, transparent 62%); position: relative; }
.roadicon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 49%, #f0d778 49%, #f0d778 51%, transparent 51%); opacity: .8; }

.list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.row-card { display: flex; gap: 10px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.row-card.glow { border-color: var(--good); }
.rc-main { flex: 1; min-width: 0; font-size: 13px; }
.rc-main small { color: var(--muted); }
.pill { font-size: 11px; color: var(--good); border: 1px solid var(--good); border-radius: 999px; padding: 2px 8px; }
.report { background: var(--panel-2); border-left: 4px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.report.win { border-left-color: var(--good); }
.report.lose { border-left-color: var(--bad); }
.report .rh { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.report .rh small { color: var(--muted); white-space: nowrap; }
/* heroes and squads */
.hero-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; font-size: 18px;
  background: radial-gradient(circle at 35% 30%, #4a4237, #1d1a16); border: 2px solid var(--rc, var(--line));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.hero-av.img { background-size: cover; background-position: center 20%; }
.hero-av.img i { font-style: normal; opacity: 0; }
.hero-av.lg { width: 52px; height: 52px; font-size: 24px; }
.hero-av.xs { width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; margin-left: -4px; }
.hero-av.xs:first-child { margin-left: 0; }
.hero-av.empty { color: var(--muted); border-style: dashed; background: var(--panel-2); font-size: 16px; }
.hero-av.empty.xs { font-size: 9px; }
.squad { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.squad.busy { border-color: #8a4a3a; }
.squad.locked { opacity: .6; }
.sq-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sq-head span { color: var(--muted); font-size: 12px; }
.sq-heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 2px; }
.hero-slot { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-slot small { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
.hero-slot:disabled { opacity: .6; }
.hero-row { width: 100%; text-align: left; color: var(--text); font: inherit; }
.row-card.dim { opacity: .6; }
.pill.warnp { color: #e8c35a; border-color: #e8c35a; }
.squad-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.squad-pick .sq {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text);
}
.squad-pick .sq span { display: flex; align-items: center; min-height: 20px; color: var(--muted); font-size: 11px; }
.squad-pick .sq.on { border-color: var(--accent); background: #4a3416; }
.squad-pick .sq:disabled, .squad-pick .sq.locked { opacity: .45; }
.slider { margin: 10px 0; }
.slider label { display: block; font-size: 14px; margin-bottom: 4px; }
.slider input { width: 100%; accent-color: var(--accent); }
.help { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.help p { margin: 4px 0; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; font-size: 14px; }

#toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(var(--navh) + var(--chath) + 70px); transform: translateX(-50%);
  background: rgba(20, 18, 15, .95); border: 1px solid var(--accent); border-radius: 10px;
  padding: 8px 14px; font-size: 14px; max-width: calc(100vw - 32px); text-align: center; pointer-events: none;
}

@media (max-width: 480px) {
  .res { font-size: 12px; padding: 3px 5px; }
  .res .rate { display: none; }
  .bslot { width: 46px; height: 46px; }
  .tool { padding: 8px 10px; font-size: 13px; }
}

/* production building doors (tools/doors.py): open while units roll out */
.building .door { position: absolute; pointer-events: none; overflow: hidden; }
.building .door img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }

/* building without a road link: greyed out, pulsing warning chip */
.building.noroad > img { filter: grayscale(.65) brightness(.85); }
.status.noroad { font-size: 15px; animation: noroad 1.2s ease-in-out infinite; }
@keyframes noroad { 50% { transform: translate(-50%, -100%) scale(1.15); } }

/* chat bar above the nav, chat + account sheet */
#chatBar {
  position: fixed; left: 0; right: 0; bottom: var(--navh); height: var(--chath); z-index: 24;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-top: 1px solid var(--line);
  background: rgba(21, 19, 15, .92); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
#chatBar .cmsg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatBar .cmsg b { color: #ffd9a3; }
#chatBar .cmsg i { color: var(--muted); }
#chatBar .cbadge { position: static; min-width: 20px; height: 20px; border-radius: 10px; background: var(--bad); color: #fff;
  font-size: 11px; font-style: normal; line-height: 20px; text-align: center; padding: 0 5px; }
#social {
  position: fixed; left: 0; right: 0; bottom: var(--navh); top: 96px; z-index: 40;
  display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0; padding: 14px 16px 12px;
}
#social[hidden] { display: none; }
#social .sclose { position: absolute; right: 10px; top: 8px; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
#social .sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
#social h2 { margin: 0 0 10px; font-size: 18px; }
#social h2 small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.chatlist { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; }
.cm { max-width: 85%; align-self: flex-start; background: var(--panel-2); border-radius: 10px; padding: 6px 10px; }
.cm.mine { align-self: flex-end; background: #4a3a22; }
.cmh { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.cmh b { color: #ffd9a3; }
.cmh span { color: var(--muted); font-size: 11px; }
.cmt { font-size: 14px; word-break: break-word; white-space: pre-wrap; }
.chatform { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chatform input, .sform input {
  flex: 1; min-width: 0; background: #1b1814; color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; font: inherit; font-size: 16px;
}
.sform { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.sform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.sform .err { color: #ff9b8f; min-height: 1em; margin: 0; font-size: 13px; }
.stabs { display: flex; gap: 6px; margin-bottom: 12px; }
.stabs button { flex: 1; max-width: 200px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; cursor: pointer; }
.stabs button.on { background: var(--panel-2); color: #ffd9a3; border-color: #8a6a3a; }
.acct { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.arow { display: flex; justify-content: space-between; gap: 10px; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.arow span { color: var(--muted); }
.arow .ok { color: #8fdc8f; }
.arow .warn { color: #ffb547; }
@media (min-width: 900px) {
  #social { left: auto; right: 12px; width: 420px; top: 110px; bottom: calc(var(--navh) + 12px); border-radius: 14px; border: 1px solid var(--line); }
}

#loginBtn { cursor: pointer; color: #ffd9a3; border-color: #8a6a3a; }
#loginBtn.pulse { animation: loginpulse 1.6s ease-in-out infinite; }
@keyframes loginpulse { 50% { background: #4a3a22; } }
.giftbox { display: flex; gap: 10px; align-items: center; background: #3d3020; border: 1px solid #8a6a3a; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.giftbox > :first-child, .giftbox { font-size: 13px; }
.ordiv { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 8px; max-width: 420px; }
.btn.google { max-width: 420px; width: 100%; }
#social .sbody > * { flex: none; }
#social .sbody > .chatlist { flex: 1; }
.chatform .btn { flex: none; width: auto; padding-left: 18px; padding-right: 18px; }

.savecard { display: flex; flex-direction: column; gap: 4px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; max-width: 460px; }
.savecard span { font-size: 13px; }
.savecard small { color: var(--muted); font-size: 12px; }
.savecard .btn { margin-top: 6px; }

.fhead { margin: 14px 0 6px; font-size: 15px; }
.fhead small { color: var(--muted); font-weight: 400; font-size: 12px; }
.frow { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border-radius: 8px; padding: 6px 10px; margin-top: 6px; max-width: 460px; }
.frow .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow small { color: var(--muted); font-size: 11px; }
.frow .mini.ghost { background: none; border: 1px solid var(--line); color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6b645a; margin-right: 6px; vertical-align: middle; }
.dot.on { background: #6fd36f; }
#social p.err { color: #ff9b8f; min-height: 1em; margin: 4px 0 0; font-size: 13px; }

.qhead { margin: 12px 0 6px; font-size: 15px; }
.qhead small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }

.fortlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.fortlist span { background: var(--panel-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.fortlist span.mine { background: #2c4466; color: #cfe2ff; }