/* ============================================================
   FALKEN DARTS — Dart Turniersystem v2.0
   Design: Dark Neon · Modern Gaming Aesthetic
   Fonts: Oxanium (Display) · Rajdhani (Body) · JetBrains Mono (Data)
   ============================================================ */

/* ──── FONT FACES (self-hosted for offline) ──── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Oxanium:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ──── DESIGN TOKENS ──── */
:root {
  /* Core Palette */
  --bg-deep:      #06080b;
  --bg-void:      #0a0d12;
  --bg-dark:      #0e1219;
  --bg-panel:     #131820;
  --bg-card:      #171d28;
  --bg-surface:   #1c2333;
  --bg-elevated:  #212a3a;
  --border:       #232d3f;
  --border-light: #2a3548;
  --border-focus: #3a4a66;

  /* Brand: Green Spectrum */
  --green-900:    #0a1f14;
  --green-800:    #0f3321;
  --green-700:    #155a35;
  --green-600:    #1a7a48;
  --green-500:    #22c55e;
  --green-400:    #4ade80;
  --green-300:    #86efac;
  --green:        #00ff88;
  --green-dim:    #00cc6a;
  --green-glow:   rgba(0, 255, 136, 0.15);

  /* Accent Colors */
  --red:          #ef4444;
  --red-hover:    #dc2626;
  --red-glow:     rgba(239, 68, 68, 0.2);
  --amber:        #f59e0b;
  --amber-hover:  #d97706;
  --blue:         #4a9eff;
  --blue-hover:   #3b8de6;
  --purple:       #8b5cf6;
  --purple-hover: #7c3aed;
  --gold:         #ffd700;
  --gold-glow:    rgba(255, 215, 0, 0.15);

  /* Text Hierarchy */
  --text-primary:   #f0f4f8;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-dim:       #475569;

  /* Glow Effects */
  --glow-green:       0 0 20px rgba(0,255,136,0.15), 0 0 40px rgba(0,255,136,0.05);
  --glow-green-strong:0 0 20px rgba(0,255,136,0.3), 0 0 60px rgba(0,255,136,0.1);
  --glow-red:         0 0 20px rgba(239,68,68,0.2);
  --glow-blue:        0 0 20px rgba(74,158,255,0.2);
  --glow-gold:        0 0 20px rgba(255,215,0,0.2);

  /* Spacing Scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
  --content-max: 1400px;

  /* Border Radius */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-2xl: 20px; --r-full: 9999px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   150ms;
  --t-normal: 250ms;
  --t-slow:   400ms;

  /* Typography */
  --font-display: 'Oxanium', sans-serif;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-deep);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--green); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--green-400); }

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-focus); }
* { scrollbar-width: thin; scrollbar-color: var(--bg-elevated) var(--bg-void); }

/* Selection */
::selection { background: rgba(0,255,136,0.2); color: var(--text-primary); }
::-moz-selection { background: rgba(0,255,136,0.2); color: var(--text-primary); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

/* ──── LAYOUT SHELL ──── */
.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-sidebar {
  width: var(--sidebar-width);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width var(--t-slow) var(--ease-out);
  overflow: hidden;
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  transition: margin-left var(--t-slow) var(--ease-out);
}

.app-topbar {
  height: var(--topbar-height);
  background: rgba(6,8,11,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-8);
  position: sticky;
  top: 0;
  z-index: 90;
  gap: var(--sp-4);
}

.app-content {
  flex: 1;
  padding: var(--sp-8);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

/* ──── SIDEBAR COMPONENTS ──── */
.sidebar-logo {
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-logo-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--green), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--bg-deep);
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  white-space: nowrap;
}

.sidebar-logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-3) var(--sp-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  transition: all var(--t-fast);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: var(--green);
  background: var(--green-900);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--green);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px var(--green-glow);
}

.nav-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .nav-icon { opacity: 1; }

.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--green);
  color: var(--bg-deep);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}

.nav-badge.red { background: var(--red); color: white; }
.nav-badge.pulse { animation: badge-pulse 0.6s ease; }
@keyframes badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.sidebar-footer {
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all var(--t-fast);
}

.sidebar-toggle:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* Sidebar collapsed state */
.app-sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.app-sidebar.collapsed .sidebar-logo-text,
.app-sidebar.collapsed .sidebar-logo-sub,
.app-sidebar.collapsed .sidebar-section-label,
.app-sidebar.collapsed .nav-item span,
.app-sidebar.collapsed .nav-badge,
.app-sidebar.collapsed .sidebar-toggle span {
  display: none;
}

.app-sidebar.collapsed .sidebar-logo {
  justify-content: center;
}

.app-sidebar.collapsed .nav-item {
  justify-content: center;
  padding: var(--sp-3);
}

.app-main.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed);
}

/* ──── TOPBAR COMPONENTS ──── */
.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  color: var(--text-muted);
}

.topbar-breadcrumb a { color: var(--text-secondary); }
.topbar-breadcrumb a:hover { color: var(--green); }
.topbar-breadcrumb .sep { color: var(--text-dim); }
.topbar-breadcrumb .current { color: var(--text-primary); font-weight: 600; }

.topbar-search {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.topbar-search input {
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-4) 0 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all var(--t-fast);
}

.topbar-search input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.topbar-search input::placeholder { color: var(--text-dim); }

.topbar-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  width: 16px; height: 16px;
}

.topbar-spacer { flex: 1; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topbar-btn {
  width: 38px; height: 38px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  position: relative;
}

.topbar-btn:hover { background: var(--bg-surface); color: var(--text-primary); }

.topbar-btn .badge-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--bg-deep);
}

/* User Menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}

.user-menu:hover { background: var(--bg-surface); }

.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.user-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Mobile-only helper */
.mobile-only { display: none; }
@media (max-width: 900px) { .mobile-only { display: flex; } }

/* Search results dropdown */
.search-results {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}

.search-results.show { display: block; }

.search-results-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
}

.search-results-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* Dropdown danger variant */
.dropdown-item--danger { color: var(--red) !important; }
.dropdown-item--danger:hover { background: rgba(239,68,68,0.1); color: var(--red) !important; }

/* ──── PAGE HEADER ──── */
.page-header {
  margin-bottom: var(--sp-8);
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.page-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
}

/* ──── GRID SYSTEM ──── */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-sidebar { grid-template-columns: 1fr 340px; }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* ──── CARDS ──── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--border-light);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.card-body { padding: var(--sp-6); }
.card-header {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
}
.card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

/* Stat Card */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
  transition: all var(--t-normal) var(--ease-out);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  transition: background var(--t-normal);
}

.stat-card:hover::before { background: var(--green); }
.stat-card:hover { border-color: var(--border-light); transform: translateY(-2px); }

.stat-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--sp-2);
}

.stat-card-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.stat-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.stat-card-trend.up { color: var(--green); }
.stat-card-trend.down { color: var(--red); }

.stat-card-icon {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--text-muted);
  transition: color var(--t-normal), box-shadow var(--t-normal);
}
.stat-card-icon svg { width: 20px; height: 20px; }

/* Stat Card Accent Variants */
.stat-card--accent-green:hover::before { background: var(--green); }
.stat-card--accent-green:hover .stat-card-icon { color: var(--green); box-shadow: 0 0 12px rgba(0,255,136,0.15); }
.stat-card--accent-blue:hover::before { background: var(--blue); }
.stat-card--accent-blue:hover .stat-card-icon { color: var(--blue); box-shadow: 0 0 12px rgba(74,158,255,0.15); }
.stat-card--accent-purple:hover::before { background: var(--purple); }
.stat-card--accent-purple:hover .stat-card-icon { color: var(--purple); box-shadow: 0 0 12px rgba(139,92,246,0.15); }
.stat-card--accent-gold:hover::before { background: var(--gold); }
.stat-card--accent-gold:hover .stat-card-icon { color: var(--gold); box-shadow: 0 0 12px rgba(255,215,0,0.15); }

/* Stat Card Glow (subtle bottom corner glow on hover) */
.stat-card-glow {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--t-normal);
  pointer-events: none;
}
.stat-card:hover .stat-card-glow { opacity: 1; }
.stat-card--accent-green .stat-card-glow { background: radial-gradient(circle, rgba(0,255,136,0.08) 0%, transparent 70%); }
.stat-card--accent-blue .stat-card-glow { background: radial-gradient(circle, rgba(74,158,255,0.08) 0%, transparent 70%); }
.stat-card--accent-purple .stat-card-glow { background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%); }
.stat-card--accent-gold .stat-card-glow { background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%); }

/* Card Title Dot */
.card-title-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--sp-2);
  vertical-align: middle;
}
.card-title-dot--green {
  background: var(--green);
  box-shadow: 0 0 8px rgba(0,255,136,0.4);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Live Area Card */
.card--live-area {
  border-color: rgba(0,255,136,0.1);
}

/* Match Card Live Glow */
.match-card--live-glow {
  border-color: rgba(0,255,136,0.15);
  box-shadow: inset 0 0 20px rgba(0,255,136,0.02);
}
.match-card--live-glow:hover {
  border-color: rgba(0,255,136,0.3);
  box-shadow: inset 0 0 20px rgba(0,255,136,0.04), 0 0 20px rgba(0,255,136,0.08);
}

/* Page Header Subtitle */
.page-header-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Player Card */
.player-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  transition: all var(--t-normal) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}

.player-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,255,136,0.08);
}

.player-card-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto var(--sp-4);
  background: var(--bg-elevated);
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
  transition: border-color var(--t-normal);
}

.player-card:hover .player-card-avatar { border-color: var(--green); }

.player-card-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.player-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.player-card-flag {
  font-size: 20px;
  margin-bottom: var(--sp-3);
}

.player-card-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
}

.player-card-stat {
  text-align: center;
}

.player-card-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.player-card-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Match Card */
.match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: all var(--t-normal);
  position: relative;
}

.match-card.live {
  border-color: var(--green-700);
}

.match-card.live::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--green-400));
  animation: glow-line 2s ease-in-out infinite;
}

@keyframes glow-line {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.match-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.match-card-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.match-player {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
}

.match-player.right { flex-direction: row-reverse; text-align: right; }

.match-player-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.match-player-name.active { color: var(--green); }

.match-score {
  text-align: center;
  min-width: 80px;
}

.match-score-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}

.match-score-legs {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

/* Tournament Card */
.tournament-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: all var(--t-normal);
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}

.tournament-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}

.tournament-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.tournament-card-meta {
  display: flex;
  gap: var(--sp-4);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}

.tournament-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ──── BADGES ──── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.badge-live {
  background: var(--green-900);
  color: var(--green);
  border: 1px solid var(--green-700);
}

.badge-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(0,255,136,0); }
}

.badge-scheduled {
  background: rgba(74,158,255,0.1);
  color: var(--blue);
  border: 1px solid rgba(74,158,255,0.2);
}

.badge-completed {
  background: rgba(100,116,139,0.1);
  color: var(--text-muted);
  border: 1px solid rgba(100,116,139,0.2);
}

.badge-active {
  background: var(--green-900);
  color: var(--green);
  border: 1px solid var(--green-700);
}

.badge-draft {
  background: rgba(139,92,246,0.1);
  color: var(--purple);
  border: 1px solid rgba(139,92,246,0.2);
}

.badge-win {
  background: rgba(0,255,136,0.1);
  color: var(--green);
  font-weight: 700;
}

.badge-loss {
  background: rgba(239,68,68,0.1);
  color: var(--red);
  font-weight: 700;
}

.badge-elo {
  background: var(--gold-glow);
  color: var(--gold);
  border: 1px solid rgba(255,215,0,0.25);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 12px;
}

/* BEM double-dash aliases (used by page templates and admin-app.js) */

/* Badge variants */
.badge--live       { background: var(--green-900); color: var(--green); border: 1px solid var(--green-700); }
.badge--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.5s ease-in-out infinite; }
.badge--active     { background: var(--green-900); color: var(--green); border: 1px solid var(--green-700); }
.badge--scheduled  { background: rgba(74,158,255,0.1); color: var(--blue); border: 1px solid rgba(74,158,255,0.2); }
.badge--completed  { background: rgba(100,116,139,0.1); color: var(--text-muted); border: 1px solid rgba(100,116,139,0.2); }
.badge--planned    { background: rgba(139,92,246,0.1); color: var(--purple); border: 1px solid rgba(139,92,246,0.2); }
.badge--default    { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); }
.badge--format     { background: rgba(74,158,255,0.08); color: var(--blue); border: 1px solid rgba(74,158,255,0.15); }

/* Button variants (double-dash) */
.btn--primary { background: var(--green); color: var(--bg-deep); }
.btn--primary:hover { background: var(--green-dim); color: var(--bg-deep); box-shadow: var(--glow-green); }
.btn--secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn--secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }
.btn--danger { background: var(--red); color: white; }
.btn--danger:hover { background: var(--red-hover); box-shadow: var(--glow-red); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-surface); color: var(--text-primary); }
.btn--sm { height: 32px; padding: 0 var(--sp-4); font-size: 13px; }
.btn--xs { height: 26px; padding: 0 var(--sp-3); font-size: 12px; }
.btn--lg { height: 52px; padding: 0 var(--sp-8); font-size: 17px; }

/* Modal size variant */
.modal--sm { max-width: 440px; }
.modal--md { max-width: 600px; }
.modal--lg { max-width: 800px; }

/* Title accent highlight */
.accent {
  background: linear-gradient(135deg, var(--green), var(--green-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animate-in utility (staggered) */
.animate-in {
  animation: page-slide-in 0.5s var(--ease-out) both;
}
.animate-in:nth-child(1) { animation-delay: 0ms; }
.animate-in:nth-child(2) { animation-delay: 60ms; }
.animate-in:nth-child(3) { animation-delay: 120ms; }
.animate-in:nth-child(4) { animation-delay: 180ms; }
.animate-in:nth-child(5) { animation-delay: 240ms; }
.animate-in:nth-child(6) { animation-delay: 300ms; }

@keyframes page-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ──── BUTTONS ──── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-6);
  height: 42px;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--green);
  color: var(--bg-deep);
}
.btn-primary:hover { background: var(--green-dim); color: var(--bg-deep); box-shadow: var(--glow-green); }

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }

.btn-danger {
  background: var(--red);
  color: white;
}
.btn-danger:hover { background: var(--red-hover); box-shadow: var(--glow-red); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-surface); color: var(--text-primary); }

.btn-sm { height: 32px; padding: 0 var(--sp-4); font-size: 13px; }
.btn-lg { height: 52px; padding: 0 var(--sp-8); font-size: 17px; }

.btn-icon {
  width: 42px;
  padding: 0;
}
.btn-icon.btn-sm { width: 32px; }

/* ──── FORMS ──── */
.form-group {
  margin-bottom: var(--sp-5);
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--sp-2);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0 var(--sp-4);
  height: 44px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: all var(--t-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.form-input::placeholder { color: var(--text-dim); }

.form-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--sp-3) var(--sp-4);
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-error {
  font-size: 12px;
  color: var(--red);
  margin-top: var(--sp-1);
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.form-row {
  display: flex;
  gap: var(--sp-4);
}
.form-row > * { flex: 1; }

/* Custom Checkbox */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-dark);
  transition: all var(--t-fast);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.form-check input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}

.form-check input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-deep);
}

/* ──── TABLES ──── */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  padding: var(--sp-3) var(--sp-4);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  cursor: pointer;
  white-space: nowrap;
}

.data-table th:hover { color: var(--text-secondary); }

.data-table th.sort-asc::after { content: ' ↑'; color: var(--green); }
.data-table th.sort-desc::after { content: ' ↓'; color: var(--green); }

.data-table td {
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--t-fast);
}

.data-table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}

.data-table .rank-col {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  width: 50px;
}

.data-table .rank-1 { color: var(--gold); }
.data-table .rank-2 { color: #c0c0c0; }
.data-table .rank-3 { color: #cd7f32; }

.data-table .value {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ──── TABS ──── */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
}

.tab {
  padding: var(--sp-3) var(--sp-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab:hover { color: var(--text-secondary); }

.tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ──── MODALS ──── */
.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

.modal-backdrop.show,
.modal-overlay.active { display: flex; }

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  animation: modal-in 0.25s var(--ease-spring);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.modal-close {
  width: 32px; height: 32px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { background: var(--bg-surface); color: var(--text-primary); }

.modal-body { padding: 0 var(--sp-6) var(--sp-6); }

.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* ──── TOASTS ──── */
.toast-container {
  position: fixed;
  top: 80px;
  right: var(--sp-6);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toast-in 0.3s var(--ease-out);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 380px;
}

.toast-success { background: rgba(0,204,106,0.95); }
.toast-error   { background: rgba(239,68,68,0.95); }
.toast-warning { background: rgba(245,158,11,0.95); }
.toast-info    { background: rgba(74,158,255,0.95); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast.fade-out { opacity: 0; transition: opacity 0.3s ease; }

/* ──── LOADING SPINNER ──── */
.loading-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ──── PROFILE WELCOME BANNER ──── */
.profile-welcome-banner {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(59,130,246,0.10) 100%);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-6);
}
.profile-welcome-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.profile-welcome-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}
.profile-welcome-text h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 var(--sp-1) 0;
}
.profile-welcome-text p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}
.profile-welcome-close {
  margin-left: auto;
  font-size: 1.5rem;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  flex-shrink: 0;
}

/* ──── PLAYER PROFILE HERO ──── */
.profile-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
}

.profile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--purple));
}

.profile-avatar-lg {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 4px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
  flex-shrink: 0;
}

.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.profile-info { flex: 1; }

.profile-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: var(--sp-1);
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.profile-flag { font-size: 24px; }

.profile-bio {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 600px;
}

.profile-stats {
  display: flex;
  gap: var(--sp-6);
}

.profile-stat {
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.profile-stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green);
}

.profile-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ──── ACHIEVEMENT BADGES ──── */
.achievement {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}

.achievement.unlocked {
  border-color: var(--gold);
  background: rgba(255,215,0,0.05);
}

.achievement.locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.achievement-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.achievement.unlocked .achievement-icon {
  background: var(--gold-glow);
}

.achievement-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.achievement-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* ──── SCOREBOARD (Live) ──── */
.scoreboard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.scoreboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.scoreboard-body {
  padding: var(--sp-8);
}

.scoreboard-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scoreboard-player {
  flex: 1;
  text-align: center;
}

.scoreboard-remaining {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  color: var(--text-secondary);
  line-height: 1;
}

.scoreboard-player.active .scoreboard-remaining {
  color: var(--green);
  text-shadow: 0 0 30px rgba(0,255,136,0.2);
}

.scoreboard-vs {
  text-align: center;
  padding: 0 var(--sp-4);
}

.scoreboard-legs {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
}

/* ──── DROPDOWN MENU ──── */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  animation: dropdown-in 0.15s var(--ease-out);
}

.dropdown-menu.show { display: block; }

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-2) 0;
}

/* ──── COMPARISON BAR ──── */
.comparison-bar {
  display: flex;
  gap: 2px;
  height: 24px;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.comparison-bar-left {
  background: var(--green);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  transition: width 0.5s var(--ease-out);
}

.comparison-bar-right {
  background: var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: width 0.5s var(--ease-out);
}

/* ──── OFFLINE BANNER ──── */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: var(--amber);
  color: var(--bg-deep);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 700;
  z-index: 3000;
  letter-spacing: 0.5px;
}

.offline-banner svg { flex-shrink: 0; }

.offline-banner.show,
.offline-banner.active { display: flex; }

body.offline .app-topbar { top: 36px; }
body.offline .toast-container { top: 116px; }

/* ──── AUTH LAYOUT ──── */
.auth-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  padding: var(--sp-6);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
}

.auth-logo {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.auth-logo-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--sp-6);
}

.auth-footer {
  text-align: center;
  margin-top: var(--sp-6);
  font-size: 14px;
  color: var(--text-muted);
}

/* ──── UTILITY CLASSES ──── */
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-amber  { color: var(--amber); }
.text-blue   { color: var(--blue); }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-mono   { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }

.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.w-full { width: 100%; }
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ──── PAGE TRANSITIONS ──── */
.page-enter {
  animation: page-fade-in 0.3s var(--ease-out);
}

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

/* Staggered children */
.stagger > * {
  animation: stagger-in 0.4s var(--ease-out) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──── SCROLLBAR ──── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ──── RESPONSIVE ──── */
@media (max-width: 1400px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app-sidebar {
    transform: translateX(-100%);
    z-index: 500;
  }

  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: 20px 0 60px rgba(0,0,0,0.5);
  }

  .app-main {
    margin-left: 0;
  }

  .topbar-search { display: none; }

  .profile-hero {
    flex-direction: column;
    text-align: center;
  }

  .profile-stats { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 640px) {
  .app-content { padding: var(--sp-4); }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  .stat-card-value { font-size: 1.5rem; }

  .scoreboard-remaining { font-size: 2.5rem; }

  .form-row { flex-direction: column; }

  .match-card-players { flex-direction: column; gap: var(--sp-2); }
  .match-player.right { flex-direction: row; text-align: left; }
}

/* ──── MOBILE BOTTOM NAV ──── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  z-index: 100;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 var(--sp-2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  min-height: 48px;
  min-width: 48px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast), transform 0.1s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item.active { color: var(--green); }
.bottom-nav-item svg { width: 22px; height: 22px; }

/* Bottom nav badge indicator */
.bottom-nav-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.bottom-nav-badge:empty { display: none; }

@media (max-width: 900px) {
  .bottom-nav { display: flex; }
  .app-content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* Safe-area for topbar on notched phones */
  .app-topbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
  }

  /* Safe-area for sidebar overlay */
  .app-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }
}

/* ──── PWA STANDALONE MODE ──── */
.pwa-standalone .app-topbar {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
}
.pwa-standalone .app-sidebar {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ──── TOUCH FEEDBACK (Mobile) ──── */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-item, .bottom-nav-item, .card, .stat-card,
  .dropdown-item, .match-card, .player-card, a[class] {
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active { transform: scale(0.97); opacity: 0.85; transition: transform 0.08s, opacity 0.08s; }
  .btn--ghost:active { background: rgba(255,255,255,0.06); }
  .nav-item:active { background: rgba(255,255,255,0.08); }
  .bottom-nav-item:active { transform: scale(0.88); }
  .card:active, .stat-card:active { transform: scale(0.98); transition: transform 0.1s; }
  .match-card:active, .player-card:active { transform: scale(0.98); }
  .dropdown-item:active { background: rgba(255,255,255,0.1); }
}

/* ──── TOUCH TARGET MINIMUM SIZES ──── */
@media (max-width: 900px) {
  .nav-item { min-height: 48px; display: flex; align-items: center; }
  .topbar-btn { min-width: 44px; min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .dropdown-item { min-height: 44px; padding: var(--sp-3) var(--sp-4); }
}

/* ──── MOBILE STAT CARDS HORIZONTAL SCROLL ──── */
@media (max-width: 480px) {
  .dash-stats.grid-5 {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-3);
    padding-bottom: var(--sp-2);
    grid-template-columns: none !important;
  }
  .dash-stats.grid-5::-webkit-scrollbar { display: none; }
  .dash-stats.grid-5 { scrollbar-width: none; }
  .dash-stats.grid-5 .stat-card {
    min-width: 140px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ──── PAGE TRANSITION ──── */
.app-content {
  animation: fadeInUp 0.2s ease-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ──── PULL TO REFRESH ──── */
.ptr-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.25s ease;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.ptr-indicator.pulling {
  height: 50px;
}
.ptr-indicator.refreshing {
  height: 50px;
}
.ptr-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: ptr-spin 0.6s linear infinite;
  margin-right: 8px;
}
@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* ──── PRINT ──── */
@media print {
  .app-sidebar, .app-topbar, .bottom-nav, .toast-container { display: none !important; }
  .app-main { margin-left: 0; }
  body { background: white; color: black; }
}

/* ──── LOADING SKELETONS ──── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-surface) 37%, var(--bg-card) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--r-md);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--sp-2);
}

.skeleton-text.lg {
  height: 20px;
  width: 60%;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-card {
  height: 160px;
}

.skeleton-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
}

/* ──── ERROR PAGES (404, 500, etc.) ──── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--sp-8);
}

.error-page .error-icon {
  font-size: 4rem;
  margin-bottom: var(--sp-6);
  opacity: 0.8;
}

.error-page .error-code-small {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--sp-2);
}

.error-page .error-icon svg {
  width: 80px;
  height: 80px;
  color: var(--amber);
}

.error-page .error-code {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: var(--sp-3);
  text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
}

.error-page .error-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.error-page .error-description {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 400px;
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}

.error-page .error-actions {
  display: flex;
  gap: var(--sp-3);
}

/* ──── DASHBOARD ──── */
.dash-stats { margin-bottom: var(--sp-6); }

/* Row 1: Widget cards (4 nebeneinander) */
.dash-widgets {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* Row 3: Bottom row (3 nebeneinander) */
.dash-bottom-row {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* Legacy — keep for backwards compat */
.dash-layout { grid-template-columns: 1fr 340px; gap: var(--sp-5); }
.dash-column { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ── Dashboard Chat Preview ── */
.dash-chat-preview {
  max-height: 280px;
  overflow-y: auto;
}

.dash-chat-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}
.dash-chat-row:last-child { border-bottom: none; }
.dash-chat-row:hover { background: var(--bg-surface); }

.dash-chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
}

.dash-chat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-chat-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--green);
  font-family: var(--font-display);
}

.dash-chat-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-chat-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 2px;
}

.card-body--flush { padding: 0; }
.card-body--loading { padding: var(--sp-4); color: var(--text-muted); text-align: center; }

.card-footer-link {
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
}

.card-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Tippspiel Teaser Card */
.card--gradient {
  background: linear-gradient(135deg, rgba(0,255,136,0.08), var(--bg-card));
}
.teaser-body {
  text-align: center;
  padding: var(--sp-5);
}
.teaser-emoji {
  font-size: 2.5rem;
  margin-bottom: var(--sp-2);
}
.teaser-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.teaser-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

/* Dashboard JS-rendered components */
.match-card-grid { gap: var(--sp-3); }

.board-status-item {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
  border: 1px solid var(--border);
}
.board-status-dot-sm {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 auto var(--sp-1);
}
.board-status-name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.board-status-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.list-row-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 50px;
}
.list-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.list-row-name {
  color: var(--text-primary);
  font-size: 0.9rem;
}
.list-row-vs {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.list-row-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Top Player Row */
.top-player-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.top-player-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 20px;
  text-align: center;
}
.top-player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.top-player-info { flex: 1; }
.top-player-link {
  color: var(--text-primary);
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 500;
}
.top-player-link:hover { color: var(--green); }
.top-player-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.top-player-avg {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--green);
}

/* Recent Result Row */
.result-row {
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.result-name {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.result-name.winner {
  color: var(--green);
  font-weight: 600;
}
.result-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0 var(--sp-3);
  color: var(--text-primary);
}
.result-time {
  min-width: 60px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 1400px) {
  .dash-widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-bottom-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .dash-widgets { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ──── LIVE PAGE: Twitch Stream Section ──── */
.twitch-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.twitch-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--t-fast) ease;
}
.twitch-toggle:hover {
  color: var(--text-primary);
}
.twitch-toggle-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
}
.twitch-toggle-left svg {
  color: #9146ff;
}
.twitch-toggle-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.twitch-toggle-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.twitch-toggle-chevron {
  transition: transform var(--t-normal) var(--ease-out);
  color: var(--text-muted);
}
.twitch-toggle.open .twitch-toggle-chevron {
  transform: rotate(180deg);
}
.twitch-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out);
}
.twitch-body.open {
  max-height: 800px;
}
.twitch-embed {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  height: 480px;
  border-top: 1px solid var(--border);
}
.twitch-player {
  position: relative;
  background: #000;
}
.twitch-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.twitch-chat {
  background: #18181b;
  position: relative;
}
.twitch-chat iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .twitch-embed {
    grid-template-columns: 1fr;
    height: auto;
  }
  .twitch-player {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .twitch-chat {
    height: 320px;
  }
}

@media (max-width: 768px) {
  .twitch-embed {
    grid-template-columns: 1fr;
  }
  .twitch-chat {
    height: 280px;
  }
}

/* ──── LIVE PAGE (Board Panels) ──── */
.live-board-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  transition: border-color var(--t-normal) var(--ease-out),
              box-shadow var(--t-normal) var(--ease-out);
}
.live-board-panel.board-active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-400), var(--green));
  animation: live-glow-line 3s ease-in-out infinite alternate;
}
.live-board-panel.board-paused::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--gold), var(--amber));
  animation: live-glow-line 4s ease-in-out infinite alternate;
}
.live-board-panel.board-free,
.live-board-panel.board-maintenance {
  opacity: 0.7;
}
.live-board-panel.board-maintenance {
  border-color: rgba(239, 68, 68, 0.2);
}

@keyframes live-glow-line {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

.live-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.live-board-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.live-board-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.live-board-badges {
  display: flex;
  gap: var(--sp-2);
}

.board-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.board-status-dot.active {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: dot-pulse 2s ease-in-out infinite;
}
.board-status-dot.free {
  background: var(--text-dim);
}
.board-status-dot.maintenance {
  background: var(--red);
}
.board-status-dot.paused {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.live-pause-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 0;
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.live-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  align-items: start;
}

.live-player-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.live-player-side.left  { text-align: left; align-items: flex-start; }
.live-player-side.right { text-align: right; align-items: flex-end; }

.live-player-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  line-height: 1.2;
}
.live-player-name.throwing {
  color: var(--green);
}

.live-player-remaining {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  transition: color var(--t-fast);
}
.live-player-remaining.checkout {
  color: var(--green);
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.live-center-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  min-width: 100px;
}
.live-legs-display {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.live-legs-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}
.live-legs-colon {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-dim);
}
.live-leg-info {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.checkout-suggest {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--green-400);
  background: rgba(0, 255, 136, 0.06);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(0, 255, 136, 0.15);
}
.checkout-none {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.last-visit {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.last-visit.right { justify-content: flex-end; }

.dart-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.dart-tag.triple { background: rgba(0, 255, 136, 0.12); color: var(--green); }
.dart-tag.double { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.dart-tag.bull   { background: rgba(245, 158, 11, 0.12); color: var(--amber); }

.last-visit-sum {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 2px 4px;
}

.live-stats-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  border-top: 1px solid var(--border);
}
.live-stats-row:last-child {
  border-bottom: none;
}
.live-stats-row .stat-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-stats-row .stat-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--t-fast);
}
.live-stats-row .stat-val.left  { text-align: left; }
.live-stats-row .stat-val.right { text-align: right; }
.live-stats-row .stat-val.better { color: var(--green); }

.dartboard-container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.board-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-5);
  color: var(--text-dim);
}
.board-empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--sp-3);
  opacity: 0.3;
}
.board-empty-state .empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
}
.board-empty-state .empty-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.badge-paused {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-maintenance {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge-free {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border: 1px solid rgba(100, 116, 139, 0.25);
}

/* Live page skeleton */
.skeleton-pulse {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, rgba(255,255,255,0.04) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse-anim 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-pulse-anim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Live page skeleton container */
.skeleton-center {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* Live page responsive */
@media (max-width: 1024px) {
  .live-player-remaining { font-size: 2.5rem; }
  .live-legs-num { font-size: 2.5rem; }
  .live-player-name { font-size: 1.1rem; }
  .live-scoreboard { gap: var(--sp-3); padding: var(--sp-3); }
  .dartboard-container { width: 160px; height: 160px; }
}

@media (max-width: 768px) {
  #boardGrid { grid-template-columns: 1fr !important; }
  .live-player-remaining { font-size: 2rem; }
  .live-legs-num { font-size: 2rem; }
  .live-legs-colon { font-size: 1.5rem; }
  .live-player-name { font-size: 0.95rem; }
  .live-center-score { min-width: 70px; }
  .live-scoreboard { gap: var(--sp-2); padding: var(--sp-3); }
  .live-stats-row { padding: 8px var(--sp-3); gap: var(--sp-2); }
  .live-stats-row .stat-val { font-size: 0.85rem; }
  .live-stats-row .stat-label { font-size: 0.6rem; }
  .dartboard-container { width: 140px; height: 140px; }
}

@media (max-width: 480px) {
  .live-player-remaining { font-size: 1.8rem; }
  .live-legs-num { font-size: 1.8rem; }
  .live-player-name { font-size: 0.85rem; }
  .live-board-header { padding: var(--sp-3) var(--sp-4); }
  .dartboard-container { display: none; }
}

/* ──── PLAYERS PAGE ──── */
.players-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.players-search-box {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.players-search-box input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.players-search-box input::placeholder {
  color: var(--text-muted);
}
.players-search-box input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.08);
}
.players-search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.players-sort-select {
  padding: 10px 36px 10px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  outline: none;
  cursor: pointer;
}
.players-sort-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.08);
}

.players-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.player-card-nickname {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.player-card-role {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.player-stat {
  text-align: center;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
}
.player-stat-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.player-stat-value.highlight {
  color: var(--green);
}
.player-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 2px;
}

.players-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
}

.player-card-skeleton {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* Skeleton stat grid inside player cards */
.skeleton-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  width: 100%;
}

/* Live page header badges */
.live-badges {
  display: flex;
  gap: var(--sp-2);
}

/* ──── REGISTER PAGE ──── */
.register-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-display);
}
.register-divider::before,
.register-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.register-submit {
  width: 100%;
  margin-top: var(--sp-6);
}
.register-submit.is-loading {
  pointer-events: none;
  opacity: .6;
}

/* ──── TESTGAME PAGE ──── */
.testgame-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: var(--sp-3);
  transition: border-color 0.2s;
}
.testgame-card:hover {
  border-color: var(--falken-toxic);
}
.testgame-card .match-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testgame-card .match-players {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.testgame-card .match-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.testgame-card .match-score {
  font-family: 'Oxanium', 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--falken-toxic);
  min-width: 60px;
  text-align: center;
}
.testgame-card .match-actions {
  display: flex;
  gap: 6px;
}
.testgame-card .match-actions button {
  padding: 6px 12px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.testgame-card .match-actions button:hover {
  border-color: var(--falken-toxic);
  color: var(--falken-toxic);
}
.testgame-card .match-actions button.btn-danger:hover {
  border-color: var(--falken-red);
  color: var(--falken-red);
}
.badge-status-live {
  background: rgba(0,255,136,0.15);
  color: var(--falken-toxic);
  border: 1px solid rgba(0,255,136,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.badge-status-scheduled {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.badge-status-completed {
  background: rgba(148,163,184,0.1);
  color: var(--text-dim);
  border: 1px solid rgba(148,163,184,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}

/* ──── RANKINGS PAGE ──── */

/* Rankings Filter Controls */
.rankings-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.rankings-controls .form-select {
  min-width: 200px;
  max-width: 280px;
}

.period-filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast) ease;
}
.filter-chip:hover {
  border-color: var(--green);
  color: var(--text-primary);
}
.filter-chip.active {
  background: rgba(0, 255, 136, 0.1);
  border-color: var(--green);
  color: var(--green);
}

/* Rankings Summary Stat Cards */
.rankings-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.rankings-summary .stat-card {
  text-align: center;
}
.rankings-summary .stat-card .stat-card-value {
  font-size: 1.6rem;
}

/* Rankings Table Enhancements */
.rankings-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.rankings-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rankings-table-wrap .data-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast) ease;
}
.rankings-table-wrap .data-table tbody tr:hover td {
  background: rgba(0, 255, 136, 0.03);
}

/* Rank medals */
.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
}
.rank-medal.gold {
  color: var(--gold);
  background: var(--gold-glow);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
.rank-medal.silver {
  color: #c0c0c0;
  background: rgba(192, 192, 192, 0.12);
  text-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}
.rank-medal.bronze {
  color: #cd7f32;
  background: rgba(205, 127, 50, 0.12);
  text-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}
.rank-number {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
}

/* Player cell inside table */
.rankings-player-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.rankings-player-cell .mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
  overflow: hidden;
}
.rankings-player-cell .mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rankings-player-cell .player-name {
  font-weight: 600;
  color: var(--text-primary);
}
.rankings-player-cell .player-flag {
  font-size: 0.9rem;
  line-height: 1;
}

/* ELO badge */
.elo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--gold-glow);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid rgba(255, 215, 0, 0.25);
}

/* Win-rate bar */
.winrate-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.winrate-bar {
  width: 50px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
}
.winrate-bar .fill {
  height: 100%;
  background: var(--green);
  border-radius: var(--r-full);
  transition: width var(--t-normal) ease;
}
.winrate-pct {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  min-width: 42px;
}

/* Form dots (last 5 results) */
.form-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.form-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.form-dot.win   { background: var(--green); box-shadow: 0 0 4px rgba(0,255,136,0.3); }
.form-dot.loss  { background: var(--red); }
.form-dot.draw  { background: var(--amber); }

/* Category Leaderboard Cards (Tab 2) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.category-card .card-header {
  padding: var(--sp-4) var(--sp-5);
}
.category-card .card-header h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.category-card .card-header h3 svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex-shrink: 0;
}

.category-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--t-fast) ease;
}
.category-row:last-child { border-bottom: none; }
.category-row:hover { background: rgba(255,255,255,0.02); }

.category-rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-dim);
  min-width: 22px;
  text-align: center;
}
.category-rank.top { color: var(--gold); }

.category-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
  overflow: hidden;
}
.category-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-value {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}
.category-value.best {
  color: var(--green);
}

/* Record Cards (Tab 3) */
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-5);
}

.record-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-normal) var(--ease-out), border-color var(--t-normal);
}
.record-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  transition: background var(--t-normal);
}
.record-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
}
.record-card:hover::before {
  background: var(--green);
}

.record-icon {
  font-size: 1.8rem;
  margin-bottom: var(--sp-3);
  opacity: 0.8;
}

.record-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.record-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.record-holder {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.record-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: var(--sp-1);
}

/* Rankings table skeleton */
.table-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Rankings Responsive */
@media (max-width: 1024px) {
  .rankings-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .rankings-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .rankings-controls .form-select {
    max-width: 100%;
  }
  .rankings-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-grid,
  .records-grid {
    grid-template-columns: 1fr;
  }
  .rankings-table-wrap .data-table th:nth-child(n+6),
  .rankings-table-wrap .data-table td:nth-child(n+6) {
    display: none;
  }
  .rankings-table-wrap .data-table th:nth-child(5),
  .rankings-table-wrap .data-table td:nth-child(5) {
    display: none;
  }
}

@media (max-width: 480px) {
  .rankings-summary {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .rankings-summary .stat-card {
    padding: var(--sp-4);
  }
  .rankings-summary .stat-card .stat-card-value {
    font-size: 1.2rem;
  }
}

/* ──── TOURNAMENTS PAGE ──── */

/* Tournament filter controls */
.tournament-filters {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  align-items: center;
}
.tournament-filters .filter-group {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.tournament-filters .filter-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 var(--sp-2);
  align-self: center;
}

/* Tournament card additions (base .tournament-card defined above) */
.tournament-card-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tournament-card-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tournament-card-meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.tournament-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Tournament progress bar */
.tournament-progress {
  width: 100%;
  margin-top: auto;
}
.tournament-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}
.tournament-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  transition: width 0.4s ease;
}
.tournament-progress-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Tournament skeleton loading */
.tournament-skeleton {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Tournament empty state */
.tournaments-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
}

/* ──── PLAYER DETAIL PAGE ──── */
[data-page="player-detail"] .profile-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
[data-page="player-detail"] .profile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--green), var(--green-700));
}
[data-page="player-detail"] .profile-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 100%;
  background: radial-gradient(ellipse at top right, rgba(0,255,136,0.04), transparent 70%);
  pointer-events: none;
}
.profile-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  position: relative;
  z-index: 1;
}
[data-page="player-detail"] .profile-avatar {
  width: 110px; height: 110px;
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 3px solid var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.8rem;
  color: var(--text-dim);
  flex-shrink: 0;
  overflow: hidden;
}
[data-page="player-detail"] .profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
[data-page="player-detail"] .profile-info { flex: 1; min-width: 0; }
[data-page="player-detail"] .profile-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
  line-height: 1.2;
}
.profile-name .accent {
  color: var(--green);
  font-weight: 700;
  font-style: italic;
}
[data-page="player-detail"] .profile-flag {
  font-size: 1.4rem;
  margin-right: var(--sp-1);
  vertical-align: middle;
}
[data-page="player-detail"] .profile-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.profile-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.profile-quick-stats {
  display: flex;
  gap: var(--sp-6);
  flex-shrink: 0;
}
.profile-qstat {
  text-align: center;
  min-width: 70px;
}
.profile-qstat-val {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.profile-qstat-lbl {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: var(--sp-1);
}

.skel {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: inline-block;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-line { height: 14px; margin-bottom: var(--sp-2); }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.skel-line.w80 { width: 80%; }
.skel-block { height: 40px; width: 100%; margin-bottom: var(--sp-3); }
.skel-circle { width: 110px; height: 110px; border-radius: var(--r-xl); }

.form-curve {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  padding: var(--sp-2) 0;
}
.form-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.form-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  transition: transform var(--t-fast) var(--ease-spring);
  cursor: default;
}
.form-dot:hover { transform: scale(1.3); }
.form-dot.win {
  background: var(--green-500);
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
}
.form-dot.loss {
  background: var(--red);
  box-shadow: 0 0 8px rgba(239,68,68,0.3);
}
.form-dot.draw {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245,158,11,0.3);
}
.form-opp {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.match-row {
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  gap: var(--sp-3);
  transition: background var(--t-fast);
}
.match-row:hover { background: rgba(255,255,255,0.02); }
.match-row:last-child { border-bottom: none; }
.match-row .m-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  min-width: 72px;
  flex-shrink: 0;
}
.match-row .m-tourney {
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-row .m-opp {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-row .m-result {
  font-family: var(--font-display);
  font-weight: 800;
  min-width: 52px;
  text-align: center;
  flex-shrink: 0;
}
.match-row .m-result.win { color: var(--green); }
.match-row .m-result.loss { color: var(--red); }
.match-row .m-avg {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  min-width: 60px;
  text-align: right;
  flex-shrink: 0;
}

.h2h-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.h2h-selector label {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.h2h-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.h2h-player {
  text-align: center;
}
.h2h-player-name {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h2h-player-wins {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.h2h-player-wins.green { color: var(--green); }
.h2h-player-wins.red { color: var(--red); }
.h2h-colon {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-dim);
}
.h2h-bar-row {
  display: grid;
  grid-template-columns: 48px 1fr 60px 1fr 48px;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.h2h-bar-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
}
.h2h-bar-val.left { text-align: right; }
.h2h-bar-val.right { text-align: left; }
.h2h-bar-val.better { color: var(--green); }
.h2h-bar-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
}
.h2h-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface);
  overflow: hidden;
}
.h2h-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s var(--ease-out);
}
.h2h-bar-fill.green { background: var(--green); }
.h2h-bar-fill.red { background: var(--red); }

.achievement-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  color: var(--text-dim);
}
.achievement-placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-3);
  opacity: 0.35;
}

@media (max-width: 1024px) {
  [data-page="player-detail"] .grid-sidebar { grid-template-columns: 1fr !important; }
  [data-page="player-detail"] .profile-hero-inner { flex-direction: column; text-align: center; }
  [data-page="player-detail"] .profile-badges { justify-content: center; }
  [data-page="player-detail"] .profile-quick-stats { justify-content: center; flex-wrap: wrap; }
  [data-page="player-detail"] .profile-info { text-align: center; }
}
@media (max-width: 768px) {
  [data-page="player-detail"] .profile-hero { padding: var(--sp-5); }
  [data-page="player-detail"] .profile-avatar { width: 80px; height: 80px; font-size: 2rem; }
  [data-page="player-detail"] .profile-name { font-size: 1.3rem; }
  [data-page="player-detail"] .profile-quick-stats { gap: var(--sp-4); }
  .profile-qstat-val { font-size: 1.2rem; }
  [data-page="player-detail"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .match-row .m-tourney { display: none; }
  .h2h-bar-row { grid-template-columns: 36px 1fr 50px 1fr 36px; }
}
@media (max-width: 480px) {
  [data-page="player-detail"] .grid-4 { grid-template-columns: 1fr !important; }
}

/* ──── PROFILE PAGE ──── */
[data-page="profile"] .profile-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
[data-page="profile"] .profile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--green), var(--green-700));
}
[data-page="profile"] .profile-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 100%;
  background: radial-gradient(ellipse at top right, rgba(0,255,136,0.04), transparent 70%);
  pointer-events: none;
}
[data-page="profile"] .profile-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  position: relative;
  z-index: 1;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
[data-page="profile"] .profile-avatar {
  width: 120px; height: 120px;
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 3px solid var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  color: var(--text-dim);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
[data-page="profile"] .profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.profile-avatar-overlay svg {
  color: var(--green);
}
.profile-avatar-wrap:hover .profile-avatar {
  border-color: var(--green);
}
.profile-avatar-wrap:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
  line-height: 1.2;
}
.profile-hero-name .accent {
  color: var(--green);
  font-weight: 700;
  font-style: italic;
}
.profile-hero-flag {
  font-size: 1.4rem;
  margin-right: var(--sp-1);
  vertical-align: middle;
}
.profile-hero-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.profile-hero-email {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.profile-tabs {
  margin-bottom: var(--sp-6);
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.profile-form-grid .form-group.full-width {
  grid-column: 1 / -1;
}

.pw-section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}
.pw-section-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.pw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-5);
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.profile-stats-grid .stat-card {
  text-align: center;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.achievement-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.achievement-badge:hover {
  border-color: var(--green-700);
  transform: translateY(-2px);
}
.achievement-badge-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,136,0.06);
  border-radius: var(--r-md);
}
.achievement-badge-info { flex: 1; min-width: 0; }
.achievement-badge-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}
.achievement-badge-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: var(--sp-2);
}
.achievement-badge-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10);
  color: var(--text-dim);
}
.profile-empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-3);
  opacity: 0.35;
}
.profile-empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.profile-empty-text {
  font-size: 0.82rem;
  color: var(--text-dim);
  max-width: 240px;
  text-align: center;
}

.avatar-preview-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.avatar-preview {
  width: 80px; height: 80px;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 2px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-dim);
}
.avatar-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  [data-page="profile"] .profile-hero-inner { flex-direction: column; text-align: center; }
  .profile-hero-info { text-align: center; }
}
@media (max-width: 768px) {
  [data-page="profile"] .profile-hero { padding: var(--sp-5); }
  [data-page="profile"] .profile-avatar { width: 90px; height: 90px; font-size: 2.2rem; }
  .profile-hero-name { font-size: 1.3rem; }
  .profile-form-grid { grid-template-columns: 1fr; }
  .pw-form-grid { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .achievements-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .profile-stats-grid { grid-template-columns: 1fr; }
}

/* ──── TIPPSPIEL PAGE ──── */
.tip-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  position: relative;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.tip-card:hover {
  border-color: var(--border-light);
}

.tip-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.tip-card-tournament {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tip-card-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.tip-card-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}
.tip-card-player {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.tip-card-player.right {
  text-align: right;
}
.tip-card-vs {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tip-score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}
.tip-score-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.tip-score-group.right {
  justify-content: flex-end;
}
.tip-score-group.left {
  justify-content: flex-start;
}
.tip-score-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) ease;
  padding: 0;
  line-height: 1;
}
.tip-score-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 255, 136, 0.06);
}
.tip-score-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tip-score-input {
  width: 44px;
  height: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast) ease;
  -moz-appearance: textfield;
}
.tip-score-input::-webkit-outer-spin-button,
.tip-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tip-score-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.08);
}
.tip-score-colon {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dim);
}

.tip-winner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.tip-winner-btn {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  text-align: center;
}
.tip-winner-btn:hover {
  border-color: var(--green);
  color: var(--text-primary);
}
.tip-winner-btn.selected {
  border-color: var(--green);
  background: rgba(0, 255, 136, 0.1);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.1);
}

.tip-submit-row {
  display: flex;
  justify-content: flex-end;
}

/* tip-locked is now handled in Spieltag section below */

.tip-result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-sm);
}
.tip-result.exact {
  background: rgba(0, 255, 136, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 255, 136, 0.25);
}
.tip-result.correct {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.tip-result.wrong {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.tip-result.pending {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.tip-result svg {
  width: 12px;
  height: 12px;
}

.my-tip-card {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) ease;
}
.my-tip-card:last-child {
  border-bottom: none;
}
.my-tip-card:hover {
  background: rgba(0, 255, 136, 0.02);
}
.my-tip-matchup {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.my-tip-score {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  min-width: 60px;
}
.my-tip-actual {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  min-width: 60px;
}
.my-tip-points {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
  text-align: right;
  min-width: 40px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 32px 1fr repeat(4, 42px);
  gap: var(--sp-2);
  align-items: center;
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) ease;
}
.ranking-row:last-child {
  border-bottom: none;
}
.ranking-row:hover {
  background: rgba(0, 255, 136, 0.02);
}
.ranking-row.current-user {
  background: rgba(0, 255, 136, 0.04);
  border-left: 2px solid var(--green);
}
.ranking-pos {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-dim);
  text-align: center;
}
.ranking-pos.gold   { color: var(--gold); }
.ranking-pos.silver { color: #c0c0c0; }
.ranking-pos.bronze { color: #cd7f32; }
.ranking-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-stat {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  min-width: 36px;
}
.ranking-stat.points {
  color: var(--green);
  font-weight: 700;
}

.ranking-header {
  display: grid;
  grid-template-columns: 32px 1fr repeat(4, 42px);
  gap: var(--sp-2);
  padding: 8px var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.ranking-header span {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ranking-header span:nth-child(n+3) {
  text-align: right;
  min-width: 36px;
}

.my-tips-header {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--sp-4);
  padding: 8px var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.my-tips-header span {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.my-tips-header span:nth-child(n+2) {
  text-align: center;
  min-width: 60px;
}
.my-tips-header span:last-child {
  text-align: right;
  min-width: 40px;
}

.tip-bestof-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: center;
}

/* Tournament Tabs */
.tipp-tournament-tabs {
  margin-bottom: var(--sp-6);
}
.tipp-tabs {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  -webkit-overflow-scrolling: touch;
}
.tipp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  white-space: nowrap;
  min-width: 120px;
}
.tipp-tab:hover {
  border-color: var(--green);
  color: var(--text-primary);
}
.tipp-tab.active {
  border-color: var(--green);
  background: rgba(0, 255, 136, 0.08);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.08);
}
.tipp-tab-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-muted);
}
.tipp-tab-badge.live {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
  animation: pulse-subtle 2s ease-in-out infinite;
}
.tipp-tab-info {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-dim);
}

/* Prediction Card */
.tipp-prediction-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tipp-prediction-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  gap: var(--sp-3);
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.tipp-prediction-place {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.tipp-prediction-select {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast) ease;
}
.tipp-prediction-select:focus {
  border-color: var(--green);
}
.tipp-prediction-value {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.tipp-prediction-value.exact { color: var(--green); }
.tipp-prediction-value.partial { color: var(--amber); }
.tipp-prediction-value.wrong { color: var(--red); text-decoration: line-through; }
.tipp-prediction-pts {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-align: right;
}

/* Tip card status badges */
.tip-completed-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: var(--r-sm);
  padding: 2px 10px;
  font-family: var(--font-mono);
}
.tip-live-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--red);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--r-sm);
  padding: 2px 10px;
  font-family: var(--font-mono);
  animation: pulse-subtle 2s ease-in-out infinite;
}
.tip-completed {
  opacity: 0.6;
}
.tip-completed:hover {
  opacity: 0.85;
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.tip-auth-required {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10);
  text-align: center;
}
.tip-auth-required svg {
  width: 56px;
  height: 56px;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
  opacity: 0.4;
}
.tip-auth-required h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.tip-auth-required p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
  max-width: 400px;
}

@media (max-width: 768px) {
  .tip-card-matchup {
    gap: var(--sp-2);
  }
  .tip-card-player {
    font-size: 0.82rem;
  }
  .my-tip-card {
    grid-template-columns: 1fr auto auto;
  }
  .my-tip-actual {
    display: none;
  }
  .ranking-row {
    grid-template-columns: 28px 1fr 42px 42px;
  }
  .ranking-header {
    grid-template-columns: 28px 1fr 42px 42px;
  }
  .ranking-header span:nth-child(3),
  .ranking-header span:nth-child(4),
  .ranking-row .ranking-stat:nth-child(3),
  .ranking-row .ranking-stat:nth-child(4) {
    display: none;
  }
  .tipp-tabs {
    gap: var(--sp-2);
  }
  .tipp-tab {
    min-width: 100px;
    padding: 8px 14px;
    font-size: 0.75rem;
  }
  .tipp-prediction-row {
    grid-template-columns: 80px 1fr 40px;
    gap: var(--sp-2);
  }
}

/* ──── TIPPSPIEL: Spieltag Accordion ──── */
.spieltag-group {
  border-bottom: 1px solid var(--border);
}
.spieltag-group:last-child {
  border-bottom: none;
}
.spieltag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) ease;
}
.spieltag-header:hover {
  background: rgba(255,255,255,0.02);
}
.spieltag-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spieltag-chevron {
  transition: transform var(--t-fast) ease;
  flex-shrink: 0;
}
.spieltag-header.open .spieltag-chevron {
  transform: rotate(0deg);
}
.spieltag-header:not(.open) .spieltag-chevron {
  transform: rotate(-90deg);
}
.spieltag-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.spieltag-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 10px;
}
.spieltag-open {
  background: rgba(0, 255, 136, 0.08);
  color: var(--green);
}
.spieltag-live {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
  animation: pulse-subtle 2s ease-in-out infinite;
}
.spieltag-done {
  background: rgba(100, 116, 139, 0.08);
  color: var(--text-muted);
}
.spieltag-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.spieltag-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 16px;
}
.spieltag-body.open {
  max-height: 5000px;
  padding: 0 16px 16px;
}

/* ──── TIPPSPIEL: Odds/Quoten Bar ──── */
.tip-odds-bar {
  display: flex;
  height: 24px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-2);
  background: var(--bg-elevated);
  gap: 2px;
}
.tip-odds-bar-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  transition: width 0.5s ease;
}
.tip-odds-bar-fill:not(.right) {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.08));
}
.tip-odds-bar-fill.right {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.15));
}
.tip-odds-value {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.tip-odds-info {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
}
.tip-bestof-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.tip-locked-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: var(--r-sm);
  padding: 2px 10px;
  font-family: var(--font-mono);
}
.tip-locked {
  opacity: 0.7;
}
.tip-locked:hover {
  opacity: 0.85;
}
.tip-submit-row {
  margin-top: var(--sp-3);
  text-align: center;
}

/* ──── TIPPSPIEL V2: Points Banner ──── */
.tipp-points-banner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.tipp-points-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px var(--sp-4);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) ease;
}
.tipp-points-toggle:hover {
  color: var(--text-primary);
}
.tipp-points-toggle svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.tipp-points-chevron {
  margin-left: auto;
  transition: transform var(--t-normal) var(--ease-out);
}
.tipp-points-toggle.open .tipp-points-chevron {
  transform: rotate(180deg);
}
.tipp-points-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out), padding var(--t-slow) var(--ease-out);
  padding: 0 var(--sp-4);
}
.tipp-points-body.open {
  max-height: 300px;
  padding: 0 var(--sp-4) var(--sp-3);
}
.tipp-points-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
.tipp-points-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-1);
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.tipp-points-item.accent .tipp-points-val { color: var(--green); }
.tipp-points-item.gold .tipp-points-val { color: var(--gold); }
.tipp-points-item.warn .tipp-points-val { color: var(--red); }
.tipp-points-val {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.tipp-points-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.2;
}

/* ──── TIPPSPIEL V2: Stats Bar ──── */
.tipp-stats-bar {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.tipp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.tipp-stat-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.tipp-stat-val.green { color: var(--green); }
.tipp-stat-val.amber { color: var(--amber); }
.tipp-stat-lbl {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ──── TIPPSPIEL V2: Tap-to-Win Card ──── */
.tip-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  position: relative;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.tip-card-v2:hover {
  border-color: var(--border-light);
}
.tip-card-v2.tip-saved {
  border-color: rgba(0, 255, 136, 0.25);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.06);
}
.tip-card-v2.tip-locked {
  opacity: 0.65;
}
.tip-card-v2.tip-locked:hover {
  opacity: 0.8;
}
.tip-card-v2.tip-completed {
  opacity: 0.55;
}
.tip-card-v2.tip-completed:hover {
  opacity: 0.75;
}

/* Status badges (top-right) */
.tip-status-badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-sm);
  pointer-events: none;
}
.tip-status-badge.completed {
  color: var(--green);
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
}
.tip-status-badge.live {
  color: var(--red);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  animation: pulse-subtle 2s ease-in-out infinite;
}
.tip-status-badge.saved {
  color: var(--text-muted);
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* FT label (top-left) */
.tip-ft-label {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}

/* Player Zones — Tap-to-Win */
.tip-player-zones {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin: var(--sp-6) 0 var(--sp-2);
}
.tip-player-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  position: relative;
  min-height: 64px;
}
.tip-player-zone:hover:not(:disabled) {
  border-color: var(--green-dim);
  background: rgba(0, 255, 136, 0.04);
}
.tip-player-zone.selected {
  border-color: var(--green);
  background: rgba(0, 255, 136, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}
.tip-player-zone:disabled {
  cursor: default;
  opacity: 0.6;
}
.tip-player-zone.left {
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  border-right: 1px solid var(--border);
}
.tip-player-zone.right {
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  border-left: 1px solid var(--border);
}
.tip-player-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-align: center;
  word-break: break-word;
}
.tip-player-zone.selected .tip-player-name {
  color: var(--green);
}
.tip-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 var(--sp-2);
  background: var(--bg-card);
  z-index: 1;
}
.tip-winner-check {
  font-size: 1rem;
  color: var(--green);
  line-height: 1;
  font-weight: 700;
}

/* Loser Score Adjuster */
.tip-loser-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.tip-loser-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tip-loser-adjust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tip-adj-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) ease;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tip-adj-btn:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 255, 136, 0.06);
}
.tip-adj-btn:active:not(:disabled) {
  transform: scale(0.92);
}
.tip-adj-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tip-loser-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  min-width: 28px;
  text-align: center;
}

/* Save Indicator */
.tip-save-indicator {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  color: transparent;
  min-height: 18px;
  transition: color var(--t-fast) ease;
}
.tip-save-indicator.saving {
  color: var(--amber);
}
.tip-save-indicator.saved {
  color: var(--green);
}
.tip-save-indicator.error {
  color: var(--red);
}

/* ──── TIPPSPIEL V2: Prediction Enhancements ──── */
.tipp-pred-section-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
  padding-left: 2px;
}
.tipp-extra-select {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast) ease;
}
.tipp-extra-select:focus {
  border-color: var(--green);
}
.tipp-penalty-warning {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--red);
}
.tipp-penalty-warning svg {
  flex-shrink: 0;
  color: var(--red);
}
.tipp-change-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 1px 8px;
  min-width: 28px;
  margin-left: var(--sp-1);
}

/* ──── TIPPSPIEL V2: Rankings 6-Column ──── */
.ranking-header {
  grid-template-columns: 32px 1fr repeat(4, 42px);
}
.ranking-row {
  grid-template-columns: 32px 1fr repeat(4, 42px);
}
.ranking-stat.penalty {
  color: var(--red);
}

/* ──── TIPPSPIEL V2: Mobile Overrides ──── */
@media (max-width: 768px) {
  .tipp-points-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-1);
  }
  .tipp-points-item {
    padding: var(--sp-1);
  }
  .tipp-points-val {
    font-size: 0.85rem;
  }
  .tipp-points-label {
    font-size: 0.5rem;
  }

  .tipp-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .tipp-stat {
    padding: var(--sp-2);
  }
  .tipp-stat-val {
    font-size: 0.95rem;
  }

  .tip-card-v2 {
    padding: var(--sp-2) var(--sp-3);
  }
  .tip-player-zone {
    padding: var(--sp-3) var(--sp-2);
    min-height: 56px;
  }
  .tip-player-name {
    font-size: 0.78rem;
  }
  .tip-adj-btn {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  /* Rankings: hide Match + Bonus on mobile, show only Penalty + Total */
  .ranking-header {
    grid-template-columns: 28px 1fr 42px 42px;
  }
  .ranking-row {
    grid-template-columns: 28px 1fr 42px 42px;
  }
  .ranking-header span:nth-child(3),
  .ranking-header span:nth-child(4),
  .ranking-row .ranking-stat:nth-child(3),
  .ranking-row .ranking-stat:nth-child(4) {
    display: none;
  }

  .tipp-prediction-row {
    grid-template-columns: 70px 1fr 35px;
    gap: var(--sp-2);
    padding: 6px 10px;
  }
  .tipp-prediction-place {
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .tipp-points-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .tip-player-name {
    font-size: 0.72rem;
  }
  .tip-vs {
    font-size: 0.6rem;
    padding: 0 4px;
  }
}

/* ──── TOURNAMENT DETAIL PAGE ──── */
.tab-nav {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.tab-chip {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-chip:hover { border-color: var(--green); color: var(--text-primary); }
.tab-chip.active {
  background: rgba(0, 255, 136, 0.1);
  border-color: var(--green);
  color: var(--green);
}

[data-section].hidden { display: none; }

.tournament-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.tournament-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #059669, var(--green), #059669);
}
.tournament-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px;
  height: 100%;
  background: radial-gradient(ellipse at top right, rgba(0, 255, 136, 0.04), transparent 70%);
  pointer-events: none;
}
.tournament-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tournament-hero-info { flex: 1; min-width: 0; }
.tournament-hero h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.tournament-hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tournament-hero-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tournament-hero-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  max-width: 600px;
  line-height: 1.5;
}
.tournament-hero-players {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.tournament-hero-players .count {
  color: var(--green);
  font-size: 1.3rem;
  font-weight: 800;
}
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.admin-actions .btn {
  font-size: 0.78rem;
  padding: 8px 16px;
}
.admin-actions select {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
}
.standings-table thead th {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.standings-table thead th.center { text-align: center; }
.standings-table tbody tr {
  border-bottom: 1px solid rgba(35, 45, 63, 0.5);
  transition: background 0.15s ease;
}
.standings-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.standings-table tbody tr:last-child { border-bottom: none; }
.standings-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 0.82rem;
}
.standings-table tbody td.center { text-align: center; }
.standings-table .pos {
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  width: 30px;
  color: var(--text-muted);
}
.standings-table .pos.q1 {
  color: var(--green);
}
.standings-table .pts {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--green);
}
.standings-table .num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.standings-table .highlight {
  color: var(--text-primary);
  font-weight: 600;
}
.player-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.form-dots {
  display: flex;
  gap: 4px;
}
.form-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.form-dot.win { background: var(--green); box-shadow: 0 0 4px rgba(0,255,136,0.4); }
.form-dot.loss { background: var(--red); box-shadow: 0 0 4px rgba(239,68,68,0.3); }

.ko-bracket {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 16px 0;
}
.ko-round {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 220px;
}
.ko-round-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}
.ko-match {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.ko-match:hover { border-color: #059669; }
.ko-match-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.82rem;
  transition: background 0.15s ease;
}
.ko-match-player:first-child {
  border-bottom: 1px solid var(--border);
}
.ko-match-player.winner {
  background: rgba(0, 255, 136, 0.06);
}
.ko-match-player .name {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ko-match-player .name.tbd {
  color: var(--text-muted);
  font-style: italic;
}
.ko-match-player .score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 20px;
  text-align: center;
  color: var(--text-muted);
}
.ko-match-player.winner .score {
  color: var(--green);
}

.match-table {
  width: 100%;
  border-collapse: collapse;
}
.match-table thead th {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.match-table thead th.center { text-align: center; }
.match-table tbody tr {
  border-bottom: 1px solid rgba(35, 45, 63, 0.5);
  transition: background 0.15s ease;
}
.match-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.match-table tbody tr:last-child { border-bottom: none; }
.match-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 0.85rem;
}
.match-table tbody td.center { text-align: center; }
.match-table .score-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
}

.match-group-header {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border);
}

.stat-highlight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat-highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.stat-highlight:nth-child(1)::before { background: var(--green); }
.stat-highlight:nth-child(2)::before { background: var(--blue); }
.stat-highlight:nth-child(3)::before { background: var(--gold); }
.stat-highlight .label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.stat-highlight .value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-highlight:nth-child(2) .value { color: var(--blue); }
.stat-highlight:nth-child(3) .value { color: var(--gold); }
.stat-highlight .player-name {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-chart-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bar-chart-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 90px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-chart-track {
  flex: 1;
  height: 20px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
}
.bar-chart-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, var(--green));
  border-radius: 4px;
  transition: width 0.6s ease-out;
  min-width: 2px;
}
.bar-chart-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 42px;
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.player-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.player-mini-card:hover {
  border-color: #059669;
  transform: translateY(-2px);
}
.player-mini-card a {
  text-decoration: none;
  color: inherit;
}
.player-mini-card .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 auto 10px;
}
.player-mini-card .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.player-mini-card .stats-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.player-mini-card .stats-row span {
  font-family: var(--font-mono);
}
.player-mini-card .stats-row .val {
  font-weight: 600;
  color: var(--text-secondary);
}

.overview-results .result-match {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(35, 45, 63, 0.5);
}
.overview-results .result-match:last-child { border-bottom: none; }
.overview-results .result-match-players {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.overview-results .result-match-name {
  font-size: 0.85rem;
  font-weight: 600;
}
.overview-results .result-match-name.winner {
  color: var(--green);
}
.overview-results .result-match-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0 8px;
  color: var(--text-secondary);
}
.overview-results .result-match-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.match-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.match-status--scheduled { background: rgba(100,116,139,0.15); color: #94a3b8; }
.match-status--pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.match-status--ready { background: rgba(59,130,246,0.15); color: #3b82f6; }
.match-status--live, .match-status--in_game { background: rgba(0,255,136,0.15); color: var(--green); }
.match-status--completed { background: rgba(100,116,139,0.1); color: #64748b; }
.match-status--cancelled { background: rgba(239,68,68,0.1); color: var(--red); }

/* ──── Swiss Pairings ──── */
.swiss-pairings {
  display: flex;
  flex-direction: column;
}
.swiss-pairing {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 16px;
  border-bottom: 1px solid rgba(35, 45, 63, 0.5);
  transition: background 0.15s ease;
}
.swiss-pairing:last-child { border-bottom: none; }
.swiss-pairing:hover { background: rgba(255,255,255,0.02); }
.swiss-pairing.live { background: rgba(0,255,136,0.04); }
.swiss-pairing.bye {
  grid-template-columns: 1fr auto;
  background: rgba(245,158,11,0.03);
}
.swiss-pairing-player {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}
.swiss-pairing-player span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swiss-pairing-player.winner {
  color: var(--green);
}
.swiss-pairing-result {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  min-width: 50px;
}

/* ──── Spieltag Table (new) ──── */
.spieltag-table {
  width: 100%;
  border-collapse: collapse;
}
.spieltag-row td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(35, 45, 63, 0.4);
  vertical-align: middle;
}
.spieltag-row:last-child td { border-bottom: none; }
.spieltag-row:hover { background: rgba(255,255,255,0.015); }
.spieltag-row--live { background: rgba(0,255,136,0.04); }
.spieltag-row--live:hover { background: rgba(0,255,136,0.06); }
.spieltag-row--complete { opacity: 0.85; }
.spieltag-row--pending { opacity: 0.5; }
.spieltag-row--bye td { border-bottom: 1px solid rgba(245,158,11,0.1); }
.spieltag-row--bye:hover { background: rgba(245,158,11,0.03); }

.spieltag-num {
  width: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim, #475569);
  opacity: 0.6;
}
.spieltag-p1, .spieltag-p2 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
}
.spieltag-p1 {
  text-align: right;
  white-space: nowrap;
}
.spieltag-p1,
.spieltag-p2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spieltag-p1 { justify-content: flex-end; }
.spieltag-p2 { justify-content: flex-start; }
.spieltag-p1.winner, .spieltag-p2.winner { color: var(--green, #00ff88); }

.spieltag-score-cell {
  width: 80px;
  text-align: center;
  padding: 10px 4px !important;
}
.spieltag-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 3px 10px;
  border-radius: 6px;
}
.spieltag-score.completed {
  color: var(--text-primary, #f1f5f9);
  background: rgba(255,255,255,0.04);
}
.spieltag-score.live {
  color: var(--green, #00ff88);
  background: rgba(0,255,136,0.08);
  animation: pulse 2s infinite;
}
.spieltag-score.pending {
  color: var(--text-dim, #475569);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spieltag-score .divider {
  opacity: 0.4;
  font-weight: 400;
}
.spieltag-status {
  width: 30px;
  text-align: center;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #00ff88);
  animation: pulse 2s infinite;
}

tr[data-match-id]:hover {
  background: rgba(255,255,255,0.04) !important;
  cursor: pointer;
}
tr[data-match-id]:hover .spieltag-status svg {
  opacity: 1 !important;
}

/* ──── Score Input Modal ──── */
.score-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.score-input-player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.score-input-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score-input-fields {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.score-number-input {
  width: 52px;
  height: 48px;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  background: var(--bg-surface, #0e1117);
  border: 2px solid var(--border, #1e293b);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.score-number-input::-webkit-inner-spin-button,
.score-number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.score-number-input:focus {
  border-color: var(--green, #00ff88);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}
.score-input-divider {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dim, #475569);
}
.score-quick-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #1e293b);
  flex-wrap: wrap;
}
.score-quick {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  min-width: 42px;
  text-align: center;
}
.score-quick.active {
  background: rgba(0, 255, 136, 0.12) !important;
  border-color: rgba(0, 255, 136, 0.3) !important;
  color: var(--green, #00ff88) !important;
}

@media (max-width: 640px) {
  .spieltag-row td { padding: 8px 6px; }
  .spieltag-p1 span, .spieltag-p2 span { font-size: 0.78rem; }
  .spieltag-p1 .mini-avatar, .spieltag-p2 .mini-avatar { display: none; }
  .spieltag-score { font-size: 0.8rem; padding: 2px 6px; }
  .spieltag-num { width: 24px; font-size: 0.65rem; }
  .spieltag-score-cell { width: 60px; }
  .score-input-player .mini-avatar { display: none; }
  .score-input-name { font-size: 0.78rem; }
  .score-number-input { width: 44px; height: 42px; font-size: 1.2rem; }
}

/* ──── Match Detail Modal ──── */
.match-detail-modal {
  max-width: 640px;
  width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.match-detail-modal .modal-body {
  overflow-y: auto;
  flex: 1;
}

/* Match Detail Header */
.md-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, var(--bg-surface, #1c2333) 0%, var(--bg-card, #171d28) 100%);
  border-bottom: 1px solid var(--border, #232d3f);
}
.md-player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.md-player--right { justify-content: flex-end; }
.md-player-name {
  font-family: var(--font-display, 'Oxanium', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #f0f4f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-winner .md-player-name { color: var(--green, #00ff88); }
.md-winner .md-avatar {
  border: 2px solid var(--green, #00ff88);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}
.md-avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
  flex-shrink: 0;
}
.md-score-center {
  flex-shrink: 0;
  text-align: center;
  padding: 0 8px;
}
.md-score {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary, #f0f4f8);
  line-height: 1;
}
.md-score-sep {
  color: var(--text-dim, #475569);
  margin: 0 4px;
  font-weight: 400;
}
.md-game-info {
  font-family: var(--font-display, 'Oxanium', sans-serif);
  font-size: 0.68rem;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.md-duration {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--text-dim, #475569);
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Stats Comparison Table */
.md-stats-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #232d3f);
}
.md-section-title {
  font-family: var(--font-display, 'Oxanium', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
  margin-bottom: 12px;
}
.md-stats-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.md-stat-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(35, 45, 63, 0.3);
}
.md-stat-row:last-child { border-bottom: none; }
.md-stat-label {
  flex: 0 0 auto;
  width: 140px;
  text-align: center;
  font-family: var(--font-display, 'Oxanium', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.md-stat-val {
  flex: 1;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
}
.md-stat-left { text-align: right; padding-right: 12px; }
.md-stat-right { text-align: left; padding-left: 12px; }
.md-stat-val.md-better {
  color: var(--green, #00ff88);
  font-weight: 700;
}

/* Leg Table */
.md-legs-table {
  width: 100%;
  border-collapse: collapse;
}
.md-legs-table th {
  font-family: var(--font-display, 'Oxanium', sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim, #475569);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #232d3f);
  text-align: left;
}
.md-legs-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(35, 45, 63, 0.3);
  font-size: 0.82rem;
}
.md-legs-table tr:last-child td { border-bottom: none; }
.md-leg-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim, #475569);
  text-align: center;
}
.md-leg-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
}

/* Heatmap */
.md-heatmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.md-hm-player-name {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.md-heatmap-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.md-hm-seg {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  width: 36px;
  flex-shrink: 0;
}
.md-hm-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
}
.md-hm-bar {
  height: 100%;
  background: var(--green, #00ff88);
  border-radius: 3px;
  opacity: 0.6;
  transition: width 0.4s ease;
}
.md-hm-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim, #475569);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .match-detail-modal { max-width: 100vw; width: 100vw; }
  .md-header { flex-direction: column; gap: 12px; padding: 16px; }
  .md-player--right { justify-content: flex-start; flex-direction: row-reverse; }
  .md-score { font-size: 1.6rem; }
  .md-player-name { font-size: 0.82rem; }
  .md-stat-label { width: 100px; font-size: 0.65rem; }
  .md-stat-val { font-size: 0.78rem; }
  .md-heatmap-grid { grid-template-columns: 1fr; }
}

/* ──── Double Elimination Bracket ──── */
.de-bracket-section {
  margin-bottom: var(--sp-4);
}
.de-bracket-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.de-bracket-rounds {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 8px 0 16px;
}
.ko-match--live {
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0,255,136,0.15);
}
.ko-match-player.loser {
  opacity: 0.5;
}
.ko-match--bye {
  opacity: 0.6;
  border-style: dashed;
}
.ko-match--complete {
  border-color: var(--green);
  opacity: 0.85;
}

/* ──── Winner Banner ──── */
.winner-banner {
  margin: var(--sp-4) auto var(--sp-6);
  max-width: var(--content-w, 1200px);
  background: linear-gradient(135deg, #1a1c2e 0%, #0f172a 40%, #1a1c2e 100%);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  position: relative;
}
.winner-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.winner-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  position: relative;
  z-index: 1;
}
.winner-trophy {
  font-size: 3.5rem;
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.35));
  animation: trophyPulse 3s infinite;
  flex-shrink: 0;
}
@keyframes trophyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.winner-info { flex: 1; min-width: 0; }
.winner-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 2px;
}
.winner-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.winner-runnerup {
  margin-top: var(--sp-1);
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
}
.winner-runnerup strong { color: #c0c0c0; }
.winner-stats {
  display: flex;
  gap: var(--sp-5);
  flex-shrink: 0;
}
.winner-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.winner-stat-val {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #f1f5f9;
}
.winner-stat-lbl {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim, #64748b);
}
@media (max-width: 640px) {
  .winner-banner-inner { flex-direction: column; text-align: center; padding: var(--sp-5); }
  .winner-stats { justify-content: center; }
  .winner-name { font-size: 1.3rem; }
}

/* ──── Trophy Badges ──── */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-3);
}
.trophy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3);
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--radius);
  text-align: center;
  gap: var(--sp-1);
  transition: border-color 0.2s;
}
.trophy-card:hover { border-color: var(--text-muted); }
.trophy-card .trophy-icon { font-size: 1.8rem; line-height: 1; }
.trophy-card .trophy-name {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.trophy-card .trophy-date {
  font-size: 0.65rem;
  color: var(--text-dim, #64748b);
}
.trophy-card--gold { border-color: rgba(255,215,0,0.3); }
.trophy-card--silver { border-color: rgba(192,192,192,0.3); }
.trophy-card--bronze { border-color: rgba(205,127,50,0.3); }

/* ──── About / Steckbrief Card ──── */
.about-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.about-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--radius);
}
.about-info-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #64748b);
}
.about-info-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.about-bio {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent, #f97316);
}
@media (max-width: 480px) {
  .about-info-grid { grid-template-columns: 1fr; }
}

/* ──── Milestones / Bestleistungen ──── */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.milestone-item:hover {
  border-color: var(--text-muted);
  transform: translateY(-2px);
}
.milestone-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 4px;
}
.milestone-value {
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}
.milestone-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #64748b);
  margin-top: 2px;
}
@media (max-width: 480px) {
  .milestones-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ──── Achievements / Erfolge ──── */
.achievements-progress {
  margin-bottom: var(--sp-4);
}
.achievements-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-surface, #0f172a);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border, #1e293b);
}
.achievements-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #f97316), #fbbf24);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.achievements-progress-text {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #64748b);
  margin-top: 4px;
  text-align: right;
}
.achievement-category {
  margin-bottom: var(--sp-2);
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--radius);
  overflow: hidden;
}
.achievement-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface, #0f172a);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  border-bottom: 1px solid transparent;
}
.achievement-category-header:hover {
  background: rgba(249, 115, 22, 0.06);
}
.achievement-category-header.ach-expanded {
  border-bottom-color: var(--border, #1e293b);
}
.achievement-category-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.achievement-category-chevron {
  display: inline-block;
  font-size: 0.55rem;
  transition: transform 0.3s ease;
  color: var(--text-dim, #64748b);
}
.achievement-category-header.ach-expanded .achievement-category-chevron {
  transform: rotate(90deg);
}
.achievement-category-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.achievement-category-done {
  color: var(--green, #00ff88);
  font-size: 0.7rem;
  font-weight: 700;
}
.achievement-category-count {
  font-size: 0.65rem;
  color: var(--text-dim, #64748b);
  font-weight: 600;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.achievement-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--border, #1e293b);
  transition: border-color 0.2s, transform 0.15s;
}
.achievement-earned {
  background: var(--bg-surface, #0f172a);
}
.achievement-earned:hover {
  border-color: var(--accent, #f97316);
  transform: translateY(-1px);
}
.achievement-locked {
  background: transparent;
  opacity: 0.35;
  filter: grayscale(1);
}
.achievement-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.achievement-info {
  min-width: 0;
  flex: 1;
}
.achievement-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.achievement-desc {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.3;
}
.achievement-date {
  font-size: 0.62rem;
  color: var(--green, #00ff88);
  font-weight: 600;
  margin-top: 1px;
}
@media (max-width: 640px) {
  .achievement-grid { grid-template-columns: 1fr; }
}

.trophy-summary {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.trophy-summary-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
}

/* ──── Records Section (All-Time Records) ──── */
.records-section {
  margin-bottom: var(--sp-2);
}
.records-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green, #00ff88);
  margin-bottom: var(--sp-3);
}
.records-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
.record-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(135deg, rgba(0,255,136,0.04), rgba(0,255,136,0.01));
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.record-card:hover {
  border-color: rgba(0,255,136,0.35);
  background: linear-gradient(135deg, rgba(0,255,136,0.08), rgba(0,255,136,0.02));
}
.record-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.record-info {
  flex: 1;
  min-width: 0;
}
.record-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-value {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green, #00ff88);
}

/* Record holder badge in profile header */
.badge-record {
  background: linear-gradient(135deg, rgba(0,255,136,0.1), rgba(0,180,100,0.1));
  color: var(--green, #00ff88);
  border: 1px solid rgba(0,255,136,0.25);
}

/* ──── Add Player Modal Grid ──── */
.ap-player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-surface, #0e1117);
  border: 1.5px solid var(--border, #1e293b);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.ap-player-card:hover {
  border-color: rgba(0,255,136,0.25);
  background: rgba(0,255,136,0.03);
}
.ap-player-card.selected {
  border-color: var(--green);
  background: rgba(0,255,136,0.08);
  box-shadow: 0 0 8px rgba(0,255,136,0.1);
}
.ap-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,255,136,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Oxanium');
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.ap-player-card.selected .ap-avatar {
  background: linear-gradient(135deg, rgba(0,255,136,0.3), rgba(0,255,136,0.1));
}
.ap-name {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ap-check {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--border, #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.ap-player-card.selected .ap-check {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

/* ──── My Matches List ──── */
.my-matches-list {
  display: flex;
  flex-direction: column;
}
.my-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(35,45,63,0.5);
  transition: background 0.15s;
}
.my-match-row:last-child { border-bottom: none; }
.my-match-row:hover { background: rgba(255,255,255,0.02); }
.my-match-row.my-match--win { border-left: 3px solid var(--green); }
.my-match-row.my-match--loss { border-left: 3px solid var(--red); }
.my-match-row.my-match--live { border-left: 3px solid var(--green); background: rgba(0,255,136,0.03); }
.my-match-row.my-match--pending { border-left: 3px solid rgba(245,158,11,0.4); }
.my-match-opponent {
  display: flex;
  align-items: center;
  gap: 10px;
}
.my-match-opponent-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.my-match-badge {
  font-family: var(--font-display, 'Oxanium');
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-full, 100px);
}
.my-match-badge.win { background: rgba(0,255,136,0.12); color: var(--green); }
.my-match-badge.loss { background: rgba(239,68,68,0.12); color: var(--red); }
.my-match-badge.live { background: rgba(0,255,136,0.15); color: var(--green); animation: pulse 2s ease-in-out infinite; }
.my-match-badge.pending { background: rgba(245,158,11,0.12); color: #f59e0b; }
.my-match-score {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  min-width: 50px;
  text-align: center;
}
.my-match-score.dim {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (max-width: 768px) {
  .tournament-hero { padding: 20px; }
  .tournament-hero h1 { font-size: 1.4rem; }
  .tournament-hero-top { flex-direction: column; }
  .admin-actions { width: 100%; }
  .ko-bracket { gap: 24px; }
  .ko-round { min-width: 180px; }
  .bar-chart-label { min-width: 60px; font-size: 0.7rem; }
  .swiss-pairing { padding: 8px 12px; gap: var(--sp-2); }
  .de-bracket-rounds { gap: 20px; }
}

/* ──── EMPTY STATES ──── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
}

.empty-state .empty-icon {
  font-size: 3.5rem;
  margin-bottom: var(--sp-4);
  opacity: 0.3;
}

.empty-state .empty-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.empty-state .empty-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 340px;
  line-height: 1.5;
}


/* Landing page styles → moved to landing.css */

/* ════════════════════════════════════════════════════════════════════
   TOURNAMENT RANKINGS — Mode Switcher, Table, Legend
   ════════════════════════════════════════════════════════════════════ */

/* Mode Switcher Buttons */
.ranking-mode-switcher {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-1);
  border: 1px solid var(--border);
}

.ranking-mode-btn {
  flex: 1;
  padding: var(--sp-2) var(--sp-4);
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.ranking-mode-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.ranking-mode-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 90, 36, 0.3);
}

/* Mode Info Bar */
.ranking-mode-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
  margin-bottom: var(--sp-5);
  font-size: 0.85rem;
}

.ranking-mode-label {
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
}

.ranking-mode-desc {
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* First Place Row Highlight */
.ranking-first {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%) !important;
}

.ranking-first td:first-child {
  position: relative;
}

/* Hide columns on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Point System Legend */
.ranking-legend {
  margin-top: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.ranking-legend summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  user-select: none;
  transition: color 0.2s;
}

.ranking-legend summary:hover {
  color: var(--text);
}

.ranking-legend[open] summary {
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

.ranking-legend-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.legend-group h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 var(--sp-2) 0;
  font-family: var(--font-display);
}

.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-1) 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05));
}

.legend-item:last-child {
  border-bottom: none;
}

.legend-label {
  color: var(--text-dim);
}

.legend-pts {
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ── Profile Rank Badge ──────────────────────────────────────── */

.profile-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  margin-left: var(--sp-3);
  vertical-align: middle;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.profile-rank-badge.rank-first {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #1a1a1a;
  border: none;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
  animation: rank-glow 2s ease-in-out infinite alternate;
}

.profile-rank-badge.rank-top3 {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 90, 36, 0.3);
}

@keyframes rank-glow {
  from { box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); }
  to   { box-shadow: 0 2px 20px rgba(255, 215, 0, 0.6); }
}

/* ── Admin Ranking Settings ─────────────────────────────────── */

.ranking-mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.ranking-mode-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.ranking-mode-card:hover {
  border-color: var(--text-dim);
  transform: translateY(-2px);
}

.ranking-mode-card--active {
  border-color: var(--green);
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.12);
}

.ranking-mode-card--active:hover {
  border-color: var(--green);
}

.ranking-mode-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.ranking-mode-card-radio {
  flex-shrink: 0;
}

.ranking-mode-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.ranking-mode-radio--checked {
  border-color: var(--green);
  background: var(--green);
}

.ranking-mode-radio--checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg);
}

.ranking-mode-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.ranking-mode-card-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}

.ranking-mode-card-formula {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

.ranking-mode-card-formula code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--green);
}

/* Points system cards */
.ranking-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.ranking-points-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.ranking-points-card-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.ranking-points-table {
  width: 100%;
  border-collapse: collapse;
}

.ranking-points-table td {
  padding: var(--sp-1) 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.ranking-points-table td.ranking-pts-val {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 640px) {
  .ranking-mode-cards {
    grid-template-columns: 1fr;
  }
  .ranking-points-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Dashboard Countdown Banner ─────────────────────────────────── */

.dash-countdown-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.06) 0%, rgba(255, 90, 36, 0.06) 100%);
  border: 1px solid var(--green);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-5);
  position: relative;
  overflow: hidden;
}

.dash-countdown-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.03), transparent);
  animation: countdown-shimmer 3s ease-in-out infinite;
}

@keyframes countdown-shimmer {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(100%); }
}

.countdown-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.countdown-icon {
  font-size: 2rem;
  line-height: 1;
}

.countdown-event-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.countdown-event-date {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.countdown-timer {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}

.countdown-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: 0.05em;
}

.countdown-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.countdown-sep {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--text-dim);
  margin-top: -10px;
  animation: countdown-blink 1s ease-in-out infinite;
}

@keyframes countdown-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.countdown-btn {
  flex-shrink: 0;
  z-index: 1;
}

@media (max-width: 768px) {
  .dash-countdown-banner {
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .countdown-timer {
    margin-left: 0;
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .countdown-btn {
    order: 4;
    width: 100%;
    text-align: center;
  }
}

/* ── Dashboard Spotlight Player ─────────────────────────────────── */

.card--spotlight {
  border-color: rgba(255, 215, 0, 0.2);
}

.spotlight-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
}

.spotlight-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.spotlight-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.spotlight-crown {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  animation: crown-bounce 2s ease-in-out infinite;
}

@keyframes crown-bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-3px) rotate(5deg); }
}

.spotlight-info {
  flex: 1;
  min-width: 0;
}

.spotlight-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.spotlight-name:hover {
  color: var(--green);
}

.spotlight-trophies {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.spotlight-trophy {
  font-size: 0.85rem;
  font-weight: 600;
}

.spotlight-trophy--gold { color: #FFD700; }
.spotlight-trophy--silver { color: #C0C0C0; }
.spotlight-trophy--bronze { color: #CD7F32; }

.spotlight-stats-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.spotlight-stat {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.spotlight-stat strong {
  color: var(--text);
  font-family: var(--font-mono);
}

/* ── Top Player Medal (Dashboard) ───────────────────────────────── */

.top-player-rank-medal {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.top-player-quotient {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--green);
  flex-shrink: 0;
}

.top-player-row--first {
  background: rgba(255, 215, 0, 0.05);
  border-radius: var(--r-md);
  margin: 0 calc(var(--sp-2) * -1);
  padding-left: var(--sp-2) !important;
  padding-right: var(--sp-2) !important;
}


/* ================================================================
   HALL OF FAME
   ================================================================ */

.hof-trophy-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, rgba(255,165,0,0.04) 50%, var(--bg-card) 100%);
  border: 1px solid rgba(255,215,0,0.2);
  margin-bottom: var(--sp-6);
  overflow: hidden;
}

.hof-trophy-glow {
  position: absolute;
  top: -50%;
  left: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: hof-glow-pulse 4s ease-in-out infinite;
}

@keyframes hof-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.hof-trophy-icon {
  font-size: 4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.4));
  animation: hof-trophy-float 3s ease-in-out infinite;
}

@keyframes hof-trophy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hof-trophy-info {
  flex: 1;
  min-width: 0;
}

.hof-trophy-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold, #FFD700);
  margin-bottom: var(--sp-1);
}

.hof-trophy-holder {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.hof-trophy-subtitle {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.hof-trophy-avatar-wrap {
  flex-shrink: 0;
}

.hof-trophy-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,215,0,0.4);
  box-shadow: 0 0 30px rgba(255,215,0,0.2);
}

.hof-trophy-avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-dim);
  border: 3px dashed var(--border);
}

/* Timeline */
.hof-timeline {
  position: relative;
  padding-left: var(--sp-8);
}

.hof-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold, #FFD700) 0%, var(--border) 100%);
}

.hof-tl-item {
  position: relative;
  margin-bottom: var(--sp-4);
}

.hof-tl-marker {
  position: absolute;
  left: calc(var(--sp-8) * -1 + 4px);
  top: var(--sp-4);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--border-light);
}

.hof-tl-item--latest .hof-tl-marker {
  border-color: var(--gold, #FFD700);
  background: rgba(255,215,0,0.2);
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

.hof-tl-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: border-color 0.2s;
}

.hof-tl-card:hover {
  border-color: var(--border-focus);
}

.hof-tl-item--latest .hof-tl-card {
  border-color: rgba(255,215,0,0.3);
  background: linear-gradient(135deg, rgba(255,215,0,0.05), var(--bg-surface));
}

.hof-tl-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hof-tl-tournament {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.hof-tl-winner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hof-tl-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-light);
  flex-shrink: 0;
}

.hof-tl-avatar-init {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dim);
  border: 2px solid var(--border-light);
  flex-shrink: 0;
}

.hof-tl-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.hof-tl-name:hover {
  color: var(--green);
}

.hof-tl-runner-up {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Champions */
.hof-champion-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.hof-champion-row:last-child { border-bottom: 0; }

.hof-champion-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.hof-champion-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
  border: 2px solid var(--border-light);
  flex-shrink: 0;
  overflow: hidden;
}

.hof-champion-info { flex: 1; min-width: 0; }

.hof-champion-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: block;
}

.hof-champion-name:hover { color: var(--green); }

.hof-champion-trophies {
  display: flex;
  gap: var(--sp-2);
  margin-top: 2px;
}

.hof-trophy-badge {
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
}

.hof-trophy-badge--gold { color: #FFD700; }
.hof-trophy-badge--silver { color: #C0C0C0; }
.hof-trophy-badge--bronze { color: #CD7F32; }

.hof-champion-total {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold, #FFD700);
  flex-shrink: 0;
}

/* Records */
.hof-record-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.hof-record-row:last-child { border-bottom: 0; }

.hof-record-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}

.hof-record-info { flex: 1; min-width: 0; }

.hof-record-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.hof-record-player {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.hof-record-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--green);
  flex-shrink: 0;
}

/* Podium Bars */
.hof-podium-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
}

.hof-podium-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text);
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hof-podium-bar-wrap {
  flex: 1;
  height: 24px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.hof-podium-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-600), var(--green-400));
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  padding-left: var(--sp-2);
  transition: width 0.8s ease;
  min-width: 60px;
}

.hof-podium-bar-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}


/* ================================================================
   HEAD-TO-HEAD
   ================================================================ */

.h2h-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  justify-content: center;
}

.h2h-player-select {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 200px;
}

.h2h-select-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--border-light);
  overflow: hidden;
  color: var(--text-dim);
}

.h2h-dropdown {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}

.h2h-dropdown:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}

.h2h-vs-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-600), var(--green-400));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(34,197,94,0.3);
}

.h2h-compare-btn {
  flex-shrink: 0;
}

/* Score Banner */
.h2h-score-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}

.h2h-score-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}

.h2h-score-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-light);
}

.h2h-score-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-align: center;
}

.h2h-score-center {
  text-align: center;
  flex-shrink: 0;
}

.h2h-score-wins {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.05em;
}

.h2h-score-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-display);
}

/* Stats Comparison */
.h2h-stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.h2h-stat-row:last-child { border-bottom: 0; }

.h2h-stat-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.h2h-stat-val:first-child { text-align: right; }
.h2h-stat-val:last-child { text-align: left; }

.h2h-stat-val--winner {
  color: var(--green);
}

.h2h-stat-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* ================================================================
   HIGHLIGHTS
   ================================================================ */

.hl-list {
  padding: 0;
}

.hl-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.hl-row:last-child { border-bottom: 0; }
.hl-row:hover { background: rgba(255,255,255,0.02); }

.hl-row--top {
  background: rgba(34,197,94,0.04);
}

.hl-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
  width: 34px;
  text-align: center;
  flex-shrink: 0;
}

.hl-row--top:nth-child(1) .hl-rank { color: #FFD700; }
.hl-row--top:nth-child(2) .hl-rank { color: #C0C0C0; }
.hl-row--top:nth-child(3) .hl-rank { color: #CD7F32; }

.hl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-light);
  flex-shrink: 0;
}

.hl-avatar-init {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.hl-info { flex: 1; min-width: 0; }

.hl-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: block;
}

.hl-name:hover { color: var(--green); }

.hl-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 1px;
}

.hl-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

.hl-value--avg { color: var(--green); }
.hl-value--checkout { color: #FF6B6B; }

.hl-match-info { flex: 1; min-width: 0; }

.hl-match-players {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.hl-match-winner {
  font-weight: 700;
  color: var(--green);
}

.hl-match-loser {
  color: var(--text-dim);
}

.hl-match-name {
  font-weight: 600;
  color: var(--text);
}

.hl-match-score {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  padding: 1px 8px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
}

.hl-match-score--close {
  color: #FF6B6B;
  background: rgba(255,107,107,0.1);
}


/* ================================================================
   SOCIAL MEDIA PAGE
   ================================================================ */

.social-links-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.social-link-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.social-link-card:hover {
  border-color: var(--border-focus);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.social-link-card--instagram:hover { border-color: #E4405F; }
.social-link-card--youtube:hover { border-color: #FF0000; }
.social-link-card--tiktok:hover { border-color: #00f2ea; }
.social-link-card--twitch:hover { border-color: #9146FF; }

.social-link-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text);
}

.social-link-card--instagram .social-link-icon { color: #E4405F; }
.social-link-card--youtube .social-link-icon { color: #FF0000; }
.social-link-card--tiktok .social-link-icon { color: #00f2ea; }
.social-link-card--twitch .social-link-icon { color: #9146FF; }

.social-link-info { flex: 1; }

.social-link-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}

.social-link-handle {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.social-link-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.social-link-card:hover .social-link-arrow {
  transform: translateX(4px);
  color: var(--text);
}

.social-feed-placeholder {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-dim);
}

.social-feed-placeholder h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin-top: var(--sp-4);
}

.social-feed-icon {
  color: var(--border-light);
}

/* ── Instagram Feed Grid ── */
.ig-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-2);
}

@media (max-width: 640px) {
  .ig-feed-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
}

@media (max-width: 380px) {
  .ig-feed-grid {
    grid-template-columns: 1fr;
  }
}

.ig-feed-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.ig-feed-card:hover {
  transform: translateY(-3px);
  border-color: #E1306C;
  box-shadow: 0 8px 24px rgba(225, 48, 108, 0.15);
}

.ig-feed-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-dark);
}

.ig-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.ig-feed-card:hover .ig-feed-img {
  transform: scale(1.06);
}

/* Video / Carousel badge */
.ig-feed-badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background: rgba(0, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.ig-feed-badge--video { color: #fff; }
.ig-feed-badge--carousel { color: #fff; }

/* Hover overlay with caption */
.ig-feed-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ig-feed-card:hover .ig-feed-overlay {
  opacity: 1;
}

.ig-feed-caption {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Timestamp below image */
.ig-feed-time {
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: var(--sp-2) var(--sp-2);
  text-align: center;
  font-family: var(--font-body);
}


/* ================================================================
   COMMUNITY CHAT
   ================================================================ */

/* ================================================================
   COMMUNITY CHAT v2 — Premium Redesign
   ================================================================ */

/* ── Layout ──────────────────────────────────────────────────── */

.chat2-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-4);
  margin-bottom: 0;
  min-height: calc(100vh - 180px);
  min-height: calc(100dvh - 180px);
}

.chat2-main { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow: hidden; }
.chat2-sidebar { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ================================================================
   FALKEN CHAT v5 — New Layout (fc-* classes)
   Full-viewport, left sidebar + right main area
   ================================================================ */

/* Chat page: content area fills viewport edge-to-edge */
[data-page="chat"] .app-content {
  max-width: none;
  padding: 0;
  overflow: hidden;
}

/* Outer wrapper: fills available page space, no page scroll */
.fc-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 64px); /* 64px = topbar height */
  height: calc(100dvh - 64px);
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  gap: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

/* ── Left Sidebar ───────────────────────────────────────────── */

.fc-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-deep, #0d1117);
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}

/* Sidebar tab header */
.fc-sidebar-header {
  display: flex;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.fc-stab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
  top: 1px;
}

.fc-stab:hover { color: var(--text-primary); }

.fc-stab--active,
.fc-stab.chat-tabs__btn--active {
  color: var(--green, #22c55e);
  border-bottom-color: var(--green, #22c55e);
}

.fc-stab-badge {
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  line-height: 1.4;
  min-width: 16px;
  text-align: center;
}

/* Inbox list inside sidebar */
.fc-inbox-pane {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fc-inbox-list {
  display: flex;
  flex-direction: column;
}

/* Collapsible sections in sidebar */
.fc-section {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.fc-section:last-child { border-bottom: none; }

.fc-section-hd {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px var(--sp-3);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s, background 0.15s;
}

.fc-section-hd:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }

.fc-section-icon { font-size: 0.9rem; }

.fc-section-title { flex: 1; }

.fc-section-badge {
  background: var(--green, #22c55e);
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.fc-chevron {
  transition: transform 0.2s;
  opacity: 0.5;
  flex-shrink: 0;
}

.is-collapsed .fc-chevron { transform: rotate(-90deg); }

.fc-section-body {
  overflow: hidden;
  max-height: 999px;
  transition: max-height 0.25s ease;
}

.fc-section-body.collapsed { max-height: 0; }

/* Online users section: scrollable */
#panel-online .fc-section-body {
  max-height: 200px;
  overflow-y: auto;
}

#panel-online.is-collapsed .fc-section-body { max-height: 0; overflow: hidden; }

/* Facts section: scrollable */
#panel-facts .fc-section-body {
  overflow-y: auto;
}

/* Dart tip row */
.fc-tip-section {
  padding: 0;
  border-bottom: 1px solid var(--border);
}

.fc-tip-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
}

.fc-tip-dart {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.fc-tip-text {
  flex: 1;
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.45;
  transition: opacity 0.2s;
}

.fc-tip-refresh {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: color 0.15s;
}

.fc-tip-refresh:hover { color: var(--green, #22c55e); }

.fc-facts-list { padding: var(--sp-2) var(--sp-3); }

.fc-fact-shuffle {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  transition: color 0.15s;
}

.fc-fact-shuffle:hover { color: var(--accent, #6366f1); }

.fc-empty-hint {
  padding: var(--sp-3);
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
}

/* ── Main Chat Area ─────────────────────────────────────────── */

.fc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: none; /* override old .chat2-main max-height */
  overflow: hidden;
  background: var(--bg-panel);
}

/* Main header */
.fc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep, #0d1117);
  flex-shrink: 0;
  gap: var(--sp-3);
}

.fc-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.fc-header-dart {
  font-size: 1.1rem;
  line-height: 1;
}

.fc-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

.fc-header-accent {
  color: var(--green, #22c55e);
}

.fc-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Control buttons (Twitch, Live) */
.fc-ctrl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.fc-ctrl-btn:hover,
.fc-ctrl-btn.active {
  color: #9146FF;
  border-color: #9146FF;
  background: rgba(145, 70, 255, 0.08);
}

.fc-live-btn:hover,
.fc-live-btn.active {
  color: var(--amber, #f59e0b);
  border-color: var(--amber, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
}

/* Online pill */
.fc-online-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green, #22c55e);
  white-space: nowrap;
}

.fc-online-label { color: var(--text-dim); font-weight: 500; }

/* Chat body: DM bar + messages + input */
.fc-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* DM bar */
.fc-dm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--sp-5);
  background: rgba(99, 102, 241, 0.08);
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  flex-shrink: 0;
  gap: var(--sp-3);
}

.fc-dm-bar-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.fc-dm-bar-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.fc-dm-bar-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}

.fc-dm-bar-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }

/* Messages area */
.fc-messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scroll-behavior: smooth;
}

/* Bot command autocomplete */
.fc-cmd-suggest {
  flex-shrink: 0;
  padding: 6px var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-deep, #0d1117);
}

/* Quick emoji row */
.fc-emoji-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-deep, #0d1117);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Input area */
.fc-input-area {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--bg-deep, #0d1117);
  flex-shrink: 0;
}

.fc-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-input, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 4px 4px 8px;
  transition: border-color 0.15s;
}

.fc-input-wrap:focus-within { border-color: var(--green, #22c55e); }
.fc-input-wrap.bot-mode { border-color: #818cf8; }
.fc-input-wrap.dm-mode { border-color: #818cf8; }

.fc-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: var(--font-body);
  padding: 6px 4px;
  min-width: 0;
}

.fc-input::placeholder { color: var(--text-dim); }

.fc-vis-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.fc-vis-btn:hover { color: var(--text-secondary); }
.fc-vis-btn.private { color: #818cf8; border-color: #818cf8; }

.fc-vis-label-text {
  display: none; /* hidden on small widths, shown on wider */
}

@media (min-width: 900px) {
  .fc-vis-label-text { display: inline; }
}

.fc-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--green, #22c55e);
  color: #000;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.fc-send-btn:hover { background: #16a34a; }
.fc-send-btn:active { transform: scale(0.93); }
.fc-send-btn:disabled { background: var(--bg-input); color: var(--text-dim); cursor: not-allowed; }
.fc-send-btn.sending { background: var(--text-dim); }

/* ── Sticker & Voice Buttons ──────────────────────────────── */
.fc-sticker-btn, .fc-voice-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.fc-sticker-btn:hover, .fc-voice-btn:hover { color: var(--primary); background: rgba(255,255,255,0.05); }
.fc-voice-btn.recording { color: #ef4444; animation: fc-pulse 1s infinite; }
@keyframes fc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Reply Bar ────────────────────────────────────────────── */
.fc-reply-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  background: rgba(99,102,241,0.08);
  border-left: 3px solid #6366f1;
  border-radius: var(--r-sm);
  margin: 0 var(--sp-3) 4px;
  font-size: 0.78rem;
}
.fc-reply-bar-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.fc-reply-bar-label { color: #6366f1; font-weight: 600; }
.fc-reply-bar-name { color: var(--text); }
.fc-reply-bar-preview { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-reply-bar-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.2rem; padding: 2px 6px; }
.fc-reply-bar-close:hover { color: #ef4444; }

/* ── Reply Preview in Message ─────────────────────────────── */
.fc-reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  background: rgba(99,102,241,0.06);
  border-left: 2px solid #6366f1;
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  cursor: pointer;
}
.fc-reply-preview-name { color: #6366f1; font-weight: 600; }
.fc-reply-preview-text { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Message Actions (hover) ──────────────────────────────── */
.fc-msg-actions {
  display: none;
  position: absolute;
  top: -6px;
  right: 4px;
  gap: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
  box-shadow: var(--shadow-md);
  z-index: 5;
}
.chat2-msg { position: relative; }
.chat2-msg:hover .fc-msg-actions { display: flex; }
.fc-action-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  position: relative;
}
.fc-action-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.fc-action-delete:hover { color: #ef4444; }

/* ── Reaction Picker (inside action button) ───────────────── */
.fc-reaction-picker {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 2px;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  white-space: nowrap;
}
.fc-action-react:hover .fc-reaction-picker { display: flex; }
.fc-reaction-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: transform 0.15s, background 0.15s;
}
.fc-reaction-btn:hover { transform: scale(1.3); background: rgba(255,255,255,0.08); }

/* ── Reaction Badges ──────────────────────────────────────── */
.fc-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.fc-reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.fc-reaction-badge:hover { background: rgba(255,255,255,0.1); }
.fc-reaction-badge--own { border-color: #6366f1; background: rgba(99,102,241,0.1); }

/* ── Typing Indicator ─────────────────────────────────────── */
.fc-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.fc-typing-dots { display: flex; gap: 3px; }
.fc-typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: fc-typing-dot 1.4s infinite ease-in-out;
}
.fc-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.fc-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fc-typing-dot { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ── Pinned Banner ────────────────────────────────────────── */
.fc-pinned-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(245,158,11,0.06);
  border-bottom: 1px solid rgba(245,158,11,0.15);
  font-size: 0.78rem;
  color: var(--text);
}
.fc-pinned-icon { font-size: 0.9rem; }
.fc-pinned-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pinned-toggle { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; }
.fc-pin-badge { font-size: 0.7rem; margin-left: 4px; }

/* ── Custom Status ────────────────────────────────────────── */
.fc-custom-status {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-left: 4px;
  opacity: 0.8;
}

/* ── Deleted Message ──────────────────────────────────────── */
.chat2-msg--deleted .chat2-msg-body { opacity: 0.5; }
.fc-deleted-text { font-style: italic; color: var(--text-dim); }

/* ── Pinned Message ───────────────────────────────────────── */
.chat2-msg--pinned { border-left: 2px solid #f59e0b; padding-left: 8px; }

/* ── Read Receipt ─────────────────────────────────────────── */
.fc-read-receipt {
  font-size: 0.65rem;
  color: #3b82f6;
  margin-left: 4px;
  font-weight: 600;
}

/* ── Auto-links ───────────────────────────────────────────── */
.fc-auto-link { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }
.fc-auto-link:hover { color: #93c5fd; }

/* ── @Mention self highlight (improved) ───────────────────── */
.chat-mention--self {
  background: rgba(99,102,241,0.2) !important;
  border-radius: 3px;
  padding: 1px 4px;
}

/* ── Sticker Display ──────────────────────────────────────── */
.fc-sticker-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.fc-sticker-picker {
  position: absolute;
  bottom: 100%;
  right: 40px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 20;
  max-width: 320px;
}
.fc-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.fc-sticker-item {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.fc-sticker-item:hover { background: rgba(255,255,255,0.06); border-color: var(--border); }

/* ── Voice Message ────────────────────────────────────────── */
.fc-voice-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(99,102,241,0.06);
  border-radius: var(--r-md);
  border: 1px solid rgba(99,102,241,0.15);
}
.fc-voice-player {
  height: 32px;
  max-width: 200px;
  flex: 1;
}
.fc-voice-duration { font-size: 0.7rem; color: var(--text-dim); }

/* ── Poll Card ────────────────────────────────────────────── */
.fc-poll-badge { font-size: 0.68rem; color: #22c55e; margin-left: 6px; }
.fc-poll-card {
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: var(--r-md);
  padding: 12px;
  margin-top: 6px;
}
.fc-poll-question { font-weight: 600; margin-bottom: 8px; font-size: 0.85rem; }
.fc-poll-options { display: flex; flex-direction: column; gap: 6px; }
.fc-poll-option {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
  color: var(--text);
}
.fc-poll-option:hover { border-color: #22c55e; }
.fc-poll-option--voted { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.fc-poll-option-text { position: relative; z-index: 1; }
.fc-poll-option-bar { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; }
.fc-poll-option-fill {
  height: 100%;
  background: rgba(34,197,94,0.1);
  transition: width 0.5s ease;
  border-radius: var(--r-sm);
}
.fc-poll-timer { font-size: 0.68rem; color: var(--text-dim); margin-top: 6px; }

.fc-input-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: 5px;
  padding: 0 4px;
}

.fc-meta-label {
  font-size: 0.68rem;
  color: #818cf8;
}

.fc-char-count {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-dim);
}

/* ── Mobile Chat Nav override ───────────────────────────────── */
/* On mobile the main app nav must be hidden for chat page.
   We handle this via the mobile nav at bottom. */

@media (max-width: 900px) {
  .fc-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 56px); /* 56px = chat mobile nav */
    max-height: calc(100dvh - 56px);
    border-radius: 0;
    border: none;
    margin: 0;
  }

  .fc-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px; /* above mobile nav */
    z-index: 50;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .fc-sidebar.chat2-sidebar--mobile-visible {
    display: flex;
  }

  .fc-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .fc-header {
    padding: 8px var(--sp-3);
  }

  .fc-header-title { font-size: 0.88rem; }

  .fc-messages {
    padding: var(--sp-3);
  }

  .fc-emoji-row {
    padding: 4px var(--sp-3);
    gap: 2px;
  }

  .fc-input-area {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
  }

  .fc-cmd-suggest {
    padding: 5px var(--sp-3);
  }

  /* Inbox pane full height on mobile */
  .fc-inbox-pane {
    max-height: 100%;
  }

  /* Online panel expanded on mobile when visible */
  .chat2-sidebar--mobile-visible #panel-online .fc-section-body {
    max-height: none;
    overflow-y: auto;
  }
}

/* ── Chat Page: Mobile Fullscreen Mode ───────────────────────── */
/* Hide ALL main app chrome and show only the chat's own bottom
   nav for a true fullscreen chat experience — no double nav bars. */

@media (max-width: 900px) {
  [data-page="chat"] .app-sidebar,
  [data-page="chat"] .sidebar-overlay {
    display: none !important;
    transform: none !important;
  }

  [data-page="chat"] .app-topbar {
    display: none !important;
  }

  [data-page="chat"] .bottom-nav {
    display: none !important;
  }

  [data-page="chat"] .app-main {
    margin-left: 0;
    min-height: auto;
  }

  [data-page="chat"] .app-content {
    padding: 0 !important;
    padding-bottom: 0 !important;
  }

  [data-page="chat"] .chat-mobile-nav {
    display: flex;
  }
}

/* ── Mobile Bottom Navigation ────────────────────────────────── */

.chat-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 4px 0;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
}

.chat-mobile-nav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.chat-mobile-nav__btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: all var(--t-fast) ease;
}

.chat-mobile-nav__btn--active {
  color: var(--green);
}

.chat-mobile-nav__btn--active svg {
  stroke: var(--green);
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.3));
}

.chat-mobile-nav__btn--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--green);
  border-radius: 0 0 2px 2px;
}

.chat-mobile-nav__badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red, #ef4444);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.chat-mobile-nav__dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 16px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── Online Pill (Header) ────────────────────────────────────── */

.chat2-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
}

.chat2-online-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: online-pulse 2s ease-in-out infinite;
}

/* ── Tip Banner ──────────────────────────────────────────────── */

.chat2-tip-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255,107,107,0.06) 0%, rgba(255,165,0,0.04) 50%, rgba(34,197,94,0.04) 100%);
  border: 1px solid rgba(255,107,107,0.12);
  overflow: hidden;
}

.chat2-tip-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,107,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.chat2-tip-icon { font-size: 1.4rem; flex-shrink: 0; }

.chat2-tip-text {
  flex: 1;
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.chat2-tip-refresh {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.chat2-tip-refresh:hover {
  color: var(--green);
  border-color: var(--green);
  transform: rotate(180deg);
}

/* ── Chat Container ──────────────────────────────────────────── */

.chat2-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.chat2-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), #6366f1, #9146FF, var(--amber));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 1;
}

.chat2-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scroll-behavior: smooth;
}

/* Custom scrollbar */
.chat2-messages::-webkit-scrollbar { width: 6px; }
.chat2-messages::-webkit-scrollbar-track { background: transparent; }
.chat2-messages::-webkit-scrollbar-thumb {
  background: rgba(0,255,136,0.15);
  border-radius: 3px;
}
.chat2-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,255,136,0.3); }

/* ── Messages ────────────────────────────────────────────────── */

.chat2-msg {
  display: flex;
  gap: var(--sp-3);
  max-width: 78%;
  animation: chatMsgIn 0.25s ease-out;
  transition: transform 0.15s ease;
}
.chat2-msg:hover { transform: translateX(2px); }
.chat2-msg--own:hover { transform: translateX(-2px); }

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

.chat2-msg--own {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat2-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-light);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.chat2-msg:hover .chat2-msg-avatar { transform: scale(1.08); }

.chat2-msg-body {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: var(--sp-2) var(--sp-3);
  min-width: 100px;
  transition: border-color 0.15s;
}

.chat2-msg--own .chat2-msg-body {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.18);
  border-radius: 14px 14px 4px 14px;
}

.chat2-msg:hover .chat2-msg-body { border-color: rgba(34,197,94,0.3); }

.chat2-msg-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: 2px;
}

.chat2-msg-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--green);
}

.chat2-msg-time {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  opacity: 0.7;
}

.chat2-msg-text {
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.45;
}

/* ── Actions Bar ─────────────────────────────────────────────── */

.chat2-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.02);
}

.chat2-emoji-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.chat2-emoji-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 3px 7px;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.chat2-emoji-btn:hover {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.2);
  transform: scale(1.2) translateY(-2px);
}

.chat2-bot-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.chat2-bot-toggle:hover,
.chat2-bot-toggle.active {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.3);
  color: #818cf8;
}

/* ── Input Area ──────────────────────────────────────────────── */

.chat2-input-area {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

.chat2-input-wrap {
  display: flex;
  gap: var(--sp-2);
}

.chat2-input {
  flex: 1;
  padding: 10px var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  transition: all 0.2s;
}

.chat2-input:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}

.chat2-send-btn {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.chat2-send-btn:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.chat2-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.chat2-send-btn.sending { animation: sendPulse 0.6s ease; }

@keyframes sendPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.chat2-input-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding: 0 var(--sp-2);
}

.chat2-char-count {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  transition: color 0.2s;
}

.chat2-char-warn { color: var(--amber) !important; }

/* ── Sidebar Panels (collapsible) ────────────────────────────── */

.chat2-panel {
  background: rgba(19,24,32,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.chat2-panel:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(-1px); }

.chat2-panel-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px var(--sp-3);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
}

.chat2-panel-toggle:hover { background: rgba(255,255,255,0.02); }

.chat2-panel-icon { font-size: 1rem; }

.chat2-panel-title { flex: 1; }

.chat2-panel-badge {
  background: var(--green);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.chat2-panel-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
  color: var(--text-dim);
}

.chat2-panel.is-collapsed .chat2-panel-chevron { transform: rotate(-90deg); }

.chat2-panel-body {
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 1;
  border-top: 1px solid var(--border);
}

.chat2-panel-body.collapsed {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}

/* ── Online Users (enriched) ─────────────────────────────────── */

.chat2-online-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.15s;
}

.chat2-online-user:last-child { border-bottom: 0; }
.chat2-online-user:hover { background: rgba(34,197,94,0.04); }

.chat2-online-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chat2-online-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.chat2-online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg-card);
  animation: online-pulse 2s ease-in-out infinite;
}

.chat2-online-info { flex: 1; min-width: 0; }

.chat2-online-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat2-online-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.chat2-online-name:hover { color: var(--green); }

.chat2-user-badges {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

.chat2-user-badge {
  font-size: 0.65rem;
  line-height: 1;
  cursor: help;
}

.chat2-user-stat {
  display: block;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  margin-top: 1px;
}

.chat2-online-page {
  display: block;
  font-size: 0.6rem;
  color: var(--text-dim);
  opacity: 0.7;
}

/* ── Bot Messages in Chat ────────────────────────────────────── */

.chat2-msg--bot {
  max-width: 88%;
}

.chat2-msg--bot .chat2-msg-avatar {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: white;
  font-size: 0.75rem;
}

.chat2-msg--bot .chat2-msg-bubble {
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.2);
  border-left: 3px solid #6366f1;
}

.chat2-bot-card {
  margin-top: 6px;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.chat2-bot-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(99,102,241,0.06);
  border-bottom: 1px solid rgba(99,102,241,0.1);
}

.chat2-bot-card-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(99,102,241,0.3);
}

.chat2-bot-card-header-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.chat2-bot-card-header-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.chat2-bot-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(99,102,241,0.08);
}

.chat2-bot-card-stat {
  background: var(--bg-panel);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
}

.chat2-bot-card-stat-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green);
}

.chat2-bot-card-stat-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Checkout card */
.chat2-bot-checkout {
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.chat2-bot-checkout-score {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  min-width: 60px;
  text-align: center;
}

.chat2-bot-checkout-path {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text);
  letter-spacing: 1px;
}

.chat2-bot-checkout-bogey {
  color: var(--amber);
  font-style: italic;
}

/* H2H card */
.chat2-bot-h2h {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  text-align: center;
}

.chat2-bot-h2h-player {
  padding: var(--sp-3);
}

.chat2-bot-h2h-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.chat2-bot-h2h-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--sp-2);
  border: 2px solid rgba(99,102,241,0.3);
}

.chat2-bot-h2h-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.chat2-bot-h2h-stat {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Help card */
.chat2-bot-help-list {
  padding: var(--sp-3);
}

.chat2-bot-help-item {
  display: flex;
  gap: var(--sp-3);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.chat2-bot-help-item:last-child { border-bottom: 0; }

.chat2-bot-help-cmd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #818cf8;
  white-space: nowrap;
  min-width: 140px;
}

.chat2-bot-help-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Ranking card */
.chat2-bot-ranking-list {
  padding: var(--sp-2) var(--sp-3);
}

.chat2-bot-ranking-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.chat2-bot-ranking-row:last-child { border-bottom: 0; }

.chat2-bot-ranking-pos {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--amber);
  width: 24px;
  text-align: center;
}

.chat2-bot-ranking-name {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text);
}

.chat2-bot-ranking-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--green);
}

/* Bot command autocomplete chips */
.chat2-cmd-suggest {
  display: flex;
  gap: 4px;
  padding: 4px var(--sp-3);
  flex-wrap: wrap;
}

.chat2-cmd-chip {
  padding: 3px 10px;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: 14px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.chat2-cmd-chip:hover {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.3);
  color: #818cf8;
}

/* ── LiveTicker Messages in Chat ─────────────────────────────── */

.chat2-msg--ticker {
  max-width: 92%;
}

.chat2-msg--ticker .chat2-msg-bubble {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.2);
  border-left: 3px solid var(--amber);
  position: relative;
}

.chat2-ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.chat2-ticker-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: tickerPulse 1.5s ease-in-out infinite;
}

@keyframes tickerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.chat2-ticker-event {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.chat2-ticker-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.chat2-ticker-text {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.chat2-ticker-text strong {
  color: var(--amber);
}

/* Prematch intro card */
.chat2-ticker-prematch {
  background: rgba(245,158,11,0.04);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 6px;
}

.chat2-ticker-prematch-header {
  background: rgba(245,158,11,0.08);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid rgba(245,158,11,0.1);
}

.chat2-ticker-prematch-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chat2-ticker-prematch-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.chat2-ticker-prematch-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: var(--sp-3);
}

.chat2-ticker-prematch-player {
  text-align: center;
  padding: var(--sp-2);
}

.chat2-ticker-prematch-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--sp-2);
  border: 2px solid rgba(245,158,11,0.3);
}

.chat2-ticker-prematch-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.chat2-ticker-prematch-stat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.chat2-ticker-prematch-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--amber);
}

/* Ticker toggle button in header */
.chat2-ticker-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 14px;
  font-size: 0.68rem;
  font-family: var(--font-body);
  color: var(--amber);
  cursor: pointer;
  transition: all 0.15s;
}

.chat2-ticker-toggle:hover {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.35);
}

.chat2-ticker-toggle.active {
  background: rgba(245,158,11,0.15);
  border-color: var(--amber);
}

.chat2-ticker-toggle svg {
  width: 12px;
  height: 12px;
}

/* Bot mode indicator on input */
.chat2-input-wrap.bot-mode {
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.1), 0 0 12px rgba(99,102,241,0.05);
}

.chat2-input-wrap.bot-mode .chat2-input {
  color: #818cf8;
}

/* Typing dots animation */
.chat2-typing-dots {
  display: inline-flex;
  gap: 3px;
  padding: 4px 0;
}

.chat2-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.chat2-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat2-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Dart Facts (rotierend) ──────────────────────────────────── */

.chat2-facts-list {
  transition: opacity 0.2s ease;
}

.chat2-fact-item {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.chat2-fact-item:last-child { border-bottom: 0; }

.chat2-fact-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.chat2-fact-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.chat2-fact-text strong {
  color: var(--text);
  font-size: 0.77rem;
}

.chat2-fact-shuffle {
  background: none;
  border: none;
  padding: 2px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  border-radius: var(--r-sm);
}

.chat2-fact-shuffle:hover {
  color: var(--green);
  transform: rotate(180deg);
}

/* ── Match Share ─────────────────────────────────────────────── */

.chat2-share-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.15s;
}

.chat2-share-row:last-child { border-bottom: 0; }
.chat2-share-row:hover { background: rgba(34,197,94,0.03); }

.chat2-share-info { flex: 1; min-width: 0; }

.chat2-share-players {
  font-size: 0.78rem;
  color: var(--text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat2-share-tournament {
  font-size: 0.65rem;
  color: var(--text-dim);
  display: block;
}

.chat2-share-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 6px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.chat2-share-btn:hover {
  color: var(--green);
  border-color: var(--green);
  background: rgba(34,197,94,0.05);
}

/* ── Message Highlights (keep from v1) ───────────────────────── */

.chat-score-badge {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.chat-highlight-180 {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  animation: chat-pulse-180 1.5s ease-in-out infinite;
}

@keyframes chat-pulse-180 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.3); }
  50% { box-shadow: 0 0 8px 2px rgba(255,215,0,0.5); }
}

.chat-highlight-checkout {
  display: inline-block;
  background: rgba(34,197,94,0.15);
  color: var(--green);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Visibility Toggle ───────────────────────────────────────── */

.chat2-vis-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.chat2-vis-toggle:hover { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); }
.chat2-vis-toggle.private {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.25);
  color: #a78bfa;
}
.chat2-vis-toggle.private:hover { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.4); }
.chat2-vis-icon { font-size: 0.9rem; }
.chat2-vis-label { font-size: 0.68rem; letter-spacing: 0.02em; }

/* ── DM Bar ──────────────────────────────────────────────────── */

.chat2-dm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--sp-4);
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06));
  border-bottom: 1px solid rgba(99,102,241,0.2);
  font-size: 0.8rem;
  color: var(--text-secondary);
  animation: dmBarSlideIn 0.3s ease-out;
}
@keyframes dmBarSlideIn {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat2-dm-bar-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.chat2-dm-bar-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(99,102,241,0.3);
}
.chat2-dm-bar-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.85rem;
}
.chat2-dm-bar-close:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* ── DM Message Styles ───────────────────────────────────────── */

.chat2-msg--dm .chat2-msg-body {
  background: rgba(99,102,241,0.04);
  border-color: rgba(99,102,241,0.2);
  border-left: 3px solid #6366f1;
}
.chat2-dm-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

/* ── Private Message Styles ──────────────────────────────────── */

.chat2-msg--private .chat2-msg-body {
  background: rgba(139,92,246,0.04);
  border-color: rgba(139,92,246,0.15);
  border-left: 3px solid #8b5cf6;
}
.chat2-private-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

/* ── DM Mode Input ───────────────────────────────────────────── */

.chat2-input-wrap.dm-mode {
  border-color: rgba(99,102,241,0.4) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.1) !important;
}
.chat2-input-wrap.dm-mode .chat2-input { color: #818cf8; }
.chat2-input-wrap.dm-mode .chat2-input::placeholder { color: rgba(129,140,248,0.5); }
.chat2-input-wrap.dm-mode .chat2-send-btn { background: linear-gradient(135deg, #6366f1, #818cf8) !important; }

/* ── Online User DM Button ───────────────────────────────────── */

.chat2-dm-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 2px 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  margin-left: auto;
}
.chat2-online-user:hover .chat2-dm-btn { opacity: 1; }
.chat2-dm-btn:hover {
  color: #818cf8;
  border-color: rgba(99,102,241,0.3);
  background: rgba(99,102,241,0.08);
}

/* ── Twitch Messages ─────────────────────────────────────────── */

.chat2-msg--twitch { max-width: 88%; }

.chat2-twitch-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(145,70,255,0.1);
  border: 2px solid rgba(145,70,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat2-twitch-body {
  background: rgba(145,70,255,0.04) !important;
  border-color: rgba(145,70,255,0.15) !important;
  border-left: 3px solid #9146FF !important;
  border-radius: 14px 14px 14px 4px !important;
}

.chat2-twitch-name { font-family: var(--font-display); font-weight: 600; }

.chat2-twitch-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: rgba(145,70,255,0.15);
  border: 1px solid rgba(145,70,255,0.3);
  border-radius: 8px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #9146FF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Twitch Toggle ───────────────────────────────────────────── */

.chat2-twitch-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(145,70,255,0.08);
  border: 1px solid rgba(145,70,255,0.2);
  border-radius: 14px;
  font-size: 0.68rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: #9146FF;
  cursor: pointer;
  transition: all 0.15s;
}
.chat2-twitch-toggle:hover { background: rgba(145,70,255,0.15); border-color: rgba(145,70,255,0.35); }
.chat2-twitch-toggle.active { background: rgba(145,70,255,0.15); border-color: #9146FF; }

/* ── DM Unread Dot ───────────────────────────────────────────── */

.chat2-online-avatar-wrap { position: relative; }
.chat2-dm-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6366f1;
  border: 2px solid var(--bg-card);
  animation: dmUnreadPulse 2s ease-in-out infinite;
}
@keyframes dmUnreadPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); box-shadow: 0 0 6px rgba(99,102,241,0.5); }
}


/* ================================================================
   LIVE VOTING WIDGET
   ================================================================ */

.vote-item {
  margin-bottom: var(--sp-4);
}

.vote-item:last-child { margin-bottom: 0; }

.vote-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: var(--sp-3);
  text-align: center;
}

.vote-bar-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.vote-bar-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.vote-bar-btn:hover:not(:disabled) {
  border-color: var(--green);
  background: rgba(34,197,94,0.05);
}

.vote-bar-btn:disabled {
  cursor: default;
  opacity: 0.8;
}

.vote-bar-btn.voted {
  border-color: var(--green);
  background: rgba(34,197,94,0.08);
}

.vote-bar-name {
  font-weight: 600;
}

.vote-bar-pct {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--green);
}

.vote-bar-visual {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.vote-bar-fill--left {
  background: linear-gradient(90deg, var(--green-500), var(--green-400));
  transition: width 0.5s ease;
}

.vote-bar-fill--right {
  background: linear-gradient(90deg, #6366f1, #818cf8);
  transition: width 0.5s ease;
}

.vote-total {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  font-family: var(--font-mono);
  margin-top: var(--sp-1);
}


/* ================================================================
   LIVE ACTIVITY FEED
   ================================================================ */

.feed-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: rgba(255,255,255,0.015); }

.feed-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.feed-text {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.feed-text strong {
  color: var(--text);
}

.feed-score {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--green);
  font-size: 0.82rem;
}

.feed-tournament {
  font-size: 0.72rem;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
}

.feed-time {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}


/* ================================================================
   TOGGLE SWITCH
   ================================================================ */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 24px;
  transition: all 0.25s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-dim);
  left: 2px;
  top: 2px;
  transition: all 0.25s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  background: #fff;
  transform: translateX(20px);
}

.toggle-switch--sm { width: 36px; height: 20px; }
.toggle-switch--sm .toggle-slider::before { width: 14px; height: 14px; left: 2px; top: 2px; }
.toggle-switch--sm input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ================================================================
   NOTIFICATION SETTINGS
   ================================================================ */

.notif-main-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.notif-toggle-info { flex: 1; }

.notif-toggle-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.notif-toggle-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.notif-status {
  display: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: 0.8rem;
  margin-top: var(--sp-3);
}

.notif-status--success { background: rgba(34,197,94,0.1); color: var(--green); display: block; }
.notif-status--warning { background: rgba(255,165,0,0.1); color: var(--yellow); display: block; }
.notif-status--info { background: rgba(99,102,241,0.1); color: var(--blue); display: block; }

.notif-category-header {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notif-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.notif-toggle-row:last-child { border-bottom: 0; }

/* ================================================================
   CHAT: ONLINE USERS
   ================================================================ */

/* Old chat-online-user styles removed — replaced by chat2-online-user above */

@keyframes online-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* ================================================================
   RESPONSIVE: New Sections
   ================================================================ */

@media (max-width: 768px) {
  .hof-trophy-hero {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
  }

  .hof-trophy-holder { font-size: 1.4rem; }

  .h2h-selector {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .h2h-player-select {
    width: 100%;
    min-width: 0;
  }

  .h2h-score-banner {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .h2h-score-wins { font-size: 2rem; }

  .h2h-stat-row {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }

  .h2h-stat-val { font-size: 0.85rem; }

  .social-links-hero {
    grid-template-columns: 1fr;
  }

  .chat2-layout {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 160px);
    padding-bottom: 68px;
    position: relative;
  }

  .chat2-sidebar {
    display: none;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .chat2-sidebar--mobile-visible {
    display: flex !important;
  }

  .chat2-sidebar--mobile-visible .chat2-panel-body {
    max-height: none;
  }
  .chat2-sidebar--mobile-visible .chat2-panel-body.collapsed {
    max-height: 0;
  }

  /* Old chat2-main rule — overridden by new fc-main layout */
  .chat2-main:not(.fc-main) {
    max-height: calc(100vh - 230px);
  }
  .chat2-container {
    min-height: 0;
    height: calc(100vh - 310px);
  }

  /* Hide desktop chat tabs on mobile — mobile nav handles this */
  .chat-tabs {
    display: none;
  }

  /* Hide tip banner on mobile for more space */
  .chat2-tip-banner {
    display: none;
  }

  .chat2-vis-toggle .chat2-vis-label { display: none; }

  .chat2-msg {
    max-width: 95%;
  }

  /* Mobile Bottom Nav — now handled by [data-page="chat"] rule */
  /* .chat-mobile-nav { display: flex !important; } */

  /* Chat input area: reduce padding */
  .chat2-input-area {
    padding: var(--sp-2) var(--sp-3);
  }

  .chat2-input {
    padding: 8px var(--sp-3);
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Quick emoji row: scroll horizontally */
  .chat2-actions-bar {
    padding: var(--sp-1) var(--sp-2);
  }

  .chat2-emoji-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chat2-emoji-row::-webkit-scrollbar { display: none; }

  /* Sidebar panels expanded on mobile */
  .chat2-sidebar--mobile-visible .chat2-panel-body {
    max-height: none !important;
    overflow: visible;
  }

  .chat2-sidebar--mobile-visible .chat2-panel-body.collapsed {
    max-height: 0 !important;
    overflow: hidden;
  }

  /* Online users: full width cards on mobile */
  .chat2-sidebar--mobile-visible .chat2-online-user {
    padding: var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    margin-bottom: var(--sp-2);
  }

  /* DM bar compact on mobile */
  .chat2-dm-bar {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.8rem;
  }

  /* Message avatars smaller on mobile */
  .chat2-msg-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  /* Online pill in header: hide on mobile (we have bottom nav) */
  .chat2-online-pill {
    display: none !important;
  }

  /* Page header: compact on mobile */
  .chat2-twitch-toggle,
  .chat2-ticker-toggle {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  .hl-row {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .hl-value {
    width: 100%;
    text-align: left;
    font-size: 0.95rem;
  }

  .awards-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   SEASON AWARDS
   ================================================================ */

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-2);
}

.award-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.award-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--award-color, var(--green));
}

.award-card:hover {
  border-color: var(--border-focus);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.award-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-3);
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.3));
}

.award-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--award-color, var(--green));
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.award-player {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  display: block;
  margin-bottom: var(--sp-1);
}

.award-player:hover {
  color: var(--green);
}

.award-value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}


/* ================================================================
   PWA INSTALL BANNER + iOS OVERLAY
   ================================================================ */

/* ── Android / Chrome Banner ── */

.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  background: var(--bg-panel);
  border-top: 2px solid var(--green);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}

.pwa-install-banner--visible {
  transform: translateY(0);
  opacity: 1;
}

.pwa-install-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  max-width: 720px;
  margin: 0 auto;
}

.pwa-install-banner__icon {
  flex-shrink: 0;
  border-radius: var(--r-md);
}

.pwa-install-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-install-banner__text strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.pwa-install-banner__text span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.pwa-install-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.pwa-install-banner__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pwa-install-banner__btn:hover {
  background: var(--green-400);
  transform: scale(1.03);
}

.pwa-install-banner__dismiss {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
}

.pwa-install-banner__dismiss:hover {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-light);
}

/* ── iOS Overlay ── */

.pwa-ios-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pwa-ios-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.pwa-ios-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.pwa-ios-overlay__card {
  position: relative;
  z-index: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  width: 100%;
  max-width: 400px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.pwa-ios-overlay--visible .pwa-ios-overlay__card {
  transform: translateY(0);
}

.pwa-ios-overlay__card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: var(--sp-5);
}

.pwa-ios-overlay__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
}

.pwa-ios-overlay__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-align: left;
  margin-bottom: var(--sp-5);
}

.pwa-ios-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.pwa-ios-step__num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #000;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.pwa-ios-step strong {
  color: var(--text);
}

.pwa-ios-overlay__ok {
  width: 100%;
  padding: 12px;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}

.pwa-ios-overlay__ok:hover {
  background: var(--green-400);
}

@media (max-width: 480px) {
  .pwa-install-banner__inner {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .pwa-install-banner__text strong { font-size: 0.85rem; }
  .pwa-install-banner__btn { padding: 6px 14px; font-size: 0.8rem; }
}


/* ================================================================
   MOBILE APP-LIKE EXPERIENCE — Comprehensive Responsive Overhaul
   Prevents horizontal scroll on all pages, scales all layouts
   to fit mobile screens perfectly like a native app.
   ================================================================ */

/* ── Global: Prevent Horizontal Overflow ──────────────────────── */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}
.app-main {
  overflow-x: hidden;
}
.app-content {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Tab Navigation: Horizontal Scroll Chips ──────────────────── */
@media (max-width: 768px) {
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-2);
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.72rem;
  }

  /* Profile Tabs: scrollable on mobile */
  .profile-tabs .tabs,
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .profile-tabs .tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .profile-tabs .tab,
  .tabs .tab {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 8px 14px;
  }
}

/* ── SPIELER-SEITE (Players Page) ─────────────────────────────── */
@media (max-width: 640px) {
  /* Players grid: 2 columns on small screens */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* Player cards: compact for mobile */
  .player-card {
    padding: var(--sp-4);
  }
  .player-card-avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
    margin-bottom: var(--sp-3);
  }
  .player-card-name {
    font-size: 14px;
  }
  .player-card-flag {
    font-size: 16px;
    margin-bottom: var(--sp-2);
  }
  .player-card-stats {
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
  }
  .player-card-stat-value {
    font-size: 13px;
  }
  .player-card-stat-label {
    font-size: 9px;
    letter-spacing: 0.5px;
  }
  .player-card-nickname {
    font-size: 0.68rem;
  }
  .player-card-role {
    font-size: 0.6rem;
    padding: 1px 6px;
  }

  /* Filter bar: stack on mobile */
  .players-filter-bar {
    flex-direction: column;
    gap: var(--sp-2);
  }
  .players-search-box {
    min-width: 100%;
  }
  .players-sort-select {
    width: 100%;
  }
  .players-count {
    text-align: center;
  }
}

@media (max-width: 400px) {
  /* Single column on very small screens */
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .player-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
}

/* ── PROFIL-SEITE (Profile Page) ──────────────────────────────── */
@media (max-width: 768px) {
  /* Profile hero: stack and center on mobile */
  [data-page="profile"] .profile-hero {
    margin-bottom: var(--sp-4);
  }
  [data-page="profile"] .profile-hero-inner {
    gap: var(--sp-4);
  }
  .profile-hero-meta {
    font-size: 0.78rem;
  }
  .profile-hero-email {
    font-size: 0.75rem;
    word-break: break-all;
  }

  /* Avatar upload: stack */
  .avatar-preview-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
  }

  /* Notification toggle rows: ensure no overflow */
  .notif-main-toggle {
    gap: var(--sp-3);
  }
  .notif-toggle-title {
    font-size: 0.85rem;
  }
  .notif-toggle-desc {
    font-size: 0.72rem;
  }
  .notif-toggle-row {
    padding: var(--sp-3);
  }
}

@media (max-width: 480px) {
  /* Form compact */
  .profile-form-grid {
    gap: var(--sp-3);
  }
  .profile-form-grid .form-group {
    margin-bottom: 0;
  }

  /* Password grid: already 1fr at 768px */

  /* Profile stats: tighter on small mobile */
  .profile-stats-grid {
    gap: var(--sp-2);
  }
  .profile-stats-grid .stat-card {
    padding: var(--sp-3);
  }

  /* Achievement badges: compact */
  .achievement-badge {
    padding: var(--sp-3);
    gap: var(--sp-3);
  }
  .achievement-badge-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
  }
  .achievement-badge-title { font-size: 0.82rem; }
  .achievement-badge-desc { font-size: 0.72rem; }
}

/* ── TIPPSPIEL-SEITE ──────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Tippspiel: prevent overflow */
  .tipp-tabs {
    scrollbar-width: none;
  }
  .tipp-tabs::-webkit-scrollbar { display: none; }

  /* Spieltag header: compact */
  .spieltag-header {
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .spieltag-meta {
    gap: var(--sp-2);
  }
  .spieltag-status {
    font-size: 0.6rem;
    padding: 1px 6px;
  }
  .spieltag-count {
    font-size: 0.6rem;
  }
  .spieltag-body.open {
    padding: 0 8px 12px;
  }

  /* Tip cards: compact */
  .tip-card {
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .tip-card-header {
    margin-bottom: var(--sp-1);
  }
  .tip-card-tournament {
    font-size: 0.58rem;
  }
  .tip-card-time {
    font-size: 0.65rem;
  }

  /* Tip matchup */
  .tip-card-matchup {
    gap: var(--sp-1);
  }
  .tip-card-player {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tip-card-vs {
    font-size: 0.65rem;
  }

  /* Score buttons compact */
  .tip-score-row {
    gap: var(--sp-1);
  }
  .tip-score-btn {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
  }
  .tip-score-display {
    font-size: 0.85rem;
    min-width: 18px;
  }

  /* Tippspiel stats bar */
  .tipp-stats-bar {
    gap: var(--sp-1);
  }

  /* Rankings compact */
  .ranking-header,
  .ranking-row {
    font-size: 0.72rem;
  }
}

@media (max-width: 400px) {
  /* Tipp tabs: even more compact */
  .tipp-tab {
    min-width: 80px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  /* Prediction rows: tighter */
  .tipp-prediction-row {
    grid-template-columns: 60px 1fr 30px;
    gap: var(--sp-1);
    padding: 4px 8px;
  }
  .tipp-prediction-place {
    font-size: 0.65rem;
  }

  .tipp-points-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── TURNIER-DETAIL (Tournament Detail Page) ──────────────────── */
@media (max-width: 768px) {
  /* Tournament hero: compact */
  .tournament-hero {
    padding: 16px;
    margin-bottom: var(--sp-5);
    border-radius: 12px;
  }
  .tournament-hero h1 {
    font-size: 1.2rem;
    margin-bottom: 4px;
  }
  .tournament-hero-badges {
    gap: 4px;
    margin-bottom: 8px;
  }
  .tournament-hero-meta {
    font-size: 0.78rem;
  }
  .tournament-hero-desc {
    font-size: 0.78rem;
  }
  .tournament-hero-players {
    font-size: 0.78rem;
  }
  .tournament-hero-players .count {
    font-size: 1.1rem;
  }

  /* Admin actions: wrap and full width */
  .admin-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .admin-actions .btn {
    font-size: 0.72rem;
    padding: 6px 12px;
  }
  .admin-actions select {
    font-size: 0.7rem;
    padding: 6px 10px;
    flex: 1;
  }

  /* Stat highlights: compact */
  .stat-highlight {
    padding: 16px;
  }
  .stat-highlight .label {
    font-size: 0.6rem;
  }
  .stat-highlight .value {
    font-size: 1.4rem;
  }
  .stat-highlight .player-name {
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  /* Overview stats grid: 2 columns */
  #overviewStats.grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  /* Stat cards: compact */
  .stat-card {
    padding: var(--sp-3);
  }
  .stat-card-value {
    font-size: 1.3rem;
  }
  .stat-card-label {
    font-size: 0.6rem;
  }

  /* Stats highlights: 1 column */
  #statsHighlights.grid-3 {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  /* Standings table: horizontal scroll with hints */
  .standings-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .standings-table::-webkit-scrollbar { display: none; }
  .standings-table thead th {
    font-size: 0.6rem;
    padding: 8px;
    white-space: nowrap;
  }
  .standings-table tbody td {
    font-size: 0.75rem;
    padding: 8px;
    white-space: nowrap;
  }
  .standings-table .player-cell {
    gap: 6px;
  }
  .standings-table .mini-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.5rem;
  }

  /* Match table: horizontal scroll */
  .match-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .match-table::-webkit-scrollbar { display: none; }
  .match-table thead th {
    font-size: 0.6rem;
    padding: 8px 6px;
    white-space: nowrap;
  }
  .match-table tbody td {
    font-size: 0.75rem;
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* Swiss pairings: compact */
  .swiss-pairing {
    padding: 6px 8px;
    gap: var(--sp-1);
    font-size: 0.78rem;
  }
  .swiss-pairing .player-cell {
    gap: 4px;
  }
  .swiss-pairing .mini-avatar {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
  }

  /* KO Bracket: tighter on mobile */
  .ko-bracket {
    gap: 16px;
    padding: 8px 0;
  }
  .ko-round {
    min-width: 160px;
    gap: 10px;
  }
  .ko-round-title {
    font-size: 0.65rem;
    margin-bottom: 4px;
  }
  .ko-match-player {
    padding: 6px 8px;
    font-size: 0.75rem;
  }
  .ko-match-player .name {
    font-size: 0.72rem;
    max-width: 100px;
  }
  .ko-match-player .score {
    font-size: 0.75rem;
  }

  /* Double Elimination bracket: tighter */
  .de-bracket-rounds {
    gap: 14px;
  }
  .de-bracket-title {
    font-size: 0.75rem;
  }

  /* Groups container */
  #groupsContainer {
    gap: var(--sp-5);
  }

  /* Overview grid: stack */
  #sectionOverview .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Bar chart: compact */
  .bar-chart-label {
    min-width: 50px;
    font-size: 0.65rem;
  }
  .bar-chart-val {
    font-size: 0.7rem;
    min-width: 35px;
  }
  .bar-chart-row {
    gap: 8px;
  }

  /* Player mini cards in tournament */
  .player-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .player-mini-card {
    padding: 14px;
  }
  .player-mini-card .avatar {
    width: 40px;
    height: 40px;
    font-size: 0.75rem;
    margin-bottom: 6px;
  }
  .player-mini-card .name {
    font-size: 0.78rem;
  }
  .player-mini-card .stats-row {
    gap: 8px;
    font-size: 0.65rem;
  }

  /* My Matches: compact */
  .my-match-row {
    padding: 10px 12px;
    gap: 8px;
  }
  .my-match-opponent-name {
    font-size: 0.82rem;
  }
  .my-match-score {
    font-size: 0.95rem;
    min-width: 40px;
  }
  .my-match-badge {
    font-size: 0.58rem;
    padding: 1px 6px;
  }

  /* Winner banner: compact */
  .winner-banner-inner {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
  .winner-trophy {
    font-size: 2.5rem;
  }
  .winner-name {
    font-size: 1.1rem;
  }
  .winner-stat-val {
    font-size: 0.95rem;
  }
  .winner-stat-lbl {
    font-size: 0.55rem;
  }

  /* Overview results: compact */
  .overview-results .result-match {
    padding: 8px 10px;
    font-size: 0.78rem;
  }

  /* Score modal: full width */
  .score-modal {
    width: 95vw;
    max-width: 95vw;
  }
}

@media (max-width: 400px) {
  /* Tournament tab chips: even smaller */
  .tab-chip {
    padding: 5px 10px;
    font-size: 0.65rem;
  }

  /* KO Bracket: minimal */
  .ko-bracket {
    gap: 10px;
  }
  .ko-round {
    min-width: 140px;
  }
  .ko-match-player {
    padding: 4px 6px;
    font-size: 0.7rem;
  }
  .ko-match-player .name {
    max-width: 80px;
  }

  /* Standings & Match tables: even smaller font */
  .standings-table thead th,
  .standings-table tbody td,
  .match-table thead th,
  .match-table tbody td {
    font-size: 0.68rem;
    padding: 6px 4px;
  }

  /* Stat highlights: stack values */
  .stat-highlight {
    padding: 12px;
  }
  .stat-highlight .value {
    font-size: 1.2rem;
  }

  /* Swiss pairing: hide avatars on tiny screens */
  .swiss-pairing .mini-avatar {
    display: none;
  }

  /* Player grid: 2 columns on tiny screens */
  .player-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── SPIELER-DETAIL (Player Detail Page) ──────────────────────── */
@media (max-width: 640px) {
  /* Player detail hero */
  [data-page="player-detail"] .profile-hero {
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  /* Trophy grid: compact */
  .trophy-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--sp-2);
  }
  .trophy-card {
    padding: var(--sp-2);
  }
  .trophy-card .trophy-icon {
    font-size: 1.4rem;
  }
  .trophy-card .trophy-name {
    font-size: 0.62rem;
  }

  /* About info grid */
  .about-info-grid {
    grid-template-columns: 1fr;
  }

  /* Milestones: 2 columns */
  .milestones-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
  .milestone-item {
    padding: var(--sp-2);
  }
  .milestone-value {
    font-size: 1rem;
  }
  .milestone-icon {
    font-size: 1.1rem;
  }
  .milestone-label {
    font-size: 0.55rem;
  }

  /* Records: compact */
  .record-card {
    padding: var(--sp-2);
    gap: var(--sp-2);
  }
  .record-icon {
    font-size: 1.1rem;
    width: 28px;
  }
  .record-label {
    font-size: 0.72rem;
  }
  .record-value {
    font-size: 0.65rem;
  }

  /* Achievement categories: compact */
  .achievement-category-header {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.72rem;
  }
  .achievement-grid {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .achievement-item {
    padding: var(--sp-2);
    gap: var(--sp-2);
  }
  .achievement-icon {
    font-size: 1.2rem;
    width: 30px;
  }
  .achievement-name {
    font-size: 0.75rem;
  }
  .achievement-desc {
    font-size: 0.62rem;
  }

  /* H2H section */
  .h2h-score-wins { font-size: 1.6rem; }
}

/* ── MATCH DETAIL MODAL: Mobile ───────────────────────────────── */
@media (max-width: 480px) {
  .match-detail-modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 12px 12px 0 0;
  }
  .md-header {
    padding: 12px;
    gap: 8px;
  }
  .md-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .md-player-name {
    font-size: 0.75rem;
  }
  .md-score {
    font-size: 1.4rem;
  }
  .md-stats-section {
    padding: 12px 14px;
  }
  .md-stat-label {
    width: 80px;
    font-size: 0.6rem;
  }
  .md-stat-val {
    font-size: 0.72rem;
  }
  .md-legs-table th {
    font-size: 0.6rem;
    padding: 4px 6px;
  }
  .md-legs-table td {
    font-size: 0.72rem;
    padding: 5px 6px;
  }
}

/* ── DASHBOARD: Mobile Compact ────────────────────────────────── */
@media (max-width: 640px) {
  /* Dashboard countdown banner: stack */
  .dash-countdown-banner {
    flex-direction: column;
    padding: var(--sp-3);
    gap: var(--sp-3);
    text-align: center;
  }
  .countdown-left {
    flex-direction: column;
    gap: var(--sp-2);
  }
  .countdown-timer {
    margin-left: 0;
    justify-content: center;
  }
  .countdown-unit {
    min-width: 36px;
  }
  .countdown-num {
    font-size: 1.2rem;
  }
  .countdown-btn {
    width: 100%;
  }
}

/* ── GENERAL: Cards & Content ─────────────────────────────────── */
@media (max-width: 640px) {
  /* Cards: reduce padding on mobile */
  .card-body {
    padding: var(--sp-3);
  }
  .card-header {
    padding: var(--sp-3) var(--sp-4);
  }
  .card-title {
    font-size: 0.88rem;
  }

  /* Page header: compact */
  .page-header {
    margin-bottom: var(--sp-4);
  }
  .page-title {
    font-size: 1.3rem;
  }
  .page-subtitle {
    font-size: 0.78rem;
  }

  /* Modals: full width */
  .modal-content {
    width: 95vw;
    max-width: 95vw;
    margin: var(--sp-4);
    border-radius: 12px;
  }

  /* Empty states: compact */
  .empty-state {
    padding: var(--sp-6) var(--sp-4);
  }
  .empty-state .empty-icon {
    font-size: 2.5rem;
  }
  .empty-state .empty-title {
    font-size: 1rem;
  }
  .empty-state .empty-text {
    font-size: 0.82rem;
  }
}

/* ── SOCIAL PAGE: Mobile ──────────────────────────────────────── */
@media (max-width: 640px) {
  .social-link-card {
    padding: var(--sp-3);
    gap: var(--sp-3);
  }
  .social-link-icon {
    width: 44px;
    height: 44px;
  }
  .social-link-name {
    font-size: 0.95rem;
  }
}

/* ── RANKING PAGE: Mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
  .ranking-mode-switcher {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ranking-mode-switcher::-webkit-scrollbar { display: none; }
  .ranking-mode-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: var(--sp-2) var(--sp-3);
    white-space: nowrap;
  }
  .ranking-mode-info {
    font-size: 0.78rem;
    padding: var(--sp-2) var(--sp-3);
  }
  .ranking-legend summary {
    font-size: 0.78rem;
  }
}

/* ── Touch-friendly: Bigger tap targets ───────────────────────── */
@media (max-width: 768px) {
  /* Ensure buttons and interactive elements are at least 44px */
  .btn--sm {
    min-height: 36px;
    padding: 8px 14px;
  }

  /* Toggle switch: slightly bigger for touch */
  .toggle-switch {
    transform: scale(1.05);
  }

  /* Score input: bigger on touch */
  .score-number-input {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
  }
}


/* ================================================================
   NOTIFICATION BELL — Topbar Benachrichtigungsglocke
   ================================================================ */

.notif-bell {
  position: relative;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--sp-2);
}
.notif-bell:hover {
  background: rgba(255,255,255,0.08);
}
.notif-bell svg {
  color: var(--text-dim);
  transition: color 0.2s;
}
.notif-bell:hover svg {
  color: var(--text-main);
}
.notif-bell__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  font-family: var(--font-body);
}

/* Notification Dropdown */
.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 1000;
  display: none;
  margin-top: 8px;
}
.notif-dropdown--open {
  display: block;
  animation: notifSlideIn 0.2s ease-out;
}
@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-main);
}
.notif-dropdown__mark-all {
  background: none;
  border: none;
  color: var(--green);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.notif-dropdown__mark-all:hover {
  background: rgba(16,185,129,0.1);
}
.notif-dropdown__item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.notif-dropdown__item:last-child {
  border-bottom: none;
}
.notif-dropdown__item:hover {
  background: rgba(255,255,255,0.04);
}
.notif-dropdown__item--unread {
  background: rgba(16,185,129,0.06);
  border-left: 3px solid var(--green);
}
.notif-dropdown__item--unread:hover {
  background: rgba(16,185,129,0.1);
}
.notif-dropdown__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.notif-dropdown__content {
  flex: 1;
  min-width: 0;
}
.notif-dropdown__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-dropdown__body {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.notif-dropdown__time {
  font-size: 0.65rem;
  color: var(--text-dim);
  opacity: 0.7;
  margin-top: 2px;
}
.notif-dropdown__empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .notif-dropdown {
    width: calc(100vw - 20px);
    right: -40px;
  }
}


/* ================================================================
   CHAT TABS — Chat / Nachrichten Toggle
   ================================================================ */

.chat-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  background: var(--bg-deep);
  border-radius: var(--radius-md);
  padding: 3px;
}
.chat-tabs__btn {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.chat-tabs__btn:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.04);
}
.chat-tabs__btn--active {
  background: var(--bg-panel);
  color: var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.chat-tabs__badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}


/* ================================================================
   CHAT INBOX — Konversationsliste
   ================================================================ */

.chat-inbox {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.chat-inbox__list {
  max-height: 600px;
  overflow-y: auto;
}
.chat-inbox__item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.chat-inbox__item:last-child {
  border-bottom: none;
}
.chat-inbox__item:hover {
  background: rgba(255,255,255,0.04);
}
.chat-inbox__item--unread {
  background: rgba(16,185,129,0.05);
}
.chat-inbox__item--unread:hover {
  background: rgba(16,185,129,0.08);
}
.chat-inbox__avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-inbox__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-inbox__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.chat-inbox__name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-main);
}
.chat-inbox__time {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
  flex-shrink: 0;
}
.chat-inbox__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.chat-inbox__preview {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.chat-inbox__item--unread .chat-inbox__preview {
  color: var(--text-main);
}
.chat-inbox__unread {
  background: var(--green);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
  flex-shrink: 0;
}
.chat-inbox__empty {
  padding: var(--sp-8);
  text-align: center;
  color: var(--text-dim);
}
.chat-inbox__empty p {
  margin: var(--sp-1) 0;
}


/* ================================================================
   @MENTION AUTOCOMPLETE
   ================================================================ */

.mention-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
  z-index: 100;
  margin-bottom: 4px;
}
.mention-autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: background 0.12s;
}
.mention-autocomplete__item:hover,
.mention-autocomplete__item--active {
  background: rgba(16,185,129,0.12);
}
.mention-autocomplete__avatar {
  border-radius: 50%;
  object-fit: cover;
}
.mention-autocomplete__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

/* @Mention highlighting in messages */
.chat-mention {
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-mention:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.chat-mention--self {
  background: rgba(16,185,129,0.15);
  padding: 1px 4px;
  border-radius: 3px;
}


/* ================================================================
   THEME SYSTEM — Light + Gold Themes
   ================================================================ */

/* ── Light Theme ── */
:root[data-theme="light"] {
  --bg-deep:      #f0f2f5;
  --bg-void:      #e8eaed;
  --bg-dark:      #ffffff;
  --bg-panel:     #ffffff;
  --bg-card:      #f8f9fa;
  --bg-surface:   #f0f2f5;
  --bg-elevated:  #e8eaed;
  --border:       #d1d5db;
  --border-light: #e5e7eb;
  --border-focus: #9ca3af;
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #6b7280;
  --text-dim:       #9ca3af;
  --green:        #059669;
  --green-dim:    #047857;
  --green-glow:   rgba(5, 150, 105, 0.12);
  --glow-green:       0 1px 3px rgba(0,0,0,0.08);
  --glow-green-strong:0 2px 8px rgba(0,0,0,0.12);
  --glow-red:         0 1px 3px rgba(239,68,68,0.12);
  --glow-blue:        0 1px 3px rgba(74,158,255,0.12);
  --glow-gold:        0 1px 3px rgba(255,215,0,0.12);
}

:root[data-theme="light"] body {
  color: #111827;
}

:root[data-theme="light"] .app-sidebar {
  background: #ffffff;
  border-right-color: #e5e7eb;
}

:root[data-theme="light"] .app-topbar {
  background: rgba(255,255,255,0.92);
  border-bottom-color: #e5e7eb;
}

:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

:root[data-theme="light"] .nav-item.active,
:root[data-theme="light"] .nav-item:hover {
  background: rgba(5,150,105,0.08);
}

:root[data-theme="light"] .btn--primary {
  background: #059669;
  color: #fff;
}

:root[data-theme="light"] .sidebar-logo-text,
:root[data-theme="light"] .page-title,
:root[data-theme="light"] .card-title {
  color: #111827;
}

/* ── Gold Theme ── */
:root[data-theme="gold"] {
  --bg-deep:      #0f0d08;
  --bg-void:      #141007;
  --bg-dark:      #1a1508;
  --bg-panel:     #1f1a0c;
  --bg-card:      #252010;
  --bg-surface:   #2b2514;
  --bg-elevated:  #332d18;
  --border:       #3d3520;
  --border-light: #4a4028;
  --border-focus: #665830;
  --green:        #ffd700;
  --green-dim:    #daa520;
  --green-glow:   rgba(255, 215, 0, 0.15);
  --glow-green:       0 0 20px rgba(255,215,0,0.15), 0 0 40px rgba(255,215,0,0.05);
  --glow-green-strong:0 0 20px rgba(255,215,0,0.3), 0 0 60px rgba(255,215,0,0.1);
}

:root[data-theme="gold"] .accent {
  color: #ffd700;
}


/* ================================================================
   THEME TOGGLE BUTTON
   ================================================================ */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  border-radius: var(--r-md);
}
.theme-toggle-btn:hover {
  background: var(--bg-surface);
  color: var(--green);
}
.theme-toggle-btn .theme-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}


/* ================================================================
   XP / LEVEL SYSTEM — Badges + Progress Bars
   ================================================================ */
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--green-800), var(--green-700));
  border: 1px solid var(--green-600);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.level-badge--lg {
  padding: 4px 12px;
  font-size: 0.8rem;
}
.level-badge--sm {
  padding: 1px 6px;
  font-size: 0.62rem;
}
.level-badge svg {
  width: 12px;
  height: 12px;
}
.level-badge--lg svg {
  width: 16px;
  height: 16px;
}

.xp-bar-wrap {
  width: 100%;
  max-width: 300px;
}
.xp-bar-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.xp-bar {
  height: 8px;
  background: var(--bg-surface);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-700), var(--green));
  border-radius: var(--r-full);
  transition: width 0.8s var(--ease-out);
  min-width: 2px;
}
.xp-bar--lg {
  height: 12px;
}
.xp-bar--lg .xp-bar-fill {
  box-shadow: 0 0 8px var(--green-glow);
}

.xp-section {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.xp-section .level-badge {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* Streak Badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #7c2d12, #9a3412);
  border: 1px solid #c2410c;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fb923c;
  letter-spacing: 0.04em;
}
.streak-badge--active {
  animation: streak-pulse 2s ease infinite;
}
@keyframes streak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.3); }
  50% { box-shadow: 0 0 12px 4px rgba(251, 146, 60, 0.15); }
}


/* ================================================================
   CHALLENGES WIDGET
   ================================================================ */
.challenge-card {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.challenge-card:last-child {
  border-bottom: none;
}
.challenge-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-2);
}
.challenge-card-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.challenge-card-xp {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.challenge-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.challenge-progress-bar {
  height: 6px;
  background: var(--bg-surface);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: 4px;
}
.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-700), var(--green));
  border-radius: var(--r-full);
  transition: width 0.6s var(--ease-out);
}
.challenge-progress-fill--done {
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
}
.challenge-progress-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
}
.challenge-card--completed {
  opacity: 0.6;
}
.challenge-card--completed .challenge-card-title::after {
  content: ' ✓';
  color: var(--green);
}


/* ================================================================
   QUIZ PAGE STYLES
   ================================================================ */
.quiz-start {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}
.quiz-start-icon {
  font-size: 4rem;
  margin-bottom: var(--sp-4);
}
.quiz-start h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.quiz-start p {
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}
.quiz-filters {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.quiz-filter-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.quiz-play {
  max-width: 640px;
  margin: 0 auto;
}
.quiz-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.quiz-progress-text {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.quiz-timer {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--amber);
}
.quiz-progress-bar {
  height: 4px;
  background: var(--bg-surface);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.quiz-progress-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.3s ease;
}

.quiz-question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.quiz-question-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.quiz-question-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.quiz-option:hover {
  border-color: var(--green-dim);
  background: var(--bg-surface);
}
.quiz-option-letter {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.quiz-option--correct {
  border-color: var(--green) !important;
  background: rgba(0,255,136,0.08) !important;
}
.quiz-option--correct .quiz-option-letter {
  background: var(--green);
  color: #000;
}
.quiz-option--wrong {
  border-color: var(--red) !important;
  background: rgba(239,68,68,0.08) !important;
}
.quiz-option--wrong .quiz-option-letter {
  background: var(--red);
  color: #fff;
}
.quiz-option--disabled {
  pointer-events: none;
  opacity: 0.7;
}

.quiz-result {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}
.quiz-result-icon {
  font-size: 4rem;
  margin-bottom: var(--sp-4);
}
.quiz-result h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.quiz-result-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  margin: var(--sp-6) 0;
}
.quiz-result-stat {
  text-align: center;
}
.quiz-result-stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--green);
}
.quiz-result-stat-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
}
.quiz-result-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--r-full);
  background: var(--green-glow);
  border: 1px solid var(--green-800);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green);
  margin-top: var(--sp-2);
}

.quiz-leaderboard-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.quiz-leaderboard-row:last-child { border-bottom: none; }
.quiz-leaderboard-rank {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.quiz-leaderboard-name {
  font-weight: 600;
  color: var(--text-primary);
}
.quiz-leaderboard-score {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green);
}
.quiz-leaderboard-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}


/* ================================================================
   CALENDAR / KALENDER STYLES
   ================================================================ */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.calendar-nav-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-grid {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.calendar-header,
.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
}
.calendar-header > div,
.calendar-header-cell {
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--bg-panel);
}
.calendar-cell {
  min-height: 80px;
  padding: 6px;
  background: var(--bg-card);
  cursor: pointer;
  transition: background var(--t-fast) ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.calendar-cell:hover {
  background: var(--bg-surface);
}
.calendar-cell--empty {
  background: var(--bg-panel);
  cursor: default;
}
.calendar-cell--other-month {
  opacity: 0.35;
}
.calendar-cell--today {
  background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.25);
}
.calendar-cell--today .calendar-day {
  color: var(--green);
}
.calendar-day,
.calendar-day-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.calendar-event,
.calendar-event-dot {
  display: block;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity var(--t-fast) ease;
  background: rgba(139,92,246,0.15);
  color: var(--purple);
}
.calendar-event:hover,
.calendar-event-dot:hover {
  opacity: 0.8;
}
.calendar-event--tournament,
.calendar-event-dot--tournament { background: rgba(139,92,246,0.18); color: var(--purple); }
.calendar-event--training,
.calendar-event-dot--training { background: rgba(74,158,255,0.18); color: var(--blue); }
.calendar-event--social,
.calendar-event-dot--social { background: rgba(245,158,11,0.18); color: var(--amber); }
.calendar-event--other,
.calendar-event-dot--other { background: rgba(100,116,139,0.18); color: var(--text-muted); }

/* Calendar event modal */
.event-detail-header { margin-bottom: var(--sp-4); }
.event-detail-type {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}
.event-detail-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}
.event-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.event-detail-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.event-detail-meta-row svg {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.event-participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.event-participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--bg-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.upcoming-events-list {
  display: flex;
  flex-direction: column;
}
.upcoming-event-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast) ease;
}
.upcoming-event-row:hover {
  background: var(--bg-surface);
}
.upcoming-event-row:last-child { border-bottom: none; }
.upcoming-event-date {
  text-align: center;
}
.upcoming-event-day {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.upcoming-event-month {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.upcoming-event-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.88rem;
}
.upcoming-event-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .calendar-cell { min-height: 52px; }
  .calendar-event-dot { font-size: 0; padding: 3px; border-radius: 50%; width: 8px; height: 8px; }
}


/* ================================================================
   GALLERY / GALERIE STYLES
   ================================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.gallery-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform var(--t-fast) ease;
}
.gallery-item:hover {
  transform: scale(1.03);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  animation: fadeIn 0.2s ease;
}
.lightbox-overlay img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r-lg);
}
.lightbox-close {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background var(--t-fast) ease;
}
.lightbox-close:hover {
  background: rgba(255,255,255,0.2);
}
.lightbox-caption {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-align: center;
  z-index: 10000;
}

.gallery-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  margin-bottom: var(--sp-4);
}
.gallery-upload-area:hover {
  border-color: var(--green-dim);
  background: var(--bg-surface);
}
.gallery-upload-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-2);
}
.gallery-upload-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.gallery-upload-preview {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.gallery-upload-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 2px solid var(--border);
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-2);
  }
}


/* ================================================================
   NEWS FEED STYLES
   ================================================================ */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.news-article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast) ease;
}
.news-article-card:hover {
  border-color: var(--border-focus);
}
.news-article-image {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
}
.news-article-body {
  padding: var(--sp-4) var(--sp-5);
}
.news-article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
}
.news-article-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}
.news-article-excerpt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dashboard news widget */
.dash-news-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.dash-news-item:last-child { border-bottom: none; }
.dash-news-item-title {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-news-item-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
}


/* ================================================================
   FRIENDS LIST / SOCIAL STYLES
   ================================================================ */
.friend-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.friend-row:last-child { border-bottom: none; }
.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
}
.friend-info {
  min-width: 0;
}
.friend-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-status {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.friend-actions {
  display: inline-flex;
  gap: var(--sp-1);
  align-items: center;
}
.friend-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  white-space: nowrap;
}
.friend-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.friend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.friend-btn--accept {
  border-color: var(--green-700);
  color: var(--green);
  background: rgba(34, 197, 94, 0.08);
}
.friend-btn--accept:hover {
  background: var(--green-glow);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}
.friend-btn--remove {
  border-color: transparent;
  color: var(--text-dim);
  padding: 6px 8px;
}
.friend-btn--remove:hover {
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}
.friend-btn--add {
  border-color: var(--green-700);
  color: var(--green);
  background: rgba(34, 197, 94, 0.06);
}
.friend-btn--add:hover {
  background: var(--green-glow);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}
.friend-btn--add svg {
  stroke: currentColor;
}

/* Friend list enhancements */
.friend-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
}
.friend-avatar-wrap .friend-avatar {
  width: 40px;
  height: 40px;
}
.friend-avatar-wrap img.friend-avatar {
  display: block;
}
.friend-avatar--initials {
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.friend-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg-card);
  z-index: 1;
}
.friend-dm-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.friend-dm-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .friend-dm-label { display: none; }
  .friend-row { grid-template-columns: 40px 1fr auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
}


/* ================================================================
   HEATMAP (Dartboard SVG)
   ================================================================ */
.heatmap-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-4);
}
.heatmap-dartboard {
  max-width: 400px;
  width: 100%;
}
.heatmap-dartboard svg {
  width: 100%;
  height: auto;
}
.heatmap-segment {
  transition: fill 0.3s ease;
  stroke: var(--border);
  stroke-width: 0.5;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-3);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.heatmap-legend-bar {
  width: 120px;
  height: 8px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, #1a2332, #155a35, #22c55e, #ffd700, #ef4444);
}
.heatmap-filters {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-4);
}


/* ================================================================
   DASHBOARD WIDGETS (Streak + Challenges + News)
   ================================================================ */
.dash-streak-widget {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.dash-streak-fire {
  font-size: 2rem;
}
.dash-streak-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #fb923c;
  line-height: 1;
}
.dash-streak-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ================================================================
   HEATMAP — GitHub-style Activity Grid
   ================================================================ */
.heatmap-wrap {
  padding: var(--sp-4);
}
.heatmap-grid {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}
.heatmap-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}
.heatmap-cell:hover {
  opacity: 0.8;
  outline: 1px solid var(--text-dim);
}
.heatmap-level-0 { background: var(--bg-surface); }
.heatmap-level-1 { background: #0e4429; }
.heatmap-level-2 { background: #006d32; }
.heatmap-level-3 { background: #26a641; }
.heatmap-level-4 { background: #39d353; }
.heatmap-level-future { background: transparent; }

:root[data-theme="light"] .heatmap-level-0 { background: #ebedf0; }
:root[data-theme="light"] .heatmap-level-1 { background: #9be9a8; }
:root[data-theme="light"] .heatmap-level-2 { background: #40c463; }
:root[data-theme="light"] .heatmap-level-3 { background: #30a14e; }
:root[data-theme="light"] .heatmap-level-4 { background: #216e39; }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-3);
}
.heatmap-legend .heatmap-cell {
  width: 10px;
  height: 10px;
}


/* ================================================================
   QR CHECK-IN MODAL
   ================================================================ */
.qr-checkin-modal {
  text-align: center;
}
.qr-checkin-modal img {
  border-radius: var(--r-lg);
  margin: var(--sp-3) auto;
}
.qr-checkin-url {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  word-break: break-all;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border-radius: var(--r-md);
  margin-top: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════════════
   RSVP — Public Response Page
   ═══════════════════════════════════════════════════════════════════ */

.rsvp-container { text-align: center; padding: var(--sp-6) var(--sp-4); }
.rsvp-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto var(--sp-4); }
.rsvp-event-icon { font-size: 3rem; margin-bottom: var(--sp-3); }
.rsvp-title { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--sp-4); }

.rsvp-date-box {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-5);
  margin: 0 auto var(--sp-4); max-width: 260px;
}
.rsvp-date-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rsvp-date-value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--accent); }
.rsvp-time-value { font-size: var(--fs-sm); color: var(--text-dim); }

.rsvp-description { color: var(--text-dim); max-width: 320px; margin: 0 auto var(--sp-5); }
.rsvp-question { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.rsvp-player { color: var(--accent); font-weight: 600; }

.rsvp-buttons { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.rsvp-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  border: 2px solid transparent; cursor: pointer; transition: all 0.2s;
  min-width: 180px; justify-content: center;
}
.rsvp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rsvp-btn-icon { font-size: 1.2em; }
.rsvp-btn-yes { background: var(--success); color: #fff; border-color: var(--success); }
.rsvp-btn-yes:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.03); }
.rsvp-btn-no { background: transparent; color: var(--danger); border-color: var(--danger); }
.rsvp-btn-no:hover:not(:disabled) { background: var(--danger); color: #fff; }

.rsvp-status { margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); }
.rsvp-status--confirmed { background: rgba(16,185,129,0.1); border: 1px solid var(--success); }
.rsvp-status--declined { background: rgba(239,68,68,0.1); border: 1px solid var(--danger); }
.rsvp-status-icon { font-size: 2.5rem; margin-bottom: var(--sp-2); }
.rsvp-status-text { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-3); }
.rsvp-btn-change {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); cursor: pointer;
  font-size: var(--fs-sm); transition: all 0.2s;
}
.rsvp-btn-change:hover { border-color: var(--accent); color: var(--accent); }

.rsvp-paid-info { margin-top: var(--sp-3); }
.rsvp-paid--yes { color: var(--success); }
.rsvp-paid--pending { color: var(--warning); }

/* ═══════════════════════════════════════════════════════════════════
   RSVP — Admin Styles
   ═══════════════════════════════════════════════════════════════════ */

.rsvp-detail-header { margin-bottom: var(--sp-4); }
.rsvp-detail-header h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin: var(--sp-3) 0 var(--sp-2); }
.rsvp-detail-meta { color: var(--text-dim); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rsvp-detail-desc { margin-top: var(--sp-2); color: var(--muted); }

.rsvp-paid-toggle {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer; border: 1px solid;
  transition: all 0.2s;
}
.rsvp-toggle--on { background: rgba(16,185,129,0.15); color: var(--success); border-color: var(--success); }
.rsvp-toggle--off { background: rgba(239,68,68,0.1); color: var(--danger); border-color: var(--danger); }
.rsvp-toggle--on:hover { background: rgba(16,185,129,0.25); }
.rsvp-toggle--off:hover { background: rgba(239,68,68,0.2); }

.rsvp-summary-bar {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); text-align: center;
  font-size: var(--fs-sm); color: var(--text-dim);
}

/* RSVP Invite Modal */
.rsvp-invite-toolbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rsvp-player-list { max-height: 320px; overflow-y: auto; }
.rsvp-player-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  cursor: pointer; transition: background 0.15s;
}
.rsvp-player-item:hover { background: var(--bg-surface); }
.rsvp-player-item input { margin-right: var(--sp-1); }

/* RSVP Links Modal */
.rsvp-link-row { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.rsvp-link-name { font-weight: 600; font-size: var(--fs-sm); }
.rsvp-link-url { display: flex; gap: var(--sp-2); }
.rsvp-link-input { flex: 1; font-size: var(--fs-xs); }

/* ═══════════════════════════════════════════════════════════════════
   RSVP — Profile Tab
   ═══════════════════════════════════════════════════════════════════ */

.rsvp-profile-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--border); margin-bottom: var(--sp-2);
  transition: background 0.15s;
}
.rsvp-profile-item:hover { background: var(--bg-surface); }
.rsvp-profile-item--past { opacity: 0.5; }

.rsvp-profile-date {
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px; padding: var(--sp-1) var(--sp-2);
  background: var(--bg-surface); border-radius: var(--r-md);
}
.rsvp-profile-day { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1; }
.rsvp-profile-month { font-size: var(--fs-xs); color: var(--accent); text-transform: uppercase; }

.rsvp-profile-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rsvp-profile-info strong { font-size: var(--fs-sm); }
.rsvp-profile-meta { font-size: var(--fs-xs); color: var(--text-dim); }

.rsvp-profile-badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }

.rsvp-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
}
.rsvp-badge--confirmed { background: rgba(16,185,129,0.15); color: var(--success); }
.rsvp-badge--declined { background: rgba(239,68,68,0.1); color: var(--danger); }
.rsvp-badge--pending { background: rgba(234,179,8,0.15); color: var(--warning); }
.rsvp-badge--paid { background: rgba(16,185,129,0.15); color: var(--success); }
.rsvp-badge--unpaid { background: rgba(234,179,8,0.1); color: var(--warning); }
.rsvp-badge--cancelled { background: rgba(239,68,68,0.1); color: var(--danger); }
.rsvp-badge--closed { background: rgba(100,116,139,0.15); color: var(--muted); }