/* Scenic backdrop: `useGameShellBackdrop` → `--game-shell-backdrop` on `.game-stage`
   (`backdrop-arena-screen.webp`). Lighten the default stub veil (0.72) like Production. */
.town-field.game-stage.town-field--stub:has(.arena-root)::after,
.town-field.game-stage.town-field--stub:has(.surface-page .arena-root)::after {
  background: linear-gradient(
    165deg,
    rgba(12, 8, 22, 0.12) 0%,
    rgba(8, 6, 16, 0.09) 45%,
    rgba(14, 10, 26, 0.13) 100%
  );
}

.town-field--stub:has(.arena-root) .player-meta-dock {
  background: rgba(22, 16, 36, 0.52);
  border: 1px solid var(--gs-border-gold-panel);
  box-shadow: 0 calc(var(--gs-u-w) * 0.9) calc(var(--gs-u-h) * 2.9) rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}

/* Full-stage flex shell (`.town-stub-inner` is a z-index/height hook only). */
.arena-root,
.town-field--stub .town-stub-inner.arena-root {
  position: relative;
  z-index: 12;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: calc(var(--gs-u-h) * 0.45) calc(var(--gs-u-w) * 0.85)
    max(calc(var(--gs-u-h) * 1.35), calc(var(--gs-u-h) * 6));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(var(--gs-u-h) * 0.45);
  text-align: left;
}

.town-field--stub .arena-root > .game-mode-bar {
  flex-shrink: 0;
  align-self: flex-start;
}

.town-field--stub:has(.game-wallet-hud) .arena-root .game-mode-bar__inner {
  padding-right: clamp(calc(var(--gs-u-w) * 10), calc(var(--gs-u-w) * 20), calc(var(--gs-u-w) * 14));
}

.arena-shell {
  width: min(98%, calc(var(--gs-u-w) * 75));
  margin: 5% auto;
  padding: calc(var(--gs-u-h) * 1.15) calc(var(--gs-u-h) * 1.2) calc(var(--gs-u-h) * 1.25);
  border-radius: var(--gs-radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(var(--gs-u-h) * 0.75);
}

.town-field--stub .arena-root > .arena-shell {
  flex: 0 1 auto;
  max-height: 100%;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
}

.arena-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--gs-u-h) * 1.35);
  padding: calc(var(--gs-u-h) * 0.55);
}

.arena-mode-card {
  overflow: visible;
  padding: calc(var(--gs-u-h) * 1) calc(var(--gs-u-h) * 1.05) calc(var(--gs-u-h) * 1.1);
  min-height: calc(var(--gs-u-h) * 24.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--gs-u-h) * 0.42);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.arena-mode-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.arena-mode-card h2 {
  margin: 0;
  font-size: var(--gs-text-lg);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff6eb;
  text-shadow: 0 calc(var(--gs-u-h) * 0.12) calc(var(--gs-u-h) * 0.35) rgba(0, 0, 0, 0.45);
}

.arena-mode-card__rating {
  margin: 0;
  color: #e8d4a8;
  font-size: var(--gs-text-xs);
  font-weight: 600;
}

.arena-mode-card__rank {
  margin: 0;
  color: #c9b896;
  font-size: var(--gs-text-xs);
  font-weight: 600;
}

.arena-mode-card__queue {
  margin: 0;
  color: #d5c7aa;
  font-size: var(--gs-text-sm);
}

.arena-mode-card__timer {
  margin: 0;
  font-size: var(--gs-text-xs);
  color: #f1dcb3;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.arena-mode-card__timer--visible {
  opacity: 1;
}

.arena-mode-cta {
  align-self: center;
  margin-top: calc(var(--gs-u-h) * 0.35);
  flex-shrink: 0;
  max-width: 100%;
}

.arena-mode-cta.town-nav-btn {
  width: min(100%, calc(var(--gs-u-w) * 10.5));
  font-size: var(--gs-text-sm);
  padding: calc(var(--gs-u-h) * 0.34) calc(var(--gs-u-h) * 0.85);
}

.arena-active-matches {
  width: 100%;
  margin: calc(var(--gs-u-h) * 0.35) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.28);
}

.arena-active-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gs-u-h) * 0.35);
  width: 100%;
  font-size: var(--gs-text-xs);
  color: #e8d4a8;
  padding: calc(var(--gs-u-h) * 0.22) calc(var(--gs-u-h) * 0.35);
  border-radius: var(--gs-radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.arena-active-match__label {
  min-width: 0;
  text-align: left;
  line-height: 1.25;
}

.arena-active-match__observe {
  flex-shrink: 0;
  font-size: var(--gs-text-2xs);
  padding: calc(var(--gs-u-h) * 0.18) calc(var(--gs-u-h) * 0.5);
}

.arena-mode-card--active {
  /* Prefer ornate-panel--emphasis in markup; keep a light wash only. */
  position: relative;
}

.arena-mode-card--active::after {
  content: "";
  position: absolute;
  inset: calc(var(--ornate-panel-border, var(--gs-u-h) * 0.78) * 0.55);
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(var(--gs-gold-accent-rgb), 0.1) 0%,
    transparent 55%
  );
}

.arena-mode-btn {
  text-decoration: none;
  color: var(--gs-text-nav);
  border: var(--gs-hairline) solid var(--gs-border-gold-accent);
  border-radius: var(--gs-radius-xs);
  padding: calc(var(--gs-u-h) * 0.3) calc(var(--gs-u-h) * 0.55);
}

.arena-mode-btn--active {
  background: rgba(255, 170, 80, 0.12);
}

.arena-msg {
  min-height: calc(var(--gs-u-h) * 1.8);
  max-width: none;
  color: #ffd3b8;
  margin: 0;
  text-align: center;
  font-size: var(--gs-text-xs);
}

/* --- Ladder tab --- */

.arena-ladder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--gs-u-h) * 0.85);
  align-items: start;
}

.arena-ladder-panel {
  border-radius: var(--gs-radius-md);
  padding: calc(var(--gs-u-h) * 0.95) calc(var(--gs-u-h) * 0.9) calc(var(--gs-u-h) * 1.05);
  min-height: 0;
}

.arena-ladder-panel__title {
  margin: 0 0 calc(var(--gs-u-h) * 0.38);
  font-size: var(--gs-text-lg);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff6eb;
  text-align: center;
  text-shadow: 0 calc(var(--gs-u-h) * 0.12) calc(var(--gs-u-h) * 0.35) rgba(0, 0, 0, 0.45);
}

.arena-ladder-panel__rule {
  margin: 0 0 calc(var(--gs-u-h) * 0.55);
  padding: 0;
  border: none;
  height: max(var(--gs-hairline, 1px), calc(var(--gs-u-h) * 0.1));
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 82, 38, 0.35) 8%,
    rgba(255, 210, 140, 0.55) 22%,
    rgba(255, 232, 188, 0.82) 50%,
    rgba(255, 210, 140, 0.55) 78%,
    rgba(120, 82, 38, 0.35) 92%,
    transparent 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 240, 210, 0.14),
    0 calc(var(--gs-u-h) * 0.14) calc(var(--gs-u-h) * 0.4) rgba(0, 0, 0, 0.32);
  opacity: 0.92;
}

.arena-ladder-panel__empty {
  margin: 0;
  text-align: center;
  color: #c9b896;
  font-size: var(--gs-text-sm);
}

.arena-ladder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.28);
}

.arena-ladder-row {
  display: grid;
  grid-template-columns:
    calc(var(--gs-u-h) * 2.2)
    4ch
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.32) calc(var(--gs-u-h) * 0.5);
  padding: calc(var(--gs-u-h) * 0.24) calc(var(--gs-u-h) * 0.35);
  border-radius: calc(var(--gs-u-h) * 0.2);
  color: #e8d4a8;
  font-size: var(--gs-text-2xs);
  font-weight: 600;
  list-style: none;
  font-family: var(--game-font-display, var(--font-display));
}

.arena-ladder-row--viewer {
  background: rgba(255, 170, 80, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 188, 106, 0.22),
    0 0 calc(var(--gs-u-h) * 1.2) rgba(255, 150, 60, 0.12);
  color: #fff2d4;
}

.arena-ladder-row__rank {
  font-variant-numeric: tabular-nums;
  color: #f1dcb3;
  min-width: 0;
  padding-inline-end: calc(var(--gs-u-h) * 0.1);
  white-space: nowrap;
  text-align: end;
}

.arena-ladder-row__identity {
  display: flex;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.28);
  min-width: 0;
}

.arena-ladder-row__badge-slot {
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arena-ladder-row__badge-slot--empty {
  display: block;
  width: 1em;
  height: 1em;
  visibility: hidden;
}

.arena-ladder-row__race-badge {
  width: 1em;
  height: 1em;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}

.arena-ladder-row__portrait-slot {
  flex: 0 0 calc(var(--gs-u-h) * 1.75);
  width: calc(var(--gs-u-h) * 1.75);
  height: calc(var(--gs-u-h) * 1.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arena-ladder-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.arena-ladder-row__name--gradient {
  display: inline;
  background: linear-gradient(
    100deg,
    #f5f0e6 0%,
    #ffe8a8 18%,
    #c9a0ff 42%,
    #5ecfc8 62%,
    #ffb16b 82%,
    #f5f0e6 100%
  );
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: arena-ladder-name-shimmer 3s linear infinite;
}

@keyframes arena-ladder-name-shimmer {
  to {
    background-position: 220% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-ladder-row__name--gradient {
    animation: none;
    background-position: 0 center;
  }
}

.arena-ladder-row__portrait {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.42);
  background: rgba(8, 6, 14, 0.72);
  box-shadow: 0 0 calc(var(--gs-u-h) * 0.28) rgba(0, 0, 0, 0.32);
}

.arena-ladder-row__portrait--empty {
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.arena-ladder-row__score {
  font-variant-numeric: tabular-nums;
  font-size: var(--gs-text-xs);
  color: var(--gs-text-gold, #f3cd83);
  padding-inline-start: calc(var(--gs-u-h) * 0.35);
  text-align: end;
  min-width: calc(var(--gs-u-h) * 2.4);
}

.arena-rank-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gs-u-w) * 2.1);
  height: calc(var(--gs-u-h) * 2.1);
}

.arena-rank-icon__svg {
  width: 100%;
  height: 100%;
}

.arena-rank-icon--crown-gold {
  color: #f4c84a;
}

.arena-rank-icon--crown-silver {
  color: #d8dde8;
}

.arena-rank-icon--crown-bronze {
  color: #c98a52;
}

.arena-rank-icon--medal-gold {
  color: #e8b84a;
}

.arena-rank-icon--medal-silver {
  color: #c5ccd8;
}

.arena-rank-icon--medal-bronze {
  color: #b87848;
}

.arena-rank-icon--leaf-gold {
  color: #c9b04a;
}

.arena-rank-icon--leaf-silver {
  color: #aeb8a8;
}

.arena-rank-icon--leaf-bronze {
  color: #9a7a52;
}

.arena-rank-icon--plate-wood {
  color: #a88462;
}

.arena-star-points-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--gs-u-h) * 0.85);
  align-items: start;
}

.arena-star-points-panel {
  min-height: 0;
}

.arena-honor-shop__panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.65);
  min-height: 0;
  padding: calc(var(--gs-u-h) * 0.95) calc(var(--gs-u-h) * 0.9) calc(var(--gs-u-h) * 1.05);
}

.arena-honor-shop__grid {
  margin-top: calc(var(--gs-u-h) * 0.25);
}

.arena-honor-shop__grid--units {
  margin-top: calc(var(--gs-u-h) * 0.55);
}

/* Canonical GameCard tile inside Honor Shop unit offers (card-rendering/). */
.arena-honor-shop .vip-store-card--portrait .vip-store-card__header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.arena-honor-shop .shop-offer-card__tile.game-card-sizing,
.arena-honor-shop .shop-offer-card__tile .game-card-sizing {
  width: calc(var(--gs-u-w) * 8.2);
  max-width: 100%;
}