/* the War Table: its home button, the lobby and the battle */
.pad-mode .war-battle .war-canvas { height: calc(100% - 36px); }
.war-defense { display: block; margin-top: 6px; color: #b7cbb8 !important; line-height: 1.45; }
.war-detail { position: absolute; z-index: 4; top: 16px; left: 12px; width: clamp(155px, 16vw, 220px);
  max-height: 42%; overflow: auto; padding: 14px; background: #17141ef5; border: 1px solid #8a7350;
  border-radius: 10px; box-shadow: 0 8px 24px #0008; color: #e9dfce; font: 12px/1.55 Arial, sans-serif; }
.war-detail[hidden] { display: none; }
.war-detail-title { display: block; padding-right: 16px; color: #ffd9a0; letter-spacing: .6px; }
.war-detail-text { margin: 8px 0 0; }
.war-detail-close { position: absolute; right: 5px; top: 3px; border: 0; background: transparent;
  color: #e9dfce; font-size: 24px; padding: 0 6px; cursor: pointer; }
.war-inspect.on { border-color: #92e8b0; color: #92e8b0; }
.war-record p { border-bottom: 1px solid #ffffff12; padding-bottom: 8px; }
@media(max-width:760px), (max-height:520px) {
  .war-detail { top: 64px; left: 12px; width: min(300px, calc(100% - 24px)); max-height: 45%; }
}
@media (max-height:520px) and (min-width:600px) {
  .war-detail { top: 104px; max-height: calc(100% - 116px); }
}
.menu-side-row .menu-war {
  grid-column: 2;
  order: 1;
  padding: 10px 8px;
  gap: 6px;
}
/* three across on the second row: the mine, the table, the map */
.menu-side-row:has(.menu-war) .menu-mine {
  grid-column: 1;
}
.menu-side-row:has(.menu-war) .menu-mine .menu-text,
.menu-side-row .menu-war .menu-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.menu-side-row:has(.menu-war) .menu-mine .menu-text small,
.menu-side-row .menu-war .menu-text small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu-war {
  position: relative;
  min-width: 0;
  border-color: rgba(230, 150, 110, 0.5);
  background: linear-gradient(90deg, rgba(70, 30, 26, 0.8), rgba(20, 16, 30, 0.45));
}
.menu-war .menu-icon {
  width: 22px;
  height: 22px;
  color: #ffb08a;
}
.menu-war .menu-text b {
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.menu-war:hover,
.menu-war:focus-visible {
  border-color: #ffb08a;
  box-shadow: -4px 0 0 #e0764a inset;
}
@media (max-height: 520px) {
  .menu-side-row:has(.menu-war) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
  }
  .menu-side-row .menu-war,
  .menu-side-row:has(.menu-war) .menu-mine {
    grid-column: auto;
    order: 0;
  }
  .menu-side-row .menu-war .menu-text small {
    display: none;
  }
}

.screen-war {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 50, 30, 0.28), transparent 60%),
    linear-gradient(180deg, #120e14, #07060a);
}
.war {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  animation: screenIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.war-lobby {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px;
  overflow: auto;
}
.war-lobby[hidden],
.war-battle[hidden],
.war-veil[hidden] {
  display: none;
}
.war-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.war-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 138, 0.4);
  background: rgba(40, 20, 18, 0.7);
  color: #ffd9c2;
  font:
    700 12px Arial,
    sans-serif;
  white-space: nowrap;
}
.war-cols {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(300px, 1fr);
  gap: 16px;
  min-height: 0;
}
.war-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), rgba(14, 12, 18, 0.82);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.war-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #ffb08a;
  font:
    800 12px Arial,
    sans-serif;
  letter-spacing: 3px;
}
.war-panel-title span {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  font-size: 11px;
}

/* the day's bounty, across the top */
.war-bounty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 209, 102, 0.45);
  background: linear-gradient(90deg, rgba(90, 60, 14, 0.6), rgba(30, 22, 16, 0.5) 60%);
}
.war-bounty.done {
  border-color: rgba(95, 232, 180, 0.4);
  background: linear-gradient(90deg, rgba(20, 70, 50, 0.55), rgba(16, 24, 22, 0.5) 60%);
}
.war-bounty-coin {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b0, #e9a62b 55%, #8a5a10);
  box-shadow: 0 0 14px rgba(255, 200, 80, 0.55);
  color: transparent;
}
.war-bounty.done .war-bounty-coin {
  background: radial-gradient(circle at 35% 30%, #d8ffe9, #5fe8b4 55%, #1f7a58);
  box-shadow: 0 0 14px rgba(95, 232, 180, 0.5);
}
.war-bounty-text {
  flex: 1;
  min-width: 0;
}
.war-bounty-text b {
  display: block;
  color: #ffe7a0;
  font:
    800 12px Arial,
    sans-serif;
  letter-spacing: 2px;
}
.war-bounty.done .war-bounty-text b {
  color: #9af3d0;
}
.war-bounty-text small {
  color: rgba(255, 255, 255, 0.72);
  font:
    12px Arial,
    sans-serif;
}
.war-bounty-pips {
  display: flex;
  gap: 8px;
  flex: none;
}
.war-bounty-pips i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 209, 102, 0.45);
}
.war-bounty-pips i.on {
  background: #ffd166;
  border-color: #ffd166;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.8);
}
.war-bounty.done .war-bounty-pips i.on {
  background: #5fe8b4;
  border-color: #5fe8b4;
  box-shadow: 0 0 10px rgba(95, 232, 180, 0.8);
}

/* your side: the commander and the units to choose from */
.war-mine {
  overflow: auto;
}
.war-mine-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(40, 60, 100, 0.45), rgba(20, 16, 24, 0.3));
  border: 1px solid rgba(120, 170, 255, 0.2);
}
.war-me {
  width: 86px;
  height: 96px;
  flex: none;
}
.war-who {
  flex: 1;
  min-width: 0;
}
.war-who b {
  display: block;
  color: #fff;
  font:
    700 21px Georgia,
    serif;
}
.war-who small {
  color: #cfe0ff;
  font:
    700 12px Arial,
    sans-serif;
}
.war-help-btn {
  flex: none;
  align-self: center;
  padding: 10px 14px;
  min-width: 0;
  font-size: 11px;
}
.war-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  color: #ffb08a;
  font:
    800 11px Arial,
    sans-serif;
  letter-spacing: 2px;
}
.war-group-head span {
  color: #5fe8b4;
  letter-spacing: 0.5px;
}
.war-group-head.short span {
  color: #ffd166;
}
.war-ranks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
/* a unit to pick: a card with its picture, dim until it's in */
.war-unit {
  --tint: #d8c4ff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  text-align: center;
  cursor: pointer;
  opacity: 0.55;
  transition:
    transform 0.15s,
    opacity 0.15s,
    box-shadow 0.15s;
}
.war-unit:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.war-unit.on {
  border-color: var(--tint);
  background:
    radial-gradient(
      ellipse at 50% 100%,
      color-mix(in srgb, var(--tint) 28%, transparent),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tint) 35%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 1;
}
.war-unit.full {
  animation: war-unit-no 0.3s;
}
@keyframes war-unit-no {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.war-unit-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font:
    800 12px/18px Arial,
    sans-serif;
  font-style: normal;
}
.war-unit.on .war-unit-check {
  background: var(--tint);
  border-color: var(--tint);
  color: #16101a;
}
.war-unit-tag {
  position: absolute;
  top: 7px;
  left: 8px;
  color: rgba(255, 255, 255, 0.5);
  font:
    800 9px Arial,
    sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.war-unit.on .war-unit-tag {
  color: var(--tint);
}
.war-unit-pic {
  width: 64px;
  height: 64px;
  margin-top: 8px;
}
.war-unit-elite .war-unit-pic,
.war-unit-champ .war-unit-pic {
  width: 74px;
  height: 74px;
  margin-top: 2px;
}
.war .war-unit b {
  display: block;
  color: #fff;
  font:
    700 13px Arial,
    sans-serif;
}
.war .war-unit .war-unit-stats {
  display: flex;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font:
    700 10.5px Arial,
    sans-serif;
}
.war .war-unit .war-knack {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font:
    10.5px/1.3 Arial,
    sans-serif;
}
.war .war-unit .war-knack b {
  display: block;
  margin: 2px 0 1px;
  color: #ffd9a0;
  font:
    800 10.5px Arial,
    sans-serif;
}
.war-note {
  padding: 8px 12px;
  color: #ffd166;
  text-align: center;
  font:
    700 12px Arial,
    sans-serif;
}

/* the ladder: who's across the table, a rung each */
.war-ladder {
  overflow: auto;
}
.war-rungs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.war-rungs::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, #5fe8b4, rgba(255, 176, 138, 0.3));
}
.war-rival {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 30px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(90deg, rgba(60, 26, 28, 0.55), rgba(20, 16, 24, 0.5));
}
.war-rung {
  position: absolute;
  left: -30px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 176, 138, 0.5);
  background: #16121c;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font:
    800 10px/18px Arial,
    sans-serif;
  font-style: normal;
  transform: translateX(-11px);
}
.war-rival.beaten .war-rung {
  border-color: #5fe8b4;
  background: #1f7a58;
  color: #fff;
}
.war-rival.next .war-rung {
  border-color: #ffd166;
  color: #ffd166;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.7);
}
.war-rival.next {
  border-color: rgba(255, 209, 102, 0.6);
  background: linear-gradient(90deg, rgba(90, 50, 24, 0.6), rgba(24, 18, 26, 0.5));
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.25);
}
.war-rival.locked {
  opacity: 0.55;
  background: rgba(20, 18, 24, 0.5);
}
.war-rival.beaten {
  border-color: rgba(95, 232, 180, 0.4);
}
.war-face-frame {
  position: relative;
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 12px;
  border: 2px solid rgba(210, 88, 94, 0.6);
  background: radial-gradient(circle at 50% 30%, #6a2830, #2a1016);
  overflow: hidden;
}
.war-rival.beaten .war-face-frame {
  border-color: rgba(95, 232, 180, 0.6);
}
.war-face {
  width: 100%;
  height: 100%;
}
.war-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.war-rival-text {
  flex: 1;
  min-width: 0;
}
.war-rival-text b {
  display: block;
  color: #fff;
  font:
    700 17px Georgia,
    serif;
}
.war-rival-text small {
  color: rgba(255, 255, 255, 0.6);
  font:
    12px Arial,
    sans-serif;
}
.war-rival-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  color: #ffb0a8;
  font:
    700 12px Arial,
    sans-serif;
}
.war-rival-stats .coins {
  color: #ffd166;
}
.war-rival-stats .won {
  color: #5fe8b4;
}
.war-brings {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.war-brings-pic {
  width: 30px;
  height: 30px;
  flex: none;
}
.war-fight {
  flex: none;
  min-width: 96px;
}
.war-rival.next .war-fight {
  border-color: #ffd166;
  color: #ffe7a0;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.35);
}

.war-battle {
  position: absolute;
  inset: 0;
}
.war-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.war-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(8, 6, 12, 0.92), rgba(8, 6, 12, 0));
  pointer-events: none;
}
.war-bar > * {
  pointer-events: auto;
}
.war-bar .hub-btn { min-width: 0; }
.war-bar-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.war-info {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.8);
  font:
    700 12px Arial,
    sans-serif;
  text-align: center;
  pointer-events: none;
}
.war-small {
  padding: 8px 12px;
  font-size: 11px;
}
.war-act {
  padding: 10px 16px;
  font-size: 12px;
}
.war-act.on {
  border-color: #ff6a5a;
  color: #ffb0a8;
  box-shadow: 0 0 0 2px rgba(255, 106, 90, 0.4);
}
.war-act:disabled {
  opacity: 0.4;
}
/* your commander's power: dim while it fills, lit when it's ready to go */
.war-power {
  border-color: rgba(200, 170, 255, 0.45);
  color: rgba(220, 205, 255, 0.75);
  white-space: nowrap;
}
.war-power.ready {
  border-color: #fff;
  color: #fff;
  background: linear-gradient(180deg, rgba(160, 110, 255, 0.55), rgba(90, 50, 190, 0.55));
  box-shadow: 0 0 14px rgba(180, 140, 255, 0.8);
  animation: war-power-beat 1.1s ease-in-out infinite;
}
@keyframes war-power-beat {
  50% {
    box-shadow: 0 0 22px rgba(210, 180, 255, 1);
  }
}
.war .war-power-line {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.62);
  font:
    600 11px/1.35 Arial,
    sans-serif;
}
.war .war-power-line b {
  display: inline;
  margin-right: 6px;
  color: #d8c4ff;
  font:
    800 11px/1.35 Arial,
    sans-serif;
  letter-spacing: 0.3px;
}
.war-end {
  border-color: #ffd166;
  color: #ffe7a0;
}
.war-pips {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
}
.war-pips small {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.6);
  font:
    800 10px Arial,
    sans-serif;
  letter-spacing: 1.5px;
}
.war-pips i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 209, 102, 0.5);
}
.war-pips i.on {
  background: #ffd166;
  border-color: #ffd166;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.7);
}

.war-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 4, 10, 0.72);
}
.war-modal {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 176, 138, 0.45);
  background: linear-gradient(160deg, #241820, #120e16);
  color: rgba(255, 255, 255, 0.82);
  font:
    13px/1.5 Arial,
    sans-serif;
}
.war-modal h3 {
  margin: 0 0 10px;
  color: #ffe7b8;
  font:
    700 24px Georgia,
    serif;
  letter-spacing: 2px;
}
.war-modal p {
  margin: 0 0 9px;
}
.war-modal p b {
  display: block;
  color: #ffb08a;
}
.war-result {
  text-align: center;
}
.war-result.won h3 {
  color: #ffd166;
}
.war-result.lost h3 {
  color: #ff8a7a;
}
.war-result .coins {
  color: #ffd166;
  font:
    800 18px Arial,
    sans-serif;
}
.war-result .opened {
  color: #5fe8b4;
  font-weight: 700;
}
.war-result .dim {
  color: rgba(255, 255, 255, 0.5);
}
.war-result-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 760px), (max-height: 460px) {
  .war-lobby {
    padding: 12px;
  }
  .war-cols {
    grid-template-columns: 1fr;
  }
  .war-mine {
    overflow: visible;
  }
  .war-mine-head,
  .war-rival {
    flex-wrap: wrap;
  }
  .war-mine-head {
    gap: 10px;
  }
  .war-who {
    flex: 1 1 160px;
  }
  .war-who b {
    font-size: 18px;
  }
  .war-help-btn {
    flex: 1 1 100%;
    margin: 0;
  }
  .war-fight {
    flex: 1 1 100%;
  }
  .war-bounty {
    flex-wrap: wrap;
  }
  .war-ranks {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .war-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
  }
  .war-info {
    order: 3;
    flex-basis: 100%;
    font-size: 11px;
  }
  .war-act {
    padding: 8px 10px;
    font-size: 11px;
  }
}
/* A phone held upright: inspection controls above the turn controls. */
@media (max-width: 599px) {
  .war .screen-head {
    flex-wrap: wrap;
  }
  .war .war-chips {
    width: 100%;
    justify-content: flex-start;
  }
  .war-bar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
  }
  .war-bar-side {
    display: contents;
  }
  .war-bar .hub-btn {
    min-width: 0;
  }
  .war-small {
    grid-row: 1;
    grid-column: span 3;
  }
  .war-pips {
    grid-row: 2;
    grid-column: span 2;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
  }
  .war-pips small {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
  }
  .war-act {
    grid-row: 2;
    grid-column: span 2;
    padding: 8px 4px;
    font-size: 10.5px;
    letter-spacing: 0.3px;
  }
  .war-act.war-power {
    grid-row: 2;
    grid-column: span 4;
  }
  .war-info {
    grid-row: 3;
    grid-column: 1 / -1;
  }
}
/* no height to spare: the buttons go down the right-hand side, under the rival */
@media (max-height: 520px) and (min-width: 600px) {
  .war-bar {
    top: 0;
    left: auto;
    width: 150px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: stretch;
    background: none;
  }
  .war-bar-side {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .war-bar-side:first-child {
    position: fixed;
    left: 8px;
    top: 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 142px;
  }
  .war-info {
    display: none;
  }
  .war-pips {
    justify-content: center;
    margin: 0 0 2px;
  }
}

/* Readable roster: identity, comparable numbers, then clearly separated abilities. */
.war-lobby, .war-mine, .war-rungs { overflow-anchor: none; }
.war-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.war-unit { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px;
  padding: 14px; text-align: left; align-items: start; opacity: 1;
  background: #191720; border-color: #ffffff21; border-radius: 12px; }
.war-unit:hover { background: #24212d; transform: none; opacity: 1; }
.war-unit.on { background: linear-gradient(120deg, #28312f, #1b1b24); box-shadow: inset 3px 0 var(--tint); }
.war-unit:focus-visible { outline: 2px solid #fff2c5; outline-offset: 3px; }
.war-unit .war-unit-pic { width: 60px; height: 68px; margin: 0; }
.war-unit-identity { align-self: center; padding-right: 14px; }
.war-unit .war-unit-tag { position: static; display: block; font-size: 9px; color: #b8afc9; margin-bottom: 7px; }
.war .war-unit .war-unit-identity > b { font: 700 17px Georgia, serif; }
.war-unit-stats, .war .war-unit .war-unit-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  grid-column: 1 / -1; gap: 0; width: 100%; background: #0d0c13; border: 1px solid #ffffff12; border-radius: 8px; }
.war-stat { display: flex; flex-direction: column; align-items: center; padding: 9px 2px; gap: 3px; border-right: 1px solid #ffffff12; }
.war-stat:last-child { border: 0; }
.war-stat b, .war .war-unit .war-stat b { font: 800 20px Arial,sans-serif; color: #ffe1a3; }
.war-stat small { font: 700 8px Arial,sans-serif; color: #b5b0c1; letter-spacing: .5px; white-space: nowrap; }
.war .war-unit .war-knack { grid-column: 1 / -1; font: 12px/1.5 Arial,sans-serif; color: #d1cbd9; }
.war-ability { display: block; padding: 9px 0; border-bottom: 1px solid #ffffff10; }
.war-ability:last-child { border-bottom: 0; }
.war-ability > b, .war .war-unit .war-ability > b { display: block; color: #f0cf96; font: 700 12px Arial,sans-serif; margin: 0 0 4px; }
.war-ability > span { display: block; }
.war-unit-setup { grid-column: 1 / -1; font: 700 10px/1.5 Arial,sans-serif; color: #a5bcae; padding-top: 8px; border-top: 1px solid #ffffff15; }
.war-unit .war-unit-check { top: 10px; right: 10px; }
.war-detail { width: clamp(205px, 22vw, 290px); max-height: 52%; }
.war-estimate { background: #30291e; border-left: 2px solid #e6b869; padding: 9px; }
.war-fusion-label { color: #b4eed0; font-weight: 700; }
@media (max-width:760px) { .war-detail { width: min(310px, calc(100% - 24px)); } }
@media (max-width:480px) {
  .war-ranks { grid-template-columns: 1fr; }
  .war-panel { padding: 12px; }
  .war-unit { grid-template-columns: 68px minmax(0,1fr); }
  .war-unit .war-unit-pic { width: 68px; height: 72px; }
  .war-group-head { letter-spacing: .6px; font-size: 10px; }
}

/* The three doors into the War Table. */
.war-lobby { background: radial-gradient(ellipse at 80% 0%,#3d303544,transparent 55%),
  repeating-linear-gradient(90deg,transparent 0 119px,#e8c69003 120px); gap:16px; }
.war-lobby > * { width:100%; max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; flex-shrink:0; }
.war-lobby .screen-head { margin-bottom:0; }
.war-menu-rules { font-size:10px; padding:7px 12px; }
.war-menu-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.war-menu-tabs .war-menu-tab { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr);
  gap:6px 10px; padding:16px 18px; text-align:left; white-space:normal; min-width:0;
  border:1px solid #66554666; border-radius:12px; background:#171820; color:#cac5c2;
  box-shadow:none; letter-spacing:0; transition:background .18s,border-color .18s; }
.war-menu-tab .war-tab-number { grid-row:1/3; align-self:center; font:italic 23px Georgia,serif; color:#827563; }
.war-menu-tab b { font:700 18px Georgia,serif; color:inherit; }
.war-menu-tab small { font:11px/1.4 Arial,sans-serif; color:#a8a7ae; }
.war-menu-tabs .war-menu-tab.selected { border-color:#dfb878; background:linear-gradient(120deg,#483824,#201c23);
  color:#ffe0a5; box-shadow:inset 0 -3px #d6aa69,0 7px 24px #0003; }
.war-menu-tab.selected .war-tab-number { color:#f0c37a; }
.war-menu-tab:focus-visible,.war-daily-start:focus-visible { outline:2px solid #fff1c9; outline-offset:3px; }
.war-menu-panel { min-width:0; }
.war-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:4px 0 18px; }
.war-section-heading h3 { margin:0 0 7px; color:#f1dec1; font:700 27px Georgia,serif; }
.war-section-heading p { margin:0; color:#b1aaba; font:13px/1.5 Arial,sans-serif; }
.war-date { color:#b9b2a5; font:11px/1.5 Arial,sans-serif; text-align:right; flex-shrink:0; }
.war-daily-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.war-challenge-card { position:relative; min-width:0; overflow:hidden; text-align:center; padding:17px 20px 0;
  border:1px solid #75644d70; border-radius:16px; background:radial-gradient(ellipse at 50% 37%,#756a5438,transparent 65%),#18171f;
  box-shadow:0 12px 22px #0003; }
.war-challenge-card.current { border-color:#d8b16b; background:radial-gradient(ellipse at 50% 35%,#8b653d65,transparent 68%),#211b22; }
.war-challenge-card.complete { border-color:#77b699; background:radial-gradient(ellipse at 50% 35%,#38796240,transparent 65%),#171f22; }
.war-stage-top { display:flex; align-items:center; gap:10px; text-align:left; font:700 10px Arial,sans-serif; letter-spacing:2px; color:#b3a18c; }
.war-stage-number { width:31px; height:31px; display:grid; place-items:center; border:1px solid #b0946570;
  border-radius:50%; color:#d9bd93; font:italic 16px Georgia,serif; letter-spacing:0; }
.complete .war-stage-number { background:#79b699; color:#12211b; border-color:#79b699; }
.current .war-stage-top { color:#efc786; }
.war-challenger-art { display:block; width:140px; height:125px; margin:0 auto; filter:drop-shadow(0 8px 6px #0006); }
.war-challenge-card h4 { margin:0 0 7px; color:#f2e3ce; font:700 21px Georgia,serif; }
.war-challenger-army { margin:0 0 13px; color:#aa9fb3; font:12px Arial,sans-serif; }
.war-challenge-stats { display:flex; justify-content:center; gap:12px; color:#dbbf99; font:700 11px Arial,sans-serif; }
.war-challenge-power { display:block; color:#aaa8b5; font:11px Arial,sans-serif; margin:11px 0 15px; }
.war-stage-state { margin:0 -20px; padding:11px; background:#0e101866; border-top:1px solid #dac19e16;
  color:#a79cac; font:700 10px Arial,sans-serif; letter-spacing:1px; }
.current .war-stage-state { color:#ffe0a0; background:#a67d3b22; }
.complete .war-stage-state { color:#9fdfbf; }
.war-challenge-action { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 4px 4px; }
.war-challenge-action b { display:block; color:#e1c99f; font:700 15px Georgia,serif; margin-bottom:6px; }
.war-challenge-action small { color:#aaa6b2; font:12px/1.5 Arial,sans-serif; }
.war-challenge-action .war-daily-start { flex-shrink:0; border:1px solid #deb771; border-radius:9px; padding:15px 24px;
  background:linear-gradient(#dabb81,#ac8650); color:#221a1c; font:800 12px Arial,sans-serif; letter-spacing:1px; box-shadow:0 5px 18px #0005; }
.war-daily-start:hover { filter:brightness(1.12); }
.war-company-strip { display:flex; align-items:center; gap:18px; padding:12px 18px; border:1px solid #85998938;
  border-radius:13px; background:linear-gradient(110deg,#22312b70,#151820); }
.war-company-copy { flex:1; }
.war-company-copy b { display:block; font:700 10px Arial,sans-serif; color:#a4c7b4; letter-spacing:2px; margin-bottom:7px; }
.war-company-copy small { font:12px/1.5 Arial,sans-serif; color:#c8c6ca; }
.war-company-faces { display:flex; gap:4px; }
.war-company-pic { width:46px; height:49px; }
.war-edit-loadout { flex-shrink:0; padding:10px 12px; font-size:10px; }
.war-menu-rewards { display:flex; gap:12px; align-items:center; padding:0 4px; color:#baae99; font:11px/1.5 Arial,sans-serif; }
.war-menu-rewards small { margin-left:auto; color:#898493; font-size:10px; }
.war-menu-rewards .war-bounty-pips { gap:4px; }
.war-menu-rewards .war-bounty-pips i { width:9px; height:9px; border-width:1px; }
.war-free-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.war-free-grid::before { display:none; }
.war-free-grid .war-rival { margin:0; min-width:0; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; padding:18px; gap:10px;
  border:1px solid #75644d55; background:radial-gradient(ellipse at 50% 0,#51433244,transparent 55%),#18171f; }
.war-opponent-tier { font:700 9px Arial,sans-serif; color:#b5a17f; letter-spacing:2px; }
.war-opponent-art { display:block; width:112px; height:96px; align-self:center; }
.war-free-rival .war-rival-text { width:100%; min-width:0; }
.war-free-rival .war-rival-text > b { font:700 19px Georgia,serif; }
.war-free-rival .war-rival-text > small { font-size:11px; margin-top:5px; }
.war-free-rival .war-rival-stats { margin:12px 0; flex-wrap:wrap; }
.war-free-rival .war-fight { width:100%; flex:0 0 auto; margin-top:auto; border-radius:8px; }
.war-opponent-details { font:11px/1.5 Arial,sans-serif; color:#b0a6bc; margin-bottom:5px; }
.war-opponent-details summary { cursor:pointer; padding:6px 0; color:#c6ba9e; }
.war-opponent-details .war-brings { flex-wrap:wrap; }
.war-menu-panel > .war-mine { max-height:calc(100dvh - 285px); min-height:240px; overflow:auto; }
.war-menu-panel .war-ranks { grid-template-columns:repeat(3,minmax(0,1fr)); }
.war-route-result { color:#efcf95 !important; }
@media(min-width:1500px) { .war-challenger-art { height:160px; width:170px; } .war-challenge-card h4 { font-size:24px; } }
@media(max-width:900px) {
  .war-menu-panel .war-ranks,.war-free-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .war-menu-tabs .war-menu-tab { padding:14px 12px; grid-template-columns:22px minmax(0,1fr); gap:5px; }
  .war-menu-tab b { font-size:16px; }
  .war-menu-tab small { font-size:10px; }
  .war-challenge-card { padding-left:12px; padding-right:12px; }
  .war-challenge-card h4 { font-size:18px; }
  .war-stage-state { margin-left:-12px; margin-right:-12px; }
  .war-challenge-stats { flex-wrap:wrap; gap:5px 10px; }
}
@media(max-width:600px) {
  .war-lobby { gap:14px; padding:14px; }
  .war-lobby .screen-sub { font-size:11px; }
  .war-menu-tabs { gap:6px; position:sticky; top:-1px; z-index:3; padding:5px 0; background:#131118f5; }
  .war-menu-tabs .war-menu-tab { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:10px; gap:7px; min-height:72px; }
  .war-menu-tab .war-tab-number { font-size:12px; align-self:flex-start; }
  .war-menu-tab b { font:700 12px/1.25 Arial,sans-serif; }
  .war-menu-tab small { display:none; }
  .war-section-heading { align-items:flex-start; flex-direction:column; gap:10px; margin-bottom:14px; }
  .war-section-heading h3 { font-size:23px; }
  .war-section-heading p { font-size:12px; }
  .war-date { font-size:10px; text-align:left; }
  .war-daily-route { grid-template-columns:1fr; gap:12px; }
  .war-challenge-card { display:grid; grid-template-columns:86px minmax(0,1fr); gap:0 12px; text-align:left; padding:12px 14px 0; }
  .war-stage-top { grid-column:1/-1; margin-bottom:9px; }
  .war-stage-number { width:24px; height:24px; font-size:13px; }
  .war-challenger-art { grid-column:1; grid-row:2/6; width:86px; height:105px; align-self:center; }
  .war-challenge-card h4,.war-challenger-army,.war-challenge-stats,.war-challenge-power { grid-column:2; }
  .war-challenge-card h4 { font-size:19px; }
  .war-challenger-army { font-size:10px; margin-bottom:10px; }
  .war-challenge-stats { justify-content:flex-start; font-size:10px; }
  .war-challenge-power { margin:9px 0 12px; font-size:10px; }
  .war-stage-state { grid-column:1/-1; margin:0 -14px; text-align:center; padding:8px; font-size:9px; }
  .war-challenge-action { flex-direction:column; align-items:stretch; gap:14px; padding-top:16px; }
  .war-challenge-action .war-daily-start { width:100%; }
  .war-company-strip { flex-wrap:wrap; gap:8px 14px; padding:13px; }
  .war-company-copy { flex-basis:100%; }
  .war-company-faces { flex:1; gap:0; }
  .war-company-pic { width:32px; height:39px; }
  .war-edit-loadout { font-size:9px; padding:9px; }
  .war-menu-rewards { flex-wrap:wrap; gap:6px; }
  .war-menu-rewards small { flex-basis:100%; margin-left:0; }
  .war-menu-panel > .war-mine { max-height:none; overflow:visible; padding:12px; }
  .war-menu-panel .war-ranks,.war-free-grid { grid-template-columns:1fr; }
  .war-free-grid .war-rival { display:grid; grid-template-columns:82px minmax(0,1fr); gap:8px 12px; padding:14px; }
  .war-opponent-tier { grid-column:1/-1; }
  .war-opponent-art { grid-column:1; grid-row:2; width:82px; height:90px; }
  .war-free-rival .war-rival-text { grid-column:2; }
  .war-free-rival .war-fight { grid-column:1/-1; }
}
@media(max-height:520px) and (min-width:601px) {
  .war-menu-panel > .war-mine { max-height:none; overflow:visible; }
  .war-menu-tab small { display:none; }
}