/* Self-hosted Google Fonts — generated by fonts/_extract.js */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/barlow-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/barlow-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   shared.css — PadelConnects gedeelde stijlen
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Eliminate 300ms tap delay + remove default mobile tap highlight */
a, button, [role="button"], input[type="button"], input[type="submit"], select, label[for] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg:       #0A0F1E;
  --bg2:      #0D1428;
  --bg3:      #111827;
  --card:     rgba(255,255,255,0.04);
  --card-hov: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.08);
  /* Achtergrond van de spelersteller in de navbar. Iets lichter dan --card,
     zodat hij als vlak leesbaar is zonder rand. */
  --nav-count-bg: rgba(255,255,255,0.07);
  --orange:   #FF6B00;
  --blue:     #0057A8;
  --blue-lt:  #1E88E5;
  --text:     #FFFFFF;
  --text2:    rgba(255,255,255,0.65);
  --text3:    rgba(255,255,255,0.38);
  --grad:     linear-gradient(135deg, #FF6B00 0%, #0057A8 100%);
  --radius:   14px;
  --green:    #22c55e;
  --red:      #ef4444;
  --yellow:   #f59e0b;
  --t1: #FFD700;
  --t2: #C0C0C0;
  --t3: #CD7F32;
  --t4: #06B6D4;
  --t5: #22C55E;
  --t6: #F97316;
  --t7: #A855F7;
  --t8: #3B82F6;
  --t9: #FB7185;
  --input-bg:  rgba(255,255,255,0.05);
  --input-bdr: rgba(255,255,255,0.12);
  --input-foc: rgba(255,107,0,0.5);
  /* Hoogte van de vaste navbar. Eén bron voor twee dingen die niet uit elkaar
     mogen lopen: .navbar leest hem als hoogte, en elke pagina die eronder
     begint rekent ermee. Stond die hoogte los in beide, dan schoof een pagina
     onder de balk zodra de balk van maat veranderde. Niet thema-afhankelijk,
     dus alleen hier en in de mobiele breakpoint. */
  --nav-h: 70px;
  /* Semantic tokens (dark defaults) */
  --navbar-bg:    rgba(10,15,30,0.92);
  --dropdown-bg:  #1a2540;
  --panel-bg:     rgba(255,255,255,0.04);
  --modal-bg:     #0D1428;
  --modal-overlay: rgba(0,0,0,0.65);
  --toast-bg:     rgba(10,15,30,0.95);
  --shadow:       rgba(0,0,0,0.5);
  --shadow-heavy: rgba(0,0,0,0.6);
  --shadow-card:  0 8px 30px rgba(0,0,0,0.35);
  --option-bg:    #0D1428;
  --fab-label-bg: rgba(10,15,30,0.92);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  /* Podium — voor 1e/2e/3e plaats. Los van de tier-kleuren (--t1..--t3), die
     toevallig dezelfde metalen hebben maar een andere betekenis dragen. */
  --gold:         #FFD700;
  --silver:       #C0C0C0;
  --bronze:       #CD7F32;
}

/* ─── LIGHT MODE ──────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #F5F7FA;
  --bg2:      #FFFFFF;
  --bg3:      #EDF0F4;
  --card:     #FFFFFF;
  --card-hov: #F0F2F5;
  --border:   rgba(0,0,0,0.10);
  --nav-count-bg: rgba(16,24,40,0.05);
  --orange:   #E85D00;
  --text:     #1A2B4A;
  --text2:    rgba(26,43,74,0.65);
  --text3:    rgba(26,43,74,0.45);
  --input-bg:  #FFFFFF;
  --input-bdr: rgba(0,0,0,0.14);
  --input-foc: rgba(232,93,0,0.45);
  --navbar-bg:    rgba(255,255,255,0.92);
  --dropdown-bg:  #FFFFFF;
  --panel-bg:     #FFFFFF;
  --modal-bg:     #FFFFFF;
  --modal-overlay: rgba(0,0,0,0.35);
  --toast-bg:     #FFFFFF;
  --shadow:       rgba(26,43,74,0.10);
  --shadow-heavy: rgba(26,43,74,0.16);
  --shadow-card:  0 2px 12px rgba(26,43,74,0.06);
  --option-bg:    #FFFFFF;
  --fab-label-bg: rgba(255,255,255,0.95);
  /* Podium — donkerder op wit; #FFD700 en #C0C0C0 zijn op een witte
     achtergrond niet te lezen. */
  --gold:         #B07D00;
  --silver:       #7C8493;
  --bronze:       #A25A21;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ─── NAV ─────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: env(safe-area-inset-top) 5% 0;
  height: var(--nav-h); display: flex; align-items: center;
  background: var(--navbar-bg); backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}
.nav-inner {
  width: 100%; max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo {
  display: inline-flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo-icon { height: 32px; width: 32px; border-radius: 6px; }
.nav-links {
  display: flex; gap: 24px;
  margin-left: auto; margin-right: 16px;
}
.nav-link {
  font-size: 14px; font-weight: 500;
  color: var(--text2); text-decoration: none;
  transition: color 0.2s;
  position: relative;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--orange); }
.nav-badge {
  position: absolute; top: -6px; right: -10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #f97316;
  animation: navBadgePulse 2s ease-in-out infinite;
}
@keyframes navBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.nav-avatar {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  text-decoration: none; color: #fff; flex-shrink: 0;
  border: none; cursor: pointer; padding: 0;
}
.nav-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9999px;
  color: var(--text2); text-decoration: none;
  background: transparent; border: none; padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.nav-back svg { flex-shrink: 0; }
.nav-back:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.nav-cta {
  padding: 9px 20px; border-radius: 8px;
  background: var(--grad); color: #fff; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.88; }
.nav-auth { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.nav-auth-link { padding: 9px 20px; border-radius: 8px; background: var(--grad); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-auth-cta { font-size: 14px; font-weight: 500; color: var(--text2); text-decoration: none; transition: color 0.2s; }
.nav-auth-cta:hover { color: var(--text); }
.nav-avatar-wrap { position: relative; display: none; }
.nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 6px; min-width: 168px; z-index: 300; box-shadow: 0 8px 30px var(--shadow); }
.nav-dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; color: var(--text2); text-decoration: none; font-size: 14px; font-family: 'Inter', sans-serif; }
.nav-dropdown-item:hover { background: rgba(255,255,255,0.06); }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.nav-dropdown-logout { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; color: #f87171; font-size: 14px; font-family: 'Inter', sans-serif; background: transparent; border: none; cursor: pointer; }
.nav-dropdown-logout:hover { background: rgba(239,68,68,0.08); }

/* ─── MOBILE HEADER ACTIONS ───────────────────────────── */
.nav-mobile-auth, .nav-mobile-user {
  display: none; align-items: center; gap: 8px; margin-left: auto;
}
.nav-mobile-cta {
  padding: 7px 14px; border-radius: 8px;
  background: var(--grad); color: #fff;
  font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: opacity 0.2s;
}
.nav-mobile-cta:hover { opacity: 0.88; }
.nav-mobile-login {
  font-size: 13px; font-weight: 500;
  color: var(--text2); text-decoration: none;
  white-space: nowrap; transition: color 0.2s;
}
.nav-mobile-login:hover { color: var(--text); }
/* ─── FLOW BACK LINK (register/login) ────────────────── */

/* Left cluster next to the logo: language picker + theme toggle. */
.nav-left-actions {
  display: flex; align-items: center; gap: 8px; margin-left: 16px;
}
/* This cluster sits in the left-center, where a left- OR right-aligned dropdown
   clips on narrow screens (the wide logo shifts the trigger around). Centre the
   dropdown under the flag instead so "Nederlands"/"English" always fit on every
   width. margin-left (not transform) does the centring so it doesn't fight the
   open/close scale animation. Scoped: the logged-out picker (far right) keeps
   its default right-aligned dropdown. */
.nav-left-actions .lang-picker-dd {
  left: 50%; right: auto; margin-left: -75px; transform-origin: top center;
}
/* Right cluster pushed to the far end: hamburger (+ future bell). */
.nav-user-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.nav-theme-toggle {
  background: none; border: none;
  color: var(--text2); cursor: pointer; padding: 6px; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color 0.15s;
}
.nav-theme-toggle:hover { color: var(--text); }
.nav-theme-toggle svg { display: block; }
.nav-theme-icon-sun { display: none; }
.nav-hamburger {
  background: none; border: none;
  color: var(--text); cursor: pointer; padding: 8px; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger svg { display: block; }
/* Notifications bell + unread badge */
.nav-bell {
  position: relative; background: none; border: none;
  color: var(--text); cursor: pointer; padding: 6px; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color 0.15s;
}
.nav-bell:hover { color: var(--orange); }
.nav-bell svg { display: block; }
.nav-bell-badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 13px;
  text-align: center; border: 2px solid var(--navbar-bg);
}
.nav-bell-badge[hidden] { display: none; }


/* ─── NAVIGATION PANEL (universal — mobile + desktop) ── */
.nav-panel-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 250ms ease;
}
.nav-panel-overlay.open { opacity: 1; pointer-events: auto; }
.nav-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(320px, 75vw); max-width: 320px;
  background: var(--bg2); backdrop-filter: blur(20px);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 0;   /* Uitloggen regelt zijn eigen safe-area */
}
.nav-panel-overlay.open .nav-panel { transform: translateX(0); }
.nav-panel[role="dialog"] { outline: none; }

/* Menu-opmaak teruggezet naar hoe hij vóór de verbouwing van 2026-08-27 was.
   Romain vond de nieuwe stijl niet mooi; de oude rijhoogte, typografie en
   kleuren zijn hersteld. Wat NIET terugkomt: de taalkeuze (die staat nu in
   Instellingen, met de vlagknop in de balk als snelle wissel) en de naam
   "Regions Unlocked" (heet nu Regio's). */

/* Panel header */
.nav-panel-header {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 4px 20px 16px; border-bottom: 1px solid var(--border);
}
.nav-panel-close {
  width: 32px; height: 32px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text2); cursor: pointer;
  border-radius: 8px; transition: background 0.15s;
}
.nav-panel-close:hover { background: rgba(255,255,255,0.06); }
.nav-panel-close svg { display: block; }

/* Nav links */
.nav-panel-links {
  display: flex; flex-direction: column; padding: 4px 12px;
}
.nav-panel-link {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: 44px; border-radius: 8px;
  color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 400;
  transition: background 0.15s, transform 0.1s;
  position: relative;
}
.nav-panel-link:hover { background: rgba(255,255,255,0.06); }
.nav-panel-link:active { transform: scale(0.97); }
.nav-panel-link.active { color: var(--orange); font-weight: 600; }
.nav-panel-link.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 20px; border-radius: 2px; background: var(--orange);
}

/* Sections */
.nav-panel-section { padding: 0 20px; }
.nav-panel-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text3); padding: 20px 0 8px;
}

/* Preferences row */
.nav-panel-pref {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 14px; color: var(--text);
}
.nav-panel-pref-label { display: flex; align-items: center; gap: 8px; }
.nav-panel-pref-label svg { width: 16px; height: 16px; color: var(--text2); }
.nav-panel-theme-row {
  padding: 0 12px; height: 44px; border-radius: 8px;
  font-size: 15px; margin-top: 4px;
}

/* Theme toggle switch */
.theme-switch {
  position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: var(--border); border: none; cursor: pointer;
  transition: background 0.2s; padding: 0; flex-shrink: 0;
}
.theme-switch.on { background: var(--orange); }
.theme-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.theme-switch.on::after { transform: translateX(20px); }

/* Inline lang picker in panel */
.nav-panel-lang-options { display: none; flex-direction: column; gap: 2px; padding: 4px 0; }
.nav-panel-lang-options.open { display: flex; }
.nav-panel-lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px; border: none;
  background: transparent; color: var(--text); font-size: 14px;
  cursor: pointer; width: 100%; text-align: left; transition: background 0.12s;
}
.nav-panel-lang-opt:hover { background: rgba(255,255,255,0.06); }
.nav-panel-lang-check { margin-left: auto; color: var(--orange); font-size: 14px; }

/* Thin divider between the three menu groups (app / over / account).
   var(--border) already adapts per theme (light + dark). */
.nav-panel-divider {
  height: 1px; background: var(--border);
  margin: 4px 12px;
}
/* Pins the divider + the account group below it to the bottom of the panel
   (free space collapses above this divider). */
.nav-panel-divider--account { margin-top: auto; }

/* Collapsible "Meer info" group (group 2) — same compact spacing as the
   other groups; subitems are indented to read as children of the toggle. */
.nav-panel-more { display: flex; flex-direction: column; padding: 4px 12px; }
.nav-panel-more-toggle {
  justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 15px;
  color: var(--text); text-align: left;
}
.nav-panel-more-chev { flex-shrink: 0; color: var(--text2); transition: transform 200ms ease; }
.nav-panel-more.open .nav-panel-more-chev { transform: rotate(180deg); }
/* grid-rows 0fr→1fr animates the height smoothly without a hardcoded max. */
.nav-panel-more-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms ease; }
.nav-panel-more.open .nav-panel-more-items { grid-template-rows: 1fr; }
.nav-panel-more-inner { overflow: hidden; display: flex; flex-direction: column; }
.nav-panel-subitem { padding-left: 28px; }

/* Account section — flows after group 2 (no bottom-pinning); the dividers
   above provide the separation. Items match the standard link style. */
.nav-panel-account {
  padding: 4px 12px;
}
/* Account actions read as secondary: dampened text vs primary nav. The
   active item keeps its orange accent; logout keeps its own colour. */
.nav-panel-account .nav-panel-link:not(.active) { color: var(--text2); }
.nav-panel-logout {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: 44px; border-radius: 8px;
  background: none; border: none; width: 100%;
  color: #f87171; font-size: 15px; font-weight: 400;
  font-family: 'Inter', sans-serif; cursor: pointer;
  transition: background 0.15s;
}
.nav-panel-logout:hover { background: rgba(239,68,68,0.06); }

/* Entrance fade — triggered on panel open (overlay gets .open class).
   Uses a transition (not a keyframe animation) so it fires deterministically
   each time the overlay opens, regardless of when the underlying <a> elements
   were inserted (admin links arrive async via pc:auth-ready, so a creation-
   time animation made them appear out of sync with the static ones). */
.nav-panel-link, .nav-panel-pref, .nav-panel-lang-opt {
  opacity: 0; transform: translateX(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.nav-panel-overlay.open .nav-panel-link,
.nav-panel-overlay.open .nav-panel-pref,
.nav-panel-overlay.open .nav-panel-lang-opt {
  opacity: 1; transform: none;
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .nav-links, .lang-toggle, .theme-toggle, .nav-auth { display: none !important; }
  .nav-mobile-auth { display: flex; }
  .nav-logo { font-size: 22px; }
}
@media (min-width: 769px) {
  .nav-dropdown-mobile-only { display: none !important; }
  .nav-mobile-auth, .nav-mobile-user { display: none !important; }
  .nav-hamburger { display: block; }
  .nav-panel { width: 380px; }
}

/* ─── LIGHT MODE — NAV PANEL ─────────────────────────── */
[data-theme="light"] .nav-panel-link:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .nav-panel-close:hover { background: rgba(0,0,0,0.04); }
/* Zelfde scrim in beide thema's: 0.4. Licht stond op 0.3 en dat gaf te weinig
   scheiding met de pagina eronder -- blur alleen is niet genoeg. */
[data-theme="light"] .nav-panel-overlay { background: rgba(0,0,0,0.4); }
[data-theme="light"] .nav-panel-lang-opt:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .nav-panel-logout:hover { background: var(--card-hov); }

/* ─── NOTIFICATIONS PANEL (bell dropdown) ──────────────────── */
.notif-panel-overlay {
  position: fixed; inset: 0; z-index: 210;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.notif-panel-overlay.open { opacity: 1; pointer-events: auto; }
.notif-panel {
  position: fixed; z-index: 211;
  top: calc(64px + env(safe-area-inset-top)); right: 5%;
  width: 380px; max-width: calc(100vw - 32px); max-height: 70vh;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
}
.notif-panel-overlay.open .notif-panel { opacity: 1; transform: translateY(0); }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.notif-panel-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: 0.3px; color: var(--text); flex: 1; min-width: 0;
}
/* Back button — only shown on mobile (full-screen view); desktop closes on outside-click. */
.notif-panel-close {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--text2); padding: 4px; margin: -2px 2px -2px -4px; flex-shrink: 0;
  align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.notif-mark-all {
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--orange); padding: 4px 6px; border-radius: 6px; transition: background 0.15s;
}
.notif-mark-all:disabled { color: var(--text3); cursor: default; }
.notif-mark-all:not(:disabled):hover { background: rgba(255,107,0,0.08); }
.notif-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--text3) transparent; }
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--text3); border-radius: 3px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 12px 16px; cursor: pointer; position: relative;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left; font-family: 'Inter', sans-serif; transition: background 0.15s;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: rgba(255,255,255,0.04); }
/* Unread: soft orange wash + a small dot in the right gutter. */
.notif-row.unread { background: rgba(255,107,0,0.05); }
.notif-row.unread::after {
  content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}
/* Icon: soft tinted disc, monochrome orange glyph (no solid-orange fill). */
.notif-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); background: rgba(255,107,0,0.15);
}
.notif-avatar svg { width: 19px; height: 19px; }
.notif-content { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-right: 10px; }
.notif-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.notif-body {
  font-size: 13px; line-height: 1.4; color: var(--text2); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-time { font-size: 11px; color: var(--text3); margin-top: 4px; }
/* Read rows: dimmed title (the body is already secondary). */
.notif-row:not(.unread) .notif-title { color: var(--text2); }
.notif-empty { padding: 52px 28px; text-align: center; color: var(--text3); }
.notif-empty svg { width: 36px; height: 36px; margin: 0 auto 14px; display: block; opacity: 0.45; }
.notif-empty-text { font-size: 14px; font-weight: 600; color: var(--text2); }
.notif-empty-sub { font-size: 12.5px; line-height: 1.45; margin-top: 6px; color: var(--text3); }
[data-theme="light"] .notif-row { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .notif-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .notif-row.unread { background: rgba(255,107,0,0.06); }
[data-theme="light"] .notif-avatar { background: rgba(255,107,0,0.12); }
@media (max-width: 600px) {
  /* Full-screen "Meldingen" view: no background to scroll behind (fixes the
     scroll bleed-through), natural full-height scroll, with a back button. */
  .notif-panel {
    top: 0; bottom: 0; left: 0; right: 0; width: auto; max-width: none;
    height: 100%; max-height: none; border-radius: 0; border: none;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
  }
  .notif-panel-close { display: flex; }
  .notif-list { max-height: none; flex: 1; }
  .notif-panel-overlay.open { background: var(--modal-overlay); }
}

/* ─── LANG PICKER (booking.com pattern) ───────────────── */
.lang-picker { position: relative; flex-shrink: 0; }
.lang-picker-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border);
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
  padding: 0;
}
.lang-picker-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }
.lang-picker-btn .fi { width: 16px; height: 12px; border-radius: 2px; }
.lang-picker-dd {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 300;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; min-width: 150px;
  box-shadow: 0 8px 30px var(--shadow);
  opacity: 0; transform: scale(0.95); pointer-events: none;
  transition: opacity 150ms, transform 150ms;
  transform-origin: top right;
}
.lang-picker-dd.open { opacity: 1; transform: scale(1); pointer-events: auto; }
.lang-picker-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border-radius: 6px; border: none;
  background: transparent; color: var(--text2);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background 0.12s;
}
.lang-picker-opt:hover { background: rgba(255,255,255,0.06); }
.lang-picker-opt .fi { width: 18px; height: 13px; border-radius: 2px; flex-shrink: 0; }
.lang-picker-opt-check { margin-left: auto; color: var(--orange); font-size: 14px; }
/* ── Spelersteller in de navbar ──────────────────────────────
   Staat rechts van het thema-icoon en toont het TOTAAL aantal geregistreerde
   spelers. Bewust een personen-icoon en geen pulserend stipje: dat laatste
   leest als "zoveel mensen zijn nu online", en dat is iets heel anders.

   Start verborgen (hidden-attribuut) en wordt door nav.js getoond zodra er een
   getal is -- liever geen teller dan "0 spelers" als het endpoint stil faalt. */
.nav-count {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 10px; border-radius: 999px;
  background: var(--nav-count-bg);
  font-family: 'Inter', sans-serif; line-height: 1;
  white-space: nowrap; user-select: none;
}
.nav-count[hidden] { display: none; }
.nav-count-ico { flex-shrink: 0; color: var(--text3); }

/* Tabulaire cijfers: anders verspringt de breedte van de hele balk zodra het
   getal van 2799 naar 2800 gaat. */
.nav-count-n {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
}
.nav-count-lbl { font-size: 12px; font-weight: 500; color: var(--text3); }

/* Tweede helft van de pil: hoeveel spelers er in het laatste uur actief waren.
   Groen bolletje met een zachte gloed -- dat leest als "nu bezig", en dat is
   hier wél de juiste boodschap (bij het ledenaantal was het misleidend). */
.nav-count-sep {
  width: 1px; height: 14px; flex-shrink: 0;
  background: var(--border); margin: 0 2px;
}
.nav-count-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}
.nav-count-online {
  font-size: 13px; font-weight: 600; color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.nav-count-sep[hidden], .nav-count-dot[hidden], .nav-count-online[hidden] { display: none; }

/* Mobiel: het woord "spelers" gaat eruit, icoon en getal blijven. Dat zegt
   genoeg en het houdt de balk rustig naast logo, bel en hamburger. */
/* Kort oplichten wanneer er iemand bij komt. Geen animatie op het getal zelf:
   dat zou de balkbreedte laten springen. */
.nav-count--nieuw { animation: nav-count-op 1.6s ease-out; }
@keyframes nav-count-op {
  0%   { background: rgba(242,108,36,0.28); }
  100% { background: var(--nav-count-bg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-count--nieuw { animation: none; }
}

@media (max-width: 700px) {
  .nav-count { height: 28px; padding: 0 9px 0 8px; gap: 5px; }
  .nav-count-lbl { display: none; }
  .nav-count-n { font-size: 13px; }
}

.lang-picker--panel { position: static; }
/* Het ronde vlagknopje hoort bij de navbar, niet bij het paneel: daar is de
   lijst al zichtbaar, dus een knop om hem te openen is dubbelop. */
.lang-picker--panel .lang-picker-btn { display: none; }
.lang-picker--panel .lang-picker-dd {
  position: static; opacity: 1; transform: none; pointer-events: auto;
  box-shadow: none; border: 0; margin-top: 0; padding: 0;
  min-width: 0; background: transparent; border-radius: 0;
}
.lang-picker--panel .lang-picker-opt {
  height: 40px; padding: 0 12px; border-radius: 8px;
  font-size: 15px; font-weight: 400; color: var(--text);
}
[data-theme="light"] .lang-picker-btn { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .lang-picker-btn:hover { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.03); }
[data-theme="light"] .lang-picker-opt:hover { background: rgba(0,0,0,0.04); }

/* ─── FLAG ICONS (cross-platform, no emoji) ──────────── */
.fi { display: inline-block; width: 1.1em; height: 0.8em; vertical-align: -0.05em; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 2px; }
.fi-nl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='2' fill='%23AE1C28'/%3E%3Crect y='2' width='9' height='2' fill='%23FFF'/%3E%3Crect y='4' width='9' height='2' fill='%2321468B'/%3E%3C/svg%3E"); }
.fi-be { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='3' height='6' fill='%23000'/%3E%3Crect x='3' width='3' height='6' fill='%23FAE042'/%3E%3Crect x='6' width='3' height='6' fill='%23ED2939'/%3E%3C/svg%3E"); }
.fi-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23FFF' stroke-width='6'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23C8102E' stroke-width='4' clip-path='polygon(30 15,60 30,60 0)' /%3E%3Cpath d='M0 0l60 30' stroke='%23C8102E' stroke-width='2'/%3E%3Cpath d='M60 0L0 30' stroke='%23C8102E' stroke-width='2'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23FFF' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.fi-lg { width: 1.6em; height: 1.15em; border-radius: 3px; }

/* ─── CUSTOM SELECT DROPDOWN ─────────────────────────── */
.cs-wrap { position: relative; }
.cs-trigger {
  width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 13px 40px 13px 16px; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 15px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.cs-trigger.placeholder { color: var(--text3); }
.cs-wrap.open .cs-trigger {
  border-radius: 10px 10px 0 0;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}
.cs-dropdown {
  position: absolute; z-index: 200; left: 0; right: 0;
  background: var(--dropdown-bg); border: 1px solid var(--orange); border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 200px; overflow-y: auto; display: none;
}
.cs-wrap.open .cs-dropdown { display: block; }
.cs-item {
  padding: 10px 16px; cursor: pointer; font-size: 14px;
  color: var(--text); display: flex; justify-content: space-between;
  align-items: center; gap: 8px; transition: background 0.12s;
}
.cs-item:hover { background: rgba(255,255,255,0.06); }
.cs-item.selected { color: var(--orange); }
.cs-group-label {
  padding: 8px 16px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; color: var(--text3); text-transform: uppercase;
}
.cs-search {
  width: 100%; background: rgba(255,255,255,0.05); border: none; border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 16px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px; outline: none;
}
.cs-search::placeholder { color: var(--text3); }
.cs-empty { padding: 10px 16px; font-size: 13px; color: var(--text3); font-style: italic; }
.cs-dropdown::-webkit-scrollbar { width: 4px; }
.cs-dropdown::-webkit-scrollbar-track { background: transparent; }
.cs-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ─── TOAST ───────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 300; background: var(--toast-bg);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 12px; padding: 14px 22px;
  font-size: 14px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 30px var(--shadow);
  transition: transform 0.35s, opacity 0.35s;
  opacity: 0; white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-icon { font-size: 20px; }

/* ─── BG ORBS (decorative blurred circles) ────────────── */
.bg-orb {
  position: fixed; border-radius: 50%;
  filter: blur(100px); pointer-events: none; z-index: 0;
}
.bg-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
  top: -120px; right: -120px;
}
.bg-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,87,168,0.07) 0%, transparent 70%);
  bottom: -80px; left: -80px;
}

/* ─── PAGE / FORM HEADER ──────────────────────────────── */
.page-eyebrow, .form-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 3px; color: var(--orange);
  text-transform: uppercase; margin-bottom: 10px;
}
.page-title, .form-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px; font-weight: 900;
  line-height: 1.05; margin-bottom: 6px;
}
.page-sub, .form-sub {
  font-size: 15px; color: var(--text2);
  line-height: 1.5; margin-bottom: 32px;
}

/* ─── FORM CARD ───────────────────────────────────────── */
.form-card {
  width: 100%; max-width: 440px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 22px; padding: 42px 40px 36px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}

/* ─── FORM FIELDS ─────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text2); margin-bottom: 7px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--input-bdr);
  border-radius: 10px; padding: 13px 16px; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 15px; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: rgba(255,107,0,0.55); background: rgba(255,255,255,0.07);
}

/* ─── FORM ERROR ──────────────────────────────────────── */
.form-error {
  display: none; background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 10px; padding: 11px 14px;
  font-size: 13px; color: #f87171;
  margin-bottom: 18px; line-height: 1.45;
}
.form-error.visible { display: block; }

/* ─── SUBMIT BUTTON ───────────────────────────────────── */
.btn-submit {
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  background: var(--grad); color: #fff;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.5px; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-submit:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── RATING-PER-TIER DISPLAY (match cards) ─────────────── */
/* Color blijft inline omdat 't dynamisch is per tier (var(--tN)) */
.rating-tier { font-weight: 600; }
.rating-sep { opacity: 0.4; margin: 0 2px; }

/* ─── TAP FEEDBACK (all platforms) ─────────────────────── */
button:active, .toggle-btn:active, .pos-chip:active, .level-chip:active,
.tier-pill:active, .pref-btn:active, .dur-chip:active, .time-chip:active,
.tog-btn:active, .country-btn:active, .lang-btn:active,
.nav-dropdown-item:active, .nav-dropdown-logout:active,
.btn-primary:active, .btn-ghost:active, .btn-submit:active,
.btn-confirm:active, .btn-send:active,
.club-action-btn:active, .woon-save:active, .avail-item:active,
.poule-option:active, .reason-chip:active {
  opacity: 0.75;
  transform: scale(0.97);
  transition: opacity 0.05s, transform 0.05s;
}

/* ─── GUEST POLICY TAG ───────────────────────────────── */
.guest-policy { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; white-space:nowrap; }
.guest-club-only { color:#fbbf24; }
.guest-open { color:#4ade80; }

/* ─── FIREFOX SCROLLBAR ───────────────────────────────── */
.gem-list, .tier-legend { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* ─── THEME TOGGLE ───────────────────────────────────── */
.theme-toggle {
  width: 34px; height: 34px; border: none; border-radius: 8px;
  background: transparent; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: color 0.2s;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ─── LIGHT MODE OVERRIDES ───────────────────────────── */
/* Navbar */
[data-theme="light"] .lang-toggle { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .lang-btn.active { background: rgba(0,0,0,0.08); }
[data-theme="light"] .navbar { box-shadow: 0 1px 3px rgba(26,43,74,0.08); }
[data-theme="light"] .nav-dropdown { box-shadow: 0 8px 30px rgba(26,43,74,0.14); }
[data-theme="light"] .nav-dropdown-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .nav-dropdown-logout:hover { background: rgba(239,68,68,0.06); }
[data-theme="light"] .nav-back:hover { background: rgba(0,0,0,0.05); }
/* Orbs */
[data-theme="light"] .bg-orb { opacity: 0.35; }
/* Cards & form-card: solid white with subtle navy-tinted shadow */
[data-theme="light"] .form-card {
  backdrop-filter: none; border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(26,43,74,0.08), 0 1px 3px rgba(0,0,0,0.04);
}
/* Custom-select */
[data-theme="light"] .cs-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .cs-search { background: rgba(0,0,0,0.03); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .cs-trigger {
  background: #FFFFFF; border-color: rgba(0,0,0,0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='rgba(0,0,0,0.35)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
[data-theme="light"] .cs-dropdown { box-shadow: 0 8px 24px rgba(26,43,74,0.12); }
/* Inputs */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea { box-shadow: 0 1px 3px rgba(26,43,74,0.06); }
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus { background: #FFFFFF; }
/* Toast: solid white with shadow */
[data-theme="light"] .toast { box-shadow: 0 4px 20px rgba(26,43,74,0.12); }
/* Scrollbars */
[data-theme="light"] .gem-list,
[data-theme="light"] .tier-legend { scrollbar-color: rgba(0,0,0,0.15) transparent; }
[data-theme="light"] .cs-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ─── MATCH CARD (shared base) ────────────────────────────── */
.match-card {
  position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.match-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.match-card.full { opacity: 0.55; }
.match-card.full:hover { opacity: 0.85; }
.match-card.out-of-range { opacity: 0.55; }
.match-card.out-of-range:hover { transform: none; box-shadow: none; }
.match-card.status-joined  { background: rgba(34,197,94,0.03); }
.match-card__badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 6px; white-space: nowrap;
}
.match-card__badge--joined { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.25); }
.match-card__badge--open   { background: rgba(30,136,229,0.12); color: var(--blue-lt); border: 1px solid rgba(30,136,229,0.25); }
.match-card__badge--club   { background: rgba(255,107,0,0.10); color: var(--orange); border: 1px solid rgba(255,107,0,0.25); }
.match-card__header { padding: 16px 16px 10px; display: flex; align-items: center; gap: 10px; }
.match-card__avatar {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.match-card__avatar.clickable { cursor: pointer; }
.match-card__org { flex: 1; min-width: 0; }
.match-card__org-name { font-size: 15px; font-weight: 600; }
.match-card__meta {
  padding: 0 16px 10px; display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--text2);
}
.match-card__meta svg { width: 14px; height: 14px; stroke: var(--text3); flex-shrink: 0; }
.match-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.match-card__meta-sep { color: var(--text3); font-size: 10px; }
.match-card__meta-env { color: var(--text3); }
.match-card__tiers {
  padding: 0 16px 10px; display: flex; align-items: center; gap: 8px; font-size: 12px;
}
.match-card__tiers-label { color: var(--text3); font-weight: 500; margin-right: 2px; }
.match-card__tier-dot { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.match-card__tier-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.match-card__status { padding: 0 16px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.match-card__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
.match-card__pill svg { width: 13px; height: 13px; }
.match-card__pill--booked { background: rgba(34,197,94,0.10); color: var(--green); border: 1px solid rgba(34,197,94,0.20); }
.match-card__pill--open   { background: rgba(30,136,229,0.10); color: var(--blue-lt); border: 1px solid rgba(30,136,229,0.20); }
.match-card__pill--club   { background: rgba(255,107,0,0.08); color: var(--orange); border: 1px solid rgba(255,107,0,0.20); }
/* Speelvorm (gemengd / alleen dames / alleen heren) — paars, zelfde kleur als
   de speelvorm-pil in de matchfeed, zodat het op beide plekken hetzelfde leest. */
.match-card__pill--vorm   { background: rgba(168,85,247,0.10); color: #c084fc; border: 1px solid rgba(168,85,247,0.22); }
.match-card__divider { height: 1px; background: var(--border); margin: 0 16px; }
.match-players { padding: 12px 16px; }
.match-players__header {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: var(--text3);
  text-transform: uppercase; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.match-players__full-badge {
  background: rgba(34,197,94,0.12); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.25);
  padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;
}
.match-players__grid { display: flex; gap: 6px; }
.match-players__slot {
  flex: 1; height: 48px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative;
}
.match-players__slot--empty { border: 2px dashed rgba(255,255,255,0.12); color: var(--text3); font-size: 18px; }
.match-players__slot--empty.clickable { cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.match-players__slot--empty.clickable:hover { border-color: rgba(255,107,0,0.45); background: rgba(255,107,0,0.06); color: var(--orange); }
.match-players__initials { font-size: 13px; font-weight: 700; color: #fff; }
.match-players__detail   { font-size: 9px; color: rgba(255,255,255,0.7); font-weight: 500; }
.match-players__compat { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text3); }
.match-players__compat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.match-players__compat-dot--good { background: var(--green); box-shadow: 0 0 5px var(--green); }
.match-players__compat-dot--ok   { background: var(--orange); box-shadow: 0 0 5px var(--orange); }
.match-players__compat-dot--open { background: var(--text3); }
.match-players--compact .match-players__grid { gap: 12px; }
.match-players--compact .match-players__slot { height: 32px; border-radius: 8px; }
.match-players--compact .match-players__initials { font-size: 11px; }
.match-players--compact .match-players__detail { display: none; }
.match-players__slot--me { box-shadow: inset 0 0 0 2px var(--orange); }
.match-players__you-badge {
  position: absolute; top: -4px; right: -4px;
  font-size: 8px; font-weight: 700; color: #fff;
  background: var(--orange); padding: 1px 4px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.match-card__slots-wrap { position: relative; }
.match-card__slots-wrap.blurred .match-players { filter: blur(3px); pointer-events: none; }
.match-card__slots-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--orange);
  background: rgba(10,15,30,0.4);
}
[data-theme="light"] .match-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .match-card:hover { box-shadow: var(--shadow-card); }
[data-theme="light"] .match-players__slot--empty { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .match-players__slot--empty.clickable:hover { border-color: rgba(255,107,0,0.45); background: rgba(255,107,0,0.04); }
[data-theme="light"] .match-card__slots-overlay { background: rgba(255,255,255,0.6); }


/* ─── MOBILE RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .nav-dropdown { right: 0; left: auto; min-width: 200px; max-width: calc(100vw - 24px); }
}
@media (max-width: 600px) {
  html { overflow-x: hidden; }
  .bg-orb { display: none; }
  /* Hoogte komt van --nav-h in de 768px-breakpoint; hier alleen de smallere marge. */
  .navbar { padding: 0 3%; }
  .nav-inner { gap: 6px; }
  .nav-logo { font-size: 20px; flex-shrink: 0; }
  .nav-auth { gap: 6px; }
  .nav-auth-link { padding: 7px 14px; font-size: 13px; }
  .nav-cta { padding: 7px 14px; font-size: 13px; }
  .nav-dropdown { min-width: 180px; }
  .nav-dropdown-item { padding: 12px 14px; font-size: 14px; }
  .nav-dropdown-logout { padding: 12px 14px; font-size: 14px; }
  .toast { white-space: normal; max-width: calc(100vw - 32px); padding: 12px 16px; font-size: 13px; bottom: 16px; }
  .lang-toggle { padding: 2px; flex-shrink: 1; min-width: 0; overflow: hidden; }
  .lang-btn { padding: 3px 5px; font-size: 10px; }
  .nav-back { width: 32px; height: 32px; }
  .theme-toggle { flex-shrink: 0; }
  .page-title, .form-title { font-size: 32px; }
  .form-card { padding: 32px 22px 28px; }
}
@media (max-width: 380px) {
  .navbar { padding: 0 2%; }
  .nav-inner { gap: 4px; }
  .nav-logo { font-size: 17px; }
  .nav-back { width: 30px; height: 30px; }
  .nav-back svg { width: 11px; height: 11px; }
  .lang-btn { padding: 2px 4px; font-size: 9px; }
}

/* ── Geverifieerd-badge (blauw vinkje op avatars / naast naam) ──────────
   Plaats op een avatar met position:relative; standaard rechtsboven-overhangend.
   Varianten: .pc-verified--lg (grote profielavatar), .pc-verified--inline (naast naam). */
.pc-verified {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #1d9bf0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  pointer-events: auto; cursor: help; z-index: 2;
}
.pc-verified svg { width: 9px; height: 9px; display: block; }
.pc-verified.pc-verified--lg { top: -3px; right: -3px; width: 26px; height: 26px; }
.pc-verified.pc-verified--lg svg { width: 15px; height: 15px; }
.pc-verified.pc-verified--inline { position: static; box-shadow: none; vertical-align: middle; margin-left: 6px; width: 20px; height: 20px; }
.pc-verified.pc-verified--inline svg { width: 12px; height: 12px; }