/* Legion Defense — co-op auto-battler (M3 release polish). */

.ab-card { max-width: 420px; }
.ab-gameover-card { max-width: 720px; }  /* fits the 6-column stats table */

.ab-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #0e1116;
  color: #e6e6e6;
}

.ab-hud {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
  background: #141922;
  border-bottom: 1px solid #2c343d;
  flex-wrap: wrap;
}

.ab-chip {
  background: #20262e;
  border: 1px solid #313b45;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.ab-chip-accent { border-color: #c8963c; color: #f0c674; }
.ab-chip-spectator { border-color: #6a7f94; color: #a9c0d6; }

/* HUD bar: chips centered (user request), audio controls pinned right in the
   site-standard corner position. */
.ab-hud-side { flex: 1 1 0; min-width: 0; }
.ab-hud-center {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.ab-hud-right {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* Per-player chips (name · gold · kills · ready) shown in the HUD row. */
.ab-party {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 10px;
}

.ab-player-chip {
  background: #1a212b;
  border: 1px solid #2c3946;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: #b8c6d4;
  white-space: nowrap;
}
.ab-player-chip.me { border-color: #c8963c; color: #f0c674; }
.ab-player-chip.ready { border-color: #4caf78; }

.ab-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

#modelCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

.ab-banner {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 12, 8, 0.85);
  border: 1px solid #c8963c;
  color: #f0c674;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.4s;
  text-align: center;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dusk-style combat-start banner: bigger, letterboxed, amber glow. */
.ab-banner.incoming {
  top: 12%;
  font-size: 30px;
  letter-spacing: 3px;
  padding: 14px 40px;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(46, 26, 8, 0.92), rgba(18, 9, 3, 0.92));
  box-shadow: 0 0 32px rgba(200, 150, 60, 0.35), inset 0 0 24px rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 12px rgba(240, 198, 116, 0.6);
}

/* Boss waves: same weight, blood-red treatment. */
.ab-banner.boss {
  top: 12%;
  font-size: 30px;
  letter-spacing: 3px;
  padding: 14px 40px;
  border-width: 2px;
  border-color: #d94a3a;
  color: #ff9d8a;
  background: linear-gradient(180deg, rgba(46, 10, 6, 0.94), rgba(20, 4, 2, 0.94));
  box-shadow: 0 0 32px rgba(217, 74, 58, 0.4), inset 0 0 24px rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 12px rgba(255, 120, 100, 0.6);
}

.ab-banner.leak {
  border-color: #d94a3a;
  color: #ff9d8a;
  background: rgba(40, 10, 6, 0.88);
}

.ab-bottom {
  background: #141922;
  border-top: 1px solid #2c343d;
  padding: 8px 12px;
}

.ab-shop {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.ab-offers { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }

.ab-offer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1c232d;
  border: 1px solid #313b45;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 128px;
  text-align: left;
  color: #e6e6e6;
  font-size: 12px;
}
.ab-offer:hover { border-color: #4a90d9; }
.ab-offer.armed { border-color: #f0c674; background: #2a2416; }
.ab-offer.sold { opacity: 0.35; cursor: default; justify-content: center; }
.ab-offer.capped { opacity: 0.45; filter: grayscale(0.6); }

/* Palisade drag tool */
#palisadeBtn.armed { background: #6f5430; color: #ffe8c0; box-shadow: 0 0 0 2px #c9a35c inset; }
#paliPreview {
  position: fixed;
  display: none;
  height: 4px;
  background: repeating-linear-gradient(90deg, #a87f3c 0, #a87f3c 6px, #6f5430 6px, #6f5430 12px);
  border-radius: 2px;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 40;
}
#paliPreview::after {
  content: attr(data-label);
  position: absolute;
  left: 100%;
  top: -1.6em;
  white-space: nowrap;
  background: rgba(20, 16, 8, 0.85);
  color: #ffe8c0;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Lobby difficulty picker */
.ab-difficulty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.ab-difficulty-row select {
  background: #1d2433;
  color: #e8ecf5;
  border: 1px solid #3a4a60;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
}
.ab-offer .ab-offer-portrait {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 6px;
  border: 1px solid #3c4854;
  object-fit: cover;
  background: #10151c;
}
.ab-offer .ab-offer-body { display: flex; flex-direction: column; min-width: 0; }
.ab-offer .ab-offer-name {
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.ab-offer .ab-offer-stats { color: #9fb0c0; font-size: 11px; }
.ab-offer .ab-offer-price { color: #f0c674; }
.ab-offer[data-tier="1"] { border-left: 3px solid #8a9a8a; }
.ab-offer[data-tier="2"] { border-left: 3px solid #4a90d9; }
.ab-offer[data-tier="3"] { border-left: 3px solid #b06ad9; }
.ab-offer[data-tier="4"] { border-left: 3px solid #d9764a; }

.ab-shop-actions { display: flex; gap: 8px; align-items: center; }

/* Roster strip: your placed units as clickable chips (select = move/sell). */
.ab-roster {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ab-roster-label { font-size: 12px; color: #9fb0c0; white-space: nowrap; }

.ab-roster-chip {
  background: #1a212b;
  border: 1px solid #2c3946;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: #cfd9e2;
  cursor: pointer;
  white-space: nowrap;
}
.ab-roster-chip:hover { border-color: #4a90d9; }
.ab-roster-chip.selected { border-color: #f0c674; color: #f0c674; background: #2a2416; }

.ab-status {
  margin-top: 6px;
  font-size: 12px;
  color: #9fb0c0;
  min-height: 16px;
}

/* The site stylesheet pins .volume-slider `position: fixed; top: 12px` (a
   legacy quirk that floats the sliders over the top-left corner regardless of
   their container) — force them back into the flex flow everywhere on this
   page. */
.audio-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.audio-controls .volume-slider { position: static; width: 80px; }
.ab-hud-right .audio-controls { justify-content: flex-end; flex-wrap: nowrap; }

/* ---------------------------------------------------------- game over card */
.ab-go-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 14px 0 10px;
}

.ab-go-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1a212b;
  border: 1px solid #2c3946;
  border-radius: 10px;
  padding: 10px 22px;
  min-width: 120px;
}
.ab-go-stat span { font-size: 26px; font-weight: 700; color: #f0c674; }
.ab-go-stat label { font-size: 11px; color: #9fb0c0; margin-top: 2px; }

/* Shared fun_stats table/awards, tinted to Legion Defense's gold-on-slate. */
.ab-gameover-card {
  --fs-accent: #f0c674;
  --fs-text: #cfd9e2;
  --fs-dim: #9fb0c0;
  --fs-edge: #26303c;
  --fs-panel: #161c25;
}

.ab-go-players { margin: 0 auto 12px; }

/* Six stat columns is the widest table any fun_stats host renders, so tighten
   the shared name cap a little further — otherwise "Gold spent" falls off the
   right edge of the 680px card and hides behind the wrap's scrollbar. */
.ab-gameover-card .fs-table .fs-name-col { max-width: 12em; }
@media (max-width: 560px) {
  /* keep the shared phone cap winning over the rule above */
  .ab-gameover-card .fs-table .fs-name-col { max-width: 9em; }
}

/* ---------------------------------------------------------- leaderboard */
.ab-lb-btn { margin-top: 10px; }

.ab-lb-heading { margin: 10px 0 6px; font-size: 15px; color: #f0c674; }

.ab-lb {
  max-height: 220px;
  overflow-y: auto;
  font-size: 12px;
  color: #9fb0c0;
  margin-bottom: 12px;
}

.ab-lb-table { width: 100%; border-collapse: collapse; }
.ab-lb-table tr { background: transparent; }
.ab-lb-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.ab-lb-table th {
  text-align: left;
  color: #9fb0c0;
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid #2c3946;
  position: sticky;
  top: 0;
  background: #141922;
}
.ab-lb-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #1e2731;
  color: #cfd9e2;
  text-align: left;
  overflow-wrap: anywhere;
}
.ab-lb-table td.ab-lb-waves { color: #f0c674; font-weight: 700; }

@media (max-width: 720px) {
  .ab-offer { min-width: 90px; font-size: 11px; }
  .ab-offer .ab-offer-portrait { display: none; }
  .ab-party { margin-left: 0; }
}