:root {
  --ink: #2a1d12;
  --ink-soft: #5b4430;
  --paper: #f0e5c8;
  --paper-2: #e3d2a9;
  --gold: #c9a043;
  --gold-hi: #f3d27a;
  --blue: #1c2f63;
  --blue-2: #2d4f97;
  --red: #8e2a22;
  --green: #3f5c33;
  --f-title: 'Bodoni Moda', Didot, 'Bodoni 72', 'Bodoni MT', serif;
  --f-body: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --f-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a140e; color: var(--ink); font-family: var(--f-body); }
#map { position: fixed; inset: 0; display: block; cursor: crosshair; }
.hidden { display: none !important; }
button { font-family: var(--f-sc); cursor: pointer; }
kbd {
  font-family: var(--f-sc); font-size: 0.78em; padding: 0 4px; border: 1px solid rgba(90, 60, 30, 0.5);
  border-radius: 3px; background: rgba(255, 250, 235, 0.6); color: var(--ink-soft);
}

/* ---------- panels ---------- */
.panel {
  position: fixed;
  background: linear-gradient(180deg, #f3e9cf 0%, #e8d9b4 100%);
  border: 1px solid #5d4224;
  box-shadow: 0 0 0 3px #efe3c4, 0 0 0 4px #a8843a, 0 8px 28px rgba(0, 0, 0, 0.55);
  border-radius: 2px;
}
.panel h2 {
  margin: 0; padding: 7px 10px 6px; font: 600 15px var(--f-title); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); border-bottom: 1px solid rgba(93, 66, 36, 0.4); display: flex; justify-content: space-between; align-items: center;
}
.panel h2 button { background: none; border: 1px solid rgba(93, 66, 36, 0.4); width: 22px; height: 20px; line-height: 14px; color: var(--ink-soft); }
.panel.collapsed > :not(h2) { display: none; }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 14px; z-index: 5;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.tb-block {
  background: linear-gradient(180deg, #f3e9cf, #e5d4ac); border: 1px solid #5d4224;
  box-shadow: 0 0 0 2px #efe3c4, 0 0 0 3px #a8843a, 0 6px 20px rgba(0, 0, 0, 0.5);
  padding: 7px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 210px; font-size: 14px;
}
.tb-block > div { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tb-block .lbl { font-family: var(--f-sc); color: var(--ink-soft); font-size: 13px; }
.tb-block b { font: 600 16px var(--f-title); color: var(--ink); }
.tb-row button, #speed button {
  background: #f8f0dc; border: 1px solid #8b6a3a; color: var(--ink); padding: 1px 8px; font-size: 13px; min-width: 30px;
}
#speed { gap: 3px !important; justify-content: flex-start !important; }
#speed button.on { background: var(--blue); color: var(--gold-hi); border-color: var(--gold); }
#btn-end { color: var(--red); }

#cartouche {
  background: radial-gradient(ellipse at 50% 30%, #2a4485 0%, var(--blue) 60%, #121e44 100%);
  border: 1px solid var(--gold); box-shadow: 0 0 0 3px #13204a, 0 0 0 4px var(--gold), 0 8px 24px rgba(0, 0, 0, 0.6);
  color: var(--gold-hi); text-align: center; padding: 6px 26px 7px; min-width: 330px; border-radius: 2px;
  position: relative;
}
#cartouche::before, #cartouche::after { content: '✦'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 14px; }
#cartouche::before { left: 9px; }
#cartouche::after { right: 9px; }
.c-date { font: 12px var(--f-sc); letter-spacing: 0.06em; color: #d8c48a; }
.c-time { font: 600 30px var(--f-title); letter-spacing: 0.04em; line-height: 1.1; }
.c-time #daypart { font: italic 15px var(--f-body); color: #d8c48a; letter-spacing: 0; }
.c-weather { font: italic 13px var(--f-body); color: #e9dcb4; }

/* ---------- order of battle ---------- */
#oob { top: 108px; left: 14px; width: 288px; max-height: calc(100vh - 330px); display: flex; flex-direction: column; z-index: 4; }
#oob-list { overflow-y: auto; padding: 4px 0 6px; }
.oob-corps {
  display: flex; align-items: baseline; gap: 6px; padding: 6px 10px 2px; cursor: pointer; border-top: 1px dotted rgba(93, 66, 36, 0.35);
}
.oob-corps:first-child { border-top: none; }
.oob-corps .pennant { width: 10px; height: 8px; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); align-self: center; }
.oob-corps .cn { font: 600 13px var(--f-title); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.oob-corps .cc { font: italic 12px var(--f-body); color: var(--ink-soft); margin-left: auto; }
.oob-unit { display: flex; align-items: center; gap: 7px; padding: 2px 10px 2px 14px; cursor: pointer; }
.oob-unit:hover { background: rgba(201, 160, 67, 0.15); }
.oob-unit.sel { background: rgba(201, 160, 67, 0.35); box-shadow: inset 3px 0 0 var(--gold); }
.oob-unit.routed .un b { color: var(--red); }
.oob-unit.fight .sym { animation: pulse 0.9s infinite alternate; }
.oob-unit.dead { opacity: 0.4; text-decoration: line-through; }
.oob-unit .sym { line-height: 0; }
.oob-unit .un { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: 1; }
.oob-unit .un b { font: 14px var(--f-sc); font-weight: normal; }
.oob-unit .un i { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oob-unit .us { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.oob-unit .men { font: 12px var(--f-title); font-style: normal; }
.mbar { width: 44px; height: 4px; background: rgba(60, 40, 20, 0.25); display: block; }
.mbar i { display: block; height: 100%; }
@keyframes pulse { from { filter: none; } to { filter: drop-shadow(0 0 3px #c0262d); } }

/* ---------- dispatches ---------- */
#dispatches { top: 108px; right: 14px; width: 318px; max-height: 44vh; display: flex; flex-direction: column; z-index: 4; }
#disp-list { overflow-y: auto; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.disp {
  background: rgba(255, 250, 236, 0.55); border-left: 3px solid var(--blue-2); padding: 4px 8px 5px; font-size: 13.5px; line-height: 1.25;
  animation: dispIn 0.5s ease-out;
}
.disp.loc { cursor: pointer; }
.disp.loc:hover { background: rgba(255, 250, 236, 0.9); }
.disp.good { border-left-color: #4f8a3a; }
.disp.bad { border-left-color: var(--red); background: rgba(255, 228, 215, 0.55); }
.disp.warn { border-left-color: #c8962a; }
.d-head { display: flex; justify-content: space-between; font: 12px var(--f-sc); color: var(--ink-soft); }
.d-auth { font-style: italic; }
.d-text { font-style: italic; color: var(--ink); }
@keyframes dispIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---------- unit card ---------- */
#card { bottom: 16px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 640px)); min-width: 460px; padding: 10px 14px 9px; z-index: 4; }
.c-head { display: flex; gap: 12px; align-items: center; }
.c-head .c-sym { line-height: 0; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3)); }
.c-name { font: 600 21px var(--f-title); color: var(--blue); letter-spacing: 0.02em; }
.c-head.enemy .c-name { color: var(--green); }
.c-sub { font: italic 13.5px var(--f-body); color: var(--ink-soft); }
.c-stats { display: flex; gap: 18px; margin: 8px 0 6px; flex-wrap: wrap; align-items: baseline; border-top: 1px solid rgba(93, 66, 36, 0.3); padding-top: 6px; }
.c-stats > div { display: flex; align-items: baseline; gap: 6px; }
.c-stats label { font: 12.5px var(--f-sc); color: var(--ink-soft); }
.c-stats b { font: 600 16px var(--f-title); }
.c-stats i, .c-stats em { font-size: 12.5px; color: var(--ink-soft); }
.c-stats .bar { width: 110px; height: 7px; background: rgba(60, 40, 20, 0.22); display: inline-block; align-self: center; border: 1px solid rgba(60, 40, 20, 0.35); }
.c-stats .bar i { display: block; height: 100%; background: #4f8a3a; }
.c-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.c-btns .grp { display: flex; gap: 4px; align-items: center; }
.c-btns label { font: 12.5px var(--f-sc); color: var(--ink-soft); margin-right: 3px; }
.c-btns button {
  background: #f8f0dc; border: 1px solid #8b6a3a; color: var(--ink); padding: 2px 7px; font-size: 13.5px;
}
.c-btns button:hover { background: #fff7e2; }
.c-btns button.cur { box-shadow: inset 0 -2px 0 var(--blue-2); }
.c-btns button.on { background: var(--blue); color: var(--gold-hi); border-color: var(--gold); }
.c-btns button.on kbd { color: var(--gold-hi); background: transparent; border-color: var(--gold); }
.c-terrain { font: italic 12.5px var(--f-body); color: var(--ink-soft); margin-top: 5px; }

/* ---------- minimap ---------- */
#minimap-wrap { bottom: 16px; right: 14px; padding: 5px; z-index: 4; line-height: 0; }
#minimap { width: 240px; height: 238px; cursor: pointer; display: block; }

/* ---------- banner ---------- */
#banner {
  position: fixed; top: 22%; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 8;
  background: linear-gradient(90deg, transparent, rgba(16, 14, 30, 0.82) 20%, rgba(16, 14, 30, 0.82) 80%, transparent);
  padding: 18px 0 20px; border-top: 1px solid rgba(201, 160, 67, 0.6); border-bottom: 1px solid rgba(201, 160, 67, 0.6);
  opacity: 0;
}
#banner.show { animation: bannerAnim 7s ease forwards; }
.b-orn { color: var(--gold); letter-spacing: 0.6em; font-size: 12px; }
.b-title {
  font: 800 46px var(--f-title); letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(180deg, #fbe7a6, #c9a043 60%, #8a6a22); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.b-text { font: italic 19px var(--f-body); color: #efe2bd; max-width: 820px; margin: 4px auto 0; }
@keyframes bannerAnim { 0% { opacity: 0; transform: scale(0.98); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

#pause-tag {
  position: fixed; top: 112px; left: 50%; transform: translateX(-50%); font: 15px var(--f-sc); letter-spacing: 0.15em;
  color: var(--gold-hi); background: rgba(20, 16, 30, 0.75); padding: 3px 14px; border: 1px solid var(--gold); display: none; z-index: 6;
}
body.paused #pause-tag { display: block; }
#tooltip {
  position: fixed; z-index: 9; pointer-events: none; background: rgba(243, 233, 207, 0.96); border: 1px solid #5d4224;
  padding: 4px 8px; font-size: 13px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); max-width: 280px;
}
#tooltip b { font: 600 14px var(--f-title); }

/* ---------- full screen overlays ---------- */
#title, #end, #help, #loading {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20, 14, 8, 0.55) 0%, rgba(12, 8, 4, 0.92) 75%);
  color: #efe2bd; overflow-y: auto;
}
#loading { background: #120d08; flex-direction: column; }
.ld-title { font: 800 54px var(--f-title); letter-spacing: 0.25em; color: var(--gold); }
.ld-text { font: italic 18px var(--f-body); color: #bfae86; margin-top: 8px; animation: blink 1.2s infinite alternate; }
@keyframes blink { from { opacity: 0.4; } to { opacity: 1; } }

.t-inner, .e-inner { text-align: center; max-width: 980px; padding: 30px 40px; }
#emblem { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.t-kicker, .e-kicker { font: 15px var(--f-sc); letter-spacing: 0.35em; color: #c8b07a; margin-top: 6px; }
#title h1, #end h1 {
  margin: 4px 0 0; font: 800 clamp(54px, 9vw, 116px) var(--f-title); letter-spacing: 0.16em; line-height: 1;
  background: linear-gradient(180deg, #fff1c0 0%, #e7c065 45%, #a07b2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
}
#end h1 { font-size: clamp(40px, 6vw, 76px); }
.t-sub { font: italic 26px var(--f-body); color: #efe2bd; margin-top: 4px; }
.t-rule { display: flex; align-items: center; gap: 16px; margin: 16px auto 18px; max-width: 520px; color: var(--gold); font: 17px var(--f-sc); letter-spacing: 0.2em; }
.t-rule::before, .t-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.t-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; text-align: left; margin: 0 auto 24px; }
.t-col { background: rgba(240, 229, 200, 0.07); border: 1px solid rgba(201, 160, 67, 0.35); padding: 14px 20px; }
.t-col h3, .h-inner h3 { font: 600 17px var(--f-title); letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.t-col p, .t-col li { font-size: 16.5px; line-height: 1.4; color: #e6d8b2; }
.t-col p { margin: 0 0 8px; }
.t-col ul { margin: 0; padding-left: 18px; }
.t-col b, .h-inner b { color: #f6dc93; font-weight: normal; font-family: var(--f-sc); }
#btn-start, #btn-again, .h-inner button {
  font: 600 20px var(--f-title); letter-spacing: 0.14em; text-transform: uppercase; color: #1a1208;
  background: linear-gradient(180deg, #f6dc8c, #c9a043 60%, #9a7527); border: 1px solid #5c4214; padding: 12px 34px;
  box-shadow: 0 0 0 3px rgba(12, 8, 4, 0.9), 0 0 0 4px var(--gold), 0 10px 30px rgba(0, 0, 0, 0.6); cursor: pointer;
}
#btn-start:hover, #btn-again:hover, .h-inner button:hover { filter: brightness(1.1); }
.home-link {
  position: fixed; top: 18px; left: 22px; z-index: 21; font: 15px var(--f-sc); letter-spacing: 0.2em;
  color: #c8b07a; text-decoration: none; opacity: 0.85;
}
.home-link:hover { color: var(--gold-hi); opacity: 1; }
.e-home { display: block; margin: 16px auto 0; position: static; }
.t-hint { margin-top: 18px; font: italic 14px var(--f-body); color: #a8976f; }
.t-hint kbd, .h-inner kbd { background: rgba(240, 229, 200, 0.12); color: #f0dfaf; border-color: rgba(201, 160, 67, 0.5); }

.e-inner h2 { font: italic 28px var(--f-body); color: #efe2bd; margin: 6px 0 10px; font-weight: normal; }
.e-text { font: italic 18px var(--f-body); color: #d8c9a0; max-width: 760px; margin: 0 auto 18px; line-height: 1.4; }
.e-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.e-grid > div { border: 1px solid rgba(201, 160, 67, 0.4); padding: 10px; background: rgba(240, 229, 200, 0.06); display: flex; flex-direction: column; }
.e-grid label { font: 13px var(--f-sc); letter-spacing: 0.12em; color: #c8b07a; }
.e-grid b { font: 600 30px var(--f-title); color: #f6dc93; }
.e-grid i { font-size: 13px; color: #b5a47c; }
.e-objs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 14px; }
.e-objs li { font: 14px var(--f-sc); padding: 3px 10px; border: 1px solid; }
.e-objs li.f { border-color: #6f8fd8; color: #b8c9f0; background: rgba(45, 79, 151, 0.3); }
.e-objs li.a { border-color: #7f9a6a; color: #c2d4b0; background: rgba(63, 92, 51, 0.3); }
.e-objs li span { color: var(--gold); margin-left: 4px; }
.e-hist { font-size: 15px; color: #b5a47c; max-width: 760px; margin: 0 auto 22px; }

.h-inner {
  background: linear-gradient(180deg, #f3e9cf, #e5d4ac); color: var(--ink); max-width: 980px; padding: 22px 30px 24px;
  border: 1px solid #5d4224; box-shadow: 0 0 0 4px #efe3c4, 0 0 0 5px #a8843a, 0 20px 60px rgba(0, 0, 0, 0.7); text-align: center;
}
.h-inner h2 { font: 600 26px var(--f-title); letter-spacing: 0.1em; color: var(--blue); margin: 0 0 12px; }
.h-inner h3 { color: var(--red); font-size: 15px; margin-top: 10px; }
.h-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; text-align: left; }
.h-inner ul { margin: 0; padding-left: 18px; }
.h-inner li { font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.h-inner b { color: var(--blue); }
.h-inner kbd { background: rgba(255, 250, 235, 0.7); color: var(--ink); border-color: rgba(90, 60, 30, 0.5); }
.h-inner button { margin-top: 14px; font-size: 16px; padding: 8px 26px; }