/* =========================================================
   NTX Pinball — COMPONENTS (ntx-components.css)  [CLEANED + FIXED]
   - Nav + theme picker + dropdowns + collapsed drawer
   - Cards/panels, buttons, badges, forms, tables
   - Hero stat cards, pinball bullets, mini logo tokens
   - Responsive + reduced motion

   Fixes applied in this version:
   1) Card “pinball” sits ON TOP of the card (like a pin) by default (no extra override needed)
   2) Burger drawer visuals match Games Mega (same popover feel + scrollbar styling)
   3) Removed conflicting/duplicate dropdown + themed dropdown blocks (kept ONE source of truth)
   4) Consolidated the repeated .ntx-thumb-square / gamecard image rules into ONE coherent set
   5) Consolidated LIGHT theme button rules into a single, consistent “solid blue” scheme
   6) Consolidated MIN theme grayscale rules into a single, consistent scheme (no random overrides)
========================================================= */


/* =========================================================
   0) GLOBAL FALLBACK TOKENS (safe defaults before JS sync)
   - JS should still sync --ntx-header-h from .ntx-header offsetHeight
========================================================= */
:root{
  --ntx-panel-stripe-h: 14px; /* top gradient stripe height for hero/panels */
  --ntx-header-h: 165px;                /* fallback only (pre-JS) */
  --ntx-burger-drawer-h: 50vh;          /* requested */
  --ntx-mega-max-h: 50vh;               /* requested for games popup */

  /* Logo sizing rule:
     - stays constant at desktop size
     - drops to 50% ONLY when burger/collapsed mode is active */
  --ntx-logo-h-desktop: 165px;
  --ntx-logo-h: var(--ntx-logo-h-desktop);
}


/* =========================================================
   1) HEADER: OPAQUE + CONTENT-DRIVEN HEIGHT + V-CENTERING
========================================================= */
.ntx-header{
  background: var(--ntx-header-bg, var(--ntx-bg)) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;

  height: auto !important;
  min-height: 0 !important;
  padding-block: clamp(4px, .6vw, 8px) !important;

  overflow: visible !important; /* dropdowns must not clip */
}
.ntx-header__inner{
  min-height: 0 !important;
  align-items: center !important;
  gap: clamp(6px, .9vw, 14px) !important;
  overflow: visible !important;
}
.ntx-header__right{
  align-items: center !important;
  overflow: visible !important;
}

/* Logo stays “dominant” while other header elements compress */
.ntx-brand__logo{
  height: var(--ntx-logo-h) !important;
  width: auto !important;
  max-height: none !important;
}

/* Nav/link sizing scales down smoothly */
.ntx-navlinks__link{
  padding: clamp(6px, .65vw, 10px) clamp(8px, .9vw, 12px);
  font-size: clamp(.86rem, .25vw + .82rem, 1.02rem);
}

/* Theme dots scale down a bit too */
.ntx-themedot{
  width: clamp(18px, 1.5vw, 28px);
  height: clamp(18px, 1.5vw, 28px);
}
.ntx-themedot::after{
  width: clamp(11px, .9vw, 16px);
  height: clamp(11px, .9vw, 16px);
}

/* Phones: explicitly keep header tight (do NOT change logo size here) */
@media (max-width: 576px){
  .ntx-header{ padding-block: 4px !important; }
  .ntx-themebar__label{ display:none !important; }
}


/* =========================================================
   2) NAV + THEME (theme row directly under menu/burger)
========================================================= */
.ntx-navtheme{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: visible !important;
}

/* When burger mode is active (JS adds .is-collapsed), shrink logo to 50% */
.ntx-navtheme.is-collapsed{
  --ntx-logo-h: calc(var(--ntx-logo-h-desktop) * 0.5);
}

.ntx-navtheme__card{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible !important;
}

/* Top row exists for collapsed mode (burger row) */
.ntx-navtheme__top{
  position: relative;
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: clamp(28px, 2.6vw, 34px);
  overflow: visible !important;
}

/* Panel stacks */
.ntx-navtheme__panel{
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible !important;
}

/* Word menu (inline) */
.ntx-stripnav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: visible !important;
}
.ntx-stripnav .dropdown{ display:inline-flex; overflow: visible !important; }
.ntx-stripnav .dropdown-toggle{ display:inline-flex; }

/* NAV LINKS (INLINE) */
.ntx-navlinks__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;

  color: var(--ntx-text);
  background: transparent;

  border: 0;
  box-shadow: 0 0 0 1px transparent;

  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  background-clip: padding-box;

  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, filter 160ms ease;
}
.ntx-navlinks__link:hover{
  box-shadow: 0 0 0 1px var(--ntx-border);
  background: color-mix(in srgb, var(--ntx-surface) 40%, transparent);
}
.ntx-navlinks__link:active{ filter: brightness(.99); }

.ntx-stripnav .dropdown-toggle::after{
  margin-left: .45rem;
  vertical-align: middle;
  opacity: .92;
}

/* Theme row directly under menu/burger */
.ntx-themebar__row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0px;
}
.ntx-themebar__label{
  font-weight: 900;
  font-size: .90rem;
  color: var(--ntx-muted);
  opacity: .92;
  white-space: nowrap;
}
.ntx-themebar__dots{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}


/* =========================================================
   3) BURGER (collapsed nav drawer)
========================================================= */
.ntx-navtheme__burger{
  display: inline-flex;
  border-radius: var(--ntx-btn-radius);
  padding: .38rem .6rem;
  line-height: 1;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: -0.01em;

  border: 1px solid rgba(0,0,0,.90);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 52%),
    color-mix(in srgb, var(--ntx-surface) 50%, transparent);
  color: var(--ntx-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);

  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, filter 160ms ease, color 160ms ease;
}

/* Burger is only visible in collapsed mode */
.ntx-navtheme:not(.is-collapsed) .ntx-navtheme__burger{ display: none; }
.ntx-navtheme.is-collapsed .ntx-navtheme__top{ display: flex; }

.ntx-navtheme__burger:hover{
  transform: translateY(-1px);
  border-color: transparent;
  color: var(--ntx-navmenu-item-hover-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 52%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--ntx-btn-left) 92%, #fff 8%),
      color-mix(in srgb, var(--ntx-btn-right) 90%, #000 10%)
    );
  box-shadow: 0 14px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.ntx-navtheme__burger:active{
  transform: none;
  filter: brightness(.98);
  box-shadow: var(--ntx-navmenu-item-press);
}

/* Collapsed base state: hide stripnav until open */
.ntx-navtheme.is-collapsed .ntx-stripnav{ display: none; }

/* When open: show stripnav as a drawer panel */
.ntx-navtheme.is-collapsed.is-open .ntx-stripnav{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;

  padding: 12px;

  /* Match Games Mega (popover feel) */
  border: 1px solid color-mix(in srgb, var(--ntx-border) 82%, transparent) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%),
    var(--ntx-popover-bg, var(--ntx-navmenu-bg)) !important;

  box-shadow: 0 22px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);

  overflow: auto;
  z-index: 8000;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

/* Drawer scrollbar (match Games Mega) */
.ntx-navtheme.is-collapsed.is-open .ntx-stripnav::-webkit-scrollbar{ width: 10px; }
.ntx-navtheme.is-collapsed.is-open .ntx-stripnav::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--ntx-border) 55%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ntx-navtheme.is-collapsed.is-open .ntx-stripnav::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--ntx-surface-2) 60%, transparent);
}

/* Desktop-ish collapsed (anchored panel) */
@media (min-width: 993px){
  .ntx-navtheme.is-collapsed.is-open .ntx-stripnav{
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: max-content;
    max-width: min(94vw, 560px);
    max-height: calc(100vh - var(--ntx-header-h) - 16px);
    border-radius: 18px;
  }

  .ntx-navtheme.is-collapsed.is-open .ntx-navtheme__top::after{
    content:"";
    position:absolute;
    top: calc(100% + 2px);
    left: 14px;
    width: 10px;
    height: 10px;
    background: var(--ntx-popover-bg, var(--ntx-navmenu-bg));
    border-left: 1px solid color-mix(in srgb, var(--ntx-border) 82%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--ntx-border) 82%, transparent);
    transform: rotate(45deg);
    box-shadow: -3px -3px 10px rgba(0,0,0,.12);
    z-index: 8001;
  }
}

/* <=992px: full-width drawer, 50% viewport height, scrollable */
@media (max-width: 992px){
  .ntx-navtheme.is-collapsed.is-open .ntx-stripnav{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--ntx-header-h, 120px);
    width: 100vw;
    max-width: 100vw;

    height: var(--ntx-burger-drawer-h);
    max-height: var(--ntx-burger-drawer-h);

    margin: 0;
    border-radius: 0;
  }
}

/* Collapsed menu item styling */
.ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link,
.ntx-navtheme.is-collapsed.is-open .dropdown-toggle{
  width: 100%;
  justify-content: space-between;
  white-space: nowrap;

  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);

  border: 0;
  border-radius: 12px;

  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 0 0 1px color-mix(in srgb, var(--ntx-navmenu-border) 75%, transparent);

  padding: 12px 14px;
  color: var(--ntx-navmenu-item);

  transition: transform .12s ease, box-shadow .16s ease, color .16s ease, filter .16s ease;
}
.ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link::before,
.ntx-navtheme.is-collapsed.is-open .dropdown-toggle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ntx-btn-left) 92%, #fff 8%),
    color-mix(in srgb, var(--ntx-btn-right) 90%, #000 10%)
  );
  opacity: 0;
  transition: opacity 160ms ease, filter 160ms ease;
}
.ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link:hover,
.ntx-navtheme.is-collapsed.is-open .dropdown-toggle:hover{
  color: var(--ntx-navmenu-item-hover-text);
  transform: translateY(-1px);
  box-shadow:
    0 14px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px transparent;
  filter: saturate(1.04);
}
.ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link:hover::before,
.ntx-navtheme.is-collapsed.is-open .dropdown-toggle:hover::before{
  opacity: 1;
}
.ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link:active,
.ntx-navtheme.is-collapsed.is-open .dropdown-toggle:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: var(--ntx-navmenu-item-press);
}
.ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link:active::before,
.ntx-navtheme.is-collapsed.is-open .dropdown-toggle:active::before{
  opacity: 1;
  filter: brightness(.98);
}
.ntx-navtheme.is-collapsed.is-open .dropdown{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* In-drawer dropdown menu becomes static/stacked (generic dropdowns) */
.ntx-navtheme.is-collapsed.is-open .dropdown-menu:not(.ntx-games-mega){
  position: static !important;
  float: none !important;
  width: 100%;
  margin-top: 6px;
  box-shadow: none;
  background: var(--ntx-navmenu-bg);
  border-color: var(--ntx-navmenu-border);
  z-index: auto !important;
}
.ntx-navtheme.is-collapsed.is-open .dropdown-menu:not(.ntx-games-mega) .dropdown-item{ border-radius:10px; }


/* =========================================================
   4) DROPDOWNS (theme-aware) + UNCLIP  [single source of truth]
========================================================= */
.dropdown{ position: relative; }

.dropdown-menu{
  border-radius: 16px;
  border: 1px solid var(--ntx-navmenu-border, var(--ntx-ui-border, var(--ntx-border)));
  background: var(--ntx-navmenu-bg, var(--ntx-popover-bg, var(--ntx-surface)));
  box-shadow: var(--ntx-shadow);
  overflow: hidden;
  z-index: 7000;
  backdrop-filter: none !important;
}

/* Safety: if anything upstream forces hidden with !important, this wins */
.dropdown-menu.show{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dropdown-divider{
  opacity: 1;
  border-top: 1px solid color-mix(in srgb, var(--ntx-navmenu-border, var(--ntx-border)) 80%, transparent);
  margin: .35rem 0;
}

.dropdown-item{
  color: var(--ntx-navmenu-item, var(--ntx-ui-text, var(--ntx-text)));
  padding: 12px 14px;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: .5rem;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 48%),
    linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.20);

  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, color .16s ease, filter .16s ease;
}
.dropdown-item + .dropdown-item{
  border-top: 1px solid color-mix(in srgb, var(--ntx-navmenu-border, var(--ntx-border)) 75%, transparent);
}
.dropdown-item:hover,
.dropdown-item:focus{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%),
    var(--ntx-navmenu-item-hover-bg, color-mix(in srgb, var(--ntx-accent) 18%, transparent));
  color: var(--ntx-navmenu-item, var(--ntx-ui-text, var(--ntx-text)));
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.dropdown-item:active{
  transform: translateY(0);
  box-shadow: var(--ntx-navmenu-item-press);
}


/* =========================================================
   5) THEME DOTS
========================================================= */
.ntx-themedot,
.ntx-themedot:focus,
.ntx-themedot:focus-visible,
.ntx-themedot.btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.ntx-themedot{
  --ntx-dot-swatch: linear-gradient(90deg, #999, #bbb);

  padding: 0;
  border:  1px solid rgba(0,0,0,.90);
  border-radius: 7px;
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: hidden;
  isolation: isolate;

  transform: translateZ(0);
  transition: transform 140ms ease, filter 160ms ease, box-shadow 160ms ease, border-radius 180ms ease;
  will-change: transform;
}
.ntx-themedot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: var(--ntx-dot-swatch);
  opacity: 0;
  transition: opacity 160ms ease, filter 160ms ease;
  z-index: 0;
}
.ntx-themedot::after{
  content:"";
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--ntx-dot-swatch);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 12px rgba(0,0,0,.18);
  transition: opacity 160ms ease, transform 160ms ease, border-radius 180ms ease;
  z-index: 1;
}

.ntx-themedot[data-theme="pixel-plunge"]{ --ntx-dot-swatch: linear-gradient(90deg, #ff51bd, #00ffd6); }
.ntx-themedot[data-theme="light"]       { --ntx-dot-swatch: linear-gradient(90deg, #ffffff, #23A8E1); }
.ntx-themedot[data-theme="min"]         { --ntx-dot-swatch: linear-gradient(90deg, #0b0d12, #2b2f3a); }
.ntx-themedot[data-theme="neon-noir"]   { --ntx-dot-swatch: linear-gradient(90deg, #00f5ff, #b6ff00); }
.ntx-themedot[data-theme="arcade-sunset"]{ --ntx-dot-swatch: linear-gradient(90deg, #ff6a00, #ff2bd6); }
.ntx-themedot[data-theme="ice-royale"]  { --ntx-dot-swatch: linear-gradient(90deg, #3b82f6, #9ae6ff); }
.ntx-themedot[data-theme="candy-cabinet"]{ --ntx-dot-swatch: linear-gradient(90deg, #ff4fd8, #ffd54a); }

.ntx-themedot:hover{
  filter: brightness(1.03) saturate(1.08);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ntx-btn-mid) 22%, transparent),
    0 14px 28px rgba(0,0,0,.22);
}
.ntx-themedot:hover::before{ opacity: 1; }
.ntx-themedot:hover::after{ opacity: 0; transform: scale(.78); box-shadow: none; }

.ntx-themedot.is-active,
.ntx-themedot.active,
.ntx-themedot[aria-pressed="true"]{
  border-radius: 999px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ntx-btn-mid) 26%, transparent),
    0 18px 34px rgba(0,0,0,.24);
  z-index: 2;
  transform: translateZ(0) scale(1.18);
}
.ntx-themedot.is-active::before,
.ntx-themedot.active::before,
.ntx-themedot[aria-pressed="true"]::before{ opacity: 1; }
.ntx-themedot.is-active::after,
.ntx-themedot.active::after,
.ntx-themedot[aria-pressed="true"]::after{ opacity: 0; transform: scale(.70); box-shadow: none; }

.ntx-themedot:focus-visible{
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ntx-btn-mid) 30%, transparent),
    0 18px 34px rgba(0,0,0,.26);
}
.ntx-themedot:focus-visible::before{ opacity: 1; }
.ntx-themedot:focus-visible::after{ opacity: 0; transform: scale(.78); box-shadow: none; }


/* =========================================================
   6) OUR GAMES — MEGA DROPDOWN
========================================================= */
.dropdown-menu.ntx-games-mega{
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ntx-border) 82%, transparent);
  border-radius: calc(var(--ntx-radius, 20px) + 2px);

  background: var(--ntx-popover-bg, color-mix(in srgb, var(--ntx-surface) 86%, #000 14%)) !important;
  backdrop-filter: none !important;

  box-shadow: var(--ntx-shadow, 0 18px 55px rgba(0,0,0,.40));
  overflow: hidden;

  width: min(760px, calc(100vw - 28px));
  max-height: min(var(--ntx-mega-max-h), 640px);
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;

  transform-origin: top left;
  transform: translateY(8px) scale(.99);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
.dropdown-menu.ntx-games-mega.show{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.dropdown-menu.ntx-games-mega::-webkit-scrollbar{ width: 10px; }
.dropdown-menu.ntx-games-mega::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--ntx-border) 55%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.dropdown-menu.ntx-games-mega::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--ntx-surface-2) 60%, transparent);
}

.ntx-games-mega__inner{
  position: relative;
  padding: 14px;
}
.ntx-games-mega__inner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 420px at 18% 0%,
      color-mix(in srgb, var(--ntx-btn-left) 20%, transparent) 0%,
      transparent 55%),
    radial-gradient(900px 360px at 92% 18%,
      color-mix(in srgb, var(--ntx-btn-right) 18%, transparent) 0%,
      transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  opacity: .9;
}

/* Top bar */
.ntx-games-mega__top{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-radius: var(--ntx-radius, 20px);
  background: color-mix(in srgb, var(--ntx-surface-2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ntx-border) 70%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.ntx-games-mega__title{
  color: var(--ntx-ui-text, var(--ntx-text)) !important;
  opacity: 1 !important;
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  line-height: 1.1;
  font-size: 1.05rem;
}
.ntx-games-mega__title .small,
.ntx-games-mega__title .ntx-muted{
  color: var(--ntx-ui-muted, var(--ntx-muted)) !important;
  opacity: 1 !important;
  text-shadow: none;
  font-weight: 650;
}
.ntx-games-mega__links{ display:flex; gap: 10px; flex: 0 0 auto; }

.ntx-games-mega__body{
  position: relative;
  z-index: 1;
  margin-top: 12px;
  display:grid;
  gap: 12px;
}

/* ERA accordion cards */
details.ntx-games-era{
  border-radius: var(--ntx-radius, 20px);
  border: 1px solid color-mix(in srgb, var(--ntx-border) 70%, transparent);
  background: color-mix(in srgb, var(--ntx-surface) 82%, transparent);
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
details.ntx-games-era:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  border-color: color-mix(in srgb, var(--ntx-btn-mid) 55%, var(--ntx-border) 45%);
}

/* Summary row */
summary.ntx-games-era__summary{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  user-select:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ntx-surface-2) 76%, transparent),
      transparent 85%);
  opacity: 1;
}
summary.ntx-games-era__summary::-webkit-details-marker{ display:none; }

.ntx-games-era__label{
  color: var(--ntx-ui-muted-strong, var(--ntx-muted-strong, var(--ntx-text))) !important;
  opacity: 1 !important;
  font-weight: 850;
  letter-spacing: .25px;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  line-height: 1.15;
}

/* Chevron (default = tiny caret that matches menu caret) */
.ntx-games-era__chev{
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  position: relative !important;
  opacity: .92 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ntx-games-era__chev::before{
  content:"" !important;
  position:absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid color-mix(in srgb, var(--ntx-text) 78%, transparent) !important;
  transform: translate(-50%,-35%) !important;
  transition: transform .18s ease, border-top-color .18s ease !important;
}
details.ntx-games-era[open] .ntx-games-era__chev::before{
  transform: translate(-50%,-65%) rotate(180deg) !important;
}

/* Open state */
details.ntx-games-era[open]{
  border-color: color-mix(in srgb, var(--ntx-btn-mid) 65%, var(--ntx-border) 35%);
}
details.ntx-games-era[open] summary.ntx-games-era__summary{
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ntx-btn-left) 16%, transparent),
      color-mix(in srgb, var(--ntx-btn-right) 12%, transparent));
}
details.ntx-games-era[open] .ntx-games-era__label{
  color: var(--ntx-ui-text, var(--ntx-text)) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

/* Content panel */
.ntx-games-era__content{
  padding: 10px 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--ntx-border) 55%, transparent);
  background: color-mix(in srgb, var(--ntx-surface-2) 48%, transparent);
}

/* Game list */
.ntx-games-era__list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ntx-games-era__item{ margin: 0; }

.ntx-games-era__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ntx-border) 60%, transparent);
  background: color-mix(in srgb, var(--ntx-surface) 72%, transparent);
  color: var(--ntx-text);
  font-weight: 800;
  letter-spacing: -0.01em;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.ntx-games-era__link:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ntx-btn-mid) 55%, var(--ntx-border) 45%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ntx-btn-left) 18%, transparent),
      color-mix(in srgb, var(--ntx-btn-right) 14%, transparent));
  box-shadow: 0 12px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
}
.ntx-games-era__link.is-active{
  border-color: color-mix(in srgb, var(--ntx-btn-mid) 78%, var(--ntx-border) 22%);
  background: var(--ntx-accent-grad, linear-gradient(90deg, #23A1DA, #F2E931));
  color: var(--ntx-on-primary, #07101B);
  box-shadow: 0 16px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
.ntx-games-era__link:active{
  transform: translateY(0);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.10), inset 0 -12px 20px rgba(0,0,0,.25);
}

@media (max-width: 992px){
  .dropdown-menu.ntx-games-mega{
    width: min(680px, calc(100vw - 24px));
    max-height: min(var(--ntx-mega-max-h), 620px);
  }
  .ntx-games-era__list{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .dropdown-menu.ntx-games-mega{
    width: calc(100vw - 18px);
    max-height: min(72vh, 560px);
    border-radius: 18px;
  }
  .ntx-games-mega__inner{ padding: 12px; }
  .ntx-games-mega__top{ padding: 12px; }
  .ntx-games-era__link{ padding: 10px 12px; }
}
.dropdown.ntx-gamesdrop > .dropdown-menu.ntx-games-mega{ margin-top: 10px; }

/* In burger drawer: keep Games Mega looking like Games Mega (not generic stacked dropdown) */
.ntx-navtheme.is-collapsed.is-open .dropdown-menu.ntx-games-mega{
  position: static !important;
  float: none !important;
  width: 100% !important;
  margin-top: 8px !important;

  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ntx-border) 82%, transparent) !important;
  border-radius: 18px !important;

  background: var(--ntx-popover-bg, var(--ntx-navmenu-bg)) !important;
  box-shadow: var(--ntx-shadow) !important;

  max-height: min(var(--ntx-mega-max-h, 50vh), calc(var(--ntx-burger-drawer-h, 50vh) - 90px)) !important;
  overflow: auto !important;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}


/* =========================================================
   7) CARDS / PANELS
========================================================= */
.ntx-hero, .ntx-panel{
  position:relative;
  border-radius:var(--ntx-radius);
  border:1px solid var(--ntx-border);
  background:transparent;
  overflow:hidden;
  box-shadow:var(--ntx-shadow);
}
.ntx-hero{ overflow:hidden; }
.ntx-hero__inner{ padding:22px; }
.ntx-panel{ padding:18px; overflow:hidden; }

/* Gradient stripe + opaque surface (no sliver, no transparency bleed) */
.ntx-hero::before,
.ntx-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:var(--ntx-radius);
  background:var(--ntx-accent-grad);
  opacity:1;
  pointer-events:none;
  z-index:0;
}
.ntx-hero::after,
.ntx-panel::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px; bottom:-1px;
  top:calc(var(--ntx-panel-stripe-h) - 1px);
  background:var(--ntx-panel-surface, var(--ntx-surface));
  border-bottom-left-radius:var(--ntx-radius);
  border-bottom-right-radius:var(--ntx-radius);
  border-top-left-radius:0;
  border-top-right-radius:0;
  pointer-events:none;
  z-index:0;
}
.ntx-hero__inner,
.ntx-panel > *{
  position:relative;
  z-index:1;
}

/* NTX CARD (base) */
.ntx-card{
  position:relative;
  border-radius:var(--ntx-radius);
  padding:16px;

  /* allow the corner pinball to hang outside */
  overflow:visible;

  /* skin moved to ::after so layers are controllable */
  background:transparent;
  border:0;
  box-shadow:none;

  transition: transform 140ms ease, filter 160ms ease;
}
.ntx-card.p-0{ padding:0 !important; }

/* Card skin layer (covers anything behind where it overlaps) */
.ntx-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--ntx-radius);
  border:1px solid var(--ntx-card-outline, var(--ntx-border));
  background:var(--ntx-card-surface, var(--ntx-surface));
  box-shadow:var(--ntx-shadow);
  pointer-events:none;

  /* IMPORTANT: skin is below pinball, above background */
  z-index:1;
}

/* Card contents sit above the skin */
.ntx-card > *{
  position:relative;
  z-index:2;
}

/* Card hover (GLOBAL) */
.ntx-card:hover::after{
  background: color-mix(in srgb, var(--ntx-card-surface, var(--ntx-surface)) 92%, var(--ntx-text) 8%);
  border-color: color-mix(in srgb, var(--ntx-border) 65%, var(--ntx-text) 35%);
}
.ntx-card:hover{
  color: var(--ntx-text);
  transform: translateY(-1px);
}

/* Consistent headings inside panels/cards */
.ntx-panel h1, .ntx-panel h2, .ntx-panel h3,
.ntx-card  h1, .ntx-card  h2, .ntx-card  h3,
.ntx-hero  h1, .ntx-hero  h2, .ntx-hero  h3,
.ntx-panel .card-title, .ntx-card .card-title, .ntx-hero .card-title{
  font-family: var(--ntx-font-display, var(--ntx-font-body));
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ntx-text);
  margin: 0 0 .5rem 0;
}
.ntx-panel h4, .ntx-card h4, .ntx-hero h4{
  font-family: var(--ntx-font-display, var(--ntx-font-body));
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ntx-text);
  margin: 0 0 .45rem 0;
}

/* Silver pinball “pin” (ON TOP of the card corner) */
.ntx-card::before{
  content:"";
  position:absolute;

  left: calc(-1 * var(--ntx-card-pinball-outset, 18px));
  top:  calc(-1 * var(--ntx-card-pinball-outset, 18px));

  width:var(--ntx-card-pinball-size, 34px);
  height:var(--ntx-card-pinball-size, 34px);

  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  opacity:.95;
  pointer-events:none;

  /* IMPORTANT: pinball is above skin and contents */
  z-index:3;

  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id='g'%20cx='30%25'%20cy='28%25'%20r='75%25'%3E%0A%3Cstop%20offset='0%25'%20stop-color='%23ffffff'/%3E%0A%3Cstop%20offset='18%25'%20stop-color='%23f2f6fb'/%3E%0A%3Cstop%20offset='45%25'%20stop-color='%23c8d2dd'/%3E%0A%3Cstop%20offset='72%25'%20stop-color='%23838f9c'/%3E%0A%3Cstop%20offset='100%25'%20stop-color='%23323a44'/%3E%0A%3C/radialGradient%3E%0A%3CradialGradient%20id='gl'%20cx='34%25'%20cy='30%25'%20r='40%25'%3E%0A%3Cstop%20offset='0%25'%20stop-color='%23ffffff'%20stop-opacity='0.95'/%3E%0A%3Cstop%20offset='60%25'%20stop-color='%23ffffff'%20stop-opacity='0'/%3E%0A%3C/radialGradient%3E%0A%3ClinearGradient%20id='rim'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%0A%3Cstop%20offset='0'%20stop-color='%23ffffff'%20stop-opacity='0.75'/%3E%0A%3Cstop%20offset='0.35'%20stop-color='%23aab6c2'%20stop-opacity='0.2'/%3E%0A%3Cstop%20offset='1'%20stop-color='%23000000'%20stop-opacity='0.35'/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Ccircle%20cx='32'%20cy='32'%20r='24.6'%20fill='url(%23g)'/%3E%0A%3Ccircle%20cx='32'%20cy='32'%20r='24.6'%20fill='none'%20stroke='url(%23rim)'%20stroke-width='2.6'/%3E%0A%3Ccircle%20cx='24'%20cy='21'%20r='13.8'%20fill='url(%23gl)'/%3E%0A%3Ccircle%20cx='44.8'%20cy='43.2'%20r='3.6'%20fill='%23ffffff'%20opacity='0.22'/%3E%0A%3C/svg%3E");
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.22))
    drop-shadow(0 1px 0 rgba(255,255,255,.14));
}


/* =========================================================
   8) BUTTONS (theme-based + Bootstrap mapping)  (kept)
========================================================= */
.btn, a.btn, button.btn{
  border-radius:var(--ntx-btn-radius) !important;
  text-decoration:none !important;
}
.btn{
  transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  will-change:transform;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.btn:focus-visible{ outline:none !important; box-shadow:var(--ntx-focus) !important; }

/* Lift */
.ntx-btn-primary:hover, .ntx-btn-secondary:hover, .ntx-btn-tertiary:hover{ transform:translateY(-1px); }
.ntx-btn-primary:active, .ntx-btn-secondary:active, .ntx-btn-tertiary:active{ transform:none; }

/* PRIMARY (LEFT) */
.ntx-btn-primary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid transparent !important;

  background-color:var(--ntx-btn-left) !important;
  background-image:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-left) 92%, #fff 8%) 0%,
    color-mix(in srgb, var(--ntx-btn-left) 72%, #000 28%) 100%
  ) !important;

  color:var(--ntx-on-primary) !important;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow:var(--ntx-btn-shadow);
  background-clip:padding-box;
}
.ntx-btn-primary:hover{ filter:brightness(.99) saturate(1.06); box-shadow:var(--ntx-btn-shadow-hover); }
.ntx-btn-primary:active{ filter:brightness(.97); box-shadow:var(--ntx-btn-shadow-press); }

/* SECONDARY (RIGHT) */
.ntx-btn-secondary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid transparent !important;

  background-color:var(--ntx-btn-right) !important;
  background-image:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-right) 90%, #fff 10%) 0%,
    color-mix(in srgb, var(--ntx-btn-right) 72%, #000 28%) 100%
  ) !important;

  color:var(--ntx-on-secondary) !important;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow:var(--ntx-btn-shadow);
  background-clip:padding-box;
}
.ntx-btn-secondary:hover{ filter:brightness(1.02) saturate(1.06); box-shadow:var(--ntx-btn-shadow-hover); }
.ntx-btn-secondary:active{ filter:brightness(.99); box-shadow:var(--ntx-btn-shadow-press); }

/* TERTIARY — outline -> MID fill on hover */
.ntx-btn-tertiary{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  border:1px solid color-mix(in srgb, var(--ntx-btn-mid) 70%, var(--ntx-border) 30%) !important;
  background:transparent !important;
  color:var(--ntx-text) !important;

  font-weight:850;
  letter-spacing:-0.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.ntx-btn-tertiary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
  opacity:0;
  transition:opacity 160ms ease, filter 160ms ease;
  background:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-mid) 92%, #fff 8%) 0%,
    color-mix(in srgb, var(--ntx-btn-mid) 72%, #000 28%) 100%
  );
}
.ntx-btn-tertiary:hover{
  border-color:transparent !important;
  color:var(--ntx-on-tertiary) !important;
  box-shadow:var(--ntx-btn-shadow-hover);
}
.ntx-btn-tertiary:hover::before{ opacity:1; }
.ntx-btn-tertiary:active::before{ opacity:1; filter:brightness(.97); }

/* OUTLINE (MID) — filled like primary using MID, becomes outline on hover */
.ntx-btn-outline,
a.ntx-btn-outline,
button.ntx-btn-outline{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid transparent !important;

  background-color:var(--ntx-btn-mid) !important;
  background-image:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-mid) 92%, #fff 8%) 0%,
    color-mix(in srgb, var(--ntx-btn-mid) 72%, #000 28%) 100%
  ) !important;

  color:var(--ntx-on-primary) !important;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow:var(--ntx-btn-shadow);
  background-clip:padding-box;
}
.ntx-btn-outline:hover,
a.ntx-btn-outline:hover,
button.ntx-btn-outline:hover{
  transform:translateY(-1px);
  background:transparent !important;
  border-color:var(--ntx-btn-mid) !important;
  color:var(--ntx-btn-mid) !important;
  filter:saturate(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 28px rgba(0,0,0,.14);
}
.ntx-btn-outline:active,
a.ntx-btn-outline:active,
button.ntx-btn-outline:active{
  transform:none;
  background:transparent !important;
  border-color:color-mix(in srgb, var(--ntx-btn-mid) 88%, #000 12%) !important;
  color:color-mix(in srgb, var(--ntx-btn-mid) 92%, #000 8%) !important;
  filter:brightness(.99);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 8px 16px rgba(0,0,0,.12);
}
.ntx-btn-outline:focus-visible,
a.ntx-btn-outline:focus-visible,
button.ntx-btn-outline:focus-visible{
  outline:none !important;
  box-shadow:var(--ntx-focus) !important;
}

/* SOFT (LEFT) */
.ntx-btn-soft,
a.ntx-btn-soft,
button.ntx-btn-soft{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  border:1px solid color-mix(in srgb, var(--ntx-btn-left) 35%, var(--ntx-border) 65%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 58%),
    color-mix(in srgb, var(--ntx-btn-left) 18%, var(--ntx-surface) 82%) !important;
  color:var(--ntx-text) !important;

  font-weight:850;
  letter-spacing:-0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  background-clip:padding-box;
}
.ntx-btn-soft:hover,
a.ntx-btn-soft:hover,
button.ntx-btn-soft:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--ntx-btn-left) 55%, var(--ntx-border) 45%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%),
    color-mix(in srgb, var(--ntx-btn-left) 26%, var(--ntx-surface) 74%) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
  filter:saturate(1.05);
}
.ntx-btn-soft:active,
a.ntx-btn-soft:active,
button.ntx-btn-soft:active{
  transform:none;
  filter:brightness(.99);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -10px 18px rgba(0,0,0,.18);
}
.ntx-btn-soft:focus-visible,
a.ntx-btn-soft:focus-visible,
button.ntx-btn-soft:focus-visible{
  outline:none !important;
  box-shadow:var(--ntx-focus) !important;
}

/* Small buttons */
.btn-sm.ntx-btn-primary, .btn-sm.ntx-btn-secondary, .btn-sm.ntx-btn-tertiary{ padding:.35rem .65rem; }

/* Bootstrap mapping */
:where(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info){
  border:1px solid transparent !important;
  background-color:var(--ntx-btn-left) !important;
  background-image:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-left) 92%, #fff 8%) 0%,
    color-mix(in srgb, var(--ntx-btn-left) 72%, #000 28%) 100%
  ) !important;
  color:var(--ntx-on-primary) !important;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow:var(--ntx-btn-shadow);
}
:where(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info):hover{
  transform:translateY(-1px);
  filter:brightness(.99) saturate(1.06);
  box-shadow:var(--ntx-btn-shadow-hover);
}
:where(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info):active{
  transform:none;
  filter:brightness(.97);
  box-shadow:var(--ntx-btn-shadow-press);
}

:where(.btn-secondary, .btn-dark, .btn-light){
  border:1px solid transparent !important;
  background-color:var(--ntx-btn-right) !important;
  background-image:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-right) 90%, #fff 10%) 0%,
    color-mix(in srgb, var(--ntx-btn-right) 72%, #000 28%) 100%
  ) !important;
  color:var(--ntx-on-secondary) !important;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow:var(--ntx-btn-shadow);
}
:where(.btn-secondary, .btn-dark, .btn-light):hover{
  transform:translateY(-1px);
  filter:brightness(1.02) saturate(1.06);
  box-shadow:var(--ntx-btn-shadow-hover);
}
:where(.btn-secondary, .btn-dark, .btn-light):active{
  transform:none;
  filter:brightness(.99);
  box-shadow:var(--ntx-btn-shadow-press);
}

:where(.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-secondary){
  position:relative;
  overflow:hidden;
  isolation:isolate;

  border:1px solid color-mix(in srgb, var(--ntx-btn-mid) 70%, var(--ntx-border) 30%) !important;
  background:transparent !important;
  color:var(--ntx-text) !important;

  font-weight:850;
  letter-spacing:-0.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
:where(.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-secondary)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
  opacity:0;
  transition:opacity 160ms ease, filter 160ms ease;
  background:linear-gradient(
    135deg,
    color-mix(in srgb, var(--ntx-btn-mid) 92%, #fff 8%) 0%,
    color-mix(in srgb, var(--ntx-btn-mid) 72%, #000 28%) 100%
  );
}
:where(.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-secondary):hover{
  transform:translateY(-1px);
  border-color:transparent !important;
  color:var(--ntx-on-tertiary) !important;
  box-shadow:var(--ntx-btn-shadow-hover);
}
:where(.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-secondary):hover::before{ opacity:1; }


/* =========================================================
   9) BADGES
========================================================= */
.ntx-badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ntx-border) 85%, transparent);
  background:color-mix(in srgb, var(--ntx-surface) 40%, transparent);
  color:var(--ntx-text);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:-0.01em;
}


/* =========================================================
   10) FORMS
========================================================= */
.form-label{ color:var(--ntx-text); }
.form-text{ color:var(--ntx-muted); }

.form-control, .form-select, textarea,
input[type="text"], input[type="email"], input[type="search"], input[type="url"],
input[type="number"], input[type="tel"], input[type="password"]{
  border-radius:var(--ntx-radius-sm);
  border:1px solid var(--ntx-input-border, var(--ntx-border));
  background:var(--ntx-input-bg, rgba(255,255,255,.10));
  color:var(--ntx-text);
}
.form-control::placeholder, textarea::placeholder, input::placeholder{
  color:color-mix(in srgb, var(--ntx-muted) 85%, transparent);
}
.form-control:focus, .form-select:focus, textarea:focus, input:focus{
  box-shadow:var(--ntx-focus) !important;
  border-color:color-mix(in srgb, var(--ntx-input-border, var(--ntx-border)) 55%, var(--ntx-accent) 45%);
  outline: none;
}

/* Checkboxes / radios */
.form-check-label{ color:var(--ntx-text); }
.form-check-input{
  width: 1.05em;
  height: 1.05em;
  border:1px solid var(--ntx-input-border, var(--ntx-border));
  background-color:var(--ntx-input-bg, rgba(255,255,255,.10));
}
.form-check-input:focus{
  box-shadow:var(--ntx-focus) !important;
  border-color:color-mix(in srgb, var(--ntx-input-border, var(--ntx-border)) 55%, var(--ntx-accent) 45%);
}
.form-check-input:checked{
  background-color:var(--ntx-accent);
  border-color:color-mix(in srgb, var(--ntx-accent) 70%, #000 30%);
}

/* Range */
.form-range::-webkit-slider-thumb{ background-color:var(--ntx-accent); }
.form-range::-moz-range-thumb{ background-color:var(--ntx-accent); }


/* =========================================================
   11) TABLES
========================================================= */
.table{ color:var(--ntx-text); margin-bottom:0; }
.table thead th{
  color:var(--ntx-text);
  border-bottom:1px solid var(--ntx-border);
  font-weight:950;
  letter-spacing:-0.01em;
  padding:14px 14px;
  background:var(--ntx-table-head-grad);
}
.table td{
  border-color:var(--ntx-border);
  padding:14px 14px;
  vertical-align:top;
  color:var(--ntx-text);
  background:var(--ntx-table-row-bg);
  transition:background 160ms ease, color 160ms ease, font-weight 160ms ease;
}
.table tbody tr:nth-child(even) td{ background:var(--ntx-table-row-bg-alt); }
.table tbody tr:hover td{
  background:var(--ntx-table-row-hover);
  font-weight:700;
  color:color-mix(in srgb, var(--ntx-text) 92%, var(--ntx-link-hover) 8%);
}

/* Card-wrapped table spacing */
.ntx-page .ntx-card.p-0.overflow-hidden .table-responsive,
.ntx-page .ntx-card.p-0.overflow-hidden .table{ margin-left:0 !important; margin-right:0 !important; }
.ntx-page .ntx-card.p-0.overflow-hidden .table > :not(caption) > * > :first-child{ padding-left:18px; }
.ntx-page .ntx-card.p-0.overflow-hidden .table > :not(caption) > * > :last-child{ padding-right:18px; }
.ntx-page .ntx-card.p-0.overflow-hidden thead th:first-child{ padding-left:18px; }
.ntx-page .ntx-card.p-0.overflow-hidden .table thead{ background:var(--ntx-table-head-grad); }
.ntx-page .ntx-card.p-0.overflow-hidden .table thead th{ background:transparent !important; }


/* =========================================================
   12) MEDIA / STATS
========================================================= */
.ntx-section-title{ margin:0 0 12px 0; font-weight:900; letter-spacing:-0.02em; }
.ntx-mini{ font-size:.95rem; }
.ntx-media-img{
  width:100%;
  border-radius:var(--ntx-radius);
  border:1px solid var(--ntx-border);
  box-shadow:var(--ntx-shadow);
  display:block;
}

/* HERO STAT CARDS */
.ntx-hero-stat{
  position:relative;
  border-radius:var(--ntx-radius);
  border:1px solid var(--ntx-stat-border);
  padding:14px 16px;
  background:var(--ntx-stat-bg-1);
  box-shadow: var(--ntx-stat-shadow);
  overflow:hidden;
  transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease;
}
.ntx-statbar .ntx-hero-stat:nth-child(1){ background:var(--ntx-stat-bg-1); }
.ntx-statbar .ntx-hero-stat:nth-child(2){ background:var(--ntx-stat-bg-2); }
.ntx-statbar .ntx-hero-stat:nth-child(3){ background:var(--ntx-stat-bg-3); }
.ntx-statbar .ntx-hero-stat:nth-child(4){ background:var(--ntx-stat-bg-4); }

.ntx-hero-stat::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 48%, transparent 70%);
  opacity:.9;
}
.ntx-hero-stat::after{
  content:"";
  position:absolute;
  top:-18px;
  right:-18px;
  width:70px;
  height:70px;
  border-radius:999px;
  background: color-mix(in srgb, #fff 14%, transparent);
  opacity:.6;
  filter: blur(1px);
  pointer-events:none;
}
.ntx-hero-stat:hover{
  transform: translateY(-1px);
  box-shadow: var(--ntx-stat-shadow-hover);
  filter:saturate(1.06);
  border-color: color-mix(in srgb, var(--ntx-btn-mid) 35%, var(--ntx-stat-border) 65%);
}
.ntx-hero-stat__value{
  position:relative;
  z-index:1;
  font-weight:950;
  letter-spacing:-0.02em;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  line-height:1.05;
}
.ntx-hero-stat__label{
  position:relative;
  z-index:1;
  margin-top:6px;
  font-size:.92rem;
  color: var(--ntx-stat-label);
  font-weight:900;
  letter-spacing:-0.01em;
}
.ntx-hero-stat__hint{
  position:relative;
  z-index:1;
  margin-top:8px;
  font-size:.88rem;
  color: var(--ntx-stat-hint);
  font-weight:750;
}
.ntx-hero-stat .ntx-ul-pinball{ margin-top:10px; }
.ntx-hero-stat .ntx-ul-pinball > li{ margin:.32em 0; }

/* Jump-to: no sticky active look */
.ntx-jumpto .btn.active,
.ntx-jumpto .btn:active{
  background:transparent !important;
  color:inherit !important;
  border-color:var(--ntx-border) !important;
  box-shadow:none !important;
}


/* =========================================================
   13) RESPONSIVE (non-header)
========================================================= */
@media (max-width: 992px){
  :root{ --ntx-footer-h:clamp(110px, 14vh, 220px); }
  .ntx-stripnav{ gap:8px; }
}
@media (max-width: 720px){
  .ntx-themebar__label{ display:none; }
  .ntx-themebar__row{ gap:8px; }
  .ntx-themebar__dots{ gap:7px; }
}
@media (max-width: 380px){
  .ntx-themebar__dots{ gap:5px; }
}


/* =========================================================
   14) REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover{ transition:none !important; }
  .ntx-footer-ticker__track{ animation:none; }
  .ntx-footer-ticker__text{ padding-left:0; }
  .ntx-btn-primary:hover, .ntx-btn-secondary:hover, .ntx-btn-tertiary:hover{ transform:none; }
  .ntx-navtheme__burger:hover,
  .ntx-navtheme.is-collapsed.is-open .ntx-navlinks__link:hover{ transform:none; }
  .ntx-hero-stat:hover{ transform:none; }
}


/* =========================================================
   15) CHROME PINBALL BULLET (SVG data URI)
========================================================= */
.ntx-ul-pinball{
  list-style:none;
  padding-left:1.35em;
  margin:0;
}
.ntx-ul-pinball > li{
  position:relative;
  margin:.35em 0;
}
.ntx-ul-pinball > li::before{
  content:"";
  position:absolute;
  left:-1.15em;
  top:.62em;
  transform:translateY(-50%);
  width:.62em;
  height:.62em;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.95;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.12));
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cdefs%3E%3CradialGradient%20id='g'%20cx='30%25'%20cy='28%25'%20r='75%25'%3E%3Cstop%20offset='0%25'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='18%25'%20stop-color='%23f2f6fb'/%3E%3Cstop%20offset='45%25'%20stop-color='%23c8d2dd'/%3E%3Cstop%20offset='72%25'%20stop-color='%23838f9c'/%3E%3Cstop%20offset='100%25'%20stop-color='%23323a44'/%3E%3C/radialGradient%3E%3CradialGradient%20id='gl'%20cx='34%25'%20cy='30%25'%20r='40%25'%3E%3Cstop%20offset='0%25'%20stop-color='%23ffffff'%20stop-opacity='0.95'/%3E%3Cstop%20offset='60%25'%20stop-color='%23ffffff'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient%20id='rim'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'%20stop-opacity='0.75'/%3E%3Cstop%20offset='0.35'%20stop-color='%23aab6c2'%20stop-opacity='0.2'/%3E%3Cstop%20offset='1'%20stop-color='%23000000'%20stop-opacity='0.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='12'%20cy='12'%20r='9.25'%20fill='url(%23g)'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='9.25'%20fill='none'%20stroke='url(%23rim)'%20stroke-width='1.2'/%3E%3Ccircle%20cx='9'%20cy='8'%20r='5.2'%20fill='url(%23gl)'/%3E%3Ccircle%20cx='16.8'%20cy='16.2'%20r='1.35'%20fill='%23ffffff'%20opacity='0.22'/%3E%3C/svg%3E");
}
@media (max-width: 420px){
  .ntx-ul-pinball > li::before{ width:.58em; height:.58em; left:-1.08em; }
}


/* =========================================================
   16) MINI LOGO TOKEN COLORS + TOKEN SIZE CONTROL
========================================================= */
.ntx-mini-logo{
  width:26px;
  height:calc(26px * 0.89);
  display:inline-block;
  vertical-align:-0.12em;

  --txStroke:  var(--ntx-accent);
  --txKeyline: color-mix(in srgb, var(--ntx-body-bg) 85%, #000 15%);
  --txFill:    color-mix(in srgb, #ffffff 92%, var(--ntx-bg) 8%);
  --flipFill:  var(--ntx-accent-2);
}

/* Token size control (75% smaller) */
.ntx-token--sm{
  width: 20% !important;
  height: auto !important;
  display: inline-block;
  vertical-align: -0.15em;
}
.ntx-cost__tokens{
  display: inline-flex;
  gap: .25rem;
  align-items: center;
}


/* =========================================
   Header CTA: "NEW" starburst + text
========================================= */
.ntx-cta-link.ntx-cta-burst{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}

/* Starburst badge */
.ntx-cta-burst__burst{
  position: relative;
  width: 50px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  background: var(--ntx-yellow, #F2E931);
  color: #000000;

  clip-path: polygon(
    50% 0%,
    60% 12%,
    78% 6%,
    74% 26%,
    94% 22%,
    86% 40%,
    100% 50%,
    86% 60%,
    94% 78%,
    74% 74%,
    78% 94%,
    60% 88%,
    50% 100%,
    40% 88%,
    22% 94%,
    26% 74%,
    6% 78%,
    14% 60%,
    0% 50%,
    14% 40%,
    6% 22%,
    26% 26%,
    22% 6%,
    40% 12%
  );

  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  border: 2px solid rgba(0,0,0,.15);

  line-height: 1;
  transform-origin: 50% 50%;
}
.ntx-cta-burst__burst > span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .8px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Text part */
.ntx-cta-burst__text{
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ntx-text);
  opacity: .95;
}
.ntx-cta-burst__action{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hover/focus */
.ntx-cta-link.ntx-cta-burst:hover .ntx-cta-burst__burst{
  transform: translateY(-1px) rotate(-1deg);
  transition: transform .15s ease;
}
.ntx-cta-link.ntx-cta-burst:focus-visible{
  outline: 3px solid rgba(35,161,218,.55);
  outline-offset: 4px;
  border-radius: 12px;
}


/* =========================================================
   FORCE CTA to stay identical on mobile + collapsed
========================================================= */
#ntxCtaEl .ntx-cta-link::before,
#ntxCtaEl .ntx-cta-link::after{
  content: none !important;
}
#ntxCtaEl,
#ntxCtaSlot{
  display: block !important;
}
#ntxCtaEl .ntx-cta-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none;
}
#ntxCtaEl .ntx-cta-burst__burst{ display: inline-flex !important; }
#ntxCtaEl .ntx-cta-burst__text{
  display: inline !important;
  white-space: normal;
}
#ntxCtaEl .ntx-cta-burst__action{ display: inline !important; }


/* =========================================================
   CARD GRIDS (fixed-width columns, no stretching)
========================================================= */
.ntx-cardgrid{
  --ntx-grid-gap: 22px;
  --ntx-cardw: 340px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ntx-cardw)), var(--ntx-cardw)));
  justify-content:center;
  gap: var(--ntx-grid-gap);
}
.ntx-panel .ntx-cardgrid{
  background: var(--ntx-cardstage-bg);
  border: 1px solid var(--ntx-cardstage-border);
  border-radius: calc(var(--ntx-radius) - 6px);
  padding: 14px;
}
@media (max-width: 576px){
  .ntx-panel .ntx-cardgrid{ padding: 10px; }
}
.ntx-cardgrid > *{ width:100%; }
@media (max-width: 575.98px){
  .ntx-cardgrid{
    --ntx-grid-gap: 16px;
    --ntx-cardw: 100%;
    justify-content:stretch;
  }
}


/* =========================================================
   GAME CARD (re-usable skin)  [CONSOLIDATED + FIXED]
========================================================= */
.ntx-gamecard{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;

  height: 100%;
}
.ntx-cardgrid{ align-items: stretch; }
.ntx-cardgrid > a{ display:block; height:100%; }

/* Bigger titles */
.ntx-gamecard__title{
  font-size: 1.7rem;
  font-weight: 950;
  line-height: 1.02;
  margin: 0 0 .65rem 0;
}

/* Media area grows + centers image */
.ntx-gamecard__media{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* Backglass wrapper: trim-fit to image, no frame, no deadspace */
.ntx-gamecard .ntx-thumb-square{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  line-height: 0;
}
.ntx-gamecard .ntx-thumb-square img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height: 320px;          /* safety cap */
  object-fit: contain;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-inline: auto;
}

/* Bottom block pinned to bottom */
.ntx-gamecard__bottom{
  margin-top:auto;
  padding-top:.75rem;
}

/* Year + manufacturer */
.ntx-gamecard__mfg,
.ntx-gamecard__year{
  font-size: 1.25rem;
  line-height: 1;
}
.ntx-gamecard__mfg{
  font-weight: 850;
  color: var(--ntx-ui-muted);
}
.ntx-gamecard__year{
  font-weight: 950;
}
.ntx-gamecard__prod{
  margin-top: .45rem;
  font-size: 1.05rem;
  color: var(--ntx-ui-muted);
}

/* Remove the upper-left pinball decoration ONLY on game cards */
.ntx-gamecard.ntx-card::before{ display:none !important; }

/* Gradient rollover for game cards ONLY */
.ntx-gamecard::after{
  border-color: var(--ntx-border);
}
.ntx-cardgrid > a:hover .ntx-gamecard::after{
  inset:-1px;
  background: linear-gradient(90deg, var(--ntx-accent-a), var(--ntx-accent-b));
  border-color: transparent;
}
.ntx-cardgrid > a:hover .ntx-gamecard,
.ntx-cardgrid > a:hover .ntx-gamecard *{
  color: #000 !important;
}


/* =========================================================
   THEME: MIN (strict grayscale, consolidated)
========================================================= */
[data-theme="min"]{
  color: #fff;
}
[data-theme="min"] a,
[data-theme="min"] a:hover{ color:#fff !important; }

[data-theme="min"] .ntx-panel::after{ background: rgba(0,0,0,.94) !important; }
[data-theme="min"] .ntx-card::after{ background: rgba(18,18,18,.94) !important; }

[data-theme="min"] .btn{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
[data-theme="min"] .btn:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.40) !important;
  color: #fff !important;
}

/* Keep primary/nav buttons hard grayscale */
[data-theme="min"] .btn.ntx-btn-primary,
[data-theme="min"] .btn.ntx-btn-primary.ntx-navbtn{
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
[data-theme="min"] .btn.ntx-btn-primary:hover,
[data-theme="min"] .btn.ntx-btn-primary.ntx-navbtn:hover{
  background: #111 !important;
  border-color: #fff !important;
}

/* Badges in MIN */
[data-theme="min"] .badge,
[data-theme="min"] .ntx-badge-soft{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}


/* =========================================================
   THEME: LIGHT (solid blue buttons, consolidated)
========================================================= */
/* Headings in BLUE */
[data-theme="light"] .ntx-title,
[data-theme="light"] .ntx-categoryline,
[data-theme="light"] .ntx-erahead,
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] .ntx-gamecard__title,
[data-theme="light"] .ntx-gamecard__year,
[data-theme="light"] .ntx-gamecard__mfg,
[data-theme="light"] .ntx-gamecard__prod{
  color: #0b5ed7 !important;
}

/* Normal text black */
[data-theme="light"],
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] .ntx-muted{
  color: #0b1020 !important;
}

/* LIGHT: cards/panels are white */
[data-theme="light"] .ntx-panel::after{ background: rgba(255,255,255,.96) !important; }
[data-theme="light"] .ntx-card::after{ background: rgba(255,255,255,.94) !important; }

/* LIGHT: buttons SOLID (no gradients) */
[data-theme="light"] .ntx-btn-primary,
[data-theme="light"] .btn.ntx-btn-primary,
[data-theme="light"] .btn.ntx-btn-primary.ntx-navbtn{
  background-color:#0b5ed7 !important;
  background-image:none !important;
  border-color:rgba(11,94,215,.60) !important;
  color:#ffffff !important;
}
[data-theme="light"] .ntx-btn-primary:hover,
[data-theme="light"] .btn.ntx-btn-primary:hover,
[data-theme="light"] .btn.ntx-btn-primary.ntx-navbtn:hover{
  background-color:#0a52bf !important;
  background-image:none !important;
  border-color:rgba(11,94,215,.75) !important;
  color:#ffffff !important;
}
[data-theme="light"] .ntx-btn-secondary{
  background-color:rgba(11,94,215,.12) !important;
  background-image:none !important;
  border-color:rgba(11,94,215,.35) !important;
  color:#0b5ed7 !important;
}
[data-theme="light"] .ntx-btn-secondary:hover{
  background-color:rgba(11,94,215,.16) !important;
  border-color:rgba(11,94,215,.55) !important;
  color:#0b5ed7 !important;
}
[data-theme="light"] .ntx-btn-tertiary{
  background-image:none !important;
  background-color:transparent !important;
  border-color:rgba(11,94,215,.55) !important;
  color:#0b5ed7 !important;
}
[data-theme="light"] .ntx-btn-tertiary:hover{
  background-color:rgba(11,94,215,.10) !important;
}

/* LIGHT only: CTA text black */
[data-theme="light"] .ntx-navtheme__cta{ color:#0b1020 !important; }

/* Badges: blue tint */
[data-theme="light"] .badge,
[data-theme="light"] .ntx-badge-soft{
  background: rgba(11,94,215,.10) !important;
  border: 1px solid rgba(11,94,215,.22) !important;
  color: #0b1020 !important;
}

/* Panel stripe: keep it vivid */
[data-theme="light"] .ntx-panel::before{
  opacity: 1 !important;
  filter: saturate(1.2) contrast(1.15);
}


/* =========================================================
   Candy Cabinet: panel stripe reads like theme button
========================================================= */
[data-theme="candy-cabinet"] .ntx-panel::before{
  opacity: 1 !important;
  filter: saturate(1.15) contrast(1.08);
}


/* =========================================================
   LEGACY HEADER COMPACT (kept for compatibility)
   Put at END so it wins (your IDs remain supported)
========================================================= */
#ntxNavTheme .ntx-navtheme__card{
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
#ntxNavTheme .ntx-navtheme__panel{
  margin: 0 !important;
  padding: 0 !important;
}
#ntxCtaSlot{
  margin: 0 !important;
  padding: 0 !important;
}
#ntxNavTheme .ntx-themebar__row{
  margin: 0 !important;
  padding: 0 !important;
}
#ntxNavTheme .ntx-navtheme__cta{
  margin: 0 !important;
  padding: 0 !important;
}
#ntxNavTheme .ntx-cta-link{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.05 !important;
}
#ntxNavTheme .ntx-themebar__label{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
}
#ntxNavTheme .ntx-themedot{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1 !important;
}
#ntxHeader,
#ntxHeader .ntx-header__inner,
#ntxHeader .ntx-navtheme__card{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#ntxHeader #ntxNavTheme .ntx-navtheme__top{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#ntxHeader .ntx-brand{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
@media (max-width: 576px){
  #ntxBurgerMenuBtn.ntx-navtheme__burger{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1 !important;
    min-height: 0 !important;
  }
  #ntxBurgerMenuBtn .ntx-burger__icon{ line-height: 0 !important; }
  #ntxBurgerMenuBtn .ntx-burger__text{ line-height: 1 !important; }
}

/* =========================================================
   EVENTS PAGE (shared)
   Moved from events_body.php to keep page styling inherited
   ========================================================= */

<style>
/* ------------------------------
   2026-ish UI polish (page-local)
--------------------------------- */

/* Panel spacing (Events page only) */
.ntx-page--events .ntx-panel{ margin-bottom: 18px; }
.ntx-page--events .ntx-panel:last-child{ margin-bottom: 0; }

.ntx-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ntx-section-head .ntx-h2{ margin:0; }
.ntx-section-head .ntx-muted{ margin:0; }

/* Card grid */
.ntx-events-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 16px;
}
@media (max-width: 720px){
  .ntx-events-grid{ grid-template-columns: 1fr; }
}

/* Host filter tiles — keep rounded tile, but ensure images NEVER crop */
.ntx-host-tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 84px));
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ntx-host-tile{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.70);
  border-radius: 14px;
  padding: 6px 6px 8px;
  cursor:pointer;
  text-align:left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ntx-host-tile:hover{ transform: translateY(-1px); }
.ntx-host-tile.is-active{
  border-color: rgba(220,72,20,0.60);
  box-shadow: 0 0 0 3px rgba(220,72,20,0.16);
}
.ntx-host-tile__media{
  width: 62px;
  height: 62px;
  border-radius: 14px;  /* rounded container */
  overflow: hidden;      /* keep container rounded */
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.06);
  padding: 7px;          /* IMPORTANT: inset so image/placeholder never touches edges */
  box-sizing: border-box;
}
.ntx-host-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* IMPORTANT: no cropping (Colin/Carpool fit fully) */
  border-radius: 0;      /* IMPORTANT: do not round the image itself */
  display:block;
  background: rgba(255,255,255,0.88);
}
.ntx-host-tile__placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .5px;
  opacity: 0.70;
  padding: 6px;          /* keep text away from edges */
  text-align:center;
  box-sizing:border-box;
}
.ntx-host-tile__label{
  width: 74px;
  max-width: 74px;
  margin-top: 6px;
  font-weight: 800;
  font-size: 0.80rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}

/* Event card header */
.ntx-event-card{
  border-radius: 18px;
  overflow: hidden;
}
.ntx-event-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px 14px;
}

/* NEW: allow responsive reflow so title goes below host image on narrow width */
.ntx-event-head__left{ flex: 0 0 auto; }
.ntx-event-card__titlewrap{ min-width: 0; flex: 1 1 auto; }
@media (max-width: 520px){
  .ntx-event-card__head{
    flex-direction: column;
    align-items: flex-start;
  }
  .ntx-event-head__left{
    width: 100%;
    display:flex;
    justify-content:flex-start;
  }
  .ntx-event-card__titlewrap{
    width: 100%;
  }
}

.ntx-event-card__title{
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.ntx-event-card__host{
  margin-top: 4px;
  font-weight: 800;
  opacity: 0.88;
  font-size: 1.06rem;
}
.ntx-event-card__addrProm{
  margin-top: 4px;
  font-weight: 900;
  opacity: 0.92;
  font-size: 1.02rem;
}

/* Host logo blocks — container may be square-ish, image always contain, no rounded image */
.ntx-event-card__hostlogo{
  width: 76px;
  height: 76px;
  border-radius: 0;
  padding: 8px;
  box-sizing: border-box;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.ntx-event-card__hostlogo--big{
  width: 108px;
  height: 108px;
  padding: 10px;
  object-fit: contain;
}

/* Meta block */
.ntx-event-card__meta{
  padding: 0 14px 12px 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.ntx-meta-row{
  display:flex;
  gap: 8px;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}
.ntx-meta-k{ font-weight: 900; white-space: nowrap; }
.ntx-meta-v{ min-width: 0; }

.ntx-meta-row--address{ margin-top: 2px; padding-top: 2px; padding-bottom: 8px; }
.ntx-meta-v--address{
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: -0.15px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

/* Pre-registration callout */
.ntx-prereg{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.ntx-prereg__flag{
  font-weight: 1000;
  letter-spacing: .4px;
  color: #d30000;
  text-shadow:
    -1px -1px 0 #fff,
     0px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  0px 0 #fff,
     1px  0px 0 #fff,
    -1px  1px 0 #fff,
     0px  1px 0 #fff,
     1px  1px 0 #fff;
}
.ntx-prereg__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 6px;
}
.ntx-prereg__date{ font-weight: 900; }
.ntx-prereg__btn{ white-space: nowrap; }

/* Actions rows */
.ntx-event-card__actions{
  padding: 0 14px 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
}
.ntx-event-card__actions .ntx-navbtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.ntx-details-arrow{
  display:inline-block;
  transition: transform .18s ease;
  transform-origin: 50% 55%;
}
[data-ntx-details-btn].is-open .ntx-details-arrow{
  transform: rotate(180deg);
}
.ntx-event-details--ifpa { margin-top: 10px; }

/* Details panel */
.ntx-event-details{
  margin: 0 14px 14px 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.ntx-event-details__body{
  padding: 10px 12px 12px 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.ntx-event-details__links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ntx-ifpa-pre{
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
}

/* Past header date */
.ntx-event-card__date{
  font-size: 1.06rem;
  margin-top: 6px;
  font-weight: 850;
  opacity: 0.75;
}

/* Winner strip — TEXT LEFT, PHOTO RIGHT (with class hook) */
.ntx-winner-strip{
  display:flex;
  align-items:stretch;
  gap: 22px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  margin: 12px 14px 14px 14px;
}
.ntx-winner-strip__photo{
  width: 110px;
  height: 110px;
  flex: 0 0 auto;
  border-radius: 0;
  padding: 10px;           /* keep image/initials away from edges */
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ntx-winner-strip__photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  display:block;
}
.ntx-winner-strip__initials{
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding: 10px;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight: 950;
  font-size: 2rem;
  letter-spacing: .5px;
  opacity: .72;
}
.ntx-winner-strip__text{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.ntx-winner-strip__label{
  font-size: 1.15rem;
  font-weight: 950;
  letter-spacing: .2px;
  margin-right: 10px;
}
.ntx-winner-strip__name{
  font-size: 1.30rem;
  font-weight: 950;
  line-height: 1.15;
  margin: 0;
}
.ntx-winner-strip__wpprs{
  margin-top: 8px;
  font-size: 1.12rem;
  font-weight: 900;
  opacity: .90;
}

/* Past stats tiles row */
.ntx-event-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 0 14px 14px 14px;
}
.ntx-stat-tile{
  flex: 1 1 160px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.10);
}
.ntx-stat-k{
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .3px;
  opacity: .78;
  font-size: 1.02rem;
}
.ntx-stat-v{
  font-weight: 950;
  font-size: 1.35rem;
}

/* Results */
.ntx-results-toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.ntx-results-toggle__chev{
  display:inline-block;
  transition: transform .12s ease;
}
.ntx-results-toggle.is-open .ntx-results-toggle__chev{
  transform: rotate(180deg);
}
.ntx-results-panel{
  margin: 0 14px 14px 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.ntx-results-panel .table{ margin-bottom: 0; }
</style>