/* ============================================================
   DealArena — /leaderboard (The Arena), July 2026 redesign port.
   "Infernal" flavor from design_handoff_leaderboard: cream brand
   page (#f5f4ef via the marketing shell) with warm-dark ember
   cards. Supersedes static/css/arena-leaderboard.css on this page.

   IMPORTANT: static/js/arena-leaderboard.js client-renders the
   champion banner / podium / board / character sheet / toasts
   using these exact class names and CSS variables — do not rename
   anything here without updating that renderer.
   Scope: everything under .p-leaderboard (same element also
   carries .arena-root, which the JS queries).
   ============================================================ */

.p-leaderboard {
  /* card tokens — Infernal warm-dark (design .arena[data-flavor="infernal"]) */
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --bg:        #161009;
  --bg-deep:   #161009;
  --panel:     #1f160c;
  --panel-2:   #1f160c;
  --panel-hi:  #2a1d10;
  --border:    #3a2a17;
  --border-2:  #58401f;
  --text:      #f3e9da;
  --text-2:    #c4b39b;
  --text-3:    #8a7860;
  --accent:    #ef5920;   /* brand ember */
  --accent-2:  #c4471a;
  --gold:      #ffd23f;
  --gold-2:    #ffae3c;
  --glow:      rgba(239,89,32,0.45);
  --gold-glow: rgba(255,210,63,0.45);
  --danger:    #d63060;
  --xp-a:      #ff6a24;
  --xp-b:      #ffd23f;
  /* page tokens — cream side (nav/footer/heading live on the shell) */
  --page-ink:  #0d100e;
  --page-ink2: #3b423d;
  --page-ink3: #6b736d;
  --cardshadow: 0 1px 3px rgba(13,16,14,.05), 0 16px 34px -18px rgba(122,62,22,.34), 0 46px 84px -38px rgba(13,16,14,.30);
  font-family: var(--font-mono);
  position: relative;
  /* warm radial washes over the cream shell background */
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(239,89,32,.10), transparent 58%),
    radial-gradient(900px 600px at 92% 14%, rgba(214,48,96,.05), transparent 55%);
}
/* faint ember-texture grain */
.p-leaderboard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.p-leaderboard .arena-wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 42px 28px 80px; }
.p-leaderboard .eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}

/* ===================== BUTTONS (claim CTA + character sheet) ===================== */
.p-leaderboard .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 10px 16px; border-radius: 9px; transition: transform .12s, box-shadow .15s, background .15s; text-decoration: none; }
.p-leaderboard .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #170b03;
  box-shadow: 0 0 0 1px var(--accent), 0 8px 22px var(--glow); }
.p-leaderboard .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), 0 12px 28px var(--glow); }
.p-leaderboard .btn-ghost { border: 1px solid var(--border-2); color: var(--text); }
.p-leaderboard .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ===================== SEASON BAR ===================== */
.p-leaderboard .season-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between;
  margin: 0 0 4px; padding: 13px 18px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--bg-deep); box-shadow: var(--cardshadow); }
/* The strip is one line that truncates, not a wrapping block: SOON holds
   its width and the season line takes the rest and ellipses. */
.p-leaderboard .season-bar .left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.p-leaderboard .live { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.p-leaderboard .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: lb-pulse 1.3s infinite; }
@keyframes lb-pulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);} }
/* One uniform muted line, per the design's strip — the older draft bolded
   "SEASON 01" against the rest; the 2026-08-20 strip does not. */
.p-leaderboard .season-bar .cyc { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: .04em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phone: the design's strip is ONE ellipsised line because at its own
   390px artboard the whole sentence fits — 10.5px type inside an 18px
   gutter. This page's strip sits in the 28px .arena-wrap at 12px, so at
   375px that same nowrap leaves 223px for a 307px sentence and clips it
   to "SEASON 01 · the first ranked com…". Nothing narrower than the
   design's own type size fits it on one line, so the line wraps here
   instead: the approved copy is the point, the single line is not. */
@media (max-width: 620px) {
  .p-leaderboard .season-bar .cyc { white-space: normal; overflow: visible; text-overflow: clip; }
}
.p-leaderboard .count { display: flex; gap: 7px; align-items: center; }
.p-leaderboard .count .seg2 { text-align: center; min-width: 50px; padding: 6px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); }
.p-leaderboard .count .seg2 .n { font-family: var(--font-mono); font-weight: 800; font-size: 17px; color: var(--text); line-height: 1; }
.p-leaderboard .count .seg2 .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; color: var(--text-3); margin-top: 3px; }

/* ===================== SEASON COUNTDOWN CARD =====================
   2026-08-20 design: the countdown left the season strip and became its
   own card under the page title, carrying "SEASON 01 OPENS IN" and
   "DETAILS AT LAUNCH". The phone layout (390-first) stacks head over a
   four-up grid; from 720px it reads as a band with the labels at the
   left and the digits at the right so the segments never stretch across
   a 1240px wrap. */
.p-leaderboard .season-count { margin: 20px 0 0; padding: 16px 16px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: linear-gradient(180deg, #181206, #0c0905);
  box-shadow: var(--cardshadow); color: var(--text); }
.p-leaderboard .season-count .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--text-3); }
.p-leaderboard .season-count .sc-head .at-launch { color: var(--accent); }
.p-leaderboard .season-count .count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.p-leaderboard .season-count .count .seg2 { min-width: 0; padding: 9px 4px; border-radius: 10px; background: #0f0b06; border-color: #2a1d10; }
.p-leaderboard .season-count .count .seg2 .n { font-size: 20px; }
@media (min-width: 720px) {
  .p-leaderboard .season-count { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 16px 20px; }
  .p-leaderboard .season-count .sc-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .p-leaderboard .season-count .count { display: flex; margin-top: 0; }
  .p-leaderboard .season-count .count .seg2 { min-width: 62px; }
}

/* ===================== PAGE TITLE (cream side) ===================== */
.p-leaderboard .arena-head { text-align: center; padding: 46px 0 8px; }
.p-leaderboard .arena-head .eyebrow { display: inline-flex; gap: 9px; align-items: center; }
.p-leaderboard .arena-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 7vw, 84px); line-height: .94; letter-spacing: -.03em; margin: 16px 0 14px; color: var(--page-ink); text-wrap: balance; }
.p-leaderboard .arena-head h1 .fire { color: transparent; background: linear-gradient(180deg, var(--gold), var(--accent) 68%, var(--danger)); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 40px var(--glow); }
.p-leaderboard .arena-head p { font-family: var(--font-mono); font-size: 13px; color: var(--page-ink2); max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* ===================== CHAMPION BANNER ===================== */
.p-leaderboard .champ { position: relative; margin: 34px 0 8px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-2); background: linear-gradient(135deg, var(--panel-2), var(--bg-deep) 78%);
  box-shadow: var(--cardshadow); }
.p-leaderboard .champ .frame { position: absolute; inset: 8px; border: 1px solid rgba(255,210,63,.52); border-radius: 13px; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 44px var(--gold-glow); }
.p-leaderboard .champ-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p-leaderboard .champ-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 296px 1fr; gap: 8px; }
@media (max-width: 880px) {
  .p-leaderboard .champ-grid { grid-template-columns: 1fr; }
}
.p-leaderboard .champ-art { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%); }
.p-leaderboard .champ-art .aura { position: absolute; width: 270px; height: 270px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%); filter: blur(6px); animation: lb-breathe 3.6s ease-in-out infinite; }
@keyframes lb-breathe { 0%,100%{ transform: scale(1); opacity:.8;} 50%{ transform: scale(1.12); opacity:1;} }
.p-leaderboard .champ-portrait { position: relative; width: 184px; height: 230px; border-radius: 14px; z-index: 1;
  background:
     repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 9px, transparent 9px 18px),
     linear-gradient(180deg, var(--panel-hi), var(--bg-deep));
  border: 1px solid var(--border-2); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35); }
.p-leaderboard .champ-portrait .ph { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--text-3); text-align: center; line-height: 1.7; }
.p-leaderboard .champ-portrait .big { font-family: var(--font-display); font-weight: 700; font-size: 62px; color: var(--text); text-shadow: 0 0 24px var(--glow); }
.p-leaderboard .champ-anon { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.p-leaderboard .champ-anon .ph { margin-top: 2px; }
.p-leaderboard .champ-crown { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 4; image-rendering: pixelated;
  filter: drop-shadow(0 0 9px var(--gold-glow)) drop-shadow(0 3px 3px rgba(0,0,0,.55)); animation: lb-bob 3s ease-in-out infinite; }
@keyframes lb-bob { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-5px);} }
.p-leaderboard .crown-spark { animation: lb-twinkle 2s steps(2) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lb-twinkle { 0%,100%{ opacity:.35; transform: scale(.7);} 50%{ opacity:1; transform: scale(1.25);} }
.p-leaderboard .champ-body { padding: 30px 34px 28px 16px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 880px) {
  .p-leaderboard .champ-body { padding: 6px 24px 26px; }
}
.p-leaderboard .champ-body .rank-flag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); padding: 5px 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.p-leaderboard .champ-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 50px); line-height: 1; margin: 13px 0 8px; color: var(--text); text-shadow: 0 0 30px var(--glow); }
.p-leaderboard .champ-body .sub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
.p-leaderboard .champ-body .sub .cls { color: var(--accent); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.p-leaderboard .champ-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 560px) {
  .p-leaderboard .champ-stats { grid-template-columns: repeat(2, 1fr); }
}
.p-leaderboard .cstat { padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--panel-hi) 60%, transparent); border: 1px solid var(--border); }
.p-leaderboard .cstat .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.p-leaderboard .cstat .v { font-family: var(--font-mono); font-weight: 800; font-size: 21px; color: var(--text); margin-top: 4px; letter-spacing: -.01em; }
.p-leaderboard .cstat .v.gold { color: var(--gold-2); }
.p-leaderboard .cstat .v.acc { color: var(--accent); }
.p-leaderboard .cstat .v .flame { width: 16px; height: 16px; vertical-align: -.18em; color: var(--accent); }

/* ===================== PODIUM ===================== */
.p-leaderboard .podium-sec { margin: 40px 0 18px; }
.p-leaderboard .sec-title { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 26px; }
.p-leaderboard .sec-title .ln { height: 1px; flex: 1; max-width: 170px; background: linear-gradient(90deg, transparent, rgba(13,16,14,.24)); }
.p-leaderboard .sec-title h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--page-ink); }
.p-leaderboard .podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 16px; align-items: end; max-width: 840px; margin: 0 auto; }
/* The 390-first design runs champion -> board with no podium: stacked,
   three full-height pedestals repeat rows 01-03 of the board directly
   below them and cost ~900px of scroll. Desktop keeps the podium.
   .podium-sec is written by arena-leaderboard.js renderPodium(). */
@media (max-width: 720px) {
  .p-leaderboard .podium-sec { display: none; }
}
.p-leaderboard .ped { position: relative; border-radius: 14px; padding: 22px 16px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-deep)); border: 1px solid var(--border-2);
  box-shadow: var(--cardshadow); transition: transform .18s, box-shadow .18s; }
.p-leaderboard .ped:hover { transform: translateY(-4px); }
.p-leaderboard .ped.first { padding-top: 32px; border-color: color-mix(in srgb, var(--gold) 28%, var(--border-2)); box-shadow: 0 0 32px -4px var(--gold-glow), var(--cardshadow), inset 0 0 46px var(--gold-glow); }
.p-leaderboard .ped .pavatar { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--text);
  background: radial-gradient(circle at 50% 35%, var(--panel-hi), var(--bg-deep)); }
.p-leaderboard .ped.first .pavatar { width: 104px; height: 104px; font-size: 34px; }
.p-leaderboard .ped .pcrown { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 3; image-rendering: pixelated; filter: drop-shadow(0 0 8px var(--gold-glow)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); animation: lb-bob 3s ease-in-out infinite; }
.p-leaderboard .ped .pname { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.p-leaderboard .ped .pcls { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); margin-top: 4px; }
.p-leaderboard .ped .pxp { font-family: var(--font-mono); font-weight: 800; font-size: 19px; color: var(--gold-2); margin-top: 12px; }
.p-leaderboard .ped .pxp span { font-size: 10px; color: var(--text-3); font-weight: 600; }
.p-leaderboard .ped .prk { position: absolute; top: 12px; left: 14px; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: color-mix(in srgb, var(--text) 20%, transparent); }

/* ===================== TABS / BOARD BAR ===================== */
.p-leaderboard .board-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 14px; }
.p-leaderboard .seg { display: inline-flex; padding: 4px; border-radius: 11px; background: var(--bg-deep); border: 1px solid var(--border); gap: 4px; box-shadow: var(--cardshadow); }
.p-leaderboard .seg-btn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 9px 18px; border-radius: 8px; color: var(--text-3); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; border: none; background: none; transition: all .15s; }
.p-leaderboard .seg-btn.active { color: #170b03; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px var(--glow); }
.p-leaderboard .seg-btn:not(.active):hover { color: var(--text); }
/* Phone: the design runs the three boards as one full-width segmented
   control with equal thirds and 44px targets. */
@media (max-width: 620px) {
  .p-leaderboard .board-bar { gap: 12px; }
  .p-leaderboard .seg { display: flex; width: 100%; gap: 6px; padding: 5px; }
  .p-leaderboard .seg-btn { flex: 1; min-width: 0; min-height: 44px; justify-content: center; padding: 9px 6px; font-size: 11px; letter-spacing: .04em; }
}
.p-leaderboard .live-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--border-2); color: var(--text-2); background: var(--bg-deep); cursor: pointer; transition: all .15s; }
.p-leaderboard .live-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px var(--glow); }
.p-leaderboard .live-btn .sw { width: 14px; height: 14px; color: var(--accent); }
.p-leaderboard .live-btn.on { color: #170b03; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-color: var(--accent); box-shadow: 0 0 18px var(--glow); }
.p-leaderboard .live-btn.on:hover { color: #170b03; }
.p-leaderboard .live-btn .livedot { width: 9px; height: 9px; border-radius: 50%; background: #170b03; box-shadow: 0 0 0 3px color-mix(in srgb, #170b03 30%, transparent); animation: lb-pulse 1s infinite; }

/* ===================== WAR REPORT (real recent events) ===================== */
.p-leaderboard .war-report { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--panel), var(--bg)); box-shadow: var(--cardshadow); margin-bottom: 14px; }
.p-leaderboard .war-report .wr-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.p-leaderboard .war-report .wr-row { display: flex; gap: 10px; align-items: baseline; padding: 10px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.p-leaderboard .war-report .wr-row:last-child { border-bottom: 0; }
.p-leaderboard .war-report .wr-row b { color: var(--gold-2); font-weight: 700; }
.p-leaderboard .war-report .wr-row .xp { color: var(--accent); margin-left: auto; white-space: nowrap; }
.p-leaderboard .war-report .wr-row .ago { color: var(--text-3); font-size: 10.5px; white-space: nowrap; }

/* ===================== BOARD ===================== */
.p-leaderboard .board { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--panel), var(--bg)); box-shadow: var(--cardshadow); }
.p-leaderboard .board-head, .p-leaderboard .row { display: grid; grid-template-columns: 58px 1fr 150px 132px 110px 96px 64px; gap: 12px; align-items: center; }
/* Bounty board: 6 columns — no level-progress bar (that bar is The
   Grind's identity); col-gold is the ranking metric so it never hides. */
.p-leaderboard .board.is-bounty .board-head, .p-leaderboard .board.is-bounty .row { grid-template-columns: 58px 1fr 150px 130px 110px 64px; }
/* The tier/level cell's own layout. It must live here and not inline on
   the element arena-leaderboard.js writes: an inline `display` beats the
   phone rule below that hides this column, which left rows one cell
   wider than the head and wrapped every row onto a second grid line. */
.p-leaderboard .col-tier { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.p-leaderboard .col-tier.is-guild { flex-direction: row; align-items: center; }
@media (max-width: 980px) {
  .p-leaderboard .board-head, .p-leaderboard .row { grid-template-columns: 48px 1fr 120px 90px 70px; }
  .p-leaderboard .board.is-bounty .board-head, .p-leaderboard .board.is-bounty .row { grid-template-columns: 48px 1fr 120px 90px 70px; }
  .p-leaderboard .col-bounty, .p-leaderboard .col-conq,
  .p-leaderboard .col-dials, .p-leaderboard .col-connects { display: none; }
}
.p-leaderboard .board-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.p-leaderboard .board-head .ralign { text-align: right; }
.p-leaderboard .row { position: relative; padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); cursor: pointer; transition: background .15s; }
.p-leaderboard .row:last-child { border-bottom: 0; }
.p-leaderboard .row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.p-leaderboard .row.top3 { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.p-leaderboard .row.flash { animation: lb-rankflash 1.4s ease; }
@keyframes lb-rankflash { 0%{ background: color-mix(in srgb, var(--gold) 36%, transparent); box-shadow: inset 0 0 30px var(--gold-glow);} 100%{ background: transparent; box-shadow: none; } }
.p-leaderboard .row.rising::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.p-leaderboard .medal { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 800; font-size: 13px; color: var(--text-2); background: var(--panel-hi); border: 1px solid var(--border); position: relative; }
.p-leaderboard .medal.m1 { color: #2a1602; background: linear-gradient(145deg, #ffe27a, #d99a18); border-color: #ffd23f; box-shadow: 0 0 16px var(--gold-glow); }
.p-leaderboard .medal.m2 { color: #13202b; background: linear-gradient(145deg, #eef3f7, #9fb0bf); border-color: #cdd8e2; }
.p-leaderboard .medal.m3 { color: #2a1402; background: linear-gradient(145deg, #e6a86a, #a5611f); border-color: #d98e4e; }
.p-leaderboard .hero-cell { display: flex; align-items: center; gap: 13px; min-width: 0; }
.p-leaderboard .av { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text);
  background: radial-gradient(circle at 50% 35%, var(--panel-hi), var(--bg-deep)); border: 1px solid var(--border-2); }
.p-leaderboard .av.anon { color: var(--text-3); font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  background: repeating-linear-gradient(45deg, var(--panel) 0 5px, var(--bg-deep) 5px 10px); }
.p-leaderboard .av .on { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #3fd07c; border: 2px solid var(--panel); box-shadow: 0 0 8px #3fd07c; }
.p-leaderboard .hero-meta { min-width: 0; }
.p-leaderboard .hero-meta .nm { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-leaderboard .hero-meta .nm.anon { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.p-leaderboard .hero-meta .row2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.p-leaderboard .hero-meta .cls { color: var(--accent); display: inline-flex; gap: 5px; align-items: center; }
.p-leaderboard .hero-meta .cls svg { width: 12px; height: 12px; }
.p-leaderboard .crest { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 6.5px; font-weight: 800; color: #0a0805; flex-shrink: 0; }
/* tier badge */
.p-leaderboard .tierbadge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.p-leaderboard .tier-gem { width: 11px; height: 11px; border-radius: 3px; transform: rotate(45deg); box-shadow: inset 0 0 4px rgba(255,255,255,.5); }
.p-leaderboard .lvl-pill { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.p-leaderboard .lvl-pill b { color: var(--text); font-size: 13px; }
/* xp bar */
.p-leaderboard .xp-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); margin-bottom: 5px; }
.p-leaderboard .xp-top b { color: var(--text-2); }
.p-leaderboard .xpbar { height: 8px; border-radius: 5px; background: var(--panel-hi); border: 1px solid var(--border); overflow: hidden; position: relative; }
.p-leaderboard .xpbar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--xp-a), var(--xp-b)); box-shadow: 0 0 12px var(--glow); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.25,1); position: relative; }
.p-leaderboard .xpbar .fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-100%); animation: lb-shimmer 2.4s infinite; }
@keyframes lb-shimmer { 0%{ transform: translateX(-100%);} 60%,100%{ transform: translateX(240%);} }
.p-leaderboard .num-cell { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text); text-align: right; }
.p-leaderboard .num-cell .u { font-size: 8.5px; color: var(--text-3); font-weight: 600; }
.p-leaderboard .num-cell.gold { color: var(--gold-2); }
.p-leaderboard .streak-cell { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text); }
.p-leaderboard .streak-cell .flame { width: 15px; height: 15px; color: var(--accent); filter: drop-shadow(0 0 5px var(--glow)); }
.p-leaderboard .streak-cell.cold { color: var(--text-3); }
.p-leaderboard .streak-cell.cold .flame { color: var(--text-3); filter: none; opacity: .5; }

/* Phone: the design's row is rank · avatar · name+class · figure+unit,
   and nothing else — no tier badge, no flame streak. Four fixed columns
   squeezed the hero cell to ~99px, which clipped the name to two letters
   and stacked the class name under the figure. Three columns with the
   hero on 1fr gives the name the room the design gives it. The streak /
   ONLINE cell is always the head's and the row's last child on all three
   boards, which is why it can be hidden without a class hook. */
@media (max-width: 620px) {
  .p-leaderboard .board-head, .p-leaderboard .row,
  .p-leaderboard .board.is-bounty .board-head, .p-leaderboard .board.is-bounty .row {
    grid-template-columns: 36px minmax(0, 1fr) 76px; gap: 10px; padding-left: 12px; padding-right: 12px;
  }
  /* An auto track here sizes to the unit line ("BOUNTY", 8.5px) and lets
     the figure above it spill; the figure is the wider line, so the
     track is fixed and the figure is kept on one line. */
  .p-leaderboard .num-cell { white-space: nowrap; }
  .p-leaderboard .col-tier { display: none; }
  .p-leaderboard .streak-cell,
  .p-leaderboard .board-head > *:last-child { display: none; }
  .p-leaderboard .av { width: 38px; height: 38px; font-size: 13px; }
  .p-leaderboard .hero-cell { gap: 10px; }
  .p-leaderboard .medal { width: 34px; height: 34px; border-radius: 9px; }
  /* Rank deltas need a weekly rank-snapshot table that does not exist,
     so every row renders the "unchanged" dash. The design's phone rank
     cell is the number alone; the dash comes back with real deltas. */
  .p-leaderboard .row .delta { display: none; }
  /* Sub-line: the design's phone row is one truncating line of class
     name — no guild, no class icon. It has to leave flex layout for
     text-overflow to reach the text: in a flex container the label is
     an anonymous item and ellipsis never applies to it. */
  .p-leaderboard .hero-meta .guild-bit { display: none; }
  .p-leaderboard .hero-meta .row2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-leaderboard .hero-meta .cls { display: inline; }
  .p-leaderboard .hero-meta .cls .cls-ico { display: none; }
}
.p-leaderboard .delta { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.p-leaderboard .delta.up { color: #3fb37f; }
.p-leaderboard .delta.dn { color: var(--danger); }
.p-leaderboard .delta.same { color: var(--text-3); }

/* ===================== CHARACTER SHEET (flyout) ===================== */
.p-leaderboard .sheet-mask { position: fixed; inset: 0; z-index: 380; background: rgba(13,16,14,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 22px; animation: lb-fade .2s; }
@keyframes lb-fade { from{opacity:0;} to{opacity:1;} }
.p-leaderboard .sheet { width: min(440px, 100%); border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-deep)); border: 1px solid var(--border-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.7); animation: lb-rise .25s cubic-bezier(.2,.8,.25,1); }
@keyframes lb-rise { from{ transform: translateY(16px) scale(.97); opacity:0;} to{ transform:none; opacity:1;} }
.p-leaderboard .sheet .sh-top { padding: 22px 22px 18px; display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 0% 0%, var(--glow), transparent 60%); }
.p-leaderboard .sheet .sh-av { width: 76px; height: 76px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--text); background: radial-gradient(circle at 50% 35%, var(--panel-hi), var(--bg-deep)); border: 1px solid var(--border-2); }
.p-leaderboard .sheet .sh-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--text); }
.p-leaderboard .sheet .sh-cls { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-top: 4px; display: inline-flex; gap: 6px; align-items: center; }
.p-leaderboard .sheet .sh-guild { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 6px; display: flex; gap: 7px; align-items: center; }
.p-leaderboard .sheet .sh-body { padding: 20px 22px 24px; }
.p-leaderboard .sheet .sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-leaderboard .sheet .sh-stat { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--panel-hi) 50%, transparent); border: 1px solid var(--border); }
.p-leaderboard .sheet .sh-stat .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.p-leaderboard .sheet .sh-stat .v { font-family: var(--font-mono); font-weight: 800; font-size: 20px; color: var(--text); margin-top: 4px; }
.p-leaderboard .sheet .sh-stat .v.acc { color: var(--accent); }
.p-leaderboard .sheet .sh-stat .v.gold { color: var(--gold-2); }
.p-leaderboard .sheet .sh-xp { margin-top: 16px; }
.p-leaderboard .sheet .sh-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-2); display: grid; place-items: center; background: var(--bg-deep); cursor: pointer; }
.p-leaderboard .sheet .sh-close:hover { color: var(--accent); border-color: var(--accent); }
.p-leaderboard .sheet .sh-tier { position: absolute; top: 14px; right: 56px; }

/* ===================== CLAIM / REWARDS CTA ===================== */
.p-leaderboard .claim { margin: 34px 0 0; border-radius: 16px; padding: 28px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--border-2); background:
    radial-gradient(circle at 100% 0%, var(--glow), transparent 55%),
    linear-gradient(180deg, var(--panel-2), var(--bg-deep));
  box-shadow: var(--cardshadow); }
.p-leaderboard .claim h4 { font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--text); margin: 0; }
.p-leaderboard .claim p { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); margin: 9px 0 0; max-width: 540px; line-height: 1.65; }
.p-leaderboard .claim p .chip { color: var(--accent); }
.p-leaderboard .rewards { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.p-leaderboard .rwd { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); background: color-mix(in srgb, var(--panel-hi) 60%, transparent); border: 1px solid var(--border); }
.p-leaderboard .rwd.soon { opacity: .62; border-style: dashed; }
.p-leaderboard .rwd .gd { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); }

/* opt-in / confidential-deals disclaimer (cream side, below the claim card) */
.p-leaderboard .arena-disclaim { font-family: var(--font-mono); font-size: 10.5px; color: var(--page-ink3); max-width: 600px; margin: 18px auto 0; line-height: 1.6; text-align: center; }

/* ===================== TOASTS (live mode) ===================== */
.p-leaderboard .toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 390; display: flex; flex-direction: column; gap: 10px; }
.p-leaderboard .toast { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 12px; min-width: 280px;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-deep)); border: 1px solid var(--gold);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 0 30px var(--gold-glow);
  animation: lb-toastIn .4s cubic-bezier(.2,.8,.25,1); }
@keyframes lb-toastIn { from{ transform: translateX(40px); opacity:0;} to{ transform:none; opacity:1;} }
.p-leaderboard .toast .ti { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--gold-2); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); flex-shrink: 0; }
.p-leaderboard .toast .tt { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.p-leaderboard .toast .tt b { color: var(--gold-2); }
.p-leaderboard .toast .tt .s { color: var(--text-3); font-size: 10.5px; }

/* ===================== MISC / A11Y ===================== */
/* empty-state row (alpha: board may have <20 ranked users) */
.p-leaderboard .board-empty { padding: 36px 20px; text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); }
/* "showing top N of M ranked" — sits under the board card, on the cream
   side of the page, so it uses the page inks rather than the card inks. */
.p-leaderboard .board-foot { font-family: var(--font-mono); font-size: 10.5px; color: var(--page-ink3); margin: 12px 0 0; }
.p-leaderboard .board-foot:empty { display: none; }
.p-leaderboard.reduced .champ-embers { display: none; }
@media (prefers-reduced-motion: reduce) {
  .p-leaderboard .xpbar .fill::after, .p-leaderboard .live .dot, .p-leaderboard .champ-art .aura,
  .p-leaderboard .champ-crown, .p-leaderboard .ped .pcrown, .p-leaderboard .live-btn .livedot,
  .p-leaderboard .crown-spark { animation: none !important; }
}