@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks. Bridge the swap window so Inter / Space Grotesk
   loading does not reflow text. Eliminates the 0.217 CLS on bracket calc
   caused by Arial-vs-Inter width difference at fonts.ready. Values from
   capsize / @next/font (Arial baseline). */
@font-face {
  font-family: 'Inter Fallback';
  /* Chained local() so the fallback resolves on every OS:
     Arial (Win), Helvetica/Neue (mac/iOS), Roboto (Android), Liberation Sans (Linux servers).
     All are Arial-metric-compatible; the size-adjust below is tuned to Arial. */
  src: local('Arial'),
       local('Helvetica Neue'),
       local('Helvetica'),
       local('Roboto'),
       local('Liberation Sans');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0.00%;
  size-adjust: 107.06%;
}
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial'),
       local('Helvetica Neue'),
       local('Helvetica'),
       local('Roboto'),
       local('Liberation Sans');
  ascent-override: 98.30%;
  descent-override: 27.80%;
  line-gap-override: 0.00%;
  size-adjust: 100.70%;
}
:root {
    /* Surfaces — warm near-black with purple undertone (was cool #0f0f0f) */
    --bg-dark: #0e0b14; --card-bg: #1a1420; --card-bg-hi: #241c2e;
    --card-border: rgba(212,175,55,0.10); --card-hover-glow: rgba(212,175,55,0.22);
    --nav-bg: rgba(14,11,20,0.95); --nav-border: rgba(212,175,55,0.08);

    /* Text — warm off-white, not pure #fff (reduces eye strain on long sessions) */
    --text-primary: #f1ecf5; --text-secondary: #b8b0c2; --text-muted: #786f85;

    /* Accents — gold primary, purple secondary. Both WCAG-verified on --bg-dark. */
    --accent: #d4af37; --accent-hover: #e6c55a;            /* gold 6.2:1 AAA */
    --accent-purple: #a78bfa; --accent-purple-hover: #c4b5fd; /* purple 6.0:1 AAA */

    /* Semantic (unchanged — all proven accessible) */
    --success: #4ade80; --danger: #f87171; --warning: #fbbf24; --info: #60a5fa;

    /* Brand gradients — purple kept as primary brand signature */
    --gradient-navy: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-purple: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #b88a1f 100%);
    --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --gradient-red: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

    /* Post-category pills (semantic, kept) */
    --pill-news: #3b82f6; --pill-strategy: #10b981; --pill-spoilers: #a855f7;
    --pill-deck-guides: #f59e0b; --pill-set-reviews: #ef4444;

    /* Shadows — slight warmth on rgba black so they blend into the warm surfaces */
    --shadow-sm: 0 1px 2px rgba(14,11,20,0.35);
    --shadow-md: 0 4px 8px rgba(14,11,20,0.45);
    --shadow-lg: 0 10px 18px rgba(14,11,20,0.55);

    /* Form inputs — canonical values propagated to all tools via /css/components.css */
    --input-bg: #05030a;
    --input-bg-focus: #07041c;
    --input-border-color: rgba(167, 139, 250, 0.50);
    --input-border-hover: rgba(167, 139, 250, 0.75);
    --input-focus-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22), inset 0 1px 0 rgba(255,255,255,0.05);
    --input-radius: 8px;
    --input-placeholder: rgba(184, 176, 194, 0.55);

    /* Buttons — canonical family propagated via /css/components.css */
    --btn-radius: 10px;
    --btn-radius-sm: 8px;
    --btn-padding-primary: 0.75rem 2rem;
    --btn-padding-secondary: 0.55rem 1.25rem;
    --btn-padding-specialty: 0.55rem 1.5rem;
    --btn-border-width: 1.5px;
    --btn-secondary-bg: rgba(212, 175, 55, 0.16);
    --btn-secondary-bg-hover: rgba(212, 175, 55, 0.28);
    --btn-secondary-border: rgba(212, 175, 55, 0.7);
    --btn-share-bg: rgba(167, 139, 250, 0.22);
    --btn-share-bg-hover: rgba(167, 139, 250, 0.36);
    --btn-share-border: rgba(167, 139, 250, 0.6);
    --btn-share-color: #d8b4fe;
    --btn-download-bg: rgba(34, 197, 94, 0.22);
    --btn-download-bg-hover: rgba(34, 197, 94, 0.36);
    --btn-download-border: rgba(34, 197, 94, 0.6);
    --btn-download-color: #86efac;
    --btn-discord-bg: rgba(88, 101, 242, 0.22);
    --btn-discord-bg-hover: rgba(88, 101, 242, 0.36);
    --btn-discord-border: rgba(88, 101, 242, 0.6);
    --btn-discord-color: #a5b4fc;
    --btn-danger-bg: rgba(248, 113, 113, 0.18);
    --btn-danger-bg-hover: rgba(248, 113, 113, 0.32);
    --btn-danger-border: rgba(248, 113, 113, 0.55);
    --btn-danger-color: #fca5a5;
    --btn-success-bg: rgba(74, 222, 128, 0.18);
    --btn-success-bg-hover: rgba(74, 222, 128, 0.32);
    --btn-success-border: rgba(74, 222, 128, 0.55);
    --btn-success-color: #86efac;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x pair — hidden fallback for pre-iOS-16 Safari (which doesn't
   recognize clip); newer browsers overwrite with clip. Prevents the
   horizontal scrollbar on older iPhones when a child briefly exceeds viewport. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body { font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; overflow-x: clip; }
.table-scroll-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5rem; }
.table-scroll-wrap > table { margin: 0; }
h1,h2,h3,h4,h5,h6 { font-family: 'Space Grotesk', 'Space Grotesk Fallback', -apple-system, sans-serif; font-weight: 600; line-height: 1.3; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-purple); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(15,15,15,0.98); border-bottom: 1px solid var(--nav-border); z-index: 1000; height: 64px; display: flex; align-items: center; }
.nav-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-logo { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.5rem; font-weight: 700; background: var(--gradient-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--accent); font-weight: 600; }
.mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }
main { margin-top: 64px; min-height: calc(100vh - 64px); }
footer { border-top: 1px solid var(--card-border); padding: 2rem 0; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.footer-logo { font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; font-size: 1.25rem; font-weight: 700; background: var(--gradient-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-text { color: var(--text-muted); font-size: 0.875rem; }
.footer-social { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; justify-content: center; margin-bottom: 0.5rem; }
.footer-social a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-primary); font-size: 0.9rem; font-weight: 500; }
.footer-social a:hover { color: var(--accent-purple); }
.footer-social svg { flex-shrink: 0; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--text-muted); font-size: 0.8rem; }
.footer-links a:hover { color: var(--text-secondary); }
.wubrg-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.25rem; }
.mana-dot { width: 18px; height: 18px; border-radius: 50%; }
.mana-dot-W { background: url(/img/mana/W.svg) no-repeat center / contain; }
.mana-dot-U { background: url(/img/mana/U.svg) no-repeat center / contain; }
.mana-dot-B { background: url(/img/mana/B.svg) no-repeat center / contain; }
.mana-dot-R { background: url(/img/mana/R.svg) no-repeat center / contain; }
.mana-dot-G { background: url(/img/mana/G.svg) no-repeat center / contain; }
@media (max-width: 768px) {
    .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg-dark); border-bottom: 1px solid var(--nav-border); flex-direction: column; padding: 1rem; gap: 0; z-index: 999; }
    .nav-links.active { display: flex; }
    .nav-links a { padding: 0.75rem 1rem; display: block; border-bottom: 1px solid var(--card-border); }
    .nav-links a:last-child { border-bottom: none; }
    .mobile-menu-btn { display: block; min-width: 44px; min-height: 44px; font-size: 1.5rem; }
    .footer-social { gap: 1rem; }
    .footer-social a { padding: 0.5rem 0.25rem; min-height: 44px; }
    .footer-links { gap: 0.75rem; }
    .footer-links a { padding: 0.5rem 0.25rem; min-height: 44px; display: inline-flex; align-items: center; }
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
  font-size: 0.9rem;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }
.breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.breadcrumb a { color: rgba(255,255,255,0.7); padding: 0.25rem 0; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb a:hover { color: var(--accent-purple); }
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  opacity: 0.5;
}