/* War of the North — BFME1-inspired theme layer (design canvas: "War of the North — Faction HUD").
   Menus and dialogs share a bronze-and-umber war-atlas look; in battle the war console is dressed per faction
   through the #hud[data-faction] variables below. Loaded after style.css and fonts.css. */

:root {
  --brass: #c89a4e;
  --brass-light: #e8c27a;
  --pine: #3a2412;
  --slate: #150d0b;
  --ink: #0e0907;
  --bone: #efe3cc;
  --muted: #b9a383;
  --ember: #d9553a;
  --line: rgba(200, 154, 78, .34);
  --panel: rgba(24, 15, 11, .95);
  --display: "Cinzel", "Palatino Linotype", Georgia, serif;
  --body: "Alegreya Sans", "Avenir Next", "Segoe UI", sans-serif;
}

body { font-size: 15px; }
h1, h2, h3 { letter-spacing: .02em; }
button { background: #1d120d; border-color: #6b4a2a; }
button:not(:disabled):hover { background-color: #2c1b11; border-color: var(--brass); }
.primary { background: #3a2412; border-color: #e0b565; color: #f7e3b4; box-shadow: inset 0 0 0 3px #3a2412, inset 0 0 0 4px #8a5f2c; }
.primary:not(:disabled):hover { background: #4a2e16; border-color: #f0c877; color: #fff0cc; box-shadow: inset 0 0 0 3px #4a2e16, inset 0 0 0 4px #a8753a; }
.primary:not(:disabled):active { background: #2c1b0e; }
.eyebrow { color: var(--brass-light); }

/* ---- Main menu: carved bronze column over the live dark-tower scene ---- */
#menu { background: linear-gradient(90deg, rgba(14, 8, 6, .97) 0%, rgba(20, 12, 9, .94) 30%, rgba(20, 12, 9, .55) 46%, rgba(20, 12, 9, 0) 62%); }
.menu-frame { border-color: rgba(200, 154, 78, .5); box-shadow: inset 0 0 0 5px rgba(14, 8, 6, .6), inset 0 0 0 6px rgba(92, 61, 33, .8); }
.menu-title { font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(42px, 5.2vw, 82px); letter-spacing: .03em; line-height: .98; color: #f3e6c8; }
.menu-primary .icon, .mbtn.primary .icon { color: #f0c877; }
.menu-btns { margin-top: 22px; }
.menu-btns .mbtn { min-height: 54px; }
.menu-btns .menu-primary { min-height: 64px; }
.menu-title span:first-child { letter-spacing: .06em; color: var(--brass-light); }
.menu-sub { font-family: "Cinzel", serif; color: #d8c7a7; }
.mbtn { font-family: "Cinzel", serif; font-size: 17px; background: #1d120d; border: 1px solid #7a5530; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); padding-left: 22px; padding-right: 22px; }
.mbtn small { font-family: var(--body); font-size: 12px; color: #c4ad8a; }
.mbtn:not(:disabled):hover { background: #2c1b11; border-color: #e0b565; }
.mbtn.primary, .menu-primary { background: #3a2412; border-color: #e0b565; color: #f7e3b4; }
.mbtn.primary small, .menu-primary small { color: #dcc293; }
.button-end { font-family: "Cinzel", serif; color: #8f7556; }

/* ---- Setup, dialogs, loading ---- */
.modal-card { background: #1a100c; border-color: #b8893f; box-shadow: inset 0 0 0 5px #1a100c, inset 0 0 0 6px #5c3d21, 0 20px 90px rgba(0, 0, 0, .6); }
.modal { background: rgba(10, 6, 4, .74); }
.toast-stack > .alert { background: #1a100c; border-color: #5c3d21; border-left-color: #b8893f; color: #efe0bd; }
.toast-stack > .alert.error { border-left-color: #c4532d; }
.fcard, .gcard, .frow > button, .genrow > button { background: #1d120d; border-color: #6b4a2a; }
.fcard.sel, .gcard.sel, .frow > button[aria-pressed="true"], .genrow > button[aria-pressed="true"] { border-color: #e8c27a; box-shadow: inset 0 0 0 1px #e8c27a; background: #2c1b11; }
#loading { background: #0e0907; }
.setup-launch { background: linear-gradient(180deg, rgba(21, 13, 11, 0), rgba(21, 13, 11, .97) 28%); }
#introGate { background: linear-gradient(0deg, rgba(8, 3, 2, .88), rgba(8, 3, 2, .12) 55%, rgba(8, 3, 2, .3)); }
.intro-title { font-family: "Cinzel", serif; font-weight: 700; }

/* ---- Faction skins for the battle HUD ---- */
#hud {
  --f-panel: #1a100c; --f-panel2: #2a1a12; --f-frame: #c89a4e; --f-frame-dark: #5c3d21; --f-accent: #f3d99b; --f-text: #efe3cc; --f-muted: #b9a383;
  --f-danger: #e0685a; --f-glow: rgba(224, 104, 90, .35); --f-health: #9fc27a; --f-stone: #0d0806; --f-display: "Cinzel", serif;
  --f-chip: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --f-console: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%, 0 40px);
  --f-tile: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%, 0 5px);
  --f-portrait: polygon(50% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  --f-crown: polygon(0 100%, 3% 0, 97% 0, 100% 100%);
  color: var(--f-text);
}
#hud[data-faction="men"] {
  --f-panel: #121c30; --f-panel2: #1b2942; --f-frame: #c3cad3; --f-frame-dark: #56647a; --f-accent: #f1f5fa; --f-text: #eef2f7; --f-muted: #a9b8cb;
  --f-danger: #e0685a; --f-glow: rgba(143, 180, 255, .35); --f-health: #8fc28a; --f-stone: #0d1522; --f-display: "Cinzel", serif;
}
#hud[data-faction="rohan"] {
  --f-panel: #1b2616; --f-panel2: #26351e; --f-frame: #d0a24a; --f-frame-dark: #6b4a24; --f-accent: #f6dc92; --f-text: #f5eedb; --f-muted: #c4b894;
  --f-danger: #e4704f; --f-glow: rgba(255, 211, 107, .35); --f-health: #9fcf73; --f-stone: #13190f; --f-display: "Uncial Antiqua", "Cinzel", serif;
  --f-chip: inset(0 round 10px); --f-console: inset(0 round 26px 26px 0 0); --f-tile: inset(0 round 8px); --f-portrait: inset(0 round 48px 48px 6px 6px);
  --f-crown: polygon(0 100%, 2% 0, 98% 0, 100% 100%);
}
#hud[data-faction="mordor"] {
  --f-panel: #140d0c; --f-panel2: #241411; --f-frame: #5a4640; --f-frame-dark: #1a0f0d; --f-accent: #ff6a3d; --f-text: #eedfd6; --f-muted: #b99a8c;
  --f-danger: #ff5a2a; --f-glow: rgba(255, 90, 42, .45); --f-health: #c9b24a; --f-stone: #0c0706; --f-display: "Pirata One", "Cinzel", serif;
  --f-chip: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 8% 100%, 0 70%);
  --f-console: polygon(0 22px, 4% 0, 9% 18px, 14% 0, 86% 0, 91% 18px, 96% 0, 100% 22px, 100% 100%, 0 100%);
  --f-tile: polygon(0 0, 100% 0, 100% 82%, 86% 100%, 14% 100%, 0 82%);
  --f-portrait: polygon(50% 0, 100% 20%, 90% 100%, 10% 100%, 0 20%);
  --f-crown: polygon(0 100%, 2% 0, 4% 100%, 6% 0, 94% 0, 96% 100%, 98% 0, 100% 100%);
}
#hud[data-faction="isengard"] {
  --f-panel: #131516; --f-panel2: #1e2225; --f-frame: #7c848c; --f-frame-dark: #2a2f34; --f-accent: #f4f1ea; --f-text: #ecebe6; --f-muted: #a6adb4;
  --f-danger: #ff8a3d; --f-glow: rgba(255, 138, 61, .4); --f-health: #b7c6a0; --f-stone: #0b0c0d; --f-display: "IM Fell English SC", "Cinzel", serif;
  --f-chip: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --f-console: polygon(0 30px, 30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  --f-tile: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --f-portrait: polygon(12% 0, 88% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  --f-crown: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}

#hud button { background: var(--f-panel2); border-color: var(--f-frame-dark); color: var(--f-text); }
#hud button:not(:disabled):hover { background: var(--f-panel2); border-color: var(--f-frame); box-shadow: inset 0 0 0 1px var(--f-frame); }
#hud button[aria-pressed="true"] { border-color: var(--f-accent); box-shadow: inset 0 0 0 1px var(--f-accent); }
#hud button:disabled { opacity: .5; }
#hud h2, #hud #selName { font-family: var(--f-display); }
#hud kbd { color: var(--f-muted); border-color: var(--f-frame-dark); }

/* Top bar: crest, carved resource plaques, clock */
#hud #topbar { background: var(--f-panel); border-bottom: 2px solid var(--f-frame); box-shadow: 0 1px 0 var(--f-frame-dark), 0 6px 18px rgba(0, 0, 0, .45); }
#hud .hud-crest { border-right: 0; padding-right: 0; }
#hud .hud-crest .icon { width: 38px; height: 38px; padding: 5px; color: var(--f-accent); fill: none; stroke: currentColor; stroke-width: 1.8; border: 2px solid var(--f-frame); background: var(--f-panel2); clip-path: var(--f-chip); }
#hud .res { height: 36px; padding: 0 14px; background: var(--f-panel2); border: 1px solid var(--f-frame); box-shadow: inset 0 0 0 2px var(--f-panel), inset 0 0 0 3px var(--f-frame-dark); clip-path: var(--f-chip); }
#hud .res .icon { color: var(--f-accent); }
#hud .res > [id] { font: 700 16px var(--body); font-variant-numeric: tabular-nums; }
#hud .resource-label { color: var(--f-muted); font-size: 11px; }
#hud #mapTitle { font-family: var(--f-display); font-style: normal; font-size: 15px; color: var(--f-muted); }
#hud #clock { color: var(--f-muted); font: 14px var(--body); font-variant-numeric: tabular-nums; }
#hud #pauseBtn, #hud #speedBtn { height: 36px; border-color: var(--f-frame); font-size: 13px; }

/* Objective banner below the top bar */
#hud .mission { left: 50%; top: calc(64px + var(--safe-top)); transform: translateX(-50%); max-width: min(760px, calc(100% - 700px)); padding: 6px 18px; border: 1px solid var(--f-frame-dark); border-left: 1px solid var(--f-frame-dark); background: color-mix(in srgb, var(--f-panel) 86%, transparent); text-align: center; text-shadow: none; }
#hud #factionBadge { color: var(--f-accent); font-family: var(--f-display); font-size: 12px; letter-spacing: .1em; text-transform: none; }
#hud #objective { font-family: var(--f-display); font-size: 16px; color: var(--f-text); margin-top: 0; }
#hud #controlHint { display: none; }

/* The war console */
#hud #console { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1320px, calc(100% - 24px)); height: 212px; pointer-events: none; z-index: 2; }
#hud #console::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 176px; background: var(--f-panel); border: 2px solid var(--f-frame); border-bottom: 0; clip-path: var(--f-console); box-shadow: inset 0 0 0 5px var(--f-panel), inset 0 0 0 6px var(--f-frame-dark); }
#hud #console::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 170px; height: 8px; background: var(--f-frame); clip-path: var(--f-crown); }
#hud #console > * { pointer-events: auto; position: relative; z-index: 1; }
#hud #console > #minimapWrap, #hud #console > #commandDock, #hud #console > #powersWrap { position: absolute; }
#hud #commandDock > * { position: relative; z-index: 1; }

#hud #minimapWrap { position: absolute; left: 20px; bottom: 16px; width: 196px; height: 196px; padding: 6px; border: 0; border-radius: 50%; background: var(--f-frame); box-shadow: 0 6px 20px rgba(0, 0, 0, .55); z-index: 2; }
#hud #minimapWrap .minimap-heading, #hud #minimapWrap .minimap-footer { display: none; }
#hud #minimap { width: 184px; height: 184px; border-radius: 50%; border: 3px solid var(--f-frame-dark); background: var(--f-stone); }

#hud #commandDock { position: absolute; left: 236px; right: 318px; bottom: 14px; height: 150px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 0; background: none; border: 0; box-shadow: none; z-index: 1; }
#hud #selPanel { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; padding: 4px 2px; overflow: auto; }
#hud .selection-heading { display: contents; }
#hud .selection-copy { grid-column: 2; min-width: 0; }
#hud #selPanel > #selBtns, #hud #selPanel > #stancePanel { grid-column: 2; margin: 0; }
#hud #selSub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .portrait { grid-row: 1 / span 3; flex-shrink: 0; width: 72px; height: 88px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--f-frame); background: var(--f-panel2); clip-path: var(--f-portrait); }
#hud .portrait .selection-icon { width: 44px; height: 44px; padding: 0; border: 0; color: var(--f-accent); fill: none; stroke: currentColor; stroke-width: 1.5; }
#hud #selName { font-size: 21px; line-height: 1.15; color: var(--f-text); }
#hud #selSub { color: var(--f-muted); font-size: 12px; }
#hud .health-bar { height: 9px; margin-top: 6px; width: min(240px, 100%); background: var(--f-frame-dark); border: 1px solid var(--f-frame); }
#hud .health-bar.hidden { display: none; }
#hud .health-bar > span { display: block; height: 100%; width: 100%; background: var(--f-health); transition: width .2s; }
#hud .health-bar.low > span { background: var(--f-danger); }
#hud .sbtn, #hud #selBtns > button { clip-path: var(--f-tile); font-size: 12px; }
#hud #stanceCurrent { color: var(--f-muted); font-family: var(--body); font-size: 12px; }

#hud .command-buttons { grid-template-columns: repeat(5, 62px); gap: 6px; padding-left: 14px; border-left: 1px solid var(--f-frame-dark); }
#hud .command-buttons button { height: 72px; clip-path: var(--f-tile); font-size: 12px; border-color: var(--f-frame); }
#hud .command-buttons .icon { color: var(--f-accent); }
#hud .command-buttons #buildBtn { background: var(--f-panel2); border-color: var(--f-accent); }

#hud #powersWrap { position: absolute; top: auto; right: 22px; bottom: 22px; padding: 0; gap: 10px; align-items: flex-end; z-index: 1; }
#hud .powers-label { display: none; }
#hud .pbtn { width: 62px; height: 62px; border-radius: 50%; padding: 0; gap: 0; background: var(--f-panel2); border: 2px solid var(--f-frame); box-shadow: inset 0 0 0 3px var(--f-panel), inset 0 0 12px rgba(0, 0, 0, .6); clip-path: none; }
#hud .pbtn:not(:disabled):hover { box-shadow: inset 0 0 0 3px var(--f-panel), inset 0 0 14px var(--f-glow); }
#hud .pbtn .icon { width: 24px; height: 24px; color: var(--f-accent); }
#hud .pbtn .power-name { position: absolute; top: 100%; margin-top: 3px; font: 12px var(--body); color: var(--f-text); white-space: nowrap; }
#hud .pbtn .power-cost { position: absolute; top: 100%; margin-top: 18px; font: 10px var(--body); color: var(--f-muted); white-space: nowrap; }
#hud .pbtn > kbd { top: -4px; left: -2px; padding: 0 4px; background: var(--f-panel); border: 1px solid var(--f-frame-dark); font-size: 10px; }
#hud .pbtn .cd { border-radius: 50%; }
#hud .pbtn.locked { border-style: dashed; }
#hud #powersWrap { bottom: 46px; }

/* Panels that float above the console */
#hud #buildPanel { left: 50%; right: auto; transform: translateX(-50%); width: min(820px, calc(100% - 24px)); bottom: 224px; background: var(--f-panel); border: 1px solid var(--f-frame); box-shadow: inset 0 0 0 4px var(--f-panel), inset 0 0 0 5px var(--f-frame-dark), 0 8px 32px rgba(0, 0, 0, .45); }
#hud #buildBtns > button { clip-path: var(--f-tile); }
#hud #buildBtns .icon { color: var(--f-accent); }
#hud #modeHint { bottom: 226px; background: var(--f-panel); border-color: var(--f-frame); }
#hud #tipBox { top: calc(70px + var(--safe-top)); background: var(--f-panel); border: 1px solid var(--f-frame); border-left-width: 1px; box-shadow: inset 0 0 0 3px var(--f-panel), inset 0 0 0 4px var(--f-frame-dark); }
#hud #tipBox .tip-label { font-family: var(--f-display); font-size: 13px; letter-spacing: .06em; text-transform: none; color: var(--f-accent); }
#hud #alerts { top: calc(150px + var(--safe-top)); }
#hud .alert, #hud #alerts > div { background: var(--f-panel); border: 1px solid var(--f-frame-dark); border-left: 1px solid var(--f-frame-dark); font-size: 13px; }
#hud .alert.error, #hud .alert.danger { border-color: var(--f-danger); box-shadow: 0 0 0 3px var(--f-panel), 0 0 18px var(--f-glow); }
#hud #pauseBtn span { display: none; }

/* Mid-width desktops: shrink the console before anything overlaps */
@media (max-width: 1250px) and (min-width: 701px) {
  #hud #commandDock { right: 300px; grid-template-columns: minmax(0, 1fr); }
  #hud .command-buttons { position: absolute; right: 0; bottom: 118px; padding-left: 0; border-left: 0; grid-template-columns: repeat(5, 54px); }
  #hud .command-buttons button { height: 50px; font-size: 10px; }
  #hud .command-buttons kbd { display: none; }
  #hud #powersWrap { gap: 6px; }
  #hud .pbtn { width: 54px; height: 54px; }
  #hud .mission { max-width: calc(100% - 520px); }
}

/* Phones (portrait): the console spans the bottom; minimap medallion left, selection right, commands below */
@media (max-width: 700px) {
  #hud #console { left: 0; right: 0; width: 100%; transform: none; height: calc(226px + var(--safe-bottom)); display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; align-content: start; padding: 22px calc(8px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(8px + var(--safe-left)); }
  #hud #console::before { height: 100%; clip-path: var(--f-console); }
  #hud #console::after { display: none; }
  #hud #minimapWrap { position: relative; left: auto; bottom: auto; width: 104px; height: 104px; padding: 4px; }
  #hud #minimap { width: 96px; height: 96px; }
  #hud #console > #minimapWrap, #hud #console > #commandDock { position: relative; }
  #hud #commandDock { position: relative; left: auto; right: auto; bottom: auto; height: auto; display: contents; }
  #hud #selPanel { grid-column: 2; grid-row: 1; max-height: 118px; overflow: auto; grid-template-columns: minmax(0, 1fr); }
  #hud .portrait { display: none; }
  #hud .selection-copy, #hud #selPanel > #selBtns, #hud #selPanel > #stancePanel { grid-column: 1; }
  #hud .pbtn .power-cost { display: none; }
  #hud #selName { font-size: 17px; }
  #hud .command-buttons { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; border: 0; }
  #hud .command-buttons button { height: 52px; font-size: 11px; }
  #hud #powersWrap { position: fixed; right: calc(8px + var(--safe-right)); bottom: calc(238px + var(--safe-bottom)); top: auto; gap: 8px; }
  #hud .pbtn { width: 50px; height: 50px; }
  #hud .pbtn .power-name { display: none; }
  #hud .mission { top: calc(52px + var(--safe-top)); left: 8px; right: 8px; transform: none; max-width: none; text-align: left; }
  #hud #objective { font-size: 14px; }
  #hud #buildPanel { bottom: calc(238px + var(--safe-bottom)); width: calc(100% - 16px); max-height: calc(100dvh - 306px - var(--safe-bottom)); }
  #hud #modeHint { bottom: calc(238px + var(--safe-bottom)); }
  #hud #tipBox { top: auto; bottom: calc(298px + var(--safe-bottom)); }
  #hud #alerts { top: calc(118px + var(--safe-top)); }
  #hud .res { height: 32px; padding: 0 8px; }
  #hud .resource-label, #hud .hud-crest { display: none; }
}

/* Phones (landscape): a lower console, powers along its top edge */
@media (orientation: landscape) and (max-height: 540px) {
  #hud #console { height: 150px; width: min(980px, calc(100% - 16px)); }
  #hud #console::before { height: 128px; }
  #hud #console::after { bottom: 122px; }
  #hud #minimapWrap { width: 136px; height: 136px; bottom: 8px; left: 10px; }
  #hud #minimap { width: 128px; height: 128px; }
  #hud #commandDock { left: 156px; right: 260px; bottom: 8px; height: 112px; }
  #hud .portrait { display: none; }
  #hud #selPanel { grid-template-columns: minmax(0, 1fr); }
  #hud .selection-copy, #hud #selPanel > #selBtns, #hud #selPanel > #stancePanel { grid-column: 1; }
  #hud .pbtn .power-cost { display: none; }
  #hud .command-buttons { grid-template-columns: repeat(5, 48px); }
  #hud .command-buttons button { height: 48px; font-size: 9px; }
  #hud #powersWrap { bottom: 30px; right: 12px; gap: 6px; }
  #hud .pbtn { width: 46px; height: 46px; }
  #hud .pbtn .power-name { display: none; }
  #hud #buildPanel { bottom: 156px; }
  #hud #modeHint { bottom: 156px; }
}

/* Short desktop windows: scale the menu column by height so every entry (and the footer) fits */
.menu-title { font-size: clamp(40px, min(5.2vw, 9vh), 82px); }
@media (max-height: 960px) and (min-width: 701px) {
  .menu-content { padding-top: 4vh; }
  .menu-content > .eyebrow { margin-bottom: 10px; }
  .menu-sub { margin-top: 8px; font-size: 17px; }
  .title-rule { margin: 14px 0; }
  .menu-btns { margin-top: 14px; gap: 7px; }
  .menu-btns .mbtn { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .menu-btns .menu-primary { min-height: 54px; }
  .menu-extras .sound-toggle { margin-top: 6px; min-height: 36px; }
  .menu-saves { margin-top: 7px; }
  .menu-saves .mbtn { min-height: 40px; }
  .menu-foot { display: none; }
}
@media (max-height: 760px) and (min-width: 701px) {
  .menu-content { padding-top: 2vh; padding-bottom: 24px; }
  .menu-btns .mbtn { min-height: 42px; }
  .menu-btns .menu-primary { min-height: 50px; }
  .menu-saves .mbtn { min-height: 36px; }
}

.screen { background: linear-gradient(105deg, rgba(16, 10, 7, .98), rgba(24, 15, 10, .95) 65%, rgba(18, 11, 8, .88)); }
.primary .icon { color: #f0c877; }
.fcard .icon { color: var(--brass-light); fill: none; stroke: currentColor; }

/* ---- Conquest of the North: the strategic war map ---- */
.conquest-wrap { max-width: 1400px; }
.conquest-wrap .screen-header { flex-wrap: wrap; }
.conquest-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.war-map { margin: 0; padding: 8px; border: 1px solid #b8893f; background: #1a110c; box-shadow: inset 0 0 0 5px #1a110c, inset 0 0 0 6px #5c3d21; }
.war-map svg { display: block; width: 100%; height: auto; }
.war-map .region { cursor: pointer; }
.war-map .region:focus-visible { outline: none; }
.war-map .region:focus-visible .region-ring, .war-map .region.selected .region-ring { stroke: #fff3cf; stroke-width: 4; }
.war-map .region.attackable .region-pulse { animation: region-pulse 1.8s ease-in-out infinite; }
@keyframes region-pulse { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
.war-panel { padding: 18px; border: 1px solid #b8893f; background: #1a100c; box-shadow: inset 0 0 0 4px #1a100c, inset 0 0 0 5px #5c3d21; display: flex; flex-direction: column; gap: 14px; }
.war-panel h2 { margin: 0; font-size: 22px; }
.war-panel h3 { margin: 0; font-size: 15px; color: var(--brass-light); letter-spacing: .06em; }
.war-panel p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.war-panel .war-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.war-panel .war-facts dt { color: var(--muted); }
.war-panel .war-facts dd { margin: 0; color: var(--bone); }
.war-panel .army-list { display: flex; flex-wrap: wrap; gap: 6px; }
.war-panel .army-list span { padding: 3px 8px; border: 1px solid #6b4a2a; font-size: 12px; }
.war-panel .war-log { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.war-panel .faction-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war-panel .faction-pick button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; min-height: 76px; text-align: left; font-size: 13px; }
.war-panel .faction-pick button .icon { width: 26px; height: 26px; color: var(--brass-light); }
.war-panel .faction-pick button[aria-pressed="true"] { border-color: #e8c27a; box-shadow: inset 0 0 0 1px #e8c27a; background: #2c1b11; }
.war-panel .war-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.war-panel .war-banner { padding: 10px 12px; border: 1px solid #e8c27a; color: #f7e3b4; font-family: var(--display); }
@media (max-width: 960px) { .conquest-body { grid-template-columns: 1fr; } }
#hud .sbtn.perk { border-color: var(--f-accent); box-shadow: 0 0 10px var(--f-glow); }