/* Self-hosted typefaces (website/static/fonts/, fetched by scripts/fetch_fonts.py).
   Latin subset only; the system fallbacks in the font stacks cover the rest. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/rajdhani-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-latin-700.woff2') format('woff2');
}

/* ============================================================
   CardShark — Global Styles
   Theme: Deep navy + cyan/gold card-table aesthetic
   Ported from TriviaForge's website/static/css/style.css, recoloured and
   pruned to the markup CardShark actually renders (no login, no pricing,
   no dashboard/admin/profile/forms).
   ============================================================ */

/* The typefaces are declared at the top of this file and served from
   website/static/fonts/ (self-hosted since 2026-09-15); no page requests a
   third-party host. */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --bg:          #0b1631;
    --bg-2:        #0e1a3b;
    --bg-3:        #111f45;
    --bg-4:        #17285a;
    --bg-5:        #1e3270;

    --accent:      #38bdf8;   /* cyan from the banner's shark outline */
    --accent-dark: #0ea5e9;
    --gold:        #f0c040;   /* ranks, emphasis */
    --red:         #f87171;   /* suit marks only */
    --accent-glow: rgba(56, 189, 248, 0.18);
    --accent-dim:  rgba(56, 189, 248, 0.08);
    --accent-border: rgba(56, 189, 248, 0.35);

    --text:        #eef2ff;
    --text-2:      #b7c2e6;
    --text-3:      #98a5cf;

    --border:      #1f2f5c;
    --border-2:    #2a3c6e;

    --radius:      8px;
    --radius-lg:   14px;
    --radius-xl:   20px;

    --shadow-accent: 0 0 40px rgba(56, 189, 248, 0.25);
    --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: 64px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* ── Layout Helpers ─────────────────────────────────────────── */
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 6rem 1.5rem;
    max-width: 1160px;
    margin: 0 auto;
}

/* The fixed nav is 64px tall; without this a same-page #games/#features/#faq jump lands
   the target's heading right under it. */
#games, #features, #faq { scroll-margin-top: 80px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary,
a.btn-primary {
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
}
.btn-primary:hover {
    background: var(--accent-dark);
    box-shadow: 0 0 36px rgba(56, 189, 248, 0.55);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border-2);
}
.btn-outline:hover {
    border-color: var(--accent-border);
    color: var(--text);
}

.btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

/* ── Navbar ─────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 64px;
    background: rgba(11, 22, 49, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
}
.nav-links a {
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-2);
    transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
    color: var(--text);
    background: var(--bg-4);
}
.nav-links .nav-cta { margin-left: 0.5rem; }
.nav-links a.btn-primary { color: var(--bg); font-weight: 700; }

/* ── Nav collapse point ─────────────────────────────────────
   The link row collapses to the hamburger HERE, at 960px -- not at the 768px
   mobile breakpoint the rest of the layout uses. Deliberate, and measured:
   CardShark's nav holds at most 5 items (Games, Leaderboard, FAQ, an optional
   Community link, and the Add to Discord CTA), and even that short row starts
   crowding the logo well before the 768px mobile breakpoint, so it collapses
   at 960px instead.

   The hamburger must NOT live inside .nav-links: no rule can re-display a
   child of a display:none parent, which is how mobile once lost all
   navigation. It sits in .nav-user, a sibling (see base.html).

   ⚠️ These two queries are a MATCHED PAIR and must stay complementary
   (max 960 / min 961). CardShark has no logged-in state, so .nav-user always
   holds only the hamburger/dropdown (TriviaForge's guest-vs-avatar split
   collapses to one case here) — the second query hides that same .nav-user
   above the breakpoint so desktop shows the link row, never both. If the two
   ever overlap or leave a gap, some width band gets either two navigations or
   none. Change both or neither. Adding a 10th nav item means re-measuring
   this number, not nudging it. */
@media (max-width: 960px) {
    .nav-links { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 1.5rem 5rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 60%);
}

.hero-glow {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(ellipse, rgba(56, 189, 248, 0.10) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.hero-content { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(3.2rem, 9vw, 6.5rem);
    background: linear-gradient(140deg, #ffffff 30%, var(--gold) 70%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.hero-sub {
    font-size: 1.1rem;
    color: var(--text-2);
    max-width: 480px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.hero-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 5rem;
}

.hero-divider {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--border);
}

.hero-stats {
    display: flex;
    gap: 3.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 3rem;
}

.hero-stat-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.75rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* ── Section Headers ────────────────────────────────────────── */
.section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
}
.section-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin-bottom: 0.75rem;
}
.section-sub {
    font-size: 1rem;
    color: var(--text-2);
    max-width: 480px;
    margin: 0 auto;
}

/* ── Feature Cards ──────────────────────────────────────────── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.25rem;
    margin-top: 3.5rem;
}

.feature-card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
    border-color: var(--accent-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.feature-icon {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    line-height: 1;
}
.feature-card h3,
.feature-card h4 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.feature-card p {
    font-size: 0.875rem;
    color: var(--text-2);
    line-height: 1.65;
}

/* ── Steps ──────────────────────────────────────────────────── */
.steps-section {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
}

.step { text-align: center; }

.step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
}
.step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step p  { font-size: 0.875rem; color: var(--text-2); }
.steps-more,
.steps-trouble { text-align: center; max-width: 640px; margin: 2rem auto 0; font-size: 0.9rem; color: var(--text-2); }
.steps-trouble { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-3); }
.steps-trouble .game-command { margin-top: 0; }
.steps-more a, .steps-trouble a, .feature-card p a { color: var(--accent); }
.steps-more a:hover, .steps-trouble a:hover, .feature-card p a:hover { text-decoration: underline; }

/* ── Prefer it in the channel? (the slash commands, secondary) ── */
.channel-games { max-width: 960px; }
.channel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.channel-group { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.channel-group h3 { font-size: 1rem; margin: 0 0 .25rem; color: var(--text-2); }
.channel-group p { margin: 0; }
.channel-group .game-command { margin: .35rem .25rem 0 0; }

/* ── CTA Band ───────────────────────────────────────────────── */
.cta-band {
    text-align: center;
    padding: 6rem 1.5rem;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.07) 0%, transparent 65%);
    pointer-events: none;
}
.cta-band h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: 1rem;
    position: relative;
}
.cta-band p {
    color: var(--text-2);
    margin-bottom: 2.5rem;
    position: relative;
}
.cta-band .btn { position: relative; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 1.5rem;
}
.footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}
.footer-links {
    display: flex;
    /* Without wrapping, the links are the ONLY source of horizontal scroll on
       every page at phone widths. */
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    list-style: none;
}
.footer-links a {
    font-size: 0.82rem;
    color: var(--text-3);
    transition: color 0.15s;
}
.footer-links a:hover { color: var(--text-2); }
.footer-also {
    font-size: 0.78rem;
    color: var(--text-3);
}
.footer-also a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.footer-also a:hover { color: var(--text); }
.footer-copy {
    font-size: 0.78rem;
    color: var(--text-3);
}

/* ── Page Header (inner pages) ──────────────────────────────── */
.page-header {
    padding: 6.5rem 1.5rem 2.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.04) 0%, transparent 100%);
}
.page-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.4rem; }
.page-header p  { color: var(--text-2); font-size: 0.95rem; }

/* ── How to play ─────────────────────────────────────────────── */
.howto { max-width: 960px; padding-top: 2.5rem; }
.howto h2 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.howto-first {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--bg-3);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}
.howto-first .step-num { flex: none; margin: 0; }
.howto-first p { color: var(--text-2); margin-bottom: 1rem; }
.howto-first p.howto-note { margin: 1rem 0 0; font-size: 0.875rem; }
.promo { max-width: 1000px; padding-top: 3rem; padding-bottom: 3rem; }
.howto-video video, .promo-video video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: #000;
}
.howto-video-link { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-3); text-align: center; }
.howto-video-link a, .howto-video a { color: var(--accent); }
.howto-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}
.howto-card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.howto-card ol { margin: 0.75rem 0 0 1.25rem; color: var(--text-2); line-height: 1.6; }
.howto-card li { margin-bottom: 0.4rem; padding-left: 0.2rem; }
.howto-card strong { color: var(--text); }
.howto-sub { font-size: 0.85rem; color: var(--text-3); }
.howto-tip { margin-top: 0.9rem; font-size: 0.875rem; color: var(--text-2); }
.howto-trouble { margin-top: 2.5rem; border-left-color: var(--text-3); }
.howto-trouble > p { color: var(--text-2); }
.howto-rules { margin-top: 2.5rem; }
.howto-tip a { color: var(--accent); }
@media (max-width: 560px) {
    .howto-first { flex-direction: column; padding: 1.25rem; }
    .howto-first .btn { white-space: normal; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-stats { gap: 2rem; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .section { padding: 4rem 1.25rem; }
}

/* ── Navbar hamburger + dropdown ─────────────────────────────
   CardShark has no logged-in state, so this is the only nav-user markup —
   TriviaForge's separate avatar/dropdown-logout rules for signed-in users
   are dropped entirely. */
.nav-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-hamburger {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color 0.15s;
}
.nav-hamburger:hover { border-color: var(--accent); }

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 200;
  overflow: hidden;
}
/* A child cannot rescue a display:none parent — .nav-dropdown itself must
   toggle to visible; nothing nested inside it can override that. */
.nav-dropdown.open { display: block; }

.nav-dropdown a {
  display: block;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.nav-dropdown a:hover { background: var(--bg-3); color: var(--text); }

/* The hamburger/dropdown are for the mobile breakpoint only — above it the
   full link row (.nav-links) is visible and this would be a second,
   redundant navigation. ⚠️ 961 is the complement of the 960 above; see that
   comment — change both or neither. */
.nav-dropdown-cta { color: var(--accent) !important; font-weight: 700; }
@media (min-width: 961px) {
  .nav-user { display: none; }
}

/* ── CardShark additions ───────────────────────────────────── */
.hero-banner { width: min(100%, 1000px); height: auto; margin: 0 auto 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.game-command { display: inline-block; margin-top: .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--accent); background: var(--accent-dim); padding: .15rem .5rem; border-radius: 4px; }
.group-title { font-family: 'Rajdhani', system-ui, sans-serif; font-size: 1.4rem; color: var(--gold); margin: 2rem 0 .75rem; text-align: center; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; max-width: 960px; margin: 0 auto; }
.faq-card { background: var(--bg-3); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; text-align: left; }
.faq-card h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.faq-card p { font-size: .9rem; color: var(--text-2); margin: 0; line-height: 1.55; }
.lb-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--bg-3); border-radius: var(--radius-lg); overflow: hidden; }
.lb-table th, .lb-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.lb-table th { color: var(--accent); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.lb-table tr:nth-child(even) td { background: var(--bg-4); }
/* Build A17: the Activity's "🏆 Leaderboard" button opens a board at #u-<discord id> (a fragment, so it
   never reaches a server log): that row is lit and scrolled clear of the fixed 64px nav. */
.lb-table tr[id] { scroll-margin-top: 96px; scroll-margin-bottom: 24px; }
.lb-table tr:target td { background: rgba(216, 182, 74, 0.22); }
.lb-table tr:target td:first-child { box-shadow: inset 4px 0 0 #d8b64a; }
.lb-table tr:target .lb-player { color: var(--text); font-weight: 700; }
.rank { font-weight: 700; color: var(--gold); }
.legal-container { max-width: 820px; }
.legal-container h2 { color: var(--accent); margin: 2.5rem 0 1rem; font-size: 1.35rem; }
.legal-container h3 { color: var(--text); margin: 1.5rem 0 .5rem; font-size: 1.05rem; }
.legal-container p, .legal-container li { color: var(--text-2); line-height: 1.7; }
.legal-container ul { margin: .5rem 0 1rem 1.25rem; }
.legal-container li { margin-bottom: .5rem; }
.legal-container a { color: var(--accent); }
.suit-red { color: var(--red); }

/* ── Commands page ─────────────────────────────────────────── */
.cmd-container { max-width: 960px; }
.cmd-container .group-title { text-align: left; margin-top: 2.5rem; }
.cmd-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .95rem; }
.cmd-table th { text-align: left; color: var(--text-2); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding: .5rem .6rem; border-bottom: 1px solid var(--border, rgba(255,255,255,.12)); }
.cmd-table td { padding: .6rem; vertical-align: top; color: var(--text-2); border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); }
.cmd-table td:nth-child(2) { color: var(--text); white-space: nowrap; }
.cmd-table td:nth-child(3) { white-space: nowrap; }
.cmd-table .game-command { margin-top: 0; white-space: nowrap; }
.cmd-note { color: var(--text-2); line-height: 1.7; margin: .5rem 0 1.5rem; }
.cmd-note .game-command { margin-top: .3rem; }
@media (max-width: 640px) {
    .cmd-table thead { display: none; }
    .cmd-table tr { display: block; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
    .cmd-table td { display: block; border: 0; padding: .15rem 0; }
    .cmd-table td:nth-child(2) { white-space: normal; font-weight: 600; }
}

/* ── Per-game leaderboards (A11) ───────────────────────────── */
.board-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.board-grid { margin-top: 1.5rem; }
.board-card { display: block; color: inherit; text-decoration: none; padding: 1.25rem 1.5rem; }
.board-card h3 { margin-bottom: .35rem; }
.board-kind { color: var(--accent); font-weight: 600; }
.lb-note { background: var(--bg-3); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); padding: .9rem 1.1rem; color: var(--text-2); margin: 0 0 1rem; }
.lb-subtitle { font-size: 1.15rem; margin: 2rem 0 .25rem; color: var(--text-2); }
.lb-scroll { overflow-x: auto; }
.lb-player { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); }
.lb-player:hover { color: var(--accent); }
.lb-provisional { font-size: .75rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-left: .3rem; }
@media (max-width: 520px) {
  .lb-hide-sm { display: none; }
  .lb-table { font-size: .9rem; }
  .lb-table th, .lb-table td { padding: .55rem .45rem; }
  .lb-table th { font-size: .7rem; letter-spacing: .02em; white-space: nowrap; }
}