.empire-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 10, 8, .82);
  backdrop-filter: blur(5px);
  color: #eee8da;
}
.empire-map-launch {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: min(265px, calc(100% - 150px));
  pointer-events: none;
}
.empire-map-launch button,
.empire-map-launch span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #c4aa70a0;
  border-radius: 6px;
  background: #1b2b22eb;
  color: #efdfb6;
  box-shadow: 0 4px 15px #0007;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  pointer-events: auto;
}
.empire-map-launch button { cursor: pointer; }
.empire-map-launch button:hover { border-color: #e4c781; background: #35513b; }
.empire-map-launch button svg { flex: none; }
.empire-map-launch span { border-color: #9bbca184; color: #c6e4c5; }
.empire-incoming-alert {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid #e3ad84;
  border-radius: 7px;
  background: #642d28f5;
  color: #fff0e2;
  box-shadow: 0 8px 30px #000a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}
.empire-incoming-alert:hover { background: #864036; }
.empire-incoming-alert svg { flex: none; }
.game-map .learning-launch { top: auto; left: 12px; bottom: 12px; z-index: 4; }
.game-map .map-controls-hint { bottom: 62px; }
.empire-dialog {
  width: min(980px, 100%);
  max-height: min(860px, calc(100dvh - 40px));
  overflow: auto;
  background: #161e1a;
  border: 1px solid #7f795e;
  border-radius: 10px;
  box-shadow: 0 30px 90px #000a, inset 0 1px #efdcab22;
}
.empire-header {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 34px 24px;
  background: radial-gradient(circle at 85% 5%, #315b4a55, transparent 35%), linear-gradient(110deg, #25392e, #18231e 70%);
  border-bottom: 1px solid #9e8c5b65;
}
.empire-header h2,
.empire-section-head h3,
.empire-campaign-card h3,
.empire-province-card h3,
.empire-succession-card h3,
.empire-legacy-list h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
}
.empire-header h2 { display: flex; align-items: center; gap: 12px; margin: 6px 0 9px; font-size: clamp(25px, 3.2vw, 35px); line-height: 1.1; color: #f3e6c3; }
.empire-header h2 svg { color: #d7b66d; flex: none; }
.empire-header p:last-child { max-width: 700px; margin: 0; color: #c3c9bc; font-size: 14px; line-height: 1.55; }
.empire-kicker { margin: 0; color: #c9ab6e; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.empire-icon-button { flex: none; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #d4c39155; border-radius: 50%; background: #0f171399; color: #eee4d0; }
.empire-icon-button:hover { background: #34483a; }
.empire-tabs { display: flex; padding: 0 34px; border-bottom: 1px solid #9d95633d; background: #1d2a22; }
.empire-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 145px; padding: 16px 19px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #aeb8aa; font-size: 13px; font-weight: 700; cursor: pointer; }
.empire-tabs button:hover { color: #e2d5b9; }
.empire-tabs button.is-active { border-color: #d7b66d; color: #f3e6c3; background: #d7b66d0b; }
.empire-tabs small { min-width: 21px; padding: 2px 5px; border-radius: 10px; background: #d7b66d24; color: #d9c48e; font-size: 10px; }
.empire-content { padding: 27px 34px 34px; }
.empire-section-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 0 0 15px; }
.empire-section-head h3 { margin: 3px 0 0; color: #f1e5c7; font-size: 24px; }
.empire-section-head > span { color: #aeb7a9; font-size: 12px; }
.empire-target-head { margin-top: 30px; }
.empire-empty { display: grid; justify-items: center; gap: 8px; padding: 33px 20px; text-align: center; border: 1px dashed #9d956366; border-radius: 8px; background: #24302666; }
.empire-empty svg { color: #d4b771; }
.empire-empty strong { font-family: Georgia, serif; font-size: 19px; color: #ede3ca; }
.empire-empty p { max-width: 360px; margin: 0; color: #aeb7aa; font-size: 13px; line-height: 1.5; }
.empire-card-stack, .empire-province-list { display: grid; gap: 16px; }
.empire-campaign-card, .empire-province-card, .empire-incoming-card { padding: 20px; border: 1px solid #8e856454; border-radius: 8px; background: linear-gradient(140deg, #243128, #1a241e); }
.empire-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.empire-card-top h3 { margin: 4px 0 0; color: #f3e6c7; font-size: 23px; }
.empire-status, .empire-territory { padding: 6px 9px; border: 1px solid #b7a7775c; border-radius: 4px; color: #c3bc9f; font-size: 11px; text-transform: capitalize; white-space: nowrap; }
.empire-status-active { border-color: #9ebd9a88; color: #bfe4b7; background: #66966220; }
.empire-track { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 22px 0; padding: 0; }
.empire-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9eac9e; font-size: 11px; text-align: center; }
.empire-track li:not(:last-child):after { content: ''; position: absolute; left: calc(50% + 16px); right: calc(-50% + 16px); top: 13px; height: 2px; background: #67756577; }
.empire-track li.is-complete:not(:last-child):after { background: #d4b771; }
.empire-track-dot { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #7a8876; border-radius: 50%; background: #26372b; color: #c3cebc; font-weight: 700; }
.empire-track .is-complete, .empire-track .is-current { color: #e6dcbd; }
.empire-track .is-complete .empire-track-dot { border-color: #d4b771; background: #b29555; color: #131d17; }
.empire-track .is-current .empire-track-dot { border-color: #d4b771; box-shadow: 0 0 0 4px #d4b77122; color: #f0dcaa; }
.empire-order-grid, .empire-policy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.empire-choice, .empire-policy { min-height: 66px; padding: 10px 11px; border: 1px solid #928c6a66; border-radius: 5px; background: #141f19; color: #d9ded0; text-align: left; cursor: pointer; }
.empire-choice:hover, .empire-policy:hover:not(:disabled) { border-color: #d7b66d; background: #293a2d; }
.empire-choice.is-selected { border-color: #e1c680; background: #66592e55; box-shadow: inset 0 0 0 1px #e1c68044; }
.empire-choice strong, .empire-policy strong { display: block; font-size: 12px; }
.empire-choice small, .empire-policy span { display: block; margin-top: 5px; color: #acb6a7; font-size: 10px; line-height: 1.35; }
.empire-order-help { min-height: 19px; margin: 13px 0 12px; color: #c5cabd; font-size: 12px; line-height: 1.5; }
.empire-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 39px; padding: 9px 15px; border: 1px solid #e5c980; border-radius: 4px; background: #cfb369; color: #18231a; font-size: 12px; font-weight: 800; cursor: pointer; }
.empire-primary:hover:not(:disabled) { background: #ebce82; }
.empire-primary:disabled, .empire-target button:disabled, .empire-policy:disabled, .empire-succession-card button:disabled { opacity: .48; cursor: not-allowed; }
.empire-muted { margin: 9px 0 0; color: #aeb8a9; font-size: 12px; line-height: 1.5; }
.empire-target-list { display: grid; gap: 7px; }
.empire-target { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border: 1px solid #8e856445; border-radius: 5px; background: #202d24; }
.empire-target strong { display: block; color: #e6e5d7; font-family: Georgia, serif; font-size: 17px; }
.empire-target small { display: block; margin-top: 3px; color: #aeb8a9; font-size: 11px; }
.empire-target button, .empire-succession-card button { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 10px; border: 1px solid #d5bd7d99; border-radius: 4px; background: #d5bd7d15; color: #efd79a; font-size: 11px; font-weight: 700; cursor: pointer; }
.empire-target button:hover:not(:disabled), .empire-succession-card button:hover:not(:disabled) { background: #d5bd7d2d; }
.empire-footnote { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: #aeb8a9; font-size: 11px; line-height: 1.55; }
.empire-error, .empire-warning { padding: 11px 13px; border: 1px solid #bd776d88; border-radius: 5px; background: #6b2c2b33; color: #f0c0b4; font-size: 12px; line-height: 1.5; }
.empire-error { margin: 0 0 17px; }
.empire-warning { margin: 9px 0 0; }
.empire-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #c5aa6d88; border-radius: 5px; background: #aa854628; color: #f0dfba; font-size: 12px; line-height: 1.5; }
.empire-alert svg { flex: none; color: #e1c57e; }
.empire-alert p { margin: 0; }
.empire-content > .empire-alert { margin-bottom: 20px; }
.empire-incoming { margin-top: 26px; }
.empire-incoming-card { margin-bottom: 8px; border-color: #b5786688; }
.empire-incoming-card > strong { color: #f2d2c1; font-family: Georgia, serif; font-size: 17px; }
.empire-incoming-card > p { color: #bdc6b6; font-size: 12px; }
.empire-text-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #ddc787; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.empire-text-button:hover { color: #f4dca0; }
.empire-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid #bd776d88; border-radius: 5px; background: #6b2c2b33; }
.empire-confirm p { flex-basis: 100%; margin: 0 0 4px; color: #f3d1c7; font-size: 12px; }
.empire-confirm button { padding: 7px 10px; border: 1px solid #bd776d; border-radius: 4px; background: #8d433b; color: #fff4ec; font-size: 11px; cursor: pointer; }
.empire-confirm button:last-child { border-color: #87907e; background: transparent; }
.empire-province-card { display: grid; grid-template-columns: 195px 1fr; gap: 20px; }
.empire-map-button { position: relative; display: block; min-height: 180px; width: 100%; padding: 0; overflow: hidden; border: 1px solid #83948577; border-radius: 5px; background: #18272a; cursor: pointer; }
.empire-map, .empire-map-empty { display: block; width: 100%; height: 100%; min-height: 180px; }
.empire-map-empty { display: grid; place-items: center; color: #8ca8a0; }
.empire-map-button > span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: #0a1715da; color: #e6debf; font-size: 11px; font-weight: 700; }
.empire-map-button:hover > span { background: #344e39; }
.empire-province-body { min-width: 0; }
.empire-stability-head { display: flex; justify-content: space-between; margin-top: 13px; color: #dce2d3; font-size: 11px; }
.empire-stability-bar { height: 6px; margin: 5px 0 15px; border-radius: 6px; background: #59645866; overflow: hidden; }
.empire-stability-bar > span { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }
.empire-policy.is-current { border-color: #c8b773; background: #75663833; }
.empire-policy-grid { gap: 6px; }
.empire-policy { min-height: 67px; padding: 8px; }
.empire-legacy-list { display: grid; gap: 0; }
.empire-legacy-list article { position: relative; display: flex; gap: 17px; padding: 0 0 25px; }
.empire-legacy-list article:not(:last-child):before { content: ''; position: absolute; top: 28px; bottom: 0; left: 14px; width: 1px; background: #d7b66d88; }
.empire-legacy-number { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border: 1px solid #d7b66d; border-radius: 50%; background: #314334; color: #f4dfaa; font-size: 12px; font-weight: 700; }
.empire-legacy-list h4 { margin: 4px 0 5px; color: #eee3c6; font-size: 20px; }
.empire-legacy-list article p:not(.empire-kicker) { margin: 0 0 5px; color: #c7cdbd; font-size: 12px; }
.empire-legacy-list small { color: #aab4a5; font-size: 10px; }
.empire-legacy-list .is-current .empire-legacy-number { background: #a98d50; color: #132017; }
.empire-succession-dialog { width: min(790px, 100%); }
.empire-succession-list { display: grid; gap: 10px; }
.empire-succession-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px; padding: 16px; border: 1px solid #8e856464; border-radius: 6px; background: #223128; }
.empire-succession-emblem { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--civ-base, #456); box-shadow: inset 0 0 0 4px #1d2923, 0 0 0 1px var(--civ-accent, #edc); }
.empire-succession-emblem span { width: 18px; height: 18px; transform: rotate(45deg); border: 2px solid var(--civ-accent, #edc); }
.empire-succession-card h3 { margin: 4px 0; color: #f0e4c7; font-size: 20px; }
.empire-succession-card p:not(.empire-kicker) { margin: 0 0 6px; color: #c8cfbf; font-size: 12px; line-height: 1.4; }
.empire-succession-card small { color: #aeb7a8; font-size: 10px; }
.empire-show-all { display: block; margin: 16px auto 0; }
.empire-report-backdrop { z-index: 90; }
.empire-report-dialog { width: min(560px, 100%); }
.empire-battle-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.empire-battle-score > div { display: grid; justify-items: center; gap: 4px; padding: 16px; border: 1px solid #a89d7655; border-radius: 6px; background: #25362a; }
.empire-battle-score span { color: #bfc9b8; font-size: 11px; }
.empire-battle-score strong { color: #f1dc9e; font-family: Georgia, serif; font-size: 36px; }
.empire-battle-score .empire-score-vs { color: #b5bcae; font-family: Georgia, serif; font-size: 19px; }
.empire-battle-margin { color: #cdd2c3; font-size: 12px; text-align: center; }
.empire-battle-loot { padding: 8px 11px; border: 1px solid #b99d62; border-radius: 4px; color: #ebd7a0; font-size: 12px; }
.empire-report-messages { margin: 15px 0; padding-left: 18px; color: #d4dacb; font-size: 12px; line-height: 1.65; }
.empire-report-dialog .empire-primary { margin-top: 20px; }
@media (max-width: 700px) {
  .empire-map-launch { top: 8px; left: 8px; max-width: min(210px, calc(100% - 130px)); }
  .empire-map-launch button, .empire-map-launch span { padding: 6px 7px; font-size: 10px; }
  .empire-incoming-alert { top: max(8px, env(safe-area-inset-top, 0px)); width: calc(100vw - 16px); max-width: 440px; padding: 8px 10px; font-size: 11px; }
  .game-map .learning-launch { left: 8px; bottom: 8px; }
  .game-map .map-controls-hint { bottom: 50px; max-width: 190px; }
  .empire-backdrop { align-items: flex-end; padding: 0; }
  .empire-dialog { width: 100%; max-height: 94dvh; border-radius: 12px 12px 0 0; }
  .empire-header { padding: 24px 20px 20px; }
  .empire-tabs { padding: 0 12px; }
  .empire-tabs button { flex: 1; min-width: 0; padding: 13px 6px; gap: 4px; font-size: 11px; }
  .empire-tabs button svg { width: 14px; }
  .empire-content { padding: 22px 17px 28px; }
  .empire-province-card { grid-template-columns: 1fr; gap: 14px; }
  .empire-map-button { height: 155px; min-height: 155px; }
  .empire-map, .empire-map-empty { min-height: 155px; }
  .empire-order-grid, .empire-policy-grid { grid-template-columns: repeat(2, 1fr); }
  .empire-succession-card { grid-template-columns: 40px 1fr; gap: 11px; }
  .empire-succession-emblem { width: 38px; height: 38px; }
  .empire-succession-card button { grid-column: 2; justify-self: start; }
}
@media (max-width: 420px) {
  .empire-header h2 { font-size: 24px; }
  .empire-header h2 svg { width: 19px; }
  .empire-target { align-items: flex-start; flex-direction: column; }
  .empire-target button { align-self: flex-start; }
  .empire-campaign-card, .empire-province-card, .empire-incoming-card { padding: 15px; }
  .empire-tabs button { flex-direction: column; }
}