/* The desktop dock stays available; touch devices reveal commands on demand. */
#app {
  grid-template-rows: 64px minmax(0, 1fr) 242px 24px;
}
#toggleCatalog,
.mobile-nav,
.gesture-guide,
.placement-bar {
  display: none;
}
.parchment button:hover:not(:disabled) {
  color: #2d453b;
  background: #e9dab5;
}
.parchment button.primary:hover:not(:disabled) {
  color: #fff6d8;
  background: #35594e;
}
.interaction-bar {
  position: absolute;
  z-index: 14;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  padding: 5px;
  gap: 3px;
  border: 1px solid #b99a5655;
  box-shadow: 0 4px 18px #201a2340;
}
.interaction-bar button {
  min-height: 40px;
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid transparent;
}
.interaction-bar button.active {
  background: #bba06124;
  border-color: #c1a76c77;
  color: #f6e6b8;
}
.interaction-bar button:disabled {
  opacity: 0.4;
}
#modeHint {
  max-width: 170px;
  padding: 0 12px;
  color: #c8b991;
  font-size: 11px;
}
#toggleMinimap {
  display: none;
}
.plan-bar {
  position: absolute;
  bottom: 77px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #a88d55;
  box-shadow: 0 5px 26px #1e1b2366;
}
.plan-bar > div {
  min-width: 170px;
}
.plan-bar strong {
  display: block;
  font: 18px var(--serif);
}
#planCost {
  display: flex;
  gap: 10px;
  margin: 5px 0;
  font-size: 13px;
  flex-wrap: wrap;
}
#planCost span {
  white-space: nowrap;
}
#planReason {
  display: block;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.4;
}
.plan-bar button {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  color: #453a25;
  border: 1px solid #9b8153;
  background: #f3e5c2;
  white-space: nowrap;
}
.plan-bar .primary {
  color: #fff5d1;
  background: #40645a;
  border-color: #40645a;
}
.plan-bar button:disabled {
  opacity: 0.45;
}
.plan-rotation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0 !important;
}
.plan-rotation strong {
  font: 14px var(--sans);
  min-width: 35px;
  text-align: center;
}
.plan-rotation button {
  padding: 8px;
}
.build-cards {
  display: flex;
  overflow-x: auto;
  gap: 7px;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: #8d7951 #26251d;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.build-card {
  flex: 0 0 118px;
  min-width: 0;
  height: 139px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.build-card img {
  flex-shrink: 0;
}
.build-card .unit-card-image {
  padding: 0;
}
.build-card .card-title {
  flex: 1;
  width: 100%;
}
.build-card .card-cost {
  margin-top: auto;
  flex-shrink: 0;
  min-height: 17px;
}
.build-card .card-title {
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
}
.card-role {
  display: block;
  color: #b8b295;
  font: 10px/1.3 var(--sans);
  padding: 4px 2px 0;
}
.card-cost {
  font-size: 11px;
}
.army-shortcuts {
  display: none;
  gap: 6px;
  padding: 0 0 5px;
}
.army-shortcuts button {
  min-height: 32px;
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid #a48c4e55;
}
.build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
  height: 139px;
}
.build-panel:has(.army-shortcuts:not(.hidden)) .build-heading {
  display: none;
}
.build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
  height: 51px;
}
.selection-navigation {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.selection-types {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior: contain;
  scrollbar-width: none;
  margin-top: 8px;
  padding-bottom: 2px;
}
.selection-types button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid #a58c5659;
  font: 13px var(--sans);
  white-space: nowrap;
}
.selection-types button[aria-pressed='true'] {
  border-color: #ddc37e;
  background: #bfa35f2e;
  color: #fff1bb;
}
.selection-types img {
  width: 26px;
  height: 32px;
  object-fit: contain;
}
.selection-types strong {
  font-size: 15px;
  color: #f5deb0;
}
.selection-mode-help {
  color: #d2c39b;
  font-size: 12px;
  margin: 8px 2px 0;
}
.selection-done {
  min-width: 60px;
  min-height: 44px;
  border: 1px solid #c0a369;
  background: #46635399;
  padding: 6px 10px;
  font: 14px var(--sans);
}
body.area-selecting .selection-actions {
  display: none;
}
body.box-dragging .selection {
  visibility: hidden;
  pointer-events: none;
}
.selection-navigation button {
  flex: 1;
  border: 1px solid #b39b6560;
  min-height: 36px;
  font-size: 12px;
}
.selection-details,
.selection-close {
  display: none;
}
.balance-guide {
  margin: 18px 0;
  border-top: 1px solid #9b845747;
  padding-top: 12px;
}
.balance-guide h3 {
  font: 20px var(--serif);
}
.balance-guide p {
  font-size: 14px;
  line-height: 1.6;
}
#applySettings {
  min-height: 44px;
  padding: 8px 16px;
  margin: 8px 0 20px;
  border: 1px solid #8d7951;
}

/* The main menu uses a slowly drifting, animated fortress rendered by the game. */
body.at-home #app {
  display: block;
  padding: 0;
}
body.at-home .topbar,
body.at-home .command-dock,
body.at-home .statusbar,
body.at-home .mobile-nav {
  display: none;
}
body.at-home #battlefield {
  position: absolute;
  inset: 0;
}
body.at-home #battlefield > :not(canvas):not(#loading) {
  display: none !important;
}
body.at-home #loading {
  position: fixed;
  z-index: 100;
}
.home-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px 7vw;
  background:
    linear-gradient(90deg, #191e1beb, #23281b91 32%, #312b1b12 75%),
    linear-gradient(0deg, #242417b0, transparent 45%);
}
.home-title,
.home-actions,
.home-caption {
  position: relative;
  z-index: 1;
}
.home-title {
  color: #f6e7bf;
  text-shadow: 0 2px 14px #1118;
}
.home-title .brand-crest {
  float: left;
  margin: 15px 14px 0 0;
  font-size: 65px;
}
.home-title .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  color: #dfc18b;
}
.home-title h1 {
  margin: 0;
  font: 52px/0.92 var(--serif);
  text-transform: uppercase;
  letter-spacing: 4px;
}
.home-title h1 span {
  display: block;
  font-size: 39px;
  letter-spacing: 7px;
  margin-top: 10px;
}
.home-title p {
  font: italic 18px var(--serif);
  color: #e3cfaa;
  margin: 18px 0 26px;
}
.home-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 330px;
  max-width: 100%;
  padding: 18px;
  border: 1px solid #b5a06b80;
  box-shadow: 0 12px 36px #10170e44;
}
.home-actions > .eyebrow {
  color: #baac85;
  font-size: 10px;
  margin: 0 0 5px;
}
.home-actions button {
  min-height: 48px;
  font: 18px var(--serif);
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #baa4714d;
  background: #d9c18e09;
  color: #f0dfb7;
}
.home-actions button.primary {
  background: #345c50;
  border-color: #92ae8b80;
}
.home-actions button span {
  float: right;
  font-size: 21px;
}
.home-actions small {
  display: block;
  margin-top: 5px;
  font: 12px var(--sans);
  color: #c5bea1;
}
.home-actions #homeSettings {
  font: 14px var(--sans);
  min-height: 44px;
  color: #c9ba93;
}
.home-actions .build-version {
  text-align: center;
  font-size: 11px;
  color: #c5bea1;
}
.home-caption {
  position: absolute;
  right: 30px;
  bottom: 24px;
  color: #f5e1b2;
  font-size: 11px;
  letter-spacing: 4px;
  text-shadow: 0 2px 6px #111;
}
.home-haze {
  position: absolute;
  pointer-events: none;
  inset: -20%;
  opacity: 0.2;
  background:
    radial-gradient(ellipse at 80% 45%, #ffdc8b66, transparent 50%),
    repeating-linear-gradient(115deg, transparent 0 200px, #eecf8d18 240px, transparent 350px);
  animation: desert-haze 24s ease-in-out infinite alternate;
}
@keyframes desert-haze {
  to {
    transform: translate3d(4%, -2%, 0);
    opacity: 0.4;
  }
}

.tutorial-card {
  position: absolute;
  z-index: 21;
  left: 16px;
  top: 16px;
  width: 365px;
  max-width: calc(100% - 32px);
  padding: 12px 16px 15px;
}
.lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}
.lesson-header .eyebrow {
  font-size: 10px;
  color: #706043;
}
.lesson-header button {
  min-width: 44px;
  min-height: 44px;
  font-size: 25px;
  margin-right: -10px;
}
.lesson-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lesson-tools button {
  margin-right: 0;
}
.tutorial-card.lesson-compact p {
  display: none;
}
.tutorial-card h2 {
  font: 23px var(--serif);
  margin: 8px 0;
}
.tutorial-card p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.lesson-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lesson-footer > span {
  font-size: 12px;
  line-height: 1.35;
  color: #68583e;
}
.lesson-footer button {
  min-height: 44px;
  min-width: 80px;
  padding: 8px 14px;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid #426153;
  background: #3e6256;
  color: #fff3ce;
}
.lesson-footer button:disabled {
  opacity: 0.4;
}
body.in-tutorial .scenario,
.tutorial-hidden {
  display: none !important;
}

@media (max-width: 900px), (pointer: coarse), (max-height: 600px) and (orientation: landscape) {
  :root {
    --nav-height: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  button,
  select {
    touch-action: manipulation;
  }
  #app,
  body.catalog-collapsed #app,
  body:has(#planBar:not(.hidden)) #app {
    grid-template-rows: calc(76px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) 0 0;
    padding-bottom: var(--nav-height);
  }
  .topbar {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 8px 0;
    gap: 0;
    border-bottom-width: 1px;
  }
  .topbar:after {
    display: none;
  }
  .brand {
    height: 44px;
    min-width: 0;
    padding: 0;
    gap: 6px;
  }
  .brand-crest {
    font-size: 26px;
  }
  .brand b {
    font-size: 16px;
    letter-spacing: 1px;
  }
  .brand b span {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .brand small {
    display: none;
  }
  .top-actions {
    height: 44px;
    gap: 0;
    margin: 0;
  }
  .top-actions .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 10px;
  }
  .top-actions #speed,
  .top-actions .divider {
    display: none;
  }
  .resources {
    position: absolute;
    top: calc(44px + env(safe-area-inset-top, 0px));
    left: 4px;
    right: 4px;
    width: auto;
    max-width: none;
    height: 30px;
    justify-content: space-between;
    gap: 0;
  }
  .resources .resource {
    display: flex;
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    gap: 5px;
    border-color: #c4a46324;
  }
  .resource i,
  .resources .population {
    display: flex;
  }
  .resource i svg {
    width: 16px;
    height: 16px;
  }
  .resources .resource small {
    display: none;
  }
  .resources .resource b {
    font: 600 14px var(--sans);
    white-space: nowrap;
  }
  .population b em {
    font-size: 11px;
    font-weight: normal;
  }
  .scenario,
  .council,
  .statusbar,
  .interaction-bar,
  .map-controls,
  .map-frame {
    display: none;
  }
  .wave-panel {
    top: 8px;
    left: 8px;
    right: auto;
    width: auto;
    min-width: 220px;
    max-width: calc(100% - 16px);
    height: 48px;
    padding: 2px 5px 2px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow:
      0 2px 10px #44301633,
      inset 0 0 0 2px #e6d6af;
  }
  .wave-panel .eyebrow {
    font-size: 11px;
    letter-spacing: 0.4px;
    white-space: nowrap;
  }
  .wave-panel .eyebrow span {
    margin: 0 2px;
  }
  .wave-panel .wave-title,
  .wave-panel p,
  .wave-progress {
    display: none;
  }
  .wave-bottom {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 12px;
    font-size: 0;
  }
  #waveTime {
    font-size: 0;
    display: block;
    white-space: nowrap;
  }
  #waveTime > span {
    display: none;
  }
  #waveTime b {
    display: block;
    margin: 0;
    font: 18px var(--serif);
  }
  #callWave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 48px;
    width: 48px;
    height: 44px;
    padding: 0 6px;
    margin: 0;
    font-size: 0;
    border: 1px solid #9d865b66;
  }
  #callWave i,
  #callWave svg {
    display: inline-block;
    width: 21px;
    height: 21px;
  }
  .horn-label {
    display: none;
  }
  .pause-banner {
    top: 64px;
    left: 8px;
    transform: none;
    padding: 6px 12px;
    font: 12px var(--sans);
    letter-spacing: 1px;
    background: #272b22dc;
    border: 1px solid #c2aa6a88;
    box-shadow: none;
  }
  .pause-banner > span {
    font-size: 13px;
    margin-right: 6px;
  }
  .pause-banner small {
    display: none;
  }
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    z-index: 45;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--nav-height);
    padding: 3px 8px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #b89e5f99;
    box-shadow: 0 -3px 15px #27271c40;
  }
  .mobile-nav button {
    min-width: 44px;
    min-height: 52px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 13px;
    color: #e6d7b3;
  }
  .mobile-nav button svg {
    width: 20px;
    height: 20px;
  }
  .mobile-nav button[aria-expanded='true'],
  .mobile-nav button[aria-pressed='true'],
  .mobile-nav button.active {
    background: #bba06120;
    box-shadow: inset 0 2px #c9ae6d;
    color: #fff0c0;
  }
  .command-dock {
    display: contents;
    border: 0;
  }
  .command-dock::before,
  .command-dock::after {
    display: none;
  }
  body.map-exploring #planBar {
    display: none;
  }
  .build-panel {
    position: fixed;
    z-index: 40;
    left: 8px;
    right: 8px;
    bottom: calc(var(--nav-height) + 8px);
    min-width: 0;
    padding: 0 8px 8px;
    background: var(--wood);
    border: 1px solid #b19a63;
    box-shadow: 0 8px 30px #141b1466;
  }
  body.catalog-collapsed .build-panel {
    display: none;
  }
  .category-tabs {
    gap: 2px;
    height: 48px;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid #a2834655;
    touch-action: none;
  }
  .category-tabs > button {
    flex: 1;
    padding: 0 3px;
    min-width: 44px;
    min-height: 44px;
    font: 14px var(--serif);
    white-space: nowrap;
  }
  .category-tabs > button i,
  .category-tabs > button > span {
    display: none;
  }
  .category-tools {
    margin-left: auto;
    gap: 0;
    flex-shrink: 0;
  }
  .category-tools button {
    display: none;
  }
  #toggleCatalog {
    display: block;
    font-size: 24px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 5px;
  }
  .build-heading {
    margin: 7px 0 4px;
    font-size: 10px;
    min-height: 16px;
  }
  .build-heading span:last-child {
    display: none;
  }
  .build-cards {
    gap: 8px;
    padding-bottom: 5px;
    margin: 0;
    visibility: visible !important;
  }
  .build-card {
    flex: 0 0 124px;
    height: 154px;
    padding: 3px 6px 6px;
  }
  .build-card img {
    height: 77px;
  }
  .build-card .card-title {
    font: 15px/1.15 var(--serif);
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-cost {
    font-size: 13px;
    margin-top: 4px;
  }
  .card-cost svg {
    width: 13px;
    height: 13px;
  }
  .card-key {
    display: none;
  }
  .card-role {
    font-size: 12px;
    padding: 2px 0;
    min-height: 32px;
  }
  .army-shortcuts {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    gap: 5px;
    padding: 7px 0;
  }
  .army-shortcuts button {
    flex: 1;
    min-width: 44px;
    min-height: 44px;
    font-size: 13px;
    padding: 4px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .category-tabs {
    padding-right: 0;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    height: 164px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
    height: 52px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-heading {
    display: none;
  }
  .recruitment-queue {
    min-height: 18px;
    margin-top: 4px;
    font-size: 11px;
  }
  .recruitment-queue:has(.queue-counter:only-child),
  .recruitment-queue > span:first-child:not(.queue-items) {
    display: none;
  }
  .recruitment-queue:not(:has(.queue-items)) {
    display: none;
  }
  .queue-counter {
    font-size: 10px;
  }
  .map-frame.map-open {
    display: block;
    position: fixed;
    z-index: 38;
    left: 8px;
    bottom: calc(var(--nav-height) + 64px);
    width: 264px;
    padding: 12px;
    background: var(--wood);
    border: 1px solid #b79c62;
    box-shadow: 0 4px 28px #0006;
  }
  .map-frame .panel-label {
    font-size: 10px;
  }
  .map-frame .minimap-bezel {
    margin-top: 8px;
  }
  .map-frame .minimap-bezel canvas {
    height: 128px;
  }
  .map-frame .map-meta {
    font-size: 10px;
    height: 44px;
  }
  .map-frame .map-meta button {
    min-width: 44px;
    min-height: 44px;
  }
  .gesture-guide {
    display: block;
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #c5b995;
  }
  .map-controls.view-open {
    display: flex;
    position: fixed;
    z-index: 39;
    bottom: calc(var(--nav-height) + 8px);
    left: 8px;
    right: auto;
    padding: 2px;
    width: 342px;
    max-width: calc(100% - 16px);
    height: 48px;
    justify-content: space-between;
  }
  .map-controls button {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 10px;
    font-size: 21px;
  }
  .map-controls .compass {
    min-width: 35px;
    width: 35px;
  }
  .map-controls .compass b {
    font-size: 20px;
  }
  .map-controls .compass small,
  .map-controls .divider,
  #zoomLevel {
    display: none;
  }
  .map-controls #center {
    display: block;
  }
  .selection {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    transform: none;
    width: auto;
    max-width: 420px;
    max-height: calc(100% - 72px);
    padding: 8px;
    overflow: auto;
    z-index: 18;
  }
  .selection-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    min-height: 44px;
  }
  .selection-head > div {
    flex: 1;
    min-width: 0;
  }
  .selection .selection-image {
    width: 36px;
    height: 42px;
    padding: 0;
  }
  .selection h3 {
    font: 17px/1.1 var(--serif);
    margin: 0 0 5px;
  }
  .selection .eyebrow,
  .selection > p,
  .selection-stats,
  .selection-navigation {
    display: none;
  }
  .selection .health-meter {
    margin: 0;
  }
  .selection-details,
  .selection-close {
    display: block;
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    font: 23px var(--serif);
  }
  .selection-details {
    font-size: 21px;
  }
  .selection-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    margin-top: 6px;
    scrollbar-width: none;
  }
  .selection-actions:empty {
    display: none;
  }
  .selection:has(.selection-types):not(.details-open) .selection-actions {
    display: none;
  }
  .selection-actions button {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .selection.details-open > p {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    margin: 10px 0;
  }
  .selection.details-open .selection-stats {
    display: flex;
    font-size: 11px;
  }
  body:not(.catalog-collapsed) .selection {
    display: none;
  }
  .placement-bar {
    display: flex;
    position: absolute;
    z-index: 18;
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: 420px;
    align-items: center;
    padding: 6px;
    gap: 2px;
    border: 1px solid #baa06b;
    box-shadow: 0 4px 18px #1d251b55;
  }
  .placement-bar > div {
    flex: 1;
    min-width: 0;
    padding-left: 6px;
  }
  .placement-bar strong {
    display: block;
    font: 16px var(--serif);
  }
  .placement-bar small {
    display: block;
    font: 12px/1.3 var(--sans);
    color: #bdb393;
  }
  .placement-bar button {
    min-width: 44px;
    min-height: 44px;
    font-size: 26px;
    border-left: 1px solid #b6a06633;
  }
  .plan-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    transform: none;
    width: auto;
    max-width: 420px;
    height: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .plan-bar > div {
    grid-column: 1/-1;
    min-width: 0;
  }
  .plan-bar strong {
    font-size: 17px;
  }
  #planCost {
    font-size: 12px;
    gap: 8px;
    margin: 3px 0;
  }
  #planReason {
    font-size: 12px;
    max-width: none;
  }
  .plan-bar button {
    min-height: 44px;
    padding: 7px 10px;
    font-size: 15px;
  }
  .plan-rotation {
    height: 44px;
  }
  .plan-rotation strong {
    font-size: 14px;
  }
  .tooltip {
    display: none !important;
  }
  .toast {
    top: 66px;
    bottom: auto;
    padding: 9px 12px;
    max-width: calc(100% - 24px);
    font-size: 13px;
    pointer-events: none;
  }
  .modal {
    width: min(560px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    padding: 28px 22px;
    overflow-y: auto;
  }
  .modal .modal-close {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  .modal p,
  .guide-grid p,
  .gate-rule,
  .menu-note {
    font-size: 15px;
    line-height: 1.55;
  }
  .modal .eyebrow,
  .modal label {
    font-size: 12px;
  }
  .modal button,
  .modal select {
    min-height: 48px;
    font-size: 16px;
  }
  .modal select {
    max-width: 100%;
  }
  .modal h2 {
    font-size: 28px;
  }
  .guide-shortcuts {
    display: none;
  }
  body.in-tutorial .wave-panel {
    display: none;
  }
  body.in-tutorial .toast {
    display: none;
  }
  .tutorial-card {
    left: 8px;
    right: 8px;
    top: 8px;
    width: auto;
    max-width: 420px;
    padding: 8px 12px 12px;
  }
  .lesson-header {
    height: 26px;
  }
  .tutorial-card h2 {
    font-size: 21px;
    margin: 6px 0 8px;
  }
  .tutorial-card p {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .lesson-footer {
    gap: 8px;
  }
  .lesson-footer button {
    font-size: 14px;
    min-height: 44px;
  }
  .lesson-footer > span {
    font-size: 12px;
  }
  body.in-tutorial .pause-banner {
    top: auto;
    bottom: 132px;
  }
  .home-screen {
    padding: max(24px, env(safe-area-inset-top, 0px)) 24px
      max(24px, env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
    align-items: stretch;
    background: linear-gradient(180deg, #20291cbd, transparent 38%, #18251bd1 78%);
  }
  .home-title {
    text-align: center;
  }
  .home-title .brand-crest {
    float: none;
    margin: 0 0 12px;
    font-size: 42px;
  }
  .home-title .eyebrow {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .home-title h1 {
    font-size: 36px;
    letter-spacing: 3px;
  }
  .home-title h1 span {
    display: inline;
    font-size: 30px;
    letter-spacing: 3px;
  }
  .home-title p {
    font-size: 16px;
    margin: 12px 0;
  }
  .home-actions {
    width: 100%;
    max-width: 400px;
    align-self: center;
    padding: 12px;
    gap: 7px;
  }
  .home-actions button {
    min-height: 48px;
    font-size: 18px;
    padding: 10px 12px;
  }
  .home-caption {
    display: none;
  }
}

@media (max-width: 900px), (pointer: coarse), (max-height: 600px) and (orientation: landscape) {
  .tutorial-card.lesson-compact {
    padding: 0 8px;
    height: 48px;
  }
  .tutorial-card.lesson-compact .lesson-header {
    height: 46px;
  }
  .tutorial-card.lesson-compact h2,
  .tutorial-card.lesson-compact #lessonHint {
    display: none;
  }
  .tutorial-card.lesson-compact .lesson-footer {
    position: absolute;
    right: 98px;
    top: 1px;
    margin: 0;
    display: block;
  }
  .tutorial-card.lesson-compact #lessonNext {
    width: 116px;
    max-width: 116px;
    height: 44px;
    min-height: 44px;
    padding: 4px 8px;
    font-size: 13px;
    white-space: normal;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  #app,
  body.catalog-collapsed #app,
  body:has(#planBar:not(.hidden)) #app {
    grid-template-rows: 48px minmax(0, 1fr) 0 0;
    padding-bottom: 0;
  }
  .topbar {
    padding-top: 0;
    flex-wrap: nowrap;
    align-items: center;
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    gap: 8px;
  }
  .brand {
    min-width: 140px;
  }
  .resources {
    position: static;
    height: 44px;
    flex: 1;
    max-width: 520px;
  }
  .resources .resource {
    padding: 0 6px;
  }
  .resources .resource b {
    font-size: 14px;
  }
  .mobile-nav {
    left: auto;
    right: max(8px, env(safe-area-inset-right, 0px));
    top: calc(50% + 20px);
    bottom: auto;
    transform: translateY(-50%);
    width: 64px;
    height: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    border: 1px solid #b89e5f99;
  }
  .mobile-nav button {
    min-height: 52px;
    font-size: 12px;
  }
  .build-panel {
    left: auto;
    right: calc(80px + env(safe-area-inset-right, 0px));
    width: min(420px, calc(100% - 96px));
    bottom: 8px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }
  .build-heading {
    display: none;
  }
  .build-card {
    height: 142px;
  }
  .build-card img {
    height: 64px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    height: 164px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
    height: 52px;
  }
  .map-frame.map-open {
    bottom: 64px;
    left: auto;
    right: calc(80px + env(safe-area-inset-right, 0px));
    width: 264px;
    max-height: calc(100dvh - 126px);
    overflow-y: auto;
  }
  .map-frame .minimap-bezel canvas {
    height: 100px;
  }
  .map-frame .map-meta {
    display: none;
  }
  .gesture-guide {
    margin-top: 7px;
  }
  .map-controls.view-open {
    bottom: 8px;
    left: auto;
    right: calc(80px + env(safe-area-inset-right, 0px));
  }
  .selection {
    max-width: 410px;
    max-height: calc(100% - 70px);
  }
  .plan-bar {
    right: calc(80px + env(safe-area-inset-right, 0px));
    max-width: none;
    grid-template-columns: minmax(150px, 1fr) auto auto auto;
    gap: 8px;
    padding: 9px;
  }
  .plan-bar > div {
    grid-column: auto;
  }
  #planReason {
    max-width: 230px;
    font-size: 11px;
  }
  .plan-bar strong {
    font-size: 16px;
  }
  .plan-rotation strong {
    font-size: 14px;
  }
  .tutorial-card {
    width: 310px;
    right: auto;
    max-height: calc(100% - 16px);
    overflow-y: auto;
  }
  .tutorial-card h2 {
    font-size: 19px;
  }
  .tutorial-card p {
    font-size: 13px;
  }
  .home-screen {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 24px;
    padding: 16px max(28px, env(safe-area-inset-right, 0px)) 16px
      max(28px, env(safe-area-inset-left, 0px));
    background: linear-gradient(90deg, #1b261bba, #1e281b22 60%, #22291b6b);
  }
  .home-title {
    width: 40%;
  }
  .home-title h1 {
    font-size: 37px;
  }
  .home-title h1 span {
    display: block;
    font-size: 30px;
  }
  .home-actions {
    width: min(350px, 47%);
    align-self: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-haze {
    animation: none;
  }
}
@media (max-width: 700px) and (max-height: 600px) and (orientation: landscape) {
  .brand {
    min-width: 32px;
    width: 32px;
  }
  .brand > span:last-child {
    display: none;
  }
  .plan-bar {
    grid-template-columns: 166px minmax(92px, 1fr) 70px;
  }
  .plan-bar > div:first-child {
    grid-column: 1 / -1;
  }
  .plan-bar button {
    padding: 7px;
  }
}
@media (max-width: 360px) {
  .resources .resource {
    padding: 0 3px;
    gap: 3px;
  }
  .resources .resource b {
    font-size: 13px;
  }
}
@media (max-height: 350px) and (orientation: landscape) {
  .mobile-nav button {
    min-height: 44px;
  }
  .category-tabs {
    height: 44px;
  }
  .army-shortcuts {
    padding: 4px 0;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    height: 130px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card img {
    height: 32px;
  }
  .build-card .card-title {
    min-height: 28px;
    font-size: 14px;
  }
  .card-role {
    min-height: 28px;
    font-size: 11px;
  }
  .recruitment-queue {
    min-height: 16px;
    margin-top: 2px;
  }
}