/* ========================================
   HIGHSCORES - Dark Theme
   ======================================== */

[data-theme="dark"] {
  /* ================================
     SECONDARY SCALE (inverted for dark mode)
     This is the ROOT fix: many components use these directly
     ================================ */
  --color-secondary-50: #0f0d1a;
  --color-secondary-100: #1a1726;
  --color-secondary-200: #2d2844;
  --color-secondary-300: #3d3756;
  --color-secondary-400: #6b6580;
  --color-secondary-500: #8b869b;
  --color-secondary-600: #a09bb0;
  --color-secondary-700: #c4bfd3;
  --color-secondary-800: #dcd8e6;
  --color-secondary-900: #f1f0f5;
  --color-secondary-950: #faf9fc;

  /* Background colors */
  --bg-color: #0f0d1a;
  --bg-primary: #1e1a2e;
  --bg-secondary: #1a1726;
  --bg-tertiary: #241f33;
  --bg-elevated: #1e1a2e;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Card backgrounds */
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-bg-solid: #1e1a2e;
  --card-border: rgba(255, 255, 255, 0.1);

  /* Text colors */
  --text-color: #f1f0f5;
  --text-primary: #f1f0f5;
  --text-secondary: #c4bfd3;
  --text-tertiary: #a09bb0;
  --text-muted: #6b6580;
  --text-inverse: #0f0d1a;

  /* Border colors */
  --border-color: rgba(255, 255, 255, 0.12);
  --border-color-light: rgba(255, 255, 255, 0.06);
  --border-color-dark: rgba(255, 255, 255, 0.18);

  /* Input colors */
  --input-bg: #1e1a2e;
  --input-border: rgba(255, 255, 255, 0.15);
  --input-border-color: #3d3756;
  --input-placeholder: #9e99af;

  /* Navigation */
  --nav-bg: rgba(15, 13, 26, 0.9);
  --nav-text: #a09bb0;
  --nav-text-active: #a5b4fc;
  --nav-indicator: #6366f1;

  /* Status bar (mobile) */
  --status-bar-style: light-content;

  /* Shadows - more pronounced with color */
  --shadow-color: rgba(0, 0, 0, 0.4);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Adjust primary colors for dark mode vibrancy */
  --color-primary-50: rgba(99, 102, 241, 0.08);
  --color-primary-100: rgba(99, 102, 241, 0.15);
  --color-primary-200: rgba(99, 102, 241, 0.25);
  --color-primary-600: #818cf8;
  --color-primary-700: #6366f1;

  /* Semantic adjustments */
  --primary-color: #818cf8;
  --primary-light: rgba(99, 102, 241, 0.15);
  --primary-dark: #a5b4fc;

  /* Success adjustments */
  --color-success-light: rgba(16, 185, 129, 0.15);
  --success-light: rgba(16, 185, 129, 0.15);

  /* Warning adjustments */
  --color-warning-light: rgba(245, 158, 11, 0.15);
  --warning-light: rgba(245, 158, 11, 0.15);

  /* Error adjustments */
  --color-error-light: rgba(239, 68, 68, 0.15);
  --error-light: rgba(239, 68, 68, 0.15);

  /* Info adjustments */
  --color-info-light: rgba(6, 182, 212, 0.15);

  /* Surface colors */
  --color-surface: #1e1a2e;
  --color-surface-elevated: #241f33;

  /* Component overrides */
  color-scheme: dark;
}

/* ================================
   BODY & BASE
   ================================ */
[data-theme="dark"] body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* ================================
   CARDS
   ================================ */
[data-theme="dark"] .card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
}

[data-theme="dark"] .card-header {
  border-color: var(--border-color);
}

[data-theme="dark"] .card-footer {
  border-color: var(--border-color);
  background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .card-interactive:hover {
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* ================================
   INPUTS & FORMS
   ================================ */

/* Native HTML elements (catch-all for elements without classes) */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-color);
}

/* Class-based inputs */
[data-theme="dark"] .input,
[data-theme="dark"] .form-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-color);
}

[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--input-placeholder);
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .input:hover,
[data-theme="dark"] .form-input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .input:disabled,
[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] input:disabled {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
}

[data-theme="dark"] .input.input-error,
[data-theme="dark"] .form-group.has-error .form-input {
  border-color: #ef4444;
}

[data-theme="dark"] .input.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .input-label {
  color: var(--text-secondary);
}

/* Autofill override for dark mode - force our colors over browser defaults */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] .form-input:-webkit-autofill,
[data-theme="dark"] .form-input:-webkit-autofill:hover,
[data-theme="dark"] .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f0f5 !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  border-color: var(--input-border) !important;
  caret-color: #f1f0f5;
}

[data-theme="dark"] .form-error {
  color: #f87171;
}

[data-theme="dark"] .form-help {
  color: var(--text-tertiary);
}

[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23c4bfd3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="dark"] textarea.input {
  background-color: var(--input-bg);
}

[data-theme="dark"] .note-textarea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-color);
}

[data-theme="dark"] .note-textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Checkbox & Switch */
[data-theme="dark"] .checkbox-box {
  background-color: var(--input-bg);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .checkbox-input:checked + .checkbox-box {
  background-color: #6366f1;
  border-color: #6366f1;
}

[data-theme="dark"] .checkbox-input:focus + .checkbox-box {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .checkbox-wrapper {
  color: var(--text-secondary);
}

[data-theme="dark"] .switch-slider {
  background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .switch input:checked + .switch-slider {
  background-color: #6366f1;
}

[data-theme="dark"] .checkbox,
[data-theme="dark"] .radio {
  accent-color: #6366f1;
}

/* ================================
   BUTTONS
   ================================ */
[data-theme="dark"] .btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .btn-outline {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .btn-outline-primary {
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .btn-ghost {
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .icon-btn {
  color: var(--text-tertiary);
}

[data-theme="dark"] .icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .icon-btn:active {
  background-color: rgba(255, 255, 255, 0.12);
}

/* ================================
   BADGES
   ================================ */
[data-theme="dark"] .badge-primary {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

[data-theme="dark"] .badge-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

[data-theme="dark"] .badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

[data-theme="dark"] .badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .badge-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

[data-theme="dark"] .badge-info {
  background-color: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}

/* ================================
   LISTS & TABS
   ================================ */
[data-theme="dark"] .list-item {
  border-color: var(--border-color);
}

[data-theme="dark"] .list-item-interactive:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .list-item-title {
  color: var(--text-primary);
}

[data-theme="dark"] .list-item-subtitle {
  color: var(--text-tertiary);
}

[data-theme="dark"] .divider {
  background-color: var(--border-color);
}

[data-theme="dark"] .tabs {
  border-color: var(--border-color);
}

[data-theme="dark"] .tab {
  color: var(--text-tertiary);
}

[data-theme="dark"] .tab:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .tab.active {
  color: #a5b4fc;
  border-bottom-color: #6366f1;
}

/* ================================
   DROPDOWNS
   ================================ */
[data-theme="dark"] .dropdown-menu {
  background-color: #1e1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item-danger {
  color: #f87171;
}

[data-theme="dark"] .dropdown-item-danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .dropdown-divider {
  background-color: var(--border-color);
}

/* ================================
   ALERTS
   ================================ */
[data-theme="dark"] .alert-info {
  background-color: rgba(6, 182, 212, 0.1);
  color: #22d3ee;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

[data-theme="dark"] .alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* ================================
   PROGRESS BARS
   ================================ */
[data-theme="dark"] .progress {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .progress-bar {
  background-color: #6366f1;
}

/* ================================
   SKELETON
   ================================ */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

/* ================================
   NAVIGATION
   ================================ */
[data-theme="dark"] .app-header {
  background-color: var(--nav-bg);
  border-color: var(--border-color);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .app-bottom-nav {
  background-color: var(--nav-bg);
  border-color: var(--border-color);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .popup-menu {
  background-color: var(--bg-color);
  border-color: var(--border-color);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ================================
   MODALS
   ================================ */
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

[data-theme="dark"] .modal-content {
  background: #1e1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-header {
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-close {
  color: var(--text-tertiary);
}

[data-theme="dark"] .modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
  border-color: var(--border-color);
}

/* ================================
   SCORE INPUT COMPONENTS
   ================================ */
[data-theme="dark"] .score-input {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .score-input-name {
  color: var(--text-primary);
}

[data-theme="dark"] .score-input-display .score-value {
  color: #a5b4fc;
}

[data-theme="dark"] .numpad-btn {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

[data-theme="dark"] .numpad-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .numpad-btn:active {
  background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .numpad-btn.numpad-clear {
  background-color: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

[data-theme="dark"] .numpad-btn.numpad-clear:hover {
  background-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .numpad-btn.numpad-backspace {
  background-color: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

[data-theme="dark"] .numpad-btn.numpad-backspace:hover {
  background-color: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .score-stepper-btn {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .score-stepper-btn:hover:not(:disabled) {
  background-color: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

[data-theme="dark"] .score-input-field {
  background-color: var(--input-bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .score-input-field:focus {
  border-color: #6366f1;
}

[data-theme="dark"] .score-input-winner {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
}

[data-theme="dark"] .score-input-winner:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .score-input-position.position-gold {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .score-input-position.position-silver {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}

[data-theme="dark"] .score-input-position.position-bronze {
  background: rgba(217, 119, 6, 0.15);
  color: #f59e0b;
}

/* ================================
   WIZARD COMPONENTS
   ================================ */
[data-theme="dark"] .wizard-step-indicators {
  border-color: var(--border-color);
}

[data-theme="dark"] .step-indicator {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-tertiary);
}

[data-theme="dark"] .step-indicator:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .step-indicator.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
}

[data-theme="dark"] .step-indicator.completed {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

[data-theme="dark"] .wizard-navigation {
  border-color: var(--border-color);
}

[data-theme="dark"] .wizard-content {
  color: var(--text-primary);
}

[data-theme="dark"] .step-header h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .step-header p {
  color: var(--text-secondary);
}

/* ================================
   ALHAMBRA & GAME-SPECIFIC
   ================================ */
[data-theme="dark"] .alhambra-player-card,
[data-theme="dark"] .wall-player-card,
[data-theme="dark"] .module-player-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .building-row,
[data-theme="dark"] .wall-row {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .wall-row {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .building-section {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .player-input {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .stepper-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .stepper-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .round-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .round-btn:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="dark"] .round-btn.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
}

[data-theme="dark"] .alhambra-legend {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .legend-item {
  background: rgba(255, 255, 255, 0.04);
}

/* Summary cards */
[data-theme="dark"] .summary-player-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .summary-player-card.winner {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent);
}

[data-theme="dark"] .building-detail,
[data-theme="dark"] .module-detail {
  background: rgba(255, 255, 255, 0.04);
}

/* ================================
   EXPANSION SELECTOR
   ================================ */
[data-theme="dark"] .expansion-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .expansion-card.has-selection {
  border-color: rgba(99, 102, 241, 0.5);
}

[data-theme="dark"] .expansion-header:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .expansion-header .expansion-name {
  color: var(--text-primary);
}

[data-theme="dark"] .expansion-modules {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-color);
}

[data-theme="dark"] .module-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .module-name {
  color: var(--text-primary);
}

[data-theme="dark"] .module-item:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .module-item.selected {
  border-color: rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .module-item.selected .module-name {
  color: #c7d2fe;
}

[data-theme="dark"] .module-checkbox {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .module-item.selected .module-checkbox {
  background: #6366f1;
  border-color: #6366f1;
}

[data-theme="dark"] .scoring-badge,
[data-theme="dark"] .module-scoring-tag {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .selection-summary {
  background: rgba(99, 102, 241, 0.12);
}

[data-theme="dark"] .summary-count {
  color: #c7d2fe;
}

/* Compact expansion selector (chips) */
[data-theme="dark"] .expansion-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .expansion-title {
  color: var(--text-primary);
}

[data-theme="dark"] .module-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

[data-theme="dark"] .module-chip:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.12);
  color: #c7d2fe;
}

[data-theme="dark"] .module-chip.selected {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

[data-theme="dark"] .chip-scoring {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
}

[data-theme="dark"] .module-chip.selected .chip-scoring {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ================================
   GAMIFICATION / MEDALS / XP
   ================================ */
[data-theme="dark"] .rank-badge.rank-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #451a03;
}

[data-theme="dark"] .rank-badge.rank-2 {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: white;
}

[data-theme="dark"] .rank-badge.rank-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #451a03;
}

[data-theme="dark"] .rank-badge.rank-other {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-tertiary);
}

[data-theme="dark"] .position-badge.position-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #451a03;
}

[data-theme="dark"] .position-badge.position-2 {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: white;
}

[data-theme="dark"] .position-badge.position-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #451a03;
}

/* ================================
   PLAY PAGE
   ================================ */
[data-theme="dark"] .play-timer-section {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
}

[data-theme="dark"] .play-timer {
  color: #a5b4fc;
}

[data-theme="dark"] .play-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .player-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .round-indicator {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .note-item {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .quick-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

[data-theme="dark"] .quick-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(99, 102, 241, 0.3);
}

/* ================================
   AUTH PAGES
   ================================ */
[data-theme="dark"] .auth-page {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}

[data-theme="dark"] .auth-container {
  background-color: #1e1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .auth-header h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .auth-header p {
  color: var(--text-secondary);
}

[data-theme="dark"] .auth-logo {
  background-color: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
}

[data-theme="dark"] .auth-form .form-input,
[data-theme="dark"] .auth-form .input,
[data-theme="dark"] .auth-form input {
  background-color: #141020;
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f0f5;
}

[data-theme="dark"] .auth-form .form-input:focus,
[data-theme="dark"] .auth-form .input:focus,
[data-theme="dark"] .auth-form input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
  background-color: #0f0d1a;
}

[data-theme="dark"] .auth-form .form-label {
  color: #dcd8e6;
}

[data-theme="dark"] .auth-options {
  color: var(--text-secondary);
}

[data-theme="dark"] .auth-options a {
  color: #a5b4fc;
}

[data-theme="dark"] .auth-error {
  background-color: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .auth-divider {
  color: var(--text-tertiary);
}

[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after {
  background-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .auth-footer {
  color: var(--text-secondary);
}

[data-theme="dark"] .auth-footer a {
  color: #a5b4fc;
}

[data-theme="dark"] .auth-terms {
  color: var(--text-tertiary);
}

[data-theme="dark"] .auth-terms a {
  color: #a5b4fc;
}

/* Password strength */
[data-theme="dark"] .strength-bar {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .strength-label {
  color: var(--text-tertiary);
}

/* Social login */
[data-theme="dark"] .social-btn {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

[data-theme="dark"] .social-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ================================
   EMPTY STATE
   ================================ */
[data-theme="dark"] .empty-state-icon {
  color: var(--text-tertiary);
}

[data-theme="dark"] .empty-state-title {
  color: var(--text-primary);
}

[data-theme="dark"] .empty-state-description {
  color: var(--text-secondary);
}

/* ================================
   AVATAR
   ================================ */
[data-theme="dark"] .avatar {
  background-color: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

[data-theme="dark"] .avatar-group .avatar {
  border-color: var(--bg-color);
}

[data-theme="dark"] .avatar-status::after {
  border-color: var(--bg-color);
}

/* ================================
   TOOLTIP
   ================================ */
[data-theme="dark"] .tooltip-content {
  background-color: #2d2844;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tooltip-content::after {
  border-top-color: #2d2844;
}

/* ================================
   START GAME SECTION
   ================================ */
[data-theme="dark"] .module-tag {
  background: var(--gradient-primary);
  color: white;
}

[data-theme="dark"] .summary-players .player-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .treasure-scoring-table {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
}

/* ================================
   CODE & MISC
   ================================ */
[data-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: #6366f1;
}

/* ================================
   PAGINATION
   ================================ */
[data-theme="dark"] .pagination .page-link {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

[data-theme="dark"] .pagination .page-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
}

/* ================================
   SCROLLBAR
   ================================ */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ================================
   SELECTION
   ================================ */
[data-theme="dark"] ::selection {
  background-color: rgba(99, 102, 241, 0.4);
  color: white;
}

/* ================================
   SOCIAL PAGES (Friends, Invitations)
   ================================ */
[data-theme="dark"] .status-pending {
  background-color: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .status-accepted {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .status-expired {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

[data-theme="dark"] .request-card:hover,
[data-theme="dark"] .blocked-card:hover,
[data-theme="dark"] .invitation-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ================================
   EVENTS PAGES
   ================================ */
[data-theme="dark"] .event-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="dark"] .event-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .event-info-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="dark"] .rsvp-btn {
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .rsvp-btn.attending.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #34d399;
  color: #34d399;
}

[data-theme="dark"] .rsvp-btn.maybe.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: #fbbf24;
  color: #fbbf24;
}

[data-theme="dark"] .rsvp-btn.declined.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .event-game-item {
  background: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="dark"] .event-notes-section {
  background: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="dark"] .game-vote-bar {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .game-vote-bar-fill {
  background: #818cf8;
}

[data-theme="dark"] .back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}