:root {
  /* Night operations: peat-black, field slate, parchment, and a signal-flare copper. */
  --bg: #18211f;
  --panel: #202c29;
  --panel-2: #2b3934;
  --line: #52615a;
  --text: #eee8d8;
  --muted: #b5b7a7;
  --accent: #e5a16f;       /* signal flare */
  --accent-ink: #20221d;
  --good: #a7c58b;
  --bad: #e78270;
  --warn: #edc274;
  --link: #f0b781;
  /* war-era type: stencil for titles, typewriter for text. Fallbacks keep the game usable offline. */
  --mono: "Courier Prime", "Courier New", Courier, Consolas, monospace;          /* body, numbers, tables */
  --stencil: "Black Ops One", "Stardos Stencil", Impact, "Arial Black", sans-serif; /* logo, page titles */
  --stamp: "Stardos Stencil", "Black Ops One", Impact, "Arial Narrow", sans-serif; /* sub-headings, nav, buttons */
  --typewriter: "Special Elite", "Courier Prime", "Courier New", monospace;     /* orders, reports, dispatches */
  --serif: var(--stamp);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
html { color-scheme: dark; }
body { background-image: radial-gradient(ellipse at 50% -18rem, rgba(131,151,124,.12), transparent 52%); }
body { font: 15px/1.5 var(--mono); }
a { color: var(--link); text-decoration: none; }
a:hover { color: #ffd0a0; text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--stamp); font-weight: 700; letter-spacing: .06em; margin: 0 0 .6rem; text-transform: uppercase; }
h1, h2 { font-family: var(--stencil); font-weight: normal; }
h2 { font-size: 1.5rem; color: var(--accent); letter-spacing: .08em; }
h3 { font-size: 1.1rem; color: var(--accent); margin-top: 1.4rem; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------- layout */

.resbar {
  display: flex; gap: 1.6rem; flex-wrap: wrap; padding: .5rem 1rem;
  border-bottom: 1px solid var(--line); background: #263430;
}
.res { display: flex; flex-direction: column; min-width: 120px; }
.res .label { color: var(--muted); font-family: var(--stamp); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.res .val { font-size: 16px; font-weight: 700; }
.res .rate { font-size: 11px; color: var(--muted); }
.res.full .val { color: var(--warn); }
.meter { height: 3px; background: var(--line); margin-top: 2px; }
.meter > i { display: block; height: 100%; background: var(--accent); }
.res.full .meter > i { background: var(--warn); }

main { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }

.panel { background: linear-gradient(145deg, rgba(39,53,48,.98), rgba(30,42,39,.98)); border: 1px solid var(--line); padding: 1rem; margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.alert { border: 1px solid var(--bad); background: #3a2420; padding: .6rem .9rem; margin-bottom: 1rem; }
.notice { border: 1px solid var(--line); background: var(--panel-2); padding: .6rem .9rem; margin-bottom: 1rem; }

/* ---------- tables */
.tbl-wrap, .table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .35rem .5rem; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-family: var(--stamp); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--panel-2); }
tr.unread td { color: var(--accent); }
.cost { font-size: 12px; white-space: nowrap; }
.cost span { margin-right: .7rem; }
.cost .short { color: var(--bad); }

/* ---------- forms */
button, .btn {
  font: inherit; font-family: var(--stamp); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--accent); color: var(--accent-ink); border: 1px solid #f0b781; padding: .4rem .85rem;
  cursor: pointer; letter-spacing: .03em; transition: filter .15s, background-color .15s, border-color .15s;
}
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
button.ghost { background: transparent; color: var(--link); border: 1px solid var(--line); }
button.ghost:hover:not(:disabled) { color: #ffd0a0; border-color: var(--accent); background: rgba(229,161,111,.08); filter: none; }
button.danger { background: var(--bad); color: #fff; }
input, textarea, select {
  font: inherit; background: #151e1c; color: var(--text); border: 1px solid #64736b; padding: .45rem .6rem;
  border-radius: 2px; min-height: 2.55rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
button:focus-visible, a:focus-visible, .nation-card:focus-within { outline: 2px solid #ffd0a0; outline-offset: 3px; }
input[type=number] { width: 6rem; }
textarea { width: 100%; min-height: 10rem; }
label { display: block; margin: .5rem 0 .2rem; color: var(--muted); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ---------- login */
.login { max-width: 460px; margin: clamp(2rem, 7vh, 5rem) auto; }
.login h1 { font-size: clamp(2.7rem, 8vw, 3.55rem); line-height: .98; letter-spacing: .11em; text-transform: uppercase; color: #f0b781; text-align: center; text-shadow: 0 3px 0 #704f39, 0 8px 28px rgba(0,0,0,.5); }
.login .tag { font-family: var(--typewriter); }
.login .tag { text-align: center; color: var(--muted); margin-bottom: 1.25rem; }
.login input { width: 100%; }
.tabs { display: flex; gap: .3rem; margin-bottom: 1rem; }
.tabs button { flex: 1; }
.tabs button:not(.on) { background: transparent; color: var(--link); border: 1px solid var(--line); }
.login .panel { border-top: 3px solid #b87952; padding: clamp(1rem, 3vw, 1.5rem); background: linear-gradient(150deg, rgba(38,53,48,.98), rgba(25,36,33,.98)); box-shadow: 0 18px 55px rgba(0,0,0,.38); }
.login .tabs { border-bottom: 1px solid var(--line); padding-bottom: .65rem; }
.login .tabs button { min-height: 2.7rem; }
.login .auth-panel label:not(.check) { color: #d0cfbd; font-family: var(--stamp); font-size: .95rem; letter-spacing: .035em; }
.login .auth-panel .wide-btn { min-height: 3rem; font-size: 1.05rem; box-shadow: inset 0 -3px 0 rgba(80,48,29,.35); }
.login .auth-panel .linklike { min-height: 2rem; }
.login .auth-panel .small.muted { color: #c0c1b1; }
.login .auth-panel h3 { margin-top: 1.3rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.login .nation-card { background: rgba(16,25,23,.72); }
.login .nation-card:hover, .login .nation-card.on { background: #2b3934; }
.dev-login { margin: .75rem 0 1.2rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); text-align: center; }
.dev-login p { margin: 0 0 .65rem; }
.dev-login .wide-btn { width: 100%; min-height: 2.8rem; }

/* ---------- war map */
.warmap-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .warmap-layout { grid-template-columns: 1fr; } }
.warmap {
  position: relative; height: clamp(360px, calc(100vh - 290px), 760px); border: 1px solid var(--line);
  background: #15170f; overflow: hidden; touch-action: none; user-select: none;
}
.warmap-canvas { display: block; cursor: grab; outline: none; }
.warmap-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.warmap-canvas.dragging { cursor: grabbing; }
.warmap-mini {
  position: absolute; right: 10px; bottom: 10px; border: 1px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.6); cursor: crosshair; opacity: .92;
}
.warmap-tools { position: absolute; left: 36px; top: 26px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.warmap-tools button { width: 34px; height: 34px; padding: 0; font-size: 18px; background: rgba(27,29,22,.85); }
.warmap-tip {
  position: absolute; z-index: 3; pointer-events: none; background: rgba(27,29,22,.95);
  border: 1px solid var(--line); padding: .3rem .55rem; font-size: 12px; white-space: nowrap;
}
.warmap-hint { position: absolute; left: 36px; bottom: 8px; color: var(--muted); background: rgba(21,23,15,.7); padding: 0 .4rem; }
@media (max-width: 600px) { .warmap-mini { width: 96px !important; height: 96px !important; } .warmap-hint { display: none; } }
.warmap-panel { min-height: 200px; }
.legend span { margin-right: 1rem; }

/* ---------- misc */
.timer { color: var(--accent); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
#toast {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: 90vw;
  background: var(--panel-2); border: 1px solid var(--accent); padding: .6rem 1rem; display: none;
}
#toast.show { display: block; }
#toast.err { border-color: var(--bad); color: var(--bad); }
pre.body { white-space: pre-wrap; font: 15px/1.6 var(--typewriter); margin: 0; }
.notice, .alert, .dispatches p, .dispatch-list li { font-family: var(--typewriter); }

/* ---------- dispatches (patch notes) */
.dispatches { max-width: 760px; }
.dispatch-head { border-top: 1px dashed var(--line); padding-top: 1rem; margin-top: 1.6rem; }
.dispatches .dispatch-head:first-of-type { border-top: 0; margin-top: .6rem; }
.dispatch-tag { margin: .8rem 0 .3rem; color: var(--muted); font-family: var(--stamp); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.dispatch-list { margin: 0; padding-left: 1.2rem; }
.dispatch-list li { margin: .3rem 0; }
.dispatch-list b { color: var(--accent); font-weight: normal; font-family: var(--stamp); letter-spacing: .03em; }

/* ---------- home base */
.base-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .base-layout { grid-template-columns: 1fr; } }
.base-wrap { border: 1px solid var(--line); background: #2b2b28; line-height: 0; overflow-x: auto; }
@media (max-width: 700px) { .base-svg { min-width: 680px; } }
.base-svg { width: 100%; height: auto; display: block; }
/* the base is its own layer, so changes elsewhere (timers) never repaint its drawing */
.base-wrap { contain: paint; will-change: transform; }
.base-svg .plot { cursor: pointer; outline: none; }
.base-svg .plot:hover > g, .base-svg .plot:focus-visible > g { filter: brightness(1.18); }
.base-svg .plot:focus-visible .sel-ring, .base-svg .plot:focus-visible { outline: none; }
.base-svg .plot:focus-visible > rect:first-of-type { stroke: var(--accent); stroke-width: 2; }
.base-svg .plot.locked { cursor: help; }
.base-svg .plot-name { font: 700 12px var(--stamp); letter-spacing: .04em; text-transform: uppercase; fill: #e4dfcc; paint-order: stroke; stroke: rgba(15,16,10,.85); stroke-width: 3px; }
.base-svg .zone { font: 700 12px var(--stamp); letter-spacing: .25em; fill: rgba(228,223,204,.55); }
.base-svg .svg-timer { font: 700 11px var(--mono); fill: var(--accent); }
.base-svg .smoke { opacity: .4; }
.base-svg .smoke.s2 { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) { .base-svg * { animation: none !important; } }
.base-panel { min-height: 220px; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { background: transparent; color: var(--link); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.base-panel .cost { white-space: normal; }

/* ---------- nations */
.insignia { vertical-align: middle; flex: none; }
.login.wide { max-width: 980px; }
.nation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
@media (max-width: 760px) { .nation-grid { grid-template-columns: 1fr; } }
.nation-card {
  position: relative; display: block; margin: 0; padding: .9rem 1rem; cursor: pointer; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--nation);
  transition: border-color .15s, background .15s;
}
.nation-card:hover { background: var(--panel-2); }
.nation-card.on { border-color: var(--nation); background: var(--panel-2); box-shadow: 0 0 0 1px var(--nation) inset; }
.nation-card input { position: absolute; opacity: 0; pointer-events: none; }
.nation-card:focus-within { outline: 1px solid var(--accent); }
.nation-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.nation-name { font-family: var(--stencil); font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.nation-card.on .nation-name { color: var(--accent); }
.nation-motto { font-family: var(--typewriter); color: var(--muted); font-size: 13px; }
.nation-perk { font-size: 13px; margin-bottom: .5rem; }
.perk-name { font-family: var(--stamp); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nation); margin-right: .3rem; }
.nation-group { font-size: 12px; color: var(--muted); margin-top: .2rem; }
.group-title { font-family: var(--stamp); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin-right: .4rem; }
.nation-banner { display: flex; gap: .7rem; align-items: center; border-left: 4px solid var(--nation); }
.unit-desc { max-width: 320px; font-family: var(--typewriter); }
.login { padding: 0 12px; }

/* ---------- training cards */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.unit-card { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.unit-card:hover { border-color: #5a5f48; }
.unit-img { position: relative; aspect-ratio: 5 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #2f3223; }
.unit-img .unit-art { width: 100%; height: 100%; display: block; }
.unit-card.locked .unit-art { filter: grayscale(.85) brightness(.7); }
.chip { font-family: var(--stamp); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: .05rem .4rem; }
.unit-img .chip { position: absolute; top: 6px; background: rgba(21,23,15,.8); border: 1px solid var(--line); }
.role-chip { left: 6px; color: var(--accent); }
.home-chip { right: 6px; color: var(--good); }
.siege-chip { background: #3a2a1c; color: var(--warn); border: 1px solid #6b4a2b; vertical-align: middle; }
.lock-note { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .6rem; background: rgba(21,23,15,.88); color: var(--muted); font-size: 12px; }
.unit-body { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.unit-name { font-family: var(--stencil); font-size: 1.1rem; letter-spacing: .03em; color: var(--text); }
.unit-card .unit-desc { margin: 0; font-family: var(--typewriter); font-size: 13px; color: var(--muted); max-width: none; }
.stats { display: grid; gap: 3px; margin: .2rem 0; }
.stat { display: grid; grid-template-columns: 58px 1fr 32px; align-items: center; gap: .4rem; font-size: 12px; }
.stat-label { color: var(--muted); white-space: nowrap; }
.stat-bar i.steal { background: #b07ad0; }
.stat-bar { height: 6px; background: var(--bg); border: 1px solid var(--line); }
.stat-bar i { display: block; height: 100%; background: #8a9a6a; }
.stat-bar i.att { background: var(--bad); }
.stat-bar i.spd { background: #9ab8c8; }
.stat-bar i.car { background: var(--accent); }
.stat-val { text-align: right; font-weight: 700; }
.unit-cost .cost { white-space: normal; }
.train-row { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: .3rem; }
.train-row input { width: 5.5rem; }
.train-row button { margin-left: auto; }
.build-slots { display: grid; gap: .4rem; }
.build-slots .slot-label { min-width: 9.5rem; display: inline-block; }

/* click-to-rename outpost name */
.name-edit { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px dashed transparent; }
.name-edit:hover, .name-edit:focus-visible { border-bottom-color: var(--accent); filter: none; }
.name-edit .pencil { font-size: .7em; margin-left: .4rem; opacity: .45; }
.name-edit:hover .pencil, .name-edit:focus-visible .pencil { opacity: 1; }
.rename-form input { font-size: 1.1rem; width: min(22rem, 60vw); }
.base-svg .banner:hover rect { stroke-width: 2; }
.camp-table td { padding: .25rem .4rem; }
.stars { color: var(--accent); letter-spacing: .1em; }

/* ---------- orders */
.order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1rem; }
.order-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--line); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.order-card.ready { border-top-color: var(--good); box-shadow: 0 0 0 1px rgba(143,191,106,.25) inset; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.order-chain { font-family: var(--stencil); font-size: 1.15rem; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.mult-chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.order-num { font-family: var(--stamp); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.order-title { margin: 0; font-family: var(--typewriter); text-transform: none; font-weight: normal; font-size: 1rem; color: var(--text); letter-spacing: 0; }
.order-progress { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; }
.order-progress .stat-bar { height: 8px; }
.order-progress .stat-bar i { background: var(--accent); }
.order-card.ready .order-progress .stat-bar i { background: var(--good); }
.order-reward .cost { white-space: normal; }
.order-next { border-top: 1px dashed var(--line); padding-top: .4rem; margin: .2rem 0 0; }

/* level plates on the base + list view levels */
.base-svg .plot:hover .lvl-plate rect:nth-of-type(2) { stroke: #e4dfcc; }
.lvl-cell { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.lvl-cell .lvl-pill { display: inline-block; min-width: 2.4rem; text-align: center; padding: .05rem .4rem; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink); }
.lvl-cell .lvl-pill.zero { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.lvl-cell .lvl-pill.max { background: #c9b060; }
.lvl-cell .lvl-of { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: .25rem; }
.base-panel .lvl-big { font-family: var(--stencil); font-size: 1.5rem; color: var(--accent); }

/* ---------- confirmation dialog */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(10,11,8,.72); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--bad); max-width: 460px; width: 100%;
  padding: 1rem 1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,.6); min-width: 0; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal .kv { gap: .4rem 1rem; align-items: center; }
.modal .cost { white-space: normal; }
.modal-actions { justify-content: flex-end; margin: 1rem 0 0; }

/* Warehouse / Supply Depot: current stock vs capacity */
.store-h { margin: 14px 0 6px; font-family: var(--stamp); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.store-kv { margin-bottom: 12px; row-gap: 8px; }
.store-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.store-cell .meter { height: 5px; margin-top: 0; }
.store-cell .meter.full > i { background: var(--warn); }

/* Home Base: drag & drop */
.base-svg .plot[data-drag] { cursor: grab; }
.base-svg.drag-on, .base-svg.drag-on .plot { cursor: grabbing; }
.base-svg .plot.dragging { filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.base-svg .plot.dragging > g { filter: brightness(1.08); }
.base-svg .drag-outline { fill: rgba(143,191,106,.12); stroke: #8fbf6a; stroke-width: 2; stroke-dasharray: 6 4; }
.base-svg .drag-outline.bad { fill: rgba(224,113,91,.16); stroke: #e0715b; }
.base-svg { touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.legend .small-btn { padding: 2px 10px; font-size: 11px; margin-left: .5rem; }
.fit-table { width: 100%; border-collapse: collapse; margin: .4rem 0 .6rem; }
.fit-table th, .fit-table td { padding: 3px 6px; border-bottom: 1px dashed var(--line); }
.fit-table th { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* Login / Register */
.auth-panel h2 { margin-top: 0; }
.auth-panel label { display: block; margin-top: .7rem; }
.auth-panel label.check { display: inline-flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; }
.auth-panel label.check input { width: auto; }
.auth-panel p.small.muted { margin: .25rem 0 0; }
.auth-row { justify-content: space-between; margin: .9rem 0 .2rem; }
.auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 1.2rem; }
.auth-msg { padding: .65rem .8rem; margin: 0 0 .75rem; border: 1px solid currentColor; background: rgba(0,0,0,.25); }
.auth-msg.bad { background: #3a2420; }
.auth-msg.good { background: #24301c; }
.wide-btn { width: 100%; padding: .7rem 1rem; font-size: 1rem; margin-top: .6rem; }
.center { text-align: center; }
button.linklike { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; text-transform: none; letter-spacing: 0; }
button.linklike:hover { color: var(--accent); background: none; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.2rem; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: .2rem .55rem; font-size: 11px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.pw-eye:hover { color: var(--accent); }
.pw-meter { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.pw-bar { flex: 1; height: 5px; background: var(--line); overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; background: var(--bad); transition: width .2s, background .2s; }
.pw-meter[data-level="2"] .pw-bar i { background: var(--warn); }
.pw-meter[data-level="3"] .pw-bar i, .pw-meter[data-level="4"] .pw-bar i { background: var(--good); }
.pw-match { min-height: 1.2em; margin: .25rem 0 0; }
.auth-sent { text-align: center; padding: .6rem .4rem; }
.auth-sent .envelope { font-size: 3rem; color: var(--accent); line-height: 1; margin-bottom: .4rem; }
.auth-sent p { margin: .6rem 0; }
.auth-foot { margin-top: .8rem; color: var(--muted); }

/* Announcement banners */
.announce { padding: .45rem 1rem; font-size: 14px; border-bottom: 1px solid var(--line); background: #2c3020; }
.announce.warn { background: #3a3120; border-color: #6b5a2b; }
.announce.alert { background: #3a2420; border-color: #6b3a2b; }
.announce.event { background: #24301c; border-color: #3f5a2b; }
.announce a { color: inherit; text-decoration: underline; }
/* construction queue (v0.62.0) */
.build-job.waiting { opacity: .85; border: 1px dashed var(--line); }
/* recruit a comrade (v0.61.0) */
.recruit-panel { margin-bottom: 1.5rem; }
.ref-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ref-row input { flex: 1; min-width: 12rem; font-family: inherit; }
/* alliances (v0.60.0) */
.ally-tag { font-weight: 700; text-decoration: none; }
.ally-tag-big { color: var(--accent); }
.ally-tag-input { text-transform: uppercase; max-width: 8rem; }
.ally-list { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .4rem; }
.ally-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 4px; }
.ally-list li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ally-atk { color: #d9533f; font-weight: 700; margin-left: .3rem; cursor: help; }
.ally-announce { border-color: rgba(217, 194, 122, .5); }
.ally-announce .pc-bio { margin: .3rem 0 0; }
.ally-chat { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; }
.ally-chat li { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; max-width: 85%; }
.ally-chat li.mine { align-self: flex-end; border-color: rgba(217, 194, 122, .45); }
.ally-chat li.sys { border: none; padding: 0 .2rem; max-width: none; font-style: italic; }
.ally-chat li p { margin: .2rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.ally-chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.ally-chat-form textarea { flex: 1; min-height: 3.2rem; height: 4rem; resize: vertical; font: inherit; }
.ally-rights td, .ally-rights th { padding: .3rem .5rem; }
.ally-rights .center { text-align: center; vertical-align: middle; }
.ally-rights input[type=checkbox] { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; min-height: 0; padding: 0; margin: 0; }
.ally-members select { max-width: 9rem; }
/* commander profile (v0.59.0) */
.avatar { display: block; flex: none; border-radius: 6px; }
.side-foot .cdr .avatar { border-radius: 50%; border: 1px solid var(--line); }
.medal-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.medal-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.medal-list li > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.medal { display: block; flex: none; }
.medal-badge { display: inline-block; }
.profile-card { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1rem; }
.profile-card h3 { margin: 0 0 .3rem; }
.pc-body { min-width: 0; flex: 1; }
.pc-title { margin: 0 0 .4rem; font-style: italic; color: var(--gold, #d9c27a); }
.pc-bio { margin: 0 0 .6rem; white-space: pre-line; overflow-wrap: anywhere; }
.pc-medals { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
@media (max-width: 560px) { .profile-card { flex-direction: column; align-items: center; text-align: center; } .pc-medals { justify-content: center; } }

/* Command HQ (admin panel) */
.adm h2 .small { text-transform: uppercase; letter-spacing: .1em; }
.adm-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.adm-nav a { padding: .3rem .7rem; border: 1px solid transparent; font-family: var(--stamp); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.adm-nav a.on { border-color: var(--line); background: var(--panel-2); color: var(--accent); }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: .7rem; margin-bottom: 1rem; }
.adm-tile { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--line); color: inherit; }
a.adm-tile:hover { border-color: var(--accent); }
.adm-tile-label { font-family: var(--stamp); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--muted); }
.adm-tile-value { font-size: 1.8rem; font-weight: 700; color: var(--text, #e4dfcc); line-height: 1.1; }
.adm-tile-sub { font-size: 12px; color: var(--muted); }
.adm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; align-items: start; }
.adm-table { width: 100%; }
.adm-table td, .adm-table th { font-size: 13px; }
.adm-chip { display: inline-block; font-size: 11px; padding: 0 .4rem; margin-left: .25rem; border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.adm-chip.bad { color: var(--bad); border-color: var(--bad); }
.adm-chip.warn { color: var(--warn); border-color: var(--warn); }
.adm-chip.good { color: var(--good); border-color: var(--good); }
.adm-chip.staff { color: var(--accent); border-color: var(--accent); }
.adm-chip.muted { color: var(--muted); }
.adm-search { gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.adm-search input { flex: 1; min-width: 200px; }
.adm-actions .adm-act { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.adm-actions .adm-act > b { flex: 0 0 100%; font-family: var(--stamp); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); }
.adm-actions .adm-act input:not(.num), .adm-actions .adm-act select { flex: 1; min-width: 140px; }
.adm-act.danger > b { color: var(--bad); }
.adm .num { width: 90px; }
.adm .num-wide { width: 110px; }
.adm label.inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .6rem 0 0; }
.adm label.check { display: inline-flex; align-items: center; gap: .4rem; }
.adm label.check input { width: auto; }
.adm-res { display: flex; flex-wrap: wrap; gap: .4rem; flex: 0 0 100%; }
.adm-list { margin: .3rem 0; padding-left: 1.1rem; }
.adm-list li { margin: .15rem 0; }
.adm-msg { border-left: 3px solid var(--line); padding: .4rem .7rem; margin: .5rem 0; background: var(--panel-2); }
.adm-msg.reported { border-color: var(--bad); }
.adm-msg pre.body { margin: .3rem 0 0; white-space: pre-wrap; }
.adm-log { margin: 0; padding: .15rem 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.adm-logbox { max-height: 420px; overflow: auto; }
.adm textarea { width: 100%; }
.adm-inline-form { flex-wrap: wrap; gap: .4rem; }
.adm-inline-form input { flex: 1; min-width: 110px; }
.adm-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .6rem 1rem; }
.adm-grid-form label { display: flex; flex-direction: column; gap: .2rem; }
.adm-grid-form p { grid-column: 1 / -1; }
.adm-map-wrap { overflow: hidden; }
.adm-map { width: 100%; max-width: 640px; height: auto; display: block; border: 1px solid var(--line); }
.adm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.adm-dot.sq { border-radius: 0; background: #8a8a7a; }
.adm-bars { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .8rem; }
.adm-bar-row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: .5rem; font-size: 13px; }

/* ============================================================
   FIELD MANUAL — shared finish pass
   A living operations room: ink-dark enamel, map-paper, and
   restrained signal brass. Kept entirely in CSS so the interface
   remains quick and dependable on every connection.
   ============================================================ */
:root {
  --bg: #171d1b;
  --panel: #222b28;
  --panel-2: #2c3732;
  --line: #59655b;
  --text: #eee9d9;
  --muted: #b8b9a9;
  --accent: #e4b36e;
  --accent-ink: #20221d;
  --good: #a8c18b;
  --bad: #e48672;
  --warn: #ecc77e;
  --link: #efbf82;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --stencil: "Black Ops One", "Stardos Stencil", Impact, sans-serif;
  --stamp: "Stardos Stencil", "Black Ops One", Impact, sans-serif;
  --typewriter: "Special Elite", "Courier Prime", "Courier New", monospace;
  --surface-raised: #303b35;
  --edge-light: rgba(239, 225, 189, .12);
  --shadow-deep: 0 18px 42px rgba(0, 0, 0, .27);
}

html { scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% -22rem, rgba(151, 166, 126, .17), transparent 58%),
    linear-gradient(180deg, rgba(8, 13, 12, .15), transparent 32rem);
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.022) 4px);
}
::selection { color: #201d17; background: #e4b36e; }

h1, h2, h3, h4, h5, .brand, .nav a, button, .btn, th, .label,
.adm-tile-label, .order-num, .unit-name, .nation-name {
  text-rendering: optimizeLegibility;
}
h2 { line-height: 1.15; }
h3 { line-height: 1.25; }


/* Resource dispatch strip */
.resbar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr)) minmax(150px, 1.15fr);
  gap: .5rem;
  padding: .55rem clamp(.8rem, 2.4vw, 2rem);
  border-bottom: 1px solid #626e62;
  background: linear-gradient(90deg, #283832, #303a32 48%, #26342f);
}
.res {
  min-width: 0;
  padding: .35rem .5rem;
}
.res-card {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: .55rem;
  border-left: 2px solid var(--res, #a79b72);
  background: rgba(13,19,17,.2);
}
.res-ico { display: grid; place-items: center; opacity: .9; }
.res-body { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; column-gap: .4rem; }
.res-body .label { grid-column: 1 / -1; color: #c2c4b3; font-size: 11px; letter-spacing: .14em; }
.res .val { font-size: 15px; white-space: nowrap; }
.res .val .cap { color: #a6ad9d; font-weight: 400; font-size: 11px; }
.res .meter { grid-column: 1 / -1; height: 4px; margin: .12rem 0 .1rem; background: rgba(8,13,11,.7); }
.res .meter > i { background: var(--res, var(--accent)); }
.res .rate { grid-column: 1 / -1; font-size: 10px; color: #b4b8a8; }
.res .full-tag { color: var(--warn); }
.res:not(.res-card) { align-self: center; border-left: 1px solid rgba(238,233,217,.19); }
.res:not(.res-card) .label { font-size: 11px; }
.res:not(.res-card) .val { overflow-wrap: anywhere; font-size: 14px; }
main {
  max-width: 1320px;
  min-height: 60vh;
  padding: clamp(1rem, 2.4vw, 1.8rem) clamp(.85rem, 2.3vw, 1.7rem) 4rem;
}

/* Panels read like field binders: layered enamel, brass register, and a clean edge. */
.panel {
  position: relative;
  padding: clamp(.9rem, 2vw, 1.25rem);
  border-color: #56645a;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.022), transparent 42%),
    linear-gradient(145deg, rgba(42,56,49,.98), rgba(30,41,37,.99));
  box-shadow: 0 9px 25px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.035);
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.alert, .notice, .announce {
  border-radius: 2px;
  box-shadow: inset 3px 0 rgba(255,255,255,.08);
}
.alert { border-color: #a95f50; background: linear-gradient(90deg, #452a25, #352421); }
.notice { background: linear-gradient(90deg, #344139, #2b3832); }
.announce { padding: .65rem clamp(.8rem, 2vw, 1.5rem); }

/* A quiet brass line gives each data region an editorial starting point. */
.panel h2::after, .adm h2::after {
  content: "";
  display: block;
  width: min(5.5rem, 30%);
  margin-top: .5rem;
  border-bottom: 2px solid rgba(228,179,110,.55);
}
.panel h3 { color: #edbd7c; }
.panel h4 { color: #d8d5c4; font-family: var(--stamp); letter-spacing: .06em; text-transform: uppercase; }

/* Tables and status records */
.tbl-wrap, .table-wrap { border: 1px solid rgba(144,154,132,.23); border-radius: 2px; }
table { font-variant-numeric: tabular-nums; }
th, td { padding: .55rem .62rem; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #303a32;
  color: #d2cbb4;
  border-bottom: 1px solid #75806b;
  font-size: 11px;
}
td { border-bottom: 1px solid rgba(134,145,127,.24); }
tbody tr:nth-child(even) td { background: rgba(8,14,12,.11); }
tr.clickable { transition: background-color .15s ease; }
tr.clickable:hover td, tbody tr:hover td { background: rgba(228,179,110,.075); }
tr.unread td { color: #f2c484; }
.slot-table td:last-child { white-space: nowrap; }

/* Inputs and controls: substantial hit areas with an unmistakable keyboard location. */
button, .btn {
  min-height: 2.65rem;
  border: 1px solid #edbd7c;
  border-radius: 2px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.16);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, filter .16s ease;
}
button:hover:not(:disabled), .btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button:active:not(:disabled), .btn:active { transform: translateY(0); }
button.ghost, .btn.ghost {
  border-color: #69776a;
  background: rgba(14,21,18,.3);
  color: #f0c78f;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
button.danger { border-color: #ed9b85; }
button.linklike { min-height: 2.2rem; box-shadow: none; }
button:disabled { filter: saturate(.45); box-shadow: none; }
input, textarea, select {
  max-width: 100%;
  border: 1px solid #758174;
  border-radius: 2px;
  background: #141c19;
  color: #f0ecdc;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.2);
  accent-color: #d5a565;
}
input::placeholder, textarea::placeholder { color: #999f91; opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: #a28d65; }
label { color: #c9c9b8; }
input[type="checkbox"], input[type="radio"] { accent-color: #d5a565; }
:focus-visible {
  outline: 2px solid #f2c883 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(228,179,110,.16);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: #edbd7c; }

/* Auth as the recruiting desk rather than a generic login card. */
.login { max-width: 480px; margin: clamp(2rem, 8vh, 5.5rem) auto; }
.login.wide { max-width: 1000px; }
.login h1 {
  position: relative;
  margin-bottom: .5rem;
  color: #f0c184;
  font-size: clamp(2.65rem, 8vw, 4.25rem);
  letter-spacing: .13em;
  text-shadow: 0 2px 0 #66442d, 0 12px 34px rgba(0,0,0,.45);
}
.login .tag { font-size: 13px; letter-spacing: .045em; }
.login .panel {
  border-top: 3px solid #bb8053;
  box-shadow: 0 22px 64px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.045);
}
.login .tabs button { min-height: 2.9rem; }
.login .tabs button.on { box-shadow: inset 0 -3px #f0c184; }
.login input:not([type=checkbox]) { min-height: 2.8rem; }
.nation-card {
  border-radius: 2px;
  background: rgba(14,21,18,.43);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.nation-card:hover { transform: translateY(-2px); }
.nation-card.on { box-shadow: inset 0 0 0 1px var(--nation), 0 5px 16px rgba(0,0,0,.17); }
.wide-btn { min-height: 3.1rem; }

/* War-map, illustrated base, and unit cards remain the visual centerpiece. */
.warmap {
  border-color: #77806a;
  border-radius: 2px;
  box-shadow: inset 0 0 0 4px rgba(15,20,15,.55), 0 12px 28px rgba(0,0,0,.25);
}
.warmap-tools { left: 12px; top: 12px; }
.warmap-tools button { width: 40px; height: 40px; border-color: #a58a57; }
.warmap-mini { border-color: #d3ad6b; }
.warmap-panel, .base-panel { border-top: 2px solid rgba(228,179,110,.55); }
.base-wrap { border-color: #667261; border-radius: 2px; box-shadow: 0 10px 26px rgba(0,0,0,.23); }
.unit-card {
  overflow: hidden;
  border-radius: 2px;
  border-color: #58675b;
  background: linear-gradient(145deg, #2c3832, #202a26);
  box-shadow: 0 7px 18px rgba(0,0,0,.15);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.unit-card:hover { transform: translateY(-3px); border-color: #a88858; box-shadow: 0 12px 25px rgba(0,0,0,.25); }
.unit-img { background: #28322b; }
.unit-body { padding: .9rem; }
.unit-name { color: #f0e7d1; }
.order-card {
  border-color: #58675b;
  border-top-color: #8a8060;
  border-radius: 2px;
  background: linear-gradient(145deg, #2d3933, #202a26);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.order-card.ready { border-top-color: var(--good); }
.order-card.ready .order-chain { color: #c4d4a6; }

/* Useful touch surfaces and legible narrow-screen layouts */
.modal-back { background: rgba(7,11,10,.78); backdrop-filter: blur(3px); }
.modal { border-color: #667362; border-top-color: #c8795d; border-radius: 3px; background: #26312c; }
#toast {
  z-index: 80;
  width: max-content;
  border-radius: 3px;
  box-shadow: 0 12px 36px rgba(0,0,0,.42);
  animation: toast-in .2s ease-out both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.adm-nav { gap: .25rem; }
.adm-nav a { min-height: 2.45rem; display: inline-flex; align-items: center; }
.adm-tile, .adm-msg { border-radius: 2px; }
.adm-tile { background: linear-gradient(145deg, #2d3933, #222c28); }
.adm-tile-value { color: #f1dfbd; font-variant-numeric: tabular-nums; }
.adm-bar-track { background: #17201c; }
.adm-bar-track i { background: linear-gradient(90deg, #b88750, #e5bd79); }
.adm-spark svg { max-width: 100%; }
.dispatch-head { border-color: #7a806d; }
.cost-card { border-radius: 2px; }
.kv { overflow-wrap: anywhere; }
.row { row-gap: .5rem; }
.rep-del-cell { width: 1%; text-align: right; }
button.rep-del { padding: .15rem .5rem; min-width: 2rem; min-height: 2rem; }

@media (max-width: 900px) {
  .resbar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .res:not(.res-card) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(238,233,217,.17); }
}
@media (max-width: 700px) {
  .resbar { gap: .3rem; padding: .45rem .65rem; }
  .res-card { grid-template-columns: 28px minmax(0,1fr); gap: .35rem; padding: .3rem; }
  .res-ico svg { width: 27px; height: 27px; }
  .res .val { font-size: 14px; }
  main { padding: 1rem .75rem 3rem; }
  .panel { margin-bottom: .8rem; }
  .grid2 { gap: .8rem; }
  .adm-bar-row { grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.5fr) 55px; gap: .35rem; }
  .adm-search input { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .resbar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .res .rate { font-size: 9px; }
  .login { margin: 2rem auto; padding: 0 8px; }
  .login h1 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .auth-row { align-items: flex-start; flex-direction: column; }
  .nation-grid { gap: .55rem; }
  .nation-card { padding: .75rem; }
  .panel { padding: .8rem; }
  th, td { padding: .45rem .5rem; }
  .warmap { height: min(68dvh, 620px); min-height: 350px; }
  .warmap-tools { left: 8px; top: 8px; }
  .warmap-tools button { width: 42px; height: 42px; }
  .modal-back { padding: 10px; }
  .modal { padding: .9rem; max-height: calc(100dvh - 20px); }
  .modal-actions { justify-content: stretch; }
  .modal-actions button { flex: 1; }
  .train-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.adm-bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bar-track { height: 12px; background: rgba(255,255,255,.04); }
.adm-bar-track i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.adm-bar-row:hover .adm-bar-track i { filter: brightness(1.2); }
.adm-bar-val { text-align: right; font-variant-numeric: tabular-nums; }
.adm-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.adm-spark { display: flex; flex-direction: column; gap: .2rem; }
.adm-spark svg { width: 100%; height: 90px; }
.adm-spark-now { font-size: 1.4rem; font-weight: 700; }
.adm-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.adm-axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.adm-pt circle { fill: var(--accent); stroke: var(--panel); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; }
.adm-pt:hover circle { opacity: 1; }
@media (max-width: 700px) { .adm-bar-row { grid-template-columns: 100px 1fr 60px; } }

/* Statistics page */
.stat-tabs { margin-bottom: 1rem; max-width: 560px; }
.stat-tabs a { flex: 1; text-align: center; padding: .45rem; border: 1px solid var(--line); font-family: var(--stamp); text-transform: uppercase; letter-spacing: .08em; }
.stat-tabs a.on { background: var(--accent); color: #1b1d16; }
.stat-find { gap: .5rem; margin-bottom: .6rem; max-width: 520px; }
.stat-find input { flex: 1; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.stat-card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.stat-label { font-family: var(--stamp); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--muted); }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; color: var(--muted); }
/* ---------- ranking charts */
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 1rem; margin: 0 0 1rem; }
.viz-grid > * { min-width: 0; }
.viz { margin: 0 0 1rem; }
.viz-grid .viz { margin: 0; }
.viz-title { margin: 0 0 .2rem; }
.hbars { display: grid; gap: .45rem; margin-top: .6rem; }
.hbar { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr 3.6rem; gap: .6rem; align-items: center; font-variant-numeric: tabular-nums; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { position: relative; height: 12px; background: rgba(238,233,217,.06); border-radius: 0 4px 4px 0; cursor: default; }
.hbar-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hbar-track > i { position: absolute; inset: 0 auto 0 0; background: #6b7872; border-radius: 0 4px 4px 0; }
.hbar.me .hbar-track > i, .hbars.compare .hbar-track > i { background: var(--accent); }
.hbar.me .hbar-label, .hbar.me .hbar-val { font-weight: 700; }
.hbar-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; }
.hbar-val { text-align: right; color: var(--text); }
.hbar-gap { text-align: center; color: var(--muted); line-height: .6; }
.donut-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.donut-pair figure { margin: 0; }
.donut-pair figcaption { font-family: var(--stamp); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .3rem; }
.donut { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.donut svg { width: 150px; height: 150px; flex: none; }
.donut svg path { cursor: default; }
.donut svg path:focus-visible { outline: none; stroke: var(--text); stroke-width: 2; }
.donut-num { fill: var(--text); font: 700 22px var(--mono); }
.donut-sub { fill: var(--muted); font: 10px var(--mono); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; min-width: 0; }
.donut-legend li { display: grid; grid-template-columns: 12px 1fr auto 3rem; gap: .5rem; align-items: center; font-variant-numeric: tabular-nums; }
.donut-legend li > :nth-child(4) { text-align: right; }
.donut-legend.inline { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .3rem 0 .6rem; }
.donut-legend.inline li { display: flex; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.stack-row { margin: .6rem 0 .9rem; }
.stack-head, .stack-labels { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.stack { display: flex; gap: 2px; height: 14px; margin: .3rem 0; }
.stack > i { display: block; min-width: 3px; }
.stack > i:first-child { border-radius: 4px 0 0 4px; }
.stack > i:last-child { border-radius: 0 4px 4px 0; }
.stack > i:only-child { border-radius: 4px; }
.viz-table { margin-top: .6rem; }
.viz-tip { position: absolute; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: .35rem .55rem; background: #111816; color: var(--text);
  border: 1px solid var(--line); font-size: .85rem; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
@media (max-width: 480px) {
  .hbar { grid-template-columns: 1fr 3.2rem; }
  .hbar-label { grid-column: 1 / -1; }
  .donut { justify-content: center; }
}

.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.stat-cols h4 { margin-top: 0; }
.stat-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.stat-row:last-child { border-bottom: 0; }
.stat-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.stat-picks .btn { font-size: 12px; padding: .3rem .6rem; }
.stat-picks .btn.ghost { background: transparent; color: var(--link); border: 1px solid var(--line); }
.stat-picks .btn.ghost:hover { color: var(--accent); border-color: var(--accent); }

/* Resource header: a card per resource with its own icon and colour */
.resbar { gap: .7rem 1rem; align-items: stretch; padding: .6rem 1rem; }
.res-card { flex-direction: row; align-items: center; gap: .6rem; min-width: 190px; padding: .35rem .7rem .4rem .45rem;
  background: rgba(0,0,0,.28); border: 1px solid var(--line); border-left: 3px solid var(--res); }
.res-card .res-ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.08), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.06); }
.res-card .res-icon { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.res-card .res-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.res-card .label { color: var(--res); font-size: 11px; letter-spacing: .14em; }
.res-card .val { font-size: 21px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.res-card .val .cap { font-size: 12px; font-weight: 400; color: var(--muted); text-shadow: none; }
.res-card .meter { height: 5px; margin-top: 3px; background: rgba(255,255,255,.08); }
.res-card .meter > i { background: var(--res); }
.res-card .rate { font-size: 11px; margin-top: 2px; }
.res-card .full-tag { display: none; margin-left: .4rem; padding: 0 .3rem; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #1b1d16; background: var(--warn); }
.res-card.full { border-color: var(--warn); border-left-color: var(--warn); }
.res-card.full .val { color: var(--warn); }
.res-card.full .meter > i { background: var(--warn); }
.res-card.full .full-tag { display: inline-block; }
@media (max-width: 700px) {
  .resbar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .5rem; }
  .resbar > .res:not(.res-card) { grid-column: 1 / -1; }
  .res-card { min-width: 0; gap: .4rem; padding: .3rem .45rem .35rem .3rem; }
  .res-card .res-ico { width: 34px; height: 34px; }
  .res-card .res-icon { width: 28px; height: 28px; }
  .res-card .val { font-size: 17px; }
  .res-card .val .cap { display: block; font-size: 11px; }
}

/* costs with resource icons */
.cost { display: inline-flex; flex-wrap: wrap; gap: .15rem .7rem; align-items: center; }
.cost span { margin-right: 0; display: inline-flex; align-items: center; gap: .2rem; font-variant-numeric: tabular-nums; }
.cost .res-icon { flex: 0 0 auto; }

/* Upgrade cost panel (base detail panel) */
.cost-panel { margin: .8rem 0 .4rem; padding: .7rem; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.cost-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .55rem; }
.cost-title { font-family: var(--stamp); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--muted); }
.cost-time { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.cost-card { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--res); min-width: 0; }
.cost-card.short { border-color: rgba(224,113,91,.55); border-left-color: var(--bad); }
.cost-ico { flex: 0 0 auto; display: grid; place-items: center; }
.cost-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cost-need { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cost-card.short .cost-need { color: var(--bad); }
.cost-bar { height: 4px; margin: 3px 0 2px; background: rgba(255,255,255,.08); }
.cost-bar i { display: block; height: 100%; background: var(--res); }
.cost-card.short .cost-bar i { background: var(--bad); }
.cost-have { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cost-card.short .cost-have b { color: var(--bad); }
.cost-card.ok .cost-have { color: var(--good); }
.cost-foot { margin-top: .5rem; color: var(--muted); }
.cost-foot b { color: var(--text); }
td .cost { display: inline-grid; grid-template-columns: repeat(2, minmax(62px, auto)); gap: .1rem .8rem; }

/* Orders from High Command: list view */
.order-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; padding: .8rem 1rem; margin: .6rem 0 1rem;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); }
.order-summary.has-ready { border-left-color: var(--good); background: linear-gradient(90deg, rgba(167,197,139,.12), transparent 60%), var(--panel); }
.order-summary-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.order-tabs { margin-bottom: .8rem; }
.order-group { background: var(--panel); border: 1px solid var(--line); margin-bottom: 1rem; padding: .8rem 1rem .4rem; }
.order-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.order-group-count { margin-left: auto; }
.order-group-desc { margin: .25rem 0 .4rem; }
.good-chip { color: var(--good); border-color: var(--good); }
.order-chain-bar { display: block; height: 5px; margin-bottom: .3rem; }
.order-chain-bar i { background: var(--accent); }
.order-list { list-style: none; margin: 0; padding: 0; }
.order-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto 5.5rem; gap: .4rem .8rem; align-items: center;
  padding: .55rem 0; border-top: 1px dashed var(--line); }
.order-row.claimed { opacity: .6; }
.order-row.ready { background: linear-gradient(90deg, rgba(167,197,139,.11), transparent 70%); }
.order-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.order-row .order-title { font-family: var(--typewriter); color: var(--text); }
.order-state { font: 700 11px var(--stamp); text-transform: uppercase; letter-spacing: .06em; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 3px; white-space: nowrap; }
.order-state.ready { color: #15170f; background: var(--good); border-color: var(--good); }
.order-state.claimed { color: var(--muted); }
.order-state.open { color: var(--accent); min-width: 3rem; text-align: center; }
.order-bar { display: block; height: 6px; margin-top: .3rem; max-width: 340px; }
.order-bar i { background: var(--accent); }
.order-reward { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.order-rw { display: inline-flex; flex-wrap: wrap; gap: .15rem .6rem; font-variant-numeric: tabular-nums; }
.order-rw span { display: inline-flex; align-items: center; gap: .2rem; }
.order-act { text-align: right; }
.order-check { width: 1.05rem; height: 1.05rem; accent-color: var(--good); }
@media (max-width: 640px) {
  .order-row { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .order-reward { grid-column: 2 / 3; align-items: flex-start; }
  .order-act { grid-column: 3; grid-row: 1 / span 2; }
}

/* Command HQ: event being edited */
.adm-table tr.adm-editing td { background: rgba(217,194,122,.10); }
.adm-edit-panel { border-color: var(--accent); border-top: 3px solid var(--accent); }

/* Troops at home: tile grid */
.troop-panel { background: var(--panel); border: 1px solid var(--line); padding: .7rem .8rem; margin-bottom: 1rem; }
.troop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem .8rem; margin-bottom: .6rem; }
.troop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .5rem; }
.troop-tile { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.troop-tile.none { opacity: .55; }
.troop-tile.pick { cursor: pointer; transition: border-color .15s, transform .15s; }
.troop-tile.pick:hover, .troop-tile.pick:focus-visible { border-color: var(--accent); transform: translateY(-1px); outline: none; }
.troop-pic { aspect-ratio: 5 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #2b2b28; line-height: 0; }
.troop-pic .unit-art { width: 100%; height: 100%; display: block; }
.troop-info { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: baseline; padding: .35rem .5rem .45rem; }
.troop-n { grid-row: span 2; font: 700 1.5rem var(--typewriter); color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.troop-name { font: 700 12px var(--stamp); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; overflow-wrap: anywhere; }
.troop-cls { font-size: 11px; }
@media (max-width: 480px) { .troop-grid { grid-template-columns: repeat(2, 1fr); } }

/* Black Market */
.market-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; margin-bottom: .4rem; }
.market-trucks { flex: 1 1 100%; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; column-gap: 1rem !important; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.big-num { font: 700 1.5rem var(--typewriter); color: var(--accent); }
.truck-pips { margin-left: .4rem; letter-spacing: .1rem; }
.truck-pip { filter: grayscale(1); opacity: .35; }
.truck-pip.free { filter: none; opacity: 1; }
.market-stock { flex: 2 1 420px; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.stock-cell { display: flex; align-items: center; gap: .45rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--res); padding: .45rem .6rem; }
.stock-cell div { display: flex; flex-direction: column; line-height: 1.2; }
.stock-cell b { font: 700 1.05rem var(--typewriter); font-variant-numeric: tabular-nums; }
.res-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin: .35rem 0 .6rem; }
.res-opt { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .2rem; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.res-opt input { position: absolute; opacity: 0; pointer-events: none; }
.res-opt:hover { border-color: var(--res); }
.res-opt:has(input:checked) { border-color: var(--res); box-shadow: 0 0 0 1px var(--res) inset; background: var(--panel-2); color: var(--text); }
.res-opt:has(input:focus-visible) { outline: 2px solid var(--accent); }
.res-amt { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; }
.res-amt b { color: var(--res); }
.res-amt.big b { font-size: 1.05rem; }
.offer-arrow { color: var(--muted); font-size: 1.1rem; text-align: center; padding-left: 0; padding-right: 0; }
.offer-table td { vertical-align: middle; }
.rate-chip { font: 700 12px var(--typewriter); padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 3px; }
.rate-chip.good { color: var(--good); border-color: var(--good); }
.rate-chip.bad { color: var(--bad); border-color: var(--bad); }
.res-filter { display: flex; flex-wrap: wrap; gap: .3rem; }
.res-filter button { display: inline-flex; align-items: center; gap: .25rem; font-size: 12px; padding: .2rem .55rem; }
.res-filter button.on { box-shadow: 0 0 0 1px var(--res, var(--accent)) inset; }
.smuggle-out { min-height: 1.6rem; }
.ship-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin: .6rem 0; }
.ship-cell { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .45rem; align-items: center; padding: .4rem .5rem; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--res); }
.ship-cell svg { grid-row: span 2; }
.ship-cell span { display: flex; justify-content: space-between; gap: .3rem; }
.ship-cell input { width: 100%; }
@media (max-width: 640px) { .market-stock { grid-template-columns: repeat(2, 1fr); } .res-opt span { display: none; } }

/* Command Post: tabs and raid lists */
.cmd-tabs { margin-bottom: 1rem; }
.raid-lists-bar { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.raid-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.raid-table td { vertical-align: middle; }
.raid-row.editing td { background: rgba(217,194,122,.08); }
.raid-edit-row td { background: rgba(217,194,122,.05); border-bottom: 1px solid var(--accent); }
.unit-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.unit-chip { display: inline-flex; align-items: center; gap: .35rem; padding: 2px .45rem 2px 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); white-space: nowrap; }
.unit-chip b { font: 700 .95rem var(--typewriter); color: var(--accent); font-variant-numeric: tabular-nums; }
.unit-chip-name { font-size: 12px; }
.unit-thumb { display: inline-block; width: 44px; height: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: #2b2b28; line-height: 0; flex: none; }
.unit-thumb .unit-art { width: 100%; height: 100%; display: block; }
.raid-unit-label { display: flex; align-items: center; gap: .4rem; }
.raid-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: .4rem .6rem; margin: .6rem 0; }
.raid-unit { display: flex; flex-direction: column; gap: .15rem; }
.raid-unit input { width: 100%; }
.raid-send { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.raid-send #raid-need { flex: 1 1 300px; }

/* Bunker Line panel and training queue */
.bunker-panel { border-left: 3px solid var(--good); }
.bunker-big { display: flex; align-items: baseline; gap: .6rem; }
.bunker-big b { font: 700 1.8rem var(--typewriter); color: var(--good); }
.train-queue-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem .8rem; margin-bottom: .5rem; }
.train-queue tr.training-now td { background: rgba(143,191,106,.08); }
.train-queue td { vertical-align: middle; }

/* Smuggler window for an upgrade */
.modal:has(.smug-table) { max-width: 680px; }
.smug-table { width: 100%; border-collapse: collapse; margin: .4rem 0; }
.smug-table th, .smug-table td { padding: .3rem .4rem; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.smug-table th { text-align: right; border-bottom: 2px solid var(--res, var(--line)); }
.smug-table th .small { text-transform: uppercase; letter-spacing: .04em; }
.smug-new td { background: rgba(217,194,122,.08); }
.smug-in { width: 6.2rem; text-align: right; }
.smug-left { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .8rem; margin: .4rem 0; }
.smug-left > div:first-child { display: flex; align-items: baseline; gap: .6rem; }
.smug-left #smug-left { font: 700 1.5rem var(--typewriter); }
.smug-table th .res-icon { width: 26px; height: 26px; }
.modal [data-modal="yes"]:disabled { opacity: .45; cursor: not-allowed; }

/* Training: building picker */
.train-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1rem 0 .4rem; }
button.finish-now { display: inline-flex; align-items: center; gap: .3rem; }
.finish-list { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
.finish-list li { margin: .2rem 0; }
.heal-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.heal-row input { width: 5rem; }
.heal-table td { vertical-align: middle; }
@media (max-width: 640px) {
  .heal-table thead { display: none; }
  .heal-table tr { display: grid; gap: .35rem; padding: .5rem .2rem; border-bottom: 1px solid var(--line); }
  .heal-table td { display: block; border: 0; padding: 0; }
}
.train-tab { display: flex; flex-direction: column; padding: 0; text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-bottom: 3px solid var(--line); overflow: hidden; cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0; }
.train-tab:hover { border-color: var(--accent); }
.train-tab.on { border-color: var(--accent); border-bottom-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.train-tab.locked .train-tab-art { filter: grayscale(.85) brightness(.6); }
.train-tab-art { display: block; aspect-ratio: 5 / 2; overflow: hidden; line-height: 0; background: #2b2b28; }
.train-tab-art .unit-art { width: 100%; height: 100%; display: block; }
.train-tab-text { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .6rem .55rem; }
.train-tab-text b { font: 700 1.05rem var(--stencil); color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.train-tab.on .train-tab-text b { color: var(--text); }
@media (max-width: 640px) { .train-tabs { grid-template-columns: 1fr 1fr; gap: .35rem; } .train-tab-text .muted { display: none; } }

/* Messages: conversation list and chat history */
.convo-list { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); }
.convo { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: .3rem 1rem; align-items: center; padding: .6rem .8rem; border-bottom: 1px dashed var(--line); color: var(--text); text-decoration: none; }
.convo:last-child { border-bottom: 0; }
.convo:hover { background: var(--panel-2); }
.convo.unread { border-left: 3px solid var(--accent); }
.convo.unread .convo-last { color: var(--text); font-weight: 700; }
.convo-who { display: flex; align-items: center; gap: .4rem; }
.convo-who .badge { background: var(--bad); color: #fff; border-radius: 8px; padding: 0 .35rem; font-size: 11px; }
.convo-last { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.chat-log { display: flex; flex-direction: column; gap: .45rem; max-height: min(62vh, 640px); overflow-y: auto; padding: .8rem; }
.chat-day { align-self: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: .4rem 0 .1rem; }
.chat-msg { max-width: min(78%, 620px); padding: .45rem .7rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.chat-msg.mine { align-self: flex-end; background: #34361f; border-color: #57593a; }
.chat-msg.theirs { align-self: flex-start; }
.chat-subject { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: .15rem; }
.chat-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--typewriter); }
.chat-meta { font-size: 11px; color: var(--muted); text-align: right; margin-top: .2rem; }
.chat-form { display: flex; gap: .5rem; align-items: stretch; margin-top: .6rem; }
.chat-form textarea { flex: 1; min-height: 3.2rem; resize: vertical; }
@media (max-width: 640px) { .convo { grid-template-columns: 1fr; } .chat-msg { max-width: 92%; } }

/* Trade reports: goods with resource icons */
.report-goods { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: center; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.report-cargo { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }

/* Send supplies: truck capacity */
.ship-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .5rem 0; }
.ship-cap > div { display: flex; flex-direction: column; padding: .4rem .55rem; background: var(--bg); border: 1px solid var(--line); border-top: 2px solid var(--accent); }
.ship-cap b { font: 700 1.15rem var(--typewriter); font-variant-numeric: tabular-nums; }
.ship-load { margin: .4rem 0; }
.ship-load-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.ship-load-head > span:first-child { white-space: nowrap; }
.ship-load-head > span:last-child { text-align: right; }
.ship-bar { display: block; height: 8px; }
.ship-bar i { background: var(--good); transition: width .15s; }
.ship-bar i.over { background: var(--bad); }

/* Who is at the typed coordinates */
.target-who { min-height: 1.3rem; font-size: 13px; margin: .25rem 0 .4rem; }

/* ---------------------------------------------------------------- store (War Bonds) */
.bond-ico { vertical-align: -3px; flex: none; }
.bond-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-weight: 700; position: relative; }
.bond-chip:hover { border-color: var(--accent); text-decoration: none; }
.perk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); margin-left: .15rem; }
.perk-tag { display: inline-block; font-size: .72rem; line-height: 1.2; padding: 0 .3rem; border: 1px solid var(--good); color: var(--good); }
.store-card.perk { border-top: 3px solid var(--res, var(--line)); }
.bond-balance { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.15rem; padding: .35rem .8rem; border: 1px solid var(--accent); background: var(--panel); }
.bond-balance b { font-size: 1.4rem; color: var(--accent); }
.store-h { margin-top: 1.6rem; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .8rem; }
.store-grid.pkgs { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.store-card { background: var(--panel); border: 1px solid var(--line); padding: 1rem; position: relative; display: flex; flex-direction: column; }
.store-card h3 { margin: 0; }
.store-card.perk.on { border-color: var(--good); box-shadow: inset 0 0 0 1px rgba(143,191,106,.25); }
.store-card-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.perk-ico { display: inline-flex; gap: 2px; }
.store-card .pill { font-size: .75rem; padding: 0 .45rem; border: 1px solid currentColor; }
.store-card.pkg { align-items: center; text-align: center; gap: .35rem; }
.pkg-amount { display: flex; align-items: center; gap: .4rem; font-size: 1.7rem; color: var(--accent); margin-top: .4rem; }
.pkg-price { font-size: 1.2rem; font-weight: 700; }
.pkg-tag { position: absolute; top: -.6rem; right: .6rem; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; padding: 0 .45rem; text-transform: uppercase; letter-spacing: .04em; }
.pkg-pay { display: flex; flex-direction: column; gap: .35rem; width: 100%; margin-top: auto; padding-top: .5rem; }
.pkg-pay button { width: 100%; }
button.paypal { background: #ffc439; color: #111; border-color: #e0a800; }
.store-consent { display: flex; gap: .5rem; align-items: flex-start; margin: .2rem 0 .9rem; padding: .6rem .8rem; background: var(--panel-2); border: 1px solid var(--line); font-size: .9rem; cursor: pointer; }
.store-consent input { margin-top: .25rem; }
.store-card.perk > p.row { margin-top: auto; margin-bottom: 0; }

/* Smuggler on phones: the table turns on its side (one row per resource) so all four fit the screen */
@media (max-width: 600px) {
  .modal { padding: .9rem .8rem; }
  .smug-table { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
    grid-template-columns: 2.2rem repeat(4, minmax(0, 1fr)); font-size: .85rem; }
  .smug-table thead, .smug-table tbody, .smug-table tr { display: contents; }
  .smug-table tr.smug-cap { display: none; }
  .smug-table th, .smug-table td { padding: .35rem .25rem; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
  .smug-table th { justify-content: center; border-bottom: 1px dashed var(--line); border-left: 3px solid var(--res, transparent); }
  .smug-table th .small { display: none; }
  .smug-table tr > td:first-child { font-size: .72rem; line-height: 1.2; align-items: flex-end; text-align: right; border-bottom: 2px solid var(--line); }
  .smug-in { width: 100%; min-width: 0; font-size: 16px; padding: .25rem .3rem; }
  .smug-left .row { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- phones */
.cdr { white-space: nowrap; }
@media (max-width: 560px) {
  .hide-sm { display: none !important; }
  .login { margin: 1.7rem auto 2.5rem; }
  .login.wide { max-width: 100%; }
  .login h1 { letter-spacing: .075em; }
  .login .panel { padding: 1rem; }
  .resbar { gap: .35rem; padding: .4rem; }
  .res-card { padding: .25rem .4rem .3rem .3rem; gap: .35rem; }
  .res-card .res-ico { width: 28px; height: 28px; }
  .res-card .res-icon { width: 22px; height: 22px; }
  .res-card .label { font-size: 10px; }
  .res-card .val { font-size: 15px; }
  .res-card .val .cap { display: inline; font-size: 10px; }
  .res-card .rate { font-size: 10px; }
  .resbar > .res:not(.res-card) { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
  .resbar > .res:not(.res-card) .label { display: none; }
  main { padding: .9rem .7rem 3rem; }
  h2 { font-size: 1.25rem; }
}
@media (max-width: 560px) {
  .stat-tabs a { min-width: 0; padding: .4rem .2rem; font-size: 11px; letter-spacing: .02em; overflow-wrap: anywhere; }
}
/* grid columns may shrink below their content (tables and wide rows scroll inside instead) */
.grid2 > *, .adm-cols > *, .stat-cols > *, .store-grid > *, .unit-grid > *, .order-grid > *, .base-layout > *, .warmap-layout > * { min-width: 0; }
@media (max-width: 560px) {
  .tabs { flex-wrap: wrap; }
  .tabs button { flex: 1 1 40%; padding-left: .4rem; padding-right: .4rem; }
}
@media (max-width: 560px) {
  /* Outpost list view: each building / field becomes a small card */
  .slot-table thead { display: none; }
  .slot-table, .slot-table tbody { display: block; }
  .slot-table tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
  .slot-table td { display: block; padding: 0; border: 0; }
  .slot-table td:nth-child(1) { font-weight: 700; align-self: center; }
  .slot-table td:nth-child(3), .slot-table td:nth-child(4) { grid-column: 1 / -1; }
  .slot-table td:nth-child(5) { align-self: center; }
  .slot-table td:nth-child(5):not(:empty)::before { content: "⏱ "; }
  /* Raid lists: each target becomes a card */
  .raid-table thead { display: none; }
  .raid-table, .raid-table tbody { display: block; }
  .raid-table tr.raid-row { display: grid; grid-template-columns: 1.8rem 1fr auto; grid-template-areas: "chk tgt act" ". trp trp" ". trip last";
    gap: .35rem .5rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
  .raid-table tr.raid-row td { display: block; padding: 0; border: 0; min-width: 0; }
  .raid-table tr.raid-row td:nth-child(1) { grid-area: chk; }
  .raid-table tr.raid-row td:nth-child(2) { grid-area: tgt; }
  .raid-table tr.raid-row td:nth-child(3) { grid-area: trp; }
  .raid-table tr.raid-row td:nth-child(4) { grid-area: trip; white-space: normal; }
  .raid-table tr.raid-row td:nth-child(5) { grid-area: last; }
  .raid-table tr.raid-row td:nth-child(6) { grid-area: act; }
  .raid-table tr.raid-edit-row { display: block; }
  .raid-table tr.raid-edit-row td { display: block; padding: .4rem 0; }
  .raid-table tr.raid-edit-row td:first-child { display: none; }
  .raid-table .raid-check { width: 20px; height: 20px; }
}
.upkeep-note { white-space: nowrap; }
@media (max-width: 560px) {
  /* Black Market offers: one card per offer, with the Accept / Withdraw button always visible */
  .offer-table thead { display: none; }
  .offer-table, .offer-table tbody { display: block; }
  .offer-table tr.offer-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: end;
    grid-template-areas: "get arr pay rate" "cmd cmd cmd trip" "act act act act"; gap: .35rem .5rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
  .offer-table tr.offer-row td { display: block; padding: 0; border: 0; min-width: 0; }
  .offer-table td:nth-child(1) { grid-area: get; }
  .offer-table td:nth-child(2) { grid-area: arr; padding-bottom: .1rem; }
  .offer-table td:nth-child(3) { grid-area: pay; }
  .offer-table td:nth-child(4) { grid-area: rate; justify-self: end; }
  .offer-table td:nth-child(5) { grid-area: cmd; }
  .offer-table td:nth-child(6) { grid-area: trip; text-align: right; }
  .offer-table td:nth-child(7) { grid-area: act; text-align: right; }
  .offer-table td[data-l]::before { content: attr(data-l); display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 560px) {
  /* stacked tables (Command HQ, Store history): one card per row, "Column: value" lines */
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody { display: block; width: 100%; }
  table.stack-sm tr { display: block; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
  table.stack-sm td { display: block; position: relative; padding: .12rem 0; border: 0; text-align: left !important; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  table.stack-sm td[data-l]:not([data-l=""]) { padding-left: 36%; min-height: 1.4em; }
  table.stack-sm td[data-l]:not([data-l=""])::before { content: attr(data-l); position: absolute; left: 0; top: .3rem; width: 33%; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
  table.stack-sm td:empty { display: none; }
}
.swipe-hint { display: none; margin: 0 0 .3rem; }
@media (max-width: 700px) { .swipe-hint { display: block; } }

/* Last-mile cascade for the legacy phone rules above. */
@media (max-width: 560px) {
  .resbar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .3rem; padding: .45rem .65rem; }
  .resbar > .res:not(.res-card) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(238,233,217,.17); padding-top: .5rem; }
  .resbar > .res:not(.res-card) .label { display: block; }
  .res-card { grid-template-columns: 28px minmax(0,1fr); }
  .res-card .val { font-size: 14px; }
  .login { margin: 2rem auto; }
  .login h1 { letter-spacing: .13em; }
  .login .panel { padding: clamp(1rem, 3vw, 1.5rem); }
}

/* ---------------------------------------------------------------- app shell: side menu + slim header */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100dvh; }
.shell-main { min-width: 0; display: flex; flex-direction: column; }
.shell-main > main { flex: 1; width: 100%; margin: 0 auto; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--stencil); color: #efbd7e;
  letter-spacing: .12em; white-space: nowrap; text-shadow: 0 2px 0 #453527;
}
.brand:hover { color: #ffd098; text-decoration: none; }

.sidenav {
  position: sticky; top: 0; height: 100dvh; z-index: 20;
  display: flex; flex-direction: column; gap: .4rem; overflow: hidden;
  padding: .9rem .6rem .7rem; border-right: 1px solid #4a574f; border-top: 3px solid #bd8658;
  background: linear-gradient(180deg, #25322d, #1c2522 70%, #19211e);
  box-shadow: 6px 0 24px rgba(0,0,0,.25);
}
.sidenav > .brand { font-size: .9rem; letter-spacing: .07em; gap: .5rem; padding: .1rem .3rem .7rem; border-bottom: 1px solid rgba(238,233,217,.12); }
.sidenav > .brand::before {
  content: "✦"; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; flex: none;
  border: 1px solid rgba(228,179,110,.65); color: var(--accent); font: .85rem/1 var(--stamp); transform: rotate(45deg);
}
.nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .55rem; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-title { padding: 0 .6rem .15rem; color: #8f9486; font: 700 10px var(--stamp); text-transform: uppercase; letter-spacing: .18em; }
.nav a {
  display: flex; align-items: center; gap: .6rem; min-height: 2.15rem; padding: .3rem .6rem;
  border-left: 2px solid transparent; color: #d9d6c8;
  font: 700 12.5px var(--stamp); text-transform: uppercase; letter-spacing: .08em;
  transition: color .15s, background-color .15s, border-color .15s;
}
.nav a:hover { background: rgba(228,179,110,.08); color: #ffcf94; text-decoration: none; }
.nav a.active { background: rgba(228,179,110,.13); border-left-color: var(--accent); color: #ffd098; }
.nav-ico { flex: none; opacity: .8; }
.nav a.active .nav-ico { opacity: 1; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .badge {
  min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; display: inline-grid; place-items: center; border-radius: 2px;
  background: #bf6956; color: #fff0d9; font: 700 10px/1 var(--mono); letter-spacing: 0;
}
.side-foot { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .45rem 0; border-top: 1px solid rgba(238,233,217,.12); font-size: 13px; color: var(--muted); }
.side-foot .cdr { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.side-foot .cdr > span { overflow: hidden; text-overflow: ellipsis; }
.side-foot button { width: 100%; min-height: 2.1rem; padding: .25rem .5rem; font-size: 12px; }
/* short screens: tighten the menu so it always fits without scrolling */
@media (max-height: 700px) and (min-width: 861px) {
  .sidenav { gap: .25rem; padding-top: .6rem; }
  .sidenav > .brand { padding-bottom: .45rem; }
  .nav { gap: .3rem; }
  .nav-title { display: none; }
  .nav a { min-height: 1.85rem; padding-top: .15rem; padding-bottom: .15rem; }
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .6rem; min-height: 3rem;
  padding: .45rem clamp(.8rem, 2.4vw, 2rem);
  border-bottom: 1px solid #4a574f; background: linear-gradient(110deg, #26332e, #1f2926);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.topbar .user { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; color: var(--muted); }
.prot-chip { padding: .1rem .5rem; border: 1px solid rgba(167,197,139,.5); color: var(--good); font-size: 12px; white-space: nowrap; }
button.prot-chip { background: transparent; box-shadow: none; text-transform: none; letter-spacing: 0; min-height: 0; font-family: inherit; font-weight: 400; cursor: pointer; }
button.prot-chip:hover { border-color: var(--good); background: rgba(167,197,139,.1); }
.nav-toggle, .brand-sm, .nav-scrim { display: none; }
.nav-toggle { position: relative; padding: .2rem .6rem; font-size: 18px; line-height: 1; min-height: 2.3rem; }
.nav-toggle .dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }

/* tablets and phones: the menu slides in from the left */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidenav { position: fixed; left: 0; top: 0; bottom: 0; width: min(260px, 82vw); height: auto; z-index: 60;
    transform: translateX(-102%); transition: transform .2s ease; }
  body.nav-open .sidenav { transform: none; }
  .nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); }
  body.nav-open .nav-scrim { display: block; }
  .nav-toggle, .brand-sm { display: inline-flex; align-items: center; }
  .brand-sm { font-size: 1.05rem; }
  .topbar { padding: .4rem .6rem; }
  .topbar .user { gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }
.bond-chip .chip-label { margin-left: .2rem; padding-left: .45rem; border-left: 1px solid var(--line); font: 700 11px var(--stamp); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 560px) { .bond-chip .chip-label { display: none; } }

/* ---------------------------------------------------------------- v0.39: quality-of-life pieces */
.small-btn { min-height: 1.9rem; padding: .15rem .6rem; font-size: 11px; }
.unit-clear { margin-left: .4rem; }
.inline-label { display: inline; margin: 0; color: var(--muted); font-family: var(--stamp); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.afford-in { display: inline-block; margin-top: .2rem; color: var(--muted); white-space: nowrap; }
.afford-in .timer { font-weight: 700; }
.smug-left-tag { font-size: 11px; letter-spacing: .02em; text-transform: none; margin-left: .3rem; }
.heal-all { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; border-left: 3px solid var(--good); }
.heal-all-act { text-align: right; }
.bond-amt { display: inline-flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.bond-h { display: flex; align-items: center; gap: .45rem; }
.report-bonds { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: .7rem .9rem; margin-bottom: .8rem;
  background: linear-gradient(90deg, rgba(217,194,122,.14), transparent 70%); border: 1px solid rgba(217,194,122,.45); border-left: 3px solid var(--accent); }
.report-bonds > div { display: flex; flex-direction: column; flex: 1; min-width: 10rem; }
.report-bonds b { font: 700 1.6rem var(--typewriter); color: var(--accent); line-height: 1.1; }
.report-bonds .muted { display: inline-flex; align-items: center; gap: .25rem; }

/* raid lists: sort, result colours, full / empty markers */
.raid-tools { justify-content: flex-start; gap: .5rem .8rem; margin-bottom: .6rem; }
.raid-tools select { min-height: 2.2rem; padding: .2rem .5rem; }
.raid-tools .danger-ghost { margin-left: auto; }
button.danger-ghost { color: var(--bad); border-color: rgba(228,134,114,.6); }
.raid-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; color: var(--muted); }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: .3rem; }
.lg-clean { background: var(--good); } .lg-losses { background: #e39a4a; } .lg-lost { background: var(--bad); }
.raid-row > td:first-child { border-left: 4px solid transparent; }
.raid-row.raid-clean > td:first-child { border-left-color: var(--good); }
.raid-row.raid-losses > td:first-child { border-left-color: #e39a4a; }
.raid-row.raid-lost > td:first-child { border-left-color: var(--bad); }
.raid-row.raid-lost td { background: rgba(228,134,114,.07); }
.raid-row.raid-losses td { background: rgba(227,154,74,.05); }
.chip.full-chip { display: inline-block; margin-top: .2rem; color: #15170f; background: var(--warn); border: 1px solid var(--warn); }
.chip.empty-chip { display: inline-block; margin-top: .2rem; color: var(--muted); border: 1px dashed var(--line); }

/* reports: filters, loot against carry space, quick actions */
.rep-filters { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .8rem; }
.rep-filters button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .2rem .7rem; font-size: 12px; }
.rep-filters .badge { background: #bf6956; color: #fff0d9; border-radius: 2px; padding: 0 .3rem; font: 700 10px/1.4 var(--mono); }
.rep-res { width: 1.6rem; text-align: center; font-weight: 700; }
.loot-cap { margin: .4rem 0 .2rem; max-width: 520px; }
.loot-cap-head { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }
.loot-bar { display: block; height: 9px; }
.loot-bar i { background: var(--good); }
.loot-bar i.full { background: var(--warn); }
.loot-bar i.low { background: var(--bad); }
.report-actions { margin-top: .2rem; }

/* messages: blocked commanders */
.blocked-list { margin-top: 1rem; padding: .6rem .8rem; border: 1px solid var(--line); background: var(--panel); }
.blocked-list ul { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.blocked-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

/* war map header: search + reach */
.map-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .6rem; }
.map-head h2 { margin-right: auto !important; }
.map-search input { width: 13rem; min-height: 2.3rem; }
.map-search button, .map-reach select { min-height: 2.3rem; }
.map-reach select { padding: .2rem .4rem; max-width: 14rem; }

/* home base: a cleaner frame around the illustrated camp */
.base-wrap { background: radial-gradient(ellipse at 50% 40%, #2a3322, #151a12); border: 1px solid #6d7a5e; border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,248,220,.05); overflow: hidden; }
.base-svg .zone { font-size: 11px; letter-spacing: .32em; fill: rgba(245,238,214,.72); paint-order: stroke; stroke: rgba(12,15,10,.55); stroke-width: 3px; }
/* phones: the base is wider than the screen, so its frame scrolls sideways */
@media (max-width: 700px) { .base-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } }

.base-svg .plot-name { font-size: 11.5px; stroke-width: 3.4px; }
.base-panel { border-radius: 4px; }

/* ---------------------------------------------------------------- no page scroll bar
   The menu, top bar and resources stay put; only the page area scrolls, and scroll bars are hidden
   everywhere (wheel, touch and keyboard still scroll). Big pages size themselves to the screen. */
html, body { height: 100%; overflow: hidden; }
#app { height: 100dvh; overflow-y: auto; overflow-x: hidden; }
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
.shell { height: 100dvh; min-height: 0; overflow: hidden; }
.sidenav { height: 100dvh; }
.shell-main { height: 100dvh; min-height: 0; overflow: hidden; }
.shell-main > .topbar, .shell-main > .announce, .shell-main > .resbar { flex: none; }
.topbar { position: relative; }
/* a menu click shows at once: the page dims and a thin bar runs while its data loads */
body.loading .shell-main > main { opacity: .55; transition: opacity .12s ease .08s; pointer-events: none; }
body.loading .topbar::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 35%; background: var(--accent); animation: loadbar .9s ease-in-out infinite; }
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.shell-main > main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 1.2rem; }
main { min-height: 0; }
main > * { flex-shrink: 0; }
.resbar { padding-top: .45rem; padding-bottom: .45rem; }

@media (min-width: 861px) {
  /* Outpost (base view), War Map and a conversation fill exactly the space left on screen */
  main.page-village, main.page-map, main.page-messages { display: flex; flex-direction: column; }
  main.page-village > .base-layout { flex: 1 1 0; min-height: 340px; }
  main.page-village .base-layout > * { min-height: 0; height: 100%; }
  main.page-village .base-wrap { display: flex; align-items: center; justify-content: center; }
  main.page-village .base-svg { width: 100%; height: 100%; }
  main.page-village .base-panel { overflow-y: auto; margin-bottom: 0; }
  main.page-village > .legend { margin: .5rem 0 0; }
  main.page-village > .panel.build-slots { padding: .55rem .9rem; margin-bottom: .6rem; }
  main.page-village h2 { margin-bottom: .3rem; }
  main.page-map > .warmap-layout { flex: 1 1 0; min-height: 360px; align-items: stretch; }
  main.page-map .warmap { height: 100%; }
  main.page-map .warmap-panel { overflow-y: auto; margin-bottom: 0; }
  main.page-map > .legend { margin: .5rem 0 0; }
  main.page-messages > .chat-log { flex: 1 1 0; min-height: 200px; max-height: none; }
}
@media (max-width: 860px) { .shell-main > main { padding-bottom: 2rem; } }

/* ---------------------------------------------------------------- v0.39.1: slimmer command strip + polish */
/* resources live in the top bar: one slim strip instead of a header plus a tall resource band */
.shell .topbar { gap: .7rem; min-height: 3.6rem; padding: .4rem clamp(.7rem, 1.8vw, 1.4rem); flex-wrap: nowrap; }
.shell .topbar .resbar {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: .45rem;
  padding: 0; margin: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none;
}
.shell .topbar .res-card {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .45rem;
  padding: .28rem .55rem .3rem .35rem; border: 1px solid rgba(238,233,217,.11); border-left: 3px solid var(--res);
  border-radius: 3px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
}
.shell .topbar .res-card .res-ico { width: 30px; height: 30px; border: 0; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.07), transparent 70%); }
.shell .topbar .res-card .res-icon { width: 24px; height: 24px; }
.shell .topbar .res-card .res-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .35rem; }
.shell .topbar .res-card .label { display: none; }
.shell .topbar .res-card .val { font-size: 15.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .topbar .res-card .val .cap { display: inline; font-size: 10.5px; }
.shell .topbar .res-card .meter { grid-column: 1 / -1; height: 3px; margin: .15rem 0 .1rem; }
.shell .topbar .res-card .rate { grid-column: 1 / -1; font-size: 10.5px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .topbar .res-card .upkeep-note { display: none; }
.shell .topbar .res-card .full-tag { font-size: 9px; padding: 0 .25rem; }
.shell .topbar .res-outpost {
  flex: 0 1 11rem; min-width: 7rem; display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: .2rem .7rem; border: 1px solid rgba(238,233,217,.11); border-radius: 3px; color: var(--text); background: rgba(0,0,0,.14);
}
.shell .topbar .res-outpost:hover { border-color: var(--accent); text-decoration: none; }
.shell .topbar .res-outpost .label { font-size: 9.5px; letter-spacing: .16em; color: var(--muted); }
.shell .topbar .res-outpost .val { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .topbar .res-outpost .rate { font-size: 10.5px; color: var(--muted); }
.shell .topbar .user { flex: none; margin-left: 0; flex-wrap: nowrap; }
@media (max-width: 1600px) { .shell .topbar .res-outpost { display: none; } }
@media (max-width: 1100px) {
  .shell .topbar { flex-wrap: wrap; row-gap: .4rem; }
  .shell .topbar .user { margin-left: auto; }
  .shell .topbar .resbar { order: 5; flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .shell .topbar .resbar { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
  .shell .topbar .res-card { grid-template-columns: 24px minmax(0, 1fr); gap: .3rem; padding: .22rem .4rem .25rem .3rem; }
  .shell .topbar .res-card .res-ico { width: 24px; height: 24px; }
  .shell .topbar .res-card .res-icon { width: 20px; height: 20px; }
  .shell .topbar .res-card .val { font-size: 14px; }
}

/* page titles get the same brass rule as panels, with calmer spacing */
main > h2:first-child, main > .row > h2, .map-head > h2, .chat-head > h2 { margin-bottom: .7rem; }
main > h2:first-child::after { content: ""; display: block; width: 4.5rem; margin-top: .45rem; border-bottom: 2px solid rgba(228,179,110,.55); }
main > h3 { margin-top: 1.2rem; }

/* legends read as small chips */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.legend > span { margin: 0; padding: .1rem .5rem; border: 1px solid rgba(238,233,217,.12); border-radius: 999px; background: rgba(0,0,0,.18); font-size: 11.5px; }

/* Home base overview: a meter per field group */
.ov-list { display: grid; gap: .55rem; margin: .3rem 0 .8rem; }
.ov-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .55rem; padding: .45rem .55rem;
  background: rgba(0,0,0,.18); border: 1px solid rgba(238,233,217,.08); border-left: 3px solid var(--res); border-radius: 3px; }
.ov-ico { display: grid; place-items: center; }
.ov-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ov-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ov-head b { font: 700 12px var(--stamp); text-transform: uppercase; letter-spacing: .08em; }
.ov-bar { display: block; height: 5px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.ov-bar i { display: block; height: 100%; background: var(--res); }
.ov-ready { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .7rem; margin-bottom: .6rem; border: 1px dashed var(--line); border-radius: 3px; color: var(--muted); }
.ov-ready b { font: 700 1.6rem var(--typewriter); color: var(--muted); }
.ov-ready.on { border-style: solid; border-color: rgba(167,197,139,.55); background: rgba(167,197,139,.08); color: var(--text); }
.ov-ready.on b { color: var(--good); }
.base-panel .kv { grid-template-columns: max-content minmax(0, 1fr); }
.base-panel .kv > :nth-child(odd) { overflow-wrap: normal; white-space: nowrap; }
.base-panel .kv > :nth-child(even) { text-align: right; }

/* tables and panels: softer edges and clearer row rhythm */
.tbl-wrap, .table-wrap { border-radius: 3px; background: rgba(0,0,0,.08); }
th { letter-spacing: .12em; }
.panel { border-radius: 4px; }
.notice, .alert { border-radius: 3px; }
button, .btn { border-radius: 3px; }
.tabs button, .rep-filters button, .raid-lists-bar button { border-radius: 3px; }

/* login screen fits a laptop screen without scrolling */
@media (min-width: 700px) and (max-height: 860px) {
  .login { margin: 1.2rem auto; }
  .login h1 { font-size: clamp(2.2rem, 5.5vh, 3.2rem); margin-bottom: .2rem; }
  .login h1 br { display: none; }
  .login .tag { margin-bottom: .6rem; }
  .login .auth-panel label { margin-top: .45rem; }
  .login .dev-login { margin: .3rem 0 .7rem; padding-bottom: .7rem; }
  .login .auth-row { margin: .5rem 0 0; }
  .login .wide-btn { margin-top: .3rem; min-height: 2.8rem; }
  .login .auth-panel p { margin: .5rem 0; }
}
/* login: centred in the screen, compact enough to fit without scrolling */
.login { margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: 1rem; padding-bottom: 1rem; }
.login > .panel { margin-bottom: .4rem; }
.login .tag { margin-bottom: .45rem; }
.login .tag.small { margin-bottom: .8rem; }
.login .auth-foot { margin: .2rem 0 0; }
@media (min-width: 700px) {
  .login .auth-panel label { margin-top: .45rem; }
  .login .dev-login { margin: .3rem 0 .7rem; padding-bottom: .7rem; }
  .login .auth-row { margin: .5rem 0 0; }
  .login .wide-btn { margin-top: .3rem; min-height: 2.8rem; }
  .login .auth-panel p { margin: .5rem 0; }
}
@media (min-width: 700px) and (max-height: 900px) { .login h1 br { display: none; } .login h1 { font-size: clamp(2.2rem, 5.5vh, 3.2rem); } }

/* ---------------------------------------------------------------- v0.40: field kit */
.bell { min-height: 2.1rem; padding: .1rem .5rem; font-size: 15px; line-height: 1; }
.bell.on { border-color: rgba(167,197,139,.6); }
.full-in, .empty-in { display: inline-block; margin-left: .35rem; padding: 0 .3rem; font-size: 9.5px; border-radius: 2px; }
.full-in { color: #15170f; background: rgba(236,199,126,.85); }
.empty-in { color: #fff0e6; background: rgba(228,134,114,.75); }
.full-in .timer, .empty-in .timer { color: inherit; }
.res-card.full .full-in { display: none; }
.train-preview { min-height: 0; margin-top: .3rem; }
.train-preview:empty { display: none; }
.train-preview .cost { white-space: normal; }
.rep-nav { gap: .4rem; }
.rep-nav .btn { min-height: 2.3rem; padding: .25rem .7rem; }
.check-chip { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .1rem .5rem; min-height: 2.3rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(0,0,0,.15); color: var(--text); cursor: pointer; font-size: 12px; }
.check-chip input { min-height: 0; }
.tile-tools { gap: .35rem; margin: .5rem 0; }
.tile-tools .on { color: var(--accent); border-color: var(--accent); }
.marks-h { margin: 1rem 0 .4rem; font-size: 12px; }
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.marks li { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .15rem 0; border-bottom: 1px dashed rgba(238,233,217,.1); }
.marks .linklike { text-align: left; min-height: 1.8rem; }
.chat-new { align-self: stretch; display: flex; align-items: center; gap: .6rem; color: var(--accent); font: 700 11px var(--stamp); text-transform: uppercase; letter-spacing: .1em; margin: .3rem 0; }
.chat-new::before, .chat-new::after { content: ""; flex: 1; border-top: 1px solid rgba(228,179,110,.5); }
#convo-q, #rank-q { min-height: 2.4rem; width: min(16rem, 60vw); }
.rank-tools { margin: .4rem 0 .6rem; }
tr.flash td { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { background: rgba(228,179,110,.3); } 100% { background: transparent; } }
.list-tools { margin: .2rem 0 .2rem; }
kbd { display: inline-block; min-width: 1.5rem; padding: .05rem .35rem; text-align: center; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--bg); font: 700 12px var(--mono); }
@media (max-width: 480px) { .login h1 { font-size: 2.3rem; } }
.dev-code { display: flex; gap: .4rem; }
.dev-code input { flex: 1; min-width: 0; letter-spacing: .3em; text-align: center; }
.dev-code button { flex: none; }
.shell .topbar .res-card .rate .cap-of { color: #9ea393; }
.bell { display: inline-grid; place-items: center; width: 2.3rem; padding: 0; }
.bell.on { color: var(--good); }

/* ---------------------------------------------------------------- Home base overview (v0.40.2) */
.ov-head2 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: .9rem 0 .4rem; }
.ov-head2:first-of-type { margin-top: .2rem; }
.ov-title { font: 700 11px var(--stamp); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.ov-boost { padding: .05rem .45rem; border-radius: 3px; background: var(--good); color: #15170f; font: 700 11px var(--stamp); letter-spacing: .06em; }
.ov-prods { display: grid; gap: .35rem; }
.ov-prod { position: relative; display: grid; grid-template-columns: 24px auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .5rem;
  padding: .35rem .55rem .4rem; background: rgba(0,0,0,.18); border: 1px solid rgba(238,233,217,.08); border-left: 3px solid var(--res); border-radius: 3px; }
.ov-prod .ov-ico { grid-row: span 2; }
.ov-rate { font: 700 1.05rem var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.ov-rate small { font-size: 11px; color: var(--muted); font-weight: 400; }
.ov-rate.bad { color: var(--bad); }
.ov-state { text-align: right; white-space: nowrap; }
.ov-state .timer { color: inherit; }
.ov-prod .ov-bar { grid-column: 2 / -1; height: 3px; margin-top: .25rem; }
.ov-perk { position: absolute; top: .3rem; right: .45rem; display: none; }
.ov-prod:hover .ov-perk { display: inline-block; font-size: 10px; color: var(--good); }
.ov-nexts { display: grid; gap: .3rem; }
button.ov-next { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; min-height: 0; padding: .4rem .6rem; text-align: left;
  background: rgba(167,197,139,.07); color: var(--text); border: 1px solid rgba(167,197,139,.35); border-radius: 3px; box-shadow: none;
  font: inherit; text-transform: none; letter-spacing: 0; }
button.ov-next:hover:not(:disabled) { border-color: var(--good); background: rgba(167,197,139,.14); filter: none; }
.ov-next-name { font: 700 12.5px var(--stamp); text-transform: uppercase; letter-spacing: .05em; }
.ov-next-name .muted { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.ov-note { margin: .2rem 0; }
.ov-army { display: grid; gap: .3rem; padding: .5rem .6rem; background: rgba(0,0,0,.18); border: 1px solid rgba(238,233,217,.08); border-radius: 3px; font-size: 13px; }
.ov-army b { font: 700 1.05rem var(--mono); color: var(--accent); }
.ov-alert { color: var(--bad); font-weight: 700; }
/* compact overview: production 2 x 2, troop chips, movements */
.ov-prods { grid-template-columns: 1fr 1fr; }
.ov-prod { grid-template-columns: 20px minmax(0, 1fr); padding: .3rem .45rem .35rem; column-gap: .4rem; }
.ov-prod .ov-state { grid-column: 2; text-align: left; font-size: 10.5px; }
.ov-prod .ov-bar { grid-column: 1 / -1; }
.ov-rate { font-size: .95rem; }
.ov-sub { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ov-sub b { font: 700 1rem var(--mono); color: var(--accent); margin-left: .25rem; }
.ov-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .2rem; }
.ov-chip { display: inline-flex; align-items: center; gap: .25rem; padding: 1px .35rem 1px 1px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.ov-chip .unit-thumb { width: 30px; height: 19px; }
.ov-chip b { font: 700 12px var(--mono); color: var(--text); }
.ov-moves { display: grid; gap: .2rem; }
.ov-move { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem; align-items: baseline; font-size: 12px; padding: .15rem 0; border-top: 1px dashed rgba(238,233,217,.1); }
.ov-mission { font: 700 10px var(--stamp); text-transform: uppercase; letter-spacing: .06em; padding: 0 .3rem; border-radius: 2px; background: rgba(255,255,255,.08); }
.ov-mission.m-attack { color: #e0715b; } .ov-mission.m-raid { color: #e3a64a; } .ov-mission.m-scout { color: #9ab8c8; }
.ov-mission.m-defend { color: #6fa8dc; } .ov-mission.m-return { color: #b8b08a; }
.ov-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-when { white-space: nowrap; color: var(--muted); }
.ov-army { gap: .35rem; }
.ov-next-name .muted { font-family: "Courier Prime", "Segoe UI Symbol", sans-serif; }

/* ---------------------------------------------------------------- worlds (v0.44.0) */
.worlds-page { max-width: 1100px; }
.worlds-page .worlds-title { text-align: center; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1rem; margin: 1rem 0; align-items: start; }
.world-grid.single { grid-template-columns: minmax(0, 1fr); }
.world-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.world-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.world-head h2 { margin: 0; }
.world-speed { font: 700 1.4rem var(--stamp, inherit); color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: .05rem .5rem; }
.world-card .nation-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.world-chip { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; margin-bottom: .4rem; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; text-decoration: none; color: var(--text); }
.world-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-chip b { color: var(--accent); }
.world-chip:hover { border-color: var(--accent); }

/* ================================================================ realism pass (v0.45.0)
   A sober, documentary look: muted olive and steel instead of bright copper, sober condensed headings,
   flat buttons, fine paper grain, and a photographic grade on the drawn art. Everything here is static
   (no animation), and filters sit on layers the browser composites, so it costs no frame time. */
:root {
  --bg: #121512;
  --panel: #1b1f1b;
  --panel-2: #242923;
  --line: #3e463c;
  --text: #e4dfd0;
  --muted: #a3a291;
  --accent: #c4a46a;        /* weathered brass */
  --accent-ink: #171914;
  --good: #9db886;
  --bad: #d77b68;
  --warn: #d9b46a;
  --link: #cfb07a;
  --heading: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --stencil: "Stardos Stencil", "Black Ops One", Impact, "Arial Black", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background-image: none; }
a:hover { color: #e6cf9f; }

/* headings: condensed and sober instead of the game-style stencil */
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 600; letter-spacing: .05em; text-shadow: none; }
h2 { color: var(--accent); font-size: 1.45rem; }
h3 { color: #d3bd8c; }
.login h1, .brand { font-family: var(--stencil); }
.login h1 { color: #e2cf9d; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6); letter-spacing: .12em; }

/* panels: dark field-grey with a fine paper grain, crisp edges, soft shadow */
.panel, .login .panel, .base-panel, .warmap-panel {
  background-color: rgba(27,31,27,.94);
  background-image: var(--grain), linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08));
  background-blend-mode: soft-light, normal;
  border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.login .panel { border-top: 2px solid var(--accent); }
.sidenav, .shell .topbar { background-color: rgba(20,23,20,.97); background-image: var(--grain); background-blend-mode: soft-light; }

/* buttons: flat brass with a hard edge, no glossy gradient */
button, .btn {
  background: var(--accent); color: var(--accent-ink); border: 1px solid #8e7547; border-radius: 2px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); text-shadow: none;
}
button:hover:not(:disabled), .btn:hover { filter: none; background: #d3b67f; transform: none; }
button.ghost, .btn.ghost { background: transparent; color: var(--link); border-color: var(--line); box-shadow: none; }
button.ghost:hover:not(:disabled), .btn.ghost:hover { background: rgba(196,164,106,.08); border-color: var(--accent); color: #e6cf9f; }
button.danger { background: #a8513f; border-color: #c26a57; color: #f6efe4; }
input, textarea, select { border-radius: 2px; background: #121512; border-color: var(--line); }

/* archive photograph behind the login, nation and world pages (kept still, darkened for legibility) */
body.photo-bg::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,10,.55) 0%, rgba(10,12,10,.82) 55%, rgba(10,12,10,.94) 100%),
    url(/img/bg-dday.jpg) center 35% / cover no-repeat;
  filter: sepia(.25) contrast(1.05);
}
.photo-credit { margin: .8rem 0 0; text-align: center; font-size: 11px; color: rgba(228,223,208,.55); }

/* world cards: a photograph of each front */
.panel.world-card { --pad: clamp(.9rem, 2vw, 1.25rem); padding: 0 var(--pad) var(--pad); overflow: hidden; }
.world-photo {
  height: 150px; margin: 0 calc(-1 * var(--pad, 1rem)) .9rem; background-size: cover; background-position: center 55%;
  filter: sepia(.3) contrast(1.08) brightness(.82); border-bottom: 1px solid var(--line);
}
.world-card.current .world-photo { filter: sepia(.2) contrast(1.1) brightness(.92); }
@media (max-width: 560px) { .world-photo { height: 110px; } }

/* a photographic grade on the drawn art: less candy colour, more film */
.base-wrap { filter: saturate(.72) sepia(.12) contrast(1.06) brightness(.97); }
.unit-art, .troop-pic svg, .unit-img svg { filter: saturate(.55) sepia(.22) contrast(1.1) brightness(.95); }
.unit-img, .troop-pic { position: relative; }
.unit-img::after, .troop-pic::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.45));
  background-blend-mode: overlay, normal; opacity: .55;
}
.warmap canvas { filter: saturate(.8) sepia(.08); }

/* film grain over the whole game: one still, see-through layer */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: var(--grain); opacity: .06; mix-blend-mode: overlay;
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* unit photographs (v0.46.0): fill the picture frame like the drawings did */
img.unit-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; user-select: none; }
.unit-thumb img.unit-photo { object-position: center; }
.credits-link { margin: 1.4rem 0 0; text-align: right; font-size: 11px; opacity: .7; }
.credits-link a { color: var(--muted); }
.photo-credit a { color: rgba(228,223,208,.75); text-decoration: underline; text-underline-offset: 2px; }
.credits-page { max-width: 820px; }
.credits-list { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 12px; line-height: 1.5; }
.credits-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* players online on the world cards */
.world-online { display: flex; align-items: center; gap: .4rem; color: var(--muted); margin-top: -.3rem; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #5d6157; flex: none; }
.online-dot.on { background: #8fbf6a; box-shadow: 0 0 6px rgba(143,191,106,.7); }

/* the smuggler on the Black Market page */
.smug-market input.smug-in { width: 100%; min-width: 4.5rem; text-align: right; }
.market-card .smug-left { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .4rem 0; }

/* reports: unit pictures in troop tables, icons for loot */
.th-unit { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.th-unit .unit-thumb { width: 40px; height: 25px; }
.mv-loot { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }

/* building photograph (Field Hospital) */
.bld-photo { height: 120px; margin: 0 0 .7rem; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: #2b2b28; line-height: 0; }
.bld-photo .unit-art { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

/* phones: the slide-in menu scrolls instead of letting its links run over the world chip and footer */
@media (max-width: 860px) {
  .sidenav { overflow-y: auto; overscroll-behavior: contain; }
  .sidenav .nav { flex: none; }
  .sidenav .side-foot { margin-top: auto; flex: none; padding-bottom: env(safe-area-inset-bottom, 0); }
}
@media (max-width: 860px) and (max-height: 760px) {
  .sidenav { gap: .25rem; padding-top: .6rem; }
  .nav { gap: .3rem; }
  .nav a { min-height: 1.95rem; padding-top: .15rem; padding-bottom: .15rem; }
}

/* troop movements: the indicator board and the movement cards */
.vill-top.has-moves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: .6rem; align-items: start; margin-bottom: .6rem; }
.vill-top > .panel { margin: 0; }
main.page-village .vill-top > .panel.build-slots { padding: .55rem .9rem; }
main.page-village .vill-top:not(.has-moves) > .panel.build-slots { margin-bottom: .6rem; }
@media (max-width: 760px) { .vill-top.has-moves { grid-template-columns: minmax(0, 1fr); } }
.mv-ind { padding: .5rem .7rem; display: grid; gap: .35rem; margin-bottom: .8rem; }
.vill-top .mv-ind { margin-bottom: 0; }
.mv-ind.under-attack { border-color: #a95f50; box-shadow: inset 3px 0 0 var(--bad); }
.mv-ind-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font: 700 11px var(--stamp); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.mvi-group { display: grid; gap: .1rem; }
.mvi-title { font-size: 11px; color: var(--muted); }
.mvi-row { display: flex; align-items: center; gap: .45rem; padding: .15rem .3rem; border-radius: 3px; color: var(--text); text-decoration: none; }
.mvi-row:hover { background: rgba(228,179,110,.08); text-decoration: none; }
.mvi-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mvi-when { white-space: nowrap; color: var(--muted); }
.mvi-ico, .mv-ico { flex: none; display: inline-flex; }
.m-incoming .mvi-ico, .m-incoming b { color: #ff6b55; }
.m-support .mvi-ico { color: #8fbf6a; }
.m-attack .mvi-ico { color: #e0715b; } .m-raid .mvi-ico { color: #e3a64a; } .m-scout .mvi-ico { color: #9ab8c8; }
.m-defend .mvi-ico { color: #6fa8dc; } .m-return .mvi-ico { color: #b8b08a; }
.mv-cards { display: grid; gap: .7rem; }
.mv-card { margin: 0; border: 1px solid var(--line); border-radius: 3px; }
.mv-tbl { width: 100%; border-collapse: collapse; margin: 0; }
.mv-tbl th, .mv-tbl td { padding: .3rem .45rem; border: 1px solid rgba(238,233,217,.08); }
.mv-tbl thead th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.mv-tbl .mv-who { width: 8.5rem; white-space: nowrap; }
.mv-tbl .mv-title { text-align: left; }
.mv-card.m-incoming thead th { background: rgba(191,105,86,.28); }
.mv-card.m-support thead th { background: rgba(143,191,106,.18); }
.mv-card.m-attack thead th { background: rgba(224,113,91,.14); }
.mv-card.m-raid thead th { background: rgba(227,166,74,.14); }
.mv-card.m-scout thead th { background: rgba(154,184,200,.14); }
.mv-card.m-defend thead th { background: rgba(111,168,220,.14); }
.mv-card.m-return thead th { background: rgba(184,176,138,.12); }
.mv-u { text-align: center; width: 3.2rem; }
.mv-u .unit-thumb { width: 40px; height: 25px; }
.mv-n { text-align: center; font-variant-numeric: tabular-nums; }
.mv-arr td { background: rgba(255,255,255,.03); }
.mv-arr-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; }
.cmd-tabs .badge { margin-left: .35rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; display: inline-grid; place-items: center; border-radius: 2px; background: rgba(255,255,255,.14); font: 700 10px/1 var(--mono); }
.cmd-tabs .badge.bad { background: #bf6956; color: #fff0d9; }
.mv-u, .mv-n { width: 3.6rem; min-width: 3.6rem; }
.mv-fill { width: auto; }
/* outpost page: the board runs as a strip under the construction slots */
.vill-top.has-moves { display: block; }
.vill-top.has-moves > .panel.build-slots { margin-bottom: .6rem; }
.vill-top .mv-ind { margin-bottom: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: 1.4rem; }
.vill-top .mv-ind > .mv-ind-head { grid-column: 1 / -1; }
.mv-ind, .mvi-group { align-items: start; align-content: start; }
@media (max-width: 560px) { .mv-tbl .mv-who { width: 6rem; white-space: normal; } .mv-u, .mv-n { width: 3rem; min-width: 3rem; } }

/* ranking: Top 10 */
.t10-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: .9rem; }
.t10-card { margin: 0; }
.t10-card h3 { margin: 0 0 .2rem; }
.t10-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .1rem; }
.t10-list li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .25rem .35rem; border-radius: 3px; }
.t10-list li:nth-child(odd) { background: rgba(255,255,255,.03); }
.t10-list li.me { background: rgba(228,179,110,.14); }
.t10-name { display: flex; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t10-val { font-family: var(--typewriter); color: var(--accent); font-variant-numeric: tabular-nums; }
.t10-unit { font-size: 11px; color: var(--muted); }
.t10-rank { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.t10-medal { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font: 700 11px var(--mono); color: #1d1a12; }
.t10-medal.m1 { background: #d8b44a; } .t10-medal.m2 { background: #b9bcc0; } .t10-medal.m3 { background: #b07a48; }
.t10-last { margin: .5rem 0 0; }
@media (max-width: 420px) { .t10-unit { display: none; } }
@media (max-width: 560px) { .rank-tabs { display: grid; grid-template-columns: 1fr 1fr; } .rank-tabs a { text-align: center; } }

/* orders: one compact card per chain */
.ord-top { justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.ord-top h2 { margin-bottom: 0; }
.ord-claim-all { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .35rem .5rem .35rem .8rem; border: 1px solid rgba(143,191,106,.45); border-radius: 3px; background: rgba(143,191,106,.08); }
.ord-intro { margin: .4rem 0 .8rem; }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .8rem; align-items: start; }
.ord-card { margin: 0; padding: .7rem .85rem; }
.ord-card.has-ready { border-color: rgba(143,191,106,.55); }
.ord-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ord-head h3 { margin: 0; }
.ord-chain-bar { display: block; height: 4px; margin: .35rem 0 .3rem; }
.ord-chain-bar i { background: var(--accent); }
.ord-desc { margin: 0 0 .45rem; }
.ord-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ord { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .25rem .6rem; padding: .35rem .45rem; border-radius: 3px; background: rgba(255,255,255,.03); }
.ord.ready { grid-template-columns: 3.4rem minmax(0, 1fr) auto; background: rgba(143,191,106,.1); }
.ord.ready .order-rw, .ord.ready .order-tight { grid-column: 2; }
.ord.ready button { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.ord.next .order-rw { grid-column: 2 / -1; }
.ord.later { padding: .2rem .45rem; font-size: 13px; }
.ord.later.claimed { opacity: .6; }
.ord-tag { font: 700 10px var(--stamp); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: .1rem .3rem; border: 1px solid var(--line); border-radius: 2px; color: var(--accent); align-self: start; }
.ord-tag.ready { background: var(--good); border-color: var(--good); color: #15170f; }
.ord-title { min-width: 0; font-family: var(--typewriter); }
.ord-prog { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
.ord-prog .stat-bar { flex: 1; height: 5px; max-width: 12rem; }
.ord-prog .stat-bar i { background: var(--accent); }
.order-rw { display: inline-flex; flex-wrap: wrap; gap: .1rem .6rem; font-variant-numeric: tabular-nums; }
.order-rw > span { display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.order-tight { font-size: 11px; color: var(--warn, #e3a64a); }
.ord-more { margin-top: .4rem; }
.ord-more summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: .15rem 0; }
.ord-more .ord-list { margin-top: .3rem; }

/* side menu: the commander's own links */
.sidenav .nav { overflow-y: auto; overscroll-behavior: contain; }
.ql-title { display: flex; align-items: center; justify-content: space-between; }
.ql-btn { min-height: 0; padding: .05rem .4rem; font: 700 10px var(--stamp); letter-spacing: .06em; box-shadow: none; }
.ql-add { margin: .15rem .6rem 0; min-height: 1.8rem; padding: .15rem .5rem; font-size: 11px; justify-content: flex-start; text-align: left; border-style: dashed; }
.ql-edit { display: flex; align-items: center; gap: .25rem; min-height: 2rem; padding: .15rem .3rem .15rem .6rem; color: #d9d6c8; font: 700 12px var(--stamp); text-transform: uppercase; letter-spacing: .06em; }
.ql-edit .nav-label { flex: 1; }
.ql-edit .ql-btn { font-size: 12px; padding: .1rem .35rem; }
/* folded-out orders: title on one line, reward underneath (they squeezed the title into a narrow column) */
.ord.later { grid-template-columns: 2.2rem minmax(0, 1fr); row-gap: .15rem; }
.ord.later .order-rw, .ord.later > .small { grid-column: 2; }
.ord.later .ord-tag { padding: .05rem .2rem; }

/* ---------------------------------------------------------------- v0.50.3: phone fixes */
.show-sm { display: none; }
@media (max-width: 560px) { .show-sm { display: block; } .rep-when { margin-top: .15rem; } }
/* map buttons sit on the right, under the compass, clear of the row numbers */
.warmap-tools { left: auto; right: 10px; top: 70px; }
@media (max-width: 700px) { .warmap-tools { left: auto; right: 6px; top: 66px; } }
/* Send supplies: one box per row on the narrowest phones */
.ship-cell { min-width: 0; }
@media (max-width: 360px) { .ship-grid { grid-template-columns: 1fr; } }
/* simulator supplies: icon + box, two per row */
.sim-stock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; }
.sim-stock label { margin: 0; flex-wrap: nowrap; }
.sim-stock input { width: 100%; min-width: 0; }
/* ranking cards: two per row on phones */
@media (max-width: 560px) {
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .stat-card { padding: .6rem .7rem; }
  .stat-card .stat-value { font-size: 1.5rem; }
}
/* link dialog */
.ql-field { display: block; margin-top: .5rem; }
.ql-field input { display: block; width: 100%; margin-top: .25rem; }
/* small labels and tap targets */
@media (max-width: 700px) {
  button.prot-chip { min-height: 34px; padding: .2rem .55rem; }
  .res-card .rate, .ov-state { font-size: 11px; }
}
@media (max-width: 700px) { .ov-prods .ov-prod .ov-state.small { font-size: 11px; } }

/* training: how many a smuggler swap would allow */
.swap-max { color: var(--good); white-space: nowrap; }

/* ---------------------------------------------------------------- v0.52.0: public pages */
.pub { min-height: 100dvh; display: flex; flex-direction: column; }
.pub-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .7rem clamp(1rem, 4vw, 2.5rem); background: rgba(14,16,13,.9); border-bottom: 1px solid rgba(196,164,106,.25); }
.pub-brand { font: 400 1.15rem var(--stencil); letter-spacing: .12em; color: #e6cf9f; text-decoration: none; }
.pub-nav { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; font: 700 12px var(--stamp); text-transform: uppercase; letter-spacing: .1em; }
.pub-nav a { color: #d9d6c8; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.pub-nav a.on, .pub-nav a:hover { color: #ffd098; }
.pub-nav .btn.pub-cta-sm { color: var(--accent-ink); padding: .35rem .8rem; min-height: 0; }
.pub-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 2rem; }
.pub-section { margin: 2.6rem 0 0; }
.pub-section h2, .pub-h1 { margin: 0 0 .5rem; }
.pub-lead { max-width: 52rem; color: #d9d6c8; font-size: 1.02rem; line-height: 1.6; }
/* hero with the one big button */
.hero { text-align: center; padding: clamp(3rem, 12vh, 7rem) 0 1rem; }
.hero-kicker { font: 700 12px var(--stamp); text-transform: uppercase; letter-spacing: .22em; color: #c4a46a; margin: 0 0 .6rem; }
.hero-title { font: 400 clamp(2.8rem, 9vw, 5.6rem)/1 var(--stencil); letter-spacing: .06em; color: #f0dfb0; text-shadow: 0 4px 24px rgba(0,0,0,.8); margin: 0; }
.hero-tag { max-width: 40rem; margin: 1.2rem auto 2rem; font-size: 1.08rem; line-height: 1.6; color: #e8e2cf; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.btn.hero-cta { display: inline-block; font: 700 clamp(1.15rem, 3.2vw, 1.5rem) var(--stamp); letter-spacing: .14em; text-transform: uppercase; padding: 1rem 2.6rem; min-height: 0;
  border: 2px solid #f0d48e; box-shadow: 0 0 0 4px rgba(196,164,106,.25), 0 10px 30px rgba(0,0,0,.55); }
.btn.hero-cta:hover { filter: brightness(1.08); text-decoration: none; }
.hero-sub { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem .7rem; margin-top: 1.1rem; font-size: 14px; }
.hero-sub span { color: var(--muted); }
.pub-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.pub-feature, .pub-nation, .pub-world, .peek-shot { background: rgba(28,32,27,.92); border: 1px solid var(--line); border-radius: 3px; }
.pub-feature, .pub-world, .peek-shot { overflow: hidden; }
.pub-feature-img { height: 140px; background-size: cover; background-position: center top; filter: sepia(.25) contrast(1.05) brightness(.85); border-bottom: 1px solid var(--line); }
.pub-feature-body { padding: .8rem 1rem 1rem; }
.pub-feature h3 { margin: 0 0 .35rem; }
.pub-feature p { margin: 0; font-size: 14px; line-height: 1.55; color: #d9d6c8; }
.pub-nations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .8rem; }
.pub-nation { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; }
.pub-nation > div { display: flex; flex-direction: column; gap: .2rem; }
.pub-worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.pub-world-photo { height: 150px; background-size: cover; background-position: center 55%; filter: sepia(.3) contrast(1.08) brightness(.82); }
.pub-world-body { padding: .8rem 1rem 1rem; }
.pub-world h3 { margin: 0 0 .3rem; }
.pub-speed { color: var(--accent); font-family: var(--mono); }
.pub-join { text-align: center; padding-bottom: 1rem; }
.pub-join .pub-lead { margin-left: auto; margin-right: auto; }
.pub-join-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.discord-link { display: inline-flex; align-items: center; gap: .45rem; }
.btn.discord-link { padding: .8rem 1.3rem; }
.inline-discord { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.pub-foot { border-top: 1px solid rgba(196,164,106,.2); background: rgba(14,16,13,.9); padding: 1.2rem clamp(1rem, 4vw, 2.5rem); text-align: center; }
.pub-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; font-size: 13px; margin-bottom: .5rem; }
/* sneak peek */
.peek-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.2rem; margin-top: 1rem; }
.peek-shot { margin: 0; }
.peek-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.peek-shot figcaption { display: flex; flex-direction: column; gap: .25rem; padding: .7rem .9rem .9rem; font-size: 14px; color: #d9d6c8; }
.peek-shot figcaption b { color: #e6cf9f; font-family: var(--stamp); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.peek-army { margin: 1.2rem 0; }
.peek-army h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.peek-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.peek-units figure { margin: 0; background: #1b1e19; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.peek-units img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.2) contrast(1.05); }
.peek-units figcaption { padding: .3rem .45rem; font-size: 12px; color: #d9d6c8; }
/* field manual */
.faq-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .5rem; }
.faq-toc a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; text-decoration: none; background: rgba(28,32,27,.85); }
.faq-sec { margin-top: 1.6rem; scroll-margin-top: 4.5rem; }
.faq-q { background: rgba(28,32,27,.92); border: 1px solid var(--line); border-radius: 3px; margin: .4rem 0; }
.faq-q summary { cursor: pointer; padding: .7rem .9rem; font-weight: 700; color: #e6cf9f; }
.faq-q[open] summary { border-bottom: 1px dashed var(--line); }
.faq-a { padding: .7rem .9rem .9rem; line-height: 1.6; color: #e1ddcd; }
main .faq-q, main .faq-toc a { background: var(--panel); }
/* legal pages */
.legal { max-width: 52rem; }
.legal h2 { margin-top: 1.6rem; font-size: 1.15rem; }
.legal p, .legal td, .legal dd { line-height: 1.6; color: #e1ddcd; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
.legal-dl dt { color: var(--muted); }
.legal-dl dd { margin: 0; }
.legal-missing { color: #e3a64a; font-style: italic; }
.legal-table { width: 100%; font-size: 13px; }
.legal-table td, .legal-table th { vertical-align: top; }
@media (max-width: 560px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dd { margin-bottom: .4rem; } .legal-table { display: block; overflow-x: auto; } }
/* login page links, registration checkboxes, terms gate, account */
.login-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin: .8rem 0 0; }
.check-line { display: flex; align-items: flex-start; gap: .5rem; margin: .5rem 0; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check-line input { margin-top: .2rem; flex: none; }
.terms-gate .panel { text-align: left; }
.danger-zone { border-color: rgba(191,105,86,.55); }
.account-delete label { display: block; margin-top: .5rem; }
.account-delete input { display: block; width: 100%; max-width: 22rem; margin-top: .25rem; }
.acct-form label { display: block; margin-top: .5rem; }
.acct-form input { display: block; width: 100%; max-width: 22rem; margin-top: .25rem; }
.check-line { display: flex; gap: .5rem; align-items: flex-start; }
.check-line input { margin-top: .25rem; flex: none; }
.vac-form .row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.vac-rules { padding-left: 1.1rem; }
.side-foot a.cdr { color: inherit; text-decoration: none; }
.side-foot a.cdr:hover b { color: #ffd098; }
.side-legal { margin: .1rem 0 0; font-size: 11px; text-align: center; }
.side-legal a { color: var(--muted); }
.nav-ext { margin-left: auto; opacity: .6; font-size: 11px; }
@media (max-width: 560px) {
  .pub-top { justify-content: center; }
  .pub-nav { justify-content: center; }
  .hero { padding-top: 2.2rem; }
}

/* checkboxes in the login / terms forms: keep them checkbox-sized */
.check-line input[type=checkbox] { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; min-height: 0; padding: 0; margin: .2rem 0 0; flex: none; }
.check-line { justify-content: flex-start; text-align: left; }
.check-line a { display: inline; }
.peek-units { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .peek-units { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Command Post: evasion switch */
.evade-box { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .8rem; margin-bottom: .8rem; }
.evade-box.on { border-color: rgba(143,191,106,.5); }
.evade-switch { display: flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; }
.evade-switch input { width: 1.1rem; height: 1.1rem; margin: 0; }
@media (max-width: 560px) { .rank-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rank-tabs a { padding-left: .3rem; padding-right: .3rem; font-size: 11px; } }
@media (min-width: 561px) { .rank-tabs a { white-space: nowrap; } }
.faq-list { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

/* Outpost: the construction panel keeps one height whether crews are idle or busy, so the base map
   (which fills the rest of the screen on desktop) never shrinks while something is being built */
@media (min-width: 861px) {
  main.page-village .build-slots { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: .25rem; }
  main.page-village .build-slots > .row:not(.finish-row) { grid-column: 1; flex-wrap: nowrap; white-space: nowrap; min-height: 1.9rem; overflow: hidden; }
  main.page-village .build-slots > .row:not(.finish-row) > span { overflow: hidden; text-overflow: ellipsis; }
  main.page-village .build-slots button[data-action="cancel"] { min-height: 0; padding: .1rem .55rem; font-size: 11px; }
  main.page-village .build-slots > .finish-row { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: .2rem; margin: 0; }
  main.page-village .build-slots > .finish-row .finish-now { min-height: 0; padding: .35rem .8rem; }
  main.page-village .build-slots > .finish-row > span { font-size: 11px; white-space: nowrap; }
}

/* building / field panel on the Outpost page: compact head, the action right under it */
.base-panel .bp-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.base-panel .bp-head h3 { margin: 0; }
.base-panel .bp-lvl { white-space: nowrap; font-size: 12px; color: var(--muted); }
.base-panel .bp-lvl .lvl-big { font-size: 1.25rem; margin: 0 .1rem 0 .25rem; }
.base-panel .bp-action > p { margin: .45rem 0; }
.base-panel .bp-action .cost-panel { margin-top: 0; }
.base-panel .bp-effect { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.base-panel .bp-desc { margin: .4rem 0; }
.base-panel .bp-photo { height: 80px; margin: .6rem 0 0; }
.base-panel .bp-go { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.base-panel .bp-go button { flex: none; }

/* Outpost: constructions under way in the title row (no panel while the crews are idle) */
.build-strip { flex: 1 1 22rem; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .4rem .8rem; flex-wrap: wrap; }
/* one shared grid, so names, timers and Cancel buttons line up in columns (v0.72.1) */
.build-jobs { display: grid; grid-template-columns: minmax(0, auto) auto auto; column-gap: .6rem; row-gap: .2rem; min-width: 0; align-items: center; }
.build-job { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: 13px; white-space: nowrap; min-width: 0; padding: .1rem .4rem; border: 1px solid transparent; border-radius: 3px; }
.build-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.build-when { color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.build-job .small-btn { min-height: 0; padding: .05rem .45rem; font-size: 10px; }
.build-strip .finish-now { min-height: 0; padding: .35rem .7rem; font-size: 12px; }
@media (max-width: 860px) { .build-strip { flex-basis: 100%; justify-content: space-between; order: 3; } }

/* Command HQ: translations */
.i18n-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.i18n-lang { display: grid; gap: .25rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; color: var(--text); }
.i18n-lang.on { border-color: var(--accent); background: rgba(228,179,110,.08); }
.i18n-lang .stat-bar { height: 5px; } .i18n-lang .stat-bar i { background: var(--good); }
.i18n-help ul { margin: .4rem 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.i18n-file { margin-left: auto; display: flex; gap: .4rem; }
.i18n-list { display: grid; gap: .5rem; margin-top: .6rem; }
.i18n-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem 1rem; padding: .6rem .7rem; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.02); }
.i18n-row.missing { border-left-color: var(--bad); } .i18n-row.draft { border-left-color: #e3a64a; } .i18n-row.reviewed { border-left-color: var(--good); }
.i18n-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; margin-bottom: .3rem; }
.i18n-en { white-space: pre-wrap; line-height: 1.45; }
.i18n-text { width: 100%; min-height: 2.2rem; resize: vertical; font: inherit; line-height: 1.45; }
.i18n-btns { display: flex; gap: .4rem; margin-top: .3rem; }
@media (max-width: 760px) { .i18n-row { grid-template-columns: 1fr; } }

/* language picker */
.lang-pick { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: 12px; }
.lang-pick select { min-height: 0; padding: .2rem .4rem; font-size: 12px; width: auto; }
.side-lang { justify-content: center; margin-top: .2rem; }
.pub-lang select { background: transparent; color: #d9d6c8; border-color: rgba(238,233,217,.25); }

/* longer words in German, Dutch and French (v0.56.0): boxes grow with their text instead of cutting it off */
/* unit stats: the label column takes the width of the longest label, the same for every row of the card */
.stats { grid-template-columns: max-content 1fr 32px; column-gap: .4rem; }
.stats .stat { grid-column: 1 / -1; grid-template-columns: subgrid; }
.stats .stat .stat-label { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; }
/* ranking and stats cards: long statistic names wrap */
.stat-card .stat-label { white-space: normal; overflow-wrap: anywhere; }
/* bar chart labels: up to two lines before they are cut off */
.hbar-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* side menu: a long page name takes two lines */
.nav-label { white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* home base production: "full in 12:34:56" wraps before the timer instead of spilling out */
.ov-state { white-space: normal; }
.ov-state .timer { white-space: nowrap; }
/* a full store: "FULL" replaces "of 3,300" so the tag is never cut off */
.res-card.full .cap-of { display: none; }
/* Black Market offer amounts: room for the placeholder in every language */
#og-a, #ow-a { min-width: 9rem; }
/* open drop-down lists: dark with light text everywhere, also where the closed box is transparent */
select option, select optgroup { background: #121512; color: #e4dfcc; }
select option:checked { background: #3a3622; color: #f1e7c4; }
.pub-lang select { background-color: rgba(18, 21, 18, .6); }
/* the fronts side by side: equal height, each card's main button at the bottom */
.world-grid { align-items: stretch; }
.panel.world-card { display: flex; flex-direction: column; }
.world-card .world-go { margin-top: auto; padding-top: .4rem; margin-bottom: 0; }
/* alliance phase 2 (v0.64.0) */
.map-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .2rem 0 .5rem; color: var(--muted); }
.map-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.ally-board li span:first-child small { display: block; }
.ally-relate { gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ally-relate input { width: 10rem; text-transform: uppercase; }
.ally-list li.rel-ally { border-left: 3px solid #8fcf7a; } .ally-list li.rel-nap { border-left: 3px solid #b9c3a6; } .ally-list li.rel-enemy { border-left: 3px solid #ff4a3a; }
.ally-medals { margin: -.3rem 0 .6rem; }
.ally-atk[role=button] { cursor: pointer; }
/* accordion lists: the first 3 rows, the rest behind Show more */
.acc:not(.open) tr.acc-more { display: none; }
.acc .acc-toggle { display: block; width: 100%; margin-top: .4rem; }
.acc:not(.open) .acc-opened, .acc.open .acc-closed { display: none; }
/* Field Manual: screenshots of the mobile version (v0.63.0) */
.faq-shots { display: flex; flex-wrap: wrap; gap: .8rem; margin: .8rem 0 .2rem; }
.faq-shots figure { margin: 0; max-width: 220px; }
.faq-shots img { display: block; width: 100%; height: auto; border: 3px solid #0b0f0d; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.faq-shots figcaption { font-size: 12px; color: var(--muted); margin-top: .3rem; text-align: center; }

/* Commander page: stat bars, production, staged attribute points */
.cmd-ico { flex: none; color: #edbd7c; }
.cmd-top { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.cmd-portrait { flex: none; line-height: 0; border: 2px solid #8d6a3c; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.cmd-portrait.fallen { filter: grayscale(1) brightness(.6); }
.cmd-stats { flex: 1 1 300px; min-width: 0; display: grid; gap: .55rem; }
.cmd-stats h3 { margin: 0 0 .2rem; }
.cmd-stat { display: grid; grid-template-columns: 24px 8.5rem 1fr 6.5rem; align-items: center; gap: .7rem; }
.cmd-stat > span:nth-child(2) { font-family: var(--stamp); letter-spacing: .04em; }
.cmd-stat > b { text-align: right; font-family: var(--mono); }
.cmd-note { margin: -.35rem 0 0 calc(24px + 8.5rem + 1.4rem); }
.cmd-speed { grid-column: 3 / -1; color: var(--muted); }
.cmd-bar { position: relative; display: block; height: 14px; background: #3a2f22; border: 2px solid #8d6a3c; border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.cmd-bar i { display: block; height: 100%; background: linear-gradient(#e9b764, #b9822f); transition: width .2s; }
.cmd-bar.hp i { background: linear-gradient(#9cc46a, #5e8c35); }
.cmd-bar.low i { background: linear-gradient(#e0775c, #a8432d); }
.cmd-bar.xp i { background: linear-gradient(#5aa6e0, #2b6fa8); }
.cmd-bar.staged i { background: linear-gradient(#9cc46a, #5e8c35); }
.cmd-prod-head, .cmd-attr-head, .cmd-attr-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cmd-prod-head h3, .cmd-attr-head h3 { margin: 0; }
.cmd-prod-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .7rem; }
.cmd-res { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; }
.cmd-res b { font-family: var(--mono); color: var(--good); }
.cmd-res small { color: var(--muted); margin-left: -.3rem; }
.cmd-attr { display: grid; grid-template-columns: 24px 8.5rem 1fr auto 8.5rem; align-items: center; gap: .3rem .7rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.cmd-attr-head { margin-bottom: .3rem; }
.cmd-attr-name { font-family: var(--stamp); letter-spacing: .04em; }
.cmd-step { display: inline-flex; align-items: center; gap: .3rem; }
.cmd-step .small-btn { min-width: 2rem; padding: .15rem .4rem; }
.cmd-pts { min-width: 2.4rem; text-align: center; padding: .15rem .3rem; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; font-family: var(--mono); }
.cmd-pts.staged { color: var(--good); border-color: var(--good); }
.cmd-eff { text-align: right; font-family: var(--mono); white-space: nowrap; }
.cmd-eff .cmd-ico { vertical-align: -2px; }
.cmd-desc { grid-column: 2 / -1; }
.cmd-attr-foot { margin-top: .8rem; }
.cmd-attr-foot > span:first-child { flex: 1 1 260px; }
.cmd-where { display: flex; gap: .8rem; align-items: center; }
.cmd-where > div { line-height: 1.7; }
.cmd-where .cmd-revive { margin-left: .6rem; }
.cmd-revive { display: inline-flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.cmd-revive span { display: inline-flex; align-items: center; gap: .25rem; }
.cmd-help summary { cursor: pointer; font-family: var(--stamp); color: #edbd7c; letter-spacing: .04em; }
.cmd-help ul { margin-bottom: 0; }
.cmd-lead { margin: .5rem 0; color: #edbd7c; }
.report-cmd { margin: .3rem 0 0; }
@media (max-width: 640px) {
  .cmd-portrait { margin: 0 auto; }
  .cmd-stat { grid-template-columns: 22px 6.2rem 1fr 6.2rem; gap: .5rem; }
  .cmd-stat > b { font-size: .85em; }
  .cmd-note { margin-left: 0; }
  .cmd-prod-row { grid-template-columns: repeat(2, 1fr); }
  .cmd-attr { grid-template-columns: 22px 1fr auto; }
  .cmd-attr .cmd-bar { grid-column: 1 / -1; grid-row: 2; }
  .cmd-attr .cmd-step { grid-column: 3; grid-row: 1; }
  .cmd-eff { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .cmd-desc { grid-column: 1 / -1; }
}
.cmd-hide.on { border-color: rgba(143,191,106,.5); }
.cmd-hide p { margin: .35rem 0 0; }
.mv-cmd { color: #edbd7c; font-size: 1.3em; text-align: center; }

/* side menu: the commander card */
.nav-cmd { display: flex; gap: .65rem; align-items: center; margin: .2rem .6rem .8rem; padding: .5rem; border: 1px solid #8d6a3c; border-radius: 6px; background: linear-gradient(145deg, rgba(141,106,60,.22), rgba(0,0,0,.15)); color: var(--text); text-decoration: none; }
.nav-cmd:hover, .nav-cmd.active { border-color: #edbd7c; background: linear-gradient(145deg, rgba(237,189,124,.25), rgba(0,0,0,.1)); text-decoration: none; }
.nc-pic { position: relative; flex: none; line-height: 0; }
.nc-pic .avatar { border: 2px solid #8d6a3c; border-radius: 6px; }
.nc-pic.fallen .avatar { filter: grayscale(1) brightness(.6); }
.nc-pic .badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: #bf6956; color: #fff0d9; font: 700 11px/1 var(--mono); box-shadow: 0 0 0 2px var(--bg); }
.nc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nc-info b { font-family: var(--stamp); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; color: #edbd7c; }
.nc-info small { font-size: 11px; line-height: 1.25; color: var(--muted); }
.nc-bar { display: block; height: 5px; background: #3a2f22; border-radius: 3px; overflow: hidden; }
.nc-bar i { display: block; height: 100%; background: linear-gradient(#9cc46a, #5e8c35); }
.nc-bar.low i { background: linear-gradient(#e0775c, #a8432d); }
.nc-bar.xp i { background: linear-gradient(#5aa6e0, #2b6fa8); }
.mobile .m-navcmd { margin: 0 0 4px; }
.mobile .m-world { display: block; font-size: 11px; }

/* commander: appearance */
.look-cats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.look-cat { padding: .3rem .7rem; background: transparent; color: var(--link); border: 1px solid var(--line); border-radius: 16px; }
.look-cat.on { background: #8d6a3c; color: #fff4dc; border-color: #edbd7c; }
.look-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; }
.look-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.look-opt { padding: 3px; background: var(--panel-2); border: 2px solid #8d6a3c; border-radius: 6px; line-height: 0; min-height: 0; }
.look-opt.on { border-color: var(--good); box-shadow: 0 0 0 2px rgba(167,197,139,.35); }
.look-opt .avatar { width: 100%; height: auto; }
.look-side { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.look-preview .avatar { border: 3px solid #8d6a3c; border-radius: 8px; }
.look-tools { justify-content: center; }
.look-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; margin-top: 1rem; }
.look-text input, .look-text textarea { display: block; width: 100%; margin-top: .25rem; box-sizing: border-box; }
.look-text textarea { resize: vertical; font: inherit; }
.look-foot { justify-content: space-between; align-items: center; margin-bottom: 0; }

/* commander: inventory and items (v0.67.0) */
.inv-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.inv-silver { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); }
.silver-ico { vertical-align: -3px; }
.inv-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.inv-slot-box { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.it-tile { --rc: #8d6a3c; position: relative; width: 64px; height: 64px; padding: 0; display: grid; place-items: center; border: 2px solid var(--rc); border-radius: 6px; color: var(--rc);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 22%, transparent), rgba(0,0,0,.35)); box-shadow: inset 0 0 10px rgba(0,0,0,.5); min-height: 0; }
.it-tile.empty { border-style: dashed; border-color: var(--line); color: rgba(181,183,167,.35); background: rgba(0,0,0,.25); }
.it-tile.sel { outline: 2px solid #fff4dc; outline-offset: 2px; }
.it-tile .it-flag { position: absolute; right: 3px; bottom: 2px; line-height: 0; }
.inv-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.inv-figure { display: flex; flex-direction: column; align-items: center; max-width: 220px; }
.inv-figure .figure { border: 2px solid #8d6a3c; border-radius: 8px; }
.inv-figure h4 { margin: .8rem 0 .3rem; align-self: flex-start; }
.gear-sum { margin: 0; padding-left: 1.1rem; align-self: stretch; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: .45rem; margin-top: .6rem; }
.inv-cell { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 8px rgba(0,0,0,.45); }
.it-hint { margin-top: 0; }
.it-detail { --rc: #8d6a3c; border: 1px solid var(--rc); border-radius: 6px; padding: .7rem .8rem; margin-bottom: 1rem; background: rgba(0,0,0,.18); }
.it-head { display: flex; gap: .7rem; align-items: center; }
.it-head > div { display: flex; flex-direction: column; gap: .15rem; }
.it-big { color: var(--rc); line-height: 0; }
.it-rarity { color: var(--rc); font-weight: 700; }
.it-perks { margin: .6rem 0; padding-left: 1.1rem; }
.it-perks li.foreign { color: var(--muted); }
.it-detail .row { gap: .5rem; margin: 0; }
.report-find a { margin-left: .3rem; }
.look-previews { display: flex; gap: .6rem; align-items: flex-end; }
.look-figure .figure { border: 2px solid #8d6a3c; border-radius: 6px; }
.silver-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.silver-head p { margin: 0; flex: 1 1 260px; }
.silver-bal { display: inline-flex; align-items: center; gap: .45rem; font: 700 1.3rem var(--mono); }
.silver-form h4 { margin: .2rem 0; }
.silver-form .row { gap: .5rem; align-items: center; }
.silver-form .num { width: 6rem; }
.silver-hist ul { margin: .4rem 0 0; padding-left: 1.1rem; }
@media (max-width: 760px) {
  .inv-wrap { grid-template-columns: 1fr; }
  .inv-figure { margin: 0 auto; }
  .inv-slots { gap: .3rem; }
  .it-tile { width: 54px; height: 54px; }
  .inv-grid { grid-template-columns: repeat(auto-fill, 54px); }
  .inv-cell { width: 54px; height: 54px; }
  .look-preview .avatar { width: 150px; height: 150px; }
}
.silver-rate { display: flex; align-items: center; gap: .3rem; font-family: var(--mono); }
/* appearance tab on small screens: preview first, categories in one scrolling line, options in a 3-column grid */
@media (max-width: 760px) {
  .look-main, .look-text { grid-template-columns: 1fr; }
  .look-side { order: -1; }
  .look-previews { justify-content: center; }
  .look-preview .avatar { width: 150px; height: 150px; }
  .look-figure .figure { width: 79px; height: 150px; }
  .look-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
  .look-cat { flex: none; }
  .look-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .look-foot { flex-wrap: wrap; gap: .6rem; }
  .look-foot button { width: 100%; }
}
/* commander inventory: resource slots and the delivery list (v0.68.0) */
.res-tile { gap: 0; }
.res-tile .res-amt { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 700 11px/1 var(--mono); color: #fff4dc; text-shadow: 0 1px 2px #000; }
.res-tile .res-icon { margin-top: -8px; }
.deliv-h { margin: 1.2rem 0 .2rem; }
.deliv-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .45rem; }
.deliv-list li { --rc: #8d6a3c; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--rc); border-radius: 6px; background: rgba(0,0,0,.18); }
.deliv-list li > span:nth-child(2) { min-width: 0; }
button.ghost.danger { background: transparent; color: var(--bad); border-color: rgba(231,130,112,.5); }
/* the auction house */
.au-intro p { margin-bottom: 0; }
.au-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 1rem; }
.au-list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .7rem; }
.au-card { --rc: #8d6a3c; display: flex; flex-direction: column; gap: .45rem; padding: .7rem .8rem; border: 1px solid var(--rc); border-radius: 6px; background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 12%, transparent), rgba(0,0,0,.2)); }
.au-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.au-head > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.au-card .it-perks { margin: 0; }
.au-price { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-family: var(--mono); }
.au-time { margin-left: auto; }
.au-bid { gap: .4rem; align-items: center; margin: 0; }
.au-bid .num { width: 6.5rem; }
@media (max-width: 760px) { .mobile .mk-tabs { flex-wrap: nowrap; } .au-list { grid-template-columns: 1fr; } }
/* Orders grouped per building / field band (v0.70.0) */
.ord-group { border: 1px solid var(--line); border-radius: 4px; margin: .4rem 0; background: rgba(0,0,0,.12); }
.ord-group.has-ready { border-color: rgba(167,197,139,.55); }
.ord-group.done { opacity: .7; }
.ord-group > summary { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; padding: .45rem .6rem; cursor: pointer; }
.ord-group > summary .ord-gname { flex: 1 1 auto; min-width: 0; }
.ord-group > summary .ord-gbar { flex: 1 0 100%; }
.ord-gname { font-family: var(--stamp); letter-spacing: .04em; }
.ord-gbar { height: 5px; }
.ord-group .ord-list { margin: 0; padding: 0 .5rem .5rem; }
/* Field Manual tables (v0.70.0) */
.man-table { font-size: 13px; }
.man-table td, .man-table th { padding: .3rem .45rem; }
.man-table .res-icon { vertical-align: -3px; }
.man-units .man-pic { width: 84px; padding: 2px; }
.man-units .man-pic .unit-art { display: block; width: 80px; height: 48px; object-fit: cover; border-radius: 3px; }
/* raid lists: a raid on its way (⚔) or troops coming back (↩) (v0.70.1) */
.raid-live { display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; padding: .05rem .4rem; border-radius: 3px; font: 700 12px var(--mono); white-space: nowrap; }
.raid-live.fight { background: rgba(231,130,112,.18); color: var(--bad); border: 1px solid rgba(231,130,112,.5); animation: raid-pulse 1.6s ease-in-out infinite; }
.raid-live.back { background: rgba(167,197,139,.14); color: var(--good); border: 1px solid rgba(167,197,139,.4); }
.raid-live .timer { color: inherit; }
tr.in-combat { box-shadow: inset 3px 0 0 var(--bad); }
@keyframes raid-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .raid-live.fight { animation: none; } }
.world-go .world-tab { margin-left: .8rem; }
.th-cmd { display: grid; place-items: center; width: 34px; height: 22px; color: #edbd7c; font-size: 16px; }
/* alliance depot (v0.74.0) */
.dep-res { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .6rem; align-items: center; margin: .45rem 0; }
.dep-bar { position: relative; display: block; height: 12px; background: #3a2f22; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.dep-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.dep-bar i.inc { background: repeating-linear-gradient(45deg, rgba(167,197,139,.45) 0 4px, transparent 4px 8px); }
.dep-bar i:first-child { z-index: 1; }
.dep-num { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.dep-up { gap: .6rem; align-items: center; margin-bottom: 0; }
.dep-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .4rem 0; }
.dep-inputs label { display: flex; align-items: center; gap: .3rem; }
.dep-inputs .num { width: 100%; min-width: 0; }
.dep-log { margin: 0; padding-left: 1.1rem; }
.dep-log li { margin: .2rem 0; }
.dep-log .res-icon { vertical-align: -3px; }
@media (max-width: 640px) { .dep-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dep-res { grid-template-columns: 24px minmax(0, 1fr); } .dep-num { grid-column: 2; } }

/* names while typing (alliance invite, v0.76.0) */
.ac-wrap { position: relative; flex: 1 1 14rem; min-width: 0; }
.ac-wrap > input { width: 100%; box-sizing: border-box; }
.ac-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; list-style: none;
  background: var(--panel-2); border: 1px solid var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.45); max-height: 18rem; overflow-y: auto; }
.ac-list li { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .4rem .7rem; cursor: pointer; }
.ac-list li b { color: var(--accent); }
.ac-list li small { color: var(--muted); white-space: nowrap; }
.ac-list li:hover:not(.off):not(.ac-none), .ac-list li.on { background: rgba(229,161,111,.14); }
.ac-list li.off, .ac-list li.ac-none { cursor: default; opacity: .6; }
.ac-block { flex: none; width: 100%; }
.ac-list .ac-at { color: var(--muted); font-size: .85em; margin-left: .35rem; }
.max-links { white-space: nowrap; }
/* the Barracks, Tank Factory and Airfield queues line up: the same column widths in every table */
.train-queue-tbl { table-layout: fixed; width: 100%; min-width: 560px; }
.train-queue-tbl .c-n { width: 6%; }
.train-queue-tbl .c-unit { width: 31%; }
.train-queue-tbl .c-left { width: 9%; }
.train-queue-tbl .c-status { width: 26%; }
.train-queue-tbl .c-done { width: 15%; }
.train-queue-tbl .c-cancel { width: 13%; }
.train-queue-tbl td { overflow-wrap: anywhere; }
/* the commander's portrait in a report's troops table (v0.79.4): head and shoulders in the unit photo frame */
.cmd-thumb { position: relative; background: #3a4a52; }
.cmd-thumb svg { width: 100%; height: auto; display: block; margin-top: -6px; }
.cmd-thumb i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 11px; line-height: 1; color: #e9c46a; text-shadow: 0 0 2px #000, 0 0 2px #000; }