/* xFPS blog: article pages and the /blog/ index. Loads after guides/guide.css
   (tokens, header, type scale) and guides/return-to-game.css (floating CTA).
   Static pages load no app CSS; keep this file small, no web fonts. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; margin: 0; list-style: none; font-size: 14px; color: #a4b4c4; }
.crumbs li { margin: 0; padding: 0; font-size: 14px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: #546579; }
.crumbs a { color: #bdcbd8; }
/* EN · DE · FR · NL: the same page in another language (or that language's
   blog index for a post written in one language only). Floats beside the crumbs. */
.lang-switch { float: right; display: flex; align-items: center; padding: 18px 0 0 16px; font-size: 13px; font-weight: 650; letter-spacing: .06em; color: #546579; }
.lang-switch > * + *::before { content: "·"; margin: 0 7px; color: #546579; font-weight: 400; }
.lang-switch a { color: #a4b4c4; text-decoration: none; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--fuux-accent, #ffba2e); }
.lang-switch [aria-current] { color: #edf4f7; }
.article { max-width: 780px; padding: 28px 0 24px; }
.article h1 { margin: 12px 0 18px; }
.lede { font-size: 20px !important; color: #d6e1ea !important; }
.byline { font-size: 14px !important; color: #a4b4c4 !important; margin: 0 0 26px; }
.hero { margin: 8px 0 28px; }
.hero img, figure img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #33404e; background: #162230; }
figure { margin: 28px 0; }
figcaption { font-size: 14px; line-height: 1.5; color: #a4b4c4; margin-top: 10px; }
.article section { padding: 8px 0 18px; border-bottom: 0; }
.article h2 { margin: 36px 0 14px; scroll-margin-top: 24px; }
.article h3 { scroll-margin-top: 24px; }
.toc { background: #111b26; border: 1px solid #33404e; border-radius: 8px; padding: 18px 22px; margin: 0 0 12px; }
.toc p { margin: 0 0 6px; }
.toc ol { margin: 0; }
.toc li { margin: 6px 0; font-size: 16px; }
.cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 30px 0; padding: 22px 24px; background: linear-gradient(135deg, #1a2838, #13202c); border: 1px solid #3b4d61; border-left: 3px solid var(--fuux-accent, #ffba2e); border-radius: 8px; }
.cta-box p { margin: 0; font-size: 17px; color: #d6e1ea; }
.cta-box strong { display: block; font-size: 20px; margin-bottom: 2px; }
.cta-box .play { flex: none; }
table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #33404e; color: #bdcbd8; vertical-align: top; line-height: 1.5; }
th { color: #edf4f7; font-weight: 650; background: #111b26; }
.table-wrap { overflow-x: auto; }
.faq h3 { margin-top: 22px; }
.faq p { margin-top: 4px; }
.related { border-top: 1px solid #33404e; margin-top: 34px; padding-top: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 18px 0 8px; padding: 0; list-style: none; }
.cards li { margin: 0; padding: 0; }
.card { display: block; height: 100%; text-decoration: none; background: #111b26; border: 1px solid #33404e; border-radius: 8px; overflow: hidden; color: #edf4f7; }
.card:hover { border-color: var(--fuux-accent, #ffba2e); color: #edf4f7; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid #33404e; }
.card span { display: block; padding: 14px 16px 4px; font-weight: 700; font-size: 17px; line-height: 1.35; }
.card small { display: block; padding: 0 16px 16px; color: #a4b4c4; font-size: 14px; line-height: 1.5; }
.return-to-game { white-space: nowrap; }
.disclaimer { font-size: 13px !important; color: #8394a6 !important; }
@media (max-width: 760px) { .article { padding-top: 18px; } .lede { font-size: 18px !important; } .cta-box { padding: 18px; } .cta-box .play { width: 100%; justify-content: center; } }