/* ==========================================================================
   Core Fiesta - 2026 redesign
   Modern dark gaming theme. Hand-rolled design tokens, no build step.
   Replaces the reset.css + styles.css + jQuery-plugin CSS zoo.
   Backend/markup bindings unchanged; this restyles the server-rendered views.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Palette - deep slate base, warm gold primary, teal secondary */
  --bg:            #0d1117;
  --bg-elev:       #161b24;
  --bg-elev-2:     #1d2430;
  --surface:       #212a38;
  --border:        #2b3546;
  --border-soft:   #222b3a;

  --text:          #e6edf6;
  --text-dim:      #9fb0c3;
  --text-mut:      #6b7c92;

  --primary:       #f2b134;   /* gold */
  --primary-600:   #d9971a;
  --primary-050:   rgba(242,177,52,.12);
  --secondary:     #35d0c0;   /* teal */
  --secondary-600: #1fa392;
  --danger:        #ef5350;
  --success:       #4caf7d;

  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     18px;
  --shadow:        0 6px 24px rgba(0,0,0,.35);
  --shadow-lg:     0 16px 48px rgba(0,0,0,.5);
  --ring:          0 0 0 3px var(--primary-050);

  --header-h:      64px;
  --content-max:   1200px;
  --gap:           24px;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Trebuchet MS", var(--font);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Reset (minimal, modern) -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(242,177,52,.06), transparent 70%),
    radial-gradient(900px 500px at 100% 0, rgba(53,208,192,.05), transparent 60%),
    /* Shaped to the artwork rather than ramped down the page. bg-ambient is a
       vista in a cave mouth: nearly black at the top (mean rgb 9,7,15) and at
       the bottom, with everything bright in a band from roughly a third to
       four-fifths down. The old ramp did the opposite of what that needs - it
       was heaviest (.985) over the black bottom and still .74 over the black
       top, so it spent its opacity hiding nothing and the art never showed.

       The band is what constrains legibility, because background-attachment is
       fixed: content scrolls past every part of the image, so any text can end
       up over the bright vista. Solving for the least scrim that keeps body
       text at 5:1 gives ~.65 across the band and 0 at either end. .72 in the
       band is that with margin, measured at 5.24:1 worst case against
       --text #E6EDF6 (4.5:1 is the AA floor). */
    linear-gradient(180deg,
      rgba(13,17,23,.30) 0%,
      rgba(13,17,23,.40) 18%,
      rgba(13,17,23,.72) 34%,
      rgba(13,17,23,.72) 78%,
      rgba(13,17,23,.45) 92%,
      rgba(13,17,23,.35) 100%),
    url("/images/bg-ambient.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--secondary); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--primary); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; font-weight: 700; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* ---- Layout shell -------------------------------------------------------- */
.wrapper,
.page-shell { width: 100%; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gap);
  align-items: start;
  padding-block: var(--gap);
}
.layout.is-wide { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Header + navigation ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 17, 23, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-family: var(--font-head);
}
.brand__logo, .brand__sub { flex: 0 0 auto; }
.brand:hover { color: inherit; }
.brand { align-items: center; }
.brand__logo { height: 48px; width: auto; display: block; mix-blend-mode: screen; }
.brand__hex {
  display: inline-block; width: .74em; height: .82em; margin: 0 1px;
  background: url("/images/hex.svg") center/contain no-repeat;
  transform: translateY(1px);
}
.brand__sub { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: .5px; color: var(--primary); line-height: 1; }

/* Coin glyph - the CORE hexagon emblem (vector rebuild of the logo O) */
.hex-coin {
  display: inline-block; height: 1.15em; width: 1.1em; margin: 0 .2em;
  background: url("/images/coin.svg") center/contain no-repeat;
  vertical-align: -.2em;
}
/* Keep a number and its coin on the same line */
.price, .price-old, .coin-amount, .coin-pack__amt { white-space: nowrap; }
/* When the coin sits with a number, center it vertically on the text */
.coin-amount .hex-coin, .shopbox__price .hex-coin { vertical-align: middle; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__link:not(.is-cta):hover,
.nav__item:hover > .nav__link:not(.is-cta),
.nav__item.is-open > .nav__link:not(.is-cta) { color: var(--text); background: var(--bg-elev-2); }
.nav__link.is-cta {
  color: var(--primary);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.nav__link.is-cta:hover { background: var(--bg-elev-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary-600); filter: none; }
.nav__item.has-sub > .nav__link::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}

/* Dropdowns */
.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  transition-delay: .12s;                     /* linger briefly before closing */
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;                       /* closed menu must not catch the mouse */
  transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 20;
}
.nav__item:hover > .nav__sub,
.nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
/* Invisible bridge over the 6px gap so hover doesn't flicker moving link->menu */
.nav__item.has-sub > .nav__sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.nav__sub a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
}
.nav__sub a:hover { background: var(--primary-050); color: var(--primary); }
.nav__sep { height: 1px; margin: 6px 10px; background: var(--border); }
.nav__ext { margin-left: 4px; font-size: .85em; opacity: .55; }
.nav__sub .nav__sub {                       /* third level */
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: 0; padding: 4px 0 4px 12px;
  border-left: 2px solid var(--border); margin: 2px 0 2px 6px; min-width: 0;
}

/* Hamburger */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translate(-50%, -8px); }
.nav-toggle span::after  { transform: translate(-50%,  6px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translate(-50%, 0) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translate(-50%, 0) rotate(-45deg); }

@media (min-width: 861px) { .nav__item--dl { display: none; } }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(84vw, 340px);
    margin: 0;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 14px; font-size: 16px; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 6px 14px; max-height: 0; overflow: hidden;
    transition: max-height .25s var(--ease);
  }
  .nav__item.is-open > .nav__sub { max-height: 600px; }
  .nav__item.has-sub > .nav__link::after { margin-left: auto; }
}

/* ---- Header account menu ------------------------------------------------- */
.acct { position: relative; flex: 0 0 auto; }
.acct__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev-2); color: var(--text); font-weight: 600; cursor: pointer;
}
.acct__toggle:hover { border-color: var(--primary); }
.acct__name { font-weight: 700; }
.acct__coins { display: inline-flex; align-items: center; color: var(--primary); font-weight: 700; padding-left: 10px; border-left: 1px solid var(--border); }
.acct__caret { color: var(--text-mut); font-size: 11px; transition: transform .15s var(--ease); }
.acct.is-open .acct__caret { transform: rotate(180deg); }
.acct__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.acct.is-open .acct__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.acct__menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; font-weight: 500; }
.acct__menu a:hover { background: var(--primary-050); color: var(--primary); }
.acct__menu .acct__logout { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--danger); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.acct__menu .acct__logout:hover { background: rgba(239,83,80,.12); color: var(--danger); }
.acct-guest { display: flex; gap: 8px; flex: 0 0 auto; }
.acct-guest .btn { padding: 8px 16px; }
.nav__account { display: none; }
@media (max-width: 860px) {
  .acct, .acct-guest { display: none; }        /* account lives in the drawer on mobile */
  .nav-toggle { margin-left: auto; }
  .site-header__inner { gap: 12px; }
  /* backdrop-filter makes the header a containing block for the fixed drawer,
     collapsing it to the header's height - drop it on mobile so the drawer is
     positioned against the viewport. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-elev); }
  .nav { z-index: 200; }
  .nav__account { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
  .nav__account-head { color: var(--text); font-weight: 700; padding: 8px 14px; }
  .nav__account-coins { color: var(--primary); }
  .nav__account a:not(.btn) { display: block; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 15px; }
  .nav__account a:not(.btn):hover { background: var(--primary-050); color: var(--primary); }
  .nav__account-logout { color: var(--danger) !important; }
  .nav__account .btn { margin-top: 4px; }
}

/* ---- Buttons & badges ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  color: #17130a;
  background: linear-gradient(180deg, #e3a52c, #c4870f);
  transition: filter .15s var(--ease), transform .05s var(--ease), box-shadow .15s var(--ease);
}
/* brightness(1.06) on a gold gradient is below the threshold of noticing; the
   glow is what actually reads as "this is clickable". */
.btn:hover { filter: brightness(1.12); color: #17130a; box-shadow: 0 4px 14px rgba(242,177,52,.28); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg-elev-2); color: var(--text); filter: none; }
.btn--secondary { background: linear-gradient(180deg, var(--secondary), var(--secondary-600)); color: #052622; }
.btn--block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--bg-elev-2); color: var(--text-dim);
}
.badge--online { color: var(--success); background: rgba(76,175,125,.12); }
.badge--offline { color: var(--danger); background: rgba(239,83,80,.12); }
.badge--unknown { color: var(--text-dim); background: rgba(143,163,187,.12); }

/* ---- Cards / panels ------------------------------------------------------ */
.card, .news-content-full {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow);
}
/* Home/inner content column is a bare container - its sections carry their own
   cards, so the ambient background shows through around them. */
.news-content { background: none; border: none; box-shadow: none; padding: 0; }
.card + .card,
.news-content-full + .news-content-full { margin-top: var(--gap); }

.section-title {
  font-size: clamp(20px, 3vw, 26px);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.section-title--accent { border-color: var(--primary); }

/* ---- Content typography (inner pages / guides) ---------------------------
   .news-content and .news-content-full are the wrappers Layout.ejs puts around
   the whole page body, so these prose rules used to reach every heading,
   paragraph and list in every component on every page - 22 of 22 headings on
   the home page, 17 of 17 on /Stats, not one of them prose. They also outrank
   a component's own rule: .news-content-full h3 is (0,1,1) and beats a plain
   .feature__title at (0,1,0), so a component could not style its own heading
   without a second class to win the cascade (#91).

   `:where(:not([class]))` says what was always meant: an element that styles
   itself is a component, an element with no class of its own is prose. It has
   to be :where(), not a bare :not() - :not() carries specificity, which would
   push these to (0,2,1) and start overriding container rules that legitimately
   won before. Measured: a bare <p> on /About moved 12px -> 16px that way.
   Inside :where() it contributes nothing, so each selector keeps the (0,1,1)
   it already had.

   Verified across 10 pages by diffing every computed margin, colour, padding
   and list-style: the guides and the news article - the actual prose - do not
   move at all, and what changes is components getting their own declarations
   back, such as .stat-chart__sub returning to --text-mut and its own 18px. */
.news-content h1:where(:not([class])), .news-content h2:where(:not([class])), .news-content h3:where(:not([class])),
.news-content-full h1:where(:not([class])), .news-content-full h2:where(:not([class])), .news-content-full h3:where(:not([class])) { margin: 1.2em 0 .5em; }
.news-content p:where(:not([class])), .news-content-full p:where(:not([class])) { margin: 0 0 1em; color: var(--text-dim); }
.news-content img:where(:not([class])), .news-content-full img:where(:not([class])) { border-radius: var(--radius-sm); }
.news-content ul:where(:not([class])), .news-content-full ul:where(:not([class])) { padding-left: 1.2em; list-style: disc; margin: 0 0 1em; }
.news-content ul:where(:not([class])) li, .news-content-full ul:where(:not([class])) li { color: var(--text-dim); }

/* ---- Tables (rankings) --------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.data, .news-content table, .news-content-full table {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
table.data th, .news-content table th, .news-content-full table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-elev-2);
  color: var(--text-dim);
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
}
table.data td, .news-content table td, .news-content-full table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
table.data tbody tr:hover, .news-content table tbody tr:hover { background: var(--bg-elev-2); }

/* ---- Forms --------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
input[type=text], input[type=email], input[type=password], input[type=number],
select, textarea, .textInput {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus, .textInput:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
input::placeholder { color: var(--text-mut); }

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar { display: flex; flex-direction: column; gap: var(--gap); }
@media (min-width: 901px) { .sidebar { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; } }
.sidebar .card { padding: 18px; }
.sidebar-widget h3 { font-size: 16px; margin-bottom: 12px; }

/* Login box in sidebar */
.login-box .btn { margin-top: 6px; }
#serverStatus, .server-status { display: flex; flex-direction: column; gap: 8px; }

/* ---- Hero / banner slider ------------------------------------------------ */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: var(--gap);
}
.slider { position: relative; }
.slider__track { display: flex; transition: transform .5s var(--ease); }
.slider__slide { min-width: 100%; }
.slider__slide img { width: 100%; height: auto; object-fit: cover; }
.slider__dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 8px; z-index: 3;
}
.slider__dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.4); border: 0; padding: 0;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.slider__dot.is-active { background: var(--primary); transform: scale(1.25); }
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; z-index: 3;
  display: grid; place-items: center;
  background: rgba(13,17,23,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.15); border-radius: 999px;
  backdrop-filter: blur(4px);
}
.slider__arrow:hover { background: rgba(13,17,23,.8); color: var(--primary); }
.slider__arrow--prev { left: 12px; }
.slider__arrow--next { right: 12px; }
@media (max-width: 600px) { .slider__arrow { display: none; } }

/* ---- Shop grid ----------------------------------------------------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.shop-item {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.shop-item:hover { transform: translateY(-3px); border-color: var(--primary); }

/* ---- Footer -------------------------------------------------------------- */
.footer, .site-footer {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  margin-top: 48px;
}
.footer__grid, .footerLinksContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 40px clamp(16px, 4vw, 32px) 24px;
}
.footerLinks h3, .footer__col h3 {
  font-size: 15px; margin-bottom: 14px; color: var(--text);
  text-transform: uppercase; letter-spacing: .5px;
}
.footerLinks ul li, .footer__col ul li { margin-bottom: 8px; }
.footerLinks a, .footer__col a { color: var(--text-dim); font-size: 14px; }
.footerLinks a:hover, .footer__col a:hover { color: var(--primary); }
.footerLinks span p { color: var(--text-dim); font-size: 14px; margin-bottom: 6px; }
.copyright {
  text-align: center;
  padding: 18px;
  color: var(--text-mut);
  font-size: 13px;
  border-top: 1px solid var(--border-soft);
}

/* ---- Popups (modernized, still driven by existing markup) ---------------- */
.p_body { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 200; }
.popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 201; width: min(92vw, 420px);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 28px; text-align: center;
}
.popup h3 { margin-bottom: 16px; }
.popup a.close, .popup a.close_vote { display: inline-block; margin-top: 16px; color: var(--text-mut); font-size: 14px; }

/* ---- Home hero ----------------------------------------------------------- */
.home-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--gap);
  padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px);
  background:
    linear-gradient(115deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.72) 45%, rgba(29,36,48,.55) 100%),
    url("/images/bg.webp") center/cover no-repeat,
    var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.home-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 240px at 15% 10%, rgba(242,177,52,.16), transparent 70%);
  pointer-events: none;
}
.home-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.home-hero__title {
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.05; letter-spacing: -.5px; margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.home-hero__accent { color: var(--primary); }
.hero-hex { width: .62em; height: .7em; margin: 0 .05em; transform: translateY(.02em); }
.home-hero__tagline { color: var(--text-dim); font-size: clamp(15px, 2.2vw, 18px); margin-bottom: 18px; max-width: 52ch; }
.home-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
}
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero__actions .btn { padding: 12px 22px; }

/* ---- News cards (home) --------------------------------------------------- */
.news-wrapper { display: flex; flex-direction: column; gap: var(--gap); }
/* Compact horizontal card: sharp fixed-width image left, text right (full width) */
.news-card { display: grid; grid-template-columns: 160px 1fr; gap: 0; padding: 0; overflow: hidden; position: relative; color: inherit; text-decoration: none; }
.news-card__thumb { position: relative; display: block; overflow: hidden; }
/* Absolutely fill the cell so the image never drives the row height (text does).
   object-position is top, not centre: a news row is much taller than the 4:3
   artwork, so cover crops hard, and centring cuts the subject's head off -
   whoever is in the picture is near the top of it. */
.news-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 0; display: block; transition: transform .3s var(--ease); }
.news-card:hover .news-card__thumb img { transform: scale(1.05); }
.news-card__body { padding: 15px 20px 18px; min-width: 0; position: relative; z-index: 1; }
/* The title and date sit in the card's frame rather than floating in the body:
   negative margins cancel .news-card__body's padding so the band reaches the
   card edges, and overflow:hidden on the card clips it to the rounded corners.
   padding-right reserves the corner for .news-card__go. */
.news-card__head {
  display: flex; align-items: baseline; gap: 10px;
  margin: -15px -20px 12px;
  padding: 11px 20px 10px 20px;
  padding-right: 58px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border-bottom: 1px solid var(--border);
}
.news-card__head .news-card__meta { margin-left: auto; }
/* .news-content-full wraps every page body, and its prose rule
   (.news-content-full h3 { margin: 1.2em 0 .5em }) was putting 22.8px above
   every card title - 39px of space over the title against 19px under the last
   line. Two classes outrank it. The leak itself is core-ms/fiesta-web#91. */
.news-card .news-card__title { margin: 0; }

/* The headline's [EVENT] / [PATCH] prefix, lifted out of the text as a pill.
   Colour carries the category so the eye can sort a list of posts without
   reading any of them.

   Measured against the worst background a badge can sit on - the brightest
   capped banner backdrop under the card scrim and the head band, rgb(18,22,28)
   - every colour here clears 4.5:1 by a wide margin: teal 7.4, gold 7.6,
   violet 5.7, blue 6.7, and the fallback 6.5. 11px bold is not "large text",
   so 4.5 is the bar, not 3.

   A tag with no rule of its own falls back to the base pill rather than
   vanishing, so a new prefix is dull rather than broken. 20 of the 60 posts
   carry no prefix at all and simply get no badge. */
.news-tag {
  display: inline-block; vertical-align: 2px;
  margin-right: 2px; padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--text-dim); background: rgba(159,176,195,.13);
}
.news-tag--event   { color: var(--secondary); background: rgba(53,208,192,.13); }
.news-tag--patch   { color: var(--primary);   background: rgba(242,177,52,.13); }
.news-tag--hotfix  { color: var(--danger);    background: rgba(239,83,80,.13); }
.news-tag--dungeon { color: #b98cf0;          background: rgba(185,140,240,.13); }
.news-tag--update  { color: #6fb7f5;          background: rgba(111,183,245,.13); }
.news-post__title .news-tag { font-size: 13px; vertical-align: 4px; }
.news-card__title { font-size: 19px; margin: 0; color: var(--text); transition: color .2s var(--ease); }
.news-card:hover .news-card__title { color: var(--primary); }
.news-card__meta { color: var(--text-mut); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.news-card__excerpt { color: var(--text-dim); margin: 0; font-size: 14.5px; line-height: 1.65; }
/* The affordance is the corner itself, not a glyph parked at the end of a row:
   a folded page corner that turns gold as the card lights up. The card is
   position:relative and overflow:hidden, so the wedge clips to its radius. */
.news-card__go {
  position: absolute; top: 0; right: 0; z-index: 4;
  width: 54px; height: 54px;
  padding: 7px 9px 0 0;
  font-size: 15px; line-height: 1; text-align: right;
  color: var(--primary);
  background: linear-gradient(225deg, rgba(242,177,52,.18) 0 50%, transparent 50%);
  transition: background .2s var(--ease), color .2s var(--ease), padding .2s var(--ease);
}

/* The post's own artwork, bottom-right at its native size - the card's
   overflow:hidden is what trims it to the rounded corner. Masked away towards the
   top and the left so it reads as part of the card rather than a pasted-on
   thumbnail, and kept under the text. */
.news-card__art { position: absolute; right: 0; bottom: 0; z-index: 0; display: block;
  width: auto; height: auto; max-width: none; pointer-events: none; opacity: .85;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 92%), linear-gradient(to left, #000 35%, transparent 92%);
  mask-image: linear-gradient(to top, #000 35%, transparent 92%), linear-gradient(to left, #000 35%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Narrow cards: the text would run over the artwork, so let it go. */
@media (max-width: 560px) { .news-card__art { display: none; } }
.news-card:hover .news-card__go {
  background: linear-gradient(225deg, var(--primary) 0 50%, transparent 50%);
  color: #10141b;
  padding: 6px 7px 0 0;
}
.news-card--noimg { grid-template-columns: 1fr; }

/* ---- Archive rows: the post's own banner, blurred, as the card's backdrop --
   The backdrop is pre-blurred at 160px by tools/prep_news_images.py and scaled
   up here, so the banners' baked-in headlines are gone and no filter runs per
   paint. It is also brightness-capped there: one banner blurs to pure white,
   and left alone it would have forced a scrim heavy enough to hide all forty.

   The scrim runs left to right rather than covering the whole card, because
   that is where the text is. Over the copy it stays at or above .80; the
   worst-capped backdrop needs .72 to hold --text-dim at 4.5:1, so there is
   margin. Past the text it drops away and the banner reads.

   That only works if the copy cannot wander into the light half, hence the
   measure on the excerpt - which is better typography anyway.

   Both layers live on the card's own background-image rather than on
   ::before/::after. Every seasonal theme below already owns both pseudo
   elements - .news-card--winter::before is its tint and ::after its snowfall -
   and an element has only one of each. The theme block sits later in this file
   at equal specificity, so a backdrop put on the pseudos loses to it and the
   card renders washed out. Background layers collide with nothing. */
.news-card--banner {
  background-image:
    linear-gradient(90deg,
      rgba(13,17,23,.93) 0%,
      rgba(13,17,23,.88) 48%,
      rgba(13,17,23,.80) 66%,
      rgba(13,17,23,.42) 84%,
      rgba(13,17,23,.26) 100%),
    var(--news-banner);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* The sharp half. A real element rather than a third background layer, because
   background layers cannot be masked individually and both pseudo-elements on
   this card already belong to the seasonal themes. Masked so the banner emerges
   from the blur rather than meeting it at a seam, and sitting under the body
   text, which carries its own z-index. */
/* This layer must cover the WHOLE card and reveal itself through the mask, not
   occupy the right half. The two are not equivalent, and the difference was a
   visible defect on 41 of the 54 banners.

   A banner that may not be shown sharp gets a copy of its own blurred backdrop
   here, so that the card always layers the same file and the reveal simply has
   nothing to reveal. That only holds if the copy lands pixel-for-pixel on the
   backdrop beneath it. As a 54%-wide box it did not: `cover` resolved against
   a different width, so the same image came out at a different scale and crop
   than the full-card backdrop, and every such card wore a hard vertical seam
   at 46% with a brighter, differently-zoomed smear of itself beside it.

   Sharing the card's geometry makes the flat copy genuinely invisible, and it
   also stops a real banner from being zoomed differently to the blur it
   emerges from. The mask does all the work now: transparent over the copy,
   opaque past 72%. */
.news-card__sharp {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; border-radius: inherit;
  background-image: var(--news-sharp);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 82%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 82%);
}
/* Narrow cards give the copy the full width, so there is no free half to
   reveal anything in. */
/* A thumbnail is 160x127 and the reveal zone is a wide strip, so `cover`
   scales it up by more than three and crops to a fragment - a face or a
   letter, blown up past the point of being a picture. These sit at their own
   aspect on the right instead, which is what the thumbnail was drawn for. */
.news-card--thumb .news-card__sharp {
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}
@media (max-width: 720px) { .news-card__sharp { display: none; } }

/* Keeps the copy out of the light half. A percentage, not a ch measure: it has
   to line up with the scrim above, which is also proportional, and the two
   drifting apart is what puts text over the bright end. 62ch looked right in
   the abstract and cut straight through the 75th-percentile bullet line at 86
   characters, wrapping it with half a card of empty space alongside. */
.news-card--banner .news-card__excerpt { max-width: 62%; }
/* The band has to be its own scrim, not a decoration on top of one. Under the
   left of the band sits the card's .93 backdrop scrim; under the right sits
   .news-card__sharp, which paints the unscrimmed banner edge to edge. So the
   gradient runs the other way to the one below it and the two compose to a
   roughly even bar: light where the card is already dark, carrying the full
   load where nothing else does.

   .90 at the right end is not a taste call. The date sits at exactly that
   point (margin-left:auto), so it is the one place on the card with nothing
   between it and the banner. Measured over all 60 posts, six archive pages,
   the `transparent` end this replaces ran 1.01-1.38:1 - the band faded out
   precisely where the only text on that side of the card was, and on the
   palest banners the date was not so much dim as gone. .90 puts the worst
   card at 5.25:1. .86 also passed, but left one card at 4.79, and a single
   pale banner added later would have taken it under.

   --text-mut cannot be rescued here at any opacity a banner survives - it is
   still under 4.5 at .92 - so the date on a banner card goes one step up the
   ramp. Cards without a banner keep --text-mut and their quieter hierarchy. */
.news-card--banner .news-card__head {
  background: linear-gradient(90deg,
    rgba(13,17,23,.55) 0%,
    rgba(13,17,23,.66) 40%,
    rgba(13,17,23,.90) 100%);
}
.news-card--banner .news-card__meta { color: var(--text-dim); }
@media (max-width: 720px) {
  /* Narrow cards give the text the full width, so the light half would sit
     under it. Flatten the scrim instead of letting the banner through. */
  .news-card--banner {
    background-image:
      linear-gradient(90deg, rgba(13,17,23,.93), rgba(13,17,23,.86)),
      var(--news-banner);
  }
  .news-card--banner .news-card__excerpt { max-width: none; }
}
/* Whole-card click via a stretched overlay link, so real links inside the
   article body (which would be invalid nested anchors) stay clickable. */
.news-card__stretch { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.news-card__excerpt a { position: relative; z-index: 3; color: var(--secondary); }
.news-card__excerpt a:hover { color: var(--primary); }
.news-more { margin-top: 18px; text-align: center; }

/* ---- Per-news seasonal / category themes --------------------------------
   Each themed news card gets a subtle backdrop tint (::before) and/or a moving
   particle layer (::after) behind the text. Kept low-opacity for legibility.
   Theme is derived server-side (NewsItem.Theme) from title/body/post month. */
.news-card--winter .news-card__body,
.news-card--halloween .news-card__body,
.news-card--patch .news-card__body,
.news-card--spring .news-card__body,
.news-card--summer .news-card__body,
.news-card--event .news-card__body,
.news-card--valentine .news-card__body,
.news-card--patrick .news-card__body,
.news-card--easter .news-card__body,
.news-card--anniversary .news-card__body,
.news-card--xmas .news-card__body { position: relative; z-index: 1; }

/* Winter - soft blue glow (static, full-card) + falling snow dots (tiled/animated).
   Glow and dots MUST live on separate pseudo-elements: putting background-size on
   the glow layer tiles it into visible rectangles. */
.news-card--winter::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 100% 0, rgba(90,160,255,.10), transparent 55%);
}
.news-card--winter::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .42;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='200'%20viewBox='0%200%20220%20200'%3E%3Cg%20transform='translate%2826%2034%29%20rotate%2815%29%20scale%280.6875%29%20translate%28-8%20-8%29'%20opacity='0.95'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5M8%203.2%206.4%204.8M8%203.2%209.6%204.8M8%2012.8%206.4%2011.2M8%2012.8%209.6%2011.2M3.8%205.5%203.6%207.7M3.8%205.5%205.9%205.0M12.2%2010.5%2012.4%208.3M12.2%2010.5%2010.1%2011.0M12.2%205.5%2012.4%207.7M12.2%205.5%2010.1%205.0M3.8%2010.5%203.6%208.3M3.8%2010.5%205.9%2011.0'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%28150%2022%29%20rotate%2840%29%20scale%280.5625%29%20translate%28-8%20-8%29'%20opacity='0.8'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5M8%203.2%206.4%204.8M8%203.2%209.6%204.8M8%2012.8%206.4%2011.2M8%2012.8%209.6%2011.2M3.8%205.5%203.6%207.7M3.8%205.5%205.9%205.0M12.2%2010.5%2012.4%208.3M12.2%2010.5%2010.1%2011.0M12.2%205.5%2012.4%207.7M12.2%205.5%2010.1%205.0M3.8%2010.5%203.6%208.3M3.8%2010.5%205.9%2011.0'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%2888%2096%29%20rotate%285%29%20scale%280.75%29%20translate%28-8%20-8%29'%20opacity='1'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5M8%203.2%206.4%204.8M8%203.2%209.6%204.8M8%2012.8%206.4%2011.2M8%2012.8%209.6%2011.2M3.8%205.5%203.6%207.7M3.8%205.5%205.9%205.0M12.2%2010.5%2012.4%208.3M12.2%2010.5%2010.1%2011.0M12.2%205.5%2012.4%207.7M12.2%205.5%2010.1%205.0M3.8%2010.5%203.6%208.3M3.8%2010.5%205.9%2011.0'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%28196%20118%29%20rotate%2825%29%20scale%280.5625%29%20translate%28-8%20-8%29'%20opacity='0.75'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5M8%203.2%206.4%204.8M8%203.2%209.6%204.8M8%2012.8%206.4%2011.2M8%2012.8%209.6%2011.2M3.8%205.5%203.6%207.7M3.8%205.5%205.9%205.0M12.2%2010.5%2012.4%208.3M12.2%2010.5%2010.1%2011.0M12.2%205.5%2012.4%207.7M12.2%205.5%2010.1%205.0M3.8%2010.5%203.6%208.3M3.8%2010.5%205.9%2011.0'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%2854%20152%29%20rotate%2850%29%20scale%280.625%29%20translate%28-8%20-8%29'%20opacity='0.85'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5M8%203.2%206.4%204.8M8%203.2%209.6%204.8M8%2012.8%206.4%2011.2M8%2012.8%209.6%2011.2M3.8%205.5%203.6%207.7M3.8%205.5%205.9%205.0M12.2%2010.5%2012.4%208.3M12.2%2010.5%2010.1%2011.0M12.2%205.5%2012.4%207.7M12.2%205.5%2010.1%205.0M3.8%2010.5%203.6%208.3M3.8%2010.5%205.9%2011.0'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%28168%20176%29%20rotate%2810%29%20scale%280.5%29%20translate%28-8%20-8%29'%20opacity='0.7'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5M8%203.2%206.4%204.8M8%203.2%209.6%204.8M8%2012.8%206.4%2011.2M8%2012.8%209.6%2011.2M3.8%205.5%203.6%207.7M3.8%205.5%205.9%205.0M12.2%2010.5%2012.4%208.3M12.2%2010.5%2010.1%2011.0M12.2%205.5%2012.4%207.7M12.2%205.5%2010.1%205.0M3.8%2010.5%203.6%208.3M3.8%2010.5%205.9%2011.0'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='130'%20height='120'%20viewBox='0%200%20130%20120'%3E%3Cg%20transform='translate%2818%2020%29%20rotate%2820%29%20scale%280.375%29%20translate%28-8%20-8%29'%20opacity='0.7'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%2874%2046%29%20rotate%2845%29%20scale%280.3125%29%20translate%28-8%20-8%29'%20opacity='0.6'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%28112%2014%29%20rotate%280%29%20scale%280.3125%29%20translate%28-8%20-8%29'%20opacity='0.65'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%2840%2092%29%20rotate%2830%29%20scale%280.375%29%20translate%28-8%20-8%29'%20opacity='0.6'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate%2898%20104%29%20rotate%2855%29%20scale%280.3125%29%20translate%28-8%20-8%29'%20opacity='0.55'%3E%3Cpath%20d='M8%201V15M2.1%204.5L13.9%2011.5M13.9%204.5L2.1%2011.5'%20fill='none'%20stroke='%23fff'%20stroke-width='1.35'%20stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 200px, 130px 120px; background-repeat: repeat;
  animation: snowfall 16s linear infinite;
}
/* Each layer travels exactly one tile height per cycle, so the loop is seamless; the
   two different tile sizes then fall at different speeds and read as depth. */
@keyframes snowfall {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 200px, 0 120px; }
}

/* Halloween - purple/orange dusk glow + drifting embers rising */
.news-card--halloween::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(130% 90% at 100% 0, rgba(255,120,20,.12), transparent 55%),
    radial-gradient(120% 100% at 0 100%, rgba(150,60,220,.14), transparent 60%);
}
.news-card--halloween::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .5;
  background-image:
    radial-gradient(2px 2px at 15% 30%, #ff8c1a, transparent),
    radial-gradient(1.5px 1.5px at 42% 72%, #ff6a00, transparent),
    radial-gradient(2px 2px at 70% 45%, #c060ff, transparent),
    radial-gradient(1.5px 1.5px at 88% 22%, #ff8c1a, transparent),
    radial-gradient(2px 2px at 60% 88%, #ff6a00, transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: embers 12s linear infinite;
}
@keyframes embers { from { background-position: 0 240px; } to { background-position: 24px 0; } }

/* Patch / hotfix - cool teal tech grid */
.news-card--patch::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .6;
  background:
    linear-gradient(90deg, rgba(53,208,192,.10), transparent 42%),
    repeating-linear-gradient(90deg, rgba(53,208,192,.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(53,208,192,.045) 0 1px, transparent 1px 24px);
}

/* Spring - soft green glow + drifting pink petals */
.news-card--spring::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 0 0, rgba(120,210,120,.10), transparent 55%);
}
.news-card--spring::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .4;
  background-image:
    radial-gradient(2.5px 2.5px at 18% 25%, #ffb7d5, transparent),
    radial-gradient(2px 2px at 46% 65%, #ff9ec7, transparent),
    radial-gradient(2.5px 2.5px at 74% 40%, #ffc8e0, transparent),
    radial-gradient(2px 2px at 90% 78%, #ffb7d5, transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: snowfall 12s linear infinite;
}

/* Summer - warm sunlit glow */
.news-card--summer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 100% at 100% 0, rgba(255,196,60,.14), transparent 58%),
    radial-gradient(120% 100% at 0 100%, rgba(53,208,192,.08), transparent 60%);
}

/* Generic event - festive gold confetti */
.news-card--event::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .4;
  background-image:
    radial-gradient(2.5px 2.5px at 16% 28%, var(--primary), transparent),
    radial-gradient(2px 2px at 44% 68%, var(--secondary), transparent),
    radial-gradient(2.5px 2.5px at 72% 42%, var(--primary), transparent),
    radial-gradient(2px 2px at 90% 20%, var(--secondary), transparent),
    radial-gradient(2px 2px at 58% 85%, var(--primary), transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: snowfall 13s linear infinite;
}

/* Valentine - warm pink glow + rising hearts */
.news-card--valentine::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 100% 100%, rgba(255,90,140,.14), transparent 60%),
              radial-gradient(120% 90% at 0 0, rgba(255,150,190,.08), transparent 55%);
}
.news-card--valentine::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .5;
  background-image:
    radial-gradient(3px 3px at 18% 30%, #ff5a8c, transparent),
    radial-gradient(2px 2px at 44% 70%, #ff8fb4, transparent),
    radial-gradient(3px 3px at 72% 45%, #ff6a9c, transparent),
    radial-gradient(2px 2px at 90% 20%, #ffa7c6, transparent),
    radial-gradient(2.5px 2.5px at 60% 88%, #ff5a8c, transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: embers 12s linear infinite;
}

/* St Patrick's / Pot of Gold - green glow + falling gold coins */
.news-card--patrick::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 0 0, rgba(70,190,90,.12), transparent 55%),
              radial-gradient(120% 90% at 100% 100%, rgba(242,177,52,.08), transparent 60%);
}
.news-card--patrick::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .45;
  background-image:
    radial-gradient(2.5px 2.5px at 16% 28%, #f2b134, transparent),
    radial-gradient(2px 2px at 46% 66%, #5bd06a, transparent),
    radial-gradient(2.5px 2.5px at 72% 42%, #f2c65a, transparent),
    radial-gradient(2px 2px at 90% 22%, #4bbf5c, transparent),
    radial-gradient(2px 2px at 58% 86%, #f2b134, transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: snowfall 11s linear infinite;
}

/* Easter - soft pastel glow + drifting pastel eggs */
.news-card--easter::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 50% 0, rgba(200,170,255,.10), transparent 58%);
}
.news-card--easter::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .45;
  background-image:
    radial-gradient(3px 3px at 18% 26%, #ffb7d5, transparent),
    radial-gradient(2.5px 2.5px at 42% 66%, #aee9ff, transparent),
    radial-gradient(3px 3px at 70% 40%, #fff1a6, transparent),
    radial-gradient(2.5px 2.5px at 88% 20%, #c3f7c0, transparent),
    radial-gradient(2.5px 2.5px at 58% 84%, #d8b7ff, transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: snowfall 12s linear infinite;
}

/* Anniversary - rich gold glow + gold & white confetti */
.news-card--anniversary::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 50% 0, rgba(242,177,52,.14), transparent 58%),
              radial-gradient(120% 90% at 100% 100%, rgba(255,255,255,.06), transparent 60%);
}
.news-card--anniversary::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .5;
  background-image:
    radial-gradient(3px 3px at 16% 28%, #f2b134, transparent),
    radial-gradient(2px 2px at 44% 68%, #fff, transparent),
    radial-gradient(3px 3px at 72% 42%, #f2c65a, transparent),
    radial-gradient(2px 2px at 90% 20%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 58% 85%, #f2b134, transparent);
  background-size: 300px 240px; background-repeat: repeat;
  animation: snowfall 13s linear infinite;
}

/* Christmas - warm glow + red/green/gold twinkling lights */
.news-card--xmas::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 100% 0, rgba(239,83,80,.10), transparent 55%),
              radial-gradient(120% 90% at 0 100%, rgba(76,175,125,.10), transparent 60%);
}
.news-card--xmas::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .5;
  background-image:
    radial-gradient(2.5px 2.5px at 16% 28%, #ef5350, transparent),
    radial-gradient(2.5px 2.5px at 44% 66%, #4caf7d, transparent),
    radial-gradient(2.5px 2.5px at 72% 42%, #f2b134, transparent),
    radial-gradient(2.5px 2.5px at 90% 22%, #ef5350, transparent),
    radial-gradient(2.5px 2.5px at 58% 86%, #fff, transparent);
  background-size: 260px 220px; background-repeat: repeat;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: .18; } }

@media (prefers-reduced-motion: reduce) {
  .news-card--winter::before, .news-card--winter::after,
  .news-card--halloween::after, .news-card--spring::after,
  .news-card--event::after, .news-card--valentine::after,
  .news-card--patrick::after, .news-card--easter::after,
  .news-card--anniversary::after, .news-card--xmas::after { animation: none; }
}

/* ---- Home landing sections ---------------------------------------------- */
.section-heading { font-family: var(--font-head); font-size: 20px; margin: 28px 0 14px; }
.news-wrapper > .intro { margin-bottom: 4px; }

.intro { position: relative; overflow: hidden; padding: 20px 28px 22px; }
.intro > * { position: relative; z-index: 1; }
.intro::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg-elev) 28%, rgba(22,27,36,.72) 52%, rgba(22,27,36,.12) 100%),
    url("/images/intro-art.webp") right center / cover no-repeat;
}
@media (max-width: 680px) {
  .intro::before { background:
    linear-gradient(180deg, var(--bg-elev) 55%, rgba(22,27,36,.55) 100%),
    url("/images/intro-art.webp") center / cover no-repeat; }
}
.intro__title { font-family: var(--font-head); font-size: clamp(23px, 3.6vw, 30px); margin: 0 0 8px; line-height: 1.2; }
.intro__brand { color: var(--primary); }
.intro__lead { color: var(--text-dim); max-width: 62ch; margin: 0 0 14px; line-height: 1.6; }
.intro__stats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.intro__stats li { display: flex; flex-direction: column; gap: 2px; background: rgba(29,36,48,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: 8px 16px; }
.intro__stats strong { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.intro__stats span { color: var(--text-mut); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.intro__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Stats on the left, actions on the right, one row: the buttons no longer cost the
   card a band of its own, which is what left the dead space under them. They wrap
   below the stats once there is no room, keeping reading order on narrow screens. */
.intro__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.intro__footer .intro__actions { margin-left: auto; }
@media (max-width: 720px) { .intro__footer .intro__actions { margin-left: 0; } }

.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.steps__grid .card + .card { margin-top: 0; }
.step { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 16px 20px 16px; color: inherit; text-decoration: none; transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.step::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), transparent 70%); opacity: .8; }
.step:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 12px 30px rgba(242,177,52,.10); }
.step__ghost { position: absolute; right: 10px; bottom: -24px; font-family: var(--font-head); font-weight: 800; font-size: 120px; line-height: 1; color: var(--primary); opacity: .07; pointer-events: none; user-select: none; }
.step:hover .step__ghost { opacity: .13; }
.step__title { position: relative; font-size: 16px; margin: 0 0 6px; }
.step__text { position: relative; color: var(--text-dim); font-size: 14px; margin: 0 0 12px; line-height: 1.6; }
.step__go { position: relative; margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 13px; color: var(--text-mut); transition: color .15s var(--ease), transform .15s var(--ease); }
.step:hover .step__go { color: var(--primary); transform: translateX(3px); }
@media (max-width: 680px) { .steps__grid { grid-template-columns: 1fr; } }

/* ---- Get into the game (onboarding rail + active panel) ----------------- */
/* Same glass as the closing CTA band - the gradient starts at 13% opacity, so the
   page artwork shows through that corner and the panel turns solid further in.
   Mirrored though: 315deg puts the open corner at the bottom right, running up to
   the left, so the two bands on the page lean away from each other instead of
   repeating the same diagonal. */
.onboarding__grid { display: grid; grid-template-columns: 280px 1fr; overflow: hidden; border: 1px solid rgba(242,177,52,.25); border-radius: var(--radius-lg); background: linear-gradient(315deg, rgba(242,177,52,.13), var(--bg-elev) 58%); }
.onboarding__rail { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid var(--border); }
.onb-step { display: flex; gap: 12px; text-align: left; padding: 12px; border: 0; border-radius: var(--radius-sm); background: transparent; transition: background .15s var(--ease); }
.onb-step:hover { background: var(--bg-elev-2); }
.onb-step.is-active { background: var(--primary-050); }
.onb-step__num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--surface); color: var(--text-mut); }
.onb-step.is-active .onb-step__num { background: linear-gradient(180deg, #e3a52c, #c4870f); color: #17130a; }
.onb-step.is-done .onb-step__num { background: var(--primary-050); color: var(--primary); font-size: 0; }
.onb-step.is-done .onb-step__num::after { content: "\2713"; font-size: 15px; }
.onb-step__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onb-step__title { font-weight: 700; font-size: 14px; color: var(--text-mut); }
.onb-step.is-active .onb-step__title { color: var(--text); }
.onb-step__desc { font-size: 12.5px; color: var(--text-mut); line-height: 1.5; }
.onboarding__stage { min-width: 0; display: grid; }
/* Panels stacked in one grid cell so the stage keeps the tallest step's height
   and auto-advance never makes it jump. */
.onb-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 180px; gap: 20px; align-items: center; padding: 24px; visibility: hidden; }
.onb-panel.is-active { visibility: visible; }
.onb-panel__step { color: var(--primary); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin: 0; }
.onb-panel__title { font-family: var(--font-head); font-size: 20px; margin: 4px 0 0; }
.onb-panel__desc { color: var(--text-dim); margin: 8px 0 0; line-height: 1.6; max-width: 42ch; }
.onb-panel__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.onb-panel__next { background: none; border: 0; color: var(--text-mut); font-weight: 700; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  /* The text is 23px tall; the padding is what makes it a 40px touch target. */
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; margin: 0 -10px; }
.onb-panel__next:hover { color: var(--text); }
.onb-panel__img { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.05), transparent 60%), var(--bg-elev-2); }
.onb-panel__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 820px) {
  .onboarding__grid { grid-template-columns: 1fr; }
  .onboarding__rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .onb-step__desc { display: none; }
  .onb-panel { grid-template-columns: 1fr; }
  .onb-panel__img { max-width: 200px; order: -1; }
}

/* ---- Section head (heading + right-side link) --------------------------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 28px 0 14px; }
.section-head .section-heading { margin: 0; }
.section-head__link { font-size: 13px; font-weight: 700; color: var(--text-mut); white-space: nowrap; }
.section-head__link:hover { color: var(--primary); }

/* ---- Choose your class -------------------------------------------------- */
.classes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.classes__grid .card + .card { margin-top: 0; }
.class-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: inherit; text-decoration: none; transition: transform .15s var(--ease), border-color .15s var(--ease); }
.class-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.class-card__art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.05), transparent 60%), var(--bg-elev-2); }
.class-card__art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .4s var(--ease); }
.class-card:hover .class-card__art img { transform: scale(1.04); }
.class-card__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 68%, var(--bg-elev)); }
.class-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 16px; }
.class-card__tag { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--primary); font-weight: 700; }
.class-card__name { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); }
.class-card__desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* ---- Screenshots gallery ------------------------------------------------ */
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* ---- Videos (top YouTube) ----------------------------------------------- */
.video-item { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; }
.video-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.video-item:hover img { transform: scale(1.06); }
.video-item__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 17px; padding-left: 3px; transition: background .15s var(--ease), color .15s var(--ease); }
.video-item:hover .video-item__play { background: var(--primary); color: #17130a; }
.video-item__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* ---- FAQ page ----------------------------------------------------------- */
.faq { max-width: 820px; }
.faq__title { font-family: var(--font-head); font-size: clamp(24px, 4vw, 32px); margin: 4px 0 10px; }
.faq__intro { color: var(--text-dim); margin: 0 0 24px; line-height: 1.7; }
.faq-group { margin-bottom: 26px; }
.faq-group__title { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; color: var(--primary); margin: 0 0 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--bg-elev); overflow: hidden; }
.faq-item > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--primary); font-size: 22px; line-height: 1; flex-shrink: 0; }
.faq-item[open] > summary::after { content: "\2013"; }
.faq-item[open] > summary { color: var(--primary); }
.faq-item__body { padding: 2px 18px 16px; color: var(--text-dim); line-height: 1.75; }
.faq-item__body ul { list-style: disc; padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.faq-item__body a { color: var(--secondary); }
.faq-item__body code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

/* ---- Guide article content --------------------------------------------- */
.guide { max-width: 860px; }
.guide__lead { color: var(--text-dim); font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.guide h2 { font-size: 20px; margin: 26px 0 10px; }
.guide h3 { font-size: 16px; margin: 20px 0 8px; color: var(--primary); }
.guide p { color: var(--text-dim); line-height: 1.7; margin: 0 0 12px; }
.guide ul, .guide ol { color: var(--text-dim); line-height: 1.7; padding-left: 22px; margin: 0 0 14px; list-style: revert; }
.guide li { margin-bottom: 5px; }
.guide strong { color: var(--text); }
/* Screenshots inside a guide. They are sized for the 1078px hub column and
   .guide caps at 860, so the global img rule scales them down - which just
   means a little resolution in hand rather than a stretched picture. */
.guide__shot { margin: 4px 0 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-elev); }
.guide em { color: inherit; font-style: normal; }
.guide table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; display: block; overflow-x: auto; }
.guide th, .guide td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.guide img { max-width: 100%; height: auto; border-radius: var(--radius); }
.guide__note { font-size: 13px; color: var(--text-mut); margin: -8px 0 16px; }
/* Class profile hero render - floated beside the copy, stacks on mobile */
.class-profile__art { float: right; width: 230px; max-width: 42%; margin: 4px 0 14px 22px; border: 1px solid var(--border); border-radius: var(--radius); }
@media (max-width: 640px) { .class-profile__art { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; } }
.guide th { color: var(--text); background: var(--bg-elev-2); font-weight: 700; }
.guide td { color: var(--text-dim); }
.guide__src { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-mut); }
.guide__src a { color: var(--secondary); }

/* ---- About / Why Core Fiesta page --------------------------------------- */
.about-page { max-width: 1000px; margin-inline: auto; }
.about-page .guide { max-width: none; }
.about-hero { position: relative; display: flex; align-items: flex-end; min-height: 250px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(13,17,23,.30), rgba(13,17,23,.55) 45%, rgba(13,17,23,.94)), url("/images/about/hero.webp") center / cover no-repeat; }
.about-hero__inner { padding: 28px 30px; }
.about-hero__title { font-family: var(--font-head); font-size: clamp(28px, 5vw, 40px); margin: 0 0 10px; line-height: 1.1; }
.about-hero__lead { color: var(--text-dim); max-width: 62ch; margin: 0; line-height: 1.7; font-size: 15px; }
.about-hero__lead strong { color: var(--text); }

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 8px; }
.about-grid .card + .card { margin-top: 0; }
.about-card { position: relative; padding: 18px 20px; overflow: hidden; }
.about-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), transparent 70%); }
.about-card__title { font-size: 16px; margin: 2px 0 6px; color: var(--text); }
.about-card__text { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin: 0; }

.about-timeline { list-style: none; padding: 0; margin: 4px 0 16px; }
.about-timeline li { position: relative; padding: 0 0 16px 26px; color: var(--text-dim); line-height: 1.6; border-left: 2px solid var(--border); }
.about-timeline li:last-child { border-left-color: transparent; padding-bottom: 2px; }
.about-timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--bg-elev); }
.about-timeline strong { color: var(--text); margin-right: 6px; }

@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* ---- Why play here ------------------------------------------------------ */
.features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.features__grid .card + .card { margin-top: 0; }
/* Glass panels. Worth doing only now that the ambient scrim lets the artwork
   be seen: these blur and tint what is behind them instead of covering it.
   Extends the idiom .intro__stats li and .class-panel__stats already use
   rather than inventing a second kind of glass.

   .55 is as transparent as the body copy allows. Over the brightest point of
   the ambient background, --text-dim on this panel measures 5.15:1 against a
   4.5:1 floor, and the blur only helps, because it averages the bright pixels
   away instead of leaving one behind the text. */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  overflow: hidden;
  background: rgba(22, 27, 36, .55);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-color: rgba(255, 255, 255, .10);
  transition: transform .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
/* A hairline of light along the top edge, as .step does it - it reads as a
   lit glass edge and stops the panel looking like a flat rectangle. */
.feature::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
}
/* Gold bloom from the top edge, revealed on hover. */
.feature::after {
  content: ""; position: absolute; inset: -1px; z-index: 0; opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(242,177,52,.18), transparent 70%);
  transition: opacity .25s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(242,177,52,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 0 0 1px rgba(242,177,52,.12);
}
.feature:hover::after { opacity: 1; }
/* z-index so the text sits above the bloom, not under it. */
.feature__title, .feature__text { position: relative; z-index: 2; }
/* .news-content-full wraps every page body, so its prose rule
   (.news-content-full h3 { margin: 1.2em 0 .5em }) was landing on these
   headings and adding 19.2px above each one - which is why the panels had
   nearly twice as much room at the top as at the sides. These are not prose;
   the extra class outranks it. See core-ms/fiesta-web#91 for the leak itself. */
.features__grid .feature__title { font-size: 16px; margin: 0 0 8px; }
.feature__text { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* ---- Closing CTA band --------------------------------------------------- */
.cta-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 28px;
  background: linear-gradient(135deg, rgba(242,177,52,.13), var(--bg-elev) 58%); border-color: rgba(242,177,52,.25); }
.cta-band__title { font-size: clamp(20px, 3vw, 24px); margin: 0 0 6px; }
.cta-band__lead { color: var(--text-dim); margin: 0; max-width: 46ch; }
/* The Discord button grew when it gained its mark, which was enough to wrap the
   actions onto their own line. Let the copy shrink instead so they stay on the
   right, and only drop below once the band is genuinely narrow. */
.cta-band__text { flex: 1 1 300px; min-width: 0; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: nowrap; flex: 0 0 auto; }
@media (max-width: 560px) { .cta-band__actions { flex-wrap: wrap; } }

@media (max-width: 900px) { .classes__grid, .gallery__grid, .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features__grid { grid-template-columns: 1fr; } }

/* ---- Interactive class explorer (Classes page overview) ----------------- */
.class-explorer { display: grid; grid-template-columns: 118px 1fr; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); }
.class-explorer__rail { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid var(--border); }
.class-explorer__tab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-mut); opacity: .5; transition: opacity .15s var(--ease); }
.class-explorer__tab:hover { opacity: .85; }
.class-explorer__tab.is-active { opacity: 1; color: var(--text); }
.class-explorer__ico { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border); }
.class-explorer__tab.is-active .class-explorer__ico { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }
.class-explorer__ico img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.class-explorer__tabname { font-size: 12px; font-weight: 700; }

.class-explorer__stage { position: relative; min-width: 0; display: grid; }
/* All panels share one grid cell so the stage reserves the tallest one's height
   and switching classes never changes height (no jump on auto-rotate). */
.class-panel { grid-area: 1 / 1; min-height: 500px; visibility: hidden; }
.class-panel.is-active { position: relative; visibility: visible; background: var(--bg-elev-2) url("/images/class/scene.webp") center / cover no-repeat; }
.class-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,17,23,.96) 26%, rgba(13,17,23,.55) 56%, rgba(13,17,23,.15) 100%),
              linear-gradient(0deg, var(--bg-elev) 3%, transparent 42%); }
.class-panel__art { position: absolute; right: 1%; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: 54%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.class-panel__info { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 500px; max-width: 500px; padding: 24px; }
.class-panel__tag { color: var(--primary); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin: 0; }
.class-panel__name { font-family: var(--font-head); font-size: 28px; margin: 0; }
.class-panel__desc { color: var(--text-dim); margin: 0; line-height: 1.65; max-width: 60ch; }
.class-panel__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; background: rgba(13,17,23,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 14px 16px; max-width: 520px; }
.stat { display: flex; align-items: center; gap: 10px; }
.stat__label { width: 56px; font-size: 12px; color: var(--text-mut); }
.stat__bar { flex: 1; height: 6px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.stat__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-600)); border-radius: 99px; }
.class-panel__weapon { font-size: 13px; color: var(--text-dim); margin: 0; }
.class-panel__weapon strong { color: var(--text); }
.class-panel__info .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .class-explorer { grid-template-columns: 1fr; }
  .class-explorer__rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .class-panel, .class-panel__info { min-height: 560px; }
  .class-panel__info { max-width: 100%; }
  .class-panel__art { max-width: 82%; opacity: .92; }
  .class-panel::before { background: linear-gradient(0deg, var(--bg-elev) 8%, rgba(13,17,23,.72) 42%, rgba(13,17,23,.2) 100%); }
  .class-panel__stats { grid-template-columns: 1fr; }
}

/* News detail page */
.news-back { display: inline-block; margin-bottom: 16px; color: var(--text-dim); font-weight: 600; }
.news-back:hover { color: var(--primary); }
.news-post__date { color: var(--text-mut); font-size: 13px; margin-bottom: 6px; }
.news-post__title { font-size: clamp(22px, 4vw, 32px); margin-bottom: 18px; }
/* aspect-ratio, not width/height: the banners are all 700x200 give or take the
   few pixels of baked border that tools/prep_news_images.py trimmed off, and
   the template cannot know each file's exact size. This reserves the space so
   the article text does not jump when the image arrives. */
.news-post__banner { width: 100%; aspect-ratio: 7 / 2; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 22px; display: block; }
.news-post__img { width: 100%; max-width: 520px; border-radius: var(--radius); margin-bottom: 22px; }
.news-post__body { color: var(--text-dim); line-height: 1.85; }
.news-post__body a { color: var(--secondary); }
@media (max-width: 560px) {
  .news-card { grid-template-columns: 1fr; }
  .news-card__thumb { height: 170px; }
  .news-card__head { flex-wrap: wrap; gap: 2px 14px; }
}

/* ---- Sidebar widgets ----------------------------------------------------- */
.sd-bar { display: flex; flex-direction: column; gap: var(--gap); }
.sidebar-widget__title { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.sidebar-widget__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sidebar-widget__head .sidebar-widget__title { margin: 0; }
.rank-head { display: flex; justify-content: space-between; }
.rank-head span:last-child { color: var(--text-mut); }

.social-buttons { display: flex; gap: 8px; }
.social-buttons__link {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 6px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; border: 1px solid transparent;
  transition: background .15s var(--ease), color .15s var(--ease), transform .05s var(--ease);
}
.social-buttons__link:active { transform: translateY(1px); }
.social-buttons--icons .social-buttons__link { padding: 12px 6px; font-size: 0; }
.social-buttons--icons .social-buttons__ico { font-size: 18px; }
.social-buttons__ico { font-weight: 900; font-size: 15px; line-height: 1; }
.social--fb { color: #5b9bff; background: rgba(24,119,242,.14); }
.social--fb:hover { color: #fff; background: #1877f2; }
.social--tw { color: #4bb4f5; background: rgba(29,155,240,.14); }
.social--tw:hover { color: #fff; background: #1d9bf0; }
.social--dc { color: #a3abf9; background: rgba(88,101,242,.16); }
.social--dc:hover { color: #fff; background: #5865f2; }
.social-buttons--icons .social-buttons__svg { width: 18px; height: 18px; display: block; }
.social--yt { color: #ff6a6a; background: rgba(255,0,0,.14); }
.social--yt:hover { color: #fff; background: #ff0000; }

.stat-list, .rank-list { display: flex; flex-direction: column; gap: 2px; }
.stat-list__row, .rank-list__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
}
.stat-list__row:last-child, .rank-list__row:last-child { border-bottom: 0; }
.stat-list__row span { color: var(--text-dim); font-size: 14px; }
.rank-list { list-style: none; padding-left: 0; margin: 0; }
.rank-list__name { color: var(--text); font-size: 14px; }
.rank-list__name em { color: var(--text-mut); font-style: normal; margin-right: 4px; font-variant-numeric: tabular-nums; }
.rank-list__val { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Account box */
.account__welcome { margin-bottom: 12px; }
.account__row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.account__actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.account__menu, .loginOverlayWindow { display: none; overflow: hidden; }
.account__menu ul { display: flex; flex-direction: column; gap: 2px; }
.account__menu a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; }
.account__menu a:hover { background: var(--primary-050); color: var(--primary); }
.login-box__forgot { text-align: right; font-size: 13px; margin-bottom: 12px; }
.login-box .btn.download { margin-bottom: 0; }

/* ==========================================================================
   Legacy inner-page compatibility - styles the original class names still used
   by community tables, account forms, guides, media, download and shop views,
   so those pages inherit the modern theme without markup rewrites.
   ========================================================================== */

/* Page/section titles */
.accountsteps, .media-header, .home-category {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(19px, 3vw, 24px);
  margin: 4px 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--primary);
}
.media-header { margin-top: 28px; }
.home-category { border: 0; color: var(--primary); margin: 18px 0 10px; }

/* Legacy forms (Login/Register/ForgotPW/ChangePassword/ClaimGift/Reset) */
form #register, form[id="register"] { max-width: 100%; }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.row-left { color: var(--text-dim); }
.row-left .form-title, .form-title { margin: 0; font-weight: 600; font-size: 14px; }
.row-right { min-width: 0; }
.reginput { width: 100%; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
.reginput:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.row2 { margin-top: 18px; }
.error { color: var(--danger); background: rgba(239,83,80,.1); border: 1px solid rgba(239,83,80,.3); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.success:not(:empty) { color: var(--success); background: rgba(76,175,125,.1); border: 1px solid rgba(76,175,125,.3); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; }
input.submit, .submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 160px; padding: 11px 22px; border: 0; cursor: pointer;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 15px;
  color: #1a1205; background: linear-gradient(180deg, var(--primary), var(--primary-600));
}
input.submit:hover, .submit:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; gap: 4px; } }

/* Bootstrap-ish leftovers (Donate) */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; margin: 4px; border: 1px solid var(--border); cursor: pointer;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 15px;
  color: var(--text); background: var(--bg-elev-2); transition: all .15s var(--ease);
}
.btn-primary:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary.paymentAmount { background: var(--primary-050); border-color: var(--primary); color: var(--primary); }
.col-xs-12 { width: 100%; }
.form-row { margin-top: 16px; }
#card-element { padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
#card-errors { color: var(--danger); font-size: 14px; margin-top: 8px; }

/* Grid data tables (rankings, download specs) */
.gridtable { width: 100%; border-radius: var(--radius); overflow: hidden; margin: 8px 0; }
.gridtable th { background: var(--bg-elev-2); color: var(--text-dim); padding: 12px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); }
.gridtable td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.gridtable tr:hover td { background: var(--bg-elev-2); }
.gridtable td.name { color: var(--primary); font-weight: 600; }
/* Old markup uses <center> / align="center" in cells; force everything left so
   headers and data line up. */
.gridtable { border: 0; border-collapse: collapse; }
.gridtable th, .gridtable td { text-align: left; border-left: 0; border-right: 0; border-top: 0; }
.gridtable div[align], .gridtable center { text-align: left; display: block; }
.download-td { color: var(--text-dim); }
.row2:empty { display: none; }
center { display: block; }

/* Pagination */
.news-archive__title { font-family: var(--font-head); font-size: clamp(24px, 4vw, 30px); margin: 4px 0 18px; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 26px 0 4px; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 700; font-size: 14px; }
.pagination a:hover { border-color: var(--primary); color: var(--text); }
.pagination__page.is-active { background: linear-gradient(180deg, #e3a52c, #c4870f); border-color: transparent; color: #17130a; }
.pagination__page.is-active:hover { color: #17130a; }
.pagination__nav { color: var(--text); }

/* News content blocks (NewsArchive + article detail) */
.content-divider { display: none; }
.content { }
.content .thumbnail { float: none; margin: 0 0 14px; }
.content .thumbnail img, .thumbimg { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); }
.content h3 { margin: 0 0 6px; }
.content h3 datetime, datetime { display: block; color: var(--text-mut); font-size: 13px; font-weight: 400; margin-top: 2px; }
.content p { color: var(--text-dim); margin: 0 0 1em; }
.content img { border-radius: var(--radius-sm); margin: 8px 0; max-width: 100%; height: auto; }
.content::after { content: ""; display: block; clear: both; }

/* Media gallery */
.item { display: inline-block; vertical-align: top; width: 220px; max-width: 100%; margin: 8px; }
.item a { display: block; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.item img { width: 100%; height: 140px; object-fit: cover; transition: transform .2s var(--ease); }
.item a:hover img { transform: scale(1.05); }
.item.video a::after { content: "\25B6"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; color: #fff; background: rgba(0,0,0,.35); }

/* Download page */
.download-bg { display: none; }
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 16px 0 28px;
}
.client-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 22px 16px 18px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius); transition: transform .15s var(--ease), border-color .15s var(--ease);
  font: inherit; color: inherit; cursor: pointer; width: 100%;
}
.client-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.client-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Every icon is the same muted tone, whatever the platform. The only colour on
   this row is the gold of the card you picked, so the selection is the one thing
   the eye lands on - no per-OS brand colours competing with it. */
.client-card__icon { line-height: 0; color: var(--text-mut); margin-bottom: 4px;
  transition: color .15s var(--ease); }
.client-card__icon svg { width: 42px; height: 42px; display: block; }
.client-card:hover .client-card__icon { color: var(--text); }
.client-card__name { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.client-card__sub { color: var(--text-mut); font-size: 13px; }
/* OS auto-detect badge: marks the visitor's own system, not the open panel */
.client-card__badge { display: none; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #1a1205; }
.client-card.is-recommended .client-card__badge { display: inline-block; }
/* The selected card is the one whose downloads are shown below */
.client-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }
.client-card.is-selected .client-card__icon,
.client-card.is-selected:hover .client-card__icon { color: var(--primary); }
.client-card.is-selected .client-card__name { color: var(--primary); }

/* Download page: per-platform panels */
.download__step { font-family: var(--font-head); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--primary); margin: 24px 0 0; }
.dl-panel { padding: 20px 22px; margin: 14px 0 28px; }
.dl-panel__title { font-family: var(--font-head); font-size: 19px; margin: 0 0 6px; }
.dl-panel__lead { color: var(--text-dim); line-height: 1.6; margin: 0 0 16px; max-width: 68ch; }
/* Without JS no panel can be hidden by script, so show them all rather than
   leave the page with no downloads at all. */
.download-content.is-ready .dl-panel[hidden] { display: none; }
.download-content:not(.is-ready) .dl-panel[hidden] { display: block; }

.dl-opts { display: grid; gap: 8px; margin-bottom: 16px; }
.dl-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 16px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.dl-opt:hover { border-color: var(--primary); background: var(--bg-elev-2); }
.dl-opt--primary { border-color: var(--primary-050); background: var(--bg-elev-2); }
.dl-opt__name { font-weight: 600; }
.dl-opt__rec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--primary); margin-left: 6px; }
.dl-opt__meta { color: var(--text-mut); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.dl-cmd { position: relative; margin-bottom: 16px; }
.dl-cmd__code { margin: 0; padding: 14px 92px 14px 16px;
  background: #0d1118; border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* Long commands wrap instead of scrolling sideways; the hanging indent keeps a
   wrapped command visibly one command. Copy reads textContent, so wrapping and
   the prompt below never reach the clipboard. */
.dl-cmd__code code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-cmd__ln { display: block; padding-left: 1.4em; text-indent: -1.4em; }
.dl-cmd__ln::before { content: "$ "; color: var(--secondary); user-select: none; }
.dl-cmd__ln--cont { padding-left: 2.8em; text-indent: -1.4em; }
.dl-cmd__ln--cont::before { content: ""; }
.dl-cmd__copy { position: absolute; top: 10px; right: 10px; padding: 6px 14px; font-size: 13px; }
/* On a phone the side gutter for the button costs a third of the line: put
   the button above the commands instead. */
@media (max-width: 560px) {
  .dl-cmd__code { padding: 50px 12px 12px; }
  .dl-cmd__code code { font-size: 12px; }
  .dl-distro summary { padding: 12px; gap: 10px; }
  .dl-distro__body { padding: 2px 12px 6px; }
}

/* Linux: one accordion row per distro family, its own instructions inside.
   <details name> makes it exclusive in current browsers and degrades to
   independent rows elsewhere; without JS every row still opens. */
.dl-sub { font-family: var(--font-head); font-size: 15px; font-weight: 700; margin: 26px 0 10px; color: var(--text); }
.dl-distros { display: grid; gap: 8px; }
.dl-distro { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease); }
.dl-distro:hover, .dl-distro[open] { border-color: var(--primary-050); }
.dl-distro[open] { border-color: var(--primary); }
.dl-distro summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  list-style: none; }
.dl-distro summary::-webkit-details-marker { display: none; }
.dl-distro summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; flex: none;
  border-right: 2px solid var(--text-mut); border-bottom: 2px solid var(--text-mut);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--ease); }
.dl-distro[open] summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--primary); }
.dl-distro summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.dl-distro__icons { display: flex; gap: 6px; color: var(--text-mut); line-height: 0; flex: none; }
.dl-distro__icons svg { width: 22px; height: 22px; }
.dl-distro:hover .dl-distro__icons, .dl-distro[open] .dl-distro__icons { color: var(--primary); }
.dl-distro__name { font-weight: 600; flex: 1; }
.dl-distro__meta { color: var(--text-mut); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dl-distro__body { padding: 2px 16px 6px; border-top: 1px solid var(--border); }
.dl-distro__body .dl-hint { margin-top: 12px; }
.dl-distro__body .dl-hint a { color: var(--secondary); }

.dl-hint { color: var(--text-dim); font-size: 14px; line-height: 1.65; margin: 0 0 10px; max-width: 72ch; }
.dl-hint strong { color: var(--text); }
.dl-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.dl-link { font: inherit; color: var(--secondary); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; }
.dl-more { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.dl-more summary { cursor: pointer; color: var(--secondary); font-size: 14px; }
.dl-more p { color: var(--text-dim); font-size: 14px; line-height: 1.65; margin: 10px 0 0; max-width: 72ch; }
.dl-more a { color: var(--secondary); }

/* Download page: notes, requirements */
.download__title { font-family: var(--font-head); font-size: clamp(24px, 4vw, 30px); margin: 0 0 8px; }
.download__lead { color: var(--text-dim); line-height: 1.65; max-width: 68ch; margin: 0 0 8px; }
.download__reqs-title { font-family: var(--font-head); font-size: 20px; margin: 0 0 6px; }
.download__reqs-note { color: var(--text-dim); line-height: 1.6; max-width: 68ch; margin: 0 0 16px; }
.reqs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; }
.req { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.req__k { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--primary); font-weight: 700; }
.req__v { color: var(--text-dim); font-size: 14px; }

/* Shop */
.news-wrapper-full { display: block; }
.shopcontainer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; }
.shopcontainer p { margin: 0; color: var(--text-dim); }
.buy-more { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--primary), var(--primary-600)); color: #1a1205; font-weight: 700; }
.buy-more:hover { color: #1a1205; filter: brightness(1.08); }
.loginWrapper { width: auto !important; float: none !important; margin: 0 !important; }
.sidebar-full { margin-bottom: 18px; }
#accordian > ul { display: flex; flex-wrap: wrap; gap: 8px; }
#accordian > ul > li { list-style: none; }
#accordian h3 { margin: 0; }
#accordian h3 a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; font-weight: 600; }
#accordian h3 a:hover { border-color: var(--primary); color: var(--primary); }
#accordian .item-title { margin: 0; }
#accordian .plus { display: none; }
#accordian ul ul { display: none; position: absolute; margin-top: 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow-lg); z-index: 10; }
#accordian ul ul li a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-dim); }
#accordian ul ul li a:hover { background: var(--primary-050); color: var(--primary); }
#accordian .cat-active > h3 > a,
#accordian .cat-active > a { border-color: var(--primary); color: var(--primary); background: var(--primary-050); }
#accordian ul ul li.cat-active a { background: var(--primary-050); color: var(--primary); }
.websh { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; align-items: stretch; }

/* Full-width section headers that break the grid */
.shop-section {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 2px; padding-bottom: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.shop-section::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: var(--primary); }
.shop-section--hot::before { background: var(--danger); }
.shop-section--rec::before { background: var(--secondary); }
.shop-section:first-child { margin-top: 0; }

/* Item card */
.shopbox {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 9px 11px; transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.shopbox:hover { border-color: var(--primary); box-shadow: inset 0 0 0 1px rgba(242,177,52,.35), 0 8px 26px rgba(242,177,52,.10); }
.shopbox:hover, .shopbox:focus-within { z-index: 5; }

/* The item's own picture, stretched behind its card and turned right down. It is
   clipped by border-radius: inherit rather than overflow:hidden on the box - the
   tooltip lives in there and would be cut off. No blur: this audience is running
   decade-old laptops, and a filter on thirty cards costs more than it is worth.
   Children are lifted to position:relative so they paint above it, which also
   keeps the text contrast where it was. */
.shopbox::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background-image: var(--item-art, none);
  background-size: cover; background-position: center;
  opacity: .2;
}
.shopbox > * { position: relative; }
.shopbox:hover::before { opacity: .28; }
.shopbox__info { position: absolute; top: 8px; right: 8px; z-index: 4; display: inline-flex; cursor: help; }
.shopbox__infoicon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-mut); font-size: 13px; font-style: normal; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.shopbox__info:hover .shopbox__infoicon, .shopbox__info:focus .shopbox__infoicon { background: var(--primary); border-color: var(--primary); color: #17130a; }
.shopbox__tip { position: absolute; top: 30px; right: 0; width: 224px; z-index: 60; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); font-weight: 400; text-align: left; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s; }
.shopbox__info:hover .shopbox__tip, .shopbox__info:focus .shopbox__tip { opacity: 1; visibility: visible; transform: none; }
.shopbox.hottest { border-color: rgba(239,83,80,.5); }
.shopbox.recommended { border-color: rgba(53,208,192,.5); }
.shopbox.discont { border-color: rgba(242,177,52,.5); }
/* The artwork identifies an item, so it leads and fills the card; the name reads
   underneath. Two lines, because at one line 17 of 119 item names were cut off. */
.shopbox__name { order: 2; font-size: 12.5px; line-height: 1.3; margin: 9px 0 7px; padding: 0 2px; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Without this, 10 of 119 names broke mid-bracket - "Super Gold Nine (Grade" / "5)".
     balance evens the two lines out, which keeps "(Grade 5)" together. */
  text-wrap: balance; }
.shopbox__media { order: 1; position: relative; width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
.shopbox__img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); background: rgba(0,0,0,.25); }
.shopbox__tag { position: absolute; top: -6px; right: -6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.shopbox__tag--sale { background: var(--danger); color: #fff; }
/* Quantity and bundle markers sit on the artwork's top-left, mirroring the info icon
   opposite. As their own row they cost a whole band of card height; moving them here
   paid for the second title line and 20px besides. */
.shopbox__badges { order: 3; position: absolute; top: 8px; left: 8px; z-index: 4; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.shopbox__badges:empty { display: none; margin: 0; }
/* Same surface and the same inset as the info icon opposite, so the two corners
   read as a pair rather than two unrelated overlays. */
.ibadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim); }
.ibadge--time { color: var(--secondary); border-color: rgba(53,208,192,.35); }
.ibadge--qty { color: var(--primary); border-color: rgba(242,177,52,.35); }
.ibadge--bundle { color: var(--success); border-color: rgba(76,175,125,.35); cursor: help; }
.shopbox__desc { color: var(--text-mut); font-size: 12px; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shopbox__foot { order: 4; margin-top: auto; }
.shopbox__price { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.shopbox .price { color: var(--primary); font-weight: 800; font-size: 17px; }
.price-old { text-decoration: line-through; color: var(--text-mut); font-weight: 400; font-size: 13px; }
.coin-amount { display: inline-flex; align-items: center; }
.btncontainer { margin-top: 12px; display: flex; gap: 5px; justify-content: center; }
.btncontainer a, .shopbox button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; }
/* Buy carries the action; Gift stays available without competing with it. */
.btncontainer a.buy { flex: 1; }
.btncontainer a.gift { flex: 0 0 auto; opacity: .75; }
.btncontainer a.gift:hover { opacity: 1; }
.btncontainer a.buy { background: linear-gradient(180deg, var(--primary), var(--primary-600)); color: #1a1205; }
.btncontainer a.gift { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); }
.btncontainer a.buy:hover { filter: brightness(1.08); color: #1a1205; }
.btncontainer a.gift:hover { border-color: var(--secondary); color: var(--secondary); }

/* Shop guest login banner */
.shop-guest { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: 100%; }
.shop-guest__text { color: var(--text-dim); font-weight: 600; }
.shop-guest__actions { display: flex; gap: 8px; }
.shop-guest__actions .btn { padding: 8px 16px; }

/* Shared by the shop and the donate page - it used to live in the donate page's
   own style block, so the shop rendered the markup completely unstyled. */
.playtime-earn { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem; padding: .8rem 1.1rem; border-radius: 10px;
    background: linear-gradient(90deg, rgba(46,125,91,.18), rgba(40,71,99,.18)); border: 1px solid #2e7d5b; color: #cfe9dd; font-size: .98rem; }
.playtime-earn__icon { font-size: 1.4rem; line-height: 1; }
.playtime-earn strong { color: #7ee0b4; }
.playtime-earn__next { display: inline-block; margin-top: .25rem; font-size: .85rem; color: #9fc7b6; }

/* ---- jquery.alerts dialogs (shop buy confirm/prompt) --------------------- */
#popup_container { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text); font-family: var(--font); min-width: 320px; max-width: 92vw; }
#popup_title { background: transparent; color: var(--text); font-family: var(--font-head); font-size: 17px; font-weight: 700; text-align: left; border: 0; padding: 18px 20px 0; text-shadow: none; }
#popup_content { background: none; padding: 12px 20px 4px; }
#popup_content.alert, #popup_content.confirm, #popup_content.prompt { background-image: none; }
#popup_message { padding: 0; color: var(--text-dim); }
/* box-sizing is required here: width:100% plus padding and border would otherwise add
   up to more than the dialog's content box and spill the input over its edge. */
/* jquery.alerts sets an inline width with $.width(), which is the CONTENT width -
   it does not know about our padding and border, so the field came out 26px wider
   than its own dialog. !important is what overrides that inline value. */
#popup_content #popup_prompt, #popup_prompt { box-sizing: border-box; width: 100% !important; margin-top: 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
#popup_panel { text-align: right; padding: 14px 20px 18px; margin: 0; }
#popup_ok, #popup_cancel { width: auto; min-width: 90px; height: auto; padding: 9px 18px; margin-left: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; }
#popup_ok { background: linear-gradient(180deg, var(--primary), var(--primary-600)); color: #1a1205; border-color: transparent; }
#popup_cancel { background: var(--bg-elev-2); color: var(--text); }
#popup_overlay { background: #000; opacity: .6; }

/* ---- Tab hubs (Game Help) ------------------------------------------------ */
.tab-hub__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding-bottom: 4px; }
.tab-hub__tab {
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev-2); color: var(--text-dim); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.tab-hub__tab:hover { border-color: var(--primary); color: var(--primary); }
.tab-hub__tab.is-active { background: var(--primary-050); border-color: var(--primary); color: var(--primary); }
.tab-hub__content { transition: opacity .15s var(--ease); }

/* Stats tables + class filter */
.stat-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-toolbar label { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.stat-toolbar select { width: auto; min-width: 160px; padding: 9px 12px; }
.stat-count { margin-left: auto; color: var(--text-mut); font-size: 13px; }
.data td.rank { color: var(--text-mut); font-variant-numeric: tabular-nums; }
.data td.name { color: var(--primary); font-weight: 600; }

/* ---- Buy Coins (Donate) -------------------------------------------------- */
.pay-step { margin-bottom: 24px; }
.pay-step__title { font-size: 16px; margin-bottom: 14px; color: var(--text); }
.coin-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.coin-pack {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s var(--ease), transform .05s var(--ease), background .15s var(--ease);
}
.coin-pack:hover { border-color: var(--primary); }
.coin-pack.active { border-color: var(--primary); background: var(--primary-050); box-shadow: var(--ring); }
.coin-pack__amt { display: inline-flex; align-items: center; font-weight: 800; font-size: 18px; color: var(--primary); }
.coin-pack__price { font-weight: 700; color: var(--text); font-size: 15px; }

.pay-card { max-width: 460px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.stripe-input { padding: 13px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stripe-input.StripeElement--focus { border-color: var(--primary); box-shadow: var(--ring); }
.field-error { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 1em; }
.pay-note { color: var(--text-mut); font-size: 12px; margin-top: 14px; text-align: center; }
.pay-card .btn { margin-top: 8px; }

/* Discord button (sidebar) */
.btn.discord { background: #5865f2; color: #fff; }
.btn.discord:hover { background: #4a57e0; color: #fff; filter: none; }
.btn.download { background: linear-gradient(180deg, #206b62, #17544c); border-color: rgba(53,208,192,.30); color: #eafffb; }
.btn.download:hover { background: linear-gradient(180deg, #26806f, #1b625a); color: #fff; filter: none; }

/* Discord's own brand colour - the button is a hand-off to their app, so it should
   look like Discord and not like a site action. */
.btn--discord { background: #5865f2; border-color: #4752c4; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.btn--discord:hover { background: #4752c4; border-color: #3c45a5; color: #fff; filter: none; }
.btn__ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- Lightbox ------------------------------------------------------------ */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 24px; background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
.lightbox.is-open { display: grid; }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* ---- Utilities ----------------------------------------------------------- */
.clear { clear: both; }
.text-dim { color: var(--text-dim); }
.mt-0 { margin-top: 0; }
.hidden { display: none !important; }
:where(a, button, input, select):focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Stats overview (headline figures + level distribution chart) -------- */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-card__num { font-family: var(--font-head); font-size: 30px; line-height: 1; color: var(--text); }
.stat-card__label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mut); }
@media (max-width: 720px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }

.stat-chart { padding: 20px; }
.stat-chart__title { margin: 0 0 4px; font-size: 17px; }
.stat-chart__sub { margin: 0 0 18px; font-size: 13px; color: var(--text-mut); }
.level-bars { display: grid; gap: 9px; }
.level-bar { display: grid; grid-template-columns: 74px 1fr 104px; align-items: center; gap: 12px; }
.level-bar__label { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.level-bar__track { height: 12px; background: var(--bg-elev-2); border-radius: 6px; overflow: hidden; }
.level-bar__fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--secondary), var(--primary)); }
.level-bar__val { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.level-bar__label--wide { text-align: left; font-weight: 600; color: var(--text); }
.level-bar__fill[data-cls="Fighter"]   { background: linear-gradient(90deg, #7a1f24, #e05a4d); }
.level-bar__fill[data-cls="Cleric"]    { background: linear-gradient(90deg, #8a6a1e, #f2b134); }
.level-bar__fill[data-cls="Archer"]    { background: linear-gradient(90deg, #1f6a3a, #4bbf6b); }
.level-bar__fill[data-cls="Mage"]      { background: linear-gradient(90deg, #24487a, #4d8fe0); }
.level-bar__fill[data-cls="Trickster"] { background: linear-gradient(90deg, #5a2a7a, #a15ce0); }

/* Economy figures + wealth-gap bar */
.econ-figures { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 18px; }
.econ-figures > div { display: flex; flex-direction: column; gap: 3px; }
.econ-figures__num { font-family: var(--font-head); font-size: 26px; line-height: 1; color: var(--primary); }
.econ-figures__label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mut); }
.wealth-bar { display: flex; height: 34px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; }
.wealth-bar__top { display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; color: #1a1205; background: linear-gradient(90deg, var(--secondary), var(--primary)); }
.wealth-bar__rest { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 28px; white-space: nowrap; overflow: hidden; color: var(--text-dim); background: var(--bg-elev-2); }
.wealth-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.wealth-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.wealth-legend__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.wealth-legend__dot--top { background: linear-gradient(90deg, var(--secondary), var(--primary)); }
.wealth-legend__dot--rest { background: var(--bg-elev-2); border: 1px solid var(--border); }

/* Charts on narrow screens: stack the donut above its legend, keep bars in view */
@media (max-width: 560px) {
  .donut-card { flex-direction: column; align-items: center; gap: 16px; }
  .donut-card .legend { width: 100%; }
  .col-chart { gap: 4px; }
  .col__val { font-size: 9px; }
}

/* Hall-of-fame leaderboards */
.hof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hof-grid .stat-chart { margin: 0; }

/* Class-image icon inside guide/hub tabs (e.g. ClassGuides) */
.tab-hub__tab { display: inline-flex; align-items: center; gap: 8px; }
.tab-hub__ico { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); flex: none; }
.tab-hub__ico img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tab-hub__tab.is-active .tab-hub__ico { border-color: var(--primary); }

/* Keyword-matched section / category heading icons */
.sec-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); vertical-align: middle; margin-right: 9px; }
.sec-ico svg { width: 1em; height: 1em; }
.guide h2 .sec-ico { font-size: 20px; }
.section-heading .sec-ico { font-size: 22px; }

/* Onboarding panel detail bullets - selector qualified to beat .news-content ul (disc) */
.onb-panel .onb-panel__list { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; gap: 10px; }
.onb-panel .onb-panel__list li { position: relative; padding-left: 28px; color: var(--text-dim); font-size: 14px; line-height: 1.5; list-style: none; }
.onb-panel .onb-panel__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  background: var(--primary-050); border: 1px solid var(--primary); border-radius: 50%;
}
.onb-panel .onb-panel__list li::after {
  content: ""; position: absolute; left: 6px; top: 7px; width: 5px; height: 9px;
  border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---- Stats overview layout & richer charts ------------------------------ */
.stats-section__title { font-family: var(--font-head); font-size: 18px; color: var(--text); margin: 30px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.stats-section__title:first-child { margin-top: 4px; }
.stat-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .stat-cards--3 { grid-template-columns: 1fr; } }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 4px; }
.split-grid .stat-chart { margin: 0; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below its content and
   pushes past the track. The donut charts carry a 168px donut plus a 150px legend, which
   on a 390px phone made the card 374px wide inside a 320px column - 19px of the card, and
   its right border, hanging off the screen. No effect above phone widths, where the track
   is already wider than the content. */
.split-grid > * { min-width: 0; }
@media (max-width: 820px) { .split-grid { grid-template-columns: 1fr; } }

/* Conic-gradient donut + legend */
.donut-card { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { position: relative; width: 168px; height: 168px; border-radius: 50%; flex: none; }
.donut::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: var(--bg-elev); }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut__num { font-family: var(--font-head); font-size: 22px; line-height: 1; color: var(--text); }
.donut__cap { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mut); margin-top: 3px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 150px; flex: 1; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.legend__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend__name { color: var(--text-dim); }
.legend__val { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Vertical column histogram (level distribution) */
.col-chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 18px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; height: 100%; }
.col__bar { width: 100%; max-width: 30px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--primary), var(--secondary)); transition: filter .15s var(--ease); }
.col:hover .col__bar { filter: brightness(1.2); }
.col__val { font-size: 10.5px; color: var(--text-mut); font-variant-numeric: tabular-nums; }
.col__label { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Name-length chips */
.name-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.name-chip { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); }
.name-chip__num { font-family: var(--font-head); font-size: 22px; line-height: 1; color: var(--text); }
.name-chip__label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mut); }

/* Two-column ranked list (gold barons) */
.rank-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 560px) { .rank-list--2col { grid-template-columns: 1fr; } }

/* KPI strip - single-number stats at a glance */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.kpi__num { font-family: var(--font-head); font-size: 25px; line-height: 1.05; color: var(--text); }
.kpi__num--accent { color: var(--primary); }
.kpi__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mut); }

/* Even vertical rhythm between overview blocks (section titles keep their own) */
.stats-overview > .kpi-grid,
.stats-overview > .split-grid,
.stats-overview > .stat-chart,
.stats-overview > .hof-grid { margin-bottom: 14px; }

/* Population-by-month year selector */
.pop-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 16px; }
.pop-year-btn { padding: 5px 11px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev-2); color: var(--text-dim); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.pop-year-btn:hover { color: var(--primary); border-color: var(--primary); }
.pop-year-btn.is-active { background: var(--primary-050); border-color: var(--primary); color: var(--primary); }

/* Inline-SVG area charts (time-series) */
.area-chart { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }
.area__fill { fill: var(--primary); opacity: .14; }
.area__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area__dot { fill: var(--primary); }
.area__dot:hover { r: 4; }
.area__x { fill: var(--text-mut); font-size: 11px; text-anchor: middle; }
.area__v { fill: var(--text-dim); font-size: 11px; font-weight: 600; text-anchor: middle; }