@charset "UTF-8";
:root {
  --ink: #e0d1ad;
  --gold: #c4a463;
  --muted: #978e74;
  --line: #a283463b;
  --dark: #28271f;
  --teal: #54877c;
  --wood:
    repeating-linear-gradient(93deg, #ffffff02 0 1px, #00000003 1px 4px),
    linear-gradient(105deg, #333126, #25251e 45%, #302c22);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: #29271d;
  color: var(--ink);
  font: 12px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
button:disabled {
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
canvas:focus-visible {
  outline: 2px solid #e5cf8e;
  outline-offset: -3px;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:hover:not(:disabled) {
  color: #f3e2b5;
}
button svg {
  pointer-events: none;
}
svg {
  vertical-align: middle;
  flex-shrink: 0;
}
i {
  font-style: normal;
}
a {
  color: inherit;
  text-decoration: none;
}
.hidden {
  display: none !important;
}
.wood {
  background: var(--wood);
  box-shadow: inset 0 1px #e5cc8a14;
}
.parchment {
  background:
    repeating-linear-gradient(35deg, #845e2c03 0 1px, #ffffff02 1px 4px),
    linear-gradient(120deg, #e3d2a9, #d4bf93);
  color: #514631;
  border: 1px solid #a18a5e;
  box-shadow:
    0 5px 25px #44301624,
    inset 0 0 0 4px #e6d6af,
    inset 0 0 0 5px #917c4d55;
}
.eyebrow {
  font: 600 9px var(--sans);
  letter-spacing: 1.8px;
}
.eyebrow span {
  opacity: 0.5;
  margin: 0 7px;
}
i.status-dot,
.status-dot {
  display: inline-block;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background: #779360;
  box-shadow: 0 0 0 2px #52614818;
  flex-shrink: 0;
}
#app {
  height: 100%;
  height: var(--game-height, 100dvh);
  width: var(--game-width, 100%);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 218px 28px;
}
.topbar {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  gap: 18px;
  border-bottom: 2px solid #aa8c51;
  box-shadow:
    0 3px 12px #46351b55,
    inset 0 -3px #0004;
  position: relative;
}
.topbar:after {
  content: '';
  position: absolute;
  bottom: -5px;
  height: 2px;
  left: 0;
  right: 0;
  background: #e2c78a55;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-crest {
  color: #d7b66d;
  font: 44px/1 var(--serif);
  text-shadow: 0 2px #0f100c;
  display: inline-block;
}
.brand b {
  display: block;
  font: 20px var(--serif);
  letter-spacing: 1.8px;
  color: #efdeb6;
}
.brand b span {
  font-size: 15px;
  letter-spacing: 2px;
}
.brand small {
  display: block;
  font-size: 7px;
  letter-spacing: 3px;
  color: #ae996d;
  margin-top: 3px;
}
.resources {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 690px;
}
.resource {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 105px;
  padding: 0 21px;
  border-left: 1px solid #c4a46320;
}
.resource:first-child {
  border-left: 0;
}
.resource i {
  color: #c0a36b;
  filter: drop-shadow(0 1px 0 #0008);
}
.resource i svg {
  width: 24px;
  height: 24px;
}
.resource small {
  display: block;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #a99b7e;
  white-space: nowrap;
}
.resource b {
  display: block;
  font: 19px/1.2 var(--serif);
  color: #e7d9b7;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.resource em {
  font: 12px var(--serif);
  font-style: normal;
  color: #9a9077;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.icon-button {
  height: 31px;
  width: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #a28c5338;
  background: #1e1f1844;
  color: #bda878;
}
.speed-button {
  width: 33px;
  height: 31px;
  font: 14px var(--serif);
  border: 1px solid #a28c5338;
}
.divider {
  display: inline-block;
  height: 20px;
  width: 1px;
  background: #a9905744;
  margin: 0 6px;
}
#battlefield {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #bda275;
}
#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
  cursor: default;
}
/* The battlefield's name plate: the same parchment card as the siege panel. */
.scenario {
  position: absolute;
  left: 26px;
  top: 23px;
  max-width: 290px;
  padding: 13px 20px 13px 18px;
  border-radius: 1px;
  pointer-events: none;
}
.scenario .eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #817047;
}
.scenario .eyebrow span {
  opacity: 0.6;
  margin: 0 2px;
}
.scenario h1 {
  font: 23px/1.15 var(--serif);
  margin: 5px 0 7px;
  letter-spacing: -0.4px;
  color: #4e442e;
}
.scenario p {
  font-size: 10px;
  margin: 0;
  color: #6f5f3f;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #a18a5e55;
  padding-top: 7px;
}
.wave-panel {
  position: absolute;
  top: 23px;
  right: 26px;
  width: 274px;
  padding: 17px 18px 14px;
  border-radius: 1px;
}
.wave-panel .eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #817047;
}
.wave-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.wave-title h2 {
  font: 18px/1.4 var(--serif);
  margin: 0;
  color: #4e442e;
  letter-spacing: -0.3px;
}
.wave-title i {
  color: #a4884f;
}
.wave-title i svg {
  width: 23px;
  height: 23px;
}
.wave-panel p {
  font-size: 9px;
  margin: 3px 0 12px;
  color: #82704c;
}
.wave-progress {
  height: 3px;
  background: #7c6e4940;
  box-shadow: 0 1px #f5e5bd7a;
}
.wave-progress span {
  display: block;
  background: #7c8a5d;
  height: 100%;
  width: 100%;
  transition: width 0.5s;
}
.wave-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 8px;
}
.wave-bottom b {
  display: block;
  font: 16px var(--serif);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.wave-bottom button {
  border: 1px solid #a48a565e;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #e6d4aa5e;
  font-size: 8px;
  color: #5f4e2f;
}
.wave-bottom button:hover:not(:disabled) {
  color: #3e432d;
  background: #f0dfb9;
}
.wave-bottom button svg {
  width: 15px;
  height: 15px;
}
.wave-bottom button:disabled {
  opacity: 0.4;
}
.wave-panel.active .wave-progress span {
  background: #ac6b46;
}
.wave-panel.active .wave-title h2 {
  color: #8f4d33;
}
.selection {
  position: absolute;
  left: 24px;
  bottom: 18px;
  width: 285px;
  padding: 13px 15px;
  border: 1px solid #b39a5d7a;
  box-shadow:
    inset 0 0 0 3px #0002,
    0 3px 15px #3b2c2722;
}
.selection-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.selection-image {
  width: 52px;
  height: 55px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #0005);
}
.selection h3 {
  font: 17px var(--serif);
  margin: 2px 0 6px;
  color: #ead5a7;
}
.selection .eyebrow {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #af9b70;
}
.selection p {
  font-size: 10px;
  color: #b2a58a;
  line-height: 1.5;
  margin: 7px 0;
}
.health-meter {
  height: 3px;
  background: #151a13;
  margin-top: 6px;
}
.health-meter span {
  display: block;
  height: 100%;
  background: #86a16c;
}
.selection-stats {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #a79c82;
  margin: 7px 0 9px;
}
.selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.selection-actions button {
  padding: 6px 8px;
  border: 1px solid #b09b5c3d;
  color: #c5b58e;
  background: #171b1429;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.selection-actions button.active {
  color: #e8d59d;
  border-color: #c4a663a0;
  background: #a58b4c22;
}
.selection-actions svg {
  width: 13px;
  height: 13px;
}
.toast {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(600px, 70%);
  padding: 10px 18px;
  background: #2a2b21ee;
  border: 1px solid #c9aa6855;
  box-shadow: 0 4px 15px #3a2e2333;
  color: #e2d3ac;
  text-align: center;
  font-size: 11px;
  pointer-events: none;
  z-index: 9;
}
.toast.danger {
  border-color: #be805a;
  color: #f1bd92;
}
.map-controls {
  position: absolute;
  bottom: 16px;
  right: 24px;
  border: 1px solid #ad945663;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  gap: 5px;
  box-shadow: 0 3px 10px #4b382b30;
}
.map-controls button {
  height: 30px;
  min-width: 27px;
  display: grid;
  place-items: center;
  color: #d1bd8d;
  font: 18px var(--serif);
}
.map-controls button svg {
  width: 17px;
  height: 17px;
}
.map-controls .divider {
  height: 24px;
}
.compass {
  min-width: 73px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
}
.compass b {
  font: 18px var(--serif);
  color: #e3d09e;
}
.compass small {
  font-size: 6px;
  letter-spacing: 1px;
  max-width: 40px;
  line-height: 1.6;
  color: #b7a57f;
}
#zoomLevel {
  font-size: 8px;
  min-width: 28px;
  text-align: center;
  color: #c0b18b;
  font-variant-numeric: tabular-nums;
}
.pause-banner {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  color: #f5e2b8;
  background: #2a2c23eb;
  border: 1px solid #c1a36499;
  padding: 19px 42px;
  text-align: center;
  letter-spacing: 3px;
  font: 17px var(--serif);
  box-shadow: 0 6px 25px #33251144;
  pointer-events: none;
}
.pause-banner > span {
  color: #c0a269;
  margin-right: 10px;
}
.pause-banner small {
  display: block;
  font: 9px var(--sans);
  letter-spacing: 0.5px;
  color: #b3a78b;
  margin-top: 8px;
}
.command-dock {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 276px;
  position: relative;
  z-index: 10;
  border-top: 3px solid #ad9056;
  box-shadow:
    0 -3px 15px #3a2d2844,
    inset 0 2px #e5ca8133;
}
.command-dock:before,
.command-dock:after {
  content: '◆';
  position: absolute;
  top: -9px;
  color: #ceaf68;
  text-shadow: 0 1px #211d17;
  font-size: 10px;
}
.command-dock:before {
  left: 13px;
}
.command-dock:after {
  right: 13px;
}
.map-frame {
  padding: 14px 17px 6px;
  border-right: 1px solid #a28c573d;
  min-width: 0;
}
.panel-label {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #bba878;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.panel-label svg {
  width: 14px;
  height: 14px;
}
.minimap-bezel {
  padding: 3px;
  border: 1px solid #a891554c;
  background: #141810;
  position: relative;
  box-shadow:
    0 1px #e7ce8e10,
    inset 0 1px 5px #0009;
}
.minimap-bezel canvas {
  width: 100%;
  height: 124px;
  display: block;
  cursor: crosshair;
}
.map-north {
  position: absolute;
  right: 10px;
  top: 7px;
  color: #c6ae79;
  font: 9px var(--serif);
}
.map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 6px;
  letter-spacing: 1.4px;
  color: #a9a081;
  padding-top: 7px;
}
.map-meta > span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.map-meta .status-dot {
  background: #6f9f88;
  width: 4px;
  height: 4px;
}
.map-meta button {
  padding: 0;
  color: #a99564;
}
.map-meta button svg {
  height: 12px;
  width: 12px;
}
.build-panel {
  min-width: 0;
  padding: 0 17px;
}
.category-tabs {
  height: 44px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #a88c553d;
  gap: 21px;
  white-space: nowrap;
}
.category-tabs > button {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: 13px var(--serif);
  color: #9e987f;
  padding: 0 0 1px;
}
.category-tabs > button svg {
  width: 16px;
  height: 16px;
}
.category-tabs > button span {
  font: 7px var(--sans);
  color: #736f58;
  margin-left: 2px;
}
.category-tabs > button.active {
  border-color: #c7a86a;
  color: #e3ce9b;
}
.category-tabs > button.active svg {
  color: #c5a25b;
}
.category-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.category-tools button {
  padding: 3px;
  color: #9b8e69;
}
.category-tools button svg {
  width: 16px;
  height: 16px;
}
.category-tools button.active {
  color: #f2d592;
}
.build-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 7px;
  font-size: 6px;
  letter-spacing: 1.7px;
  color: #9c916f;
}
.build-heading span:last-child {
  letter-spacing: 0.3px;
  color: #817e65;
  font-size: 8px;
}
.build-cards {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: #8f7c4c55 transparent;
}
.build-card {
  position: relative;
  min-width: 88px;
  flex: 1;
  height: 110px;
  border: 1px solid #a28b4a3a;
  background: linear-gradient(#45433688, #24271d88);
  padding: 0 4px 7px;
  text-align: center;
  max-width: 145px;
}
.build-card:before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #ceb5780b;
  pointer-events: none;
}
.build-card:hover,
.build-card.active {
  border-color: #c5a66a99;
  background: linear-gradient(#675c3b88, #343527aa);
  color: #f6dfab;
}
.build-card.active:after {
  content: '◆';
  position: absolute;
  top: -6px;
  left: calc(50% - 3px);
  font-size: 8px;
  color: #dbc188;
}
.build-card:disabled {
  opacity: 0.42;
}
.build-card img {
  display: block;
  width: 100%;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px #090c0c44);
  transition: transform 0.16s;
}
.build-card:hover img {
  transform: translateY(-2px);
}
.build-card .unit-card-image {
  height: 65px;
  padding: 6px 0;
}
.build-card .card-title {
  display: block;
  line-height: 1.2;
  font: 11px var(--serif);
  color: #d4c49c;
  margin-top: 1px;
  white-space: nowrap;
}
.card-cost {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  color: #aa9870;
  font: 8px var(--sans);
}
.card-cost span {
  display: flex;
  align-items: center;
  gap: 2px;
}
.card-cost svg {
  width: 10px;
  height: 10px;
}
.card-key {
  position: absolute;
  right: 5px;
  top: 3px;
  font: 7px var(--sans);
  color: #aa9b7566;
}
.recruitment-queue {
  font: italic 9px var(--serif);
  color: #7f8068;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 17px;
  white-space: nowrap;
  overflow: hidden;
}
.queue-counter {
  font: 6px var(--sans);
  letter-spacing: 1.1px;
  color: #98916e;
}
.queue-items {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 9px var(--sans);
  color: #c5b58e;
}
.queue-progress {
  display: inline-block;
  width: 80px;
  height: 3px;
  background: #151b13;
}
.queue-progress i {
  display: block;
  height: 100%;
  background: #a68c55;
}
.council {
  border-left: 1px solid #a28c573d;
  padding: 14px 17px 8px;
  position: relative;
  min-width: 0;
}
.council:before {
  content: '';
  position: absolute;
  inset: 5px;
  border-right: 1px solid #ab925420;
  pointer-events: none;
}
.advisor {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.portrait-frame {
  border: 1px solid #b397585c;
  padding: 3px;
  background: #1e2117;
  width: 79px;
  height: 108px;
  flex-shrink: 0;
  position: relative;
}
.portrait-frame:after {
  content: '◆';
  font: 7px var(--serif);
  color: #c0a264;
  position: absolute;
  bottom: -5px;
  left: 34px;
}
.portrait-frame img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 46% center;
  filter: sepia(0.2) saturate(0.7);
  display: block;
}
.advisor-copy .eyebrow {
  font-size: 5px;
  letter-spacing: 1.3px;
  color: #a0916a;
}
.advisor-copy h3 {
  font: 21px var(--serif);
  color: #ddc99a;
  letter-spacing: 0.5px;
  margin: 5px 0 10px;
}
.advisor-copy p {
  font: italic 11px/1.65 var(--serif);
  margin: 0;
  color: #aaa185;
}
.council-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #a28b4b32;
  padding-top: 11px;
  margin-top: 11px;
}
.council-actions button {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #a99b75;
  font-size: 8px;
}
.council-actions button svg {
  height: 13px;
  width: 13px;
}
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #22241c;
  border-top: 1px solid #a28b4b32;
  padding: 0 18px;
  color: #8e927a;
  font-size: 8px;
  z-index: 11;
  white-space: nowrap;
}
.statusbar > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.key-hints {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #747d65;
  font-size: 7px;
}
.key-hints i {
  margin: 0 4px;
  color: #7a774e;
}
kbd {
  font: 7px var(--sans);
  border: 1px solid #a48f562f;
  padding: 1px 4px;
  color: #a49977;
  background: #c9b47c08;
  border-radius: 2px;
}
.version {
  font-size: 6px;
  letter-spacing: 1.3px;
  color: #77795e;
}
.version b {
  font: 10px var(--serif);
  color: #ac9562;
  margin-left: 6px;
}
.tooltip {
  position: fixed;
  z-index: 80;
  max-width: 260px;
  padding: 13px 15px;
  background: linear-gradient(#37372b, #24281e);
  color: #bdb395;
  border: 1px solid #c1a1607a;
  box-shadow: 0 5px 20px #0004;
  pointer-events: none;
  font-size: 10px;
}
.tooltip h3 {
  font: 16px var(--serif);
  color: #e7d3a5;
  margin: 0 0 7px;
}
.tooltip p {
  margin: 0;
  line-height: 1.6;
}
.tooltip .tooltip-footer {
  border-top: 1px solid #a28b4a44;
  margin-top: 9px;
  padding-top: 8px;
  color: #9fa380;
  font-size: 8px;
}
.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: #d0b784;
  color: #4f4b32;
  z-index: 10;
}
.loading .brand-crest {
  font-size: 70px;
  color: #71643d;
  animation: unfurl 2s ease-in-out infinite;
}
.loading b {
  font: 24px var(--serif);
}
.loading small {
  font-size: 10px;
  color: #827046;
}
@keyframes unfurl {
  50% {
    opacity: 0.5;
    transform: rotate(10deg);
  }
}
.modal {
  padding: 33px 36px;
  max-width: min(92vw, 480px);
  border-radius: 2px;
}
.modal::backdrop {
  background: #151b16a1;
  backdrop-filter: blur(4px);
}
.modal .eyebrow {
  font-size: 8px;
  color: #8a754c;
}
.modal h2 {
  font: 30px/1.2 var(--serif);
  color: #51442b;
  margin: 9px 0 12px;
  letter-spacing: -0.7px;
}
.modal > p {
  font-size: 11px;
  color: #827047;
  line-height: 1.7;
}
.modal button {
  border: 1px solid #9d865774;
  padding: 10px 14px;
  font-size: 11px;
  color: #65512f;
  background: #ead9b24d;
}
.modal button:hover {
  background: #ecdab0;
  color: #4a432c;
}
.modal .primary {
  background: #3d5142;
  color: #e8d6a4;
  border-color: #556949;
  box-shadow: inset 0 0 0 2px #d0bb8130;
}
.modal .primary:hover {
  background: #4d654f;
  color: #fff2c7;
}
.modal .modal-close {
  position: absolute;
  right: 13px;
  top: 8px;
  border: 0;
  background: none;
  font: 25px var(--serif);
  padding: 0 5px;
  color: #8c784c;
}
.menu-grid {
  display: grid;
  gap: 7px;
  margin: 22px 0;
}
.menu-grid .primary {
  grid-column: 1/-1;
}
.modal label {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #8a764a;
  display: block;
  margin: 18px 0 7px;
}
.modal select {
  width: 100%;
  background: #e4d0a3;
  color: #665333;
  border: 1px solid #aa9363;
  padding: 9px;
  font-size: 11px;
}
.new-game {
  width: 100%;
  margin: 9px 0;
}
.modal .menu-note {
  font-size: 9px;
  color: #93825d;
}
.guide {
  max-width: min(94vw, 740px);
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 27px 0;
}
.guide-grid section > svg {
  width: 23px;
  height: 23px;
  color: #a68b50;
}
.guide-grid h3 {
  font: 18px var(--serif);
  margin: 8px 0;
  color: #665332;
}
.guide-grid p {
  font-size: 11px;
  color: #806f49;
  line-height: 1.75;
  margin: 0;
}
.guide kbd {
  border-color: #9f89534d;
  color: #76613a;
  background: #a58d5612;
  font-size: 9px;
}
.gate-rule {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: #a38f5d14;
  border: 1px solid #ad965f55;
  font-size: 11px;
  line-height: 1.7;
  color: #7e6c44;
}
.gate-rule svg {
  color: #938051;
  margin-top: 4px;
}
.gate-rule b {
  display: block;
  color: #665431;
  font-weight: 600;
}
.guide-shortcuts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px 0;
  font-size: 9px;
  color: #8b7850;
}
.guide > .primary {
  width: 100%;
}
#ending > button {
  margin: 9px 6px 0 0;
}
@media (min-width: 1700px) {
  #app {
    grid-template-rows: 72px minmax(0, 1fr) 240px 30px;
  }
  .topbar {
    padding: 0 32px;
  }
  .command-dock {
    grid-template-columns: 270px minmax(0, 1fr) 310px;
  }
  .map-frame {
    padding: 17px 20px;
  }
  .minimap-bezel canvas {
    height: 143px;
  }
  .build-card {
    height: 126px;
    max-width: 180px;
  }
  .build-card img {
    height: 78px;
  }
  .build-card .card-title {
    font-size: 13px;
  }
  .category-tabs {
    height: 48px;
    gap: 30px;
  }
  .category-tabs > button {
    font-size: 15px;
  }
  .build-heading {
    margin-top: 14px;
  }
  .council {
    padding: 17px 22px;
  }
  .portrait-frame {
    height: 121px;
    width: 88px;
  }
  .advisor-copy p {
    font-size: 13px;
  }
  .panel-label {
    font-size: 8px;
  }
  .scenario {
    top: 32px;
    left: 40px;
  }
  .wave-panel {
    top: 31px;
    right: 34px;
    width: 300px;
  }
}
@media (max-width: 1180px) {
  .topbar {
    padding: 0 14px;
    gap: 12px;
  }
  .brand b {
    font-size: 17px;
  }
  .brand b span {
    font-size: 12px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: 2px;
  }
  .brand-crest {
    font-size: 36px;
  }
  .resource {
    min-width: 85px;
    padding: 0 13px;
    gap: 7px;
  }
  .resource i svg {
    width: 20px;
    height: 20px;
  }
  .resource small {
    font-size: 6px;
  }
  .resource b {
    font-size: 17px;
  }
  .command-dock {
    grid-template-columns: 210px minmax(0, 1fr) 220px;
  }
  .map-frame {
    padding: 14px 13px 6px;
  }
  .council {
    padding: 14px 12px;
  }
  .advisor {
    gap: 9px;
  }
  .portrait-frame {
    width: 64px;
    height: 105px;
  }
  .advisor-copy p {
    font-size: 10px;
  }
  .advisor-copy h3 {
    font-size: 19px;
    margin-bottom: 8px;
  }
  .category-tabs {
    gap: 15px;
  }
  .category-tabs > button {
    font-size: 12px;
    gap: 5px;
  }
  .category-tabs > button span {
    display: none;
  }
  .build-panel {
    padding: 0 12px;
  }
  .category-tools {
    gap: 4px;
  }
  .build-card {
    min-width: 80px;
  }
  .build-card .card-title {
    font-size: 10px;
  }
  .card-cost {
    gap: 4px;
    font-size: 7px;
  }
  .wave-panel {
    width: 249px;
  }
  .key-hints {
    display: none;
  }
}
@media (max-width: 940px) {
  .population {
    display: none;
  }
  .resource {
    padding: 0 12px;
    min-width: 80px;
  }
  .command-dock {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .council {
    display: none;
  }
  .scenario {
    left: 22px;
  }
  .wave-panel {
    right: 19px;
    width: 240px;
  }
  .category-tabs {
    gap: 22px;
  }
  .build-card {
    min-width: 86px;
  }
  .build-cards {
    gap: 6px;
  }
  .top-actions {
    gap: 5px;
  }
}
@media (max-width: 700px) {
  #app {
    grid-template-rows: 54px minmax(0, 1fr) 181px 24px;
  }
  .topbar {
    gap: 8px;
    padding: 0 9px;
  }
  .brand {
    gap: 5px;
  }
  .brand-crest {
    font-size: 29px;
  }
  .brand b {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .brand b span {
    display: block;
    font-size: 9px;
    letter-spacing: 2px;
  }
  .brand small {
    display: none;
  }
  .resource {
    padding: 0 8px;
    gap: 5px;
    min-width: 59px;
  }
  .resource i svg {
    height: 17px;
    width: 17px;
  }
  .resource small {
    display: none;
  }
  .resource b {
    font-size: 14px;
    margin: 0;
  }
  .top-actions .divider {
    display: none;
  }
  .top-actions .icon-button {
    width: 25px;
    height: 25px;
    border: 0;
    background: none;
  }
  .speed-button {
    border: 0;
    width: 25px;
    font-size: 12px;
  }
  .top-actions {
    gap: 0;
  }
  .resources {
    justify-content: flex-end;
  }
  .scenario {
    left: 16px;
    top: 17px;
    padding: 9px 14px 10px 12px;
  }
  .scenario .eyebrow {
    font-size: 6px;
    letter-spacing: 1.2px;
  }
  .scenario h1 {
    font-size: 21px;
    margin: 5px 0 6px;
  }
  .scenario p {
    font-size: 8px;
    max-width: 180px;
  }
  .wave-panel {
    width: 195px;
    padding: 12px;
    top: 15px;
    right: 12px;
  }
  .wave-panel .eyebrow {
    font-size: 6px;
  }
  .wave-title h2 {
    font-size: 15px;
  }
  .wave-title i {
    display: none;
  }
  .wave-panel p {
    font-size: 7px;
    margin-bottom: 8px;
  }
  .wave-bottom {
    font-size: 7px;
  }
  .wave-bottom b {
    font-size: 14px;
  }
  .wave-bottom button {
    font-size: 7px;
    padding: 5px;
  }
  .wave-bottom button svg {
    width: 12px;
    height: 12px;
  }
  .command-dock {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .map-frame {
    padding: 12px 9px 5px;
  }
  .panel-label {
    font-size: 5px;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .panel-label svg {
    width: 11px;
    height: 11px;
  }
  .minimap-bezel {
    padding: 2px;
    margin-top: 12px;
  }
  .minimap-bezel canvas {
    height: 92px;
  }
  .map-meta {
    font-size: 5px;
    letter-spacing: 0.7px;
    margin-top: 5px;
  }
  .build-panel {
    padding: 0 10px;
  }
  .category-tabs {
    height: 36px;
    gap: 16px;
  }
  .category-tabs > button {
    font-size: 10px;
    gap: 4px;
  }
  .category-tabs > button svg {
    height: 12px;
    width: 12px;
  }
  .category-tools {
    gap: 1px;
  }
  .category-tools svg {
    height: 13px;
    width: 13px;
  }
  .build-heading {
    margin: 8px 0 5px;
    font-size: 5px;
    letter-spacing: 1.4px;
  }
  .build-heading span:last-child {
    font-size: 6px;
  }
  .build-card {
    height: 95px;
    min-width: 78px;
    max-width: 120px;
  }
  .build-card img {
    height: 53px;
  }
  .build-card .card-title {
    font-size: 10px;
  }
  .build-cards {
    gap: 5px;
  }
  .recruitment-queue {
    margin-top: 3px;
    font-size: 7px;
  }
  .queue-counter {
    font-size: 5px;
  }
  .statusbar {
    padding: 0 10px;
    font-size: 7px;
  }
  .version {
    display: none;
  }
  .map-controls {
    right: 12px;
    bottom: 11px;
    padding: 3px;
    gap: 2px;
  }
  .map-controls button {
    height: 28px;
    width: 27px;
    min-width: 0;
  }
  .map-controls .compass {
    min-width: 58px;
  }
  .compass b {
    font-size: 16px;
  }
  .compass small {
    font-size: 5px;
    letter-spacing: 0.7px;
    max-width: 35px;
  }
  .map-controls .divider {
    margin: 0 4px;
    height: 19px;
  }
  .selection {
    width: 235px;
    left: 12px;
    bottom: 54px;
    padding: 10px 12px;
  }
  .selection h3 {
    font-size: 15px;
  }
  .selection p {
    font-size: 9px;
  }
  .selection-actions button {
    font-size: 8px;
    padding: 6px;
  }
  .selection-image {
    width: 44px;
    height: 47px;
  }
  .toast {
    bottom: 53px;
    font-size: 9px;
    padding: 8px 12px;
    max-width: 75%;
  }
  .pause-banner {
    padding: 16px 25px;
    font-size: 15px;
    white-space: nowrap;
  }
  .pause-banner small {
    font-size: 8px;
  }
  .tooltip {
    max-width: 220px;
  }
  .guide-grid {
    gap: 18px;
  }
  .guide-grid p {
    font-size: 10px;
  }
  .guide-grid h3 {
    font-size: 16px;
  }
}
@media (max-width: 470px) {
  #app {
    grid-template-rows: 50px minmax(0, 1fr) 167px 23px;
  }
  .topbar {
    padding: 0 7px;
  }
  .resource {
    padding: 0 6px;
    min-width: 46px;
    gap: 4px;
  }
  .resource i svg {
    width: 14px;
    height: 14px;
  }
  .resource b {
    font-size: 12px;
  }
  .brand-crest {
    font-size: 25px;
  }
  .brand b {
    font-size: 10px;
  }
  .brand b span {
    font-size: 8px;
  }
  .top-actions .icon-button {
    width: 24px;
  }
  .top-actions .speed-button {
    width: 22px;
  }
  .scenario {
    left: 13px;
    top: 14px;
    padding: 7px 11px 8px 10px;
  }
  .scenario .eyebrow {
    font-size: 5px;
    letter-spacing: 1px;
  }
  .scenario h1 {
    font-size: 18px;
  }
  .scenario p {
    max-width: 147px;
    font-size: 7px;
    line-height: 1.5;
  }
  .wave-panel {
    width: 162px;
    right: 9px;
    top: 12px;
    padding: 10px;
  }
  .wave-title h2 {
    font-size: 13px;
  }
  .wave-panel p {
    font-size: 6px;
    margin-bottom: 8px;
  }
  .wave-bottom {
    font-size: 6px;
    gap: 4px;
  }
  .wave-bottom b {
    font-size: 12px;
  }
  .wave-bottom button {
    padding: 5px 4px;
    font-size: 6px;
  }
  .wave-bottom button svg {
    display: none;
  }
  .wave-panel .eyebrow {
    font-size: 5px;
    letter-spacing: 1.4px;
  }
  .command-dock {
    grid-template-columns: 98px minmax(0, 1fr);
  }
  .map-frame {
    padding: 11px 7px 5px;
  }
  .panel-label {
    font-size: 4px;
    letter-spacing: 0.7px;
    line-height: 1.6;
  }
  .panel-label > i {
    display: none;
  }
  .minimap-bezel {
    margin-top: 18px;
    padding: 0;
  }
  .minimap-bezel canvas {
    height: 70px;
  }
  .map-north {
    font-size: 7px;
    top: 3px;
    right: 5px;
  }
  .map-meta {
    font-size: 4px;
    line-height: 1.8;
    letter-spacing: 0.3px;
  }
  .map-meta .status-dot {
    width: 3px;
    height: 3px;
  }
  .map-meta button svg {
    height: 10px;
    width: 10px;
  }
  .build-panel {
    padding: 0 8px;
  }
  .category-tabs {
    height: 34px;
    gap: 13px;
  }
  .category-tabs > button {
    font-size: 9px;
    gap: 0;
  }
  .category-tabs > button svg {
    display: none;
  }
  .category-tools {
    gap: 0;
  }
  .category-tools button {
    padding: 2px;
  }
  .category-tools button svg {
    width: 12px;
    height: 12px;
  }
  .build-heading span:last-child {
    display: none;
  }
  .build-heading {
    margin-top: 7px;
    margin-bottom: 5px;
  }
  .build-card {
    height: 88px;
    min-width: 74px;
    padding: 0 3px 6px;
  }
  .build-card img {
    height: 49px;
  }
  .build-card .card-title {
    font-size: 9px;
  }
  .card-cost {
    margin-top: 5px;
    font-size: 6px;
  }
  .card-cost svg {
    height: 9px;
    width: 9px;
  }
  .build-cards {
    gap: 4px;
  }
  .recruitment-queue {
    font-size: 6px;
  }
  .recruitment-queue .queue-counter {
    display: none;
  }
  .selection {
    bottom: 52px;
    width: 215px;
  }
  .selection p {
    font-size: 8px;
  }
  .selection-actions button {
    font-size: 7px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .modal {
    padding: 28px 24px;
    max-height: 90dvh;
    overflow-y: auto;
  }
  .guide-grid p {
    font-size: 10px;
  }
  .modal h2 {
    font-size: 25px;
  }
  .gate-rule {
    font-size: 10px;
  }
  .guide-shortcuts {
    font-size: 8px;
  }
  .map-controls {
    right: 9px;
    bottom: 9px;
  }
  .map-controls button {
    width: 25px;
  }
  .map-controls #center {
    display: none;
  }
  .map-controls .compass {
    min-width: 55px;
  }
  .map-controls #zoomLevel {
    min-width: 25px;
    font-size: 7px;
  }
  .toast {
    max-width: 85%;
    bottom: 55px;
    font-size: 8px;
  }
}
@media (max-height: 580px) and (orientation: landscape) {
  #app {
    grid-template-rows: 43px minmax(0, 1fr) 138px 21px;
  }
  .brand-crest {
    font-size: 28px;
  }
  .brand b {
    font-size: 14px;
  }
  .brand b span {
    font-size: 11px;
  }
  .brand small {
    display: none;
  }
  .resource b {
    font-size: 14px;
  }
  .resource small {
    display: none;
  }
  .resource i svg {
    width: 17px;
    height: 17px;
  }
  .scenario {
    top: 12px;
    padding: 7px 12px 8px 11px;
  }
  .scenario h1 {
    font-size: 20px;
    margin: 4px 0 0;
  }
  .scenario p {
    display: none;
  }
  .wave-panel {
    top: 11px;
    padding: 10px 12px;
    width: 224px;
  }
  .wave-panel p {
    display: none;
  }
  .wave-progress {
    margin-top: 7px;
  }
  .wave-bottom {
    margin-top: 6px;
  }
  .wave-title h2 {
    font-size: 15px;
  }
  .wave-panel .eyebrow {
    font-size: 6px;
  }
  .command-dock {
    grid-template-columns: 154px minmax(0, 1fr);
  }
  .council {
    display: none;
  }
  .map-frame {
    padding: 8px 10px;
  }
  .minimap-bezel canvas {
    height: 81px;
  }
  .panel-label {
    margin-bottom: 4px;
    font-size: 5px;
  }
  .map-meta {
    padding-top: 3px;
    font-size: 5px;
  }
  .category-tabs {
    height: 30px;
  }
  .category-tabs > button {
    font-size: 11px;
  }
  .build-heading {
    margin: 5px 0 3px;
  }
  .build-card {
    height: 76px;
    min-width: 79px;
  }
  .build-card img {
    height: 41px;
  }
  .build-card .card-title {
    font-size: 10px;
  }
  .card-cost {
    margin-top: 3px;
    font-size: 7px;
  }
  .recruitment-queue {
    display: none;
  }
  .map-controls {
    bottom: 8px;
  }
  .selection {
    width: 230px;
    bottom: 9px;
    padding: 8px 10px;
  }
  .selection p {
    font-size: 8px;
    margin: 4px 0;
  }
  .selection h3 {
    font-size: 14px;
  }
  .selection-image {
    height: 37px;
    width: 40px;
  }
  .selection-stats {
    margin: 4px 0;
  }
  .selection-actions button {
    padding: 4px;
    font-size: 7px;
  }
  .toast {
    bottom: 50px;
    font-size: 9px;
  }
}
.touch-commands {
  display: none;
}

.touch-commands button {
  padding: 8px 10px;
  min-height: 34px;
  border-right: 1px solid #a9905733;
  font: 9px var(--serif);
  color: #cebd94;
}
.touch-commands button:last-child {
  border: 0;
}
@media (max-width: 940px) {
  .touch-commands {
    position: absolute;
    display: flex;
    left: 22px;
    top: 120px;
    border: 1px solid #b69b6155;
  }
}
@media (max-width: 700px) {
  .touch-commands {
    left: 15px;
    top: 108px;
  }
  .touch-commands button {
    padding: 7px 9px;
    font-size: 8px;
    min-height: 31px;
  }
}
@media (max-width: 470px) {
  .touch-commands {
    left: 12px;
    top: 101px;
  }
  .touch-commands button {
    font-size: 8px;
    padding: 6px 8px;
    min-height: 30px;
  }
}
@media (max-height: 580px) and (orientation: landscape) {
  .touch-commands {
    top: 75px;
    left: 20px;
  }
  .touch-commands button {
    padding: 5px 8px;
    min-height: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 470px) {
  .build-card .card-title {
    font-size: 10px;
  }
  .card-cost {
    font-size: 8px;
  }
  .card-cost svg {
    width: 10px;
    height: 10px;
  }
  .category-tabs > button {
    font-size: 10px;
  }
  .map-frame .panel-label span {
    font-size: 0;
  }
  .map-frame .panel-label span::after {
    content: 'OASIS';
    font-size: 8px;
    letter-spacing: 1.8px;
  }
}