:root {
  --bg-dark: #0a0c09;
  --bg-panel: #131711;
  --accent-gold: #d4af37;
  --accent-gold-hover: #f1c40f;
  --accent-brown: #5d4037;
  --text-main: #ecf0f1;
  --text-muted: #95a5a6;
  --border-color: #333;

  --radius: 4px;
  --shadow: 0 10px 30px rgba(0,0,0,0.5);

  --header-image: url('/public/image.php?src=assets%2Fimages%2Fheader_guest.png&w=1600&h=600&fit=cover&q=80');
  --header-height: 600px;
  /* Header overlay: donkerder onderaan voor smooth overgang naar body */
  --header-overlay: linear-gradient(180deg, rgba(10,12,9,0.6) 0%, rgba(10,12,9,0.4) 40%, #0a0c09 100%);
}

* { box-sizing: border-box; }

/* Sticky Footer Setup */
body.guest {
  margin: 0;
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;

  /* Flexbox voor sticky footer */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main Content Wrapper (duwt footer naar beneden) */
body.guest main.container {
  flex: 1;
  /* Override default container width voor full-width hero */
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Content Wrapper voor gecentreerde inhoud */
.guest-content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

a { color: var(--accent-gold); text-decoration: none; transition: 0.2s; }
a:hover { color: var(--accent-gold-hover); text-decoration: none; }

/* ========= HEADER & HERO ========= */
.site-header {
  height: var(--header-height);
  background-image: var(--header-image);
  background-size: cover;
  background-position: center;
  position: relative;
}
.site-header.site-header--home {
  height: auto !important;
  min-height: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.6) 65%, rgba(8, 8, 12, 0) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.site-header--home .overlay {
  background: transparent !important;
  pointer-events: none;
}
.site-header.site-header--home .topbar {
  pointer-events: auto;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.overlay {
  background: linear-gradient(180deg, rgba(3,3,3,0.2) 0%, rgba(3,3,3,0.7) 70%, #030303 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 100; /* Zorg dat hij boven alles ligt */
}
.nav a {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Taal Switcher - Inklapbaar & Sleek */
.lang-switch {
  background: rgba(0,0,0,0.6);
  padding: 8px 15px;
  border-radius: 4px;
  border: 1px solid var(--accent-gold);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  color: #fff;
}
.lang-switch span { color: #bbb; margin-right: 8px; }
.lang-switch a { color: #ccc; margin: 0 5px; font-weight: normal; text-decoration: none; }
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-active { color: var(--accent-gold); font-weight: bold; }

/* Collapsible Language Selector */
.lang-switch-dropdown {
  position: relative;
  display: inline-block;
}

.lang-switch-btn {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--accent-gold);
  border-radius: 4px;
  padding: 6px 14px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  outline: none;
}

.lang-switch-btn:hover {
  background: rgba(25, 25, 25, 0.85);
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

.lang-switch-dropdown.is-open .lang-switch-btn {
  background: rgba(30, 30, 30, 0.95);
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
}

.lang-switch-btn__flag {
  font-size: 1.05rem;
  line-height: 1;
}

.lang-switch-btn__code {
  color: var(--accent-gold);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.lang-switch-btn__arrow {
  font-size: 0.65rem;
  color: var(--accent-gold);
  transition: transform 0.25s ease;
  margin-left: 2px;
}

.lang-switch-dropdown.is-open .lang-switch-btn__arrow {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: rgba(15, 15, 18, 0.96);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 3px;
  transform-origin: top right;
}

.lang-switch-dropdown.is-open .lang-switch-menu {
  display: flex;
  animation: langDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes langDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lang-switch-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  color: #ddd;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.lang-switch-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.lang-switch-option.is-active {
  color: var(--accent-gold);
  font-weight: 700;
  background: rgba(212, 175, 55, 0.15);
  border-left: 3px solid var(--accent-gold);
}

.lang-option-flag {
  font-size: 1.1rem;
}

.lang-option-name {
  flex: 1;
}

.lang-option-code {
  font-size: 0.75rem;
  color: #888;
  font-weight: 600;
}

.lang-switch-option.is-active .lang-option-code {
  color: var(--accent-gold);
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 80px 20px;
  margin-top: -350px; /* Trekt content over header heen */
  position: relative;
  z-index: 2;
}
.hero__copy {
  max-width: 800px;
  margin: 0 auto;
  text-shadow: 0 2px 15px rgba(0,0,0,0.9);
}
.hero__title {
  font-size: 4rem;
  line-height: 1.1;
  margin: 0 0 20px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}
.hero__title span {
  display: block;
  font-size: 1.5rem;
  color: var(--accent-gold);
  font-weight: 400;
  letter-spacing: 4px;
  margin-bottom: 10px;
}
.hero__subtitle {
  font-size: 1.3rem;
  color: #e0e0e0;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

/* Buttons */
.btn {
  display: inline-block; padding: 13px 28px; border-radius: 4px;
  font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  transition: all 0.15s ease; border: none; cursor: pointer; text-decoration: none;
}
.btn--primary {
  background: linear-gradient(180deg, var(--accent-gold), #b48a12);
  color: #000;
  border: 1px solid var(--accent-gold);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
  color: #000;
}
.btn--ghost {
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  margin-left: 10px;
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff;
}

/* ========= SECTIONS ========= */
.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 40px auto 80px;
    padding: 0 20px;
}
.section-intro h2 { color: #fff; font-size: 2rem; margin-bottom: 15px; }
.section-intro p { font-size: 1.1rem; color: #ccc; line-height: 1.8; }

.section-title { text-align: center; font-size: 2.5rem; color: #fff; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; }
.section-desc { text-align: center; color: var(--text-muted); margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; }

.section-eyebrow {
  margin: 0 0 10px;
  color: var(--accent-gold);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.seo-overview { margin: 0 auto 85px; }
.seo-overview__intro { max-width: 840px; margin: 0 auto 30px; text-align: center; }
.seo-overview__intro h2, .game-depth h2, .trust-block h2, .homepage-faq h2 { margin: 0 0 16px; color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.16; }
.seo-overview__intro p:last-child, .game-depth__howto > p, .trust-block p { color: #c7c2bb; font-size: 1.04rem; line-height: 1.8; }
.seo-overview__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.seo-overview__grid article, .game-depth__systems article { padding: 25px; background: linear-gradient(145deg, #181818, #101010); border: 1px solid rgba(212,175,55,.22); border-radius: var(--radius); }
.seo-overview__grid h3, .game-depth__systems h3 { margin: 0 0 12px; color: #f0d48d; font-size: 1.15rem; }
.seo-overview__grid p, .game-depth__systems p { margin: 0; color: #aaa49c; line-height: 1.72; }

.game-depth { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; margin: 80px auto; padding: 36px; background: radial-gradient(circle at top left, rgba(139,0,0,.22), transparent 44%), #111; border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); }
.game-depth__howto ol { margin: 24px 0 0; padding-left: 23px; color: #ddd; }
.game-depth__howto li { margin: 10px 0; padding-left: 5px; line-height: 1.55; }
.game-depth__systems { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.game-depth__systems article { padding: 20px; }

.trust-block { margin: 10px auto 70px; padding: 38px; background: linear-gradient(135deg, rgba(116,18,18,.3), rgba(212,175,55,.08)); border: 1px solid rgba(212,175,55,.26); border-radius: var(--radius); }
.trust-block > div { max-width: 850px; margin: 0 auto; }
.trust-block a { color: var(--accent-gold); font-weight: 900; text-underline-offset: 4px; }

.homepage-faq { margin: 0 auto 80px; }
.homepage-faq > .section-eyebrow, .homepage-faq > h2 { text-align: center; }
.homepage-faq__grid { display: grid; gap: 12px; max-width: 900px; margin: 28px auto 0; }
.homepage-faq details { padding: 19px 22px; background: #141414; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; }
.homepage-faq summary { color: #fff; font-size: 1.06rem; font-weight: 800; cursor: pointer; }
.homepage-faq details p { margin: 14px 0 2px; color: #bcb6ae; line-height: 1.7; }

/* Showcases & Zoom Effect */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 80px;
}

/* Op de landingspagina bepaalt het sectieritme de tussenruimte; die marge zou
   er doorheen zakken (marge-collaps) en de afstand ongelijk maken. Op
   screenshots.php staat het raster los en houdt het zijn eigen afstand. */
.guest-content-wrap > section > .showcase-grid { margin-bottom: 0; }
.showcase-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
}
.showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-color: var(--accent-gold);
}

/* Image Zoom Container */
.showcase-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}
.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  cursor: zoom-in; /* NIEUW: Laat zien dat je kunt klikken */
}
.showcase-card:hover .showcase-img {
  transform: scale(1.1);
}

.showcase-info { padding: 20px; text-align: center; }
.showcase-info h3 { margin: 0; color: var(--accent-gold); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
.showcase-info p { margin: 10px 0 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

/* CTA Bottom */
.cta-bottom {
    text-align: center; margin-top: 80px; padding: 60px 20px;
    background: linear-gradient(135deg, #1a1f18, #0a0c09);
    border: 1px solid #333; border-radius: 8px;
    position: relative; overflow: hidden;
}
.cta-bottom::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

/* Footer - Full Width */
.site-footer {
  background: #050604;
  padding: 60px 0 30px;
  margin-top: 0; /* Sluit direct aan */
  border-top: 1px solid #222;
  color: #666;
  width: 100%;
}
.footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
/* minmax(0,…) is hier geen sierlijkheid: zonder die 0 mag geen enkele kolom
   smaller worden dan zijn langste woord, en dan duwt één lange link (of een
   mailadres) de hele verhouding scheef. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 40px;
  text-align: left;
  align-items: start;
}
.footer-col { min-width: 0; }
.footer-col p { margin: 0; line-height: 1.6; }
.footer-col h4 { color: #fff; margin-top: 0; margin-bottom: 20px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #888; font-size: 0.95rem; }
.footer-col a:hover { color: var(--accent-gold); }
/* Mailadres en telefoonnummer zijn één lang woord; die mogen breken. */
.footer-col a[href^="mailto:"], .footer-col a[href^="tel:"] { overflow-wrap: anywhere; }

/* Talenrij en copyright staan onder het raster, niet erin. */
.footer-lang-switcher, .footer-copy { grid-column: auto; }
.footer-copy { margin-top: 20px; opacity: .5; text-align: center; font-size: .9rem; }

/* Vier kolommen worden krap op tablets; daar twee bij twee. */
@media(max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
}

/* Responsive */
@media(max-width: 768px) {
  .seo-overview__grid, .game-depth { grid-template-columns: 1fr; }
  .game-depth { padding: 25px 20px; }
  .game-depth__systems { grid-template-columns: 1fr; }
  .trust-block { padding: 28px 22px; }
  .hero__title { font-size: 2.5rem; }
  .hero { margin-top: -250px; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .topbar { flex-direction: column; gap: 10px; }
}

/* === LIGHTBOX STYLES === */
.lightbox {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9); z-index: 10000;
  display: none; justify-content: center; align-items: center;
  cursor: zoom-out; opacity: 0; transition: opacity 0.3s;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img {
  max-width: 90vw; max-height: 90vh;
  border: 2px solid var(--accent-gold);
  border-radius: 4px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  transform: scale(0.9); transition: transform 0.3s;
}
.lightbox.active img { transform: scale(1); }

/* === STRICT EMOJI SIZING === */
img.emoji, svg.emoji, .emoji, img[src*="twemoji"], img[src*="svg"] {
  width: 1.1em !important;
  height: 1.1em !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 1.2em !important;
  max-height: 1.2em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  margin: 0 0.15em !important;
  vertical-align: -0.15em !important;
  display: inline-block !important;
  object-fit: contain !important;
  contain: layout size;
}

/* =========================================================================
   RANGLIJSTEN OP DE LANDINGSPAGINA
   Eén component voor twee lijsten: de top van het lopende seizoen en de Hall
   of Fame van het vorige. Ze stonden er eerst los van elkaar in met eigen
   inline-stijlen, waardoor dezelfde soort lijst er twee keer anders uitzag.
   Mobile-first: op smalle schermen mag de naam afkappen en blijven de
   getallen op één regel.
   ========================================================================= */

.rank-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 18px;
  background: linear-gradient(145deg, #181818, #101010);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* De kaart is een wikkel om de lijst heen; zou de <ol> zelf beide klassen
   dragen, dan wist deze padding-reset de binnenmarge van de kaart. */
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #262626;
}

.rank-row:last-child { border-bottom: none; }

.rank-row__pos {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}

/* De top drie krijgt een medaille in plaats van een getal-kleurtje. */
.rank-row--1 .rank-row__pos { color: #ffd970; text-shadow: 0 0 10px rgba(255, 215, 0, 0.35); }
.rank-row--2 .rank-row__pos { color: #d8d8d8; }
.rank-row--3 .rank-row__pos { color: #c98a52; }

.rank-row__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #2f2f2f;
  background: #0d0d0d;
}

.rank-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Speler die zijn ranglijstnaam niet openbaar heeft: geen avatar, wel een plek. */
.rank-row__avatar.is-anon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a6a6a;
  font-weight: 900;
  font-size: 1.1rem;
}

.rank-row__main {
  flex: 1 1 auto;
  min-width: 0;
}

.rank-row__name {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-row__name.is-anon { color: #6f6f6f; font-weight: 600; font-style: italic; }

.rank-row__sub {
  display: block;
  font-size: 0.8rem;
  color: #8b8b8b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-row__stats {
  flex: 0 0 auto;
  text-align: right;
}

.rank-row__value {
  display: block;
  color: var(--accent-gold);
  font-weight: 800;
  white-space: nowrap;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.rank-row__unit { font-weight: 600; opacity: 0.7; font-size: 0.78em; }

.rank-row__meta {
  display: block;
  color: #666;
  font-size: 0.75rem;
  white-space: nowrap;
}

.rank-note {
  max-width: 640px;
  margin: 16px auto 0;
  text-align: center;
  color: #7d7d7d;
  font-size: 0.85rem;
  line-height: 1.6;
}

.rank-note a { color: var(--accent-gold); font-weight: 700; }

@media (min-width: 700px) {
  .rank-card { padding: 14px 26px; }
  .rank-row { gap: 16px; padding: 15px 0; }
  .rank-row__pos { font-size: 1.4rem; min-width: 40px; }
  .rank-row__avatar { width: 50px; height: 50px; flex-basis: 50px; }
  .rank-row__name { font-size: 1.08rem; }
  .rank-row__value { font-size: 1rem; }
}

@media (max-width: 380px) {
  /* Ook de anonieme plaatshouder gaat weg: die staat met een eigen display
     in de regel hierboven en bleef anders als enige over. */
  .rank-row__avatar,
  .rank-row__avatar.is-anon { display: none; }
  .rank-row__value { font-size: 0.84rem; }
}

/* =========================================================================
   GASTEN-NAVIGATIE — mobile first
   Op een telefoon vielen acht losse links over drie regels uiteen. Ze zitten
   nu achter één knop; vanaf 900px staat de balk gewoon open zoals voorheen.
   ========================================================================= */

.guest-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-gold);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.guest-nav-toggle__bars,
.guest-nav-toggle__bars::before,
.guest-nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--accent-gold);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.guest-nav-toggle__bars {
  position: relative;
}

.guest-nav-toggle__bars::before,
.guest-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.guest-nav-toggle__bars::before { top: -6px; }
.guest-nav-toggle__bars::after  { top: 6px; }

/* Kruisje wanneer het menu open staat. */
.guest-nav-toggle.is-open .guest-nav-toggle__bars { background: transparent; }
.guest-nav-toggle.is-open .guest-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.guest-nav-toggle.is-open .guest-nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.guest-nav-panel .nav a.nav__cta {
  color: var(--accent-gold);
}

.guest-topbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 959px) {
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  .guest-nav-panel {
    display: none;
    width: 100%;
    max-width: 320px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 12px;
    padding: 10px;
    backdrop-filter: blur(6px);
  }

  .guest-nav-panel.is-open { display: flex; }

  .guest-nav-panel .nav {
    display: flex;
    flex-direction: column;
  }

  .guest-nav-panel .nav a {
    margin-right: 0;
    padding: 11px 12px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    font-size: 0.88rem;
  }

  .guest-nav-panel .nav a:last-child { border-bottom: none; }
  .guest-nav-panel .nav a:hover { background: rgba(255, 255, 255, 0.06); }
}

/* Vanaf 960px: geen knop, gewoon de horizontale balk die nooit naar een volgende regel springt. */
@media (min-width: 960px) {
  .guest-nav-toggle { display: none; }

  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .guest-nav-panel {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-right: 0;
  }
}

/* =========================================================================
   HERO CTA-KNOPPEN
   .actions had geen eigen regel; de enige ruimte kwam van een margin-left
   van 10px op .btn--ghost. Dat is horizontaal, dus zodra de knoppen op een
   telefoon onder elkaar vielen raakten ze elkaar. Nu een echte flex-gap die
   in beide richtingen werkt.
   ========================================================================= */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* Ruimte komt nu van de gap, niet meer van een losse marge. */
.btn--ghost {
  margin-left: 0;
}

@media (max-width: 560px) {
  .actions {
    flex-direction: column;
    gap: 14px;
  }

  /* Onder elkaar even breed: rustiger beeld dan twee verschillende breedtes. */
  .actions .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* =========================================================================
   MERKNAAM IN DE GASTENBALK
   Op mobiel stond er alleen een losse MENU-knop; de naam ontbrak volledig.
   De merknaam staat nu links, de knop rechts, en het uitklapmenu valt op een
   eigen regel eronder (flex-wrap).
   ========================================================================= */

.guest-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* De basislijn-uitlijning van naam en .com blijft binnen dit spannetje; het
   logo ernaast wordt op het midden uitgelijnd door de flexbox hierboven. */
.guest-brand__name {
  display: inline-flex;
  align-items: baseline;
}

/* Zelfde gouden randje en donkere ondergrond als de taalknop en de menuknop
   ernaast, alleen met een zachte hoek in plaats van een pil. */
.guest-brand__logo {
  flex: 0 0 auto;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  object-fit: cover;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.guest-brand:hover { color: #fff; text-decoration: none; }
.guest-brand:hover .guest-brand__logo {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .guest-brand__logo { transition: none; }
}

.guest-brand__tld {
  font-size: 0.62em;
  opacity: 0.8;
  letter-spacing: 0.04em;
}

@media (max-width: 959px) {
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  /* Het paneel wikkelt naar een eigen regel onder merknaam + knop. */
  .guest-nav-panel {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }
}

@media (max-width: 380px) {
  .guest-brand { font-size: 1rem; gap: 8px; }
  .guest-brand__logo { width: 28px; height: 28px; border-radius: 7px; }
  .guest-nav-toggle { padding: 8px 12px; }
  .guest-nav-toggle__text { display: none; }
}

@media (min-width: 960px) {
  .guest-brand { font-size: 1.25rem; margin-right: 14px; }
  .guest-brand__logo { width: 36px; height: 36px; border-radius: 9px; }
}

/* =========================================================================
   AUTH-PAGINA'S (login, register, wachtwoord vergeten, reset, verificatie)
   -------------------------------------------------------------------------
   login.php en register.php definieerden deze classes in hun eigen <style>;
   forgot_password, reset_password en resend_verification gebruikten ze wel
   maar definieerden ze nergens, waardoor die pagina's vrijwel ongestyled
   waren. Ze staan nu hier, zodat alle auth-schermen identiek zijn.
   Pagina-eigen <style> blokken blijven werken: die staan later in de cascade.
   ========================================================================= */

.auth-wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.auth-card {
  background: #14171a;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  box-shadow: var(--shadow);
}

.auth-card__header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- Formulier ---
   Bewust ENKELE class-selectors (specificiteit 0,1,0). login.php gebruikt
   ".auth-card .form__input" (0,2,0) en register.php een eigen ".form__input"
   dat later in de cascade staat; beide winnen dus nog steeds van deze
   basisregels. Met een ".auth-card"-prefix zou dit bestand juist stiekem de
   padding van het registratieformulier overschrijven. */
.form__row { margin-bottom: 18px; }

.form__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  margin-bottom: 8px;
  font-weight: 600;
}

.input-group { display: block; }

.form__input {
  width: 100%;
  padding: 12px 15px;
  background: #0b0c0d;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form__input:focus {
  border-color: var(--accent-gold);
  outline: none;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

/* Rij met label en kort invoerveld naast elkaar (veiligheidsvraag). */
.form__row--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.form__input--short {
  width: 90px;
  flex: 0 0 auto;
  text-align: center;
}

/* Honeypot blijft altijd verborgen. */
.hp { display: none !important; }

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* --- Meldingen --- */
.alert {
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  border: 1px solid transparent;
}

.alert--error {
  background: rgba(192, 57, 43, 0.14);
  border-color: rgba(192, 57, 43, 0.55);
  color: #ffb4ab;
}

.alert--success {
  background: rgba(46, 125, 50, 0.14);
  border-color: rgba(46, 125, 50, 0.55);
  color: #a5e0a8;
}

/* --- Voetnoot met links --- */
.auth-meta {
  margin-top: 26px;
  text-align: center;
  font-size: 0.85rem;
  color: #666;
}

.auth-meta p { margin: 0 0 8px; }
.auth-meta p:last-child { margin-bottom: 0; }

.auth-meta a {
  color: #888;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.auth-meta a:hover { color: var(--accent-gold); }

@media (max-width: 480px) {
  .auth-card { padding: 22px 18px; }
  .auth-title { font-size: 1.28rem; }
  .auth-card .form__row--inline { gap: 8px; }
}

/* =========================================================================
   GASTENBALK — desktop finetuning
   -------------------------------------------------------------------------
   Drie dingen zaten scheef:
   1. space-between duwde de taalkiezer helemaal naar rechts, los van de nav.
      Dat gaf een los gat tussen REGISTREREN en de taalknop. Nav en taal zijn
      nu één blok rechts, merknaam links.
   2. .nav a had een margin-right van 20px, ook op de laatste link. Daardoor
      stond er rechts altijd 20px extra. Nu een echte flex-gap.
   3. De balk had geen vaste hoogte, waardoor uitlijning toevallig was.
   ========================================================================= */

@media (min-width: 960px) {
  .topbar {
    min-height: 68px;
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    flex-wrap: nowrap;
  }

  /* Ruimte komt van de gap van .topbar, niet van een eigen marge. */
  .guest-brand {
    margin-right: 0;
    flex: 0 0 auto;
    line-height: 1;
  }

  /* Nav en taalkiezer vormen samen één groep aan de rechterkant. */
  .guest-nav-panel {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(10px, 1.2vw, 18px);
    flex-wrap: nowrap;
  }

  .guest-nav-panel .nav {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.1vw, 16px);
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Marges vervangen door de gap hierboven: geen naloop meer rechts. */
  .guest-nav-panel .nav a {
    margin-right: 0;
    line-height: 1;
    white-space: nowrap;
    font-size: clamp(0.72rem, 0.76vw + 0.08rem, 0.8rem);
    letter-spacing: 0.35px;
    font-weight: 700;
  }

  .guest-nav-panel .lang-switch,
  .guest-nav-panel .lang-switch-dropdown,
  .guest-topbar-controls .lang-switch-dropdown {
    flex: 0 0 auto;
    line-height: 1;
  }
}

/* Optische uitlijning van het achtervoegsel: op de basislijn i.p.v. midden. */
.guest-brand__tld {
  position: relative;
  top: -0.02em;
  letter-spacing: 0.02em;
}

/* =========================================================================
   SOCIAL LOGIN ALS HOOFDROUTE
   Google/Discord staan bovenaan als volwaardige knoppen; e-mail + wachtwoord
   zit eronder in een <details> zodat het zonder JavaScript werkt en met het
   toetsenbord bedienbaar blijft.
   ========================================================================= */

.oauth-head {
  text-align: center;
  margin-bottom: 18px;
}

.oauth-head__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.oauth-head__sub {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.oauth-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 0.18s, transform 0.12s;
}

.oauth-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  text-decoration: none;
}

.oauth-btn:active { transform: translateY(0); }

.oauth-btn svg { flex: 0 0 auto; }

.oauth-btn--google {
  background: #fff;
  color: #1f1f1f;
}

.oauth-btn--google:hover { color: #1f1f1f; }

.oauth-btn--discord {
  background: #5865f2;
  color: #fff;
}

.oauth-btn--discord:hover { color: #fff; }

.oauth-btn--microsoft {
  background: #2f2f2f;
  color: #fff;
  border: 1px solid #444;
}

.oauth-btn--microsoft:hover { color: #fff; background: #3a3a3a; }

/* --- Uitklapbaar e-mailformulier --- */
.auth-alt {
  margin-top: 22px;
  border-top: 1px solid var(--border-color);
  padding-top: 18px;
}

.auth-alt__toggle {
  cursor: pointer;
  list-style: none;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 0;
  transition: color 0.2s;
  user-select: none;
}

.auth-alt__toggle::-webkit-details-marker { display: none; }
.auth-alt__toggle:hover { color: var(--accent-gold); }

.auth-alt__toggle::after {
  content: " ▾";
  font-size: 0.9em;
  opacity: 0.75;
}

.auth-alt[open] .auth-alt__toggle::after { content: " ▴"; }

.auth-alt[open] .auth-alt__toggle {
  color: #fff;
  margin-bottom: 14px;
}

.auth-alt__body { padding-top: 4px; }

/* =========================================================================
   RITME EN KOPPEN VAN DE LANDINGSPAGINA
   Elke sectie had zijn eigen marge (85px, 80px, 70px, en twee keer een
   inline 80px) en er liepen twee soorten koppen door elkaar: .section-title
   in 2,5rem hoofdletters naast h2's op een clamp-schaal. Dat is hier
   teruggebracht tot één ritme en één koptypografie:

       kleine gouden bovenkop  ->  witte kop  ->  gedempte omschrijving

   De hoofdletters zitten nu alleen nog in die bovenkop, zodat lange koppen
   ("13 casinospellen en 18 koopbare ondernemingen") leesbaar blijven.
   ========================================================================= */

:root { --section-gap: clamp(56px, 8vw, 92px); }

.guest-content-wrap > section {
  margin: 0 auto var(--section-gap);
}

.guest-content-wrap > section:last-child { margin-bottom: 0; }

.section-title,
.section-intro h2,
.seo-overview__intro h2,
.game-depth h2,
.trust-block h2,
.homepage-faq h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 900;
}

.section-title { text-align: center; }

.section-eyebrow + .section-title,
.section-eyebrow + h2 { margin-top: 0; }

.section-desc {
  margin: 0 auto 34px;
  max-width: 640px;
}

/* Bovenkop staat overal boven de kop, ook in de secties die er eerst geen
   hadden; zo begint elke sectie op dezelfde manier. */
.section-eyebrow { margin: 0 0 10px; }
.guest-content-wrap > section > .section-eyebrow { text-align: center; }

/* Sluit aan bij de kaarten van de andere secties in plaats van een eigen
   inline achtergrond. */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.theme-grid .showcase-img-wrap { height: 140px; }
.theme-grid .showcase-info { padding: 12px; }
.theme-grid .showcase-info h3 { font-size: 0.95rem; }

/* Afsluitende oproep: zelfde koptypografie als de rest. */
.cta-bottom h2 { margin-top: 0; color: var(--accent-gold); }
.cta-bottom p { margin: 0 auto 30px; max-width: 620px; color: #ccc; font-size: 1.08rem; }

/* Seizoensklok in de hero: stond volledig inline. */
.season-timer-hero {
  margin-top: 20px;
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid var(--accent-gold);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Taalkiezer in de voettekst: was tien keer dezelfde inline-stijl. */
.footer-lang-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 26px 0 10px;
}

.footer-lang-switcher__label {
  font-size: 0.78rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-lang:hover { border-color: rgba(212, 175, 55, 0.6); background: rgba(0, 0, 0, 0.6); }
.footer-lang.is-active { border-color: var(--accent-gold); }

.footer-lang__flag { font-size: 1.1rem; line-height: 1; }
.footer-lang__code { font-size: 0.75rem; font-weight: 700; color: #ccc; }
.footer-lang:hover .footer-lang__code { color: #fff; }
.footer-lang.is-active .footer-lang__code { color: var(--accent-gold); }

/* Openingstijden zijn geen link; ze horen wat gedempter dan de rest. */
.footer-col__muted { color: #6d6d6d; }



/* =========================================================
   ULTRA LUXURY ADVANCED EFFECTS (Web3 / Cinematic Style)
   ========================================================= */

/* Animated Gradient Borders */
.luxury-panel {
    position: relative !important;
    background: linear-gradient(180deg, rgba(14,15,18,0.7) 0%, rgba(6,7,8,0.9) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(212,175,55,0.02) !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease !important;
    overflow: visible !important;
}

.luxury-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212,175,55,0.7) 0%, rgba(212,175,55,0.05) 40%, rgba(212,175,55,0.05) 60%, rgba(212,175,55,0.4) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.5s ease, background 0.5s ease;
}

.luxury-panel:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.9), 0 0 80px rgba(212,175,55,0.08) !important;
}

.luxury-panel:hover::before {
    background: linear-gradient(135deg, rgba(212,175,55,0.9) 0%, rgba(212,175,55,0.2) 40%, rgba(212,175,55,0.2) 60%, rgba(212,175,55,0.8) 100%);
}

/* Shimmering Gold Text */


@keyframes shine {
    to { background-position: 200% center; }
}

/* Cinematic Film Grain */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: overlay;
}

/* Glowing Inputs */
.guest-input {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 2px solid rgba(212,175,55,0.3) !important;
    border-radius: 8px !important;
    color: #fff !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8) !important;
    transition: all 0.3s ease !important;
}
.guest-input:focus {
    background: rgba(10,10,10,0.8) !important;
    border-color: rgba(212,175,55,0.8) !important;
    border-bottom: 2px solid #d4af37 !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.2) !important;
    outline: none !important;
    transform: translateY(-1px);
}

/* Button Effects */
.btn--primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #d4af37 0%, #aa8010 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(212,175,55,0.25), inset 0 2px 0 rgba(255,255,255,0.3) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.btn--primary::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg) translateY(100%);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn--primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(212,175,55,0.4), inset 0 2px 0 rgba(255,255,255,0.4) !important;
}
.btn--primary:hover::after {
    transform: rotate(45deg) translateY(-100%);
}

body {
    background-color: #030303 !important;
}

/* CUSTOM SCROLLBARS */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark, #030303) !important; }
::-webkit-scrollbar-thumb { background: var(--border-color, rgba(255,255,255,0.15)) !important; border: 2px solid var(--bg-dark, #030303) !important; border-radius: 10px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold, #d4af37) !important; }
* { scrollbar-width: thin !important; scrollbar-color: var(--border-color, rgba(255,255,255,0.15)) var(--bg-dark, #030303) !important; }



/* Unify Main Titles to use Cinzel for that classic Mafia luxury */
.hero__title, .guide-h1, .party-logo {
    font-family: 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    background: linear-gradient(to right, #d4af37 20%, #ffdf70 40%, #ffdf70 60%, #d4af37 80%) !important;
    background-size: 200% auto !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shine 6s linear infinite !important;
}

/* Ensure any spans inside titles (like "ONLINE MAFIA" on Guest) match the style or complement it */
.hero__title span {
    font-family: 'Segoe UI', system-ui, sans-serif !important; /* Keep the overline modern */
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    font-size: 0.35em !important;
    color: #e0aa3e !important;
    -webkit-text-fill-color: #e0aa3e !important; /* Override the transparent clip for the span */
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Consistent Primary Buttons */
.btn--primary, .btn-primary, .nav-register {
    background: linear-gradient(135deg, #d4af37 0%, #b48a12 100%) !important;
    color: #050505 !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 20px rgba(212,175,55,0.2), inset 0 1px 1px rgba(255,255,255,0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.btn--primary:hover, .btn-primary:hover, .nav-register:hover {
    box-shadow: 0 12px 25px rgba(212,175,55,0.4), inset 0 1px 1px rgba(255,255,255,0.6) !important;
    background: linear-gradient(135deg, #f1c40f 0%, #d4af37 100%) !important;
    color: #000 !important;
}

/* De Play Store-badge heeft een vaste maat: hij is als afbeelding op die
   hoogte ontworpen en mag niet meeschalen met de algemene img-regel.
   Stond eerder als style-attribuut in guest/index.php. */
.play-badge-img {
  width: 165px !important;
  height: 49px !important;
  max-width: none !important;
  display: block;
}