body.battle-home-page { min-height: 100vh; color: #fff; background: radial-gradient(circle at 50% 0, #61201a, #17131a 62%); }
.battle-home-page .topbar { color: #fff; border-bottom-color: rgba(255,255,255,.15); }
.battle-home-page .topbar nav a:hover,
.battle-home-page .topbar nav a[aria-current="page"] { color: #17131a; background: rgba(255,255,255,.86); }
.battle-home { padding: 34px 18px 60px; }
.battle-home__intro { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.battle-home__intro h1 { margin: 4px 0 8px; color: #fff; font-size: clamp(38px, 7vw, 76px); text-shadow: 0 3px 18px rgba(0,0,0,.38); }
.battle-home__intro p,
.boss-unlocks p { color: rgba(255,255,255,.84); }
.mode-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
  max-width: 1180px; margin-inline: auto; align-items: stretch;
}
.mode-card {
  position: relative; display: flex; min-height: 530px; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: linear-gradient(160deg, rgba(51,45,61,.96), rgba(20,18,25,.98));
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.mode-card__art {
  position: relative; flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.22));
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.mode-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mode-card__art.has-art span { display: none; }
.mode-card__art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(12,9,16,.72));
}
.mode-card__art span {
  position: absolute; right: 10px; bottom: 9px; z-index: 1; padding: 5px 8px; border: 1px dashed rgba(255,255,255,.34);
  border-radius: 999px; color: rgba(255,255,255,.62); background: rgba(10,8,14,.42); font-size: 9px; font-weight: 900; letter-spacing: .12em;
}
.mode-card__content { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.mode-card--total-annihilation { background: linear-gradient(160deg, #842922, #251418); }
.mode-card--boss-gauntlet { background: linear-gradient(160deg, #8a351c, #25120c); box-shadow: 0 0 24px rgba(255,154,72,.13); }
.mode-card--boss-rampage { background: linear-gradient(160deg, #5a3a16, #21170e); }
.mode-card--zombie-survival { background: linear-gradient(160deg, #355425, #141e13); }
.mode-card--radioactive-survival { background: linear-gradient(160deg, #275b31, #101d14); box-shadow: 0 0 22px rgba(92,255,83,.12); }
.mode-card--vampire-survival { background: linear-gradient(160deg, #5a1730, #1f0d16); }
.mode-card--legends-last-stand { background: linear-gradient(160deg, #7b5313, #2c1908 72%); box-shadow: 0 0 24px rgba(255,211,91,.14); }
.mode-card--mutant-run { background: linear-gradient(160deg, #5b166c, #122718 72%); box-shadow: 0 0 30px rgba(126,255,133,.16); }
.mode-card.is-locked { filter: grayscale(.8); opacity: .75; }
.mode-card h2 { margin: 0 0 7px; color: #fff; text-shadow: 0 2px 9px rgba(0,0,0,.42); }
.mode-card p { color: rgba(255,255,255,.88); }
.mode-card__score { margin-top: auto; padding: 10px 0; color: #ffd27a; font-weight: 800; }
.mode-card__actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.mode-card .button { align-self: flex-start; }
.mode-card__rules { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09); }
.mode-card__rules:hover:not(:disabled) { background: rgba(255,255,255,.18); box-shadow: none; }
.boss-unlocks { margin-top: 26px; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(14,13,18,.86); }
.boss-unlocks h2 { margin: 4px 0; color: #fff; }
.boss-unlocks__note { max-width: 780px; margin: 0 0 14px; font-size: .9rem; }
.boss-unlock-strip { display: flex; gap: 9px; overflow-x: auto; padding: 14px 0; }
.boss-unlock {
  appearance: none; flex: 0 0 82px; padding: 0; border: 0; color: inherit; background: transparent;
  text-align: center; cursor: pointer;
}
.boss-unlock:not(.is-locked):hover img,
.boss-unlock:not(.is-locked):focus-visible img { transform: translateY(-3px) scale(1.04); box-shadow: 0 9px 22px rgba(255,210,122,.3); }
.boss-unlock img { width: 76px; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 7px; box-shadow: 0 5px 13px rgba(0,0,0,.35); }
.boss-unlock img { transition: transform .18s ease, box-shadow .18s ease; }
.boss-unlock.is-locked img { filter: grayscale(1) brightness(.25); }
.boss-unlock.is-locked { cursor: default; }
.boss-unlock small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.15; }
.mode-rules { width: min(760px, calc(100vw - 24px)); color: var(--ink); }
.mode-rules .dialog__content { max-height: min(820px, calc(100vh - 24px)); overflow-y: auto; }
.mode-rules__heading { display: flex; align-items: center; padding-right: 36px; }
.mode-rules__heading .eyebrow { margin-bottom: 5px; }
.mode-rules__heading h2 { margin: 0; }
.mode-rules__summary { margin: 18px 0; color: var(--ink-soft); font-size: 1rem; }
.mode-rules__list { display: grid; grid-template-columns: minmax(120px, .36fr) minmax(0, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mode-rules__list dt,
.mode-rules__list dd { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mode-rules__list dt { color: var(--navy); background: #fff7e9; font-weight: 900; }
.mode-rules__list dd { color: var(--ink-soft); line-height: 1.5; }
.mode-rules__list dt:nth-last-of-type(1),
.mode-rules__list dd:last-child { border-bottom: 0; }
.mode-rules__boss-roster { margin-top: 18px; padding: 15px; border-radius: 14px; color: #fff; background: #1c1820; }
.mode-rules__boss-roster h3 { margin-bottom: 5px; color: #fff; }
.mode-rules__boss-roster p { margin-bottom: 0; color: rgba(255,255,255,.78); font-size: .86rem; }
.mode-rules__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.boss-card-viewer { width: min(540px, calc(100vw - 24px)); color: var(--ink); }
.boss-card-viewer::backdrop { background: rgba(8,5,10,.84); backdrop-filter: blur(6px); }
.boss-card-viewer .dialog__content { padding: 30px; }
.boss-card-viewer img { display: block; width: min(100%, 380px); max-height: min(76vh, 700px); margin: 0 auto; object-fit: contain; border-radius: 15px; box-shadow: 0 20px 55px rgba(0,0,0,.5); }
.boss-card-viewer h2 { margin: 16px 0 0; text-align: center; }
.boss-card-viewer p { margin: 7px 0 0; color: var(--ink-soft); text-align: center; }

@media (max-width: 760px) {
  .battle-home { padding-inline: 10px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 470px; }
  .mode-card__art { aspect-ratio: 16 / 9; }
  .mode-rules .dialog__content { padding: 27px 18px 20px; }
  .mode-rules__list { grid-template-columns: 1fr; }
  .mode-rules__list dt { padding-bottom: 4px; border-bottom: 0; }
  .mode-rules__list dd { padding-top: 4px; }
  .mode-rules__actions { justify-content: stretch; }
  .mode-rules__actions .button { flex: 1; }
}


/* Mutant Run wide feature card */
.mode-card--mutant-run {
  grid-column: 1 / -1;
  min-height: 0;
  border-color: rgba(157,255,107,.24);
  background:
    radial-gradient(circle at 12% 100%, rgba(99,255,89,.13), transparent 28rem),
    radial-gradient(circle at 88% 100%, rgba(190,78,255,.16), transparent 30rem),
    linear-gradient(145deg,#13251a,#151219 58%,#26132c);
  box-shadow: 0 16px 42px rgba(0,0,0,.38), 0 0 34px rgba(126,255,133,.10);
}
.mode-card--mutant-run .mode-card__art {
  aspect-ratio: 1774 / 887;
  border-bottom-color: rgba(170,255,129,.19);
}
.mode-card--mutant-run .mode-card__art::after {
  background:
    linear-gradient(180deg, transparent 58%, rgba(7,11,8,.38) 82%, rgba(9,11,10,.7)),
    linear-gradient(90deg, rgba(19,255,74,.05), transparent 36%, rgba(190,50,255,.06));
}
.mutant-mode__content {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(285px,.42fr);
  gap: 28px;
  align-items: center;
  padding: 22px 24px 24px;
}
.mutant-mode__copy { min-width: 0; }
.mutant-mode__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #9fff7c;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
}
.mode-card--mutant-run h2 {
  margin-bottom: 8px;
  font-size: clamp(30px,4vw,44px);
}
.mode-card--mutant-run p {
  max-width: 780px;
  margin: 0;
  color: rgba(242,255,238,.88);
  line-height: 1.52;
}
.mutant-mode__features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}
.mutant-mode__features span {
  padding: 7px 10px;
  border: 1px solid rgba(160,255,126,.22);
  border-radius: 999px;
  color: #dffff1;
  background: rgba(26,48,29,.58);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.mutant-mode__side {
  display: grid;
  gap: 14px;
  align-self: stretch;
  align-content: center;
}
.mutant-mode__stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.mutant-mode__stat {
  padding: 13px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(7,12,9,.46);
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.mutant-mode__stat strong {
  display: block;
  color: #b7ff8e;
  font-size: 1.55rem;
  line-height: 1;
}
.mutant-mode__stat span {
  display: block;
  margin-top: 5px;
  color: rgba(235,245,232,.68);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.mutant-mode__actions {
  justify-content: flex-end;
  margin-top: 0;
}
.mode-card--mutant-run .button {
  min-height: 46px;
  padding-inline: 18px;
}
@media (max-width: 760px) {
  .mode-card--mutant-run { grid-column: auto; }
  .mode-card--mutant-run .mode-card__art { aspect-ratio: 16 / 9; }
  .mutant-mode__content {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px 19px;
  }
  .mutant-mode__features { gap: 6px; }
  .mutant-mode__features span { font-size: .66rem; }
  .mutant-mode__side { gap: 11px; }
  .mutant-mode__actions { justify-content: stretch; }
  .mutant-mode__actions .button { flex: 1; justify-content: center; text-align: center; }
}
@media (max-width: 430px) {
  .mutant-mode__stats { grid-template-columns: 1fr 1fr; }
  .mutant-mode__features span { width: 100%; text-align: center; }
}