/* Shared Nightshift scene for Games, Labs and About.
   Loaded last so the older accumulated background overrides cannot compete. */
html,
body {
  background: #040c16 !important;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body::before,
body::after,
.page-frame::before,
.page-frame::after {
  content: none !important;
  display: none !important;
}

.ambient-layer {
  display: none !important;
}

.page-frame {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 100svh;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
}

.ns-shared-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  background: #040c16 url("assets/nightshift-scene-floor-clean-v5-20260928.png") center top / 100% 100% no-repeat;
}

.ns-shared-atmosphere::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 5, 10, .29) 0%, rgba(2, 7, 13, .20) 13%, rgba(3, 9, 16, .07) 27%, transparent 39%);
}



.ns-shared-stars {
  position: absolute;
  inset: 0;
}

.ns-shared-stars::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 20%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffdb7e;
  box-shadow: 3vw 13vh 4px #ffcb5a, 27vw 2vh 3px #e9b140, 56vw 18vh 3px #f1c658, 72vw -8vh 4px #ffc976, 7vw 62vh 3px #ffc35d, 60vw 50vh 4px #eaa142;
  animation: ns-shared-stars 7s ease-in-out infinite alternate;
}

.ns-shared-stars--near { opacity: .72; }
.ns-shared-stars--far { opacity: .24; transform: translate(7%, -6%); }
.ns-shared-stars--far::before { animation-delay: -4s; }

.arcade-header,
.section-screen,
.arcade-quote-footer {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-image: none !important;
}

/* Inner pages use the exact same full-width header geometry as the homepage. */
.arcade-header {
  width: 100% !important;
  height: 12.5svh !important;
  min-height: 88px !important;
  margin: 0 !important;
}

body .arcade-header > .arcade-logo.nightshift-logo {
  position: absolute !important;
  left: 3.6% !important;
  top: 1.2svh !important;
  width: 17.6% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transform: none !important;
}

body .arcade-header > .arcade-logo.nightshift-logo .ns-logo-symbol {
  display: block !important;
  width: 29% !important;
  flex: 0 0 29% !important;
}

body .arcade-header > .arcade-logo.nightshift-logo .ns-logo-symbol > svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

body .arcade-header > .arcade-logo.nightshift-logo .ns-logo-copy {
  display: flex !important;
  flex-direction: column !important;
  width: 71% !important;
  gap: 5px !important;
}

body .arcade-header > .arcade-logo.nightshift-logo .ns-logo-copy > strong {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 880 / 112;
  background: url("assets/nightshift-wordmark.svg") center / contain no-repeat !important;
  filter: drop-shadow(0 0 4px #f5be4726);
  font-size: 0 !important;
  line-height: 0 !important;
}

body .arcade-header > .arcade-logo.nightshift-logo .ns-logo-copy > strong > * {
  display: none !important;
}

body .arcade-header > .arcade-logo.nightshift-logo .ns-logo-copy > small {
  display: block !important;
  padding-left: 2px !important;
  color: #b9c5d6 !important;
  font-size: clamp(5px, .48vw, 9px) !important;
  line-height: 1 !important;
  letter-spacing: .85em !important;
  white-space: nowrap !important;
}

.arcade-nav {
  position: absolute !important;
  display: flex !important;
  gap: 14px !important;
  left: 50.7% !important;
  right: auto !important;
  top: 3.9svh !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  translate: 0 0 !important;
  overflow: visible !important;
}

.arcade-nav > a {
  flex: 0 0 auto !important;
  position: relative !important;
  width: clamp(116px, 8.85vw, 170px) !important;
  min-width: 0 !important;
  height: clamp(42px, 5.65svh, 56px) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #6b81903b !important;
  border-radius: 0 !important;
  background: linear-gradient(#06101c99, #030913cc) !important;
  box-shadow: none !important;
  color: #cbd4e2 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(12px, .96vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  transform: none !important;
}

body .arcade-header > .arcade-nav > a:nth-child(1) { --tab: #ffb42c; }
body .arcade-header > .arcade-nav > a:nth-child(2) { --tab: #a17bff; }
body .arcade-header > .arcade-nav > a:nth-child(3) { --tab: #97e45e; }

body .arcade-header > .arcade-nav > a::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  bottom: auto !important;
  left: 17% !important;
  width: 66% !important;
  height: 2px !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, var(--tab), transparent) !important;
  box-shadow: 0 0 7px color-mix(in srgb, var(--tab) 55%, transparent) !important;
  opacity: 1 !important;
  transform: none !important;
}

body .arcade-header > .arcade-nav > a::after {
  content: none !important;
  display: none !important;
}

body .arcade-header > .arcade-nav > a:hover,
body .arcade-header > .arcade-nav > a:focus-visible,
body .arcade-header > .arcade-nav > a.active,
body .arcade-header > .arcade-nav > a[aria-current="page"] {
  border-color: var(--tab) !important;
  background: color-mix(in srgb, var(--tab) 10%, #030b16) !important;
  box-shadow: none !important;
  color: #e7edf6 !important;
  transform: none !important;
}

.section-screen {
  width: min(100%, 1320px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Matching divider rails below the tabs and above the footer copy. */
body .page-frame > .arcade-header::after,
body .page-frame > .arcade-quote-footer::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 73% !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, transparent, #bcc8d45c 14%, #bcc8d45c 86%, transparent) !important;
  opacity: 1 !important;
}

body .page-frame > .arcade-header::after {
  top: auto !important;
  bottom: 0 !important;
}

body .page-frame > .arcade-quote-footer::before {
  top: 0 !important;
  bottom: auto !important;
}



@keyframes ns-shared-stars {
  from { opacity: .18; }
  to { opacity: .55; }
}

@media (max-width: 1050px) {
  .ns-shared-atmosphere {
    background-size: auto 100%;
    background-position: 20% center;
  }
}

@media (max-width: 650px) {
  .arcade-header {
    height: 150px !important;
    min-height: 150px !important;
  }

  body .arcade-header > .arcade-logo.nightshift-logo {
    position: absolute !important;
    top: 9px !important;
    left: 50% !important;
    width: 225px !important;
    max-width: calc(100vw - 40px) !important;
    transform: translateX(-50%) !important;
  }

  .arcade-nav {
    position: absolute !important;
    top: 90px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: flex !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  .arcade-nav > a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 43px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .section-screen {
    width: 100% !important;
  }

  .ns-shared-atmosphere {
    background-size: auto 1100px;
    background-position: 17% top;
  }

  
}

@media (prefers-reduced-motion: reduce) {
  .ns-shared-atmosphere *,
  .ns-shared-atmosphere *::before,
  .ns-shared-atmosphere *::after {
    animation: none !important;
  }
}

/* === REMOVE LOWER LEFT CIRCLE START === */


/* === REMOVE LOWER LEFT CIRCLE END === */



/* BEGIN HOMEPAGE SHARED BACKGROUND PATCH */
/* Games / Labs / About gebruiken exact dezelfde scene als de homepage. */

.page-frame,
.arcade-header,
.section-screen,
.arcade-quote-footer {
  background: transparent !important;
  background-image: none !important;
}

.ns-shared-atmosphere {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  min-height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #040c16 url("assets/nightshift-scene-floor-clean-v5-20260928.png") center top / 100% 100% no-repeat !important;
}

.ns-shared-atmosphere::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(1, 5, 10, .29) 0%,
    rgba(2, 7, 13, .20) 13%,
    rgba(3, 9, 16, .07) 27%,
    transparent 39%
  ) !important;
}

@media (max-width: 1050px) {
  .ns-shared-atmosphere {
    background-size: auto 100% !important;
    background-position: 20% center !important;
  }
}

@media (max-width: 650px) {
  .ns-shared-atmosphere {
    background-size: auto 1100px !important;
    background-position: 17% top !important;
  }
}
/* END HOMEPAGE SHARED BACKGROUND PATCH */



/* ==========================================================
   NIGHTSHIFT — STABLE TAB NAVIGATION
   ========================================================== */

/* logo echt volledig weg */
.arcade-header .arcade-logo,
.arcade-header .nightshift-logo {
  display: none !important;
}


/*
  Tabs absoluut op exact hetzelfde schermmidden.
  Niet afhankelijk van logo, contentbreedte of actieve pagina.
*/
body .arcade-header > .arcade-nav {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;

  top: 3.9svh !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-50%) !important;
  translate: none !important;

  display: flex !important;
  align-items: center !important;

  gap: 14px !important;

  overflow: visible !important;
}


/* elke tab houdt exact dezelfde geometrie */
body .arcade-header > .arcade-nav > a,
body .arcade-header > .arcade-nav > a:hover,
body .arcade-header > .arcade-nav > a:focus,
body .arcade-header > .arcade-nav > a:focus-visible,
body .arcade-header > .arcade-nav > a.active,
body .arcade-header > .arcade-nav > a[aria-current="page"] {

  box-sizing: border-box !important;

  flex: 0 0 auto !important;

  width: clamp(116px, 8.85vw, 170px) !important;
  min-width: clamp(116px, 8.85vw, 170px) !important;
  max-width: clamp(116px, 8.85vw, 170px) !important;

  height: clamp(42px, 5.65svh, 56px) !important;
  min-height: clamp(42px, 5.65svh, 56px) !important;
  max-height: clamp(42px, 5.65svh, 56px) !important;

  margin: 0 !important;
  padding: 0 !important;

  border-width: 1px !important;

  transform: none !important;
  translate: none !important;

  line-height: 1 !important;
}


/*
  Tijdens een inhoudswissel verandert de header zelf helemaal niet.
*/
.arcade-header {
  contain: layout style !important;
}


/* De hoofdinhoud mag zacht vervangen worden */
.section-screen {
  view-transition-name: nightshift-content;
}


/* browsers met View Transition ondersteuning */
::view-transition-old(nightshift-content) {
  animation:
    100ms ease-out both ns-page-out;
}

::view-transition-new(nightshift-content) {
  animation:
    150ms ease-out both ns-page-in;
}

@keyframes ns-page-out {
  from {
    opacity: 1;
  }

  to {
    opacity: .88;
  }
}

@keyframes ns-page-in {
  from {
    opacity: .88;
  }

  to {
    opacity: 1;
  }
}


/* voorkom witte browserkleur tijdens laden/fallback */
html,
body {
  background-color: #040c16 !important;
}


/* accessibility */
@media (prefers-reduced-motion: reduce) {

  ::view-transition-old(nightshift-content),
  ::view-transition-new(nightshift-content) {
    animation: none !important;
  }

}

/* === NIGHTSHIFT SEAMLESS NAV FINAL START === */


/* ----------------------------------------------------------
   LOGO WEG
   ---------------------------------------------------------- */

.arcade-logo,
.nightshift-logo {
  display: none !important;
}


/* ----------------------------------------------------------
   HOME KNOP LINKSBOVEN
   onafhankelijk van de drie gecentreerde tabs
   ---------------------------------------------------------- */

.ns-home-link {
  position: absolute !important;

  left: 28px !important;
  top: 3.9svh !important;

  z-index: 20 !important;

  height: clamp(42px, 5.65svh, 56px) !important;

  padding: 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  border: 1px solid rgba(255, 190, 68, .34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(16, 19, 23, .78),
      rgba(5, 9, 14, .90)
    ) !important;

  color: #e7edf6 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;

  font-size:
    clamp(11px, .82vw, 14px) !important;

  font-weight: 800 !important;

  letter-spacing: .12em !important;

  line-height: 1 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 12px rgba(255,174,47,.025) !important;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease !important;
}


.ns-home-link span {
  color: #ffc653 !important;

  font-size: 18px !important;

  line-height: 1 !important;

  transform: translateY(-1px) !important;
}


.ns-home-link:hover,
.ns-home-link:focus-visible {
  border-color: rgba(255,198,83,.86) !important;

  background:
    linear-gradient(
      180deg,
      rgba(53,38,15,.72),
      rgba(10,12,15,.94)
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 0 12px rgba(255,184,54,.12) !important;

  outline: none !important;
}


/* ----------------------------------------------------------
   DRIE TABS:
   ALTIJD EXACT HETZELFDE MIDDEN
   ---------------------------------------------------------- */

body .arcade-header > .arcade-nav {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;

  top: 3.9svh !important;

  transform: translateX(-50%) !important;
  translate: none !important;

  width: max-content !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 14px !important;

  white-space: nowrap !important;

  overflow: visible !important;
}


/*
  Normaal / hover / actief:
  GEOMETRIE BLIJFT 100% IDENTIEK
*/
body .arcade-header > .arcade-nav > a,
body .arcade-header > .arcade-nav > a:hover,
body .arcade-header > .arcade-nav > a:focus,
body .arcade-header > .arcade-nav > a:focus-visible,
body .arcade-header > .arcade-nav > a.active,
body .arcade-header > .arcade-nav > a[aria-current="page"] {

  box-sizing: border-box !important;

  position: relative !important;

  flex:
    0 0 clamp(116px, 8.85vw, 170px) !important;

  width:
    clamp(116px, 8.85vw, 170px) !important;

  min-width:
    clamp(116px, 8.85vw, 170px) !important;

  max-width:
    clamp(116px, 8.85vw, 170px) !important;

  height:
    clamp(42px, 5.65svh, 56px) !important;

  min-height:
    clamp(42px, 5.65svh, 56px) !important;

  max-height:
    clamp(42px, 5.65svh, 56px) !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
  translate: none !important;

  border-width: 1px !important;

  font-size:
    clamp(12px, .96vw, 15px) !important;

  font-weight: 800 !important;

  letter-spacing: .13em !important;

  line-height: 1 !important;
}


/* actieve tab verandert alleen kleur, NOOIT grootte */
body .arcade-header > .arcade-nav > a.active,
body .arcade-header > .arcade-nav > a[aria-current="page"] {
  transform: none !important;
  scale: 1 !important;
}


/* ----------------------------------------------------------
   HEADER EN FOOTER BLIJVEN LETTERLIJK STAAN
   ---------------------------------------------------------- */

.arcade-header {
  contain: layout !important;
}


/*
  Scrollbar altijd reserveren:
  voorkomt 10-20px verspringen tussen pagina's met
  verschillende contenthoogte.
*/
html {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}


/* ----------------------------------------------------------
   GEEN VIEW TRANSITION / GEEN FADE / GEEN FLASH
   ---------------------------------------------------------- */

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(nightshift-content),
::view-transition-old(nightshift-content),
::view-transition-new(nightshift-content) {
  animation: none !important;
}


/*
  De main houdt tijdens contentwissels zijn positie.
*/
.section-screen {
  opacity: 1 !important;

  transform: none !important;

  transition: none !important;

  animation: none !important;
}


/* ----------------------------------------------------------
   MOBIEL
   ---------------------------------------------------------- */

@media (max-width: 650px) {

  .ns-home-link {
    left: 12px !important;

    top: 16px !important;

    height: 36px !important;

    padding:
      0
      11px !important;

    font-size: 9px !important;

    gap: 5px !important;
  }

  .ns-home-link span {
    font-size: 14px !important;
  }

}


/* === NIGHTSHIFT SEAMLESS NAV FINAL END === */


/* ==========================================================
   SUBPAGE FLARE REMOVED
   Achtergrond nu gelijk aan homepage
   ========================================================== */

.ns-shared-flare {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}



/* === FOOTER LINE POSITION START === */

/*
   Dunne witte lijn boven de footer iets verder omlaag,
   dichter naar PETER HAD THE IDEA / AI FED THE MACHINE / etc.
   Footertekst zelf blijft exact staan.
*/

body .page-frame > .arcade-quote-footer::before {
  top: 13px !important;
  bottom: auto !important;
}

/* === FOOTER LINE POSITION END === */