@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-UltraBlack.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-UltraBlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-Black.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Acumin Pro Cond';
  src: url('fonts/acuminpro-condensed/AcuminProCond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand palette */
  --off-white:  #F7F7F7;
  --charcoal:   #231F20;
  --ewc-gold:   #D1B26E;
  --apex-red:   #E2071D;   /* official red */
  --apex-orange:#F46421;   /* official orange */

  /* Surface layers - derived from charcoal so panels stay on-brand */
  --bg-0: var(--charcoal);
  --bg-1: #1c191a;
  --bg-2: #15131a;
  --bg-3: #0e0c10;

  --line: rgba(247,247,247,0.08);
  --line-strong: rgba(247,247,247,0.18);
  --text: var(--off-white);
  --text-dim: #b0aeac;
  --text-muted: #6f6c6a;

  /* Semantic accents */
  --accent:      var(--apex-red);
  --accent-glow: var(--apex-orange);
  --gold:        var(--ewc-gold);
  --green:       #29d97a;
  --magenta:     #ff3aa9;
  --cyan:        #25d4ff;

  /* Apex rarity colours (used for evo bars and item borders) */
  --rarity-1: #a8a8a8; /* common */
  --rarity-2: #51a8d6; /* rare */
  --rarity-3: #b237c8; /* epic */
  --rarity-4: #cead21; /* legendary */
  --rarity-5: #ff4e1d; /* mythic */
  --shield-white:  var(--rarity-1);
  --shield-blue:   var(--rarity-2);
  --shield-purple: var(--rarity-3);
  --shield-red:    var(--rarity-4);  /* legendary red shield in our scheme */
  --shield-gold:   var(--rarity-5);

  --health: #4cff4c;
  --slot-1: var(--gold);
  --slot-2: var(--green);
  --slot-3: var(--magenta);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: 'Acumin Pro Cond', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* 16:9 broadcast stage that scales to viewport */
.stage-wrap {
  position: fixed; inset: 0;
  background: #000;
  overflow: hidden;
}
.stage {
  /* Centred via absolute + translate(-50%,-50%) rather than grid centring:
     when the 1920x1080 box is larger than the viewport (e.g. a laptop at
     ~1512 CSS px wide) grid centring of the oversized item overflows
     asymmetrically to the right. The translate keeps the box centred no
     matter what, and fit() appends the scale. */
  position: absolute; top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  background: url('styles/BG_BLACK/JPEG/16X9/EWC_TROPHY_BACKGROUNDS_BBG_16X9_3.jpg') center/cover no-repeat,
              radial-gradient(60% 50% at 50% 35%, #18181d 0%, #0a0a0c 60%, #050506 100%);
  color: var(--text);
  overflow: hidden;
}
.stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.08) 35%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}
.stage::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('styles/EWC_PATTERN_B.png');
  background-size: 380px;
  background-repeat: repeat;
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* White-background mode: photo backdrop + white pattern overlay. The
   stage swaps its dark gradient for the EWC trophy backdrop, and the
   pattern layer switches to the white variant blended via multiply so it
   reads on the bright background. */
.stage.bg-white {
  background:
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.28)),
    url('styles/BG_WHITE/JPEGS/16x9/EWC_TROPHY_BACKGROUNDS_WBG_16X9_3.jpg') center/cover no-repeat;
}
.stage.bg-white::before {
  background-image: url('styles/EWC_PATTERN_W.png');
  background-size: 380px;
  /* Asset is dark lines on transparent - render directly on the white
     backdrop with no invert/blend so the lines come out dark. */
  filter: none;
  mix-blend-mode: normal;
  opacity: 0.85;
}
/* Gradient fade: pattern is invisible on the left and fades in across a
   short transition band so only the right ~30% of the stage carries the
   brand pattern. Transparent 0..70%, transition 70..80%, fully opaque
   80..100%. */
.stage::before {
  -webkit-mask-image: linear-gradient(to right, transparent 55%, black 70%);
          mask-image: linear-gradient(to right, transparent 55%, black 70%);
}
/* Drop the dimming overlay in white mode - it was flattening the
   pattern against the bright backdrop. */
.stage.bg-white::after { display: none; }

/* ===== Top bar ===== */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 116px;
  display: grid; grid-template-columns: 280px 1fr 220px; align-items: center;
  padding: 0 24px;
  z-index: 6;
  background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.55) 80%, rgba(0,0,0,0));
}
.topbar .brand {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 6px 0;
  align-self: stretch;
  justify-content: center;
}
.topbar .brand .mark {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--apex-red);
  box-shadow: 0 0 18px rgba(226,7,29,0.55);
}
.topbar .brand .label-stack { line-height: 1.0; display: flex; flex-direction: column; gap: 4px; }
.topbar .brand .pre { font-size: 12px; letter-spacing: 0.32em; color: var(--text-dim); font-weight: 700; }
.topbar .brand .title { font-size: 22px; font-weight: 900; letter-spacing: 0.05em; }

.topbar .center { display: flex; justify-content: center; align-items: center; }

/* CHAMPIONS banner now lives in the topbar center */
.champ-banner {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(180deg, rgba(20,20,24,0.85), rgba(8,8,10,0.85));
  border: 1px solid var(--line-strong);
  padding: 14px 22px 10px;
  min-width: 820px;
}
.champ-banner .cb-mark {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--gold);
  box-shadow: 0 0 18px rgba(209,178,110,0.55);
}
.champ-banner .cb-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.champ-banner .cb-pre { font-size: 12px; letter-spacing: 0.32em; color: var(--text-dim); font-weight: 700; }
.champ-banner .cb-name { font-size: 28px; letter-spacing: 0.06em; font-weight: 900; }
.champ-banner .cb-stats { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.champ-banner .cb-stat { text-align: center; min-width: 60px; }
.champ-banner .cb-stat .v { font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.champ-banner .cb-stat .l { font-size: 10px; letter-spacing: 0.22em; color: var(--text-dim); font-weight: 800; margin-top: 4px; }

.topbar .right { display: flex; align-items: center; justify-content: flex-end; }
.ewc-logo {
  display: grid; place-items: center; height: 14px;
  position: relative; top: -10px;
}
.ewc-logo img { height: 100%; width: auto; max-width: 55px; object-fit: contain; }

/* ===== Layout ===== */
.main {
  position: absolute; top: 116px; left: 0; right: 0; bottom: 84px;
  display: grid; grid-template-columns: 1fr 720px; gap: 24px;
  padding: 16px 24px 0 24px;
  z-index: 4;
}

/* ===== Map panel ===== */
.map-panel {
  position: relative;
  background: linear-gradient(160deg, #0c0c10, #06060a 70%);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
}
.map-panel .map-header {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 4; pointer-events: none;
}
.map-panel .phase-block {
  display: flex; align-items: stretch; gap: 12px;
  background: rgba(8,8,12,0.78);
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line-strong);
}
.map-panel .phase-mark {
  width: 6px; background: var(--accent);
  box-shadow: 0 0 18px rgba(244,100,33,0.55);
}
.map-panel .phase-stack { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.map-panel .phase-pre { font-size: 12px; letter-spacing: 0.32em; color: var(--text-dim); font-weight: 700; }
.map-panel .phase-title { font-size: 22px; letter-spacing: 0.05em; font-weight: 900; color: var(--text); }
.map-panel .map-info { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.map-panel .map-name {
  font-size: 18px; letter-spacing: 0.3em; font-weight: 800; color: var(--text);
  background: rgba(0,0,0,0.55); padding: 6px 12px; border-right: 3px solid var(--accent);
}
.map-panel .map-canvas {
  position: absolute; inset: 0;
}
.map-panel svg.map-svg {
  width: 100%; height: 100%; display: block;
}
/* Keep the basemap PNG sharp through camera zooms. The source images are
   16384px square so even tight fight-cam zooms have plenty of resolution
   to draw from - hint the browser to use the high-quality resampler. */
#mapBgImg {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.map-panel .map-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 200px rgba(0,0,0,0.65);
}

/* ===== Scene info / right column ===== */
.right-col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-height: 0;
}

/* Fight header - only shown when the stage is in fight-active mode.
   Two-column layout: left = VS row + stats stacked, right = FIGHT label +
   3 enemy legend portraits with state overlays. */
.fight-header { display: none; }
.fight-active .fight-header {
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(244,100,33,0.16), rgba(8,8,12,0.85));
  border: 1px solid var(--accent);
  border-left: 4px solid var(--apex-red);
}
.fight-header .fh-left {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.fight-header .fh-vs-row {
  display: flex; align-items: center; gap: 12px;
}
.fight-header .fh-vs-label {
  font-size: 14px; font-weight: 900; letter-spacing: 0.32em; color: var(--text-dim);
}
.fight-header .fh-logo {
  height: 44px; width: 44px; object-fit: contain;
  padding: 3px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.fight-header .fh-logo[src=""], .fight-header .fh-logo:not([src]) { display: none; }
.fight-header .fh-name {
  font-size: 22px; font-weight: 900; letter-spacing: 0.06em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fight-header .fh-stats {
  display: flex; gap: 22px;
}
.fight-header .fh-stat { text-align: left; min-width: 64px; }
.fight-header .fh-stat .v {
  font-size: 24px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
}
.fight-header .fh-stat .l {
  font-size: 10px; letter-spacing: 0.22em; color: var(--text-dim); font-weight: 800; margin-top: 4px;
}
.fight-header .fh-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.fight-header .fh-pre {
  font-size: 16px; font-weight: 900; letter-spacing: 0.32em; color: var(--accent-glow);
}
.fight-header .fh-enemies {
  display: flex; gap: 6px;
}
.fight-header .fh-enemy {
  position: relative;
  width: 56px; height: 56px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  overflow: hidden;
}
.fight-header .fh-enemy img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter 200ms ease;
}
.fight-header .fh-enemy.downed::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(226,7,29,0.55), rgba(120,4,16,0.7));
  pointer-events: none;
}
.fight-header .fh-enemy.dead img {
  filter: grayscale(1) brightness(0.4);
}
.fight-header .fh-enemy.dead::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65));
  pointer-events: none;
}

.scene-card {
  background: linear-gradient(180deg, rgba(20,20,24,0.8), rgba(8,8,10,0.8));
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.scene-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent);
}
.scene-card .scene-eyebrow {
  font-size: 14px; font-weight: 700; color: var(--accent-glow); letter-spacing: 0.32em;
}
.scene-card .scene-title {
  font-size: 36px; line-height: 1.0; font-weight: 900; letter-spacing: 0.02em; margin-top: 4px;
}
.scene-card .scene-desc {
  margin-top: 8px; font-size: 16px; color: var(--text-dim); font-weight: 500; letter-spacing: 0.04em;
}
.map-panel .phase-block.flash .phase-mark {
  animation: phaseFlash 700ms ease;
}
@keyframes phaseFlash {
  0%   { background: var(--accent-glow); box-shadow: 0 0 30px rgba(244,100,33,0.9); }
  100% { background: var(--accent); box-shadow: 0 0 18px rgba(244,100,33,0.55); }
}

.team-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, rgba(20,20,24,0.85), rgba(8,8,10,0.85));
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 16px;
  position: relative;
}
.team-banner .team-mark {
  width: 12px; height: 56px; background: var(--accent);
  box-shadow: 0 0 24px rgba(244,100,33,0.5);
}
.team-banner .team-stack { line-height: 1; }
.team-banner .pre { font-size: 14px; color: var(--text-dim); letter-spacing: 0.32em; font-weight: 700; }
.team-banner .name { font-size: 32px; font-weight: 900; letter-spacing: 0.06em; margin-top: 4px; }
.team-banner .grow { flex: 1; }
.team-banner .stat-cluster { display: flex; gap: 18px; align-items: center; }
.team-banner .stat-cluster .stat { text-align: center; }
.team-banner .stat-cluster .stat .v { font-size: 28px; font-weight: 900; }
.team-banner .stat-cluster .stat .l { font-size: 11px; color: var(--text-dim); letter-spacing: 0.22em; font-weight: 700; }

/* Player slabs grid */
.players {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  min-height: 0;
}
.player {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,22,28,0.95), rgba(8,8,10,0.95));
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
  transition: box-shadow 280ms ease, border-color 280ms ease;
}
/* Slot colour spine running the full height of each slab */
.player .spine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  background: var(--accent);
  z-index: 3; pointer-events: none;
}
.player[data-slot="0"] .spine { background: var(--slot-1); }
.player[data-slot="1"] .spine { background: var(--slot-2); }
.player[data-slot="2"] .spine { background: var(--slot-3); }
/* Dead: keep legend visible but desaturated + darkened, then float the
   deathbox glyph on top. The selector below has to be at least as specific
   as the default `.player .portrait img.deathbox` rule that hides it. */
.player.dead .portrait img.legend { filter: grayscale(1) brightness(0.45) contrast(0.9); }
.player.dead .portrait img.deathbox { display: block; }
.player.dead .portrait::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.95) 100%);
}
.player.dead .name-row { color: var(--accent); }
.player.downed .state-tag.down { display: flex; }
.player.downed { filter: brightness(0.78); }
.player .portrait {
  position: relative; height: 220px; overflow: hidden;
  background: #000;
}
.player .portrait img.legend {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  display: block;
}
.player .portrait img.deathbox {
  position: absolute; inset: 0; margin: auto;
  width: 70%; height: 70%; object-fit: contain;
  display: none;
  filter: drop-shadow(0 0 18px rgba(0,0,0,0.85));
}
.player .portrait img.player-photo {
  position: absolute; top: 12px; right: 12px;
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 25%;
  border: 2px solid rgba(0,0,0,0.85);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 2px 14px rgba(0,0,0,0.8);
  z-index: 3;
  background: var(--bg-1);
}
.player[data-slot="0"] .player-photo { box-shadow: 0 0 0 2px var(--slot-1), 0 2px 12px rgba(0,0,0,0.75); }
.player[data-slot="1"] .player-photo { box-shadow: 0 0 0 2px var(--slot-2), 0 2px 12px rgba(0,0,0,0.75); }
.player[data-slot="2"] .player-photo { box-shadow: 0 0 0 2px var(--slot-3), 0 2px 12px rgba(0,0,0,0.75); }
.player.dead .player-photo,
.player.downed .player-photo { filter: grayscale(1) brightness(0.45); }
.player .portrait::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.92) 100%);
  z-index: 1; pointer-events: none;
}
.player .state-tag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  font-size: 76px; font-weight: 900; letter-spacing: 0.08em;
  color: var(--apex-orange);
  text-shadow: 0 0 24px rgba(0,0,0,0.9);
  z-index: 4; pointer-events: none;
  display: none;
}
.player .name-row {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.95) 100%);
  font-weight: 900; font-size: 28px; letter-spacing: 0.04em; line-height: 1;
  z-index: 2;
}
.player .name-row .nm {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
}

/* Ult-anchor lives in normal flow at the top of every slab so every slab
   has the same content offset; the strip is only painted when ult-ready,
   but it always reserves vertical space (visibility hidden when idle). */
.player .ult-anchor {
  text-align: center; padding: 5px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  font-size: 11px; font-weight: 900; letter-spacing: 0.32em; color: var(--charcoal);
  user-select: none; pointer-events: none;
  visibility: hidden;
}
.player .ult-anchor::before { content: 'ULTIMATE READY'; }
/* Ult ready: lightly thicken the slot-coloured spine and add a matching
   glow. Narrower than before so the spine no longer eats into the slab's
   text content area. */
.player.ult-ready .spine { width: 5px; box-shadow: 0 0 10px currentColor; }
.player[data-slot="0"].ult-ready { box-shadow: 0 0 18px rgba(209,178,110,0.50); }
.player[data-slot="1"].ult-ready { box-shadow: 0 0 18px rgba(41,217,122,0.50); }
.player[data-slot="2"].ult-ready { box-shadow: 0 0 18px rgba(255,58,169,0.50); }
.player.ult-ready .ult-anchor {
  visibility: visible;
  background: linear-gradient(180deg, var(--gold), #B79556);
  border-bottom-color: rgba(0,0,0,0.4);
  animation: ultAnchorPulse 1.4s ease-in-out infinite;
}
@keyframes ultAnchorPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
.player .ult-row {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 12px; align-items: center;
  min-height: 62px;
  padding: 3px 14px; background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.player.ult-ready .ult-row {
  /* Centered icon + name when ready; bar + pct hide. Height stays identical
     to the idle state so the portrait below stays vertically aligned. */
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 3px 14px;
  background: linear-gradient(180deg, rgba(209,178,110,0.18), rgba(209,178,110,0.04));
}
.player .ult-row .ult-icon {
  /* Narrow column, but the logo assets carry built-in whitespace - scale
     up so the artwork crops past that padding and fills the cell visually
     while the column itself stays slim. */
  width: 60px; height: 84px; object-fit: contain;
  transform: scale(1.35); transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(209,178,110,0.55));
}
.player .ult-row .ult-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.player .ult-row .ult-name {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--text);
  /* Wrap only at spaces - keep each word intact (one word per row when the
     column is too narrow) rather than breaking mid-word. */
  white-space: normal; overflow-wrap: normal; word-break: keep-all; line-height: 1.15;
}
.player .ult-row .ult-bar {
  position: relative; height: 5px; background: rgba(255,255,255,0.08); border-radius: 1px;
}
.player .ult-row .ult-bar .fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  transition: right 250ms ease;
}
.player .ult-row .pct {
  font-size: 12px; font-weight: 900; min-width: 38px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.player.ult-ready .ult-row .pct,
.player.ult-ready .ult-row .ult-bar { display: none; }

/* KDA line directly below the portrait */
.player .kdaline {
  display: flex; gap: 14px; align-items: baseline; justify-content: center;
  font-size: 20px; font-weight: 900; letter-spacing: 0.06em;
  padding: 10px 12px; background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--line);
}
.player .kdaline .lbl { color: var(--text-dim); font-size: 12px; letter-spacing: 0.22em; font-weight: 800; margin-right: -8px; }
.player .kdaline .v { color: var(--text); font-variant-numeric: tabular-nums; }
.player .kdaline .sep { color: var(--text-muted); font-weight: 700; }

.bars { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.bar {
  display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px;
}
.bar .label {
  font-size: 12px; font-weight: 900; letter-spacing: 0.22em;
  color: var(--text-dim); text-align: left;
}
.bar .track {
  position: relative; height: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.bar.health .label { color: var(--health); }
.bar.shield.lvl2 .label { color: var(--rarity-2); }
.bar.shield.lvl3 .label { color: var(--rarity-3); }
.bar.shield.lvl4 .label { color: var(--rarity-4); }
.bar.shield.lvl5 .label { color: var(--rarity-5); }
.bar .track .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  transition: width 250ms ease;
}
.bar.health .label { color: var(--health); }
.bar.health .fill { background: var(--health); }
.bar.shield .fill { background: var(--shield-white); }
.bar.shield.lvl2 .fill { background: var(--shield-blue); }
.bar.shield.lvl3 .fill { background: var(--shield-purple); }
.bar.shield.lvl4 .fill { background: var(--shield-red); }
.bar.shield.lvl5 .fill { background: var(--shield-gold); }
.bar.shield .pip {
  position: absolute; top: -1px; bottom: -1px; width: 1px; background: rgba(0,0,0,0.6);
}

.player .accent {
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--accent);
}
.player[data-slot="0"] .accent { background: var(--slot-1); }
.player[data-slot="1"] .accent { background: var(--slot-2); }
.player[data-slot="2"] .accent { background: var(--slot-3); }

.player .info {
  padding: 10px 12px 10px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1; min-height: 0;
}
/* Section heading above each block (LOADOUT / EVENTS / UTILITY) */
.player .info .section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.32em;
  color: var(--text-muted);
  margin-bottom: -4px;
}
.player .info .section-head::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* Two weapons stacked - top of slab "loadout" block */
.weapons-stack { display: flex; flex-direction: column; gap: 4px; }
.weapon {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(40,40,46,0.55), rgba(0,0,0,0.55));
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 10px;
  border-left: 3px solid var(--text-muted);
  height: 38px;
  transition: opacity 280ms ease, transform 280ms ease, border-left-color 200ms ease;
}
.weapon:not(.empty) { border-left-color: var(--apex-red); }
.weapon.fade-in { animation: weaponSwap 320ms ease both; }
@keyframes weaponSwap {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.weapon img.wpn { height: 24px; width: 64px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,0.6)); }
.fight-weapons .fw img { filter: brightness(0) invert(1); }
.loot-card .item img.weapon-img { filter: brightness(0) invert(1); }
.weapon .nm { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.weapon img.ammo-img { height: 18px; width: 18px; object-fit: contain; flex-shrink: 0; }
.weapon.empty { opacity: 0.3; border-left-color: rgba(255,255,255,0.18); justify-content: center; }
.weapon.empty .nm { text-align: center; flex: 0 0 auto; }

/* Armor cells: icon only with level color border */
.armor-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.armor-row .armor-cell {
  height: 40px;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.armor-row .armor-cell.upgraded { animation: pickupFade 320ms ease both; }
/* Amp slot: grayed-out placeholder until an amp is picked up; lights up
   in the rarity-3 purple only when actually equipped. */
.armor-row .amp-cell {
  position: relative;
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.025);
}
.armor-row .amp-cell:not(.equipped) img { display: none; }
.armor-row .amp-cell:not(.equipped)::before {
  content: 'AMP'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 900; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.35);
}
.armor-row .amp-cell.equipped {
  border-color: var(--rarity-3);
  background: rgba(178,55,200,0.05);
  box-shadow: inset 0 0 10px rgba(178,55,200,0.35);
}
.armor-row .armor-cell.amp-cell.hidden { visibility: hidden; }

/* Ult Accelerant counter, replacing the backpack's old armor-row slot.
   Border tint stays in the apex-orange family; an outer glow pulses for a
   few seconds after each use. */
.armor-row .ult-accel-cell {
  position: relative;
  border-color: rgba(244,100,33,0.55);
  background: rgba(244,100,33,0.08);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}
.armor-row .ult-accel-cell.empty {
  opacity: 0.45;
  border-color: rgba(244,100,33,0.30);
}
.armor-row .ult-accel-cell .qty {
  position: absolute; right: 4px; bottom: 1px;
  font-size: 12px; font-weight: 900; color: var(--text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px #000;
}
.armor-row .ult-accel-cell.used {
  border-color: var(--apex-orange);
  box-shadow:
    0 0 18px rgba(244,100,33,0.85),
    inset 0 0 14px rgba(244,100,33,0.55);
  animation: ultAccelGlow 1.2s ease-out infinite;
}
@keyframes ultAccelGlow {
  0%   { box-shadow: 0 0 14px rgba(244,100,33,0.85), inset 0 0 10px rgba(244,100,33,0.45); }
  50%  { box-shadow: 0 0 28px rgba(244,100,33,0.95), inset 0 0 18px rgba(244,100,33,0.70); }
  100% { box-shadow: 0 0 14px rgba(244,100,33,0.85), inset 0 0 10px rgba(244,100,33,0.45); }
}
.armor-cell {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0,0,0,0.5);
  border: 2px solid var(--shield-white);
  padding: 4px 6px; height: 36px;
}
.armor-cell img { height: 22px; width: auto; }
.armor-cell .v { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: 0.06em; }
.armor-cell.lvl1 { border-color: var(--shield-white); }
.armor-cell.lvl2 { border-color: var(--shield-blue); box-shadow: inset 0 0 8px rgba(109,167,255,0.3); }
.armor-cell.lvl3 { border-color: var(--shield-purple); box-shadow: inset 0 0 8px rgba(178,102,255,0.3); }
.armor-cell.lvl4 { border-color: var(--shield-red); box-shadow: inset 0 0 8px rgba(255,90,68,0.3); }
.armor-cell.lvl5 { border-color: var(--shield-gold); box-shadow: inset 0 0 8px rgba(255,200,61,0.35); }

/* Per-player inventory grid below the info section. Collapsed during fight. */
.player .inventory {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  min-height: 0;
}
.player .inventory .item {
  position: relative; aspect-ratio: 1/1;
  background: rgba(0,0,0,0.55); border: 1px solid var(--line);
  display: grid; place-items: center;
  animation: pickupFade 320ms ease both;
}
.player .inventory .item img { width: 78%; height: 78%; object-fit: contain; }
.player .inventory .item .qty { font-size: 10px; right: 2px; bottom: 0; }

/* Backpack now lives as the first slot of the inventory grid, but keeps the
   armor-cell level-coloured border so it still reads as gear, not a generic
   consumable. */
.player .inventory .item-bp {
  border: 2px solid var(--shield-white);
  background: rgba(0,0,0,0.55);
}
.player .inventory .item-bp.lvl1 { border-color: var(--shield-white); }
.player .inventory .item-bp.lvl2 { border-color: var(--shield-blue);  box-shadow: inset 0 0 8px rgba(109,167,255,0.30); }
.player .inventory .item-bp.lvl3 { border-color: var(--shield-purple); box-shadow: inset 0 0 8px rgba(178,102,255,0.30); }
.player .inventory .item-bp.lvl4 { border-color: var(--shield-red);    box-shadow: inset 0 0 8px rgba(255,90,68,0.30); }
.player .inventory .item-bp.lvl5 { border-color: var(--shield-gold);   box-shadow: inset 0 0 8px rgba(255,200,61,0.35); }
@keyframes pickupFade {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.player .inventory .item .qty {
  position: absolute; right: 2px; bottom: 2px;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.88);
  border: 1px solid rgba(255,255,255,0.20);
  font-size: 11px; font-weight: 900;
  color: #fff; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.fight-active .player .inventory,
.fight-active .player .perks-row,
.fight-active .player .armor-row { display: none; }
.fight-active .player .portrait { height: 156px; }
.fight-active .player .name-row { font-size: 20px; }
.fight-active .player .ult-row { padding: 5px 12px; }
.fight-active .player .kdaline { font-size: 16px; padding: 5px 10px; }
.fight-active .player .bars { padding: 4px 10px; gap: 3px; }
.fight-active .player .info { gap: 6px; padding: 6px 10px 8px; flex: 1; min-height: 0; }
.fight-active .player .weapon { height: 30px; padding: 3px 10px; }
.fight-active .player .damage-log { display: flex; }

/* Per-player damage event log. Sits at the TOP of the slab info section
   during fights. New events enter at the bottom and slide upward; once they
   age out (>3 visible OR > timeout) they slide further up and fade out. */
.player .damage-log {
  display: none;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-height: 0;
  flex: 1;
  padding: 14px 8px 8px;
  margin-top: 4px;
  background: linear-gradient(180deg, rgba(226,7,29,0.06), rgba(0,0,0,0.30) 60%);
  border: 1px solid rgba(226,7,29,0.20);
  border-left: 3px solid var(--apex-red);
  position: relative;
}
.player .damage-log::before {
  content: 'DAMAGE LOG';
  position: absolute; top: 6px; left: 12px;
  padding: 0;
  font-size: 14px; font-weight: 900; letter-spacing: 0.28em; color: var(--apex-orange);
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
  pointer-events: none;
}
.player .damage-log { padding-top: 30px; }
.fight-active .player .damage-log { display: flex; }
.player .damage-log .dmg-event {
  display: grid; grid-template-columns: 44px auto 1fr; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(226,7,29,0.22), rgba(0,0,0,0.55));
  border: 1px solid rgba(226,7,29,0.32);
  border-left: 3px solid var(--apex-red);
  padding: 6px 8px;
  min-height: 38px;
  animation: dmgEventIn 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.player .damage-log .dmg-event.outgoing {
  animation: dmgEventOut 380ms ease-in forwards;
  pointer-events: none;
}
.player .damage-log .dmg-event img.wpn,
.player .damage-log .dmg-event img.src {
  height: 24px; width: 44px; object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,0.7));
  display: block;
}
.player .damage-log .dmg-event img.src.legend-ult { filter: none; }
/* Ability/attachment icons from UI/Icons/ are already coloured artwork -
   skip the brightness invert that whitens weapon silhouettes. */
.player .damage-log .dmg-event img.src.icon {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.7));
}

/* Dropship intro - one-shot animation on journey start. */
#dropshipIntroLayer { pointer-events: none; }
.di-line {
  stroke: rgba(255,138,48,0.95);
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(255,138,48,0.65));
}
.di-chev {
  stroke: rgba(255,168,60,1);
  fill: none;
  filter: drop-shadow(0 0 6px rgba(255,138,48,0.7));
}
.di-ship {
  filter: drop-shadow(0 0 12px rgba(255,138,48,0.6));
}
.di-puff { pointer-events: none; }
.di-puff circle {
  stroke: rgba(255,138,48,0.95);
  stroke-width: 3;
  fill: none;
  filter: drop-shadow(0 0 8px rgba(255,138,48,0.6));
}
.di-puff-burst circle              { animation: di-burst 900ms ease-out forwards; }
.di-puff-burst circle:nth-child(2) { animation-delay: 120ms; }
.di-puff-burst circle:nth-child(3) { animation-delay: 240ms; }
@keyframes di-burst {
  0%   { r: 0;  opacity: 1;   stroke-width: 4; }
  100% { r: 32; opacity: 0;   stroke-width: 1; }
}
/* While the intro is active, suppress the live map layers so the flyover
   is the only thing on the canvas. The class is dropped at the drop moment
   so the winners pop into view as the ship passes overhead. */
.stage.di-active #pathLayer,
.stage.di-active #enemiesLayer,
.stage.di-active #winnerLayer,
.stage.di-active #labelLayer { opacity: 0; transition: opacity 200ms ease-out; }
.stage #pathLayer,
.stage #enemiesLayer,
.stage #winnerLayer,
.stage #labelLayer { transition: opacity 400ms ease-out; }
/* All text cells share the same line-height so their visual centres line up
   on the row's centreline regardless of font size. */
.player .damage-log .dmg-event .dmg {
  font-size: 20px; font-weight: 900; color: var(--apex-red);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  line-height: 1; display: flex; align-items: center;
}
.player .damage-log .dmg-event .victim {
  font-size: 12px; font-weight: 800; color: var(--text-dim);
  letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1; display: flex; align-items: center;
}
.player .damage-log .dmg-event.kill {
  border-left-color: var(--apex-orange);
  background: linear-gradient(90deg, rgba(244,100,33,0.30), rgba(0,0,0,0.55));
}
.player .damage-log .dmg-event.kill .dmg { color: var(--apex-orange); }
/* Kill rows pinned at the very top of the log. Distinct red trim so they
   read as eliminations against the gold knock rows + red damage rows.
   Same font-size as the numeric damage rows so visual mass matches. */
.player .damage-log .dmg-event.kill-row {
  border-left-color: var(--apex-red);
  background: linear-gradient(90deg, rgba(226,7,29,0.42), rgba(0,0,0,0.55));
}
.player .damage-log .dmg-event.kill-row .dmg {
  color: #fff; font-size: 18px; letter-spacing: 0.10em;
  text-shadow: 0 0 8px rgba(226,7,29,0.8);
}
/* Knock rows: pinned at the top while the fight is on, distinct gold trim
   so they read as a milestone rather than rolling damage chatter. */
.player .damage-log .dmg-event.knock {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(209,178,110,0.28), rgba(0,0,0,0.55));
}
.player .damage-log .dmg-event.knock .dmg {
  color: var(--gold); font-size: 18px; letter-spacing: 0.10em;
}
/* Pulse flash when an existing burst row's damage total grows. */
.player .damage-log .dmg-event .dmg.pulse {
  animation: dmgPulse 420ms ease-out;
}
@keyframes dmgPulse {
  0%   { transform: scale(1);    text-shadow: none; }
  35%  { transform: scale(1.18); text-shadow: 0 0 12px rgba(244,100,33,0.85); }
  100% { transform: scale(1);    text-shadow: none; }
}
@keyframes dmgEventIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dmgEventOut {
  from { opacity: 1; transform: translateY(0); max-height: 50px; padding-top: 6px; padding-bottom: 6px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateY(-18px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -4px; }
}

.perks-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.perk {
  font-size: 10px; padding: 2px 6px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  color: var(--text-dim); letter-spacing: 0.08em; font-weight: 700;
}
.perk.lv1 { border-left: 2px solid var(--rarity-1); color: var(--text); }
.perk.lv2 { border-left: 2px solid var(--rarity-2); color: var(--text); }
.perk.lv3 { border-left: 2px solid var(--rarity-3); color: var(--text); }
.perk.lv4 { border-left: 2px solid var(--rarity-4); color: var(--text); }
.perk.lv5 { border-left: 2px solid var(--rarity-5); color: var(--text); }
.perk.with-icon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 4px;
  background: rgba(0,0,0,0.45);
}
.perk.with-icon .pk-img {
  width: 18px; height: 18px; object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}
.perk.with-icon .pk-name {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--text);
}
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.5); } }

/* Damage / fight summary card */
.fight-card {
  background: linear-gradient(180deg, rgba(20,20,26,0.9), rgba(8,8,12,0.9));
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 14px;
  display: none;
}
.fight-card.show { display: block; animation: slideIn 0.4s ease; }
.fight-card .fight-title { display: flex; align-items: center; justify-content: space-between; }
.fight-card .ft-pre { font-size: 12px; color: var(--accent-glow); letter-spacing: 0.32em; font-weight: 800; }
.fight-card .ft-h { font-size: 22px; font-weight: 900; letter-spacing: 0.04em; }
.fight-card .matchup {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 10px;
}
.fight-card .side {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  padding: 6px 10px;
}
.fight-card .side.right { flex-direction: row-reverse; text-align: right; }
.fight-card .side .nm { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.fight-card .side .dmg { font-size: 28px; font-weight: 900; line-height: 1; color: var(--accent-glow); }
.fight-card .vs { font-size: 18px; font-weight: 900; letter-spacing: 0.18em; color: var(--text-dim); }
.fight-card .side img { height: 32px; width: 32px; object-fit: cover; border: 1px solid var(--line); }
.fight-card .ft-meta { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; color: var(--text-dim); font-weight: 700; }
.fight-card .ft-meta .v { color: var(--text); font-weight: 900; margin-right: 6px; }
.fight-card .ft-meta .v::after { content: ' · '; color: var(--text-muted); margin-left: 6px; }
.player-breakdown { margin-top: 10px; display: grid; gap: 4px; }
.player-breakdown .pb-row {
  display: grid; grid-template-columns: 28px 1fr auto auto; gap: 12px;
  align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  padding: 6px 10px; border-left: 3px solid var(--accent);
}
.player-breakdown .pb-row[data-slot="0"] { border-left-color: var(--gold); }
.player-breakdown .pb-row[data-slot="1"] { border-left-color: var(--green); }
.player-breakdown .pb-row[data-slot="2"] { border-left-color: var(--magenta); }
.player-breakdown .pb-img { width: 24px; height: 24px; object-fit: cover; object-position: 50% 30%; border: 1px solid var(--line); }
.player-breakdown .pb-name { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-breakdown .pb-stat { display: flex; flex-direction: column; align-items: end; min-width: 64px; }
.player-breakdown .pb-stat.out { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
.player-breakdown .pb-stat.out .pl { grid-column: 1 / 3; text-align: right; }
.player-breakdown .pb-wpn { grid-row: 1; height: 18px; width: 48px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.85; }
.player-breakdown .pb-stat .pv { font-size: 18px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.player-breakdown .pb-stat .pl { font-size: 9px; color: var(--text-dim); letter-spacing: 0.18em; font-weight: 800; }
.player-breakdown .pb-stat.out .pv { color: var(--accent-glow); }
.player-breakdown .pb-stat.in  .pv { color: var(--text); }
.player-breakdown .pb-stat.kd  .pv { color: var(--gold); }

.fight-weapons { display: flex; gap: 6px; margin-top: 8px; }
.fight-weapons .fw {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  padding: 4px 8px; border-left: 3px solid var(--accent-glow);
}
.fight-weapons .fw img { height: 16px; width: auto; }
.fight-weapons .fw .dm { font-size: 12px; font-weight: 900; color: var(--text); }

@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Loot summary panel */
.loot-card {
  background: linear-gradient(180deg, rgba(20,20,26,0.9), rgba(8,8,12,0.9));
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 14px;
  display: none;
}
.loot-card.show { display: block; animation: slideIn 0.4s ease; }
.loot-card .lt-title { font-size: 14px; font-weight: 800; color: var(--accent-glow); letter-spacing: 0.32em; }
.loot-card .lt-h { font-size: 22px; font-weight: 900; letter-spacing: 0.04em; margin-top: 2px; }
/* Per-player loot columns */
.loot-card .loot-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.loot-card .loot-col {
  background: rgba(0,0,0,0.4); border: 1px solid var(--line);
  padding: 6px; min-height: 0;
  border-top: 3px solid var(--accent);
}
.loot-card .loot-col[data-slot="0"] { border-top-color: var(--gold); }
.loot-card .loot-col[data-slot="1"] { border-top-color: var(--green); }
.loot-card .loot-col[data-slot="2"] { border-top-color: var(--magenta); }
.loot-card .loot-col .lc-name {
  font-size: 11px; font-weight: 900; letter-spacing: 0.16em;
  color: var(--text); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loot-card .loot-col .lc-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
}
.loot-card .item {
  position: relative; aspect-ratio: 1/1;
  background: rgba(0,0,0,0.5); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.loot-card .item img { width: 70%; height: 70%; object-fit: contain; }
.loot-card .item .qty {
  position: absolute; right: 2px; bottom: 0px; font-size: 9px; font-weight: 900; color: var(--text);
}

/* ===== Bottom timeline ===== */
.timeline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 84px;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  z-index: 6;
  background: linear-gradient(0deg, rgba(0,0,0,0.95), rgba(0,0,0,0.55));
  border-top: 1px solid var(--line);
}
.timeline .controls { display: flex; gap: 8px; }
.timeline .controls button {
  background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text);
  width: 40px; height: 40px; cursor: pointer; font-weight: 900; font-size: 16px;
  font-family: inherit;
}
.timeline .controls button.play { background: var(--accent); color: #fff; border-color: var(--accent); width: 56px; }
.timeline .controls button:hover { filter: brightness(1.3); }
.timeline .track {
  flex: 1; position: relative; height: 36px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line);
  cursor: pointer;
}
.timeline .track .progress { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(244,100,33,0.35), rgba(244,100,33,0.45)); transition: width 100ms linear; }
.timeline .track .markers { position: absolute; inset: 0; }
.timeline .track .markers .mk {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-glow);
}
.timeline .track .markers .mk.fight { background: var(--gold); }
.timeline .track .markers .mk .lbl {
  position: absolute; bottom: 100%; left: 0; transform: translate(-50%, -2px);
  font-size: 10px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.18em;
  white-space: nowrap;
}
.timeline .track .head {
  position: absolute; top: -6px; bottom: -6px; width: 4px; background: var(--text); box-shadow: 0 0 12px rgba(255,255,255,0.4);
  transition: left 100ms linear;
}
.timeline .clock-block {
  display: flex; flex-direction: column; align-items: end; gap: 2px; min-width: 110px;
}
.timeline .clock-block .t { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 900; line-height: 1; }
.timeline .clock-block .l { font-size: 10px; letter-spacing: 0.32em; color: var(--text-dim); font-weight: 800; }
.timeline .speed select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong); padding: 8px 6px;
  font-family: inherit; font-weight: 800; font-size: 14px;
}

/* ===== Map SVG styles ===== */
.poi rect { fill: rgba(120,140,180,0.06); stroke: rgba(180,200,235,0.22); stroke-width: 1.2; }
.poi.in-ring rect { stroke: rgba(255,255,255,0.32); }
.poi text {
  fill: rgba(220,230,250,0.7); font-size: 13px; font-weight: 800; letter-spacing: 0.22em;
  text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 3;
}
.poi.active rect { fill: rgba(209,178,110,0.06); stroke: rgba(209,178,110,0.5); stroke-width: 1.5; }
.poi.active text { fill: #fff; }

.map-bg-grid {
  fill: none; stroke: rgba(255,255,255,0.04); stroke-width: 1;
}
.lava-band {
  fill: url(#lavaFill); stroke: rgba(244,100,33,0.7); stroke-width: 2.5;
  filter: drop-shadow(0 0 18px rgba(244,100,33,0.6));
}
.lava-flicker {
  animation: lavaFlicker 4s ease-in-out infinite;
}
@keyframes lavaFlicker {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.ring {
  fill: none; stroke: rgba(244,100,33,0.85); stroke-width: 2.5;
  stroke-dasharray: 12 6;
  filter: drop-shadow(0 0 10px rgba(244,100,33,0.7));
}
.ring.next {
  stroke: rgba(255,255,255,0.55);
  stroke-dasharray: 6 6;
  filter: none;
}
.dead-zone {
  fill: rgba(0, 0, 0, 0.62);
}

.path {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(244,100,33,0.5));
  pointer-events: none;
}
/* Camera transform animates every frame; hint to the browser to promote
   it to its own compositing layer so the basemap + overlays don't repaint
   on each tick. */
#mapCamera { will-change: transform; }
.path { will-change: stroke, opacity; }
.path.team-1 { stroke: var(--gold); }
.path.team-2 { stroke: var(--green); }
.path.team-3 { stroke: var(--magenta); }

.player-dot {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.player-dot circle.outer { fill: rgba(0,0,0,0.85); }
.player-dot.team-1 circle.outer { stroke: var(--gold); }
.player-dot.team-2 circle.outer { stroke: var(--green); }
.player-dot.team-3 circle.outer { stroke: var(--magenta); }
.player-dot.dead circle.outer { stroke: var(--text-muted); fill: rgba(0,0,0,0.4); }
.player-dot.downed circle.outer { stroke: var(--accent-glow); }
.player-dot text {
  fill: #fff; font-weight: 900; text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 2;
}
.pulse-ring {
  stroke-opacity: 0.6;
  animation: pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing {
  0% { stroke-width: 1; stroke-opacity: 0.7; r: 8; }
  100% { stroke-width: 0; stroke-opacity: 0; r: 22; }
}

.enemy-dot circle { fill: rgba(220,220,230,0.55); stroke: rgba(0,0,0,0.7); stroke-width: 1; }
.enemy-dot.threat circle { fill: var(--accent); stroke: #fff; }
.enemy-dot.fight circle { fill: var(--accent); stroke: var(--accent-glow); }
.enemy-team-label {
  fill: #ffffff; font-weight: 900; letter-spacing: 0.16em;
  paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 3.5;
}
.winner-player-label {
  font-weight: 900; letter-spacing: 0.14em;
  paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 3.5;
}

.label-callout {
  fill: #ffffff; font-size: 12px; font-weight: 900; letter-spacing: 0.18em;
  paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 3.5;
}
.ring-countdown {
  fill: rgba(244, 100, 33, 1); font-size: 13px; font-weight: 900; letter-spacing: 0.16em;
  paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 3;
}

.fight-zone {
  fill: rgba(244,100,33,0.10);
  stroke: var(--accent);
  stroke-dasharray: 4 3;
  animation: spin 4s linear infinite;
}
@keyframes spin { to { stroke-dashoffset: -28; } }
.kill-line { stroke: var(--gold); }
.down-line { stroke: var(--accent-glow); }
.dmg-line { stroke: rgba(255,255,255,0.55); stroke-dasharray: 3 3; }
.enemy-callout {
  fill: var(--accent-glow); font-weight: 900; letter-spacing: 0.18em;
  paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 3.5;
}

.event-pulse {
  fill: var(--accent); opacity: 0.85;
}
.elim-mark line { stroke: var(--text-muted); }

.ring-distance-line {
  stroke: var(--apex-orange); stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 4px rgba(244,100,33,0.6));
}
.ring-distance-label text {
  fill: #fff; font-weight: 900;
  paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 3;
}
.ring-distance-label tspan.rdl-pre {
  font-size: 0.85em; letter-spacing: 0.22em; fill: var(--apex-orange);
}
.ring-distance-label tspan.rdl-val {
  font-size: 1.2em; letter-spacing: 0.04em;
}

/* ===== Title screen ===== */
.title-screen {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.85)),
    url('styles/BG_BLACK/JPEG/16X9/EWC_TROPHY_BACKGROUNDS_BBG_16X9_2.jpg') center/cover no-repeat,
    radial-gradient(60% 50% at 50% 40%, #20141a 0%, #0a060a 60%, #020203 100%);
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
/* No brand pattern on the splash - only the live canvas carries it. */
.title-screen::after { display: none; }
.title-screen.hide {
  opacity: 0; visibility: hidden;
}
.title-screen .t-content { text-align: center; padding: 0 60px; position: relative; z-index: 2; }
.title-screen .ewc-pre {
  font-size: 22px; letter-spacing: 0.42em; font-weight: 900;
  color: var(--accent);
}
.title-screen .h {
  font-size: 152px; font-weight: 900; letter-spacing: 0.04em; line-height: 0.9;
  margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
}
.title-screen .h .winners { color: var(--gold); }
.title-screen .h .journey { color: #ffffff; }
.title-screen .sub { margin-top: 24px; font-size: 36px; letter-spacing: 0.24em; font-weight: 900; color: var(--text); }
.title-screen .team-logo { display: block; margin: 14px auto 0; height: 96px; width: auto; object-fit: contain; }
.title-screen .meta-primary {
  margin-top: 38px; display: flex; justify-content: center; gap: 80px;
}
.title-screen .meta-primary .item { text-align: center; }
.title-screen .meta-primary .item .v { font-size: 48px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.title-screen .meta-primary .item .l { font-size: 14px; letter-spacing: 0.32em; color: var(--text-dim); margin-top: 6px; font-weight: 800; }
.title-screen .meta-secondary {
  margin-top: 22px; display: flex; justify-content: center; gap: 60px;
}
.title-screen .meta-secondary .item { text-align: center; }
.title-screen .meta-secondary .item .v { font-size: 24px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; }
.title-screen .meta-secondary .item .l { font-size: 11px; letter-spacing: 0.32em; color: var(--text-muted); margin-top: 4px; font-weight: 800; }
.title-screen button {
  margin-top: 48px; background: var(--gold); color: #1a1208; border: 0;
  padding: 18px 56px; font-size: 22px; font-weight: 900; letter-spacing: 0.24em;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 0 28px rgba(209,178,110,0.45);
}
.title-screen button:hover { filter: brightness(1.1); }
.title-screen button[disabled] { background: #555; color: var(--text-dim); cursor: progress; box-shadow: none; filter: none; }

/* Analyser status panel - anchored to the bottom-left of the splash,
   sitting directly above the Hide-Timeline toggle. Vertical step list so
   the load order reads top->bottom. */
.title-screen .loader {
  position: absolute; left: 24px; bottom: 220px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; width: 280px;
  background: rgba(0,0,0,0.82); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--apex-orange);
  padding: 12px 14px; z-index: 3;
  backdrop-filter: blur(4px);
}
.title-screen .loader::before {
  content: 'ANALYSER';
  font-size: 10px; letter-spacing: 0.32em; font-weight: 900;
  color: var(--apex-orange); padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
}
.title-screen .loader-bar {
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden; position: relative;
  order: 2;
}
.title-screen .loader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--apex-red), var(--apex-orange));
  box-shadow: 0 0 10px rgba(244,100,33,0.55);
  transition: width 220ms ease;
}
.title-screen .loader-steps {
  display: flex; flex-direction: column; gap: 6px;
  list-style: none; padding: 0; margin: 0;
  counter-reset: lstep;
  order: 1;
}
.title-screen .loader-steps li {
  counter-increment: lstep;
  font-size: 10px; letter-spacing: 0.20em; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  padding-left: 38px; position: relative; line-height: 16px;
  min-height: 16px; display: flex; align-items: center;
}
/* The numbered tag at the very left. */
.title-screen .loader-steps li::before {
  content: counter(lstep, decimal-leading-zero);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 14px;
  font-size: 9px; letter-spacing: 0; font-weight: 800;
  color: var(--text-muted); text-align: right;
  transition: color 180ms ease;
}
/* The status box, centred vertically next to the label. */
.title-screen .loader-steps li::after {
  content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border: 1px solid var(--text-muted); background: transparent;
  transition: border-color 180ms ease, background 180ms ease;
}
.title-screen .loader-steps li.active { color: var(--apex-orange); }
.title-screen .loader-steps li.active::before { color: var(--apex-orange); }
.title-screen .loader-steps li.active::after {
  border-color: var(--apex-orange);
  background: rgba(244,100,33,0.25);
  box-shadow: 0 0 8px rgba(244,100,33,0.6);
}
.title-screen .loader-steps li.ok { color: var(--text-dim); }
.title-screen .loader-steps li.ok::before { color: var(--text-muted); }
.title-screen .loader-steps li.ok::after {
  border-color: var(--apex-orange);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 5.2 L4.2 7.4 L8 3.4' fill='none' stroke='%23231F20' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/></svg>") center / 8px 8px no-repeat,
    var(--apex-orange);
}
.title-screen .loader-stat {
  font-size: 10px; letter-spacing: 0.18em; color: var(--text-dim);
  font-weight: 700; text-transform: uppercase;
  padding-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  order: 3;
}

.title-screen .filepicker {
  cursor: pointer; position: relative;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--apex-orange);
  padding: 10px 14px;
  font-size: 10px; letter-spacing: 0.22em; font-weight: 800; color: var(--text);
  text-align: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  order: 4;
}
.title-screen .filepicker input { display: none; }
.title-screen .filepicker:hover {
  background: rgba(244,100,33,0.12);
  border-color: var(--apex-orange);
  color: var(--apex-orange);
}

/* Anchored to the bottom-left corner of the splash, directly below the
   analyser panel. A second toggle stacks above the first. Fixed width so
   both toggles look uniform regardless of label length. */
.title-screen .title-toggle {
  position: absolute; left: 24px; bottom: 24px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px;
  align-items: center; cursor: pointer;
  background: rgba(0,0,0,0.55); border: 1px solid var(--line-strong);
  padding: 12px 16px;
  width: 280px;
  z-index: 3;
}
.title-screen .title-toggle.title-toggle-2 {
  bottom: 120px;
}
.title-screen .title-toggle.title-toggle-3 {
  left: auto; right: 24px; bottom: 24px;
}
.title-screen .title-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.title-screen .title-toggle .t-track {
  position: relative; width: 42px; height: 22px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--line-strong);
  transition: background 200ms ease, border-color 200ms ease;
}
.title-screen .title-toggle .t-track .t-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--text); transition: left 200ms ease, background 200ms ease;
}
.title-screen .title-toggle input:checked + .t-track {
  background: rgba(244,100,33,0.35); border-color: var(--apex-orange);
}
.title-screen .title-toggle input:checked + .t-track .t-knob {
  left: 22px; background: var(--apex-orange);
}
.title-screen .title-toggle .t-label {
  font-size: 13px; font-weight: 900; letter-spacing: 0.22em; color: var(--text);
}
.title-screen .title-toggle .t-hint {
  grid-column: 1 / -1;
  font-size: 10px; letter-spacing: 0.18em; color: var(--text-muted); font-weight: 700;
  margin-top: 2px;
}

/* Stage-level switch - hides both the in-game timeline ribbon and the
   playback control bar at the bottom. */
.stage.timeline-hidden .timeline,
.stage.timeline-hidden .phase-ribbon { display: none; }
.stage.timeline-hidden .main { bottom: 0; }

/* Champion screen */
.champion-screen {
  position: absolute; inset: 0; z-index: 9;
  display: none;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(209,178,110,0.22) 0%, rgba(0,0,0,0.0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.92)),
    url('styles/BG_BLACK/JPEG/16X9/EWC_TROPHY_BACKGROUNDS_BBG_16X9_5.jpg') center/cover no-repeat,
    rgba(0,0,0,0.85);
  backdrop-filter: blur(3px);
}
.champion-screen.show { display: grid; place-items: center; animation: fadeIn 0.6s ease; }
.champion-screen.show ~ .topbar,
.champion-screen.show ~ .main { opacity: 0.18; pointer-events: none; transition: opacity 600ms ease; }
.stage:has(.champion-screen.show) .topbar,
.stage:has(.champion-screen.show) .main { opacity: 0.22; pointer-events: none; transition: opacity 600ms ease; }
.champion-screen .ch-content { text-align: center; }
.champion-screen .ch-pre { font-size: 26px; letter-spacing: 0.42em; color: var(--accent); font-weight: 900; }
.champion-screen .ch-h {
  font-size: 188px; font-weight: 900; letter-spacing: 0.03em; line-height: 0.9;
  color: var(--gold); margin-top: 6px;
}
.champion-screen .ch-logo {
  display: block; margin: 28px auto 0; height: 160px; width: auto; object-fit: contain;
}
.champion-screen .ch-stats { margin-top: 48px; display: flex; gap: 48px; justify-content: center; }
.champion-screen .ch-stats .it .v { font-size: 56px; font-weight: 900; }
.champion-screen .ch-stats .it .l { font-size: 14px; letter-spacing: 0.32em; color: var(--text-dim); font-weight: 800; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Proximity indicator on map for nearby enemies */
.proximity-ring { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1; stroke-dasharray: 2 4; }

/* Zone tag (sits under BROKEN MOON in the map header) */
.map-panel .zone-tag {
  background: rgba(0,0,0,0.55); border: 1px solid var(--line);
  padding: 4px 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.2em;
  color: var(--text);
  border-left: 3px solid var(--accent-glow);
}

/* Phase ribbon, on the map */
.phase-ribbon {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; gap: 6px; z-index: 4; pointer-events: none;
}
.phase-ribbon .seg {
  background: rgba(0,0,0,0.6); border: 1px solid var(--line);
  padding: 6px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--text-dim);
}
.phase-ribbon .seg.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.phase-ribbon .seg.done {
  background: rgba(244,100,33,0.22); color: var(--text);
}

/* Toast event feed lives inside the map header now */
.event-feed {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  background: rgba(0,0,0,0.85); border: 1px solid var(--line-strong);
  padding: 6px 12px;
  font-size: 12px; letter-spacing: 0.06em; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid var(--accent);
  animation: toastIn 0.32s ease, toastOut 0.32s ease 4.5s forwards;
  max-width: 360px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast.kill { border-left-color: var(--gold); }
.toast.dmg { border-left-color: var(--accent); }
.toast.loot { border-left-color: var(--cyan); }
.toast.ring { border-left-color: var(--accent-glow); }
.toast.ult { border-left-color: var(--magenta); }
.toast .toast-icon {
  width: 20px; height: 20px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.7));
}
.toast .toast-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* Camera transition smoothing handled in JS; no CSS transition. */

/* Ultimate-use popup banner overlay on map - anchored to the LEFT edge
   well above the phase ribbon / playback tabs so it never clips the timeline
   tabs underneath. Bigger size so it reads at broadcast distance. */
.ult-pops {
  position: absolute; left: 18px; top: 92px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 5; pointer-events: none; align-items: flex-start;
}
.ult-pop {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, rgba(244,100,33,0.92), rgba(160,55,18,0.82));
  border: 1px solid rgba(209,178,110,0.60);
  border-left: 4px solid #ECDAB1;
  padding: 12px 22px 12px 14px;
  font-weight: 900; letter-spacing: 0.18em; color: #fff;
  box-shadow: 0 0 28px rgba(244,100,33,0.50);
  animation: ultPop 3.6s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  max-width: 460px;
}
.ult-pop .ult-img {
  width: 64px; height: 64px; flex-shrink: 0;
  background: rgba(0,0,0,0.48); border: 1px solid rgba(255,255,255,0.22);
  display: grid; place-items: center;
}
.ult-pop .ult-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(209,178,110,0.90)); }
.ult-pop .ult-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ult-pop .ult-eyebrow { font-size: 11px; letter-spacing: 0.32em; color: #ECDAB1; }
.ult-pop .ult-title { font-size: 17px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ult-pop .ult-sub { font-size: 19px; font-weight: 900; letter-spacing: 0.10em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ultPop {
  0%   { opacity: 0; transform: translateX(-18px) scale(0.96); }
  10%  { opacity: 1; transform: translateX(0) scale(1); }
  85%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-10px) scale(0.98); }
}

/* Ultimate-use marker on the map */
.ult-marker {
  pointer-events: none;
}
.ult-marker .ult-marker-img,
.ult-marker .ult-marker-legend {
  filter: drop-shadow(0 0 10px rgba(244,100,33,0.9));
  animation: ultMarkerPulse 2s ease-out forwards;
}
.ult-marker .ult-marker-legend { animation-delay: 60ms; }
@keyframes ultMarkerPulse {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.4); }
}