/* =============================================================================
   MAJOR SIMULATOR — STYLES
   Faithful port of the original app/globals.css design system (hero, sections,
   feature/step/article cards, FAQ, reviews carousel, footer) plus the in-game
   UI primitives (buttons, cards, bars, chips, fields, toasts).

   Fonts: Oxanium for headings (h1–h6), Poppins for all body text and buttons.
   Self-hosted below (files in ./fonts) — there is no Google Fonts request, so
   the page has no third-party dependency and works 100% offline, including
   when index.html is opened directly from disk.
   ========================================================================== */

/* ---------- self-hosted fonts (work offline / file://) ---------- */
@font-face { font-family:'Oxanium'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/oxanium-600.woff2') format('woff2'); }
@font-face { font-family:'Oxanium'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/oxanium-700.woff2') format('woff2'); }
@font-face { font-family:'Oxanium'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/oxanium-800.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700.woff2') format('woff2'); }

:root {
  --bg-main: #080B10;
  --bg-secondary: #0D121A;
  --surface-1: #111823;
  --surface-2: #16202D;
  --surface-elevated: #1A2635;
  --border-default: #33445A;
  --border-soft: rgba(255, 255, 255, 0.11);
  --text-primary: #F5F7FA;
  --text-secondary: #C2CCD8;
  /* Raised from #7F8B9C: the old value sat at ~4.2:1 on the page background and
     failed WCAG AA for the small text it is used on. #9AA7B8 clears 6.5:1. */
  --text-muted: #9AA7B8;
  --accent: #edc773;
  --accent-hover: #ffe2a0;
  --accent-dark: #B9972E;
  --accent-secondary: #6FD2F5;
  --success: #5FDA8B;
  --success-soft: rgba(79, 209, 123, 0.14);
  --danger: #F4737D;
  --danger-soft: rgba(240, 93, 104, 0.14);
  --warning: #F0C94B;
  --gold: #F0C94B;
  --gold-line: rgba(237,199,115,.3);
  --green: #5FDA8B;
  --green-soft: rgba(79, 209, 123, 0.14);
  --red: #F4737D;
  --red-soft: rgba(240, 93, 104, 0.14);
  --cyan: #6FD2F5;
  /* Shared motion tokens — every interactive transition uses these so hovers
     across the site settle at the same, unhurried pace. */
  --ease: cubic-bezier(.22, .68, .32, 1);
  --dur-fast: .22s;
  --dur: .32s;
  --dur-slow: .45s;
  --font-inter: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Oxanium', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Oxanium', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: -0.01em; margin: 0; text-transform: capitalize; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); }
.action-link, .ui-btn, input, select, textarea { font-family: var(--font-body); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #0A0A0A; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.tnum { font-variant-numeric: tabular-nums; }
.container-app { max-width: 1240px; margin: 0 auto; padding-inline: 32px; }

/* ---------- animations ---------- */
@keyframes pop { 0% { transform: scale(0.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeUp { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes confetti { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(500px) rotate(540deg); opacity: 0; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes trophyGlow { 0%,100% { box-shadow: 0 0 30px rgba(240,201,75,.28); transform: scale(1); } 50% { box-shadow: 0 0 55px rgba(240,201,75,.55); transform: scale(1.04); } }
@keyframes floatUp { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
.skeleton { background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
.trophy-glow { animation: trophyGlow 2.2s ease-in-out infinite; }
.hover-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.38); border-color: var(--accent) !important; }
.fade-up { animation: fadeUp .4s ease both; }
.pop { animation: pop .3s ease both; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- brand + header ---------- */
.brand { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.brand-logo { display:inline-flex; flex-shrink:0; line-height:0; }
.brand-logo img { display:block; width:100%; height:auto; }
.brand-logo-full { display:block; height:55px; }
.brand-logo-full img { width:auto; height:100%; }
.brand-mark { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,#f1d28a,#dfb75f); flex-shrink:0; }
.brand-wordmark { font-weight:800; letter-spacing:-.6px; line-height:1.1; color:#f5f4ef; font-size:19px; }
.brand-wordmark > span { color:#e9c980; }
.brand-wordmark small { display:block; margin-top:6px; color:#87929e; font-size:8px; letter-spacing:2.6px; font-weight:600; }
.site-header { position:sticky; top:0; z-index:70; background:rgba(8,11,16,.93); border-bottom:1px solid rgba(255,255,255,.07); backdrop-filter:blur(20px); }
.header-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.desktop-navigation { display:flex; align-items:center; gap:2px; }
/* Nav items: the label eases to gold while a gradient rule wipes in underneath.
   Both the colour and the underline share the same slow easing so the whole
   item settles as one movement instead of snapping. */
.desktop-navigation a {
  padding:12px 14px; font-size:13.5px; color:#B3BCC8; font-weight:600;
  position:relative; white-space:nowrap; border-radius:8px;
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.desktop-navigation a::after {
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#c9a459,#edc773 45%,#ffe2a0);
  transform:scaleX(0); transform-origin:left center; opacity:0;
  transition:transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.desktop-navigation a:hover,.desktop-navigation a:focus-visible,.desktop-navigation a.is-active { color:#edc773; }
.desktop-navigation a:hover,.desktop-navigation a:focus-visible { background-color:rgba(237,199,115,.07); }
.desktop-navigation a:hover::after,.desktop-navigation a:focus-visible::after { transform:scaleX(1); opacity:.85; }
.desktop-navigation a.is-active::after { transform:scaleX(1); opacity:1; }
.header-actions { display:flex; align-items:center; gap:10px; }
.action-link { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:14px 22px; border-radius:7px; font-size:13px; font-weight:700; min-height:46px; cursor:pointer;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease); }
.action-link:hover { transform:translateY(-2px); }
/* brightness() instead of swapping the gradient for a flat colour — gradients
   cannot be interpolated, which is what made this button flick on hover. */
.action-gold { background:linear-gradient(115deg,#f1d28a,#dfb75f); color:#12120e; box-shadow:inset 0 1px 0 #fff5,0 5px 25px #edc7730c; }
.action-gold:hover { filter:brightness(1.09); box-shadow:inset 0 1px 0 #fff8,0 10px 30px rgba(237,199,115,.20); }
.action-outline { border:1px solid #ffffff2e; color:#e6eaef; background:#0c111aa8; }
.action-outline:hover { border-color:#edc77380; background:#171d27; box-shadow:0 8px 24px rgba(0,0,0,.32); }
.header-play { font-size:12.5px; padding:11px 18px; min-height:42px; }
.menu-toggle,.icon-button { border:1px solid #ffffff2b; background:#121923; color:#dce2e9; border-radius:7px; width:42px; height:42px; display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.menu-toggle { display:none; }
.menu-toggle:hover,.icon-button:hover { border-color:#edc773; color:#edc773; background:#161e2a; }
.mobile-navigation { padding-block:10px 22px; display:none; gap:4px; }
.mobile-navigation.open { display:grid; }
.mobile-navigation > a:not(.action-link) { display:flex; justify-content:space-between; align-items:center; padding:14px 10px; border-radius:8px; font-size:15.5px; font-weight:600; color:#ccd3db;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.mobile-navigation > a:not(.action-link):hover { color:#edc773; background:rgba(237,199,115,.07); }
.mobile-navigation a.is-active { color:#edc773; }
.eyebrow { display:block; color:#E2C084; font-size:10.5px; font-weight:700; letter-spacing:1.8px; line-height:1.6; text-transform:uppercase; }

/* ---------- Hero ---------- */
.home-hero { position:relative; width:100%; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--gold-line); background:#090d12; }
.hero-background { position:absolute; inset:0; width:100%; height:100%; z-index:-3; object-fit:cover; object-position:64% center; }
.hero-shade {
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(100deg,#070a0ef7 0%,#070a0ee8 28%,#070a0eab 50%,#070a0e33 76%,#070a0e00 100%),
    linear-gradient(to top,#080b10 0%,#080b1000 38%),
    radial-gradient(115% 75% at 84% 20%,rgba(237,199,115,.12),transparent 60%);
}
.hero-inner { position:relative; display:flex; flex-direction:column; gap:clamp(28px,4vw,48px); padding-block:clamp(52px,6.5vw,86px) clamp(30px,3.5vw,44px); }
.hero-main { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center; gap:clamp(32px,4.2vw,68px); }
.hero-copy { max-width:640px; container-type:inline-size; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.16em; color:#dcbf82; }
.status-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#edc773; box-shadow:0 0 9px #edc77388; flex-shrink:0; }
.hero-copy h1 { font-size:min(clamp(37px,5vw,63px),10cqi); line-height:1.07; letter-spacing:-.035em; margin:20px 0 20px; font-weight:800; text-wrap:balance; }
.hero-title-line { display:block; white-space:nowrap; }
.hero-keyword { color:#edc773; white-space:nowrap; }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .hero-keyword { background-image:linear-gradient(102deg,#ffeec2 0%,#edc773 46%,#c8a45c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
}
.hero-lede { max-width:560px; font-size:clamp(15px,1.15vw,16.5px); color:#BAC5D2; line-height:1.78; margin:0 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:10px 20px; color:#A6B2C1; font-size:11.5px; margin:22px 0 0; padding:0; list-style:none; }
.hero-trust > li { display:flex; gap:6px; align-items:center; }
.hero-trust svg { color:#8FCCA8; flex-shrink:0; }
.hero-stats { display:flex; flex-wrap:wrap; gap:clamp(20px,3.2vw,44px); margin:30px 0 0; padding:26px 0 0; border-top:1px solid #ffffff1f; }
.hero-stats > div { margin:0; }
.hero-stats dt { font-size:clamp(21px,2.3vw,27px); font-weight:800; color:#f0e2c0; letter-spacing:-.02em; line-height:1; }
.hero-stats dd { margin:7px 0 0; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#A1ADBC; }
.hero-roster { width:100%; max-width:520px; justify-self:end; padding:18px 20px 4px; background:linear-gradient(158deg,#141b25ef,#0c1118e8); border:1px solid #ead6a12e; border-radius:14px; backdrop-filter:blur(16px); box-shadow:0 26px 64px #00000073, inset 0 1px 0 #ffffff0d; }
.roster-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#d4dbe4; }
.roster-heading > span:first-child { display:flex; align-items:center; gap:7px; }
.roster-demo-label { color:#A3AFBE; font-size:10.5px; letter-spacing:.04em; font-weight:500; text-transform:none; }
.hero-player-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:16px 0; }
.hero-player { display:flex; flex-direction:column; align-items:center; padding:11px 3px; border:1px solid #ffffff17; border-radius:7px; background:linear-gradient(#1b222c85,#111821); }
.hero-player-icon { color:#e3c485; margin-bottom:7px; line-height:0; }
.hero-player > span { color:#9BA7B7; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.hero-player > strong { font-size:13px; font-weight:650; margin:4px 0 2px; }
.hero-player > b { font-size:13px; color:#e9cd93; font-weight:700; }
.hero-player small { font-size:8.5px; color:#9BA7B7; font-weight:500; letter-spacing:.06em; }
.roster-bottom { border-top:1px solid #ffffff1a; display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:13px 0; font-size:10.5px; color:#A3AFBE; letter-spacing:.06em; text-transform:uppercase; }
.roster-bottom b { font-size:13.5px; color:#eccf84; margin-left:6px; }
.roster-bottom a { display:flex; align-items:center; gap:5px; margin-left:auto; letter-spacing:0; color:#CBD4DE; font-size:11.5px; text-transform:none; transition:color var(--dur) var(--ease); }
.roster-bottom a:hover { color:#edc773; }
.green-text { color:#8FCCA8 !important; }
.hero-footnote { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:0; padding-top:20px; border-top:1px solid #ffffff17; color:#99A5B4; font-size:10.5px; letter-spacing:.05em; }
.hero-footnote-mark { display:flex; gap:12px; align-items:center; color:#C6B48D; letter-spacing:.22em; text-transform:uppercase; }
.caption-line { width:38px; height:1px; background:#c6b48d80; }

/* ---------- home content sections ---------- */
.home-content { padding-top:30px; }
.event-strip { display:flex; align-items:center; gap:23px; padding:26px 30px; border:1px solid #ffffff1c; border-radius:10px; background:linear-gradient(110deg,#161a21,#0e131b); }
.event-symbol { width:58px; height:58px; border-radius:10px; display:grid; place-items:center; color:#edc773; border:1px solid var(--gold-line); background:#edc77308; flex-shrink:0; }
.event-strip .eyebrow { font-size:9.5px; }
.event-strip h2 { font-size:22px; font-weight:750; margin:3px 0; }
.event-strip p { margin:0; font-size:12.5px; color:#A5B1C0; }
.event-strip p span { padding:0 7px; color:#8A95A5; }
.event-strip > .action-link { margin-left:auto; font-size:11px; }
.section-space { padding:76px 0 0; }
.section-top { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.section-top h2 { font-size:clamp(25px,3vw,35px); line-height:1.2; font-weight:750; margin-top:11px; letter-spacing:-1px; }
.section-top > p { font-size:13px; color:#A3AFBE; max-width:335px; line-height:1.8; margin:0; }
.cards-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.cards-grid > * { min-width:0; }
.feature-card { border:1px solid #ffffff1c; background:linear-gradient(135deg,#121821,#0e141d); border-radius:9px; padding:27px; transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.feature-card:hover { border-color:#edc77355; transform:translateY(-3px); box-shadow:0 14px 34px #00000059; }
.feature-icon { width:43px; height:43px; display:grid; place-items:center; color:#e0c489; border-radius:9px; background:#edc7730f; border:1px solid #edc77324; margin-bottom:23px; transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.feature-card:hover .feature-icon { color:#f4d68f; background:#edc77317; border-color:#edc7732e; }
.feature-card h3 { font-size:16.5px; font-weight:700; margin-bottom:10px; }
.feature-card p { color:#A5B1C1; font-size:13px; line-height:1.8; margin:0; }
.step-top { display:flex; justify-content:space-between; align-items:center; color:#edc773; margin-bottom:28px; }
.step-top > span { font-size:33px; font-weight:750; color:#ffffff17; font-variant-numeric:tabular-nums; transition:color var(--dur-slow) var(--ease), text-shadow var(--dur-slow) var(--ease); }
.step-card:hover .step-top > span, .step-card:focus-within .step-top > span { color:#edc773; text-shadow:0 0 22px #edc7734d; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:#E7C88C; font-size:12.5px; font-weight:600; transition:color var(--dur) var(--ease); }
.text-link:hover { color:#ffe2a0; }
.demo-disclosure { display:block; color:#A8B4C3; font-size:11px; margin-top:5px; }

/* ---------- reviews carousel ---------- */
.reviews-viewport { overflow:auto; scrollbar-width:none; }
.reviews-viewport::-webkit-scrollbar { display:none; }
.reviews-track { display:flex; gap:20px; }
.review-card { flex:0 0 calc((100% - 40px)/3); min-width:0; padding:25px; background:#111720; border:1px solid #ffffff1c; border-radius:9px; display:flex; flex-direction:column; }
.review-stars { display:flex; color:#eecb85; align-items:center; }
.review-star-row { display:block; }
.review-quote { margin-left:auto; color:#4C535C; display:block; }
.review-card blockquote { margin:23px 0 26px; font-size:13.5px; color:#C7D0DB; line-height:1.9; flex:1; }
.review-person { display:flex; gap:10px; align-items:center; padding-top:16px; border-top:1px solid #ffffff14; }
.review-avatar { width:33px; height:33px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; background:#463d29; color:#eccb92; flex-shrink:0; }
.tone-1 { background:#243c43; color:#a3c6d4; } .tone-2 { background:#35354c; color:#bcb3da; }
.review-person strong { font-size:12px; display:block; font-weight:650; } .review-person small { font-size:10.5px; color:#9AA6B5; display:block; margin-top:3px; }
.sample-tag { margin-left:auto; color:#9AA6B5; font-size:9.5px; border:1px solid #ffffff20; border-radius:4px; padding:2px 6px; }
.carousel-controls { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:20px; }
.carousel-counter { font-size:11.5px; color:#98A4B3; letter-spacing:1px; margin-right:5px; } .carousel-counter b { color:#eccf84; font-weight:600; }
.carousel-progress { height:2px; background:#ffffff1f; width:100px; margin-right:auto; } .carousel-progress span { display:block; height:100%; background:#dcbc7a; transition:width var(--dur) var(--ease); }
.carousel-controls .icon-button { width:34px; height:34px; }

/* ---------- article cards ---------- */
.article-card { display:flex; flex-direction:column; border:1px solid #ffffff1c; background:#10161f; border-radius:10px; overflow:hidden; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.article-card:hover { transform:translateY(-4px); border-color:#edc77366; box-shadow:0 16px 36px rgba(0,0,0,.42); }
.article-card-image { aspect-ratio:16/9; overflow:hidden; background:#151c24; } .article-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .article-card:hover img { transform:scale(1.05); }
.article-card-body { padding:23px; display:flex; flex-direction:column; flex:1; } .article-card .eyebrow { font-size:9.5px; } .article-card h3 { font-size:18px; line-height:1.4; margin:10px 0; font-weight:700; } .article-card p { color:#A5B1C1; font-size:13px; line-height:1.8; margin:0 0 20px; } .article-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:15px; border-top:1px solid #ffffff17; font-size:11px; color:#B0BCC9; } .article-card-footer svg { color:#e5c580; }

/* ---------- FAQ ---------- */
.faq-section { scroll-margin-top:100px; }
.faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; align-items:start; }
.faq-item { border:1px solid #ffffff1c; border-radius:7px; background:#10161e; transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.faq-item:hover { border-color:#edc7733d; }
.faq-item summary { list-style:none; display:flex; gap:13px; align-items:center; padding:20px; cursor:pointer; font-size:13.5px; font-weight:600; line-height:1.5; transition:color var(--dur) var(--ease); }
.faq-item summary:hover { color:#edc773; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary > svg { margin-left:auto; color:#98A4B3; flex-shrink:0; transition:transform var(--dur) var(--ease),color var(--dur) var(--ease); }
.faq-item[open] summary > svg { transform:rotate(180deg); color:#edc773; }
.faq-number { color:#C0A265; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.faq-item p { margin:0; padding:0 22px 22px 46px; color:#B2BECC; font-size:13.5px; line-height:1.9; }
.faq-item[open] { border-color:#edc77352; }

/* ---------- closing CTA ---------- */
.closing-cta { margin:80px 0 35px; padding:55px 25px; border:1px solid #edc77321; border-radius:12px; background:radial-gradient(ellipse at top,#edc77310,transparent 65%),#10151d; text-align:center; }
.closing-cta > svg { color:#e4c47b; margin-bottom:20px; }
.closing-cta .eyebrow { font-size:10px; }
.closing-cta h2 { font-size:clamp(29px,4vw,43px); line-height:1.2; font-weight:750; margin:16px 0; letter-spacing:-1.5px; }
.closing-cta h2 span { color:#edc773; }
.closing-cta p { color:#A7B3C2; font-size:14px; margin-bottom:23px; }

/* ---------- single blog post (article) layout ---------- */
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:#9CA8B7; font-size:11.5px; padding:26px 0; }
.breadcrumbs a { transition:color var(--dur) var(--ease); }
.breadcrumbs a:hover { color:#edc773; }
.breadcrumbs span { color:#C2CAD4; }
.post-heading { max-width:850px; margin:16px 0 32px; }
.post-heading h1 { font-size:clamp(34px,4.6vw,56px); font-weight:800; line-height:1.13; letter-spacing:-1.8px; margin:16px 0 20px; }
.post-deck { color:#B5C1CF; font-size:17px; line-height:1.8; max-width:760px; }
.post-byline { display:flex; flex-wrap:wrap; gap:15px; align-items:center; margin-top:25px; color:#A3AFBE; font-size:12px; }
.post-author { display:flex; gap:10px; align-items:center; color:#dae0e7; }
.post-author small { display:block; color:#9AA6B5; font-size:10.5px; margin-top:3px; }
.post-byline > span { display:flex; gap:6px; align-items:center; }
.post-cover { position:relative; aspect-ratio:16/9; border:1px solid #ffffff20; border-radius:12px; overflow:hidden; margin:0 0 38px; }
.post-cover img { width:100%; height:100%; object-fit:cover; }
.post-cover figcaption { position:absolute; bottom:0; left:0; width:100%; padding:28px 22px 13px; color:#BCC6D2; font-size:11px; background:linear-gradient(transparent,#080b10ee); }
.post-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:60px; align-items:start; }
.post-body { min-width:0; max-width:770px; color:#C4CED9; font-size:16.5px; line-height:1.95; }
.post-body > p { margin:0 0 23px; }
.post-body > p:first-child { font-size:18.5px; color:#D6DCE3; }
.post-body h2 { scroll-margin-top:115px; font-size:26px; line-height:1.3; font-weight:750; color:#f0f2f4; letter-spacing:-.6px; margin:43px 0 17px; }
.post-body h3 { font-size:19px; line-height:1.35; font-weight:700; color:#e7ebef; margin:28px 0 12px; }
.post-body ul { margin:0 0 25px; padding-left:22px; }
.post-body li { margin:8px 0; }
.post-body li::marker { color:#dcbc7a; }
.post-body a { color:#ecd096; text-decoration:underline; text-underline-offset:4px; transition:color var(--dur) var(--ease); }
.post-body a:hover { color:#fff1c7; }
.post-sidebar { position:sticky; top:110px; display:grid; gap:18px; }
.sidebar-card { border:1px solid #ffffff1f; border-radius:9px; padding:23px; background:#10161e; }
.sidebar-card h2 { font-size:11.5px; letter-spacing:1.4px; font-weight:700; margin-bottom:17px; text-transform:uppercase; color:#e6ebf1; }
.toc-links { display:grid; gap:11px; }
.toc-links a { display:flex; align-items:baseline; gap:10px; color:#A9B5C4; font-size:12px; line-height:1.5; transition:color var(--dur) var(--ease); }
.toc-links a:hover { color:#edc773; }
.toc-links a > span { color:#BFA267; font-size:10px; font-weight:600; }
.sidebar-cta { background:radial-gradient(ellipse at top,#edc77312,transparent),#11171e; border-color:#edc77336; }
.sidebar-cta > svg { color:#edc773; margin-bottom:14px; }
.sidebar-cta h2 { font-size:19px; letter-spacing:-.4px; text-transform:capitalize; line-height:1.3; }
.sidebar-cta p { color:#A7B3C2; font-size:13px; line-height:1.8; margin:8px 0 0; }
.sidebar-cta .action-link { width:100%; margin-top:13px; font-size:11.5px; padding:11px; }
.sidebar-related a { display:block; padding:13px 0; border-top:1px solid #ffffff17; font-size:13px; line-height:1.6; color:#C8D2DE; transition:color var(--dur) var(--ease); }
.sidebar-related a:hover { color:#edc773; }
.sidebar-related a:first-of-type { border-top:none; }
.sidebar-related small { display:block; font-size:9.5px; color:#CDAE72; margin-bottom:4px; letter-spacing:1px; text-transform:uppercase; }
.article-note { padding:22px 24px; margin:32px 0; border-left:2px solid #d2b16d; background:#edc7730a; border-radius:0 8px 8px 0; font-size:13.5px; color:#AAB6C5; line-height:1.8; }
.article-note strong { display:block; font-size:10.5px; letter-spacing:1px; color:#E3C68F; margin-bottom:6px; text-transform:uppercase; }
/* ---------- article tables + pull quotes ---------- */
/* Tables scroll inside their own box so a wide one never makes the page
   scroll sideways on a phone. */
.table-scroll { overflow-x:auto; margin:0 0 26px; border:1px solid #ffffff1f; border-radius:10px; background:#10161e; -webkit-overflow-scrolling:touch; }
.post-body table { border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px; }
.post-body th, .post-body td { padding:12px 16px; text-align:left; vertical-align:top; line-height:1.6; border-bottom:1px solid #ffffff14; }
.post-body th { color:#E4C88E; font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; background:#ffffff08; white-space:nowrap; }
.post-body tr:last-child td { border-bottom:none; }
.post-body td { color:#C4CED9; }
.post-body td strong { color:#EDF1F5; }
.post-body blockquote { margin:0 0 26px; padding:4px 0 4px 20px; border-left:2px solid #d2b16d; color:#D2DAE4; font-size:17px; line-height:1.8; }
.post-body strong { color:#EDF1F5; font-weight:650; }

/* ---------- archive pagination ---------- */
.archive-count { margin:26px 0 0; font-size:13px; color:#A3AFBE; }
.archive-count b { color:#E4C88E; font-weight:700; }
.archive-count span { color:#8E9BAB; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:44px; }
.page-numbers { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.page-num, .page-step {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:42px; height:42px; padding:0 14px; border-radius:9px;
  border:1px solid #ffffff1f; background:#10161e; color:#C2CCD8;
  font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-num { padding:0 8px; }
.page-num:hover, .page-step:hover { color:#edc773; border-color:#edc77366; background:#161d27; transform:translateY(-2px); }
.page-num.is-current { color:#12120e; background:linear-gradient(115deg,#f1d28a,#dfb75f); border-color:transparent; font-weight:700; cursor:default; }
.page-num.is-current:hover { transform:none; color:#12120e; }
.page-step svg { flex-shrink:0; }
.page-step.is-disabled { opacity:.4; cursor:not-allowed; }
.page-step.is-disabled:hover { color:#C2CCD8; border-color:#ffffff1f; background:#10161e; transform:none; }
.page-gap { min-width:22px; text-align:center; color:#8E9BAB; font-size:13.5px; user-select:none; }

.journal-top { padding:58px 0 34px; }
.journal-top h1 { font-size:clamp(38px,5vw,60px); letter-spacing:-2px; font-weight:800; margin:12px 0; }
.journal-top p { max-width:580px; color:#B0BCCA; font-size:15px; line-height:1.8; }

/* ---------- prose (long-form pages) ---------- */
.prose { font-size:16px; }
.prose h2 { font-size:23px; font-weight:800; margin:36px 0 12px; }
.prose h3 { font-size:17.5px; font-weight:700; margin:26px 0 8px; }
.prose p { color:var(--text-secondary); line-height:1.85; margin:0 0 18px; }
.prose ul { color:var(--text-secondary); line-height:1.85; margin:0 0 18px; padding-left:22px; }
.prose li { margin-bottom:8px; }
.prose li::marker { color:#dcbc7a; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; transition:color var(--dur) var(--ease); }
.prose a:hover { color:var(--accent-hover); }
.prose strong { color:var(--text-primary); }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--border-default); background:var(--bg-secondary); margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-top:56px; }
.footer-intro p { color:var(--text-muted); font-size:13.5px; margin:14px 0 0; max-width:260px; line-height:1.6; }
.footer-col h2 { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#B4BFCC; margin-bottom:14px; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer-col a { font-size:13.5px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease); }
.footer-col a > svg { flex-shrink:0; }
.footer-col a:hover { color:var(--accent); padding-left:4px; }
.footer-bottom { border-top:1px solid var(--border-default); margin-top:32px; padding:24px 0 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; color:var(--text-muted); }
.footer-bottom > div { font-size:13px; color:var(--text-secondary); }
.footer-disclaimer { margin:0; font-size:12px; max-width:720px; line-height:1.7; }

/* ---------- game layout grids ---------- */
.auto-grid, .stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.auto-grid-tight { gap:10px; }
.auto-grid > *, .stat-grid > * { min-width:0; }
.roster-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.roster-cards > * { min-width:0; }
.bracket-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.bracket-grid > * { min-width:0; }
.detail-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }

/* ---------- game UI primitives ---------- */
.ui-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:8px; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.ui-btn.small { padding:7px 14px; font-size:13px; }
.ui-btn:disabled { opacity:.45; cursor:not-allowed; }
.ui-btn:not(:disabled):hover { transform:translateY(-1px); }
.ui-btn-primary { background:var(--gold); color:#0A0A0A; box-shadow:0 1px 0 rgba(255,255,255,.15) inset; }
.ui-btn-primary:not(:disabled):hover { background:var(--accent-hover); }
.ui-btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-default); }
.ui-btn-ghost:not(:disabled):hover { border-color:#edc77366; color:#e8eef5; }
.ui-btn-dark { background:var(--surface-2); color:var(--text-primary); border:1px solid var(--border-default); }
.ui-btn-dark:not(:disabled):hover { border-color:#edc77355; }
.ui-btn-danger { background:var(--red-soft); color:var(--red); border:1px solid var(--red); }
.ui-btn-success { background:var(--green-soft); color:var(--green); border:1px solid var(--green); }
.ui-btn svg { width:1em; height:1em; }
.ui-card { background:var(--surface-1); border:1px solid var(--border-default); border-radius:12px; padding:16px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ui-card.selected { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 8px 24px rgba(240,201,75,.08); }
button.ui-card { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
button.ui-card:hover { border-color:#edc77366; transform:translateY(-2px); }
.chip { font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--text-muted); background:rgba(255,255,255,0.08); padding:3px 8px; border-radius:5px; display:inline-block; }
.bar-wrap { margin-bottom:6px; }
.bar-wrap.small { margin-bottom:4px; }
.bar-label { display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-muted); margin-bottom:3px; }
.bar-track { height:6px; background:rgba(255,255,255,0.10); border-radius:3px; overflow:hidden; }
.bar-wrap.small .bar-track { height:4px; }
.bar-fill { height:100%; border-radius:3px; transition:width .3s ease; }
.status-badge { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.empty-state { text-align:center; padding:48px 20px; border:1px dashed var(--border-default); border-radius:12px; background:var(--bg-secondary); }
.field { display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border-default); border-radius:8px; padding:6px 10px; }
.field input { background:transparent; border:none; color:var(--text-primary); outline:none; font-size:13px; width:120px; }
select.field-select { background:var(--surface-2); border:1px solid var(--border-default); border-radius:8px; padding:6px 10px; color:var(--text-primary); font-size:13px; }

/* ---------- confetti + toast ---------- */
.confetti-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti-layer > span { position:absolute; top:-14px; display:block; animation-name:confetti; animation-timing-function:ease-in; animation-fill-mode:forwards; }
@media (prefers-reduced-motion: reduce) { .confetti-layer { display:none; } }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface-elevated); border:1px solid var(--gold); color:var(--text-primary); padding:12px 20px; border-radius:10px; z-index:200; font-size:13.5px; box-shadow:0 10px 40px rgba(0,0,0,.5); animation:fadeUp .3s ease; }

/* ---------- flags ---------- */
.flag-chip { display:inline-flex; overflow:hidden; border-radius:2px; flex-shrink:0; vertical-align:-2px; box-shadow:0 0 0 .5px #00000059; }
.flag-chip svg { display:block; }

/* ---------- responsive ---------- */
@media(min-width:1120px) { .mobile-navigation { display:none !important; } }
@media(max-width:1119px) {
  .desktop-navigation { display:none; } .menu-toggle { display:grid; }
  .hero-main { grid-template-columns:1fr; gap:36px; } .hero-copy { max-width:none; }
  .hero-roster { justify-self:stretch; max-width:none; } .hero-footnote-mark { display:none; }
  .post-layout { gap:32px; grid-template-columns:minmax(0,1fr) 270px; }
}
@media(max-width:980px) {
  .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .review-card { flex-basis:calc((100% - 20px)/2); }
  .auto-grid,.stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roster-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-background { object-position:65% center; }
  .hero-shade { background:linear-gradient(90deg,#080b10d9,#080b10a8 45%,#080b1044),linear-gradient(0deg,#080b10,transparent 40%); }
  .post-layout { grid-template-columns:1fr; } .post-sidebar { position:static; grid-row:1; } .sidebar-related,.post-sidebar .sidebar-cta { display:none; } .toc-links { grid-template-columns:1fr 1fr; }
}
@media(max-width:860px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:760px) { .bracket-grid { grid-template-columns:1fr; gap:24px; } }
@media(max-width:640px) {
  .container-app { padding-inline:20px; }
  .header-inner { min-height:73px; gap:10px; }
  .brand-logo-full { height:38px; }
  .header-play { display:none; }
  .hero-background { object-position:68% center; opacity:.7; }
  .hero-shade { background:linear-gradient(#080b10cc,#080b10cc),linear-gradient(to top,#080b10,#080b1000 55%); }
  .hero-actions .action-link { flex:1 1 auto; padding:13px 16px; font-size:12px; gap:8px; }
  .hero-stats { gap:18px 26px; padding-top:22px; }
  .event-strip { flex-wrap:wrap; padding:20px; gap:15px; } .event-strip > .action-link { margin-left:0; }
  .section-space { padding-top:52px; }
  .section-top { flex-direction:column; align-items:flex-start; gap:15px; margin-bottom:23px; } .section-top h2 { font-size:28px; } .section-top > p { max-width:100%; }
  .cards-grid { grid-template-columns:minmax(0,1fr); } .feature-card { padding:25px; }
  .review-card { flex-basis:100%; }
  .faq-grid { grid-template-columns:1fr; gap:10px; }
  .closing-cta { margin-top:52px; padding:40px 20px; }
  /* Pagination on a phone: drop the word next to the arrows and tighten the
     numbers so the whole control stays on one row. */
  .pagination { gap:6px; margin-top:34px; }
  .page-step > span { display:none; }
  .page-step { min-width:42px; padding:0 12px; }
  .page-num { min-width:38px; height:38px; font-size:13px; }
  .post-body table { font-size:13.5px; min-width:420px; }
  .post-body th, .post-body td { padding:10px 12px; }
  .auto-grid,.stat-grid { grid-template-columns:minmax(0,1fr); }
  .roster-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-columns { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:26px; }
}