/* ============================================================
   NEON ARCADE — CYBERPUNK DESIGN V64
   ============================================================ */

:root {
  --v64-bg: #050814;
  --v64-panel: rgba(7, 11, 25, .82);
  --v64-orange: #ffad24;
  --v64-orange2: #ffd05b;
  --v64-purple: #a45cff;
  --v64-cyan: #37dcff;
  --v64-green: #8cff65;
  --v64-line: rgba(126, 157, 208, .20);
}

/* ---------- GLOBAL BACKGROUND ---------- */

html {
  background: #050814 !important;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% 39%, rgba(255, 119, 20, .13), transparent 24%),
    radial-gradient(circle at 91% 47%, rgba(139, 65, 255, .13), transparent 27%),
    radial-gradient(circle at 48% 103%, rgba(35, 99, 255, .08), transparent 32%),
    linear-gradient(118deg, #040711 0%, #080b1b 48%, #050816 100%) !important;
  background-attachment: fixed !important;
  animation: none !important;
  overflow-x: hidden;
}

/* fijne cyber-grid */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .18 !important;
  background-image:
    linear-gradient(rgba(70, 117, 183, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 117, 183, .08) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 85%, transparent);
  animation: none !important;
}

/* sterren/data-punten */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .26 !important;
  background-image:
    radial-gradient(circle, rgba(112,210,255,.55) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255,180,49,.45) 0 1px, transparent 1.3px) !important;
  background-size: 43px 43px, 79px 79px !important;
  background-position: 0 0, 23px 17px !important;
  animation: v64Stars 34s linear infinite !important;
}

@keyframes v64Stars {
  to {
    background-position: 180px 100px, -120px 190px;
  }
}

.page-frame {
  position: relative !important;
  z-index: 2 !important;
  width: min(1320px, calc(100% - 54px)) !important;
  min-height: 100vh !important;
}

/* ---------- SHARED DECOR ---------- */

.ambient-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* grote oranje ring links */
.ambient-object--one {
  display: block !important;
  width: 390px !important;
  height: 390px !important;
  top: 24% !important;
  left: -245px !important;
  border: 3px solid rgba(255, 143, 28, .72) !important;
  border-radius: 50% !important;
  opacity: .68 !important;
  box-shadow:
    0 0 18px rgba(255, 132, 24, .32),
    0 0 60px rgba(255, 102, 20, .14),
    inset 0 0 38px rgba(255, 130, 25, .08) !important;
  animation: v64Ring 10s ease-in-out infinite !important;
}

/* paarse diamond rechts */
.ambient-object--two {
  display: block !important;
  width: 230px !important;
  height: 230px !important;
  top: 35% !important;
  right: -72px !important;
  border: 2px solid rgba(157, 83, 255, .67) !important;
  opacity: .55 !important;
  transform: rotate(45deg) !important;
  box-shadow:
    0 0 22px rgba(154, 73, 255, .25),
    inset 0 0 25px rgba(99, 61, 255, .06) !important;
  animation: v64Diamond 15s ease-in-out infinite !important;
}

/* subtiele cirkel linksonder */
.ambient-object--three {
  display: block !important;
  width: 118px !important;
  height: 118px !important;
  left: 7% !important;
  bottom: 8% !important;
  border: 1px solid rgba(74, 221, 183, .27) !important;
  border-radius: 50% !important;
  opacity: .42 !important;
  box-shadow: 0 0 30px rgba(51, 209, 210, .10) !important;
  animation: v64Float 12s ease-in-out infinite !important;
}

.ambient-object--three::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(157, 83, 255, .24);
  border-radius: 50%;
}

/* diagonale neon rails */
.ambient-object--four {
  display: block !important;
  width: 460px !important;
  height: 2px !important;
  right: 6% !important;
  bottom: 19% !important;
  opacity: .34 !important;
  transform: rotate(-25deg) !important;
  background: linear-gradient(90deg, transparent, #9e55ff, #36d8ff, transparent) !important;
  box-shadow: 0 0 13px rgba(112, 79, 255, .5) !important;
  animation: v64Rail 13s ease-in-out infinite !important;
}

.ambient-object--five {
  display: block !important;
  width: 520px !important;
  height: 2px !important;
  left: 2% !important;
  top: 25% !important;
  opacity: .31 !important;
  transform: rotate(-34deg) !important;
  background: linear-gradient(90deg, transparent, #ff9b22, #ffcf4f, transparent) !important;
  box-shadow: 0 0 14px rgba(255, 151, 28, .46) !important;
  animation: v64RailWarm 16s ease-in-out infinite !important;
}

.ambient-object--six {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  right: 23% !important;
  top: 20% !important;
  border: 1px solid #7eff68 !important;
  border-radius: 50% !important;
  background: #7eff68 !important;
  opacity: .8 !important;
  box-shadow: 0 0 16px rgba(126,255,104,.7) !important;
}

@keyframes v64Ring {
  50% { transform: translate(24px, 13px) scale(1.035); }
}

@keyframes v64Diamond {
  50% { transform: translate(-22px, 22px) rotate(60deg); }
}

@keyframes v64Float {
  50% { transform: translate(35px,-24px) scale(1.08); }
}

@keyframes v64Rail {
  50% { transform: translate(-70px,-20px) rotate(-25deg); opacity: .52; }
}

@keyframes v64RailWarm {
  50% { transform: translate(85px,30px) rotate(-30deg); opacity: .48; }
}

/* ---------- HEADER ---------- */

.arcade-header {
  position: relative !important;
  z-index: 20 !important;
  height: 116px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(103, 134, 183, .22) !important;
  overflow: visible !important;
}

/* nieuw orbital logo */
.arcade-logo {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin-right: auto !important;
}

.arcade-logo.home-library-button {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.neon-orbit-logo {
  position: relative;
  width: 53px;
  height: 45px;
  display: block;
  flex: 0 0 53px;
}

.orbit-core {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 18px;
  top: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #70f0ff, #764fff 48%, #17184e 75%);
  box-shadow:
    0 0 9px rgba(55,220,255,.8),
    0 0 20px rgba(151,83,255,.45);
}

.orbit-ring {
  position: absolute;
  left: 4px;
  top: 17px;
  width: 46px;
  height: 12px;
  border: 2px solid #ffad24;
  border-radius: 50%;
  transform: rotate(-16deg);
  box-shadow: 0 0 9px rgba(255,173,36,.58);
}

.orbit-ring-b {
  border-color: #9f5dff;
  transform: rotate(22deg);
  opacity: .8;
  box-shadow: 0 0 8px rgba(159,93,255,.55);
}

.orbit-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  right: 3px;
  top: 8px;
  border-radius: 50%;
  background: #38e2ff;
  box-shadow: 0 0 9px #38e2ff;
}

.arcade-logo > span:last-child {
  display: flex !important;
  flex-direction: column !important;
}

.arcade-logo strong {
  display: flex !important;
  flex-direction: column !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  line-height: .86 !important;
  letter-spacing: .13em !important;
}

.arcade-logo strong span:first-child {
  color: #ffb52e;
  font-size: 18px;
  text-shadow: 0 0 9px rgba(255,181,46,.55);
}

.arcade-logo strong span:last-child {
  margin-top: 6px;
  color: #d26aff;
  font-size: 13px;
  letter-spacing: .20em;
  text-shadow: 0 0 9px rgba(190,82,255,.55);
}

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

/* compactere tabs zoals voorbeeld */
.arcade-nav {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  gap: 11px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.arcade-nav a {
  min-width: 105px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(129,155,196,.23) !important;
  background: rgba(6,10,23,.67) !important;
  color: #aeb9cc !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  box-shadow: inset 0 0 15px rgba(87,123,190,.025) !important;
  transform: none !important;
}

.arcade-nav a:hover,
.arcade-nav a.active {
  color: #ffc248 !important;
  border-color: rgba(255,177,41,.72) !important;
  background: rgba(12,13,27,.86) !important;
  box-shadow:
    inset 0 -2px 0 #ffae25,
    0 0 16px rgba(255,151,31,.18) !important;
  transform: translateY(-2px) !important;
}

/* ---------- HOME ---------- */

.home-screen {
  position: relative !important;
  z-index: 5 !important;
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(315px, .62fr) !important;
  align-items: center !important;
  gap: clamp(55px, 7vw, 105px) !important;
  min-height: calc(100vh - 195px) !important;
  padding: 20px 2px 46px !important;
}

.home-screen::before,
.home-screen::after,
.section-screen::before,
.section-screen::after {
  display: none !important;
}

.marquee {
  align-self: center !important;
  margin-top: -48px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-screen .marquee-tag {
  margin: 0 0 21px 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #ffb42c !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .17em !important;
  text-shadow: 0 0 8px rgba(255,174,36,.38) !important;
}

.home-screen .detected-status-dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  margin: 0 9px !important;
  background: #87ff63 !important;
  border: 0 !important;
  box-shadow: 0 0 10px rgba(135,255,99,.85) !important;
}

.neon-hero-title {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: max-content !important;
  max-width: 100% !important;
  font-family: Impact, "Arial Black", "Segoe UI Black", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(72px, 7.7vw, 122px) !important;
  line-height: .77 !important;
  letter-spacing: .015em !important;
  animation: none !important;
  filter: none !important;
}

.hero-neon {
  position: relative;
  color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 0 2px #ffe4a2,
    0 0 12px rgba(255,180,38,.48),
    0 0 32px rgba(255,128,15,.18) !important;
}

.hero-arcade {
  margin-top: 18px;
  color: transparent !important;
  -webkit-text-stroke: 2px #ffb52e !important;
  text-shadow:
    0 0 8px rgba(255,181,46,.35),
    0 0 22px rgba(255,113,16,.16) !important;
}

/* HUD subtitle */
.hero-hud {
  position: relative;
  width: min(590px, 100%);
  margin-top: 44px;
  padding: 16px 24px 15px;
  border: 1px solid rgba(255,170,37,.54);
  background:
    linear-gradient(90deg, rgba(255,147,25,.065), rgba(104,69,185,.06) 55%, rgba(40,185,226,.045)),
    rgba(5,9,20,.68);
  clip-path: polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
  box-shadow:
    inset 0 0 22px rgba(255,166,31,.025),
    0 0 18px rgba(255,132,24,.055);
}

.hero-hud::before,
.hero-hud::after {
  content: "";
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, #ffae25, transparent);
}

.hero-hud::before {
  width: 80px;
  left: 17px;
  top: -1px;
}

.hero-hud::after {
  width: 55px;
  right: 12px;
  bottom: -1px;
  transform: rotate(180deg);
}

.hero-hud strong {
  display: block;
  color: #d6d9e8;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
}

.hero-hud strong i {
  padding: 0 7px;
  color: #ffae25;
  font-style: normal;
}

.hero-hud span {
  display: block;
  margin-top: 8px;
  color: #7f8da7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
}

/* extra afstand tot Game Library */
.marquee-actions {
  margin-top: 58px !important;
}

.neon-library-button {
  min-width: 207px !important;
  min-height: 51px !important;
  padding: 0 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
  border: 1px solid rgba(255,166,30,.75) !important;
  background: rgba(8,10,21,.78) !important;
  color: #f2d8b1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  box-shadow:
    0 0 10px rgba(255,141,23,.08),
    inset 0 0 18px rgba(255,155,25,.025) !important;
}

.neon-library-button b {
  color: #ffad24;
  font-size: 25px;
  line-height: 1;
  font-weight: 300;
}

.neon-library-button:hover {
  color: #fff3df !important;
  border-color: #ff9d1d !important;
  background: rgba(23,13,23,.88) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 10px rgba(255,140,24,.45),
    0 0 25px rgba(255,111,17,.20),
    inset 0 0 19px rgba(255,151,24,.06) !important;
}

/* ---------- SMALLER FEATURED MACHINE ---------- */

.home-screen .featured-machine {
  justify-self: end !important;
  width: min(100%, 340px) !important;
  margin: -12px 3px 0 0 !important;
  border: 1px solid rgba(58,206,255,.38) !important;
  background: rgba(5,8,20,.79) !important;
  box-shadow:
    0 0 26px rgba(49,199,255,.08),
    0 22px 55px rgba(0,0,0,.32) !important;
  animation: v64Cabinet 7s ease-in-out infinite !important;
}

@keyframes v64Cabinet {
  50% { transform: translateY(-5px); }
}

.home-screen .machine-top {
  height: 38px !important;
  padding: 0 13px !important;
  font-size: 9px !important;
}

.home-screen .machine-screen {
  min-height: 160px !important;
}

.home-screen .machine-info {
  padding: 14px 16px 16px !important;
}

.home-screen .machine-info small {
  font-size: 9px !important;
  color: #a886ff !important;
}

.home-screen .machine-info h2 {
  margin: 7px 0 5px !important;
  font-size: 25px !important;
}

.home-screen .machine-info p {
  margin: 0 0 13px !important;
  font-size: 11px !important;
}

.home-screen .machine-play-btn {
  min-height: 48px !important;
  font-size: 10px !important;
}

/* ---------- INNER PAGES ---------- */

.section-screen {
  position: relative !important;
  z-index: 5 !important;
}

.section-screen > .section-title {
  transform: none !important;
  margin-top: 40px !important;
}

.section-title > span,
.block-label,
.game-entry--empty > span {
  color: #ffb12a !important;
}

.section-title h1 {
  color: #fff5df !important;
  text-shadow:
    0 0 12px rgba(255,173,36,.19),
    0 0 28px rgba(153,78,255,.08) !important;
}

/* dezelfde donkere glazen panelen */
.game-entry,
.lab-status,
.lab-tile,
.about-block,
.games-machine-zone .featured-machine {
  background:
    linear-gradient(135deg, rgba(255,166,31,.025), rgba(123,72,224,.035)),
    rgba(6,10,21,.80) !important;
  border-color: rgba(101,140,193,.20) !important;
  backdrop-filter: blur(4px);
}

/* GAME LIBRARY hover nu ORANJE */
.game-entry:hover,
.game-entry--live:hover,
.game-entry--empty:hover {
  border-color: rgba(255,155,27,.72) !important;
  box-shadow:
    0 0 18px rgba(255,142,22,.16),
    0 20px 46px rgba(0,0,0,.23) !important;
}

.game-entry a:hover,
.game-entry--empty a:hover {
  color: #ffb12a !important;
  text-shadow: 0 0 9px rgba(255,155,25,.5) !important;
}

/* ---------- FOOTER ---------- */

.arcade-quote-footer {
  position: relative !important;
  z-index: 10 !important;
  border-top-color: rgba(100,130,178,.18) !important;
}

.arcade-quote-separator {
  color: #ff8f20 !important;
  text-shadow: 0 0 9px rgba(255,126,22,.45) !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 950px) {
  .home-screen {
    grid-template-columns: 1fr !important;
    gap: 55px !important;
    padding-top: 55px !important;
  }

  .marquee {
    margin-top: 0 !important;
  }

  .home-screen .featured-machine {
    justify-self: start !important;
    margin: 0 !important;
  }
}

@media (max-width: 700px) {
  .page-frame {
    width: min(100% - 28px, 1320px) !important;
  }

  .arcade-header {
    height: 96px !important;
  }

  .neon-orbit-logo {
    width: 42px;
    transform: scale(.82);
    transform-origin: left center;
  }

  .arcade-logo {
    gap: 5px !important;
  }

  .arcade-logo strong span:first-child {
    font-size: 13px;
  }

  .arcade-logo strong span:last-child {
    font-size: 10px;
  }

  .arcade-nav {
    position: static !important;
    margin-left: auto !important;
    transform: none !important;
    gap: 4px !important;
  }

  .arcade-nav a {
    min-width: auto !important;
    min-height: 37px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  .neon-hero-title {
    font-size: clamp(57px, 18vw, 88px) !important;
  }

  .hero-hud {
    padding: 14px 15px;
  }

  .hero-hud strong {
    line-height: 1.7;
  }

  .marquee-actions {
    margin-top: 42px !important;
  }

  .ambient-object--one {
    left: -310px !important;
  }

  .ambient-object--two {
    right: -160px !important;
  }

  .ambient-object--four,
  .ambient-object--five {
    opacity: .17 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .ambient-object,
  .featured-machine {
    animation: none !important;
  }
}


/* ============================================================
   NEON ARCADE V64.1 — SCREENSHOT TUNING
   ============================================================ */


/* ------------------------------------------------------------
   1. LOGO HELEMAAL NAAR LINKS BOVEN
   Niet langer gebonden aan de gecentreerde page-frame.
   ------------------------------------------------------------ */

.arcade-logo {
  position: fixed !important;
  top: 31px !important;
  left: 16px !important;

  margin: 0 !important;

  z-index: 100 !important;
}


/* ------------------------------------------------------------
   2. GAMES / LABS / ABOUT WEER IETS GROTER
   Middenweg tussen de oude enorme tabs en huidige kleine tabs.
   ------------------------------------------------------------ */

.arcade-nav {
  gap: 13px !important;
}

.arcade-nav a {
  min-width: 126px !important;
  min-height: 48px !important;

  padding: 0 22px !important;

  font-size: 12px !important;
  letter-spacing: .13em !important;
}


/* ------------------------------------------------------------
   3. BLAUWE PIJLTJE GAME LIBRARY WEG
   Oranje > die we zelf hebben toegevoegd blijft staan.
   ------------------------------------------------------------ */

.neon-library-button::after,
.neon-library-button span::after {
  display: none !important;
  content: none !important;
}

/* Sommige oudere versies maken het pijltje via een child-element */
.neon-library-button > i,
.neon-library-button > svg {
  display: none !important;
}


/* ------------------------------------------------------------
   4. GROENE LOSSE BEACON RECHTS OVERAL WEG
   Dit is ambient-object nummer 6.
   ------------------------------------------------------------ */

.ambient-object--six {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}


/* ------------------------------------------------------------
   5. GROENE DETECTED-LAMPJE DICHTER TEGEN DETECTED
   ------------------------------------------------------------ */

.home-screen .detected-status-dot {
  margin-left: 5px !important;
  margin-right: 10px !important;
}


/* ------------------------------------------------------------
   MOBIEL: fixed logo weer normaal behandelen
   ------------------------------------------------------------ */

@media (max-width: 700px) {
  .arcade-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-right: auto !important;
  }

  .arcade-nav a {
    min-width: auto !important;
    min-height: 39px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
  }
}



/* ============================================================
   NEON ARCADE V64.2 — STATIC CABINET + IDENTICAL LOGO
   ============================================================ */


/* ------------------------------------------------------------
   NEON ARENA BANNER / CABINET VOLLEDIG STIL
   ------------------------------------------------------------ */

.home-screen .featured-machine {
  animation: none !important;
  transform: none !important;
}


/* Ook oude animaties uit eerdere CSS-versies uitschakelen */
.home-screen .featured-machine:hover {
  animation: none !important;
}


/* ------------------------------------------------------------
   LOGO OP HOME EXACT DEZELFDE POSITIE ALS OP
   GAMES / LABS / ABOUT
   ------------------------------------------------------------ */

.arcade-header .arcade-logo,
.arcade-header .arcade-logo.home-library-button {
  position: fixed !important;

  top: 31px !important;
  left: 16px !important;

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

  min-width: 0 !important;
  min-height: 0 !important;

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

  box-shadow: none !important;

  transform: none !important;

  z-index: 100 !important;
}


/* Geen oude button-hover beweging op het Home-logo */
.arcade-header .arcade-logo.home-library-button:hover {
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Mobiel blijft het logo onderdeel van de header */
@media (max-width: 700px) {
  .arcade-header .arcade-logo,
  .arcade-header .arcade-logo.home-library-button {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    margin-right: auto !important;
  }
}



/* ============================================================
   NEON ARCADE V64.3 — LOGO FINAL POSITION
   Exact dezelfde positie op ALLE pagina's
   ============================================================ */

.arcade-header .arcade-logo,
.arcade-header .arcade-logo.home-library-button {
  position: fixed !important;

  /* hoger dan voorheen */
  top: 18px !important;
  left: 16px !important;

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

  transform: none !important;
  z-index: 100 !important;
}


/* Ook op HOME absoluut geen afwijkende positie */
body .arcade-header a.arcade-logo,
body .arcade-header a.arcade-logo.home-library-button {
  top: 18px !important;
  left: 16px !important;
}


/* Mobiele versie */
@media (max-width: 700px) {
  .arcade-header .arcade-logo,
  .arcade-header .arcade-logo.home-library-button,
  body .arcade-header a.arcade-logo,
  body .arcade-header a.arcade-logo.home-library-button {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    margin-right: auto !important;
  }
}



/* ============================================================
   NEON ARCADE V64.4 — LOGO PLANET + DETECTED DOT
   Geldt voor HOME / GAMES / LABS / ABOUT
   ============================================================ */


/* ------------------------------------------------------------
   1. GROENE LAMPJE VRIJWEL TEGEN "DETECTED"
   ------------------------------------------------------------ */

.home-screen .detected-status-dot {
  margin-left: 1px !important;
  margin-right: 10px !important;

  width: 7px !important;
  height: 7px !important;

  box-shadow:
    0 0 5px rgba(135,255,99,1),
    0 0 11px rgba(135,255,99,.70) !important;
}


/* ------------------------------------------------------------
   2. BLAUWE BOLLETJE RECHTSBOVEN LOGO DEFINITIEF WEG
   ------------------------------------------------------------ */

.orbit-spark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/* ------------------------------------------------------------
   3. WERELDBOL / PLANEET IN LOGO DUIDELIJKER
   ------------------------------------------------------------ */

.neon-orbit-logo {
  width: 56px !important;
  height: 48px !important;
  flex: 0 0 56px !important;
}


/* planeet zelf groter en helderder */
.orbit-core {
  width: 23px !important;
  height: 23px !important;

  left: 16px !important;
  top: 11px !important;

  border: 1px solid rgba(82,230,255,.82) !important;

  background:
    radial-gradient(
      circle at 32% 27%,
      #8cf6ff 0%,
      #36d7ff 17%,
      #7753ff 44%,
      #42166f 68%,
      #080b23 100%
    ) !important;

  box-shadow:
    inset -5px -4px 8px rgba(4,5,27,.72),
    inset 3px 2px 5px rgba(135,245,255,.24),
    0 0 7px rgba(55,220,255,.95),
    0 0 17px rgba(55,220,255,.50),
    0 0 25px rgba(154,82,255,.24) !important;
}


/* oranje/cyaan baan duidelijker */
.orbit-ring {
  left: 2px !important;
  top: 16px !important;

  width: 51px !important;
  height: 14px !important;

  border-width: 2px !important;
  border-color: #ffae24 !important;

  opacity: 1 !important;

  box-shadow:
    0 0 5px rgba(255,174,36,.85),
    0 0 11px rgba(255,133,26,.42) !important;
}


/* tweede paarse baan */
.orbit-ring-b {
  border-color: #b259ff !important;

  opacity: .95 !important;

  box-shadow:
    0 0 5px rgba(178,89,255,.90),
    0 0 12px rgba(151,71,255,.48) !important;
}


/* subtiel extra licht rond de hele planeet */
.neon-orbit-logo::after {
  content: "";

  position: absolute;

  width: 29px;
  height: 29px;

  left: 13px;
  top: 8px;

  border-radius: 50%;

  border: 1px solid rgba(59,219,255,.16);

  box-shadow:
    0 0 18px rgba(55,220,255,.18),
    0 0 28px rgba(157,80,255,.12);

  pointer-events: none;
}


/* Mobiel iets compacter houden */
@media (max-width: 700px) {
  .neon-orbit-logo {
    transform: scale(.82) !important;
    transform-origin: left center !important;
  }
}



/* ============================================================
   NEON ARCADE V64.5 — CLEAN LINES + CYAN LOGO
   ============================================================ */


/* ------------------------------------------------------------
   1. DETECTED-LAMPJE NOG VERDER NAAR LINKS
   Oude spacing volledig overrulen
   ------------------------------------------------------------ */

.home-screen .marquee-tag {
  gap: 0 !important;
}

.home-screen .detected-status-dot {
  position: relative !important;

  /* lampje strak tegen DETECTED */
  left: -7px !important;

  margin-left: 0 !important;
  margin-right: 1px !important;

  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
}


/* ------------------------------------------------------------
   2. ARCADE IN HET LOGO → NEON CYAAN
   Op ALLE pagina's hetzelfde
   ------------------------------------------------------------ */

.arcade-logo strong span:last-child {
  color: #45ddff !important;

  text-shadow:
    0 0 5px rgba(69,221,255,.85),
    0 0 12px rgba(69,221,255,.45),
    0 0 22px rgba(69,221,255,.18) !important;
}


/* ------------------------------------------------------------
   3. LANGE EXTRA LIJN BOVENAAN WEG
   De kortere headerlijn blijft gewoon staan.
   ------------------------------------------------------------ */

.arcade-header::after {
  display: none !important;
  content: none !important;
}


/* ------------------------------------------------------------
   4. LANGE EXTRA LIJN ONDERAAN WEG
   De kortere footerlijn blijft staan.
   ------------------------------------------------------------ */

.arcade-quote-footer::before {
  display: none !important;
  content: none !important;
}


/* Voor het geval de oude versies de lange lijnen via page-frame maken */
.page-frame::before,
.page-frame::after {
  display: none !important;
  content: none !important;
}



/* ============================================================
   NEON ARCADE V64.6 — CORRECTIES
   ============================================================ */


/* ------------------------------------------------------------
   1. GROENE DOT NET NAAST DE D VAN DETECTED
   Klein beetje ruimte, maar NIET in de letter.
   ------------------------------------------------------------ */

.home-screen .detected-status-dot {
  position: relative !important;
  left: 0 !important;

  margin-left: 4px !important;
  margin-right: 9px !important;

  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
}


/* ------------------------------------------------------------
   2. GAME LIBRARY:
   GEEN BLAUW/PAARS MEER BIJ HOVER OF KLIK
   Alleen warme gele/oranje neon-gloed.
   ------------------------------------------------------------ */

.neon-library-button,
.neon-library-button:visited {
  border-color: rgba(255, 174, 36, .65) !important;
  background: rgba(8, 10, 21, .82) !important;
  color: #eee4d2 !important;

  box-shadow:
    inset 0 0 14px rgba(255, 178, 38, .02),
    0 0 8px rgba(255, 166, 31, .05) !important;
}

.neon-library-button:hover,
.neon-library-button:focus,
.neon-library-button:focus-visible,
.neon-library-button:active {
  color: #fff6df !important;

  border-color: #ffc13c !important;

  background:
    linear-gradient(
      90deg,
      rgba(255, 153, 20, .10),
      rgba(255, 193, 60, .06)
    ),
    rgba(13, 11, 18, .94) !important;

  outline: none !important;

  box-shadow:
    0 0 7px rgba(255, 193, 60, .95),
    0 0 18px rgba(255, 166, 31, .60),
    0 0 34px rgba(255, 126, 17, .26),
    inset 0 0 18px rgba(255, 185, 42, .10) !important;

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

.neon-library-button:hover b,
.neon-library-button:focus b,
.neon-library-button:active b {
  color: #ffd05b !important;
  text-shadow:
    0 0 5px #ffbd38,
    0 0 12px rgba(255, 166, 31, .85) !important;
}


/* ------------------------------------------------------------
   3. HORIZONTALE LIJNEN CORRECT HERSTELLEN

   KORTE lijn = houden
   LANGE lijn = weg

   De vorige V64.5-regels hadden dit omgedraaid.
   ------------------------------------------------------------ */


/* HEADER:
   lange lijn is de normale border over de brede header -> WEG */
.arcade-header {
  border-bottom: 0 !important;
}


/* korte decoratieve headerlijn uit de bestaande CSS -> TERUG */
.arcade-header::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: min(760px, 64vw) !important;
  height: 1px !important;

  transform: translateX(-50%) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(125, 151, 194, .34) 14%,
      rgba(125, 151, 194, .34) 86%,
      transparent
    ) !important;

  pointer-events: none !important;
}


/* FOOTER:
   lange normale border -> WEG */
.arcade-quote-footer {
  border-top: 0 !important;
}


/* korte decoratieve footerlijn -> TERUG */
.arcade-quote-footer::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  top: 0 !important;

  width: min(760px, 64vw) !important;
  height: 1px !important;

  transform: translateX(-50%) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(125, 151, 194, .30) 14%,
      rgba(125, 151, 194, .30) 86%,
      transparent
    ) !important;

  pointer-events: none !important;
}


/* V64.5 zette page-frame pseudo-elementen uit.
   Die laten we uit zodat daar geen nieuwe lange lijnen ontstaan. */
.page-frame::before,
.page-frame::after {
  display: none !important;
  content: none !important;
}



/* ============================================================
   NEON ARCADE V64.7 — WELCOME TO POSITIE
   ============================================================ */

/* Alleen WELCOME TO... verder naar rechts.
   DETECTED + groene lampje blijven exact staan. */

.home-screen .marquee-tag .welcome-text {
  margin-left: 18px !important;
}



/* ============================================================
   NEON ARCADE V64.8 — SCREENSHOT TUNING
   ============================================================ */


/* ------------------------------------------------------------
   1. WELCOME TO... VERDER NAAR RECHTS
   Groene lampje zelf NIET aanpassen.
   ------------------------------------------------------------ */

/* In de huidige regel staat WELCOME direct na de status-dot.
   We geven alleen de tekst ná de dot extra ruimte. */
.home-screen .detected-status-dot + * {
  margin-left: 17px !important;
}


/* Als WELCOME geen apart element is maar via bestaande spacing
   wordt geplaatst, vergroot alleen de ruimte NA de dot. */
.home-screen .detected-status-dot {
  margin-right: 25px !important;
}


/* ------------------------------------------------------------
   2. GAME LIBRARY > PERFECT VERTICAAL CENTREREN
   ------------------------------------------------------------ */

.neon-library-button {
  display: inline-flex !important;
  align-items: center !important;
}

.neon-library-button > b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;
  top: 0 !important;

  width: 18px !important;
  height: 18px !important;

  margin: 0 !important;

  font-size: 22px !important;
  line-height: 18px !important;
}


/* ------------------------------------------------------------
   3. TABS GROTER
   ------------------------------------------------------------ */

.arcade-nav {
  gap: 14px !important;
}

.arcade-nav a {
  min-width: 142px !important;
  min-height: 54px !important;

  padding: 0 27px !important;

  font-size: 13px !important;
  letter-spacing: .14em !important;
}


/* ------------------------------------------------------------
   4. KORTE WITTE LIJN BOVEN DICHTER ONDER DE TABS
   Lange lijn blijft weg.
   ------------------------------------------------------------ */

.arcade-header::after {
  bottom: 9px !important;

  width: min(760px, 64vw) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(125,151,194,.34) 14%,
      rgba(125,151,194,.34) 86%,
      transparent
    ) !important;
}


/* Mobiel niet onnodig groot maken */
@media (max-width: 700px) {
  .arcade-nav {
    gap: 5px !important;
  }

  .arcade-nav a {
    min-width: auto !important;
    min-height: 40px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
  }
}



/* ============================================================
   NEON ARCADE V64.9 — PLAYER STATUS VERFIJNING
   ============================================================ */


/* Hele PLAYER DETECTED / WELCOME TO regel:
   groter, scherper en minder blokkerig */
.home-screen .marquee-tag {
  font-family:
    "Segoe UI",
    "Trebuchet MS",
    Arial,
    sans-serif !important;

  font-size: 15px !important;
  font-weight: 800 !important;

  letter-spacing: .105em !important;

  line-height: 1 !important;

  color: #ffc13c !important;

  text-shadow:
    0 0 4px rgba(255,193,60,.65),
    0 0 11px rgba(255,158,28,.30) !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}


/* Groen lampje iets groter en duidelijker.
   Positie / onderlinge afstand NIET veranderen. */
.home-screen .detected-status-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;

  border-radius: 50% !important;

  background: #8cff65 !important;

  box-shadow:
    0 0 4px #8cff65,
    0 0 9px rgba(140,255,101,.90),
    0 0 15px rgba(140,255,101,.40) !important;
}



/* ============================================================
   NEON ARCADE V65.0 — SHARP STATUS TEXT + BIGGER ARROW
   ============================================================ */


/* PLAYER DETECTED / WELCOME TO:
   scherpe letters zonder wazige neon-waas */
.home-screen .marquee-tag {
  font-family: "Segoe UI", Arial, sans-serif !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;

  color: #ffc342 !important;

  /* oude zware glow volledig verwijderen */
  text-shadow:
    0 0 1px rgba(255,195,66,.30) !important;

  filter: none !important;
  -webkit-filter: none !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  text-rendering: optimizeLegibility !important;
}


/* Eventuele oude glow op child-elementen ook verwijderen */
.home-screen .marquee-tag span:not(.detected-status-dot) {
  text-shadow:
    0 0 1px rgba(255,195,66,.30) !important;

  filter: none !important;
}


/* ------------------------------------------------------------
   GAME LIBRARY > GROTER
   Positie blijft mooi gecentreerd.
   ------------------------------------------------------------ */

.neon-library-button > b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
  height: 28px !important;

  font-family: Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  color: #ffb52e !important;

  position: relative !important;
  top: -1px !important;

  margin: 0 !important;

  text-shadow:
    0 0 6px rgba(255,181,46,.50) !important;
}


/* Bij hover wordt de grotere > mooi fel geel */
.neon-library-button:hover > b,
.neon-library-button:focus > b,
.neon-library-button:active > b {
  color: #ffd05b !important;

  text-shadow:
    0 0 5px rgba(255,208,91,.95),
    0 0 12px rgba(255,166,31,.70) !important;
}



/* ============================================================
   NEON ARCADE V65.1 — CRISP STATUS TYPOGRAPHY
   ============================================================ */


/* PLAYER DETECTED + WELCOME TO:
   echt scherpe moderne letters, geen pixel/neon blur */
.home-screen .marquee-tag {
  font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif !important;

  font-size: 16px !important;
  font-weight: 600 !important;

  letter-spacing: .045em !important;
  line-height: 1.2 !important;

  color: #ffc247 !important;

  /* ALLE blur/gloed verwijderen */
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  text-rendering: optimizeLegibility !important;
}


/* Oude styling op tekst-elementen binnen de regel ook overrulen */
.home-screen .marquee-tag span:not(.detected-status-dot),
.home-screen .marquee-tag strong,
.home-screen .marquee-tag b {
  font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif !important;
  font-weight: 600 !important;

  color: #ffc247 !important;

  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;

  -webkit-text-stroke: 0 !important;
}


/* Geen oude pseudo-element-glow over de tekst */
.home-screen .marquee-tag::before,
.home-screen .marquee-tag::after {
  text-shadow: none !important;
  filter: none !important;
}


/* BELANGRIJK:
   groene status-dot zelf verder NIET veranderen */
.home-screen .detected-status-dot {
  filter: none !important;
}



/* ============================================================
   NEON ARCADE V65.2 — STATUS GROTER + LOGO DARK GOLD
   ============================================================ */


/* ------------------------------------------------------------
   1. PLAYER DETECTED / WELCOME TO...
   Groter, maar dezelfde scherpe styling behouden
   ------------------------------------------------------------ */

.home-screen .marquee-tag {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;

  /* scherp houden */
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.home-screen .marquee-tag span:not(.detected-status-dot),
.home-screen .marquee-tag strong,
.home-screen .marquee-tag b {
  font-size: inherit !important;
  font-weight: 600 !important;

  text-shadow: none !important;
  filter: none !important;
}


/* ------------------------------------------------------------
   2. LOGO LINKSBOVEN
   ARCADE van cyaan naar donker goudgeel / amber
   NEON zelf blijft zoals hij nu is.
   ------------------------------------------------------------ */

.arcade-logo strong span:last-child {
  color: #d99a24 !important;

  text-shadow:
    0 0 3px rgba(217,154,36,.45),
    0 0 8px rgba(217,154,36,.20) !important;
}


/* Eventuele aparte ARCADE-class ook meenemen */
.arcade-logo .logo-arcade {
  color: #d99a24 !important;

  text-shadow:
    0 0 3px rgba(217,154,36,.45),
    0 0 8px rgba(217,154,36,.20) !important;
}



/* ============================================================
   NEON ARCADE V65.3 — MINI LOGO MATCHT GROTE TITEL
   ============================================================ */


/* ------------------------------------------------------------
   NEON — zelfde uitstraling als grote NEON
   Gevuld warm goud/geel
   ------------------------------------------------------------ */

.arcade-logo .logo-neon,
.arcade-logo strong span:first-child {
  color: #ffc13c !important;

  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 4px rgba(255,193,60,.75),
    0 0 9px rgba(255,166,31,.42),
    0 0 16px rgba(255,145,20,.20) !important;
}


/* ------------------------------------------------------------
   ARCADE — mini-versie van grote ARCADE
   Donkere binnenkant + gouden outline
   ------------------------------------------------------------ */

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {
  color: #0a0c18 !important;

  -webkit-text-stroke: 1px #f5a91f !important;

  paint-order: stroke fill !important;

  text-shadow:
    0 0 3px rgba(255,184,38,.85),
    0 0 7px rgba(255,155,23,.48),
    0 0 13px rgba(255,132,15,.22) !important;
}


/* De letters van het kleine logo iets krachtiger,
   zodat de outline van ARCADE goed zichtbaar blijft */
.arcade-logo strong {
  font-weight: 800 !important;
}



/* ============================================================
   NEON ARCADE V65.4 — SHARP MINI ARCADE LOGO
   ============================================================ */

/* Kleine ARCADE:
   zelfde goud-outline idee als de grote titel,
   maar speciaal scherp gemaakt voor klein formaat. */

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {
  color: #080b16 !important;

  /* scherpere, iets dunnere gouden rand */
  -webkit-text-stroke: 0.75px #ffb52e !important;

  paint-order: stroke fill !important;

  /* wazige neonlagen verwijderen */
  text-shadow:
    0 0 1px rgba(255,181,46,.55) !important;

  filter: none !important;
  -webkit-filter: none !important;

  font-weight: 800 !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  text-rendering: geometricPrecision !important;
}



/* ============================================================
   NEON ARCADE V65.5 — MINI LOGO FIX
   Geen outline meer op kleine ARCADE
   ============================================================ */


/* NEON bovenaan: helder goud zoals grote NEON */
.arcade-logo .logo-neon,
.arcade-logo strong span:first-child {
  color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 3px rgba(255,193,60,.65),
    0 0 8px rgba(255,166,31,.30) !important;

  filter: none !important;
}


/* ARCADE: VOLLE gouden letters.
   Iets donkerder dan NEON, maar dezelfde kleurenfamilie. */
.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {
  color: #e9a52b !important;

  -webkit-text-fill-color: #e9a52b !important;
  -webkit-text-stroke: 0 !important;

  paint-order: normal !important;

  font-weight: 800 !important;

  text-shadow:
    0 0 2px rgba(233,165,43,.40),
    0 0 6px rgba(233,165,43,.18) !important;

  filter: none !important;
  -webkit-filter: none !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}



/* ============================================================
   NEON ARCADE V65.6
   KLEIN LOGO = EXACT DEZELFDE LOOK ALS GROTE HOMEPAGE TITEL
   ============================================================ */


/* NEON — gevuld goud zoals grote NEON */
.arcade-logo .logo-neon,
.arcade-logo strong span:first-child {
  color: #ffc13c !important;
  -webkit-text-fill-color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 5px rgba(255,193,60,.70),
    0 0 12px rgba(255,166,31,.35) !important;
}


/* ARCADE — donkere/transparante binnenkant + gouden rand,
   net zoals de grote ARCADE in het midden */
.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* bij klein formaat iets steviger zodat de rand zichtbaar blijft */
  -webkit-text-stroke: 1.35px #f5a91f !important;

  font-weight: 800 !important;

  text-shadow:
    0 0 2px rgba(245,169,31,.85),
    0 0 5px rgba(245,169,31,.32) !important;

  filter: none !important;
  -webkit-filter: none !important;

  paint-order: stroke fill !important;
}


/* Geen oude V65.5 kleur meer laten doorsijpelen */
.arcade-logo .logo-arcade {
  background: transparent !important;
}



/* ============================================================
   NEON ARCADE V65.7 — MINI ARCADE MATCH HOMEPAGE
   ============================================================ */


/* Kleine ARCADE dezelfde verhouding geven als grote titel:
   - duidelijk meer ruimte onder NEON
   - donkere warme binnenkant
   - heldere gouden rand
   - subtiele goudgloed
*/

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {

  /* donkere warme binnenkleur */
  color: #3a260f !important;
  -webkit-text-fill-color: #3a260f !important;

  /* duidelijke gouden outline */
  -webkit-text-stroke: 1.15px #f5a91f !important;

  paint-order: stroke fill !important;

  /* veel minder felle binnengloed */
  text-shadow:
    0 0 2px rgba(245,169,31,.55),
    0 0 5px rgba(217,126,15,.18) !important;

  filter: none !important;
  -webkit-filter: none !important;

  font-weight: 800 !important;

  /* ARCADE verder onder NEON zoals grote titel */
  position: relative !important;
  top: 4px !important;
}


/* Als de twee woorden in een verticale logo-container staan,
   dezelfde duidelijke tussenruimte afdwingen */
.arcade-logo strong {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  line-height: 1 !important;
  gap: 3px !important;
}


/* NEON absoluut op zijn huidige positie houden */
.arcade-logo .logo-neon,
.arcade-logo strong span:first-child {
  position: relative !important;
  top: 0 !important;
}



/* ============================================================
   V65.8 — ALLEEN KLEINE ARCADE LINKSBOVEN
   ============================================================ */

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {

  /* iets breder, NIET groter */
  display: inline-block !important;
  transform: scaleX(1.12) !important;
  transform-origin: left center !important;

  /* iets dichter tegen NEON */
  position: relative !important;
  top: 1px !important;

  /* warme goudbruine binnenkant zoals grote ARCADE */
  color: #7a4b12 !important;
  -webkit-text-fill-color: #7a4b12 !important;

  /* heldere gouden buitenrand */
  -webkit-text-stroke: 0.9px #f5a91f !important;

  /* subtiel, niet wazig */
  text-shadow:
    0 0 2px rgba(245,169,31,.45) !important;

  filter: none !important;
  -webkit-filter: none !important;

  paint-order: stroke fill !important;
}


/* ruimte tussen NEON en ARCADE weer kleiner */
.arcade-logo strong {
  gap: 0 !important;
}



/* ============================================================
   V65.9 — KLEINE ARCADE BETER LEESBAAR
   ALLEEN het woord ARCADE linksboven
   ============================================================ */

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {

  /* huidige grootte/breedte behouden */
  display: inline-block !important;
  transform: scaleX(1.12) !important;
  transform-origin: left center !important;

  /* huidige positie behouden */
  position: relative !important;
  top: 1px !important;

  /* lichtere warme binnenkleur voor meer contrast */
  color: #b87818 !important;
  -webkit-text-fill-color: #b87818 !important;

  /* duidelijkere goudgele rand */
  -webkit-text-stroke: 1.15px #ffb52e !important;

  /* heel subtiele glow — niet wazig */
  text-shadow:
    0 0 1px #ffb52e,
    0 0 3px rgba(255,181,46,.28) !important;

  paint-order: stroke fill !important;

  filter: none !important;
  -webkit-filter: none !important;

  font-weight: 800 !important;
}



/* ============================================================
   V66.0 — HELE LINKER HOMEPAGE KOLOM NAAR RECHTS
   ============================================================ */

/* Alleen het hoofdblok links verschuiven */
.home-screen .hero-copy {
  position: relative !important;
  left: 50px !important;
}


/* Mobiel geen horizontale verschuiving */
@media (max-width: 800px) {
  .home-screen .hero-copy {
    left: 0 !important;
  }
}



/* ============================================================
   V66.1 — HELE LINKER HOMEPAGE-KOLOM NAAR RECHTS
   Alleen PLAYER DETECTED + NEON ARCADE + HUD + GAME LIBRARY
   ============================================================ */

.home-screen > .marquee {
  position: relative !important;
  left: 75px !important;
}


/* Op kleinere schermen niet laten doorschuiven */
@media (max-width: 950px) {
  .home-screen > .marquee {
    left: 0 !important;
  }
}


/* ============================================================
   V66.2 — LINKER HOMEPAGE-KOLOM IETS VERDER NAAR RECHTS
   ============================================================ */

.home-screen > .marquee {
  left: 110px !important;
}

@media (max-width: 950px) {
  .home-screen > .marquee {
    left: 0 !important;
  }
}



/* ============================================================
   V66.3 — STATUS DOT + MINI LOGO ARCADE FIX
   Alleen deze 2 aanpassingen
   ============================================================ */


/* 1) Groen lampje iets meer ruimte na DETECTED */
.home-screen .detected-status-dot {
  left: 0 !important;
  margin-left: 10px !important;
  margin-right: 14px !important;
}


/* 2) Kleine ARCADE linksboven:
   dezelfde look als grote ARCADE op homepage */
.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {
  display: inline-block !important;

  /* iets breder voor betere leesbaarheid, maar subtiel */
  transform: scaleX(1.08) !important;
  transform-origin: left center !important;

  /* dichter onder NEON houden */
  position: relative !important;
  top: 1px !important;

  /* zelfde stijl als grote ARCADE */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.05px #ffb52e !important;

  paint-order: stroke fill !important;

  text-shadow:
    0 0 4px rgba(255,181,46,.38),
    0 0 9px rgba(255,113,16,.14) !important;

  filter: none !important;
  -webkit-filter: none !important;

  font-weight: 800 !important;
}


/* ruimte tussen NEON en ARCADE in klein logo netjes compact */
.arcade-logo strong {
  gap: 1px !important;
}



/* ============================================================
   V66.4 — ALLEEN KLEINE ARCADE GROTER + BREDER
   ============================================================ */

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {

  /* iets groter */
  font-size: 14.5px !important;

  /* duidelijk breder zoals de verhouding van de grote titel */
  display: inline-block !important;
  transform: scaleX(1.20) !important;
  transform-origin: left center !important;

  /* huidige verticale positie behouden */
  top: 1px !important;
}



/* ============================================================
   V66.5 — KLEINE ARCADE SUBTIEL KLEINER + LEESBAARDER
   Alleen logo linksboven
   ============================================================ */

.arcade-logo .logo-arcade,
.arcade-logo strong span:last-child {

  /* iets kleiner dan nu */
  font-size: 13px !important;

  /* nog steeds breed, maar minder extreem */
  display: inline-block !important;
  transform: scaleX(1.12) !important;
  transform-origin: left center !important;

  /* letters iets beter uit elkaar voor duidelijkere A en E */
  letter-spacing: 0.08em !important;

  /* homepage-stijl behouden */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.15px #ffb52e !important;
  paint-order: stroke fill !important;

  /* minder wazige glow, dus scherper */
  text-shadow:
    0 0 2px rgba(255,181,46,.26) !important;

  filter: none !important;
  -webkit-filter: none !important;

  position: relative !important;
  top: 1px !important;

  font-weight: 800 !important;
}



/* ============================================================
   V66.6 — MINI LOGO EXACTE VERHOUDING HOMEPAGE
   Alleen NEON + ARCADE linksboven
   ============================================================ */

.arcade-logo strong {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  /* zelfde typografische basis als grote homepage-titel */
  font-family: Impact, "Arial Black", "Segoe UI Black", sans-serif !important;
  font-weight: 900 !important;
  line-height: .82 !important;

  gap: 3px !important;
}


/* Kleine NEON */
.arcade-logo strong span:first-child {
  font-size: 13px !important;
  letter-spacing: .015em !important;

  color: #ffc13c !important;
  -webkit-text-fill-color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 3px rgba(255,193,60,.60),
    0 0 7px rgba(255,166,31,.28) !important;

  transform: none !important;
}


/* Kleine ARCADE:
   exact dezelfde basisgrootte als NEON,
   zoals bij de grote titel */
.arcade-logo strong span:last-child,
.arcade-logo .logo-arcade {
  font-size: 13px !important;
  letter-spacing: .015em !important;

  display: inline-block !important;

  /* geen kunstmatige extra breedte meer */
  transform: none !important;

  position: relative !important;
  top: 0 !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px #ffb52e !important;

  text-shadow:
    0 0 2px rgba(255,181,46,.30) !important;

  paint-order: stroke fill !important;
}



/* ============================================================
   V66.7 — MINI LOGO BETER LEESBAAR
   Zelfde verhouding, alleen scherper en iets groter
   ============================================================ */

.arcade-logo strong {
  font-family: Impact, "Arial Black", "Segoe UI Black", sans-serif !important;
  font-weight: 900 !important;
  line-height: .84 !important;

  gap: 3px !important;
}


/* NEON */
.arcade-logo strong span:first-child {
  font-size: 15px !important;
  letter-spacing: .02em !important;

  color: #ffc13c !important;
  -webkit-text-fill-color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 2px rgba(255,193,60,.45),
    0 0 5px rgba(255,166,31,.18) !important;

  filter: none !important;
}


/* ARCADE — zelfde stijl als grote ARCADE,
   maar sterker getekend voor klein formaat */
.arcade-logo strong span:last-child,
.arcade-logo .logo-arcade {
  font-size: 15px !important;
  letter-spacing: .02em !important;

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

  -webkit-text-stroke: 1.25px #ffb52e !important;

  text-shadow:
    0 0 1px rgba(255,181,46,.55),
    0 0 3px rgba(255,145,20,.20) !important;

  paint-order: stroke fill !important;

  transform: none !important;
  top: 0 !important;

  filter: none !important;
  -webkit-filter: none !important;
}



/* ============================================================
   V66.8 — MINI LOGO FINAL POLISH
   Alleen tekst NEON / ARCADE linksboven
   ============================================================ */

.arcade-logo strong {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

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

  line-height: .88 !important;
  gap: 3px !important;
}


/* NEON — helder, strak goud */
.arcade-logo strong span:first-child {
  font-size: 15px !important;
  letter-spacing: .015em !important;

  color: #ffc13c !important;
  -webkit-text-fill-color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 2px rgba(255,205,91,.55),
    0 0 6px rgba(255,166,31,.23) !important;

  transform: none !important;
}


/* ARCADE — zelfde idee als grote titel,
   maar geoptimaliseerd voor klein formaat */
.arcade-logo strong span:last-child,
.arcade-logo .logo-arcade {
  font-size: 14px !important;
  font-weight: 900 !important;

  letter-spacing: .025em !important;

  display: inline-block !important;

  /* klein beetje breder voor mooie verhouding */
  transform: scaleX(1.06) !important;
  transform-origin: left center !important;

  position: relative !important;
  top: 0 !important;

  /* donkere warme binnenkant i.p.v. zwart */
  color: #5b360d !important;
  -webkit-text-fill-color: #5b360d !important;

  /* scherpe gouden rand */
  -webkit-text-stroke: .95px #ffb52e !important;

  paint-order: stroke fill !important;

  /* minimaal glow: scherper leesbaar */
  text-shadow:
    0 0 1px rgba(255,190,55,.65),
    0 0 3px rgba(255,145,20,.18) !important;

  filter: none !important;
  -webkit-filter: none !important;
}



/* ============================================================
   V66.9 — MINI LOGO NAAR MONOGRAM "N / A"
   Alleen het logo linksboven
   ============================================================ */


/* huidige tekst verbergen */
.arcade-logo strong span,
.arcade-logo .logo-neon,
.arcade-logo .logo-arcade {
  display: none !important;
}


/* tekstcontainer ombouwen naar monogramvlak */
.arcade-logo strong {
  position: relative !important;
  display: block !important;

  width: 38px !important;
  height: 34px !important;

  margin-left: 2px !important;
  flex: 0 0 38px !important;
}


/* N — linksboven, gevuld goud */
.arcade-logo strong::before {
  content: "N";

  position: absolute;
  left: 0;
  top: -1px;

  font-family: Impact, "Arial Black", "Segoe UI Black", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;

  color: #ffc13c;
  -webkit-text-fill-color: #ffc13c;
  -webkit-text-stroke: 0;

  text-shadow:
    0 0 3px rgba(255,193,60,.55),
    0 0 7px rgba(255,166,31,.22);

  transform: none;
}


/* A — rechtsonder, iets overlappend, donkere binnenkant + gouden rand */
.arcade-logo strong::after {
  content: "A";

  position: absolute;
  right: 0;
  bottom: -1px;

  font-family: Impact, "Arial Black", "Segoe UI Black", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;

  color: #5a350d;
  -webkit-text-fill-color: #5a350d;
  -webkit-text-stroke: 1px #ffb52e;

  paint-order: stroke fill;

  text-shadow:
    0 0 1px rgba(255,190,55,.55),
    0 0 3px rgba(255,145,20,.18);

  /* beetje overlap met N */
  transform: translate(-5px, 0);
}


/* planeet + monogram netjes uitlijnen */
.arcade-logo {
  align-items: center !important;
  gap: 8px !important;
}



/* ============================================================
   V67.0 — MONOGRAM FIX
   Oude logo-tekst DEFINITIEF weg
   Alleen N + A blijven over
   ============================================================ */

/* hele oude tekstinhoud onzichtbaar maken */
.arcade-logo strong {
  position: relative !important;

  display: block !important;

  width: 42px !important;
  height: 38px !important;

  flex: 0 0 42px !important;

  font-size: 0 !important;
  line-height: 0 !important;

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

  text-shadow: none !important;
}


/* alle oude spans / classes echt uitzetten */
.arcade-logo strong > *,
.arcade-logo .logo-neon,
.arcade-logo .logo-arcade {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
}


/* N linksboven */
.arcade-logo strong::before {
  content: "N" !important;

  position: absolute !important;

  left: 1px !important;
  top: 0 !important;

  display: block !important;

  font-family: Impact, "Arial Black", sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  color: #ffc13c !important;
  -webkit-text-fill-color: #ffc13c !important;
  -webkit-text-stroke: 0 !important;

  text-shadow:
    0 0 3px rgba(255,193,60,.65),
    0 0 8px rgba(255,166,31,.26) !important;
}


/* A rechtsonder en iets over de N heen */
.arcade-logo strong::after {
  content: "A" !important;

  position: absolute !important;

  left: 17px !important;
  top: 13px !important;

  display: block !important;

  font-family: Impact, "Arial Black", sans-serif !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

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

  -webkit-text-stroke: 1.2px #ffb52e !important;

  paint-order: stroke fill !important;

  text-shadow:
    0 0 2px rgba(255,181,46,.55),
    0 0 5px rgba(255,145,20,.18) !important;
}


/* planeet en monogram mooi naast elkaar */
.arcade-logo {
  gap: 7px !important;
}