/* ==================================================
   ELOBOOSTLEAGUE · ORDER / MEMBERS AREA  (F3 redesign)
   Active-order dashboard — layout 6 (vertical rank journey).
   Inherits tokens, header, footer, .btn base, section heads and
   the .rv reveal from home-page.css (enqueued first). Ported from
   the Claude Design exploration: recoloured to the eloboostleague red
   palette via inherited tokens, hardcoded EBL-blue/navy rgba()
   swapped below, and scaled x1.2 to match the redesign (+20%).
   ================================================== */
:root {
  --status: #22b358;          /* in-progress green */
  --status-soft: #e4f7ec;
  --progress: 52;             /* 0–100, driven by tweaks */
  --loss: #e64a3a;
  --loss-soft: #fdecea;
}

/* page chrome */
.order-page { background: var(--bg-soft); min-height: 100vh; }

/* Suppress the parent theme's legacy [banner] page-title hero (the dark-blue
   "ORDER" .banner.banner__page printed in the /order/ page content) so the F3
   .order-hero is the only hero — same pattern the boost + result pages use.
   Scoped to body.order-page (added under ebl_f3_order_enabled), !important +
   double-class to beat the parent (child CSS loads before parent). */
body.order-page .banner.banner__page,
body.order-page .banner__page,
body.order-page .banner__page + .arrow-page-down,
body.order-page .arrow-page-down { display: none !important; }

/* ==================================================
   ORDER HERO BAND  (dark navy gradient, shared shell)
   ================================================== */
.order-hero {
  position: relative;
  background:
    radial-gradient(1188px 607.2px at 88% -40%, rgba(22, 89, 172, 0.14), transparent 58%),
    radial-gradient(950.4px 554.4px at 4% 130%, rgba(123, 92, 209, 0.30), transparent 60%),
    linear-gradient(120deg, var(--navy-deep) 0%, var(--royal-deep) 60%, var(--royal) 130%);
  color: #fff;
  overflow: hidden;
  border-bottom: 2.4px solid var(--gold);
}
.order-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.32px, transparent 1.32px);
  background-size: 31.68px 31.68px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 75%);
  pointer-events: none;
}
.order-hero-inner {
  position: relative; z-index: 1;
  max-width: 1557.6px; margin: 0 auto;
  padding: 44px 26.4px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 42.24px; flex-wrap: wrap;
}
.order-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 15.84px;
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 700;
  letter-spacing: calc(0.22em * var(--tracking));
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6.6px;
}
.order-hero-eyebrow::after { content: none; }
.order-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(39.6px, 4vw, 60.72px);
  letter-spacing: -0.02em; line-height: 1.1;
  text-transform: uppercase;
}
.order-title em { font-style: normal; color: var(--gold); }
.order-subtitle {
  margin-top: 14.52px;
  font-family: var(--font-ui);
  font-size: 15.84px; font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking));
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  display: inline-flex; align-items: center; gap: 11.88px;
}
.order-subtitle .dot { width: 5.28px; height: 5.28px; border-radius: 50%; background: rgba(255,255,255,0.4); }

/* hero meta pills (order id / status / server) */
.order-hero-meta { display: flex; gap: 39.6px; flex-wrap: wrap; }
.ohm {
  display: flex; flex-direction: column; gap: 6.6px;
}
.ohm-label {
  font-family: var(--font-ui);
  font-size: 11.88px; font-weight: 600;
  letter-spacing: calc(0.2em * var(--tracking));
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.ohm-value {
  font-family: var(--font-display);
  font-weight: 700; font-size: 25.08px;
  letter-spacing: -0.01em; color: #fff;
  display: inline-flex; align-items: center; gap: 10.56px;
}
.ohm-value.is-status { color: var(--status); text-transform: uppercase; font-size: 22.44px; }
.live-dot {
  width: 10.56px; height: 10.56px; border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 1.8s ease-out infinite; }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 65%, transparent); }
  70%  { box-shadow: 0 0 0 8.4px color-mix(in srgb, var(--status) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 0%, transparent); }
}

/* ==================================================
   SHARED ATOMS
   ================================================== */

/* panel shell */
.panel {
  background: #fff;
  border: 1.2px solid var(--line);
  border-radius: calc(var(--r) + 2.64px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 15.84px; padding: 21.12px 26.4px;
  border-bottom: 1.2px solid var(--line-soft);
  background: var(--bg-soft);
}
.panel-title {
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 11.88px;
}
.panel-title svg { width: 18.48px; height: 18.48px; color: var(--accent); }
.panel-tag {
  font-family: var(--font-ui);
  font-size: 12.54px; font-weight: 600;
  letter-spacing: calc(0.14em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 9.24px;
}
.panel-tag .live-dot { width: 9.24px; height: 9.24px; }

/* progress ring */
.prog-ring { position: relative; width: 221.76px; height: 221.76px; flex-shrink: 0; }
.prog-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.prog-ring .ring-track { fill: none; stroke: var(--bg-deep); stroke-width: 9; }
.prog-ring .ring-fill {
  fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  filter: drop-shadow(0 0 7.92px color-mix(in srgb, var(--gold) 55%, transparent));
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.prog-ring .ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.64px;
}
.prog-ring .ring-num {
  font-family: var(--font-display);
  font-weight: 700; font-size: 60.72px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.prog-ring .ring-sub {
  font-family: var(--font-ui);
  font-size: 11.88px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
}

/* result chip */
.result-chip {
  font-family: var(--font-ui);
  font-size: 13.2px; font-weight: 700;
  letter-spacing: calc(0.12em * var(--tracking));
  text-transform: uppercase;
  padding: 5.28px 13.2px; border-radius: 3.96px;
  display: inline-flex; align-items: center; justify-content: center;
}
.result-chip.win { color: var(--status); background: var(--status-soft); }
.result-chip.loss { color: var(--loss); background: var(--loss-soft); }

/* champion mini-badge */
.champ-badge {
  width: 39.6px; height: 39.6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; flex-shrink: 0;
  background: linear-gradient(140deg, var(--royal) 0%, var(--royal-deep) 100%);
}

/* win/loss streak dots */
.streak { display: inline-flex; gap: 6.6px; }
.streak span {
  width: 29.04px; height: 29.04px; border-radius: 3.96px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; color: #fff;
}
.streak span.w { background: var(--status); }
.streak span.l { background: var(--loss); }

/* commendations */
.commend-box { display: flex; flex-direction: column; gap: 14.52px; }
.commend-box-cap {
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
}
.commends { display: flex; gap: 13.2px; flex-wrap: wrap; }
.commend {
  display: inline-flex; align-items: center; gap: 11.88px;
  padding: 10.56px 18.48px 10.56px 11.88px;
  background: #fff; border: 1.2px solid var(--line); border-radius: 1318.68px;
  box-shadow: var(--shadow-soft); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.commend:hover { transform: translateY(-2.64px); border-color: var(--royal-soft); box-shadow: var(--shadow-pop); }
.commend.is-given { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--royal-tint); }
.commend-ico {
  width: 36.96px; height: 36.96px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 220ms var(--ease-out);
}
.commend-ico svg { width: 19.8px; height: 19.8px; }
.commend.is-given .commend-ico { animation: commend-pop 360ms var(--ease-out); }
@keyframes commend-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28) rotate(-8deg); } 100% { transform: scale(1); } }
.commend-ico.tone-orange { background: color-mix(in srgb, var(--orange) 16%, #fff); color: var(--orange-deep); }
.commend-ico.tone-gold   { background: color-mix(in srgb, var(--gold) 30%, #fff); color: var(--gold-deep); }
.commend-ico.tone-royal  { background: var(--royal-tint); color: var(--royal); }
/* Communicative, the 4th commend. Same tint-plus-deeper-ink recipe as its siblings,
   built on the page's own status green; raw --status on --status-soft is too low a
   contrast for a 19.8px stroke icon, hence the ink mix. */
.commend-ico.tone-green  { background: var(--status-soft); color: color-mix(in srgb, var(--status) 72%, var(--ink)); }
.commend-count {
  font-family: var(--font-display); font-weight: 700; font-size: 19.8px;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.commend-label {
  font-family: var(--font-ui); font-size: 13.86px; font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft);
}

/* ==================================================
   ORDER DETAILS & TIP MODULE  (shared)
   ================================================== */
.detail-panel-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36.96px; padding: 26.4px 29.04px 29.04px;
}
@media (max-width: 768px) { .detail-panel-body { grid-template-columns: 1fr; gap: 29.04px; } }
/* min-width:0 lets the 1fr grid track shrink below its content's min-content
   on narrow viewports — without it the column blows out and the panel
   (overflow:hidden) clips the extras/tip content on mobile. */
.extras-box, .tip-box { display: flex; flex-direction: column; gap: 15.84px; min-width: 0; }
.extras-list { display: flex; flex-direction: column; gap: 13.2px; }
.extras-item { display: flex; align-items: center; gap: 14.52px; }
.extras-item .ei-ico {
  width: 42.24px; height: 42.24px; border-radius: 10.56px; flex-shrink: 0;
  background: var(--royal-tint); color: var(--royal);
  display: inline-flex; align-items: center; justify-content: center;
}
.extras-item .ei-ico svg { width: 19.8px; height: 19.8px; }
.extras-item .ei-text b { font-size: 17.82px; font-weight: 600; color: var(--ink); }
.extras-item .ei-text small {
  display: block; font-family: var(--font-ui); font-size: 12.54px; font-weight: 500;
  letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-top: 1.32px;
}

.tip-row { display: flex; gap: 10.56px; }
.tip-ccy {
  width: 102.96px; height: 55.44px; flex-shrink: 0;
  border: 1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600; color: var(--ink); padding: 0 13.2px; cursor: pointer;
}
.tip-amt {
  flex: 1; min-width: 0; height: 55.44px;
  border: 1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
  padding: 0 18.48px; font-family: var(--font-body); font-size: 18.48px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.tip-amt:focus { border-color: var(--royal-soft); background: #fff; }
.tip-amt::placeholder { color: var(--ink-muted); }
.tip-btn {
  height: 55.44px; padding: 0 26.4px; border: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #fff;
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600;
  letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; border-radius: var(--r);
  display: inline-flex; align-items: center; gap: 10.56px;
  transition: transform 160ms var(--ease-out), box-shadow 180ms ease;
}
.tip-btn svg { width: 18.48px; height: 18.48px; }
.tip-btn:hover { transform: none; box-shadow: none; }
.tip-btn:hover svg { animation: gift-jump 0.55s var(--ease-out); }
@keyframes gift-jump { 0%, 100% { transform: translateY(0) rotate(0); } 28% { transform: translateY(-4.62px) rotate(-7deg); } 55% { transform: translateY(0) rotate(0); } 74% { transform: translateY(-1.98px) rotate(-3deg); } }
.tip-presets { display: flex; gap: 10.56px; flex-wrap: wrap; }
.tip-preset {
  padding: 9.24px 19.8px; border: 1.2px solid var(--line); background: #fff; border-radius: 1318.68px;
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 160ms ease;
}
.tip-preset:hover { border-color: var(--royal-soft); background: var(--royal-tint); color: var(--royal); transform: translateY(-1.32px); }
.tip-preset.is-active { border-color: var(--accent); background: var(--royal-tint); color: var(--royal); }
.tip-thanks {
  display: flex; align-items: center; gap: 10.56px;
  font-size: 17.82px; font-weight: 600; color: var(--status);
}
.tip-thanks svg { width: 21.12px; height: 21.12px; flex-shrink: 0; }

/* ==================================================
   CHAT (shared)
   ================================================== */
.chat-stream { display: flex; flex-direction: column; gap: 18.48px; padding: 26.4px; }
.chat-msg { display: flex; gap: 14.52px; align-items: flex-end; max-width: 78%; }
.chat-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-av {
  width: 44.88px; height: 44.88px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--orange), var(--orange-deep));
  color: #fff; box-shadow: 0 4.8px 12px -4.8px rgba(255,122,42,0.5);
}
.chat-av svg { width: 22.44px; height: 22.44px; }
.chat-msg.me .chat-av { background: linear-gradient(140deg, var(--royal), var(--royal-deep)); box-shadow: 0 4.8px 12px -4.8px rgba(22, 89, 172,0.5); }
.chat-bubble-wrap { display: flex; flex-direction: column; gap: 7.92px; min-width: 0; }
.chat-msg.me .chat-bubble-wrap { align-items: flex-end; }
.chat-bubble {
  background: var(--bg-soft);
  border: 1.2px solid var(--line);
  border-radius: 15.84px; border-bottom-left-radius: 3.96px;
  padding: 11.88px 17.16px; font-size: 17.82px; line-height: 1.45; color: var(--ink);
}
.chat-msg.me .chat-bubble {
  background: var(--royal); color: #fff; border-color: transparent;
  border-radius: 15.84px; border-bottom-right-radius: 3.96px;
}
.chat-time {
  font-family: var(--font-ui);
  font-size: 11.88px; letter-spacing: calc(0.06em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
}
.chat-input-row {
  display: flex; gap: 13.2px; padding: 18.48px 21.12px;
  border-top: 1.2px solid var(--line-soft); background: #fff;
}
.chat-input {
  flex: 1; min-width: 0; height: 58.08px; padding: 0 21.12px;
  border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); font-family: var(--font-body); font-size: 18.48px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.chat-input:focus { border-color: var(--royal-soft); background: #fff; }
.chat-input::placeholder { color: var(--ink-muted); }
.chat-send {
  height: 58.08px; padding: 0 29.04px; border: none; cursor: pointer;
  background: var(--royal); color: #fff;
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600;
  letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase;
  border-radius: var(--r);
  display: inline-flex; align-items: center; gap: 11.88px;
  transition: background 180ms ease, transform 160ms ease;
}
.chat-send:hover { background: var(--navy); transform: translateY(-1.32px); }
.chat-send svg { width: 18.48px; height: 18.48px; }

/* ==================================================
   MATCH HISTORY TABLE (shared)
   ================================================== */
.match-table { width: 100%; }
.match-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  align-items: center; gap: 15.84px;
  padding: 17.16px 26.4px;
}
.match-row + .match-row { border-top: 1.2px solid var(--line-soft); }
.match-row.head {
  background: var(--bg-soft);
  border-bottom: 1.2px solid var(--line);
  font-family: var(--font-ui);
  font-size: 12.54px; font-weight: 600;
  letter-spacing: calc(0.14em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
  padding: 15.84px 26.4px;
}
.match-row.body { transition: background 160ms ease; }
.match-row.body:hover { background: var(--royal-tint); }
.match-champ { display: inline-flex; align-items: center; gap: 14.52px; min-width: 0; }
.match-champ .mc-name { font-weight: 600; font-size: 18.48px; color: var(--ink); white-space: nowrap; }
.match-kda { font-family: var(--font-ui); font-size: 17.16px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.match-kda em { font-style: normal; color: var(--ink-muted); margin: 0 2.64px; }
.match-cs, .match-dur, .match-date {
  font-family: var(--font-ui); font-size: 15.84px; color: var(--ink-soft); letter-spacing: 0.01em;
}
.match-date { text-align: right; color: var(--ink-muted); }
.match-gain { font-family: var(--font-ui); font-weight: 700; font-size: 16.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.match-gain.up { color: var(--status); }
.match-gain.down { color: var(--loss); }
.col-r { text-align: right; justify-content: flex-end; }

@media (max-width: 864px) {
  .match-row { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .match-row .match-cs, .match-row .match-dur,
  .match-row.head .col-cs, .match-row.head .col-dur { display: none; }
}

/* action buttons row */
.order-actions { display: flex; gap: 18.48px; flex-wrap: wrap; }
.order-actions .btn { flex: 1; justify-content: center; min-width: 264px; padding: 21.12px 29.04px; }
.btn-pause {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff; box-shadow: 0 9.6px 33.6px -12px rgba(255,122,42,0.55);
}
.btn-pause:hover { transform: translateY(-1.32px); box-shadow: 0 14.4px 40.8px -12px rgba(255,122,42,0.65); }
.btn-dark {
  background: var(--navy); color: #fff; border: 1.2px solid var(--navy);
}
.btn-dark:hover { background: var(--navy-deep); transform: translateY(-1.32px); }
/* .ebl-rd-scoped (0,2,0) so the border survives f3-tokens' `.ebl-rd .btn{border:none}`
   (same 0,2,0, but this loads later via the ebl-f3-tokens dep chain). The live climb
   button is `<button class="btn btn-climb">`, so a bare `.btn-climb` (0,1,0) loses. */
.ebl-rd .btn-climb {
  background: #fff; color: var(--accent); border: 1.2px solid var(--royal-soft);
}
.ebl-rd .btn-climb:hover { background: var(--royal-tint); transform: translateY(-1.32px); }

/* ==================================================
   LIVE CLIMB MODAL
   ================================================== */
.climb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 31.68px;
  background: rgba(10, 17, 25, 0.62);
  -webkit-backdrop-filter: blur(7.92px); backdrop-filter: blur(7.92px);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 260ms;
}
.climb-overlay.is-open { opacity: 1; visibility: visible; }
.climb-modal {
  position: relative;
  width: min(580.8px, 100%);
  background:
    radial-gradient(792px 396px at 80% -30%, rgba(22,89,172,0.16), transparent 60%),
    linear-gradient(165deg, var(--navy-deep) 0%, var(--royal-deep) 75%);
  border: 1.2px solid rgba(255,255,255,0.14);
  border-radius: 21.12px;
  box-shadow: 0 48px 108px -36px rgba(0,0,0,0.7);
  color: #fff; overflow: hidden;
  transform: translateY(21.12px) scale(0.97);
  transition: transform 320ms var(--ease-out);
}
.climb-overlay.is-open .climb-modal { transform: none; }
.climb-modal::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.32px, transparent 1.32px);
  background-size: 29.04px 29.04px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);
}
.climb-modal > * { position: relative; z-index: 1; }
.climb-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 23.76px 26.4px; border-bottom: 1.2px solid rgba(255,255,255,0.1);
}
.climb-modal-title {
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 700;
  letter-spacing: calc(0.18em * var(--tracking)); text-transform: uppercase;
  color: #fff; display: inline-flex; align-items: center; gap: 13.2px;
}
.climb-modal-title .live-dot { background: var(--gold); box-shadow: 0 0 0 0 rgba(255,234,61,0.6); }
@media (prefers-reduced-motion: no-preference) {
  .climb-modal-title .live-dot { animation: live-pulse-gold 1.8s ease-out infinite; }
}
@keyframes live-pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(255,234,61,0.55); }
  70% { box-shadow: 0 0 0 8.4px rgba(255,234,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,234,61,0); }
}
.climb-x {
  width: 39.6px; height: 39.6px; border-radius: 9.24px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1.2px solid rgba(255,255,255,0.16); color: #fff;
  transition: background 180ms ease;
}
.climb-x:hover { background: rgba(255,255,255,0.18); }
.climb-x svg { width: 18.48px; height: 18.48px; }
.climb-modal-body { padding: 39.6px 34.32px 15.84px; display: flex; flex-direction: column; align-items: center; gap: 21.12px; }
.climb-modal .prog-ring { width: 248.16px; height: 248.16px; }
.climb-modal .prog-ring .ring-track { stroke: rgba(255,255,255,0.12); }
.climb-modal .prog-ring .ring-num { color: #fff; }
.climb-modal .prog-ring .ring-sub { color: rgba(255,255,255,0.6); }
.climb-ring-crest {
  position: absolute; inset: 0; margin: auto; width: 84.48px; height: 84.48px;
  top: -84.48px; /* placeholder, overridden below */
}
.climb-modal .ring-center .climb-crest-img { width: 118.8px; height: 118.8px; object-fit: contain; filter: drop-shadow(0 5.28px 13.2px rgba(0,0,0,0.4)); }
.climb-modal .ring-center .ring-num { font-size: 50.16px; }
.climb-lp-line { text-align: center; }
.climb-lp-big {
  font-family: var(--font-display); font-weight: 700; font-size: 39.6px; letter-spacing: -0.02em; color: var(--gold);
}
.climb-lp-rank {
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 600;
  letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-top: 3.96px;
}
.climb-modal .streak span { width: 34.32px; height: 34.32px; border-radius: 5.28px; font-size: 14.52px; }
.climb-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 21.12px 31.68px 29.04px;
  margin-top: 7.92px;
  font-family: var(--font-ui); font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.06em * var(--tracking)); text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.climb-modal-foot b { color: #fff; }
.climb-modal-foot .cm-eta b { color: var(--gold); }
.climb-modal-stats {
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 13.2px;
}
.climb-stat-box {
  background: rgba(255,255,255,0.06); border: 1.2px solid rgba(255,255,255,0.12);
  border-radius: var(--r); padding: 15.84px 18.48px;
  display: flex; flex-direction: column; gap: 5.28px;
}
.climb-stat-box .csb-label {
  font-family: var(--font-ui); font-size: 11.22px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.climb-stat-box .csb-value { font-family: var(--font-display); font-weight: 700; font-size: 23.76px; color: #fff; }
.climb-stat-box .csb-value.up { color: var(--status); }

.jv-stage { max-width: 1557.6px; margin: 0 auto; padding: 34.32px 26.4px 84.48px; display: grid; grid-template-columns: 517.44px 1fr; gap: 26.4px; align-items: start; }
.jv-rail { position: sticky; top: 102.96px; display: flex; flex-direction: column; gap: 21.12px; }
.jv-rail-top { padding: 42.24px 31.68px 29.04px; display: flex; flex-direction: column; align-items: center; gap: 21.12px; border-bottom: 1.2px solid var(--line-soft); }
.jv-rail-top .prog-ring { width: 198px; height: 198px; }
.jv-rail-top .btn { width: 100%; justify-content: center; }
.jv-track-wrap { padding: 29.04px 34.32px 31.68px; }
.jv-track-cap {
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 10.56px;
}
.jv-track { position: relative; display: flex; flex-direction: column; }
.jv-vtrack { position: absolute; left: 35.64px; width: 5.28px; border-radius: 2.64px; background: var(--bg-deep); }
.jv-vfill {
  position: absolute; left: 35.64px; width: 5.28px; border-radius: 2.64px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 0 9.6px color-mix(in srgb, var(--gold) 50%, transparent);
  transition: height 1.3s var(--ease-out);
}
.jv-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 21.12px; padding: 14.52px 0; }
.jv-step .jv-crest { width: 66px; height: 66px; object-fit: contain; flex-shrink: 0; opacity: 0.5; filter: drop-shadow(0 5.28px 10.56px rgba(62, 24, 32,0.2)); transition: opacity 300ms ease; margin-left: 5.28px; }
.jv-step.done .jv-crest { opacity: 1; }
.jv-step.current .jv-crest { width: 66px; height: 66px; opacity: 1; margin-left: 5.28px; }
body:not(.no-glow) .jv-step.current .jv-crest { filter: drop-shadow(0 7.92px 15.84px rgba(62, 24, 32,0.25)) drop-shadow(0 0 18.48px color-mix(in srgb, var(--gold) 50%, transparent)); }
.jv-step-text { display: flex; flex-direction: column; gap: 2.64px; }
/* capitalize normalizes the "climbing" rank, whose title is recomputed from the
   game schema (stored lowercase, e.g. "silver 1") while the start/target titles come
   from the order's own Title-Case from/to — so the middle node no longer reads lower
   case. Safe because these games use numeric divisions ("Silver 1"). */
.jv-step-name { font-family: var(--font-display); font-weight: 700; font-size: 19.8px; letter-spacing: -0.01em; color: var(--ink-soft); text-transform: capitalize; }
.jv-step.done .jv-step-name, .jv-step.current .jv-step-name { color: var(--ink); }
.jv-step-flag {
  font-family: var(--font-ui); font-size: 11.22px; font-weight: 700;
  letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
}
.jv-step.current .jv-step-flag { color: var(--gold-deep); }
.jv-main { display: flex; flex-direction: column; gap: 26.4px; min-width: 0; }
.jv-chat { display: flex; flex-direction: column; height: 580.8px; }
.jv-chat .chat-stream { flex: 1; overflow-y: auto; }
@media (max-width: 1152px) {
  .jv-stage { grid-template-columns: 1fr; }
  .jv-rail { position: static; }
}

/* ==================================================
   LIVE CHAT WIDGET — F3 skin (common/order_chat.php)
   The plugin chat (do_action('bt_client_chat')) emits .chat-container /
   .chat-cnt-section / .chat-right / .chat-left / .chat-content / .chat-text /
   .chat-snd-section / .chat-msg-field / .chat-snd-btn — NOT the
   .chat-stream/.chat-bubble family above (that styles preview markup). These
   rules re-skin the REAL widget to F3 inside BOTH live hosts: the customer
   order page (.jv-chat-live) and the booster console (.bp-chat). CSS-only —
   markup + the boostingChat JS are the plugin's, untouched. Scoped to
   .ebl-rd .chat-container so it only hits this widget (never the 3rd-party
   support chat), with the panel wrappers handling fill-height layout.
   ================================================== */
.ebl-rd .jv-chat-live,
.ebl-rd .bp-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ebl-rd .chat-container { display: flex !important; flex-direction: column; flex: 1; min-height: 0; background: #fff; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.ebl-rd .chat-cnt-section { flex: 1; min-height: 0; overflow-y: auto; padding: 26.4px; background: var(--bg-soft); }
.ebl-rd #no_chat_history { padding: 52.8px 26.4px; text-align: center; color: var(--ink-muted); font-size: 15.84px; line-height: 1.6; }
/* the live plugin chat emits the empty-state copy as a bare <p>; with main.css
   stripped (and home-page.css not loaded on the order/console pages) it has no
   margin reset, so zero it explicitly. */
.ebl-rd #no_chat_history p { margin: 0; }
.ebl-rd .chat-right,
.ebl-rd .chat-left { display: flex; gap: 13.2px; align-items: flex-end; max-width: 80%; margin-bottom: 18.48px; }
.ebl-rd .chat-right { margin-left: auto; flex-direction: row-reverse; }
.ebl-rd .chat-left { margin-right: auto; }
.ebl-rd .chat-img { width: 42.24px; height: 42.24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.2px solid var(--line); }
.ebl-rd .chat-content { display: flex; flex-direction: column; gap: 6.6px; min-width: 0; }
.ebl-rd .chat-right .chat-content { align-items: flex-end; }
.ebl-rd .chat-text {
  background: #fff; border: 1.2px solid var(--line);
  border-radius: 15.84px; border-bottom-left-radius: 3.96px;
  padding: 11.88px 17.16px; font-size: 17.16px; line-height: 1.45; color: var(--ink); word-break: break-word;
}
.ebl-rd .chat-right .chat-text {
  background: var(--royal); color: #fff; border-color: transparent;
  border-radius: 15.84px; border-bottom-right-radius: 3.96px;
}
.ebl-rd .chat-text .download_file { color: inherit; margin-left: 6.6px; }
/* file-message font-awesome icon (fa-file-o / fa-download) — main.css gave inline
   <i> a 5px right gap; re-home it so the glyph isn't flush against 'File:' text. */
.ebl-rd .chat-text i.fa { margin-right: 5.5px; }
.ebl-rd .chat-time {
  font-family: var(--font-ui); font-size: 11.22px; letter-spacing: calc(0.06em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
}
.ebl-rd .chat-snd-section {
  display: flex; gap: 13.2px; align-items: center; padding: 18.48px 21.12px;
  border-top: 1.2px solid var(--line-soft); background: #fff;
}
.ebl-rd .chat-inpu-sec { flex: 1; min-width: 0; }
.ebl-rd .chat-inpu-sec .type-msg { width: 100%; }
.ebl-rd .chat-msg-field {
  width: 100%; height: 55.44px; padding: 0 19.8px;
  border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); font-family: var(--font-body); font-size: 17.82px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.ebl-rd .chat-msg-field:focus { border-color: var(--royal-soft); background: #fff; }
.ebl-rd .chat-msg-field::placeholder { color: var(--ink-muted); }
.ebl-rd .chat-snd-sec { display: flex; align-items: center; gap: 10.56px; flex-shrink: 0; }
.ebl-rd .chat-snd-btn {
  height: 55.44px; padding: 0 26.4px; border: none; cursor: pointer;
  background: var(--royal); color: #fff;
  font-family: var(--font-ui); font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; border-radius: var(--r);
  transition: background 180ms ease, transform 160ms ease;
}
.ebl-rd .chat-snd-btn:hover:not(:disabled) { background: var(--navy); transform: translateY(-1.32px); }
.ebl-rd .chat-snd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ebl-rd .chat-mute-btn {
  width: 48.4px; height: 55.44px; flex-shrink: 0; border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); cursor: pointer; font-size: 19.8px; line-height: 1;
  transition: background 180ms ease, border-color 180ms ease;
}
.ebl-rd .chat-mute-btn:hover { background: var(--royal-tint); border-color: var(--royal-soft); }

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on big headings + numeric stats; small titles, names, subtitles
   and reading text use Barlow. Appended last to override the per-element
   --font-display at equal specificity.
   ================================================== */
.jv-step-name { font-family: var(--font-display); font-size: 21.12px; }

/* ==================================================
   Live climb modal — light / white theme (UI batch 8).
   Overrides the dark navy-gradient surface + white-on-dark text above with the F3 light
   tokens; the gold accents move to royal for contrast on white. The .csb-value.up green and
   the streak pills keep their own colours (they read fine on white).
   ================================================== */
.climb-modal { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: 0 48px 108px -36px rgba(10,17,25,0.32); }
.climb-modal::before { display: none; }
.climb-modal-head { border-bottom-color: var(--line); }
.climb-modal-title { color: var(--ink); }
.climb-x { background: var(--bg-soft); border-color: var(--line); color: var(--ink-soft); }
.climb-x:hover { background: var(--line-soft); }
.climb-modal .prog-ring .ring-track { stroke: var(--line); }
.climb-modal .prog-ring .ring-num { color: var(--ink); }
.climb-modal .prog-ring .ring-sub { color: var(--ink-muted); }
.climb-lp-big { color: var(--royal); }
.climb-lp-rank { color: var(--ink-muted); }
.climb-modal-foot { color: var(--ink-muted); }
.climb-modal-foot b { color: var(--ink); }
.climb-modal-foot .cm-eta b { color: var(--royal); }
.climb-stat-box { background: var(--bg-soft); border-color: var(--line); }
.climb-stat-box .csb-label { color: var(--ink-muted); }
.climb-stat-box .csb-value { color: var(--ink); }

/* ==================================================
   NARROW-PHONE OVERFLOW PASS (≤480)
   1) The match-history row only thins to 4 cols at ≤864; at 360 the 1.4fr
      champion track is ~69px and .mc-name is nowrap, so long champ names
      ("Aurelion Sol") paint past the cell and the panel (overflow:hidden) clips
      them. Drop the Date column too, tighten the row, let the name wrap.
   2) The auto-opening live-climb modal's stat grid stays 2-up; the full-width
      "Top champion" name can't fit a ~73px half-cell. Stack to one column.
   Only affects ≤480px.
   ================================================== */
@media (max-width: 480px) {
  .match-row { grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding: 14px; }
  .match-row.head { padding: 12px 14px; }
  .match-row .match-date, .match-row.head .col-r { display: none; }
  .match-champ { gap: 9px; }
  .match-champ .champ-badge { width: 32px; height: 32px; font-size: 12.54px; }
  .match-champ .mc-name { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.2; }
  .match-kda { font-size: 14px; }

  .climb-modal-stats { grid-template-columns: 1fr; }
  .climb-stat-box { min-width: 0; }
  .climb-stat-box .csb-value { font-size: 21px; overflow-wrap: anywhere; }
}

/* round 3 — shared order/booster hero + the customer order stage carried full
   31.68px gutters at every width (double-gutter with the inner panels) */
@media (max-width: 480px) {
  .order-hero-inner { padding: 30px 16px; gap: 22px; }
  .jv-stage { padding: 24px 16px 56px; gap: 18px; }
}

/* ==================================================
   Booster status-note banner (.jv-note) — sits between the chat panel head
   and the live chat. Written from the booster console (attributes.status_note);
   dismissible, returns when a newer note lands. Tokens only — byte-identical
   across the three themes.
   ================================================== */
.jv-note { display: flex; align-items: flex-start; gap: 13.2px; margin: 15.84px 23.76px 0; padding: 14.52px 15.84px; background: color-mix(in srgb, var(--accent) 7%, #fff); border: 1.2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--r); }
.jv-note-ico { flex-shrink: 0; width: 34.32px; height: 34.32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; }
.jv-note-ico svg { width: 17.16px; height: 17.16px; }
.jv-note-body { display: flex; flex-direction: column; gap: 2.64px; min-width: 0; }
.jv-note-cap { font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.jv-note-text { font-size: 15.18px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.jv-note-x { margin-left: auto; flex-shrink: 0; width: 29.04px; height: 29.04px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--r); color: var(--ink-muted); cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.jv-note-x:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.jv-note-x svg { width: 15.84px; height: 15.84px; }
@media (max-width: 560px) { .jv-note { margin: 13.2px 15.84px 0; } }

/* "Back in 1h 29m 05s" / "Starting in 45m 12s" live countdown on break/eta notes,
   ticked client-side from data-resume (tabular-nums so digits don't jitter) */
.jv-note-when { display: block; margin-top: 2.64px; font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; letter-spacing: 0.05em; color: var(--accent); font-variant-numeric: tabular-nums; }

/* mCustomScrollbar inside the live chat — the plugin's booster legacy.css used
   to paint the dragger brand-red (#D72C15 !important) with a 24px content
   inset; that sheet is stripped on the F3 hosts now and the vendor default is
   a near-invisible white. Quiet neutral pill + a tighter inset instead. */
.ebl-rd .chat-container .mCSB_scrollTools .mCSB_draggerRail { background: transparent; border: 0; width: 4.8px; }
.ebl-rd .chat-container .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4.8px !important; border-radius: 4px !important; background: #c4c9d4 !important; }
.ebl-rd .chat-container .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.ebl-rd .chat-container .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: #9aa1ad !important; }
.ebl-rd .chat-container .mCSB_inside > .mCSB_container { margin-right: 15.84px; }


/* ==================================================
   CUSTOMER ORDER-PAGE POLISH PASS (appended overrides)
   Ring numeral, the moved rate/commend actions in the narrower rail, and the
   live-climb ring glow. Kept last so it wins the equal-specificity ties.
   ================================================== */
/* the ring numeral: a body font fits three digits where League (display) overflowed */
.jv-rail-top .prog-ring .ring-num { font-family: var(--font-body); font-weight: 800; font-size: 52.8px; }
/* rate/feedback buttons share one row in the narrow rail; commend chips wrap */
.jv-rail .order-actions .btn { min-width: 0; }
.commend-panel { padding: 21.12px 24px; }
.commend-panel .commends { gap: 10.56px; }
/* live-climb ring fill glow reads on the white modal and is no longer SVG-clipped */
.climb-modal .prog-ring .ring-fill { filter: drop-shadow(0 0 10.56px color-mix(in srgb, var(--accent) 55%, transparent)); }
/* mobile: keep the enlarged ring from crowding the narrow rail */
@media (max-width: 560px) {
  .jv-rail-top { padding: 34.32px 21.12px 26.4px; }
  .jv-rail-top .prog-ring { width: 180px; height: 180px; }
}


/* ==================================================
   CUSTOMER ORDER-PAGE — ROUND 2 (owner list)
   Title rhythm, refined status/ETA meta, horizontal rank journey, the rate
   action as a page card below commend, nav aligned to the content, and a gift
   button that jumps instead of sliding.
   ================================================== */
/* 1. order title breathing room */
.order-page-main .order-title { margin: 10px 0; }

/* 2. status + ETA as refined meta pills; kill the blinking dot on the hero and
   the chat header (the climb modal's own gold dot is outside .order-page-main) */
.order-page-main .live-dot { animation: none; box-shadow: none; }
.order-hero-meta { gap: 15.84px; }
.order-hero-meta .ohm { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 11.88px 19.8px 12.54px; min-width: 116px; }
.order-hero-meta .ohm-label { color: rgba(255,255,255,0.55); }
.order-hero-meta .ohm-value { margin-top: 5.28px; font-size: 21.12px; }
.order-hero-meta .ohm-value.is-status { font-size: 19.8px; }
.order-hero-meta .live-dot { width: 8.8px; height: 8.8px; }
@media (max-width: 480px) { .order-hero-meta { gap: 10.56px; } .order-hero-meta .ohm { flex: 1; min-width: 0; padding: 10px 14px; } }

/* 3. rank journey — horizontal left -> right (JS positions .jv-htrack/.jv-hfill
   on the crest row); steps stack the crest over the name/flag */
.jv-track.is-horizontal { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 13.2px; padding-top: 5.28px; }
.jv-track.is-horizontal .jv-step { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 11.88px; padding: 0; min-width: 0; }
.jv-track.is-horizontal .jv-crest,
.jv-track.is-horizontal .jv-step.current .jv-crest { margin-left: 0; }
.jv-track.is-horizontal .jv-step-text { align-items: center; gap: 3.3px; }
.jv-htrack, .jv-hfill { position: absolute; height: 5.28px; border-radius: 2.64px; }
.jv-htrack { background: var(--bg-deep); }
.jv-hfill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 9.6px color-mix(in srgb, var(--gold) 50%, transparent); transition: width 1.3s var(--ease-out); }

/* 4. rate/feedback action as a page-consistent white card, moved below commend */
.actions-panel { padding: 18.48px 21.12px; }
.actions-panel .order-actions { margin: 0; }
.actions-panel .order-actions .btn { flex: 1; min-width: 0; justify-content: center; }

/* 5. site nav aligned to the hero + content edges (1557.6 / 26.4), was 1742.4 */
body.order-page .eb-nav { padding: 0 max(26.4px, calc((100% - 1557.6px) / 2 + 26.4px)) !important; }

/* 6. tip validation message under the amount row */
.tip-msg { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.02em * var(--tracking)); min-height: 0; }
.tip-msg.is-err { color: var(--loss); }
.tip-msg.is-ok { color: var(--status); }