/* ===== Added: About page footer alignment and layout fixes ===== */
/* Use the existing `.page-wrap` element used by the static pages */
.about-page .page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.about-page .page-content {
  flex: 1 0 auto;
}
.about-page .site-footer {
  flex-shrink: 0;
  /* keep default full-bleed footer behavior but allow page-specific overrides further down */
  position:relative;
  left:50%;
  margin-left:-50vw;
  width:100vw;
}

/* Poki2 — Static pages (About / Privacy / Terms) */

/* ------------------------------------------------------------------
   Consolidated footer parity rules
   Ensure informational pages render identically whether footer content
   is wrapped by `.footer-inner` or promoted as direct children of
   `.site-footer`. These compact selectors override legacy `.footer-inner`
   specific rules without removing the historical declarations above.
-------------------------------------------------------------------*/
/* Brand */
body.about-page .site-footer .footer-brand,
body.about-page .site-footer > .footer-brand,
body.privacy-page .site-footer .footer-brand,
body.privacy-page .site-footer > .footer-brand,
body.terms-page .site-footer .footer-brand,
body.terms-page .site-footer > .footer-brand,
body.contact-page .site-footer .footer-brand,
body.contact-page .site-footer > .footer-brand,
body.dmca-page .site-footer .footer-brand,
body.dmca-page .site-footer > .footer-brand,
body.static-page .site-footer .footer-brand,
body.static-page .site-footer > .footer-brand{
  font-size:1.1rem !important;
  font-weight:700 !important;
  color:#fff !important;
  margin-bottom:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  line-height:1 !important;
}

/* Links */
body.about-page .site-footer .footer-links,
body.about-page .site-footer > .footer-links,
body.privacy-page .site-footer .footer-links,
body.privacy-page .site-footer > .footer-links,
body.terms-page .site-footer .footer-links,
body.terms-page .site-footer > .footer-links,
body.contact-page .site-footer .footer-links,
body.contact-page .site-footer > .footer-links,
body.dmca-page .site-footer .footer-links,
body.dmca-page .site-footer > .footer-links,
body.static-page .site-footer .footer-links,
body.static-page .site-footer > .footer-links{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:16px !important;
  margin-bottom:10px !important;
  flex-wrap:wrap !important;
}

body.about-page .site-footer .footer-links a,
body.about-page .site-footer > .footer-links a,
body.privacy-page .site-footer .footer-links a,
body.privacy-page .site-footer > .footer-links a,
body.terms-page .site-footer .footer-links a,
body.terms-page .site-footer > .footer-links a,
body.contact-page .site-footer .footer-links a,
body.contact-page .site-footer > .footer-links a,
body.dmca-page .site-footer .footer-links a,
body.dmca-page .site-footer > .footer-links a,
body.static-page .site-footer .footer-links a,
body.static-page .site-footer > .footer-links a{
  font-size:.85rem !important;
  transition:opacity .15s !important;
  white-space:nowrap !important;
  opacity:.95 !important;
}

/* Copy */
body.about-page .site-footer .footer-copy,
body.about-page .site-footer > .footer-copy,
body.privacy-page .site-footer .footer-copy,
body.privacy-page .site-footer > .footer-copy,
body.terms-page .site-footer .footer-copy,
body.terms-page .site-footer > .footer-copy,
body.contact-page .site-footer .footer-copy,
body.contact-page .site-footer > .footer-copy,
body.dmca-page .site-footer .footer-copy,
body.dmca-page .site-footer > .footer-copy,
body.static-page .site-footer .footer-copy,
body.static-page .site-footer > .footer-copy{
  font-size:.75rem !important;
  color:#fff !important;
  opacity:1 !important;
  text-align:center !important;
  margin:0 !important;
}

/* Make footer itself a centered column when `.footer-inner` is absent */
body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.contact-page .site-footer,
body.dmca-page .site-footer,
body.static-page .site-footer{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.page-wrap{
  max-width:780px;
  margin:0 auto;
  display:flex;flex-direction:column;
  /* Avoid relying on the measured footer height during initial render. */
  /* Use full viewport height; per-page padding reserves footer space via --footer-h. */
  min-height: 100dvh;

}

.page-header{
  /* Fixed header so it's identical between pages regardless of content height */
  display:flex;align-items:center;justify-content:space-between;
  /* keep vertical padding at 0 so the explicit height controls total header size */
  padding:0 0px;
  border-bottom:1px solid var(--surface-2);
  position:fixed;top:0;left:0;
  width:100%;max-width:100%;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  z-index:1100;
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
  height:var(--topbar-h);
}

/* If `.page-header` is moved inside `.page-wrap` or other containers, ensure
   it stays pinned to the viewport (not bound to an ancestor stacking context).
   We intentionally use `width:100vw` to keep its left origin at the viewport
   left edge while content columns remain inset. */
.page-wrap .page-header,
body .page-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  box-sizing: border-box !important;
  transform: none !important;
  will-change: auto !important;
  z-index: 1200 !important;
}

/* Force consistent header height on all informational pages to match the index topbar */
body.about-page .page-header,
body.privacy-page .page-header,
body.terms-page .page-header,
body.contact-page .page-header,
body.dmca-page .page-header,
body.static-page .page-header{
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  line-height: var(--topbar-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  display: flex !important;
  align-items: center !important;
}

/* Ensure header children do not add extra vertical margins that increase computed height */
.page-header *{margin-top:0;margin-bottom:0}

/* If a transformed ancestor exists (JS animation may set transform), the
   browser can make fixed children act like absolute. To reduce this risk,
   ensure the header renders above transforms and avoid animations that set
   transform on `.page-wrap` when possible. */
.page-logo{
  font-size:1.2rem;font-weight:700;color:var(--brand);
}
.page-nav{
  display:flex;gap:10px;
  overflow-x:auto; /* allow horizontal scroll when space is tight */
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  padding-bottom:4px;
}
.page-nav a{
  padding:6px 14px;
  border-radius:20px;
  font-size:.85rem;font-weight:500;
  color:var(--text-muted);
  /* avoid transitioning color (non-composited) — animate opacity instead */
  transition: background-color .15s, opacity .15s;
  opacity:.96;
  flex:0 0 auto; /* prevent shrinking when container is narrow */
}
.page-nav a:hover{background:var(--surface-2);color:var(--text);opacity:1}
.page-nav a.active{background:var(--brand);color:#fff;font-weight:600}

/* ---- Content ---- */
.page-content{
  flex:1;
  padding:12px 24px 48px;
}
.page-content h1{
  font-size:1.8rem;font-weight:800;
  margin-bottom:8px;
  color:var(--text);
}
.page-content .last-updated{
  font-size:.85rem;color:var(--text-muted);
  margin-bottom:28px;
}
.page-content section{
  margin-bottom:28px;
}
.page-content h2{
  font-size:1.15rem;font-weight:700;
  margin-bottom:10px;
  color:var(--text);
}
.page-content h3{
  font-size:1rem;font-weight:600;
  margin:14px 0 6px;
  color:var(--text);
}
.page-content p{
  line-height:1.7;
  color:var(--text);
  margin-bottom:10px;
}
.page-content ul{
  padding-left:22px;
  margin-bottom:12px;
}
.page-content li{
  line-height:1.7;
  margin-bottom:4px;
  color:var(--text);
}
.page-content a{
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:2px;
  transition: opacity .15s;
  opacity:.98;
}
.page-content a:hover{color:var(--brand-dark);opacity:1}

/* ---- Footer ---- */
.page-footer{
  padding:20px 24px;
  border-top:1px solid var(--surface-2);
  text-align:center;
}
.page-footer .footer-links{
  display:flex;justify-content:center;gap:16px;align-items:center;flex-wrap:wrap;
  margin-bottom:8px;
}
.page-footer .footer-links a{
  font-size:.85rem;color:var(--text-muted);
  /* prefer opacity animation over color transition for compositing */
  transition: opacity .15s;white-space:nowrap;
  opacity:.95;
}
.page-footer .footer-links a:hover{color:var(--text);opacity:1}
.page-footer .footer-copy{
  font-size:.75rem;color:var(--text-muted);opacity:.6;
}

/* ---- Responsive ---- */
@media(max-width:600px){
  /* keep header vertical padding at 0 on small screens too so height stays consistent */
  .page-header{padding:0 16px}
  .page-content{padding:24px 16px 36px}
  .page-content h1{font-size:1.4rem}
  .page-nav a{padding:4px 8px;font-size:.8rem}
  /* Keep footer links horizontal but allow wrapping on small screens */
  .page-footer .footer-links{flex-direction:row;gap:8px;justify-content:center;flex-wrap:wrap}
}

/* ------------------------------------------------------------------
   Overflow & layout stability helpers
   - Prevent long words/URLs and media from breaking layout
   - Ensure page shell doesn't overflow horizontally
-------------------------------------------------------------------*/
html,body{box-sizing:border-box;min-height:100%}
*,*::before,*::after{box-sizing:inherit}
.page-wrap{padding-left:12px;padding-right:12px}
/* always show a vertical scrollbar gutter to avoid layout shift when pages differ in height */
html{overflow-y:scroll;scrollbar-gutter:stable}
/* ensure header spacing is consistent across pages */
body{padding-top:var(--topbar-h)}
/* Footer height used to reserve space in page content when footer is fixed */
:root{
    /* base footer height for static pages; start at 0 to avoid refresh jitter
      JS will measure the real footer and write --measured-footer. */
    --footer-base: 0px;
  /* measured footer height will be set from JS into --measured-footer (px). */
  --measured-footer: var(--footer-base);
  /* final footer reservation includes safe-area inset */
  --footer-h: calc(var(--measured-footer) + env(safe-area-inset-bottom, 0px));
}
.page-content{overflow-wrap:break-word;word-break:break-word;max-width:100%}
.page-content img,.page-content iframe,.page-content video{max-width:100%;height:auto;display:block}
.page-footer{flex-shrink:0}
/* small screens: reduce horizontal padding if content is tight */
@media(max-width:420px){
  .page-wrap{padding-left:10px;padding-right:10px}
  .page-content{padding-left:8px;padding-right:8px}
}

/* Contact page: make footer absolute at bottom of viewport when content is short */
/* Contact page: keep normal document flow and rely on the shared
   fixed-footer rules below so the contact page matches index behavior. */
body.contact-page{
  position:relative;
  min-height:100vh;
}

/* About page: footer absolute and centered to page width */
body.about-page{position:relative;min-height:100vh}
/* Ensure the page-wrap isn't interfering with footer positioning */
body.about-page .page-wrap{position:static !important}
/* Make informational pages use the same full-bleed footer behavior as the index
   so the footer sits flush with the viewport bottom with zero gap and consistent
   height/style. Reserve content space using --footer-h. */
body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.dmca-page .site-footer,
body.contact-page .site-footer {
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:none !important;
  box-sizing:border-box !important;
  z-index:1200 !important;
  /* match index footer padding so visual spacing is identical */
  padding: 20px 18px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Make informational page footers visually match the index footer (rounded top corners) */
body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.dmca-page .site-footer,
body.contact-page .site-footer,
body.static-page .site-footer {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}
/* Reserve space in page content so it doesn't overlap the fixed footer */
body.about-page .page-content,
body.privacy-page .page-content,
body.terms-page .page-content,
body.dmca-page .page-content,
body.contact-page .page-content {
  padding-bottom: var(--footer-h) !important;
}
/* make footer inner content align with page-wrap width */
body.about-page .site-footer .footer-inner{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  padding-left:12px;
  padding-right:12px;
}

/* Ensure footer inner width is consistent across informational pages */
body.about-page .site-footer .footer-inner,
body.contact-page .site-footer .footer-inner,
body.privacy-page .site-footer .footer-inner,
body.terms-page .site-footer .footer-inner,
body.dmca-page .site-footer .footer-inner,
body.static-page .site-footer .footer-inner {
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  padding-left:12px;
  padding-right:12px;
}

/* Semantic helper: pages that are static informational pages
   Should add `static-page` to the <body> (e.g. <body class="static-page">)
   This mirrors the previous `full-bleed-footer` behavior but is more semantic. */
/* Keep a deprecated alias for compatibility */
/* Default measured footer for static informational pages: align with index height */
body.static-page,
body.full-bleed-footer {
  position:relative;
  /* Use dynamic viewport units on modern Android Chrome to account for URL/toolbar
     chrome changes; keep 100vh as a fallback for older browsers. */
  min-height:100vh;
  min-height:100dvh;
}

/* If we don't yet have a persisted index footer height, prefer this
  default so informational pages visually match the index footer height. */
/* Default measured footer for informational pages (match index) until JS measures
   and writes the canonical value. This keeps About/Privacy/Terms/Contact/DMCA
   visually identical to the index on first load. JS may override `--measured-footer`. */
body.about-page,
body.privacy-page,
body.terms-page,
body.contact-page,
body.dmca-page,
body.static-page {
  --measured-footer: 114px;
  --footer-h: calc(var(--measured-footer) + env(safe-area-inset-bottom, 0px));
}
body.static-page .page-wrap,
body.full-bleed-footer .page-wrap{position:static !important}
/* Pin the footer to the viewport bottom for all non-static pages (index/category views).
   This keeps the footer visually fixed like the title/search bar and prevents it
   from jumping when content sections change. Static informational pages keep
   the footer in normal flow. */
body:not(.static-page) .site-footer{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  /* ensure pinned footers use the same padding as the index footer */
  padding: 20px 18px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  /* do not force global 0 radius here; informational pages will opt-in below */
  transform:none !important;
  z-index:1200 !important;
}

/* For most pages we allow the footer to be static (in-flow). However,
   informational pages like About/Privacy/Terms/Contact/DMCA should
   behave like the index with a pinned footer. Exclude those pages from
   the generic `static-page` override so their dedicated fixed rules
   apply above. */
body.static-page:not(.about-page):not(.privacy-page):not(.terms-page):not(.dmca-page):not(.contact-page) .site-footer{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  /* keep default radius for informational pages */
  transform:none !important;
  z-index:1000 !important;
}
/* Reserve space for fixed footer using CSS variable so content isn't hidden */
/* Reserve space for fixed footer using CSS variable so content isn't hidden.
  Apply padding for static pages (footer in-flow) and for any non-static pages
  where the footer is pinned. */
body.static-page .page-content,
body:not(.static-page) .page-content{padding-bottom:var(--footer-h)}
body.static-page .site-footer .footer-inner,
body.full-bleed-footer .site-footer .footer-inner{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  padding-left:12px;
  padding-right:12px;
}

/* Consent banner — improved visual treatment
   - Sits above the footer and pushes page content by setting a CSS var
   - Responsive layout with clear actions and accessible contrast
*/
.consent-banner{
  position:fixed;
  left:16px;
  right:16px;
  /* Position the consent banner above the footer when the footer is fixed */
  bottom: calc(var(--footer-h) + 16px);
  /* Raise above game overlay (z-index 1400) so buttons are clickable */
  z-index:1600;
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:linear-gradient(180deg,#ffffff, #fbfdff);
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.06);
  box-shadow:0 8px 30px rgba(12,20,40,0.12);
  font-size:.95rem;color:var(--text);
  max-width:1100px;
  margin:0 auto;
}
.consent-banner .consent-actions{display:flex;gap:10px;margin-left:12px}

/* Ensure informational pages use the same top-corner radius as the index footer */
body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.contact-page .site-footer,
body.dmca-page .site-footer,
body.static-page .site-footer {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Make the footer-inner on informational pages follow index spacing exactly */
body.about-page .site-footer .footer-inner,
body.privacy-page .site-footer .footer-inner,
body.terms-page .site-footer .footer-inner,
body.contact-page .site-footer .footer-inner,
body.dmca-page .site-footer .footer-inner,
body.static-page .site-footer .footer-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* Ensure informational pages footer typography and layout exactly match index footer */
body.about-page .site-footer .footer-inner,
body.privacy-page .site-footer .footer-inner,
body.terms-page .site-footer .footer-inner,
body.contact-page .site-footer .footer-inner,
body.dmca-page .site-footer .footer-inner,
body.static-page .site-footer .footer-inner {
  max-width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
}

body.about-page .site-footer .footer-inner > .footer-brand,
body.about-page .site-footer .footer-inner > .footer-links,
body.about-page .site-footer .footer-inner > .footer-copy,
body.privacy-page .site-footer .footer-inner > .footer-brand,
body.privacy-page .site-footer .footer-inner > .footer-links,
body.privacy-page .site-footer .footer-inner > .footer-copy,
body.terms-page .site-footer .footer-inner > .footer-brand,
body.terms-page .site-footer .footer-inner > .footer-links,
body.terms-page .site-footer .footer-inner > .footer-copy,
body.contact-page .site-footer .footer-inner > .footer-brand,
body.contact-page .site-footer .footer-inner > .footer-links,
body.contact-page .site-footer .footer-inner > .footer-copy,
body.dmca-page .site-footer .footer-inner > .footer-brand,
body.dmca-page .site-footer .footer-inner > .footer-links,
body.dmca-page .site-footer .footer-inner > .footer-copy,
body.static-page .site-footer .footer-inner > .footer-brand,
body.static-page .site-footer .footer-inner > .footer-links,
body.static-page .site-footer .footer-inner > .footer-copy{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

/* Also support footer elements when `.footer-inner` is removed (direct children of .site-footer)
   Keep exact parity with the global `.footer-links` rules used on the index. */
body.about-page .site-footer > .footer-brand,
body.about-page .site-footer > .footer-links,
body.about-page .site-footer > .footer-copy,
body.privacy-page .site-footer > .footer-brand,
body.privacy-page .site-footer > .footer-links,
body.privacy-page .site-footer > .footer-copy,
body.terms-page .site-footer > .footer-brand,
body.terms-page .site-footer > .footer-links,
body.terms-page .site-footer > .footer-copy,
body.contact-page .site-footer > .footer-brand,
body.contact-page .site-footer > .footer-links,
body.contact-page .site-footer > .footer-copy,
body.dmca-page .site-footer > .footer-brand,
body.dmca-page .site-footer > .footer-links,
body.dmca-page .site-footer > .footer-copy,
body.static-page .site-footer > .footer-brand,
body.static-page .site-footer > .footer-links,
body.static-page .site-footer > .footer-copy{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

/* Brand styling (direct child) */
body.about-page .site-footer > .footer-brand,
body.privacy-page .site-footer > .footer-brand,
body.terms-page .site-footer > .footer-brand,
body.contact-page .site-footer > .footer-brand,
body.dmca-page .site-footer > .footer-brand,
body.static-page .site-footer > .footer-brand{
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
}

/* Links (direct child) — exact copy of index `.footer-links` */
body.about-page .site-footer > .footer-links,
body.privacy-page .site-footer > .footer-links,
body.terms-page .site-footer > .footer-links,
body.contact-page .site-footer > .footer-links,
body.dmca-page .site-footer > .footer-links,
body.static-page .site-footer > .footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

body.about-page .site-footer > .footer-links a,
body.privacy-page .site-footer > .footer-links a,
body.terms-page .site-footer > .footer-links a,
body.contact-page .site-footer > .footer-links a,
body.dmca-page .site-footer > .footer-links a,
body.static-page .site-footer > .footer-links a{
  font-size:.85rem;
  transition:opacity .15s;
  white-space:nowrap;
  opacity:.95;
}

/* Copy (direct child) */
body.about-page .site-footer > .footer-copy,
body.privacy-page .site-footer > .footer-copy,
body.terms-page .site-footer > .footer-copy,
body.contact-page .site-footer > .footer-copy,
body.dmca-page .site-footer > .footer-copy,
body.static-page .site-footer > .footer-copy{
  font-size:.75rem;
  color:#fff;
  opacity:1;
  text-align:center;
  margin:0;
}

/* When `.footer-inner` is removed, make the footer itself a centered column */
body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.contact-page .site-footer,
body.dmca-page .site-footer,
body.static-page .site-footer{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Ensure the footer copy is centered when it's a direct child */
body.about-page .site-footer > .footer-copy,
body.privacy-page .site-footer > .footer-copy,
body.terms-page .site-footer > .footer-copy,
body.contact-page .site-footer > .footer-copy,
body.dmca-page .site-footer > .footer-copy,
body.static-page .site-footer > .footer-copy{
  text-align:center;
  margin:0;
}

/* Same links layout when direct child */
body.about-page .site-footer > .footer-links,
body.privacy-page .site-footer > .footer-links,
body.terms-page .site-footer > .footer-links,
body.contact-page .site-footer > .footer-links,
body.dmca-page .site-footer > .footer-links,
body.static-page .site-footer > .footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

body.about-page .site-footer .footer-inner .footer-links a,
body.privacy-page .site-footer .footer-inner .footer-links a,
body.terms-page .site-footer .footer-inner .footer-links a,
body.contact-page .site-footer .footer-inner .footer-links a,
body.dmca-page .site-footer .footer-inner .footer-links a,
body.static-page .site-footer .footer-inner .footer-links a{
  font-size:.85rem;
  transition:opacity .15s;
  white-space:nowrap;
  opacity:.95;
}

body.about-page .site-footer .footer-inner .footer-copy,
body.privacy-page .site-footer .footer-inner .footer-copy,
body.terms-page .site-footer .footer-inner .footer-copy,
body.contact-page .site-footer .footer-inner .footer-copy,
body.dmca-page .site-footer .footer-inner .footer-copy,
body.static-page .site-footer .footer-inner .footer-copy{
  font-size:.75rem;
  color:#fff;
  opacity:1;
}

/* Strong parity block: make informational page footers match the index footer
   in every relevant box-model and spacing property. These use `!important`
   to override legacy or build-order rules that previously caused visual
   mismatches (width/height differences). */
body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.contact-page .site-footer,
body.dmca-page .site-footer,
body.static-page .site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 1500 !important;
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  padding: 20px 18px !important;
  box-sizing: border-box !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  min-height: var(--measured-footer, 0px) !important;
  height: auto !important;
  max-height: 360px !important;
  overflow: hidden !important;
}

body.about-page .site-footer .footer-inner,
body.privacy-page .site-footer .footer-inner,
body.terms-page .site-footer .footer-inner,
body.contact-page .site-footer .footer-inner,
body.dmca-page .site-footer .footer-inner,
body.static-page .site-footer .footer-inner {
  max-width: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  height: auto !important;
}

body.about-page .site-footer .footer-inner > .footer-brand,
body.about-page .site-footer .footer-inner > .footer-links,
body.about-page .site-footer .footer-inner > .footer-copy,
body.privacy-page .site-footer .footer-inner > .footer-brand,
body.privacy-page .site-footer .footer-inner > .footer-links,
body.privacy-page .site-footer .footer-inner > .footer-copy,
body.terms-page .site-footer .footer-inner > .footer-brand,
body.terms-page .site-footer .footer-inner > .footer-links,
body.terms-page .site-footer .footer-inner > .footer-copy,
body.contact-page .site-footer .footer-inner > .footer-brand,
body.contact-page .site-footer .footer-inner > .footer-links,
body.contact-page .site-footer .footer-inner > .footer-copy,
body.dmca-page .site-footer .footer-inner > .footer-brand,
body.dmca-page .site-footer .footer-inner > .footer-links,
body.dmca-page .site-footer .footer-inner > .footer-copy,
body.static-page .site-footer .footer-inner > .footer-brand,
body.static-page .site-footer .footer-inner > .footer-links,
body.static-page .site-footer .footer-inner > .footer-copy{
  max-width:800px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Brand visual parity */
body.about-page .site-footer .footer-inner .footer-brand,
body.privacy-page .site-footer .footer-inner .footer-brand,
body.terms-page .site-footer .footer-inner .footer-brand,
body.contact-page .site-footer .footer-inner .footer-brand,
body.dmca-page .site-footer .footer-inner .footer-brand,
body.static-page .site-footer .footer-inner .footer-brand{
  font-size:1.1rem !important;
  font-weight:700 !important;
  color:#fff !important;
  margin-bottom:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  line-height:1 !important;
}

/* Links & copy */
body.about-page .site-footer .footer-inner .footer-links{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:10px;flex-wrap:wrap}
body.about-page .site-footer .footer-inner .footer-links a{font-size:.85rem;transition:opacity .15s;white-space:nowrap;opacity:.95}
body.about-page .site-footer .footer-inner .footer-copy{font-size:.75rem;color:#fff;opacity:1}

/* Exact-height fallback: force informational pages to use the canonical
   index footer height (114px). This overrides inline CSS vars or JS that
   might have written a different measured height, guaranteeing parity. */
body.about-page,
body.privacy-page,
body.terms-page,
body.contact-page,
body.dmca-page,
body.static-page {
  --measured-footer: 114px !important;
  --footer-h: calc(var(--measured-footer) + env(safe-area-inset-bottom, 0px)) !important;
}

body.about-page .site-footer,
body.privacy-page .site-footer,
body.terms-page .site-footer,
body.contact-page .site-footer,
body.dmca-page .site-footer,
body.static-page .site-footer {
  height: 114px !important;
  min-height: 114px !important;
  max-height: 114px !important;
  overflow: hidden !important;
}

body.about-page .site-footer .footer-inner,
body.privacy-page .site-footer .footer-inner,
body.terms-page .site-footer .footer-inner,
body.contact-page .site-footer .footer-inner,
body.dmca-page .site-footer .footer-inner,
body.static-page .site-footer .footer-inner {
  /* center content vertically within the forced outer height */
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  height: auto !important;
}
.consent-banner .consent-body{flex:1;min-width:0}
.consent-banner p{margin:0;line-height:1.45;color:var(--text-muted)}
.consent-banner p strong{color:var(--text)}
.consent-banner a{color:var(--brand);text-decoration:underline}
.consent-banner .consent-actions{display:flex;gap:10px;margin-left:12px}
.consent-banner button{border:0;padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.consent-accept{background:var(--brand);color:#fff;box-shadow:0 6px 14px rgba(31,111,235,0.18)}
.consent-decline{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--text)}

/* When consent banner is visible we add bottom padding to the page to avoid overlap */
/* Hide consent banner during initial render to avoid being chosen as LCP */
.consent-banner{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s}

/* When we mark the page ready, show the consent banner */
body.consent-ready .consent-banner{opacity:1;visibility:visible;transform:none}

/* When consent banner is visible we add bottom padding to the page to avoid overlap */
body.consent-visible{padding-bottom:calc(var(--consent-height,96px) + 24px)}

/* For static/informational pages we should not add body-level bottom padding
   because the footer is fixed and body padding creates a visual gap below
   the content. Instead, add the consent height to the page content padding so
   content sits above both the fixed footer and the consent banner. */
body.static-page.consent-visible,
body.about-page.consent-visible,
body.privacy-page.consent-visible,
body.terms-page.consent-visible,
body.dmca-page.consent-visible,
body.contact-page.consent-visible {
  padding-bottom: 0 !important;
}

body.static-page.consent-visible .page-content,
body.about-page.consent-visible .page-content,
body.privacy-page.consent-visible .page-content,
body.terms-page.consent-visible .page-content,
body.dmca-page.consent-visible .page-content,
body.contact-page.consent-visible .page-content {
  padding-bottom: calc(var(--footer-h) + var(--consent-height,96px)) !important;
}

@media(max-width:720px){
  .consent-banner{left:12px;right:12px;flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .consent-banner .consent-actions{justify-content:flex-end}
  .consent-banner button{width:48%;}
}

/* Ad placeholder and fallback styles */
.ad-slot{display:block;max-width:100%;margin:18px auto;text-align:center}
.ad-placeholder{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:8px;border:1px dashed rgba(0,0,0,0.06);background:linear-gradient(180deg,#fff,#fbfdff)}
.ad-placeholder-inner{font-weight:600;color:var(--text-muted)}
.ad-placeholder-accept{margin-left:12px;padding:6px 10px;border-radius:8px;border:0;background:var(--brand);color:#fff;cursor:pointer}
.ad-fallback{padding:12px;border-radius:8px;background:linear-gradient(180deg,#f8f9fb,#ffffff);border:1px solid rgba(0,0,0,0.03);color:var(--text-muted)}
.ad-collapsed{display:none!important;height:6px!important;margin:0!important;min-height:0!important;overflow:hidden!important;padding:0!important}


/* Spacer used to reserve space on short category pages so footer sits flush */
.page-spacer{display:block;width:100%;height:0;pointer-events:none;background:transparent}

/* Keep footer height stable during dynamic view swaps to avoid visual "shrinking" */
.site-footer{
  transition: none !important;
  -webkit-transition: none !important;
  /* Reserve a minimum height from measured value so layout doesn't jump while JS re-measures */
  min-height: var(--measured-footer, 0px);
}
.site-footer .footer-inner{
  min-height: var(--measured-footer, 0px);
}

/* Protective guard: prevent runaway footer height growth caused by
   repeated mobile drag or misbehaving scripts. This caps the visual
   height while JS diagnostics run. The cap is generous (360px).
   JS may add inline max-height/overflow during an active incident. */
.site-footer{
  max-height:360px; /* safe upper bound */
  overflow:hidden;
}

.site-footer{
  /* prefer a flexible footer: reserve a minimum height from the measured value
     but don't force a fixed height on the outer container. For most pages the
     footer visually matches the index because padding and inner content
     determine the final size. */
  min-height: var(--measured-footer, 0px);
  height: auto !important;
}
.site-footer .footer-inner{
  /* Do not force a computed inner height — let the inner content and
     the outer footer padding determine spacing. This avoids double-counting
     padding and removes empty bars above the brand links. */
  height: auto !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.site-footer .footer-inner > .footer-brand{margin-bottom:10px}
.site-footer .footer-inner > .footer-links{margin-bottom:10px}
.site-footer .footer-inner > .footer-copy{margin-bottom:0}

/* Hide footer until positioned (used on home and during view swaps) */
body.footer-hidden .site-footer{visibility:hidden !important;opacity:0 !important;pointer-events:none}

/* Informational pages (About/Privacy/Terms/Contact/DMCA) should use the
   same footer styling and fixed behavior as the index/category views so
   the footer remains visually consistent and pinned. Reserve content
   space using the measured footer variable. */
body.about-page .page-content,
body.privacy-page .page-content,
body.terms-page .page-content,
body.dmca-page .page-content,
body.contact-page .page-content,
body.static-page .page-content {
  padding-bottom: var(--footer-h) !important;
}

/* When content is short on informational pages, vertically center it between header and footer */
.page-content.page-content--center{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  /* Ensure the centering area accounts for header and footer heights */
  min-height: calc(100dvh - var(--topbar-h) - var(--measured-footer, 0px)) !important;
  padding-top: 12px !important;
  padding-bottom: calc(var(--footer-h) + 12px) !important;
}

/* ------------------------------------------------------------------
   Align informational page content with the app's main content column
   - On wide screens where the sidebar is visible, make `.page-wrap`
     share the same left origin as `.main-wrap` (sidebar width).
   - Keep `.page-header` left starting coordinate unchanged (full-bleed).
   - Ensure the page content area reserves the same vertical space as
     the app's main area so heights match: `min-height: calc(100dvh - var(--footer-h))`.
-------------------------------------------------------------------*/
@media (min-width: 900px) {
  .page-wrap{
    /* match the app's left offset created by the sidebar */
    margin-left: var(--sidebar-w);
    margin-right: 0;
    /* keep the same max width used elsewhere for page content */
    max-width: 780px;
    /* ensure consistent internal padding */
    padding-left: 12px;
    padding-right: 12px;
    /* match the main-wrap available height so UI heights are identical */
    min-height: calc(100dvh - var(--footer-h));
  }

  /* keep the page header starting at the viewport left edge (unchanged) */
  .page-header{
    left:0;
    right:0;
    width:100%;
  }

  /* ensure footer inner aligns visually with the content column */
  body.static-page .site-footer .footer-inner,
  body.about-page .site-footer .footer-inner,
  body.privacy-page .site-footer .footer-inner,
  body.terms-page .site-footer .footer-inner,
  body.dmca-page .site-footer .footer-inner,
  body.contact-page .site-footer .footer-inner{
    max-width:780px;
    margin-left:var(--sidebar-w);
    margin-right:auto;
    padding-left:12px;
    padding-right:12px;
  }
}