/* Beyond the Rift: screen styles, part D (Rival Arena, Trial Tower, Missions).
   Mobile-first (375px safe). Colors fall back to local values when game.css
   tokens are absent. The arena and tower share the scouting blocks
   (lineup, matchups, team, rewards, fight bar), styled here for both prefixes. */

.scr-arena,
.scr-tower,
.scr-missions {
  /* Aliases onto the game.css design tokens (fallbacks match its palette). */
  --sd-text: var(--text, #e9edf8);
  --sd-muted: var(--muted, #91a4bd);
  --sd-faint: var(--faint, #62738d);
  --sd-bg: var(--bg, #0c101a);
  --sd-surface: var(--surface, #141e2e);
  --sd-surface-2: var(--surface-2, #1a2639);
  --sd-surface-3: var(--panel-3, #22314a);
  --sd-border: var(--border, #29364c);
  --sd-border-strong: var(--border-strong, #3a4b68);
  --sd-accent: var(--accent, #7bd6c1);
  --sd-accent-ink: var(--accent-ink, #052521);
  --sd-violet: var(--violet-2, #ab92ee);
  --sd-gold: var(--gold, #e6bd7f);
  --sd-good: var(--good, #86dea3);
  --sd-bad: var(--bad, #f08ca4);
  --sd-radius: var(--radius, 14px);
  --sd-font-num: var(--font-num, ui-rounded, system-ui, sans-serif);
  /* RGB triplets for tinted glows. */
  --sd-accent-rgb: 123, 214, 193;
  --sd-violet-rgb: 171, 146, 238;
  --sd-gold-rgb: 230, 189, 127;
  --sd-good-rgb: 134, 222, 163;
  --sd-bad-rgb: 240, 140, 164;
  --sd-bg-rgb: 12, 16, 26;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  color: var(--sd-text);
}

/* The FIGHT bar sits flush with the bottom edge. */
.scr-arena:has(.scr-arena__fight),
.scr-tower:has(.scr-tower__fight) {
  padding-bottom: 0;
}

:where(.scr-arena, .scr-tower, .scr-missions) * {
  box-sizing: border-box;
}

/* Zero-specificity reset so component classes always win. */
:where(.scr-arena, .scr-tower, .scr-missions) button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

:where(.scr-arena, .scr-tower, .scr-missions) .screen-header {
  margin-bottom: 0;
}

/* ============================================================ shared scout */

.scr-arena__section,
.scr-tower__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  background: var(--sd-surface);
}

.scr-arena__heading,
.scr-tower__heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.scr-arena__heading-row,
.scr-tower__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scr-arena__muted,
.scr-tower__muted {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sd-muted);
}

/* Enemy lineup (kit hero cards framed in red) */

.scr-arena__enemy-grid,
.scr-tower__enemy-grid,
.scr-arena__team-grid,
.scr-tower__team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.scr-arena__team-grid > *,
.scr-tower__team-grid > * {
  min-width: 0;
}

.scr-arena__enemy,
.scr-tower__enemy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
  border-radius: 14px;
  background: rgba(var(--sd-bad-rgb), 0.08);
  box-shadow: 0 0 0 2px rgba(var(--sd-bad-rgb), 0.45);
}

.scr-arena__enemy > .hero-card,
.scr-tower__enemy > .hero-card {
  width: 100%;
  min-width: 0;
}

.scr-arena__enemy--unknown,
.scr-tower__enemy--unknown {
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: 10px 4px;
}

.scr-arena__enemy-unknown,
.scr-tower__enemy-unknown {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sd-muted);
}

.scr-arena__enemy-name,
.scr-tower__enemy-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Boss card (tower boss floors) */

.scr-arena__boss,
.scr-tower__boss {
  display: grid;
  grid-template-columns: minmax(0, 42%) 1fr;
  align-items: center;
  gap: 14px;
}

.scr-arena__boss-art,
.scr-tower__boss-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--sd-bad);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(var(--sd-bad-rgb), 0.45), rgba(20, 5, 15, 0.8));
  box-shadow: 0 0 24px rgba(var(--sd-bad-rgb), 0.35);
}

.scr-arena__boss-art > .portrait,
.scr-tower__boss-art > .portrait {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scr-arena__boss-art > .portrait img,
.scr-tower__boss-art > .portrait img {
  object-fit: contain;
}

.scr-arena__level,
.scr-tower__level {
  position: absolute;
  left: 50%;
  bottom: 4px;
  translate: -50% 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.scr-arena__boss-info,
.scr-tower__boss-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.scr-arena__boss-name,
.scr-tower__boss-name {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.1;
}

.scr-arena__boss-skill,
.scr-tower__boss-skill {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--sd-gold);
}

.scr-arena__boss-text,
.scr-tower__boss-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--sd-muted);
}

/* Matchups */

.scr-arena__list,
.scr-tower__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scr-arena__good,
.scr-tower__good,
.scr-arena__bad,
.scr-tower__bad {
  position: relative;
  padding: 8px 10px 8px 32px;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.scr-arena__good,
.scr-tower__good {
  border: 1px solid rgba(var(--sd-good-rgb), 0.35);
  background: rgba(var(--sd-good-rgb), 0.12);
}

.scr-arena__bad,
.scr-tower__bad {
  border: 1px solid rgba(var(--sd-bad-rgb), 0.35);
  background: rgba(var(--sd-bad-rgb), 0.12);
}

.scr-arena__good::before,
.scr-tower__good::before,
.scr-arena__bad::before,
.scr-tower__bad::before {
  position: absolute;
  top: 8px;
  left: 10px;
  font-weight: 900;
}

.scr-arena__good::before,
.scr-tower__good::before {
  content: '▲';
  color: var(--sd-good);
}

.scr-arena__bad::before,
.scr-tower__bad::before {
  content: '▼';
  color: var(--sd-bad);
}

.scr-arena__tip,
.scr-tower__tip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(var(--sd-violet-rgb), 0.15);
  font-size: 0.88rem;
  line-height: 1.4;
}

.scr-arena__tip-label,
.scr-tower__tip-label {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sd-violet);
  color: #1b1236;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Your team */

.scr-arena__slot-empty,
.scr-tower__slot-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 2px dashed var(--sd-border);
  border-radius: 12px;
  background: transparent;
  color: var(--sd-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

.scr-arena__levels,
.scr-tower__levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 800;
}

.scr-arena__levels--ok,
.scr-tower__levels--ok {
  background: rgba(var(--sd-good-rgb), 0.12);
  color: var(--sd-good);
}

.scr-arena__levels--low,
.scr-tower__levels--low {
  background: rgba(var(--sd-gold-rgb), 0.12);
  color: var(--sd-gold);
}

/* Rewards */

.scr-arena__reward,
.scr-tower__reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.scr-arena__reward-label,
.scr-tower__reward-label {
  font-weight: 700;
  color: var(--sd-muted);
}

.scr-arena__reward-value,
.scr-tower__reward-value {
  font-weight: 900;
  text-align: right;
  color: var(--sd-gold);
}

.scr-arena__reward--hot,
.scr-tower__reward--hot {
  border: 1px solid rgba(var(--sd-gold-rgb), 0.35);
  background: rgba(var(--sd-gold-rgb), 0.12);
}

.scr-arena__reward--done .scr-arena__reward-value {
  color: var(--sd-good);
}

.scr-arena__star-rule {
  font-size: 0.78rem;
}

/* Gold / scroll chips */

.scr-arena__loot,
.scr-tower__loot {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.scr-arena__loot-item,
.scr-tower__loot-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 900 0.85rem / 1 var(--sd-font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scr-arena__loot-item .icon,
.scr-tower__loot-item .icon {
  --icon-size: 18px;
}

.scr-arena__loot-item--gold,
.scr-tower__loot-item--gold {
  color: var(--gold-2, #f3d6a4);
}

.scr-arena__loot-item--scrolls,
.scr-tower__loot-item--scrolls {
  color: #d9ccff;
}

/* Sticky (not fixed) so a transformed router container can't trap it. */
.scr-arena__fight,
.scr-tower__fight {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(var(--sd-bg-rgb), 0.92) 35%);
}

.scr-arena__fight-reason,
.scr-tower__fight-reason {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--sd-gold);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.scr-arena__fight-btn,
.scr-tower__fight-btn {
  width: 100%;
  max-width: 480px;
  min-height: 58px;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em;
}

.scr-arena__fight-btn:not(:disabled),
.scr-tower__fight-btn:not(:disabled) {
  animation: scr-d-ready 2s ease-in-out infinite;
}

@keyframes scr-d-ready {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 214, 193, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(123, 214, 193, 0); }
}

/* ================================================================= arena */

.scr-arena__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(var(--sd-gold-rgb), 0.3);
  border-radius: var(--sd-radius);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(var(--sd-gold-rgb), 0.22), transparent 60%),
    var(--sd-surface);
}

.scr-arena__intro-text {
  margin: 0;
  font-weight: 700;
}

.scr-arena__ladder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scr-arena__rung {
  min-width: 0;
}

.scr-arena__rival {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  background: linear-gradient(160deg, var(--sd-surface-2), var(--sd-surface) 65%);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.scr-arena__rival:hover {
  transform: translateY(-1px);
  border-color: var(--sd-border-strong);
}

.scr-arena__rival:active {
  transform: scale(0.985);
}

.scr-arena__rival:focus-visible {
  outline: 2px solid var(--accent-2, #89dfce);
  outline-offset: 3px;
}

.scr-arena__rival--available {
  border-color: rgba(var(--sd-accent-rgb), 0.65);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(var(--sd-accent-rgb), 0.2), transparent 60%),
    linear-gradient(160deg, var(--sd-surface-2), var(--sd-surface) 65%);
  box-shadow: 0 0 0 1px rgba(var(--sd-accent-rgb), 0.3), 0 8px 26px rgba(var(--sd-accent-rgb), 0.18);
}

.scr-arena__rival--beaten {
  border-color: rgba(var(--sd-gold-rgb), 0.4);
}

/* Locked rivals fade their pictures, never their words: the name, strategy
   and "Beat X to unlock" line stay readable. */
.scr-arena__rival--locked .scr-arena__squad,
.scr-arena__rival--locked .scr-arena__tier {
  opacity: 0.55;
  filter: grayscale(0.6);
}

.scr-arena__rival--locked .scr-arena__unlock {
  color: var(--sd-muted);
  font-weight: 800;
}

.scr-arena__rival-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.scr-arena__tier {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--sd-violet-rgb), 0.45);
  border-radius: 12px;
  background: rgba(var(--sd-violet-rgb), 0.16);
  color: var(--sd-violet);
  font: 900 1.25rem / 1 var(--sd-font-num);
}

.scr-arena__tier small {
  margin-bottom: 2px;
  color: var(--sd-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scr-arena__rival--beaten .scr-arena__tier {
  border-color: rgba(var(--sd-gold-rgb), 0.5);
  background: rgba(var(--sd-gold-rgb), 0.16);
  color: var(--sd-gold);
}

.scr-arena__rival-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scr-arena__rival-name {
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scr-arena__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sd-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.scr-arena__status {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.scr-arena__status--available {
  background: var(--sd-accent);
  color: var(--sd-accent-ink);
  animation: scr-d-ready 2s ease-in-out infinite;
}

.scr-arena__status--beaten {
  background: rgba(var(--sd-gold-rgb), 0.14);
  color: var(--sd-gold);
}

.scr-arena__status--locked {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sd-muted);
}

.scr-arena__strategy {
  color: var(--sd-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.scr-arena__squad {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.scr-arena__mini {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
}

.scr-arena__mini > .portrait {
  width: 100%;
  height: 100%;
}

.scr-arena__mini--unknown {
  display: grid;
  place-items: center;
  border: 2px dashed var(--sd-border-strong);
  border-radius: 22%;
}

.scr-arena__mini-unknown {
  color: var(--sd-muted);
  font-size: 1.2rem;
  font-weight: 900;
}

.scr-arena__mini-class {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 1;
  line-height: 0;
}

.scr-arena__mini-class .class-badge-icon {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.scr-arena__rival-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  color: var(--sd-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.scr-arena__reward-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.scr-arena__unlock {
  color: var(--sd-faint);
}

.scr-arena__go {
  color: var(--sd-accent);
  font-weight: 900;
  white-space: nowrap;
}

/* Scout view */

.scr-arena__banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(var(--sd-violet-rgb), 0.35), transparent 60%),
    var(--sd-surface);
}

.scr-arena__where {
  color: var(--sd-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scr-arena__quote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--sd-violet);
  font-weight: 700;
  line-height: 1.35;
}

.scr-arena__blurb {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.4;
}

/* ================================================================= tower */

.scr-tower__progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(var(--sd-violet-rgb), 0.35);
  border-radius: var(--sd-radius);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(var(--sd-violet-rgb), 0.25), transparent 60%),
    var(--sd-surface);
}

.scr-tower__progress-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 12px;
}

.scr-tower__best {
  display: flex;
  flex-direction: column;
}

.scr-tower__best-label {
  color: var(--sd-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scr-tower__best-value {
  font: 900 2rem / 1 var(--sd-font-num);
  font-variant-numeric: tabular-nums;
}

.scr-tower__best-value small {
  color: var(--sd-muted);
  font-size: 1rem;
}

.scr-tower__milestones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.scr-tower__milestone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d9ccff;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.scr-tower__milestone--boss {
  color: var(--sd-bad);
}

/* The building: a column of floors, top floor first. */

.scr-tower__building {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.scr-tower__building::before {
  /* The tower's spine behind the floors. */
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  width: 70%;
  translate: -50% 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--sd-violet-rgb), 0.12), rgba(var(--sd-violet-rgb), 0.04));
  pointer-events: none;
}

.scr-tower__cap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 18%;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 4px;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

.scr-tower__cap--fog {
  border: 1px dashed rgba(var(--sd-violet-rgb), 0.4);
  background: linear-gradient(180deg, transparent, rgba(var(--sd-violet-rgb), 0.14));
  color: var(--sd-muted);
}

.scr-tower__cap--summit {
  border: 1px solid rgba(var(--sd-gold-rgb), 0.55);
  background: linear-gradient(180deg, rgba(var(--sd-gold-rgb), 0.3), rgba(var(--sd-gold-rgb), 0.08));
  color: var(--sd-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scr-tower__floors {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
  padding: 0;
  list-style: none;
}

.scr-tower__floor {
  min-width: 0;
}

.scr-tower__floor-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  background: var(--sd-surface);
  text-align: left;
}

button.scr-tower__floor-btn {
  cursor: pointer;
  touch-action: manipulation;
}

button.scr-tower__floor-btn:focus-visible {
  outline: 2px solid var(--accent-2, #89dfce);
  outline-offset: 3px;
}

.scr-tower__floor-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font: 900 1.05rem / 1 var(--sd-font-num);
  font-variant-numeric: tabular-nums;
}

.scr-tower__floor-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scr-tower__floor-name {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scr-tower__floor-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sd-muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.scr-tower__floor-meta .stars {
  font-size: 0.72rem;
}

.scr-tower__floor-tags {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
}

.scr-tower__tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.scr-tower__tag .icon {
  --icon-size: 15px;
}

.scr-tower__tag--boss {
  background: var(--sd-bad);
  color: #2a0d16;
  text-transform: uppercase;
}

.scr-tower__tag--scroll {
  background: rgba(var(--sd-violet-rgb), 0.18);
  color: #d9ccff;
}

.scr-tower__tag--next {
  background: var(--sd-accent);
  color: var(--sd-accent-ink);
}

.scr-tower__tag--done {
  padding: 3px 5px;
  background: rgba(var(--sd-good-rgb), 0.16);
  color: var(--sd-good);
}

/* Floor states: upcoming floors are narrower (further up), the current floor pops. */
.scr-tower__floor--upcoming .scr-tower__floor-btn {
  margin: 0 6%;
  width: 88%;
  border-style: dashed;
  background: rgba(20, 30, 46, 0.6);
  opacity: 0.8;
}

.scr-tower__floor--upcoming .scr-tower__floor-num {
  color: var(--sd-muted);
}

.scr-tower__floor--current .scr-tower__floor-btn {
  min-height: 62px;
  border: 2px solid var(--sd-accent);
  background:
    radial-gradient(120% 120% at 0% 50%, rgba(var(--sd-accent-rgb), 0.25), transparent 60%),
    var(--sd-surface-2);
  box-shadow: 0 0 0 1px rgba(var(--sd-accent-rgb), 0.3), 0 10px 28px rgba(var(--sd-accent-rgb), 0.22);
}

.scr-tower__floor--current .scr-tower__floor-num {
  background: var(--sd-accent);
  color: var(--sd-accent-ink);
}

.scr-tower__floor--cleared .scr-tower__floor-btn {
  border-color: rgba(var(--sd-good-rgb), 0.25);
  background: rgba(var(--sd-good-rgb), 0.06);
}

.scr-tower__floor--cleared .scr-tower__floor-num {
  color: var(--sd-good);
}

.scr-tower__floor--boss .scr-tower__floor-btn {
  border-color: rgba(var(--sd-bad-rgb), 0.55);
}

.scr-tower__floor--boss.scr-tower__floor--upcoming .scr-tower__floor-btn {
  background:
    radial-gradient(120% 120% at 100% 50%, rgba(var(--sd-bad-rgb), 0.18), transparent 60%),
    rgba(20, 30, 46, 0.6);
}

.scr-tower__floor--boss .scr-tower__floor-name {
  color: #ffc2d0;
}

.scr-tower__floor--current.scr-tower__floor--boss .scr-tower__floor-btn {
  border-color: var(--sd-bad);
  box-shadow: 0 0 0 1px rgba(var(--sd-bad-rgb), 0.35), 0 10px 28px rgba(var(--sd-bad-rgb), 0.25);
}

.scr-tower__base {
  position: relative;
  padding: 10px 12px;
  border-top: 3px solid var(--sd-border-strong);
  border-radius: 4px 4px 14px 14px;
  background: linear-gradient(180deg, var(--sd-surface-3), var(--sd-surface));
  color: var(--sd-muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

/* Next floor preview */

.scr-tower__preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(var(--sd-violet-rgb), 0.35), transparent 60%),
    var(--sd-surface);
  scroll-margin-top: 12px;
}

.scr-tower__preview--boss {
  border-color: rgba(var(--sd-bad-rgb), 0.45);
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(var(--sd-bad-rgb), 0.35), transparent 60%),
    var(--sd-surface);
}

.scr-tower__where {
  color: var(--sd-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scr-tower__boss-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--sd-bad);
  color: #2a0d16;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scr-tower__preview-title {
  margin: 0;
  font-size: 1.3rem;
}

.scr-tower__blurb {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.4;
}

.scr-tower__preview-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
}

/* Summit reached */

.scr-tower__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  border: 1px solid rgba(var(--sd-gold-rgb), 0.45);
  border-radius: var(--sd-radius);
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(var(--sd-gold-rgb), 0.3), transparent 70%),
    var(--sd-surface);
  text-align: center;
}

.scr-tower__done-crown {
  font-size: 2.6rem;
  line-height: 1;
}

.scr-tower__done-title {
  margin: 0;
  color: var(--sd-gold);
}

/* ============================================================== missions */

.scr-missions__summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(var(--sd-violet-rgb), 0.2), transparent 60%),
    var(--sd-surface);
}

.scr-missions__summary--ready {
  border-color: rgba(var(--sd-gold-rgb), 0.5);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(var(--sd-gold-rgb), 0.25), transparent 60%),
    var(--sd-surface);
}

.scr-missions__summary-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scr-missions__ready {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.scr-missions__ready-count {
  color: var(--sd-gold);
  font: 900 2rem / 1 var(--sd-font-num);
}

.scr-missions__ready-label {
  font-weight: 800;
}

.scr-missions__ready--none {
  align-items: center;
  color: var(--sd-good);
}

.scr-missions__ready--none .icon {
  --icon-size: 22px;
}

.scr-missions__claim-all {
  flex: none;
}

.scr-missions__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.scr-missions__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.scr-missions__group-icon {
  flex: none;
  font-size: 1.15rem;
  line-height: 1;
}

.scr-missions__group-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scr-missions__group-ready {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sd-gold);
  color: #2a1a05;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.scr-missions__group-count {
  flex: none;
  color: var(--sd-muted);
  font: 800 0.8rem / 1 var(--sd-font-num);
  font-variant-numeric: tabular-nums;
}

.scr-missions__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scr-missions__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  background: var(--sd-surface);
}

.scr-missions__item--ready {
  border-color: rgba(var(--sd-gold-rgb), 0.55);
  background:
    radial-gradient(120% 140% at 100% 50%, rgba(var(--sd-gold-rgb), 0.18), transparent 60%),
    var(--sd-surface);
  box-shadow: 0 0 18px rgba(var(--sd-gold-rgb), 0.12);
}

.scr-missions__item--claimed {
  opacity: 0.62;
}

.scr-missions__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.scr-missions__title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.scr-missions__item--claimed .scr-missions__title {
  text-decoration: line-through;
  text-decoration-color: rgba(233, 237, 248, 0.35);
}

.scr-missions__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 76px;
}

.scr-missions__reward {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
}

.scr-missions__loot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 900 0.8rem / 1 var(--sd-font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scr-missions__loot .icon {
  --icon-size: 16px;
}

.scr-missions__loot--gold {
  color: var(--gold-2, #f3d6a4);
}

.scr-missions__loot--scrolls {
  color: #d9ccff;
}

.scr-missions__reward--claimed {
  filter: grayscale(0.8);
}

.scr-missions__claim {
  min-width: 76px;
}

.scr-missions__claim:not(:disabled) {
  animation: scr-d-claim 1.8s ease-in-out infinite;
}

@keyframes scr-d-claim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 189, 127, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(230, 189, 127, 0); }
}

.scr-missions__check {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--sd-good-rgb), 0.18);
  color: var(--sd-good);
}

.scr-missions__check .icon {
  --icon-size: 20px;
}

.scr-missions__pct {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 36px;
  color: var(--sd-muted);
  font: 900 0.85rem / 1 var(--sd-font-num);
  font-variant-numeric: tabular-nums;
}

/* ======================================================= results extras */
/* The results screen's base look lives in screens-c.css; these are the
   Wave 2 additions made by client/screens/results.mjs. */

/* The victory rays scale past the screen edge; never let them pan the page. */
.scr-results {
  overflow-x: clip;
}

.scr-results__highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scr-results__highlights[hidden] {
  display: none;
}

.scr-results__highlights-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scr-results__highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid var(--sr-line, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  text-align: center;
  background: var(--sr-panel, rgba(255, 255, 255, 0.06));
  animation: scr-results-fade-up 0.4s 1.5s ease-out both;
}

.scr-results__highlight-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.scr-results__highlight-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scr-results__highlight-text strong {
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--sr-text, #f5f2ff);
}

.scr-results__highlight-text span {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--sr-dim, #aeaad0);
  overflow-wrap: anywhere;
}

.scr-results__highlight--hit strong {
  color: var(--sr-dmg, #ffb65e);
}

.scr-results__highlight--ko strong {
  color: var(--sr-gold, #ffd166);
}

/* ================================================================ larger */

@media (min-width: 720px) {
  .scr-arena__squad {
    max-width: 360px;
  }

  .scr-missions__side {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

/* ======================================================= wave 2b review fixes */

/* A plain status badge on the scout view (FIGHT is the button there). */
.scr-arena__status--open {
  border: 1px solid rgba(var(--sd-accent-rgb), 0.55);
  background: transparent;
  color: var(--sd-accent);
}

/* Scout's note on the arena scout and the tower preview (same look as a stage's). */
.scr-arena__note,
.scr-tower__note {
  width: 100%;
  border-left: 3px solid var(--sd-gold);
  background: rgba(var(--sd-gold-rgb), 0.1);
  color: var(--sd-text);
  text-align: left;
}

.scr-arena__note .scr-stage__note-label,
.scr-tower__note .scr-stage__note-label {
  color: var(--sd-gold);
}

/* Names in the five-card scout grids wrap to two short lines on phones
   instead of turning into "Lu…". */
@media (max-width: 400px) {
  .scr-arena__enemy-grid .hero-card-info,
  .scr-tower__enemy-grid .hero-card-info {
    padding: 4px 3px 5px;
  }

  .scr-arena__enemy-grid .hero-card-name,
  .scr-tower__enemy-grid .hero-card-name,
  .scr-arena__enemy-name,
  .scr-tower__enemy-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* One-tap mute buttons (ui.muteButton). */
.scr-hub__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scr-title__mute {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 2;
  background: rgba(7, 10, 18, 0.55);
}

.scr-battle__controls .btn.mute-btn {
  min-width: 48px;
  min-height: 44px;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.14));
  border-radius: var(--sb-radius, 12px);
  background: var(--sb-panel-strong, rgba(7, 10, 18, 0.8));
  color: var(--sb-text, #e9edf8);
}

.btn.mute-btn .icon {
  --icon-size: 22px;
}

.mute-btn[aria-pressed="true"] {
  color: var(--sd-bad, #f08ca4);
}

.scr-settings__mute {
  align-self: flex-start;
}

/* Results: the Next button says where it goes. */
.scr-results__next-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  line-height: 1.1;
}

.scr-results__next-label small {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.85;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Three buttons share a row under Next: tighter padding so "↻ Retry" still
   fits a 320px phone. */
@media (max-width: 400px) {
  .scr-results__action-row > .btn {
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }
}

/* Missions: "Go ›" on goals still in progress. */
.scr-missions__go {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .scr-arena__fight-btn,
  .scr-tower__fight-btn,
  .scr-arena__status--available,
  .scr-missions__claim,
  .scr-results__highlight {
    animation: none !important;
  }

  .scr-arena__rival {
    transition: none;
  }
}