:root {
  color-scheme: dark;
  --brass: #c6a66d;
  --brass-light: #e1c78f;
  --pine: #253b35;
  --slate: #17201f;
  --bone: #e0d6bb;
  --muted: #a3ada0;
  --ember: #b64b38;
  --ink: #0c1513;
  --line: rgba(198, 166, 109, .3);
  --panel: rgba(19, 32, 28, .94);
  --display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --edge: 20px;
  --dock-left: 210px;
  --dock-height: 150px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ink); color: var(--bone); font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, select { border-radius: 2px; }
button { border: 1px solid var(--line); background: var(--panel); transition: border-color .18s, background-color .18s, color .18s, box-shadow .18s; }
button:disabled { opacity: .42; cursor: not-allowed; }
button:not(:disabled):hover { border-color: var(--brass); background-color: #30483e; }
button:not(:disabled):active { background-color: #3c5448; }
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible, a:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 4px; }
#c:focus-visible { outline-offset: -5px; }
button svg, button kbd { pointer-events: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; }
svg { display: block; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: none; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 58% 43%, transparent 40%, rgba(5, 13, 10, .4)); }
.eyebrow { color: var(--brass); font: 10px/1.6 var(--body); font-weight: 600; letter-spacing: .23em; text-transform: uppercase; }
kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 2px; color: var(--muted); font: 10px/1.6 var(--mono); white-space: nowrap; }

#loading { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: radial-gradient(ellipse at 50% 35%, rgba(37, 59, 53, .97), rgba(12, 21, 19, .99) 75%); transition: opacity .6s ease, visibility .6s; }
#loading.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-seal { display: grid; place-items: center; width: 82px; height: 96px; margin-bottom: 30px; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 7px; color: var(--brass); }
.loading-seal .icon { width: 44px; height: 44px; }
.load-title { margin-top: 12px; font-size: clamp(28px, 5vw, 52px); letter-spacing: -.03em; }
.load-rule { width: 80px; height: 1px; margin: 26px 0 32px; background: var(--line); }
.load-rule span, .title-rule span { display: block; width: 5px; height: 5px; background: var(--brass); transform: translateY(-2px) rotate(45deg); }
.load-rule span { margin: auto; }
.bar { width: min(320px, 75vw); padding: 3px; height: 9px; border: 1px solid var(--line); background: var(--ink); }
#loadBar { height: 100%; width: 0; background: linear-gradient(90deg, #78613b, var(--brass-light)); transition: width .3s ease; }
.load-status { margin-top: 16px; color: var(--brass); font: 11px/1.6 var(--mono); }
.load-tip { margin-top: 44px; max-width: 340px; color: var(--muted); font: italic 14px/1.6 var(--display); }

#menu { position: fixed; inset: 0; z-index: 40; overflow-x: hidden; overflow-y: auto; isolation: isolate; background: linear-gradient(90deg, rgba(10, 21, 17, .96) 0%, rgba(16, 30, 24, .9) 25%, rgba(17, 29, 23, .72) 43%, rgba(12, 23, 19, .15) 72%, rgba(12, 23, 19, .05)), linear-gradient(0deg, rgba(8, 17, 14, .8), transparent 24%); }
.menu-frame { position: fixed; inset: calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left)); border: 1px solid rgba(198, 166, 109, .16); pointer-events: none; z-index: -1; }
.menu-frame::before, .menu-frame::after { content: ""; position: absolute; width: 30px; height: 30px; border-color: var(--brass); border-style: solid; opacity: .6; }
.menu-frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.menu-frame::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.menu-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(38px + var(--safe-top)) calc(48px + var(--safe-right)) 0 calc(clamp(38px, 6vw, 100px) + var(--safe-left)); color: var(--brass); }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.wordmark .icon { width: 22px; height: 22px; }
.edition { font: 10px var(--mono); letter-spacing: .1em; color: #c0bba8; text-shadow: 0 1px 5px #000; }
.menu-content { position: relative; width: min(660px, 58vw); padding: clamp(32px, 6vh, 80px) 0 80px; margin-left: calc(clamp(38px, 6vw, 100px) + var(--safe-left)); }
.menu-content > .eyebrow { margin-bottom: 22px; }
.menu-title { display: flex; flex-direction: column; font-family: var(--display); font-size: clamp(56px, 7.6vw, 112px); line-height: .91; font-weight: 400; letter-spacing: -.045em; color: var(--bone); text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 8px 34px rgba(0, 0, 0, .22); }
.menu-title span:first-child { font-size: .7em; line-height: 1.2; letter-spacing: .045em; color: var(--brass-light); }
.menu-title span:last-child { white-space: nowrap; }
.title-rule { width: 108px; height: 1px; margin: 29px 0 20px; background: linear-gradient(90deg, var(--brass), transparent); }
.menu-sub { font: italic clamp(17px, 1.8vw, 22px)/1.5 var(--display); color: #c2c8b8; }
.menu-btns { display: flex; flex-direction: column; gap: 9px; width: min(360px, 100%); margin-top: 32px; }
.mbtn { display: flex; align-items: center; gap: 15px; min-height: 56px; padding: 13px 18px; color: var(--bone); text-align: left; font-family: var(--display); font-size: 16px; letter-spacing: .025em; background: linear-gradient(100deg, rgba(37, 59, 53, .74), rgba(23, 32, 31, .64)); box-shadow: inset 0 1px rgba(224, 214, 187, .025); }
.mbtn > .icon { color: var(--brass); width: 22px; height: 22px; }
.mbtn small { display: block; margin-top: 3px; color: var(--muted); font: 10px/1.5 var(--body); letter-spacing: .02em; }
.button-end { margin-left: auto; color: #a49a80; font: 10px var(--display); }
.primary { background: linear-gradient(115deg, #d3b781, #b3945f); border-color: #e1c78f; color: #15241d; box-shadow: inset 0 0 0 3px rgba(19, 32, 28, .12), 0 5px 24px rgba(0, 0, 0, .2); font-weight: 600; }
.primary:not(:disabled):hover { background: linear-gradient(115deg, #e1c78f, #c6a66d); border-color: #f0dab0; color: #0c1513; box-shadow: inset 0 0 0 3px rgba(19, 32, 28, .16), 0 5px 26px rgba(198, 166, 109, .12); }
.primary:not(:disabled):active { background: #b3945f; }
.primary .icon, .primary kbd { color: #253b35; }
.primary small { color: #344737; }
.menu-primary { min-height: 70px; }
.menu-primary .arrow { margin-left: auto; width: 18px; }
.sound-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 15px; padding: 8px 0; border: 0; background: transparent; color: var(--brass); font-size: 11px; }
.sound-toggle .icon { width: 18px; height: 18px; }
.sound-toggle:not(:disabled):hover { background: transparent; color: var(--brass-light); }
.sound-note { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.atlas-mark { position: absolute; right: 6vw; bottom: 110px; width: 180px; display: flex; flex-direction: column; align-items: center; color: rgba(225, 199, 143, .6); pointer-events: none; }
.atlas-mark svg { width: 142px; height: 142px; stroke: currentColor; stroke-width: .7; }
.atlas-north { font: 14px var(--display); }
.atlas-mark > span:last-child { margin-top: 10px; font: italic 11px var(--display); letter-spacing: .035em; text-shadow: 0 1px 4px #000; }
.menu-foot { position: fixed; bottom: calc(35px + var(--safe-bottom)); left: calc(clamp(38px, 6vw, 100px) + var(--safe-left)); right: calc(48px + var(--safe-right)); display: flex; justify-content: space-between; gap: 20px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.footer-motto { font: italic 13px var(--display); letter-spacing: .025em; text-transform: none; }

.screen { position: fixed; inset: 0; z-index: 45; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; background: linear-gradient(105deg, rgba(15, 27, 23, .98), rgba(22, 37, 30, .94) 65%, rgba(16, 28, 23, .85)); }
.wrap { max-width: 1120px; padding: calc(30px + var(--safe-top)) calc(38px + var(--safe-right)) calc(42px + var(--safe-bottom)) calc(38px + var(--safe-left)); margin: auto; }
.screen-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.back, .compact-btn { min-height: 36px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 6px 12px; color: var(--bone); font-size: 11px; }
.back { min-height: 42px; background: transparent; }
.back > span { color: var(--brass); font-size: 18px; }
.page-heading { margin: 30px 0; }
.page-heading h1 { margin: 6px 0 8px; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; letter-spacing: -.035em; }
.page-heading > p:last-child { color: var(--muted); font-size: 12px; }
.sec { margin-bottom: 28px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-label { color: var(--brass); font: 600 10px/1.5 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.section-heading > span { font: italic 12px var(--display); color: var(--muted); }
.frow, .genrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.genrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcard, .gcard, .frow > button, .genrow > button { position: relative; min-width: 0; padding: 18px 16px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(37, 59, 53, .54), rgba(13, 25, 20, .68)); color: var(--bone); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; overflow-wrap: anywhere; }
.fcard { min-height: 120px; }
.gcard { min-height: 100px; }
.fcard:hover, .gcard:hover { border-color: var(--brass); }
.fcard.sel, .gcard.sel, .frow > .selected, .genrow > .selected, .frow > [aria-pressed="true"], .genrow > [aria-pressed="true"] { border-color: var(--brass); background: linear-gradient(145deg, #364c3e, #202f26); box-shadow: inset 0 3px var(--brass), inset 0 0 0 4px rgba(198, 166, 109, .05); }
.fcard.sel::after, .gcard.sel::after { content: ""; position: absolute; right: 8px; top: 8px; width: 4px; height: 4px; background: var(--brass); transform: rotate(45deg); }
.fcard.dis { opacity: .45; }
.fname, .gname, .frow strong, .genrow strong { display: block; font: 17px/1.25 var(--display); color: var(--bone); }
.fdesc, .gdesc, .frow small, .genrow small { display: block; margin-top: 8px; color: var(--muted); font: 11px/1.6 var(--body); }
.frow .icon, .genrow .icon { color: var(--brass); margin-bottom: 12px; width: 28px; height: 28px; }
.setup-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.setup-row label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
select { width: 100%; min-height: 44px; padding: 10px 28px 10px 12px; color: var(--bone); background: #172820; border: 1px solid var(--line); font-size: 11px; text-overflow: ellipsis; cursor: pointer; }
select:hover { border-color: var(--brass); }
option { background: var(--slate); color: var(--bone); }
.setup-launch { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.setup-launch p { font-size: 11px; color: var(--muted); line-height: 1.8; }
.setup-launch strong { color: var(--bone); font-weight: 500; }
#startBtn { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 58px; min-width: 280px; padding: 16px 24px; font: 18px var(--display); }
#startBtn .icon { width: 21px; height: 21px; }

.rules-toggle { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); cursor: pointer; }
.rules-toggle input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brass); flex-shrink: 0; }
.rules-toggle small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.plot-section { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.plot-section h3 { margin-bottom: 8px; color: var(--brass-light); font-size: 16px; }
.plot-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.fortify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.fortify-actions > span { color: var(--muted); font-size: 10px; }
.repeat-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 11px; }
.repeat-toggle input { width: 20px; height: 20px; accent-color: var(--brass); }
.placement-copy { min-width: 0; }
#modeHint:has(#fortifyTools:not(.hidden)) { width: min(680px, calc(100% - 32px)); align-items: flex-start; }
#placementStatus { margin-top: 5px; color: var(--brass-light); font-size: 11px; }
#stancePanel { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#stancePanel.hidden { display: none; }
#stanceCurrent { color: var(--brass-light); font: 10px var(--mono); }
.stance-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.stance-tip { color: var(--muted); font-size: 10px; margin-top: 4px; }
.pbtn.locked { border-style: dashed; }
.pbtn.locked .power-cost { color: var(--bone); font-size: 8px; }
.council-card { width: min(560px, 100%); }
.council-summary { margin: 16px 0; color: var(--brass-light); }
.spell-list { display: grid; gap: 16px; margin-top: 24px; }
.spell-list section { padding-top: 16px; border-top: 1px solid var(--line); }
.spell-list h3 { font-size: 20px; }
.spell-list p { margin: 4px 0; color: var(--muted); font-size: 12px; }
.spell-list button { margin-top: 8px; }
.outpost-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
#spellStatus, #outpostStatus { margin-top: 16px; font-size: 12px; }

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; user-select: none; -webkit-user-select: none; }
#topbar, #minimapWrap, #commandDock, #buildPanel, #powersWrap button, #modeHint { pointer-events: auto; }
#hud button, #hud input, #hud select { pointer-events: auto; }
#topbar { position: absolute; top: 0; left: 0; right: 0; height: calc(54px + var(--safe-top)); padding: var(--safe-top) calc(var(--edge) + var(--safe-right)) 0 calc(var(--edge) + var(--safe-left)); display: flex; align-items: center; gap: 20px; background: linear-gradient(180deg, rgba(13, 24, 19, .98), rgba(21, 35, 28, .93)); border-bottom: 1px solid var(--line); box-shadow: 0 3px 14px rgba(0, 0, 0, .2); }
.hud-crest { color: var(--brass); padding-right: 18px; border-right: 1px solid var(--line); }
.hud-crest .icon { width: 26px; height: 26px; }
#resWrap { display: flex; align-items: center; gap: 26px; }
.res { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.res .icon { color: var(--brass); width: 18px; height: 18px; }
.res > [id] { font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.resource-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
#mapTitle { margin-left: auto; color: var(--bone); font: italic 13px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clockWrap { display: flex; align-items: center; gap: 18px; margin-left: auto; }
#clock { min-width: 42px; color: var(--muted); font: 11px var(--mono); font-variant-numeric: tabular-nums; }
#speedBtn { height: 34px; min-width: 44px; padding: 4px 8px; font: 11px var(--mono); }
#pauseBtn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 4px 10px; font-size: 10px; }
#pauseBtn .icon { width: 17px; height: 17px; }
.mission { position: absolute; left: calc(var(--edge) + var(--safe-left)); top: calc(76px + var(--safe-top)); padding-left: 13px; border-left: 2px solid var(--brass); text-shadow: 0 2px 5px #000, 0 1px 14px #000; }
#factionBadge { font: 600 9px/1.6 var(--body); color: var(--brass-light); letter-spacing: .18em; text-transform: uppercase; }
#objective { margin-top: 4px; font: 15px/1.4 var(--display); color: #f0e7d2; }
#controlHint { position: absolute; top: calc(134px + var(--safe-top)); left: calc(var(--edge) + var(--safe-left)); color: #d1d4c4; font-size: 9px; text-shadow: 0 1px 5px #000, 0 1px 10px #000; }
.touch-hint { display: none; }
#minimapWrap { position: absolute; bottom: calc(var(--edge) + var(--safe-bottom)); left: calc(var(--edge) + var(--safe-left)); padding: 6px; width: 174px; border: 1px solid var(--brass); background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(198, 166, 109, .07); }
.minimap-heading, .minimap-footer { display: flex; align-items: center; justify-content: space-between; }
.minimap-heading { padding: 1px 1px 6px; color: var(--brass); font-size: 8px; line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; }
#minimap { display: block; width: 160px; height: 160px; border: 1px solid rgba(198, 166, 109, .25); background: #15251c; touch-action: none; }
.minimap-footer { padding: 6px 2px 0; color: var(--muted); font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.minimap-footer span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 5px; background: #a0c386; transform: rotate(45deg); }
.minimap-footer span:last-child::before { background: #e58c6b; }
#commandDock { position: absolute; left: calc(var(--dock-left) + var(--safe-left)); right: calc(var(--edge) + var(--safe-right)); bottom: calc(var(--edge) + var(--safe-bottom)); height: var(--dock-height); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 16px; border: 1px solid var(--line); border-top-color: var(--brass); background: linear-gradient(125deg, rgba(37, 59, 53, .96), rgba(14, 25, 20, .96)); box-shadow: inset 0 0 0 4px rgba(198, 166, 109, .035), 0 6px 24px rgba(0, 0, 0, .35); }
#selPanel { min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--brass) transparent; padding: 2px; touch-action: pan-y; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 8px 16px; }
#selPanel > .selection-heading { flex: 1 0 100%; }
#selPanel > #selBtns { margin-top: 0; }
#selPanel > #stancePanel { margin-top: 0; }
.selection-heading { display: flex; align-items: center; gap: 12px; }
.selection-icon { width: 38px; height: 38px; padding: 6px; border: 1px solid var(--line); color: var(--brass); }
.selection-copy { min-width: 0; }
#selName { font: 20px/1.2 var(--display); overflow-wrap: anywhere; }
#selSub { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.selrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.selrow:empty { display: none; }
.sbtn, #selBtns > button { min-height: 38px; padding: 6px 12px; text-align: left; font-size: 10px; }
.sbtn .cost, #selBtns .cost { display: block; color: var(--brass); font: 9px/1.5 var(--mono); }
.command-buttons { display: grid; grid-template-columns: repeat(5, 58px); gap: 5px; align-content: center; padding-left: 16px; border-left: 1px solid var(--line); }
.command-buttons button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 86px; padding: 6px 3px; font-size: 10px; }
.command-buttons .icon { width: 22px; height: 22px; color: var(--brass); }
.command-buttons kbd { font-size: 8px; border: 0; padding: 0; color: #a9ae9a; }
.command-buttons #buildBtn { border-color: rgba(198, 166, 109, .6); background-color: #293d30; }
#buildPanel { position: absolute; left: calc(var(--dock-left) + var(--safe-left)); right: calc(var(--edge) + var(--safe-right)); bottom: calc(var(--dock-height) + var(--edge) + var(--safe-bottom) + 10px); max-height: calc(100dvh - var(--dock-height) - var(--safe-top) - var(--safe-bottom) - 150px); overflow: auto; padding: 12px; background: var(--panel); border: 1px solid var(--brass); box-shadow: 0 8px 32px rgba(0, 0, 0, .4); touch-action: pan-y; scrollbar-width: thin; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-heading h2 { font-size: 18px; }
#buildBtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 6px; }
.bbtn, #buildBtns > button { min-height: 78px; min-width: 0; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; text-align: center; }
.bbtn .ico, #buildBtns .icon { font-size: 23px; color: var(--brass); }
.bbtn .cost, #buildBtns .cost { color: var(--brass); font: 9px var(--mono); }
.bbtn.selB, button.selected, button[aria-pressed="true"] { border-color: var(--brass-light); box-shadow: inset 0 0 0 1px var(--brass); }
.panel-tip { margin-top: 9px; color: var(--muted); font-size: 9px; }
#powersWrap { position: absolute; top: calc(78px + var(--safe-top)); right: calc(var(--edge) + var(--safe-right)); display: flex; gap: 7px; padding-top: 20px; }
.powers-label { position: absolute; top: 0; right: 0; color: var(--brass-light); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 5px #000; }
.pbtn { position: relative; width: 66px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(19, 32, 28, .94); box-shadow: 0 3px 12px rgba(0, 0, 0, .2); }
.pbtn .icon { width: 26px; height: 26px; color: var(--brass-light); }
.pbtn > kbd { position: absolute; top: 3px; left: 4px; padding: 0; border: 0; font-size: 8px; }
.power-name { font: 12px var(--display); }
.power-cost { color: var(--brass); font: 9px var(--mono); }
.pbtn .cd { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: rgba(9, 19, 14, .82); color: var(--bone); font: 16px var(--mono); pointer-events: none; }
.pbtn .cd:empty { display: none; }
#modeHint { position: absolute; left: 50%; bottom: calc(var(--dock-height) + var(--edge) + var(--safe-bottom) + 16px); transform: translateX(-50%); max-width: calc(100% - 32px - var(--safe-left) - var(--safe-right)); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 10px 8px 16px; border: 1px solid var(--brass); background: #253b35; box-shadow: 0 5px 22px rgba(0, 0, 0, .3); z-index: 3; }
#modeHint > .icon { color: var(--brass); width: 20px; height: 20px; }
#modeText { font-size: 11px; }
#cancelMode { flex-shrink: 0; }
#buildPanel:not(.hidden) ~ #modeHint { bottom: auto; top: calc(190px + var(--safe-top)); }
#alerts { position: absolute; top: calc(160px + var(--safe-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(420px, 65vw); pointer-events: none; z-index: 4; }
.alert, #alerts > div, #alerts > p { padding: 9px 16px; border: 1px solid var(--line); border-left: 2px solid var(--brass); background: rgba(16, 29, 23, .96); color: var(--bone); font-size: 11px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); animation: alert-in .2s ease-out; }
.toast-stack { position: fixed; left: 50%; bottom: calc(28px + var(--safe-bottom)); transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.toast-stack > .alert { font-size: 13px; line-height: 1.45; }
.alert.error, .alert.danger { border-left-color: var(--ember); }
@keyframes alert-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left)); background: rgba(7, 15, 11, .74); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-card { flex: 0 1 auto; position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 36px; border: 1px solid var(--brass); background: linear-gradient(135deg, #2a3e32, #17251e 60%, #14211b); box-shadow: inset 0 0 0 5px rgba(198, 166, 109, .055), 0 20px 90px rgba(0, 0, 0, .55); scrollbar-width: thin; scrollbar-color: var(--brass) var(--slate); }
.modal-card h1 { margin: 9px 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.025em; }
.modal-intro { color: var(--muted); font: italic 14px/1.6 var(--display); }
.modal-emblem { color: var(--brass); margin-bottom: 24px; }
.modal-emblem .icon { width: 42px; height: 42px; }
.manual-card { width: min(900px, 100%); padding: 28px 36px 34px; }
.manual-card .screen-header { margin-bottom: 25px; }
.manual-strategy { display: flex; gap: 18px; padding: 20px 0; margin: 8px 0 20px; border-bottom: 1px solid var(--line); }
.manual-strategy > .icon { color: var(--brass); width: 32px; height: 32px; margin-top: 4px; }
.manual-strategy p { font-size: 12px; line-height: 1.8; color: var(--muted); }
.manual-strategy strong { color: var(--bone); font-weight: 500; }
.manual-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; }
.manual-columns > section + section { padding-left: 28px; border-left: 1px solid var(--line); }
.control-list { margin: 10px 0 0; }
.control-list > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: start; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(198, 166, 109, .1); font-size: 11px; }
.control-list dt { color: var(--bone); }
.control-list dd { margin: 0; color: var(--muted); }
.control-list kbd + kbd { margin-left: 3px; }
.manual-columns > section:last-child .control-list > div { grid-template-columns: 88px minmax(0, 1fr); }
.manual-note { margin-top: 24px; }
.manual-note h3 { color: var(--brass-light); font-size: 17px; }
.manual-note p { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.pause-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.pause-actions > .mbtn kbd { margin-left: auto; }
.split-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split-actions .mbtn { gap: 8px; min-height: 48px; padding: 10px; font-size: 13px; }
.split-actions .icon { width: 18px; height: 18px; }
.audio-settings { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.volume-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); }
#volume { width: 100%; min-height: 38px; margin: 8px 0 0; accent-color: var(--brass); cursor: pointer; touch-action: auto; }
.text-btn { min-height: 44px; margin-top: 16px; padding: 8px 0; border: 0; background: transparent; color: #c8b39b; font-size: 11px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.text-btn:not(:disabled):hover { color: var(--bone); background: transparent; }
.result-card { width: min(520px, 100%); padding: 44px; }
.result-card .title-rule { margin-top: 23px; }
.ws { margin-bottom: 30px; color: var(--muted); font: 15px/1.6 var(--display); }
.result-card .mbtn { width: 100%; margin-top: 10px; }
#fatal { z-index: 110; }
.fatal-card { border-top: 3px solid var(--ember); }
#fatalText { margin: 22px 0; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; user-select: text; }
.fatal-help { color: var(--muted); font-size: 11px; }
.noscript-message { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; padding: 30px; background: var(--slate); color: var(--bone); font: 20px/1.6 var(--display); text-align: center; }

@media (min-width: 1600px) {
  #commandDock { right: max(calc(var(--edge) + var(--safe-right)), calc(100vw - 1280px)); }
  #buildPanel { right: max(calc(var(--edge) + var(--safe-right)), calc(100vw - 1280px)); }
  .menu-content { padding-top: 8vh; }
}

@media (max-width: 1050px) {
  :root { --edge: 12px; --dock-left: 196px; --dock-height: 140px; }
  .menu-content { width: 62vw; }
  .menu-title { font-size: clamp(56px, 8.3vw, 90px); }
  #topbar { gap: 14px; }
  #resWrap { gap: 16px; }
  .resource-label { display: none; }
  #commandDock { gap: 10px; padding: 12px; }
  .command-buttons { grid-template-columns: repeat(5, 48px); padding-left: 10px; }
  .command-buttons button { height: 78px; }
  #selName { font-size: 17px; }
  .selection-icon { display: none; }
  .frow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcard { min-height: 108px; }
}

@media (max-height: 800px) and (min-width: 701px) {
  .menu-topline { padding-top: calc(30px + var(--safe-top)); }
  .menu-content { padding-top: 28px; padding-bottom: 64px; }
  .menu-content > .eyebrow { margin-bottom: 12px; }
  .menu-title { font-size: clamp(52px, 7vw, 84px); }
  .menu-btns { margin-top: 22px; gap: 7px; }
  .menu-btns .mbtn { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
  .menu-btns .menu-primary { min-height: 63px; }
  .menu-content .title-rule { margin: 22px 0 15px; }
  .sound-toggle { margin-top: 8px; }
  .menu-foot { bottom: calc(28px + var(--safe-bottom)); }
}

@media (max-width: 700px) {
  :root { --edge: 8px; --dock-left: 122px; --dock-height: 176px; }
  .menu-frame { inset: calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left)); }
  #menu { background: linear-gradient(90deg, rgba(10, 21, 17, .93), rgba(16, 30, 24, .78) 55%, rgba(12, 23, 19, .3)), linear-gradient(0deg, rgba(8, 17, 14, .9), transparent 70%); }
  .menu-topline { padding: calc(27px + var(--safe-top)) 28px 0 calc(28px + var(--safe-left)); }
  .wordmark { font-size: 9px; gap: 8px; letter-spacing: .12em; }
  .edition { display: none; }
  .menu-content { width: auto; margin: 0; padding: 46px calc(28px + var(--safe-right)) 34px calc(28px + var(--safe-left)); }
  .menu-content > .eyebrow { font-size: 8px; letter-spacing: .15em; margin-bottom: 18px; }
  .menu-title { font-size: clamp(45px, 11.5vw, 80px); }
  .menu-sub { font-size: 19px; }
  .menu-btns { margin-top: 27px; width: min(360px, 100%); }
  .menu-btns .mbtn { min-height: 59px; }
  .menu-btns .menu-primary { min-height: 72px; }
  .menu-foot { position: relative; inset: auto; padding: 0 calc(28px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(28px + var(--safe-left)); font-size: 8px; }
  .footer-motto, .atlas-mark { display: none; }
  .wrap { padding: calc(18px + var(--safe-top)) calc(20px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
  .screen-header { gap: 12px; padding-bottom: 15px; }
  .screen-header .eyebrow { font-size: 8px; text-align: right; }
  .page-heading { margin: 24px 0; }
  .page-heading > p:last-child { max-width: 280px; }
  .section-heading > span { font-size: 10px; }
  .frow, .genrow { gap: 8px; }
  .fcard, .gcard, .frow > button, .genrow > button { padding: 14px 12px; }
  .fname, .gname, .frow strong, .genrow strong { font-size: 15px; }
  .genrow { grid-template-columns: 1fr; }
  .gcard { min-height: 76px; }
  .setup-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-launch { flex-direction: column; align-items: stretch; gap: 18px; }
  #startBtn { width: 100%; min-width: 0; }
  .modal { padding: calc(14px + var(--safe-top)) calc(14px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left)); }
  .modal-card { padding: 26px 22px; }
  .manual-columns { grid-template-columns: 1fr; gap: 28px; }
  .manual-columns > section + section { padding-left: 0; border-left: 0; }
  .manual-card .screen-header { margin-bottom: 20px; }
  .manual-strategy { gap: 12px; }
  .manual-strategy .icon { width: 24px; height: 24px; }
  #topbar { height: calc(44px + var(--safe-top)); gap: 8px; }
  .hud-crest { display: none; }
  #resWrap { gap: 13px; }
  .res { gap: 5px; }
  .res .icon { width: 16px; height: 16px; }
  .res > [id] { font-size: 11px; }
  #mapTitle { display: none; }
  #clockWrap { gap: 7px; }
  #clock { font-size: 10px; min-width: 34px; }
  #pauseBtn { width: 44px; height: 38px; padding: 4px; }
  #pauseBtn span { display: none; }
  #speedBtn { height: 38px; min-width: 40px; }
  .mission { top: calc(57px + var(--safe-top)); padding-left: 9px; max-width: calc(100% - 22px); }
  #factionBadge { font-size: 8px; }
  #objective { font-size: 13px; }
  #controlHint { display: none; }
  #minimapWrap { width: 110px; padding: 4px; }
  #minimap { width: 100px; height: 100px; }
  .minimap-heading { font-size: 6px; letter-spacing: .08em; padding-bottom: 5px; }
  .minimap-footer { font-size: 6px; padding-top: 4px; }
  #commandDock { display: flex; flex-direction: column; gap: 6px; padding: 7px; }
  #selPanel { flex: 1 1 auto; min-height: 0; }
  #selName { font-size: 14px; }
  #selSub { margin-top: 3px; font-size: 9px; }
  .selrow { margin-top: 6px; gap: 4px; }
  .sbtn, #selBtns > button { min-height: 32px; padding: 5px 7px; font-size: 9px; }
  .command-buttons { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0; border-left: 0; }
  .command-buttons button { height: 42px; gap: 3px; padding: 4px 1px; font-size: 8px; }
  .command-buttons .icon { width: 17px; height: 17px; }
  .command-buttons kbd { display: none; }
  #powersWrap { top: calc(130px + var(--safe-top)); right: calc(8px + var(--safe-right)); gap: 5px; padding-top: 0; }
  .powers-label { display: none; }
  .pbtn { width: 47px; height: 60px; gap: 2px; }
  .pbtn .icon { width: 20px; height: 20px; }
  .power-name { font-size: 10px; }
  .power-cost { font-size: 8px; }
  .pbtn > kbd { font-size: 7px; top: 2px; left: 3px; }
  #buildPanel { left: calc(8px + var(--safe-left)); padding: 9px; max-height: calc(100dvh - var(--dock-height) - var(--safe-top) - var(--safe-bottom) - 145px); }
  #buildBtns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bbtn, #buildBtns > button { min-height: 65px; }
  .panel-heading h2 { font-size: 16px; }
  #modeHint { width: max-content; gap: 8px; padding: 7px; }
  #modeHint > .icon { display: none; }
  #modeText { font-size: 10px; }
  #cancelMode { padding: 5px 8px; gap: 5px; }
  #cancelMode kbd { display: none; }
  #buildPanel:not(.hidden) ~ #modeHint { top: calc(195px + var(--safe-top)); }
  #buildPanel:not(.hidden) ~ #powersWrap { display: none; }
  #selPanel { gap: 5px 8px; }
  #selSub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #stanceCurrent { display: none; }
  #stancePanel .sbtn { min-height: 32px; }
  #alerts { top: calc(200px + var(--safe-top)); max-width: calc(100% - 28px); width: max-content; }
  .alert, #alerts > div, #alerts > p { font-size: 10px; padding: 7px 12px; }
}

@media (max-width: 380px) {
  .menu-content { padding-left: 23px; padding-right: 23px; }
  .sound-note { font-size: 9px; padding-left: 7px; }
  #resWrap { gap: 9px; }
  .res { gap: 4px; }
  .res > [id] { font-size: 10px; }
  #clockWrap { gap: 4px; }
  #commandDock { padding: 5px; }
  #selName { font-size: 12px; }
  #selSub { font-size: 8px; }
  .setup-row { grid-template-columns: 1fr; }
  .section-heading > span { display: none; }
}

@media (orientation: landscape) and (max-height: 540px) {
  :root { --edge: 6px; --dock-left: 108px; --dock-height: 86px; }
  .menu-frame { inset: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left)); }
  .menu-topline { padding: calc(20px + var(--safe-top)) 28px 0 calc(28px + var(--safe-left)); }
  .wordmark { font-size: 8px; }
  .edition { display: none; }
  .menu-content { width: min(520px, 76vw); margin-left: calc(28px + var(--safe-left)); padding: 18px 0 25px; }
  .menu-content > .eyebrow { font-size: 8px; margin-bottom: 8px; }
  .menu-title { font-size: 48px; }
  .menu-content .title-rule { margin: 15px 0 10px; }
  .menu-sub { font-size: 16px; }
  .menu-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; margin-top: 16px; }
  .menu-btns .mbtn { min-height: 48px; padding: 8px 11px; gap: 9px; font-size: 14px; }
  .menu-btns small { font-size: 8px; }
  .menu-btns .button-end, .menu-btns .arrow { display: none; }
  .menu-saves { width: 100%; margin-top: 8px; }
  .menu-saves .mbtn { min-height: 40px; }
  .sound-toggle { margin-top: 4px; min-height: 36px; }
  .menu-foot { position: relative; inset: auto; padding: 0 28px calc(18px + var(--safe-bottom)); font-size: 8px; }
  .footer-motto, .atlas-mark { display: none; }
  #topbar { height: calc(32px + var(--safe-top)); gap: 10px; }
  .hud-crest, .resource-label { display: none; }
  #resWrap { gap: 18px; }
  .res { gap: 6px; }
  .res .icon { width: 14px; height: 14px; }
  .res > [id] { font-size: 10px; }
  #mapTitle { display: block; font-size: 11px; }
  #clockWrap { gap: 10px; }
  #clock { font-size: 10px; }
  #pauseBtn { height: 26px; width: 32px; padding: 3px 7px; }
  #pauseBtn span { display: none; }
  .mission { top: calc(42px + var(--safe-top)); padding-left: 8px; }
  #factionBadge { font-size: 7px; }
  #objective { font-size: 12px; margin-top: 1px; }
  #controlHint { top: calc(79px + var(--safe-top)); font-size: 8px; }
  #minimapWrap { width: 98px; padding: 3px; }
  #minimap { width: 90px; height: 90px; }
  .minimap-heading { font-size: 6px; padding-bottom: 4px; letter-spacing: .06em; }
  .minimap-footer { display: none; }
  #commandDock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px; }
  #selPanel { min-height: 0; }
  .selection-icon { display: none; }
  #selName { font-size: 14px; }
  #selSub { margin-top: 2px; font-size: 8px; line-height: 1.3; }
  .selrow { margin-top: 5px; gap: 4px; }
  .sbtn, #selBtns > button { min-height: 27px; padding: 4px 7px; font-size: 8px; }
  .sbtn .cost, #selBtns .cost { font-size: 8px; }
  .command-buttons { grid-template-columns: repeat(5, 44px); gap: 4px; padding-left: 7px; border-left: 1px solid var(--line); }
  .command-buttons button { height: 58px; gap: 5px; font-size: 9px; }
  .command-buttons .icon { width: 19px; height: 19px; }
  .command-buttons kbd { display: none; }
  #powersWrap { top: calc(42px + var(--safe-top)); right: calc(6px + var(--safe-right)); gap: 4px; padding: 0; }
  .powers-label { display: none; }
  .pbtn { width: 43px; height: 51px; gap: 1px; }
  .pbtn .icon { width: 18px; height: 18px; }
  .pbtn > kbd { font-size: 7px; }
  .power-name { font-size: 9px; }
  .power-cost { font-size: 8px; }
  #buildPanel { left: calc(var(--dock-left) + var(--safe-left)); padding: 8px; max-height: calc(100dvh - var(--dock-height) - var(--safe-top) - var(--safe-bottom) - 55px); }
  #buildBtns { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
  .bbtn, #buildBtns > button { min-height: 53px; padding: 4px; font-size: 8px; }
  .panel-heading { margin-bottom: 6px; }
  .panel-heading h2 { font-size: 14px; }
  .panel-heading .compact-btn { min-height: 28px; font-size: 10px; }
  .panel-tip { font-size: 8px; margin-top: 5px; }
  #modeHint { padding: 5px 7px; gap: 8px; }
  #modeText { font-size: 10px; }
  #cancelMode { min-height: 28px; }
  #buildPanel:not(.hidden) ~ #modeHint { top: calc(98px + var(--safe-top)); }
  #alerts { top: calc(40px + var(--safe-top)); max-width: 36vw; width: max-content; }
  .alert, #alerts > div, #alerts > p { font-size: 9px; padding: 6px 10px; }
  .modal { padding-top: calc(12px + var(--safe-top)); padding-bottom: calc(12px + var(--safe-bottom)); }
  .modal-card { padding-top: 24px; padding-bottom: 24px; }
  .modal-emblem { margin-bottom: 12px; }
  .modal-emblem .icon { width: 28px; height: 28px; }
}

@media (pointer: coarse) {
  .desktop-hint { display: none; }
  .touch-hint { display: inline; }
  .pbtn > kbd { display: none; }
  .back, .compact-btn { min-height: 44px; }
  #pauseBtn { min-width: 32px; }
}

.campaign-atlas { width: min(1080px, 100%); }
.campaign-atlas > h1 { margin-top: 24px; }
.campaign-route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px 0; }
.campaign-route::before { content: ""; position: absolute; top: 48px; left: 10%; right: 10%; border-top: 1px dashed var(--brass); }
.campaign-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--brass); background: linear-gradient(155deg, #304b43, var(--ink)); }
.campaign-card h2 { font-size: 24px; line-height: 1.15; }
.campaign-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.campaign-card .campaign-terms { padding-top: 12px; border-top: 1px solid var(--line); }
.campaign-card button { margin-top: auto; }
.campaign-coast { background: linear-gradient(155deg, #344b51, var(--ink)); }
.campaign-ash { background: linear-gradient(155deg, #514037, var(--ink)); }
.campaign-card.locked { border-top-style: dashed; }
.campaign-footer { display: grid; grid-template-columns: 1fr 220px; gap: 32px; border-top: 1px solid var(--line); padding-top: 20px; color: var(--muted); font-size: 12px; }
.campaign-footer label { display: grid; gap: 8px; }
.campaign-goals { list-style: none; padding: 0; margin: 20px 0 0; }
.campaign-goals li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.campaign-goals span { color: var(--muted); font: 11px var(--mono); }
.campaign-goals .goal-complete { color: var(--brass-light); }
.campaign-result { color: var(--brass-light); font-size: 13px; margin-bottom: 16px; }
.campaign-result:empty { display: none; }
#objectivesBtn { margin-top: 10px; pointer-events: auto; }
.mission:has(#objectivesBtn:not(.hidden)) { max-width: calc(100% - 340px); }
.mission:has(#objectivesBtn:not(.hidden)) + #controlHint { display: none; }
@media (max-width: 700px) {
  .campaign-route { grid-template-columns: 1fr; gap: 16px; }
  .campaign-route::before { top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 1px dashed var(--brass); }
  .campaign-footer { grid-template-columns: 1fr; gap: 16px; }
  .mission:has(#objectivesBtn:not(.hidden)) { max-width: calc(100% - 22px); }
  #objectivesBtn { min-height: 30px; margin-top: 4px; padding: 4px 8px; font-size: 10px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .mission:has(#objectivesBtn:not(.hidden)) { max-width: calc(100% - 230px); }
  #objectivesBtn { min-height: 28px; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(225, 199, 143, .65); --muted: #d0d5c9; --panel: #14231c; }
  #commandDock, #topbar { background: #14231c; }
  button:disabled { opacity: .6; }
}

/* Short desktop windows: keep the build panel clear of the power bar. */
@media (max-height: 760px) {
  #buildPanel:not(.hidden) ~ #powersWrap { display: none; }
}
/* Commander's tips */
#tipBox { position: absolute; left: calc(var(--edge) + var(--safe-left)); top: calc(152px + var(--safe-top)); width: min(330px, calc(100% - 24px)); padding: 10px 12px; border: 1px solid var(--brass); border-left-width: 3px; background: rgba(16, 29, 23, .95); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); pointer-events: auto; z-index: 5; }
#tipBox.hidden { display: none; }
#tipBox .tip-label { color: var(--brass-light); font: 600 8px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; }
#tipText { margin: 4px 0 8px; color: var(--bone); font-size: 12px; line-height: 1.45; }
#tipBox .tip-actions { display: flex; gap: 6px; justify-content: flex-end; }
#buildPanel:not(.hidden) ~ #tipBox, #modeHint:not(.hidden) ~ #tipBox { display: none; }
@media (max-width: 700px) {
  #tipBox { top: auto; bottom: calc(var(--dock-height) + var(--edge) + var(--safe-bottom) + 10px); left: calc(8px + var(--safe-left)); width: calc(100% - 16px - var(--safe-left) - var(--safe-right)); }
  #tipText { font-size: 11px; }
}

/* Keep "March to war" reachable without scrolling the setup screen. */
.setup-launch { position: sticky; bottom: 0; z-index: 2; padding: 14px 0 calc(14px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(16, 28, 23, 0), rgba(16, 28, 23, .96) 28%); }

/* Opening gate and intro flyover */
/* Opening dedication: letters of fire over a turning inscribed ring (src/game/Dedication.js) */
#dedication { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 52%, #170a05 0%, #080302 52%, #020100 100%); cursor: default; }
#dedication.hidden { display: none; }
.ded-canvas { position: absolute; inset: 0; pointer-events: none; }
.ded-haze { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(38% 28% at 32% 62%, rgba(255, 90, 20, .08), transparent 70%), radial-gradient(34% 24% at 68% 38%, rgba(255, 140, 60, .05), transparent 70%); animation: ded-haze 24s ease-in-out infinite alternate; }
@keyframes ded-haze { from { transform: translate(-3%, 2%) scale(1); } to { transform: translate(3%, -2%) scale(1.08); } }
.ded-stage { position: relative; width: min(900px, calc(100% - 48px - var(--safe-left) - var(--safe-right))); text-align: center; }
.ded-line { --heat: .5; margin: 0; font-family: "Cinzel", var(--display), serif; font-weight: 500; font-size: clamp(19px, 2.4vw, 34px); line-height: 1.6; letter-spacing: .035em; color: #ffb347; text-wrap: balance; text-shadow: 0 0 calc(4px + 16px * var(--heat)) rgba(255, 106, 0, calc(.25 + .55 * var(--heat))), 0 0 1px rgba(255, 210, 140, .5); animation: ded-flicker 3.3s ease-in-out infinite; }
.ded-line.ded-hush { color: #cf8440; }
.ded-line.ded-small { font-size: clamp(12px, 1.25vw, 16px); letter-spacing: .24em; color: #b27b47; }
.ded-line.ded-final { font-size: clamp(27px, 4.4vw, 60px); line-height: 1.35; color: #ffc766; }
#dedication.ded-flare .ded-final { color: #ffe7b0; text-shadow: 0 0 14px #ffd27a, 0 0 36px rgba(255, 138, 26, .85), 0 0 90px rgba(255, 106, 0, .55); }
.ded-word { display: inline-block; white-space: nowrap; }
.ded-char { display: inline-block; animation: ded-heat 1.5s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes ded-heat {
  0% { opacity: 0; color: #6e1a00; transform: translateY(.2em); text-shadow: none; }
  32% { opacity: 1; color: #fff2cf; transform: translateY(0); text-shadow: 0 0 10px #ffd27a, 0 0 26px #ff6a00; }
}
@keyframes ded-flicker { 0%, 100% { opacity: 1; } 37% { opacity: .9; } 41% { opacity: .98; } 70% { opacity: .93; } }
.ded-line.ded-out { animation: ded-out .9s ease-in forwards; }
@keyframes ded-out { to { opacity: 0; color: #ff5a00; filter: blur(3px); transform: translateY(-.35em); } }
.ded-skip { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-bottom)); margin: 0; color: rgba(214, 170, 120, .55); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; text-align: center; pointer-events: none; }

#introGate { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 24px calc(12vh + var(--safe-bottom)); text-align: center; background: linear-gradient(0deg, rgba(8, 3, 2, .85), rgba(8, 3, 2, .15) 55%, rgba(8, 3, 2, .35)); cursor: pointer; }
#introGate.hidden, #introSkip.hidden { display: none; }
.intro-title { margin: 10px 0 26px; font: 400 clamp(38px, 7vw, 84px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); text-shadow: 0 4px 30px rgba(255, 80, 20, .35); }
.intro-press { color: var(--brass-light); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; animation: intro-pulse 2.2s ease-in-out infinite; }
.intro-note { margin-top: 12px; color: var(--muted); font-size: 11px; }
@keyframes intro-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
#introSkip { position: fixed; inset: auto 0 0 0; z-index: 40; padding: 0 24px calc(34px + var(--safe-bottom)); text-align: center; pointer-events: none; background: linear-gradient(0deg, rgba(6, 2, 1, .75), transparent); }
#introCaption { min-height: 1.5em; margin-bottom: 18px; color: #f3e6cf; font: italic clamp(17px, 2.2vw, 26px)/1.4 var(--display); text-shadow: 0 2px 14px #000, 0 0 30px rgba(0, 0, 0, .8); }
#introCaption.caption-in { animation: caption-in 1.1s ease-out; }
@keyframes caption-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro-bar { width: min(260px, 60vw); height: 1px; margin: 0 auto 10px; background: rgba(198, 166, 109, .25); }
.intro-bar span { display: block; height: 100%; width: 0; background: var(--brass); }
.intro-skip-hint { color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#menu.menu-reveal { animation: menu-reveal 1.4s ease-out; }
@keyframes menu-reveal { from { opacity: 0; } to { opacity: 1; } }
.text-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--brass-light); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.menu-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.intro-replay { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.menu-saves { width: min(360px, 100%); margin: 12px 0 4px; }
.menu-saves .mbtn { justify-content: center; min-height: 44px; letter-spacing: .06em; }
.import-list { margin: 16px 0 0; padding-left: 20px; color: var(--bone); font-size: 14px; line-height: 1.6; }
.import-actions { margin-top: 24px; }