:root {
  --bg: #0d0c0a; --panel: rgba(22, 20, 17, 0.92); --line: #4a463d; --text: #e6dfca;
  --dim: #9a937f; --accent: #c9a55a; --danger: #b8543f;
  font-family: "Courier New", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
.hidden { display: none !important; }

#stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: #000; }
#view { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- in-game UI: pixel font and pixel frames, sized in "pixels" of --p (see ui.js) ---------- */
:root { --p: 2px; }
.pixel {
  font-family: Pixel, "Courier New", monospace; font-size: calc(var(--p) * 8); line-height: calc(var(--p) * 11);
  font-weight: normal; font-synthesis: none; -webkit-font-smoothing: none; color: var(--text);
}
.pixel b { font-weight: normal; color: #f4ecd0; }
.panel { padding: 0 calc(var(--p) * 2); } /* frame: ui.js */
.dim { color: var(--dim); }
.gold { color: var(--accent); }
.pic { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.inset { background: #0d0c0a; padding: var(--p); box-shadow: inset calc(var(--p) * -1) calc(var(--p) * -1) 0 #2a2620; }

#hud > div { position: absolute; pointer-events: none; }
#hud-top { top: calc(var(--p) * 4); left: calc(var(--p) * 4); display: flex; gap: calc(var(--p) * 2); align-items: flex-start; }
#hud-top.right { left: auto; right: calc(var(--p) * 4); flex-direction: row-reverse; }
#hud-top .panel, .card { display: flex; gap: calc(var(--p) * 3); align-items: center; padding-top: var(--p); padding-bottom: var(--p); }
#hud-player .army { color: #f4ecd0; }
#hud-weather .desc { max-width: calc(var(--p) * 100); }
#hud-info { bottom: calc(var(--p) * 4); left: calc(var(--p) * 4); display: flex; gap: calc(var(--p) * 2); align-items: flex-end; }
#hud-info.right { left: auto; right: calc(var(--p) * 4); flex-direction: row-reverse; }
.card { align-items: flex-start; }
.card .txt { min-width: calc(var(--p) * 44); max-width: calc(var(--p) * 110); }
.stars { color: var(--accent); }
.stars .off { color: #4a463d; }
.hp { display: inline-flex; gap: var(--p); margin-left: calc(var(--p) * 2); }
.hp i { width: calc(var(--p) * 2); height: calc(var(--p) * 5); background: #3a352c; }
.hp i.on { background: #8fb35a; }
.hp.mid i.on { background: #d9b85c; }
.hp.low i.on { background: #d0603f; }
.stat { margin-right: calc(var(--p) * 4); white-space: nowrap; }
.stat .ico { color: var(--accent); margin-right: var(--p); }
.stat.warn { color: #e0a060; }
#hud-forecast { bottom: calc(var(--p) * 4); right: calc(var(--p) * 4); }
#hud-forecast.left { right: auto; left: calc(var(--p) * 4); }

.menu { position: absolute; min-width: calc(var(--p) * 56); padding: var(--p) var(--p); z-index: 5; }
.menu .title { color: var(--dim); padding: 0 calc(var(--p) * 2); }
.menu button {
  display: flex; justify-content: space-between; gap: calc(var(--p) * 8); width: 100%; text-align: left;
  padding: 0 calc(var(--p) * 2) 0 var(--p); border: 0; line-height: inherit;
}
.menu button span:first-child::before { content: '▶'; color: var(--accent); margin-right: var(--p); visibility: hidden; }
.menu button.sel span:first-child::before { visibility: visible; }
.menu button.sel, .menu button:hover:not(:disabled) { background: rgba(201, 165, 90, 0.16); border: 0; }
.menu button:disabled { color: #5d584c; }
.menu button span:last-child { color: var(--dim); }
.menu button span:first-child { display: flex; align-items: center; }
.menu button .pic { margin-right: calc(var(--p) * 2); }
.menu button:has(.pic) { align-items: center; padding-top: var(--p); padding-bottom: var(--p); }
.menu button:disabled .pic { filter: grayscale(1) brightness(0.6); }
.menu .detail {
  color: var(--dim); width: 0; min-width: 100%; min-height: calc(var(--p) * 22); margin-top: calc(var(--p) * 2);
  padding: var(--p) calc(var(--p) * 2) 0; border-top: var(--p) solid #3b362d;
}

#banner {
  position: absolute; left: 0; right: 0; top: 40%; padding: calc(var(--p) * 4); text-align: center;
  font-size: calc(var(--p) * 16); line-height: calc(var(--p) * 22); letter-spacing: var(--p);
  background: rgba(13, 12, 10, 0.9); box-shadow: 0 calc(var(--p) * -1) 0 #8a7e62, 0 var(--p) 0 #3b362d;
  animation: slide 0.25s ease-out; z-index: 6;
}
#banner small { display: block; font-size: calc(var(--p) * 8); line-height: calc(var(--p) * 11); letter-spacing: 0; color: var(--dim); }
@keyframes slide { from { transform: translateX(-100%); } to { transform: none; } }
#toast { position: absolute; top: calc(var(--p) * 54); left: 50%; transform: translateX(-50%); z-index: 7; }

button {
  font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; padding: 4px 8px; cursor: pointer;
}
button:disabled { color: #5d584c; cursor: default; }

/* ---------- full screens (title, new game, settings…): the same pixel font, sized by --p ---------- */
#screen {
  position: fixed; inset: 0; overflow: auto; z-index: 10;
  background: radial-gradient(ellipse at 50% 30%, #2b2820 0%, #121110 60%, #0a0908 100%);
}
#screen.demo { background: linear-gradient(90deg, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.75) 45%, rgba(10,9,8,0.25) 100%); }
.scr { max-width: calc(var(--p) * 430); margin: 0 auto; padding: calc(var(--p) * 12) calc(var(--p) * 8); }
.scr h1, .logo {
  font-size: calc(var(--p) * 32); line-height: calc(var(--p) * 36); letter-spacing: calc(var(--p) * 2); font-weight: normal;
  margin: calc(var(--p) * 16) 0 0; color: var(--accent);
  text-shadow: 0 calc(var(--p) * -1) 0 #f0d68e, var(--p) var(--p) 0 #6b5220, calc(var(--p) * 2) calc(var(--p) * 2) 0 #0d0c0a;
}
.scr h2 {
  font-size: calc(var(--p) * 16); line-height: calc(var(--p) * 22); font-weight: normal; letter-spacing: var(--p); color: var(--accent);
  margin: calc(var(--p) * 8) 0 calc(var(--p) * 6); padding-bottom: calc(var(--p) * 2); box-shadow: 0 var(--p) 0 #3b362d, 0 calc(var(--p) * 2) 0 #0d0c0a;
}
.scr h3 { font-size: inherit; font-weight: normal; color: #f4ecd0; margin: calc(var(--p) * 8) 0 calc(var(--p) * 2); }
.scr .sub { color: var(--dim); margin: calc(var(--p) * 2) 0 calc(var(--p) * 16); }
.scr b { font-weight: normal; color: #f4ecd0; }
.scr small { color: var(--dim); }
.scr p, .scr ul { margin: calc(var(--p) * 4) 0; }
.scr ul { padding-left: calc(var(--p) * 10); }

/* the title menu: a framed list with the same ▶ cursor as the in-game menus */
.titlebox { max-width: calc(var(--p) * 290); }
.menu-list { display: inline-flex; flex-direction: column; min-width: calc(var(--p) * 100); padding: calc(var(--p) * 2) var(--p); }
.menu-list button { display: block; width: 100%; text-align: left; padding: 0 calc(var(--p) * 4) 0 var(--p); border: 0; line-height: calc(var(--p) * 13); }
.menu-list button::before { content: '▶'; color: var(--accent); margin-right: calc(var(--p) * 2); visibility: hidden; }
.menu-list button.sel::before { visibility: visible; }
.menu-list button.sel { background: rgba(201, 165, 90, 0.16); }
.menu-list button:focus { outline: none; }
.menu-list button small { display: block; margin: calc(var(--p) * -3) 0 var(--p) calc(var(--p) * 8); line-height: calc(var(--p) * 11); }

/* buttons, fields and boxes elsewhere: flat pixel boxes with a bevel lit from the top left */
.scr button:not(.item):not(.menu-list button) {
  border: var(--p) solid; border-color: #6b6250 #2e2a23 #2e2a23 #6b6250; background: #26231d;
  padding: 0 calc(var(--p) * 4); box-shadow: var(--p) var(--p) 0 #0d0c0a;
}
.scr button:not(.item):not(.menu-list button):hover:not(:disabled), .scr button:not(.item):not(.menu-list button):focus-visible {
  background: #3a352c; border-color: #c9a55a #6b5220 #6b5220 #c9a55a; outline: none;
}
.scr button.primary { color: var(--accent); }
.scr button.danger:hover:not(:disabled) { color: #e07a5f; }
.swatch { display: inline-block; width: calc(var(--p) * 5); height: calc(var(--p) * 5); box-shadow: 0 0 0 var(--p) #0d0c0a; margin-right: calc(var(--p) * 4); }
.row { display: flex; gap: calc(var(--p) * 4); align-items: center; flex-wrap: wrap; margin: calc(var(--p) * 3) 0; }
.row label { min-width: calc(var(--p) * 90); color: var(--dim); }
input { accent-color: var(--accent); }
input[type=checkbox] {
  appearance: none; width: calc(var(--p) * 6); height: calc(var(--p) * 6); margin: 0 var(--p); cursor: pointer;
  background: #1c1a16; box-shadow: 0 0 0 var(--p) #4a463d;
}
input[type=checkbox]:checked { background: var(--accent); box-shadow: 0 0 0 var(--p) #4a463d, inset 0 0 0 var(--p) #1c1a16; }
input[type=range] { appearance: none; height: calc(var(--p) * 8); background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: calc(var(--p) * 2); background: #4a463d; }
input[type=range]::-moz-range-track { height: calc(var(--p) * 2); background: #4a463d; }
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: calc(var(--p) * 4); height: calc(var(--p) * 8); margin-top: calc(var(--p) * -3);
  background: var(--accent); border: 0; border-radius: 0; box-shadow: 0 0 0 var(--p) #0d0c0a;
}
input[type=range]::-moz-range-thumb { width: calc(var(--p) * 4); height: calc(var(--p) * 8); background: var(--accent); border: 0; border-radius: 0; box-shadow: 0 0 0 var(--p) #0d0c0a; }
select { font: inherit; background: #1c1a16; color: var(--text); border: var(--p) solid #4a463d; border-radius: 0; padding: 0 calc(var(--p) * 2); }
input[type=range] { width: calc(var(--p) * 80); }
.list { display: flex; flex-direction: column; gap: calc(var(--p) * 3); }
.item {
  display: flex; gap: calc(var(--p) * 4); align-items: center; width: 100%; text-align: left; padding: calc(var(--p) * 2) calc(var(--p) * 4);
  border: var(--p) solid #3b362d; background: rgba(0, 0, 0, 0.3); box-shadow: var(--p) var(--p) 0 #0d0c0a;
}
button.item:hover, button.item:focus-visible { border-color: #6b6250; background: rgba(0, 0, 0, 0.3); outline: none; }
.item.sel, button.item.sel:hover { border-color: var(--accent); }
.item .grow { flex: 1; }
.item small { color: var(--dim); display: block; }
.preview { image-rendering: pixelated; border: var(--p) solid #3b362d; box-shadow: var(--p) var(--p) 0 #0d0c0a; background: #000; max-width: 100%; }
.flexcols { display: flex; gap: calc(var(--p) * 10); flex-wrap: wrap; }
.flexcols > div { flex: 1; min-width: calc(var(--p) * 140); }
.error { color: #e07a5f; white-space: pre-wrap; }
.help p, .help li { color: #cfc8b3; }
.scr pre { font: 14px/1.3 "Courier New", monospace; background: #0008; padding: calc(var(--p) * 4); border: var(--p) solid #3b362d; overflow: auto; }
kbd { box-shadow: 0 0 0 var(--p) #4a463d; padding: 0 var(--p); margin: 0 var(--p); background: #1c1a16; }
.footer { margin-top: calc(var(--p) * 10); display: flex; gap: calc(var(--p) * 4); flex-wrap: wrap; }
.gameover { text-align: center; }

/* ---------- map editor: a tool column on the left, the map to its right ---------- */
#screen.overlay { background: rgba(10, 9, 8, 0.86); }
#editor {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 4; width: calc(var(--p) * 104); overflow: hidden auto;
  display: flex; flex-direction: column; gap: calc(var(--p) * 4); padding: calc(var(--p) * 4);
  background: #15130f; box-shadow: var(--p) 0 0 #3b362d, calc(var(--p) * 2) 0 0 #0d0c0a;
}
#editor .ed-sec { color: #f4ecd0; margin-bottom: var(--p); }
#editor .ed-sec .dim { margin-left: calc(var(--p) * 2); }
#editor .ed-row { display: flex; flex-wrap: wrap; gap: calc(var(--p) * 2); align-items: center; }
#editor button {
  line-height: calc(var(--p) * 11); padding: 0 calc(var(--p) * 2); box-shadow: var(--p) var(--p) 0 #0d0c0a;
  border: var(--p) solid; border-color: #6b6250 #2e2a23 #2e2a23 #6b6250; background: #26231d;
}
#editor button:hover:not(:disabled) { background: #3a352c; }
#editor button.sel { color: #f4ecd0; background: #4a3f26; border-color: #c9a55a #6b5220 #6b5220 #c9a55a; }
#editor button:disabled { opacity: 0.35; }
#editor .ed-hint { margin-top: calc(var(--p) * 2); min-height: calc(var(--p) * 22); }
#editor .ed-own { display: flex; align-items: center; padding: 0 calc(var(--p) * 2) 0 var(--p); }
#editor .ed-own .swatch { margin-right: calc(var(--p) * 2); }
#editor .ed-tabs { margin-bottom: calc(var(--p) * 2); }
#editor .ed-tabs button { flex: 1; }
#editor .ed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--p) * 2); }
#editor .ed-cell { display: flex; justify-content: center; align-items: flex-end; padding: var(--p); }
#editor .ed-cell:disabled .pic { filter: grayscale(1); }
#editor .ed-hp button { padding: 0 var(--p); }
#editor .ed-hp span { min-width: calc(var(--p) * 10); text-align: center; }
#editor .ed-name { width: 100%; text-align: left; color: var(--accent); }
#editor .ed-actions button { flex: 1; }
#editor .ed-actions .wide { flex-basis: 100%; }
#editor ul { margin: var(--p) 0 0; padding-left: calc(var(--p) * 6); color: #cfc8b3; }
#editor .ok { color: #9fc070; }
#editor .error { white-space: normal; }
#ed-info { position: absolute; bottom: calc(var(--p) * 4); left: calc(var(--p) * 4); pointer-events: none; }
#ed-info.right { left: auto; right: calc(var(--p) * 4); }
#ed-info .txt { min-width: calc(var(--p) * 60); }
input[type=text], input[type=number] {
  font: inherit; color: var(--text); background: #1c1a16; border: var(--p) solid #4a463d; border-radius: 0; padding: 0 calc(var(--p) * 2);
}
input[type=text] { width: calc(var(--p) * 160); max-width: 100%; }
input[type=number] { width: calc(var(--p) * 30); }
input[type=text]:focus, input[type=number]:focus { outline: none; border-color: var(--accent); }