/* ============================================================
   NIGHTSHIFT — REFERENCE BUILD V50
   Gebaseerd op het goedgekeurde visuele voorbeeld.
   ============================================================ */

:root {
  --ns-black: #03060b;
  --ns-navy: #06101d;
  --ns-deep: #081321;

  --ns-white: #f4f5f2;
  --ns-silver: #c9d2dd;
  --ns-steel: #8291a4;

  --ns-amber: #f0a63b;
  --ns-gold: #ffc95e;
  --ns-hot: #ff8f16;

  --ns-green: #8dff59;

  --ns-line: rgba(145,165,190,.25);
}


/* ============================================================
   LOGO — ALLE PAGINA'S
   ============================================================ */

.arcade-header .nightshift-logo {
  position: fixed !important;

  top: 18px !important;
  left: 38px !important;

  z-index: 150 !important;

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

  gap: 9px !important;

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

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

  border: 0 !important;
  background: transparent !important;

  box-shadow: none !important;

  text-decoration: none !important;

  transform: none !important;
}


.arcade-header .nightshift-logo::before,
.arcade-header .nightshift-logo::after {
  display: none !important;
  content: none !important;
}


.ns-logo-symbol {
  display: block !important;

  width: 74px !important;
  height: 52px !important;

  flex: 0 0 74px !important;

  overflow: visible !important;
}


.ns-logo-symbol svg {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  overflow: visible !important;

  filter:
    drop-shadow(0 0 6px rgba(255,173,63,.12)) !important;
}


.ns-logo-copy {
  display: flex !important;

  flex-direction: column !important;
  align-items: flex-start !important;

  line-height: 1 !important;
}


.ns-logo-copy strong {
  display: inline-flex !important;

  align-items: baseline !important;

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

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

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

  font-size: 22px !important;
  font-weight: 900 !important;

  line-height: .90 !important;

  letter-spacing: -.045em !important;

  white-space: nowrap !important;

  transform: skewX(-5deg) !important;

  text-shadow: none !important;
}


.ns-logo-copy strong::before,
.ns-logo-copy strong::after {
  display: none !important;
  content: none !important;
}


.ns-logo-copy strong span {
  display: inline !important;

  color: #f3f5f6 !important;
  -webkit-text-fill-color: #f3f5f6 !important;

  text-shadow:
    0 0 4px rgba(255,255,255,.12) !important;
}


.ns-logo-copy strong b {
  display: inline !important;

  color: var(--ns-gold) !important;
  -webkit-text-fill-color: var(--ns-gold) !important;

  font: inherit !important;

  text-shadow:
    0 0 4px rgba(255,201,94,.22),
    0 0 10px rgba(240,166,59,.10) !important;
}


.ns-logo-copy small {
  display: block !important;

  margin:
    8px 0 0 2px !important;

  padding: 0 !important;

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

  font-size: 8px !important;
  font-weight: 700 !important;

  letter-spacing: .45em !important;

  color: #97a3b5 !important;
  -webkit-text-fill-color: #97a3b5 !important;

  white-space: nowrap !important;

  text-shadow: none !important;
}


/* ============================================================
   HOMEPAGE BASIS
   ============================================================ */

body.nightshift-home {
  overflow-x: hidden !important;

  background:
    radial-gradient(
      circle at 7% 47%,
      rgba(255,157,38,.20) 0%,
      rgba(255,139,20,.09) 17%,
      transparent 37%
    ),

    radial-gradient(
      circle at 72% 24%,
      rgba(22,73,124,.23) 0%,
      transparent 38%
    ),

    linear-gradient(
      110deg,
      #03070e 0%,
      #07111e 51%,
      #02060c 100%
    ) !important;
}


/* sterren / amber lichtbundels */
body.nightshift-home .ambient-layer {
  position: fixed !important;

  inset: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;

  z-index: 0 !important;
}


body.nightshift-home .ambient-layer::before {
  content: "" !important;

  position: absolute !important;

  inset:
    -6% -4% 0 -4% !important;

  background:

    /* sterren */
    radial-gradient(
      circle at 72% 14%,
      rgba(170,215,255,.78) 0 1px,
      transparent 1.5px
    ),

    radial-gradient(
      circle at 79% 25%,
      rgba(255,179,55,.90) 0 1.5px,
      transparent 2px
    ),

    radial-gradient(
      circle at 90% 17%,
      rgba(255,193,76,.65) 0 1px,
      transparent 1.5px
    ),

    radial-gradient(
      circle at 56% 20%,
      rgba(95,155,210,.42) 0 1px,
      transparent 1.5px
    ),

    radial-gradient(
      circle at 35% 18%,
      rgba(255,172,46,.52) 0 1px,
      transparent 1.5px
    ),

    /* verticale amber beams */
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 10%,
      rgba(255,162,36,.00) 10.2%,
      rgba(255,162,36,.20) 10.35%,
      rgba(255,162,36,.00) 10.55%,
      transparent 10.7%,
      transparent 16%,
      rgba(255,173,47,.00) 16.15%,
      rgba(255,173,47,.24) 16.3%,
      rgba(255,173,47,.00) 16.48%,
      transparent 17%,
      transparent 88%,
      rgba(255,171,43,.00) 88.15%,
      rgba(255,171,43,.15) 88.3%,
      rgba(255,171,43,.00) 88.48%,
      transparent 89%
    ),

    /* diepe ruimte */
    radial-gradient(
      ellipse at 66% 15%,
      rgba(9,65,108,.19),
      transparent 37%
    ) !important;

  opacity: .92 !important;

  animation:
    ns-sky-drift 22s ease-in-out infinite alternate !important;
}


/* reflecterende vloer */
body.nightshift-home .ambient-layer::after {
  content: "" !important;

  position: absolute !important;

  left: -10% !important;
  right: -10% !important;

  height: 48% !important;

  bottom: -7% !important;

  background:

    radial-gradient(
      ellipse at 13% 10%,
      rgba(255,157,35,.31),
      transparent 37%
    ),

    radial-gradient(
      ellipse at 72% 12%,
      rgba(34,84,126,.22),
      transparent 32%
    ),

    repeating-linear-gradient(
      90deg,
      rgba(99,129,160,.00) 0px,
      rgba(99,129,160,.00) 89px,
      rgba(99,129,160,.08) 90px,
      rgba(99,129,160,.00) 91px
    ),

    repeating-linear-gradient(
      0deg,
      rgba(99,129,160,.00) 0px,
      rgba(99,129,160,.00) 45px,
      rgba(99,129,160,.08) 46px,
      rgba(99,129,160,.00) 47px
    ) !important;

  clip-path:
    polygon(
      18% 0,
      82% 0,
      100% 100%,
      0% 100%
    ) !important;

  opacity: .72 !important;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45),
      #000 50%,
      transparent
    ) !important;

  animation:
    ns-floor-glow 9s ease-in-out infinite alternate !important;
}


/* ============================================================
   PLANET LINKS
   ============================================================ */

body.nightshift-home .ambient-object--one {
  display: block !important;

  position: fixed !important;

  width: 570px !important;
  height: 570px !important;

  left: -430px !important;
  top: 155px !important;

  border-radius: 50% !important;

  opacity: 1 !important;

  border:
    2px solid rgba(255,186,69,.88) !important;

  background:

    radial-gradient(
      circle at 72% 28%,
      rgba(255,185,76,.16),
      transparent 22%
    ),

    radial-gradient(
      circle at 66% 48%,
      rgba(97,61,30,.50),
      transparent 29%
    ),

    radial-gradient(
      circle at 47% 33%,
      rgba(116,79,43,.34),
      transparent 33%
    ),

    radial-gradient(
      circle at 63% 52%,
      #191715 0%,
      #090b0e 56%,
      #030509 100%
    ) !important;

  box-shadow:

    0 0 8px rgba(255,188,70,.92),

    0 0 26px rgba(255,158,37,.60),

    0 0 65px rgba(255,127,11,.32),

    0 0 130px rgba(255,105,0,.14),

    inset -50px 0 90px rgba(0,0,0,.82) !important;

  animation:
    ns-planet-breathe 7s ease-in-out infinite !important;
}


/* zonlichtflare */
body.nightshift-home .ambient-object--one::before {
  content: "" !important;

  position: absolute !important;

  width: 210px !important;
  height: 80px !important;

  right: -108px !important;
  top: 218px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,239,180,.98) 0%,
      rgba(255,175,50,.72) 13%,
      rgba(255,125,12,.22) 36%,
      transparent 71%
    ) !important;

  filter:
    blur(2px) !important;

  transform:
    scaleX(2.0) !important;

  opacity: .96 !important;

  animation:
    ns-flare-pulse 4.8s ease-in-out infinite !important;
}


/* dunne horizon ring */
body.nightshift-home .ambient-object--one::after {
  content: "" !important;

  position: absolute !important;

  width: 450px !important;
  height: 1px !important;

  right: -338px !important;
  top: 258px !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,191,77,.00),
      rgba(255,191,77,.98),
      rgba(255,155,28,.45),
      transparent
    ) !important;

  box-shadow:
    0 0 8px rgba(255,168,35,.35) !important;
}


/* ============================================================
   RECHTER GEOMETRIE
   ============================================================ */

body.nightshift-home .ambient-object--two {
  display: block !important;

  position: fixed !important;

  width: 320px !important;
  height: 320px !important;

  right: -206px !important;
  top: 285px !important;

  transform:
    rotate(45deg) !important;

  border:
    1px solid rgba(91,128,169,.42) !important;

  box-shadow:
    inset 0 0 32px rgba(65,108,153,.055),
    0 0 20px rgba(65,108,153,.035) !important;

  opacity: .58 !important;

  animation: none !important;
}


/* cirkel linksonder */
body.nightshift-home .ambient-object--three {
  display: block !important;

  position: fixed !important;

  width: 115px !important;
  height: 115px !important;

  left: 7% !important;
  bottom: 72px !important;

  border-radius: 50% !important;

  border:
    1px solid rgba(139,154,174,.48) !important;

  box-shadow:
    0 0 13px rgba(104,121,143,.10) !important;

  opacity: .8 !important;

  animation: none !important;
}


body.nightshift-home .ambient-object--three::before {
  content: "" !important;

  position: absolute !important;

  inset: 17px !important;

  border-radius: 50% !important;

  border:
    1px solid rgba(255,166,54,.52) !important;
}


/* diagonale gouden lijn */
body.nightshift-home .ambient-object--four {
  display: block !important;

  position: fixed !important;

  width: 760px !important;
  height: 1px !important;

  left: -120px !important;
  top: 295px !important;

  transform:
    rotate(-35deg) !important;

  transform-origin:
    center !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,171,51,.76),
      transparent
    ) !important;

  opacity: .55 !important;

  animation: none !important;
}


/* rechter blauwe floor-line */
body.nightshift-home .ambient-object--five {
  display: block !important;

  position: fixed !important;

  width: 620px !important;
  height: 1px !important;

  right: -120px !important;
  bottom: 155px !important;

  transform:
    rotate(-27deg) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(75,130,183,.58),
      rgba(173,197,222,.72),
      transparent
    ) !important;

  opacity: .50 !important;

  animation: none !important;
}


/* extra verticale amber glimmer rechts */
body.nightshift-home .ambient-object--six {
  display: block !important;

  position: fixed !important;

  width: 2px !important;
  height: 360px !important;

  right: 8.1% !important;
  top: 100px !important;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,181,60,.73),
      rgba(255,181,60,.20),
      transparent
    ) !important;

  box-shadow:
    0 0 8px rgba(255,177,54,.27) !important;

  opacity: .72 !important;

  animation:
    ns-beam-pulse 5s ease-in-out infinite !important;
}


/* ============================================================
   HOMEPAGE LAYOUT
   ============================================================ */

body.nightshift-home .home-screen.ns-reference-home {
  position: relative !important;

  flex: 1 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    350px !important;

  align-items: center !important;

  gap:
    72px !important;

  padding:
    62px 0 44px !important;

  min-height:
    calc(100vh - 150px) !important;
}


/* ============================================================
   HERO
   ============================================================ */

.ns-hero {
  position: relative !important;

  z-index: 4 !important;

  max-width: 760px !important;

  padding-left:
    24px !important;
}


/* PLAYER DETECTED */
.ns-detection {
  display: flex !important;

  align-items: center !important;

  margin:
    0 0 39px !important;

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

  font-size:
    18px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    .025em !important;

  color:
    #eac66e !important;

  text-shadow:
    0 0 2px rgba(234,198,110,.18) !important;
}


/* groen ONLINE lampje */
.ns-detection .detected-status-dot {
  display: inline-block !important;

  width: 9px !important;
  height: 9px !important;

  margin:
    0 16px 0 13px !important;

  border-radius:
    50% !important;

  background:
    #8dff5a !important;

  box-shadow:
    0 0 4px #8dff5a,
    0 0 9px rgba(141,255,90,.95),
    0 0 17px rgba(141,255,90,.46) !important;

  animation:
    ns-status-blink 1.65s ease-in-out infinite !important;
}


/* ============================================================
   GROTE NIGHTSHIFT WORDMARK
   ============================================================ */

.ns-title {
  position: relative !important;

  display: inline-flex !important;

  align-items: baseline !important;

  margin:
    0 0 60px !important;

  padding:
    0 0 14px !important;

  width:
    max-content !important;

  max-width:
    100% !important;

  white-space:
    nowrap !important;

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

  font-weight:
    900 !important;

  font-style:
    italic !important;

  line-height:
    .83 !important;

  letter-spacing:
    -.055em !important;

  transform:
    skewX(-4deg) !important;

  isolation:
    isolate !important;
}


/* NIGHT chroom */
.ns-title-night {
  display: inline-block !important;

  font-size:
    clamp(88px, 7vw, 124px) !important;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f7f8f7 31%,
      #cdd4dc 58%,
      #ffffff 100%
    ) !important;

  -webkit-background-clip:
    text !important;

  background-clip:
    text !important;

  color:
    transparent !important;

  -webkit-text-fill-color:
    transparent !important;

  text-shadow:
    0 2px 1px rgba(0,0,0,.22),
    0 0 7px rgba(255,255,255,.13),
    0 0 28px rgba(220,228,239,.08) !important;
}


/* SHIFT goud */
.ns-title-shift {
  display: inline-block !important;

  margin-left:
    10px !important;

  font-size:
    clamp(88px, 7vw, 124px) !important;

  background:
    linear-gradient(
      to bottom,
      #ffe18d 0%,
      #ffc04f 32%,
      #ee8b1d 62%,
      #ffc75b 100%
    ) !important;

  -webkit-background-clip:
    text !important;

  background-clip:
    text !important;

  color:
    transparent !important;

  -webkit-text-fill-color:
    transparent !important;

  text-shadow:
    0 2px 1px rgba(63,35,8,.24),
    0 0 7px rgba(255,186,64,.30),
    0 0 25px rgba(255,121,10,.13) !important;
}


/* hero light halo */
.ns-title::before {
  content: "" !important;

  position: absolute !important;

  left: -55px !important;
  right: -55px !important;

  height: 110px !important;

  top: 8px !important;

  z-index: -1 !important;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255,167,44,.085),
      transparent 69%
    ) !important;

  filter:
    blur(14px) !important;

  animation:
    ns-title-aura 6s ease-in-out infinite !important;
}


/* lange underline */
.ns-title::after {
  content: "" !important;

  position: absolute !important;

  height: 2px !important;

  left: 4% !important;
  right: 2% !important;

  bottom: 0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,195,84,.95),
      #ffad32 61%,
      rgba(255,145,22,.35) 82%,
      transparent
    ) !important;

  box-shadow:
    0 0 8px rgba(255,161,34,.27) !important;
}


/* 3 speed stripes */
.ns-title-accents {
  position: absolute !important;

  width: 98px !important;
  height: 9px !important;

  right: 44px !important;
  bottom: -3px !important;

  background:
    repeating-linear-gradient(
      120deg,
      #ffc552 0px,
      #ffc552 17px,
      transparent 18px,
      transparent 26px
    ) !important;

  transform:
    skewX(-18deg) !important;

  filter:
    drop-shadow(0 0 4px rgba(255,181,57,.18)) !important;
}


/* ============================================================
   INFO PANEL
   ============================================================ */

.ns-info-panel {
  position: relative !important;

  width:
    min(720px, 100%) !important;

  padding:
    22px 31px 21px !important;

  margin:
    0 0 47px !important;

  border:
    1px solid rgba(142,163,188,.40) !important;

  border-left:
    4px solid var(--ns-gold) !important;

  border-right:
    3px solid rgba(255,174,55,.76) !important;

  background:
    linear-gradient(
      100deg,
      rgba(255,156,34,.055),
      rgba(5,11,18,.92) 21%,
      rgba(4,9,16,.94)
    ) !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      0 100%
    ) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.25),
    inset 0 0 30px rgba(255,255,255,.008),
    0 0 12px rgba(255,140,21,.04) !important;
}


/* top rail */
.ns-info-panel::before {
  content: "" !important;

  position: absolute !important;

  left: 28px !important;
  top: -1px !important;

  width: 94px !important;
  height: 2px !important;

  background:
    linear-gradient(
      90deg,
      #ffd16a,
      #ff9f25,
      transparent
    ) !important;

  box-shadow:
    0 0 7px rgba(255,166,39,.20) !important;
}


.ns-info-primary {
  display: flex !important;

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

  gap:
    14px !important;

  color:
    #f1f3f5 !important;

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

  font-size:
    14px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .055em !important;
}


.ns-info-primary i {
  color:
    var(--ns-gold) !important;

  font-family:
    Arial,
    sans-serif !important;

  font-style:
    italic !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.1em !important;

  text-shadow:
    0 0 5px rgba(255,190,74,.15) !important;
}


.ns-info-secondary {
  margin-top:
    11px !important;

  color:
    #a8b1bf !important;

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

  font-size:
    12px !important;

  font-weight:
    500 !important;

  letter-spacing:
    .17em !important;
}


/* ============================================================
   GAME LIBRARY CTA
   ============================================================ */

.ns-library-button {
  display: inline-flex !important;

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

  gap:
    28px !important;

  min-width:
    270px !important;

  min-height:
    60px !important;

  padding:
    0 28px !important;

  border:
    2px solid rgba(255,183,65,.93) !important;

  background:
    linear-gradient(
      100deg,
      rgba(129,69,20,.16),
      rgba(5,10,17,.91) 48%,
      rgba(9,14,21,.93)
    ) !important;

  color:
    #f8f5ef !important;

  box-shadow:
    0 0 8px rgba(255,178,54,.37),
    0 0 26px rgba(255,129,9,.14),
    inset 0 0 22px rgba(255,170,39,.035),
    0 15px 34px rgba(0,0,0,.22) !important;

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

  font-size:
    15px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .13em !important;

  text-decoration:
    none !important;

  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background .20s ease !important;
}


.ns-library-button span {
  display:
    inline-block !important;
}


.ns-library-button b {
  color:
    #ffe075 !important;

  font-family:
    Arial,
    sans-serif !important;

  font-size:
    37px !important;

  font-weight:
    300 !important;

  line-height:
    .7 !important;

  transform:
    translateY(-1px) !important;

  text-shadow:
    0 0 5px rgba(255,196,78,.45) !important;
}


.ns-library-button:hover,
.ns-library-button:focus-visible {
  transform:
    translateY(-3px) !important;

  border-color:
    #ffd275 !important;

  background:
    linear-gradient(
      100deg,
      rgba(180,99,27,.30),
      rgba(10,14,20,.96) 48%
    ) !important;

  box-shadow:
    0 0 9px rgba(255,201,104,.82),
    0 0 29px rgba(255,136,12,.30),
    0 0 48px rgba(255,112,0,.13),
    inset 0 0 24px rgba(255,190,70,.04),
    0 18px 38px rgba(0,0,0,.27) !important;
}


.ns-library-button:active {
  transform:
    translateY(0) scale(.992) !important;
}


/* ============================================================
   NEON ARENA MACHINE
   ============================================================ */

body.nightshift-home .ns-machine {
  position: relative !important;

  width: 350px !important;

  justify-self: end !important;

  overflow: hidden !important;

  border:
    1px solid rgba(129,152,177,.46) !important;

  background:
    #060b12 !important;

  box-shadow:
    0 30px 70px rgba(0,0,0,.37),
    0 0 22px rgba(59,92,121,.045),
    inset 0 0 0 1px rgba(255,255,255,.008) !important;

  animation:
    none !important;

  transform:
    none !important;
}


/* amber top edge */
body.nightshift-home .ns-machine::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 38% !important;
  height: 2px !important;

  z-index: 10 !important;

  background:
    linear-gradient(
      90deg,
      #ffd36e,
      #ff9a1e,
      transparent
    ) !important;

  box-shadow:
    0 0 6px rgba(255,173,42,.22) !important;
}


body.nightshift-home .ns-machine .machine-top {
  height:
    43px !important;

  padding:
    0 17px !important;

  background:
    linear-gradient(
      to bottom,
      #0c131d,
      #08101a
    ) !important;

  border-bottom:
    1px solid rgba(123,145,168,.23) !important;

  color:
    #9dadbf !important;

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

  font-size:
    9px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .17em !important;
}


body.nightshift-home .machine-live {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  color:
    #83ff56 !important;

  font-size:
    11px !important;

  letter-spacing:
    .08em !important;

  text-shadow:
    0 0 5px rgba(131,255,86,.20) !important;
}


body.nightshift-home .machine-live i {
  display:
    inline-block !important;

  width:
    7px !important;

  height:
    7px !important;

  border-radius:
    50% !important;

  background:
    #83ff56 !important;

  box-shadow:
    0 0 6px rgba(131,255,86,.85) !important;

  animation:
    ns-status-blink 1.65s ease-in-out infinite !important;
}


body.nightshift-home .machine-screen {
  padding:
    12px !important;

  background:
    #020509 !important;

  border-bottom:
    1px solid rgba(245,37,169,.29) !important;
}


body.nightshift-home .machine-art {
  height:
    154px !important;

  border:
    1px solid rgba(109,138,165,.17) !important;

  background:
    radial-gradient(
      circle at center,
      rgba(241,0,171,.065),
      transparent 38%
    ),
    radial-gradient(
      circle at 53% 46%,
      rgba(0,194,255,.04),
      transparent 46%
    ),
    #010509 !important;
}


body.nightshift-home .machine-info {
  padding:
    20px 17px 17px !important;

  background:
    linear-gradient(
      135deg,
      rgba(11,30,46,.65),
      #060a10 48%
    ) !important;
}


body.nightshift-home .machine-info small {
  color:
    #68c8de !important;

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

  font-size:
    9px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .04em !important;
}


body.nightshift-home .machine-info h2 {
  margin:
    4px 0 15px !important;

  color:
    #f3f4f5 !important;

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

  font-size:
    26px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  letter-spacing:
    -.04em !important;

  text-shadow:
    0 0 4px rgba(255,255,255,.08) !important;
}


body.nightshift-home .machine-info p {
  margin:
    0 0 17px !important;

  color:
    #a8b4c1 !important;

  font-size:
    11px !important;
}


body.nightshift-home .machine-play-btn {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    48px !important;

  gap:
    24px !important;

  border:
    1px solid rgba(255,179,64,.78) !important;

  background:
    linear-gradient(
      90deg,
      rgba(113,70,25,.16),
      rgba(7,11,17,.93)
    ) !important;

  color:
    #f0f2f4 !important;

  box-shadow:
    inset 2px 0 0 rgba(255,182,68,.60),
    0 0 11px rgba(255,138,17,.05) !important;

  text-decoration:
    none !important;

  transition:
    .20s ease !important;
}


body.nightshift-home .machine-play-btn span {
  font-family:
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .12em !important;
}


body.nightshift-home .machine-play-btn b {
  color:
    #ffc659 !important;

  font-size:
    18px !important;

  text-shadow:
    0 0 7px rgba(255,185,63,.36) !important;
}


body.nightshift-home .machine-play-btn:hover {
  border-color:
    #ffd272 !important;

  background:
    linear-gradient(
      90deg,
      rgba(171,101,28,.26),
      rgba(9,13,19,.96)
    ) !important;

  box-shadow:
    inset 2px 0 0 #ffd272,
    0 0 8px rgba(255,186,68,.22),
    0 0 22px rgba(255,115,5,.09) !important;
}


/* ============================================================
   FOOTER + TABS WORDEN NIET GEREDESIGNED
   Alleen boven de lagen houden
   ============================================================ */

body.nightshift-home .arcade-header,
body.nightshift-home .arcade-quote-footer {
  position:
    relative !important;

  z-index:
    20 !important;
}


/* ============================================================
   ANIMATIES
   ============================================================ */

@keyframes ns-status-blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .58;
    transform: scale(.82);
  }
}


@keyframes ns-sky-drift {
  from {
    transform: translate3d(-4px, 0, 0) scale(1);
  }

  to {
    transform: translate3d(12px, -8px, 0) scale(1.018);
  }
}


@keyframes ns-floor-glow {
  from {
    opacity: .60;
  }

  to {
    opacity: .79;
  }
}


@keyframes ns-planet-breathe {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(255,188,70,.90),
      0 0 26px rgba(255,158,37,.55),
      0 0 65px rgba(255,127,11,.28),
      0 0 130px rgba(255,105,0,.12),
      inset -50px 0 90px rgba(0,0,0,.82);
  }

  50% {
    box-shadow:
      0 0 11px rgba(255,205,112,.98),
      0 0 33px rgba(255,167,49,.67),
      0 0 80px rgba(255,127,11,.36),
      0 0 145px rgba(255,105,0,.16),
      inset -50px 0 90px rgba(0,0,0,.82);
  }
}


@keyframes ns-flare-pulse {
  0%, 100% {
    opacity: .80;
    transform: scaleX(1.85);
  }

  50% {
    opacity: 1;
    transform: scaleX(2.10);
  }
}


@keyframes ns-beam-pulse {
  0%, 100% {
    opacity: .45;
  }

  50% {
    opacity: .82;
  }
}


@keyframes ns-title-aura {
  0%, 100% {
    opacity: .72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

  body.nightshift-home .home-screen.ns-reference-home {
    grid-template-columns:
      1fr !important;

    gap:
      64px !important;
  }


  .ns-hero {
    padding-left:
      0 !important;
  }


  body.nightshift-home .ns-machine {
    justify-self:
      start !important;
  }


  .ns-title-night,
  .ns-title-shift {
    font-size:
      clamp(65px, 10vw, 95px) !important;
  }

}


@media (max-width: 760px) {

  .arcade-header .nightshift-logo {
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;
  }


  .ns-logo-symbol {
    width:
      55px !important;

    height:
      40px !important;

    flex-basis:
      55px !important;
  }


  .ns-logo-copy strong {
    font-size:
      17px !important;
  }


  .ns-logo-copy small {
    font-size:
      6px !important;
  }


  .ns-detection {
    font-size:
      14px !important;

    flex-wrap:
      wrap !important;
  }


  .ns-title {
    white-space:
      normal !important;

    flex-wrap:
      wrap !important;

    margin-bottom:
      45px !important;
  }


  .ns-title-night,
  .ns-title-shift {
    font-size:
      clamp(52px, 16vw, 78px) !important;
  }


  .ns-title-shift {
    margin-left:
      5px !important;
  }


  .ns-info-primary {
    font-size:
      11px !important;

    gap:
      9px !important;
  }


  .ns-info-secondary {
    letter-spacing:
      .08em !important;

    line-height:
      1.5 !important;
  }


  .ns-library-button {
    min-width:
      220px !important;
  }


  body.nightshift-home .ns-machine {
    width:
      min(100%, 350px) !important;
  }

}


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

  body.nightshift-home *,
  body.nightshift-home *::before,
  body.nightshift-home *::after {
    animation:
      none !important;
  }

}