/* ─── PvP MATCHMAKING UI (Phase 4 Cluster E) ──────────────────────────────────
   Styles for the VERSUS play-hub tab + the three full-screen flow overlays
   (#pvp-searching, #pvp-versus, #pvp-results) built by src/pvp-matchmaking.js.
   A clean dark-arena aesthetic — YOU reads cyan/green, the OPPONENT reads red,
   matching the duel HP bars in src/pvp-client.js. The duel HUD itself
   (#pvp-hud / #pvp-end) is styled inline by the engine; this file owns only the
   menu entry + matchmaking screens. */

/* ── VERSUS tab content (inside the play-hub panel) ──
   The panel is a flex column (HUD bar above, bottom nav below) sitting on the
   cream storybook page — so the content fills the column + centers, with a top
   pad clearing the ~58px HUD bar, and uses dark ink that reads on parchment. */
#pvp-tab {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 0;
  padding: 70px 18px 28px;
  text-align: center;
  color: #4a3a26;
  font-family: system-ui, sans-serif;
}
#pvp-tab .pvp-tab-title {
  margin: 0;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
  letter-spacing: .14em;
  background: linear-gradient(180deg, #1f97ad 0%, #137b95 55%, #0c5a73 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .5));
}
#pvp-tab .pvp-tab-sub {
  margin: 0; max-width: 34ch;
  font-size: 15px; line-height: 1.5; color: #5a4633;
}
#pvp-tab .pvp-tab-info {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-size: 14px; color: #5a4633;
}
#pvp-tab .pvp-tab-info b { color: #9a6a1e; font-weight: 800; }

.pvp-find-btn {
  margin-top: 6px;
  padding: 14px 40px;
  font-size: 18px; font-weight: 800; letter-spacing: .12em;
  color: #07131c;
  background: linear-gradient(180deg, #7df0c6 0%, #36d6a0 60%, #1fb583 100%);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(31, 181, 131, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, opacity .12s ease;
}
.pvp-find-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pvp-find-btn:active { transform: translateY(1px); }
.pvp-find-btn:disabled {
  filter: grayscale(.7) brightness(.8);
  cursor: not-allowed; opacity: .65; box-shadow: none;
}
.pvp-find-hint {
  font-size: 13px; color: #ffb4b4; min-height: 16px;
}
.pvp-find-hint[hidden] { display: none; }

/* VERSUS tab nav button — crossed-blades glyph + label, matching the other tabs. */
.play-hub-tab[data-tab="pvp"][hidden] { display: none; }
.play-hub-tab[data-tab="pvp"] .pvp-tab-glyph {
  width: 26px; height: 26px; display: block; margin: 0 auto;
}

/* ── Shared full-screen overlay frame ──
   z-index sits ABOVE the play-hub modal (#stage-select is z-index 250) so the
   searching screen covers the still-open hub, and above the duel HUD (50). */
.pvp-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  font-family: system-ui, sans-serif; color: #eaf2ff;
  background: radial-gradient(120% 120% at 50% 30%, rgba(18, 26, 44, .82) 0%, rgba(4, 6, 14, .94) 70%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
}
.pvp-overlay.visible { display: flex; }

/* ── Searching screen ── */
.pvp-search-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.pvp-spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid rgba(123, 240, 198, .18);
  border-top-color: #36d6a0;
  animation: pvp-spin 0.9s linear infinite;
}
@keyframes pvp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pvp-spinner { animation-duration: 2.4s; }
}
.pvp-search-title {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .16em;
}
.pvp-search-status { margin: 0; font-size: 15px; opacity: .85; min-height: 20px; }
.pvp-search-meta {
  display: flex; gap: 22px; align-items: center;
  font-size: 14px; opacity: .9;
}
.pvp-search-meta b { color: #ffe6a8; }
.pvp-search-timer { font-variant-numeric: tabular-nums; opacity: .7; }

/* ── Searching: the equipment loadout the player is entering with (review → CANCEL) ── */
.pvp-loadout-label { font-size: 11px; letter-spacing: .22em; opacity: .5; margin-top: 2px; }
.pvp-search-loadout {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 440px;
}
.pvp-lo-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 12px 6px; min-width: 72px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-top: 2px solid var(--lo, #9fb0c6);
  border-radius: 9px;
}
.pvp-lo-slot { font-size: 9.5px; letter-spacing: .14em; opacity: .55; }
.pvp-lo-name { font-size: 13px; font-weight: 700; color: var(--lo, #e8eef7); line-height: 1.15; }
.pvp-lo-lv { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .pvp-search-loadout { max-width: 320px; gap: 6px; }
  .pvp-lo-chip { min-width: 58px; padding: 6px 9px 5px; }
  .pvp-lo-name { font-size: 12px; }
}

/* ── Versus card ── */
.pvp-versus-row {
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 6vw, 60px);
  animation: pvp-versus-in .4s ease both;
}
@keyframes pvp-versus-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.pvp-fighter {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: clamp(110px, 30vw, 200px);
  padding: 22px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
}
.pvp-fighter-you  { background: linear-gradient(180deg, rgba(54, 214, 160, .18), rgba(54, 214, 160, .04)); box-shadow: 0 0 28px rgba(54, 214, 160, .22); }
.pvp-fighter-foe  { background: linear-gradient(180deg, rgba(255, 107, 107, .18), rgba(255, 107, 107, .04)); box-shadow: 0 0 28px rgba(255, 107, 107, .22); }
.pvp-fighter-tag  { font-size: 18px; font-weight: 800; letter-spacing: .1em; }
.pvp-fighter-you  .pvp-fighter-tag { color: #7df0c6; }
.pvp-fighter-foe  .pvp-fighter-tag { color: #ff9a9a; }
.pvp-fighter-power { font-size: 14px; opacity: .85; }
.pvp-versus-vs {
  font-size: clamp(30px, 9vw, 56px); font-weight: 900; letter-spacing: .04em;
  color: #ffe6a8; text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

/* ── Results screen ── */
.pvp-results-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  animation: pvp-versus-in .35s ease both;
}
.pvp-results-title {
  margin: 0; font-size: clamp(40px, 11vw, 72px); font-weight: 900; letter-spacing: .05em;
}
.pvp-results-title.win  { color: #6dffa0; text-shadow: 0 0 26px rgba(109, 255, 160, .45); }
.pvp-results-title.lose { color: #ff7b7b; text-shadow: 0 0 26px rgba(255, 123, 123, .4); }
.pvp-results-sub { margin: 0; font-size: 15px; opacity: .85; max-width: 32ch; }
.pvp-results-actions { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ── Shared buttons ── */
.pvp-btn {
  padding: 12px 30px; font-size: 15px; font-weight: 800; letter-spacing: .1em;
  border-radius: 11px; cursor: pointer;
  transition: transform .08s ease, filter .12s ease;
}
.pvp-btn:active { transform: translateY(1px); }
.pvp-btn-primary {
  color: #07131c;
  background: linear-gradient(180deg, #7df0c6 0%, #36d6a0 60%, #1fb583 100%);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 16px rgba(31, 181, 131, .32);
}
.pvp-btn-primary:hover { filter: brightness(1.08); }
.pvp-btn-ghost {
  color: #eaf2ff; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
}
.pvp-btn-ghost:hover { background: rgba(255, 255, 255, .14); }

/* ── Transient toast (fail / disconnect / energy) ── */
#pvp-toast {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%);
  z-index: 1010; pointer-events: none;
  padding: 11px 22px; border-radius: 10px;
  background: rgba(10, 14, 26, .92); color: #fff; font-size: 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .2s ease;
  font-family: system-ui, sans-serif;
}
#pvp-toast.visible { opacity: 1; }

/* ── Round HUD (best-of-3 pips + per-round countdown timer) ─────────────── */
/* Lives above the HP bars (#pvp-hud z-index 50). Hidden when no duel is
   active; pvp-client.js shows/hides it and updates pips on {t:'round'}. */
#pvp-round-hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 6px 0 5px;
  background: rgba(4, 8, 20, .55);
  font-family: system-ui, sans-serif; pointer-events: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#pvp-round-hud.pvp-round-hud-hidden { display: none; }
/* Pip row — two pips per player (best-of-3) */
.pvp-pips {
  display: flex; gap: 7px; align-items: center;
}
.pvp-pip {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
  transition: background .2s ease, border-color .2s ease;
}
.pvp-pips.you  .pvp-pip.filled { background: #4bd66a; border-color: #4bd66a; box-shadow: 0 0 6px rgba(75, 214, 106, .7); }
.pvp-pips.foe  .pvp-pip.filled { background: #ff6b6b; border-color: #ff6b6b; box-shadow: 0 0 6px rgba(255, 107, 107, .7); }
/* Round label + timer */
.pvp-round-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255, 255, 255, .55); text-transform: uppercase;
}
#pvp-round-timer {
  font-size: 18px; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  min-width: 2.4ch; text-align: center;
  transition: color .25s ease;
}
#pvp-round-timer.pvp-timer-low { color: #ff8a8a; }

/* ── PvP duel touch surface (src/pvp-touch.js) ───────────────────────────── */
#pvp-touch { display: none; }
#pvp-touch.active { display: block; }
/* Joystick — left third; cam-pad — right two-thirds; abilities — bottom-right. */
#pvp-joystick { position: fixed; left: 0; bottom: 0; width: 42vw; height: 46vh;
  z-index: 1005; touch-action: none; }
#pvp-joystick .pj-base { position: absolute; left: 110px; bottom: 120px;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 2px solid rgba(120, 230, 255, .55);
  background: rgba(10, 26, 40, .35); }
#pvp-joystick .pj-knob { position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(140, 240, 255, .85);
  box-shadow: 0 0 14px rgba(120, 230, 255, .6); }
#pvp-cam-pad { position: fixed; right: 0; top: 0; width: 58vw; height: 100vh;
  z-index: 1004; touch-action: none; }
#pvp-abilities { position: fixed; right: 18px; bottom: 24px; z-index: 1006;
  display: flex; gap: 14px; }
.pvp-ability { position: relative; width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); background: rgba(20, 30, 50, .6);
  color: #eaf6ff; font-size: 26px; line-height: 1; cursor: pointer;
  touch-action: none; }
.pvp-ability .pa-glyph { display: block; }
.pvp-ability .pa-cd { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; font-weight: 800;
  font-family: system-ui, sans-serif; }
.pvp-ability.ready .pa-cd { display: none; }
.pvp-ability:not(.ready) { filter: grayscale(.5) brightness(.8); }

/* PvP Phase 5 Cluster D — results reward (stars earned + W/L + streak). */
.pvp-results-reward { display:flex; flex-direction:column; gap:.35rem; align-items:center; margin:.6rem 0 1rem; }
.pvp-results-stars { font-size:1.4rem; color:#ffd76a; font-weight:700; }
.pvp-results-record { font-size:.95rem; opacity:.85; }

/* ── PvP Phase 6 — ranked ladder ──────────────────────────────────────────── */

/* Six-tier color ramp (idx 0..5). Reused by the VERSUS-tab badge + its pip and
   the in-overlay accents. A cohesive metal→gem progression. */
.pvp-tier-0 { --pvp-tier-c: #b08d57; --pvp-tier-glow: rgba(176,141,87,.5);  } /* Bronze   */
.pvp-tier-1 { --pvp-tier-c: #c0c8d0; --pvp-tier-glow: rgba(192,200,208,.5); } /* Silver   */
.pvp-tier-2 { --pvp-tier-c: #e8c14a; --pvp-tier-glow: rgba(232,193,74,.55); } /* Gold     */
.pvp-tier-3 { --pvp-tier-c: #6fd6c8; --pvp-tier-glow: rgba(111,214,200,.5); } /* Platinum */
.pvp-tier-4 { --pvp-tier-c: #6cc8ff; --pvp-tier-glow: rgba(108,200,255,.55);} /* Diamond  */
.pvp-tier-5 { --pvp-tier-c: #c77dff; --pvp-tier-glow: rgba(199,125,255,.6); } /* Master   */

/* ── VERSUS-tab ranked row (tier badge + season countdown + LADDER button) ──
   Injected into #pvp-tab by pvp-matchmaking.js. The tab is dark ink on cream
   parchment, so the badge reads with a tinted fill + the tier color on the pip
   and points. */
.pvp-ladder-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 16px;
}
.pvp-tier-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1.5px solid var(--pvp-tier-c, #b08d57);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 14px var(--pvp-tier-glow, transparent), inset 0 1px 0 rgba(255,255,255,.6);
  color: #3a2c1a; font-size: 14px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease;
}
.pvp-tier-badge:hover  { filter: brightness(1.04); transform: translateY(-1px); }
.pvp-tier-badge:active { transform: translateY(1px); }
.pvp-tier-pip {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6, var(--pvp-tier-c, #b08d57) 70%);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 0 8px var(--pvp-tier-glow, transparent);
  flex: 0 0 auto;
}
.pvp-tier-name   { font-weight: 800; }
.pvp-tier-points {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: #7a5a1e; padding-left: 8px; margin-left: 4px;
  border-left: 1px solid rgba(0,0,0,.14);
}
.pvp-season-left { font-size: 13px; color: #5a4633; opacity: .9; }
.pvp-ladder-open-btn { padding: 9px 22px; font-size: 13px; }

/* ── Results: ladder-points delta line + promotion banner ── */
.pvp-results-ladder {
  font-size: 1.05rem; font-weight: 800; letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.pvp-results-ladder.pvp-ladder-gain { color: #7df0c6; }
.pvp-results-ladder.pvp-ladder-loss { color: #ff9a9a; }
.pvp-results-ladder[hidden] { display: none; }
.pvp-promoted {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(16px, 4.5vw, 24px); font-weight: 900; letter-spacing: .05em;
  color: #ffe6a8;
  text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 0 26px rgba(255,230,168,.55);
  margin: 0 0 .2rem;
  animation: pvp-promoted-in .5s cubic-bezier(.2,.9,.3,1.2) both;
}
.pvp-promoted[hidden] { display: none; }
@keyframes pvp-promoted-in {
  0%   { opacity: 0; transform: scale(.7); }
  50%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-promoted { animation: none; }
}

/* ── Ranked-board overlay (#pvp-ladder) ── */
.pvp-ladder-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  width: min(420px, 92vw); max-height: 82vh;
  padding: 24px 22px;
  border-radius: 16px;
  background: rgba(10, 16, 30, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.pvp-ladder-title {
  margin: 0; text-align: center;
  font-size: 26px; font-weight: 800; letter-spacing: .14em;
  color: #ffe6a8;
}
.pvp-ladder-head {
  display: grid; grid-template-columns: 3rem 1fr auto;
  gap: 10px; align-items: center;
  padding: 0 12px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255, 255, 255, .5); text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pvp-ladder-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 4px;
}
.pvp-ladder-rowitem,
.pvp-ladder-skeleton {
  display: grid; grid-template-columns: 3rem 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(255, 255, 255, .04);
}
.pvp-lr-rank { font-weight: 800; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.pvp-lr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-lr-pts  { font-weight: 800; color: #ffe6a8; font-variant-numeric: tabular-nums; text-align: right; }
/* The local player's own row — green-tinted, matching the YOU color. */
.pvp-ladder-rowitem.pvp-ladder-mine {
  background: linear-gradient(180deg, rgba(54,214,160,.22), rgba(54,214,160,.08));
  border: 1px solid rgba(54, 214, 160, .45);
  box-shadow: 0 0 16px rgba(54, 214, 160, .2);
}
.pvp-ladder-rowitem.pvp-ladder-mine .pvp-lr-rank { color: #7df0c6; }
.pvp-ladder-rowitem.pvp-ladder-mine .pvp-lr-name { color: #d6fff0; }
.pvp-ladder-empty {
  text-align: center; padding: 28px 12px; opacity: .7; font-size: 14px;
}
/* Skeleton shimmer while the board loads. */
.pvp-ladder-skeleton span { height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); }
.pvp-ladder-skeleton .pvp-lr-rank { width: 1.6rem; }
.pvp-ladder-skeleton .pvp-lr-pts  { width: 3.5rem; }
.pvp-ladder-skeleton { animation: pvp-ladder-shimmer 1.2s ease-in-out infinite; }
@keyframes pvp-ladder-shimmer { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .pvp-ladder-skeleton { animation: none; }
}
#pvp-ladder-close { align-self: center; margin-top: 2px; }

/* Landscape: keep the VERSUS-tab ranked row from wrapping awkwardly on short
   viewports — the tab content already centers, so just tighten the gaps. */
body.landscape .pvp-ladder-row { gap: 8px 12px; }
body.landscape .pvp-ladder-card { max-height: 88vh; padding: 18px 20px; }
@media (max-height: 460px) {
  .pvp-ladder-title { font-size: 22px; }
  .pvp-ladder-card { gap: 10px; padding: 16px 18px; }
}

/* ── Duel HP-bar hit shake (toggled by src/pvp-client.js shakeFoeBar) ──
   Reduced-motion users get the brightness pulse but no translate. */
#pvp-hud .pvp-bar.pvp-bar-hit { animation: pvp-bar-hit .18s ease; }
@keyframes pvp-bar-hit {
  0%   { transform: translateX(0); filter: brightness(1.6); }
  25%  { transform: translateX(-3px); }
  60%  { transform: translateX(3px); }
  100% { transform: translateX(0); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  #pvp-hud .pvp-bar.pvp-bar-hit { animation: none; }
}

/* ── 3-2-1-FIGHT countdown curtain (src/pvp-matchmaking.js runCountdown) ── */
#pvp-countdown { background: radial-gradient(120% 120% at 50% 40%, rgba(10,14,28,.45) 0%, rgba(4,6,14,.66) 75%); }
.pvp-count-num {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 900; letter-spacing: .04em;
  font-size: clamp(72px, 22vw, 168px);
  color: #ffe6a8; text-shadow: 0 4px 26px rgba(0,0,0,.7), 0 0 30px rgba(255,230,168,.4);
  line-height: 1;
}
.pvp-count-num.fight { color: #7df0c6; text-shadow: 0 4px 26px rgba(0,0,0,.7), 0 0 34px rgba(125,240,198,.55); }
.pvp-count-num.pvp-count-pop { animation: pvp-count-pop .42s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pvp-count-pop {
  0%   { opacity: 0; transform: scale(1.8); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: .85; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-count-num.pvp-count-pop { animation: none; opacity: 1; transform: none; }
}

/* Reduced-motion: drop the versus/results entrance + countdown pop. Placed
   at end of file so it wins over the per-element animation shorthands above. */
@media (prefers-reduced-motion: reduce) {
  .pvp-versus-row,
  .pvp-results-card { animation: none; opacity: 1; transform: none; }
  .pvp-count-num.pvp-count-pop { animation: none; opacity: 1; transform: none; }
}

/* ── Display titles on the game's carved-stone face (matches the YOU-DIED
   ceremony). Body/sub copy stays on system-ui for legibility. ── */
.pvp-search-title,
.pvp-versus-vs,
.pvp-fighter-tag,
.pvp-results-title { font-family: 'Cinzel', Georgia, serif; }