/* ============================================================
   THEME — "elegant barbarian": dark iron & leather, bronze accents,
   carved serif headings, everything labeled.
   ============================================================ */
:root {
  --bg: #0e0c0b;
  --bg2: #16120f;
  --panel: linear-gradient(180deg, #221b16 0%, #1a1411 100%);
  --panel-flat: #1c1613;
  --panel2: #2a2119;
  --line: #3a2e24;
  --line2: #5a4632;
  --bronze: #c9973f;
  --bronze2: #e8c06a;
  --bronze-dim: #8a6a33;
  --text: #ede4d3;
  --dim: #9c8f7c;
  --accent: var(--bronze);
  --accent2: #e8c06a;
  --shard: #a98cf0;
  --danger: #c9483f;
  --blood: #8f2b25;
  --hp: #4fae6b;
  --hp2: #7fd28f;
  --xp: #d9a441;
  --stone: #3b3632;
  --font-head: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.35 var(--font-body); }
body {
  max-width: 520px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); user-select: none;
  background:
    radial-gradient(1200px 600px at 50% -200px, #2a1d14 0%, transparent 60%),
    radial-gradient(800px 500px at 50% 110%, #1b1410 0%, transparent 60%),
    var(--bg);
}
h1, h2, h3, .card-title, .fname, .stage-title, .tabs button, .modal-title { font-family: var(--font-head); letter-spacing: .5px; }
button { font: inherit; color: inherit; background: var(--panel2); border: 1px solid var(--line2); border-radius: 6px; padding: 8px 12px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: default; }
button.active { border-color: var(--bronze); color: var(--bronze2); background: #2f2418; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.center { text-align: center; }
.lack { color: var(--danger); }

/* ---------- header: resources ---------- */
.sticky-head { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, #130f0c 0%, #130f0cee 85%, transparent 100%); padding-bottom: 6px; }
.top { padding: 8px 12px 2px; }
.res-bar { display: flex; flex-direction: column; gap: 4px; }
.res-group { display: flex; align-items: stretch; gap: 6px; }
.res-group-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-head); font-size: 9px; letter-spacing: 2px; color: var(--bronze-dim); text-transform: uppercase; padding: 2px 0; border-right: 1px solid var(--line); }
.res-items { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; }
.res { display: flex; align-items: center; gap: 5px; background: #17120fcc; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px 3px 5px; min-width: 96px; font-variant-numeric: tabular-nums; }
.res-txt { display: flex; flex-direction: column; line-height: 1.05; }
.res-txt b { font-size: 13px; }
.res-name { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; }
.rrate { font-size: 10px; color: var(--hp2); margin-left: auto; padding-left: 4px; }
.res.lowres { border-color: var(--blood); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; padding: 6px 12px 0; }
.tabs button { flex: 1; padding: 10px 4px; border-radius: 6px 6px 0 0; position: relative; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; background: #1a1411; border-bottom-color: transparent; color: var(--dim); }
.tabs button.active { color: var(--bronze2); background: linear-gradient(180deg, #2d2218, #1f1813); border-color: var(--bronze-dim); box-shadow: inset 0 2px 0 var(--bronze); }
.badge { position: absolute; top: -6px; right: -4px; background: var(--bronze2); color: #1a1208; font-size: 11px; font-weight: 800; border-radius: 10px; padding: 0 6px; font-family: var(--font-body); }
.subtabs { display: flex; gap: 4px; margin: 10px 0; }
.subtabs button { flex: 1; padding: 7px 2px; font-size: 12px; white-space: nowrap; position: relative; border-radius: 4px; background: #17120f; }
.subtabs button.active { background: #2b2118; }
.dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze2); box-shadow: 0 0 6px var(--bronze2); }

main { padding: 0 12px 90px; flex: 1; }

/* ---------- panels ---------- */
.card, .row {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 6px rgba(0,0,0,.45);
}
.card { padding: 14px; margin-bottom: 10px; position: relative; }
.card::before, .row::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(201,151,63,.08); margin: 3px; }
.card-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--bronze2); text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.card-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bronze-dim), transparent); }
.card p { margin: 6px 0; }
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; position: relative; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-family: var(--font-head); font-size: 14px; }
.owned { color: var(--dim); font-weight: 400; font-size: 12px; margin-left: 4px; font-family: var(--font-body); }
.row-sub { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rowico { margin-right: 2px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.buy { min-width: 96px; text-align: center; padding: 7px 10px; line-height: 1.25; font-size: 12px; background: linear-gradient(180deg, #2c2219, #1f1813); }
.buy:not(:disabled) { border-color: var(--bronze); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px #1a1208, 0 2px 4px rgba(0,0,0,.5); }
.buy .cost { font-weight: 700; color: var(--bronze2); }
.buy:disabled .cost { color: var(--text); }
.buy.shard:not(:disabled) { border-color: var(--shard); }
.buy.shard .cost { color: var(--shard); }
.buy > .small { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; color: var(--dim); }
.buy:not(:disabled) > .small { color: var(--text); }
.owned-row { opacity: .5; }
.flash { animation: flash .4s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--bronze2), 0 0 18px var(--bronze); } }
.empty { text-align: center; color: var(--dim); padding: 30px 0; }
.big { width: 100%; padding: 14px; font-size: 15px; border-radius: 8px; margin-top: 8px; font-family: var(--font-head); letter-spacing: 1px; text-transform: uppercase; }
.big:not(:disabled) { background: linear-gradient(180deg, #4d3a22, #33261a); border-color: var(--bronze); color: var(--bronze2); }
.big.accent:not(:disabled) { background: linear-gradient(180deg, var(--bronze2), var(--bronze)); border-color: var(--bronze2); color: #1a1208; }
button.primary:not(:disabled) { background: linear-gradient(180deg, #4d3a22, #33261a); border-color: var(--bronze); color: var(--bronze2); }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.accent-text { color: var(--bronze2); font-size: 22px; font-family: var(--font-head); }

/* ---------- arena ---------- */
.arena { background: linear-gradient(180deg, #1d1712 0%, #120e0b 100%); }
.arena-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.stage-title { font-size: 15px; color: var(--bronze2); text-transform: uppercase; letter-spacing: 2px; }
.stage-title b { font-size: 20px; color: var(--text); }
.boss-tag { background: var(--blood); color: #ffd9d4; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 4px; margin-left: 6px; letter-spacing: 1px; font-family: var(--font-body); }
.mode-tag { color: var(--hp2); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; margin-right: 8px; }
.fighters { display: flex; align-items: center; gap: 10px; }
.fighter { flex: 1; min-width: 0; }
.fname { font-weight: 700; margin-bottom: 4px; font-size: 15px; }
.vs { font-size: 22px; color: var(--bronze-dim); }
.bar { position: relative; height: 16px; background: #090706; border: 1px solid #2a211b; border-radius: 4px; overflow: hidden; margin-bottom: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,.7); }
.bar > div { height: 100%; background: linear-gradient(180deg, var(--hp2), var(--hp)); transition: width .1s linear; }
.bar.enemy > div { background: linear-gradient(180deg, #d9584c, var(--blood)); }
.bar.xp { height: 5px; } .bar.xp > div { background: linear-gradient(180deg, #f0c060, var(--xp)); }
.bar.kills { height: 18px; } .bar.kills > div { background: linear-gradient(180deg, #7a6040, #4d3a22); }
.bar > span { position: absolute; inset: 0; font-size: 11px; line-height: 15px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; font-weight: 600; }
.bar.kills > span { line-height: 17px; letter-spacing: .5px; }
.progress-row { margin-top: 12px; }
.btn-row { display: flex; gap: 8px; margin-top: 8px; }
.btn-row button { flex: 1; padding: 12px; font-weight: 700; font-family: var(--font-head); letter-spacing: 1px; }
.afk-info { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; line-height: 1.5; }
.stats3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stats3 div { display: flex; flex-direction: column; font-size: 11px; background: #14100d; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.stats3 span { text-transform: uppercase; letter-spacing: 1px; font-size: 9.5px; }
.stats3 b { font-size: 14px; font-variant-numeric: tabular-nums; }
.log { font-size: 12px; color: var(--dim); max-height: 120px; overflow: hidden; }
.log div { padding: 2px 0; border-bottom: 1px dashed #241c16; }
.log div:first-child { color: var(--text); }

/* ---------- skill bar ---------- */
.skill-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .skill-bar .skill-btn { flex: 1 1 64px; max-width: 120px; } .skill-bar .skill-btn.basic { flex-basis: 84px; }
.skill-btn { position: relative; padding: 6px 2px; font-size: 10.5px; line-height: 1.2; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #15110e; }
.skill-btn.empty { opacity: .3; border-style: dashed; }
.skill-btn.ready { border-color: var(--bronze2); background: radial-gradient(circle at 50% 20%, #4a361d, #241b12); color: var(--bronze2); font-weight: 700; box-shadow: 0 0 10px rgba(232,192,106,.35); }
.skill-btn:not(.ready):not(.empty)::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--cd, 0) * 100%); background: var(--bronze-dim); }
.sk-ico { display: block; height: 24px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.sk-cd { font-size: 10px; opacity: .85; }
.skill-btn.basic { opacity: 1; border-color: var(--line2); color: var(--text); }
.skill-btn.basic::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--cd, 0) * 100%); background: var(--hp2); }
.skill-btn.basic .sk-cd { font-size: 10px; color: var(--hp2); white-space: nowrap; }

.btn-col { display: flex; flex-direction: column; gap: 4px; }
.btn-col .buy { min-width: 112px; }
.btn-col-h { display: flex; gap: 4px; }
.btn-col-h .buy { min-width: 44px; padding: 8px 6px; }
.talent-branch { margin-bottom: 14px; }

/* ---------- icons ---------- */
.ico { display: inline-block; vertical-align: middle; background: url(assets/icons.png) no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0; }
.costitem { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.78); display: flex; align-items: safe center; justify-content: center; z-index: 45; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.modal-box { margin: auto 0; }
.modal-box { background: var(--panel); border: 1px solid var(--bronze-dim); border-radius: 10px; padding: 22px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 0 0 4px #14100d, 0 0 40px rgba(0,0,0,.8); }
.modal-box .card-title { justify-content: center; }
.modal-box .card-title::after { display: none; }
.wb-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 18px; font-weight: 700; color: var(--bronze2); margin: 12px 0; font-variant-numeric: tabular-nums; }

/* ---------- pops ---------- */
.pop { position: fixed; pointer-events: none; color: var(--text); font-weight: 700; transform: translate(-50%, -50%); animation: rise .7s ease-out forwards; z-index: 30; font-size: 14px; text-shadow: 0 1px 3px #000; font-family: var(--font-head); }
@keyframes rise { to { transform: translate(-50%, -140%); opacity: 0; } }
.pop.crit { color: var(--bronze2); font-size: 19px; }
.pop.skill { color: var(--shard); }
.pop.taken { color: #ff8a80; }
.pop.heal { color: var(--hp2); }

/* ---------- dev ---------- */
.dev-toggle { position: fixed; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; opacity: .45; z-index: 15; }
.dev { position: fixed; right: 12px; bottom: 60px; background: var(--panel-flat); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; width: 280px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); overflow-y: auto; z-index: 40; font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.dev-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.dev-row button { padding: 5px 9px; font-size: 12px; }
.dev .danger { border-color: var(--danger); color: var(--danger); }
.dev textarea { width: 100%; height: 50px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }

/* ---------- throne / legacy ---------- */
.ksub { }
.throne-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.throne-stats div { display: flex; flex-direction: column; font-size: 11px; background: #14100d; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.throne-stats b { font-size: 16px; font-family: var(--font-head); color: var(--bronze2); }
.accent-inline { color: var(--bronze2); }
.path-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.path { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 6px; background: #15110e; border: 1px solid var(--line2); }
.path.active { border-color: var(--bronze2); background: #2b2118; box-shadow: 0 0 10px rgba(232,192,106,.25); }
.path .path-name { font-family: var(--font-head); font-size: 13px; }
.path .path-desc { font-size: 11.5px; color: var(--dim); font-family: var(--font-body); }
.path:disabled { opacity: .4; }
.found-box { max-width: 420px; text-align: left; max-height: 90vh; overflow-y: auto; }
.small-title { font-size: 12px; margin-top: 8px; }
.worker-row.off { opacity: .55; }
.dev-input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 4px; width: 80px; font-size: 12px; }

.reserve-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 8px; cursor: pointer; }
.reserve-row input { margin-top: 3px; accent-color: var(--bronze); }

.errbar { position: fixed; left: 0; right: 0; top: 0; background: var(--blood); color: #fff; padding: 6px 10px; font-size: 12px; z-index: 50; }

/* ---------- plots ---------- */
.plots-head { margin-bottom: 10px; }
.plot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.plot { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 6px rgba(0,0,0,.45); }
.plot.empty { border-style: dashed; align-items: center; justify-content: center; color: var(--dim); cursor: pointer; }
.plot.empty .plus { font-size: 28px; color: var(--bronze-dim); font-family: var(--font-head); }
.plot.locked { opacity: .35; border-style: dotted; align-items: center; justify-content: center; text-align: center; }
.plot-title { font-family: var(--font-head); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.plot-title .owned { margin-left: auto; }
.plot-job { font-size: 11.5px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.plot-job .arrow { color: var(--bronze-dim); }
.plot .bar { height: 8px; margin: 2px 0; }
.plot .bar > div { background: linear-gradient(180deg, var(--bronze2), var(--bronze)); }
.plot-actions { display: flex; gap: 4px; margin-top: auto; }
.plot-actions .buy { min-width: 0; flex: 1; padding: 6px 4px; font-size: 11px; }
.plot select { background: #15110e; color: var(--text); border: 1px solid var(--line2); border-radius: 4px; padding: 4px; font-size: 11px; width: 100%; }
.plot .worker-tag { font-size: 10.5px; color: var(--hp2); }
.plot.working { border-color: var(--bronze-dim); }
.cat-title { font-family: var(--font-head); color: var(--bronze2); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 10px 0 6px; }
.build-opt { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; margin-bottom: 6px; background: #15110e; }
.build-opt .bo-main { flex: 1; }
.build-opt .bo-name { font-family: var(--font-head); font-size: 13px; }
.build-opt .bo-desc { font-size: 11px; color: var(--dim); }
.away { display: flex; align-items: center; gap: 10px; justify-content: space-between; border-color: var(--bronze-dim); }
.away button { padding: 10px 12px; font-family: var(--font-head); }
.market-row .buy { min-width: 60px; padding: 6px 6px; }
.sellprice { color: var(--bronze2); font-weight: 700; }

/* ---------- tech ---------- */
.tech-tier { margin-bottom: 14px; }
.tech-tier .cat-title { display: flex; align-items: center; gap: 10px; }
.tech-tier .cat-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bronze-dim), transparent); }
.tech { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.tech.done { border-color: var(--bronze-dim); }
.tech.done .row-title::after { content: ' ✓'; color: var(--bronze2); }
.tech .req { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.tech .req .bar { height: 6px; margin: 0; }
.tech .req .bar > div { background: linear-gradient(180deg, var(--bronze2), var(--bronze)); }
.tech .req-line { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.tech.gated { opacity: .75; }

/* ---------- activities / harvest ---------- */
.activity-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.act-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; font-size: 12px; font-family: var(--font-head); background: #15110e; }
.act-btn .act-sub { font-family: var(--font-body); font-size: 10px; color: var(--dim); text-align: center; line-height: 1.15; }
.act-btn.active { border-color: var(--bronze2); background: radial-gradient(circle at 50% 20%, #4a361d, #241b12); color: var(--bronze2); box-shadow: 0 0 10px rgba(232,192,106,.3); }
.harvest-scene { display: flex; gap: 14px; align-items: center; margin: 8px 0; }
#harvest-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #14100d; border: 1px solid var(--line2); border-radius: 8px; }
.harvest-info { flex: 1; }
.bar.harvest { height: 18px; margin: 6px 0; } .bar.harvest > div { background: linear-gradient(180deg, var(--hp2), var(--hp)); }
.bar.harvest > span { line-height: 17px; }

/* ---------- paper doll ---------- */
.doll { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; justify-content: center; }
.doll-gear { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.doll-tools { display: flex; flex-direction: column; gap: 4px; align-items: center; padding-right: 10px; border-right: 1px dashed var(--line2); }
.doll-row { display: flex; gap: 6px; }
.doll-slot { width: 78px; height: 78px; border: 1px solid var(--line2); border-radius: 8px; background: #14100d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.doll-slot.blank { border: none; background: transparent; }
.doll-slot.filled { border-color: var(--bronze-dim); background: radial-gradient(circle at 50% 30%, #2b2118, #14100d); }
.doll-slot.tool { width: 74px; height: 74px; }
.doll-name { font-size: 10px; font-family: var(--font-head); color: var(--bronze2); }
.doll-slot:not(.filled) .doll-name { color: var(--dim); }
.doll-lvl { font-size: 9.5px; color: var(--text); }

/* ---------- desktop three-panel layout ---------- */
.layout { display: block; }
.panel-left, .panel-right { display: none; }
@media (min-width: 1024px) {
  body { max-width: 1400px; }
  .sticky-head { max-width: 1400px; margin: 0 auto; }
  body.desktop #main-tabs { display: none; }
  .layout { display: grid; grid-template-columns: 320px minmax(420px, 1fr) 420px; gap: 14px; padding: 0 14px 40px; align-items: start; }
  .panel-left, .panel-right { display: block; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; padding-right: 4px; }
  .panel-center { padding: 0; }
  #dock-left .sub { display: block !important; }
  #right-tabs { margin-top: 0; }
  .panel-right .tab, .panel-right .sub { margin-top: 0; }
  main { padding-bottom: 40px; }
}
@media (min-width: 1024px) {
  .res-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
  .res-group { align-items: center; }
}

/* ---------- themed scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: #3a2e24 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #3a2e24; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #5a4632; background-clip: padding-box; }

/* ---------- quests ---------- */
.quest { border-color: var(--bronze-dim); background: linear-gradient(180deg, #2a1f14 0%, #1a1411 100%); }
.quest-head { display: flex; justify-content: space-between; align-items: baseline; }
.quest-label { font-family: var(--font-head); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--bronze); }
.quest-name { font-family: var(--font-head); font-size: 17px; color: var(--bronze2); margin: 2px 0 4px; }
.quest-obj .bar { height: 16px; margin: 8px 0 6px; }
.quest-obj .bar > div { background: linear-gradient(180deg, var(--bronze2), var(--bronze)); }
.quest-foot { display: flex; align-items: center; gap: 10px; }
.quest-foot #quest-hint { flex: 1; }
.quest-foot #quest-hint::before { content: '➜ '; color: var(--bronze); }
.quest.ready { box-shadow: 0 0 14px rgba(232,192,106,.35); }

/* ---------- quest glow ---------- */
@keyframes questpulse { 0%, 100% { box-shadow: 0 0 0 1px var(--bronze2), 0 0 8px rgba(232,192,106,.35); } 50% { box-shadow: 0 0 0 2px var(--bronze2), 0 0 18px rgba(232,192,106,.75); } }
.quest-glow { animation: questpulse 1.6s ease-in-out infinite; border-color: var(--bronze2) !important; position: relative; z-index: 1; }
.dot.quest-glow, .badge.quest-glow { animation: none; }

/* ---------- mini hero strip (shown when the hero screen is off-tab) ---------- */
.mini-hero { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; border-radius: 12px 12px 0 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.6); border-bottom: none; }
body.has-dock { padding-bottom: 150px; }
body.desktop.has-dock { padding-bottom: 0; }
body.desktop.has-dock .panel-center { padding-bottom: 160px; }
.mini-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.mini-row .bar { flex: 1; margin: 0; }
.mini-adv { padding: 4px 10px; font-size: 11px; white-space: nowrap; }
.mini-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mini-title { font-family: var(--font-head); letter-spacing: .06em; font-size: 12px; text-transform: uppercase; color: var(--accent2); }
.mini-bars { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.mini-bars .bar { height: 16px; }
.mini-bars .vs { font-size: 14px; }
.mini-action { height: 10px; }
.bar.kills.mini-action { height: 12px; } .bar.kills.mini-action > span { font-size: 9px; line-height: 11px; }
.mini-loot { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; margin-top: 6px; min-height: 18px; }
.mini-loot .costitem { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 10px; background: #15110e; }
.mini-loot .costitem.fresh { animation: lootflash .6s ease-out; }
.mini-loot-label { align-self: center; margin-right: 2px; letter-spacing: .04em; text-transform: uppercase; font-size: 9px; }
/* one-hit kills: the bar never visibly drops, so slash it */
.bar.killed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #fff 50%, transparent 70%); animation: killslash .4s ease-out forwards; pointer-events: none; }
@keyframes killslash { 0% { transform: translateX(-100%); opacity: .95; } 60% { opacity: .9; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes lootflash { from { background: #3a2c14; } to { background: #15110e; } }

/* ---------- grounds ---------- */
.ground-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.ground-block { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.ground-btn { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 8px 10px; font-size: 12px; font-family: var(--font-head); background: #15110e; text-align: left; min-width: 0; }
.ground-btn .g-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.ground-btn .g-name { overflow-wrap: anywhere; }
.ground-btn.active { border-color: var(--bronze2); background: radial-gradient(circle at 50% 20%, #4a361d, #241b12); color: var(--bronze2); }
.ground-btn .g-stage { font-family: var(--font-body); font-size: 10px; color: var(--dim); }
.quest-obj .qpart { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.quest-obj .qlabel { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); }
.quest-obj .qlabel.done { color: var(--hp2); }
.quest-obj .bar { height: 12px; margin: 0; }
.quest-obj .bar > div { background: linear-gradient(180deg, var(--bronze2), var(--bronze)); }
.quest-obj .bar > span { line-height: 11px; font-size: 10px; }
.quest.goal .quest-label::after { content: ' · next step'; letter-spacing: 0; text-transform: none; color: var(--dim); }

/* ---------- quest checklist ---------- */
.qstep { display: grid; grid-template-columns: 18px 1fr auto; column-gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed #2b2118; font-size: 13px; }
.qstep:first-child { border-top: none; }
.qbox { width: 16px; height: 16px; border: 1px solid var(--line2); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--hp2); background: #0d0a08; }
.qstep.done .qbox { border-color: var(--hp); background: #1c2a1e; }
.qstep.done .qtext { color: var(--dim); text-decoration: line-through; text-decoration-color: #4a3c2c; }
.qstep.current .qtext { color: var(--bronze2); font-weight: 600; }
.qstep.current .qbox { border-color: var(--bronze2); box-shadow: 0 0 6px rgba(232,192,106,.4); }
.qcount { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.qstep .bar { grid-column: 2 / 4; height: 6px; margin: 2px 0 0; }
.qstep .bar > div { background: linear-gradient(180deg, var(--bronze2), var(--bronze)); }

/* ---------- empty slots ---------- */
.ico.ghost { opacity: .22; filter: grayscale(1) brightness(1.6); }
.doll-slot.empty { border-style: dashed; border-color: #2e261e; background: #100d0b; }
.doll-slot.empty .doll-name { color: #5a4e40; }
.ground-btn.locked { opacity: .45; }
.ground-btn.locked .g-stage { color: var(--danger); }

@media (min-width: 1024px) {
  #dock-left .quest { margin-top: 14px; }
  #dock-left .sub-gear-lists { }
}

.doll-slot[data-slot] { cursor: pointer; transition: transform .08s; }
.doll-slot[data-slot]:hover { transform: translateY(-1px); border-color: var(--bronze); }
#slot-holder .row { margin: 0; }

.res.unearned { opacity: .38; filter: grayscale(.8); }
.res.unearned .rrate { color: var(--dim); }
.rrate.zero { color: var(--dim); }

.locked-tab { opacity: .3; filter: grayscale(1); }
.locked-tab::after { content: ' 🔒'; font-size: 10px; }

.pop.loot { color: var(--bronze2); font-family: var(--font-body); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; animation: lootrise 1.1s ease-out forwards; background: rgba(20,14,10,.7); padding: 1px 6px; border-radius: 10px; border: 1px solid rgba(201,151,63,.35); }
@keyframes lootrise { 0% { transform: translate(-50%, -30%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-50%, -160%); opacity: 0; } }

/* ---------- doll: fit + level under box ---------- */
.doll-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.doll-slot { width: 78px; height: 78px; padding: 4px; gap: 1px; overflow: hidden; }
.doll-slot.tool { width: 62px; height: 62px; }
.doll-name { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.doll-tier { font-size: 9px; color: var(--dim); line-height: 1.1; white-space: nowrap; }
.doll-lvl { font-size: 10px; color: var(--bronze2); min-height: 12px; font-family: var(--font-body); }
.doll-row { align-items: flex-start; }

/* ---------- desktop: solid top bar, panels scroll beneath it ---------- */
@media (min-width: 1024px) {
  body { height: 100vh; overflow: hidden; }
  .sticky-head { position: static; max-width: none; background: linear-gradient(180deg, #1a1411, #130f0c); border-bottom: 1px solid var(--line2); padding: 4px 0 8px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
  .layout { height: calc(100vh - var(--headh, 64px)); padding: 12px 14px 0; box-sizing: border-box; }
  .panel-left, .panel-right, .panel-center { position: static; max-height: none; height: 100%; overflow-y: auto; padding-bottom: 30px; }
  .panel-center { padding-right: 4px; }
}
@media (min-width: 1024px) { .sticky-head { margin: 0; width: 100%; align-self: stretch; } }

/* ---------- desktop: compact doll so the quest is always visible ---------- */
@media (min-width: 1024px) {
  .panel-left { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  .panel-left #dock-left { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
  .panel-left .doll-card { flex: 0 0 auto; padding: 10px 10px 8px; margin: 0; }
  .panel-left .doll-card .card-title { font-size: 12px; margin-bottom: 4px; }
  .panel-left .doll { gap: 3px; }
  .panel-left .doll-row { gap: 4px; }
  .panel-left .doll-slot { width: 62px; height: 62px; padding: 3px; }
  .panel-left .doll-slot.tool { width: 52px; height: 52px; }
  .panel-left .doll { gap: 6px; }
  .panel-left .doll-tools { padding-right: 6px; }
    .panel-left .doll-name { font-size: 9px; }
  .panel-left .doll-tier { font-size: 8px; }
  .panel-left .doll-lvl { font-size: 9px; min-height: 10px; }
  .panel-left .doll-row.tools { margin-top: 4px; padding-top: 4px; }
  .panel-left .doll-card p { margin: 4px 0 0 !important; font-size: 10px; }
  .panel-left { overflow-y: auto; }
  .panel-left #dock-left { height: auto; min-height: 100%; }
  .panel-left .quest { flex: 1 1 auto; min-height: 210px; overflow-y: auto; margin: 0; }
  #dock-left .quest { margin-top: 0; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .panel-left .doll-slot { width: 50px; height: 50px; padding: 2px; }
  .panel-left .doll-slot.tool { width: 40px; height: 40px; }
  .panel-left .doll { gap: 3px; } .panel-left .doll-row { gap: 3px; }
  .panel-left .doll-name { font-size: 8px; } .panel-left .doll-tier, .panel-left .doll-lvl { display: none; }
  .panel-left .doll-card p { display: none; }
}

/* ---------- by hand ---------- */
.hand-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.hand-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; font-family: var(--font-head); font-size: 12px; background: radial-gradient(circle at 50% 20%, #2a2119, #17120f); }
.hand-btn .hand-sub { font-family: var(--font-body); font-size: 10px; color: var(--dim); }
.hand-btn:active:not(:disabled) { transform: scale(.96); }
.hand-btn:disabled { opacity: .35; filter: grayscale(.8); }
.hand-btn.locked .hand-sub { color: var(--danger); }
.activity-bar { grid-template-columns: repeat(5, 1fr); }

.version { font-size: 9.5px; color: #5a4e40; letter-spacing: .6px; font-family: var(--font-body); text-align: center; line-height: 1; }

/* ---------- logo ---------- */
.top { position: relative; }
.logo { display: none; }
@media (min-width: 1024px) {
  .logo { display: block; position: absolute; left: 14px; top: 2px; height: 56px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
  .top { min-height: 60px; }
}
@media (max-width: 1023px) {
  .logo { display: block; height: 34px; width: auto; margin: 2px auto 6px; }
}

.brand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (min-width: 1024px) {
  .brand { position: absolute; left: 14px; top: 2px; }
  .logo { position: static; height: 50px; }
  .top { min-height: 64px; }
}
@media (max-width: 1023px) {
  .brand { margin: 2px auto 6px; }
  .logo { margin: 0; }
}

/* ---------- header: logo left, resources fill, settings right ---------- */
.top { display: flex; align-items: center; gap: 12px; padding: 6px 12px; min-height: 0 !important; }
.brand { position: static !important; margin: 0 !important; flex: 0 0 auto; }
.logo { display: block !important; position: static !important; height: 64px !important; width: auto; margin: 0 !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.res-bar { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; gap: 4px 10px !important; }
.res-group { align-items: center; }
.gear-btn { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--dim); background: rgba(255,255,255,.03); border: 1px solid var(--line); box-shadow: none; transition: color .15s, border-color .15s, transform .2s; }
.gear-btn:hover { color: var(--bronze2); border-color: var(--bronze-dim); transform: rotate(30deg); }
@media (min-width: 1024px) { .logo { height: 76px !important; } .top { padding: 6px 16px; } }
@media (max-width: 1023px) { .logo { height: 52px !important; } .res { min-width: 0; padding: 2px 6px 2px 4px; } .res-txt b { font-size: 12px; } .res-name { font-size: 8.5px; } .rrate { font-size: 9px; } .gear-btn { width: 26px; height: 26px; } .gear-btn svg { width: 15px; height: 15px; } }
.brand .gear-btn { margin-top: 2px; }

/* ---------- settings panel: dropdown from the gear ---------- */
.dev { position: fixed; right: 12px; top: calc(var(--headh, 64px) + 6px); bottom: auto; width: 320px; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--headh, 64px) - 20px); overflow-y: auto; padding: 0; border-radius: 12px; background: linear-gradient(180deg, #221b16, #17120f); border: 1px solid var(--line2); box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(201,151,63,.08); font-size: 13px; }
.dev-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-family: var(--font-head); letter-spacing: 2px; text-transform: uppercase; font-size: 12px; color: var(--bronze2); border-bottom: 1px solid var(--line); }
.dev-x { background: transparent; border: none; box-shadow: none; color: var(--dim); font-size: 14px; padding: 2px 6px; }
.dev-x:hover { color: var(--text); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1f1813; cursor: default; }
.set-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--bronze); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.seg button { border: none; border-radius: 0; box-shadow: none; padding: 5px 10px; font-size: 12px; background: transparent; }
.seg button + button { border-left: 1px solid var(--line2); }
.seg button.active { background: #2f2418; color: var(--bronze2); }
.dev textarea { width: calc(100% - 28px); margin: 8px 14px; height: 44px; }
.devtools { border-top: 1px solid var(--line); }
.devtools summary { padding: 10px 14px; cursor: pointer; color: var(--dim); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.devtools[open] summary { color: var(--bronze2); }
.devtools .dev-row { padding: 0 14px; }
.devtools .dev-row:last-of-type { padding-bottom: 8px; }
.credits { padding: 8px 14px 12px; border-top: 1px solid #1f1813; }
@media (max-width: 1023px) { .dev { right: 8px; left: 8px; width: auto; top: 8px; max-height: calc(100vh - 16px); } }

/* ---------- collapsible by-hand row ---------- */
.collapsible { width: 100%; background: transparent; border: none; box-shadow: none; padding: 0; text-align: left; cursor: pointer; }
.collapsible .chev { margin-left: auto; font-size: 12px; color: var(--dim); transition: transform .2s; }
.hand-card.collapsed .chev { transform: rotate(-90deg); }
.hand-card.collapsed .card-title { margin-bottom: 0; }
.hand-card.collapsed .hand-hint { display: none; }
.hand-card.collapsed .hand-bar { grid-template-columns: repeat(4, 1fr); margin: 8px 0 0; gap: 4px; }
.hand-card.collapsed .hand-btn { flex-direction: row; justify-content: center; gap: 6px; padding: 5px 4px; font-size: 11px; }
.hand-card.collapsed .hand-btn .hand-sub { display: none; }
.hand-card.collapsed .hand-btn:disabled span:not(.hand-sub) { display: none; }
.hand-card.collapsed .hand-btn:disabled { padding: 6px 0; }

/* cost names: hidden by default, shown inside the forge popup where there's room */
.cost-name { display: none; margin-left: 3px; font-size: 10px; color: var(--dim); }
#slot-modal .cost-name { display: inline; }

/* ---------- resource chips (mobile-first): wrap freely, no group labels ---------- */
.res-bar { display: flex !important; flex-wrap: wrap; gap: 4px 6px !important; flex: 1 1 auto; min-width: 0; align-content: flex-start; }
.res { display: flex; align-items: center; gap: 5px; background: #17120fcc; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px 3px 5px; font-variant-numeric: tabular-nums; }
.res-txt { display: flex; flex-direction: column; line-height: 1.05; }
.res-txt b { font-size: 13px; }
.res-name { display: block; font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; }
.res-group-label { display: none; }
@media (max-width: 1023px) { .res { padding: 2px 6px 2px 4px; gap: 4px; } .res-txt b { font-size: 12px; } .res-name { font-size: 8.5px; letter-spacing: .5px; } .rrate { font-size: 9px; } }

/* ---------- inventory ---------- */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; }
.inv-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border: 1px solid var(--line2); border-radius: 8px; background: #14100d; cursor: pointer; transition: transform .08s; }
.inv-item:hover { transform: translateY(-1px); }
.inv-item .inv-n { font-size: 11px; font-weight: 600; }
.inv-item .inv-name { font-size: 8.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inv-item.loot-uncommon { border-color: #3f7a52; box-shadow: inset 0 0 0 1px rgba(95,191,122,.25); }
.inv-item.loot-rare { border-color: var(--bronze); box-shadow: inset 0 0 0 1px rgba(232,192,106,.35), 0 0 10px rgba(232,192,106,.12); }
.costitem.loot-uncommon { border-color: #3f7a52; } .costitem.loot-rare { border-color: var(--bronze); color: var(--accent2); }
.pop.loot.loot-uncommon { color: #7fe09a; } .pop.loot.loot-rare { color: var(--accent2); text-shadow: 0 0 8px rgba(232,192,106,.8); } .pop.loot.unique { font-size: 15px; }
.item-head { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 6px; }
.item-sec { text-align: left; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.item-sec .costitem { margin: 2px 2px 0 0; }
.bestiary-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #14100d; margin-top: 6px; }
.bestiary-row .b-name { font-family: var(--font-head); font-size: 13px; }
.bestiary-row .b-sub { font-size: 10.5px; color: var(--dim); }
.bestiary-row.boss .b-name { color: var(--accent2); }
.bestiary-row .b-pool { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }

/* ---------- skill trees (top-down) ---------- */
.disc-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.disc-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; font-family: var(--font-head); background: #15110e; }
.disc-btn .d-lvl { font-size: 10px; color: var(--dim); font-family: var(--font-body); }
.disc-btn.active { border-color: var(--bronze); background: #1f1812; }
.disc-btn .dot { position: static; margin-left: 3px; }
.bar.xp.disc-xp { height: 18px; margin-top: 6px; } .bar.xp.disc-xp > span { font-size: 11px; line-height: 16px; }
.tree { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 8px; }
.tree-row { display: grid; gap: 6px; position: relative; }
.tree-link { height: 14px; display: grid; }
.tree-link > i { display: block; width: 2px; height: 100%; margin: 0 auto; background: var(--line2); }
.tree-link > i.on { background: var(--bronze); }
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 1px solid var(--line2); border-radius: 8px; background: #14100d; text-align: center; min-width: 0; }
.node .n-name { font-family: var(--font-head); font-size: 11px; line-height: 1.1; }
.node .n-rank { font-size: 10px; color: var(--bronze2); }
.node .n-desc { font-size: 9.5px; color: var(--dim); line-height: 1.2; }
.node .n-bar { width: 100%; height: 4px; background: #090706; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.node .n-bar > div { height: 100%; background: linear-gradient(90deg, var(--bronze2), var(--bronze)); }
.node button { margin-top: 4px; padding: 3px 10px; font-size: 11px; }
.node.locked { opacity: .45; filter: grayscale(.6); }
.node.maxed { border-color: var(--bronze-dim); background: radial-gradient(circle at 50% 20%, #2b2118, #14100d); }
.node.capstone { border-color: var(--bronze); background: radial-gradient(circle at 50% 20%, #33261a, #14100d); box-shadow: 0 0 10px rgba(232,192,106,.12); }
.node.capstone .n-name { color: var(--accent2); }
.node.tech .n-name::after { content: ' ⚔'; font-size: 9px; color: var(--dim); }
.node.can { border-color: var(--bronze); }
.node.can button { border-color: var(--bronze); color: var(--accent2); }

/* ---------- collections ---------- */
.crystal-chip { font-size: 11px; color: var(--accent2); margin-top: 2px; }
.lock-ico:empty::after { content: ''; }
.trophy-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.trophy { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; border: 1px solid var(--line2); border-radius: 8px; background: #14100d; text-align: center; }
.trophy .t-head { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--line2); background: #0f0c0a; }
.trophy .t-name { font-family: var(--font-head); font-size: 11px; }
.trophy .t-tier { font-size: 10px; font-weight: 700; }
.trophy .t-sub { font-size: 9.5px; color: var(--dim); }
.trophy.none { opacity: .5; }
.bestiary-row .b-bonus { font-size: 10px; color: var(--hp2); }

.thrall-xp { height: 4px; margin: 2px 0 4px; } .thrall-xp > div { background: linear-gradient(90deg, var(--bronze2), var(--bronze)); }

.plot-actions { display: flex; gap: 6px; align-items: stretch; }
.plot-actions .buy { flex: 1 1 auto; }
.trash { flex: 0 0 auto; width: 34px; padding: 0; display: flex; align-items: center; justify-content: center; color: #b8463a; border: 1px solid #4a2320; background: #1a100e; border-radius: 6px; box-shadow: none; }
.trash:hover { background: #2a1512; border-color: var(--blood); color: #e05a4c; }

.primary.danger { border-color: var(--blood); color: #e05a4c; }
#confirm-modal .btn-row { margin-top: 14px; }
.build-opt .lack { color: var(--blood); font-size: 10px; }

/* sub-tabs docked under the main tabs on mobile */
#subtab-dock:empty { display: none; }
#subtab-dock .subtabs { margin: 0; padding: 4px 8px 6px; }
body.desktop #subtab-dock { display: none; }

/* quest card collapse */
.quest-head { align-items: center; }
.quest-toggle { margin-left: auto; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--dim); box-shadow: none; display: flex; align-items: center; justify-content: center; }
.quest-toggle .chev { transition: transform .15s; }
.quest.collapsed .quest-toggle .chev { transform: rotate(-90deg); }
.quest.collapsed #quest-text, .quest.collapsed #quest-hint, .quest.collapsed #quest-reward { display: none; }
.quest.collapsed .quest-obj .qstep { display: none; }
.quest.collapsed .quest-obj .qstep.current { display: grid; border-top: none; padding-top: 2px; }
.quest.collapsed .quest-obj .qstep.current .bar { display: none; }
.quest.collapsed .quest-obj .qpart { display: none; }
.quest.collapsed .quest-name { margin-bottom: 0; font-size: 15px; }
.quest.collapsed { padding: 8px 12px; }
.quest.collapsed .quest-foot { margin-top: 4px; justify-content: flex-end; }
/* collapsed quest: claim button sits to the right of the info */
.quest.collapsed { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.quest.collapsed .quest-head, .quest.collapsed .quest-name, .quest.collapsed .quest-obj { grid-column: 1; }
.quest.collapsed .quest-foot { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
.quest.collapsed .quest-name { margin: 0; }
.quest.collapsed .quest-head { margin-bottom: 0; }
/* collapse arrow pinned top-right in both states */
.quest { position: relative; }
.quest-toggle { position: absolute; top: 8px; right: 10px; margin: 0; }
.quest.collapsed .quest-toggle { top: 8px; right: 10px; }
.quest.collapsed .quest-foot { margin-right: 32px; }
.quest-head { padding-right: 32px; }

.danger-btn { color: #fff; background: linear-gradient(180deg, #8a2f28, #5e1e19); border: 1px solid #b8463a; padding: 6px 12px; font-family: var(--font-head); letter-spacing: .5px; box-shadow: none; }
.danger-btn:hover { background: linear-gradient(180deg, #a13a31, #6e241e); }
.ad-btn { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.credits b { color: var(--bronze2); }
#confirm-modal { z-index: 60; }

/* forging progress on the forge button */
.buy.forging { position: relative; overflow: hidden; border-color: var(--bronze); color: var(--accent2); opacity: 1 !important; }
.buy.forging::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, rgba(201,151,63,.35), rgba(232,192,106,.55)); transition: width .1s linear; }
.buy.forging > * { position: relative; }
.buy.busy { opacity: .5; }
.pop.craft { color: var(--accent2); font-family: var(--font-head); }

#demo-modal { z-index: 55; }
.demo-box { max-width: 400px; text-align: left; }
.demo-box .quest-label { display: block; }
.demo-box .big { width: 100%; }

/* no horizontal scroll, ever; main tabs share the width evenly */
html, body { max-width: 100%; overflow-x: hidden; }
.sticky-head, .layout, .top { max-width: 100vw; box-sizing: border-box; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 8px 0; }
.tabs button { min-width: 0; padding: 10px 2px; font-size: 12px; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .tabs button { font-size: 11px; letter-spacing: .3px; } }
.subtabs { flex-wrap: nowrap; } .subtabs button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-bar { max-width: 100%; }
.maxbtn { border-color: var(--bronze-dim); }
.maxbtn .cost { font-size: 10px; color: var(--bronze2); }

/* v0.3 caps */
.res .capn { font-size: .72em; color: var(--dim); font-weight: 400; margin-left: 1px; }
.res.full { border-color: #b8862b; background: #2a1e0c; }
.res.full .capn { color: #e0a13a; }

/* ---------- v0.3 kingdom lines ---------- */
.kbar { margin: 4px 0 8px; }
.seg.kbuy button { padding: 4px 10px; font-size: 12px; }
.seg.kbuy button.active { background: #2d2218; color: var(--accent2); }
.kstep { display: flex; flex-direction: column; gap: 8px; }
.kstep-head { display: flex; align-items: center; gap: 8px; }
.kstep-name { font-family: var(--font-head); font-size: 14px; }
.kout { margin-left: auto; text-align: right; }
.kout b { font-size: 15px; }
.kin { display: flex; align-items: center; gap: 8px; } .kin .bar { flex: 1; margin: 0; height: 12px; }
.green-bar > div { background: linear-gradient(90deg, #2f7a46, var(--hp)); }
.purple-bar > div { background: linear-gradient(90deg, #6b55b0, var(--shard)); }
.ktracks { display: flex; flex-direction: column; gap: 6px; }
.ktrack { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #15110e; }
.ktrack .ktl { font-weight: 600; font-size: 13px; }
.ktrack.bottleneck { border-color: #e0a13a; background: #1f170d; }
.kflag { color: #e0a13a; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.kcart { height: 12px; margin: 0; } .kcart > span { font-size: 9.5px; line-height: 11px; }
.kstaff { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px dashed var(--line2); border-radius: 8px; }
.kslot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kslot select { font-size: 12px; background: #1d1612; color: var(--text); border: 1px solid var(--line2); border-radius: 6px; padding: 4px 6px; max-width: 100%; }
.kchip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border: 1px solid var(--line2); border-radius: 10px; background: #1b1511; }
.kx { padding: 0 5px; border: 0; background: transparent; color: var(--dim); box-shadow: none; font-size: 13px; line-height: 1; }
.small-btn { padding: 4px 8px; font-size: 11px; margin-left: auto; }
.stars { color: var(--accent2); letter-spacing: 1px; font-size: 11px; }
.warn { color: #e0a13a; }
.good { color: var(--hp2); }
.kflow { text-align: center; color: var(--bronze-dim); font-size: 11px; margin: -2px 0 6px; }
.locked-step { border-style: dashed; opacity: .65; }
.locked-step .kstep-name { color: var(--dim); }
.korder { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #15110e; }
.kob { height: 12px; margin: 0; } .kob > span { font-size: 9.5px; line-height: 11px; }
.store-list { display: flex; flex-direction: column; gap: 3px; }
#kingdom-subtabs button { font-size: 11px; padding: 7px 1px; }

.kswap { min-width: 40px; padding: 6px 8px; font-size: 16px; }
#market-mode { display: flex; margin-top: 8px; }
#market-mode button { flex: 1; padding: 8px; font-size: 14px; }
.subtabs2 { flex-direction: column; }
.subtabs2 .subrow { display: flex; gap: 4px; }
.subtabs2 .subrow.hidden { display: none; }
.pick-box { max-width: 400px; text-align: left; }
.pick-box .card-title { text-align: center; }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; margin: 0; }
.pick-row .row-main { flex: 1; min-width: 0; }
.pick-row .tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line2); white-space: nowrap; }
.pick-row .tag.idle { color: #8fd18f; border-color: #3d6b3d; }
.kslot .kpick { padding: 6px 10px; font-size: 13px; }
.pt-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pt-row { display: flex; gap: 10px; align-items: flex-start; }
.pt-num { min-width: 34px; text-align: center; font-size: 20px; color: var(--bronze2); border: 1px solid var(--line2); border-radius: 6px; padding: 2px 4px; }
.pt-num.gold { color: #f3c64d; }
.node { cursor: default; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .08s, border-color .15s; }
.node button { pointer-events: none; }
.node.can { cursor: pointer; border-color: var(--bronze2); }
.node.can:active { transform: scale(.97); background: #1f1812; }
.node .n-act { margin-top: 4px; font-size: 10px; font-weight: 400; color: var(--dim); opacity: .7; min-height: 16px; letter-spacing: .02em; }
.node.can .n-act { color: var(--bronze2); font-size: 15px; font-weight: 700; opacity: 1; }
.node.maxed .n-act { color: #8fd18f; font-size: 11px; opacity: 1; }
.node.can { background: linear-gradient(180deg, #221a13, #16110d); box-shadow: 0 0 0 1px var(--bronze-dim) inset; }
.kcycle { display: flex; gap: 2px; height: 20px; margin-top: 8px; border-radius: 6px; overflow: hidden; background: #090706; }
.kseg { position: relative; flex: 1 1 0; min-width: 34px; background: #1a1410; overflow: hidden; }
.kseg .kfill { position: absolute; inset: 0 auto 0 0; width: 0; }
.kseg0 .kfill { background: linear-gradient(90deg, #3f7a3a, #5fae55); }
.kseg1 .kfill { background: linear-gradient(90deg, #8a6a2c, #d4a64a); }
.kseg2 .kfill { background: linear-gradient(90deg, #3b5f8a, #5f93cf); }
.kseg > span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 20px; font-weight: 700; color: #f1e6d2; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.kseg.on { box-shadow: inset 0 0 0 1px var(--bronze2); }
.kcyc-lab { margin-top: 4px; text-align: center; }
.kx.big-x { font-size: 22px; padding: 4px 10px; color: #b85a4a; }
.settle-list { display: flex; flex-direction: column; gap: 5px; }
.kbuild .buy.wide { width: 100%; margin-top: 8px; }

.head-btns { display: flex; gap: 6px; align-items: center; }
.avatar-btn { position: relative; width: 34px; height: 34px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; overflow: visible; }
.avatar-img { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--dim); background: #1b1511; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.avatar-img.big { width: 40px; height: 40px; }
.avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #130f0c; }
.avatar-dot.ok { background: #5fae55; } .avatar-dot.busy { background: #d4a64a; } .avatar-dot.bad { background: #c0533f; } .avatar-dot.off { background: #777; }
.cloud-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--line2); border-radius: 8px; background: #16110d; }
.gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 20px; font: 500 14px Roboto, Arial, sans-serif; text-transform: none; letter-spacing: 0; box-shadow: none; }
.gsi-btn:disabled { opacity: .55; }
.cloud-user { display: flex; gap: 10px; align-items: center; }
.link-btn { background: none; border: 0; box-shadow: none; color: #b85a4a; padding: 0; text-decoration: underline; align-self: flex-start; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; text-align: left; }
.cs-card { border: 1px solid var(--line2); border-radius: 8px; padding: 8px; }
.cs-card.pick { border-color: var(--bronze2); box-shadow: 0 0 0 1px var(--bronze2) inset; }
.cs-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.cs-place { font-family: var(--font-head); font-size: 16px; color: var(--bronze2); }
#cloud-modal { z-index: 58; }
.cloud-user .avatar-img img, .avatar-btn .avatar-img img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; }
.whatsnew { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 14px; }

/* Enemy / ground art behind the fight card and the bottom fight bar */
.arena, .mini-hero { isolation: isolate; overflow: hidden; }
.arena { position: relative; }
.ground-art { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; opacity: 0; transition: opacity .4s; pointer-events: none; }
.ground-art.on { opacity: .22; }
.ground-art.on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,14,11,.55), rgba(18,14,11,.2) 40%, rgba(18,14,11,.7)); }
.enemy-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 60%); mask-image: linear-gradient(to right, transparent 30%, #000 60%); }
.enemy-art img { position: absolute; opacity: 0; transition: opacity .35s; max-width: none; }
.enemy-art img.on { opacity: .42; }
.mini-hero .ground-art.on { opacity: .18; }
.mini-hero .enemy-art img.on { opacity: .34; }

/* Painted icons: same box as the sprite icons, image drawn ~20% larger so it reads better without moving the layout */
.ico.ico-img { background: none; position: relative; overflow: visible; image-rendering: auto; }
.ico.ico-img img { position: absolute; width: 120%; height: 120%; left: -10%; top: -10%; max-width: none; pointer-events: none; }
.ico.bare { opacity: .75; }
.ico.ghost.ico-img { filter: grayscale(1) brightness(1.3); opacity: .3; }

/* ---------- Building crew (0.6.9): worker slot tiles + aligned role rows ---------- */
.kcrew { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.kcrew-head { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--bronze-dim); padding: 0 2px; }
.kcrew-head b { color: var(--bronze2); letter-spacing: .5px; }
.kslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kslot-t { position: relative; min-height: 78px; border: 1px solid var(--line2); background: #15110e; border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; box-shadow: none; min-width: 0; }
.kslot-t .kav { width: 34px; height: 34px; border-radius: 50%; background: #3a2c1f; border: 2px solid var(--bronze); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--bronze2); }
.kslot-n { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kslot-l { font-size: 11px; color: var(--dim); }
.kslot-x { position: absolute; top: 2px; right: 2px; padding: 2px 7px; border: 0; background: transparent; box-shadow: none; color: var(--dim); font-size: 15px; line-height: 1; }
.kslot-t.empty { border-style: dashed; border-color: #6b4e2a; color: var(--bronze); background: rgba(201,151,63,.05); cursor: pointer; }
.kslot-t.empty:hover { background: rgba(201,151,63,.12); }
.kslot-plus { font-size: 22px; line-height: 1; }
.kslot-a { font-size: 11.5px; }
.kslot-t.locked { border-style: dashed; border-color: var(--line); color: #5d5245; background: transparent; }
.kcrew-warn { font-size: 12px; color: #e0a458; text-align: center; }
.krole { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #15110e; }
.krole-ic { width: 34px; height: 34px; border-radius: 50%; background: #2a2119; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.krole-txt { min-width: 0; }
.krole-k { font-size: 10.5px; letter-spacing: 1.2px; color: var(--dim); text-transform: uppercase; }
.krole-v { font-weight: 600; }
.krole-e { font-size: 12px; color: var(--hp2); }
.krole .buy { padding: 6px 12px; font-size: 13px; min-width: 76px; }
.kshift { width: 100%; padding: 7px; font-size: 13px; }
.krole-e.dim { color: var(--dim); }
/* Stock target row (0.7.0) */
.kstock { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #15110e; display: flex; flex-direction: column; gap: 6px; }
.kstock-head { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); }
.kstock-n { color: var(--bronze2); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.kstock-seg { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
.kstock-seg button { padding: 6px 0; font-size: 13px; border: 0; border-radius: 0; box-shadow: none; border-left: 1px solid var(--line2); }
.kstock-seg button:first-child { border-left: 0; }
.kstock-why { font-size: 12px; line-height: 1.3; }
.kstock-fill { color: #e0a458; }
/* Stats summary (0.7.1) */
.stat-list { display: flex; flex-direction: column; gap: 6px; }
.stat-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 2px; }
.stat-top > div { display: flex; flex-direction: column; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #15110e; }
.stat-top b { font-size: 18px; color: var(--bronze2); font-variant-numeric: tabular-nums; }
.stat-row { display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "ic main v" "ic tip tip"; column-gap: 10px; row-gap: 2px; align-items: center; text-align: left; width: 100%; padding: 8px 10px; background: #15110e; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.stat-row:hover { border-color: var(--line2); }
.stat-row.best { border-color: var(--bronze); background: #1f1810; }
.stat-ic { grid-area: ic; display: flex; align-items: center; justify-content: center; }
.stat-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.stat-k { font-weight: 600; font-size: 14px; }
.stat-src { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-v { grid-area: v; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
.stat-tip { grid-area: tip; font-size: 12px; color: var(--hp2); }
.stat-tip.dim { color: var(--dim); }
.stat-best { color: #1a1208; background: var(--bronze2); border-radius: 8px; padding: 0 6px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; margin-right: 4px; }
.stat-ready { color: var(--bronze2); font-size: 11px; border: 1px solid var(--bronze-dim); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
@media (min-width: 1024px) { .panel-left .stat-card { padding: 10px; margin: 0; flex: 0 0 auto; } .panel-left .stat-row { padding: 6px 8px; } }
/* Phase 3 war chest chips (0.8.0) */
.res.war-chip { border-color: var(--bronze-dim); cursor: pointer; }
.city-miss { margin-top: 6px; padding: 6px 8px; border: 1px dashed var(--line2); border-radius: 6px; color: var(--dim); display: flex; flex-direction: column; gap: 2px; } .city-miss b { color: var(--text); }

/* ===================== 0.9 ===================== */
.klevel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 8px 0 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #15110e; }
.klv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.klv-top b { font-size: 15px; }
.klv-bar { height: 8px; margin: 0; }
.klevel .buy { min-width: 110px; }
.kstep.slowest { border-color: #b8864a; }
.kslow { font-size: 12px; color: #e0a458; margin-top: 6px; }
.gold-bar > div { background: linear-gradient(90deg, #8a6a33, #e8c06a) !important; }
.threat { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.threat.todo b { color: #e0a458; }
/* army */
.army-top { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 6px 0 8px; }
.army-big b { font-size: 30px; font-variant-numeric: tabular-nums; }
.army-mult { display: flex; flex-direction: column; align-items: flex-end; }
.army-mult b { font-size: 24px; color: var(--bronze2); }
.tag.good-tag { background: #1d2c21; color: var(--hp2); border: 1px solid #2f4a36; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.tag.warn-tag { background: rgba(224,164,88,.15); color: #e0a458; border: 1px solid #6b4e2a; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.upkeep { display: flex; flex-direction: column; gap: 3px; }
.uk-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; font-size: 13px; }
.uk-row span:last-child { font-variant-numeric: tabular-nums; }
.uk-row .good { color: var(--hp2); } .uk-row .warn { color: #e0a458; }
/* lands */
.land-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #15110e; }
.land-row.full { border-color: #2f4a36; background: #131a14; }
.land-row.full .lr-name { color: var(--hp2); }
.land-row.front { border-color: var(--bronze); background: #1f1810; }
.lr-name { font-family: var(--font-head); font-size: 14px; }
.lr-coffer { display: flex; flex-direction: column; align-items: flex-end; }
.lr-coffer b { color: var(--bronze2); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.lr-gar { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.lr-btns { display: flex; gap: 4px; } .lr-btns .buy { padding: 4px 9px; font-size: 12px; }
#tax-collect { display: flex; align-items: center; gap: 4px; font-weight: 700; }
/* hero screen */
.army-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.35); }
.conquest { margin-top: 8px; }
.cq-bar { margin: 3px 0 2px; } .cq-bar > div { background: linear-gradient(90deg, #8a6a33, #e8c06a) !important; }
.cq-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); }
.btn-row .rally-btn { border-color: var(--bronze); color: var(--bronze2); background: #2f2418; font-weight: 700; }
.rally-btn.pop { animation: rallypop .25s ease-out; }
@keyframes rallypop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.ground-btn.land-done { border-color: #2f4a36; }
/* legacy */
.perk-tree-head { margin: 12px 2px 6px; font-family: var(--font-head); color: var(--bronze2); letter-spacing: 1px; }
.perk-tree-head .dim { font-family: var(--font-body); letter-spacing: 0; }
.vault { display: flex; flex-wrap: wrap; gap: 5px; }
.vault-crown { font-size: 12px; padding: 2px 8px; border: 1px solid var(--bronze-dim); border-radius: 10px; background: #1f1810; }
.hall.locked-step { opacity: .6; }
/* 0.9.2: top-tab "!" badge sits inside the tab (tabs clip overflow) */
.tabs button .badge { top: 3px; right: 3px; width: 13px; height: 13px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; box-shadow: 0 0 0 2px #1a1411; letter-spacing: 0; text-transform: none; }
.tabs button .badge.hidden { display: none; }

/* 0.9.4 — gear/tool pop-up: info on top, buttons full width underneath */
#slot-holder .gear-row { display: grid; grid-template-columns: 40px 1fr; gap: 8px 10px; align-items: center; }
#slot-holder .gear-row .row-main { min-width: 0; }
#slot-holder .gear-row .btn-col { grid-column: 1 / -1; display: flex; flex-wrap: wrap; flex-direction: row; gap: 6px; }
#slot-holder .gear-row .btn-col .buy { min-width: 0; flex: 1 1 40%; }
#slot-holder .gear-row .btn-col .buy.shard { flex-basis: 100%; }
#slot-holder .gear-row .cost { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }

/* 0.9.5 — Skills: Techniques · Paths · Gathering */
.skill-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
.skill-seg button { position: relative; padding: 9px 0; font-size: 13px; border: 1px solid var(--line2, #5a4632); border-radius: 8px; background: #1b1511; color: var(--dim); }
.skill-seg button.active { border-color: var(--bronze); color: var(--bronze2); background: #2f2418; }
.skill-seg .dot { position: absolute; top: 5px; right: 6px; }
.path-pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.path-pts div { border: 1px solid #3a2e24; border-radius: 8px; background: #15110e; padding: 6px 4px; text-align: center; }
.path-pts b { display: block; font-size: 18px; color: var(--bronze2); font-variant-numeric: tabular-nums; }
.path-pts span { font-size: 11px; color: var(--dim); }
.path-heads { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: 4px 0 0; }
.path-heads b { display: block; font-family: var(--font-head, Georgia, serif); letter-spacing: 1px; font-size: 13px; text-transform: uppercase; }
.path-heads span { font-size: 10.5px; color: var(--dim); }
.path-web-wrap { max-width: 420px; margin: 0 auto; }
#path-web { display: block; width: 100%; height: auto; user-select: none; -webkit-tap-highlight-color: transparent; }
#path-web .pnode { cursor: pointer; outline: none; }
#path-web .pnode.quest-glow { filter: drop-shadow(0 0 6px #e8c06a) drop-shadow(0 0 10px #e8c06a); }
.path-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 11px; color: var(--dim); margin: 2px 0 8px; }
.path-legend span { display: inline-flex; align-items: center; gap: 4px; }
.path-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #4a3a2a; background: #15110e; }
.path-legend .lg.taken { background: var(--bronze2); border-color: var(--bronze2); }
.path-legend .lg.can { border-color: var(--bronze2); }
.path-legend .lg.notable { width: 13px; height: 13px; border-width: 3px; border-color: var(--bronze); }
.path-legend .lg.key { border-radius: 2px; transform: rotate(45deg); border-color: var(--bronze); }
.path-pop { border-color: var(--bronze); background: #1f1810; }
.path-pop .pp-name { font-family: var(--font-head, Georgia, serif); font-size: 16px; }
.path-pop .pp-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--line2, #5a4632); border-radius: 6px; padding: 1px 6px; color: var(--dim); }
.path-pop > div { margin-top: 3px; }
.path-pop .pp-bar { height: 16px; margin: 6px 0 4px; }
.path-pop .pp-bar > div { background: linear-gradient(90deg, #8a6a33, #e8c06a); }
.pp-btns { display: flex; gap: 6px; margin-top: 8px; }
.pp-btns .buy { flex: 1; min-width: 0; }
.loadout { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; }
.lslot { position: relative; min-height: 76px; border: 1px solid var(--bronze-dim, #8a6a33); border-radius: 10px; background: #15110e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; overflow: hidden; }
.lslot .ls-n { font-size: 11px; font-weight: 600; line-height: 1.15; }
.lslot .ls-l { font-size: 10px; }
.lslot .ls-cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.55) 0 var(--p, 0%), transparent var(--p, 0%)); pointer-events: none; }
.lslot.empty { border-style: dashed; color: var(--dim); }
.lslot.lock { border-style: dashed; border-color: #3a2e24; color: #6d6150; }
.lslot.hidden { display: none; }
.tcard { border: 1px solid #3a2e24; border-radius: 10px; background: #15110e; padding: 9px 10px; margin-bottom: 8px; }
.tcard.eq { border-color: var(--bronze-dim, #8a6a33); }
.tcard.locked { opacity: .6; }
.tc-top { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; }
.tc-ic { width: 38px; height: 38px; border-radius: 9px; background: #2a2119; border: 1px solid #5a4632; display: flex; align-items: center; justify-content: center; }
.tc-main { min-width: 0; }
.tc-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tc-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #5a4632; border-radius: 6px; padding: 1px 6px; color: var(--dim); white-space: nowrap; }
.tc-tag.on { border-color: var(--bronze); color: var(--bronze2); }
.tc-lv { color: var(--bronze2); font-size: 13px; white-space: nowrap; }
.tc-unl { color: #e0a458; margin-top: 6px; }
.tc-unl:empty { display: none; }
.tc-mrow { margin-top: 7px; }
.tc-bar { height: 8px; margin: 3px 0 0; }
.tc-bar > div { background: linear-gradient(90deg, #3f8c55, #5bb46f); }
.tc-mods { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.tc-tier { display: grid; grid-template-columns: 42px 1fr 1fr; gap: 5px; align-items: stretch; }
.tc-tlv { font-size: 11px; color: var(--dim); display: flex; align-items: center; }
.tc-tier .mod { font-size: 11px; padding: 4px 6px; border-radius: 8px; border: 1px solid #3a2e24; background: #120e0b; color: var(--dim); text-align: left; line-height: 1.25; min-width: 0; }
.tc-tier .mod b { color: inherit; display: block; font-size: 11.5px; }
.tc-tier .mod span { font-size: 10.5px; }
.tc-tier .mod:disabled { opacity: .55; }
.tc-tier .mod.pick { border-color: var(--bronze); color: var(--bronze2); background: #2a2014; }
.tc-tier .mod.choose { border-color: #6b9b5f; color: #7fd28f; background: #16241a; }
.tc-act { display: flex; justify-content: flex-end; margin-top: 8px; }
.tc-act .buy { min-width: 110px; }

.harvest-full { margin-top: 6px; padding: 6px 8px; border: 1px solid #7a5a2a; border-radius: 8px; background: #241a10; color: #e0a458; }

/* 0.9.10 — auto-advance and retreat */
.adv-row { gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.auto-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); cursor: pointer; user-select: none; }
.auto-toggle input { accent-color: #c9973f; width: 16px; height: 16px; margin: 0; }
.retreat-note { position: relative; margin-top: 8px; padding: 8px 30px 8px 10px; border: 1px solid #8a4a2a; border-radius: 8px; background: #2a150e; color: #f0b27a; font-size: 13px; line-height: 1.35; }
.retreat-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: #f0b27a; font-size: 18px; line-height: 1; }

/* 0.9.11 — auto-advance bar, Rally label */
.auto-row { margin-top: 4px; }
.bar.autoadv { height: 16px; }
.bar.autoadv > div { background: linear-gradient(90deg, #4f7a2e, #9cc45a); transition: width .3s; }
.bar.autoadv.paused > div { background: linear-gradient(90deg, #7a5a1e, #d19a3c); }
.bar.autoadv.off > span { color: var(--dim); }
.auto-why { margin: 4px 2px 0; color: #e0a458; line-height: 1.35; }
.rally-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.rally-sub { display: block; white-space: nowrap; font-family: var(--font-body, system-ui, sans-serif); font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--dim); margin-top: 2px; font-weight: 500; }

/* 0.10.0 — war economy */
.inc-chip { display: flex; align-items: center; gap: 5px; padding: 3px 7px; }
.inc-chip .inc-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 70px; }
.inc-chip .res-name { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.inc-chip .inc-nums { display: flex; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.inc-chip .inc-nums b { color: #7fd28f; } .inc-chip .inc-nums span { color: var(--dim); }
.inc-chip .inc-meter { display: block; height: 3px; background: #090706; border-radius: 2px; margin-top: 2px; overflow: hidden; }
.inc-chip .inc-meter i { display: block; height: 100%; background: #7fd28f; }
.inc-chip.stall { border-color: #e06a4f; background: #1f130f; } .inc-chip.stall .inc-nums b { color: #e06a4f; } .inc-chip.stall .inc-meter i { background: #e06a4f; }
.army-head { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--bronze-dim, #8a6a33); border-radius: 8px; background: #15110e; }
.army-head b#army-n { font-size: 18px; } .army-eff { margin-left: auto; font-size: 15px; } .army-eff.bad { color: #e06a4f; } .army-eff.good { color: #7fd28f; }
.pipe { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; margin-top: 4px; }
.pj { display: flex; align-items: center; justify-content: center; color: var(--bronze, #c9973f); font-size: 12px; }
.pst { border: 1px solid #5a4632; border-radius: 9px; background: #15110e; padding: 6px 4px; text-align: center; }
.pst .pn { font-size: 11.5px; font-weight: 700; } .pst .ps { font-size: 10px; color: var(--dim); } .pst .pp { font-size: 18px; font-weight: 800; color: #7fd28f; font-variant-numeric: tabular-nums; }
.pst.stall { border-color: #e06a4f; background: #22130e; } .pst.stall .pp { color: #e06a4f; }
.pst.lim { border-color: #c9973f; } .pst.lim .pp { color: var(--bronze2, #e8c06a); }
.wf { margin-top: 8px; }
.wbar { position: relative; height: 14px; margin-top: 3px; background: #090706; border: 1px solid #2a211b; border-radius: 5px; }
.wbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.wbar i.w-housing { background: linear-gradient(90deg, #6a4a2a, #b98552); } .wbar i.w-arms { background: linear-gradient(90deg, #4a5566, #9aa6b8); } .wbar i.w-food { background: linear-gradient(90deg, #3f8c55, #5bb46f); }
.wbar i.stall { background: linear-gradient(90deg, #8a2a22, #e06a4f); }
.wbar .wdem { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 0 1px #000; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--dim); margin-top: 6px; }
.flow-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.flow-legend .lg-in { background: #b98552; } .flow-legend .lg-dem { width: 2px; background: #fff; }
.war-tip { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--bronze, #c9973f); border-radius: 9px; background: #1f1810; font-size: 12.5px; line-height: 1.35; }
.war-tip.stall { border-color: #e06a4f; background: #22130e; }
.need-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.need { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #5a4632; border-radius: 8px; padding: 4px 6px; font-size: 12px; background: #15110e; white-space: nowrap; }
.need.lim { border-color: #e06a4f; color: #e06a4f; }
.feed-banner { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #5a4632; border-radius: 10px; background: #1a1411; margin-bottom: 8px; }
.feed-banner .fh { font-family: var(--font-head, Georgia, serif); font-size: 14px; letter-spacing: .5px; }
.feed-banner.lim, .feed-banner.stall { border-color: #e06a4f; background: linear-gradient(180deg, #2a1510, #1c110d); }
.kl-sub { display: block; font-size: 9.5px; color: var(--dim); line-height: 1.1; margin-top: 1px; } .kl-sub.bad { color: #e06a4f; }
.army-line.stall { border-color: #e06a4f; }
.demand-note { position: relative; margin-top: 8px; padding: 8px 30px 8px 10px; border: 1px solid #e0a458; border-radius: 8px; background: #221a0e; font-size: 12.5px; line-height: 1.4; }
.demand-note .dh { font-family: var(--font-head, Georgia, serif); color: #e0a458; }
.bar.autoadv.endless > div { background: linear-gradient(90deg, #8a6a33, #e8c06a); }

/* 0.10.2 — casualties */
#army-flow { display: flex; gap: 6px; margin-top: 6px; }
#army-flow.hidden { display: none; }
.fchip { flex: 1; border-radius: 7px; padding: 4px 6px; text-align: center; font-size: 11px; line-height: 1.25; border: 1px solid #3a2e24; }
.fchip b { display: block; font-size: 13.5px; }
.fchip.loss { border-color: #8a3a2a; background: #1f130f; color: #f0a58a; } .fchip.loss b { color: #e06a4f; }
.fchip.rec { border-color: #3f6a47; background: #121c14; color: #a9d8b0; } .fchip.rec b { color: #7fd28f; }
.fchip.stock { border-color: #5a4632; background: #17120c; color: var(--dim); } .fchip.stock b { color: var(--bronze2, #e8c06a); }
.strain { margin-top: 8px; border: 1px solid #e0a458; border-radius: 10px; background: #221a0e; padding: 9px 11px; }
.strain .h { font-family: var(--font-head, Georgia, serif); color: #e0a458; font-size: 13.5px; letter-spacing: .5px; }
.gauge2 { height: 14px; background: #090706; border: 1px solid #2a211b; border-radius: 5px; position: relative; margin-top: 6px; }
.gauge2 .now { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6a33, #e8c06a); border-radius: 4px; }
.gauge2 .eq { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #e06a4f; box-shadow: 0 0 0 1px #000; }
.gauge2 .fl { position: absolute; top: -4px; bottom: -4px; width: 1px; background: #777; }
.glab { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-top: 4px; gap: 6px; }
.opts { display: grid; gap: 5px; margin-top: 8px; }
.opt { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; border: 1px solid #5a4632; border-radius: 8px; background: #15110e; padding: 5px 8px; font-size: 11.5px; line-height: 1.3; }
.opt .ic { font-size: 16px; text-align: center; }
.lrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px dashed #3a2e24; }
.lrow:last-child { border-bottom: none; } .lrow .v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrow .d { grid-column: 1 / -1; font-size: 11px; color: var(--dim); }
.lrow .v.bad { color: #e06a4f; } .lrow .v.good { color: #7fd28f; }

/* 0.10.5: celebration banner for the big moments */
.celebrate { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 72px); transform: translateX(-50%); z-index: 60; display: flex; gap: 12px; align-items: center; width: min(92vw, 420px); padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(180deg, #3a2a12, #22180b); border: 1px solid #e8c06a; box-shadow: 0 0 0 1px #0008, 0 8px 30px #000a, 0 0 28px #e8c06a55; cursor: pointer; }
.celebrate.small { width: auto; max-width: 92vw; padding: 8px 14px; border-color: #b8944f; box-shadow: 0 6px 18px #0009; }
.celebrate.show { animation: cbIn .45s cubic-bezier(.2,1.4,.4,1) both; }
.celebrate.out { animation: cbOut .35s ease-in forwards; }
.celebrate .cb-ico { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 8px #e8c06aaa); }
.celebrate.small .cb-ico { font-size: 22px; }
.celebrate .cb-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #e8c06a; }
.celebrate .cb-title { font-family: var(--font-head); font-size: 20px; color: #fff3d6; text-wrap: balance; }
.celebrate.small .cb-title { font-size: 15px; }
.celebrate .cb-sub { font-size: 12px; color: #d9c9a3; }
.celebrate.small .cb-sub { font-size: 11px; }
@keyframes cbIn { from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.85); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes cbOut { to { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.95); } }
.pop.lvl { color: #9fe28a; font-size: 16px; }
.req-src { color: var(--dim); font-size: 11px; font-weight: 400; cursor: pointer; text-decoration: underline dotted; }
.lr-farm { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; margin-top: 6px; border-top: 1px dashed #4a3a2a; font-size: 12px; flex-wrap: wrap; }
.pts-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 10px; }
.pts-btn:hover, .pts-btn:focus-visible { outline: 1px solid var(--bronze2); }
.pts-btn span { text-decoration: underline dotted; }
.star-head { margin: 12px 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze2); }
.star-row { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.path-pts .pts-btn { border: 1px solid #3a2e24; background: #15110e; padding: 6px 4px; }
.wonder-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #15110e; }
.wonder-row.done { border-color: #2f4a36; background: #131a14; }
.wonder-row.locked { opacity: .6; }
.wbar-w { height: 8px; }
.wbar-w > div { height: 100%; background: linear-gradient(90deg, #8a6a33, #e8c06a); border-radius: inherit; }

/* ============ 0.12 Production: three chains feed the Barracks ============ */
.prod-heads, .prod-row, .prod-arrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prod-heads { margin: 6px 0 4px; text-align: center; font-family: var(--font-head); font-size: 11px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase; }
.prod-arrows { text-align: center; color: var(--bronze-dim); font-size: 12px; line-height: 14px; margin: 2px 0; }
.bk-arrows { font-size: 11px; margin-top: 4px; }
.pcard { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 4px 5px 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcard.slowest { border-color: var(--bronze); box-shadow: 0 0 0 1px #c9973f55, 0 0 14px #c9973f33; }
.pcard .part-art { width: 100%; height: 66px; object-fit: contain; margin-top: 12px; cursor: pointer; }
.pcard .dimart { opacity: .75; }
.pcard .lockart { filter: grayscale(1); opacity: .35; }
.pcard.plock { opacity: .85; }
.pcard .ptag { position: absolute; top: 4px; left: 4px; font-size: 9.5px; background: #0d0a08cc; border: 1px solid var(--line); border-radius: 8px; padding: 0 5px; color: var(--bronze2); }
.pcard .pslow { position: absolute; top: 4px; right: 4px; font-size: 9.5px; color: var(--bronze2); background: #2a1d0acc; border: 1px solid var(--bronze-dim); border-radius: 8px; padding: 0 5px; }
.pname { font-family: var(--font-head); font-size: 13px; line-height: 1.15; }
.pname.pname-lg { font-size: 18px; }
.pdesc { font-size: 10.5px; color: var(--dim); line-height: 1.25; }
.prate { font-size: 12px; font-weight: 700; }
.prate small { color: var(--dim); font-weight: 400; font-size: 10px; }
.pparts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.pparts .pbtn { min-width: 0; padding: 3px 1px; font-size: 9px; }
.pparts .pbtn .tiny { font-size: 8.5px; letter-spacing: .3px; text-transform: none; }
.pparts .pbtn .cost .costitem { font-size: 10px; }
.pparts .pbtn .cost .ico { display: none; }
.pbtn.hot:not(:disabled) { border-color: var(--bronze2); box-shadow: 0 0 10px #e8c06a55; }
.penter { font-size: 11px; padding: 3px; color: var(--bronze2); background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.pcard .buy.wide { min-width: 0; padding: 4px 2px; }
.prod-town { padding: 8px 10px; }
.town-row { display: flex; gap: 10px; align-items: center; }
.town-row > img { width: 64px; height: 52px; object-fit: contain; }
.town-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.town-n { font-size: 13px; }
.town-bar { height: 16px; }
.town-bar > div { background: linear-gradient(90deg, #3f7e9e, #7fc2d2); }
.bk-card { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.bk-top { display: flex; align-items: center; gap: 10px; }
.bk-top > img { width: 118px; height: 54px; object-fit: contain; }
.bk-top > div:nth-child(2) { flex: 1; min-width: 0; }
.bk-sol { display: flex; flex-direction: column; align-items: flex-end; }
.bk-sol b { font-family: var(--font-head); font-size: 22px; color: var(--text); line-height: 1; }
.bk-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.bk-row .cost-name { display: none; }
.bk-rec .bar { margin-top: 3px; }
/* building interior */
.back-btn { font-size: 12px; padding: 4px 10px; margin-bottom: 6px; }
.bld-hero { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 72%, #3a2a17, #120e0b 70%); display: flex; justify-content: center; padding: 58px 0 6px; margin-bottom: 8px; }
.bld-hero > img { width: 72%; max-width: 320px; }
.bld-title { position: absolute; left: 12px; top: 8px; font-family: var(--font-head); font-size: 22px; color: var(--bronze2); max-width: 55%; }
.bld-title small { display: block; font-family: var(--font-body); font-size: 11px; color: var(--dim); }
.bld-out { position: absolute; right: 8px; top: 8px; border: 1px solid var(--bronze-dim); border-radius: 10px; padding: 4px 8px; background: #0d0a08d8; text-align: right; font-size: 10.5px; color: var(--dim); }
.bld-out b { display: block; font-size: 16px; color: var(--text); }
.depth-card { display: grid; grid-template-columns: 54px 1fr; padding: 0; overflow: hidden; }
.depth-l { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #15110e; }
.depth-l small { font-size: 9px; letter-spacing: 2px; color: var(--dim); }
.depth-l b { font-family: var(--font-head); font-size: 26px; color: var(--bronze2); }
.depth-r { padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.part-row { display: grid; grid-template-columns: 1fr 104px; gap: 8px; align-items: center; }
.part-row .pbtn { min-width: 0; padding: 4px; }
.pr-name { min-width: 0; font-size: 12.5px; }
.part-bar { height: 6px; margin: 3px 0 2px; }
.part-bar > div { background: linear-gradient(90deg, #3f9e5c, #7fd28f); }
.part-bar.lim > div { background: linear-gradient(90deg, #b8862f, #e8c06a); }
/* 0.12 story pop-ups */
.story-box { max-width: 420px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #2c2016, #16110d 70%); border: 1px solid var(--bronze-dim); }
.story-kicker { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); }
.story-title { font-family: var(--font-head); font-size: 24px; color: var(--bronze2); margin: 6px 0 10px; }
.story-text { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.55; color: var(--text); text-align: left; margin: 0 0 14px; }
/* 0.12.1 building levels */
.depth-l em { font-style: normal; font-size: 10px; color: var(--dim); }
.depth-l small { font-size: 8px; letter-spacing: 1px; text-align: center; padding: 0 2px; }
.dig-card { border: 1px dashed var(--bronze-dim); background: #15110e; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dig-t { font-family: var(--font-head); color: var(--bronze2); font-size: 16px; }
.card.kin { padding: 8px 10px; }

/* Beta 0.1.4: moving progress bars */
.part-bar > div { transition: none; }
.part-bar.waiting > div { opacity: .55; }
.pload { height: 4px; background: #0b0908; border-radius: 3px; overflow: hidden; }
.pload i { display: block; height: 100%; background: linear-gradient(90deg, #b8862f, #e8c06a); }
/* Beta 0.1.5: trips and piles */
.part-bar { height: 16px; position: relative; }
.part-bar > span { position: absolute; left: 6px; top: 0; font-size: 10px; line-height: 16px; color: var(--text); text-shadow: 0 1px 2px #000; }
.pile { font-size: 11px; color: var(--dim); padding: 0 2px; margin: -3px 0; }
.pile b { color: var(--text); }
.pile.jam { color: var(--bronze2); }
/* Beta 0.1.7: flow view */
.level-card { padding: 8px; display: flex; flex-direction: column; gap: 0; }
.flow-head { display: grid; grid-template-columns: 62px 1fr 72px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: #15110e; margin-bottom: 8px; }
.fh-l { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fh-l small { font-size: 8.5px; letter-spacing: 1.5px; color: var(--dim); }
.fh-l b { font-family: var(--font-head); font-size: 20px; color: var(--bronze2); }
.fh-l img { width: 40px; height: 26px; object-fit: contain; margin: 2px 0; }
.fh-l em { font-style: normal; font-size: 10px; color: var(--dim); }
.fh-title { font-family: var(--font-head); font-size: 10px; letter-spacing: 1px; color: var(--bronze2); text-transform: uppercase; text-align: center; margin-bottom: 3px; }
.fh-bars { display: flex; align-items: center; gap: 3px; }
.fh-b { flex: 1; min-width: 0; text-align: center; }
.fh-b .bar { height: 6px; margin: 2px 0; }
.fh-b.lim .bar > div { background: linear-gradient(90deg, #b8862f, #e8c06a); }
.fh-b.lim .tiny { color: var(--bronze2); }
.fh-ar { color: var(--dim); font-size: 11px; }
.fh-warn { font-size: 10.5px; color: var(--bronze2); text-align: center; line-height: 1.25; }
.step-card { display: grid; grid-template-columns: 58px 1fr 96px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 6px; }
.step-card.bottleneck { border-color: var(--bronze); box-shadow: 0 0 0 1px #c9973f66, 0 0 16px #c9973f44; }
.step-card .pbtn { min-width: 0; padding: 4px; }
.step-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.step-h { display: flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 15px; }
.bn-tag { margin-left: auto; font-family: var(--font-body); font-size: 9.5px; font-weight: 700; color: var(--bronze2); border: 1px solid var(--bronze-dim); border-radius: 8px; padding: 0 6px; background: #2a1d0a; }
.step-bar { height: 16px; position: relative; }
.step-bar > span { position: absolute; left: 0; right: 0; text-align: center; top: 0; font-size: 10px; line-height: 16px; color: var(--text); text-shadow: 0 1px 2px #000; }
.step-bar.lim > div { background: linear-gradient(90deg, #b8862f, #e8c06a); }
.flow-arrow { text-align: center; color: var(--bronze-dim); font-size: 14px; line-height: 14px; margin: 1px 0; }
.pile-card { display: grid; grid-template-columns: 40px 1fr 88px 70px; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #15110e; padding: 4px 8px; margin: 0 14px; }
.pile-card.jam { border-color: var(--bronze-dim); }
.pile-main { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.pile-gauge { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.pile-gauge i { height: 12px; border-radius: 2px; background: #2a221a; border: 1px solid var(--line); }
.pile-gauge i.on { background: linear-gradient(180deg, #e8c06a, #b8862f); border-color: #8a6a33; }
.pile-net { display: flex; flex-direction: column; text-align: right; font-size: 12px; }
.pile-card.jam .pile-net b { color: var(--bronze2); }
.art-slot { position: relative; border: 1px dashed var(--line2); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #120e0b; }
.art-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #120e0b; }
.art-ph { font-size: 7px; color: var(--dim); text-align: center; word-break: break-all; padding: 2px; line-height: 1.1; }
.step-img { width: 56px; height: 56px; }
.pile-img { width: 38px; height: 38px; }
@media (max-width: 380px) { .pile-card { grid-template-columns: 34px 1fr 64px 60px; margin: 0 4px; } .step-card { grid-template-columns: 48px 1fr 88px; } .step-img { width: 46px; height: 46px; } }
.step-body .tiny { font-size: 11px; line-height: 1.3; }
.pile-main span, .pile-net span { font-size: 10.5px; line-height: 1.2; }
.pile-main b, .pile-net b { font-size: 13px; }
.fh-b .tiny { font-size: 10.5px; }
.fh-b span.tiny:first-child { font-family: var(--font-head); font-size: 11px; }
.fh-warn b { font-size: 12px; }
.art-slot:has(img) { border-color: transparent; }

/* Beta 0.1.13: supply card — the whole chain and what feeds this building */
.supply-card { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.chain-strip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cs-b { flex: 1; min-width: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; text-align: center; display: flex; flex-direction: column; line-height: 1.15; background: #15110e; }
.cs-b b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cs-b.me { border-color: var(--bronze2); box-shadow: 0 0 8px #e8c06a33; }
.cs-ar { color: var(--dim); font-size: 12px; }
.sup-row { display: flex; justify-content: space-between; gap: 8px; }
.sup-row > div { display: flex; flex-direction: column; } .sup-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sup-r { text-align: right; }
.sup-bar { height: 14px; margin: 0; } .sup-bar > div { background: linear-gradient(90deg, #3f9e5c, #7fd28f); }
.sup-bar.short > div { background: linear-gradient(90deg, #b8862f, #e8c06a); }
.sup-why { color: #e9dcc0; line-height: 1.35; } .sup-why b { color: var(--bronze2); }
.cs-b.go { cursor: pointer; transition: border-color .15s, background .15s; } .cs-b.go:hover, .cs-b.go:active { border-color: var(--bronze-dim); background: #1f1812; }
.cs-b.go:focus-visible { outline: 2px solid var(--bronze2); outline-offset: 2px; }
/* Beta 0.1.17: a collapsed quest card stays compact on wide screens (the left panel used to stretch it and spread its rows) */
.quest.collapsed { grid-template-columns: minmax(0, 1fr) auto; align-content: start; row-gap: 2px; }
.panel-left .quest.collapsed { flex: 0 0 auto; min-height: 0; }
.quest.collapsed .quest-head { white-space: nowrap; gap: 8px; justify-content: flex-start; }
.quest.collapsed .quest-foot { grid-row: 1 / 3; }
.quest.collapsed .quest-obj { grid-column: 1 / -1; }
.fh-warn.calm { color: var(--dim); } .fh-warn.calm b { color: var(--text); }
.step-gain { color: #e9dcc0; margin-top: 2px; } .step-gain b { color: var(--hp2); }
.oflow { border: 1px solid #6a5433; background: #1d160f; border-radius: 8px; padding: 6px 8px; color: #e9dcc0; line-height: 1.35; } .oflow b { color: var(--bronze2); } .oflow b.good { color: var(--hp2); }
.town-build { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .town-build .seg button { padding: 3px 10px; font-size: 11px; }

/* Beta 0.4.0: The Front */
.front { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #120e0b; display: flex; flex-direction: column; gap: 6px; }
.fr-bar { height: 10px; border-radius: 6px; background: #0b0908; overflow: hidden; } .fr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a5a22, #e8c06a); transition: width .4s; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--dim); } .fr-chips b { color: var(--text); } .fr-chips .bad { color: #ff8a8a; } .fr-chips .gold { color: var(--bronze2); }
.fr-note { font-size: 12px; line-height: 1.4; } .fr-note .bad { color: #ff8a8a; }
.fr-fc { font-size: 12px; line-height: 1.45; border-top: 1px solid var(--line); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; } .fr-fc b { color: var(--text); } .fr-tip { font-size: 11.5px; color: var(--dim); } .fr-tip .belt-go { margin-top: 4px; }
.bk-why { margin-top: -2px; }
.fr-last { font-size: 11px; color: var(--dim); } .fr-help { font-size: 10.5px; }

/* Beta 0.4.1: the building as a belt */
.belt-card { display: flex; flex-direction: column; gap: 10px; }
.belt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.belt-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.belt-title img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 4px #000a); }
.belt-title h3 { font-family: var(--font-head); color: var(--bronze2); margin: 0; font-size: 20px; }
.belt-title p { margin: 0; color: var(--dim); font-size: 12px; } .belt-title p span { color: var(--text); font-weight: 600; } .belt-title p b { color: var(--text); }
.belt-out { border: 1px solid var(--bronze); border-radius: 10px; padding: 4px 9px; text-align: right; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.belt-out b { display: flex; align-items: center; gap: 4px; justify-content: flex-end; color: var(--text); font-size: 15px; }
#belt-cv { width: 100%; display: block; }
.belt-ups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.belt-up { font: inherit; font-size: 12px; color: var(--bronze2); background: #211a12; border: 1px solid var(--bronze); border-radius: 10px; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; box-shadow: none; }
.belt-up b { color: var(--text); font-size: 12.5px; } .belt-up .cost { font-size: 11px; }
.belt-up:disabled { opacity: .5; }
.belt-up.alarm, .pbtn.alarm { color: #ffd2b0; border-color: #ff7a4a; background: linear-gradient(180deg, #4a1f14, #2e160e); animation: beltAlarm 1.05s ease-in-out infinite; }
.belt-up.alarm b { color: #fff0e0; }
@keyframes beltAlarm { 0%, 100% { box-shadow: 0 0 0 0 #ff5a3c00, 0 0 8px #ffb04a55; } 50% { box-shadow: 0 0 0 3px #ff5a3c55, 0 0 16px #ffb04aaa; } }
@media (prefers-reduced-motion: reduce) { .belt-up.alarm, .pbtn.alarm { animation: none; box-shadow: 0 0 0 2px #ff5a3c88; } }
.belt-deeper { grid-column: 1 / -1; font: inherit; font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; font-size: 16px; color: #1a1208; background: linear-gradient(180deg, #e8c06a, #c9973f); border: 1px solid var(--bronze2); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 0 16px #e8c06a44; }
.belt-deeper small { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; font-size: 11px; }
.belt-deeper .cost { font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.belt-deeper:disabled { opacity: .6; }
.belt-note { min-height: 14px; }
.belt-army { border: 1px solid #b8862f; background: #2a1d0e; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.belt-army b { color: var(--bronze2); }
.belt-go { font: inherit; font-size: 12px; margin-top: 6px; display: block; border: 1px solid var(--bronze); border-radius: 8px; background: #211a12; color: var(--bronze2); padding: 5px 10px; box-shadow: none; }
.belt-up.army { border-color: var(--bronze2); box-shadow: 0 0 12px #e8c06a66; }
/* Beta 0.4.3: the whole chain */
.belt-hr { display: flex; align-items: center; gap: 8px; }
.vseg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.vseg button { font: inherit; font-size: 10.5px; color: var(--dim); background: #171210; border: 0; border-radius: 0; padding: 3px 8px; box-shadow: none; min-height: 0; }
.vseg button + button { border-left: 1px solid var(--line); }
.vseg button[aria-pressed="true"] { color: #1a1208; background: var(--bronze2); font-weight: 700; }
.chain-stage { position: relative; }
#chain-cv { width: 100%; display: block; }
.pup { position: absolute; font: inherit; font-size: 10.5px; line-height: 1.15; color: var(--bronze2); background: #211a12; border: 1px solid var(--bronze); border-radius: 8px; padding: 3px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none; min-height: 0; }
.pup b { color: var(--text); font-size: 10px; white-space: nowrap; letter-spacing: -.2px; } .pup small { font-size: 9.5px; color: var(--bronze2); }
.pup:disabled { opacity: .45; }
.pup.alarm { color: #ffd2b0; border-color: #ff7a4a; background: linear-gradient(180deg, #4a1f14, #2e160e); animation: beltAlarm 1.05s ease-in-out infinite; } .pup.alarm b { color: #fff0e0; }
.pdeep { position: absolute; font: inherit; font-size: 11px; line-height: 1.15; border-radius: 9px; padding: 4px 8px; display: flex; flex-direction: column; align-items: flex-end; border: 1px solid var(--line); background: #171210; color: var(--dim); box-shadow: none; min-height: 0; }
.pdeep b { font-size: 11.5px; } .pdeep small { font-size: 9.5px; }
.pdeep.ready { color: #1a1208; background: linear-gradient(180deg, #e8c06a, #c9973f); border-color: var(--bronze2); box-shadow: 0 0 14px #e8c06a55; font-weight: 700; }
.pname-go { position: absolute; background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; cursor: pointer; }
.pname-go:focus-visible { outline: 2px solid var(--bronze2); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pup.alarm { animation: none; } }
.pup[hidden], .pdeep[hidden], .vseg [hidden] { display: none !important; }
.chain-card .belt-title h3 { font-size: 17px; white-space: nowrap; }
.chain-card .belt-title p { font-size: 11px; }
/* Beta 0.4.6: the Crown Tree — Hero · Army · Realm */
.ct-front { display: flex; flex-direction: column; gap: 6px; }
.ct-front > .row-between b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ct-mults { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ct-mults div { background: #15110e; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: 10.5px; color: var(--dim); }
.ct-mults b { display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.ct-mults .h b { color: #d9604c; } .ct-mults .a b { color: #6fa3d9; } .ct-mults .r b { color: #7fd28f; }
.ct-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; padding-inline: 3px; }
.ct-tabs button { min-width: 0; }
.ct-node .small, .ct-det .small { font-size: 11.5px; }
.ct-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; color: var(--dim); }
.ct-tabs button span { font-family: var(--font-head); font-size: 15px; }
.ct-tabs button small { font-size: 10.5px; }
.ct-tabs button.on { color: var(--text); border-color: var(--c); box-shadow: inset 0 -3px 0 var(--c); }
.ct-tabs button .dot { position: absolute; top: 5px; right: 6px; }
.ct-tree { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; padding-inline: 3px; }
.ct-note { font-size: 11.5px; }
.ct-tier { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: start; }
.ct-tier:not(:first-child)::before { content: ''; position: absolute; left: 28px; top: -13px; width: 2px; height: 11px; background: var(--line2); }
.ct-tl { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; text-align: right; padding-top: 7px; }
.ct-tl b { display: block; color: var(--bronze2); font-size: 12.5px; letter-spacing: 0; }
.ct-nodes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.ct-node { position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 9px; border-radius: 10px; border-color: var(--line2); }
.ct-node .ct-nm { font-weight: 600; font-size: 13px; }
.ct-node .ct-ef { font-size: 11px; color: var(--dim); }
.ct-node .ct-sp { font-size: 11.5px; font-weight: 600; color: var(--good, #7fd28f); font-variant-numeric: tabular-nums; }
.ct-node .ct-sp.zero { color: var(--dim); font-weight: 400; }
.ct-node .ct-kb { position: absolute; top: 5px; right: 7px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--c); }
.ct-pips { display: flex; gap: 3px; margin-top: 3px; } .ct-pips i { width: 14px; height: 4px; border-radius: 2px; background: #211a14; } .ct-pips i.f { background: var(--c); }
.ct-node.lock { opacity: .45; } .ct-node.key { border-style: double; border-width: 3px; } .ct-node.maxed { border-color: var(--c); }
.ct-node.can { border-color: var(--bronze2); } .ct-node.sel { outline: 2px solid var(--c); outline-offset: 1px; }
.ct-det { margin-left: 66px; border: 1px solid var(--c); border-radius: 10px; background: #1f1810; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.ct-det b { font-family: var(--font-head); color: var(--c); }
.ct-prev { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; background: #15110e; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-variant-numeric: tabular-nums; }
.ct-prev b { color: var(--good, #7fd28f); font-family: inherit; }
.ct-btns { display: flex; gap: 6px; } .ct-btns .buy { flex: 1; min-width: 0; }
@media (max-width: 380px) { .ct-det { margin-left: 0; } }
/* Beta 0.4.7: readable upgrade buttons — "Upgrade" + gold cost, ×1 / Max toggle over the column */
.up-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 11.5px; color: var(--dim); margin: 2px 2px 4px; }
.upseg button { font-size: 11.5px; padding: 3px 12px; }
.pup { gap: 2px; padding: 3px 2px; }
.pup .pu-l, .belt-up .pu-l { font-weight: 700; font-size: 11.5px; color: var(--text); white-space: nowrap; letter-spacing: -.1px; }
.pu-c { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #f3cf6b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pu-c img, .pu-c .ico { width: 13px; height: 13px; }
.pu-c.poor { color: #ff8a6a; } .pu-c.done { color: var(--dim); font-weight: 400; } .pu-c.small { font-size: 9.5px; font-weight: 400; color: var(--dim); }
.pup:disabled, .belt-up:disabled { opacity: 1; background: #171210; border-color: var(--line2); }
.pup:disabled .pu-l, .belt-up:disabled .pu-l { color: #b9ad99; }
.belt-up { gap: 3px; } .belt-up .pu-n { font-size: 11px; color: var(--dim); } .belt-up .pu-b { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.gap-note { display: inline-block; font-size: 10.5px; color: var(--bronze2); margin-top: 2px; } .gap-note.bad { color: #ff8a6a; }
/* ===== Beta 0.5: the Army tab (Kingdom phase) ===== */
body.army #hero-subtabs, body.army #sub-fight, body.army #sub-gear, body.army #sub-skills, body.army [data-tab=inventory], body.army [data-rtab=inventory], body.army [data-rtab=skills], body.army #mini-hero { display: none !important; }
body.army .army-view { display: flex !important; flex-direction: column; gap: 10px; }
.army-view .subtabs { display: flex; }
.asub { display: flex; flex-direction: column; gap: 10px; }
.asub.hidden { display: none; }
#army-front-host .conquest, #army-front-host .front { margin-top: 0; }
.commander { display: flex; gap: 10px; align-items: center; }
.commander .face { width: 42px; height: 42px; border-radius: 10px; background: #2b2014; border: 1px solid var(--bronze); display: grid; place-items: center; font-size: 21px; flex: none; }
.commander .cm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.commander .bar { height: 7px; }
.sup-head { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.sup-head .row-between b { font-variant-numeric: tabular-nums; }
.sup-list { display: flex; flex-direction: column; gap: 8px; }
.sup { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sup .ic { width: 42px; height: 42px; border-radius: 10px; background: #211a12; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 20px; }
.sup .nm { font-weight: 700; } .sup .lv { color: var(--dim); font-size: 11.5px; font-weight: 400; }
.sup .ef { font-size: 12px; color: var(--dim); } .sup .ef b { color: var(--good, #7fd28f); }
.sup .sbtn { font: inherit; min-width: 88px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--bronze); background: #211a12; color: var(--text); box-shadow: none; }
.sup .sbtn .pu-l { font-weight: 700; font-size: 12px; }
.sup .sbtn .pu-c { font-size: 11px; }
.sup .sbtn:disabled { opacity: 1; background: #171210; border-color: var(--line2); }
.sup .sbtn:disabled .pu-l { color: #b9ad99; }
.cslots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.cslot { font: inherit; aspect-ratio: 1; min-width: 0; border-radius: 10px; border: 1px solid var(--bronze); background: #2b2014; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; padding: 0; box-shadow: none; color: var(--text); }
.cslot small { font-size: 9.5px; color: var(--bronze2); font-weight: 700; }
.cslot.open { border-style: dashed; background: #171210; color: var(--bronze2); font-size: 20px; }
.cslot.lock { border-color: var(--line); background: #120e0b; color: #5d5245; font-size: 12px; }
.cslot.lock small { color: #5d5245; font-weight: 400; }
.cslot.sel { outline: 2px solid var(--bronze2); outline-offset: 1px; }
.ctrain { border-color: #6fa3d9; background: #121821; display: flex; flex-direction: column; gap: 5px; }
.ctbar { height: 8px; } .ctbar > div { background: linear-gradient(90deg, #35557a, #6fa3d9); }
.clib { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cfam { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-top: 4px; }
.crow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: #171210; }
.crow.eq { border-color: var(--bronze); }
.crow .ci { font-size: 18px; text-align: center; } .crow .ct { font-weight: 700; font-size: 12.5px; } .crow .cd { font-size: 11px; color: var(--dim); } .crow .cd b { color: var(--good, #7fd28f); }
.crow.locked .ct { color: var(--dim); }
.cpill { font: inherit; font-size: 10px; border: 1px solid var(--line2); border-radius: 999px; padding: 1px 7px; color: var(--bronze2); background: transparent; box-shadow: none; min-height: 0; }
.cpill.on { border-color: var(--good, #7fd28f); color: var(--good, #7fd28f); }
.cbtn { font: inherit; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 7px; border-radius: 10px; border: 1px solid var(--bronze); background: #211a12; color: var(--text); box-shadow: none; }
.cbtn .pu-l { font-weight: 700; font-size: 11.5px; color: var(--text); } .cbtn .pu-c { font-size: 10.5px; }
.cbtn:disabled { opacity: 1; background: #151110; border-color: var(--line2); } .cbtn:disabled .pu-l { color: #b9ad99; }
/* Beta 0.5.1: the battle at the Front — blue army, red defenders, yellow walls; every dot is 1% */
.front-battle { border: 1px solid var(--line); border-radius: 12px; background: #120e0b; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.fb-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .fb-head b { font-variant-numeric: tabular-nums; }
.fb-field { position: relative; height: 138px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #1b1510 0%, #171210 60%, #1f1812 100%); border: 1px solid var(--line); }
.fb-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fb-banner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.9); background: #2b2014; border: 1px solid var(--bronze2); color: var(--bronze2); font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 10px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.fb-banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fb-segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.fb-segs i { height: 10px; border-radius: 3px; background: #211a14; position: relative; overflow: hidden; }
.fb-segs i.done { background: linear-gradient(90deg, #8a5a22, #e8c06a); }
.fb-segs i.now::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: linear-gradient(90deg, #8a5a22, #e8c06a); }
.fb-segs i.fort { outline: 1px solid #d9604c; }
.fb-segl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); }
.up-bar .up-gold { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.up-bar .up-gold b { color: #f3cf6b; }
#bld-barracks-host .bk-card { margin-top: 10px; }