/* Material surfaces stay quiet enough to keep prices and commands readable. */
.wood {
  background-color: #29271f;
  background-image: linear-gradient(#20251de0, #28261ed9), var(--wood-grain);
  background-size:
    auto,
    384px 384px;
}
.parchment {
  background-color: #e8d6ac;
  background-image: linear-gradient(#f1e2bfa8, #e8d5aaa8), var(--paper-grain);
  background-size:
    auto,
    384px 384px;
}
.category-tabs {
  background-image: linear-gradient(#302d247d, #25271e8c), var(--wood-grain);
  background-size: auto, 384px;
}
.category-tabs b {
  font-weight: normal;
}
.category-short {
  display: none;
}
.build-card {
  background: linear-gradient(#25291fc9, #373326da), var(--stone-grain);
  background-size: auto, 280px;
  color: #eee0b7;
  border-color: #9d8a5c;
  box-shadow: inset 0 0 0 2px #f7e9c12b;
}
.build-card:hover:not(:disabled),
.build-card.active {
  background-color: #e5d5ad;
  outline: 2px solid #ba934a;
  outline-offset: -3px;
}
.build-card .card-title,
.build-card .card-cost,
.build-card .card-role {
  color: #eee0b7;
  text-shadow: 0 1px #0008;
}
.build-card .card-role {
  opacity: 0.8;
}
.build-card:disabled {
  opacity: 0.62;
}
.build-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 132px;
  max-height: 140px;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
}
.build-card,
.build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
  height: 132px;
}
.garrison-roster,
.workshop-production,
.crew-status {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #be9e6255;
}
.garrison-capacity {
  font: 14px/1.4 var(--sans);
  color: #edd8a8;
  margin-bottom: 7px;
}
.garrison-capacity strong {
  font: 20px var(--serif);
  margin-right: 5px;
}
.garrison-roster small,
.workshop-production > small {
  display: block;
  font: 12px/1.45 var(--sans);
  color: #d0c19b;
  margin-top: 7px;
}
.roster-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.roster-types button {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  min-width: 55px;
  padding: 4px 8px;
  border: 1px solid #b59a6080;
  background: #d4bb7530;
  font: 13px var(--sans);
}
.roster-types img {
  width: 24px;
  height: 30px;
  object-fit: contain;
}
.roster-types strong {
  font-size: 16px;
  color: #f7e6b6;
}
.workshop-production > button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  text-align: left;
  border: 1px solid #b299665e;
  padding: 5px 8px;
  margin-bottom: 5px;
  background: #d3bc7820;
}
.workshop-production > button > img {
  width: 34px;
  height: 40px;
  object-fit: contain;
}
.workshop-production strong {
  display: block;
  font: 16px var(--serif);
}
.workshop-production button small {
  display: block;
  font: 11px var(--sans);
  color: #cbbd9a;
  margin-top: 3px;
}
.production-cost {
  margin-left: auto;
  white-space: nowrap;
  font: 12px var(--sans);
}
.production-cost svg {
  vertical-align: middle;
  margin-left: 3px;
}
.crew-status {
  font: 13px/1.5 var(--sans);
}
.crew-status button {
  display: block;
  min-height: 44px;
  border: 1px solid #bd9d5f;
  padding: 5px 12px;
  margin-top: 6px;
}

@media (max-width: 900px), (pointer: coarse), (max-height: 600px) and (orientation: landscape) {
  .build-panel {
    display: flex;
    flex-direction: column;
    max-height: min(56dvh, 342px);
    padding: 0 7px 7px;
    background-image: linear-gradient(#20251de0, #25251bde), var(--wood-grain);
    background-size: auto, 384px;
  }
  .category-tabs {
    flex: 0 0 44px;
    height: 44px;
  }
  .category-tabs > button {
    font-size: 15px;
    min-height: 44px;
  }
  .build-heading {
    display: none !important;
  }
  .build-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 96px;
    gap: 6px;
    height: 198px;
    min-height: 0;
    max-height: 198px;
    flex: 0 1 198px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 3px 0 0;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }
  .build-card,
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    height: 96px;
    width: auto;
    min-height: 44px;
    padding: 3px 3px 4px;
    display: grid;
    grid-template-rows: 38px minmax(28px, 1fr) 18px;
    gap: 0;
    align-items: center;
    scroll-snap-align: start;
  }
  .build-card img,
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
    width: 100%;
    height: 38px;
    padding: 0;
    object-fit: contain;
  }
  .build-card .card-title {
    font: 14px/1.06 var(--serif);
    min-height: 0;
    padding: 0;
    width: 100%;
  }
  .build-card .card-cost {
    font: 12px/1 var(--sans);
    min-height: 0;
    height: 18px;
    margin: 0;
    gap: 3px;
    justify-content: center;
  }
  .build-card .card-cost span {
    display: inline-flex;
    gap: 2px;
    align-items: center;
  }
  .build-card .card-cost svg {
    width: 11px;
    height: 11px;
  }
  .build-card .card-role {
    display: none;
  }
  .army-shortcuts {
    flex: 0 0 48px;
    padding: 2px 0;
    gap: 4px;
  }
  .army-shortcuts button {
    min-height: 44px;
  }
  .recruitment-queue {
    min-height: 16px;
    flex-shrink: 0;
  }
  .build-panel .dock-caption {
    display: none;
  }
  .selection {
    max-height: min(52dvh, 460px);
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .garrison-roster,
  .workshop-production,
  .crew-status {
    margin-top: 7px;
    padding-top: 7px;
  }
  .garrison-roster small {
    font-size: 12px;
  }
  .roster-types button span {
    max-width: 110px;
  }
  .selection:has(.workshop-production) {
    width: min(380px, calc(100vw - 16px));
  }
  .selection:has(.workshop-production):not(.details-open) > .selection-actions {
    display: none;
  }
  .selection:has(.garrison-roster):not(.details-open) [data-action='salvage'] {
    display: none;
  }
  .plan-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
  }
  .plan-bar > div:first-child {
    min-width: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
  }
  #planCost {
    margin: 0;
  }
  #planReason {
    grid-column: 1 / -1;
  }
  .plan-bar .plan-rotation {
    grid-column: 1;
  }
  .plan-bar button {
    padding: 8px;
    min-height: 44px;
  }
  .plan-bar .plan-rotation button {
    font-size: 13px;
  }
  #planReason {
    font-size: 12px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .build-panel {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: calc(86px + env(safe-area-inset-right, 0px));
    bottom: 8px;
    width: auto;
    max-width: 850px;
    max-height: calc(100dvh - 64px);
  }
  .build-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: 100px;
    max-height: 100px;
    flex-basis: 100px;
  }
  .build-card .card-title {
    font-size: 13px;
  }
  .build-card .card-cost {
    font-size: 11px;
  }
  .selection {
    max-height: calc(100dvh - 70px);
    left: max(8px, env(safe-area-inset-left, 0px));
    max-width: calc(
      100vw - 104px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    );
  }
  .selection:has(.workshop-production) {
    width: min(370px, calc(100vw - 104px));
  }
  .selection:has(.garrison-roster) {
    width: min(400px, calc(100vw - 104px));
    right: auto;
  }
  .plan-bar {
    bottom: 8px;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: calc(86px + env(safe-area-inset-right, 0px));
    width: auto;
    max-width: 510px;
    transform: none;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .plan-bar > div:first-child {
    grid-column: 1 / -1;
  }
  .plan-bar .plan-rotation {
    grid-column: auto;
    grid-row: 2;
  }
  #confirmPlan,
  #cancelPlan {
    grid-row: 2;
  }
  .wave-panel,
  .tutorial-card,
  .pause-banner {
    left: max(8px, env(safe-area-inset-left, 0px));
  }
}
@media (orientation: landscape) and (max-width: 650px) {
  .build-panel {
    max-width: 470px;
  }
  .build-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 78px;
    height: 162px;
    max-height: 162px;
    flex-basis: 162px;
  }
  .build-card,
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    height: 78px;
    grid-template-rows: 25px minmax(28px, 1fr) 16px;
  }
  .build-card img,
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
    height: 25px;
  }
  .army-shortcuts {
    display: none;
  }
}
@media (max-width: 360px) {
  .category-name {
    display: none;
  }
  .category-short {
    display: inline;
  }
  .build-card,
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    grid-template-rows: 26px 28px 30px;
  }
  .build-card img,
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
    height: 26px;
  }
  .build-card .card-cost {
    height: 30px;
    flex-wrap: wrap;
    gap: 2px 4px;
    align-content: center;
  }
}

/* Barracks training and research (upgrades.js): endless levels, rising prices. */
.barracks-train,
.research-list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #be9e6255;
}
.train-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 5px;
}
.train-grid button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 4px 7px;
  text-align: left;
  border: 1px solid #b299665e;
  background: #d3bc7820;
  font: 13px var(--sans);
}
.train-grid img {
  width: 28px;
  height: 34px;
  object-fit: contain;
  flex: none;
}
.train-grid span:not(.production-cost) {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.train-grid em {
  margin-left: 4px;
  font-style: normal;
  font-size: 11px;
  color: #f2cf6e;
}
.train-grid .production-cost {
  font-size: 11px;
}
.research-list > button {
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  text-align: left;
  border: 1px solid #b299665e;
  padding: 5px 8px;
  margin-bottom: 5px;
  background: #d3bc7820;
}
.research-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #f2dfae;
  background: #3a2c1a;
  box-shadow: 0 0 0 1px #b2996680;
}
.research-list strong {
  display: block;
  font: 15px var(--serif);
}
.research-list small {
  display: block;
  margin-top: 2px;
  font: 11px var(--sans);
  color: #cbbd9a;
}
.production-cost .short {
  color: #e38f72;
}
.train-grid button:disabled,
.research-list > button:disabled {
  opacity: 0.55;
}
.selection:has(.barracks-train),
.selection:has(.research-list) {
  width: min(420px, calc(100vw - 16px));
  /* Never taller than the battlefield, and clear of the order bar beneath it. */
  bottom: 64px;
  max-height: calc(100% - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* An open selection panel sits above the hero portraits, which step aside. */
.selection {
  z-index: 6;
}
body:has(.selection:not(.hidden) .barracks-train) .hero-strip,
body:has(.selection:not(.hidden) .research-list) .hero-strip {
  visibility: hidden;
}

/* ——— Phones ——— */
.touch-turn {
  display: none;
}
@media (max-width: 900px), (pointer: coarse), (max-height: 600px) and (orientation: landscape) {
  /* One-tap view turning, bottom right of the battlefield. */
  .touch-turn {
    display: flex;
    gap: 6px;
    position: absolute;
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: 10px;
    z-index: 17;
  }
  .touch-turn button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #f2dfae;
    background: radial-gradient(circle at 50% 35%, #4a3a24, #2a2116 75%);
    border: 1px solid #b89e5f99;
    box-shadow: 0 2px 8px #0006;
  }
  .touch-turn button:active {
    transform: scale(0.94);
  }
  body.in-tutorial .touch-turn,
  body:has(.selection:not(.hidden)) .touch-turn,
  body:has(#mobileBuild[aria-expanded='true']) .touch-turn,
  body:has(#mobileArmy[aria-expanded='true']) .touch-turn,
  body:has(#mobileMap[aria-expanded='true']) .touch-turn {
    display: none;
  }
}
/* Portrait phones: big panels are a bottom sheet, the battlefield stays visible. */
@media ((max-width: 900px) or (pointer: coarse)) and (orientation: portrait) {
  .selection:has(.barracks-train),
  .selection:has(.research-list) {
    top: auto;
    bottom: 8px;
    max-height: 58%;
    width: auto;
    left: 8px;
    right: 8px;
    max-width: none;
  }
  .train-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Landscape phones: the turn buttons sit beside the command rail. */
@media (max-height: 600px) and (orientation: landscape) {
  .touch-turn {
    right: calc(84px + env(safe-area-inset-right, 0px));
  }
}
/* Short landscape windows (also on desktop) use the command rail on the right;
   it needs its own fixed position there, not only in the phone layout. */
@media (max-height: 600px) and (orientation: landscape) {
  .mobile-nav {
    position: fixed;
    z-index: 45;
  }
}