/* Ant Colony Simulator — warm scientific strategy UI, designed around golden-ratio spacing. */
.ac-root {
  --ac-ink: #efe8cf;
  --ac-muted: #b9b39d;
  --ac-deep: #10170f;
  --ac-panel: #172017;
  --ac-panel2: #1c291d;
  --ac-line: rgba(237, 219, 164, .16);
  --ac-gold: #e6bd67;
  --ac-gold2: #f7d98d;
  --ac-green: #87b45d;
  --ac-leaf: #9dcf69;
  --ac-danger: #d97d62;
  --ac-blue: #7fb9b1;
  position: fixed;
  left: 0;
  top: 0;
  width: var(--ac-app-width, 100vw);
  height: var(--ac-app-height, 100vh);
  z-index: 12000;
  overflow: hidden;
  background: radial-gradient(circle at 54% 0%, #293525 0, #121912 43%, #0d120d 100%);
  color: var(--ac-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

.ac-root * {
  box-sizing: border-box
}

.ac-root [role="button"] {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation
}

.ac-root img {
  display: block;
  max-width: 100%
}

.ac-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.ac-body {
  flex: 1;
  min-height: 0;
  overflow: hidden
}

.ac-topbar {
  height: 64px;
  flex: 0 0 64px;
  padding: 0 clamp(12px, 1.8vw, 28px);
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(132px, .7fr);
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, rgba(13, 20, 13, .97), rgba(18, 27, 18, .94));
  border-bottom: 1px solid rgba(230, 189, 103, .18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  position: relative;
  z-index: 30
}

.ac-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.ac-brand>img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .45))
}

.ac-kicker {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ac-gold);
  font-weight: 800;
  text-transform: uppercase
}

.ac-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-top-stats {
  display: flex;
  gap: 8px;
  align-items: center
}

.ac-top-chip {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  display: flex;
  gap: 6px;
  align-items: center;
  color: #d7d1bd;
  font-size: 12px;
  white-space: nowrap
}

.ac-top-chip b {
  color: var(--ac-gold2)
}

.ac-health-chip {
  gap: 8px
}

.ac-mini-bar {
  display: block;
  width: 58px;
  height: 7px;
  border-radius: 99px;
  background: #312c20;
  overflow: hidden
}

.ac-mini-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b05f4f, #d3c55f, #81b760);
  border-radius: inherit
}

.ac-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px
}

.ac-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ac-line);
  border-radius: 11px;
  color: #d9d0b4;
  background: rgba(255, 255, 255, .03);
  font-weight: 800;
  font-size: 18px;
  transition: .18s ease
}

.ac-icon-btn:hover,
.ac-icon-btn:focus {
  border-color: rgba(230, 189, 103, .5);
  background: rgba(230, 189, 103, .09);
  outline: none
}

.ac-icon-btn.active {
  color: var(--ac-gold2);
  background: rgba(230, 189, 103, .14)
}

.ac-btn {
  min-height: 44px;
  border-radius: 12px;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: .01em;
  border: 1px solid var(--ac-line);
  transition: .18s ease;
  text-align: center
}

.ac-btn-primary {
  background: linear-gradient(180deg, #e6bf6a, #c6923f);
  color: #211b10;
  border-color: #f1d88e;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .45)
}

.ac-btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05)
}

.ac-btn-ghost {
  background: rgba(255, 255, 255, .035);
  color: var(--ac-ink)
}

.ac-btn-ghost:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(230, 189, 103, .38)
}

.ac-full {
  width: 100%
}

/* Landing */
.ac-landing {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center
}

.ac-landing-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ac-landing-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 12, 8, .95) 0%, rgba(8, 12, 8, .80) 42%, rgba(8, 12, 8, .28) 76%, rgba(8, 12, 8, .62) 100%), linear-gradient(0deg, rgba(8, 12, 8, .72), transparent 58%)
}

.ac-landing-content {
  position: relative;
  width: min(690px, 88vw);
  margin-left: clamp(26px, 8vw, 126px);
  padding: 42px 0
}

.ac-landing-content h1 {
  font: 700 clamp(38px, 5.4vw, 74px)/.98 Georgia, serif;
  margin: 12px 0 20px;
  letter-spacing: -.025em;
  text-shadow: 0 5px 26px rgba(0, 0, 0, .65)
}

.ac-landing-content>p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  color: #ddd6bf
}

.ac-landing-buttons {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap
}

.ac-science-note {
  margin-top: 22px;
  border-left: 3px solid var(--ac-green);
  padding: 10px 13px;
  background: rgba(17, 31, 17, .7);
  color: #c9c9b6;
  max-width: 620px;
  font-size: 12px;
  line-height: 1.5
}

/* Founding */
.ac-founding {
  height: 100%;
  overflow: auto;
  padding: clamp(18px, 2.3vw, 34px);
  background: linear-gradient(180deg, rgba(33, 46, 30, .45), rgba(11, 16, 11, .8)), url('../../assets/assetsAnt/images/surface-rainforest.svg') center top/cover fixed
}

.ac-founding-copy {
  max-width: 1120px;
  margin: 0 auto 16px;
  background: rgba(10, 15, 10, .74);
  border: 1px solid rgba(230, 189, 103, .15);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 18px 22px
}

.ac-founding-copy h1 {
  font: 700 clamp(26px, 3vw, 40px)/1.04 Georgia, serif;
  margin: 6px 0 8px
}

.ac-founding-copy p {
  margin: 0;
  color: #c9c4b2;
  line-height: 1.5;
  max-width: 850px
}

.ac-scenario-picker {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow: auto;
  padding-bottom: 2px
}

.ac-scenario-pill {
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--ac-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}

.ac-scenario-pill span {
  font-weight: 750
}

.ac-scenario-pill small {
  color: var(--ac-muted)
}

.ac-scenario-pill.active {
  border-color: rgba(230, 189, 103, .58);
  background: rgba(230, 189, 103, .12);
  box-shadow: inset 0 0 0 1px rgba(230, 189, 103, .09)
}

.ac-founding-main {
  max-width: 1120px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(300px, 1fr);
  gap: 18px
}

.ac-map-wrap,
.ac-site-card {
  background: rgba(12, 18, 12, .92);
  border: 1px solid rgba(230, 189, 103, .16);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35)
}

.ac-map-wrap {
  padding: 16px
}

.ac-map-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.ac-map-title span {
  font: 700 19px Georgia, serif
}

.ac-map-title small {
  color: var(--ac-muted)
}

.ac-site-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  aspect-ratio: 1.58;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: #253326;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden
}

.ac-site-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(#415a34 0 52%, #795838 52% 100%);
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .06)
}

.ac-site-tile:after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  top: 45%;
  height: 16%;
  background: repeating-linear-gradient(94deg, rgba(24, 39, 19, .42) 0 2px, transparent 2px 7px);
  transform: rotate(-3deg)
}

.ac-tile-canopy {
  position: absolute;
  inset: 7% 7% 42%;
  border-radius: 50% 52% 42% 58%;
  background: radial-gradient(circle at 30% 30%, #83a855 0 11%, transparent 12%), radial-gradient(circle at 58% 42%, #53793a 0 20%, transparent 21%), radial-gradient(circle at 78% 25%, #91ae59 0 16%, transparent 17%), #36572d;
  opacity: .85
}

.ac-site-tile.lush .ac-tile-canopy {
  filter: saturate(1.3) brightness(1.08)
}

.ac-tile-soil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: radial-gradient(ellipse at 30% 45%, #68492f 0 11%, transparent 12%), radial-gradient(ellipse at 72% 58%, #8b6848 0 9%, transparent 10%)
}

.ac-site-tile.deep .ac-tile-soil {
  box-shadow: inset 0 -12px 0 rgba(54, 32, 21, .35)
}

.ac-water-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  height: 6%;
  background: rgba(84, 163, 172, .65);
  box-shadow: 0 0 8px rgba(84, 163, 172, .4)
}

.ac-site-tile.queen {
  outline: 2px solid var(--ac-gold2);
  box-shadow: 0 0 0 3px rgba(230, 189, 103, .18), 0 0 25px rgba(230, 189, 103, .42);
  z-index: 2
}

.ac-queen-marker {
  position: absolute;
  width: 38%;
  height: 48%;
  object-fit: contain;
  left: 31%;
  top: 22%;
  z-index: 5;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .65))
}

.ac-move-pad {
  display: grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 40px 40px 40px;
  justify-content: center;
  gap: 5px;
  margin-top: 12px
}

.ac-move,
.ac-queen-pad {
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--ac-line);
  background: rgba(255, 255, 255, .035)
}

.ac-move:hover {
  background: rgba(230, 189, 103, .13)
}

.ac-queen-pad img {
  width: 31px;
  height: 31px
}

.ac-site-card {
  padding: 20px
}

.ac-site-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--ac-gold)
}

.ac-site-card h2 {
  font: 700 29px Georgia, serif;
  margin: 4px 0
}

.ac-site-card>p {
  color: var(--ac-muted);
  margin: 0 0 14px
}

.ac-meter-row {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ac-meter-row>div {
  min-width: 0
}

.ac-meter-row b {
  display: block;
  font-size: 12px
}

.ac-meter-row small {
  display: block;
  font-size: 10px;
  color: var(--ac-muted);
  margin-top: 2px
}

.ac-meter {
  height: 8px;
  border-radius: 99px;
  background: #2b3023;
  overflow: hidden
}

.ac-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5f8149, #9ac66b)
}

.ac-meter-row.risk .ac-meter i {
  background: linear-gradient(90deg, #8c8144, #cf7659)
}

.ac-site-prediction {
  margin: 14px 0;
  padding: 12px;
  border-radius: 12px;
  background: #202b1c;
  border: 1px solid rgba(230, 189, 103, .14)
}

.ac-site-prediction span,
.ac-site-prediction small {
  display: block;
  color: var(--ac-muted);
  font-size: 10px
}

.ac-site-prediction b {
  display: block;
  color: var(--ac-gold2);
  font: 700 22px Georgia, serif;
  margin: 2px 0
}

.ac-settle {
  width: 100%
}

/* Main game */
.ac-game {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0
}

.ac-weather-strip {
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--ac-line);
  background: rgba(16, 25, 16, .9)
}

.ac-weather-now {
  display: flex;
  gap: 9px;
  align-items: center
}

.ac-weather-icon {
  font-size: 24px
}

.ac-weather-now b,
.ac-weather-now small {
  display: block
}

.ac-weather-now small {
  color: var(--ac-muted);
  font-size: 10px;
  margin-top: 1px
}

.ac-weather-facts {
  display: flex;
  gap: 16px
}

.ac-weather-facts span {
  font-size: 10px;
  color: var(--ac-muted);
  white-space: nowrap
}

.ac-weather-facts b {
  color: #ddd5be
}

.ac-game-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(430px, 1.72fr) minmax(250px, .86fr);
  gap: 9px;
  padding: 9px;
  background: radial-gradient(circle at 50% 10%, rgba(68, 89, 51, .18), transparent 42%)
}

.ac-left-panel,
.ac-centre-panel,
.ac-right-panel {
  min-width: 0;
  min-height: 0
}

.ac-left-panel,
.ac-right-panel {
  background: linear-gradient(180deg, rgba(24, 34, 23, .96), rgba(17, 25, 17, .98));
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  overflow: hidden
}

.ac-centre-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden
}

.ac-right-panel {
  padding: 8px;
  overflow: auto
}

.ac-right-panel>.ac-card+.ac-card {
  margin-top: 8px
}

.ac-tabs {
  height: 46px;
  display: flex;
  border-bottom: 1px solid var(--ac-line);
  background: #121b12
}

.ac-tab {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #a7a691;
  border-bottom: 2px solid transparent
}

.ac-tab.active {
  color: var(--ac-gold2);
  border-bottom-color: var(--ac-gold);
  background: rgba(230, 189, 103, .06)
}

.ac-left-content {
  height: calc(100% - 46px);
  overflow: auto;
  padding: 12px
}

.ac-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px
}

.ac-panel-heading span,
.ac-subhead {
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--ac-gold)
}

.ac-panel-heading b {
  font: 700 16px Georgia, serif
}

.ac-panel-intro {
  font-size: 11px;
  line-height: 1.5;
  color: #c0bba8
}

.ac-statline {
  padding: 7px 0
}

.ac-statline>div {
  display: flex;
  justify-content: space-between;
  font-size: 11px
}

.ac-statline>div b {
  color: #e0d6bb
}

.ac-statbar {
  display: block;
  height: 6px;
  background: #2b2f25;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px
}

.ac-statbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5a7c48, #98c66b);
  border-radius: inherit
}

.ac-statbar.invert i {
  background: linear-gradient(90deg, #b6a44c, #cf7258)
}

.ac-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 9px 0
}

.ac-mini-grid>div {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 9px;
  background: rgba(0, 0, 0, .12)
}

.ac-mini-grid span,
.ac-mini-grid b {
  display: block
}

.ac-mini-grid span {
  font-size: 9px;
  color: var(--ac-muted)
}

.ac-mini-grid b {
  font: 700 18px Georgia, serif;
  color: var(--ac-gold2);
  margin-top: 2px
}

.ac-goals {
  margin-top: 10px;
  border-top: 1px solid var(--ac-line);
  padding-top: 10px
}

.ac-goal {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0
}

.ac-goal>span {
  color: #7f8c72;
  font-size: 18px
}

.ac-goal.done>span {
  color: var(--ac-green)
}

.ac-goal b,
.ac-goal small {
  display: block
}

.ac-goal b {
  font-size: 11px
}

.ac-goal small {
  font-size: 9px;
  color: var(--ac-muted)
}

.ac-save-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px
}

.ac-link-btn {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--ac-gold2);
  font-size: 11px
}

.ac-link-btn:hover {
  text-decoration: underline
}

.ac-signal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0
}

.ac-signal {
  display: flex;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 10px;
  background: rgba(0, 0, 0, .11)
}

.ac-signal-dot {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #60705b;
  margin-top: 2px
}

.ac-signal b,
.ac-signal small {
  display: block
}

.ac-signal b {
  font-size: 11px
}

.ac-signal small {
  font-size: 9px;
  line-height: 1.35;
  color: var(--ac-muted);
  margin-top: 2px
}

.ac-signal.active {
  border-color: rgba(230, 189, 103, .48);
  background: rgba(230, 189, 103, .08)
}

.ac-signal.active .ac-signal-dot {
  border-color: var(--ac-gold);
  background: var(--ac-gold);
  box-shadow: 0 0 0 3px rgba(230, 189, 103, .15)
}

.ac-science-card {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ac-science-card b {
  font-size: 11px;
  color: #e5d8b8
}

.ac-science-card p {
  font-size: 10px;
  line-height: 1.45;
  color: var(--ac-muted);
  margin: 4px 0 0
}

/* Nest board */
.ac-nest-board {
  flex: 1;
  min-height: 0;
  position: relative;
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  overflow: hidden;
  background: #241a11;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .42)
}

.ac-nest-surface {
  height: 25%;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.ac-nest-surface>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.73) saturate(.9)
}

.ac-nest-surface:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(46, 31, 19, .95), transparent 55%)
}

.ac-surface-trail {
  position: absolute;
  left: 4%;
  bottom: 10px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(15, 20, 12, .75);
  border: 1px solid rgba(255, 255, 255, .1)
}

.ac-surface-trail span,
.ac-surface-trail b {
  display: block
}

.ac-surface-trail span {
  font-size: 8px;
  color: var(--ac-gold)
}

.ac-surface-trail b {
  font-size: 10px
}

.ac-underground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76%;
  background-size: cover;
  background-position: center;
  overflow: hidden
}

.ac-underground:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
  pointer-events: none
}

.ac-chamber {
  position: absolute;
  z-index: 4;
  padding: 7px 8px 7px 34px;
  min-width: 112px;
  max-width: 170px;
  border-radius: 10px;
  background: rgba(22, 28, 17, .84);
  border: 1px solid rgba(230, 189, 103, .2);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
  transition: .15s ease
}

.ac-chamber:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 189, 103, .55)
}

.ac-chamber img {
  position: absolute;
  left: 7px;
  top: 9px;
  width: 21px;
  height: 21px;
  object-fit: contain
}

.ac-chamber span,
.ac-chamber b {
  display: block
}

.ac-chamber span {
  font-size: 9px;
  color: var(--ac-gold2);
  font-weight: 800
}

.ac-chamber b {
  font-size: 8px;
  color: #c8c2ae;
  margin-top: 2px;
  white-space: normal
}

.ac-chamber.queen {
  left: 44%;
  top: 34%
}

.ac-chamber.fungus {
  left: 10%;
  top: 23%
}

.ac-chamber.nursery {
  right: 7%;
  top: 18%
}

.ac-chamber.processing {
  left: 20%;
  bottom: 17%
}

.ac-chamber.waste {
  right: 7%;
  bottom: 12%
}

.ac-chamber.tunnel {
  left: 44%;
  bottom: 4%
}

.ac-ant-stream i {
  position: absolute;
  z-index: 3;
  width: 5px;
  height: 3px;
  border-radius: 50%;
  background: #3a1d12;
  left: var(--x);
  top: var(--y);
  transform: rotate(calc(var(--i)*23deg));
  box-shadow: -4px 0 0 -1px #4b2819, 4px 0 0 -1px #4b2819;
  animation: acAntWiggle calc(2.2s + var(--i)*.04s) ease-in-out infinite alternate;
  opacity: .86
}

@keyframes acAntWiggle {
  to {
    translate: 7px -3px
  }
}

.ac-relay {
  position: absolute;
  z-index: 6;
  left: 10px;
  right: 10px;
  bottom: 8px;
  display: none;
  background: rgba(11, 15, 10, .82);
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  padding: 6px 8px
}

.ac-relay>span {
  font-size: 8px;
  color: var(--ac-gold)
}

.ac-relay>div {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px
}

.ac-relay-node {
  display: flex;
  align-items: center;
  gap: 4px
}

.ac-relay-node img {
  width: 18px;
  height: 18px
}

.ac-relay-node i {
  font-style: normal;
  font-size: 8px;
  color: var(--ac-muted)
}

.ac-relay-node b {
  font-size: 9px
}

.ac-relay em {
  font-style: normal;
  color: #8b846f
}

.ac-event-ribbon {
  flex: 0 0 83px;
  border: 1px solid var(--ac-line);
  border-radius: 12px;
  background: rgba(20, 28, 19, .94);
  padding: 7px;
  overflow: auto;
  display: flex;
  gap: 6px
}

.ac-event {
  min-width: 185px;
  flex: 1;
  display: flex;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .025)
}

.ac-event>span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8c927c;
  margin-top: 4px
}

.ac-event.warn>span {
  background: #d6b55b
}

.ac-event.danger>span {
  background: #d96e5b;
  box-shadow: 0 0 9px rgba(217, 110, 91, .6)
}

.ac-event.good>span {
  background: #84b966
}

.ac-event b,
.ac-event small {
  display: block
}

.ac-event b {
  font-size: 9px
}

.ac-event small {
  font-size: 8px;
  line-height: 1.3;
  color: var(--ac-muted);
  margin-top: 2px
}

.ac-event-empty {
  font-size: 10px;
  color: var(--ac-muted);
  padding: 8px
}

/* Council + forecast */
.ac-card {
  border: 1px solid rgba(230, 189, 103, .12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(34, 45, 31, .95), rgba(23, 31, 22, .96));
  padding: 11px
}

.ac-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ac-card-title span {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ac-gold);
  font-weight: 900
}

.ac-card-title small {
  font-size: 8px;
  color: var(--ac-muted)
}

.ac-advisor {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 9px 0
}

.ac-advisor img {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid rgba(230, 189, 103, .26);
  background: #263124
}

.ac-advisor small {
  color: var(--ac-muted);
  font-size: 8px
}

.ac-advisor h3 {
  font: 700 17px Georgia, serif;
  margin: 2px 0
}

.ac-advice-card>p {
  font-size: 10px;
  line-height: 1.45;
  color: #cec8b5
}

.ac-watch {
  font-size: 9px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(125, 170, 88, .09);
  border: 1px solid rgba(125, 170, 88, .13)
}

.ac-watch span {
  font-size: 8px;
  color: var(--ac-green);
  font-weight: 900;
  margin-right: 5px
}

.ac-predict-question {
  font: italic 11px Georgia, serif;
  color: #e8ddc4;
  padding: 8px 3px
}

.ac-advice-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.ac-mini-action {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  font-size: 8px;
  color: var(--ac-gold2);
  background: rgba(0, 0, 0, .12)
}

.ac-forecast-loading {
  min-height: 96px;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  color: var(--ac-muted);
  font-size: 10px
}

.ac-forecast-loading>span {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(230, 189, 103, .2);
  border-top-color: var(--ac-gold);
  border-radius: 50%;
  animation: acSpin .8s linear infinite
}

@keyframes acSpin {
  to {
    transform: rotate(360deg)
  }
}

.ac-survival {
  padding: 9px 0
}

.ac-survival>span,
.ac-survival>b {
  display: block
}

.ac-survival>span {
  font-size: 9px;
  color: var(--ac-muted)
}

.ac-survival>b {
  font: 700 26px Georgia, serif;
  color: var(--ac-gold2);
  margin: 1px 0 5px
}

.ac-survival>i {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: #2d3025;
  overflow: hidden
}

.ac-survival>i em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b2a352, #78aa5d);
  border-radius: inherit
}

.ac-range {
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ac-range>span {
  font-size: 9px
}

.ac-range>div {
  position: relative;
  height: 9px;
  margin: 5px 0;
  background: #2a2e24;
  border-radius: 99px
}

.ac-range>div i {
  position: absolute;
  top: 2px;
  height: 5px;
  background: rgba(127, 185, 177, .65);
  border-radius: 99px
}

.ac-range>div b {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 13px;
  background: #e8d589;
  border-radius: 2px
}

.ac-range small {
  font-size: 8px;
  color: var(--ac-muted)
}

.ac-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 5px
}

.ac-risk-grid>div {
  padding: 6px;
  background: rgba(0, 0, 0, .13);
  border-radius: 7px
}

.ac-risk-grid span,
.ac-risk-grid b {
  display: block
}

.ac-risk-grid span {
  font-size: 8px;
  color: var(--ac-muted)
}

.ac-risk-grid b {
  font: 700 15px Georgia, serif
}

.ac-bottleneck {
  margin-top: 7px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(230, 189, 103, .07);
  font-size: 9px
}

.ac-bottleneck b {
  color: var(--ac-gold2)
}

.ac-bottleneck small {
  display: block;
  color: var(--ac-muted);
  line-height: 1.35;
  margin-top: 2px
}

.ac-forecast-foot {
  font-size: 8px;
  line-height: 1.35;
  color: #8f927f;
  margin-top: 7px
}

/* Role deck + turn */
.ac-role-deck {
  flex: 0 0 118px;
  min-height: 118px;
  border-top: 1px solid var(--ac-line);
  background: #111811;
  padding: 7px 10px
}

.ac-role-deck-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px
}

.ac-role-deck-head span {
  font-size: 9px;
  letter-spacing: .13em;
  color: var(--ac-gold);
  font-weight: 900
}

.ac-role-deck-head small {
  font-size: 8px;
  color: var(--ac-muted);
  margin-left: 7px
}

.ac-plan-total {
  display: flex;
  align-items: baseline;
  gap: 4px
}

.ac-plan-total b {
  font: 700 17px Georgia, serif;
  color: var(--ac-gold2)
}

.ac-plan-total span {
  font-size: 8px;
  color: var(--ac-muted)
}

.ac-role-scroll {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  gap: 6px;
  overflow-x: auto
}

.ac-role-card {
  min-width: 112px;
  height: 76px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 10px;
  background: linear-gradient(180deg, #202a1e, #171f17);
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: 1fr 27px;
  gap: 2px 6px;
  position: relative
}

.ac-role-card.short {
  border-color: rgba(218, 119, 88, .42);
  box-shadow: inset 0 0 0 1px rgba(218, 119, 88, .05)
}

.ac-role-card.watch {
  border-color: rgba(230, 189, 103, .25)
}

.ac-role-card>.ac-role-icon {
  width: 27px;
  height: 27px;
  grid-row: 1;
  grid-column: 1;
  align-self: center
}

.ac-role-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0
}

.ac-role-copy span,
.ac-role-copy b,
.ac-role-copy small {
  display: block
}

.ac-role-copy span {
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-role-copy b {
  font: 700 17px Georgia, serif;
  color: var(--ac-gold2)
}

.ac-role-copy small {
  font-size: 7px;
  color: var(--ac-muted);
  white-space: nowrap
}

.ac-role-plan {
  grid-column: 1/3;
  grid-row: 2;
  display: grid;
  grid-template-columns: 27px 1fr 27px;
  gap: 4px;
  align-items: center
}

.ac-step {
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
  font-weight: 900;
  color: var(--ac-gold2)
}

.ac-role-plan strong {
  text-align: center;
  font-size: 10px
}

.ac-turn-bar {
  height: 66px;
  flex: 0 0 66px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #182218, #0f160f);
  border-top: 1px solid rgba(230, 189, 103, .16)
}

.ac-turn-signal {
  min-width: 0
}

.ac-turn-signal span,
.ac-turn-signal b,
.ac-turn-signal small {
  display: block
}

.ac-turn-signal span {
  font-size: 8px;
  color: var(--ac-gold);
  font-weight: 900;
  letter-spacing: .12em
}

.ac-turn-signal b {
  font: 700 16px Georgia, serif
}

.ac-turn-signal small {
  font-size: 8px;
  color: var(--ac-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 620px
}

.ac-turn-actions {
  display: flex;
  gap: 7px
}

.ac-turn-actions .ac-btn {
  min-width: 112px
}

.ac-run {
  min-width: 205px !important
}

/* Modal */
.ac-modal-layer {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  padding: 18px
}

.ac-modal-layer.open {
  display: flex
}

.ac-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 5, .82);
  backdrop-filter: blur(5px)
}

.ac-modal-card {
  position: relative;
  z-index: 2;
  width: min(760px, 94vw);
  max-height: min(84vh, 760px);
  overflow: auto;
  border: 1px solid rgba(230, 189, 103, .25);
  border-radius: 18px;
  background: linear-gradient(180deg, #202b1f, #111811);
  box-shadow: 0 25px 90px rgba(0, 0, 0, .6);
  padding: 22px
}

.ac-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px
}

.ac-modal-head h2,
.ac-modal-card>h2 {
  font: 700 clamp(24px, 3vw, 34px) Georgia, serif;
  margin: 4px 0 10px
}

.ac-modal-x {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  font-size: 20px
}

.ac-modal-card>p {
  color: #c9c4b2;
  line-height: 1.5
}

.ac-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px
}

.ac-help-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0
}

.ac-help-steps>div {
  padding: 11px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .12)
}

.ac-help-steps span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(230, 189, 103, .16);
  color: var(--ac-gold2);
  font-weight: 900;
  float: left;
  margin-right: 8px
}

.ac-help-steps b {
  font-size: 11px
}

.ac-help-steps p {
  font-size: 9px;
  color: var(--ac-muted);
  line-height: 1.4;
  margin: 4px 0 0 32px
}

.ac-research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0
}

.ac-research-grid>div {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(0, 0, 0, .12)
}

.ac-research-grid b {
  font-size: 11px;
  color: var(--ac-gold2)
}

.ac-research-grid p {
  font-size: 9px;
  line-height: 1.45;
  color: var(--ac-muted)
}

.ac-research-source {
  padding: 9px 10px;
  margin: 10px 0;
  border-radius: 9px;
  background: #0d140d;
  font-size: 9px;
  color: #a8aa98
}

.ac-research-source code {
  color: #d6c889
}

.ac-whatif-rows {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ac-whatif-row {
  display: grid;
  grid-template-columns: 1.8fr repeat(3, .65fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(0, 0, 0, .13)
}

.ac-whatif-row.active {
  border-color: rgba(230, 189, 103, .46);
  background: rgba(230, 189, 103, .08)
}

.ac-whatif-row>div b,
.ac-whatif-row>div small {
  display: block
}

.ac-whatif-row>div small {
  font-size: 8px;
  color: var(--ac-muted);
  margin-top: 2px
}

.ac-whatif-row>span {
  font-size: 8px;
  color: var(--ac-muted)
}

.ac-whatif-row>span b {
  display: block;
  font: 700 16px Georgia, serif;
  color: #e6dbc2
}

.ac-victory {
  text-align: center
}

.ac-victory>img {
  width: 78px;
  height: 78px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4))
}

.ac-victory-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0
}

.ac-victory-stats span {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .14);
  font-size: 9px
}

.ac-victory-stats b {
  display: block;
  font: 700 18px Georgia, serif;
  color: var(--ac-gold2)
}

.ac-chamber-big {
  padding: 15px;
  margin: 10px 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, .14);
  border: 1px solid var(--ac-line)
}

.ac-chamber-big span {
  font: 700 22px Georgia, serif;
  color: var(--ac-gold2)
}

.ac-chamber-big p {
  line-height: 1.55;
  color: #c8c3b0
}

.ac-toast {
  position: absolute;
  left: 50%;
  bottom: 82px;
  z-index: 100;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  padding: 9px 13px;
  border-radius: 9px;
  background: #20291e;
  border: 1px solid var(--ac-line);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42);
  font-size: 10px
}

.ac-toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

.ac-toast.good {
  border-color: rgba(125, 177, 92, .48)
}

.ac-toast.warn {
  border-color: rgba(230, 189, 103, .48)
}

@media (min-width:1160px) and (min-height:720px) {
  .ac-relay {
    display: block
  }

  .ac-chamber {
    padding-top: 8px;
    padding-bottom: 8px
  }

  .ac-nest-board {
    min-height: 340px
  }
}

@media (max-width:1050px) {
  .ac-topbar {
    grid-template-columns: minmax(190px, 1fr) auto auto
  }

  .ac-top-chip:nth-child(1) {
    display: none
  }

  .ac-game-grid {
    grid-template-columns: minmax(205px, .72fr) minmax(370px, 1.55fr) minmax(220px, .78fr)
  }

  .ac-role-scroll {
    grid-template-columns: repeat(8, 118px)
  }

  .ac-weather-facts span:nth-child(-n+2) {
    display: none
  }
}

@media (max-width:780px) {
  .ac-root {
    overflow: auto
  }

  .ac-shell {
    min-height: 100%
  }

  .ac-body {
    overflow: auto
  }

  .ac-topbar {
    height: 58px;
    flex-basis: 58px;
    grid-template-columns: 1fr auto;
    padding: 0 10px
  }

  .ac-brand>img {
    width: 34px;
    height: 34px
  }

  .ac-title {
    font-size: 15px
  }

  .ac-top-stats {
    display: none
  }

  .ac-icon-btn {
    width: 38px;
    height: 38px
  }

  .ac-weather-strip {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 5px
  }

  .ac-weather-facts {
    gap: 8px
  }

  .ac-game {
    height: auto;
    min-height: 100%
  }

  .ac-game-grid {
    display: flex;
    flex-direction: column;
    padding: 7px
  }

  .ac-left-panel {
    order: 2;
    min-height: 260px
  }

  .ac-centre-panel {
    order: 1;
    height: 520px;
    min-height: 520px
  }

  .ac-right-panel {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    overflow: visible
  }

  .ac-right-panel>.ac-card+.ac-card {
    margin-top: 0
  }

  .ac-role-deck {
    order: 4;
    flex-basis: auto;
    min-height: 116px
  }

  .ac-turn-bar {
    order: 5;
    position: sticky;
    bottom: 0;
    z-index: 20
  }

  .ac-role-scroll {
    display: flex
  }

  .ac-role-card {
    min-width: 132px
  }

  .ac-founding {
    padding: 12px
  }

  .ac-founding-main {
    grid-template-columns: 1fr
  }

  .ac-site-grid {
    aspect-ratio: 1.25
  }

  .ac-site-card {
    max-width: none
  }

  .ac-landing-content {
    margin: 0 auto;
    width: 90%;
    padding: 30px 0
  }

  .ac-landing-content h1 {
    font-size: 44px
  }

  .ac-relay {
    display: none
  }

  .ac-event-ribbon {
    flex-basis: 88px
  }

  .ac-modal-layer {
    position: fixed
  }
}

@media (max-width:560px) {
  .ac-brand .ac-kicker {
    display: none
  }

  .ac-title {
    font-size: 13px
  }

  .ac-top-actions {
    gap: 4px
  }

  .ac-icon-btn {
    width: 36px;
    height: 36px
  }

  .ac-weather-facts {
    width: 100%;
    justify-content: space-between
  }

  .ac-weather-facts span:nth-child(3),
  .ac-weather-facts span:nth-child(4) {
    display: inline
  }

  .ac-game-grid {
    padding: 5px
  }

  .ac-centre-panel {
    height: 470px;
    min-height: 470px
  }

  .ac-nest-surface {
    height: 22%
  }

  .ac-underground {
    height: 79%
  }

  .ac-chamber {
    min-width: 104px;
    max-width: 126px;
    padding-left: 30px
  }

  .ac-chamber.queen {
    left: 39%;
    top: 34%
  }

  .ac-chamber.fungus {
    left: 3%;
    top: 18%
  }

  .ac-chamber.nursery {
    right: 2%;
    top: 14%
  }

  .ac-chamber.processing {
    left: 8%;
    bottom: 14%
  }

  .ac-chamber.waste {
    right: 2%;
    bottom: 11%
  }

  .ac-chamber.tunnel {
    left: 37%;
    bottom: 1%
  }

  .ac-right-panel {
    grid-template-columns: 1fr
  }

  .ac-turn-bar {
    height: auto;
    min-height: 86px;
    align-items: stretch;
    flex-direction: column;
    padding: 7px
  }

  .ac-turn-signal small {
    max-width: 95vw
  }

  .ac-turn-actions {
    display: grid;
    grid-template-columns: .75fr 1.5fr
  }

  .ac-turn-actions .ac-btn {
    min-width: 0 !important
  }

  .ac-role-deck-head small {
    display: none
  }

  .ac-founding-copy {
    padding: 14px
  }

  .ac-founding-copy h1 {
    font-size: 27px
  }

  .ac-map-title small {
    display: none
  }

  .ac-site-grid {
    aspect-ratio: 1.06
  }

  .ac-meter-row {
    grid-template-columns: 1fr 94px
  }

  .ac-landing-content h1 {
    font-size: 38px
  }

  .ac-landing-buttons {
    flex-direction: column
  }

  .ac-help-steps,
  .ac-research-grid {
    grid-template-columns: 1fr
  }

  .ac-whatif-row {
    grid-template-columns: 1.4fr repeat(3, .62fr);
    gap: 5px;
    padding: 8px
  }

  .ac-whatif-row>div small {
    display: none
  }

  .ac-modal-card {
    padding: 16px
  }

  .ac-victory-stats {
    flex-direction: column
  }

  .ac-toast {
    bottom: 98px;
    max-width: 88vw;
    text-align: center
  }
}

@media (max-height:650px) and (min-width:781px) {
  .ac-topbar {
    height: 54px;
    flex-basis: 54px
  }

  .ac-weather-strip {
    height: 40px;
    flex-basis: 40px
  }

  .ac-role-deck {
    flex-basis: 104px;
    min-height: 104px
  }

  .ac-role-card {
    height: 64px
  }

  .ac-turn-bar {
    height: 58px;
    flex-basis: 58px
  }

  .ac-event-ribbon {
    flex-basis: 68px
  }

  .ac-card {
    padding: 8px
  }

  .ac-advisor img {
    width: 34px;
    height: 34px
  }

  .ac-advisor h3 {
    font-size: 14px
  }

  .ac-predict-question {
    display: none
  }

  .ac-risk-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ==========================================================================\n   COLONY CHRONICLES — CIVILISATION-STYLE COMMAND UI v2\n   High-fidelity layout adapted from the supplied visual reference.\n   ========================================================================== */
.ac-root {
  --ac-civ-ink: #eee8cf;
  --ac-civ-muted: #b8b39e;
  --ac-civ-panel: #172016;
  --ac-civ-panel-2: #1d291b;
  --ac-civ-panel-3: #243120;
  --ac-civ-line: #536046;
  --ac-civ-line-soft: rgba(198, 190, 139, .24);
  --ac-civ-gold: #d8c27f;
  --ac-civ-cream: #efe9c8;
  --ac-civ-green: #5d8d42;
  --ac-civ-green-bright: #8fc464;
  --ac-civ-brown: #443322;
  --ac-civ-red: #a55d48;
  --ac-civ-blue: #6c9aa0;
  background: #121912;
  font-family: Arial, Helvetica, sans-serif;
}

.ac-civ-shell {
  background: #11170f;
}

.ac-civ-topbar {
  height: 39px !important;
  flex: 0 0 39px !important;
  padding: 0 8px !important;
  display: grid !important;
  grid-template-columns: 42% 16% 42% !important;
  gap: 0 !important;
  background: linear-gradient(180deg, #243022 0%, #131a12 100%) !important;
  border-bottom: 1px solid #5f5c43 !important;
  box-shadow: 0 1px 0 #090c08, 0 4px 10px rgba(0, 0, 0, .42) !important;
  color: var(--ac-civ-cream);
  z-index: 55;
}

.ac-top-left,
.ac-top-right {
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0
}

.ac-top-left {
  gap: 8px
}

.ac-top-right {
  justify-content: flex-end;
  gap: 5px
}

.ac-turn-emblem {
  width: 23px;
  height: 23px;
  border: 1px solid #827759;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #26311f;
  color: #d7c37d;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45)
}

.ac-civ-stat {
  font-size: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e4dfc8;
  text-shadow: 0 1px #000
}

.ac-civ-stat b {
  font-size: 11px;
  color: #fff5c7
}

.ac-stat-glyph {
  color: #d8c27f
}

.ac-turn-stat {
  padding-right: 7px;
  border-right: 1px solid rgba(219, 208, 159, .22)
}

.ac-queen-stat {
  gap: 7px
}

.ac-queen-stat .ac-mini-bar {
  width: 72px;
  height: 5px;
  border-radius: 2px;
  background: #39291d;
  border: 1px solid #6b5d43
}

.ac-queen-stat .ac-mini-bar i {
  background: linear-gradient(90deg, #8c382b, #c7b456, #88a84e);
  border-radius: 0
}

.ac-top-brand {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: .85;
  text-shadow: 0 2px 3px #000
}

.ac-brand-crown {
  font-size: 18px;
  color: #d8c27f
}

.ac-brand-main {
  font: bold 17px Georgia, serif;
  letter-spacing: .02em;
  color: #e9e0b7
}

.ac-brand-sub {
  font: bold 12px Georgia, serif;
  letter-spacing: .06em;
  color: #d6ca99;
  margin-top: 1px
}

.ac-top-scenario {
  display: none
}

.ac-resource {
  height: 31px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border-right: 1px solid rgba(215, 204, 155, .22);
  min-width: 0
}

.ac-resource>span {
  font-size: 14px
}

.ac-resource b,
.ac-resource small {
  display: block;
  white-space: nowrap;
  line-height: 1.05
}

.ac-resource b {
  font-size: 9px;
  color: #ece7cf
}

.ac-resource small {
  font-size: 8px;
  color: #c9c2a6;
  margin-top: 2px
}

.ac-larvae {
  padding-left: 2px
}

.ac-top-icon {
  width: 23px;
  height: 23px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: #c4bea5;
  font-size: 12px;
  font-weight: 900;
  transition: .12s;
  background: transparent;
  border: 1px solid transparent
}

.ac-top-icon:hover,
.ac-top-icon:focus {
  outline: none;
  background: #33402b;
  border-color: #65705a;
  color: #fff1b9
}

.ac-top-icon.active {
  background: #4a4e2c;
  color: #f6e7a2
}

.ac-close-top {
  font-size: 16px
}

/* Main three-column command view */
.ac-civ-game {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #151b12 !important;
  overflow: hidden !important
}

.ac-civ-grid {
  flex: 1;
  min-height: 0;
  display: grid !important;
  grid-template-columns: minmax(260px, 28%) minmax(420px, 47%) minmax(225px, 25%) !important;
  gap: 6px !important;
  padding: 5px 7px 4px !important;
  background: linear-gradient(#12180f, #10150e) !important;
  overflow: hidden !important
}

.ac-civ-panel {
  border: 1px solid #6c6a50 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(29, 39, 27, .985), rgba(17, 25, 17, .99)) !important;
  box-shadow: 0 0 0 2px #0b0e0a, 0 3px 10px rgba(0, 0, 0, .55), inset 0 0 22px rgba(156, 142, 78, .035) !important;
  color: var(--ac-civ-ink)
}

.ac-left-panel {
  padding: 0 !important;
  overflow: hidden !important;
  min-width: 0
}

.ac-panel-titlebar {
  height: 43px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-bottom: 1px solid #6b684c;
  background: linear-gradient(#2a3728, #19231a);
  box-shadow: inset 0 -1px #0b0d0a
}

.ac-panel-titlebar b {
  font: bold 15px Georgia, serif;
  letter-spacing: .015em;
  color: #eee6bd;
  text-shadow: 0 2px 2px #000
}

.ac-panel-medallion {
  width: 31px;
  height: 31px;
  margin-right: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #9a8e60;
  background: radial-gradient(circle, #5f6741, #26311f 70%);
  color: #e0c97a;
  box-shadow: 0 0 0 2px #151d14, 0 1px 5px #000
}

.ac-panel-close-dot {
  margin-left: auto;
  font-size: 16px;
  color: #d4cfb6
}

.ac-civ-tabs {
  height: 42px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  padding: 0 7px !important;
  border-bottom: 1px solid #384235 !important;
  background: #1e291e !important
}

.ac-civ-tabs .ac-tab {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #b9b39e !important;
  font-size: 8px !important;
  letter-spacing: .02em !important;
  font-weight: 800 !important;
  padding: 9px 2px 4px !important;
  text-align: center !important;
  position: relative
}

.ac-civ-tabs .ac-tab small {
  display: block !important;
  color: #6b9b54 !important;
  font-size: 7px !important;
  line-height: 1 !important;
  margin-top: 2px !important
}

.ac-civ-tabs .ac-tab.active {
  color: #eee7c5 !important;
  background: linear-gradient(180deg, rgba(93, 124, 76, .32), rgba(46, 64, 42, .22)) !important;
  border-bottom: 2px solid #97b96a !important
}

.ac-civ-tabs .ac-tab:focus {
  outline: 1px solid #9b9168 !important
}

.ac-civ-left-content {
  height: calc(100% - 85px) !important;
  overflow-y: auto !important;
  padding: 8px 10px 12px !important;
  scrollbar-width: thin;
  scrollbar-color: #778165 #172016
}

.ac-civ-left-content::-webkit-scrollbar {
  width: 8px
}

.ac-civ-left-content::-webkit-scrollbar-track {
  background: #172016;
  border-left: 1px solid #364032
}

.ac-civ-left-content::-webkit-scrollbar-thumb {
  background: #69735d;
  border: 1px solid #8c8a69;
  border-radius: 4px
}

.ac-section-label {
  font-size: 9px;
  font-weight: 900;
  color: #e2dcc0;
  margin: 3px 0 6px;
  text-shadow: 0 1px #000
}

.ac-production-queue {
  padding: 7px 8px;
  border: 1px solid #384536;
  border-radius: 4px;
  background: #131b13;
  color: #d3cfb8;
  font-size: 9px;
  margin-bottom: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-active-signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 9px
}

.ac-active-signals span {
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #475244;
  border-radius: 4px;
  background: #263225;
  color: #d8d3b8;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-active-signals span:first-child {
  color: #e8dfb5
}

.ac-signal-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 10px
}

.ac-signal-chip {
  min-height: 27px;
  padding: 5px 6px;
  border: 1px solid #3e4c3c;
  border-radius: 4px;
  background: #1d291d;
  color: #aaa792;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center
}

.ac-signal-chip.active {
  border-color: #909265;
  background: linear-gradient(#364830, #263625);
  color: #f2e7b7;
  box-shadow: inset 0 0 0 1px rgba(216, 194, 127, .14)
}

.ac-unit-heading {
  margin-top: 4px
}

.ac-unit-help {
  font-size: 8px;
  color: #d2cdb4;
  margin: 0 0 5px
}

.ac-unit-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px
}

.ac-unit-row {
  height: 45px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px 45px 13px;
  gap: 5px;
  align-items: center;
  padding: 3px 4px;
  border: 1px solid #475246;
  border-radius: 5px;
  background: linear-gradient(180deg, #243124, #1c281c);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025)
}

.ac-unit-row.short {
  border-color: #7b5142;
  background: linear-gradient(#30271f, #242017)
}

.ac-unit-row.watch {
  border-color: #6f6844
}

.ac-unit-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #66725a;
  background: #26351f;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, .5)
}

.ac-unit-icon .ac-role-icon {
  width: 22px !important;
  height: 22px !important
}

.ac-unit-copy {
  min-width: 0
}

.ac-unit-copy b,
.ac-unit-copy small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-unit-copy b {
  font-size: 9px;
  color: #f0ead1
}

.ac-unit-copy small {
  font-size: 7px;
  color: #b8b39e;
  margin-top: 2px
}

.ac-unit-plan {
  font: bold 10px Georgia, serif;
  color: #e2cd85;
  text-align: center
}

.ac-unit-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px
}

.ac-unit-control i {
  height: 25px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  color: #dfd6b2;
  background: #1a2318;
  border: 1px solid #4b5847;
  border-radius: 3px
}

.ac-unit-control i:hover {
  background: #40523a;
  color: #fff
}

.ac-unit-arrow {
  font-size: 22px;
  color: #9aa28d;
  text-align: center
}

.ac-pulse-strip {
  padding: 8px;
  border: 1px solid #485346;
  border-radius: 4px;
  background: #182118;
  margin-bottom: 7px
}

.ac-pulse-strip span,
.ac-pulse-strip b {
  font-size: 9px
}

.ac-pulse-strip b {
  float: right;
  color: #eadf9f
}

.ac-pulse-strip i {
  display: block;
  clear: both;
  margin-top: 6px;
  height: 5px;
  background: #2a2b22;
  border: 1px solid #4a4e3b
}

.ac-pulse-strip em {
  display: block;
  height: 100%;
  background: #7ca75b
}

.ac-statline {
  margin: 6px 0 !important
}

.ac-statline>div {
  font-size: 8px !important
}

.ac-statbar {
  height: 5px !important
}

.ac-civ-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 8px 0
}

.ac-civ-mini-grid>div {
  padding: 7px;
  border: 1px solid #404a3d;
  background: #192219;
  border-radius: 4px
}

.ac-civ-mini-grid span,
.ac-civ-mini-grid b {
  display: block
}

.ac-civ-mini-grid span {
  font-size: 7px;
  color: #aaa690
}

.ac-civ-mini-grid b {
  font: 700 14px Georgia, serif;
  color: #e3dcae;
  margin-top: 1px
}

.ac-civ-goals {
  margin-bottom: 8px
}

.ac-goal {
  border-color: #3b4738 !important;
  background: #182018 !important;
  border-radius: 4px !important
}

.ac-save-row {
  border-top: 1px solid #364033 !important;
  padding-top: 7px !important
}

.ac-link-btn {
  font-size: 8px !important;
  color: #d3c99a !important
}

.ac-science-card {
  border: 1px solid #414c3e !important;
  border-radius: 4px !important;
  background: #192219 !important;
  padding: 8px !important;
  margin-bottom: 5px !important
}

.ac-science-card b {
  font-size: 9px !important;
  color: #e8dfb3 !important
}

.ac-science-card p {
  font-size: 8px !important;
  color: #b8b39f !important;
  line-height: 1.35 !important
}

.ac-civ-action {
  min-height: 30px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6c6b4d;
  border-radius: 4px;
  background: linear-gradient(#34432e, #243322);
  font-size: 8px;
  font-weight: 900;
  color: #e9dfb1
}

.ac-left-empty {
  padding: 12px;
  border: 1px solid #3d493a;
  background: #172017;
  font-size: 9px;
  color: #aaa58e
}

.ac-left-forecast-hero {
  padding: 9px;
  border: 1px solid #57604a;
  background: #1c291a;
  border-radius: 4px;
  margin-bottom: 5px
}

.ac-left-forecast-hero span,
.ac-left-forecast-hero small {
  display: block;
  font-size: 8px;
  color: #aba691
}

.ac-left-forecast-hero b {
  font: 700 25px Georgia, serif;
  color: #ecdea0
}

.ac-left-risk {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border: 1px solid #3e493b;
  border-radius: 4px;
  margin-bottom: 4px;
  background: #172017;
  font-size: 8px
}

.ac-left-risk b {
  font: 700 13px Georgia, serif;
  color: #e0d5a6
}

/* Central living colony */
.ac-colony-world {
  position: relative !important;
  min-width: 0 !important;
  border: 1px solid #454c3a !important;
  background: #2a241b !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px #0a0d09 !important
}

.ac-nest-board {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  background: #33291e !important;
  overflow: hidden !important
}

.ac-nest-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #3d3022
}

.ac-world-surface {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 27%;
  background-size: cover;
  background-position: center 44%;
  border-bottom: 2px solid #5b4a2e;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .36);
  z-index: 2
}

.ac-world-surface:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(229, 230, 165, .22), rgba(54, 51, 31, .04) 60%, rgba(34, 24, 13, .4));
  pointer-events: none
}

.ac-surface-ant {
  position: absolute;
  right: 18%;
  bottom: 8%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  background: rgba(22, 29, 17, .68);
  border: 1px solid rgba(228, 213, 157, .42);
  border-radius: 10px
}

.ac-surface-ant .ac-role-icon {
  width: 16px !important;
  height: 16px !important
}

.ac-surface-ant small {
  font-size: 7px;
  color: #eee4bf
}

.ac-env-hud {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 5;
  height: 29px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 7px;
  border: 1px solid rgba(229, 220, 173, .54);
  border-radius: 5px;
  background: rgba(24, 34, 20, .78);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .42);
  backdrop-filter: blur(2px)
}

.ac-env-hud>span {
  display: block
}

.ac-env-icon {
  font-size: 16px
}

.ac-env-hud b,
.ac-env-hud small {
  display: block;
  line-height: 1
}

.ac-env-hud b {
  font-size: 8px;
  color: #f0e8c6
}

.ac-env-hud small {
  font-size: 6px;
  color: #c8c0a0;
  margin-top: 2px
}

.ac-underground {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 24% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #4a3424 !important;
  filter: saturate(1.02) contrast(1.02);
  overflow: hidden !important
}

.ac-underground:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 49% 40%, rgba(255, 216, 142, .07), transparent 36%), linear-gradient(180deg, rgba(97, 71, 42, .03), rgba(32, 19, 12, .31));
  pointer-events: none
}

.ac-earth-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(17px);
  opacity: .32
}

.ac-earth-glow-a {
  width: 150px;
  height: 90px;
  background: #b6bb69;
  left: 40%;
  top: 36%
}

.ac-earth-glow-b {
  width: 110px;
  height: 75px;
  background: #dbb065;
  left: 11%;
  top: 59%
}

.ac-chamber-token {
  position: absolute;
  z-index: 8;
  width: 31px;
  height: 31px;
  border: 2px solid #8e8360;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #43533a, #1c261b 70%);
  box-shadow: 0 2px 7px #000, 0 0 0 2px rgba(10, 13, 9, .75);
  transition: .14s
}

.ac-chamber-token:hover {
  transform: scale(1.12);
  filter: brightness(1.15);
  z-index: 12
}

.ac-chamber-token .ac-role-icon {
  width: 18px !important;
  height: 18px !important;
  grid-area: 1/1
}

.ac-chamber-token>span {
  font-size: 15px;
  color: #e3cf83;
  grid-area: 1/1
}

.ac-chamber-token>b {
  position: absolute;
  right: -8px;
  bottom: -6px;
  min-width: 17px;
  height: 14px;
  padding: 0 3px;
  border: 1px solid #6d654d;
  border-radius: 7px;
  background: #141a12;
  color: #f1e7b9;
  font-size: 7px;
  display: grid;
  place-items: center
}

.ac-token-queen {
  left: 47%;
  top: 19%
}

.ac-token-fungus {
  left: 24%;
  top: 45%
}

.ac-token-nursery {
  left: 67%;
  top: 42%
}

.ac-token-processing {
  left: 17%;
  top: 72%
}

.ac-token-waste {
  left: 72%;
  top: 73%
}

.ac-token-tunnel {
  left: 46%;
  top: 66%
}

.ac-token-defence {
  left: 82%;
  top: 23%
}

.ac-fungus-cluster {
  position: absolute;
  z-index: 5;
  width: 78px;
  height: 47px;
  border-radius: 50%;
  background: radial-gradient(circle at 20% 50%, #d7dc9e 0 8%, transparent 9%), radial-gradient(circle at 40% 35%, #eef0bd 0 9%, transparent 10%), radial-gradient(circle at 60% 55%, #d9dda1 0 11%, transparent 12%), radial-gradient(circle at 80% 35%, #f0e9b4 0 8%, transparent 9%);
  filter: drop-shadow(0 4px 5px #1a120d);
  opacity: .9;
  pointer-events: none
}

.cluster-a {
  left: 15%;
  top: 55%
}

.cluster-b {
  right: 15%;
  top: 52%;
  transform: scale(.8)
}

.ac-brood-cluster {
  position: absolute;
  z-index: 5;
  right: 23%;
  bottom: 9%;
  width: 95px;
  height: 58px;
  border-radius: 45%;
  background: radial-gradient(ellipse at 15% 55%, #ddd2a7 0 7%, transparent 8%), radial-gradient(ellipse at 28% 40%, #f0e8c6 0 7%, transparent 8%), radial-gradient(ellipse at 43% 58%, #ded5b3 0 8%, transparent 9%), radial-gradient(ellipse at 59% 42%, #efe6c5 0 8%, transparent 9%), radial-gradient(ellipse at 72% 62%, #d6cba4 0 7%, transparent 8%);
  opacity: .93;
  pointer-events: none
}

.ac-build-dock {
  position: absolute;
  z-index: 20;
  right: 8px;
  bottom: 8px;
  width: 205px;
  height: 69px;
  padding: 5px 5px 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  border: 1px solid #777256;
  border-radius: 6px;
  background: linear-gradient(#2a3528, #172018);
  box-shadow: 0 0 0 2px rgba(12, 15, 10, .8), 0 4px 10px rgba(0, 0, 0, .45)
}

.ac-build-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #485443;
  border-radius: 4px;
  background: #1c271c;
  color: #e5ddbd
}

.ac-build-item:hover {
  background: #374833;
  border-color: #8b895f
}

.ac-build-item span {
  height: 28px;
  font-size: 18px;
  line-height: 28px
}

.ac-build-item small {
  font-size: 6px;
  line-height: 1;
  text-align: center;
  color: #ddd5b5;
  white-space: nowrap
}

/* Right council / forecast panels */
.ac-right-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important
}

.ac-council-wrap {
  flex: 1;
  min-height: 0
}

.ac-council-panel {
  height: 100%;
  overflow: hidden
}

.ac-side-title {
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-bottom: 1px solid #656149;
  background: linear-gradient(#263326, #182218);
  font: bold 12px Georgia, serif;
  color: #eee5bc;
  text-shadow: 0 2px #000
}

.ac-side-title small {
  font: normal 7px Arial;
  margin-left: auto;
  color: #aaa58e
}

.ac-council-head {
  height: 20px;
  display: grid;
  grid-template-columns: 1fr 34px 26px;
  align-items: center;
  padding: 0 7px 0 44px;
  color: #9e9a84;
  font-size: 6px;
  border-bottom: 1px solid #354033
}

.ac-council-list {
  padding: 3px 6px 2px;
  overflow: auto;
  max-height: calc(100% - 132px)
}

.ac-council-row {
  height: 38px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 31px 18px;
  gap: 4px;
  align-items: center;
  padding: 2px 3px;
  margin-bottom: 3px;
  border: 1px solid #455142;
  border-radius: 4px;
  background: #1a241a;
  position: relative;
  overflow: hidden
}

.ac-council-row:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #78805d
}

.ac-council-row.good:before {
  background: #729c50
}

.ac-council-row.watch:before {
  background: #b2a351
}

.ac-council-row.danger:before {
  background: #a55745
}

.ac-council-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #677058;
  background: #253122
}

.ac-council-avatar .ac-role-icon {
  width: 19px !important;
  height: 19px !important
}

.ac-council-name {
  min-width: 0
}

.ac-council-name b,
.ac-council-name small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-council-name b {
  font-size: 8px;
  color: #eee7ca
}

.ac-council-name small {
  font-size: 6px;
  color: #a9a58f;
  margin-top: 1px
}

.ac-council-value {
  font: 700 11px Georgia, serif;
  color: #e3d8aa;
  text-align: right
}

.ac-council-map {
  font-size: 9px;
  color: #d8cc9e;
  text-align: center
}

.ac-council-message {
  margin: 3px 6px 4px;
  padding: 5px 6px;
  border-top: 1px solid #394437;
  border-bottom: 1px solid #394437;
  background: rgba(0, 0, 0, .1)
}

.ac-council-message b {
  display: block;
  font-size: 8px;
  color: #e8ddb0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-council-message p {
  font-size: 6px;
  line-height: 1.25;
  color: #aca791;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.ac-council-actions {
  height: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0 6px
}

.ac-council-actions>div {
  display: grid;
  place-items: center;
  border: 1px solid #4d5949;
  border-radius: 3px;
  background: #263425;
  font-size: 7px;
  color: #e1d9b6
}

.ac-council-actions>div:hover {
  background: #394d35
}

.ac-forecast-wrap {
  flex: 0 0 164px;
  min-height: 164px
}

.ac-forecast-panel {
  height: 164px;
  overflow: hidden
}

.ac-mini-map {
  height: 93px;
  margin: 5px 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid #69705b;
  border-radius: 4px;
  background: linear-gradient(140deg, #355c53 0 27%, #779655 28% 46%, #4c7f68 47% 55%, #b2a761 56% 74%, #577b4a 75%);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .35)
}

.ac-mini-map:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12), transparent 25%), repeating-linear-gradient(35deg, transparent 0 17px, rgba(21, 54, 43, .18) 18px 20px);
  pointer-events: none
}

.ac-map-land {
  position: absolute;
  border-radius: 45% 55%;
  background: rgba(116, 139, 65, .55);
  border: 1px solid rgba(207, 206, 137, .25)
}

.land-a {
  left: 7%;
  top: 11%;
  width: 36%;
  height: 47%;
  transform: rotate(-13deg)
}

.land-b {
  right: 7%;
  bottom: 7%;
  width: 38%;
  height: 43%;
  transform: rotate(11deg)
}

.ac-map-river {
  position: absolute;
  left: 46%;
  top: -20%;
  width: 14%;
  height: 145%;
  background: rgba(48, 115, 119, .6);
  transform: rotate(12deg);
  box-shadow: 0 0 0 1px rgba(152, 208, 193, .15)
}

.ac-map-pin {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #e4d99d;
  background: #874c3d;
  color: #fff7d2;
  font: bold 6px Arial;
  box-shadow: 0 2px 4px #000
}

.ac-map-pin.p1 {
  background: #71783f
}

.ac-map-pin.p2 {
  background: #72549c
}

.ac-map-pin.p3 {
  background: #a5893e
}

.ac-map-queen {
  position: absolute;
  z-index: 6;
  left: 51%;
  top: 57%;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #f1dd81;
  background: #324129;
  color: #f4da77;
  box-shadow: 0 0 8px #fff1a044
}

.ac-map-loading {
  display: grid;
  place-items: center;
  color: #d6cead;
  font-size: 8px
}

.ac-forecast-summary {
  height: 21px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 6px
}

.ac-forecast-summary span {
  font-size: 6px;
  color: #aaa58c;
  text-align: center
}

.ac-forecast-summary b {
  display: block;
  font: 700 9px Georgia, serif;
  color: #e6dab1
}

.ac-forecast-action {
  height: 18px;
  margin: 2px 6px 0;
  display: grid;
  place-items: center;
  border: 1px solid #4b5747;
  border-radius: 3px;
  background: #243323;
  color: #d9d1aa;
  font-size: 7px
}

/* Bottom command / research bar */
.ac-bottom-bar {
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  grid-template-columns: 118px 72px minmax(255px, 1fr) minmax(180px, .9fr) 34px;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-top: 1px solid #68634a;
  background: linear-gradient(180deg, #1d281c, #111811);
  box-shadow: 0 -3px 9px rgba(0, 0, 0, .42);
  z-index: 40
}

.ac-bottom-left-controls {
  display: flex;
  gap: 4px
}

.ac-bottom-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #5c6251;
  border-radius: 4px;
  background: #202c20;
  color: #d9d1ad;
  font-size: 9px
}

.ac-bottom-icon.ac-play {
  color: #e5d17f
}

.ac-bottom-turn {
  height: 28px;
  display: grid;
  grid-template-columns: 1fr 18px 18px;
  align-items: center;
  border-left: 1px solid #3e473c;
  padding-left: 5px
}

.ac-bottom-turn b {
  font: 700 18px Georgia, serif;
  text-align: center;
  color: #e6dcaf
}

.ac-bottom-turn span {
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #bdb89e
}

.ac-bottom-research {
  height: 33px;
  display: grid;
  grid-template-columns: 47px 1fr;
  gap: 6px;
  align-items: center;
  padding: 2px 7px;
  border-left: 1px solid #424a3c;
  border-right: 1px solid #424a3c
}

.ac-bottom-research>span {
  font-size: 7px;
  color: #b8b199;
  text-align: right
}

.ac-bottom-research b,
.ac-bottom-research small {
  display: block
}

.ac-bottom-research b {
  font-size: 7px;
  color: #e0d6aa
}

.ac-bottom-research i {
  display: block;
  height: 4px;
  border: 1px solid #53553f;
  background: #282a20;
  margin: 2px 0
}

.ac-bottom-research em {
  display: block;
  height: 100%;
  background: #8ba35b
}

.ac-bottom-research small {
  font-size: 6px;
  color: #888775
}

.ac-bottom-signal {
  min-width: 0
}

.ac-bottom-signal span,
.ac-bottom-signal small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ac-bottom-signal span {
  font-size: 7px;
  color: #e2d6a6;
  font-weight: 800
}

.ac-bottom-signal small {
  font-size: 6px;
  color: #aaa58d;
  margin-top: 2px
}

.ac-bottom-info {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #6a6550;
  border-radius: 50%;
  font: bold 13px Georgia, serif;
  color: #ddcf95
}

/* Refit modal visual language to the command UI */
.ac-modal-layer {
  z-index: 100 !important
}

.ac-modal-card {
  border-radius: 8px !important;
  border-color: #777052 !important;
  background: linear-gradient(#263225, #141c14) !important;
  box-shadow: 0 0 0 2px #0c100b, 0 18px 55px rgba(0, 0, 0, .72) !important
}

.ac-modal-head h2,
.ac-modal-card>h2 {
  font-family: Georgia, serif !important;
  color: #eee4ba !important
}

.ac-modal-x {
  border-radius: 4px !important
}

.ac-btn {
  border-radius: 4px !important;
  min-height: 34px !important;
  font-size: 10px !important
}

.ac-btn-primary {
  background: linear-gradient(#8a945a, #56643e) !important;
  color: #fff5ca !important;
  border-color: #9c9767 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important
}

.ac-btn-ghost {
  background: #202b20 !important;
  border-color: #4d5949 !important
}

.ac-toast {
  border-radius: 4px !important;
  background: #223020 !important;
  border-color: #756e51 !important;
  font-size: 9px !important;
  bottom: 48px !important
}

/* Founding view: keep the same game shell but use the tighter command palette */
.ac-founding {
  padding: 14px !important;
  background-color: #172116 !important
}

.ac-founding-copy,
.ac-map-wrap,
.ac-site-card {
  border-radius: 7px !important;
  border-color: #68644c !important;
  background: rgba(22, 31, 21, .96) !important
}

.ac-scenario-pill,
.ac-site-tile,
.ac-move,
.ac-queen-pad,
.ac-site-prediction {
  border-radius: 4px !important
}

.ac-founding-copy h1,
.ac-site-card h2 {
  font-family: Georgia, serif !important;
  color: #eee5bc !important
}

/* Compact desktop behaviour matching the supplied 1024×576 composition */
@media (max-width:1180px) and (min-width:781px) {
  .ac-civ-grid {
    grid-template-columns: minmax(250px, 28.5%) minmax(405px, 46.5%) minmax(220px, 25%) !important;
    gap: 5px !important;
    padding: 4px 6px 3px !important
  }

  .ac-top-left {
    gap: 5px
  }

  .ac-civ-stat {
    font-size: 9px
  }

  .ac-turn-stat {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .ac-resource {
    padding: 0 4px
  }

  .ac-resource b {
    font-size: 8px
  }

  .ac-resource small {
    font-size: 7px
  }

  .ac-top-right {
    gap: 2px
  }

  .ac-top-icon {
    width: 21px;
    height: 21px
  }

  .ac-panel-titlebar {
    height: 41px
  }

  .ac-civ-tabs {
    height: 40px !important
  }

  .ac-civ-left-content {
    height: calc(100% - 81px) !important;
    padding: 7px 8px 9px !important
  }

  .ac-unit-row {
    height: 43px
  }

  .ac-council-row {
    height: 35px
  }

  .ac-council-list {
    max-height: calc(100% - 128px)
  }

  .ac-forecast-wrap,
  .ac-forecast-panel {
    flex-basis: 156px;
    min-height: 156px;
    height: 156px
  }

  .ac-mini-map {
    height: 87px
  }

  .ac-build-dock {
    width: 198px;
    height: 66px
  }
}

@media (max-width:940px) and (min-width:781px) {
  .ac-civ-grid {
    grid-template-columns: 255px minmax(390px, 1fr) 205px !important
  }

  .ac-topbar {
    grid-template-columns: 43% 14% 43% !important
  }

  .ac-larvae small,
  .ac-resource small {
    display: none
  }

  .ac-queen-stat .ac-mini-bar {
    width: 48px
  }

  .ac-council-message {
    display: none
  }

  .ac-council-list {
    max-height: calc(100% - 87px)
  }

  .ac-council-actions {
    margin-top: 3px
  }

  .ac-bottom-bar {
    grid-template-columns: 105px 58px minmax(220px, 1fr) 140px 28px;
    gap: 4px
  }
}

/* Mobile turns the same panels into a stacked command deck instead of shrinking text to illegibility. */
@media (max-width:780px) {
  .ac-root {
    overflow: hidden !important
  }

  .ac-civ-topbar {
    height: 52px !important;
    flex-basis: 52px !important;
    grid-template-columns: 1fr auto !important;
    padding: 0 7px !important
  }

  .ac-top-left {
    gap: 5px
  }

  .ac-turn-emblem,
  .ac-queen-stat,
  .ac-resource,
  .ac-top-brand {
    display: none !important
  }

  .ac-top-right {
    grid-column: 2
  }

  .ac-top-icon {
    width: 30px;
    height: 30px
  }

  .ac-civ-stat {
    font-size: 10px
  }

  .ac-civ-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    padding: 5px !important
  }

  .ac-left-panel {
    order: 2;
    flex: 0 0 410px !important
  }

  .ac-colony-world {
    order: 1;
    flex: 0 0 470px !important;
    min-height: 470px !important
  }

  .ac-right-panel {
    order: 3;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex: 0 0 325px !important;
    overflow: visible !important
  }

  .ac-council-wrap,
  .ac-forecast-wrap {
    min-height: 0 !important;
    height: 100% !important
  }

  .ac-council-panel,
  .ac-forecast-panel {
    height: 100% !important
  }

  .ac-council-list {
    max-height: 175px
  }

  .ac-mini-map {
    height: 180px
  }

  .ac-build-dock {
    right: 6px;
    bottom: 6px
  }

  .ac-bottom-bar {
    height: 48px;
    flex-basis: 48px;
    grid-template-columns: 108px 55px 1fr 28px;
    gap: 3px;
    padding: 0 5px
  }

  .ac-bottom-signal {
    display: none
  }

  .ac-bottom-research {
    grid-template-columns: 40px 1fr;
    padding: 1px 4px
  }

  .ac-modal-layer {
    position: fixed !important
  }
}

@media (max-width:520px) {
  .ac-left-panel {
    flex-basis: 430px !important
  }

  .ac-colony-world {
    flex-basis: 400px !important;
    min-height: 400px !important
  }

  .ac-right-panel {
    grid-template-columns: 1fr !important;
    flex-basis: 610px !important
  }

  .ac-council-wrap {
    height: 360px !important
  }

  .ac-forecast-wrap {
    height: 240px !important
  }

  .ac-council-list {
    max-height: 215px
  }

  .ac-mini-map {
    height: 160px
  }

  .ac-bottom-bar {
    grid-template-columns: 92px 48px 1fr 26px
  }

  .ac-bottom-icon {
    width: 21px;
    height: 21px
  }

  .ac-bottom-left-controls {
    gap: 2px
  }

  .ac-bottom-research>span {
    display: none
  }

  .ac-bottom-research {
    grid-template-columns: 1fr
  }

  .ac-build-dock {
    width: 190px;
    height: 62px
  }

  .ac-unit-row {
    grid-template-columns: 32px minmax(0, 1fr) 24px 43px 11px
  }

  .ac-signal-chip-grid {
    grid-template-columns: 1fr 1fr
  }

  .ac-active-signals {
    grid-template-columns: 1fr
  }

  .ac-panel-titlebar b {
    font-size: 13px
  }
}