/* ============================================================
   Juniper — "Live Hub" theme layer (2026-10-04)

   Loaded AFTER css/site.css on every public page (and on its own on the
   home page). site.css is untouched: this file re-maps its colour/font
   tokens and restyles the shared pieces (background, header, footer,
   page heads, panels, buttons, forms, tables, tabs).

   ROLLBACK: remove the <link href="/css/hub.css"> line from a page and it
   falls back to plain site.css styling (the header markup still works —
   its hooks are unchanged: .nav-btn, .top-utility-inner, #player-count).

   admin.html does NOT load this file on purpose.
   ============================================================ */

/* ---------- A. Tokens ---------- */
:root {
  --hub-bg: #04060c;
  --hub-surf: rgba(10, 16, 27, 0.88);
  --hub-surf-2: rgba(6, 10, 18, 0.9);
  --hub-line: rgba(170, 215, 240, 0.16);
  --hub-line-2: rgba(170, 215, 240, 0.26);
  --hub-text: #eef4fa;
  --hub-body: #d3dce8;
  --hub-muted: #aab8cb;
  --hub-acc: #5ee6f2;
  --hub-acc-2: #f5c451;
  --hub-on-acc: #03181c;
  --hub-live: #59e3a0;
  --hub-radius: 6px;
  --hub-gutter: 32px;
  --hub-wrap: 1300px;
  --hub-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --hub-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --hub-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;

  /* site.css token re-map (same names, new values) */
  --bg: #04060c;
  --navy-deep: #04060c;
  --navy: #0b1422;
  --surface: rgba(10, 16, 27, 0.88);
  --surface-2: rgba(6, 10, 18, 0.9);
  --border: rgba(170, 215, 240, 0.18);
  --border-bright: rgba(170, 215, 240, 0.34);
  --text: #d3dce8;
  --text-bright: #eef4fa;
  --text-dim: #aab8cb;
  --silver: #b9c6d6;
  --silver-bright: #dbe7f3;
  --silver-pale: #eef4fa;
  --silver-dark: #4c5a6c;
  --blue: #2bb8d0;
  --blue-bright: #5ee6f2;
  --blue-deep: #0c5868;
  --cyan: #5ee6f2;
  --cyan-deep: #0e7f8c;
  --mint: #5ee6f2;
  --mint-bright: #9defff;
  --mint-deep: #0e7f8c;
  --amber: #f5c451;
  --success: #59e3a0;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --font-display: var(--hub-display);
  --font-body: var(--hub-ui);
  --font-ui: var(--hub-ui);
  --font-mono: var(--hub-mono);
  --nav-h: 88px;
  --container: var(--hub-wrap);   /* site.css .container follows the same width as the header */
}
@media (max-width: 700px) { :root { --hub-gutter: 20px; } }
/* Big monitors: widen the whole column a step so pages do not look small in the middle. */
@media (min-width: 1700px) { :root { --hub-wrap: 1440px; } }
@media (min-width: 2200px) { :root { --hub-wrap: 1600px; } }

/* ---------- B. Ground + background ---------- */
html { background: var(--hub-bg); color-scheme: dark; }
body {
  position: relative; z-index: 0;
  font-family: var(--hub-ui);
  font-size: 16px; line-height: 1.6;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.layer { position: fixed; inset: 0; pointer-events: none; }
.bg-void { z-index: -10; background: var(--hub-bg); }
/* The nebula is pinned to the window (position: fixed), not to the top of the page, so it fills the whole
   screen at every scroll position and never runs out into plain black. 100lvh = the tallest the window gets on
   phones (address bar hidden), so no gap shows while the bar slides away; 100vh is the fallback.
   Layers, top to bottom: an even dark veil for readable text, four soft glows (cyan down the left,
   violet down the right, one in each top corner) so no part of the window is left plain, then the same cyan-and-violet picture the home page uses,
   which has cloud across its full width. */
.bg-ambience {
  position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: -9;
  background:
    linear-gradient(180deg, rgba(4, 6, 12, 0.52) 0%, rgba(4, 6, 12, 0.5) 40%, rgba(4, 6, 12, 0.56) 100%),
    radial-gradient(58% 60% at 8% 62%, rgba(94, 230, 242, 0.22), rgba(94, 230, 242, 0)),
    radial-gradient(58% 60% at 92% 58%, rgba(169, 149, 255, 0.24), rgba(169, 149, 255, 0)),
    radial-gradient(46% 46% at 0% 0%, rgba(94, 230, 242, 0.2), rgba(94, 230, 242, 0)),
    radial-gradient(46% 46% at 100% 0%, rgba(169, 149, 255, 0.22), rgba(169, 149, 255, 0)),
    url(/images/bg/nebula-split.jpg) center 30% / cover no-repeat;
}
.bg-vignette { display: none; }
#stars-canvas, #milkyway-canvas, #shooting-canvas, #aurora-canvas { display: none; }
::selection { background: rgba(94, 230, 242, 0.3); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--hub-acc); outline-offset: 3px; }

/* ---------- C. Header ---------- */
.hub-nav {
  position: relative; z-index: 20; box-sizing: border-box;
  width: 100%; max-width: var(--hub-wrap); margin: 0 auto;
  padding: 0 var(--hub-gutter);
  min-height: 88px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
}
.hub-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--hub-text); text-decoration: none; }
/* Logo: the four-point star from the emblem, then the name in light silver lettering (no picture file). */
.hub-brand .bs { flex: none; width: 22px; height: 22px; display: block; filter: drop-shadow(0 0 7px rgba(94, 230, 242, 0.7)); }
.hub-brand span {
  font-family: var(--hub-display); font-weight: 500; font-size: 22.5px;
  letter-spacing: 0.3em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(180deg, #ffffff 15%, #b4c4d8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hub-links { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2.2vw, 38px); min-width: 0; }
.hub-nav .nav-btn,
.hub-nav .nav-btn:hover,
.hub-nav .nav-btn.active {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
  font-family: var(--hub-ui); font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--hub-muted); transition: color 0.2s ease;
}
.hub-nav .nav-btn:hover, .hub-nav .nav-btn.active { color: var(--hub-text); }
.hub-nav .nav-btn::before { content: none; }
.hub-nav .nav-btn::after {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: 7px;
  width: auto; height: 1px; border: 0; background: var(--hub-acc);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.hub-nav .nav-btn:hover::after, .hub-nav .nav-btn.active::after { transform: scaleX(1); }
.hub-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.hub-online, .hub-nav .top-utility-inner {
  font-family: var(--hub-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hub-muted); white-space: nowrap;
}
.hub-online { display: inline-flex; align-items: center; gap: 10px; }
.hub-online b { color: var(--hub-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.hub-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--hub-live);
  box-shadow: 0 0 0 4px rgba(89, 227, 160, 0.2), 0 0 14px var(--hub-live);
}
.hub-nav .top-utility-inner { width: auto; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.hub-nav .top-utility-inner:empty { display: none; }
.hub-nav .top-utility-inner a, .hub-nav .top-utility-inner span[data-auth-link]:not(.util-divider) {
  display: inline-flex; align-items: center; gap: 0; min-height: 44px;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--hub-muted); transition: color 0.2s ease;
}
.hub-nav .top-utility-inner a:hover { color: var(--hub-text); }
.hub-nav .top-utility-inner span[data-auth-link]:not(.util-divider) { color: var(--hub-text); }
.hub-nav .top-utility-inner .util-divider { display: none; }
.hub-play, .hub-play:hover {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 20px; border-radius: var(--hub-radius);
  font-family: var(--hub-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  color: var(--hub-on-acc);
  background: linear-gradient(180deg, #8eeef7, var(--hub-acc));
  box-shadow: 0 18px 40px -14px rgba(94, 230, 242, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.hub-play:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (min-width: 1400px) {
  .hub-nav .top-utility-inner a, .hub-nav .top-utility-inner span[data-auth-link]:not(.util-divider) { max-width: 240px; }
}
@media (max-width: 1180px) {
  .hub-nav { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: 16px; padding-top: 14px; padding-bottom: 6px; min-height: 0; }
  .hub-right { display: contents; }
  .hub-brand { grid-row: 1; grid-column: 1; justify-self: start; }
  .hub-play { grid-row: 1; grid-column: 2; justify-self: end; }
  .hub-links { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; gap: 14px; margin-top: 8px; border-top: 1px solid var(--hub-line); overflow-x: auto; }
  .hub-online { grid-row: 3; grid-column: 1 / -1; justify-self: start; min-height: 40px; }
  .hub-nav .top-utility-inner { grid-row: 3; grid-column: 1 / -1; justify-self: end; gap: 16px; }
  .hub-nav .top-utility-inner a, .hub-nav .top-utility-inner span[data-auth-link]:not(.util-divider) { min-height: 40px; max-width: 170px; }
}
@media (min-width: 700px) and (max-width: 1180px) {
  .hub-links { justify-content: flex-start; gap: 34px; }
}
@media (max-width: 420px) {
  .hub-brand { gap: 10px; }
  .hub-brand .bs { width: 18px; height: 18px; }
  .hub-brand span { font-size: 19px; letter-spacing: 0.24em; }
  .hub-nav .nav-btn { font-size: 11px; letter-spacing: 0.12em; }
  .hub-online, .hub-nav .top-utility-inner { font-size: 11px; letter-spacing: 0.1em; }
  .hub-nav .top-utility-inner { gap: 12px; }
  .hub-nav .top-utility-inner a, .hub-nav .top-utility-inner span[data-auth-link]:not(.util-divider) { max-width: 128px; }
}

/* ---------- D. Footer ---------- */
footer.site-footer {
  position: relative; z-index: 2; box-sizing: border-box; width: 100%;
  margin-top: 96px; padding: 56px var(--hub-gutter) 34px;
  border-top: 1px solid var(--hub-line);
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-footer .footer-grid {
  max-width: calc(var(--hub-wrap) - 2 * var(--hub-gutter)); margin: 0 auto 44px;
  display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 40px;
}
.site-footer .footer-col h4 {
  margin: 0 0 14px; font-family: var(--hub-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--hub-text);
}
.site-footer .footer-col a { display: block; padding: 5px 0; font-size: 14px; color: var(--hub-muted); text-decoration: none; transition: color 0.2s ease; }
.site-footer .footer-col a:hover, .site-footer .footer-col a.active { color: var(--hub-text); }
.site-footer .footer-brand .logo-text {
  display: block; margin: 0; font-family: var(--hub-display); font-weight: 700;
  color: var(--hub-text); background: none; -webkit-text-fill-color: currentColor;
  animation: none; filter: none;
}
.site-footer .footer-brand p { margin: 14px 0 0; max-width: 280px; font-size: 14px; color: var(--hub-muted); }
.site-footer .footer-bottom {
  max-width: calc(var(--hub-wrap) - 2 * var(--hub-gutter)); margin: 0 auto; padding-top: 22px;
  border-top: 1px solid var(--hub-line); text-align: left;
  font-family: var(--hub-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hub-muted);
}
@media (max-width: 900px) {
  footer.site-footer { margin-top: 64px; padding-top: 40px; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}

/* ---------- E. Page frame + page heads ---------- */
main { padding: 8px 0 0; }
.container, .container-narrow, .container-wide { padding-left: var(--hub-gutter); padding-right: var(--hub-gutter); }

.page-head { position: relative; text-align: center; margin-bottom: 40px; padding: 40px 0 0; }
.page-head .crumb {
  margin-bottom: 14px; font-family: var(--hub-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--hub-acc);
}
.page-head h1 {
  margin: 0 0 14px; font-family: var(--hub-display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: none; text-wrap: balance;
  color: var(--hub-text);
  background: linear-gradient(180deg, #ffffff 12%, #b5f3fb 62%, #4fcfe0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-head p.lede { max-width: 620px; margin: 0 auto; font-size: 17px; line-height: 1.65; font-style: normal; color: var(--hub-muted); }
.page-head p.lede a { color: var(--hub-acc); }

/* Wide pages: left-aligned hero band with an item render on the right. */
.container > .page-head {
  text-align: left; min-height: 250px; padding: 44px 0 44px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border-bottom: 1px solid var(--hub-line);
}
.container > .page-head p.lede { margin: 0; }
.container > .page-head::before, .container > .page-head::after { content: ''; position: absolute; pointer-events: none; }
.container > .page-head::before {
  right: -24px; top: 50%; width: 440px; height: 330px; margin-top: -165px;
  background: radial-gradient(closest-side, rgba(94, 230, 242, 0.26), rgba(94, 230, 242, 0.06) 60%, transparent);
  opacity: 0;
}
.container > .page-head::after {
  right: 48px; top: 50%; width: 230px; height: 230px; margin-top: -115px;
  background: var(--hub-art, none) center / contain no-repeat;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(25, 197, 224, 0.35));
}
body[data-page="news"] { --hub-art: url(/images/items/11863.png); }
body[data-page="vote"] { --hub-art: url(/images/items/6199.png); }
body[data-page="store"] { --hub-art: url(/images/items/995.png); }   /* gold coins (OSRS item 995); needs the high-res render, see fetch-item-sprites.ps1 */
body[data-page="wiki"] { --hub-art: url(/images/items/11832.png); }
body[data-page="staff"] { --hub-art: url(/images/items/21003.png); }
body[data-page="support"] { --hub-art: url(/images/items/25975.png); }
body[data-page="dashboard"] { --hub-art: url(/images/items/10551.png); }
body[data-page="news"] .container > .page-head::before,
body[data-page="vote"] .container > .page-head::before,
body[data-page="store"] .container > .page-head::before,
body[data-page="wiki"] .container > .page-head::before,
body[data-page="staff"] .container > .page-head::before,
body[data-page="support"] .container > .page-head::before,
body[data-page="dashboard"] .container > .page-head::before { opacity: 1; }
@media (min-width: 901px) {
  .container > .page-head > * { max-width: calc(100% - 330px); }
}
@media (max-width: 900px) {
  .container > .page-head { min-height: 0; padding: 28px 0 30px; }
  .container > .page-head::before, .container > .page-head::after { display: none; }
}
/* Crumb-only heads (article, player profile) stay compact. */
.container > .page-head[style*="margin-bottom:24px"], .container-narrow > .page-head[style*="margin-bottom:24px"] { min-height: 0; padding: 26px 0 0; border: 0; }
.container > .page-head[style*="margin-bottom:24px"]::before, .container > .page-head[style*="margin-bottom:24px"]::after { display: none; }

/* ---------- F. Panels ---------- */
.panel {
  background: var(--hub-surf);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 70px -40px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.panel h2, .panel h3 { font-family: var(--hub-display); font-weight: 700; letter-spacing: 0.06em; color: var(--hub-text); }
.panel h2 { font-size: 21px; }
.panel h3 { font-size: 16px; letter-spacing: 0.08em; }
.filigree-corners::before, .filigree-corners::after { content: none; }

/* ---------- G. Buttons ---------- */
.btn {
  gap: 10px; padding: 14px 26px; min-height: 50px;
  font-family: var(--hub-ui); font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.2;
  border: 1px solid var(--hub-line-2); border-radius: var(--hub-radius);
  color: var(--hub-text);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  transition: filter 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.btn::before, .btn::after { content: none; }
.btn:hover { border-color: rgba(170, 215, 240, 0.5); background: rgba(255, 255, 255, 0.06); box-shadow: none; transform: translateY(-1px); }
.btn-primary, .btn-mint {
  border-color: transparent; color: var(--hub-on-acc);
  background: linear-gradient(180deg, #8eeef7, var(--hub-acc));
  box-shadow: 0 18px 40px -14px rgba(94, 230, 242, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-primary:hover, .btn-mint:hover {
  border-color: transparent; color: var(--hub-on-acc);
  background: linear-gradient(180deg, #8eeef7, var(--hub-acc));
  box-shadow: 0 18px 44px -12px rgba(94, 230, 242, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.07);
}
.btn-ghost, .btn-ghost:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--hub-line-2); box-shadow: none; }
.btn-ghost:hover { border-color: rgba(170, 215, 240, 0.5); background: rgba(255, 255, 255, 0.06); }
.btn-discord, .btn-discord:hover { border-color: transparent; color: #fff; background: #5865f2; box-shadow: 0 18px 40px -16px rgba(88, 101, 242, 0.8); }
.btn-danger, .btn-danger:hover { border-color: rgba(244, 63, 94, 0.6); color: #ffd5dc; background: rgba(244, 63, 94, 0.12); box-shadow: none; }
.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 11.5px; letter-spacing: 0.14em; }
.btn-lg { min-height: 56px; padding: 17px 34px; font-size: 13px; letter-spacing: 0.16em; }

/* ---------- H. Forms ---------- */
.form-group label { font-family: var(--hub-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--hub-body); }
.form-group .hint { font-style: normal; color: var(--hub-muted); }
.form-group .error-msg, .form-group .ok-msg { font-family: var(--hub-ui); letter-spacing: 0; font-weight: 600; }
.form-group .ok-msg { color: var(--hub-live); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  background: rgba(4, 8, 14, 0.7);
  border: 1px solid var(--hub-line-2);
  border-radius: var(--hub-radius);
  color: var(--hub-text);
  font-family: var(--hub-ui); font-size: 15.5px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hub-acc);
  box-shadow: 0 0 0 3px rgba(94, 230, 242, 0.18);
  background: rgba(6, 12, 20, 0.9);
}
input.valid, select.valid, textarea.valid { border-color: var(--hub-live); }
input::placeholder, textarea::placeholder { color: #66758a; }
select option { background: #0b111c; color: var(--hub-text); }
.checkbox-row input[type="checkbox"], .radio-row input[type="radio"] { accent-color: var(--hub-acc); }
.checkbox-row label, .radio-row label { font-family: var(--hub-ui); color: var(--hub-body); }
.password-strength-bar.good { background: var(--hub-acc); }
.password-strength-bar.strong { background: var(--hub-live); }
.password-strength-label { font-family: var(--hub-ui); font-weight: 700; letter-spacing: 0.14em; }

/* ---------- I. Tables, pagination, badges, alerts, tabs ---------- */
.table-wrap { border-color: var(--hub-line); border-radius: var(--hub-radius); background: var(--hub-surf); }
.tbl thead th {
  font-family: var(--hub-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--hub-muted); background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--hub-line-2);
}
.tbl tbody tr { border-bottom: 1px solid var(--hub-line); }
.tbl tbody tr:hover { background: rgba(94, 230, 242, 0.05); }
.tbl tbody td { font-size: 14.5px; }
.pagination button, .pagination a {
  min-width: 40px; height: 40px; border-color: var(--hub-line); border-radius: var(--hub-radius);
  background: var(--hub-surf); font-family: var(--hub-ui); font-weight: 700; color: var(--hub-body);
}
.pagination button:hover, .pagination a:hover { border-color: var(--hub-line-2); color: var(--hub-text); }
.pagination button[aria-current="page"], .pagination a[aria-current="page"] { background: var(--hub-acc); border-color: var(--hub-acc); color: var(--hub-on-acc); }
.pagination button:disabled { opacity: 0.4; }
.badge { font-family: var(--hub-ui); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.badge-online { color: var(--hub-live); background: rgba(89, 227, 160, 0.1); }
.alert { border-radius: var(--hub-radius); font-size: 14.5px; line-height: 1.6; }
.alert-info { color: var(--hub-body); border-color: var(--hub-line-2); background: rgba(94, 230, 242, 0.06); }
.alert-success { color: #b9f5d8; border-color: rgba(89, 227, 160, 0.5); background: rgba(89, 227, 160, 0.08); }
.alert-warning { color: #f9dc98; border-color: rgba(245, 196, 81, 0.5); background: rgba(245, 196, 81, 0.08); }
.alert-error { color: #ffc2cc; border-color: rgba(244, 63, 94, 0.55); background: rgba(244, 63, 94, 0.1); }
.skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(94, 230, 242, 0.12), rgba(255, 255, 255, 0.04)); background-size: 200% 100%; }
.empty-state h3 { font-family: var(--hub-display); letter-spacing: 0.08em; color: var(--hub-body); }
.tabs { border-bottom: 1px solid var(--hub-line); gap: 6px; }
.tab { font-family: var(--hub-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--hub-muted); }
.tab:hover { color: var(--hub-text); }
.tab[aria-selected="true"] { color: var(--hub-text); border-bottom-color: var(--hub-acc); }

/* ---------- J. Readable sans everywhere the pages asked for one ---------- */
html:root { --pp-ui: var(--hub-ui); }
body #tab-overview { --dsh-read: var(--hub-ui); }
body .dl-wrap { --dl-read: var(--hub-ui); }
body .st-layout, body .st-modal { --st-read: var(--hub-ui); }
body .ssa-modal { --ssa-read: var(--hub-ui); }
body #top-voters { --tv-read: var(--hub-ui); }
body .dr-grid { --dr-read: var(--hub-ui); }
body .wiki-body { --wiki-read: var(--hub-ui); }

/* ---------- K. Shared content blocks ---------- */
.news-card, .vote-card, .store-card, .profile-head, .faq details, .filter-bar {
  background: var(--hub-surf); border-color: var(--hub-line); border-radius: var(--hub-radius);
}
.news-card:hover, .vote-card:hover, .store-card:hover { border-color: rgba(94, 230, 242, 0.45); }
.news-card .media {
  background: radial-gradient(closest-side, rgba(94, 230, 242, 0.16), transparent 74%), rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--hub-line);
}
.news-card .meta, .news-card .read-more { font-family: var(--hub-ui); font-weight: 700; letter-spacing: 0.16em; }
.news-card h3 { font-size: 18px; line-height: 1.3; letter-spacing: 0.03em; }
.news-card p { font-size: 14px; line-height: 1.6; color: var(--hub-muted); }
.vote-card .reward, .store-card .price { font-family: var(--hub-ui); letter-spacing: 0.02em; }
.faq summary { font-family: var(--hub-ui); font-size: 15.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hub-text); }
.faq details[open] summary { border-bottom-color: var(--hub-line); }
.faq .faq-body { font-size: 15px; color: var(--hub-body); }
.avatar { background: radial-gradient(closest-side, rgba(94, 230, 242, 0.3), rgba(12, 30, 44, 0.9)); border: 1px solid rgba(94, 230, 242, 0.5); text-shadow: none; }
.profile-name { letter-spacing: 0.06em; }
.profile-meta { font-weight: 700; letter-spacing: 0.14em; }
.skill { background: rgba(4, 8, 14, 0.6); border-color: var(--hub-line); }
.skill .name { font-weight: 700; }

/* ---------- L. Page-specific polish (prefixed with `body` so these win over each page's own <style>) ---------- */

/* News: featured post */
body[data-page="news"] #featured-panel { border-color: var(--hub-line-2) !important; }
body[data-page="news"] #featured-panel > div {
  background: radial-gradient(520px 260px at 88% 10%, rgba(94, 230, 242, 0.2), transparent 70%), rgba(13, 20, 32, 0.4) !important;
}

/* Hiscores: hero in the same shape as the other page heads */
body .hs-hero {
  min-height: 250px; margin-bottom: 28px; padding: 44px 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
  border: 0; border-bottom: 1px solid var(--hub-line); border-radius: 0; overflow: visible;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .hs-hero::before {
  inset: auto; right: -24px; top: 50%; width: 440px; height: 330px; margin-top: -165px;
  background: radial-gradient(closest-side, rgba(94, 230, 242, 0.26), rgba(94, 230, 242, 0.06) 60%, transparent);
}
body .hs-hero::after {
  content: ''; position: absolute; pointer-events: none;
  right: 48px; top: 50%; width: 230px; height: 230px; margin-top: -115px;
  background: url(/images/items/21295.png) center / contain no-repeat;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(25, 197, 224, 0.35));
}
body .hs-hero h1 {
  font-weight: 700; font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 12%, #b5f3fb 62%, #4fcfe0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: none;
}
body .hs-hero p { margin: 14px 0 0; max-width: min(620px, calc(100% - 330px)); font-size: 17px; line-height: 1.65; letter-spacing: 0; color: var(--hub-muted); }
body .hs-hero .hs-hero-rule { display: none; }
@media (max-width: 900px) {
  body .hs-hero { min-height: 0; padding: 28px 0 30px; }
  body .hs-hero::before, body .hs-hero::after { display: none; }
  body .hs-hero p { max-width: none; }
}
body .hs-toptab, body .hs-mode, body .hs-main table.tbl thead th { font-family: var(--hub-ui); font-weight: 700; letter-spacing: 0.14em; }

/* Download page head */
body .dl-eyebrow { font-weight: 700; letter-spacing: 0.2em; color: var(--hub-acc); }
body .dl-head h1 {
  font-weight: 700; letter-spacing: 0.04em; line-height: 1.04; font-size: clamp(34px, 5.2vw, 62px);
  background: linear-gradient(180deg, #ffffff 12%, #b5f3fb 62%, #4fcfe0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body .dl-sub { color: var(--hub-muted); font-size: 17px; }
body .sn-btn { font-family: var(--hub-ui); font-weight: 800; letter-spacing: 0.14em; }

/* Store */
body .st-cat, body .st-buy, body .st-benefits-btn, body .ssa-btn, body .featured-hero .fh-btn {
  font-family: var(--hub-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.14em;
}
body .st-cat, body .st-buy, body .st-benefits-btn { border-radius: var(--hub-radius); }
body .st-side-title, body .st-main-title { font-family: var(--hub-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--hub-muted); }
body .st-price b, body .st-modal-price b { font-family: var(--hub-ui); font-weight: 800; text-shadow: none; font-variant-numeric: tabular-nums; }
body .st-name { letter-spacing: 0.04em; }
body .cart-fab { font-weight: 800; letter-spacing: 0.14em; }

/* Vote */
body .vote-nav h4, body .vote-nav-toggle, body #vote-shop .vs-group span, body .vs-feat-tag {
  font-family: var(--hub-ui); font-weight: 700; letter-spacing: 0.18em;
}
body #vote-shop .vs-cost { font-family: var(--hub-ui); font-weight: 800; }
/* Top-voters list: the progress bar must sit behind the row, not take up
   space in it (the names were being pushed sideways by its width). */
body #top-voters .tv-row > .tv-bar { position: absolute; }

/* Wiki */
body .wiki-nav h4, body .wiki-nav-toggle { font-family: var(--hub-ui); font-weight: 700; letter-spacing: 0.18em; }
body[data-page="wiki"] .container > .page-head p.lede { font-size: 17px; max-width: 640px; }
body[data-page="wiki"] .container > .page-head .wiki-quickfacts { justify-content: flex-start; }
body .wiki-quickfacts span { background: rgba(4, 8, 14, 0.5); border-color: var(--hub-line-2); }
/* Checklist rows: keep the sentence as one line of text instead of
   splitting every link and bold word into its own flex column. */
body .checklist li { display: block; position: relative; padding-left: 50px; }
body .checklist li::before { position: absolute; left: 18px; top: 12px; }

/* Forums (disabled, but themed for when they return) */
body .forum-nav h4, body .forum-nav .nav-section, body .forum-nav-toggle { font-family: var(--hub-ui); font-weight: 700; letter-spacing: 0.18em; }

/* Hiscores on phones: let the skill list shrink to the screen instead of
   forcing the page wider (the grid column was sized by its content). */
@media (max-width: 900px) {
  body .hs-body { grid-template-columns: minmax(0, 1fr); }
  body .hs-sidebar, body .hs-main { min-width: 0; }
}

/* Support page ticket tabs: the panels are marked role="tabpanel" +
   aria-hidden (site.js flips aria-hidden on click) but never got the
   .tab-panel class, so all five forms were showing at once. Hide the
   inactive ones. */
body[data-page="support"] [role="tabpanel"][aria-hidden="true"] { display: none; }

/* News article body (markdown output) */
body #art-content { color: var(--hub-body); line-height: 1.75; }
body #art-content h2, body #art-content h3 { margin: 30px 0 12px; }
body #art-content h2:first-child, body #art-content h3:first-child { margin-top: 0; }
body #art-content p { margin: 0 0 14px; }
body #art-content ul, body #art-content ol { margin: 0 0 16px; padding-left: 24px; }
body #art-content li { margin: 4px 0; }
body #art-content li::marker { color: var(--hub-acc); }
body #art-content a { color: var(--hub-acc); text-decoration: underline; text-underline-offset: 3px; }
body #art-content code { font-family: var(--hub-mono); font-size: 0.9em; color: var(--hub-acc); background: rgba(94, 230, 242, 0.1); border-radius: 4px; padding: 2px 6px; }
body #art-content blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 2px solid var(--hub-acc); color: var(--hub-muted); }
body #art-excerpt { font-style: normal !important; color: var(--hub-muted); }

/* ---------- M. Readability pass (2026-10-04) ----------
   The aura now sits behind the whole page, so: boxes are more solid (tokens above), grey text is brighter
   (tokens above), the header and footer get their own dark backing, the framed boxes get a clearer edge,
   and nothing a visitor has to read is smaller than 12px. */

/* Header: a soft dark band behind the top of the page, so the menu never sits on bright cloud. It is part of
   the page (scrolls away with the header), above the aura layers and below all content. */
body::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: -7; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.74) 0%, rgba(4, 6, 12, 0.46) 52%, rgba(4, 6, 12, 0) 100%);
}
.hub-nav .nav-btn { color: #c5d0de; }
.hub-online, .hub-nav .top-utility-inner,
.hub-nav .top-utility-inner a { color: #c5d0de; }

/* Footer: its own dark glass band across the full width. */
footer.site-footer {
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.78), rgba(4, 6, 12, 0.92));
  border-top-color: var(--hub-line-2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.site-footer .footer-col h4 { font-size: 12px; }
.site-footer .footer-col a { font-size: 14.5px; color: #c5d0de; }
.site-footer .footer-brand p { font-size: 14.5px; color: #b9c6d7; }
.site-footer .footer-bottom { color: #aab8cb; }

/* Framed boxes: a near-solid fill, a clearer hairline, a lit top edge and a deeper drop shadow. */
.panel {
  background: linear-gradient(180deg, rgba(15, 22, 36, 0.9), rgba(8, 13, 22, 0.93));
  border-color: rgba(170, 215, 240, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 34px 60px -36px rgba(0, 0, 0, 0.9);
}

/* Intro lines and breadcrumbs that sit straight on the aura: a soft dark edge keeps them crisp. */
.page-head p, .hs-hero p, .crumb, main > .container > p { text-shadow: 0 1px 2px rgba(2, 4, 8, 0.75), 0 0 18px rgba(2, 4, 8, 0.55); }   /* not the titles: some are gradient-filled and a shadow would show through them */

/* Size floor: nothing a visitor has to read is under 12px. These are the small labels the pages set at 9-11.5px in
   their own <style> blocks, some through #id selectors, so the floor uses !important to be sure it wins. */
.crumb, .form-group > label, .text-xs, .stat-label, .read-more, .st-side-title, .st-main-title, .dl-steps-title, .dl-eyebrow,
.hs-mode, .hs-mode-cell, .hs-toptab, .hs-xp-label, .pc-sub, .vs-vp, .tv-pill, .tv-total-label, .rank-up-note,
.dl-opt-ext, .dl-opt-arch, .dl-opt-meta, .dl-rec, .sn-vt-title, .sn-vt-foot, .dash-tier, .dash-pill, .dash-avatar-cam,
.badge, .st-pop, .fh-badge, .fh-ribbon, .fh-timer, .fh-timer-lbl, table th, .vs-group small, .vote-nav h4,
.news-card .meta, .article-meta, .hub-play, .btn-sm, .lh-off { font-size: 12px !important; }
body[data-page="vote"] .panel > h3, .article-back, a.text-mint.text-xs { font-size: 12px !important; }
.st-off span { font-size: 10px !important; }           /* the word "off" in the corner ribbon; the number beside it is 12.5px */
.text-dim, .hint { color: var(--hub-muted); }
@media (max-width: 420px) {
  .hub-nav .nav-btn { font-size: 12px; letter-spacing: 0.08em; }
  .hub-online, .hub-nav .top-utility-inner { font-size: 12px; letter-spacing: 0.06em; }
}

/* Notices: the colour tint stays, but on a dark base so the aura does not show through behind the words. */
.alert-info { background: linear-gradient(rgba(94, 230, 242, 0.07), rgba(94, 230, 242, 0.07)), rgba(8, 13, 22, 0.9); }
.alert-success { background: linear-gradient(rgba(89, 227, 160, 0.09), rgba(89, 227, 160, 0.09)), rgba(8, 13, 22, 0.9); }
.alert-warning { background: linear-gradient(rgba(245, 196, 81, 0.09), rgba(245, 196, 81, 0.09)), rgba(8, 13, 22, 0.9); }
.alert-error { background: linear-gradient(rgba(244, 63, 94, 0.11), rgba(244, 63, 94, 0.11)), rgba(8, 13, 22, 0.9); }
.tab { color: #c5d0de; }
.sn-vt-foot, .featured-hero .fh-ribbon span { font-size: 12px !important; }

/* Dimmed states were too faint to read. */
body #vote-shop .vote-card.locked { opacity: 0.86; }
body .st-buy:disabled, body .btn:disabled, body .btn[disabled] { opacity: 0.72; }
body .pagination button:disabled, body .pagination a[aria-disabled="true"] { opacity: 0.7; }
body .st-price s { opacity: 1; color: #f2a0a0; }

/* Descriptions inside cards: one step larger and brighter. */
body .vs-desc { font-size: 14px; color: var(--hub-body); }
body .st-desc { font-size: 13.5px; color: var(--hub-body); }

/* ---------- N. Store cards: smaller pictures (2026-10-04) ----------
   The picture box was a full square as wide as the card (about 365px on a 2560-wide screen) with the item at 84% of it.
   Now the box is a fixed, shorter band and the item sits at about half its old size. */
body .st-thumb { aspect-ratio: auto; height: clamp(150px, 13vw, 210px); }
body .st-img { width: auto; height: clamp(112px, 9.8vw, 158px); max-width: 70%; }   /* a fixed height, not a %: the box's grid row is auto-sized, so a % height would be ignored */
/* The generated gem (shown when a product has no picture at all) follows the same size instead of 64% of the card. */
body .st-thumb .st-gemwrap { width: auto; height: clamp(112px, 9.8vw, 158px); }
body .st-thumb .st-gemwrap .sc-gem { width: auto; height: 100%; }