/* Comfort and command: the Manage drawer, the Army drawer's quick picks, the
   slim plan bar (walls keep going, Undo), hiding your troops, Man the walls
   beside the timer, the tabbed menu and the main menu's save line; and the
   layout of phones on their side (the rail at the free edge, the champion bar
   clear of it). Loaded after the older sheets, before the themes.
   Layouts: touch = (max-width: 900px), (pointer: coarse), short landscape;
   landscape = (max-height: 600px) and (orientation: landscape). */

/* ——— Shared pieces ——— */
.card-cost .short,
#planCost .short {
  color: #f3a48c;
}
.build-card:disabled .card-cost .short {
  color: #ffb6a0;
}
.mobile-nav button {
  position: relative;
}
.nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font: normal 600 10px/1 var(--sans);
  color: #fff3e6;
  background: #a8432f;
  box-shadow: 0 0 0 2px #25241c;
}

/* ——— Army: All, Ranged, Melee, Man the walls ——— */
.army-shortcuts button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.army-shortcuts button svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.army-shortcuts b {
  font: 600 11px/1 var(--sans);
  color: #f2cf6e;
}
.army-shortcuts b:empty {
  display: none;
}
#mobileGarrison {
  color: #cfe6c8;
  border-color: #6f9a6f88;
}

/* ——— Manage: the steward's ledger ——— */
.manage {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.manage-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 0;
  flex: none;
}
.manage-tabs button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  font: 14px var(--serif);
  color: #cfc4a2;
  white-space: nowrap;
  border: 1px solid #a48c4e40;
  background: #0000001f;
}
.manage-tabs button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.manage-tabs button svg {
  flex: none;
  width: 15px;
  height: 15px;
}
.manage-tabs button[aria-selected='true'] {
  color: #fff0c0;
  background: #bba06126;
  border-color: #c9ae6d;
  box-shadow: inset 0 -2px #c9ae6d;
}
.tab-badge {
  flex: none;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font: normal 600 10px/1 var(--sans);
  color: #eaf6dd;
  background: #3f6b4f;
}
.tab-badge.alert {
  background: #a8432f;
}
.manage-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  padding-right: 2px;
}
.manage-body > section:first-child,
.manage-body > .duty:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.manage-body .duty summary {
  pointer-events: none;
  list-style: none;
}
.manage-body .duty summary::-webkit-details-marker {
  display: none;
}
.manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}
.manage-tile {
  position: relative;
  min-width: 0;
  min-height: 98px;
  display: grid;
  grid-template-rows: 46px auto auto;
  justify-items: center;
  align-content: start;
  gap: 2px;
  padding: 5px 4px 10px;
  text-align: center;
  color: #eee0b7;
  background: linear-gradient(#25291fc9, #373326da), var(--stone-grain);
  background-size: auto, 280px;
  border: 1px solid #9d8a5c;
  box-shadow: inset 0 0 0 2px #f7e9c12b;
}
.manage-tile:hover:not(:disabled),
.manage-tile:focus-visible {
  border-color: #d8b86c;
  color: #fff3cf;
}
.manage-tile:active {
  transform: scale(0.97);
}
.manage-tile img {
  width: 100%;
  height: 46px;
  object-fit: contain;
  pointer-events: none;
}
.tile-name {
  max-width: 100%;
  font: 13px/1.1 var(--serif);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px #0008;
}
.tile-meta {
  font: 11px/1.2 var(--sans);
  color: #cbbd9a;
}
.manage-tile.busy .tile-meta {
  color: #f2cf6e;
}
.manage-tile.hurt {
  border-color: #c0644e;
}
.manage-tile.hurt .tile-meta {
  color: #f3a48c;
}
.tile-count {
  position: absolute;
  top: 4px;
  right: 5px;
  padding: 1px 5px;
  border-radius: 9px;
  font: 600 11px/1.2 var(--sans);
  color: #f2cf6e;
  background: #1e1a12d9;
}
.tile-health,
.tile-progress {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 4px;
  height: 3px;
  background: #151b13;
}
.manage-tile:has(.tile-progress) .tile-health {
  bottom: 9px;
}
.tile-health i,
.tile-progress i {
  display: block;
  height: 100%;
}
.tile-health i {
  background: #d39a4c;
}
.manage-tile.hurt .tile-health i {
  background: #d0583f;
}
.tile-progress i {
  width: 0;
  background: #a9cf8c;
  transition: width 0.2s linear;
}
.manage-empty,
.manage-locked {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0;
  font: 13px/1.4 var(--sans);
  color: #cbbd9a;
}
/* From a building's panel to the ledger. */
.manage-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 6px 10px;
  text-align: left;
  font: 14px var(--serif);
  color: #f2dfae;
  border: 1px solid #b2996666;
  background: #d3bc7814;
}
.manage-link span {
  flex: 1;
}
.manage-link svg:last-child {
  transform: rotate(-90deg);
}

/* ——— The plan bar: what, price, Undo or turn, Build, Done ——— */
.plan-bar .plan-info {
  min-width: 0;
}
#planReason:empty {
  display: none;
}
#planReason.problem {
  color: #a33a22;
  font-weight: 600;
}
.plan-bar.walls .plan-rotation {
  display: none;
}
.plan-bar:not(.planned) #confirmPlan {
  display: none;
}
#confirmPlan,
#undoPlan,
#cancelPlan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#confirmPlan svg,
#undoPlan svg {
  width: 17px;
  height: 17px;
}
#confirmPlan svg {
  stroke-width: 2.2;
}

/* ——— Man the walls, beside the wave timer ——— */
#waveGarrison {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2f5a3c;
  border-color: #5f8f63;
}
#waveGarrison b {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font: 600 10px/1 var(--sans);
  color: #eef6e2;
  background: #3f6b4f;
}
.wave-garrison:not(.hidden) {
  animation: garrison-call 2.4s ease-in-out infinite;
}
@keyframes garrison-call {
  50% {
    box-shadow: 0 0 0 3px #5f8f6355;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wave-garrison:not(.hidden) {
    animation: none;
  }
}

/* ——— Hide your troops ——— */
#hideTroops.active,
#hideTroopsTouch.active {
  color: #9fd8b4;
}
#hideTroopsTouch.active {
  border-color: #9fd8b4;
  box-shadow:
    0 0 0 2px #9fd8b444,
    0 2px 8px #0006;
}

/* ——— The menu: quick actions, then Game · Sound · View · Keys ——— */
.menu-modal h2 {
  margin-bottom: 4px;
}
.menu-modal .menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 0 14px;
}
.menu-modal .menu-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 6px 4px;
  font-size: 14px;
  line-height: 1.15;
}
.menu-modal .menu-grid .primary {
  flex-direction: row;
  min-height: 50px;
  font-size: 17px;
}
.menu-modal .menu-grid svg {
  width: 19px;
  height: 19px;
}
.menu-modal #menuSpeed {
  font-size: 15px;
}
.menu-tabs {
  display: flex;
  gap: 0;
  margin: 4px 0 12px;
  border-bottom: 1px solid #a2834666;
}
.menu-tabs button {
  flex: 1;
  min-height: 44px;
  padding: 6px 4px;
  font: 15px var(--serif);
  color: #7d6a45;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
}
.menu-tabs button[aria-selected='true'] {
  color: #3d3020;
  border-bottom-color: #8d6f37;
}
.menu-panel[hidden] {
  display: none !important;
}
.menu-modal .sound-settings {
  margin: 0;
  padding: 0;
  border: 0;
}
.menu-modal .sound-settings legend {
  display: none;
}
.menu-modal .setup-toggle {
  margin: 0 0 8px;
}
.menu-modal .setup-toggle small {
  letter-spacing: 0;
}
.menu-pace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.menu-pace button {
  min-width: 90px;
}
.menu-modal .keys-settings {
  margin: 0;
}

/* ——— Main menu: the save it would continue; guide and settings side by side ——— */
#homeContinue small {
  display: block;
  margin-top: 2px;
  font: 12px var(--sans);
  letter-spacing: 0.2px;
  opacity: 0.85;
}
#homeContinue small:empty {
  display: none;
}
.home-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.home-actions .home-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 10px;
  font: 15px var(--sans);
  color: #d9cba6;
}
.home-row svg {
  width: 17px;
  height: 17px;
}

/* ——— Desktop ——— */
@media (min-width: 901px) and (pointer: fine) and (min-height: 601px),
  (min-width: 901px) and (pointer: fine) and (orientation: portrait) {
  .army-shortcuts:not(.hidden) {
    display: flex;
    gap: 6px;
    padding: 6px 0 2px;
  }
  .army-shortcuts button {
    min-height: 30px;
    padding: 2px 12px;
  }
  .build-panel:has(.army-shortcuts:not(.hidden)) .build-card {
    height: 104px;
  }
  .build-card .card-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0;
  }
  .manage-body {
    max-height: 154px;
  }
  .manage-tabs {
    max-width: 640px;
  }
  .manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }
  #waveGarrison {
    padding: 4px 10px;
  }
  .wave-garrison .horn-label {
    font-size: 11px;
  }
  .plan-bar #undoPlan {
    padding: 10px 12px;
  }
}

/* ——— Touch: phones and tablets ——— */
@media (max-width: 900px), (pointer: coarse), (max-height: 600px) and (orientation: landscape) {
  /* The drawer's own header: Fortifications · Settlement for Build; the
     army's quick picks for Army; the ledger's tabs for Manage. */
  body.drawer-manage .build-panel .category-tabs > button[data-category],
  .category-tabs > button[data-category='manage'] {
    display: none;
  }
  /* Building panels on a phone: the orders, not the encyclopedia. The
     description stays in the field guide and on desktop. */
  .selection:has(.selection-image) > p,
  .selection .garrison-roster small,
  .selection .selection-stats {
    display: none !important;
  }
  body.drawer-manage .build-panel .category-tabs {
    position: absolute;
    top: 2px;
    right: 7px;
    height: 40px;
    border: 0;
    background: none;
    z-index: 2;
  }
  .manage {
    padding-right: 48px;
  }
  .manage .manage-body {
    margin-right: -48px;
    max-height: min(44dvh, 268px);
  }
  .manage-tabs {
    padding: 4px 0 6px;
  }
  .manage-tabs button {
    min-height: 40px;
    font-size: 13px;
    gap: 4px;
    padding: 0 4px;
  }
  .manage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .manage-tile {
    min-height: 92px;
  }
  .build-panel .army-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .army-shortcuts button {
    gap: 4px;
  }
  .army-shortcuts b {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 10px;
  }
  /* The view buttons step aside while a drawer or panel is open. */
  body:has(#mobileManage[aria-expanded='true']) .touch-turn {
    display: none;
  }
  /* Man the walls beside the timer: as big as the horn. */
  #waveGarrison {
    width: auto;
    min-width: 48px;
    height: 44px;
    padding: 0 8px;
    margin: 0;
    font-size: 0;
    border: 1px solid #5f8f6399;
    background: #3f6b4f24;
  }
  #waveGarrison i,
  #waveGarrison svg {
    display: inline-block;
    width: 21px;
    height: 21px;
  }
  #waveGarrison b {
    font-size: 10px;
  }
  .wave-bottom {
    gap: 6px;
  }
  /* The plan bar: what and price above; Undo or turn, Build and Done below. */
  .plan-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'info info info'
      'tool build done';
    align-items: center;
    gap: 6px 6px;
    padding: 8px;
  }
  .plan-bar .plan-info,
  .plan-bar > div:first-child {
    grid-area: info;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 1px;
  }
  #planTitle {
    font-size: 16px;
  }
  #planCost {
    margin: 0;
    gap: 8px;
  }
  #planReason {
    flex-basis: 100%;
    font-size: 12px;
  }
  .plan-bar .plan-rotation,
  .plan-bar .plan-undo {
    grid-area: tool;
  }
  .plan-bar #confirmPlan {
    grid-area: build;
    width: 100%;
  }
  .plan-bar #cancelPlan {
    grid-area: done;
    min-width: 76px;
  }
  .plan-bar:not(.planned) {
    grid-template-areas: 'info info done';
  }
  .plan-bar:not(.planned) .plan-info {
    grid-area: info;
  }
  .plan-bar button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 15px;
  }
  /* The menu on a phone: fills the screen's width, tabs within thumb reach. */
  .menu-modal .menu-grid button {
    min-height: 56px;
    font-size: 13px;
  }
  .menu-modal .menu-grid .primary {
    font-size: 16px;
  }
  .menu-modal .setup-toggle span small {
    font-size: 12px;
    line-height: 1.35;
  }
  .keys-tab {
    display: none;
  }
}

/* ——— Phones held upright ——— */
@media (orientation: portrait) and ((max-width: 900px) or (pointer: coarse)) {
  .manage-tabs button svg {
    display: none;
  }
  .manage-tabs .tab-badge {
    position: absolute;
    top: -5px;
    right: -3px;
    box-shadow: 0 0 0 2px #25241c;
  }
}

/* ——— Phones on their side ——— */
@media (max-height: 600px) and (orientation: landscape) {
  /* The rail hugs the free edge: viewport.js tells the notch's side apart. */
  .mobile-nav {
    right: max(6px, var(--safe-right));
  }
  /* The champion's health between the wave timer and the rail, never under it. */
  .boss-bar {
    top: 8px;
    left: calc(244px + var(--safe-left));
    right: calc(84px + var(--safe-right));
    width: auto;
    max-width: 320px;
    min-width: 0;
    margin: 0 auto;
    transform: none;
  }
  body.has-boss .toast {
    top: 58px;
  }
  /* Army quick picks: a 2 × 2 block left of the cards. */
  .build-panel .army-shortcuts {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
  }
  .build-panel .army-shortcuts button {
    flex-direction: column;
    gap: 1px;
    font-size: 11px;
    padding: 2px;
  }
  .build-panel .army-shortcuts button svg {
    width: 15px;
    height: 15px;
  }
  /* Manage: the tabs down the left, the ledger beside them. */
  body.drawer-manage .build-panel .category-tabs {
    display: none;
  }
  body.drawer-manage .build-panel {
    grid-template-rows: auto;
  }
  .build-panel .manage {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    column-gap: 6px;
    padding-right: 0;
  }
  .build-panel .manage-tabs {
    flex-direction: column;
    padding: 0;
    gap: 4px;
  }
  .build-panel .manage-tabs button {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 36px;
    padding: 0 8px;
  }
  .build-panel .manage .manage-body {
    margin-right: 0;
    height: 156px;
    max-height: calc(100dvh - 120px);
  }
  .manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  /* The plan bar in one row: what and price, Undo or turn, Build, Done. */
  .plan-bar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'info tool build done';
    max-width: 640px;
    padding: 6px 8px;
  }
  .plan-bar:not(.planned) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'info done';
    max-width: 460px;
  }
  .plan-bar .plan-info,
  .plan-bar > div:first-child {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  #planReason {
    flex-basis: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .plan-bar #confirmPlan {
    width: auto;
    min-width: 96px;
  }
  /* The menu: wider and lower, the quick actions in one row. */
  .menu-modal {
    width: min(760px, calc(100% - 24px));
    padding-top: 18px;
  }
  .menu-modal .menu-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 10px 0;
  }
  .menu-modal h2 {
    font-size: 24px;
  }
  /* The pause notice: a small tag, not a banner. */
  .pause-banner {
    padding: 4px 10px;
    font-size: 11px;
  }
}