/* ============================================================
   SERVER STATS - /stats.html
   Site shell (hero, board frame, next-step block) on top of
   ranks/rank-pages.css + site-fx.css, plus the theme bridge that
   dresses the embedded RankEval widget in Zombie Land colours.
   Identity: rank gold, same as ranks/kits/staff.
   ============================================================ */

.rankpage.st-page {
  --fx: #e6c84a; --fx-bright: #ffd964; --fx-dim: rgba(230,200,74,0.13); --fx-line: rgba(230,200,74,0.42);
  padding-bottom: 3rem;
}

.st-page .rk-hero {
  background:
    radial-gradient(ellipse 900px 420px at 78% 10%, rgba(230,200,74,0.10), transparent 65%),
    radial-gradient(ellipse 700px 380px at 15% 110%, rgba(120,150,200,0.07), transparent 60%),
    linear-gradient(180deg, #0a0d14 0%, #05070d 100%);
}
.st-page .rk-tagline a { color: var(--fx-bright); }

/* ---- Crest: a ladder of bars under a rising trend line ---- */
.st-bar { transform-box: fill-box; transform-origin: bottom; animation: st-bar 3.4s ease-in-out infinite; }
.st-bar.b2 { animation-delay: 0.35s; }
.st-bar.b3 { animation-delay: 0.7s; }
.st-trend { stroke-dasharray: 190; stroke-dashoffset: 190; animation: st-trend 4.6s ease-in-out infinite; }
.st-spark { transform-box: fill-box; transform-origin: center; animation: st-spark 4.6s ease-in-out infinite; }
@keyframes st-bar { 0%, 100% { transform: scaleY(0.88); } 50% { transform: scaleY(1); } }
@keyframes st-trend { 0% { stroke-dashoffset: 190; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes st-spark { 0%, 40% { opacity: 0; transform: scale(0.4); } 55% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.55; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .st-bar, .st-trend, .st-spark { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* ---- The board: frame the embed so it reads as part of the page ---- */
.st-board {
  position: relative;
  margin-top: 1.6rem;
  border-top: 2px solid var(--rk-accent-line);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(230,200,74,0.05), transparent 220px);
}
/* The embed keeps its own horizontal gutter (Tailwind px-4 / sm:px-6 /
   lg:px-8). Mirror it on the frame so the heading and the fine print line
   up with the widget's content instead of with the board edge. */
.st-board-head,
.st-fineprint { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) {
  .st-board-head,
  .st-fineprint { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .st-board-head,
  .st-fineprint { padding-left: 2rem; padding-right: 2rem; }
}

.st-board-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.1rem;
  padding-bottom: 0.2rem;
}
.st-board-head h2 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.st-board-head .rk-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.st-board-hint {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The embed reserves its own height before the bundle lands, so nothing below jumps. */
#rankeval-widget { display: block; }

.st-fineprint {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.st-fineprint a { color: var(--fx-bright); }

.st-page .rk-next { margin-top: 2.4rem; }

@media (max-width: 720px) {
  .st-board-hint { display: none; }
}

/* ============================================================
   THEME BRIDGE - RankEval embed
   The widget is a third party Nuxt bundle mounted into
   #rankeval-widget. Everything it draws is driven by CSS custom
   properties (--re-* for its own tokens, --ui-* for the Nuxt UI
   layer), so we repaint it by redefining those on the mount node
   instead of fighting its rules.

   Two things to know before editing this block:
   1. The loader writes --re-primary / --ui-primary / --re-border-color
      / --ui-border as INLINE styles on the mount node from the brand
      colour set in the RankEval dashboard. Inline wins over any
      stylesheet, so those four need !important. The rest do not.
   2. Pillar, tier and status colours (PvP, gold tier, online green)
      are data, not chrome. They are deliberately left alone.

   If RankEval ships a release that renames these tokens the page
   simply falls back to their stock dark theme - nothing breaks.
   ============================================================ */
#rankeval-widget {
  /* brand accent -> rank gold (inline, needs !important) */
  --re-primary: #e6c84a !important;
  --ui-primary: #e6c84a !important;
  --re-border-color: #353945 !important;
  --ui-border: #353945 !important;

  /* Nuxt UI primary ramp, regenerated around the gold */
  --ui-color-primary-50: #fdf8e6;
  --ui-color-primary-100: #faf0c4;
  --ui-color-primary-200: #f4e28d;
  --ui-color-primary-300: #efd668;
  --ui-color-primary-400: #e9cd56;
  --ui-color-primary-500: #e6c84a;
  --ui-color-primary-600: #c4a733;
  --ui-color-primary-700: #9c8324;
  --ui-color-primary-800: #726019;
  --ui-color-primary-900: #4a3e10;
  --ui-color-primary-950: #2c2409;

  /* Neutral ramp -> the site panels. --ui-bg/-muted/-accented, the
     border tones and the muted text colours all derive from these. */
  --ui-color-neutral-50: #dfe3ec;
  --ui-color-neutral-100: #b7becf;
  --ui-color-neutral-200: #828b9d;
  --ui-color-neutral-300: #3c414f;
  --ui-color-neutral-400: #353945;
  --ui-color-neutral-500: #22252e;
  --ui-color-neutral-600: #1b1e26;
  --ui-color-neutral-700: #171a22;
  --ui-color-neutral-800: #0c0f16;
  --ui-color-neutral-900: #080a11;
  --ui-color-neutral-950: #05070d;

  /* RankEval's own greyscale, same ladder */
  --re-grey-50: #dfe3ec;
  --re-grey-100: #b7becf;
  --re-grey-200: #828b9d;
  --re-grey-300: #3c414f;
  --re-grey-400: #353945;
  --re-grey-500: #22252e;
  --re-grey-600: #1b1e26;
  --re-grey-700: #171a22;
  --re-grey-800: #0c0f16;
  --re-grey-900: #05070d;

  --re-background: #171a22;
  --re-on-background: #f1f3f8;
  --re-surface: #0c0f16;
  --re-on-surface: #f1f3f8;
  --re-secondary: #f1f3f8;
  --re-on-secondary: #12141a;
  /* gold needs dark ink on top, not the stock white */
  --re-on-primary: #14161d;
  --re-error: #ff5c48;
  --re-on-error: #14161d;
  --re-info: #b7cbe7;
  --re-on-info: #14161d;

  --re-sheet-bg: linear-gradient(145deg, rgba(27,30,38,0.96), rgba(5,7,13,0.96));
  --re-accent-gradient: linear-gradient(180deg, #22252e, #1b1e26);
  --re-overlay-gradient: linear-gradient(135deg, rgba(230,200,74,0.06), rgba(183,203,231,0.05));
  --re-tooltip-background: #1b1e26;
  --re-table-zebra-odd: rgba(255,255,255,0.02);
  --re-table-zebra-even: rgba(255,255,255,0.05);
  --re-radius-sm: 6px;
  --re-radius-md: 10px;
  --re-radius-lg: 12px;

  /* The embed sits inside .container, so its own max width only needs to be
     wide enough not to pinch it further. Its content then sits one gutter in
     from the container edge; .st-board-head and .st-fineprint above mirror
     that gutter so the frame lines up with it. */
  --ui-container: 1240px;
  --re-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Its section headings already inherit Cinzel from style.css; hold the
   rest of the embed on the site body font so nothing drifts.
   min-height: the embed pads itself to 100vh so it fills a page of its own.
   Here it is one section among several, and with only three servers listed
   that leaves a screen of dead space above the fine print. The mount node
   below still carries an inline min-height, so nothing jumps while the
   bundle downloads. */
#rankeval-widget .re-widget {
  font-family: var(--re-font-family);
  min-height: 0;
}

/* The widget's filter rail pins itself at top-[74px], the header offset it
   assumes on rankeval.gg. Our topbar is sticky and 88px tall, so push it
   clear. Target that exact class and nothing else: .sticky on its own also
   matches the leaderboard table's frozen player column and header cells,
   and giving those a top offset shunts them down over the rows. */
#rankeval-widget .top-\[74px\] { top: calc(var(--zl-header-bottom, 69px) + 35px); } /* 35px under the header's visible bottom (includes.js) */