/* Generated SEO blocks: breadcrumb, related links, hubs, language links. */
.container.seo-breadcrumb { padding: 10px 20px 0; max-width: none; }
.seo-breadcrumb-nav ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 14px; }
.seo-breadcrumb-nav li + li::before { content: "›"; margin-right: 6px; color: #888; }
.seo-breadcrumb-nav a { text-decoration: none; }
.seo-breadcrumb-nav a:hover { text-decoration: underline; }
.container.seo-extras { padding: 20px; max-width: none; }
.seo-extras h2 { font-size: 20px; margin: 18px 0 10px; }
.seo-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.seo-link-list li { margin: 0; }
.seo-link-list a { text-decoration: none; }
.seo-link-list a:hover { text-decoration: underline; }
.seo-languages { margin: 16px 0 0; font-size: 14px; }
.seo-list-heading { font-size: 22px; margin: 0 0 14px; }

/* Blog byline (scripts/build/lib/seo.mjs renderByline): the visible author line
   under an article's H1. Uses the site's own `--primary-color`. */
.seo-byline { margin: 6px 0 12px; font-size: 14px; }
.seo-byline a { color: var(--primary-color); text-decoration: none; }
.seo-byline a:hover { text-decoration: underline; }

/* 404 / 410 pages: built on the site's own hero (.category-header), game cards and palette. */
[hidden] { display: none !important; }
.status-hero { padding: 48px 20px 40px; }
.status-hero .status-code { font-size: 72px; font-weight: 800; line-height: 1; opacity: .45; margin: 0 0 6px; letter-spacing: 2px; }
.status-hero h1 { margin-bottom: 12px; }
.status-search { display: flex; max-width: 560px; margin: 26px auto 0; background: #fff; border-radius: 30px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); overflow: hidden; }
.status-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 22px; font-size: 16px; color: #2d3436; background: transparent; }
.status-search button { border: 0; padding: 0 26px; font-size: 15px; font-weight: 800; cursor: pointer; background: #f48f4b; color: #f9faff; transition: background-color .3s; }
.status-search button:hover { background: #cc6f30; }
.status-suggest { list-style: none; max-width: 560px; margin: 8px auto 0; padding: 6px 0; background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); text-align: left; }
.status-suggest a { display: block; padding: 8px 22px; color: #2d3436; }
.status-suggest a:hover { background: #f5f6fa; color: #6c5ce7; }
.status-home { margin-top: 26px; }
.status-cta { display: inline-block; padding: 12px 30px; border-radius: 30px; background: #fff; color: #6c5ce7; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); transition: transform .2s; }
.status-cta:hover { transform: translateY(-2px); }
.status-block { margin-bottom: 28px; }
.status-games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.status-games .game-info h3 { padding: 0 8px; }
.status-categories { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.status-categories a { display: inline-block; padding: 8px 18px; border-radius: 30px; background: #fff; color: #2d3436; font-weight: 700; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); transition: background-color .2s, color .2s; }
.status-categories a:hover { background: #6c5ce7; color: #fff; }
@media (max-width: 600px) {
  .status-hero { padding: 32px 16px 28px; }
  .status-hero .status-code { font-size: 54px; }
  .status-search button { padding: 0 18px; }
}

/* Heading tree (scripts/build/lib/seo.mjs ensureHeadingTree): card titles are not
   sections. The demoted elements copy the page's own h3 rules so nothing moves. */
img[width][height] { height: auto; }
.seo-title-h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.seo-title-h3, .seo-title-h4, .seo-title-h5, .seo-title-h6 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.game-card .seo-title-h3, .game-grid .seo-title-h3, .games-grid .seo-title-h3 {
  font-size: 14px; font-weight: 700; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.share-text .seo-title-h3 { color: var(--primary-color); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.seo-demoted-h3 { font-size: 18px; font-weight: 700; margin: 18px 0 10px; }
.seo-demoted-h4 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }
@media (max-width: 640px) { .share-text .seo-title-h3 { font-size: 1.1rem; } }
.game-card .seo-demoted-h3, .game-grid .seo-demoted-h3, .games-grid .seo-demoted-h3 {
  font-size: 14px; font-weight: 700; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.share-text .seo-demoted-h3 { color: var(--primary-color); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 640px) { .share-text .seo-demoted-h3 { font-size: 1.1rem; } }

/* ==========================================================================
   Mobile / desktop touch + readability pass (2026-10-02)
   --------------------------------------------------------------------------
   Numbers before this block: reports/ux-2026-10-02/before.csv. Every value
   below reuses the site's own palette and spacing (the vendor's `--primary-color`,
   `--secondary-color` and its pill/radius scale); nothing here is a new design
   system. Selectors are deliberately one notch more specific than the vendor's
   inline <style> blocks, which are emitted after this file and would otherwise
   win ties.
   ========================================================================== */

/* --- Touch targets ------------------------------------------------------ */
/* The nav pill is the <li>, but the tap target is the <a> inside it, which was
   only as tall as its line box (measured 60x17 … 80x27). The anchor now fills
   the pill, so the pill the visitor sees is the pill they can hit. */
header nav ul li { padding: 0; }
header nav ul li a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 15px; line-height: 1.2; color: inherit; }
@media (max-width: 480px) { header nav ul li a { padding: 8px 12px; } }

/* Header search: the field was 40px tall and the submit button 17x22. */
header .search-box input { height: 44px; }
header .search-box button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -44px; }

/* Footer navigation and the language selector are links too (50x26 / 58x19). */
footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
footer .language-selector .language-card { display: inline-flex; padding: 0; }
footer .language-selector .language-card a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }

/* "Load more" was capped at 42px by its own max-height. */
a.load-more { max-height: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Related-link lists (SEO extras / hubs / language links) are navigation:
   a 19px line box is not a target. Each link gets a 44px row. */
.seo-link-list a, .seo-languages a { display: inline-flex; align-items: center; min-height: 44px; }

/* Button-styled links measured 40–42px tall (a.sprunki-btn, a.nav-link, the
   character-page #menu pills) — one notch under the floor. */
a.sprunki-btn, a.nav-link, #menu li a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

/* The shortest footer label ("Sprunki") was one pixel under the 44px width
   floor; give every footer link the same minimum box. */
footer .footer-links a { min-width: 44px; justify-content: center; }

/* Prose links (`.about-left a`, `.character-name`, character-detail body copy)
   are intentionally left at their text size: WCAG 2.5.8 exempts links inline in
   a sentence, and forcing 44px there would break the line rhythm. */

/* --- Readability -------------------------------------------------------- */
/* Character encyclopedia: 11px labels, 13.6px captions, 13.65px descriptions. */
.category-label { font-size: 13px; }
.item.box figcaption { font-size: 14px; }
.item.box .desc, .item.box .info-label, .item.box .info-text { font-size: 14px; }
a.category-item { font-size: 14px; }
label.menu-icon { font-size: 14px; }

/* Audit L1: the crawled pagination block is a flex row with no wrap, which pushed
   the mobile document 4-55px wider than the viewport on list pages. */
.page { flex-wrap: wrap; }

/* Share controls inherit each page's palette and remain keyboard/touch usable. */
.page-share { margin: 24px 20px; padding: 16px; border: 1px solid currentColor; border-radius: 16px; text-align: start; }
.page-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-share-actions a, .page-share-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid currentColor; border-radius: 22px; color: inherit; background: transparent; font: inherit; text-decoration: none; cursor: pointer; }

/* Each destination carries its own colour, as the vendor's widget did - the owner asked for the
   bright chips back. Ink is chosen per chip so every one reaches WCAG AA for the 14px label, and
   the numbers below are measured ratios, not brand-book values:
     Facebook  #0b5ed7 + white 5.84:1   (the brand's #1877f2 is only 4.23:1, so it is darkened)
     X         #0f1419 + white 18.51:1
     LinkedIn  #0a66c2 + white 5.69:1   (this one is the brand colour as-is)
     Reddit    #c63a00 + white 5.24:1   (the brand's #ff4500 is only 3.44:1, so it is darkened)
     WhatsApp  #25d366 + #0b2e1a  7.46:1  - stays the brightest green and takes dark ink instead
   The two light brands keep their bright hue and swap the label, which is why they look the same
   as the vendor's chips while still passing. */
.page-share-actions a { color: #fff; border-color: transparent; font-weight: 600; }
.page-share-actions a[href*="facebook.com"] { background: #0b5ed7; }
.page-share-actions a[href*="twitter.com"] { background: #0f1419; }
.page-share-actions a[href*="linkedin.com"] { background: #0a66c2; }
.page-share-actions a[href*="reddit.com"] { background: #c63a00; }
.page-share-actions a[href*="whatsapp.com"] { background: #25d366; color: #0b2e1a; }
.page-share-actions button { background: var(--primary-color, #6c5ce7); color: #fff; border-color: transparent; font-weight: 600; }
.page-share-actions a:hover, .page-share-actions button:hover { filter: brightness(1.08); }
/* The focus ring must NOT inherit the chip's ink. Now that the chips carry white labels, a
   `currentColor` ring was white - and at a 3px offset it lands on the light card, where it is
   effectively invisible. That is a WCAG 2.4.7 / 1.4.11 failure I introduced with the recolour;
   it was harmless only while the chips were transparent with dark ink. The ring is the same
   #1a1a2e the nav chips use, measured 15.8:1 against the light card surface. */
.page-share-actions a:focus-visible, .page-share-actions button:focus-visible { outline: 2px solid #1a1a2e; outline-offset: 3px; }
.page-share-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.page-share-link { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; }
.page-share [data-share-status]:empty { margin: 0; }

.search-page { max-width: 960px; margin-inline: auto; padding: 24px 20px; }
.search-page-form { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 20px; }
.search-page-form label { width: 100%; }
.search-page-form input[type=search] { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 10px; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; }
.search-page button, .search-categories a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; font: inherit; cursor: pointer; }
.search-results-list { list-style: none; padding: 0; }
.search-results-list a { display: block; min-height: 44px; padding-block: 10px; overflow-wrap: anywhere; }
.search-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.search-page :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.search-page [hidden], .page-share [hidden] { display: none !important; }

/* Player controls inherit the theme and stay usable with touch or keys. */
.game-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: start; padding: .75rem; color: inherit; }
.game-controls button, .game-exit, .game-controls summary, .game-unavailable a { min-height: 44px; padding: .65rem .9rem; font: inherit; color: inherit; cursor: pointer; }
.game-controls button, .game-exit { border: 1px solid currentColor; border-radius: .5rem; background: transparent; }
.game-controls details { max-width: 38rem; }
.game-controls details p { margin: .6rem 0; }
.game-controls [hidden], .game-exit[hidden] { display: none !important; }
.game-controls [data-player-status]:empty { display: none; }
.game-controls button:focus-visible, .game-controls summary:focus-visible, .game-exit:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.game-unavailable { padding: 2rem; text-align: center; }
.game-unavailable a { display: inline-block; }
.custom-iframe-container.game-expanded { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; padding: 0 !important; z-index: 2147483647; color: CanvasText; background: Canvas; }
.game-expanded iframe { width: 100% !important; height: 100% !important; border: 0; }
.game-expanded .game-exit { position: absolute; top: .5rem; right: .5rem; z-index: 2; color: CanvasText; background: Canvas; }
.game-expanded-page { overflow: hidden; }
.bottomTdkFullscreen:has(.game-controls) { display: flex; flex-wrap: wrap; align-items: center; height: auto; min-height: 64px; gap: .5rem; }
.bottomTdkFullscreen:has(.game-controls) .bottomLeftTdk { position: static; display: flex; align-items: center; gap: .75rem; width: auto; flex: 1 1 15rem; padding: .75rem; }
.bottomTdkFullscreen:has(.game-controls) .bottomLeftTdk .imgdiv { position: static; flex: 0 0 54px; }
.bottomTdkFullscreen:has(.game-controls) .bottomLeftTdk .tdkHtml { position: static; overflow-wrap: anywhere; }
.bottomTdkFullscreen:has(.game-controls) .game-controls { flex: 1 1 20rem; }
.search-layout > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1200px; margin: auto; padding: 1rem; }
.search-layout > header nav { flex-basis: 100%; }
.search-layout > header nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; padding: 0; margin: 0; list-style: none; }
.search-layout > header nav a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.search-layout > header .search-box input { min-height: 44px; font: inherit; }
.search-layout > header .search-box button { min-height: 44px; min-width: 44px; }

/* ==========================================================================
   FAQ panels (scripts/build/lib/seo.mjs renderFaq)
   --------------------------------------------------------------------------
   The FAQ copy that the imported markup shipped as run-on `Q: … A: …`
   paragraphs, or as a heading plus answer paragraphs inside a `div.faq-item`, is
   now visible <details> panels carrying exactly the text of the page's FAQPage
   JSON-LD. Tokens only, no new colour: --light-color surface with
   --text-color ink (11.7:1, WCAG AA), --primary-color for the disclosure marker
   and the focus ring (#6c5ce7 on #f5f6fa = 4.5:1, above the 3:1 WCAG 1.4.11 asks
   of a UI component), and the site's own pill radius. */
.faq-item { margin: 8px 0; background: var(--light-color); border-radius: 10px; }
.faq-item > .faq-question {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 10px 16px; cursor: pointer; font-weight: 700; color: var(--text-color);
  list-style: none;
}
.faq-item > .faq-question::-webkit-details-marker { display: none; }
.faq-item > .faq-question::before {
  content: "▸"; flex: none; color: var(--primary-color); transition: transform .2s ease;
}
.faq-item[open] > .faq-question::before { transform: rotate(90deg); }
.faq-item > .faq-question:hover { text-decoration: underline; }
.faq-item > .faq-question:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
.faq-answer { padding: 0 16px 14px 31px; color: var(--text-color); }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }