/* ==========================================================================
   THE FLYING DUTCHMEN - SHARED NAVIGATION & HEADER DESIGN SYSTEM
   Central Theme Manager & Universal Navbar across Home, Lobby, Forum, Stats & Apps
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

/* Safe viewport overflow handling for mobile & desktop */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ==========================================================================
   THEME DEFINITIONS & CSS TOKENS
   ========================================================================== */

/* 1. Cyber Arcade (Space Navy & Neon Cyan) - Default Dark Mode */
:root,
:root[data-theme="arcade"],
html[data-theme="arcade"],
html:root[data-theme="arcade"],
:root[data-theme="dark"],
html[data-theme="dark"],
html:root[data-theme="dark"] {
  --color-background: #090d16;
  --color-surface: #131b2e;
  --color-surface-muted: #1e2942;
  --color-surface-alt: #131b2e;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-heading: #22d3ee;
  --color-border: #243452;
  --color-border-strong: #33476e;
  --color-primary: #0891b2;
  --color-primary-strong: #0e7490;
  --color-primary-soft: rgba(6, 182, 212, 0.18);
  --color-primary-muted: rgba(6, 182, 212, 0.35);
  --color-primary-contrast: #ffffff;
  --color-accent: #f43f5e;
  --color-accent-strong: #e11d48;
  --color-accent-soft: rgba(244, 63, 94, 0.18);
  --color-header-bg: rgba(19, 27, 46, 0.92);
  --color-header-text: #22d3ee;
  --sidebar-bg: #131b2e;
  --sidebar-border: #243452;

  --tfd-bg-dark: #090d16;
  --tfd-bg-surface: rgba(19, 27, 46, 0.88);
  --tfd-bg-surface-elevated: rgba(30, 41, 66, 0.95);
  --tfd-border-gold: rgba(6, 182, 212, 0.28);
  --tfd-border-gold-bright: rgba(6, 182, 212, 0.55);
  --tfd-gold-primary: #06b6d4;
  --tfd-gold-light: #67e8f9;
  --tfd-gold-dark: #0891b2;
  --tfd-gold-gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  --tfd-emerald-primary: #0891b2;
  --tfd-emerald-accent: #06b6d4;
  --tfd-emerald-bright: #22d3ee;
  --tfd-text-main: #e2e8f0;
  --tfd-text-secondary: #94a3b8;
  --tfd-text-muted: #64748b;
  --tfd-danger: #ef4444;

  /* Lobby Tokens Bridge */
  --navy-bg: #090d16;
  --navy-dark: #060910;
  --navy-surface: #131b2e;
  --navy-card: rgba(19, 27, 46, 0.88);
  --navy-border: #243452;
  --navy-border-hover: #33476e;
  --navy-border-bright: #06b6d4;
  --gold-primary: #0891b2;
  --gold-light: #22d3ee;
  --gold-dark: #0e7490;
  --gold-gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  --gold-shadow: 0 4px 18px rgba(6, 182, 212, 0.35);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-gold: #22d3ee;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* 2. Cards & Dice (Light Theme) */
:root[data-theme="light"],
html[data-theme="light"],
html:root[data-theme="light"] {
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-surface-alt: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-soft: #94a3b8;
  --color-heading: #1e293b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #4f46e5;
  --color-primary-strong: #4338ca;
  --color-primary-soft: #e0e7ff;
  --color-primary-muted: #c7d2fe;
  --color-primary-contrast: #ffffff;
  --color-accent: #7c3aed;
  --color-accent-strong: #6d28d9;
  --color-accent-soft: #ede9fe;
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-header-text: #1e293b;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e2e8f0;

  --tfd-bg-dark: #f8fafc;
  --tfd-bg-surface: rgba(255, 255, 255, 0.9);
  --tfd-bg-surface-elevated: #ffffff;
  --tfd-border-gold: rgba(79, 70, 229, 0.25);
  --tfd-border-gold-bright: rgba(79, 70, 229, 0.5);
  --tfd-gold-primary: #4f46e5;
  --tfd-gold-light: #6366f1;
  --tfd-gold-dark: #4338ca;
  --tfd-gold-gradient: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  --tfd-emerald-primary: #4f46e5;
  --tfd-emerald-accent: #6366f1;
  --tfd-emerald-bright: #818cf8;
  --tfd-text-main: #0f172a;
  --tfd-text-secondary: #475569;
  --tfd-text-muted: #64748b;
  --tfd-danger: #dc2626;

  /* Lobby Tokens Bridge */
  --navy-bg: #f8fafc;
  --navy-dark: #e2e8f0;
  --navy-surface: #ffffff;
  --navy-card: #ffffff;
  --navy-border: #e2e8f0;
  --navy-border-hover: #cbd5e1;
  --navy-border-bright: #6366f1;
  --gold-primary: #4f46e5;
  --gold-light: #1e293b;
  --gold-dark: #4338ca;
  --gold-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --gold-shadow: 0 4px 18px rgba(99, 102, 241, 0.25);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-gold: #4f46e5;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* 3. Midnight Marauder (Warm Leather & Dark Wood Brown) */
:root[data-theme="midnight"],
html[data-theme="midnight"],
html:root[data-theme="midnight"] {
  --color-background: #140d07;
  --color-surface: #1e140c;
  --color-surface-muted: #2a1d12;
  --color-surface-alt: #1e140c;
  --color-text: #f4ebe1;
  --color-text-muted: #b5a090;
  --color-text-soft: #847061;
  --color-heading: #ffedd5;
  --color-border: #382618;
  --color-border-strong: #503723;
  --color-primary: #d97706;
  --color-primary-strong: #b45309;
  --color-primary-soft: rgba(217, 119, 6, 0.18);
  --color-primary-muted: rgba(217, 119, 6, 0.35);
  --color-primary-contrast: #ffffff;
  --color-accent: #c86414;
  --color-accent-strong: #a04d0c;
  --color-accent-soft: rgba(200, 100, 20, 0.18);
  --color-header-bg: rgba(30, 20, 12, 0.92);
  --color-header-text: #ffedd5;
  --sidebar-bg: #1e140c;
  --sidebar-border: #382618;

  --tfd-bg-dark: #140d07;
  --tfd-bg-surface: rgba(30, 20, 12, 0.88);
  --tfd-bg-surface-elevated: rgba(42, 29, 18, 0.95);
  --tfd-border-gold: rgba(217, 119, 6, 0.28);
  --tfd-border-gold-bright: rgba(217, 119, 6, 0.55);
  --tfd-gold-primary: #d97706;
  --tfd-gold-light: #fde68a;
  --tfd-gold-dark: #b45309;
  --tfd-gold-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --tfd-emerald-primary: #b45309;
  --tfd-emerald-accent: #d97706;
  --tfd-emerald-bright: #f59e0b;
  --tfd-text-main: #f4ebe1;
  --tfd-text-secondary: #b5a090;
  --tfd-text-muted: #847061;
  --tfd-danger: #ef4444;

  /* Lobby Tokens Bridge */
  --navy-bg: #140d07;
  --navy-dark: #0b0704;
  --navy-surface: #1e140c;
  --navy-card: rgba(30, 20, 12, 0.88);
  --navy-border: #382618;
  --navy-border-hover: #503723;
  --navy-border-bright: #d97706;
  --gold-primary: #d97706;
  --gold-light: #fde68a;
  --gold-dark: #b45309;
  --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  --gold-shadow: 0 4px 18px rgba(217, 119, 6, 0.35);
  --text-main: #f4ebe1;
  --text-muted: #b5a090;
  --text-gold: #fbbf24;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f4ebe1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* 4. Casino (Felt Green Backgrounds & Amber Gold) */
:root[data-theme="casino"],
html[data-theme="casino"],
html:root[data-theme="casino"],
:root[data-theme="tabletop"],
html[data-theme="tabletop"],
html:root[data-theme="tabletop"] {
  --color-background: #062c1b;
  --color-surface: #0d3a25;
  --color-surface-muted: #144a30;
  --color-surface-alt: #0d3a25;
  --color-text: #ecfdf5;
  --color-text-muted: #a7f3d0;
  --color-text-soft: #6ee7b7;
  --color-heading: #fbbf24;
  --color-border: #165a38;
  --color-border-strong: #1d7348;
  --color-primary: #10b981;
  --color-primary-strong: #059669;
  --color-primary-soft: rgba(16, 185, 129, 0.18);
  --color-primary-muted: rgba(16, 185, 129, 0.35);
  --color-primary-contrast: #ffffff;
  --color-accent: #f59e0b;
  --color-accent-strong: #d97706;
  --color-accent-soft: rgba(245, 158, 11, 0.18);
  --color-header-bg: rgba(13, 58, 37, 0.92);
  --color-header-text: #fbbf24;
  --sidebar-bg: #0d3a25;
  --sidebar-border: #165a38;

  --tfd-bg-dark: #062c1b;
  --tfd-bg-surface: rgba(13, 58, 37, 0.88);
  --tfd-bg-surface-elevated: rgba(20, 74, 48, 0.95);
  --tfd-border-gold: rgba(251, 191, 36, 0.28);
  --tfd-border-gold-bright: rgba(251, 191, 36, 0.55);
  --tfd-gold-primary: #fbbf24;
  --tfd-gold-light: #fef08a;
  --tfd-gold-dark: #d97706;
  --tfd-gold-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --tfd-emerald-primary: #2d5016;
  --tfd-emerald-accent: #4a7c2c;
  --tfd-emerald-bright: #6b9440;
  --tfd-text-main: #ecfdf5;
  --tfd-text-secondary: #a7f3d0;
  --tfd-text-muted: #6ee7b7;
  --tfd-danger: #ef4444;

  /* Lobby Tokens Bridge */
  --navy-bg: #062c1b;
  --navy-dark: #03180e;
  --navy-surface: #0d3a25;
  --navy-card: rgba(13, 58, 37, 0.9);
  --navy-border: #165a38;
  --navy-border-hover: #1d7348;
  --navy-border-bright: #10b981;
  --gold-primary: #10b981;
  --gold-light: #fbbf24;
  --gold-dark: #059669;
  --gold-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  --gold-shadow: 0 4px 18px rgba(16, 185, 129, 0.3);
  --text-main: #ecfdf5;
  --text-muted: #a7f3d0;
  --text-gold: #fbbf24;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ecfdf5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ==========================================================================
   CLUB THEME OVERRIDES (Account Page Theme Takes Precedence on Stats Pages)
   ========================================================================== */

/* Club Theme: Cyber Arcade */
:root[data-club-theme="arcade"],
html[data-club-theme="arcade"],
html[data-theme][data-club-theme="arcade"],
html:root[data-club-theme="arcade"],
body[data-club-theme="arcade"],
body[data-theme][data-club-theme="arcade"] {
  --color-background: #090d16;
  --color-surface: #131b2e;
  --color-surface-muted: #1e2942;
  --color-surface-alt: #131b2e;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-heading: #22d3ee;
  --color-border: #243452;
  --color-border-strong: #33476e;
  --color-primary: #0891b2;
  --color-primary-strong: #0e7490;
  --color-primary-soft: rgba(6, 182, 212, 0.18);
  --color-primary-muted: rgba(6, 182, 212, 0.35);
  --color-primary-contrast: #ffffff;
  --color-accent: #f43f5e;
  --color-accent-strong: #e11d48;
  --color-accent-soft: rgba(244, 63, 94, 0.18);
  --color-header-bg: rgba(19, 27, 46, 0.92);
  --color-header-text: #22d3ee;
  --sidebar-bg: #131b2e;
  --sidebar-border: #243452;

  --tfd-bg-dark: #090d16;
  --tfd-bg-surface: rgba(19, 27, 46, 0.88);
  --tfd-bg-surface-elevated: rgba(30, 41, 66, 0.95);
  --tfd-border-gold: rgba(6, 182, 212, 0.28);
  --tfd-border-gold-bright: rgba(6, 182, 212, 0.55);
  --tfd-gold-primary: #06b6d4;
  --tfd-gold-light: #67e8f9;
  --tfd-gold-dark: #0891b2;
  --tfd-gold-gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  --tfd-emerald-primary: #0891b2;
  --tfd-emerald-accent: #06b6d4;
  --tfd-emerald-bright: #22d3ee;
  --tfd-text-main: #e2e8f0;
  --tfd-text-secondary: #94a3b8;
  --tfd-text-muted: #64748b;
  --tfd-danger: #ef4444;

  --navy-bg: #090d16;
  --navy-dark: #060910;
  --navy-surface: #131b2e;
  --navy-card: rgba(19, 27, 46, 0.88);
  --navy-border: #243452;
  --navy-border-hover: #33476e;
  --navy-border-bright: #06b6d4;
  --gold-primary: #0891b2;
  --gold-light: #22d3ee;
  --gold-dark: #0e7490;
  --gold-gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  --gold-shadow: 0 4px 18px rgba(6, 182, 212, 0.35);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-gold: #22d3ee;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Club Theme: Cards & Dice (Light Theme) */
:root[data-club-theme="light"],
html[data-club-theme="light"],
html[data-theme][data-club-theme="light"],
html:root[data-club-theme="light"],
body[data-club-theme="light"],
body[data-theme][data-club-theme="light"] {
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-surface-alt: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-soft: #94a3b8;
  --color-heading: #1e293b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #4f46e5;
  --color-primary-strong: #4338ca;
  --color-primary-soft: #e0e7ff;
  --color-primary-muted: #c7d2fe;
  --color-primary-contrast: #ffffff;
  --color-accent: #7c3aed;
  --color-accent-strong: #6d28d9;
  --color-accent-soft: #ede9fe;
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-header-text: #1e293b;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e2e8f0;

  --tfd-bg-dark: #f8fafc;
  --tfd-bg-surface: rgba(255, 255, 255, 0.9);
  --tfd-bg-surface-elevated: #ffffff;
  --tfd-border-gold: rgba(79, 70, 229, 0.25);
  --tfd-border-gold-bright: rgba(79, 70, 229, 0.5);
  --tfd-gold-primary: #4f46e5;
  --tfd-gold-light: #6366f1;
  --tfd-gold-dark: #4338ca;
  --tfd-gold-gradient: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  --tfd-emerald-primary: #4f46e5;
  --tfd-emerald-accent: #6366f1;
  --tfd-emerald-bright: #818cf8;
  --tfd-text-main: #0f172a;
  --tfd-text-secondary: #475569;
  --tfd-text-muted: #64748b;
  --tfd-danger: #dc2626;

  --navy-bg: #f8fafc;
  --navy-dark: #e2e8f0;
  --navy-surface: #ffffff;
  --navy-card: #ffffff;
  --navy-border: #e2e8f0;
  --navy-border-hover: #cbd5e1;
  --navy-border-bright: #6366f1;
  --gold-primary: #4f46e5;
  --gold-light: #1e293b;
  --gold-dark: #4338ca;
  --gold-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --gold-shadow: 0 4px 18px rgba(99, 102, 241, 0.25);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-gold: #4f46e5;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Club Theme: Midnight Marauder */
:root[data-club-theme="midnight"],
html[data-club-theme="midnight"],
html[data-theme][data-club-theme="midnight"],
html:root[data-club-theme="midnight"],
body[data-club-theme="midnight"],
body[data-theme][data-club-theme="midnight"] {
  --color-background: #140d07;
  --color-surface: #1e140c;
  --color-surface-muted: #2a1d12;
  --color-surface-alt: #1e140c;
  --color-text: #f4ebe1;
  --color-text-muted: #b5a090;
  --color-text-soft: #847061;
  --color-heading: #ffedd5;
  --color-border: #382618;
  --color-border-strong: #503723;
  --color-primary: #d97706;
  --color-primary-strong: #b45309;
  --color-primary-soft: rgba(217, 119, 6, 0.18);
  --color-primary-muted: rgba(217, 119, 6, 0.35);
  --color-primary-contrast: #ffffff;
  --color-accent: #c86414;
  --color-accent-strong: #a04d0c;
  --color-accent-soft: rgba(200, 100, 20, 0.18);
  --color-header-bg: rgba(30, 20, 12, 0.92);
  --color-header-text: #ffedd5;
  --sidebar-bg: #1e140c;
  --sidebar-border: #382618;

  --tfd-bg-dark: #140d07;
  --tfd-bg-surface: rgba(30, 20, 12, 0.88);
  --tfd-bg-surface-elevated: rgba(42, 29, 18, 0.95);
  --tfd-border-gold: rgba(217, 119, 6, 0.28);
  --tfd-border-gold-bright: rgba(217, 119, 6, 0.55);
  --tfd-gold-primary: #d97706;
  --tfd-gold-light: #fde68a;
  --tfd-gold-dark: #b45309;
  --tfd-gold-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --tfd-emerald-primary: #b45309;
  --tfd-emerald-accent: #d97706;
  --tfd-emerald-bright: #f59e0b;
  --tfd-text-main: #f4ebe1;
  --tfd-text-secondary: #b5a090;
  --tfd-text-muted: #847061;
  --tfd-danger: #ef4444;

  --navy-bg: #140d07;
  --navy-dark: #0b0704;
  --navy-surface: #1e140c;
  --navy-card: rgba(30, 20, 12, 0.88);
  --navy-border: #382618;
  --navy-border-hover: #503723;
  --navy-border-bright: #d97706;
  --gold-primary: #d97706;
  --gold-light: #fde68a;
  --gold-dark: #b45309;
  --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  --gold-shadow: 0 4px 18px rgba(217, 119, 6, 0.35);
  --text-main: #f4ebe1;
  --text-muted: #b5a090;
  --text-gold: #fbbf24;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f4ebe1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Club Theme: Casino & Tabletop */
:root[data-club-theme="casino"],
html[data-club-theme="casino"],
html[data-theme][data-club-theme="casino"],
html:root[data-club-theme="casino"],
:root[data-club-theme="tabletop"],
html[data-club-theme="tabletop"],
html[data-theme][data-club-theme="tabletop"],
body[data-club-theme="casino"],
body[data-club-theme="tabletop"],
body[data-theme][data-club-theme="casino"],
body[data-theme][data-club-theme="tabletop"] {
  --color-background: #062c1b;
  --color-surface: #0d3a25;
  --color-surface-muted: #144a30;
  --color-surface-alt: #0d3a25;
  --color-text: #ecfdf5;
  --color-text-muted: #a7f3d0;
  --color-text-soft: #6ee7b7;
  --color-heading: #fbbf24;
  --color-border: #165a38;
  --color-border-strong: #1d7348;
  --color-primary: #10b981;
  --color-primary-strong: #059669;
  --color-primary-soft: rgba(16, 185, 129, 0.18);
  --color-primary-muted: rgba(16, 185, 129, 0.35);
  --color-primary-contrast: #ffffff;
  --color-accent: #f59e0b;
  --color-accent-strong: #d97706;
  --color-accent-soft: rgba(245, 158, 11, 0.18);
  --color-header-bg: rgba(13, 58, 37, 0.92);
  --color-header-text: #fbbf24;
  --sidebar-bg: #0d3a25;
  --sidebar-border: #165a38;

  --tfd-bg-dark: #062c1b;
  --tfd-bg-surface: rgba(13, 58, 37, 0.88);
  --tfd-bg-surface-elevated: rgba(20, 74, 48, 0.95);
  --tfd-border-gold: rgba(251, 191, 36, 0.28);
  --tfd-border-gold-bright: rgba(251, 191, 36, 0.55);
  --tfd-gold-primary: #fbbf24;
  --tfd-gold-light: #fef08a;
  --tfd-gold-dark: #d97706;
  --tfd-gold-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --tfd-emerald-primary: #2d5016;
  --tfd-emerald-accent: #4a7c2c;
  --tfd-emerald-bright: #6b9440;
  --tfd-text-main: #ecfdf5;
  --tfd-text-secondary: #a7f3d0;
  --tfd-text-muted: #6ee7b7;
  --tfd-danger: #ef4444;

  --navy-bg: #062c1b;
  --navy-dark: #03180e;
  --navy-surface: #0d3a25;
  --navy-card: rgba(13, 58, 37, 0.9);
  --navy-border: #165a38;
  --navy-border-hover: #1d7348;
  --navy-border-bright: #10b981;
  --gold-primary: #10b981;
  --gold-light: #fbbf24;
  --gold-dark: #059669;
  --gold-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  --gold-shadow: 0 4px 18px rgba(16, 185, 129, 0.3);
  --text-main: #ecfdf5;
  --text-muted: #a7f3d0;
  --text-gold: #fbbf24;

  --select-caret-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ecfdf5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Dedicated Universal Navbar Protections per Theme */
html[data-theme="arcade"] .tfd-navbar,
html[data-theme="arcade"] .tfd-mobile-drawer,
html[data-theme="arcade"] .tfd-theme-dropdown,
html[data-theme="arcade"] .tfd-lang-dropdown,
html[data-theme="dark"] .tfd-navbar,
html[data-theme="dark"] .tfd-mobile-drawer,
html[data-theme="dark"] .tfd-theme-dropdown,
html[data-theme="dark"] .tfd-lang-dropdown {
  background: rgba(19, 27, 46, 0.94) !important;
  border-color: rgba(6, 182, 212, 0.28) !important;
  color: #e2e8f0 !important;
  --tfd-bg-surface: rgba(19, 27, 46, 0.88) !important;
  --tfd-border-gold: rgba(6, 182, 212, 0.28) !important;
  --tfd-gold-light: #67e8f9 !important;
  --color-primary: #06b6d4 !important;
  --color-heading: #22d3ee !important;
  --color-border: #243452 !important;
}

html[data-theme="light"] .tfd-navbar,
html[data-theme="light"] .tfd-mobile-drawer,
html[data-theme="light"] .tfd-theme-dropdown,
html[data-theme="light"] .tfd-lang-dropdown {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(79, 70, 229, 0.25) !important;
  color: #0f172a !important;
  --tfd-bg-surface: rgba(255, 255, 255, 0.92) !important;
  --tfd-border-gold: rgba(79, 70, 229, 0.25) !important;
  --tfd-gold-light: #4f46e5 !important;
  --color-primary: #4f46e5 !important;
  --color-heading: #1e293b !important;
  --color-border: #e2e8f0 !important;
}

html[data-theme="midnight"] .tfd-navbar,
html[data-theme="midnight"] .tfd-mobile-drawer,
html[data-theme="midnight"] .tfd-theme-dropdown,
html[data-theme="midnight"] .tfd-lang-dropdown {
  background: rgba(30, 20, 12, 0.94) !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
  color: #f4ebe1 !important;
  --tfd-bg-surface: rgba(30, 20, 12, 0.88) !important;
  --tfd-border-gold: rgba(217, 119, 6, 0.28) !important;
  --tfd-gold-light: #fde68a !important;
  --color-primary: #d97706 !important;
  --color-heading: #ffedd5 !important;
  --color-border: #382618 !important;
}

html[data-theme="casino"] .tfd-navbar,
html[data-theme="casino"] .tfd-mobile-drawer,
html[data-theme="casino"] .tfd-theme-dropdown,
html[data-theme="casino"] .tfd-lang-dropdown,
html[data-theme="tabletop"] .tfd-navbar,
html[data-theme="tabletop"] .tfd-mobile-drawer,
html[data-theme="tabletop"] .tfd-theme-dropdown,
html[data-theme="tabletop"] .tfd-lang-dropdown {
  background: rgba(13, 58, 37, 0.94) !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
  color: #ecfdf5 !important;
  --tfd-bg-surface: rgba(13, 58, 37, 0.88) !important;
  --tfd-border-gold: rgba(251, 191, 36, 0.28) !important;
  --tfd-gold-light: #fef08a !important;
  --color-primary: #10b981 !important;
  --color-heading: #fbbf24 !important;
  --color-border: #165a38 !important;
}

/* Universal Subdomain Body & Surface Overrides */
html[data-theme] body,
body[data-theme],
html[data-club-theme] body,
body[data-club-theme],
html[data-theme][data-club-theme] body,
body[data-theme][data-club-theme] {
  background-color: var(--color-background, var(--navy-bg)) !important;
  color: var(--color-text, var(--text-main)) !important;
  background-image: 
    radial-gradient(circle at 15% 15%, var(--color-primary-soft) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, var(--color-accent-soft) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 50%, var(--color-background) 100%) !important;
  background-attachment: fixed !important;
}

/* Ensure flow-tabs, cards and inner controls in lobby adapt smoothly */
html[data-theme] .flow-tabs {
  background: var(--color-surface-muted, rgba(16, 30, 48, 0.9)) !important;
  border-color: var(--color-border, var(--navy-border)) !important;
}

html[data-theme] .flow-tab-btn {
  color: var(--color-text-muted, var(--text-muted)) !important;
}

html[data-theme] .flow-tab-btn.active {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  border-color: var(--color-primary) !important;
}

html[data-theme] .game-card {
  background: var(--color-surface, var(--navy-card)) !important;
  border-color: var(--color-border, var(--navy-border)) !important;
}

html[data-theme] .game-card::before {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%) !important;
}

html[data-theme] .player-count-select,
html[data-theme] .mode-option-card,
html[data-theme] .open-tables-container,
html[data-theme] .modal-card,
html[data-theme] .party-card,
html[data-theme] .party-chat-container {
  background: var(--color-surface-muted, rgba(16, 30, 48, 0.85)) !important;
  border-color: var(--color-border, var(--navy-border)) !important;
  color: var(--color-text, var(--text-main)) !important;
}

html[data-theme] .mode-option-card:hover {
  border-color: var(--color-primary, var(--gold-primary)) !important;
  background: var(--color-surface-alt, rgba(22, 40, 64, 0.95)) !important;
}

html[data-theme] .mode-option-card.selected {
  border-color: var(--color-primary, var(--gold-primary)) !important;
  background: var(--color-primary-soft, rgba(212, 175, 55, 0.1)) !important;
}

/* Universal Button Contrast & Consistency System */
html[data-theme] .btn-primary,
html[data-theme] .btn:not(.btn--secondary):not(.btn--subtle):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-outline):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-link):not(.btn-close):not(.tfd-icon-btn):not(.tfd-dropdown-item),
html[data-theme] .tfd-btn-login {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  border-color: var(--color-primary-strong, var(--color-primary)) !important;
}

html[data-theme] .btn-primary:hover,
html[data-theme] .btn:not(.btn--secondary):not(.btn--subtle):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-outline):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-link):not(.btn-close):not(.tfd-icon-btn):not(.tfd-dropdown-item):hover,
html[data-theme] .tfd-btn-login:hover {
  background: var(--color-primary-strong) !important;
  color: var(--color-primary-contrast) !important;
  border-color: var(--color-primary-strong) !important;
}

html[data-theme] .btn-success {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

html[data-theme] .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

html[data-theme] .btn--secondary,
html[data-theme] .btn-secondary {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

html[data-theme] .btn--secondary:hover,
html[data-theme] .btn-secondary:hover {
  background: var(--color-surface-muted) !important;
  color: var(--color-heading) !important;
  border-color: var(--color-border-strong) !important;
}

html[data-theme] .btn--subtle {
  background: var(--color-primary-soft) !important;
  color: var(--color-heading, var(--color-primary)) !important;
  border: 1px solid var(--color-border) !important;
}

html[data-theme] .btn--subtle:hover {
  background: var(--color-surface-muted) !important;
  color: var(--color-heading) !important;
  border-color: var(--color-primary) !important;
}

/* System Default Media Query (When not explicitly set) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not([data-club-theme]) {
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-surface-alt: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-soft: #94a3b8;
    --color-heading: #1e293b;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-primary: #4f46e5;
    --color-primary-strong: #4338ca;
    --color-primary-soft: #e0e7ff;
    --color-primary-muted: #c7d2fe;
    --color-primary-contrast: #ffffff;
    --color-accent: #7c3aed;
    --color-accent-strong: #6d28d9;
    --color-accent-soft: #ede9fe;
    --color-header-bg: rgba(255, 255, 255, 0.92);
    --color-header-text: #1e293b;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e2e8f0;

    --tfd-bg-dark: #f8fafc;
    --tfd-bg-surface: rgba(255, 255, 255, 0.9);
    --tfd-bg-surface-elevated: #ffffff;
    --tfd-border-gold: rgba(79, 70, 229, 0.25);
    --tfd-border-gold-bright: rgba(79, 70, 229, 0.5);
    --tfd-gold-primary: #4f46e5;
    --tfd-gold-light: #6366f1;
    --tfd-gold-dark: #4338ca;
    --tfd-gold-gradient: linear-gradient(135deg, #1e293b 0%, #4338ca 60%, #4f46e5 100%);
    --tfd-emerald-primary: #4f46e5;
    --tfd-emerald-accent: #6366f1;
    --tfd-emerald-bright: #818cf8;
    --tfd-text-main: #0f172a;
    --tfd-text-secondary: #475569;
    --tfd-text-muted: #64748b;
    --tfd-danger: #dc2626;
  }
}

/* Smooth transition when toggling theme */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning header,
html.theme-transitioning aside,
html.theme-transitioning main,
html.theme-transitioning .tfd-navbar,
html.theme-transitioning .card,
html.theme-transitioning .hub-card {
  transition: background-color 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning body * {
    transition: none !important;
  }
}

/* ==========================================================================
   TOP NAVIGATION BAR - SINGLE LINE HEADER (All Devices)
   Appears on scroll up, hides on scroll down
   ========================================================================== */
header#tfd-navbar,
header#tfd-navbar.tfd-navbar,
html body header#tfd-navbar,
html body .tfd-navbar,
:root header#tfd-navbar,
.tfd-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  background: var(--tfd-bg-surface, rgba(8, 17, 8, 0.94));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tfd-border-gold, rgba(212, 175, 55, 0.28));
  padding: 0 0.85rem;
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

header#tfd-navbar.tfd-nav-hidden,
.tfd-navbar.tfd-nav-hidden {
  transform: translateY(-100%) !important;
}

header#tfd-navbar.tfd-nav-scrolled,
.tfd-navbar.tfd-nav-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.tfd-navbar-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Brand Column (Menu Toggle + Brand Logo) */
.tfd-brand-row,
.tfd-brand-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.tfd-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--tfd-text-main, #f8fafc);
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.tfd-brand:hover {
  opacity: 0.95;
  color: var(--tfd-text-main, #f8fafc);
}



.tfd-brand-text {
  background: var(--tfd-gold-gradient, linear-gradient(135deg, #ffffff 0%, #f7df8b 60%, #d4af37 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Responsive Brand Replacement: "The Flying Dutchmen" -> "TFD" on small screens */
.tfd-brand-full {
  display: inline-block;
}
.tfd-brand-short {
  display: none;
}

@media (max-width: 600px) {
  .tfd-brand-full {
    display: none !important;
  }
  .tfd-brand-short {
    display: inline-block !important;
  }
}

/* Desktop Navigation Links */
.tfd-nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.tfd-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-text, #cbd5e1);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tfd-nav-link:hover {
  color: var(--color-heading, #f5d77f);
  background: var(--color-surface-muted, rgba(255, 255, 255, 0.08));
}

.tfd-nav-link.active {
  color: var(--color-primary-contrast, #ffffff) !important;
  background: var(--color-primary, #06b6d4) !important;
  border-color: var(--color-primary, rgba(212, 175, 55, 0.3)) !important;
}

/* Actions Row: Theme, Language, Login/User & Mobile Toggle */
.tfd-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.tfd-actions-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.tfd-actions-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Icon Buttons (Theme & Language) */
.tfd-icon-btn {
  background: var(--color-surface-muted, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
  color: var(--color-text, #cbd5e1);
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 30px;
  white-space: nowrap;
}

.tfd-icon-btn.tfd-icon-only {
  width: 32px;
  height: 30px;
  padding: 0;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}

.tfd-icon-btn:hover {
  background: var(--color-primary-soft, rgba(6, 182, 212, 0.15));
  border-color: var(--color-primary, rgba(6, 182, 212, 0.55));
  color: var(--color-heading, #67e8f9);
}

/* Theme & Language Dropdowns / Drawer Popovers */
.tfd-dropdown-wrapper {
  position: relative !important;
  display: inline-flex;
  z-index: 100000 !important;
}

.tfd-theme-dropdown,
.tfd-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  background: var(--color-surface, #131b2e);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border, rgba(212, 175, 55, 0.35));
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2);
  padding: 0.5rem;
  z-index: 100001 !important;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  transform-origin: top right;
  animation: tfdDropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tfd-lang-dropdown {
  width: 210px;
}

.tfd-theme-dropdown.open,
.tfd-lang-dropdown.open {
  display: flex;
}

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

.tfd-dropdown-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-heading, #f7df8b);
  padding: 0.35rem 0.5rem 0.25rem 0.5rem;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tfd-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text, #f8fafc);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}

.tfd-dropdown-item:hover {
  background: var(--color-surface-muted, rgba(255, 255, 255, 0.08));
  color: var(--color-heading, #ffffff);
  border-color: var(--color-border, rgba(255, 255, 255, 0.1));
}

.tfd-dropdown-item.active {
  background: var(--color-primary, #06b6d4) !important;
  color: var(--color-primary-contrast, #ffffff) !important;
  border-color: var(--color-primary, #06b6d4) !important;
  font-weight: 700;
}

.tfd-dropdown-item.active .bi-check-lg {
  color: var(--color-primary-contrast, #ffffff) !important;
}

.tfd-theme-palette {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.tfd-theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tfd-dropdown-item.active .tfd-theme-dot {
  border-color: rgba(255, 255, 255, 0.8);
}

.tfd-dropdown-divider {
  height: 1px;
  background: var(--color-border, rgba(255, 255, 255, 0.08));
  margin: 0.2rem 0;
}

/* Primary Navigation Action Button (Login) */
.tfd-btn-login {
  background: var(--color-primary, #06b6d4);
  color: var(--color-primary-contrast, #ffffff) !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--color-primary-strong, transparent);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  min-height: 30px;
  white-space: nowrap;
}

.tfd-btn-login:hover {
  background: var(--color-primary-strong, #0891b2);
  color: var(--color-primary-contrast, #ffffff) !important;
  text-decoration: none;
}

/* User Pill Badge */
.tfd-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-surface, rgba(16, 28, 16, 0.85));
  border: 1px solid var(--color-border, rgba(212, 175, 55, 0.28));
  padding: 0.2rem 0.5rem;
  border-radius: 16px;
  font-size: 0.76rem;
  min-height: 30px;
  color: var(--color-text, #f8fafc);
  white-space: nowrap;
}

.tfd-user-role {
  background: var(--color-primary, #06b6d4);
  color: var(--color-primary-contrast, #ffffff);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.08rem 0.3rem;
  border-radius: 3px;
  text-transform: uppercase;
}

.tfd-user-logout {
  background: transparent;
  border: none;
  color: var(--tfd-danger, #ef4444);
  padding: 0 0 0 2px;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.tfd-user-logout:hover {
  opacity: 0.8;
  color: #f87171;
}

/* Mobile Toggle Hamburger Button */
.tfd-mobile-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--tfd-border-gold, rgba(212, 175, 55, 0.28));
  color: var(--tfd-gold-primary, #d4af37);
  width: 32px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tfd-mobile-toggle:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--tfd-gold-light, #f5d77f);
}

/* Mobile Drawer Overlay */
.tfd-mobile-drawer {
  display: none;
  position: fixed !important;
  top: 48px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--color-background, #090d16);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 99998 !important;
  padding: 1rem 0.85rem;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  border-top: 1px solid var(--color-border, rgba(212, 175, 55, 0.28));
}

.tfd-mobile-drawer.open {
  display: flex;
  animation: drawerFadeIn 0.2s ease-out;
}

@keyframes drawerFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tfd-mobile-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-text, #f8fafc);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--color-surface-muted, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  transition: all 0.2s ease;
}

.tfd-mobile-link:hover {
  background: var(--color-surface-alt, rgba(255, 255, 255, 0.08));
  border-color: var(--color-primary, #06b6d4);
  color: var(--color-heading, #f5d77f);
}

.tfd-mobile-link.active {
  background: var(--color-primary, #06b6d4) !important;
  border-color: var(--color-primary, #06b6d4) !important;
  color: var(--color-primary-contrast, #ffffff) !important;
}

.tfd-mobile-link.active i {
  color: var(--color-primary-contrast, #ffffff) !important;
}

/* ==========================================================================
   DESKTOP EXPANSION (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .tfd-navbar {
    padding: 0 1.25rem;
    height: 48px;
  }

  .tfd-navbar-inner {
    gap: 0.85rem;
  }

  .tfd-actions-row {
    gap: 0.5rem;
  }

  .tfd-nav-links {
    display: flex;
  }

  .tfd-mobile-toggle {
    display: none;
  }

  .tfd-mobile-drawer {
    display: none !important;
  }
}