/* ChessElementa CSS Variables - Shared & Theme Definitions */ :root { /* ===== Responsive Breakpoints ===== */ --breakpoint-mobile: 768px; --breakpoint-tablet: 1024px; --breakpoint-desktop: 1200px; /* ===== Layout Variables (Shared) ===== */ --header-height: 70px; --header-height-mobile: 60px; --bottom-bar-height: 80px; --sidebar-width: 250px; --sidebar-width-mobile: 250px; /* Board */ --board-padding: 24px; --board-padding-mobile: 12px; --cell-gap: 4px; --cell-size: 60px; --cell-size-mobile: 48px; --cell-radius: 6px; /* Panel & Button Radius */ --panel-radius: 16px; --panel-radius-mobile: 12px; --btn-radius: 8px; /* Typography */ /* --font-chinese: 'Ma Shan Zheng', cursive; */ --font-ui: 'Outfit', 'Noto Sans SC', sans-serif; /* Spacing */ --gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 16px; --gap-xl: 24px; /* Z-indices */ --z-terrain: 1; --z-indicator: 5; --z-piece: 10; --z-piece-text: 20; --z-hover: 100; --z-sidebar: 200; --z-overlay: 150; --z-header: 100; --z-bottom-bar: 100; /* Animation Durations */ --transition-fast: 0.15s; --transition-normal: 0.25s; --transition-slow: 0.35s; } /* ===== Glass Theme Variables ===== */ .theme-glass { /* Primary Colors - Refined for dark mode */ --primary-color: #8b5cf6; --primary-color-dim: rgba(139, 92, 246, 0.3); --secondary-color: #22d3ee; --accent-color: #f472b6; --accent-warm: #fbbf24; /* Piece Colors */ --red-piece-bg: radial-gradient(circle at 30% 30%, #ef4444, #b91c1c); --red-piece-border: #fca5a5; --red-piece-text: #fef2f2; --red-piece-shadow: 0 2px 4px rgba(185, 28, 28, 0.6); --black-piece-bg: radial-gradient(circle at 30% 30%, #4b5563, #1f2937); --black-piece-border: #9ca3af; --black-piece-text: #f9fafb; --black-piece-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); --element-color: #fbbf24; --element-glow: rgba(251, 191, 36, 0.5); /* Text Colors */ --text-main: #f8fafc; --text-secondary: rgba(248, 250, 252, 0.8); --text-muted: rgba(248, 250, 252, 0.6); --text-dim: rgba(248, 250, 252, 0.4); --level-title-color: #a78bfa; /* Purple accent for level titles */ /* Background - Deep space gradient */ --body-bg: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 40%, #0d1b2a 100%); --body-bg-size: 400% 400%; /* Glass Panel */ --panel-bg: rgba(255, 255, 255, 0.03); --panel-bg-solid: #1e1e3f; --panel-border: 1px solid rgba(255, 255, 255, 0.08); --panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --panel-blur: blur(16px); /* Header */ --header-bg: rgba(15, 15, 35, 0.85); --header-border: 1px solid rgba(255, 255, 255, 0.1); /* Board */ --board-bg: rgba(255, 255, 255, 0.02); --board-border: 1px solid rgba(255, 255, 255, 0.06); --board-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --board-blur: blur(8px); /* Cells */ --cell-bg: rgba(255, 255, 255, 0.04); --cell-border: 1px solid rgba(255, 255, 255, 0.03); --cell-hover-bg: rgba(255, 255, 255, 0.1); --cell-hover-border: rgba(255, 255, 255, 0.15); --cell-selected-bg: rgba(34, 211, 238, 0.15); --cell-selected-border: var(--secondary-color); --cell-selected-shadow: 0 0 20px rgba(34, 211, 238, 0.25), inset 0 0 15px rgba(34, 211, 238, 0.1); --cell-valid-bg: rgba(255, 255, 255, 0.08); --move-indicator-bg: rgba(34, 211, 238, 0.6); --move-indicator-shadow: 0 0 12px rgba(34, 211, 238, 0.5); --capture-indicator-bg: rgba(239, 68, 68, 0.8); --capture-indicator-shadow: 0 0 12px rgba(239, 68, 68, 0.6); --capture-cell-shadow: inset 0 0 20px rgba(239, 68, 68, 0.25); --capture-cell-border: rgba(239, 68, 68, 0.4); /* Terrain */ --wall-bg: linear-gradient(145deg, #4a4a6a 0%, #3a3a5a 50%, #2d2d4a 100%); --wall-border: 1px solid rgba(100, 100, 140, 0.4); --river-bg: rgba(34, 211, 238, 0.08); --river-border: 1px solid rgba(34, 211, 238, 0.15); --river-symbol-color: rgba(34, 211, 238, 0.3); --pit-gradient: radial-gradient(circle at 50% 50%, #000000 25%, #1a1a2e 50%, transparent 70%); /* Buttons */ --btn-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(109, 40, 217, 0.9) 100%); --btn-hover-bg: linear-gradient(135deg, rgba(139, 92, 246, 1) 0%, rgba(109, 40, 217, 1) 100%); --btn-text: #ffffff; --btn-border: 1px solid rgba(255, 255, 255, 0.12); --btn-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); --btn-hover-shadow: 0 6px 20px rgba(139, 92, 246, 0.4); --btn-disabled-bg: rgba(255, 255, 255, 0.05); --btn-disabled-text: rgba(255, 255, 255, 0.25); --btn-disabled-border: 1px solid rgba(255, 255, 255, 0.03); /* Inputs */ --input-bg: rgba(0, 0, 0, 0.3); --input-border: 1px solid rgba(255, 255, 255, 0.08); --input-focus-border: var(--primary-color); --input-focus-bg: rgba(139, 92, 246, 0.1); --input-option-bg: #1a1a3e; /* History */ --history-bg: rgba(0, 0, 0, 0.25); --history-border: 1px solid rgba(255, 255, 255, 0.05); --history-item-border: 1px solid rgba(255, 255, 255, 0.03); --history-current-bg: rgba(139, 92, 246, 0.2); /* Status Messages */ --status-error-bg: rgba(239, 68, 68, 0.12); --status-error-text: #fca5a5; --status-error-border: rgba(239, 68, 68, 0.25); --status-success-bg: rgba(34, 197, 94, 0.12); --status-success-text: #86efac; --status-success-border: rgba(34, 197, 94, 0.25); --status-info-bg: rgba(59, 130, 246, 0.12); --status-info-text: #93c5fd; --status-info-border: rgba(59, 130, 246, 0.25); /* Editor */ --tool-btn-bg: rgba(255, 255, 255, 0.04); --tool-btn-hover-bg: rgba(255, 255, 255, 0.08); --tool-btn-active-bg: var(--primary-color); --tool-btn-active-shadow: 0 0 20px rgba(139, 92, 246, 0.4); --bench-item-bg: rgba(255, 255, 255, 0.03); --bench-item-hover-bg: rgba(255, 255, 255, 0.08); --bench-item-selected-border: var(--secondary-color); --bench-item-selected-bg: rgba(34, 211, 238, 0.1); --bench-item-selected-shadow: 0 0 15px rgba(34, 211, 238, 0.2); /* Mode Toggle */ --mode-toggle-bg: rgba(255, 255, 255, 0.05); --mode-toggle-border: 1px solid rgba(255, 255, 255, 0.1); --mode-toggle-active-bg: rgba(34, 197, 94, 0.15); --mode-toggle-active-text: #86efac; --mode-toggle-active-border: #86efac; /* Area Damage */ --area-damage-bg: rgba(239, 68, 68, 0.2); /* Scrollbar */ --scrollbar-track: rgba(0, 0, 0, 0.15); --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* Win/Lose States */ --win-color: #22c55e; --lose-color: #ef4444; --btn-win-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 1) 100%); --btn-win-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 40px rgba(34, 197, 94, 0.3); --btn-lose-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 1) 100%); --btn-lose-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.3); /* Mobile Bottom Bar */ --bottom-bar-bg: rgba(15, 15, 35, 0.95); --bottom-bar-border: 1px solid rgba(255, 255, 255, 0.08); --bottom-btn-bg: rgba(255, 255, 255, 0.05); --bottom-btn-hover-bg: rgba(255, 255, 255, 0.1); /* Typography */ --font-chinese: 'Ma Shan Zheng', cursive; /* Help Button */ --help-btn-bg: rgba(255, 255, 255, 0.05); --help-btn-hover-bg: rgba(255, 255, 255, 0.1); --help-btn-border: 1px solid rgba(255, 255, 255, 0.1); --help-btn-shadow: 0 0 12px rgba(255, 255, 255, 0.2); } /* ===== Wood Theme Variables ===== */ .theme-wood { /* Primary Colors - Warm gold tones */ --primary-color: #f59e0b; --primary-color-dim: rgba(245, 158, 11, 0.3); --secondary-color: #78716c; --accent-color: #dc2626; --accent-warm: #fbbf24; /* Piece Colors - Golden red pieces, dark wood black pieces */ --red-piece-bg: radial-gradient(circle at 35% 35%, #fcd34d, #f59e0b); --red-piece-border: #ea580c; --red-piece-text: #7c2d12; --red-piece-shadow: 0 2px 0 rgba(255, 255, 255, 0.25); --black-piece-bg: radial-gradient(circle at 35% 35%, #78716c, #44403c); --black-piece-border: #292524; --black-piece-text: #fef3c7; --black-piece-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); --element-color: #fef08a; --element-glow: rgba(254, 240, 138, 0.5); /* Text Colors - Warm cream */ --text-main: #fef3c7; --text-secondary: #fde68a; --text-muted: #d6d3d1; --text-dim: #a8a29e; --level-title-color: #fcd34d; /* Warm gold for level titles */ /* Background - Rich walnut */ --body-bg: radial-gradient(ellipse at center, #3d2817 0%, #1c0f0a 100%); --body-bg-size: auto; /* Wood Panel - Oak with grain */ --panel-bg: linear-gradient(180deg, #5c4033 0%, #4a3728 50%, #3d2e22 100%); --panel-bg-solid: #4a3728; --panel-border: 2px solid #6d5344; --panel-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.15), 0 8px 24px rgba(0, 0, 0, 0.5); --panel-blur: none; /* Header */ --header-bg: linear-gradient(180deg, #5c4033 0%, #4a3728 100%); --header-border: 2px solid #6d5344; --header-logo-filter: saturate(0.7); /* Board - Light maple playing surface */ --board-bg: #d4a574; --board-border: 3px solid #3d2e22; --board-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.15); --board-blur: none; /* Cells */ --cell-bg: transparent; --cell-border: 1px solid rgba(60, 40, 20, 0.25); --cell-hover-bg: rgba(255, 255, 255, 0.15); --cell-hover-border: rgba(60, 40, 20, 0.25); --cell-selected-bg: rgba(245, 158, 11, 0.25); --cell-selected-border: #573905; --cell-selected-shadow: 0 0 15px rgba(245, 158, 11, 0.4); --cell-valid-bg: rgba(255, 255, 255, 0.08); --move-indicator-bg: rgba(168, 99, 3, 0.75); --move-indicator-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); --capture-indicator-bg: rgba(220, 38, 38, 0.85); --capture-indicator-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); --capture-cell-shadow: inset 0 0 15px rgba(220, 38, 38, 0.35); --capture-cell-border: rgba(220, 38, 38, 0.5); /* Terrain */ --wall-bg: linear-gradient(145deg, #57534e 0%, #44403c 100%); --wall-border: 1px solid #3d3835; --river-bg: rgba(56, 189, 248, 0.12); --river-border: none; --river-symbol-color: rgba(56, 189, 248, 0.4); --pit-gradient: radial-gradient(circle at 50% 50%, #3d2e22 30%, #5a4a3a 60%, #d4a574 85%, transparent 95%); /* Buttons - Carved wood */ --btn-bg: linear-gradient(180deg, #78716c 0%, #57534e 50%, #44403c 100%); --btn-hover-bg: linear-gradient(180deg, #8b847c 0%, #6b6460 50%, #57534e 100%); --btn-text: #fef3c7; --btn-border: 1px solid #44403c; --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 6px rgba(0, 0, 0, 0.35); --btn-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 8px rgba(0, 0, 0, 0.4); --btn-disabled-bg: #3d2e22; --btn-disabled-text: #78716c; --btn-disabled-border: 1px solid #2d1f14; /* Inputs */ --input-bg: #2d1f14; --input-border: 1px solid #4a3728; --input-focus-border: var(--primary-color); --input-focus-bg: #3d2e22; --input-option-bg: #3d2e22; /* History */ --history-bg: rgba(0, 0, 0, 0.2); --history-border: 1px solid rgba(255, 220, 180, 0.1); --history-item-border: 1px solid rgba(255, 220, 180, 0.05); --history-current-bg: rgba(245, 158, 11, 0.2); /* Status Messages */ --status-error-bg: rgba(220, 38, 38, 0.2); --status-error-text: #fca5a5; --status-error-border: rgba(220, 38, 38, 0.4); --status-success-bg: rgba(22, 163, 74, 0.2); --status-success-text: #86efac; --status-success-border: rgba(22, 163, 74, 0.4); --status-info-bg: rgba(59, 130, 246, 0.2); --status-info-text: #93c5fd; --status-info-border: rgba(59, 130, 246, 0.4); /* Editor */ --tool-btn-bg: rgba(255, 220, 180, 0.05); --tool-btn-hover-bg: rgba(255, 220, 180, 0.1); --tool-btn-active-bg: #f59e0b; --tool-btn-active-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); --bench-item-bg: rgba(255, 220, 180, 0.05); --bench-item-hover-bg: rgba(255, 220, 180, 0.1); --bench-item-selected-border: #f59e0b; --bench-item-selected-bg: rgba(245, 158, 11, 0.15); --bench-item-selected-shadow: none; /* Mode Toggle */ --mode-toggle-bg: rgba(255, 220, 180, 0.08); --mode-toggle-border: 1px solid rgba(255, 220, 180, 0.15); --mode-toggle-active-bg: rgba(22, 163, 74, 0.2); --mode-toggle-active-text: #86efac; --mode-toggle-active-border: #86efac; /* Area Damage */ --area-damage-bg: rgba(220, 38, 38, 0.25); /* Scrollbar */ --scrollbar-track: rgba(0, 0, 0, 0.2); --scrollbar-thumb: rgba(255, 220, 180, 0.2); --scrollbar-thumb-hover: rgba(255, 220, 180, 0.3); /* Win/Lose States - Warm tones for wood theme */ --win-color: #f7d45f; --lose-color: #7f7973; --btn-win-bg: linear-gradient(180deg, #f7d45f 0%, #f59e0b 50%, #dc2626 100%); --btn-win-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(245, 158, 11, 0.5); --btn-lose-bg: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #dc2626 100%); --btn-lose-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(239, 68, 68, 0.5); /* Mobile Bottom Bar */ --bottom-bar-bg: linear-gradient(180deg, #5c4033 0%, #4a3728 100%); --bottom-bar-border: 2px solid #6d5344; --bottom-btn-bg: rgba(255, 220, 180, 0.08); --bottom-btn-hover-bg: rgba(255, 220, 180, 0.15); /* Typography */ --font-chinese: cursive; /* Help Button */ --help-btn-bg: rgba(255, 255, 255, 0.05); --help-btn-hover-bg: rgba(255, 255, 255, 0.1); --help-btn-border: 1px solid rgba(255, 255, 255, 0.1); --help-btn-shadow: 0 0 12px rgba(255, 255, 255, 0.2); }