/* =========================================================
   NTX Pinball — BASE + LAYOUT (ntx-layout.css)
   - Fixed header + fixed footer (always visible)
   - Body reserves space so content ends EXACTLY 10px above footer
   - JS should update --ntx-header-h / --ntx-footer-h at runtime
========================================================= */

/* =========================
   0) CORE TOKENS
========================= */
:root{
  /* Exact requested breathing room */
  --ntx-page-gap: 10px;

  /* Vertical spacing between page sections/panels */
  --ntx-section-gap: 18px;

  /* Safe area (iOS) */
  --ntx-safe-top:    env(safe-area-inset-top, 0px);
  --ntx-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Fallback heights (JS overwrites these) */
  --ntx-header-h: 140px;
  --ntx-footer-h: 120px;

  /* Single source of truth */
  --ntx-body-pad-top:    calc(var(--ntx-header-h) + var(--ntx-page-gap) + var(--ntx-safe-top));
  --ntx-body-pad-bottom: calc(var(--ntx-footer-h) + var(--ntx-page-gap) + var(--ntx-safe-bottom));
}

/* =========================================================
   PAGE RHYTHM (consistent spacing between panels/sections)
   - Keeps page-level spacing out of individual views
========================================================= */
.ntx-page .container > section{ margin-bottom: var(--ntx-section-gap); }
.ntx-page .container > section:last-child{ margin-bottom: 0; }

/* =========================================================
   1) BASE
========================================================= */
*{ box-sizing:border-box; }
html, body{
  margin:0;
  background: transparent; /* background handled by ::before/::after */
  color: var(--ntx-text);
  font-family: var(--ntx-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  isolation: isolate; /* keep background layers behind everything */
  overflow-x: hidden;
}

/* Full-page theme background (no repeating seams while scrolling) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background: var(--ntx-body-bg);
  background-image: var(--ntx-body-bg-grad, none);
  background-repeat:no-repeat;
  background-size: cover;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: var(--ntx-body-bg-pattern, none);
  opacity: var(--ntx-body-bg-pattern-opacity, .35);
  pointer-events:none;
}

/* Keep site containers consistent */
.container{ max-width:1160px; }

/* Links */
a{
  color:var(--ntx-link);
  text-decoration:none;
  text-underline-offset:.16em;
}
a:hover{
  color:var(--ntx-link-hover);
  text-decoration:none;
}

/* Focus */
:focus-visible{
  outline:none;
  box-shadow:var(--ntx-focus);
  border-radius:10px;
}

/* Page wrapper:
   - body already provides the exact gaps (do NOT add padding here)
   - min-height helps short pages fill the viewport between fixed chrome
*/
main.ntx-page,
.ntx-page{
  padding:0;
  min-height: calc(100vh - var(--ntx-body-pad-top) - var(--ntx-body-pad-bottom));
}

/* Prevent margin-collapse from “creeping” into body padding */
main.ntx-page::before,
.ntx-page::before{
  content:"";
  display:table;
}

/* Typography */
.ntx-title{
  margin:0;
  font-weight:950;
  letter-spacing:-0.03em;
  line-height:1.05;
  font-size:clamp(1.8rem, 2.8vw, 2.45rem);
}

/* Display font for headings */
h1, h2, h3, h4,
.ntx-title,
.ntx-erahead,
.ntx-games-mega__title{
  font-family: var(--ntx-font-display, var(--ntx-font-body, system-ui));
}

.ntx-lead{ font-size:1.05rem; line-height:1.55; }
.ntx-muted{ color:var(--ntx-muted); }

/* =========================================================
   2) HEADER (fixed)
========================================================= */
.ntx-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1030;
  background:var(--ntx-header-bg, var(--ntx-bg));
  border-bottom:1px solid var(--ntx-border);
  box-shadow:var(--ntx-shadow-sm);
  overflow:visible; /* never clip dropdowns */
}

.ntx-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
}

.ntx-brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.ntx-header__right{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  overflow:visible;
}

/* =========================================================
   3) FOOTER (fixed, always visible)
   - Content gap is handled by body padding-bottom
========================================================= */
.ntx-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1200;

  border-top:1px solid var(--ntx-chrome-border);
  background: var(--ntx-footer-bg, var(--ntx-bg));
  backdrop-filter: none;

  display:flex;
  flex-direction:column;

  overflow:hidden; /* keep ticker contained */
}

/* =========================
   3a) Footer ticker
========================= */
.ntx-footer-ticker{
  flex:0 0 var(--ntx-footer-ticker-h);
  height:var(--ntx-footer-ticker-h);
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
  z-index:1;
  background:var(--ntx-ticker-bg);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ntx-footer-ticker::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ntx-ticker-gloss), var(--ntx-ticker-stripe);
  pointer-events:none;
  opacity:.6;
}

.ntx-footer-ticker__viewport{ width:100%; overflow:hidden; }

/* Track: animation uses your JS variables:
   --ntx-marquee-duration and --ntx-marquee-start
*/
.ntx-footer-ticker__track{
  --ntx-marquee-duration: 70s;
  --ntx-marquee-start: 0px;

  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change:transform;

  /* Default paused until JS adds .ntx-ticker-ready (prevents jump on load) */
  animation: ntxMarquee var(--ntx-marquee-duration) linear infinite;
  animation-play-state: paused;
}
.ntx-footer-ticker__track.ntx-ticker-ready{
  animation-play-state: running;
}

.ntx-footer-ticker__text{
  display:inline-block;
  padding-left:100vw; /* runway */
  font-weight:750;
  letter-spacing:.2px;
  color:var(--ntx-ticker-text);
  line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.ntx-footer-ticker:hover .ntx-footer-ticker__track{ animation-play-state:paused; }

@keyframes ntxMarquee{
  0%   { transform: translateX(var(--ntx-marquee-start)); }
  100% { transform: translateX(calc(var(--ntx-marquee-start) - 50%)); }
}

/* =========================
   3b) Footer inner
========================= */
.ntx-footer__inner{
  display:flex;
  align-items:center;
  padding:6px 0;
}
.ntx-footer__inner .container{ width:100%; }
.ntx-footer__inner .row{
  width:100%;
  align-items:center;
  --bs-gutter-y:.35rem;
}

.ntx-footer__brand{ font-weight:900; letter-spacing:-0.01em; line-height:1.05; }
.ntx-footer__credit{ opacity:.65; font-size:.78rem; line-height:1.1; margin-top:2px; }

/* =========================================================
   4) Page spacing normalization
   - Many views use <div class="container py-5"> etc.
   - Remove that vertical padding so your fixed chrome + body gaps are the truth
========================================================= */
main.ntx-page > .container.py-5,
main.ntx-page > .container.pt-5,
main.ntx-page > .container.pb-5,
main.ntx-page > .container.py-4,
main.ntx-page > .container.pt-4,
main.ntx-page > .container.pb-4,
main.ntx-page > .container.py-3,
main.ntx-page > .container.pt-3,
main.ntx-page > .container.pb-3,
.ntx-page > .container.py-5,
.ntx-page > .container.pt-5,
.ntx-page > .container.pb-5,
.ntx-page > .container.py-4,
.ntx-page > .container.pt-4,
.ntx-page > .container.pb-4,
.ntx-page > .container.py-3,
.ntx-page > .container.pt-3,
.ntx-page > .container.pb-3{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* =========================================================
   5) Opaque dropdown menus (burger + generic)
========================================================= */
.ntx-burgerdrop .dropdown-menu{
  background:var(--ntx-navmenu-bg);
  border:1px solid var(--ntx-navmenu-border);
  box-shadow:var(--ntx-shadow);
  opacity:1;
}
.ntx-burgerdrop .dropdown-item,
.ntx-burgerdrop .dropdown-header,
.ntx-burgerdrop .dropdown-menu a{
  color:var(--ntx-navmenu-item);
}
.ntx-burgerdrop .dropdown-item:hover,
.ntx-burgerdrop .dropdown-item:focus{
  background:var(--ntx-navmenu-item-hover-bg);
  color:var(--ntx-navmenu-item-hover-text);
}

/* Burger menu: nested accordion */
.ntx-burger-games{ padding:.25rem .5rem; }
.ntx-burger-games > details{ border-radius:12px; }
.ntx-burger-games summary{
  list-style:none;
  cursor:pointer;
  padding:.5rem .75rem;
  border-radius:12px;
  color:var(--ntx-navmenu-item);
  font-weight:800;
}
.ntx-burger-games summary::-webkit-details-marker{ display:none; }
.ntx-burger-games summary:hover{
  background:var(--ntx-navmenu-item-hover-bg);
  color:var(--ntx-navmenu-item-hover-text);
}
.ntx-burger-games__panel{ padding:.5rem .25rem .25rem; }

/* =========================================================
   6) CONTRACT ENFORCEMENT
   - Keep our body reserves from being stomped by other files
========================================================= */
body{
  padding-top: var(--ntx-body-pad-top) !important;
  padding-bottom: var(--ntx-body-pad-bottom) !important;
}

main.ntx-page{
  padding-bottom: calc(var(--ntx-footer-h, 0px) + 12px);
}

.ntx-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

html{
  min-height:100%;
  background: var(--ntx-body-bg);
  scroll-padding-top: calc(var(--ntx-header-h, 120px) + var(--ntx-page-gap, 10px));
}

/* Optional: smooth scrolling (remove if you don’t want it) */
html{
  scroll-behavior: smooth;
}

/* Header container padding trim (only if needed) */
.ntx-header{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.ntx-header__inner{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* =========================================================
   NTX LAYOUT PATCH — FORCE PAGE-ONLY SCROLL (GAMES + PANELS)
   Goal:
   - Only the browser page scrolls vertically
   - No internal scroll containers inside main content
   - Panels/wrappers never get height/max-height clamps
   Notes:
   - Scoped to main page content to avoid breaking header mega menus/drawers
========================================================= */

html, body{
  overflow-y: auto !important;   /* if anything set body/html to hidden, override it */
  overscroll-behavior-y: auto !important;
}

/* Main content must never become its own scrollbox */
main.ntx-page,
.ntx-page{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Common “panel/wrapper” culprits */
.ntx-page .container,
.ntx-page section,
.ntx-page .ntx-panel,
.ntx-page .ntx-games-era__content{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;     /* prevents inner scrollbars */
}

/* If any global rule sets overflow-y:auto on these, kill it */
.ntx-page .ntx-panel,
.ntx-page .ntx-games-era__content{
  overflow-y: visible !important;
}