/* ============================================================
   Menu Redesign — Simple state (Variant A: Apex Classic)
   Hero left, BattleSettings right, MapCarousel bottom-center.
   ============================================================ */

/* Override the legacy .screen rules for the redesigned menu only.
   The .active gate ensures display:block only applies when the menu
   is the active screen — when user navigates away, the legacy
   .screen { display: none } takes over. */
#screen-menu.menu-v2.active {
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
}
#screen-menu.menu-v2 .menu-bg,
#screen-menu.menu-v2 .menu-overlay,
#screen-menu.menu-v2 .menu-content {
  display: none;
}

/* ============================================================
   Stage — FIXED-SIZE canvas (1920×1080). All children use
   absolute pixel positioning so layout stays identical at any
   viewport size. JS applies transform: translate + scale in
   fitMenuStage() (top-left origin, like combat-main pattern).
   ============================================================ */
.menu-stage {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;        /* fitMenuStage() drives transform */
  background: var(--bg-1);
  color: var(--text);
  overflow: hidden;
  font-family: var(--font-body);
}

/* Layer 1: battle map webm + scene tint behind it */
.menu-bg-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: opacity .42s var(--ease);
}
.menu-scene-tint { z-index: 1; }
.menu-grain     { z-index: 2; }
.menu-vignette  { z-index: 3; }

/* Layer 2: hero idle webm — left, decorative (no pointer-events).
   Source webms are 960×960 (user-aligned: same dimensions, transparent
   alpha, character framing identical across all 3 factions). Displayed
   at native 960×960 — no scaling, no per-faction offsets needed.
   Base (Simple): `left: calc(4% - 200px)`. In Advanced state, the heroes
   spread 100px further apart (see .is-advanced rules below). */
.menu-hero-bg {
  position: absolute; bottom: 0; left: calc(4% - 200px);
  height: 960px; z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.85))
          drop-shadow(0 0 60px rgba(160,96,208,0.15));
  transition: opacity .42s var(--ease), transform .42s var(--ease),
              left .42s var(--ease);
}
.menu-hero-bg video,
.menu-enemy-bg video {
  height: 100%; width: auto; display: block;
  /* Per-faction scale (set inline by JS) anchors at bottom-center so feet
     stay at the same ground level no matter the scale factor. */
  transform-origin: bottom center;
  /* Position+z-index so the main hero sits ABOVE the projector silhouette
     and the round ground shadow. The projector overrides this below. */
  position: relative;
  z-index: 3;
}

/* ── Hero shadows (mirror Hex-Combat: round ground + projector) ──
   Two layers, both pointer-events:none, both anchored to the wrap's
   bottom (= where the hero's feet land in the pre-aligned 960×960 webm). */

/* Round elliptical ground shadow under the feet */
.menu-hero-bg::after,
.menu-enemy-bg::after {
  content: '';
  position: absolute;
  bottom: 235px;
  width: 280px; height: 74px;
  background: radial-gradient(ellipse,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.3) 50%,
    transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
/* Player: center the ellipse 15px LEFT of wrap horizontal center. */
.menu-hero-bg::after {
  left: calc(50% - 15px);
  transform: translateX(-50%);
}
/* Enemy: mirror — center the ellipse 15px RIGHT of wrap horizontal center. */
.menu-enemy-bg::after {
  right: calc(50% - 15px);
  transform: translateX(50%);
}

/* Projector shadow — silhouette of the hero video, scaled flat & skewed.
   Same recipe as `.hero-shadow-sprite` in style.css (combat). */
.menu-hero-shadow {
  position: absolute !important;
  left: -110px; bottom: 180px;
  height: 100%; width: auto;
  pointer-events: none;
  filter: brightness(0);
  opacity: 0.28;
  transform-origin: bottom center;
  transform: scaleY(0.35) skewX(-25deg);
  z-index: 0 !important;   /* behind main hero (z:3) and round shadow (z:1) */
}
/* Enemy projector — anchor to RIGHT edge of wrap (mirror of player which
   anchors to LEFT) so the silhouette stays glued to the hero's feet
   instead of drifting far across the wrap. Flip silhouette horizontally
   so the skew leans the opposite way. */
.menu-enemy-bg .menu-hero-shadow {
  left: auto;
  right: -110px;
  transform: scaleX(-1) scaleY(0.35) skewX(-25deg);
}

/* ─── Per-faction shadow tweaks ─────────────────────────────────
   Tuned individually per hero rig because each silhouette occupies
   different x/y in its 960×960 frame. */

/* Beastlands (Orc): projector −10px left, round +10px right,
   projector +10% taller. */
.menu-hero-bg[data-faction="beast"] .menu-hero-shadow {
  left: -126px;
  bottom: 168px;
  transform: scaleY(0.385) skewX(-25deg);
}
.menu-enemy-bg[data-faction="beast"] .menu-hero-shadow {
  left: auto;
  right: -126px;
  bottom: 168px;
  transform: scaleX(-1) scaleY(0.385) skewX(-25deg);
}
/* Beast round shadow now matches the new base (left:calc(50% - 15px),
   height:74px) — no override needed. */

/* Necromancer (Lich): projector shift. Player anchors via `left`,
   enemy mirrors via `right`. */
.menu-hero-bg[data-faction="necro"] .menu-hero-shadow {
  left: -124px;
}
.menu-enemy-bg[data-faction="necro"] .menu-hero-shadow {
  left: auto;
  right: -124px;
}

/* Knight: projector −15px left (base −110 → −125). Enemy mirrors. */
.menu-hero-bg[data-faction="knight"] .menu-hero-shadow {
  left: -125px;
}
.menu-enemy-bg[data-faction="knight"] .menu-hero-shadow {
  left: auto;
  right: -125px;
}

/* Machinas: round +15% taller; projector −20px left, +15px up. */
.menu-hero-bg[data-faction="machinas"]::after,
.menu-enemy-bg[data-faction="machinas"]::after {
  height: 113px;   /* base 74 × 1.15³ */
}
.menu-hero-bg[data-faction="machinas"] .menu-hero-shadow {
  left: -147px;
  bottom: 205px;
}
.menu-enemy-bg[data-faction="machinas"] .menu-hero-shadow {
  left: auto;
  right: -147px;
  bottom: 205px;
}
/* Nameplate lives INSIDE .menu-hero-bg / .menu-enemy-bg wraps now, so it
   follows the wrap's left/right shift in Advanced state automatically.
   Positioned 50 px below the feet (round-shadow base is bottom:235 →
   nameplate at bottom:185), centred on the feet x-anchor (calc(50% - 15px)
   for player, mirrored on right for enemy). */
.menu-hero-nameplate {
  position: absolute;
  bottom: 185px;
  left: calc(50% - 35px);
  transform: translateX(-50%);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 6px; text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(0,0,0,0.95);
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

/* ============================================================
   Header (top bar) — sits above stage, z-index 10+
   ============================================================ */
.menu-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
.menu-header-row1 {
  /* Grid 1fr auto 1fr — middle item ALWAYS at true row center regardless
     of how wide the side items are (music vs social). Flex space-between
     would shift the middle toward the narrower side. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 22px;
  gap: 10px;
}
.menu-header-row1 > *:first-child  { justify-self: start; }
.menu-header-row1 > *:last-child   { justify-self: end; }
.menu-header-row1 > .menu-identity-pill { justify-self: center; }
.menu-header-row2 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; gap: 14px;
}

/* Mode switch (vs AI / PvP) lifts up 40px in Advanced state so it doesn't
   collide with the map carousel that surfaces at the top of the screen.
   Returns smoothly when going back to Simple. */
#menu-mode-switch {
  transition: transform .42s var(--ease);
  will-change: transform;
}
.menu-stage.is-advanced #menu-mode-switch {
  transform: translateY(-40px);
}

.menu-icon-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.menu-icon-btn:hover { background: rgba(232,201,109,0.12); border-color: var(--gold-light); transform: scale(1.05); }
.menu-icon-btn.muted { color: var(--text-dim); }
.menu-icon-btn.size-sm { width: 32px; height: 32px; }

/* Combined identity pill — Player name + divider + Online count, all in
   one shared glass container so they read as a single element. */
.menu-identity-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.menu-identity-pill .part {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
}
.menu-identity-pill .part.online-part { gap: 7px; }
.menu-identity-pill .divider {
  width: 1px;
  height: 22px;
  background: var(--gold-line);
  flex-shrink: 0;
}
/* Strip the standalone-pill styling from .menu-online when it's nested
   inside the combined pill — only the .count + .t-label rules survive. */
.menu-identity-pill .menu-online {
  padding: 7px 15px;       /* keep .part padding via this override */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.menu-name-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.menu-name-pill input,
.menu-identity-pill .name-part input {
  background: transparent; border: 0; outline: 0;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 1px; font-weight: 600;
  width: 140px; text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  /* Reset OS default input look (especially Safari) */
  -webkit-appearance: none; appearance: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.menu-name-pill input::placeholder,
.menu-identity-pill .name-part input::placeholder {
  color: var(--text-dim);
}
.menu-name-pill .t-label,
.menu-identity-pill .name-part .t-label {
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.menu-online {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.menu-online .count {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: #7be88a; letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(123,232,138,0.45);
}
.menu-online .t-label {
  /* Green label too — matches the count */
  color: #7be88a;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 8px rgba(123,232,138,0.35);
}

.menu-vibe-jam {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: #fff; color: #000;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border-radius: 4px; text-decoration: none;
  transform: rotate(-3deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .18s var(--ease);
}
.menu-vibe-jam:hover { transform: rotate(-3deg) scale(1.05); }

.menu-row1-right { display: inline-flex; align-items: center; gap: 8px; }
.menu-row1-center { display: inline-flex; align-items: center; gap: 10px; }

/* ============================================================
   FactionPicker carousel — used in header row 2 (You / Enemy)
   ============================================================ */
.fpicker {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.fpicker-row {
  display: inline-flex; align-items: center; gap: 5px;
}
.fpicker-label {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; opacity: 0.85;
  margin: 0;
}
.fpicker-label.left  { color: var(--gold-light); }
.fpicker-label.right { color: #ffb8b8; }

.fpicker-arrow {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .18s var(--ease);
}
.fpicker-arrow:hover { background: rgba(232,201,109,0.15); }

.fpicker-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: all .32s var(--ease);
  flex-shrink: 0;
  cursor: pointer;
}
.fpicker-tile.side {
  width: 91px; height: 95px;     /* 2× minus 5% */
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.55;
}
.fpicker-tile.side.locked { opacity: 0.32; cursor: not-allowed; }
.fpicker-tile.active {
  width: 437px; height: 133px;   /* 2× minus 5% */
  border-radius: 12px;
  border: 1.5px solid var(--gold);
  opacity: 1;
  box-shadow: 0 0 18px rgba(201,168,76,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: default;
}
.fpicker-tile.active.right {
  border-color: var(--team-b);
  box-shadow: 0 0 18px rgba(204,68,68,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Real faction portrait inside the tile (replaces gradient placeholder). */
.fpicker-tile .fpicker-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
}
.fpicker-tile.side .fpicker-bg-img {
  /* Side tiles are tiny — crop tighter on the face/sigil area */
  object-position: center 35%;
  filter: saturate(0.85) brightness(0.85);
}
/* Knights artwork has the castle in the upper half — shift the crop UP
   so more of the castle is visible (was 65% showing too much ground).
   Overrides both active and side tiles. */
.fpicker-tile[data-faction="knight"] .fpicker-bg-img {
  object-position: center 50%;
}
.fpicker-tile .fpicker-bg-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.fpicker-tile.side .fpicker-bg-veil {
  background: rgba(0,0,0,0.35);
}
.fpicker-tile .fpicker-bg-veil-locked {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.7));
  pointer-events: none;
}

.fpicker-tile-active-content {
  position: absolute; inset: 0;
  padding: 0 27px;
  display: flex; align-items: center; justify-content: center; gap: 17px;
}
.fpicker-tile-active-content .info {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 0; flex: 0 1 auto;
}
.fpicker-tile-active-content .name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24.7px; letter-spacing: 3.8px; line-height: 1.1;
  color: var(--text-bright); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,1);
}

/* Side-tile faction name overlay */
.fpicker-tile-side-name {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 8px; letter-spacing: 0.8px; line-height: 1.05;
  color: var(--text-bright); text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.7);
  pointer-events: none;
  white-space: nowrap;
}

.fpicker-side-dot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

.fpicker-counter {
  font-family: var(--font-mono); font-size: 9px;
  opacity: 0.45; margin-left: 4px;
}

/* Faction dot (in tiles, in chat etc) */
.fdot {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.fdot-necro    { background: radial-gradient(circle at 35% 35%, #a060d0, #3a1f4a); }
.fdot-beast    { background: radial-gradient(circle at 35% 35%, #a8c050, #2a3a14); }
.fdot-machinas { background: radial-gradient(circle at 35% 35%, #9070ff, #1a1830); }
.fdot-knight   { background: radial-gradient(circle at 35% 35%, #e8c96d, #3a2c14); }

/* ============================================================
   Battle Settings card — centered both X and Y in the stage.
   Classic translate(-50%, -50%) centering with a dedicated keyframe
   that bakes the centering offset into the entrance animation.
   ============================================================ */
.battle-settings-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: 440px;
  z-index: 10;
  animation: cardEnterCentered .52s var(--ease) both;
}
@keyframes cardEnterCentered {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); filter: blur(4px); }
  100% { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
}
.battle-settings {
  width: 100%;                /* fill the 440px wrap exactly */
  box-sizing: border-box;     /* padding included in width — no overflow */
  padding: 24px;
}
.battle-settings .title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: 2px;
  color: var(--text-bright); text-transform: uppercase;
  margin-top: 2px;
}
.battle-settings .pill-row { display: flex; width: 100%; }
.battle-settings .pill-row .pill { flex: 1; text-align: center; }

.battle-settings .summary-grid {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
/* Native <select> styled to read like the other .t-stat values — no
   default browser chrome. Small chevron painted via inline SVG. */
.battle-settings .t-stat-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 3px 22px 3px 8px;
  color: var(--text-bright);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  outline: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23e8c96d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 11px 11px;
  transition: border-color .14s ease;
}
.battle-settings .t-stat-select:hover  { border-color: var(--gold-light); }
.battle-settings .t-stat-select:focus  { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.18); }
.battle-settings .t-stat-select option {
  background: #1a120a;        /* fallback dark bg for native dropdown */
  color: var(--text-bright);
}
/* Inline "· 700 pts" suffix on the Foe value — small + dim, sits
   on the same line so the cell doesn't grow vertically. */
.battle-settings .t-stat-pts {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--text-dim);
  opacity: 0.85;
  margin-left: 2px;
  white-space: nowrap;
}

.battle-settings .adv-hint {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 11px; line-height: 1.35;
  color: var(--text-dim);
  text-align: center;
  opacity: 0.75;
}

/* ============================================================
   Map Carousel — bottom-center, 3-visible (prev/active/next)
   ============================================================ */
/* Legacy bottom Simple-state carousel — replaced by the unified
   top-right map picker. `position: absolute` so hiding it with
   display:none doesn't shift any other element. */
.map-carousel-wrap {
  position: absolute; bottom: 30px; left: 0; right: 0;
  display: none;
  justify-content: center;
  z-index: 10;
}
.map-carousel-shell {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
}
.map-track {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
}
.map-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all .32s var(--ease);
  cursor: pointer;
  flex-shrink: 0;
  background-size: cover; background-position: center;
}
.map-card .map-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7));
}
.map-card .map-name {
  position: absolute; bottom: 6px; left: 8px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-light);
}
.map-card.side {
  width: 100px; height: 60px;
  opacity: 0.55;
}
.map-card.side .map-name { font-size: 9px; }
.map-card.side:hover { opacity: 0.85; }
.map-card.active {
  width: 200px; height: 86px;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 24px rgba(201,168,76,0.35);
  cursor: default;
}
.map-card.active .map-name { font-size: 12px; }

@keyframes mapPulse {
  0%   { transform: scale(0.96); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.map-card.active.flash { animation: mapPulse .42s var(--ease); }

/* ============================================================
   Variant chip (top-left tag)
   ============================================================ */
.variant-chip {
  position: absolute; top: 100px; left: 28px;
  z-index: 9;
  pointer-events: none;
}

/* ============================================================
   ADVANCED STATE (inline toggle from Simple)
   When .is-advanced is on the stage:
   - Simple-only elements slide out / fade out
   - Enemy hero slides in from the right
   - Two army panels appear flanking center
   - Bottom action bar with Start Battle / Back appears
   ============================================================ */

/* Hide Simple-only elements when advanced is active.
   `animation: none` is critical — otherwise the cardEnter keyframe's
   100% state (which has fill-mode: both) keeps overriding our transform.
   `translate(120%, -50%)` slides off-right but preserves the vertical
   centering offset (top:50% + translateY(-50%)). */
.menu-stage.is-advanced .battle-settings-wrap {
  animation: none;
  transform: translate(120%, -50%);
  opacity: 0;
  pointer-events: none;
}
.menu-stage.is-advanced .map-carousel-wrap {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.battle-settings-wrap, .map-carousel-wrap {
  transition: transform .42s var(--ease), opacity .42s var(--ease);
}

/* In Advanced, both heroes spread 100px further apart (player → left,
   enemy → right) so the army-builder panels have more room in the middle. */
.menu-stage.is-advanced .menu-hero-bg,
.menu-stage.is-pvp .menu-hero-bg {
  left: calc(4% - 300px);
  transition: left .42s var(--ease);
}
/* (Nameplates now live inside the hero wraps and ride along automatically;
   no separate `.is-advanced` rule needed.) */
.menu-stage.is-advanced .menu-enemy-bg {
  right: calc(4% - 300px);
  /* keep existing transition (transform/opacity) — add right */
  transition: transform .52s var(--ease), opacity .52s var(--ease), right .42s var(--ease);
}
/* (Enemy nameplate inside enemy wrap; the wrap's transform+opacity
   transition covers slide-in. No per-nameplate is-advanced rule.) */

/* Enemy hero — mirrored to the player's exact position.
   Base (Simple/Advanced): bottom:0, right: calc(4% - 200px), height: 960px.
   In Advanced state shifts further right by another 100px (see below). */
.menu-enemy-bg {
  position: absolute; bottom: 0; right: calc(4% - 200px);
  height: 960px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.85))
          drop-shadow(0 0 60px rgba(204,68,68,0.15));
  transform: translateX(120%);
  opacity: 0;
  transition: transform .52s var(--ease), opacity .52s var(--ease),
              right .42s var(--ease);
}
.menu-enemy-bg video {
  height: 100%; width: auto; display: block;
  transform: scaleX(-1);
  transform-origin: bottom center;
}
.menu-enemy-nameplate {
  /* Mirrors .menu-hero-nameplate; sits inside .menu-enemy-bg wrap so the
     wrap's translateX/opacity transitions cover the slide-in animation. */
  position: absolute;
  bottom: 185px;
  right: calc(50% - 35px);
  left: auto;
  transform: translateX(50%);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 6px; text-transform: uppercase;
  color: #ffb8b8;
  text-shadow: 0 0 8px rgba(0,0,0,0.95);
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}
.menu-stage.is-advanced .menu-enemy-bg { transform: translateX(0); opacity: 1; }
/* Nameplate inherits opacity from the enemy wrap above. */

/* Two army panels (Player + Enemy) — appear from below */
.adv-army-panels {
  position: absolute;
  left: 50%; top: 130px; bottom: 100px;
  transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: min(900px, calc(100% - 320px));
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease) .2s;
}
.menu-stage.is-advanced .adv-army-panels {
  opacity: 1;
  pointer-events: auto;
}

.army-panel {
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  animation: cardEnter .52s var(--ease) both;
}
.menu-stage.is-advanced .army-panel.player { animation-delay: 80ms; }
.menu-stage.is-advanced .army-panel.enemy  { animation-delay: 160ms; }

.army-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-line);
}
.army-panel-header .name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-bright);
  display: flex; align-items: center; gap: 8px;
}
.army-panel.enemy .army-panel-header .name { color: #ffd8d8; }
.army-panel-header .label {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 2px;
  color: var(--text-dim); text-transform: uppercase;
}

.army-panel-body {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.army-panel-row {
  display: flex; justify-content: space-between; align-items: center;
}
.army-panel-row .l { color: var(--text-dim); font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.army-panel-row .v { color: var(--gold-light); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }

.army-panel-cta {
  margin-top: auto;
  display: flex; gap: 8px;
}
.army-panel-cta .btn-ghost { flex: 1; }

/* ============================================================
   Full ArmyBuilder grid (S2) — unit cards row, slider row, detail
   ============================================================ */
.ab-grid-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.ab-unit-card {
  position: relative;
  border-radius: 10px;
  padding: 16px 6px 6px;
  border: 1.5px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(40,28,18,0.55) 0%, rgba(13,8,5,0.92) 100%);
  cursor: pointer;
  display: flex; flex-direction: column;
  /* Fixed total height — every card identical regardless of name length. */
  height: 154px;
  min-width: 0;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.ab-unit-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.22); box-shadow: 0 8px 22px rgba(0,0,0,0.55); }
.ab-unit-card.active {
  transform: translateY(-3px);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,168,76,0.22) 0%, rgba(13,8,5,0.92) 100%);
  box-shadow: 0 0 26px rgba(201,168,76,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.army-panel.enemy .ab-unit-card.active {
  border-color: var(--team-b);
  background: linear-gradient(180deg, rgba(204,68,68,0.22) 0%, rgba(13,8,5,0.92) 100%);
  box-shadow: 0 0 26px rgba(204,68,68,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Unaffordable: budget can't fit even 1 of this unit AND none currently picked.
   Greys the whole column out, blocks pointer interaction. Cards with count > 0
   never get this — user must always be able to decrement existing stacks. */
.ab-unit-card.unaffordable {
  opacity: 0.38;
  filter: grayscale(0.8);
  pointer-events: none;
}
.ab-unit-card.unaffordable .meta { color: var(--danger); }
.ab-slider.unaffordable {
  opacity: 0.4;
  filter: grayscale(0.7);
  pointer-events: none;
}
.ab-unit-card .tier-ribbon {
  position: absolute; top: 0; left: 6px; right: 6px;
  text-align: center;
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 1.8px; font-weight: 800;
  color: var(--text-dim);
  background: rgba(0,0,0,0.65);
  border-radius: 0 0 5px 5px;
  padding: 1px 0;
  text-transform: uppercase;
  z-index: 2;
}
.ab-unit-card.active .tier-ribbon {
  background: var(--gold-grad);
  color: #1a0f04;
}
.army-panel.enemy .ab-unit-card.active .tier-ribbon {
  background: linear-gradient(180deg, #ff8a8a 0%, #cc4444 60%, #802020 100%);
  color: #fff;
}
.ab-unit-portrait {
  position: relative;
  height: 80px;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(0,0,0,0.5);
  background-image: radial-gradient(ellipse at 50% 40%, rgba(120,60,150,0.35), rgba(0,0,0,0.85));
  border: 1px solid rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.army-panel.enemy .ab-unit-portrait {
  background-image: radial-gradient(ellipse at 50% 40%, rgba(150,60,60,0.35), rgba(0,0,0,0.85));
}
.ab-unit-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.ab-unit-portrait .count-badge {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #2a1a4a 0%, #160c28 100%);
  border: 1px solid rgba(180,140,255,0.55);
  color: #e8d8ff;
  padding: 1px 10px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  min-width: 26px; text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.ab-unit-card .label {
  text-align: center; margin-top: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 0.8px;
  color: var(--text); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 100%;
  /* Fixed line height so 1- and 2-word names take same vertical space */
  height: 12px; line-height: 12px;
}
.ab-unit-card.active .label { color: var(--text-bright); }
.ab-unit-card .meta {
  text-align: center;
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--gold-light); opacity: 0.85;
  margin-top: 1px;
  height: 12px; line-height: 12px;
  white-space: nowrap; overflow: hidden;
}

/* Slider row (vertical sliders, +/- steppers) — taller + wider for easier
   pointer targeting on desktop and touch. */
.ab-slider-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 12px 0 10px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent);
  border-radius: 6px;
}
.ab-slider {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  /* The whole wrap is the click target — no dead zone around the track.
     `touch-action: none` lets pointermove drive the drag on touch devices. */
  padding: 6px 4px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ab-slider .track,
.ab-slider .stepper,
.ab-slider .ab-stepper {
  /* These are visual only — clicks bubble up to the wrap's pointerdown */
  pointer-events: none;
}
.ab-slider .ab-stepper button {
  pointer-events: auto;     /* but the +/− buttons stay independently clickable */
}
.ab-slider .track {
  position: relative;
  width: 14px; height: 120px;          /* was 7×64 — 2× area for easier grab */
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.45));
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  cursor: pointer;
  touch-action: none;                   /* let pointermove drive drag on touch */
}
.ab-slider .fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--gold-grad);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(232,201,109,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  pointer-events: none;
  /* No transition — fill must follow the cursor live during drag */
}
.army-panel.enemy .ab-slider .fill {
  background: linear-gradient(180deg, #ff8a8a, #cc4444 60%, #802020);
  box-shadow: 0 0 8px rgba(255,120,120,0.5);
}
.ab-slider .thumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px;            /* was 16 — bigger drag target */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c96d, #9a7e34);
  border: 1.5px solid #e8c96d;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 10px rgba(232,201,109,0.55), inset 0 1px 1px rgba(255,255,255,0.5);
  pointer-events: none;
  /* No transition — must follow the cursor live during drag */
}
.army-panel.enemy .ab-slider .thumb {
  background: radial-gradient(circle at 35% 30%, #f08080, #902525);
  border-color: #f08080;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 10px rgba(255,120,120,0.55), inset 0 1px 1px rgba(255,255,255,0.5);
}
.ab-stepper {
  display: flex; flex-direction: column; gap: 4px;
}
.ab-stepper button {
  width: 22px; height: 22px;            /* was 16 — easier to hit */
  padding: 0; border-radius: 5px;
  background: linear-gradient(180deg, rgba(232,201,109,0.22), rgba(0,0,0,0.5));
  border: 1px solid rgba(201,168,76,0.55);
  color: var(--gold-light);
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .12s var(--ease), transform .08s var(--ease);
}
.ab-stepper button:hover  { filter: brightness(1.3); }
.ab-stepper button:active { transform: scale(0.88); }
.army-panel.enemy .ab-stepper button {
  background: linear-gradient(180deg, rgba(255,120,120,0.18), rgba(0,0,0,0.5));
  border-color: rgba(204,68,68,0.55);
  color: #f08080;
}

/* Detail strip below grid — FIXED HEIGHT.
   Both panels stay the same size regardless of how many abilities the
   selected unit has. The abilities column scrolls internally when the
   list overflows (Death has 5 abilities; Hydra/Steel Tyrant up to 6+). */
.ab-detail {
  display: grid;
  grid-template-columns: 140px 1.1fr 1fr;
  grid-template-rows: 140px;       /* explicit row height — child grid items can't push it taller */
  gap: 10px;
  margin-top: 8px;
  height: 140px;
}
.ab-detail-portrait {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #1a1428, #0a0610);
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  height: 100%;
}
/* Faction-themed environment layer — sits BEHIND the unit portrait so
   transparent areas of the unit illustration show the faction's habitat
   (necromancer crypt, beastlands forest, machinas foundry…) instead of
   a flat dark gradient. */
.ab-detail-portrait-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 35%;
  filter: brightness(0.55) saturate(0.9) contrast(1.05);
  z-index: 0;
}
/* Machinas habitat artwork is shot wider/zoomed-out than the other two —
   crop in so the subject reads at the same scale as necro/beast bgs. */
.ab-detail-portrait[data-faction="machinas"] .ab-detail-portrait-bg {
  background-size: auto 100%;     /* fit by height, crop sides */
  background-position: center center;
  background-repeat: no-repeat;
}
.ab-detail-portrait .img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000);
  z-index: 1;
}
.ab-detail-portrait .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.55));
}
.ab-detail-info {
  padding: 2px 4px 0 6px;
  display: flex; flex-direction: column; min-width: 0;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
.ab-detail-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 1.2px;
  color: var(--gold-light); text-transform: uppercase;
}
.ab-detail-tier {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-dim); margin-top: 1px;
}
.ab-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin-top: 8px;
}
.ab-stat {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 1px;
}
.ab-stat .lbl {
  font-family: var(--font-display); font-size: 8px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-dim);
}
.ab-stat .val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--gold-light);
}
.ab-abilities {
  padding: 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.05);
  /* Border-box so padding+border are INSIDE the 140px height, not added on top.
     Without this, content-box adds 16px padding outside, exceeding the row,
     which forces the grid track to grow and the panel along with it. */
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto; overflow-x: hidden;
  min-height: 0;
  /* Subtle gold scrollbar (Firefox + WebKit) */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) rgba(0,0,0,0.4);
}
.ab-abilities::-webkit-scrollbar { width: 6px; }
.ab-abilities::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); border-radius: 3px; }
.ab-abilities::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
.ab-abilities::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.ab-abilities .label {
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 2.5px; color: var(--text-dim);
  text-transform: uppercase; margin-bottom: 6px;
}
.ab-ability {
  margin-bottom: 6px;
}
.ab-ability .name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 1px;
  color: var(--gold-light); text-transform: uppercase;
}
.ab-ability .desc {
  font-family: var(--font-body); font-size: 10px;
  color: var(--text); opacity: 0.72; line-height: 1.3; margin-top: 1px;
}
.ab-no-abilities {
  font-family: var(--font-body); font-size: 11px;
  color: var(--text-dim); font-style: italic;
}

/* Footer (Reset / used / Apply) — compressed */
.ab-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--gold-line);
}
.ab-footer .used {
  text-align: center;
}
.ab-footer .used .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 1px;
  color: #7be88a;
}
.army-panel.enemy .ab-footer .used .num { color: #f0a0a0; }
.ab-footer .used .num.over { color: var(--danger); }

/* Apply button — reserved for the upcoming PvP army-builder. In the
   current vs-AI flow Start Battle commits the live army, so the button
   is hidden completely (no clickable area, no hover region). When PvP
   build mode arrives we'll re-show it via `.menu-stage.is-pvp-build`. */
.ab-apply { display: none; }
.ab-footer .used .total {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); opacity: 0.6;
}
.ab-footer .used .unspent {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-dim); opacity: 0.55; margin-top: 1px;
}
.ab-footer .btn-ghost { padding: 7px 14px; font-size: 9px; }
.ab-footer .btn-gold  { padding: 8px 18px; font-size: 10px; }

/* Make the Advanced layout wider/taller to fit the full builder.
   The control-row above takes ~74px so the panels start at top:200.
   `align-items: start` stops the grid from stretching panels to the
   full row height — they shrink to their natural content height,
   killing the empty space below the detail strip. */
.menu-stage.is-advanced .adv-army-panels {
  width: min(1280px, calc(100% - 280px));
  top: 315px;       /* moved up 25px (was 340) */
  bottom: 90px;     /* extended down (was 100) — fits panel footer above the action bar */
  align-items: start;
  align-content: start;
}
.menu-stage.is-advanced .army-panel {
  padding: 14px;
  /* No max-height: panel takes its natural content height (~657px) so the
     Reset / used / Apply footer always sits inside the panel border. */
}

/* ============================================================
   Advanced Control Row — player budget · map · enemy budget + diff
   ============================================================ */
.adv-control-row {
  position: absolute;
  top: 225px;       /* moved up 25px (was 250) */
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 280px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease) .15s;
}
.menu-stage.is-advanced .adv-control-row {
  opacity: 1;
  pointer-events: auto;
}

/* Budget slider — horizontal */
.budget-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.65));
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 14px;
  box-shadow: 0 0 16px rgba(201,168,76,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  width: 100%;
  box-sizing: border-box;
}
.budget-slider.enemy {
  border-color: rgba(204,68,68,0.55);
  box-shadow: 0 0 16px rgba(204,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

.budget-slider-info {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex-shrink: 0;
}
.budget-slider-info .label {
  font-family: var(--font-display);
  font-size: 8.5px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-light);
}
.budget-slider.enemy .budget-slider-info .label { color: #ffb8b8; }
.budget-slider-info .value {
  padding: 0; background: transparent; border: 0;
  cursor: text;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px; text-align: left;
  display: inline-flex; align-items: baseline; gap: 3px;
}
.budget-slider-info .value-suffix {
  font-family: var(--font-mono);
  font-size: 9px; opacity: 0.55; font-weight: 400;
}
.budget-slider-info input.value-input {
  width: 84px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  outline: none; text-align: left;
}
.budget-slider.enemy .budget-slider-info input.value-input { border-color: var(--team-b); }

.budget-slider-track {
  position: relative;
  flex: 1; height: 26px;
  min-width: 110px;
  cursor: pointer;
  display: flex; align-items: center;
}
.budget-slider-track .rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 6px; border-radius: 3px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  pointer-events: none;
}
.budget-slider-track .fill {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(201,168,76,0.25);
  pointer-events: none;
}
.budget-slider.enemy .budget-slider-track .fill {
  background: linear-gradient(90deg, var(--team-b), #ffb8b8);
  box-shadow: 0 0 8px rgba(204,68,68,0.3);
}
.budget-slider-track .tick {
  position: absolute;
  top: 50%; width: 1px; height: 8px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}
.budget-slider-track .thumb {
  position: absolute;
  top: 50%; width: 18px; height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 60%, #7a5e30 100%);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 12px rgba(201,168,76,0.25), 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  pointer-events: none;
}
.budget-slider.enemy .budget-slider-track .thumb {
  background: radial-gradient(circle at 35% 35%, #ffb8b8, var(--team-b) 60%, #7a2828 100%);
  border-color: var(--team-b);
  box-shadow: 0 0 12px rgba(204,68,68,0.3), 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* AI difficulty pill cluster (inside enemy budget-slider) */
.budget-slider .diff-pills {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(204,68,68,0.4);
  flex-shrink: 0;
}
.budget-slider .diff-pills button {
  padding: 4px 11px;
  background: transparent;
  color: var(--text-dim);
  border: none; border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  transition: all .18s var(--ease);
}
.budget-slider .diff-pills button.active {
  background: var(--team-b);
  color: #1a0408;
}

/* Centre column wrapper — stacks the map carousel (lifted up) and
   the Random button below it. */
.adv-center-stack {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}

/* Random buttons pair — gold (player) + red (enemy), 10px gap centered
   on the stage midline. The lift (-45px) lives on the wrapper so both
   buttons rise together; per-button hover/active just adds a small Y. */
.adv-random-pair {
  display: inline-flex; align-items: center; gap: 10px;
  transform: translateY(-37px);
}
.adv-random-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .12s var(--ease);
}
/* Player — gold */
.adv-random-btn.player {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: #1a0f04;
  border: 1px solid #f0d27a;
  box-shadow: 0 4px 14px rgba(201,168,76,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(255,230,150,0.4);
}
.adv-random-btn.player:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 22px rgba(201,168,76,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Enemy — red, mirrors gold's depth recipe */
.adv-random-btn.enemy {
  background: linear-gradient(180deg, #ff9a9a, var(--team-b) 55%, #5a1818);
  color: #2a0606;
  border: 1px solid #ffa8a8;
  box-shadow: 0 4px 14px rgba(204,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(255,210,210,0.45);
}
.adv-random-btn.enemy:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(204,68,68,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}
.adv-random-btn:active { transform: translateY(1px); }
.adv-random-btn .dice {
  display: inline-block;
  animation: none;
}
.adv-random-btn:active .dice { animation: random-spin .42s var(--ease); }
@keyframes random-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Center map carousel pill in the control row.
   Lifted 50px up and scaled 1.2× via transform — purely visual, doesn't
   affect grid layout, so the gap between Player & Enemy budget sliders
   stays the same (the auto column still reserves the carousel's actual
   bounding box width). */
/* Legacy centered Advanced-state map carousel — replaced by the
   unified `.pvp-map-picker` which animates into this slot in Advanced.
   Hidden via opacity (NOT display:none) so it keeps its 68px in the
   `.adv-center-stack` flex column — that way the Randomize Army pair
   below stays in its original position. */
.adv-map-carousel {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
  /* Row moved up 25px; carousel translate compensates so its visual
     position stays where the user placed it. */
  transform: translateY(-75px) scale(1.2);
  transform-origin: center;
}
.adv-map-carousel .map-arrow {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.adv-map-carousel .map-arrow:hover { background: rgba(232,201,109,0.15); }
.adv-map-carousel .map-card {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all .32s var(--ease);
  flex-shrink: 0;
  background-size: cover; background-position: center;
  cursor: pointer;
}
.adv-map-carousel .map-card.side {
  width: 64px; height: 40px;
  opacity: 0.55;
}
.adv-map-carousel .map-card.active {
  width: 130px; height: 56px;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 18px rgba(201,168,76,0.35);
  cursor: default;
}
.adv-map-carousel .map-card .map-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7));
}
.adv-map-carousel .map-card .map-name {
  position: absolute; bottom: 3px; left: 5px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-light);
  font-size: 10px;
}
.adv-map-carousel .map-card.side .map-name { font-size: 8px; }

/* Bottom action bar */
.adv-actions {
  position: absolute;
  left: 50%; bottom: 10px;       /* moved down 20px (was bottom:30) */
  transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
  padding: 12px 20px;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease) .3s;
}
.menu-stage.is-advanced .adv-actions {
  opacity: 1;
  pointer-events: auto;
}
.adv-actions .btn-gold { padding: 14px 32px; }
.adv-actions .btn-ghost { padding: 14px 24px; }

/* No responsive @media queries — the stage is fixed 1920×1080 and
   transform-scaled to fit the viewport (see fitMenuStage in JS).
   Layout never reflows on resize. */

/* ============================================================
   PVP STATE (inline overlay) — replaces simple/advanced UI when
   user clicks the PvP tab in the mode segmented switch.
   ============================================================ */

/* When PvP is on, hide simple/advanced UI */
.menu-stage.is-pvp .battle-settings-wrap,
.menu-stage.is-pvp .map-carousel-wrap,
.menu-stage.is-pvp .adv-control-row,
.menu-stage.is-pvp .adv-army-panels,
.menu-stage.is-pvp .menu-enemy-bg,
.menu-stage.is-pvp .menu-enemy-nameplate,
.menu-stage.is-pvp .adv-actions {
  display: none;
}
/* Player hero stays visible (lives behind the PvP browser as decor) */

/* PvP browser container — appears in the centre below the header */
.pvp-browser {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 280px));
  z-index: 10;
  display: flex; flex-direction: column;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease) .1s;
}
.menu-stage.is-pvp .pvp-browser {
  opacity: 1;
  pointer-events: auto;
}

/* Sub-mode tab bar (1v1 / 2v2 / FFA) */
.pvp-mode-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pvp-mode-bar .pill-row {
  padding: 6px;
}
.pvp-mode-bar .pill {
  padding: 10px 28px;
  font-size: 13px;
  letter-spacing: 2.5px;
}

/* Two-column body: Create (left) + Lobbies (right). `align-items:start`
   so each card sizes to its own content (lobbies card grows row-by-row
   instead of stretching to match Create's height). */
.pvp-body {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}

/* Create-match card */
.pvp-create {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.pvp-create-title {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold-line);
}
.pvp-field {
  display: flex; flex-direction: column; gap: 4px;
}
.pvp-field-label {
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 2px; color: var(--text-dim);
  text-transform: uppercase;
}
.pvp-select, .pvp-input {
  padding: 9px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 1px;
  outline: none;
}
.pvp-select:focus, .pvp-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
}
.pvp-checkbox-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}
.pvp-checkbox-row input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gold); }
.pvp-checkbox-row label {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1px; color: var(--text);
  text-transform: uppercase; cursor: pointer;
}
.pvp-create .btn-gold {
  margin-top: 6px;
  padding: 14px 22px;
  font-size: 13px;
}
/* Disabled "Lobby Open · Waiting…" state — host has created a lobby
   but no joiners yet. Dimmed but still legible. */
.pvp-create .btn-gold:disabled {
  filter: grayscale(0.55) brightness(0.78);
  cursor: default;
  opacity: 0.85;
}
/* Ready state — joiner armies are in, host can fire the battle. */
.pvp-create .btn-gold.is-start-battle {
  background: linear-gradient(180deg, #b8e878, #4a8a2c 55%, #1f4612);
  color: #f8fff0;
  border-color: #c8e878;
  box-shadow: 0 4px 14px rgba(120,200,80,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(40,80,20,0.55);
  animation: pvpStartPulse 1.6s ease-in-out infinite;
}
@keyframes pvpStartPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(120,200,80,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 8px 26px rgba(120,200,80,0.65), 0 0 0 4px rgba(120,200,80,0.18), inset 0 1px 0 rgba(255,255,255,0.5); }
}

/* PvP-create budget slider — sits on its own dark card so the slider
   widget reads as a labelled "field" matching the other PvP rows. */
.pvp-create #pvp-budget-slider {
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
}
.pvp-create #pvp-budget-slider .budget-slider-info {
  margin-bottom: 6px;
}
.pvp-create #pvp-budget-slider .label {
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.pvp-create #pvp-budget-slider .value {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px;
  letter-spacing: 1px;
}
.pvp-create #pvp-budget-slider .value-suffix {
  font-family: var(--font-mono);
  font-size: 9px; opacity: 0.55; margin-left: 4px;
  letter-spacing: 0;
}

/* ── PvP army-build modal ────────────────────────────────────
   Opens on top of everything when the player clicks Create Lobby.
   Hosts a single player army-panel (reusing the Advanced builder). */
.pvp-build-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: pvpBuildFadeIn .22s var(--ease);
}
@keyframes pvpBuildFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pvp-build-card {
  width: min(880px, calc(100vw - 60px));
  max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  padding: 20px 22px 16px;
  border-radius: 14px;
  border: 1px solid var(--gold);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.7),
    0 0 30px rgba(201,168,76,0.25),
    inset 0 1px 0 rgba(255,230,150,0.08);
  background: linear-gradient(180deg, rgba(20,12,8,0.95), rgba(10,6,4,0.97));
  overflow: hidden;
  animation: pvpBuildPop .32s cubic-bezier(0.34, 1.32, 0.64, 1);
}
@keyframes pvpBuildPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.pvp-build-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-line);
  margin-bottom: 14px;
}
.pvp-build-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px; letter-spacing: 3px;
  color: var(--gold-light);
  text-transform: uppercase;
}
.pvp-build-sub {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.75;
  text-align: right;
  margin-right: 8px;
}
.pvp-build-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.pvp-build-close:hover {
  background: rgba(232,201,109,0.14);
  border-color: var(--gold-light);
}

/* The hosted army panel — let it grow naturally inside the card. */
.pvp-build-card .army-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.pvp-build-foot {
  display: flex; gap: 12px; justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--gold-line);
  margin-top: 14px;
}

/* ── Generic confirm dialog ────────────────────────────────
   Stacks ABOVE the PvP build modal so it can confirm actions that
   originated there too. Reused by anything in the menu that needs a
   blocking yes/no prompt. */
.confirm-dialog-overlay {
  position: fixed; inset: 0;
  z-index: 2500;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: pvpBuildFadeIn .18s var(--ease);
}
.confirm-dialog-card {
  width: min(420px, calc(100vw - 60px));
  padding: 26px 28px 20px;
  border-radius: 14px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(20,12,8,0.96), rgba(10,6,4,0.98));
  box-shadow:
    0 28px 70px rgba(0,0,0,0.7),
    0 0 30px rgba(201,168,76,0.25),
    inset 0 1px 0 rgba(255,230,150,0.08);
  animation: pvpBuildPop .26s cubic-bezier(0.34, 1.32, 0.64, 1);
}
.confirm-dialog-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px; letter-spacing: 2.5px;
  color: var(--gold-light);
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gold-line);
}
.confirm-dialog-body {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.55;
  color: var(--text);
  margin-bottom: 22px;
  text-align: center;
  white-space: pre-line;          /* honour \n line breaks from JS */
  opacity: 0.92;
}
.confirm-dialog-foot {
  display: flex; gap: 10px; justify-content: center;
}
/* Equal-width balanced buttons. Override the .btn-ghost / .btn-gold
   defaults so labels fit on one line and the two pills look like a
   matched pair. */
.confirm-dialog-foot .btn-ghost,
.confirm-dialog-foot .btn-gold {
  flex: 1;
  max-width: 170px;
  min-width: 130px;
  padding: 11px 14px;
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center; justify-content: center;
}

/* Open lobbies card */
/* Card grows with its rows: shrinks down to header + empty-state when
   the list is empty, expands one row at a time as lobbies arrive, and
   caps at `max-height` so the bottom stays ~20 px above the
   "Back to vs AI" pill — beyond that, the inner list scrolls.
   Stage height = 1080. Browser top = 200. Back-bar bottom = 10 +
   ≈ 50 of pill height = ~60 px from stage bottom. Available browser
   column height ≈ 1080 − 200 − 60 − ≈ 50 (sub-mode bar) − 16 (gap) −
   20 (breathing room) = ≈ 734. We use 720 as a round cap. */
.pvp-lobbies {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
  max-height: 720px;
}
.pvp-lobbies-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold-line);
}
.pvp-lobbies-title {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase;
}
.pvp-refresh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.pvp-refresh:hover { color: var(--gold-light); border-color: var(--gold-light); }

.pvp-lobbies-list {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) rgba(0,0,0,0.4);
  /* Take ALL remaining height inside the lobbies card. The
     `min-height: 0` is the critical bit — without it a flex child
     refuses to shrink below its intrinsic content height, which
     defeats `overflow: auto` and the scrollbar never appears. */
  flex: 1 1 auto;
  min-height: 0;
}
.pvp-lobbies-list::-webkit-scrollbar { width: 6px; }
.pvp-lobbies-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); border-radius: 3px; }
.pvp-lobbies-list::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

.pvp-lobby-row {
  display: grid;
  grid-template-columns: 70px 1fr 90px 60px 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: all .18s var(--ease);
}
.pvp-lobby-row:hover {
  border-color: var(--gold-line);
  background: rgba(0,0,0,0.5);
}
/* "Your lobby" — subtle gold outline + slight tint so the host's
   own row stands out from the join-able ones. */
.pvp-lobby-row.is-mine {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  box-shadow: inset 0 0 0 1px rgba(232,201,109,0.18);
}
.pvp-lobby-row.is-mine .pvp-lobby-host .name { color: var(--gold-light); }
.pvp-lobby-cancel {
  background: linear-gradient(180deg, rgba(204,68,68,0.85), rgba(120,28,28,0.95)) !important;
  border-color: rgba(255,170,170,0.45) !important;
  color: #fff8ee !important;
}
.pvp-lobby-cancel:hover {
  filter: brightness(1.1);
}
.pvp-lobby-mode {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 1.5px; color: var(--gold-light);
  text-transform: uppercase;
}
.pvp-lobby-host {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.pvp-lobby-host .name {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 1px; color: var(--text-bright);
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvp-lobby-faction {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
.pvp-lobby-seats {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--gold-light);
  letter-spacing: 1px;
  text-align: center;
  font-weight: 700;
}
.pvp-lobby-join {
  padding: 7px 12px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: #1a0f04;
  border: 1px solid var(--gold-light);
  border-radius: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer;
}
.pvp-lobby-join:hover { filter: brightness(1.1); }

.pvp-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
}

/* PvP back button — bottom bar */
.pvp-back-bar {
  position: absolute;
  z-index: 11;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
  padding: 12px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease) .25s;
}

/* ── Unified map picker (top-right, mirrors "Your Faction" picker) ──
   Visible in EVERY state (Simple, Advanced, PvP). Position/size
   morphs via CSS state classes:
     • default + .is-pvp: top:68 right:98 (top-right corner).
     • .is-advanced: animated to centered position scaled to 0.59
       (matches the legacy `.adv-map-carousel` size 130×56). */
.pvp-map-picker {
  position: absolute;
  top: 68px; right: 98px; left: auto;
  z-index: 11;
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 10px;
  pointer-events: auto;
  transition:
    top .42s var(--ease),
    left .42s var(--ease),
    right .42s var(--ease),
    transform .42s var(--ease);
}
.menu-stage.is-advanced .pvp-map-picker {
  /* Animated target — calibrated to overlap the legacy adv-map-carousel
     position (centered horizontally, lifted high above army panels). */
  top: 175px;
  right: auto;
  left: 50%;
  transform: translateX(-50%) scale(0.59);
  transform-origin: top center;
}
/* Hide the "Battle Map" label in Advanced — legacy carousel had no
   label, just the pill. */
.menu-stage.is-advanced .pvp-map-picker-label {
  display: none;
}
/* Match the "Your Faction" / "Enemy's Faction" label exactly. */
.pvp-map-picker-label {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; opacity: 0.85;
  color: var(--gold-light);
}
.pvp-map-picker-row {
  display: inline-flex; align-items: center; gap: 9px;     /* 10 × 0.85 */
  padding: 10px 20px;                                      /* 12 24 × 0.85 */
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.pvp-map-picker-arrow {
  width: 37px; height: 37px;             /* 44 × 0.85 */
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.pvp-map-picker-arrow svg { width: 19px; height: 19px; }   /* glyph also ×0.85 */
.pvp-map-picker-arrow:hover { background: rgba(232,201,109,0.15); }

.pvp-map-tile {
  position: relative;
  border-radius: 12px;                   /* 14 × 0.85 */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all .32s var(--ease);
  flex-shrink: 0;
  background-size: cover; background-position: center;
  cursor: pointer;
}
.pvp-map-tile.side {
  width: 109px; height: 68px;            /* 128×80 × 0.85 */
  opacity: 0.55;
}
.pvp-map-tile.active {
  width: 221px; height: 95px;            /* 260×112 × 0.85 */
  border: 2.5px solid var(--gold);       /* 3 × 0.85 */
  box-shadow: 0 0 24px rgba(201,168,76,0.4);
  cursor: default;
}
.pvp-map-tile-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7));
  pointer-events: none;
}
.pvp-map-tile-name {
  position: absolute; bottom: 7px; left: 0; right: 0;       /* 8 × 0.85 */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px; letter-spacing: 2.5px;  /* 22/3 × 0.85 */
  color: var(--text-bright);
  text-shadow: 0 2px 5px rgba(0,0,0,1);
  text-transform: uppercase;
  pointer-events: none;
}
.menu-stage.is-pvp .pvp-back-bar {
  opacity: 1;
  pointer-events: auto;
}