:root {
  color-scheme: light;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #28261e;
  background: #b7a97d;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
}

body { background: #b7a97d; }

#app {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  margin: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(330px, 1fr) auto auto;
  isolation: isolate;
}

.stage {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-rows: 70px minmax(260px, 1fr);
  overflow: hidden;
  background: #b7a97d;
}

#antCanvas {
  grid-row: 2;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  touch-action: none;
  cursor: crosshair;
  image-rendering: pixelated;
}

#antCanvas:focus-visible {
  outline: 3px solid #584f2c;
  outline-offset: -3px;
}

.controls {
  position: absolute;
  top: max(6px, var(--safe-top));
  right: max(12px, var(--safe-right));
  width: 320px;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 14px 15px 13px;
  border: 1px solid rgba(40, 38, 30, .26);
  border-radius: 7px;
  background: rgba(242, 235, 207, .96);
  box-shadow: 0 4px 16px rgba(65, 55, 30, .16);
}

.controls h1 {
  margin: 0 0 3px;
  font-size: 15px;
  letter-spacing: .12em;
}

.play-mode-dialog {
  position: fixed;
  inset: 0;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid rgba(40, 38, 30, .34);
  border-radius: 7px;
  background: #f2ebcf;
  color: #28261e;
  box-shadow: 0 8px 32px rgba(65, 55, 30, .22);
}

.play-mode-dialog::backdrop { background: rgba(40, 38, 30, .32); }

.play-mode-dialog h2 {
  margin: 0 0 20px;
  font-size: 18px;
  text-align: center;
}

.play-mode-buttons {
  display: flex;
  gap: 12px;
}

.play-mode-buttons[hidden] { display: none; }

.play-mode-buttons button {
  flex: 1;
  min-height: 48px;
  font-size: 14px;
}

.settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.settings-heading::-webkit-details-marker { display: none; }
.settings-heading h1 { margin: 0; }
.settings-heading:focus-visible { outline: 2px solid #584f2c; outline-offset: 3px; }

.settings-minimize,
.settings-expand {
  padding: 6px 9px;
  border: 1px solid rgba(40, 38, 30, .34);
  border-radius: 7px;
  background: rgba(255, 252, 237, .62);
  font-size: 12px;
  white-space: nowrap;
}

#settingsPanel[open] > .settings-heading { margin-bottom: 6px; }
#settingsPanel[open] .settings-expand,
#settingsPanel:not([open]) .settings-minimize { display: none; }

#settingsPanel:not([open]) {
  width: 190px;
  padding: 6px 12px;
  justify-self: end;
}

.description,
.help,
.status { margin: 0; line-height: 1.45; }

.description {
  color: rgba(40, 38, 30, .7);
  font-size: 12px;
}

.description summary {
  color: rgba(40, 38, 30, .78);
  cursor: pointer;
  font-size: 11px;
}

.description-copy {
  margin: 6px 0 0;
  line-height: 1.45;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.time-scale-row {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}

.time-scale-row button {
  flex: 1 1 0;
  min-width: 44px;
  padding-inline: 8px;
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}

.view-switch-label {
  color: rgba(40, 38, 30, .78);
  font-size: 11px;
}

.view-switch button {
  flex: 1 1 104px;
}

button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(40, 38, 30, .34);
  border-radius: 7px;
  background: rgba(255, 252, 237, .62);
  color: #28261e;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

button:hover { background: rgba(255, 252, 237, .9); }
button:focus-visible { outline: 2px solid #584f2c; outline-offset: 2px; }
button[aria-pressed="true"] { background: #d7ca97; }

.range-control {
  display: block;
  margin-top: 9px;
  color: rgba(40, 38, 30, .78);
  font-size: 11px;
}

.range-control > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

output { font-variant-numeric: tabular-nums; }

input[type="range"] {
  display: block;
  width: 100%;
  min-height: 32px;
  margin: 0;
  accent-color: #584f2c;
  touch-action: pan-x;
}

.status {
  margin-top: 9px;
  color: #4a421e;
  font-size: 12px;
}

.status-message {
  margin: 0 0 3px;
}

.status-row {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: 0 6px;
  align-items: start;
}

.status-row + .status-row {
  margin-top: 2px;
}

.status-label {
  white-space: nowrap;
}

.status-row--red .status-label {
  color: #b23434;
}

.status-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

#blackColonyPanel {
  grid-column: 1;
  grid-row: 2;
  margin: 12px 6px 12px 12px;
}

#redColonyPanel {
  grid-column: 2;
  grid-row: 2;
  margin: 12px 12px 12px 6px;
}

.colony-panel {
  min-width: 0;
  height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(40, 38, 30, .2);
  border-radius: 7px;
  background: rgba(242, 235, 207, .96);
  font-size: 12px;
  line-height: 1.45;
}

.colony-panel > h3 {
  margin: 0;
  color: #4a421e;
  font-size: 12px;
  letter-spacing: .04em;
}

.colony-panel[hidden] { display: none; }
.colony-panel > * { flex-shrink: 0; }

.colony-panel--red > h3 {
  color: #b23434;
}

.colony-panel .status-row {
  margin-top: 0;
}

.sortie-controls {
  display: flex;
  gap: 7px;
  margin-top: 0;
  flex-shrink: 0;
}

.sortie-controls button { flex: 1; }

.sortie-note {
  margin: 6px 0 8px;
  font-size: 10px;
  color: rgba(40, 38, 30, .7);
  line-height: 1.45;
}

.birth-rate-group {
  min-width: 0;
  margin-top: 0;
  padding-top: 3px;
  border-top: 1px solid rgba(40, 38, 30, .14);
}

.birth-rate-group h4 {
  margin: 0;
  color: rgba(40, 38, 30, .78);
  font-size: 11px;
  font-weight: 600;
}

.birth-rate-group-controls {
  min-width: 0;
}

.birth-rate-note {
  margin: 5px 0 0;
  color: rgba(40, 38, 30, .58);
  font-size: 10px;
  line-height: 1.35;
}

.colony-panel .range-control:first-of-type {
  margin-top: 5px;
}

.display-scale-control {
  margin-top: 9px;
  color: rgba(40, 38, 30, .78);
  font-size: 11px;
}

.display-scale-control summary {
  cursor: pointer;
}

.display-scale-control .range-control {
  margin-top: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.help {
  margin-top: 5px;
  color: rgba(40, 38, 30, .58);
  font-size: 10px;
}

.selected-ant-panel {
  grid-column: 1 / -1;
  grid-row: 3;
  max-height: 188px;
  margin: 0 12px 10px;
  padding: 7px 8px;
  overflow-y: auto;
  border: 1px solid rgba(40, 38, 30, .2);
  border-radius: 6px;
  background: rgba(255, 252, 237, .48);
}

.selected-ant-panel h2 {
  margin: 0 0 5px;
  font-size: 11px;
  letter-spacing: .04em;
}

.selected-ant-details {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 2px 8px;
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.selected-ant-details dt {
  color: rgba(40, 38, 30, .62);
}

.selected-ant-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (pointer: coarse), (max-width: 620px) {
  button { min-height: 44px; }
  input[type="range"] { min-height: 44px; }
}

@media (max-width: 620px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  #app {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(330px, 55svh, 540px) auto auto auto auto;
  }

  #blackColonyPanel {
    grid-column: 1;
    grid-row: 2;
    margin: 12px;
  }

  #redColonyPanel {
    grid-column: 1;
    grid-row: 3;
    margin: 0 12px 12px;
  }

  .selected-ant-panel { grid-row: 4; }

  .controls {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1;
    grid-row: 5;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0 12px 12px;
    padding: 10px max(11px, var(--safe-right)) 9px max(11px, var(--safe-left));
  }

  .button-row { margin-top: 5px; }
  .time-scale-row { margin-top: 5px; }
  .view-switch { margin-top: 5px; }
  .range-control { margin-top: 4px; }
  .status { margin-top: 4px; }
  .display-scale-control { margin-top: 4px; }
}

@media (max-width: 360px) {
  .controls h1 { font-size: 14px; }
  button { padding-inline: 9px; }
}

.difficulty-note { font-size: 13px; line-height: 1.7; margin: 16px 0; }

.result-dialog h2 { font-size: 26px; margin-bottom: 12px; }
.result-dialog p { text-align: center; margin: 0 0 24px; line-height: 1.7; }
.result-buttons { display: grid; gap: 12px; }
.result-buttons button { min-height: 48px; font-size: 15px; }

.battle-overview {
  position: absolute;
  top: 6px;
  left: 12px;
  width: min(440px, calc(100% - 228px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}
.army-overview {
  min-width: 0;
  padding: 4px 9px;
  border: 1px solid rgba(40, 38, 30, .26);
  border-radius: 7px;
  background: rgba(242, 235, 207, .96);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.army-overview strong { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 12px; }
.army-overview--red strong { color: #b23434; }
.army-overview meter { display: block; width: 100%; height: 12px; margin: 3px 0; }
.colony-readiness { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; margin: 0; font-variant-numeric: tabular-nums; }
.colony-readiness > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.colony-readiness dt { font-size: 10px; white-space: nowrap; color: rgba(40, 38, 30, .75); }
.colony-readiness dd { margin: 0; font-size: 10px; font-weight: 600; text-align: right; }
.activity-details { margin: 0; }
.activity-details summary { font-size: 11px; cursor: pointer; color: rgba(40, 38, 30, .75); }
.birth-rate-group-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) {
  .battle-overview { width: calc(100% - 24px); gap: 24px; }
  .colony-panel { height: 244px; }
}