@import url('/attack-readiness-v2.css');

/* Mirror the global round bar: inline groups and the same gold separators. */
body[data-page="attack"] .war-readiness {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  height: 46px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
}

body[data-page="attack"] .war-readiness::-webkit-scrollbar { display: none; }

body[data-page="attack"] .war-readiness > strong,
body[data-page="attack"] .war-readiness > span {
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  text-align: left;
}

body[data-page="attack"] .war-readiness > strong:not(:last-child)::after,
body[data-page="attack"] .war-readiness > span:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 0;
  width: 1px;
  height: 22px;
  background: #f4c75f;
  opacity: .38;
}

body[data-page="attack"] .war-readiness > strong {
  color: #f4c75f;
  font: 900 9px/1 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .1em;
}

body[data-page="attack"] .war-readiness small {
  color: #9da8aa;
  font: 800 9px/1 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .1em;
}

body[data-page="attack"] .war-readiness b {
  margin: 0;
  color: #f5dfb2;
  font: 900 13px/1 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1050px) {
  body[data-page="attack"] .war-readiness { display: flex; width: auto; }
  body[data-page="attack"] .war-readiness > strong { display: flex; }
  body[data-page="attack"] .war-readiness > strong,
  body[data-page="attack"] .war-readiness > span { padding-inline: 14px; }
}

@media (max-width: 700px) {
  body[data-page="attack"] .war-readiness { display: flex; width: 100%; }
  body[data-page="attack"] .war-readiness > strong,
  body[data-page="attack"] .war-readiness > span {
    min-width: max-content;
    padding-inline: 12px;
  }
  body[data-page="attack"] .war-readiness b { font-size: 12px; }
}